imxc 0.5.4 → 0.6.1

package/dist/lowering.js

@@ -64,6 +64,7 @@ export function lowerComponent(parsed, validation, externalInterfaces) {
         setterMap,
         propsParam,
         propsFieldTypes,
+        externalInterfaces,
         bufferIndex: 0,
         mapCounter: 0,
         sourceFile: parsed.sourceFile,
@@ -86,19 +87,27 @@ export function lowerComponent(parsed, validation, externalInterfaces) {
         body,
     };
 }
+function normalizePropTypeText(typeText) {
+    const trimmed = typeText.trim().replace(/\s*\|\s*undefined$/, '');
+    if (trimmed === 'number')
+        return 'int';
+    if (trimmed === 'boolean')
+        return 'bool';
+    if (trimmed === 'string')
+        return 'string';
+    // Array types: boolean[] -> bool*, number[] -> float*
+    if (trimmed === 'boolean[]')
+        return 'bool*';
+    if (trimmed === 'number[]')
+        return 'float*';
+    return trimmed;
+}
 function inferPropType(member) {
     if (!member.type)
         return 'string';
     if (ts.isFunctionTypeNode(member.type))
         return 'callback';
-    const text = member.type.getText();
-    if (text === 'number')
-        return 'int';
-    if (text === 'boolean')
-        return 'bool';
-    if (text === 'string')
-        return 'string';
-    return 'string';
+    return normalizePropTypeText(member.type.getText());
 }
 /**
  * Scan the source file for an interface declaration matching `interfaceName`
@@ -119,26 +128,16 @@ function extractInterfaceFields(interfaceName, sourceFile, fieldTypes) {
                         fieldTypes.set(fieldName, 'callback');
                         continue;
                     }
-                    const typeText = member.type.getText();
-                    if (typeText === 'number' || typeText === 'number | undefined') {
-                        fieldTypes.set(fieldName, 'float');
-                    }
-                    else if (typeText === 'boolean') {
-                        fieldTypes.set(fieldName, 'bool');
-                    }
-                    else if (typeText === 'string') {
-                        fieldTypes.set(fieldName, 'string');
-                    }
-                    else {
-                        // Array types, nested interfaces, etc. treated as opaque
-                        fieldTypes.set(fieldName, 'string');
-                    }
+                    fieldTypes.set(fieldName, normalizePropTypeText(member.type.getText()));
                 }
             }
             return;
         }
     }
 }
+function isIntegerArrayLiteral(expr) {
+    return expr.elements.every(e => ts.isNumericLiteral(e) && !e.getText().includes('.'));
+}
 function inferTypeFromExpr(expr) {
     if (ts.isNumericLiteral(expr)) {
         // Use getText() to check original source text, since TS normalizes 5.0 to "5" in .text
@@ -150,7 +149,10 @@ function inferTypeFromExpr(expr) {
     if (expr.kind === ts.SyntaxKind.TrueKeyword || expr.kind === ts.SyntaxKind.FalseKeyword)
         return 'bool';
     if (ts.isArrayLiteralExpression(expr))
-        return 'color';
+        return isIntegerArrayLiteral(expr) ? 'int_array' : 'color';
+    // AsExpression (e.g. [1.0, 0.0] as [number, number]): infer from inner expression
+    if (ts.isAsExpression(expr))
+        return inferTypeFromExpr(expr.expression);
     // Default to int
     return 'int';
 }
@@ -165,11 +167,16 @@ function exprToLiteral(expr) {
         return 'true';
     if (expr.kind === ts.SyntaxKind.FalseKeyword)
         return 'false';
+    // AsExpression (e.g. [1.0, 0.0] as [number, number]): strip the type cast
+    if (ts.isAsExpression(expr))
+        return exprToLiteral(expr.expression);
     if (ts.isArrayLiteralExpression(expr)) {
         const elements = expr.elements.map(e => {
             const text = e.getText();
-            // Ensure float suffix for color array elements
             if (ts.isNumericLiteral(e)) {
+                if (isIntegerArrayLiteral(expr)) {
+                    return text;
+                }
                 return text.includes('.') ? `${text}f` : `${text}.0f`;
             }
             return text;
@@ -302,6 +309,10 @@ export function exprToCpp(node, ctx) {
     if (ts.isArrayLiteralExpression(node)) {
         return node.elements.map(e => exprToCpp(e, ctx)).join(', ');
     }
+    // AsExpression (e.g. expr as Type): strip the type cast, emit inner expression
+    if (ts.isAsExpression(node)) {
+        return exprToCpp(node.expression, ctx);
+    }
     // Fallback: use text representation
     return node.getText();
 }
@@ -338,6 +349,31 @@ function extractActionStatements(expr, ctx) {
     }
     return [code + ';'];
 }
+function lowerItemInteraction(attrs, rawAttrs, ctx) {
+    const item = {};
+    if (attrs['autoFocus'])
+        item.autoFocus = attrs['autoFocus'];
+    if (attrs['tooltip'])
+        item.tooltip = attrs['tooltip'];
+    if (attrs['scrollToHere'])
+        item.scrollToHere = attrs['scrollToHere'];
+    if (attrs['cursor'])
+        item.cursor = attrs['cursor'];
+    const callbackAttrs = [
+        ['onHover', 'onHover'],
+        ['onActive', 'onActive'],
+        ['onFocused', 'onFocused'],
+        ['onClicked', 'onClicked'],
+        ['onDoubleClicked', 'onDoubleClicked'],
+    ];
+    for (const [field, attrName] of callbackAttrs) {
+        const expr = rawAttrs.get(attrName);
+        if (expr) {
+            item[field] = extractActionStatements(expr, ctx);
+        }
+    }
+    return Object.keys(item).length > 0 ? item : undefined;
+}
 /**
  * Lower a JSX expression (possibly wrapped in parenthesized expr) into IR nodes.
  */
@@ -409,11 +445,104 @@ function lowerJsxElement(node, body, ctx) {
     if (isHostComponent(name)) {
         const def = HOST_COMPONENTS[name];
         const attrs = getAttributes(node.openingElement.attributes, ctx);
+        const rawAttrs = getRawAttributes(node.openingElement.attributes);
+        if (name === 'Table') {
+            lowerTableElement(node, body, ctx, attrs, rawAttrs, getLoc(node, ctx));
+            return;
+        }
+        if (name === 'TableRow') {
+            body.push({ kind: 'begin_table_row', bgColor: attrs['bgColor'], loc: getLoc(node, ctx) });
+            for (const child of node.children) {
+                lowerJsxChild(child, body, ctx);
+            }
+            body.push({ kind: 'end_table_row' });
+            return;
+        }
+        if (name === 'TableCell') {
+            body.push({ kind: 'begin_table_cell', columnIndex: attrs['columnIndex'], bgColor: attrs['bgColor'], loc: getLoc(node, ctx) });
+            for (const child of node.children) {
+                lowerJsxChild(child, body, ctx);
+            }
+            body.push({ kind: 'end_table_cell' });
+            return;
+        }
+        if (name === 'TreeNode') {
+            body.push({
+                kind: 'begin_tree_node',
+                label: attrs['label'] ?? '""',
+                defaultOpen: attrs['defaultOpen'],
+                forceOpen: attrs['forceOpen'],
+                openOnArrow: attrs['openOnArrow'],
+                openOnDoubleClick: attrs['openOnDoubleClick'],
+                leaf: attrs['leaf'],
+                bullet: attrs['bullet'],
+                noTreePushOnOpen: attrs['noTreePushOnOpen'],
+                item: lowerItemInteraction(attrs, rawAttrs, ctx),
+                loc: getLoc(node, ctx),
+            });
+            for (const child of node.children) {
+                lowerJsxChild(child, body, ctx);
+            }
+            body.push({ kind: 'end_tree_node', noTreePushOnOpen: attrs['noTreePushOnOpen'] });
+            return;
+        }
+        if (name === 'CollapsingHeader') {
+            const onClose = rawAttrs.get('onClose');
+            const closeInfo = onClose ? lowerParameterizedCallback(onClose, ctx, 'onCloseHeader') : undefined;
+            body.push({
+                kind: 'begin_collapsing_header',
+                label: attrs['label'] ?? '""',
+                defaultOpen: attrs['defaultOpen'],
+                forceOpen: attrs['forceOpen'],
+                closable: attrs['closable'],
+                onCloseBody: closeInfo?.bodyCode,
+                item: lowerItemInteraction(attrs, rawAttrs, ctx),
+                loc: getLoc(node, ctx),
+            });
+            for (const child of node.children) {
+                lowerJsxChild(child, body, ctx);
+            }
+            body.push({ kind: 'end_collapsing_header', closable: attrs['closable'] });
+            return;
+        }
+        if (name === 'Combo') {
+            // Manual combo mode — has children, no items prop
+            const label = attrs['label'] ?? '""';
+            const preview = attrs['preview'] ?? '""';
+            const flagNames = [];
+            if (attrs['noArrowButton'] === 'true')
+                flagNames.push('ImGuiComboFlags_NoArrowButton');
+            if (attrs['noPreview'] === 'true')
+                flagNames.push('ImGuiComboFlags_NoPreview');
+            if (attrs['heightSmall'] === 'true')
+                flagNames.push('ImGuiComboFlags_HeightSmall');
+            if (attrs['heightLarge'] === 'true')
+                flagNames.push('ImGuiComboFlags_HeightLarge');
+            if (attrs['heightRegular'] === 'true')
+                flagNames.push('ImGuiComboFlags_HeightRegular');
+            const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+            body.push({ kind: 'begin_combo', label, preview, flags: flagNames, width: attrs['width'], style: attrs['style'], item, loc: getLoc(node, ctx) });
+            for (const child of node.children) {
+                lowerJsxChild(child, body, ctx);
+            }
+            body.push({ kind: 'end_combo' });
+            return;
+        }
+        if (name === 'ListBox') {
+            // Manual ListBox mode — has children, no items prop
+            const label = attrs['label'] ?? '""';
+            const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+            body.push({ kind: 'begin_list_box', label, width: attrs['width'], height: attrs['height'], style: attrs['style'], item, loc: getLoc(node, ctx) });
+            for (const child of node.children) {
+                lowerJsxChild(child, body, ctx);
+            }
+            body.push({ kind: 'end_list_box' });
+            return;
+        }
         if (def.isContainer) {
             const containerTag = name;
             // Special handling for DragDropTarget — lower onDrop callback with type info
             if (name === 'DragDropTarget') {
-                const rawAttrs = getRawAttributes(node.openingElement.attributes);
                 const props = {};
                 for (const [attrName, expr] of rawAttrs) {
                     if (attrName === 'onDrop' && expr && (ts.isArrowFunction(expr) || ts.isFunctionExpression(expr))) {
@@ -452,8 +581,8 @@ function lowerJsxElement(node, body, ctx) {
                 body.push({ kind: 'end_container', tag: containerTag });
                 return;
             }
-            // DockSpace: detect if any child is a MenuBar
-            if (containerTag === 'DockSpace') {
+            // DockSpace / Window: detect if any child is a MenuBar
+            if (containerTag === 'DockSpace' || containerTag === 'Window') {
                 const hasMenuBar = node.children.some(c => ts.isJsxElement(c) && ts.isIdentifier(c.openingElement.tagName) && c.openingElement.tagName.text === 'MenuBar');
                 if (hasMenuBar)
                     attrs['hasMenuBar'] = 'true';
@@ -505,6 +634,52 @@ function lowerJsxSelfClosing(node, body, ctx) {
     const rawAttrs = getRawAttributes(node.attributes);
     const loc = getLoc(node, ctx);
     switch (name) {
+        case 'Table': {
+            lowerTableSelfClosing(body, ctx, attrs, rawAttrs, loc);
+            break;
+        }
+        case 'TableRow':
+            body.push({ kind: 'begin_table_row', bgColor: attrs['bgColor'], loc });
+            body.push({ kind: 'end_table_row' });
+            break;
+        case 'TableCell':
+            body.push({ kind: 'begin_table_cell', columnIndex: attrs['columnIndex'], bgColor: attrs['bgColor'], loc });
+            body.push({ kind: 'end_table_cell' });
+            break;
+        case 'TreeNode':
+            body.push({
+                kind: 'begin_tree_node',
+                label: attrs['label'] ?? '""',
+                defaultOpen: attrs['defaultOpen'],
+                forceOpen: attrs['forceOpen'],
+                openOnArrow: attrs['openOnArrow'],
+                openOnDoubleClick: attrs['openOnDoubleClick'],
+                leaf: attrs['leaf'],
+                bullet: attrs['bullet'],
+                noTreePushOnOpen: attrs['noTreePushOnOpen'],
+                item: lowerItemInteraction(attrs, rawAttrs, ctx),
+                loc,
+            });
+            body.push({ kind: 'end_tree_node', noTreePushOnOpen: attrs['noTreePushOnOpen'] });
+            break;
+        case 'CollapsingHeader': {
+            const closeInfo = rawAttrs.get('onClose') ? lowerParameterizedCallback(rawAttrs.get('onClose'), ctx, 'onCloseHeader') : undefined;
+            body.push({
+                kind: 'begin_collapsing_header',
+                label: attrs['label'] ?? '""',
+                defaultOpen: attrs['defaultOpen'],
+                forceOpen: attrs['forceOpen'],
+                closable: attrs['closable'],
+                onCloseBody: closeInfo?.bodyCode,
+                item: lowerItemInteraction(attrs, rawAttrs, ctx),
+                loc,
+            });
+            body.push({ kind: 'end_collapsing_header', closable: attrs['closable'] });
+            break;
+        }
+        case 'Shortcut':
+            lowerShortcut(attrs, rawAttrs, body, ctx, loc);
+            break;
         case 'Button':
             lowerButton(attrs, rawAttrs, body, ctx, loc);
             break;
@@ -541,22 +716,62 @@ function lowerJsxSelfClosing(node, body, ctx) {
         case 'ColorEdit':
             lowerColorEdit(attrs, rawAttrs, body, ctx, loc);
             break;
+        case 'ColorEdit3':
+            lowerColorEdit3(attrs, rawAttrs, body, ctx, loc);
+            break;
         case 'ListBox':
             lowerListBox(attrs, rawAttrs, body, ctx, loc);
             break;
         case 'ProgressBar':
             lowerProgressBar(attrs, rawAttrs, body, ctx, loc);
             break;
+        case 'Spacing':
+            body.push({ kind: 'spacing', loc });
+            break;
+        case 'Dummy':
+            body.push({
+                kind: 'dummy',
+                width: attrs['width'] ?? '0',
+                height: attrs['height'] ?? '0',
+                loc,
+            });
+            break;
+        case 'SameLine':
+            body.push({
+                kind: 'same_line',
+                offset: attrs['offset'] ?? '0',
+                spacing: attrs['spacing'] ?? '-1',
+                loc,
+            });
+            break;
+        case 'NewLine':
+            body.push({ kind: 'new_line', loc });
+            break;
+        case 'Cursor':
+            body.push({
+                kind: 'cursor',
+                x: attrs['x'] ?? '0',
+                y: attrs['y'] ?? '0',
+                loc,
+            });
+            break;
         case 'Tooltip':
             lowerTooltip(attrs, body, ctx, loc);
             break;
         case 'Separator':
             body.push({ kind: 'separator', loc });
             break;
-        case 'Text':
-            // Self-closing <Text /> - empty text
-            body.push({ kind: 'text', format: '', args: [], loc });
+        case 'Bullet':
+            body.push({ kind: 'bullet', loc });
+            break;
+        case 'Text': {
+            // Self-closing <Text /> — may have disabled/wrapped/color props
+            const disabled = attrs['disabled'] === 'true';
+            const wrapped = attrs['wrapped'] === 'true';
+            const color = attrs['color'];
+            body.push({ kind: 'text', format: '', args: [], color, disabled: disabled || undefined, wrapped: wrapped || undefined, loc });
             break;
+        }
         case 'BulletText':
             // Self-closing <BulletText /> - empty bullet
             body.push({ kind: 'bullet_text', format: '', args: [], loc });
@@ -576,6 +791,9 @@ function lowerJsxSelfClosing(node, body, ctx) {
         case 'ColorPicker':
             lowerColorPicker(attrs, rawAttrs, body, ctx, loc);
             break;
+        case 'ColorPicker3':
+            lowerColorPicker3(attrs, rawAttrs, body, ctx, loc);
+            break;
         case 'PlotLines':
             lowerPlotLines(attrs, body, ctx, loc);
             break;
@@ -619,6 +837,143 @@ function lowerJsxSelfClosing(node, body, ctx) {
             body.push({ kind: 'draw_text', pos, text, color, loc });
             break;
         }
+        case 'DrawBezierCubic': {
+            const p1 = attrs['p1'] ?? '0, 0';
+            const p2 = attrs['p2'] ?? '0, 0';
+            const p3 = attrs['p3'] ?? '0, 0';
+            const p4 = attrs['p4'] ?? '0, 0';
+            const color = attrs['color'] ?? '1, 1, 1, 1';
+            const thickness = attrs['thickness'] ?? '1.0';
+            const segments = attrs['segments'] ?? '0';
+            body.push({ kind: 'draw_bezier_cubic', p1, p2, p3, p4, color, thickness, segments, loc });
+            break;
+        }
+        case 'DrawBezierQuadratic': {
+            const p1 = attrs['p1'] ?? '0, 0';
+            const p2 = attrs['p2'] ?? '0, 0';
+            const p3 = attrs['p3'] ?? '0, 0';
+            const color = attrs['color'] ?? '1, 1, 1, 1';
+            const thickness = attrs['thickness'] ?? '1.0';
+            const segments = attrs['segments'] ?? '0';
+            body.push({ kind: 'draw_bezier_quadratic', p1, p2, p3, color, thickness, segments, loc });
+            break;
+        }
+        case 'DrawPolyline': {
+            const points = attrs['points'] ?? '';
+            const color = attrs['color'] ?? '1, 1, 1, 1';
+            const thickness = attrs['thickness'] ?? '1.0';
+            const closed = attrs['closed'] ?? 'false';
+            body.push({ kind: 'draw_polyline', points, color, thickness, closed, loc });
+            break;
+        }
+        case 'DrawConvexPolyFilled': {
+            const points = attrs['points'] ?? '';
+            const color = attrs['color'] ?? '1, 1, 1, 1';
+            body.push({ kind: 'draw_convex_poly_filled', points, color, loc });
+            break;
+        }
+        case 'DrawNgon': {
+            const center = attrs['center'] ?? '0, 0';
+            const radius = attrs['radius'] ?? '0';
+            const color = attrs['color'] ?? '1, 1, 1, 1';
+            const numSegments = attrs['numSegments'] ?? '6';
+            const thickness = attrs['thickness'] ?? '1.0';
+            body.push({ kind: 'draw_ngon', center, radius, color, numSegments, thickness, loc });
+            break;
+        }
+        case 'DrawNgonFilled': {
+            const center = attrs['center'] ?? '0, 0';
+            const radius = attrs['radius'] ?? '0';
+            const color = attrs['color'] ?? '1, 1, 1, 1';
+            const numSegments = attrs['numSegments'] ?? '6';
+            body.push({ kind: 'draw_ngon_filled', center, radius, color, numSegments, loc });
+            break;
+        }
+        case 'DrawTriangle': {
+            const p1 = attrs['p1'] ?? '0, 0';
+            const p2 = attrs['p2'] ?? '0, 0';
+            const p3 = attrs['p3'] ?? '0, 0';
+            const color = attrs['color'] ?? '1, 1, 1, 1';
+            const filled = attrs['filled'] ?? 'false';
+            const thickness = attrs['thickness'] ?? '1.0';
+            body.push({ kind: 'draw_triangle', p1, p2, p3, color, filled, thickness, loc });
+            break;
+        }
+        case 'InputFloat2':
+            lowerVectorInput('input_float_n', 2, attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'InputFloat3':
+            lowerVectorInput('input_float_n', 3, attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'InputFloat4':
+            lowerVectorInput('input_float_n', 4, attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'InputInt2':
+            lowerVectorInput('input_int_n', 2, attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'InputInt3':
+            lowerVectorInput('input_int_n', 3, attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'InputInt4':
+            lowerVectorInput('input_int_n', 4, attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'DragFloat2':
+            lowerVectorInput('drag_float_n', 2, attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'DragFloat3':
+            lowerVectorInput('drag_float_n', 3, attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'DragFloat4':
+            lowerVectorInput('drag_float_n', 4, attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'DragInt2':
+            lowerVectorInput('drag_int_n', 2, attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'DragInt3':
+            lowerVectorInput('drag_int_n', 3, attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'DragInt4':
+            lowerVectorInput('drag_int_n', 4, attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'SliderFloat2':
+            lowerVectorInput('slider_float_n', 2, attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'SliderFloat3':
+            lowerVectorInput('slider_float_n', 3, attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'SliderFloat4':
+            lowerVectorInput('slider_float_n', 4, attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'SliderInt2':
+            lowerVectorInput('slider_int_n', 2, attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'SliderInt3':
+            lowerVectorInput('slider_int_n', 3, attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'SliderInt4':
+            lowerVectorInput('slider_int_n', 4, attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'VSliderFloat':
+            lowerVSliderFloat(attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'VSliderInt':
+            lowerVSliderInt(attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'SliderAngle':
+            lowerSliderAngle(attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'SmallButton':
+            lowerSmallButton(attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'ArrowButton':
+            lowerArrowButton(attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'InvisibleButton':
+            lowerInvisibleButton(attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'ImageButton':
+            lowerImageButton(attrs, rawAttrs, body, ctx, loc);
+            break;
         default:
             // Container self-closing (e.g., <Window title="X"/>)
             if (HOST_COMPONENTS[name]?.isContainer) {
@@ -638,14 +993,63 @@ function lowerButton(attrs, rawAttrs, body, ctx, loc) {
     }
     const disabled = attrs['disabled'] === 'true' ? true : undefined;
     const style = attrs['style'];
-    body.push({ kind: 'button', title, action, disabled, style, loc });
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'button', title, action, disabled, style, item, loc });
+}
+function lowerSmallButton(attrs, rawAttrs, body, ctx, loc) {
+    const label = attrs['label'] ?? '""';
+    const onPressExpr = rawAttrs.get('onPress');
+    let action = [];
+    if (onPressExpr) {
+        action = extractActionStatements(onPressExpr, ctx);
+    }
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'small_button', label, action, item, loc });
+}
+function lowerArrowButton(attrs, rawAttrs, body, ctx, loc) {
+    const id = attrs['id'] ?? '""';
+    const direction = attrs['direction'] ?? '"left"';
+    const onPressExpr = rawAttrs.get('onPress');
+    let action = [];
+    if (onPressExpr) {
+        action = extractActionStatements(onPressExpr, ctx);
+    }
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'arrow_button', id, direction, action, item, loc });
+}
+function lowerInvisibleButton(attrs, rawAttrs, body, ctx, loc) {
+    const id = attrs['id'] ?? '""';
+    const width = attrs['width'] ?? '0';
+    const height = attrs['height'] ?? '0';
+    const onPressExpr = rawAttrs.get('onPress');
+    let action = [];
+    if (onPressExpr) {
+        action = extractActionStatements(onPressExpr, ctx);
+    }
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'invisible_button', id, width, height, action, item, loc });
+}
+function lowerImageButton(attrs, rawAttrs, body, ctx, loc) {
+    const id = attrs['id'] ?? '""';
+    const src = attrs['src'] ?? '""';
+    const width = attrs['width'];
+    const height = attrs['height'];
+    const onPressExpr = rawAttrs.get('onPress');
+    let action = [];
+    if (onPressExpr) {
+        action = extractActionStatements(onPressExpr, ctx);
+    }
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'image_button', id, src, width, height, action, item, loc });
 }
 function lowerTextInput(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const bufferIndex = ctx.bufferIndex++;
+    const width = attrs['width'];
     const style = attrs['style'];
     const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'text_input', label, bufferIndex, stateVar: stateVar, valueExpr, onChangeExpr, directBind, style, loc });
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'text_input', label, bufferIndex, stateVar: stateVar, valueExpr, onChangeExpr, directBind, width, style, item, loc });
 }
 function lowerCheckbox(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
@@ -688,7 +1092,8 @@ function lowerCheckbox(attrs, rawAttrs, body, ctx, loc) {
         }
     }
     const style = attrs['style'];
-    body.push({ kind: 'checkbox', label, stateVar, valueExpr: valueExprStr, onChangeExpr: onChangeExprStr, directBind, style, loc });
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'checkbox', label, stateVar, valueExpr: valueExprStr, onChangeExpr: onChangeExprStr, directBind, style, item, loc });
 }
 function lowerMenuItem(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
@@ -698,11 +1103,26 @@ function lowerMenuItem(attrs, rawAttrs, body, ctx, loc) {
     if (onPressExpr) {
         action = extractActionStatements(onPressExpr, ctx);
     }
-    body.push({ kind: 'menu_item', label, shortcut, action, loc });
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'menu_item', label, shortcut, action, item, loc });
+}
+function lowerShortcut(attrs, rawAttrs, body, ctx, loc) {
+    const keys = attrs['keys'] ?? '""';
+    const onPressExpr = rawAttrs.get('onPress');
+    let action = [];
+    if (onPressExpr) {
+        action = extractActionStatements(onPressExpr, ctx);
+    }
+    body.push({ kind: 'shortcut', keys, action, loc });
 }
 function lowerTextElement(node, body, ctx, loc) {
     let format = '';
     const args = [];
+    // Extract Text props
+    const attrs = getAttributes(node.openingElement.attributes, ctx);
+    const color = attrs['color'];
+    const disabled = attrs['disabled'] === 'true';
+    const wrapped = attrs['wrapped'] === 'true';
     for (const child of node.children) {
         if (ts.isJsxText(child)) {
             // Collapse whitespace (newlines, tabs, runs of spaces) into single spaces,
@@ -759,7 +1179,7 @@ function lowerTextElement(node, body, ctx, loc) {
             }
         }
     }
-    body.push({ kind: 'text', format, args, loc });
+    body.push({ kind: 'text', format, args, color, disabled: disabled || undefined, wrapped: wrapped || undefined, loc });
 }
 /**
  * Check if an expression will produce a const char* in C++ (not std::string).
@@ -781,6 +1201,8 @@ function inferExprType(expr, ctx) {
         return 'string';
     if (expr.kind === ts.SyntaxKind.TrueKeyword || expr.kind === ts.SyntaxKind.FalseKeyword)
         return 'bool';
+    if (ts.isArrayLiteralExpression(expr))
+        return isIntegerArrayLiteral(expr) ? 'int_array' : 'color';
     // Identifier: check state var type
     if (ts.isIdentifier(expr)) {
         const slot = ctx.stateVars.get(expr.text);
@@ -796,8 +1218,30 @@ function inferExprType(expr, ctx) {
         // If accessing a direct field of the props param, look up its type
         if (ctx.propsParam && ts.isIdentifier(expr.expression) && expr.expression.text === ctx.propsParam) {
             const ft = ctx.propsFieldTypes.get(prop);
-            if (ft && ft !== 'callback')
-                return ft;
+            if (ft && ft !== 'callback') {
+                if (ft === 'int' || ft === 'float' || ft === 'bool' || ft === 'string' || ft === 'color' || ft === 'int_array') {
+                    return ft;
+                }
+                return 'string';
+            }
+        }
+        // Nested access: props.data.field — resolve through external interfaces
+        if (ctx.propsParam && ctx.externalInterfaces && ts.isPropertyAccessExpression(expr.expression)) {
+            const mid = expr.expression;
+            if (ts.isIdentifier(mid.expression) && mid.expression.text === ctx.propsParam) {
+                const midType = ctx.propsFieldTypes.get(mid.name.text);
+                if (midType && midType !== 'callback') {
+                    const iface = ctx.externalInterfaces.get(midType);
+                    if (iface) {
+                        const fieldType = iface.get(prop);
+                        if (fieldType && fieldType !== 'callback') {
+                            if (fieldType === 'int' || fieldType === 'float' || fieldType === 'bool' || fieldType === 'string' || fieldType === 'color' || fieldType === 'int_array') {
+                                return fieldType;
+                            }
+                        }
+                    }
+                }
+            }
         }
         return 'string';
     }
@@ -881,6 +1325,113 @@ function lowerCustomComponent(name, attributes, body, ctx, loc) {
         loc,
     });
 }
+function lowerParameterizedCallback(expr, ctx, defaultParamName) {
+    if (ts.isArrowFunction(expr) || ts.isFunctionExpression(expr)) {
+        const param = expr.parameters[0];
+        const paramName = param && ts.isIdentifier(param.name) ? param.name.text : defaultParamName;
+        const bodyCode = ts.isBlock(expr.body)
+            ? expr.body.statements.map(s => stmtToCpp(s, ctx)).join(' ')
+            : `${exprToCpp(expr.body, ctx)};`;
+        return { paramName, bodyCode };
+    }
+    const callbackExpr = exprToCpp(expr, ctx);
+    const bodyCode = (ts.isIdentifier(expr) || ts.isPropertyAccessExpression(expr))
+        ? `${callbackExpr}(${defaultParamName});`
+        : `${callbackExpr};`;
+    return { paramName: defaultParamName, bodyCode };
+}
+function lowerTableColumns(expr, ctx) {
+    if (!expr || !ts.isArrayLiteralExpression(expr)) {
+        return [];
+    }
+    const columns = [];
+    for (const element of expr.elements) {
+        if (ts.isStringLiteral(element) || ts.isNoSubstitutionTemplateLiteral(element)) {
+            columns.push({ label: JSON.stringify(element.text) });
+            continue;
+        }
+        if (ts.isObjectLiteralExpression(element)) {
+            const column = { label: '""' };
+            for (const prop of element.properties) {
+                if (!ts.isPropertyAssignment(prop) || !ts.isIdentifier(prop.name))
+                    continue;
+                const propName = prop.name.text;
+                const value = exprToCpp(prop.initializer, ctx);
+                switch (propName) {
+                    case 'label':
+                        column.label = value;
+                        break;
+                    case 'defaultHide':
+                        column.defaultHide = value;
+                        break;
+                    case 'preferSortAscending':
+                        column.preferSortAscending = value;
+                        break;
+                    case 'preferSortDescending':
+                        column.preferSortDescending = value;
+                        break;
+                    case 'noResize':
+                        column.noResize = value;
+                        break;
+                    case 'fixedWidth':
+                        column.fixedWidth = value;
+                        break;
+                }
+            }
+            columns.push(column);
+            continue;
+        }
+        columns.push({ label: exprToCpp(element, ctx) });
+    }
+    return columns;
+}
+function lowerTableSelfClosing(body, ctx, attrs, rawAttrs, loc) {
+    const onSort = rawAttrs.get('onSort') ?? null;
+    const sortInfo = onSort ? lowerParameterizedCallback(onSort, ctx, 'tableSortSpecs') : undefined;
+    body.push({
+        kind: 'begin_table',
+        columns: lowerTableColumns(rawAttrs.get('columns') ?? null, ctx),
+        sortable: attrs['sortable'],
+        hideable: attrs['hideable'],
+        multiSortable: attrs['multiSortable'],
+        noClip: attrs['noClip'],
+        padOuterX: attrs['padOuterX'],
+        scrollX: attrs['scrollX'],
+        scrollY: attrs['scrollY'],
+        noBorders: attrs['noBorders'],
+        noRowBg: attrs['noRowBg'],
+        onSortBody: sortInfo?.bodyCode,
+        onSortParam: sortInfo?.paramName,
+        style: attrs['style'],
+        loc,
+    });
+    body.push({ kind: 'end_table' });
+}
+function lowerTableElement(node, body, ctx, attrs, rawAttrs, loc) {
+    const onSort = rawAttrs.get('onSort') ?? null;
+    const sortInfo = onSort ? lowerParameterizedCallback(onSort, ctx, 'tableSortSpecs') : undefined;
+    body.push({
+        kind: 'begin_table',
+        columns: lowerTableColumns(rawAttrs.get('columns') ?? null, ctx),
+        sortable: attrs['sortable'],
+        hideable: attrs['hideable'],
+        multiSortable: attrs['multiSortable'],
+        noClip: attrs['noClip'],
+        padOuterX: attrs['padOuterX'],
+        scrollX: attrs['scrollX'],
+        scrollY: attrs['scrollY'],
+        noBorders: attrs['noBorders'],
+        noRowBg: attrs['noRowBg'],
+        onSortBody: sortInfo?.bodyCode,
+        onSortParam: sortInfo?.paramName,
+        style: attrs['style'],
+        loc,
+    });
+    for (const child of node.children) {
+        lowerJsxChild(child, body, ctx);
+    }
+    body.push({ kind: 'end_table' });
+}
 function lowerNativeWidget(name, attributes, body, ctx, loc) {
     const props = {};
     const callbackProps = {};
@@ -1032,31 +1583,68 @@ function lowerSelectable(attrs, rawAttrs, body, ctx, loc) {
         action = extractActionStatements(onSelectExpr, ctx);
     }
     const style = attrs['style'];
-    body.push({ kind: 'selectable', label, selected, action, style, loc });
+    const selectionIndex = attrs['selectionIndex'];
+    const flagParts = [];
+    if (attrs['spanAllColumns'] === 'true')
+        flagParts.push('ImGuiSelectableFlags_SpanAllColumns');
+    if (attrs['allowDoubleClick'] === 'true')
+        flagParts.push('ImGuiSelectableFlags_AllowDoubleClick');
+    if (attrs['dontClosePopups'] === 'true')
+        flagParts.push('ImGuiSelectableFlags_DontClosePopups');
+    const flags = flagParts.length > 0 ? flagParts.join(' | ') : undefined;
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'selectable', label, selected, action, selectionIndex, flags, style, item, loc });
 }
 function lowerRadio(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const index = attrs['index'] ?? '0';
     const style = attrs['style'];
     const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'radio', label, stateVar, valueExpr, onChangeExpr, directBind, index, style, loc });
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'radio', label, stateVar, valueExpr, onChangeExpr, directBind, index, style, item, loc });
 }
 function lowerInputTextMultiline(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const bufferIndex = ctx.bufferIndex++;
+    const width = attrs['width'];
+    const style = attrs['style'];
+    const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'input_text_multiline', label, bufferIndex, stateVar, valueExpr, onChangeExpr, directBind, width, style, item, loc });
+}
+function lowerColorPicker(attrs, rawAttrs, body, ctx, loc) {
+    const label = attrs['label'] ?? '""';
+    const style = attrs['style'];
     let stateVar = '';
-    const valueExpr = rawAttrs.get('value');
-    if (valueExpr && ts.isIdentifier(valueExpr)) {
-        const varName = valueExpr.text;
-        if (ctx.stateVars.has(varName)) {
-            stateVar = varName;
+    let valueExpr;
+    let onChangeExpr;
+    let directBind;
+    const valueRaw = rawAttrs.get('value');
+    if (valueRaw && ts.isIdentifier(valueRaw) && ctx.stateVars.has(valueRaw.text)) {
+        stateVar = valueRaw.text;
+    }
+    else if (valueRaw) {
+        valueExpr = exprToCpp(valueRaw, ctx);
+        const onChangeRaw = rawAttrs.get('onChange');
+        if (onChangeRaw) {
+            onChangeExpr = exprToCpp(onChangeRaw, ctx);
+            if (onChangeExpr.startsWith('[')) {
+                onChangeExpr = `(${onChangeExpr})()`;
+            }
+            else if (!onChangeExpr.endsWith(')')) {
+                onChangeExpr = `${onChangeExpr}()`;
+            }
+        }
+        else if (valueRaw && ts.isPropertyAccessExpression(valueRaw)) {
+            directBind = true;
         }
     }
-    const style = attrs['style'];
-    body.push({ kind: 'input_text_multiline', label, bufferIndex, stateVar, style, loc });
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'color_picker', label, stateVar, valueExpr, onChangeExpr, directBind, style, item, loc });
 }
-function lowerColorPicker(attrs, rawAttrs, body, ctx, loc) {
+function lowerColorPicker3(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
+    const width = attrs['width'];
     const style = attrs['style'];
     let stateVar = '';
     let valueExpr;
@@ -1082,7 +1670,8 @@ function lowerColorPicker(attrs, rawAttrs, body, ctx, loc) {
             directBind = true;
         }
     }
-    body.push({ kind: 'color_picker', label, stateVar, valueExpr, onChangeExpr, directBind, style, loc });
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'color_picker3', label, stateVar, valueExpr, onChangeExpr, directBind, width, style, item, loc });
 }
 function lowerPlotLines(attrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
@@ -1150,6 +1739,49 @@ function getRawAttributes(attributes) {
     }
     return result;
 }
+function lowerVectorInput(family, count, attrs, rawAttrs, body, ctx, loc) {
+    const label = attrs['label'] ?? '""';
+    const width = attrs['width'];
+    const style = attrs['style'];
+    const valueRaw = rawAttrs.get('value');
+    let stateVar = '';
+    let valueExpr;
+    let directBind;
+    let onChangeExpr;
+    if (valueRaw && ts.isIdentifier(valueRaw) && ctx.stateVars.has(valueRaw.text)) {
+        stateVar = valueRaw.text;
+    }
+    else if (valueRaw) {
+        valueExpr = exprToCpp(valueRaw, ctx);
+        const onChangeRaw = rawAttrs.get('onChange');
+        if (onChangeRaw) {
+            onChangeExpr = exprToCpp(onChangeRaw, ctx);
+            if (onChangeExpr.startsWith('[')) {
+                onChangeExpr = `(${onChangeExpr})()`;
+            }
+            else if (!onChangeExpr.endsWith(')')) {
+                onChangeExpr = `${onChangeExpr}()`;
+            }
+        }
+        else if (ts.isPropertyAccessExpression(valueRaw)) {
+            directBind = true;
+        }
+    }
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    const base = { kind: family, label, count, stateVar, valueExpr, directBind, onChangeExpr, width, style, item, loc };
+    if (family === 'drag_float_n' || family === 'drag_int_n') {
+        base.speed = attrs['speed'] ?? '1.0f';
+    }
+    if (family === 'slider_float_n') {
+        base.min = attrs['min'] ?? '0.0f';
+        base.max = attrs['max'] ?? '1.0f';
+    }
+    if (family === 'slider_int_n') {
+        base.min = attrs['min'] ?? '0';
+        base.max = attrs['max'] ?? '100';
+    }
+    body.push(base);
+}
 function lowerValueOnChange(rawAttrs, ctx) {
     let stateVar = '';
     let valueExpr;
@@ -1185,53 +1817,100 @@ function lowerSliderFloat(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const min = attrs['min'] ?? '0.0f';
     const max = attrs['max'] ?? '1.0f';
+    const width = attrs['width'];
     const style = attrs['style'];
     const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'slider_float', label, stateVar, valueExpr, onChangeExpr, directBind, min, max, style, loc });
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'slider_float', label, stateVar, valueExpr, onChangeExpr, directBind, min, max, width, style, item, loc });
 }
 function lowerSliderInt(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const min = attrs['min'] ?? '0';
     const max = attrs['max'] ?? '100';
+    const width = attrs['width'];
+    const style = attrs['style'];
+    const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'slider_int', label, stateVar, valueExpr, onChangeExpr, directBind, min, max, width, style, item, loc });
+}
+function lowerVSliderFloat(attrs, rawAttrs, body, ctx, loc) {
+    const label = attrs['label'] ?? '""';
+    const width = attrs['width'] ?? '20';
+    const height = attrs['height'] ?? '100';
+    const min = attrs['min'] ?? '0.0f';
+    const max = attrs['max'] ?? '1.0f';
+    const style = attrs['style'];
+    const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'vslider_float', label, stateVar, valueExpr, onChangeExpr, directBind, width, height, min, max, style, item, loc });
+}
+function lowerVSliderInt(attrs, rawAttrs, body, ctx, loc) {
+    const label = attrs['label'] ?? '""';
+    const width = attrs['width'] ?? '20';
+    const height = attrs['height'] ?? '100';
+    const min = attrs['min'] ?? '0';
+    const max = attrs['max'] ?? '100';
+    const style = attrs['style'];
+    const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'vslider_int', label, stateVar, valueExpr, onChangeExpr, directBind, width, height, min, max, style, item, loc });
+}
+function lowerSliderAngle(attrs, rawAttrs, body, ctx, loc) {
+    const label = attrs['label'] ?? '""';
+    const min = attrs['min'] ?? '-360.0f';
+    const max = attrs['max'] ?? '360.0f';
+    const width = attrs['width'];
     const style = attrs['style'];
     const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'slider_int', label, stateVar, valueExpr, onChangeExpr, directBind, min, max, style, loc });
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'slider_angle', label, stateVar, valueExpr, onChangeExpr, directBind, min, max, width, style, item, loc });
 }
 function lowerDragFloat(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const speed = attrs['speed'] ?? '1.0f';
+    const width = attrs['width'];
     const style = attrs['style'];
     const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'drag_float', label, stateVar, valueExpr, onChangeExpr, directBind, speed, style, loc });
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'drag_float', label, stateVar, valueExpr, onChangeExpr, directBind, speed, width, style, item, loc });
 }
 function lowerDragInt(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const speed = attrs['speed'] ?? '1.0f';
+    const width = attrs['width'];
     const style = attrs['style'];
     const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'drag_int', label, stateVar, valueExpr, onChangeExpr, directBind, speed, style, loc });
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'drag_int', label, stateVar, valueExpr, onChangeExpr, directBind, speed, width, style, item, loc });
 }
 function lowerCombo(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const items = attrs['items'] ?? '';
+    const width = attrs['width'];
     const style = attrs['style'];
     const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'combo', label, stateVar, valueExpr, onChangeExpr, directBind, items, style, loc });
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'combo', label, stateVar, valueExpr, onChangeExpr, directBind, items, width, style, item, loc });
 }
 function lowerInputInt(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
+    const width = attrs['width'];
     const style = attrs['style'];
     const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'input_int', label, stateVar, valueExpr, onChangeExpr, directBind, style, loc });
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'input_int', label, stateVar, valueExpr, onChangeExpr, directBind, width, style, item, loc });
 }
 function lowerInputFloat(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
+    const width = attrs['width'];
     const style = attrs['style'];
     const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'input_float', label, stateVar, valueExpr, onChangeExpr, directBind, style, loc });
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'input_float', label, stateVar, valueExpr, onChangeExpr, directBind, width, style, item, loc });
 }
 function lowerColorEdit(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
+    const width = attrs['width'];
     const style = attrs['style'];
     let stateVar = '';
     let valueExpr;
@@ -1257,14 +1936,48 @@ function lowerColorEdit(attrs, rawAttrs, body, ctx, loc) {
             directBind = true;
         }
     }
-    body.push({ kind: 'color_edit', label, stateVar, valueExpr, onChangeExpr, directBind, style, loc });
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'color_edit', label, stateVar, valueExpr, onChangeExpr, directBind, width, style, item, loc });
+}
+function lowerColorEdit3(attrs, rawAttrs, body, ctx, loc) {
+    const label = attrs['label'] ?? '""';
+    const width = attrs['width'];
+    const style = attrs['style'];
+    let stateVar = '';
+    let valueExpr;
+    let onChangeExpr;
+    let directBind;
+    const valueRaw = rawAttrs.get('value');
+    if (valueRaw && ts.isIdentifier(valueRaw) && ctx.stateVars.has(valueRaw.text)) {
+        stateVar = valueRaw.text;
+    }
+    else if (valueRaw) {
+        valueExpr = exprToCpp(valueRaw, ctx);
+        const onChangeRaw = rawAttrs.get('onChange');
+        if (onChangeRaw) {
+            onChangeExpr = exprToCpp(onChangeRaw, ctx);
+            if (onChangeExpr.startsWith('[')) {
+                onChangeExpr = `(${onChangeExpr})()`;
+            }
+            else if (!onChangeExpr.endsWith(')')) {
+                onChangeExpr = `${onChangeExpr}()`;
+            }
+        }
+        else if (valueRaw && ts.isPropertyAccessExpression(valueRaw)) {
+            directBind = true;
+        }
+    }
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'color_edit3', label, stateVar, valueExpr, onChangeExpr, directBind, width, style, item, loc });
 }
 function lowerListBox(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const items = attrs['items'] ?? '';
+    const width = attrs['width'];
     const style = attrs['style'];
     const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'list_box', label, stateVar, valueExpr, onChangeExpr, directBind, items, style, loc });
+    const item = lowerItemInteraction(attrs, rawAttrs, ctx);
+    body.push({ kind: 'list_box', label, stateVar, valueExpr, onChangeExpr, directBind, items, width, style, item, loc });
 }
 function lowerProgressBar(attrs, rawAttrs, body, ctx, loc) {
     const value = attrs['value'] ?? '0.0f';