@teachinglab/omd 0.1.0

package/src/omdTapeDiagram.js

@@ -0,0 +1,245 @@
+import { omdColor } from "./omdColor.js";
+import { jsvgGroup, jsvgRect, jsvgTextBox } from "@teachinglab/jsvg";
+
+export class omdTapeLabel extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.startValue = 1;
+        this.endValue = 3;
+        this.startIndex = 0;
+        this.endIndex = 1;
+        this.label = "label";
+        this.showBelow = false;
+        this.unitWidth = 30;
+        this.indexPositions = [];
+
+        this.startPos = 0;
+        this.endPos = 0;
+
+        this.updateLayout();
+    }
+    
+    setIndexPositions( xPosArray )
+    {
+        this.indexPositions = xPosArray
+    }
+
+    loadFromJSON( data )
+    {
+        if (!data || typeof data !== "object") { return; }
+
+        const { startIndex, endIndex, label, showBelow } = data;
+
+        if (startIndex !== undefined) {
+            this.startIndex = startIndex;
+            if (startIndex >= 0 && startIndex <= this.indexPositions.length) {
+                this.startPos = this.indexPositions[startIndex];
+            }
+        }
+
+        if (endIndex !== undefined) {
+            this.endIndex = endIndex;
+            if (endIndex >= 0 && endIndex <= this.indexPositions.length) {
+                this.endPos = this.indexPositions[endIndex];
+            }
+        }
+
+        // startValue/endValue no longer supported; use startIndex/endIndex only
+
+        if (label !== undefined) { this.label = label; }
+        if (showBelow !== undefined) { this.showBelow = showBelow; }
+
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        this.removeAllChildren();
+
+        // make line
+        var startX = this.startPos;
+        var endX = this.endPos;
+        var W = endX - startX;
+        this.line = new jsvgLine();
+        this.line.setEndpoints( startX, 0, endX, 0 );
+        this.addChild( this.line );
+
+        // make ticks
+        var tick = new jsvgLine();
+        tick.setEndpoints( startX, -3, startX, 3 );
+        this.addChild( tick );
+
+        tick = new jsvgLine();
+        tick.setEndpoints( endX, -3, endX, 3 );
+        this.addChild( tick );
+
+         // make label text
+        var labelText = new jsvgTextBox();
+        labelText.setWidthAndHeight( W,30 );
+        labelText.setText ( this.name );
+        labelText.setFontFamily( "Albert Sans" );
+        labelText.setFontColor( "black" );
+        labelText.setFontSize( 14 );
+        labelText.setAlignment("center");
+        labelText.setText( this.label );
+        if ( this.showBelow )
+            labelText.setPosition( startX, 5 );
+        else
+            labelText.setPosition( startX, -20 );
+        this.addChild( labelText );
+
+        // Calculate dimensions for this label
+        var labelWidth = Math.max(W, endX);
+        var labelHeight = this.showBelow ? 35 : 30; // Account for text position
+        
+        // Set proper bounds and viewBox for the label
+        this.setWidthAndHeight( labelWidth, labelHeight );
+        this.svgObject.setAttribute("viewBox", `0 ${this.showBelow ? -5 : -25} ${labelWidth} ${labelHeight}`);
+    }
+}
+
+export class omdTapeDiagram extends jsvgGroup
+{
+    constructor()
+    {
+        // initialization
+        super();
+
+        this.type = "omdTapeDiagram";
+
+        this.values = []; 
+        this.showValues = true;
+        this.colors = [];
+        this.labelSet = [];
+        this.unitWidth = 30;
+        this.updateLayout();
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.values != "undefined" )
+            this.values = data.values;
+
+        if ( typeof data.showValues != "undefined" )
+            this.showValues = data.showValues;
+
+        if ( typeof data.colors != "undefined" )
+            this.colors = data.colors;
+
+        if ( typeof data.labelSet != "undefined" )
+            this.labelSet = data.labelSet;
+
+        if ( typeof data.unitWidth != "undefined" )
+            this.unitWidth = data.unitWidth;
+
+        this.updateLayout();
+    }
+
+    setValues( newValues )
+    {
+        this.values = newValues;
+    }
+
+    updateLayout()
+    {
+        this.removeAllChildren();
+
+        // console.log( this.values );
+
+        // make box with text
+        var pX = 0;
+        var indexPositions = [];
+        for( var i=0; i<this.values.length; i++ )
+        {
+            indexPositions.push(pX);
+
+            var value = this.values[i];
+            var W = 30;
+            if ( typeof value == "string" )
+            {
+                W = 20 + value.length*10;
+            }
+            else
+            {
+                W = value * this.unitWidth;
+            }
+            
+
+            // make box
+            var box = new jsvgRect();
+            box.setWidthAndHeight( W, 30 );
+            box.setCornerRadius(5);
+            box.setStrokeColor( "white" );
+            box.setStrokeWidth( 1 );
+            
+            // Use custom color if available, otherwise default to light gray
+            var boxColor = omdColor.lightGray;
+            if ( this.colors && this.colors.length > i && this.colors[i] )
+            {
+                boxColor = this.colors[i];
+            }
+            box.setFillColor( boxColor );
+            
+            box.setPosition( pX, 0 );
+            this.addChild( box );
+
+            // make box text
+            var boxText = new jsvgTextBox();
+            boxText.setWidthAndHeight( W,30 );
+            boxText.setText ( this.name );
+            boxText.setFontFamily( "Albert Sans" );
+            boxText.setFontColor( "black" );
+            boxText.setFontSize( 18 );
+            boxText.setAlignment("center");
+            boxText.setVerticalCentering();
+            boxText.setText( value.toString() );
+            boxText.setPosition( pX, 0 );
+            this.addChild( boxText );
+
+            pX += W;
+        }
+
+        indexPositions.push(pX);
+
+        // Calculate actual content dimensions
+        var contentWidth = pX; // Total width of all boxes
+        var contentHeight = 30; // Height of the tape
+        var labelHeight = 0;
+
+        // Check if labels extend the height
+        for ( var labelData of this.labelSet )
+        {
+            if ( labelData.showBelow )
+                labelHeight = Math.max(labelHeight, 70); // 40 offset + 30 text height
+            else
+                labelHeight = Math.max(labelHeight, 30); // 20 offset above + 10 buffer
+        }
+        
+        if ( labelHeight > 0 )
+            contentHeight += labelHeight;
+
+        // make label text
+        for ( var labelData of this.labelSet )
+        {
+            var T = new omdTapeLabel();
+            T.unitWidth = this.unitWidth;
+            T.setIndexPositions( indexPositions );
+            T.loadFromJSON( labelData );
+            if ( T.showBelow )
+                T.setPosition( 0, 40 );
+            else
+                T.setPosition( 0, -10 );
+            this.addChild( T )
+        }
+
+        // Set proper bounds to hug the content
+        this.setWidthAndHeight( contentWidth, contentHeight );
+        // Fix the viewBox to match our actual content dimensions (no padding)
+        this.svgObject.setAttribute("viewBox", `0 0 ${contentWidth} ${contentHeight}`);
+    }
+
+}

package/src/omdTerm.js

@@ -0,0 +1,92 @@
+
+import { omdColor } from "./omdColor.js";
+import { omdMetaExpression } from "./omdMetaExpression.js"
+
+export class omdTerm extends omdMetaExpression
+{
+    constructor( coefficient=1, variable='', exponent=1 )
+    {
+        // initialization
+        super();
+
+        this.type = "omdTerm";
+        this.coefficient = coefficient;
+        this.variable = variable;
+        this.exponent = exponent;
+
+        this.numText = new jsvgTextBox();
+        this.numText.setWidthAndHeight( 30,30 );
+        this.numText.setText ( this.name );
+        this.numText.setFontFamily( "Albert Sans" );
+        this.numText.setFontColor( "black" );
+        this.numText.setFontSize( 18 );
+        this.numText.setVerticalCentering();
+        this.numText.setAlignment("center");
+        // this.numText.div.style.border = "1px solid black";
+        this.addChild( this.numText );
+
+        this.setValue( coefficient, variable, exponent );
+        this.updateLayout();
+    }
+
+    loadFromJSON( data )
+    {
+        if ( typeof data.coefficient != "undefined" )
+            this.coefficient = data.coefficient;
+
+        if ( typeof data.variable != "undefined" )
+            this.variable = data.variable;
+    
+        if ( typeof data.exponent != "undefined" )
+            this.exponent = data.exponent;
+
+        this.updateLayout();
+    }
+
+    setValue( coefficient, variable='', exponent=1 )
+    {
+        this.coefficient = coefficient;
+        this.variable = variable;
+        this.exponent = exponent;
+
+        this.updateLayout();
+    }
+
+    updateLayout()
+    {
+        var T = "";
+        if ( this.variable && this.variable.length != 0 )
+        {
+            T = this.coefficient.toString() + this.variable;
+            if ( this.coefficient == 1)
+            {
+                T = this.variable;
+            }
+        }
+        else
+        {
+            T = this.coefficient.toString();
+        }
+
+        if ( this.exponent )
+        {
+            if ( this.exponent == 1 )
+            {
+                // don't show it
+            }
+            else if ( this.exponent == 2 )
+                T += "²";
+            else if ( this.exponent == 3 )
+                T += "³";
+            else
+                T += "<sup>" + this.exponent.toString() + "</sup>";
+        }
+
+        var W = 15 + T.length*10;
+        this.backRect.setWidthAndHeight( W, 30 );
+        this.numText.setWidthAndHeight( W, 30 );
+        this.numText.setText ( T );
+
+        this.setWidthAndHeight( this.backRect.width, this.backRect.height );
+    }
+}

package/src/omdTileEquation.js

@@ -0,0 +1,349 @@
+import { omdColor } from "./omdColor.js";
+import { omdNumberTile } from "./omdNumberTile.js";
+import { jsvgGroup, jsvgRect, jsvgTextBox, jsvgTextLine } from "@teachinglab/jsvg";
+
+export class omdTileEquation extends jsvgGroup {
+    constructor() {
+        super();
+        this.type = "omdTileEquation";
+        this.left = [];   // generic mode
+        this.right = [];
+        this.equation = null; // special mode: { x:number, units:number, total:number, xLabel?:string }
+        this.tileSize = 28;
+        this.tileGap = 6;
+        this.rowGap = 10;
+        this.equalGap = 24; // gap between left and right
+        this.tileRadius = 6;
+        this.showLabels = true;
+        this.fontFamily = 'Albert Sans';
+        this.fontSize = 16;
+        // Styles
+        this.plusColor = '#79BBFD';
+        this.equalsColor = '#FF6B6B';
+        this.xPillColor = omdColor.lightGray;
+        this.numberTileDefaults = { backgroundColor: omdColor.lightGray, dotColor: 'black' };
+        this.updateLayout();
+    }
+
+    loadFromJSON(data) {
+        if (!data || typeof data !== 'object') return;
+        if (Array.isArray(data.left)) this.left = data.left;
+        if (Array.isArray(data.right)) this.right = data.right;
+        if (typeof data.equation === 'string') {
+            this.equation = this._parseEquationString(data.equation);
+        } else if (data.equation && typeof data.equation === 'object') {
+            this.equation = data.equation;
+        } else if (typeof data.equationString === 'string') {
+            this.equation = this._parseEquationString(data.equationString);
+        }
+        if (typeof data.tileSize === 'number') this.tileSize = data.tileSize;
+        if (typeof data.tileGap === 'number') this.tileGap = data.tileGap;
+        if (typeof data.equalGap === 'number') this.equalGap = data.equalGap;
+        if (typeof data.tileRadius === 'number') this.tileRadius = data.tileRadius;
+        if (typeof data.showLabels === 'boolean') this.showLabels = data.showLabels;
+        if (typeof data.fontFamily === 'string') this.fontFamily = data.fontFamily;
+        if (typeof data.fontSize === 'number') this.fontSize = data.fontSize;
+        if (typeof data.plusColor === 'string') this.plusColor = data.plusColor;
+        if (typeof data.equalsColor === 'string') this.equalsColor = data.equalsColor;
+        if (data.xPill && typeof data.xPill.color === 'string') this.xPillColor = data.xPill.color;
+        if (typeof data.xPillColor === 'string') this.xPillColor = data.xPillColor;
+        if (data.numberTileDefaults && typeof data.numberTileDefaults === 'object') {
+            this.numberTileDefaults = {
+                backgroundColor: data.numberTileDefaults.backgroundColor ?? this.numberTileDefaults.backgroundColor,
+                dotColor: data.numberTileDefaults.dotColor ?? this.numberTileDefaults.dotColor
+            };
+        }
+        this.updateLayout();
+    }
+
+    // Parse equations like "5x+4+2=23+12x" or with subtraction like "4x+3=23-x".
+    // Returns an object with positive counts arranged on each side by moving negatives across '='.
+    _parseEquationString(str) {
+        try {
+            const raw = String(str || '').replace(/\s+/g, '');
+            const parts = raw.split('=');
+            if (parts.length !== 2) return null;
+            const left = parts[0];
+            const right = parts[1];
+
+            const parseSide = (sideStr) => {
+                const cleaned = String(sideStr || '').replace(/[\s−–]/g, ch => (ch === ' ' ? '' : '-'));
+                const tokenRe = /([+-]?\d*[a-zA-Z])|([+-]?\d+)/g;
+                let varLabel = null;
+                const tokens = [];
+                const matches = cleaned.match(tokenRe) || [];
+                matches.forEach(tok => {
+                    if (/[a-zA-Z]/.test(tok)) {
+                        const m = tok.match(/^([+-]?)(\d*)([a-zA-Z])$/);
+                        const sign = (m[1] || '+') === '-' ? '-' : '+';
+                        const coef = m[2] ? parseInt(m[2], 10) : 1;
+                        varLabel = varLabel || m[3];
+                        tokens.push({ kind: 'x', count: Math.max(1, coef), sign });
+                    } else {
+                        const sign = tok[0] === '-' ? '-' : '+';
+                        const val = Math.abs(parseInt(tok, 10));
+                        tokens.push({ kind: 'const', value: Math.max(0, val), sign });
+                    }
+                });
+                return { varLabel, tokens };
+            };
+
+            const L = parseSide(left);
+            const R = parseSide(right);
+            const useLabel = L.varLabel || R.varLabel || 'X';
+
+            return {
+                leftTokens: L.tokens,
+                rightTokens: R.tokens,
+                xLabel: useLabel
+            };
+        } catch (_) {
+            return null;
+        }
+    }
+
+    updateLayout() {
+        this.removeAllChildren();
+
+        if (this.equation) {
+            const dims = this._renderEquation(this.equation);
+            this.setWidthAndHeight(dims.width, dims.height);
+            this.svgObject.setAttribute('viewBox', `0 0 ${dims.width} ${dims.height}`);
+            return;
+        }
+
+        const leftGroup = new jsvgGroup();
+        const rightGroup = new jsvgGroup();
+        this.addChild(leftGroup);
+        this.addChild(rightGroup);
+
+        const leftDims = this._renderSide(leftGroup, this.left);
+        const rightDims = this._renderSide(rightGroup, this.right);
+
+        rightGroup.setPosition(leftDims.width + this.equalGap, 0);
+
+        const totalWidth = leftDims.width + this.equalGap + rightDims.width;
+        const totalHeight = Math.max(leftDims.height, rightDims.height);
+        this.setWidthAndHeight(totalWidth, totalHeight);
+        this.svgObject.setAttribute('viewBox', `0 0 ${totalWidth} ${totalHeight}`);
+    }
+
+    _renderSide(holder, terms) {
+        let x = 0;
+        let baseY = 0;
+        let maxHeight = 0;
+
+        terms.forEach(term => {
+            const kind = term?.kind || 'var';
+            const color = term?.color || (kind === 'var' ? '#79BBFD' : '#FFA26D');
+            const count = Math.max(1, Number(term?.count || 1));
+
+            if (kind === 'text') {
+                const t = new jsvgTextBox();
+                const padX = 8, padY = 6; 
+                t.setWidthAndHeight(this.fontSize * (String(term.value).length * 0.7) + padX * 2, this.fontSize + padY * 2);
+                t.setFontFamily(this.fontFamily);
+                t.setFontSize(this.fontSize);
+                t.setFontColor('black');
+                t.setAlignment('center');
+                t.setVerticalCentering();
+                t.setText(String(term.value));
+
+                const r = new jsvgRect();
+                r.setWidthAndHeight(t.width, t.height);
+                r.setCornerRadius(Math.min(this.tileRadius, t.height / 2));
+                r.setFillColor(omdColor.lightGray);
+                const g = new jsvgGroup();
+                g.setPosition(x, baseY);
+                g.addChild(r);
+                g.addChild(t);
+                holder.addChild(g);
+                x += t.width + this.tileGap;
+                maxHeight = Math.max(maxHeight, t.height);
+                return;
+            }
+
+            const g = new jsvgGroup();
+            g.setPosition(x, baseY);
+            holder.addChild(g);
+
+            // Arrange as vertical stack if 'stack' true; otherwise single row
+            const stack = !!term.stack;
+            let localWidth = 0;
+            let localHeight = 0;
+            for (let i = 0; i < count; i++) {
+                const box = new jsvgRect();
+                box.setWidthAndHeight(this.tileSize, this.tileSize);
+                box.setCornerRadius(Math.min(this.tileRadius, this.tileSize / 2));
+                box.setFillColor(color);
+                const bx = stack ? 0 : i * (this.tileSize + this.tileGap);
+                const by = stack ? i * (this.tileSize + this.rowGap) : 0;
+                box.setPosition(bx, by);
+                g.addChild(box);
+                localWidth = Math.max(localWidth, bx + this.tileSize);
+                localHeight = Math.max(localHeight, by + this.tileSize);
+            }
+            x += localWidth + this.tileGap;
+            maxHeight = Math.max(maxHeight, localHeight);
+        });
+
+        return { width: x > 0 ? x - this.tileGap : 0, height: maxHeight };
+    }
+
+    _renderEquation(eq) {
+        // Prefer new token format; fall back to legacy counts if provided
+        const hasTokens = Array.isArray(eq.leftTokens) && Array.isArray(eq.rightTokens);
+        const leftTokens = hasTokens ? eq.leftTokens : [];
+        const rightTokens = hasTokens ? eq.rightTokens : [];
+        const legacyLeftX  = Math.max(0, Number(eq.leftX  ?? eq.x  ?? 0));
+        const legacyLeftUnits = Array.isArray(eq.leftUnitList) ? eq.leftUnitList : (Number.isFinite(eq.leftUnits ?? eq.units) ? [Math.max(0, Number(eq.leftUnits ?? eq.units))] : []);
+        const legacyRightX = Math.max(0, Number(eq.rightX ?? 0));
+        const legacyRightUnits = Array.isArray(eq.rightUnitList) ? eq.rightUnitList : (Number.isFinite(eq.rightUnits ?? eq.total) ? [Math.max(0, Number(eq.rightUnits ?? eq.total))] : []);
+        const xLabel = String(eq.xLabel || 'X');
+
+        // Pre-compute sizes and local top-center offsets
+        // Configure X pill appearance
+        const xPillColor = this.xPillColor || omdColor.lightGray;
+        // Pill width: ~5x the "X" glyph width (fontSize 0.7 * tileSize; glyph width ~0.62*fontSize)
+        const xFont = this.tileSize;
+        const xGlyphWidth = 0.62 * xFont;
+        const tileW = Math.max(this.tileSize * 1.6, Math.round(5 * xGlyphWidth));
+        const tileH = this.tileSize;
+        // Pre-create number tiles for measurement (tokens or legacy)
+        const countLeftX = hasTokens ? (leftTokens.filter(t => t.kind === 'x').reduce((a, t) => a + t.count, 0)) : legacyLeftX;
+        const countRightX = hasTokens ? (rightTokens.filter(t => t.kind === 'x').reduce((a, t) => a + t.count, 0)) : legacyRightX;
+        const stackH = countLeftX > 0 ? (countLeftX * (tileH + this.rowGap) - this.rowGap) : 0;
+        const unitTilesL = (hasTokens
+            ? leftTokens.filter(t => t.kind === 'const').map(tk => { const t = new omdNumberTile(); t.loadFromJSON({ value: tk.value, size: 'medium', backgroundColor: this.numberTileDefaults.backgroundColor, dotColor: this.numberTileDefaults.dotColor }); return t; })
+            : legacyLeftUnits.map(v => { const t = new omdNumberTile(); t.loadFromJSON({ value: v, size: 'medium', backgroundColor: this.numberTileDefaults.backgroundColor, dotColor: this.numberTileDefaults.dotColor }); return t; })
+        );
+        const unitTilesR = (hasTokens
+            ? rightTokens.filter(t => t.kind === 'const').map(tk => { const t = new omdNumberTile(); t.loadFromJSON({ value: tk.value, size: 'medium', backgroundColor: this.numberTileDefaults.backgroundColor, dotColor: this.numberTileDefaults.dotColor }); return t; })
+            : legacyRightUnits.map(v => { const t = new omdNumberTile(); t.loadFromJSON({ value: v, size: 'medium', backgroundColor: this.numberTileDefaults.backgroundColor, dotColor: this.numberTileDefaults.dotColor }); return t; })
+        );
+
+        const xTopLocal = countLeftX > 0 ? (tileH / 2) : 0;
+        const unitTopLocalL = unitTilesL.length ? Math.min(...unitTilesL.map(t => t.getTopDotCenterY())) : 0;
+        const unitTopLocalR = unitTilesR.length ? Math.min(...unitTilesR.map(t => t.getTopDotCenterY())) : 0;
+
+        // Choose a baseline so all components have non-negative Y positions when aligned
+        const baselineY = Math.max(xTopLocal, unitTopLocalL, unitTopLocalR, this.tileSize * 0.6);
+
+        // Compute Y positions such that each component's top anchor equals baselineY
+        const yX = countLeftX > 0 ? (baselineY - xTopLocal) : 0;
+        const yUnitL = unitTilesL.length ? (baselineY - unitTopLocalL) : 0;
+        const yUnitR = unitTilesR.length ? (baselineY - unitTopLocalR) : 0;
+
+        // Compute overall height from bottoms
+        const bottoms = [];
+        if (countLeftX > 0) bottoms.push(yX + stackH);
+        unitTilesL.forEach(t => bottoms.push(yUnitL + t.height));
+        unitTilesR.forEach(t => bottoms.push(yUnitR + t.height));
+        const maxH = bottoms.length ? Math.max(...bottoms) : this.tileSize * 2;
+
+        let cursorX = 0;
+
+        // Helper to add an operator centered in the upcoming gap
+        const addOp = (opChar, x) => {
+            const op = new jsvgTextLine();
+            op.setText(opChar);
+            op.setFontSize(this.tileSize);
+            op.setFontColor(this.plusColor);
+            op.setAlignment('center');
+            op.svgObject.setAttribute('dominant-baseline', 'middle');
+            op.setPosition(x + this.equalGap / 2, baselineY);
+            this.addChild(op);
+        };
+
+        // Render left side tokens (or legacy)
+        const renderXStack = () => {
+            const g = new jsvgGroup();
+            for (let i = 0; i < countLeftX; i++) {
+                const y = i * (tileH + this.rowGap);
+                const r = new jsvgRect();
+                r.setWidthAndHeight(tileW, tileH);
+                r.setCornerRadius(tileH / 2);
+                r.setFillColor(xPillColor);
+                r.setPosition(0, y);
+                g.addChild(r);
+                const t = new jsvgTextLine();
+                t.setText(xLabel);
+                t.setFontWeight('bold');
+                t.setFontSize(this.tileSize * 0.7);
+                t.setFontFamily(this.fontFamily);
+                t.setFontColor('black');
+                t.setAlignment('center');
+                t.svgObject.setAttribute('dominant-baseline', 'middle');
+                const textBias = tileH * 0.06;
+                t.setPosition(tileW / 2, y + tileH / 2 + textBias);
+                g.addChild(t);
+            }
+            return g;
+        };
+
+        const renderSide = (tokens, startX, yUnitTop, countX, isLeft) => {
+            let x = startX;
+            let hasPrev = false;
+            // If legacy, synthesize token sequence: X then each unit
+            const seq = hasTokens ? tokens.slice() : [
+                ...(countX > 0 ? [{ kind: 'x', count: countX, sign: '+' }] : []),
+                ...((isLeft ? legacyLeftUnits : legacyRightUnits).map(v => ({ kind: 'const', value: v, sign: '+' })))
+            ];
+
+            seq.forEach(tok => {
+                const sign = tok.sign === '-' ? '-' : '+';
+                // operator before this token
+                if (hasPrev || sign === '-') {
+                    addOp(sign === '-' ? '−' : '+', x);
+                    x += this.equalGap;
+                }
+                if (tok.kind === 'x') {
+                    const g = renderXStack();
+                    g.setPosition(x, baselineY - xTopLocal);
+                    this.addChild(g);
+                    x += tileW;
+                    hasPrev = true;
+                } else {
+                    // const tile
+                    const tile = new omdNumberTile();
+                    tile.loadFromJSON({ value: tok.value, size: 'medium', backgroundColor: this.numberTileDefaults.backgroundColor, dotColor: this.numberTileDefaults.dotColor });
+                    tile.setPosition(x, yUnitTop);
+                    this.addChild(tile);
+                    x += tile.width;
+                    hasPrev = true;
+                }
+            });
+            return x;
+        };
+
+        // Render left side
+        if (hasTokens ? (leftTokens.length > 0) : (countLeftX > 0 || unitTilesL.length)) {
+            const g = new jsvgGroup();
+            g.setPosition(0, 0); // placeholder container (not strictly needed)
+            // Ensure left starts with any minus/plus operators between tokens
+            cursorX = renderSide(leftTokens, cursorX, yUnitL, countLeftX, true);
+        }
+        // Reserve equals gap
+        cursorX += this.equalGap;
+
+        // Equals sign aligned to baselineY
+        const eqWidth = this.tileSize * 1.2;
+        const eqTxt = new jsvgTextLine();
+        eqTxt.setText('=');
+        eqTxt.setFontSize(this.tileSize * 1.1);
+        eqTxt.setFontColor(this.equalsColor);
+        eqTxt.setAlignment('center');
+        eqTxt.svgObject.setAttribute('dominant-baseline', 'middle');
+        // Center equals in the equals gap we just reserved
+        const eqMid = cursorX - this.equalGap / 2;
+        eqTxt.setPosition(eqMid, baselineY);
+        this.addChild(eqTxt);
+
+        // Render right side tokens
+        cursorX = renderSide(rightTokens, cursorX, yUnitR, countRightX, false);
+
+        return { width: cursorX, height: maxH };
+    }
+}
+
+