imxc 0.5.2 → 0.5.3

package/dist/compile.d.ts

@@ -1,3 +1,4 @@
+import type { IRNode } from './ir.js';
 export interface CompileResult {
     success: boolean;
     componentCount: number;
@@ -8,3 +9,4 @@ export interface CompileResult {
  * Returns a result object instead of calling process.exit().
  */
 export declare function compile(files: string[], outputDir: string): CompileResult;
+export declare function resolveDragDropTypes(nodes: IRNode[]): void;

package/dist/compile.js

@@ -49,6 +49,7 @@ export function compile(files, outputDir) {
             ir,
             imports,
             hasProps: ir.params.length > 0 || !!ir.namedPropsType,
+            boundProps: new Set(),
         });
     }
     if (hasErrors) {
@@ -62,6 +63,15 @@ export function compile(files, outputDir) {
     // Phase 3: Resolve imported component stateCount/bufferCount in IR, then emit
     for (const comp of compiled) {
         resolveCustomComponents(comp.ir.body, componentMap);
+        resolveDragDropTypes(comp.ir.body);
+        comp.boundProps = detectBoundProps(comp.ir.body);
+    }
+    // Build boundProps map for cross-component emitter use
+    const boundPropsMap = new Map();
+    for (const comp of compiled) {
+        boundPropsMap.set(comp.name, comp.boundProps);
+    }
+    for (const comp of compiled) {
         const importInfos = [];
         for (const [importedName] of comp.imports) {
             const importedComp = componentMap.get(importedName);
@@ -72,7 +82,7 @@ export function compile(files, outputDir) {
                 });
             }
         }
-        const cppOutput = emitComponent(comp.ir, importInfos, comp.sourceFile);
+        const cppOutput = emitComponent(comp.ir, importInfos, comp.sourceFile, comp.boundProps, boundPropsMap);
         const baseName = comp.name;
         const outPath = path.join(outputDir, `${baseName}.gen.cpp`);
         fs.writeFileSync(outPath, cppOutput);
@@ -86,7 +96,7 @@ export function compile(files, outputDir) {
         // Only generate a header for inline props (not for named interface types —
         // those are declared in the user's main.cpp)
         if (comp.hasProps && !comp.ir.namedPropsType) {
-            const headerOutput = emitComponentHeader(comp.ir, comp.sourceFile);
+            const headerOutput = emitComponentHeader(comp.ir, comp.sourceFile, comp.boundProps);
             const headerPath = path.join(outputDir, `${baseName}.gen.h`);
             fs.writeFileSync(headerPath, headerOutput);
             console.log(`  ${baseName} -> ${headerPath} (header)`);
@@ -126,6 +136,54 @@ function resolveCustomComponents(nodes, map) {
         }
     }
 }
+export function resolveDragDropTypes(nodes) {
+    const typeMap = new Map();
+    collectDragDropTypes(nodes, typeMap);
+    applyDragDropTypes(nodes, typeMap);
+}
+function collectDragDropTypes(nodes, typeMap) {
+    for (const node of nodes) {
+        if (node.kind === 'begin_container' && node.tag === 'DragDropTarget') {
+            const onDrop = node.props['onDrop'] ?? '';
+            const parts = onDrop.split('|');
+            if (parts.length >= 3) {
+                const cppType = parts[0];
+                const typeStr = node.props['type'] ?? '';
+                const key = typeStr.replace(/^"|"$/g, '');
+                if (key)
+                    typeMap.set(key, cppType);
+            }
+        }
+        else if (node.kind === 'conditional') {
+            collectDragDropTypes(node.body, typeMap);
+            if (node.elseBody)
+                collectDragDropTypes(node.elseBody, typeMap);
+        }
+        else if (node.kind === 'list_map') {
+            collectDragDropTypes(node.body, typeMap);
+        }
+    }
+}
+function applyDragDropTypes(nodes, typeMap) {
+    for (const node of nodes) {
+        if (node.kind === 'begin_container' && node.tag === 'DragDropSource') {
+            const typeStr = node.props['type'] ?? '';
+            const key = typeStr.replace(/^"|"$/g, '');
+            const cppType = typeMap.get(key);
+            if (cppType) {
+                node.props['_payloadType'] = cppType;
+            }
+        }
+        else if (node.kind === 'conditional') {
+            applyDragDropTypes(node.body, typeMap);
+            if (node.elseBody)
+                applyDragDropTypes(node.elseBody, typeMap);
+        }
+        else if (node.kind === 'list_map') {
+            applyDragDropTypes(node.body, typeMap);
+        }
+    }
+}
 function collectEmbedImages(nodes) {
     const images = [];
     for (const node of nodes) {
@@ -177,6 +235,30 @@ function generateEmbedHeaders(images, sourceDir, outputDir) {
         console.log(`  ${rawSrc} -> ${headerPath} (embed)`);
     }
 }
+function detectBoundProps(nodes) {
+    const bound = new Set();
+    walkNodesForBinding(nodes, bound);
+    return bound;
+}
+function walkNodesForBinding(nodes, bound) {
+    for (const node of nodes) {
+        if ('directBind' in node && node.directBind && 'valueExpr' in node) {
+            const expr = node.valueExpr;
+            if (expr && expr.startsWith('props.')) {
+                const propName = expr.slice(6).split('.')[0].split('[')[0];
+                bound.add(propName);
+            }
+        }
+        if (node.kind === 'conditional') {
+            walkNodesForBinding(node.body, bound);
+            if (node.elseBody)
+                walkNodesForBinding(node.elseBody, bound);
+        }
+        else if (node.kind === 'list_map') {
+            walkNodesForBinding(node.body, bound);
+        }
+    }
+}
 /**
  * Parse the imx.d.ts in the given directory (if present) and extract
  * all interface declarations as a map from interface name -> field name -> type.

package/dist/components.js

@@ -42,7 +42,7 @@ export const HOST_COMPONENTS = {
     TextInput: {
         props: {
             value: { type: 'string', required: true },
-            onChange: { type: 'callback', required: true },
+            onChange: { type: 'callback', required: false },
             label: { type: 'string', required: false },
             placeholder: { type: 'string', required: false },
             style: { type: 'style', required: false },

package/dist/emitter.d.ts

@@ -3,10 +3,10 @@ import type { IRComponent } from './ir.js';
  * Emit a .gen.h header for a component that has props.
  * Contains the props struct and function forward declaration.
  */
-export declare function emitComponentHeader(comp: IRComponent, sourceFile?: string): string;
+export declare function emitComponentHeader(comp: IRComponent, sourceFile?: string, boundProps?: Set<string>): string;
 export interface ImportInfo {
     name: string;
     headerFile: string;
 }
-export declare function emitComponent(comp: IRComponent, imports?: ImportInfo[], sourceFile?: string): string;
+export declare function emitComponent(comp: IRComponent, imports?: ImportInfo[], sourceFile?: string, boundProps?: Set<string>, boundPropsMap?: Map<string, Set<string>>): string;
 export declare function emitRoot(rootName: string, stateCount: number, bufferCount: number, sourceFile?: string, propsType?: string, namedPropsType?: boolean): string;

package/dist/emitter.js

@@ -1,5 +1,7 @@
 const INDENT = '    ';
 let currentCompName = '';
+let currentBoundProps = new Set();
+let allBoundProps = new Map();
 function emitLocComment(loc, tag, lines, indent) {
     if (loc) {
         lines.push(`${indent}// ${loc.file}:${loc.line} <${tag}>`);
@@ -34,6 +36,19 @@ function asCharPtr(expr) {
     // Expression — assume std::string, add .c_str()
     return `${expr}.c_str()`;
 }
+/**
+ * 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).
+ * 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
+    }
+    return `&${valueExpr}`;
+}
 function emitImVec4(arrayStr) {
     const parts = arrayStr.split(',').map(s => {
         const v = s.trim();
@@ -96,7 +111,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) {
+export function emitComponentHeader(comp, sourceFile, boundProps) {
     const lines = [];
     if (sourceFile) {
         lines.push(`// Generated from ${sourceFile} by imxc`);
@@ -110,7 +125,12 @@ export function emitComponentHeader(comp, sourceFile) {
     // Props struct
     lines.push(`struct ${comp.name}Props {`);
     for (const p of comp.params) {
-        lines.push(`${INDENT}${cppPropType(p.type)} ${p.name};`);
+        if (boundProps && boundProps.has(p.name)) {
+            lines.push(`${INDENT}${cppPropType(p.type)}* ${p.name} = nullptr;`);
+        }
+        else {
+            lines.push(`${INDENT}${cppPropType(p.type)} ${p.name};`);
+        }
     }
     lines.push('};');
     lines.push('');
@@ -119,7 +139,7 @@ export function emitComponentHeader(comp, sourceFile) {
     lines.push('');
     return lines.join('\n');
 }
-export function emitComponent(comp, imports, sourceFile) {
+export function emitComponent(comp, imports, sourceFile, boundProps, boundPropsMap) {
     const lines = [];
     // Reset counters for each component
     styleCounter = 0;
@@ -132,6 +152,8 @@ export function emitComponent(comp, imports, sourceFile) {
     dragDropSourceStack.length = 0;
     dragDropTargetStack.length = 0;
     currentCompName = comp.name;
+    currentBoundProps = boundProps ?? new Set();
+    allBoundProps = boundPropsMap ?? new Map();
     // hasProps: true for inline prop struct OR named interface
     const hasProps = comp.params.length > 0 || !!comp.namedPropsType;
     // propsTypeName: for named interface use it directly; for inline use ComponentProps convention
@@ -227,6 +249,18 @@ export function emitComponent(comp, imports, sourceFile) {
     }
     // Body IR nodes
     emitNodes(comp.body, lines, 1);
+    // Post-processing: dereference bound prop reads in expressions
+    if (currentBoundProps.size > 0) {
+        for (let i = 0; i < lines.length; i++) {
+            if (lines[i].trimStart().startsWith('//'))
+                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');
+                lines[i] = lines[i].replace(pattern, `(*props.${prop})`);
+            }
+        }
+    }
     lines.push('}');
     lines.push('');
     return lines.join('\n');
@@ -938,7 +972,8 @@ function emitEndContainer(node, lines, indent) {
             const payload = props['payload'] ?? '0';
             lines.push(`${indent}ImGui::EndGroup();`);
             lines.push(`${indent}if (ImGui::BeginDragDropSource(ImGuiDragDropFlags_SourceAllowNullID)) {`);
-            lines.push(`${indent}    float _dd_payload = static_cast<float>(${payload});`);
+            const payloadType = props['_payloadType'] ?? 'float';
+            lines.push(`${indent}    ${payloadType} _dd_payload = static_cast<${payloadType}>(${payload});`);
             lines.push(`${indent}    ImGui::SetDragDropPayload(${typeStr}, &_dd_payload, sizeof(_dd_payload));`);
             lines.push(`${indent}    ImGui::Text("Dragging...");`);
             lines.push(`${indent}    ImGui::EndDragDropSource();`);
@@ -1043,6 +1078,30 @@ function emitTextInput(node, lines, indent) {
         lines.push(`${indent}${INDENT}}`);
         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;
+        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}}`);
+        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)) {`);
+        if (node.onChangeExpr) {
+            lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
+        }
+        lines.push(`${indent}${INDENT}}`);
+        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});`);
@@ -1063,7 +1122,7 @@ function emitCheckbox(node, lines, indent) {
     }
     else if (node.directBind && node.valueExpr) {
         // Direct pointer binding — no temp variable
-        lines.push(`${indent}imx::renderer::checkbox(${label}, &${node.valueExpr});`);
+        lines.push(`${indent}imx::renderer::checkbox(${label}, ${emitDirectBindPtr(node.valueExpr)});`);
     }
     else if (node.valueExpr !== undefined) {
         // Props-bound / expression-bound case
@@ -1096,9 +1155,10 @@ function emitListMap(node, lines, indent, depth) {
     if (node.loc) {
         lines.push(`${indent}// ${node.loc.file}:${node.loc.line} .map()`);
     }
-    const idx = node.indexVar;
+    const idx = node.internalIndexVar;
     lines.push(`${indent}for (size_t ${idx} = 0; ${idx} < ${node.array}.size(); ${idx}++) {`);
     lines.push(`${indent}${INDENT}auto& ${node.itemVar} = ${node.array}[${idx}];`);
+    lines.push(`${indent}${INDENT}size_t ${node.indexVar} = ${idx};`);
     lines.push(`${indent}${INDENT}ctx.begin_instance("${node.componentName}", (int)${idx}, ${node.stateCount}, ${node.bufferCount});`);
     emitNodes(node.body, lines, depth + 2);
     lines.push(`${indent}${INDENT}ctx.end_instance();`);
@@ -1108,13 +1168,19 @@ function emitCustomComponent(node, lines, indent) {
     emitLocComment(node.loc, node.name, lines, indent);
     const instanceIndex = customComponentCounter++;
     const propsEntries = Object.entries(node.props);
+    const childBound = allBoundProps.get(node.name) ?? new Set();
     lines.push(`${indent}ctx.begin_instance("${node.name}", ${instanceIndex}, ${node.stateCount}, ${node.bufferCount});`);
     if (propsEntries.length > 0) {
         // MSVC-compatible: use variable-based prop assignment instead of designated initializers
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}${node.name}Props p;`);
         for (const [k, v] of propsEntries) {
-            lines.push(`${indent}${INDENT}p.${k} = ${v};`);
+            if (childBound.has(k)) {
+                lines.push(`${indent}${INDENT}p.${k} = &${v};`);
+            }
+            else {
+                lines.push(`${indent}${INDENT}p.${k} = ${v};`);
+            }
         }
         lines.push(`${indent}${INDENT}${node.name}_render(ctx, p);`);
         lines.push(`${indent}}`);
@@ -1163,7 +1229,7 @@ function emitSliderFloat(node, lines, indent) {
     }
     else if (node.directBind && node.valueExpr) {
         // Direct pointer binding
-        lines.push(`${indent}imx::renderer::slider_float(${label}, &${node.valueExpr}, ${min}, ${max});`);
+        lines.push(`${indent}imx::renderer::slider_float(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${min}, ${max});`);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
@@ -1188,7 +1254,7 @@ function emitSliderInt(node, lines, indent) {
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        lines.push(`${indent}imx::renderer::slider_int(${label}, &${node.valueExpr}, ${node.min}, ${node.max});`);
+        lines.push(`${indent}imx::renderer::slider_int(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${node.min}, ${node.max});`);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
@@ -1214,7 +1280,7 @@ function emitDragFloat(node, lines, indent) {
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        lines.push(`${indent}imx::renderer::drag_float(${label}, &${node.valueExpr}, ${speed});`);
+        lines.push(`${indent}imx::renderer::drag_float(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${speed});`);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
@@ -1240,7 +1306,7 @@ function emitDragInt(node, lines, indent) {
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        lines.push(`${indent}imx::renderer::drag_int(${label}, &${node.valueExpr}, ${speed});`);
+        lines.push(`${indent}imx::renderer::drag_int(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${speed});`);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
@@ -1271,7 +1337,7 @@ function emitCombo(node, lines, 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}, &${node.valueExpr}, ${varName}, ${count});`);
+        lines.push(`${indent}${INDENT}imx::renderer::combo(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${varName}, ${count});`);
         lines.push(`${indent}}`);
     }
     else if (node.valueExpr !== undefined) {
@@ -1298,7 +1364,7 @@ function emitInputInt(node, lines, indent) {
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        lines.push(`${indent}imx::renderer::input_int(${label}, &${node.valueExpr});`);
+        lines.push(`${indent}imx::renderer::input_int(${label}, ${emitDirectBindPtr(node.valueExpr)});`);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
@@ -1323,7 +1389,7 @@ function emitInputFloat(node, lines, indent) {
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        lines.push(`${indent}imx::renderer::input_float(${label}, &${node.valueExpr});`);
+        lines.push(`${indent}imx::renderer::input_float(${label}, ${emitDirectBindPtr(node.valueExpr)});`);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
@@ -1348,7 +1414,10 @@ function emitColorEdit(node, lines, indent) {
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        lines.push(`${indent}imx::renderer::color_edit(${label}, ${node.valueExpr}.data());`);
+        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});`);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
@@ -1379,7 +1448,7 @@ function emitListBox(node, lines, 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}, &${node.valueExpr}, ${varName}, ${count});`);
+        lines.push(`${indent}${INDENT}imx::renderer::list_box(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${varName}, ${count});`);
         lines.push(`${indent}}`);
     }
     else if (node.valueExpr !== undefined) {
@@ -1451,7 +1520,7 @@ function emitRadio(node, lines, indent) {
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        lines.push(`${indent}imx::renderer::radio(${label}, &${node.valueExpr}, ${node.index});`);
+        lines.push(`${indent}imx::renderer::radio(${label}, ${emitDirectBindPtr(node.valueExpr)}, ${node.index});`);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
@@ -1493,7 +1562,10 @@ function emitColorPicker(node, lines, indent) {
         lines.push(`${indent}}`);
     }
     else if (node.directBind && node.valueExpr) {
-        lines.push(`${indent}imx::renderer::color_picker(${label}, ${node.valueExpr}.data());`);
+        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});`);
     }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);

package/dist/init.js

@@ -179,7 +179,7 @@ interface RowProps { gap?: number; style?: Style; children?: any; }
 interface ColumnProps { gap?: number; style?: Style; children?: any; }
 interface TextProps { style?: Style; children?: any; }
 interface ButtonProps { title: string; onPress: () => void; disabled?: boolean; style?: Style; }
-interface TextInputProps { value: string; onChange: (v: string) => void; label?: string; placeholder?: string; style?: Style; }
+interface TextInputProps { value: string; onChange?: (v: string) => void; label?: string; placeholder?: string; style?: Style; }
 interface CheckboxProps { value: boolean; onChange?: (v: boolean) => void; label?: string; style?: Style; }
 interface SeparatorProps {}
 interface PopupProps { id: string; style?: Style; children?: any; }

package/dist/ir.d.ts

@@ -57,6 +57,9 @@ export interface IRTextInput {
     label: string;
     bufferIndex: number;
     stateVar: string;
+    valueExpr?: string;
+    onChangeExpr?: string;
+    directBind?: boolean;
     style?: string;
     loc?: SourceLoc;
 }
@@ -100,6 +103,7 @@ export interface IRListMap {
     array: string;
     itemVar: string;
     indexVar: string;
+    internalIndexVar: string;
     key: string;
     componentName: string;
     stateCount: number;

package/dist/lowering.d.ts

@@ -8,6 +8,7 @@ interface LoweringContext {
     propsParam: string | null;
     propsFieldTypes: Map<string, IRType | 'callback'>;
     bufferIndex: number;
+    mapCounter: number;
     sourceFile: ts.SourceFile;
     customComponents: Map<string, string>;
 }

package/dist/lowering.js

@@ -65,6 +65,7 @@ export function lowerComponent(parsed, validation, externalInterfaces) {
         propsParam,
         propsFieldTypes,
         bufferIndex: 0,
+        mapCounter: 0,
         sourceFile: parsed.sourceFile,
         customComponents: validation.customComponents,
     };
@@ -642,17 +643,9 @@ function lowerButton(attrs, rawAttrs, body, ctx, loc) {
 function lowerTextInput(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const bufferIndex = ctx.bufferIndex++;
-    // Detect bound state variable from value prop
-    let stateVar = '';
-    const valueExpr = rawAttrs.get('value');
-    if (valueExpr && ts.isIdentifier(valueExpr)) {
-        const varName = valueExpr.text;
-        if (ctx.stateVars.has(varName)) {
-            stateVar = varName;
-        }
-    }
     const style = attrs['style'];
-    body.push({ kind: 'text_input', label, bufferIndex, stateVar, style, loc });
+    const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
+    body.push({ kind: 'text_input', label, bufferIndex, stateVar: stateVar, valueExpr, onChangeExpr, directBind, style, loc });
 }
 function lowerCheckbox(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
@@ -862,12 +855,14 @@ function lowerListMap(node, body, ctx, loc) {
             lowerJsxExpression(callback.body, mapBody, ctx);
         }
     }
+    const internalIndexVar = `_map_idx_${ctx.mapCounter++}`;
     body.push({
         kind: 'list_map',
         array,
         itemVar,
         indexVar,
-        key: indexVar,
+        internalIndexVar,
+        key: internalIndexVar,
         componentName: 'ListItem',
         stateCount: 0,
         bufferCount: 0,

package/package.json

@@ -1,27 +1,27 @@
-{
-  "name": "imxc",
-  "version": "0.5.2",
-  "description": "Compiler for IMX — compiles React-like .tsx to native Dear ImGui C++",
-  "type": "module",
-  "bin": {
-    "imxc": "dist/index.js"
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsc",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "prepublishOnly": "npm run build"
-  },
-  "keywords": ["imgui", "react", "tsx", "native", "gui", "compiler", "codegen"],
-  "license": "MIT",
-  "dependencies": {
-    "typescript": "^5.8.0"
-  },
-  "devDependencies": {
-    "vitest": "^3.1.0",
-    "@types/node": "^22.0.0"
-  }
-}
+{
+  "name": "imxc",
+  "version": "0.5.3",
+  "description": "Compiler for IMX — compiles React-like .tsx to native Dear ImGui C++",
+  "type": "module",
+  "bin": {
+    "imxc": "dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": ["imgui", "react", "tsx", "native", "gui", "compiler", "codegen"],
+  "license": "MIT",
+  "dependencies": {
+    "typescript": "^5.8.0"
+  },
+  "devDependencies": {
+    "vitest": "^3.1.0",
+    "@types/node": "^22.0.0"
+  }
+}