imxc 0.5.4 → 0.6.0

package/dist/emitter.js

@@ -2,10 +2,15 @@ const INDENT = '    ';
 let currentCompName = '';
 let currentBoundProps = new Set();
 let allBoundProps = new Map();
+let sourceMapEnabled = true;
 function emitLocComment(loc, tag, lines, indent) {
-    if (loc) {
-        lines.push(`${indent}// ${loc.file}:${loc.line} <${tag}>`);
+    if (!loc)
+        return;
+    if (sourceMapEnabled) {
+        const filename = loc.file.replace(/\\/g, '/');
+        lines.push(`#line ${loc.line} "${filename}"`);
     }
+    lines.push(`${indent}// ${loc.file}:${loc.line} <${tag}>`);
 }
 function cppType(t) {
     switch (t) {
@@ -14,12 +19,16 @@ function cppType(t) {
         case 'bool': return 'bool';
         case 'string': return 'std::string';
         case 'color': return 'std::array<float, 4>';
+        case 'int_array': return 'std::array<int, 4>';
     }
 }
 function cppPropType(t) {
     if (t === 'callback')
         return 'std::function<void()>';
-    return cppType(t);
+    if (t === 'int' || t === 'float' || t === 'bool' || t === 'string' || t === 'color' || t === 'int_array') {
+        return cppType(t);
+    }
+    return t;
 }
 /**
  * Ensure a string expression is a const char*.
@@ -38,33 +47,50 @@ function asCharPtr(expr) {
 }
 /**
  * For directBind emitters: if the valueExpr references a bound prop (pointer),
- * return &*expr for bound props (C++ identity: &*ptr == ptr, and the *
- * blocks the post-processing regex lookbehind from dereferencing again).
+ * return the correct address expression for nested bound props.
  * Otherwise, emit &expr.
  */
 function emitDirectBindPtr(valueExpr) {
-    const propName = valueExpr.startsWith('props.') ? valueExpr.slice(6).split('.')[0].split('[')[0] : '';
-    if (currentBoundProps.has(propName)) {
-        return `&*${valueExpr}`; // already a pointer; &* is identity, * blocks regex lookbehind
+    const boundExpr = emitBoundValueExpr(valueExpr);
+    if (boundExpr !== valueExpr) {
+        return `&${boundExpr}`;
     }
     return `&${valueExpr}`;
 }
+function boundPropName(valueExpr) {
+    return valueExpr.startsWith('props.') ? valueExpr.slice(6).split('.')[0].split('[')[0] : '';
+}
+function emitBoundValueExpr(valueExpr) {
+    const propName = boundPropName(valueExpr);
+    if (!currentBoundProps.has(propName)) {
+        return valueExpr;
+    }
+    const prefix = `props.${propName}`;
+    const suffix = valueExpr.slice(prefix.length);
+    if (suffix.length === 0) {
+        return `(*props.${propName})`;
+    }
+    return `((*props.${propName})${suffix})`;
+}
 function emitImVec4(arrayStr) {
     const parts = arrayStr.split(',').map(s => {
         const v = s.trim();
-        return v.includes('.') ? `${v}f` : `${v}.0f`;
+        return /^-?\d+(\.\d+)?$/.test(v) ? (v.includes('.') ? `${v}f` : `${v}.0f`) : v;
     });
     return `ImVec4(${parts.join(', ')})`;
 }
 function emitImVec2(arrayStr) {
     const parts = arrayStr.split(',').map(s => {
         const v = s.trim();
-        return v.includes('.') ? `${v}f` : `${v}.0f`;
+        return /^-?\d+(\.\d+)?$/.test(v) ? (v.includes('.') ? `${v}f` : `${v}.0f`) : v;
     });
     return `ImVec2(${parts.join(', ')})`;
 }
 function emitFloat(val) {
-    return val.includes('.') ? `${val}F` : `${val}.0F`;
+    const trimmed = val.trim();
+    if (!/^-?\d+(\.\d+)?$/.test(trimmed))
+        return trimmed;
+    return trimmed.includes('.') ? `${trimmed}F` : `${trimmed}.0F`;
 }
 function findDockLayout(nodes) {
     for (const node of nodes) {
@@ -111,7 +137,7 @@ function emitDockSetupFunction(layout, compName, lines) {
  * Emit a .gen.h header for a component that has props.
  * Contains the props struct and function forward declaration.
  */
-export function emitComponentHeader(comp, sourceFile, boundProps) {
+export function emitComponentHeader(comp, sourceFile, boundProps, sharedPropsType, resolvedBoundTypes) {
     const lines = [];
     if (sourceFile) {
         lines.push(`// Generated from ${sourceFile} by imxc`);
@@ -121,26 +147,37 @@ export function emitComponentHeader(comp, sourceFile, boundProps) {
     lines.push('#include <imx/renderer.h>');
     lines.push('#include <functional>');
     lines.push('#include <string>');
+    if (sharedPropsType) {
+        lines.push(`#include "${sharedPropsType}.h"`);
+    }
     lines.push('');
-    // Props struct
-    lines.push(`struct ${comp.name}Props {`);
-    for (const p of comp.params) {
-        if (boundProps && boundProps.has(p.name)) {
-            lines.push(`${INDENT}${cppPropType(p.type)}* ${p.name} = nullptr;`);
-        }
-        else {
-            lines.push(`${INDENT}${cppPropType(p.type)} ${p.name};`);
+    if (comp.params.length > 0) {
+        // Props struct
+        lines.push(`struct ${comp.name}Props {`);
+        for (const p of comp.params) {
+            if (boundProps && boundProps.has(p.name)) {
+                // Use resolved C++ type from parent interface if available (e.g. float instead of int)
+                const actualType = resolvedBoundTypes?.get(p.name) ?? cppPropType(p.type);
+                lines.push(`${INDENT}${actualType}* ${p.name} = nullptr;`);
+            }
+            else {
+                lines.push(`${INDENT}${cppPropType(p.type)} ${p.name};`);
+            }
         }
+        lines.push('};');
+        lines.push('');
+        lines.push(`void ${comp.name}_render(imx::RenderContext& ctx, ${comp.name}Props& props);`);
+    }
+    else {
+        // Propless component — just the function forward declaration
+        lines.push(`void ${comp.name}_render(imx::RenderContext& ctx);`);
     }
-    lines.push('};');
-    lines.push('');
-    // Function forward declaration
-    lines.push(`void ${comp.name}_render(imx::RenderContext& ctx, ${comp.name}Props& props);`);
     lines.push('');
     return lines.join('\n');
 }
-export function emitComponent(comp, imports, sourceFile, boundProps, boundPropsMap) {
+export function emitComponent(comp, imports, sourceFile, boundProps, boundPropsMap, options) {
     const lines = [];
+    sourceMapEnabled = options?.sourceMap ?? true;
     // Reset counters for each component
     styleCounter = 0;
     customComponentCounter = 0;
@@ -149,8 +186,10 @@ export function emitComponent(comp, imports, sourceFile, boundProps, boundPropsM
     listBoxCounter = 0;
     nativeWidgetCounter = 0;
     plotCounter = 0;
+    widgetTempCounter = 0;
     dragDropSourceStack.length = 0;
     dragDropTargetStack.length = 0;
+    collapsingHeaderOnCloseStack.length = 0;
     currentCompName = comp.name;
     currentBoundProps = boundProps ?? new Set();
     allBoundProps = boundPropsMap ?? new Map();
@@ -191,6 +230,12 @@ export function emitComponent(comp, imports, sourceFile, boundProps, boundPropsM
             if (hasColorType) {
                 lines.push('#include <array>');
             }
+            // Include imported component headers
+            if (imports && imports.length > 0) {
+                for (const imp of imports) {
+                    lines.push(`#include "${imp.headerFile}"`);
+                }
+            }
             // Embed image includes
             const embedKeysProps = collectEmbedKeys(comp.body);
             for (const key of embedKeysProps) {
@@ -241,7 +286,9 @@ export function emitComponent(comp, imports, sourceFile, boundProps, boundPropsM
             ? `std::string(${slot.initialValue})`
             : slot.type === 'color'
                 ? `std::array<float, 4>${slot.initialValue}`
-                : slot.initialValue;
+                : slot.type === 'int_array'
+                    ? `std::array<int, 4>${slot.initialValue}`
+                    : slot.initialValue;
         lines.push(`${INDENT}auto ${slot.name} = ctx.use_state<${cppType(slot.type)}>(${initVal}, ${slot.index});`);
     }
     if (comp.stateSlots.length > 0) {
@@ -254,6 +301,8 @@ export function emitComponent(comp, imports, sourceFile, boundProps, boundPropsM
         for (let i = 0; i < lines.length; i++) {
             if (lines[i].trimStart().startsWith('//'))
                 continue;
+            if (lines[i].trimStart().startsWith('#line'))
+                continue;
             for (const prop of currentBoundProps) {
                 // Replace props.X reads with (*props.X) — but not &props.X or *props.X (already handled)
                 const pattern = new RegExp(`(?<![&*])\\bprops\\.${prop}\\b`, 'g');
@@ -265,12 +314,37 @@ export function emitComponent(comp, imports, sourceFile, boundProps, boundPropsM
     lines.push('');
     return lines.join('\n');
 }
-export function emitRoot(rootName, stateCount, bufferCount, sourceFile, propsType, namedPropsType) {
+export function emitRoot(rootName, stateCount, bufferCount, sourceFile, propsType, namedPropsType, fontDeclarations) {
     const lines = [];
+    const fonts = fontDeclarations ?? [];
     if (sourceFile) {
         lines.push(`// Generated from ${sourceFile} by imxc`);
     }
     lines.push('#include <imx/runtime.h>');
+    // Font embed includes and init function
+    if (fonts.length > 0) {
+        lines.push('#include <imx/renderer.h>');
+        for (const f of fonts) {
+            if (f.embed && f.embedKey) {
+                lines.push(`#include "${f.embedKey}.embed.h"`);
+            }
+        }
+        lines.push('');
+        lines.push('void _imx_load_fonts() {');
+        lines.push(`${INDENT}static bool done = false;`);
+        lines.push(`${INDENT}if (done) return;`);
+        lines.push(`${INDENT}done = true;`);
+        for (const f of fonts) {
+            if (f.embed && f.embedKey) {
+                lines.push(`${INDENT}imx::load_font_embedded("${f.name}", ${f.embedKey}_data, ${f.embedKey}_size, ${f.size});`);
+            }
+            else {
+                lines.push(`${INDENT}imx::load_font("${f.name}", "${f.src}", ${f.size});`);
+            }
+        }
+        lines.push('}');
+        lines.push('');
+    }
     if (propsType) {
         if (namedPropsType) {
             // Named interface type (e.g. AppState defined in user code).
@@ -295,6 +369,9 @@ export function emitRoot(rootName, stateCount, bufferCount, sourceFile, propsTyp
             lines.push(`void render_root(Runtime& runtime, ${propsType}& state) {`);
         }
         lines.push(`${INDENT}auto& ctx = runtime.begin_frame();`);
+        if (fonts.length > 0) {
+            lines.push(`${INDENT}_imx_load_fonts();`);
+        }
         lines.push(`${INDENT}ctx.begin_instance("${rootName}", 0, ${stateCount}, ${bufferCount});`);
         lines.push(`${INDENT}${rootName}_render(ctx, state);`);
         lines.push(`${INDENT}ctx.end_instance();`);
@@ -309,6 +386,9 @@ export function emitRoot(rootName, stateCount, bufferCount, sourceFile, propsTyp
         lines.push('namespace imx {');
         lines.push('void render_root(Runtime& runtime) {');
         lines.push(`${INDENT}auto& ctx = runtime.begin_frame();`);
+        if (fonts.length > 0) {
+            lines.push(`${INDENT}_imx_load_fonts();`);
+        }
         lines.push(`${INDENT}ctx.begin_instance("${rootName}", 0, ${stateCount}, ${bufferCount});`);
         lines.push(`${INDENT}${rootName}_render(ctx);`);
         lines.push(`${INDENT}ctx.end_instance();`);
@@ -339,6 +419,18 @@ function emitNode(node, lines, depth) {
         case 'button':
             emitButton(node, lines, indent, depth);
             break;
+        case 'small_button':
+            emitSmallButton(node, lines, indent);
+            break;
+        case 'arrow_button':
+            emitArrowButton(node, lines, indent);
+            break;
+        case 'invisible_button':
+            emitInvisibleButton(node, lines, indent);
+            break;
+        case 'image_button':
+            emitImageButton(node, lines, indent);
+            break;
         case 'text_input':
             emitTextInput(node, lines, indent);
             break;
@@ -348,6 +440,21 @@ function emitNode(node, lines, depth) {
         case 'separator':
             lines.push(`${indent}imx::renderer::separator();`);
             break;
+        case 'spacing':
+            emitSpacing(node, lines, indent);
+            break;
+        case 'dummy':
+            emitDummy(node, lines, indent);
+            break;
+        case 'same_line':
+            emitSameLine(node, lines, indent);
+            break;
+        case 'new_line':
+            emitNewLine(node, lines, indent);
+            break;
+        case 'cursor':
+            emitCursor(node, lines, indent);
+            break;
         case 'begin_popup':
             emitLocComment(node.loc, 'Popup', lines, indent);
             lines.push(`${indent}if (imx::renderer::begin_popup(${node.id})) {`);
@@ -369,6 +476,37 @@ function emitNode(node, lines, depth) {
         case 'menu_item':
             emitMenuItem(node, lines, indent, depth);
             break;
+        case 'begin_table':
+            emitBeginTable(node, lines, indent);
+            break;
+        case 'end_table':
+            lines.push(`${indent}imx::renderer::end_table();`);
+            lines.push(`${indent}}`);
+            break;
+        case 'begin_table_row':
+            emitBeginTableRow(node, lines, indent);
+            break;
+        case 'end_table_row':
+            lines.push(`${indent}imx::renderer::end_table_row();`);
+            break;
+        case 'begin_table_cell':
+            emitBeginTableCell(node, lines, indent);
+            break;
+        case 'end_table_cell':
+            lines.push(`${indent}imx::renderer::end_table_cell();`);
+            break;
+        case 'begin_tree_node':
+            emitBeginTreeNode(node, lines, indent);
+            break;
+        case 'end_tree_node':
+            emitEndTreeNode(node, lines, indent);
+            break;
+        case 'begin_collapsing_header':
+            emitBeginCollapsingHeader(node, lines, indent);
+            break;
+        case 'end_collapsing_header':
+            emitEndCollapsingHeader(node, lines, indent);
+            break;
         case 'custom_component':
             emitCustomComponent(node, lines, indent);
             break;
@@ -384,6 +522,35 @@ function emitNode(node, lines, depth) {
         case 'drag_int':
             emitDragInt(node, lines, indent);
             break;
+        case 'begin_combo': {
+            const n = node;
+            emitLocComment(n.loc, 'Combo (manual)', lines, indent);
+            const label = asCharPtr(n.label);
+            const preview = asCharPtr(n.preview);
+            const flagStr = n.flags.length > 0 ? n.flags.join(' | ') : '0';
+            if (n.width) {
+                lines.push(`${indent}ImGui::PushItemWidth(${n.width});`);
+            }
+            lines.push(`${indent}if (imx::renderer::begin_combo(${label}, ${preview}, ${flagStr})) {`);
+            break;
+        }
+        case 'end_combo':
+            lines.push(`${indent}imx::renderer::end_combo();`);
+            lines.push(`${indent}}`);
+            break;
+        case 'begin_list_box': {
+            const n = node;
+            emitLocComment(n.loc, 'ListBox (manual)', lines, indent);
+            const label = asCharPtr(n.label);
+            const w = n.width ?? '0.0f';
+            const h = n.height ?? '0.0f';
+            lines.push(`${indent}if (imx::renderer::begin_list_box(${label}, ${w}, ${h})) {`);
+            break;
+        }
+        case 'end_list_box':
+            lines.push(`${indent}imx::renderer::end_list_box();`);
+            lines.push(`${indent}}`);
+            break;
         case 'combo':
             emitCombo(node, lines, indent);
             break;
@@ -396,6 +563,9 @@ function emitNode(node, lines, depth) {
         case 'color_edit':
             emitColorEdit(node, lines, indent);
             break;
+        case 'color_edit3':
+            emitColorEdit3(node, lines, indent);
+            break;
         case 'list_box':
             emitListBox(node, lines, indent);
             break;
@@ -405,9 +575,16 @@ function emitNode(node, lines, depth) {
         case 'tooltip':
             emitTooltip(node, lines, indent);
             break;
+        case 'shortcut':
+            emitShortcut(node, lines, indent);
+            break;
         case 'bullet_text':
             emitBulletText(node, lines, indent);
             break;
+        case 'bullet':
+            emitLocComment(node.loc, 'Bullet', lines, indent);
+            lines.push(`${indent}imx::renderer::bullet();`);
+            break;
         case 'label_text':
             emitLabelText(node, lines, indent);
             break;
@@ -423,6 +600,9 @@ function emitNode(node, lines, depth) {
         case 'color_picker':
             emitColorPicker(node, lines, indent);
             break;
+        case 'color_picker3':
+            emitColorPicker3(node, lines, indent);
+            break;
         case 'plot_lines':
             emitPlotLines(node, lines, indent);
             break;
@@ -444,6 +624,62 @@ function emitNode(node, lines, depth) {
         case 'draw_text':
             emitDrawText(node, lines, indent);
             break;
+        case 'draw_bezier_cubic':
+            emitDrawBezierCubic(node, lines, indent);
+            break;
+        case 'draw_bezier_quadratic':
+            emitDrawBezierQuadratic(node, lines, indent);
+            break;
+        case 'draw_polyline':
+            emitDrawPolyline(node, lines, indent);
+            break;
+        case 'draw_convex_poly_filled':
+            emitDrawConvexPolyFilled(node, lines, indent);
+            break;
+        case 'draw_ngon':
+            emitDrawNgon(node, lines, indent);
+            break;
+        case 'draw_ngon_filled':
+            emitDrawNgonFilled(node, lines, indent);
+            break;
+        case 'draw_triangle':
+            emitDrawTriangle(node, lines, indent);
+            break;
+        case 'input_float_n':
+            emitVectorInput(node, 'input_float_n', 'float', lines, indent);
+            break;
+        case 'input_int_n':
+            emitVectorInput(node, 'input_int_n', 'int', lines, indent);
+            break;
+        case 'drag_float_n': {
+            const speed = ensureFloatLiteral(node.speed);
+            emitVectorInput(node, 'drag_float_n', 'float', lines, indent, `, ${speed}`);
+            break;
+        }
+        case 'drag_int_n': {
+            const speed = ensureFloatLiteral(node.speed);
+            emitVectorInput(node, 'drag_int_n', 'int', lines, indent, `, ${speed}`);
+            break;
+        }
+        case 'slider_float_n': {
+            const min = ensureFloatLiteral(node.min);
+            const max = ensureFloatLiteral(node.max);
+            emitVectorInput(node, 'slider_float_n', 'float', lines, indent, `, ${min}, ${max}`);
+            break;
+        }
+        case 'slider_int_n': {
+            emitVectorInput(node, 'slider_int_n', 'int', lines, indent, `, ${node.min}, ${node.max}`);
+            break;
+        }
+        case 'vslider_float':
+            emitVSliderFloat(node, lines, indent);
+            break;
+        case 'vslider_int':
+            emitVSliderInt(node, lines, indent);
+            break;
+        case 'slider_angle':
+            emitSliderAngle(node, lines, indent);
+            break;
         case 'native_widget':
             emitNativeWidget(node, lines, indent);
             break;
@@ -472,10 +708,13 @@ let comboCounter = 0;
 let listBoxCounter = 0;
 let nativeWidgetCounter = 0;
 let plotCounter = 0;
+let widgetTempCounter = 0;
 const windowOpenStack = []; // tracks if begin_window used open prop
 const modalOnCloseStack = []; // tracks modal onClose expressions
+const collapsingHeaderOnCloseStack = [];
 const dragDropSourceStack = [];
 const dragDropTargetStack = [];
+const multiSelectCallbackStack = [];
 /**
  * Build a Style variable from a raw style expression string for self-closing components.
  * Handles JS-like object literals: { width: 300, height: 100 } -> imx::Style with assignments.
@@ -507,53 +746,118 @@ function splitStylePairs(inner) {
         pairs.push(last);
     return pairs;
 }
+function assignStyleExpr(varName, styleExpr, indent, lines) {
+    const trimmed = styleExpr.trim();
+    if (!trimmed)
+        return;
+    if (!trimmed.startsWith('{') || !trimmed.endsWith('}')) {
+        lines.push(`${indent}${varName} = ${trimmed};`);
+        return;
+    }
+    const inner = trimmed.slice(1, -1).trim();
+    if (!inner)
+        return;
+    const pairs = splitStylePairs(inner);
+    for (const pair of pairs) {
+        const colonIdx = pair.indexOf(':');
+        if (colonIdx === -1)
+            continue;
+        const key = pair.substring(0, colonIdx).trim();
+        const val = pair.substring(colonIdx + 1).trim();
+        const cppKey = key === 'paddingHorizontal' ? 'padding_horizontal'
+            : key === 'paddingVertical' ? 'padding_vertical'
+                : key === 'minWidth' ? 'min_width'
+                    : key === 'minHeight' ? 'min_height'
+                        : key === 'backgroundColor' ? 'background_color'
+                            : key === 'textColor' ? 'text_color'
+                                : key === 'fontSize' ? 'font_size'
+                                    : key;
+        if (cppKey === 'background_color' || cppKey === 'text_color') {
+            const arrInner = val.trim().replace(/^\[/, '').replace(/\]$/, '');
+            const components = arrInner.split(',').map(c => {
+                const s = c.trim();
+                return /^-?\d+(\.\d+)?$/.test(s) ? (s.includes('.') ? `${s}f` : `${s}.0f`) : s;
+            });
+            lines.push(`${indent}${varName}.${cppKey} = ImVec4(${components.join(', ')});`);
+        }
+        else {
+            lines.push(`${indent}${varName}.${cppKey} = ${emitFloat(val)};`);
+        }
+    }
+}
 function buildStyleVar(styleExpr, indent, lines) {
     if (!styleExpr)
         return null;
-    // Check if it looks like an object literal: { key: value, ... }
-    const trimmed = styleExpr.trim();
-    if (trimmed.startsWith('{') && trimmed.endsWith('}')) {
-        const inner = trimmed.slice(1, -1).trim();
-        if (!inner)
-            return null;
-        const varName = `style_${styleCounter++}`;
-        lines.push(`${indent}imx::Style ${varName};`);
-        // Parse key: value pairs (bracket-aware to handle array values)
-        const pairs = splitStylePairs(inner);
-        for (const pair of pairs) {
-            const colonIdx = pair.indexOf(':');
-            if (colonIdx === -1)
-                continue;
-            const key = pair.substring(0, colonIdx).trim();
-            const val = pair.substring(colonIdx + 1).trim();
-            // Map camelCase to snake_case
-            const cppKey = key === 'paddingHorizontal' ? 'padding_horizontal'
-                : key === 'paddingVertical' ? 'padding_vertical'
-                    : key === 'minWidth' ? 'min_width'
-                        : key === 'minHeight' ? 'min_height'
-                            : key === 'backgroundColor' ? 'background_color'
-                                : key === 'textColor' ? 'text_color'
-                                    : key === 'fontSize' ? 'font_size'
-                                        : key;
-            // ImVec4 fields (color arrays)
-            if (cppKey === 'background_color' || cppKey === 'text_color') {
-                // val is like [r, g, b, a] — convert to ImVec4(r, g, b, a)
-                const arrInner = val.trim().replace(/^\[/, '').replace(/\]$/, '');
-                const components = arrInner.split(',').map(c => {
-                    const s = c.trim();
-                    return s.includes('.') ? `${s}f` : `${s}.0f`;
-                });
-                lines.push(`${indent}${varName}.${cppKey} = ImVec4(${components.join(', ')});`);
-            }
-            else {
-                const floatVal = val.includes('.') ? `${val}F` : `${val}.0F`;
-                lines.push(`${indent}${varName}.${cppKey} = ${floatVal};`);
-            }
-        }
+    const varName = `style_${styleCounter++}`;
+    lines.push(`${indent}imx::Style ${varName};`);
+    assignStyleExpr(varName, styleExpr, indent, lines);
+    return varName;
+}
+function buildWidgetStyleVar(styleExpr, widthExpr, indent, lines) {
+    if (!styleExpr && !widthExpr)
+        return null;
+    const varName = `style_${styleCounter++}`;
+    lines.push(`${indent}imx::Style ${varName};`);
+    if (styleExpr) {
+        assignStyleExpr(varName, styleExpr, indent, lines);
+    }
+    if (widthExpr) {
+        lines.push(`${indent}${varName}.width = ${emitFloat(widthExpr)};`);
+    }
+    return varName;
+}
+function nextWidgetTemp(prefix) {
+    return `_${prefix}_${widgetTempCounter++}`;
+}
+function emitActionStatements(statements, lines, indent) {
+    if (!statements)
+        return;
+    for (const stmt of statements) {
+        lines.push(`${indent}${stmt}`);
+    }
+}
+function emitItemInteractionBefore(item, lines, indent) {
+    if (!item?.autoFocus)
+        return;
+    lines.push(`${indent}if (${item.autoFocus}) imx::renderer::request_keyboard_focus();`);
+}
+function emitItemInteractionAfter(item, lines, indent) {
+    if (!item)
+        return;
+    if (item.tooltip) {
+        lines.push(`${indent}imx::renderer::tooltip(${asCharPtr(item.tooltip)});`);
+    }
+    if (item.scrollToHere) {
+        lines.push(`${indent}if (${item.scrollToHere}) imx::renderer::item_scroll_to_here();`);
+    }
+    if (item.cursor) {
+        lines.push(`${indent}imx::renderer::item_cursor(${asCharPtr(item.cursor)});`);
+    }
+    const callbackChecks = [
+        [item.onHover, 'item_hovered'],
+        [item.onActive, 'item_active'],
+        [item.onFocused, 'item_focused'],
+        [item.onClicked, 'item_clicked'],
+        [item.onDoubleClicked, 'item_double_clicked'],
+    ];
+    for (const [statements, fn] of callbackChecks) {
+        if (!statements || statements.length === 0)
+            continue;
+        lines.push(`${indent}if (imx::renderer::${fn}()) {`);
+        emitActionStatements(statements, lines, indent + INDENT);
+        lines.push(`${indent}}`);
+    }
+}
+function emitBoolWidgetCall(callExpr, item, lines, indent, resultVar) {
+    emitItemInteractionBefore(item, lines, indent);
+    if (item || resultVar) {
+        const varName = resultVar ?? nextWidgetTemp('item');
+        lines.push(`${indent}bool ${varName} = ${callExpr};`);
+        emitItemInteractionAfter(item, lines, indent);
         return varName;
     }
-    // Already a variable name or expression — return as-is
-    return styleExpr;
+    lines.push(`${indent}${callExpr};`);
+    return null;
 }
 function buildStyleBlock(node, indent, lines) {
     // Check for style-related props (gap, padding, width, height, etc.)
@@ -582,12 +886,158 @@ function buildStyleBlock(node, indent, lines) {
     const varName = `style_${styleCounter++}`;
     lines.push(`${indent}imx::Style ${varName};`);
     for (const [key, val] of Object.entries(styleProps)) {
-        // Ensure the value is a float literal (e.g., 8 -> 8.0F, 8.5 -> 8.5F)
-        const floatVal = val.includes('.') ? `${val}F` : `${val}.0F`;
-        lines.push(`${indent}${varName}.${key} = ${floatVal};`);
+        lines.push(`${indent}${varName}.${key} = ${emitFloat(val)};`);
     }
     return varName;
 }
+function emitTableOptions(node, varName, indent, lines) {
+    lines.push(`${indent}imx::TableOptions ${varName};`);
+    if (node.sortable || node.onSortBody)
+        lines.push(`${indent}${varName}.sortable = ${node.sortable ?? 'true'};`);
+    if (node.hideable)
+        lines.push(`${indent}${varName}.hideable = ${node.hideable};`);
+    if (node.multiSortable)
+        lines.push(`${indent}${varName}.multi_sortable = ${node.multiSortable};`);
+    if (node.noClip)
+        lines.push(`${indent}${varName}.no_clip = ${node.noClip};`);
+    if (node.padOuterX)
+        lines.push(`${indent}${varName}.pad_outer_x = ${node.padOuterX};`);
+    if (node.scrollX)
+        lines.push(`${indent}${varName}.scroll_x = ${node.scrollX};`);
+    if (node.scrollY)
+        lines.push(`${indent}${varName}.scroll_y = ${node.scrollY};`);
+    if (node.noBorders)
+        lines.push(`${indent}${varName}.no_borders = ${node.noBorders};`);
+    if (node.noRowBg)
+        lines.push(`${indent}${varName}.no_row_bg = ${node.noRowBg};`);
+}
+function emitBeginTable(node, lines, indent) {
+    emitLocComment(node.loc, 'Table', lines, indent);
+    const colsVar = `table_cols_${styleCounter++}`;
+    const optsVar = `table_opts_${styleCounter++}`;
+    const style = node.style ? buildStyleVar(node.style, indent, lines) : null;
+    lines.push(`${indent}imx::TableColumn ${colsVar}[${node.columns.length}];`);
+    node.columns.forEach((column, index) => {
+        lines.push(`${indent}${colsVar}[${index}].label = ${asCharPtr(column.label)};`);
+        if (column.defaultHide)
+            lines.push(`${indent}if (${column.defaultHide}) ${colsVar}[${index}].flags |= ImGuiTableColumnFlags_DefaultHide;`);
+        if (column.preferSortAscending)
+            lines.push(`${indent}if (${column.preferSortAscending}) ${colsVar}[${index}].flags |= ImGuiTableColumnFlags_PreferSortAscending;`);
+        if (column.preferSortDescending)
+            lines.push(`${indent}if (${column.preferSortDescending}) ${colsVar}[${index}].flags |= ImGuiTableColumnFlags_PreferSortDescending;`);
+        if (column.noResize)
+            lines.push(`${indent}if (${column.noResize}) ${colsVar}[${index}].flags |= ImGuiTableColumnFlags_NoResize;`);
+        if (column.fixedWidth)
+            lines.push(`${indent}if (${column.fixedWidth}) ${colsVar}[${index}].flags |= ImGuiTableColumnFlags_WidthFixed;`);
+    });
+    emitTableOptions(node, optsVar, indent, lines);
+    const styleArg = style ?? '{}';
+    lines.push(`${indent}if (imx::renderer::begin_table("##table", ${colsVar}, ${node.columns.length}, ${styleArg}, ${optsVar})) {`);
+    if (node.onSortBody) {
+        const paramName = node.onSortParam ?? 'tableSortSpecs';
+        lines.push(`${indent}${INDENT}if (ImGuiTableSortSpecs* _imx_sort_specs = ImGui::TableGetSortSpecs()) {`);
+        lines.push(`${indent}${INDENT}${INDENT}if (_imx_sort_specs->SpecsDirty) {`);
+        lines.push(`${indent}${INDENT}${INDENT}${INDENT}ImGuiTableSortSpecs& ${paramName} = *_imx_sort_specs;`);
+        lines.push(`${indent}${INDENT}${INDENT}${INDENT}${node.onSortBody}`);
+        lines.push(`${indent}${INDENT}${INDENT}${INDENT}_imx_sort_specs->SpecsDirty = false;`);
+        lines.push(`${indent}${INDENT}${INDENT}}`);
+        lines.push(`${indent}${INDENT}}`);
+    }
+}
+function emitBeginTableRow(node, lines, indent) {
+    emitLocComment(node.loc, 'TableRow', lines, indent);
+    if (node.bgColor) {
+        lines.push(`${indent}imx::renderer::begin_table_row(${emitImVec4(node.bgColor)});`);
+    }
+    else {
+        lines.push(`${indent}imx::renderer::begin_table_row();`);
+    }
+}
+function emitBeginTableCell(node, lines, indent) {
+    emitLocComment(node.loc, 'TableCell', lines, indent);
+    const columnIndex = node.columnIndex ?? '-1';
+    if (node.bgColor) {
+        lines.push(`${indent}imx::renderer::begin_table_cell(${columnIndex}, ${emitImVec4(node.bgColor)});`);
+    }
+    else {
+        lines.push(`${indent}imx::renderer::begin_table_cell(${columnIndex});`);
+    }
+}
+function emitBeginTreeNode(node, lines, indent) {
+    emitLocComment(node.loc, 'TreeNode', lines, indent);
+    if (node.forceOpen) {
+        lines.push(`${indent}ImGui::SetNextItemOpen(${node.forceOpen}, ImGuiCond_Always);`);
+    }
+    else if (node.defaultOpen) {
+        lines.push(`${indent}ImGui::SetNextItemOpen(${node.defaultOpen}, ImGuiCond_Once);`);
+    }
+    const flagsVar = `tree_flags_${styleCounter++}`;
+    lines.push(`${indent}ImGuiTreeNodeFlags ${flagsVar} = 0;`);
+    if (node.defaultOpen)
+        lines.push(`${indent}if (${node.defaultOpen}) ${flagsVar} |= ImGuiTreeNodeFlags_DefaultOpen;`);
+    if (node.openOnArrow)
+        lines.push(`${indent}if (${node.openOnArrow}) ${flagsVar} |= ImGuiTreeNodeFlags_OpenOnArrow;`);
+    if (node.openOnDoubleClick)
+        lines.push(`${indent}if (${node.openOnDoubleClick}) ${flagsVar} |= ImGuiTreeNodeFlags_OpenOnDoubleClick;`);
+    if (node.leaf)
+        lines.push(`${indent}if (${node.leaf}) ${flagsVar} |= ImGuiTreeNodeFlags_Leaf;`);
+    if (node.bullet)
+        lines.push(`${indent}if (${node.bullet}) ${flagsVar} |= ImGuiTreeNodeFlags_Bullet;`);
+    if (node.noTreePushOnOpen)
+        lines.push(`${indent}if (${node.noTreePushOnOpen}) ${flagsVar} |= ImGuiTreeNodeFlags_NoTreePushOnOpen;`);
+    emitItemInteractionBefore(node.item, lines, indent);
+    const openVar = nextWidgetTemp('tree_open');
+    lines.push(`${indent}bool ${openVar} = imx::renderer::begin_tree_node(${asCharPtr(node.label)}, ${flagsVar});`);
+    emitItemInteractionAfter(node.item, lines, indent);
+    lines.push(`${indent}if (${openVar}) {`);
+}
+function emitEndTreeNode(node, lines, indent) {
+    lines.push(`${indent}imx::renderer::end_tree_node(${node.noTreePushOnOpen ?? 'false'});`);
+    lines.push(`${indent}}`);
+}
+function emitBeginCollapsingHeader(node, lines, indent) {
+    emitLocComment(node.loc, 'CollapsingHeader', lines, indent);
+    if (node.forceOpen) {
+        lines.push(`${indent}ImGui::SetNextItemOpen(${node.forceOpen}, ImGuiCond_Always);`);
+    }
+    else if (node.defaultOpen) {
+        lines.push(`${indent}ImGui::SetNextItemOpen(${node.defaultOpen}, ImGuiCond_Once);`);
+    }
+    const flagsVar = `header_flags_${styleCounter++}`;
+    lines.push(`${indent}ImGuiTreeNodeFlags ${flagsVar} = 0;`);
+    if (node.defaultOpen)
+        lines.push(`${indent}if (${node.defaultOpen}) ${flagsVar} |= ImGuiTreeNodeFlags_DefaultOpen;`);
+    if (node.closable) {
+        collapsingHeaderOnCloseStack.push(node.onCloseBody ?? null);
+        lines.push(`${indent}{`);
+        lines.push(`${indent}${INDENT}bool header_visible = true;`);
+        lines.push(`${indent}${INDENT}bool* header_visible_ptr = ${node.closable} ? &header_visible : nullptr;`);
+        emitItemInteractionBefore(node.item, lines, indent + INDENT);
+        const openVar = nextWidgetTemp('header_open');
+        lines.push(`${indent}${INDENT}bool ${openVar} = imx::renderer::begin_collapsing_header(${asCharPtr(node.label)}, ${flagsVar}, header_visible_ptr);`);
+        emitItemInteractionAfter(node.item, lines, indent + INDENT);
+        lines.push(`${indent}${INDENT}if (${openVar}) {`);
+    }
+    else {
+        collapsingHeaderOnCloseStack.push(null);
+        emitItemInteractionBefore(node.item, lines, indent);
+        const openVar = nextWidgetTemp('header_open');
+        lines.push(`${indent}bool ${openVar} = imx::renderer::begin_collapsing_header(${asCharPtr(node.label)}, ${flagsVar});`);
+        emitItemInteractionAfter(node.item, lines, indent);
+        lines.push(`${indent}if (${openVar}) {`);
+    }
+}
+function emitEndCollapsingHeader(node, lines, indent) {
+    lines.push(`${indent}imx::renderer::end_collapsing_header();`);
+    lines.push(`${indent}}`);
+    const onCloseBody = collapsingHeaderOnCloseStack.pop() ?? null;
+    if (node.closable) {
+        if (onCloseBody) {
+            lines.push(`${indent}${INDENT}if (${node.closable} && !header_visible) { ${onCloseBody} }`);
+        }
+        lines.push(`${indent}}`);
+    }
+}
 function emitBeginContainer(node, lines, indent) {
     emitLocComment(node.loc, node.tag, lines, indent);
     switch (node.tag) {
@@ -606,21 +1056,89 @@ function emitBeginContainer(node, lines, indent) {
                 flagParts.push('ImGuiWindowFlags_NoDocking');
             if (node.props['noScrollbar'] === 'true')
                 flagParts.push('ImGuiWindowFlags_NoScrollbar');
+            if (node.props['noBackground'] === 'true')
+                flagParts.push('ImGuiWindowFlags_NoBackground');
+            if (node.props['alwaysAutoResize'] === 'true')
+                flagParts.push('ImGuiWindowFlags_AlwaysAutoResize');
+            if (node.props['noNavFocus'] === 'true')
+                flagParts.push('ImGuiWindowFlags_NoNavFocus');
+            if (node.props['noNav'] === 'true')
+                flagParts.push('ImGuiWindowFlags_NoNav');
+            if (node.props['noDecoration'] === 'true')
+                flagParts.push('ImGuiWindowFlags_NoDecoration');
+            if (node.props['noInputs'] === 'true')
+                flagParts.push('ImGuiWindowFlags_NoInputs');
+            if (node.props['noScrollWithMouse'] === 'true')
+                flagParts.push('ImGuiWindowFlags_NoScrollWithMouse');
+            if (node.props['horizontalScrollbar'] === 'true')
+                flagParts.push('ImGuiWindowFlags_HorizontalScrollbar');
+            if (node.props['alwaysVerticalScrollbar'] === 'true')
+                flagParts.push('ImGuiWindowFlags_AlwaysVerticalScrollbar');
+            if (node.props['alwaysHorizontalScrollbar'] === 'true')
+                flagParts.push('ImGuiWindowFlags_AlwaysHorizontalScrollbar');
+            if (node.props['hasMenuBar'] === 'true')
+                flagParts.push('ImGuiWindowFlags_MenuBar');
             const flags = flagParts.length > 0 ? flagParts.join(' | ') : '0';
+            // Window positioning
+            const xExpr = node.props['x'];
+            const yExpr = node.props['y'];
+            if (xExpr && yExpr) {
+                const posCond = node.props['forcePosition'] === 'true' ? 'ImGuiCond_Always' : 'ImGuiCond_Once';
+                lines.push(`${indent}ImGui::SetNextWindowPos(ImVec2(${xExpr}, ${yExpr}), ${posCond});`);
+            }
+            // Window sizing
+            const wExpr = node.props['width'];
+            const hExpr = node.props['height'];
+            if (wExpr || hExpr) {
+                const sizeCond = node.props['forceSize'] === 'true' ? 'ImGuiCond_Always' : 'ImGuiCond_Once';
+                const sw = wExpr ?? '0.0f';
+                const sh = hExpr ?? '0.0f';
+                lines.push(`${indent}ImGui::SetNextWindowSize(ImVec2(${sw}, ${sh}), ${sizeCond});`);
+            }
+            // Window size constraints
+            const minW = node.props['minWidth'];
+            const minH = node.props['minHeight'];
+            const maxW = node.props['maxWidth'];
+            const maxH = node.props['maxHeight'];
+            if (minW || minH || maxW || maxH) {
+                const cminW = minW ?? '0.0f';
+                const cminH = minH ?? '0.0f';
+                const cmaxW = maxW ?? 'FLT_MAX';
+                const cmaxH = maxH ?? 'FLT_MAX';
+                lines.push(`${indent}ImGui::SetNextWindowSizeConstraints(ImVec2(${cminW}, ${cminH}), ImVec2(${cmaxW}, ${cmaxH}));`);
+            }
+            // Window background alpha
+            const bgAlpha = node.props['bgAlpha'];
+            if (bgAlpha) {
+                lines.push(`${indent}ImGui::SetNextWindowBgAlpha(${bgAlpha});`);
+            }
+            // Viewport control
+            if (node.props['noViewport'] === 'true') {
+                lines.push(`${indent}ImGui::SetNextWindowViewport(ImGui::GetMainViewport()->ID);`);
+            }
             const openExpr = node.props['open'];
             const onCloseExpr = node.props['onClose'];
             if (openExpr) {
+                const vpOnTop = node.props['viewportAlwaysOnTop'] === 'true';
                 windowOpenStack.push(true);
                 lines.push(`${indent}{`);
                 lines.push(`${indent}    bool win_open = ${openExpr};`);
-                lines.push(`${indent}    imx::renderer::begin_window(${title}, ${flags}, &win_open);`);
+                lines.push(`${indent}    imx::renderer::begin_window(${title}, ${flags}, &win_open${vpOnTop ? ', true' : ''});`);
                 if (onCloseExpr) {
-                    lines.push(`${indent}    if (!win_open) { ${onCloseExpr}; }`);
+                    const lambdaMatch = onCloseExpr.match(/^\[&\]\(\)\s*\{\s*(.*?)\s*\}$/);
+                    const onCloseBody = lambdaMatch ? lambdaMatch[1] : `${onCloseExpr}();`;
+                    lines.push(`${indent}    if (!win_open) { ${onCloseBody} }`);
                 }
             }
             else {
+                const vpOnTopElse = node.props['viewportAlwaysOnTop'] === 'true';
                 windowOpenStack.push(false);
-                lines.push(`${indent}imx::renderer::begin_window(${title}, ${flags});`);
+                if (vpOnTopElse) {
+                    lines.push(`${indent}imx::renderer::begin_window(${title}, ${flags}, nullptr, true);`);
+                }
+                else {
+                    lines.push(`${indent}imx::renderer::begin_window(${title}, ${flags});`);
+                }
             }
             break;
         }
@@ -654,6 +1172,15 @@ function emitBeginContainer(node, lines, indent) {
             }
             break;
         }
+        case 'Indent': {
+            const width = node.props['width'] ? emitFloat(node.props['width']) : '0.0F';
+            lines.push(`${indent}imx::renderer::begin_indent(${width});`);
+            break;
+        }
+        case 'TextWrap': {
+            lines.push(`${indent}imx::renderer::begin_text_wrap(${emitFloat(node.props['width'] ?? '0')});`);
+            break;
+        }
         case 'DockSpace': {
             const style = buildStyleBlock(node, indent, lines);
             const hasMenuBar = node.props['hasMenuBar'] === 'true';
@@ -668,6 +1195,10 @@ function emitBeginContainer(node, lines, indent) {
             }
             break;
         }
+        case 'MainMenuBar': {
+            lines.push(`${indent}if (imx::renderer::begin_main_menu_bar()) {`);
+            break;
+        }
         case 'MenuBar': {
             lines.push(`${indent}if (imx::renderer::begin_menu_bar()) {`);
             break;
@@ -677,32 +1208,6 @@ function emitBeginContainer(node, lines, indent) {
             lines.push(`${indent}if (imx::renderer::begin_menu(${label})) {`);
             break;
         }
-        case 'Table': {
-            const columnsRaw = node.props['columns'] ?? '';
-            const columnNames = columnsRaw.split(',').map(s => s.trim()).filter(s => s.length > 0);
-            const count = columnNames.length;
-            const varName = `table_cols_${styleCounter++}`;
-            const style = buildStyleVar(node.style, indent, lines);
-            const scrollY = node.props['scrollY'] === 'true';
-            const noBorders = node.props['noBorders'] === 'true';
-            const noRowBg = node.props['noRowBg'] === 'true';
-            lines.push(`${indent}const char* ${varName}[] = {${columnNames.join(', ')}};`);
-            const styleArg = style ?? '{}';
-            if (scrollY || noBorders || noRowBg) {
-                lines.push(`${indent}if (imx::renderer::begin_table("##table", ${count}, ${varName}, ${styleArg}, ${scrollY}, ${noBorders}, ${noRowBg})) {`);
-            }
-            else if (style) {
-                lines.push(`${indent}if (imx::renderer::begin_table("##table", ${count}, ${varName}, ${styleArg})) {`);
-            }
-            else {
-                lines.push(`${indent}if (imx::renderer::begin_table("##table", ${count}, ${varName})) {`);
-            }
-            break;
-        }
-        case 'TableRow': {
-            lines.push(`${indent}imx::renderer::begin_table_row();`);
-            break;
-        }
         case 'TabBar': {
             lines.push(`${indent}if (imx::renderer::begin_tab_bar()) {`);
             break;
@@ -712,16 +1217,6 @@ function emitBeginContainer(node, lines, indent) {
             lines.push(`${indent}if (imx::renderer::begin_tab_item(${label})) {`);
             break;
         }
-        case 'TreeNode': {
-            const label = asCharPtr(node.props['label'] ?? '""');
-            lines.push(`${indent}if (imx::renderer::begin_tree_node(${label})) {`);
-            break;
-        }
-        case 'CollapsingHeader': {
-            const label = asCharPtr(node.props['label'] ?? '""');
-            lines.push(`${indent}if (imx::renderer::begin_collapsing_header(${label})) {`);
-            break;
-        }
         case 'Theme': {
             const preset = asCharPtr(node.props['preset'] ?? '"dark"');
             const varName = `theme_${styleCounter++}`;
@@ -755,6 +1250,25 @@ function emitBeginContainer(node, lines, indent) {
         }
         case 'Modal': {
             const title = asCharPtr(node.props['title'] ?? '""');
+            // Build modal flags
+            const flagParts = [];
+            if (node.props['noTitleBar'] === 'true')
+                flagParts.push('ImGuiWindowFlags_NoTitleBar');
+            if (node.props['noResize'] === 'true')
+                flagParts.push('ImGuiWindowFlags_NoResize');
+            if (node.props['noMove'] === 'true')
+                flagParts.push('ImGuiWindowFlags_NoMove');
+            if (node.props['noScrollbar'] === 'true')
+                flagParts.push('ImGuiWindowFlags_NoScrollbar');
+            if (node.props['noCollapse'] === 'true')
+                flagParts.push('ImGuiWindowFlags_NoCollapse');
+            if (node.props['alwaysAutoResize'] === 'true')
+                flagParts.push('ImGuiWindowFlags_AlwaysAutoResize');
+            if (node.props['noBackground'] === 'true')
+                flagParts.push('ImGuiWindowFlags_NoBackground');
+            if (node.props['horizontalScrollbar'] === 'true')
+                flagParts.push('ImGuiWindowFlags_HorizontalScrollbar');
+            const modalFlags = flagParts.length > 0 ? flagParts.join(' | ') : '0';
             const openExpr = node.props['open'];
             const onCloseExpr = node.props['onClose'];
             if (openExpr) {
@@ -768,12 +1282,12 @@ function emitBeginContainer(node, lines, indent) {
                 modalOnCloseStack.push(onCloseBody);
                 lines.push(`${indent}{`);
                 lines.push(`${indent}    bool modal_closed = false;`);
-                lines.push(`${indent}    if (imx::renderer::begin_modal(${title}, ${openExpr}, &modal_closed)) {`);
+                lines.push(`${indent}    if (imx::renderer::begin_modal(${title}, ${openExpr}, &modal_closed, ${modalFlags})) {`);
             }
             else {
                 windowOpenStack.push(false);
                 modalOnCloseStack.push(null);
-                lines.push(`${indent}if (imx::renderer::begin_modal(${title}, true, nullptr)) {`);
+                lines.push(`${indent}if (imx::renderer::begin_modal(${title}, true, nullptr, ${modalFlags})) {`);
             }
             break;
         }
@@ -875,6 +1389,64 @@ function emitBeginContainer(node, lines, indent) {
             }
             break;
         }
+        case 'Font': {
+            const name = asCharPtr(node.props['name'] ?? '""');
+            lines.push(`${indent}imx::renderer::begin_font(${name});`);
+            break;
+        }
+        case 'ContextMenu': {
+            const idExpr = node.props['id'];
+            const idArg = idExpr ? asCharPtr(idExpr) : 'nullptr';
+            const mbExpr = node.props['mouseButton'];
+            let mouseButtonArg = '1'; // default: right click
+            if (mbExpr === '"left"')
+                mouseButtonArg = '0';
+            else if (mbExpr === '"middle"')
+                mouseButtonArg = '2';
+            if (node.props['target'] === '"window"') {
+                lines.push(`${indent}if (imx::renderer::begin_context_menu_window(${idArg}, ${mouseButtonArg})) {`);
+            }
+            else {
+                lines.push(`${indent}if (imx::renderer::begin_context_menu_item(${idArg}, ${mouseButtonArg})) {`);
+            }
+            break;
+        }
+        case 'MultiSelect': {
+            const flagParts = [];
+            if (node.props['singleSelect'] === 'true')
+                flagParts.push('ImGuiMultiSelectFlags_SingleSelect');
+            if (node.props['noSelectAll'] === 'true')
+                flagParts.push('ImGuiMultiSelectFlags_NoSelectAll');
+            if (node.props['noRangeSelect'] === 'true')
+                flagParts.push('ImGuiMultiSelectFlags_NoRangeSelect');
+            if (node.props['noAutoSelect'] === 'true')
+                flagParts.push('ImGuiMultiSelectFlags_NoAutoSelect');
+            if (node.props['noAutoClear'] === 'true')
+                flagParts.push('ImGuiMultiSelectFlags_NoAutoClear');
+            if (node.props['boxSelect'] === 'true')
+                flagParts.push('ImGuiMultiSelectFlags_BoxSelect1d');
+            if (node.props['boxSelect2d'] === 'true')
+                flagParts.push('ImGuiMultiSelectFlags_BoxSelect2d');
+            if (node.props['boxSelectNoScroll'] === 'true')
+                flagParts.push('ImGuiMultiSelectFlags_BoxSelectNoScroll');
+            if (node.props['clearOnClickVoid'] === 'true')
+                flagParts.push('ImGuiMultiSelectFlags_ClearOnClickVoid');
+            const flags = flagParts.length > 0 ? flagParts.join(' | ') : '0';
+            const selSize = node.props['selectionSize'] ?? '-1';
+            const itemCount = node.props['itemsCount'] ?? '-1';
+            lines.push(`${indent}{`);
+            lines.push(`${indent}    auto* ms_io = imx::renderer::begin_multi_select(${flags}, ${selSize}, ${itemCount});`);
+            const onChangeExpr = node.props['onSelectionChange'];
+            // Also apply requests from BeginMultiSelect (ImGui protocol requires both)
+            if (onChangeExpr) {
+                const lambdaMatch = onChangeExpr.match(/^\[&\]\(\)\s*\{\s*(.*?)\(\s*\d+\s*\)\s*;?\s*\}$/);
+                if (lambdaMatch) {
+                    lines.push(`${indent}    ${lambdaMatch[1]}(ms_io);`);
+                }
+            }
+            multiSelectCallbackStack.push(onChangeExpr ?? null);
+            break;
+        }
         case 'DockLayout':
         case 'DockSplit':
         case 'DockPanel':
@@ -900,9 +1472,19 @@ function emitEndContainer(node, lines, indent) {
         case 'View':
             lines.push(`${indent}imx::renderer::end_view();`);
             break;
+        case 'Indent':
+            lines.push(`${indent}imx::renderer::end_indent();`);
+            break;
+        case 'TextWrap':
+            lines.push(`${indent}imx::renderer::end_text_wrap();`);
+            break;
         case 'DockSpace':
             lines.push(`${indent}imx::renderer::end_dockspace();`);
             break;
+        case 'MainMenuBar':
+            lines.push(`${indent}imx::renderer::end_main_menu_bar();`);
+            lines.push(`${indent}}`);
+            break;
         case 'MenuBar':
             lines.push(`${indent}imx::renderer::end_menu_bar();`);
             lines.push(`${indent}}`);
@@ -911,13 +1493,6 @@ function emitEndContainer(node, lines, indent) {
             lines.push(`${indent}imx::renderer::end_menu();`);
             lines.push(`${indent}}`);
             break;
-        case 'Table':
-            lines.push(`${indent}imx::renderer::end_table();`);
-            lines.push(`${indent}}`);
-            break;
-        case 'TableRow':
-            lines.push(`${indent}imx::renderer::end_table_row();`);
-            break;
         case 'TabBar':
             lines.push(`${indent}imx::renderer::end_tab_bar();`);
             lines.push(`${indent}}`);
@@ -926,14 +1501,6 @@ function emitEndContainer(node, lines, indent) {
             lines.push(`${indent}imx::renderer::end_tab_item();`);
             lines.push(`${indent}}`);
             break;
-        case 'TreeNode':
-            lines.push(`${indent}imx::renderer::end_tree_node();`);
-            lines.push(`${indent}}`);
-            break;
-        case 'CollapsingHeader':
-            lines.push(`${indent}imx::renderer::end_collapsing_header();`);
-            lines.push(`${indent}}`);
-            break;
         case 'Theme':
             lines.push(`${indent}imx::renderer::end_theme();`);
             break;
@@ -989,6 +1556,30 @@ function emitEndContainer(node, lines, indent) {
         case 'Canvas':
             lines.push(`${indent}imx::renderer::end_canvas();`);
             break;
+        case 'Font':
+            lines.push(`${indent}imx::renderer::end_font();`);
+            break;
+        case 'ContextMenu':
+            lines.push(`${indent}imx::renderer::end_context_menu();`);
+            lines.push(`${indent}}`);
+            break;
+        case 'MultiSelect': {
+            lines.push(`${indent}    auto* ms_io_end = imx::renderer::end_multi_select();`);
+            const onChangeExpr = multiSelectCallbackStack.pop() ?? null;
+            if (onChangeExpr) {
+                // Extract function call from lambda [&]() { fn(placeholder); }
+                // Replace the placeholder argument with ms_io_end
+                const lambdaMatch = onChangeExpr.match(/^\[&\]\(\)\s*\{\s*(.*?)\(\s*\d+\s*\)\s*;?\s*\}$/);
+                if (lambdaMatch) {
+                    lines.push(`${indent}    if (ms_io_end) { ${lambdaMatch[1]}(ms_io_end); }`);
+                }
+                else {
+                    lines.push(`${indent}    if (ms_io_end) { ${onChangeExpr}; }`);
+                }
+            }
+            lines.push(`${indent}}`);
+            break;
+        }
         case 'DragDropTarget': {
             const props = dragDropTargetStack.pop() ?? {};
             const typeStr = asCharPtr(props['type'] ?? '""');
@@ -1018,26 +1609,96 @@ function emitEndContainer(node, lines, indent) {
 }
 function emitText(node, lines, indent) {
     emitLocComment(node.loc, 'Text', lines, indent);
-    if (node.args.length === 0) {
-        lines.push(`${indent}imx::renderer::text(${JSON.stringify(node.format)});`);
+    const fmtStr = JSON.stringify(node.format);
+    const argsStr = node.args.length > 0 ? ', ' + node.args.join(', ') : '';
+    if (node.disabled) {
+        // disabled takes priority — ImGui::TextDisabled has its own grayed style
+        lines.push(`${indent}imx::renderer::text_disabled(${fmtStr}${argsStr});`);
+    }
+    else if (node.color && node.wrapped) {
+        // color + wrapped: PushStyleColor + TextWrapped + PopStyleColor
+        lines.push(`${indent}ImGui::PushStyleColor(ImGuiCol_Text, ImVec4(${node.color}));`);
+        lines.push(`${indent}imx::renderer::text_wrapped(${fmtStr}${argsStr});`);
+        lines.push(`${indent}ImGui::PopStyleColor();`);
+    }
+    else if (node.color) {
+        // color only: inline ImGui::TextColored
+        lines.push(`${indent}ImGui::TextColored(ImVec4(${node.color}), ${fmtStr}${argsStr});`);
+    }
+    else if (node.wrapped) {
+        // wrapped only
+        lines.push(`${indent}imx::renderer::text_wrapped(${fmtStr}${argsStr});`);
     }
     else {
-        const argsStr = node.args.join(', ');
-        lines.push(`${indent}imx::renderer::text(${JSON.stringify(node.format)}, ${argsStr});`);
+        // plain text (current behavior)
+        if (node.args.length === 0) {
+            lines.push(`${indent}imx::renderer::text(${fmtStr});`);
+        }
+        else {
+            lines.push(`${indent}imx::renderer::text(${fmtStr}${argsStr});`);
+        }
     }
 }
 function emitButton(node, lines, indent, depth) {
     emitLocComment(node.loc, 'Button', lines, indent);
     const title = asCharPtr(node.title);
     const disabledArg = node.disabled ? ', {}, true' : '';
-    if (node.action.length === 0) {
-        lines.push(`${indent}imx::renderer::button(${title}${disabledArg});`);
+    const pressedVar = node.action.length > 0 ? nextWidgetTemp('button_pressed') : undefined;
+    const resultVar = emitBoolWidgetCall(`imx::renderer::button(${title}${disabledArg})`, node.item, lines, indent, pressedVar);
+    if (node.action.length > 0 && resultVar) {
+        lines.push(`${indent}if (${resultVar}) {`);
+        emitActionStatements(node.action, lines, indent + INDENT);
+        lines.push(`${indent}}`);
     }
-    else {
-        lines.push(`${indent}if (imx::renderer::button(${title}${disabledArg})) {`);
-        for (const stmt of node.action) {
-            lines.push(`${indent}${INDENT}${stmt}`);
-        }
+}
+function emitSmallButton(node, lines, indent) {
+    emitLocComment(node.loc, 'SmallButton', lines, indent);
+    const label = asCharPtr(node.label);
+    const pressedVar = node.action.length > 0 ? nextWidgetTemp('small_button_pressed') : undefined;
+    const resultVar = emitBoolWidgetCall(`imx::renderer::small_button(${label})`, node.item, lines, indent, pressedVar);
+    if (node.action.length > 0 && resultVar) {
+        lines.push(`${indent}if (${resultVar}) {`);
+        emitActionStatements(node.action, lines, indent + INDENT);
+        lines.push(`${indent}}`);
+    }
+}
+function emitArrowButton(node, lines, indent) {
+    emitLocComment(node.loc, 'ArrowButton', lines, indent);
+    const id = asCharPtr(node.id);
+    const dirMap = { '"left"': '0', '"right"': '1', '"up"': '2', '"down"': '3' };
+    const dir = dirMap[node.direction] ?? '0';
+    const pressedVar = node.action.length > 0 ? nextWidgetTemp('arrow_button_pressed') : undefined;
+    const resultVar = emitBoolWidgetCall(`imx::renderer::arrow_button(${id}, ${dir})`, node.item, lines, indent, pressedVar);
+    if (node.action.length > 0 && resultVar) {
+        lines.push(`${indent}if (${resultVar}) {`);
+        emitActionStatements(node.action, lines, indent + INDENT);
+        lines.push(`${indent}}`);
+    }
+}
+function emitInvisibleButton(node, lines, indent) {
+    emitLocComment(node.loc, 'InvisibleButton', lines, indent);
+    const id = asCharPtr(node.id);
+    const width = emitFloat(node.width);
+    const height = emitFloat(node.height);
+    const pressedVar = node.action.length > 0 ? nextWidgetTemp('invisible_button_pressed') : undefined;
+    const resultVar = emitBoolWidgetCall(`imx::renderer::invisible_button(${id}, ${width}, ${height})`, node.item, lines, indent, pressedVar);
+    if (node.action.length > 0 && resultVar) {
+        lines.push(`${indent}if (${resultVar}) {`);
+        emitActionStatements(node.action, lines, indent + INDENT);
+        lines.push(`${indent}}`);
+    }
+}
+function emitImageButton(node, lines, indent) {
+    emitLocComment(node.loc, 'ImageButton', lines, indent);
+    const id = asCharPtr(node.id);
+    const src = asCharPtr(node.src);
+    const width = node.width ? emitFloat(node.width) : '0';
+    const height = node.height ? emitFloat(node.height) : '0';
+    const pressedVar = node.action.length > 0 ? nextWidgetTemp('image_button_pressed') : undefined;
+    const resultVar = emitBoolWidgetCall(`imx::renderer::image_button(${id}, ${src}, ${width}, ${height})`, node.item, lines, indent, pressedVar);
+    if (node.action.length > 0 && resultVar) {
+        lines.push(`${indent}if (${resultVar}) {`);
+        emitActionStatements(node.action, lines, indent + INDENT);
         lines.push(`${indent}}`);
     }
 }
@@ -1045,24 +1706,14 @@ function emitMenuItem(node, lines, indent, depth) {
     emitLocComment(node.loc, 'MenuItem', lines, indent);
     const label = asCharPtr(node.label);
     const shortcut = node.shortcut ? asCharPtr(node.shortcut) : undefined;
-    if (node.action.length === 0) {
-        if (shortcut) {
-            lines.push(`${indent}imx::renderer::menu_item(${label}, ${shortcut});`);
-        }
-        else {
-            lines.push(`${indent}imx::renderer::menu_item(${label});`);
-        }
-    }
-    else {
-        if (shortcut) {
-            lines.push(`${indent}if (imx::renderer::menu_item(${label}, ${shortcut})) {`);
-        }
-        else {
-            lines.push(`${indent}if (imx::renderer::menu_item(${label})) {`);
-        }
-        for (const stmt of node.action) {
-            lines.push(`${indent}    ${stmt}`);
-        }
+    const callExpr = shortcut
+        ? `imx::renderer::menu_item(${label}, ${shortcut})`
+        : `imx::renderer::menu_item(${label})`;
+    const pressedVar = node.action.length > 0 ? nextWidgetTemp('menu_item_pressed') : undefined;
+    const resultVar = emitBoolWidgetCall(callExpr, node.item, lines, indent, pressedVar);
+    if (node.action.length > 0 && resultVar) {
+        lines.push(`${indent}if (${resultVar}) {`);
+        emitActionStatements(node.action, lines, indent + INDENT);
         lines.push(`${indent}}`);
     }
 }
@@ -1071,40 +1722,58 @@ function emitTextInput(node, lines, indent) {
     const label = asCharPtr(node.label && node.label !== '""' ? node.label : `"##textinput_${node.bufferIndex}"`);
     if (node.stateVar) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}auto& buf = ctx.get_buffer(${node.bufferIndex});`);
-        lines.push(`${indent}${INDENT}buf.sync_from(${node.stateVar}.get());`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::text_input(${label}, buf)) {`);
-        lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(buf.value());`);
-        lines.push(`${indent}${INDENT}}`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}auto& buf = ctx.get_buffer(${node.bufferIndex});`);
+        lines.push(`${innerIndent}buf.sync_from(${node.stateVar}.get());`);
+        const changedVar = nextWidgetTemp('text_input_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::text_input(${label}, buf${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(buf.value());`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        const propName = node.valueExpr.startsWith('props.') ? node.valueExpr.slice(6).split('.')[0].split('[')[0] : '';
-        const isBound = currentBoundProps.has(propName);
-        const readExpr = isBound ? `(*${node.valueExpr})` : node.valueExpr;
-        const writeExpr = isBound ? `(*${node.valueExpr})` : node.valueExpr;
+        const readExpr = emitBoundValueExpr(node.valueExpr);
+        const writeExpr = emitBoundValueExpr(node.valueExpr);
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}auto& buf = ctx.get_buffer(${node.bufferIndex});`);
-        lines.push(`${indent}${INDENT}buf.sync_from(${readExpr});`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::text_input(${label}, buf)) {`);
-        lines.push(`${indent}${INDENT}${INDENT}${writeExpr} = buf.value();`);
-        lines.push(`${indent}${INDENT}}`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}auto& buf = ctx.get_buffer(${node.bufferIndex});`);
+        lines.push(`${innerIndent}buf.sync_from(${readExpr});`);
+        const changedVar = nextWidgetTemp('text_input_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::text_input(${label}, buf${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${writeExpr} = buf.value();`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}auto& buf = ctx.get_buffer(${node.bufferIndex});`);
-        lines.push(`${indent}${INDENT}buf.sync_from(${node.valueExpr});`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::text_input(${label}, buf)) {`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}auto& buf = ctx.get_buffer(${node.bufferIndex});`);
+        lines.push(`${innerIndent}buf.sync_from(${node.valueExpr});`);
+        const changedVar = nextWidgetTemp('text_input_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::text_input(${label}, buf${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
         if (node.onChangeExpr) {
-            lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
         }
-        lines.push(`${indent}${INDENT}}`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
     else {
-        lines.push(`${indent}auto& buf_${node.bufferIndex} = ctx.get_buffer(${node.bufferIndex});`);
-        lines.push(`${indent}imx::renderer::text_input(${label}, buf_${node.bufferIndex});`);
+        lines.push(`${indent}{`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}auto& buf_${node.bufferIndex} = ctx.get_buffer(${node.bufferIndex});`);
+        emitBoolWidgetCall(`imx::renderer::text_input(${label}, buf_${node.bufferIndex}${styleArg})`, node.item, lines, innerIndent);
+        lines.push(`${indent}}`);
     }
 }
 function emitCheckbox(node, lines, indent) {
@@ -1114,31 +1783,55 @@ function emitCheckbox(node, lines, indent) {
     if (node.stateVar) {
         // State-bound case
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}bool val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::checkbox(${label}, &val)) {`);
-        lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
-        lines.push(`${indent}${INDENT}}`);
+        const innerIndent = indent + INDENT;
+        lines.push(`${innerIndent}bool val = ${node.stateVar}.get();`);
+        const changedVar = nextWidgetTemp('checkbox_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::checkbox(${label}, &val)`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        // Direct pointer binding — no temp variable
-        lines.push(`${indent}imx::renderer::checkbox(${label}, ${emitDirectBindPtr(node.valueExpr)});`);
+        emitBoolWidgetCall(`imx::renderer::checkbox(${label}, ${emitDirectBindPtr(node.valueExpr)})`, node.item, lines, indent);
     }
     else if (node.valueExpr !== undefined) {
-        // Props-bound / expression-bound case
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}bool val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::checkbox(${label}, &val)) {`);
+        const innerIndent = indent + INDENT;
+        lines.push(`${innerIndent}bool val = ${node.valueExpr};`);
+        const changedVar = nextWidgetTemp('checkbox_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::checkbox(${label}, &val)`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
         if (node.onChangeExpr) {
-            lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
         }
-        lines.push(`${indent}${INDENT}}`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
     else {
-        lines.push(`${indent}imx::renderer::checkbox(${label}, nullptr);`);
+        emitBoolWidgetCall(`imx::renderer::checkbox(${label}, nullptr)`, node.item, lines, indent);
     }
 }
+function emitSpacing(node, lines, indent) {
+    emitLocComment(node.loc, 'Spacing', lines, indent);
+    lines.push(`${indent}imx::renderer::spacing();`);
+}
+function emitDummy(node, lines, indent) {
+    emitLocComment(node.loc, 'Dummy', lines, indent);
+    lines.push(`${indent}imx::renderer::dummy(${emitFloat(node.width)}, ${emitFloat(node.height)});`);
+}
+function emitSameLine(node, lines, indent) {
+    emitLocComment(node.loc, 'SameLine', lines, indent);
+    lines.push(`${indent}imx::renderer::same_line(${emitFloat(node.offset)}, ${emitFloat(node.spacing)});`);
+}
+function emitNewLine(node, lines, indent) {
+    emitLocComment(node.loc, 'NewLine', lines, indent);
+    lines.push(`${indent}imx::renderer::new_line();`);
+}
+function emitCursor(node, lines, indent) {
+    emitLocComment(node.loc, 'Cursor', lines, indent);
+    lines.push(`${indent}imx::renderer::set_cursor_pos(${emitFloat(node.x)}, ${emitFloat(node.y)});`);
+}
 function emitConditional(node, lines, indent, depth) {
     if (node.loc) {
         lines.push(`${indent}// ${node.loc.file}:${node.loc.line} conditional`);
@@ -1176,7 +1869,15 @@ function emitCustomComponent(node, lines, indent) {
         lines.push(`${indent}${INDENT}${node.name}Props p;`);
         for (const [k, v] of propsEntries) {
             if (childBound.has(k)) {
-                lines.push(`${indent}${INDENT}p.${k} = &${v};`);
+                // Check if the value is already a pointer (bound prop of current component)
+                const valPropName = v.startsWith('props.') ? v.slice(6).split('.')[0].split('[')[0] : '';
+                if (currentBoundProps.has(valPropName)) {
+                    // Already a pointer — pass through directly. Use &* to block post-processing regex.
+                    lines.push(`${indent}${INDENT}p.${k} = &*${v};`);
+                }
+                else {
+                    lines.push(`${indent}${INDENT}p.${k} = &${v};`);
+                }
             }
             else {
                 lines.push(`${indent}${INDENT}p.${k} = ${v};`);
@@ -1208,11 +1909,10 @@ function emitNativeWidget(node, lines, indent) {
     lines.push(`${indent}}`);
 }
 function ensureFloatLiteral(val) {
-    // If already has 'f' suffix or '.', leave as-is
-    if (val.endsWith('f') || val.endsWith('F') || val.includes('.'))
-        return val;
-    // Append .0f to make it a float literal
-    return `${val}.0f`;
+    const trimmed = val.trim();
+    if (!/^-?\d+(\.\d+)?$/.test(trimmed))
+        return trimmed;
+    return trimmed.includes('.') ? `${trimmed}f` : `${trimmed}.0f`;
 }
 function emitSliderFloat(node, lines, indent) {
     emitLocComment(node.loc, 'SliderFloat', lines, indent);
@@ -1221,24 +1921,35 @@ function emitSliderFloat(node, lines, indent) {
     const max = ensureFloatLiteral(node.max);
     if (node.stateVar) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}float val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::slider_float(${label}, &val, ${min}, ${max})) {`);
-        lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
-        lines.push(`${indent}${INDENT}}`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}float val = ${node.stateVar}.get();`);
+        const changedVar = nextWidgetTemp('slider_float_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::slider_float(${label}, &val, ${min}, ${max}${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        // Direct pointer binding
-        lines.push(`${indent}imx::renderer::slider_float(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${min}, ${max});`);
+        const styleVar = buildWidgetStyleVar(node.style, node.width, indent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        emitBoolWidgetCall(`imx::renderer::slider_float(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${min}, ${max}${styleArg})`, node.item, lines, indent);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}float val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::slider_float(${label}, &val, ${min}, ${max})) {`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}float val = ${node.valueExpr};`);
+        const changedVar = nextWidgetTemp('slider_float_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::slider_float(${label}, &val, ${min}, ${max}${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
         if (node.onChangeExpr) {
-            lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
         }
-        lines.push(`${indent}${INDENT}}`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
 }
@@ -1247,23 +1958,142 @@ function emitSliderInt(node, lines, indent) {
     const label = asCharPtr(node.label);
     if (node.stateVar) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}int val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::slider_int(${label}, &val, ${node.min}, ${node.max})) {`);
-        lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
-        lines.push(`${indent}${INDENT}}`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}int val = ${node.stateVar}.get();`);
+        const changedVar = nextWidgetTemp('slider_int_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::slider_int(${label}, &val, ${node.min}, ${node.max}${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        lines.push(`${indent}imx::renderer::slider_int(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${node.min}, ${node.max});`);
+        const styleVar = buildWidgetStyleVar(node.style, node.width, indent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        emitBoolWidgetCall(`imx::renderer::slider_int(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${node.min}, ${node.max}${styleArg})`, node.item, lines, indent);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}int val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::slider_int(${label}, &val, ${node.min}, ${node.max})) {`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}int val = ${node.valueExpr};`);
+        const changedVar = nextWidgetTemp('slider_int_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::slider_int(${label}, &val, ${node.min}, ${node.max}${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
         if (node.onChangeExpr) {
-            lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
         }
-        lines.push(`${indent}${INDENT}}`);
+        lines.push(`${innerIndent}}`);
+        lines.push(`${indent}}`);
+    }
+}
+function emitVSliderFloat(node, lines, indent) {
+    emitLocComment(node.loc, 'VSliderFloat', lines, indent);
+    const label = asCharPtr(node.label);
+    const min = ensureFloatLiteral(node.min);
+    const max = ensureFloatLiteral(node.max);
+    const width = emitFloat(node.width);
+    const height = emitFloat(node.height);
+    if (node.stateVar) {
+        lines.push(`${indent}{`);
+        const innerIndent = indent + INDENT;
+        lines.push(`${innerIndent}float val = ${node.stateVar}.get();`);
+        const changedVar = nextWidgetTemp('vslider_float_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::vslider_float(${label}, ${width}, ${height}, &val, ${min}, ${max})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${innerIndent}}`);
+        lines.push(`${indent}}`);
+    }
+    else if (node.directBind && node.valueExpr) {
+        emitBoolWidgetCall(`imx::renderer::vslider_float(${label}, ${width}, ${height}, ${emitDirectBindPtr(node.valueExpr)}, ${min}, ${max})`, node.item, lines, indent);
+    }
+    else if (node.valueExpr !== undefined) {
+        lines.push(`${indent}{`);
+        const innerIndent = indent + INDENT;
+        lines.push(`${innerIndent}float val = ${node.valueExpr};`);
+        const changedVar = nextWidgetTemp('vslider_float_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::vslider_float(${label}, ${width}, ${height}, &val, ${min}, ${max})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        if (node.onChangeExpr) {
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
+        }
+        lines.push(`${innerIndent}}`);
+        lines.push(`${indent}}`);
+    }
+}
+function emitVSliderInt(node, lines, indent) {
+    emitLocComment(node.loc, 'VSliderInt', lines, indent);
+    const label = asCharPtr(node.label);
+    const width = emitFloat(node.width);
+    const height = emitFloat(node.height);
+    if (node.stateVar) {
+        lines.push(`${indent}{`);
+        const innerIndent = indent + INDENT;
+        lines.push(`${innerIndent}int val = ${node.stateVar}.get();`);
+        const changedVar = nextWidgetTemp('vslider_int_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::vslider_int(${label}, ${width}, ${height}, &val, ${node.min}, ${node.max})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${innerIndent}}`);
+        lines.push(`${indent}}`);
+    }
+    else if (node.directBind && node.valueExpr) {
+        emitBoolWidgetCall(`imx::renderer::vslider_int(${label}, ${width}, ${height}, ${emitDirectBindPtr(node.valueExpr)}, ${node.min}, ${node.max})`, node.item, lines, indent);
+    }
+    else if (node.valueExpr !== undefined) {
+        lines.push(`${indent}{`);
+        const innerIndent = indent + INDENT;
+        lines.push(`${innerIndent}int val = ${node.valueExpr};`);
+        const changedVar = nextWidgetTemp('vslider_int_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::vslider_int(${label}, ${width}, ${height}, &val, ${node.min}, ${node.max})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        if (node.onChangeExpr) {
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
+        }
+        lines.push(`${innerIndent}}`);
+        lines.push(`${indent}}`);
+    }
+}
+function emitSliderAngle(node, lines, indent) {
+    emitLocComment(node.loc, 'SliderAngle', lines, indent);
+    const label = asCharPtr(node.label);
+    const min = ensureFloatLiteral(node.min);
+    const max = ensureFloatLiteral(node.max);
+    if (node.stateVar) {
+        lines.push(`${indent}{`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}float val = ${node.stateVar}.get();`);
+        const changedVar = nextWidgetTemp('slider_angle_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::slider_angle(${label}, &val, ${min}, ${max}${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${innerIndent}}`);
+        lines.push(`${indent}}`);
+    }
+    else if (node.directBind && node.valueExpr) {
+        const styleVar = buildWidgetStyleVar(node.style, node.width, indent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        emitBoolWidgetCall(`imx::renderer::slider_angle(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${min}, ${max}${styleArg})`, node.item, lines, indent);
+    }
+    else if (node.valueExpr !== undefined) {
+        lines.push(`${indent}{`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}float val = ${node.valueExpr};`);
+        const changedVar = nextWidgetTemp('slider_angle_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::slider_angle(${label}, &val, ${min}, ${max}${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        if (node.onChangeExpr) {
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
+        }
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
 }
@@ -1273,23 +2103,35 @@ function emitDragFloat(node, lines, indent) {
     const speed = ensureFloatLiteral(node.speed);
     if (node.stateVar) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}float val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::drag_float(${label}, &val, ${speed})) {`);
-        lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
-        lines.push(`${indent}${INDENT}}`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}float val = ${node.stateVar}.get();`);
+        const changedVar = nextWidgetTemp('drag_float_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::drag_float(${label}, &val, ${speed}${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        lines.push(`${indent}imx::renderer::drag_float(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${speed});`);
+        const styleVar = buildWidgetStyleVar(node.style, node.width, indent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        emitBoolWidgetCall(`imx::renderer::drag_float(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${speed}${styleArg})`, node.item, lines, indent);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}float val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::drag_float(${label}, &val, ${speed})) {`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}float val = ${node.valueExpr};`);
+        const changedVar = nextWidgetTemp('drag_float_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::drag_float(${label}, &val, ${speed}${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
         if (node.onChangeExpr) {
-            lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
         }
-        lines.push(`${indent}${INDENT}}`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
 }
@@ -1299,23 +2141,35 @@ function emitDragInt(node, lines, indent) {
     const speed = ensureFloatLiteral(node.speed);
     if (node.stateVar) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}int val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::drag_int(${label}, &val, ${speed})) {`);
-        lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
-        lines.push(`${indent}${INDENT}}`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}int val = ${node.stateVar}.get();`);
+        const changedVar = nextWidgetTemp('drag_int_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::drag_int(${label}, &val, ${speed}${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        lines.push(`${indent}imx::renderer::drag_int(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${speed});`);
+        const styleVar = buildWidgetStyleVar(node.style, node.width, indent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        emitBoolWidgetCall(`imx::renderer::drag_int(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${speed}${styleArg})`, node.item, lines, indent);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}int val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::drag_int(${label}, &val, ${speed})) {`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}int val = ${node.valueExpr};`);
+        const changedVar = nextWidgetTemp('drag_int_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::drag_int(${label}, &val, ${speed}${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
         if (node.onChangeExpr) {
-            lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
         }
-        lines.push(`${indent}${INDENT}}`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
 }
@@ -1327,28 +2181,41 @@ function emitCombo(node, lines, indent) {
     const varName = `combo_items_${comboCounter++}`;
     if (node.stateVar) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}const char* ${varName}[] = {${itemsList.join(', ')}};`);
-        lines.push(`${indent}${INDENT}int val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::combo(${label}, &val, ${varName}, ${count})) {`);
-        lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
-        lines.push(`${indent}${INDENT}}`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}const char* ${varName}[] = {${itemsList.join(', ')}};`);
+        lines.push(`${innerIndent}int val = ${node.stateVar}.get();`);
+        const changedVar = nextWidgetTemp('combo_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::combo(${label}, &val, ${varName}, ${count}${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}const char* ${varName}[] = {${itemsList.join(', ')}};`);
-        lines.push(`${indent}${INDENT}imx::renderer::combo(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${varName}, ${count});`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}const char* ${varName}[] = {${itemsList.join(', ')}};`);
+        emitBoolWidgetCall(`imx::renderer::combo(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${varName}, ${count}${styleArg})`, node.item, lines, innerIndent);
         lines.push(`${indent}}`);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}const char* ${varName}[] = {${itemsList.join(', ')}};`);
-        lines.push(`${indent}${INDENT}int val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::combo(${label}, &val, ${varName}, ${count})) {`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}const char* ${varName}[] = {${itemsList.join(', ')}};`);
+        lines.push(`${innerIndent}int val = ${node.valueExpr};`);
+        const changedVar = nextWidgetTemp('combo_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::combo(${label}, &val, ${varName}, ${count}${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
         if (node.onChangeExpr) {
-            lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
         }
-        lines.push(`${indent}${INDENT}}`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
 }
@@ -1357,23 +2224,35 @@ function emitInputInt(node, lines, indent) {
     const label = asCharPtr(node.label);
     if (node.stateVar) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}int val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::input_int(${label}, &val)) {`);
-        lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
-        lines.push(`${indent}${INDENT}}`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}int val = ${node.stateVar}.get();`);
+        const changedVar = nextWidgetTemp('input_int_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::input_int(${label}, &val${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        lines.push(`${indent}imx::renderer::input_int(${label}, ${emitDirectBindPtr(node.valueExpr)});`);
+        const styleVar = buildWidgetStyleVar(node.style, node.width, indent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        emitBoolWidgetCall(`imx::renderer::input_int(${label}, ${emitDirectBindPtr(node.valueExpr)}${styleArg})`, node.item, lines, indent);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}int val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::input_int(${label}, &val)) {`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}int val = ${node.valueExpr};`);
+        const changedVar = nextWidgetTemp('input_int_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::input_int(${label}, &val${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
         if (node.onChangeExpr) {
-            lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
         }
-        lines.push(`${indent}${INDENT}}`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
 }
@@ -1382,23 +2261,35 @@ function emitInputFloat(node, lines, indent) {
     const label = asCharPtr(node.label);
     if (node.stateVar) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}float val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::input_float(${label}, &val)) {`);
-        lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
-        lines.push(`${indent}${INDENT}}`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}float val = ${node.stateVar}.get();`);
+        const changedVar = nextWidgetTemp('input_float_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::input_float(${label}, &val${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        lines.push(`${indent}imx::renderer::input_float(${label}, ${emitDirectBindPtr(node.valueExpr)});`);
+        const styleVar = buildWidgetStyleVar(node.style, node.width, indent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        emitBoolWidgetCall(`imx::renderer::input_float(${label}, ${emitDirectBindPtr(node.valueExpr)}${styleArg})`, node.item, lines, indent);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}float val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::input_float(${label}, &val)) {`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}float val = ${node.valueExpr};`);
+        const changedVar = nextWidgetTemp('input_float_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::input_float(${label}, &val${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
         if (node.onChangeExpr) {
-            lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
         }
-        lines.push(`${indent}${INDENT}}`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
 }
@@ -1407,26 +2298,74 @@ function emitColorEdit(node, lines, indent) {
     const label = asCharPtr(node.label);
     if (node.stateVar) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}auto val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::color_edit(${label}, val.data())) {`);
-        lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
-        lines.push(`${indent}${INDENT}}`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}auto val = ${node.stateVar}.get();`);
+        const changedVar = nextWidgetTemp('color_edit_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::color_edit(${label}, val.data()${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        const propName = node.valueExpr.startsWith('props.') ? node.valueExpr.slice(6).split('.')[0].split('[')[0] : '';
-        const isBound = currentBoundProps.has(propName);
-        const dataExpr = isBound ? `(${node.valueExpr})->data()` : `${node.valueExpr}.data()`;
-        lines.push(`${indent}imx::renderer::color_edit(${label}, ${dataExpr});`);
+        const dataExpr = `${emitBoundValueExpr(node.valueExpr)}.data()`;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, indent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        emitBoolWidgetCall(`imx::renderer::color_edit(${label}, ${dataExpr}${styleArg})`, node.item, lines, indent);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}auto val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::color_edit(${label}, val.data())) {`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}auto val = ${node.valueExpr};`);
+        const changedVar = nextWidgetTemp('color_edit_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::color_edit(${label}, val.data()${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
         if (node.onChangeExpr) {
-            lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
         }
-        lines.push(`${indent}${INDENT}}`);
+        lines.push(`${innerIndent}}`);
+        lines.push(`${indent}}`);
+    }
+}
+function emitColorEdit3(node, lines, indent) {
+    emitLocComment(node.loc, 'ColorEdit3', lines, indent);
+    const label = asCharPtr(node.label);
+    if (node.stateVar) {
+        lines.push(`${indent}{`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}auto val = ${node.stateVar}.get();`);
+        const changedVar = nextWidgetTemp('color_edit3_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::color_edit3(${label}, val.data()${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${innerIndent}}`);
+        lines.push(`${indent}}`);
+    }
+    else if (node.directBind && node.valueExpr) {
+        const dataExpr = `${emitBoundValueExpr(node.valueExpr)}.data()`;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, indent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        emitBoolWidgetCall(`imx::renderer::color_edit3(${label}, ${dataExpr}${styleArg})`, node.item, lines, indent);
+    }
+    else if (node.valueExpr !== undefined) {
+        lines.push(`${indent}{`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}auto val = ${node.valueExpr};`);
+        const changedVar = nextWidgetTemp('color_edit3_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::color_edit3(${label}, val.data()${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        if (node.onChangeExpr) {
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
+        }
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
 }
@@ -1438,28 +2377,41 @@ function emitListBox(node, lines, indent) {
     const varName = `listbox_items_${listBoxCounter++}`;
     if (node.stateVar) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}const char* ${varName}[] = {${itemsList.join(', ')}};`);
-        lines.push(`${indent}${INDENT}int val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::list_box(${label}, &val, ${varName}, ${count})) {`);
-        lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
-        lines.push(`${indent}${INDENT}}`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}const char* ${varName}[] = {${itemsList.join(', ')}};`);
+        lines.push(`${innerIndent}int val = ${node.stateVar}.get();`);
+        const changedVar = nextWidgetTemp('list_box_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::list_box(${label}, &val, ${varName}, ${count}${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}const char* ${varName}[] = {${itemsList.join(', ')}};`);
-        lines.push(`${indent}${INDENT}imx::renderer::list_box(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${varName}, ${count});`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}const char* ${varName}[] = {${itemsList.join(', ')}};`);
+        emitBoolWidgetCall(`imx::renderer::list_box(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${varName}, ${count}${styleArg})`, node.item, lines, innerIndent);
         lines.push(`${indent}}`);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}const char* ${varName}[] = {${itemsList.join(', ')}};`);
-        lines.push(`${indent}${INDENT}int val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::list_box(${label}, &val, ${varName}, ${count})) {`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}const char* ${varName}[] = {${itemsList.join(', ')}};`);
+        lines.push(`${innerIndent}int val = ${node.valueExpr};`);
+        const changedVar = nextWidgetTemp('list_box_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::list_box(${label}, &val, ${varName}, ${count}${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
         if (node.onChangeExpr) {
-            lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
         }
-        lines.push(`${indent}${INDENT}}`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
 }
@@ -1476,6 +2428,13 @@ function emitTooltip(node, lines, indent) {
     emitLocComment(node.loc, 'Tooltip', lines, indent);
     lines.push(`${indent}imx::renderer::tooltip(${node.text});`);
 }
+function emitShortcut(node, lines, indent) {
+    emitLocComment(node.loc, 'Shortcut', lines, indent);
+    const keys = asCharPtr(node.keys);
+    lines.push(`${indent}if (imx::renderer::shortcut_pressed(${keys})) {`);
+    emitActionStatements(node.action, lines, indent + INDENT);
+    lines.push(`${indent}}`);
+}
 function emitBulletText(node, lines, indent) {
     emitLocComment(node.loc, 'BulletText', lines, indent);
     if (node.args.length === 0) {
@@ -1496,40 +2455,47 @@ function emitLabelText(node, lines, indent) {
 }
 function emitSelectable(node, lines, indent) {
     emitLocComment(node.loc, 'Selectable', lines, indent);
+    if (node.selectionIndex) {
+        lines.push(`${indent}imx::renderer::set_next_item_selection_data(${node.selectionIndex});`);
+    }
     const label = asCharPtr(node.label);
-    if (node.action.length > 0) {
-        lines.push(`${indent}if (imx::renderer::selectable(${label}, ${node.selected})) {`);
-        for (const stmt of node.action) {
-            lines.push(`${indent}${INDENT}${stmt}`);
-        }
+    const flagsArg = node.flags ? `, ${node.flags}` : '';
+    const pressedVar = node.action.length > 0 ? nextWidgetTemp('selectable_pressed') : undefined;
+    const resultVar = emitBoolWidgetCall(`imx::renderer::selectable(${label}, ${node.selected}${flagsArg})`, node.item, lines, indent, pressedVar);
+    if (node.action.length > 0 && resultVar) {
+        lines.push(`${indent}if (${resultVar}) {`);
+        emitActionStatements(node.action, lines, indent + INDENT);
         lines.push(`${indent}}`);
     }
-    else {
-        lines.push(`${indent}imx::renderer::selectable(${label}, ${node.selected});`);
-    }
 }
 function emitRadio(node, lines, indent) {
     emitLocComment(node.loc, 'Radio', lines, indent);
     const label = asCharPtr(node.label);
     if (node.stateVar) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}int val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::radio(${label}, &val, ${node.index})) {`);
-        lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
-        lines.push(`${indent}${INDENT}}`);
+        const innerIndent = indent + INDENT;
+        lines.push(`${innerIndent}int val = ${node.stateVar}.get();`);
+        const changedVar = nextWidgetTemp('radio_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::radio(${label}, &val, ${node.index})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        lines.push(`${indent}imx::renderer::radio(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${node.index});`);
+        emitBoolWidgetCall(`imx::renderer::radio(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${node.index})`, node.item, lines, indent);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}int val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::radio(${label}, &val, ${node.index})) {`);
+        const innerIndent = indent + INDENT;
+        lines.push(`${innerIndent}int val = ${node.valueExpr};`);
+        const changedVar = nextWidgetTemp('radio_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::radio(${label}, &val, ${node.index})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
         if (node.onChangeExpr) {
-            lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
         }
-        lines.push(`${indent}${INDENT}}`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
 }
@@ -1537,17 +2503,40 @@ function emitInputTextMultiline(node, lines, indent) {
     emitLocComment(node.loc, 'InputTextMultiline', lines, indent);
     lines.push(`${indent}{`);
     const innerIndent = indent + INDENT;
-    const styleVar = buildStyleVar(node.style, innerIndent, lines);
+    const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
     lines.push(`${innerIndent}auto& buf = ctx.get_buffer(${node.bufferIndex});`);
-    if (node.stateVar) {
-        lines.push(`${innerIndent}buf.sync_from(${node.stateVar}.get());`);
-    }
     const styleArg = styleVar ? `, ${styleVar}` : '';
-    lines.push(`${innerIndent}if (imx::renderer::text_input_multiline(${node.label}, buf${styleArg})) {`);
     if (node.stateVar) {
+        lines.push(`${innerIndent}buf.sync_from(${node.stateVar}.get());`);
+        const changedVar = nextWidgetTemp('text_input_multiline_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::text_input_multiline(${node.label}, buf${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
         lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(buf.value());`);
+        lines.push(`${innerIndent}}`);
+    }
+    else if (node.directBind && node.valueExpr) {
+        const readExpr = emitBoundValueExpr(node.valueExpr);
+        const writeExpr = emitBoundValueExpr(node.valueExpr);
+        lines.push(`${innerIndent}buf.sync_from(${readExpr});`);
+        const changedVar = nextWidgetTemp('text_input_multiline_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::text_input_multiline(${node.label}, buf${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${writeExpr} = buf.value();`);
+        lines.push(`${innerIndent}}`);
+    }
+    else if (node.valueExpr !== undefined) {
+        lines.push(`${innerIndent}buf.sync_from(${node.valueExpr});`);
+        const changedVar = nextWidgetTemp('text_input_multiline_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::text_input_multiline(${node.label}, buf${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        if (node.onChangeExpr) {
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
+        }
+        lines.push(`${innerIndent}}`);
+    }
+    else {
+        emitBoolWidgetCall(`imx::renderer::text_input_multiline(${node.label}, buf${styleArg})`, node.item, lines, innerIndent);
     }
-    lines.push(`${innerIndent}}`);
     lines.push(`${indent}}`);
 }
 function emitColorPicker(node, lines, indent) {
@@ -1555,26 +2544,68 @@ function emitColorPicker(node, lines, indent) {
     const label = asCharPtr(node.label);
     if (node.stateVar) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}auto val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::color_picker(${label}, val.data())) {`);
-        lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
-        lines.push(`${indent}${INDENT}}`);
+        const innerIndent = indent + INDENT;
+        lines.push(`${innerIndent}auto val = ${node.stateVar}.get();`);
+        const changedVar = nextWidgetTemp('color_picker_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::color_picker(${label}, val.data())`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        const propName = node.valueExpr.startsWith('props.') ? node.valueExpr.slice(6).split('.')[0].split('[')[0] : '';
-        const isBound = currentBoundProps.has(propName);
-        const dataExpr = isBound ? `(${node.valueExpr})->data()` : `${node.valueExpr}.data()`;
-        lines.push(`${indent}imx::renderer::color_picker(${label}, ${dataExpr});`);
+        const dataExpr = `${emitBoundValueExpr(node.valueExpr)}.data()`;
+        emitBoolWidgetCall(`imx::renderer::color_picker(${label}, ${dataExpr})`, node.item, lines, indent);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
-        lines.push(`${indent}${INDENT}auto val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::color_picker(${label}, val.data())) {`);
+        const innerIndent = indent + INDENT;
+        lines.push(`${innerIndent}auto val = ${node.valueExpr};`);
+        const changedVar = nextWidgetTemp('color_picker_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::color_picker(${label}, val.data())`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
         if (node.onChangeExpr) {
-            lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
         }
-        lines.push(`${indent}${INDENT}}`);
+        lines.push(`${innerIndent}}`);
+        lines.push(`${indent}}`);
+    }
+}
+function emitColorPicker3(node, lines, indent) {
+    emitLocComment(node.loc, 'ColorPicker3', lines, indent);
+    const label = asCharPtr(node.label);
+    if (node.stateVar) {
+        lines.push(`${indent}{`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}auto val = ${node.stateVar}.get();`);
+        const changedVar = nextWidgetTemp('color_picker3_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::color_picker3(${label}, val.data()${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${innerIndent}}`);
+        lines.push(`${indent}}`);
+    }
+    else if (node.directBind && node.valueExpr) {
+        const dataExpr = `${emitBoundValueExpr(node.valueExpr)}.data()`;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, indent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        emitBoolWidgetCall(`imx::renderer::color_picker3(${label}, ${dataExpr}${styleArg})`, node.item, lines, indent);
+    }
+    else if (node.valueExpr !== undefined) {
+        lines.push(`${indent}{`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}auto val = ${node.valueExpr};`);
+        const changedVar = nextWidgetTemp('color_picker3_changed');
+        const resultVar = emitBoolWidgetCall(`imx::renderer::color_picker3(${label}, val.data()${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        if (node.onChangeExpr) {
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
+        }
+        lines.push(`${innerIndent}}`);
         lines.push(`${indent}}`);
     }
 }
@@ -1672,6 +2703,107 @@ function emitDrawText(node, lines, indent) {
     const text = asCharPtr(node.text);
     lines.push(`${indent}imx::renderer::draw_text(${posParts.join(', ')}, ${color}, ${text});`);
 }
+function emitDrawBezierCubic(node, lines, indent) {
+    const p1 = node.p1.split(',').map((s) => emitFloat(s.trim()));
+    const p2 = node.p2.split(',').map((s) => emitFloat(s.trim()));
+    const p3 = node.p3.split(',').map((s) => emitFloat(s.trim()));
+    const p4 = node.p4.split(',').map((s) => emitFloat(s.trim()));
+    const color = emitImVec4(node.color);
+    const thickness = emitFloat(node.thickness);
+    const segments = node.segments;
+    lines.push(`${indent}imx::renderer::draw_bezier_cubic(${p1.join(', ')}, ${p2.join(', ')}, ${p3.join(', ')}, ${p4.join(', ')}, ${color}, ${thickness}, ${segments});`);
+}
+function emitDrawBezierQuadratic(node, lines, indent) {
+    const p1 = node.p1.split(',').map((s) => emitFloat(s.trim()));
+    const p2 = node.p2.split(',').map((s) => emitFloat(s.trim()));
+    const p3 = node.p3.split(',').map((s) => emitFloat(s.trim()));
+    const color = emitImVec4(node.color);
+    const thickness = emitFloat(node.thickness);
+    const segments = node.segments;
+    lines.push(`${indent}imx::renderer::draw_bezier_quadratic(${p1.join(', ')}, ${p2.join(', ')}, ${p3.join(', ')}, ${color}, ${thickness}, ${segments});`);
+}
+function emitDrawPolyline(node, lines, indent) {
+    const color = emitImVec4(node.color);
+    const thickness = emitFloat(node.thickness);
+    const closed = node.closed;
+    lines.push(`${indent}{`);
+    lines.push(`${indent}${INDENT}float _poly_pts[] = {${node.points}};`);
+    lines.push(`${indent}${INDENT}imx::renderer::draw_polyline(_poly_pts, sizeof(_poly_pts) / (2 * sizeof(float)), ${color}, ${thickness}, ${closed});`);
+    lines.push(`${indent}}`);
+}
+function emitDrawConvexPolyFilled(node, lines, indent) {
+    const color = emitImVec4(node.color);
+    lines.push(`${indent}{`);
+    lines.push(`${indent}${INDENT}float _poly_pts[] = {${node.points}};`);
+    lines.push(`${indent}${INDENT}imx::renderer::draw_convex_poly_filled(_poly_pts, sizeof(_poly_pts) / (2 * sizeof(float)), ${color});`);
+    lines.push(`${indent}}`);
+}
+function emitDrawNgon(node, lines, indent) {
+    const center = node.center.split(',').map((s) => emitFloat(s.trim()));
+    const radius = emitFloat(node.radius);
+    const color = emitImVec4(node.color);
+    const numSegments = node.numSegments;
+    const thickness = emitFloat(node.thickness);
+    lines.push(`${indent}imx::renderer::draw_ngon(${center.join(', ')}, ${radius}, ${color}, ${numSegments}, ${thickness});`);
+}
+function emitDrawNgonFilled(node, lines, indent) {
+    const center = node.center.split(',').map((s) => emitFloat(s.trim()));
+    const radius = emitFloat(node.radius);
+    const color = emitImVec4(node.color);
+    const numSegments = node.numSegments;
+    lines.push(`${indent}imx::renderer::draw_ngon_filled(${center.join(', ')}, ${radius}, ${color}, ${numSegments});`);
+}
+function emitDrawTriangle(node, lines, indent) {
+    const p1 = node.p1.split(',').map((s) => emitFloat(s.trim()));
+    const p2 = node.p2.split(',').map((s) => emitFloat(s.trim()));
+    const p3 = node.p3.split(',').map((s) => emitFloat(s.trim()));
+    const color = emitImVec4(node.color);
+    const filled = node.filled;
+    const thickness = emitFloat(node.thickness);
+    lines.push(`${indent}imx::renderer::draw_triangle(${p1.join(', ')}, ${p2.join(', ')}, ${p3.join(', ')}, ${color}, ${filled}, ${thickness});`);
+}
+function emitVectorInput(node, rendererFn, cppType, lines, indent, extraArgs = '') {
+    const label = asCharPtr(node.label);
+    const count = node.count;
+    if (node.stateVar) {
+        lines.push(`${indent}{`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}auto val = ${node.stateVar}.get();`);
+        const changedVar = nextWidgetTemp(`${rendererFn}_changed`);
+        const resultVar = emitBoolWidgetCall(`imx::renderer::${rendererFn}(${label}, val.data(), ${count}${extraArgs}${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        lines.push(`${innerIndent}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${innerIndent}}`);
+        lines.push(`${indent}}`);
+    }
+    else if (node.directBind && node.valueExpr) {
+        const styleVar = buildWidgetStyleVar(node.style, node.width, indent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        emitBoolWidgetCall(`imx::renderer::${rendererFn}(${label}, ${node.valueExpr}, ${count}${extraArgs}${styleArg})`, node.item, lines, indent);
+    }
+    else if (node.valueExpr) {
+        lines.push(`${indent}{`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildWidgetStyleVar(node.style, node.width, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}${cppType} _vec_val[${count}];`);
+        lines.push(`${innerIndent}auto& _vec_src = ${node.valueExpr};`);
+        lines.push(`${innerIndent}for (int i = 0; i < ${count}; ++i) _vec_val[i] = _vec_src[i];`);
+        const changedVar = nextWidgetTemp(`${rendererFn}_changed`);
+        const resultVar = emitBoolWidgetCall(`imx::renderer::${rendererFn}(${label}, _vec_val, ${count}${extraArgs}${styleArg})`, node.item, lines, innerIndent, changedVar);
+        lines.push(`${innerIndent}if (${resultVar}) {`);
+        if (node.onChangeExpr) {
+            lines.push(`${innerIndent}${INDENT}${node.onChangeExpr};`);
+        }
+        else {
+            lines.push(`${innerIndent}${INDENT}for (int i = 0; i < ${count}; ++i) _vec_src[i] = _vec_val[i];`);
+        }
+        lines.push(`${innerIndent}}`);
+        lines.push(`${indent}}`);
+    }
+}
 function collectEmbedKeys(nodes) {
     const keys = [];
     for (const node of nodes) {