Universal Component

[YunusMechery]

1. Universal component and an example usage.
2. Added all HTML attributes
3. Added all HTMX attributes
4. Calculator app example is provided.
5. Bottom-up approach is used in coding SQLPage, ie, first child tags are stored in SET json varaibles and finally appended to parent container
6. Please let me know your thoughts on universal component
7. Use SQLPage built-in components for most cases and use universal component for more custom apps and more controls
8. To use universal component, place universal.handlebars in sqlpage/templates folder

universal.handlebars

{{#*inline "universal"}}
<{{#if tag}}{{tag}}{{else}}div{{/if~}}
    {{!--Basic HTML attributes  --}}
    {{~#if id}} id="{{id}}"{{/if~}}
    {{~#if name}} name="{{name}}"{{/if~}} 
    {{~#if class}} class="{{class}}"{{/if~}}
    {{~#if type}} type="{{type}}"{{/if~}}
    {{!-- Form and input related attributes --}}
    {{~#if accept-charset}} accept-charset="{{accept-charset}}"{{/if~}}
    {{~#if accept}} accept="{{accept}}"{{/if~}}
    {{~#if action}} action="{{action}}"{{/if~}}
    {{~#if alpha}} alpha="{{alpha}}"{{/if~}}
    {{~#if autocapitalize}} autocapitalize="{{autocapitalize}}"{{/if~}}
    {{~#if autocomplete}} autocomplete="{{autocomplete}}"{{/if~}}
    {{~#if autocorrect}} autocorrect="{{autocorrect}}"{{/if~}}
    {{~#if capture}} capture="{{capture}}"{{/if~}}
    {{~#if checked}} checked{{/if~}}
    {{~#if colorspace}} colorspace="{{colorspace}}"{{/if~}}
    {{~#if colspan}} colspan="{{colspan}}"{{/if~}}
    {{~#if cols}} cols="{{cols}}"{{/if~}}
    {{~#if contenteditable}} contenteditable="{{contenteditable}}"{{/if~}}
    {{~#if dirname}} dirname="{{dirname}}"{{/if~}}
    {{~#if disabled}} disabled{{/if~}}
    {{~#if enctype}} enctype="{{enctype}}"{{/if~}}
    {{~#if enterkeyhint}} enterkeyhint="{{enterkeyhint}}"{{/if~}}
    {{~#if formaction}} formaction="{{formaction}}"{{/if~}}
    {{~#if formenctype}} formenctype="{{formenctype}}"{{/if~}}
    {{~#if formmethod}} formmethod="{{formmethod}}"{{/if~}}
    {{~#if formnovalidate}} formnovalidate{{/if~}}
    {{~#if formtarget}} formtarget="{{formtarget}}"{{/if~}}
    {{~#if form}} form="{{form}}"{{/if~}}
    {{~#if for}} for="{{for}}"{{/if~}}
    {{~#if hidden}} hidden{{/if~}}
    {{~#if inputmode}} inputmode="{{inputmode}}"{{/if~}}
    {{~#if list}} list="{{list}}"{{/if~}}
    {{~#if maxlength}} maxlength="{{maxlength}}"{{/if~}}
    {{~#if method}} method="{{method}}"{{/if~}}
    {{~#if minlength}} minlength="{{minlength}}"{{/if~}}
    {{~#if multiple}} multiple{{/if~}}
    {{~#if novalidate}} novalidate{{/if~}}
    {{~#if pattern}} pattern="{{pattern}}"{{/if~}}
    {{~#if placeholder}} placeholder="{{placeholder}}"{{/if~}}
    {{~#if readonly}} readonly{{/if~}}
    {{~#if required}} required{{/if~}}
    {{~#if selected}} selected{{/if~}}
    {{~#if size}} size="{{size}}"{{/if~}}
    {{~#if spellcheck}} spellcheck="{{spellcheck}}"{{/if~}}
    {{!-- iFrame attributes --}}
    {{~#if allow}} allow="{{allow}}"{{/if~}}
    {{~#if allowfullscreen}} allowfullscreen{{/if~}}
    {{~#if allowpaymentrequest}} allowpaymentrequest{{/if~}}
    {{~#if allowusermedia}} allowusermedia{{/if~}}
    {{~#if csp}} csp="{{csp}}"{{/if~}}
    {{!-- ARIA and navigational attributes--}}
    {{~#if accesskey}} accesskey="{{accesskey}}"{{/if~}}
    {{~#if alt}} alt="{{alt}}"{{/if~}}
    {{!--this attribute causes errors in SQLPage: {{~#if as}} as="{{as}}"{{/if~}} --}}
    {{~#if autofocus}} autofocus{{/if~}}
    {{~#if aria_label}} aria-label="{{aria_label}}"{{/if~}}
    {{~#if aria_hidden}} aria-hidden="{{aria_hidden}}"{{/if~}}
    {{~#if aria_expanded}} aria-expanded="{{aria_expanded}}"{{/if~}}
    {{~#if aria_controls}} aria-controls="{{aria_controls}}"{{/if~}}
    {{~#if aria_describedby}} aria-describedby="{{aria_describedby}}"{{/if~}}
    {{~#if aria_labelledby}} aria-labelledby="{{aria_labelledby}}"{{/if~}}
    {{!-- Styling Attributes --}}
    {{~#if anchor}} anchor="{{anchor}}"{{/if~}}
    {{~#if background}} background="{{background}}"{{/if~}}
    {{~#if bgcolor}} bgcolor="{{bgcolor}}"{{/if~}}
    {{~#if border}} border="{{border}}"{{/if~}}
    {{~#if color}} color="{{color}}"{{/if~}}
    {{~#if coords}} coords="{{coords}}"{{/if~}}
    {{~#if draggable}} draggable="{{draggable}}"{{/if~}}
    {{~#if font}} font="{{font}}"{{/if~}}
    {{~#if headers}} headers="{{headers}}"{{/if~}}
    {{~#if height}} height="{{height}}"{{/if~}}
    {{~#if high}} high="{{high}}"{{/if~}}
    {{~#if lang}} lang="{{lang}}"{{/if~}}
    {{~#if open}} open{{/if~}}
    {{~#if reversed}} reversed{{/if~}}
    {{!-- External asset related attributes --}}
    {{~#if async}} async="{{async}}"{{/if~}}
    {{~#if autoplay}} autoplay{{/if~}}
    {{~#if charset}} charset="{{charset}}"{{/if~}}
    {{~#if cite}} cite="{{cite}}"{{/if~}}
    {{~#if content}} content="{{content}}"{{/if~}}
    {{~#if controls}} controls{{/if~}}
    {{~#if crossorigin}} crossorigin="{{crossorigin}}"{{/if~}}
    {{~#if data}} data="{{data}}"{{/if~}}
    {{~#if datetime}} datetime="{{datetime}}"{{/if~}}
    {{~#if decoding}} decoding="{{decoding}}"{{/if~}}
    {{~#if default}} default{{/if~}}
    {{~#if defer}} defer{{/if~}}
    {{~#if dir}} dir="{{dir}}"{{/if~}}
    {{~#if download}} download{{/if~}}
    {{~#if elementtiming}} elementtiming="{{elementtiming}}"{{/if~}}
    {{~#if fetchpriority}} fetchpriority="{{fetchpriority}}"{{/if~}}
    {{~#if hreflang}} hreflang="{{hreflang}}"{{/if~}}
    {{~#if href}} href="{{href}}"{{/if~}}
    {{~#if http-equiv}} http-equiv="{{http-equiv}}"{{/if~}}
    {{~#if integrity}} integrity="{{integrity}}"{{/if~}}
    {{~#if ismap}} ismap{{/if~}}
    {{~#if itemid}} itemid="{{itemid}}"{{/if~}}
    {{~#if itemprop}} itemprop="{{itemprop}}"{{/if~}}
    {{~#if itemref}} itemref="{{itemref}}"{{/if~}}
    {{~#if itemscope}} itemscope{{/if~}}
    {{~#if itemtype}} itemtype="{{itemtype}}"{{/if~}}
    {{~#if kind}} kind="{{kind}}"{{/if~}}
    {{~#if label}} label="{{label}}"{{/if~}}
    {{~#if loading}} loading="{{loading}}"{{/if~}}
    {{~#if loop}} loop{{/if~}}
    {{~#if low}} low="{{low}}"{{/if~}}
    {{~#if manifest}} manifest="{{manifest}}"{{/if~}}
    {{~#if max}} max="{{max}}"{{/if~}}
    {{~#if media}} media="{{media}}"{{/if~}}
    {{~#if min}} min="{{min}}"{{/if~}}
    {{~#if muted}} muted{{/if~}}
    {{~#if optimum}} optimum="{{optimum}}"{{/if~}}
    {{~#if ping}} ping="{{ping}}"{{/if~}}
    {{~#if playsinline}} playsinline{{/if~}}
    {{~#if poster}} poster="{{poster}}"{{/if~}}
    {{~#if preload}} preload="{{preload}}"{{/if~}}
    {{~#if referrerpolicy}} referrerpolicy="{{referrerpolicy}}"{{/if~}}
    {{~#if rel}} rel="{{rel}}"{{/if~}}
    {{~#if role}} role="{{role}}"{{/if~}}
    {{~#if rowspan}} rowspan="{{rowspan}}"{{/if~}}
    {{~#if rows}} rows="{{rows}}"{{/if~}}
    {{~#if sandbox}} sandbox="{{sandbox}}"{{/if~}}
    {{~#if scope}} scope="{{scope}}"{{/if~}}
    {{~#if seamless}} seamless{{/if~}}
    {{~#if shape}} shape="{{shape}}"{{/if~}}
    {{~#if sizes}} sizes="{{sizes}}"{{/if~}}
    {{~#if slot}} slot="{{slot}}"{{/if~}}
    {{~#if span}} span="{{span}}"{{/if~}}
    {{~#if srcdoc}} srcdoc="{{srcdoc}}"{{/if~}}
    {{~#if srclang}} srclang="{{srclang}}"{{/if~}}
    {{~#if srcset}} srcset="{{srcset}}"{{/if~}}
    {{~#if src}} src="{{src}}"{{/if~}}
    {{~#if start}} start="{{start}}"{{/if~}}
    {{~#if step}} step="{{step}}"{{/if~}}
    {{~#if style}} style="{{style}}"{{/if~}}
    {{~#if tabindex}} tabindex="{{tabindex}}"{{/if~}}
    {{~#if target}} target="{{target}}"{{/if~}}
    {{~#if title}} title="{{title}}"{{/if~}}
    {{~#if translate}} translate="{{translate}}"{{/if~}}
    {{~#if usemap}} usemap="{{usemap}}"{{/if~}}
    {{~#if value}} value="{{value}}"{{/if~}}
    {{~#if width}} width="{{width}}"{{/if~}}
    {{~#if wrap}} wrap="{{wrap}}"{{/if~}}
    {{!-- HTMX attributes --}}
    {{~#if hx_boost}} hx-boost="{{hx_boost}}"{{/if~}}
    {{~#if hx_confirm}} hx-confirm="{{hx_confirm}}"{{/if~}}
    {{~#if hx_current_url}} hx-current-url="{{hx_current_url}}"{{/if~}}
    {{~#if hx_delete}} hx-delete="{{hx_delete}}"{{/if~}}
    {{~#if hx_disabled_elt}} hx-disabled-elt="{{hx_disabled_elt}}"{{/if~}}
    {{~#if hx_disable}} hx-disable{{/if~}}
    {{~#if hx_disinherit}} hx-disinherit="{{hx_disinherit}}"{{/if~}}
    {{~#if hx_encoding}} hx-encoding="{{hx_encoding}}"{{/if~}}
    {{~#if hx_ext}} hx-ext="{{hx_ext}}"{{/if~}}
    {{~#if hx_get}} hx-get="{{hx_get}}"{{/if~}}
    {{~#if hx_headers}} hx-headers="{{hx_headers}}"{{/if~}}
    {{~#if hx_history_elt}} hx-history-elt="{{hx_history_elt}}"{{/if~}}
    {{~#if hx_history}} hx-history="{{hx_history}}"{{/if~}}
    {{~#if hx_include}} hx-include="{{hx_include}}"{{/if~}}
    {{~#if hx_indicator}} hx-indicator="{{hx_indicator}}"{{/if~}}
    {{~#if hx_inherit}} hx-inherit="{{hx_inherit}}"{{/if~}}
    {{~#if hx_params}} hx-params="{{hx_params}}"{{/if~}}
    {{~#if hx_patch}} hx-patch="{{hx_patch}}"{{/if~}}
    {{~#if hx_post}} hx-post="{{hx_post}}"{{/if~}}
    {{~#if hx_preserve}} hx-preserve{{/if~}}
    {{~#if hx_prompt}} hx-prompt="{{hx_prompt}}"{{/if~}}
    {{~#if hx_push_url}} hx-push-url="{{hx_push_url}}"{{/if~}}
    {{~#if hx_put}} hx-put="{{hx_put}}"{{/if~}}
    {{~#if hx_replace_url}} hx-replace-url="{{hx_replace_url}}"{{/if~}}
    {{~#if hx_request}} hx-request="{{hx_request}}"{{/if~}}
    {{~#if hx_select_oob}} hx-select-oob="{{hx_select_oob}}"{{/if~}}
    {{~#if hx_select}} hx-select="{{hx_select}}"{{/if~}}
    {{~#if hx_swap_oob}} hx-swap-oob="{{hx_swap_oob}}"{{/if~}}
    {{~#if hx_swap}} hx-swap="{{hx_swap}}"{{/if~}}
    {{~#if hx_sync}} hx-sync="{{hx_sync}}"{{/if~}}
    {{~#if hx_target}} hx-target="{{hx_target}}"{{else}} hx-target="body"{{/if~}}
    {{~#if hx_trigger}} hx-trigger="{{hx_trigger}}"{{/if~}}
    {{~#if hx_validate}} hx-validate="{{hx_validate}}"{{/if~}}
    {{~#if hx_vals}} hx-vals="{{hx_vals}}"{{/if~}}

>{{!-- 1. Render immediate text content --}}
    {{~#if contents}}{{{~contents~}}}{{/if~}}
    {{!-- 2. Render nested components --}}
    {{~#if sub_components}}
        {{~#each sub_components as |sub_component|}}
			
			{{> universal sub_component}}
        {{/each~}}
    {{/if~}}</{{~#if tag}}{{tag}}{{else}}div{{/if~}}>
	{{/inline}}
	
{{> universal this}}

Below AI generated helper function will be used in next sql file for maths calculation logic.
evaluate_expression.plsql

-- Helper function to evaluate mathematical expressions with operator precedence and brackets
CREATE OR REPLACE FUNCTION evaluate_expression(expr text) RETURNS numeric AS $$
DECLARE
  stack numeric[] := ARRAY[]::numeric[];
  ops char[] := ARRAY[]::char[];
  i int := 1;
  num text := '';
  c char;
  b numeric;
  a numeric;
  op char;
  prec_current int;
  prec_ops int;
BEGIN
  IF expr IS NULL OR expr = '' THEN RETURN 0; END IF;
  
  WHILE i <= length(expr) LOOP
    c := substring(expr, i, 1);
    
    -- Handle numbers
    IF c ~ '[0-9]' THEN
      num := num || c;
    ELSIF c IN ('+', '-', '*', '/', '(', ')') THEN
      -- Push accumulated number to stack
      IF num != '' THEN
        stack := array_append(stack, num::numeric);
        num := '';
      END IF;
      
      IF c = '(' THEN
        ops := array_append(ops, c);
      ELSIF c = ')' THEN
        -- Pop operators until '('
        WHILE array_length(ops, 1) > 0 AND ops[array_length(ops, 1)] != '(' LOOP
          b := stack[array_length(stack, 1)];
          stack := stack[1:array_length(stack, 1)-1];
          a := stack[array_length(stack, 1)];
          stack := stack[1:array_length(stack, 1)-1];
          op := ops[array_length(ops, 1)];
          ops := ops[1:array_length(ops, 1)-1];
          CASE op
            WHEN '+' THEN stack := array_append(stack, a + b);
            WHEN '-' THEN stack := array_append(stack, a - b);
            WHEN '*' THEN stack := array_append(stack, a * b);
            WHEN '/' THEN stack := array_append(stack, a / b);
          END CASE;
        END LOOP;
        -- Remove '('
        IF array_length(ops, 1) > 0 THEN
          ops := ops[1:array_length(ops, 1)-1];
        END IF;
      ELSIF c IN ('+', '-', '*', '/') THEN
        -- Determine precedence
        prec_current := CASE WHEN c IN ('*', '/') THEN 2 ELSE 1 END;
        -- Pop operators with higher or equal precedence
        WHILE array_length(ops, 1) > 0 AND ops[array_length(ops, 1)] != '(' LOOP
          op := ops[array_length(ops, 1)];
          prec_ops := CASE WHEN op IN ('*', '/') THEN 2 ELSE 1 END;
          EXIT WHEN prec_ops < prec_current;
          
          b := stack[array_length(stack, 1)];
          stack := stack[1:array_length(stack, 1)-1];
          a := stack[array_length(stack, 1)];
          stack := stack[1:array_length(stack, 1)-1];
          ops := ops[1:array_length(ops, 1)-1];
          CASE op
            WHEN '+' THEN stack := array_append(stack, a + b);
            WHEN '-' THEN stack := array_append(stack, a - b);
            WHEN '*' THEN stack := array_append(stack, a * b);
            WHEN '/' THEN stack := array_append(stack, a / b);
          END CASE;
        END LOOP;
        ops := array_append(ops, c);
      END IF;
    END IF;
    
    i := i + 1;
  END LOOP;
  
  -- Push remaining number
  IF num != '' THEN
    stack := array_append(stack, num::numeric);
  END IF;
  
  -- Pop remaining operators
  WHILE array_length(ops, 1) > 0 LOOP
    b := stack[array_length(stack, 1)];
    stack := stack[1:array_length(stack, 1)-1];
    a := stack[array_length(stack, 1)];
    stack := stack[1:array_length(stack, 1)-1];
    op := ops[array_length(ops, 1)];
    ops := ops[1:array_length(ops, 1)-1];
    CASE op
      WHEN '+' THEN stack := array_append(stack, a + b);
      WHEN '-' THEN stack := array_append(stack, a - b);
      WHEN '*' THEN stack := array_append(stack, a * b);
      WHEN '/' THEN stack := array_append(stack, a / b);
    END CASE;
  END LOOP;
  
  IF array_length(stack, 1) > 0 THEN
    RETURN stack[1];
  ELSE
    RETURN 0;
  END IF;
END;
$$ LANGUAGE plpgsql;

htmx can be downloaded from https://htmx.org/

calculator.sql

select 'shell' as component
, 'htmx.js' as javascript
;

--display recieved values as it is for demo purposes - remove this in production
SELECT 'text' as component
,:previous_result::text as contents
,:digit::text as contents
,:prev_digit::text as contents
,:operation::text as contents
,:reset_digit::text as contents
,:expr::text as contents
,:pressed::text as contents
,:results::text as contents
;

-- read values from the request, including the previous digit state, expression and any reset flag
SET previous_result = COALESCE(:previous_result, '0');
SET incoming_digit = COALESCE(:digit, '0');
SET prev_digit = COALESCE(:prev_digit, '0');
SET operation = COALESCE(:operation, '');
SET prev_operation = COALESCE(:prev_operation, '');
SET results = COALESCE(:results, '0');
SET expr = COALESCE(:expr, '');
SET pressed = COALESCE(:pressed, 'digit');
SET reset_digit = COALESCE(:reset_digit::boolean, false);
SET reset_all = COALESCE(:reset::boolean, false);

-- if reset button was pressed, wipe everything back to defaults
SET previous_result = CASE WHEN $reset_all::boolean THEN '0' ELSE $previous_result END;
SET results         = CASE WHEN $reset_all::boolean THEN '0' ELSE $results END;
SET digit           = CASE WHEN $reset_all::boolean THEN '0' ELSE $digit END;
SET expr            = CASE WHEN $reset_all::boolean THEN ''  ELSE $expr END;
SET operation       = CASE WHEN $reset_all::boolean THEN ''  ELSE $operation END;
SET reset_digit     = CASE WHEN $reset_all::boolean THEN false ELSE $reset_digit::boolean END;

-- build the current digit string; reset_digit forces start of a new number
SET digit = CASE
    WHEN $reset_digit::boolean THEN $incoming_digit
    WHEN $prev_digit = '0' THEN $incoming_digit
    ELSE $prev_digit || $incoming_digit
END;

-- update expression depending on what was pressed
SET expr = CASE
    WHEN $pressed = 'digit' THEN CASE WHEN $expr = '' THEN $incoming_digit ELSE $expr || $incoming_digit END
    WHEN $pressed = 'operator' THEN $expr || $operation
    WHEN $pressed = 'bracket' THEN $expr || $operation
    ELSE $expr
END;


-- debug output to verify values after initial validations.
SELECT 'text' as component
,$previous_result::text as contents
,$digit::text as contents
,$operation::text as contents
,$results::text as contents
;

-- only do arithmetic when = button is pressed
SET results = CASE WHEN $operation = '=' THEN evaluate_expression($expr) END;
SET results = COALESCE(:results, '0');
-- clear or keep the digit state depending on whether '=' was pressed
SET digit = CASE WHEN $operation = '=' OR $pressed = 'operator' THEN '0' ELSE $digit::text END;
-- keep prev_digit in sync for the next request (reset on '=' or when operator pressed)
SET prev_digit = CASE WHEN $operation = '=' OR $pressed = 'operator' THEN '0' ELSE $digit::text END;
-- compute display text: expression until '=' then show results
SET display_text = CASE WHEN $operation = '=' THEN $results::text ELSE $expr END;
-- remove any accidental leading zeros from expr (keep single zero)
SET expr = CASE WHEN $expr ~ '^0[0-9]' THEN regexp_replace($expr,'^0+','') ELSE $expr END;
-- choose color based on whether we're showing result or still typing expr
SET display_color = CASE WHEN $operation = '=' THEN '#0f0' ELSE '#fff' END;
-- clear expression when result shown
SET expr = CASE WHEN $operation = '=' THEN '' ELSE $expr END;


--display values after processing to verify logic.
SELECT 'text' as component
,$previous_result::text as contents
,$digit::text as contents
,$operation::text as contents
,$results::text as contents
,$expr::text as contents
,$display_text::text as contents
;

-- Build calculator buttons from matrix array (row, col, value, type, colspan)
-- type: 'd'=digit, 'o'=operator, 'b'=bracket, 'r'=reset
-- ensure we always get an array (coalesce in case CTE returns no rows)
SET button_rows_array = COALESCE(
    (
    WITH button_matrix AS (
    SELECT 1 as row_idx, 1 as col_idx, '7' as btn_val, 'd' as btn_type, 1 as col_span UNION ALL
    SELECT 1, 2, '8', 'd', 1 UNION ALL SELECT 1, 3, '9', 'd', 1 UNION ALL SELECT 1, 4, '/', 'o', 1 UNION ALL
    SELECT 2, 1, '4', 'd', 1 UNION ALL SELECT 2, 2, '5', 'd', 1 UNION ALL SELECT 2, 3, '6', 'd', 1 UNION ALL SELECT 2, 4, '*', 'o', 1 UNION ALL
    SELECT 3, 1, '1', 'd', 1 UNION ALL SELECT 3, 2, '2', 'd', 1 UNION ALL SELECT 3, 3, '3', 'd', 1 UNION ALL SELECT 3, 4, '-', 'o', 1 UNION ALL
    SELECT 4, 1, '0', 'd', 2 UNION ALL SELECT 4, 3, '=', 'o', 1 UNION ALL SELECT 4, 4, '+', 'o', 1 UNION ALL
    SELECT 5, 1, '(', 'b', 1 UNION ALL SELECT 5, 2, ')', 'b', 1 UNION ALL
    SELECT 6, 1, 'C', 'r', 1
),
button_cells AS (
    SELECT 
        row_idx,
        col_idx,
        CASE 
            WHEN btn_type = 'd' THEN
                jsonb_build_object(
                    'component','universal'
                    ,'tag','td'
                    ,'colspan',(col_span)::text
                    ,'class','btn'
                    ,'hx_post','?'
                    ,'hx_vals', jsonb_build_object(
                        'digit',btn_val
                        ,'prev_digit',$prev_digit::text
                        ,'operation',$operation::text
                        ,'prev_operation',$operation::text
                        ,'previous_result',$previous_result::text
                        ,'expr',$expr::text
                        ,'pressed','digit'
                        ,'reset_digit','false'
                    )::text,
                    'contents',btn_val
                )
            WHEN btn_type = 'o' THEN
                jsonb_build_object(
                    'component','universal'
                    ,'tag','td'
                    ,'colspan',(col_span)::text
                    ,'class','btn op-cell'
                    ,'hx_post','?'
                    ,'hx_vals', jsonb_build_object(
                        'digit',$digit::text
                        ,'prev_digit',$digit::text
                        ,'operation',btn_val
                        ,'prev_operation',$operation::text
                        ,'previous_result',$previous_result::text
                        ,'expr',$expr::text
                        ,'pressed','operator'
                        ,'reset_digit','true'
                    )::text,
                    'contents',btn_val
                )
            WHEN btn_type = 'b' THEN
                jsonb_build_object(
                    'component','universal'
                    ,'tag','td'
                    ,'colspan',(col_span)::text
                    ,'class','btn op-cell'
                    ,'hx_post','?'
                    ,'hx_vals', jsonb_build_object(
                        'digit',''
                        ,'prev_digit',$prev_digit::text
                        ,'operation',btn_val
                        ,'prev_operation',$operation::text
                        ,'previous_result',$previous_result::text
                        ,'expr',$expr::text
                        ,'pressed','bracket'
                        ,'reset_digit','false'
                    )::text,
                    'contents',btn_val
                )
            WHEN btn_type = 'r' THEN
                jsonb_build_object(
                    'component','universal'
                    ,'tag','td'
                    ,'colspan',(col_span)::text
                    ,'class','btn'
                    ,'hx_post','?'
                    ,'hx_vals', jsonb_build_object('reset','true')::text,
                    'contents',btn_val
                )
        END as cell_obj
    FROM button_matrix
),
button_rows_data AS (
    SELECT 
        row_idx,
        jsonb_build_object(
            'component','universal','tag','tr',
            'sub_components', jsonb_agg(cell_obj ORDER BY col_idx)
        ) as row_obj
    FROM button_cells
    GROUP BY row_idx
)

    SELECT jsonb_agg(row_obj ORDER BY row_idx)
    FROM button_rows_data
    ), '[]'::jsonb
);


-- build the table container with generated rows
SET button_container = jsonb_build_object(
    'component','universal'
    ,'tag','table'
    ,'class','calc-table',
    'sub_components', $button_rows_array::jsonb
);

SET result_display = jsonb_build_object(
    'component', 'universal',
    'tag', 'h1',
    'id', 'result_display',
    'class', 'result_display',
    'width', '100%',
    'height', '100px',
    'background_color', '#000',
    'color', $display_color::text,
    'font_family', 'monospace',
    'font_size', '36px',
    'text_align', 'right',
    'vertical_align', 'middle',
    'padding', '0 10px',
    'border', '2px inset #444',
    'contents', $display_text::text
);

-- final wrapper: result display on top, buttons below in a flex row
SELECT 'universal' as component
, 'Calculator in SQLPage using HTML Table tag' as contents 
, 'H1' as tag
, 'calculator_container' as class
, jsonb_build_array(
        $result_display::jsonb,
        $button_container::jsonb
    ) as sub_components
;

Generated html. main portion.

<html>
<body>
<!--StartFragment-->
<H1 class="calculator_container" hx-target="body">Calculator in SQLPage using HTML Table tag
--
<h1 id="result_display" class="result_display" border="2px inset #444" color="#fff" height="100px" width="100%" hx-target="body">0</h1>
 
<table class="calc-table" hx-target="body">
<tr hx-target="body">
<td class="btn" colspan="1" hx-post="?" hx-target="body" hx-vals="{&quot;expr&quot;: &quot;0&quot;, &quot;digit&quot;: &quot;7&quot;, &quot;pressed&quot;: &quot;digit&quot;, &quot;operation&quot;: &quot;&quot;, &quot;prev_digit&quot;: &quot;0&quot;, &quot;reset_digit&quot;: &quot;false&quot;, &quot;prev_operation&quot;: &quot;&quot;, &quot;previous_result&quot;: &quot;0&quot;}">7</td>
 
<td class="btn" colspan="1" hx-post="?" hx-target="body" hx-vals="{&quot;expr&quot;: &quot;0&quot;, &quot;digit&quot;: &quot;8&quot;, &quot;pressed&quot;: &quot;digit&quot;, &quot;operation&quot;: &quot;&quot;, &quot;prev_digit&quot;: &quot;0&quot;, &quot;reset_digit&quot;: &quot;false&quot;, &quot;prev_operation&quot;: &quot;&quot;, &quot;previous_result&quot;: &quot;0&quot;}">8</td>
 
<td class="btn" colspan="1" hx-post="?" hx-target="body" hx-vals="{&quot;expr&quot;: &quot;0&quot;, &quot;digit&quot;: &quot;9&quot;, &quot;pressed&quot;: &quot;digit&quot;, &quot;operation&quot;: &quot;&quot;, &quot;prev_digit&quot;: &quot;0&quot;, &quot;reset_digit&quot;: &quot;false&quot;, &quot;prev_operation&quot;: &quot;&quot;, &quot;previous_result&quot;: &quot;0&quot;}">9</td>
 
<td class="btn op-cell" colspan="1" hx-post="?" hx-target="body" hx-vals="{&quot;expr&quot;: &quot;0&quot;, &quot;digit&quot;: &quot;0&quot;, &quot;pressed&quot;: &quot;operator&quot;, &quot;operation&quot;: &quot;/&quot;, &quot;prev_digit&quot;: &quot;0&quot;, &quot;reset_digit&quot;: &quot;true&quot;, &quot;prev_operation&quot;: &quot;&quot;, &quot;previous_result&quot;: &quot;0&quot;}">/</td>
</tr>
 
<tr hx-target="body">
<td class="btn" colspan="1" hx-post="?" hx-target="body" hx-vals="{&quot;expr&quot;: &quot;0&quot;, &quot;digit&quot;: &quot;4&quot;, &quot;pressed&quot;: &quot;digit&quot;, &quot;operation&quot;: &quot;&quot;, &quot;prev_digit&quot;: &quot;0&quot;, &quot;reset_digit&quot;: &quot;false&quot;, &quot;prev_operation&quot;: &quot;&quot;, &quot;previous_result&quot;: &quot;0&quot;}">4</td>
 
<td class="btn" colspan="1" hx-post="?" hx-target="body" hx-vals="{&quot;expr&quot;: &quot;0&quot;, &quot;digit&quot;: &quot;5&quot;, &quot;pressed&quot;: &quot;digit&quot;, &quot;operation&quot;: &quot;&quot;, &quot;prev_digit&quot;: &quot;0&quot;, &quot;reset_digit&quot;: &quot;false&quot;, &quot;prev_operation&quot;: &quot;&quot;, &quot;previous_result&quot;: &quot;0&quot;}">5</td>
 
<td class="btn" colspan="1" hx-post="?" hx-target="body" hx-vals="{&quot;expr&quot;: &quot;0&quot;, &quot;digit&quot;: &quot;6&quot;, &quot;pressed&quot;: &quot;digit&quot;, &quot;operation&quot;: &quot;&quot;, &quot;prev_digit&quot;: &quot;0&quot;, &quot;reset_digit&quot;: &quot;false&quot;, &quot;prev_operation&quot;: &quot;&quot;, &quot;previous_result&quot;: &quot;0&quot;}">6</td>
 
<td class="btn op-cell" colspan="1" hx-post="?" hx-target="body" hx-vals="{&quot;expr&quot;: &quot;0&quot;, &quot;digit&quot;: &quot;0&quot;, &quot;pressed&quot;: &quot;operator&quot;, &quot;operation&quot;: &quot;*&quot;, &quot;prev_digit&quot;: &quot;0&quot;, &quot;reset_digit&quot;: &quot;true&quot;, &quot;prev_operation&quot;: &quot;&quot;, &quot;previous_result&quot;: &quot;0&quot;}">*</td>
</tr>
 
<tr hx-target="body">
<td class="btn" colspan="1" hx-post="?" hx-target="body" hx-vals="{&quot;expr&quot;: &quot;0&quot;, &quot;digit&quot;: &quot;1&quot;, &quot;pressed&quot;: &quot;digit&quot;, &quot;operation&quot;: &quot;&quot;, &quot;prev_digit&quot;: &quot;0&quot;, &quot;reset_digit&quot;: &quot;false&quot;, &quot;prev_operation&quot;: &quot;&quot;, &quot;previous_result&quot;: &quot;0&quot;}">1</td>
 
<td class="btn" colspan="1" hx-post="?" hx-target="body" hx-vals="{&quot;expr&quot;: &quot;0&quot;, &quot;digit&quot;: &quot;2&quot;, &quot;pressed&quot;: &quot;digit&quot;, &quot;operation&quot;: &quot;&quot;, &quot;prev_digit&quot;: &quot;0&quot;, &quot;reset_digit&quot;: &quot;false&quot;, &quot;prev_operation&quot;: &quot;&quot;, &quot;previous_result&quot;: &quot;0&quot;}">2</td>
 
<td class="btn" colspan="1" hx-post="?" hx-target="body" hx-vals="{&quot;expr&quot;: &quot;0&quot;, &quot;digit&quot;: &quot;3&quot;, &quot;pressed&quot;: &quot;digit&quot;, &quot;operation&quot;: &quot;&quot;, &quot;prev_digit&quot;: &quot;0&quot;, &quot;reset_digit&quot;: &quot;false&quot;, &quot;prev_operation&quot;: &quot;&quot;, &quot;previous_result&quot;: &quot;0&quot;}">3</td>
 
<td class="btn op-cell" colspan="1" hx-post="?" hx-target="body" hx-vals="{&quot;expr&quot;: &quot;0&quot;, &quot;digit&quot;: &quot;0&quot;, &quot;pressed&quot;: &quot;operator&quot;, &quot;operation&quot;: &quot;-&quot;, &quot;prev_digit&quot;: &quot;0&quot;, &quot;reset_digit&quot;: &quot;true&quot;, &quot;prev_operation&quot;: &quot;&quot;, &quot;previous_result&quot;: &quot;0&quot;}">-</td>
</tr>
 
<tr hx-target="body">
<td class="btn" colspan="2" hx-post="?" hx-target="body" hx-vals="{&quot;expr&quot;: &quot;0&quot;, &quot;digit&quot;: &quot;0&quot;, &quot;pressed&quot;: &quot;digit&quot;, &quot;operation&quot;: &quot;&quot;, &quot;prev_digit&quot;: &quot;0&quot;, &quot;reset_digit&quot;: &quot;false&quot;, &quot;prev_operation&quot;: &quot;&quot;, &quot;previous_result&quot;: &quot;0&quot;}">0</td>
 
<td class="btn op-cell" colspan="1" hx-post="?" hx-target="body" hx-vals="{&quot;expr&quot;: &quot;0&quot;, &quot;digit&quot;: &quot;0&quot;, &quot;pressed&quot;: &quot;operator&quot;, &quot;operation&quot;: &quot;&#x3D;&quot;, &quot;prev_digit&quot;: &quot;0&quot;, &quot;reset_digit&quot;: &quot;true&quot;, &quot;prev_operation&quot;: &quot;&quot;, &quot;previous_result&quot;: &quot;0&quot;}">=</td>
 
<td class="btn op-cell" colspan="1" hx-post="?" hx-target="body" hx-vals="{&quot;expr&quot;: &quot;0&quot;, &quot;digit&quot;: &quot;0&quot;, &quot;pressed&quot;: &quot;operator&quot;, &quot;operation&quot;: &quot;+&quot;, &quot;prev_digit&quot;: &quot;0&quot;, &quot;reset_digit&quot;: &quot;true&quot;, &quot;prev_operation&quot;: &quot;&quot;, &quot;previous_result&quot;: &quot;0&quot;}">+</td>
</tr>
 
<tr hx-target="body">
<td class="btn op-cell" colspan="1" hx-post="?" hx-target="body" hx-vals="{&quot;expr&quot;: &quot;0&quot;, &quot;digit&quot;: &quot;&quot;, &quot;pressed&quot;: &quot;bracket&quot;, &quot;operation&quot;: &quot;(&quot;, &quot;prev_digit&quot;: &quot;0&quot;, &quot;reset_digit&quot;: &quot;false&quot;, &quot;prev_operation&quot;: &quot;&quot;, &quot;previous_result&quot;: &quot;0&quot;}">(</td>
 
<td class="btn op-cell" colspan="1" hx-post="?" hx-target="body" hx-vals="{&quot;expr&quot;: &quot;0&quot;, &quot;digit&quot;: &quot;&quot;, &quot;pressed&quot;: &quot;bracket&quot;, &quot;operation&quot;: &quot;)&quot;, &quot;prev_digit&quot;: &quot;0&quot;, &quot;reset_digit&quot;: &quot;false&quot;, &quot;prev_operation&quot;: &quot;&quot;, &quot;previous_result&quot;: &quot;0&quot;}">)</td>
</tr>
 
<tr hx-target="body">
<td class="btn" colspan="1" hx-post="?" hx-target="body" hx-vals="{&quot;reset&quot;: &quot;true&quot;}">C</td>
</tr>
</table>
</H1>

<!--EndFragment-->
</body>
</html>

Output screenshot

[lovasoa]

Yunus, you are always pushing SQLPage to its absolute limits! 🦾