imxc 0.2.0 → 0.3.0

package/dist/lowering.js

@@ -1,5 +1,9 @@
 import ts from 'typescript';
 import { HOST_COMPONENTS, isHostComponent } from './components.js';
+function getLoc(node, ctx) {
+    const { line } = ctx.sourceFile.getLineAndCharacterOfPosition(node.getStart());
+    return { file: ctx.sourceFile.fileName, line: line + 1 };
+}
 export function lowerComponent(parsed, validation) {
     const func = parsed.component;
     const name = func.name.text;
@@ -43,6 +47,7 @@ export function lowerComponent(parsed, validation) {
         propsParam,
         bufferIndex: 0,
         sourceFile: parsed.sourceFile,
+        customComponents: validation.customComponents,
     };
     // Find return statement and lower its JSX
     const body = [];
@@ -137,6 +142,9 @@ export function exprToCpp(node, ctx) {
         if (ctx.stateVars.has(name)) {
             return `${name}.get()`;
         }
+        if (name === 'resetLayout') {
+            return 'imx_reset_layout';
+        }
         return name;
     }
     // Property access (e.g., props.name)
@@ -153,7 +161,12 @@ export function exprToCpp(node, ctx) {
     if (ts.isBinaryExpression(node)) {
         const left = exprToCpp(node.left, ctx);
         const right = exprToCpp(node.right, ctx);
-        const op = node.operatorToken.getText();
+        let op = node.operatorToken.getText();
+        // Map TypeScript operators to C++ equivalents
+        if (op === '===')
+            op = '==';
+        else if (op === '!==')
+            op = '!=';
         return `${left} ${op} ${right}`;
     }
     // Prefix unary expression (e.g., !show)
@@ -243,8 +256,13 @@ function extractActionStatements(expr, ctx) {
             return [exprToCpp(expr.body, ctx) + ';'];
         }
     }
-    // If not an arrow function, just call it
-    return [exprToCpp(expr, ctx) + ';'];
+    // If not an arrow function, call it
+    const code = exprToCpp(expr, ctx);
+    // Bare identifier (not already a call) needs () to invoke
+    if (ts.isIdentifier(expr)) {
+        return [code + '();'];
+    }
+    return [code + ';'];
 }
 /**
  * Lower a JSX expression (possibly wrapped in parenthesized expr) into IR nodes.
@@ -273,7 +291,7 @@ function lowerJsxExpression(node, body, ctx) {
         const condition = exprToCpp(node.left, ctx);
         const condBody = [];
         lowerJsxExpression(node.right, condBody, ctx);
-        body.push({ kind: 'conditional', condition, body: condBody });
+        body.push({ kind: 'conditional', condition, body: condBody, loc: getLoc(node, ctx) });
         return;
     }
     // Ternary: condition ? <A/> : <B/>
@@ -283,12 +301,12 @@ function lowerJsxExpression(node, body, ctx) {
         const elseBody = [];
         lowerJsxExpression(node.whenTrue, thenBody, ctx);
         lowerJsxExpression(node.whenFalse, elseBody, ctx);
-        body.push({ kind: 'conditional', condition, body: thenBody, elseBody });
+        body.push({ kind: 'conditional', condition, body: thenBody, elseBody, loc: getLoc(node, ctx) });
         return;
     }
     // items.map(item => <Comp/>)
     if (ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) && node.expression.name.text === 'map') {
-        lowerListMap(node, body, ctx);
+        lowerListMap(node, body, ctx, getLoc(node, ctx));
         return;
     }
     // JsxExpression wrapper
@@ -303,7 +321,15 @@ function lowerJsxElement(node, body, ctx) {
         return;
     const name = tagName.text;
     if (name === 'Text') {
-        lowerTextElement(node, body, ctx);
+        lowerTextElement(node, body, ctx, getLoc(node, ctx));
+        return;
+    }
+    if (name === 'BulletText') {
+        lowerBulletTextElement(node, body, ctx, getLoc(node, ctx));
+        return;
+    }
+    if (name === 'DockLayout') {
+        body.push(lowerDockLayout(node, ctx));
         return;
     }
     if (isHostComponent(name)) {
@@ -311,7 +337,48 @@ function lowerJsxElement(node, body, ctx) {
         const attrs = getAttributes(node.openingElement.attributes, ctx);
         if (def.isContainer) {
             const containerTag = name;
-            body.push({ kind: 'begin_container', tag: containerTag, props: attrs });
+            // Special handling for DragDropTarget — lower onDrop callback with type info
+            if (name === 'DragDropTarget') {
+                const rawAttrs = getRawAttributes(node.openingElement.attributes);
+                const props = {};
+                for (const [attrName, expr] of rawAttrs) {
+                    if (attrName === 'onDrop' && expr && (ts.isArrowFunction(expr) || ts.isFunctionExpression(expr))) {
+                        const params = expr.parameters;
+                        if (params.length > 0) {
+                            const param = params[0];
+                            const paramName = ts.isIdentifier(param.name) ? param.name.text : '_p';
+                            let cppType = 'float';
+                            if (param.type) {
+                                const typeText = param.type.getText();
+                                if (typeText === 'number')
+                                    cppType = 'float';
+                                else if (typeText === 'boolean')
+                                    cppType = 'bool';
+                                else if (typeText === 'string')
+                                    cppType = 'std::string';
+                            }
+                            const bodyCode = ts.isBlock(expr.body)
+                                ? expr.body.statements.map(s => stmtToCpp(s, ctx)).join(' ')
+                                : exprToCpp(expr.body, ctx) + ';';
+                            // Store as structured string: type|paramName|body
+                            props[attrName] = `${cppType}|${paramName}|${bodyCode}`;
+                        }
+                    }
+                    else if (expr) {
+                        props[attrName] = exprToCpp(expr, ctx);
+                    }
+                    else {
+                        props[attrName] = 'true';
+                    }
+                }
+                body.push({ kind: 'begin_container', tag: containerTag, props, loc: getLoc(node, ctx) });
+                for (const child of node.children) {
+                    lowerJsxChild(child, body, ctx);
+                }
+                body.push({ kind: 'end_container', tag: containerTag });
+                return;
+            }
+            body.push({ kind: 'begin_container', tag: containerTag, props: attrs, loc: getLoc(node, ctx) });
             for (const child of node.children) {
                 lowerJsxChild(child, body, ctx);
             }
@@ -321,7 +388,7 @@ function lowerJsxElement(node, body, ctx) {
         // Popup
         if (name === 'Popup') {
             const id = attrs['id'] ?? '';
-            body.push({ kind: 'begin_popup', id });
+            body.push({ kind: 'begin_popup', id, loc: getLoc(node, ctx) });
             for (const child of node.children) {
                 lowerJsxChild(child, body, ctx);
             }
@@ -331,7 +398,12 @@ function lowerJsxElement(node, body, ctx) {
     }
     // Custom component with children - treat as container-like (not common but handle gracefully)
     if (!isHostComponent(name)) {
-        lowerCustomComponent(name, node.openingElement.attributes, body, ctx);
+        if (ctx.customComponents && ctx.customComponents.has(name)) {
+            lowerCustomComponent(name, node.openingElement.attributes, body, ctx, getLoc(node, ctx));
+        }
+        else {
+            lowerNativeWidget(name, node.openingElement.attributes, body, ctx, getLoc(node, ctx));
+        }
         return;
     }
 }
@@ -341,75 +413,143 @@ function lowerJsxSelfClosing(node, body, ctx) {
         return;
     const name = tagName.text;
     if (!isHostComponent(name)) {
-        lowerCustomComponent(name, node.attributes, body, ctx);
+        if (ctx.customComponents && ctx.customComponents.has(name)) {
+            lowerCustomComponent(name, node.attributes, body, ctx, getLoc(node, ctx));
+        }
+        else {
+            lowerNativeWidget(name, node.attributes, body, ctx, getLoc(node, ctx));
+        }
         return;
     }
     const attrs = getAttributes(node.attributes, ctx);
     const rawAttrs = getRawAttributes(node.attributes);
+    const loc = getLoc(node, ctx);
     switch (name) {
         case 'Button':
-            lowerButton(attrs, rawAttrs, body, ctx);
+            lowerButton(attrs, rawAttrs, body, ctx, loc);
             break;
         case 'TextInput':
-            lowerTextInput(attrs, rawAttrs, body, ctx);
+            lowerTextInput(attrs, rawAttrs, body, ctx, loc);
             break;
         case 'Checkbox':
-            lowerCheckbox(attrs, rawAttrs, body, ctx);
+            lowerCheckbox(attrs, rawAttrs, body, ctx, loc);
             break;
         case 'MenuItem':
-            lowerMenuItem(attrs, rawAttrs, body, ctx);
+            lowerMenuItem(attrs, rawAttrs, body, ctx, loc);
             break;
         case 'SliderFloat':
-            lowerSliderFloat(attrs, rawAttrs, body, ctx);
+            lowerSliderFloat(attrs, rawAttrs, body, ctx, loc);
             break;
         case 'SliderInt':
-            lowerSliderInt(attrs, rawAttrs, body, ctx);
+            lowerSliderInt(attrs, rawAttrs, body, ctx, loc);
             break;
         case 'DragFloat':
-            lowerDragFloat(attrs, rawAttrs, body, ctx);
+            lowerDragFloat(attrs, rawAttrs, body, ctx, loc);
             break;
         case 'DragInt':
-            lowerDragInt(attrs, rawAttrs, body, ctx);
+            lowerDragInt(attrs, rawAttrs, body, ctx, loc);
             break;
         case 'Combo':
-            lowerCombo(attrs, rawAttrs, body, ctx);
+            lowerCombo(attrs, rawAttrs, body, ctx, loc);
             break;
         case 'InputInt':
-            lowerInputInt(attrs, rawAttrs, body, ctx);
+            lowerInputInt(attrs, rawAttrs, body, ctx, loc);
             break;
         case 'InputFloat':
-            lowerInputFloat(attrs, rawAttrs, body, ctx);
+            lowerInputFloat(attrs, rawAttrs, body, ctx, loc);
             break;
         case 'ColorEdit':
-            lowerColorEdit(attrs, rawAttrs, body, ctx);
+            lowerColorEdit(attrs, rawAttrs, body, ctx, loc);
             break;
         case 'ListBox':
-            lowerListBox(attrs, rawAttrs, body, ctx);
+            lowerListBox(attrs, rawAttrs, body, ctx, loc);
             break;
         case 'ProgressBar':
-            lowerProgressBar(attrs, rawAttrs, body, ctx);
+            lowerProgressBar(attrs, rawAttrs, body, ctx, loc);
             break;
         case 'Tooltip':
-            lowerTooltip(attrs, body, ctx);
+            lowerTooltip(attrs, body, ctx, loc);
             break;
         case 'Separator':
-            body.push({ kind: 'separator' });
+            body.push({ kind: 'separator', loc });
             break;
         case 'Text':
             // Self-closing <Text /> - empty text
-            body.push({ kind: 'text', format: '', args: [] });
+            body.push({ kind: 'text', format: '', args: [], loc });
+            break;
+        case 'BulletText':
+            // Self-closing <BulletText /> - empty bullet
+            body.push({ kind: 'bullet_text', format: '', args: [], loc });
+            break;
+        case 'LabelText':
+            lowerLabelText(attrs, body, ctx, loc);
+            break;
+        case 'Selectable':
+            lowerSelectable(attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'Radio':
+            lowerRadio(attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'InputTextMultiline':
+            lowerInputTextMultiline(attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'ColorPicker':
+            lowerColorPicker(attrs, rawAttrs, body, ctx, loc);
+            break;
+        case 'PlotLines':
+            lowerPlotLines(attrs, body, ctx, loc);
             break;
+        case 'PlotHistogram':
+            lowerPlotHistogram(attrs, body, ctx, loc);
+            break;
+        case 'Image':
+            lowerImage(attrs, body, ctx, loc);
+            break;
+        case 'DrawLine': {
+            const p1 = attrs['p1'] ?? '0, 0';
+            const p2 = attrs['p2'] ?? '0, 0';
+            const color = attrs['color'] ?? '1, 1, 1, 1';
+            const thickness = attrs['thickness'] ?? '1.0';
+            body.push({ kind: 'draw_line', p1, p2, color, thickness, loc });
+            break;
+        }
+        case 'DrawRect': {
+            const min = attrs['min'] ?? '0, 0';
+            const max = attrs['max'] ?? '0, 0';
+            const color = attrs['color'] ?? '1, 1, 1, 1';
+            const filled = attrs['filled'] ?? 'false';
+            const thickness = attrs['thickness'] ?? '1.0';
+            const rounding = attrs['rounding'] ?? '0.0';
+            body.push({ kind: 'draw_rect', min, max, color, filled, thickness, rounding, loc });
+            break;
+        }
+        case 'DrawCircle': {
+            const center = attrs['center'] ?? '0, 0';
+            const radius = attrs['radius'] ?? '0';
+            const color = attrs['color'] ?? '1, 1, 1, 1';
+            const filled = attrs['filled'] ?? 'false';
+            const thickness = attrs['thickness'] ?? '1.0';
+            body.push({ kind: 'draw_circle', center, radius, color, filled, thickness, loc });
+            break;
+        }
+        case 'DrawText': {
+            const pos = attrs['pos'] ?? '0, 0';
+            const text = attrs['text'] ?? '""';
+            const color = attrs['color'] ?? '1, 1, 1, 1';
+            body.push({ kind: 'draw_text', pos, text, color, loc });
+            break;
+        }
         default:
             // Container self-closing (e.g., <Window title="X"/>)
             if (HOST_COMPONENTS[name]?.isContainer) {
                 const containerTag = name;
-                body.push({ kind: 'begin_container', tag: containerTag, props: attrs });
+                body.push({ kind: 'begin_container', tag: containerTag, props: attrs, loc });
                 body.push({ kind: 'end_container', tag: containerTag });
             }
             break;
     }
 }
-function lowerButton(attrs, rawAttrs, body, ctx) {
+function lowerButton(attrs, rawAttrs, body, ctx, loc) {
     const title = attrs['title'] ?? '""';
     const onPressExpr = rawAttrs.get('onPress');
     let action = [];
@@ -417,9 +557,9 @@ function lowerButton(attrs, rawAttrs, body, ctx) {
         action = extractActionStatements(onPressExpr, ctx);
     }
     const style = attrs['style'];
-    body.push({ kind: 'button', title, action, style });
+    body.push({ kind: 'button', title, action, style, loc });
 }
-function lowerTextInput(attrs, rawAttrs, body, ctx) {
+function lowerTextInput(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const bufferIndex = ctx.bufferIndex++;
     // Detect bound state variable from value prop
@@ -432,9 +572,9 @@ function lowerTextInput(attrs, rawAttrs, body, ctx) {
         }
     }
     const style = attrs['style'];
-    body.push({ kind: 'text_input', label, bufferIndex, stateVar, style });
+    body.push({ kind: 'text_input', label, bufferIndex, stateVar, style, loc });
 }
-function lowerCheckbox(attrs, rawAttrs, body, ctx) {
+function lowerCheckbox(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     // Detect bound state variable from value prop
     let stateVar = '';
@@ -467,9 +607,9 @@ function lowerCheckbox(attrs, rawAttrs, body, ctx) {
         }
     }
     const style = attrs['style'];
-    body.push({ kind: 'checkbox', label, stateVar, valueExpr: valueExprStr, onChangeExpr: onChangeExprStr, style });
+    body.push({ kind: 'checkbox', label, stateVar, valueExpr: valueExprStr, onChangeExpr: onChangeExprStr, style, loc });
 }
-function lowerMenuItem(attrs, rawAttrs, body, ctx) {
+function lowerMenuItem(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const shortcut = attrs['shortcut'];
     const onPressExpr = rawAttrs.get('onPress');
@@ -477,9 +617,9 @@ function lowerMenuItem(attrs, rawAttrs, body, ctx) {
     if (onPressExpr) {
         action = extractActionStatements(onPressExpr, ctx);
     }
-    body.push({ kind: 'menu_item', label, shortcut, action });
+    body.push({ kind: 'menu_item', label, shortcut, action, loc });
 }
-function lowerTextElement(node, body, ctx) {
+function lowerTextElement(node, body, ctx, loc) {
     let format = '';
     const args = [];
     for (const child of node.children) {
@@ -531,7 +671,7 @@ function lowerTextElement(node, body, ctx) {
             }
         }
     }
-    body.push({ kind: 'text', format, args });
+    body.push({ kind: 'text', format, args, loc });
 }
 /**
  * Check if an expression will produce a const char* in C++ (not std::string).
@@ -593,7 +733,7 @@ function inferExprType(expr, ctx) {
     }
     return 'int'; // default
 }
-function lowerListMap(node, body, ctx) {
+function lowerListMap(node, body, ctx, loc) {
     const propAccess = node.expression;
     const array = exprToCpp(propAccess.expression, ctx);
     const callback = node.arguments[0];
@@ -622,9 +762,10 @@ function lowerListMap(node, body, ctx) {
         stateCount: 0,
         bufferCount: 0,
         body: mapBody,
+        loc,
     });
 }
-function lowerCustomComponent(name, attributes, body, ctx) {
+function lowerCustomComponent(name, attributes, body, ctx, loc) {
     const attrs = getAttributes(attributes, ctx);
     body.push({
         kind: 'custom_component',
@@ -632,8 +773,111 @@ function lowerCustomComponent(name, attributes, body, ctx) {
         props: attrs,
         stateCount: 0,
         bufferCount: 0,
+        loc,
     });
 }
+function lowerNativeWidget(name, attributes, body, ctx, loc) {
+    const props = {};
+    const callbackProps = {};
+    const rawAttrs = getRawAttributes(attributes);
+    for (const [attrName, expr] of rawAttrs) {
+        if (attrName === 'key')
+            continue;
+        if (!expr) {
+            props[attrName] = 'true';
+            continue;
+        }
+        if (ts.isArrowFunction(expr) || ts.isFunctionExpression(expr)) {
+            const params = expr.parameters;
+            if (params.length > 0) {
+                // Parameterized callback: (v: number) => setVol(v)
+                const param = params[0];
+                const paramName = ts.isIdentifier(param.name) ? param.name.text : '_p';
+                let cppType = 'float';
+                if (param.type) {
+                    const typeText = param.type.getText();
+                    if (typeText === 'number')
+                        cppType = 'float';
+                    else if (typeText === 'boolean')
+                        cppType = 'bool';
+                    else if (typeText === 'string')
+                        cppType = 'std::string';
+                }
+                const bodyCode = ts.isBlock(expr.body)
+                    ? expr.body.statements.map(s => stmtToCpp(s, ctx)).join(' ')
+                    : exprToCpp(expr.body, ctx) + ';';
+                callbackProps[attrName] = `[&](std::any _v) { auto ${paramName} = std::any_cast<${cppType}>(_v); ${bodyCode} }`;
+            }
+            else {
+                // Void callback: () => doSomething()
+                const bodyCode = ts.isBlock(expr.body)
+                    ? expr.body.statements.map(s => stmtToCpp(s, ctx)).join(' ')
+                    : exprToCpp(expr.body, ctx) + ';';
+                callbackProps[attrName] = `[&](std::any) { ${bodyCode} }`;
+            }
+        }
+        else {
+            props[attrName] = exprToCpp(expr, ctx);
+        }
+    }
+    const keyAttr = rawAttrs.get('key');
+    const key = keyAttr ? exprToCpp(keyAttr, ctx) : undefined;
+    body.push({
+        kind: 'native_widget',
+        name,
+        props,
+        callbackProps,
+        key,
+        loc,
+    });
+}
+function lowerDockLayout(node, ctx) {
+    const children = [];
+    for (const child of node.children) {
+        if (ts.isJsxElement(child)) {
+            const tag = child.openingElement.tagName;
+            if (ts.isIdentifier(tag)) {
+                if (tag.text === 'DockSplit')
+                    children.push(lowerDockSplit(child, ctx));
+                else if (tag.text === 'DockPanel')
+                    children.push(lowerDockPanel(child, ctx));
+            }
+        }
+    }
+    return { kind: 'dock_layout', children, loc: getLoc(node, ctx) };
+}
+function lowerDockSplit(node, ctx) {
+    const attrs = getAttributes(node.openingElement.attributes, ctx);
+    const direction = attrs['direction'] ?? '"horizontal"';
+    const size = attrs['size'] ?? '0.5';
+    const children = [];
+    for (const child of node.children) {
+        if (ts.isJsxElement(child)) {
+            const tag = child.openingElement.tagName;
+            if (ts.isIdentifier(tag)) {
+                if (tag.text === 'DockSplit')
+                    children.push(lowerDockSplit(child, ctx));
+                else if (tag.text === 'DockPanel')
+                    children.push(lowerDockPanel(child, ctx));
+            }
+        }
+    }
+    return { kind: 'dock_split', direction, size, children };
+}
+function lowerDockPanel(node, ctx) {
+    const windows = [];
+    for (const child of node.children) {
+        if (ts.isJsxSelfClosingElement(child)) {
+            const tag = child.tagName;
+            if (ts.isIdentifier(tag) && tag.text === 'Window') {
+                const attrs = getAttributes(child.attributes, ctx);
+                if (attrs['title'])
+                    windows.push(attrs['title']);
+            }
+        }
+    }
+    return { kind: 'dock_panel', windows };
+}
 function lowerJsxChild(child, body, ctx) {
     if (ts.isJsxElement(child)) {
         lowerJsxElement(child, body, ctx);
@@ -650,6 +894,99 @@ function lowerJsxChild(child, body, ctx) {
         // Standalone text not inside <Text> — usually whitespace, skip
     }
 }
+function lowerBulletTextElement(node, body, ctx, loc) {
+    // Same logic as lowerTextElement but produces bullet_text kind
+    const children = node.children;
+    const parts = [];
+    const args = [];
+    for (const child of children) {
+        if (ts.isJsxText(child)) {
+            const trimmed = child.text.trim();
+            if (trimmed)
+                parts.push(trimmed.replace(/%/g, '%%'));
+        }
+        else if (ts.isJsxExpression(child) && child.expression) {
+            args.push(exprToCpp(child.expression, ctx));
+            parts.push('%s');
+        }
+    }
+    const format = parts.join(' ');
+    body.push({ kind: 'bullet_text', format, args, loc });
+}
+function lowerLabelText(attrs, body, ctx, loc) {
+    const label = attrs['label'] ?? '""';
+    const value = attrs['value'] ?? '""';
+    body.push({ kind: 'label_text', label, value, loc });
+}
+function lowerSelectable(attrs, rawAttrs, body, ctx, loc) {
+    const label = attrs['label'] ?? '""';
+    const selected = attrs['selected'] ?? 'false';
+    const onSelectExpr = rawAttrs.get('onSelect');
+    let action = [];
+    if (onSelectExpr) {
+        action = extractActionStatements(onSelectExpr, ctx);
+    }
+    const style = attrs['style'];
+    body.push({ kind: 'selectable', label, selected, action, style, loc });
+}
+function lowerRadio(attrs, rawAttrs, body, ctx, loc) {
+    const label = attrs['label'] ?? '""';
+    const index = attrs['index'] ?? '0';
+    const style = attrs['style'];
+    const { stateVar, valueExpr, onChangeExpr } = lowerValueOnChange(rawAttrs, ctx);
+    body.push({ kind: 'radio', label, stateVar, valueExpr, onChangeExpr, index, style, loc });
+}
+function lowerInputTextMultiline(attrs, rawAttrs, body, ctx, loc) {
+    const label = attrs['label'] ?? '""';
+    const bufferIndex = ctx.bufferIndex++;
+    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: 'input_text_multiline', label, bufferIndex, stateVar, style, loc });
+}
+function lowerColorPicker(attrs, rawAttrs, body, ctx, loc) {
+    const label = attrs['label'] ?? '""';
+    const style = attrs['style'];
+    let stateVar = '';
+    const valueRaw = rawAttrs.get('value');
+    if (valueRaw && ts.isIdentifier(valueRaw) && ctx.stateVars.has(valueRaw.text)) {
+        stateVar = valueRaw.text;
+    }
+    body.push({ kind: 'color_picker', label, stateVar, style, loc });
+}
+function lowerPlotLines(attrs, body, ctx, loc) {
+    const label = attrs['label'] ?? '""';
+    const values = attrs['values'] ?? '';
+    const overlay = attrs['overlay'];
+    const style = attrs['style'];
+    body.push({ kind: 'plot_lines', label, values, overlay, style, loc });
+}
+function lowerPlotHistogram(attrs, body, ctx, loc) {
+    const label = attrs['label'] ?? '""';
+    const values = attrs['values'] ?? '';
+    const overlay = attrs['overlay'];
+    const style = attrs['style'];
+    body.push({ kind: 'plot_histogram', label, values, overlay, style, loc });
+}
+function lowerImage(attrs, body, ctx, loc) {
+    const src = attrs['src'] ?? '""';
+    const embed = attrs['embed'] === 'true';
+    const width = attrs['width'];
+    const height = attrs['height'];
+    let embedKey;
+    if (embed) {
+        // Derive key from src: strip quotes, replace non-alnum with underscore
+        const rawSrc = src.replace(/^"|"$/g, '');
+        embedKey = rawSrc.replace(/[^a-zA-Z0-9]/g, '_');
+    }
+    body.push({ kind: 'image', src, embed, embedKey, width, height, loc });
+}
 function getAttributes(attributes, ctx) {
     const result = {};
     for (const attr of attributes.properties) {
@@ -709,56 +1046,56 @@ function lowerValueOnChange(rawAttrs, ctx) {
     }
     return { stateVar, valueExpr, onChangeExpr };
 }
-function lowerSliderFloat(attrs, rawAttrs, body, ctx) {
+function lowerSliderFloat(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const min = attrs['min'] ?? '0.0f';
     const max = attrs['max'] ?? '1.0f';
     const style = attrs['style'];
     const { stateVar, valueExpr, onChangeExpr } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'slider_float', label, stateVar, valueExpr, onChangeExpr, min, max, style });
+    body.push({ kind: 'slider_float', label, stateVar, valueExpr, onChangeExpr, min, max, style, loc });
 }
-function lowerSliderInt(attrs, rawAttrs, body, ctx) {
+function lowerSliderInt(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const min = attrs['min'] ?? '0';
     const max = attrs['max'] ?? '100';
     const style = attrs['style'];
     const { stateVar, valueExpr, onChangeExpr } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'slider_int', label, stateVar, valueExpr, onChangeExpr, min, max, style });
+    body.push({ kind: 'slider_int', label, stateVar, valueExpr, onChangeExpr, min, max, style, loc });
 }
-function lowerDragFloat(attrs, rawAttrs, body, ctx) {
+function lowerDragFloat(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const speed = attrs['speed'] ?? '1.0f';
     const style = attrs['style'];
     const { stateVar, valueExpr, onChangeExpr } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'drag_float', label, stateVar, valueExpr, onChangeExpr, speed, style });
+    body.push({ kind: 'drag_float', label, stateVar, valueExpr, onChangeExpr, speed, style, loc });
 }
-function lowerDragInt(attrs, rawAttrs, body, ctx) {
+function lowerDragInt(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const speed = attrs['speed'] ?? '1.0f';
     const style = attrs['style'];
     const { stateVar, valueExpr, onChangeExpr } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'drag_int', label, stateVar, valueExpr, onChangeExpr, speed, style });
+    body.push({ kind: 'drag_int', label, stateVar, valueExpr, onChangeExpr, speed, style, loc });
 }
-function lowerCombo(attrs, rawAttrs, body, ctx) {
+function lowerCombo(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const items = attrs['items'] ?? '';
     const style = attrs['style'];
     const { stateVar, valueExpr, onChangeExpr } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'combo', label, stateVar, valueExpr, onChangeExpr, items, style });
+    body.push({ kind: 'combo', label, stateVar, valueExpr, onChangeExpr, items, style, loc });
 }
-function lowerInputInt(attrs, rawAttrs, body, ctx) {
+function lowerInputInt(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const style = attrs['style'];
     const { stateVar, valueExpr, onChangeExpr } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'input_int', label, stateVar, valueExpr, onChangeExpr, style });
+    body.push({ kind: 'input_int', label, stateVar, valueExpr, onChangeExpr, style, loc });
 }
-function lowerInputFloat(attrs, rawAttrs, body, ctx) {
+function lowerInputFloat(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const style = attrs['style'];
     const { stateVar, valueExpr, onChangeExpr } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'input_float', label, stateVar, valueExpr, onChangeExpr, style });
+    body.push({ kind: 'input_float', label, stateVar, valueExpr, onChangeExpr, style, loc });
 }
-function lowerColorEdit(attrs, rawAttrs, body, ctx) {
+function lowerColorEdit(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const style = attrs['style'];
     // ColorEdit only supports state-bound values
@@ -767,22 +1104,22 @@ function lowerColorEdit(attrs, rawAttrs, body, ctx) {
     if (valueRaw && ts.isIdentifier(valueRaw) && ctx.stateVars.has(valueRaw.text)) {
         stateVar = valueRaw.text;
     }
-    body.push({ kind: 'color_edit', label, stateVar, style });
+    body.push({ kind: 'color_edit', label, stateVar, style, loc });
 }
-function lowerListBox(attrs, rawAttrs, body, ctx) {
+function lowerListBox(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const items = attrs['items'] ?? '';
     const style = attrs['style'];
     const { stateVar, valueExpr, onChangeExpr } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'list_box', label, stateVar, valueExpr, onChangeExpr, items, style });
+    body.push({ kind: 'list_box', label, stateVar, valueExpr, onChangeExpr, items, style, loc });
 }
-function lowerProgressBar(attrs, rawAttrs, body, ctx) {
+function lowerProgressBar(attrs, rawAttrs, body, ctx, loc) {
     const value = attrs['value'] ?? '0.0f';
     const overlay = attrs['overlay'];
     const style = attrs['style'];
-    body.push({ kind: 'progress_bar', value, overlay, style });
+    body.push({ kind: 'progress_bar', value, overlay, style, loc });
 }
-function lowerTooltip(attrs, body, ctx) {
+function lowerTooltip(attrs, body, ctx, loc) {
     const text = attrs['text'] ?? '""';
-    body.push({ kind: 'tooltip', text });
+    body.push({ kind: 'tooltip', text, loc });
 }