imxc 0.2.0 → 0.3.0

package/dist/emitter.js

@@ -1,4 +1,10 @@
 const INDENT = '    ';
+let currentCompName = '';
+function emitLocComment(loc, tag, lines, indent) {
+    if (loc) {
+        lines.push(`${indent}// ${loc.file}:${loc.line} <${tag}>`);
+    }
+}
 function cppType(t) {
     switch (t) {
         case 'int': return 'int';
@@ -28,15 +34,76 @@ function asCharPtr(expr) {
     // Expression — assume std::string, add .c_str()
     return `${expr}.c_str()`;
 }
+function emitImVec4(arrayStr) {
+    const parts = arrayStr.split(',').map(s => {
+        const v = s.trim();
+        return v.includes('.') ? `${v}f` : `${v}.0f`;
+    });
+    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 `ImVec2(${parts.join(', ')})`;
+}
+function emitFloat(val) {
+    return val.includes('.') ? `${val}F` : `${val}.0F`;
+}
+function findDockLayout(nodes) {
+    for (const node of nodes) {
+        if (node.kind === 'dock_layout')
+            return node;
+    }
+    return null;
+}
+function emitDockSetupFunction(layout, compName, lines) {
+    lines.push(`void ${compName}_setup_dock_layout(ImGuiID dockspace_id) {`);
+    lines.push(`${INDENT}ImGui::DockBuilderRemoveNode(dockspace_id);`);
+    lines.push(`${INDENT}ImGui::DockBuilderAddNode(dockspace_id, ImGuiDockNodeFlags_None);`);
+    lines.push(`${INDENT}ImGui::DockBuilderSetNodeSize(dockspace_id, ImGui::GetMainViewport()->WorkSize);`);
+    lines.push('');
+    let counter = 0;
+    function emitDockNode(node, parentVar) {
+        if (node.kind === 'dock_panel') {
+            for (const title of node.windows) {
+                lines.push(`${INDENT}ImGui::DockBuilderDockWindow(${title}, ${parentVar});`);
+            }
+        }
+        else {
+            const dirRaw = node.direction.replace(/"/g, '');
+            const dir = dirRaw === 'horizontal' ? 'ImGuiDir_Left' : 'ImGuiDir_Up';
+            const sizeF = emitFloat(node.size);
+            const firstVar = `dock_${counter++}`;
+            const secondVar = `dock_${counter++}`;
+            lines.push(`${INDENT}ImGuiID ${firstVar}, ${secondVar};`);
+            lines.push(`${INDENT}ImGui::DockBuilderSplitNode(${parentVar}, ${dir}, ${sizeF}, &${firstVar}, &${secondVar});`);
+            if (node.children.length >= 1)
+                emitDockNode(node.children[0], firstVar);
+            if (node.children.length >= 2)
+                emitDockNode(node.children[1], secondVar);
+        }
+    }
+    for (const child of layout.children) {
+        emitDockNode(child, 'dockspace_id');
+    }
+    lines.push(`${INDENT}ImGui::DockBuilderFinish(dockspace_id);`);
+    lines.push('}');
+    lines.push('');
+}
 /**
  * Emit a .gen.h header for a component that has props.
  * Contains the props struct and function forward declaration.
  */
-export function emitComponentHeader(comp) {
+export function emitComponentHeader(comp, sourceFile) {
     const lines = [];
+    if (sourceFile) {
+        lines.push(`// Generated from ${sourceFile} by imxc`);
+    }
     lines.push('#pragma once');
-    lines.push('#include <reimgui/runtime.h>');
-    lines.push('#include <reimgui/renderer.h>');
+    lines.push('#include <imx/runtime.h>');
+    lines.push('#include <imx/renderer.h>');
     lines.push('#include <functional>');
     lines.push('#include <string>');
     lines.push('');
@@ -48,11 +115,11 @@ export function emitComponentHeader(comp) {
     lines.push('};');
     lines.push('');
     // Function forward declaration
-    lines.push(`void ${comp.name}_render(reimgui::RenderContext& ctx, const ${comp.name}Props& props);`);
+    lines.push(`void ${comp.name}_render(imx::RenderContext& ctx, const ${comp.name}Props& props);`);
     lines.push('');
     return lines.join('\n');
 }
-export function emitComponent(comp, imports) {
+export function emitComponent(comp, imports, sourceFile) {
     const lines = [];
     // Reset counters for each component
     styleCounter = 0;
@@ -60,20 +127,34 @@ export function emitComponent(comp, imports) {
     checkboxCounter = 0;
     comboCounter = 0;
     listBoxCounter = 0;
+    nativeWidgetCounter = 0;
+    plotCounter = 0;
+    dragDropSourceStack.length = 0;
+    dragDropTargetStack.length = 0;
+    currentCompName = comp.name;
     const hasProps = comp.params.length > 0;
     const hasColorType = comp.stateSlots.some(s => s.type === 'color');
+    // File banner
+    if (sourceFile) {
+        lines.push(`// Generated from ${sourceFile} by imxc`);
+    }
     if (hasProps) {
         // Component with props: include its own header instead of redeclaring struct
         lines.push(`#include "${comp.name}.gen.h"`);
         if (hasColorType) {
             lines.push('#include <array>');
         }
+        // Embed image includes
+        const embedKeysProps = collectEmbedKeys(comp.body);
+        for (const key of embedKeysProps) {
+            lines.push(`#include "${key}.embed.h"`);
+        }
         lines.push('');
     }
     else {
         // No props: standard headers
-        lines.push('#include <reimgui/runtime.h>');
-        lines.push('#include <reimgui/renderer.h>');
+        lines.push('#include <imx/runtime.h>');
+        lines.push('#include <imx/renderer.h>');
         if (hasColorType) {
             lines.push('#include <array>');
         }
@@ -83,11 +164,29 @@ export function emitComponent(comp, imports) {
                 lines.push(`#include "${imp.headerFile}"`);
             }
         }
+        // Embed image includes
+        const embedKeys = collectEmbedKeys(comp.body);
+        for (const key of embedKeys) {
+            lines.push(`#include "${key}.embed.h"`);
+        }
+        lines.push('');
+    }
+    const dockLayout = findDockLayout(comp.body);
+    if (dockLayout) {
+        lines.push('#include <imgui_internal.h>');
+        lines.push('');
+        lines.push('static bool g_layout_applied = false;');
+        lines.push('static bool g_reset_layout = false;');
+        lines.push('');
+        lines.push('void imx_reset_layout() {');
+        lines.push(`${INDENT}g_reset_layout = true;`);
+        lines.push('}');
         lines.push('');
+        emitDockSetupFunction(dockLayout, comp.name, lines);
     }
     // Function signature
     const propsArg = hasProps ? `, const ${comp.name}Props& props` : '';
-    lines.push(`void ${comp.name}_render(reimgui::RenderContext& ctx${propsArg}) {`);
+    lines.push(`void ${comp.name}_render(imx::RenderContext& ctx${propsArg}) {`);
     // State declarations
     for (const slot of comp.stateSlots) {
         const initVal = slot.type === 'string'
@@ -106,13 +205,16 @@ export function emitComponent(comp, imports) {
     lines.push('');
     return lines.join('\n');
 }
-export function emitRoot(rootName, stateCount, bufferCount) {
+export function emitRoot(rootName, stateCount, bufferCount, sourceFile) {
     const lines = [];
-    lines.push('#include <reimgui/runtime.h>');
+    if (sourceFile) {
+        lines.push(`// Generated from ${sourceFile} by imxc`);
+    }
+    lines.push('#include <imx/runtime.h>');
     lines.push('');
-    lines.push(`void ${rootName}_render(reimgui::RenderContext& ctx);`);
+    lines.push(`void ${rootName}_render(imx::RenderContext& ctx);`);
     lines.push('');
-    lines.push('namespace reimgui {');
+    lines.push('namespace imx {');
     lines.push('void render_root(Runtime& runtime) {');
     lines.push(`${INDENT}auto& ctx = runtime.begin_frame();`);
     lines.push(`${INDENT}ctx.begin_instance("${rootName}", 0, ${stateCount}, ${bufferCount});`);
@@ -120,7 +222,7 @@ export function emitRoot(rootName, stateCount, bufferCount) {
     lines.push(`${INDENT}ctx.end_instance();`);
     lines.push(`${INDENT}runtime.end_frame();`);
     lines.push('}');
-    lines.push('} // namespace reimgui');
+    lines.push('} // namespace imx');
     lines.push('');
     return lines.join('\n');
 }
@@ -151,17 +253,19 @@ function emitNode(node, lines, depth) {
             emitCheckbox(node, lines, indent);
             break;
         case 'separator':
-            lines.push(`${indent}reimgui::renderer::separator();`);
+            lines.push(`${indent}imx::renderer::separator();`);
             break;
         case 'begin_popup':
-            lines.push(`${indent}if (reimgui::renderer::begin_popup(${node.id})) {`);
+            emitLocComment(node.loc, 'Popup', lines, indent);
+            lines.push(`${indent}if (imx::renderer::begin_popup(${node.id})) {`);
             break;
         case 'end_popup':
-            lines.push(`${indent}reimgui::renderer::end_popup();`);
+            lines.push(`${indent}imx::renderer::end_popup();`);
             lines.push(`${indent}}`);
             break;
         case 'open_popup':
-            lines.push(`${indent}reimgui::renderer::open_popup(${node.id});`);
+            emitLocComment(node.loc, 'OpenPopup', lines, indent);
+            lines.push(`${indent}imx::renderer::open_popup(${node.id});`);
             break;
         case 'conditional':
             emitConditional(node, lines, indent, depth);
@@ -208,6 +312,64 @@ function emitNode(node, lines, depth) {
         case 'tooltip':
             emitTooltip(node, lines, indent);
             break;
+        case 'bullet_text':
+            emitBulletText(node, lines, indent);
+            break;
+        case 'label_text':
+            emitLabelText(node, lines, indent);
+            break;
+        case 'selectable':
+            emitSelectable(node, lines, indent);
+            break;
+        case 'radio':
+            emitRadio(node, lines, indent);
+            break;
+        case 'input_text_multiline':
+            emitInputTextMultiline(node, lines, indent);
+            break;
+        case 'color_picker':
+            emitColorPicker(node, lines, indent);
+            break;
+        case 'plot_lines':
+            emitPlotLines(node, lines, indent);
+            break;
+        case 'plot_histogram':
+            emitPlotHistogram(node, lines, indent);
+            break;
+        case 'image':
+            emitImage(node, lines, indent);
+            break;
+        case 'draw_line':
+            emitDrawLine(node, lines, indent);
+            break;
+        case 'draw_rect':
+            emitDrawRect(node, lines, indent);
+            break;
+        case 'draw_circle':
+            emitDrawCircle(node, lines, indent);
+            break;
+        case 'draw_text':
+            emitDrawText(node, lines, indent);
+            break;
+        case 'native_widget':
+            emitNativeWidget(node, lines, indent);
+            break;
+        case 'dock_layout': {
+            lines.push(`${indent}{`);
+            lines.push(`${indent}${INDENT}ImGuiID dock_id = ImGui::GetID("MainDockSpace");`);
+            lines.push(`${indent}${INDENT}if (g_reset_layout) {`);
+            lines.push(`${indent}${INDENT}${INDENT}${currentCompName}_setup_dock_layout(dock_id);`);
+            lines.push(`${indent}${INDENT}${INDENT}g_reset_layout = false;`);
+            lines.push(`${indent}${INDENT}} else if (!g_layout_applied) {`);
+            lines.push(`${indent}${INDENT}${INDENT}g_layout_applied = true;`);
+            lines.push(`${indent}${INDENT}${INDENT}ImGuiDockNode* node = ImGui::DockBuilderGetNode(dock_id);`);
+            lines.push(`${indent}${INDENT}${INDENT}if (node == nullptr || !node->IsSplitNode()) {`);
+            lines.push(`${indent}${INDENT}${INDENT}${INDENT}${currentCompName}_setup_dock_layout(dock_id);`);
+            lines.push(`${indent}${INDENT}${INDENT}}`);
+            lines.push(`${indent}${INDENT}}`);
+            lines.push(`${indent}}`);
+            break;
+        }
     }
 }
 let styleCounter = 0;
@@ -215,6 +377,91 @@ let customComponentCounter = 0;
 let checkboxCounter = 0;
 let comboCounter = 0;
 let listBoxCounter = 0;
+let nativeWidgetCounter = 0;
+let plotCounter = 0;
+const windowOpenStack = []; // tracks if begin_window used open prop
+const modalOnCloseStack = []; // tracks modal onClose expressions
+const dragDropSourceStack = [];
+const dragDropTargetStack = [];
+/**
+ * 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.
+ * Returns the variable name, or null if no style.
+ */
+/**
+ * Split a comma-separated list of key:value pairs in a style object literal,
+ * respecting brackets so that array values like [0.1, 0.1, 0.1, 1.0] are not split.
+ */
+function splitStylePairs(inner) {
+    const pairs = [];
+    let depth = 0;
+    let start = 0;
+    for (let i = 0; i < inner.length; i++) {
+        const ch = inner[i];
+        if (ch === '[' || ch === '(')
+            depth++;
+        else if (ch === ']' || ch === ')')
+            depth--;
+        else if (ch === ',' && depth === 0) {
+            const piece = inner.substring(start, i).trim();
+            if (piece)
+                pairs.push(piece);
+            start = i + 1;
+        }
+    }
+    const last = inner.substring(start).trim();
+    if (last)
+        pairs.push(last);
+    return pairs;
+}
+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};`);
+            }
+        }
+        return varName;
+    }
+    // Already a variable name or expression — return as-is
+    return styleExpr;
+}
 function buildStyleBlock(node, indent, lines) {
     // Check for style-related props (gap, padding, width, height, etc.)
     const styleProps = {};
@@ -229,17 +476,18 @@ function buildStyleBlock(node, indent, lines) {
             styleProps[cppKey] = val;
         }
     }
-    // Also check node.style (explicit style prop)
+    // Also check node.style (explicit style prop) — route through buildStyleVar to handle
+    // object literals like { backgroundColor: [r,g,b,a] } safely
     const explicitStyle = node.style ?? node.props['style'];
     if (explicitStyle) {
-        return explicitStyle;
+        return buildStyleVar(explicitStyle, indent, lines);
     }
     if (Object.keys(styleProps).length === 0) {
         return null;
     }
     // Generate MSVC-compatible style construction
     const varName = `style_${styleCounter++}`;
-    lines.push(`${indent}reimgui::Style ${varName};`);
+    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`;
@@ -248,59 +496,88 @@ function buildStyleBlock(node, indent, lines) {
     return varName;
 }
 function emitBeginContainer(node, lines, indent) {
+    emitLocComment(node.loc, node.tag, lines, indent);
     switch (node.tag) {
         case 'Window': {
             const title = asCharPtr(node.props['title'] ?? '""');
-            lines.push(`${indent}reimgui::renderer::begin_window(${title});`);
+            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['noCollapse'] === 'true')
+                flagParts.push('ImGuiWindowFlags_NoCollapse');
+            if (node.props['noDocking'] === 'true')
+                flagParts.push('ImGuiWindowFlags_NoDocking');
+            if (node.props['noScrollbar'] === 'true')
+                flagParts.push('ImGuiWindowFlags_NoScrollbar');
+            const flags = flagParts.length > 0 ? flagParts.join(' | ') : '0';
+            const openExpr = node.props['open'];
+            const onCloseExpr = node.props['onClose'];
+            if (openExpr) {
+                windowOpenStack.push(true);
+                lines.push(`${indent}{`);
+                lines.push(`${indent}    bool win_open = ${openExpr};`);
+                lines.push(`${indent}    imx::renderer::begin_window(${title}, ${flags}, &win_open);`);
+                if (onCloseExpr) {
+                    lines.push(`${indent}    if (!win_open) { ${onCloseExpr}; }`);
+                }
+            }
+            else {
+                windowOpenStack.push(false);
+                lines.push(`${indent}imx::renderer::begin_window(${title}, ${flags});`);
+            }
             break;
         }
         case 'Row': {
             const style = buildStyleBlock(node, indent, lines);
             if (style) {
-                lines.push(`${indent}reimgui::renderer::begin_row(${style});`);
+                lines.push(`${indent}imx::renderer::begin_row(${style});`);
             }
             else {
-                lines.push(`${indent}reimgui::renderer::begin_row();`);
+                lines.push(`${indent}imx::renderer::begin_row();`);
             }
             break;
         }
         case 'Column': {
             const style = buildStyleBlock(node, indent, lines);
             if (style) {
-                lines.push(`${indent}reimgui::renderer::begin_column(${style});`);
+                lines.push(`${indent}imx::renderer::begin_column(${style});`);
             }
             else {
-                lines.push(`${indent}reimgui::renderer::begin_column();`);
+                lines.push(`${indent}imx::renderer::begin_column();`);
             }
             break;
         }
         case 'View': {
             const style = buildStyleBlock(node, indent, lines);
             if (style) {
-                lines.push(`${indent}reimgui::renderer::begin_view(${style});`);
+                lines.push(`${indent}imx::renderer::begin_view(${style});`);
             }
             else {
-                lines.push(`${indent}reimgui::renderer::begin_view();`);
+                lines.push(`${indent}imx::renderer::begin_view();`);
             }
             break;
         }
         case 'DockSpace': {
             const style = buildStyleBlock(node, indent, lines);
             if (style) {
-                lines.push(`${indent}reimgui::renderer::begin_dockspace(${style});`);
+                lines.push(`${indent}imx::renderer::begin_dockspace(${style});`);
             }
             else {
-                lines.push(`${indent}reimgui::renderer::begin_dockspace();`);
+                lines.push(`${indent}imx::renderer::begin_dockspace();`);
             }
             break;
         }
         case 'MenuBar': {
-            lines.push(`${indent}if (reimgui::renderer::begin_menu_bar()) {`);
+            lines.push(`${indent}if (imx::renderer::begin_menu_bar()) {`);
             break;
         }
         case 'Menu': {
             const label = asCharPtr(node.props['label'] ?? '""');
-            lines.push(`${indent}if (reimgui::renderer::begin_menu(${label})) {`);
+            lines.push(`${indent}if (imx::renderer::begin_menu(${label})) {`);
             break;
         }
         case 'Table': {
@@ -309,100 +586,343 @@ function emitBeginContainer(node, lines, indent) {
             const count = columnNames.length;
             const varName = `table_cols_${styleCounter++}`;
             lines.push(`${indent}const char* ${varName}[] = {${columnNames.join(', ')}};`);
-            lines.push(`${indent}if (reimgui::renderer::begin_table("##table", ${count}, ${varName})) {`);
+            lines.push(`${indent}if (imx::renderer::begin_table("##table", ${count}, ${varName})) {`);
             break;
         }
         case 'TableRow': {
-            lines.push(`${indent}reimgui::renderer::begin_table_row();`);
+            lines.push(`${indent}imx::renderer::begin_table_row();`);
             break;
         }
         case 'TabBar': {
-            lines.push(`${indent}if (reimgui::renderer::begin_tab_bar()) {`);
+            lines.push(`${indent}if (imx::renderer::begin_tab_bar()) {`);
             break;
         }
         case 'TabItem': {
             const label = asCharPtr(node.props['label'] ?? '""');
-            lines.push(`${indent}if (reimgui::renderer::begin_tab_item(${label})) {`);
+            lines.push(`${indent}if (imx::renderer::begin_tab_item(${label})) {`);
             break;
         }
         case 'TreeNode': {
             const label = asCharPtr(node.props['label'] ?? '""');
-            lines.push(`${indent}if (reimgui::renderer::begin_tree_node(${label})) {`);
+            lines.push(`${indent}if (imx::renderer::begin_tree_node(${label})) {`);
             break;
         }
         case 'CollapsingHeader': {
             const label = asCharPtr(node.props['label'] ?? '""');
-            lines.push(`${indent}if (reimgui::renderer::begin_collapsing_header(${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++}`;
+            lines.push(`${indent}imx::ThemeConfig ${varName};`);
+            if (node.props['accentColor']) {
+                lines.push(`${indent}${varName}.accent_color = ${emitImVec4(node.props['accentColor'])};`);
+            }
+            if (node.props['backgroundColor']) {
+                lines.push(`${indent}${varName}.background_color = ${emitImVec4(node.props['backgroundColor'])};`);
+            }
+            if (node.props['textColor']) {
+                lines.push(`${indent}${varName}.text_color = ${emitImVec4(node.props['textColor'])};`);
+            }
+            if (node.props['borderColor']) {
+                lines.push(`${indent}${varName}.border_color = ${emitImVec4(node.props['borderColor'])};`);
+            }
+            if (node.props['surfaceColor']) {
+                lines.push(`${indent}${varName}.surface_color = ${emitImVec4(node.props['surfaceColor'])};`);
+            }
+            if (node.props['rounding']) {
+                lines.push(`${indent}${varName}.rounding = ${emitFloat(node.props['rounding'])};`);
+            }
+            if (node.props['borderSize']) {
+                lines.push(`${indent}${varName}.border_size = ${emitFloat(node.props['borderSize'])};`);
+            }
+            if (node.props['spacing']) {
+                lines.push(`${indent}${varName}.spacing = ${emitFloat(node.props['spacing'])};`);
+            }
+            lines.push(`${indent}imx::renderer::begin_theme(${preset}, ${varName});`);
+            break;
+        }
+        case 'Modal': {
+            const title = asCharPtr(node.props['title'] ?? '""');
+            const openExpr = node.props['open'];
+            const onCloseExpr = node.props['onClose'];
+            if (openExpr) {
+                windowOpenStack.push(true);
+                // Extract onClose body for use in end emitter
+                let onCloseBody = null;
+                if (onCloseExpr) {
+                    const lambdaMatch = onCloseExpr.match(/^\[&\]\(\)\s*\{\s*(.*?)\s*\}$/);
+                    onCloseBody = lambdaMatch ? lambdaMatch[1] : `${onCloseExpr};`;
+                }
+                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)) {`);
+            }
+            else {
+                windowOpenStack.push(false);
+                modalOnCloseStack.push(null);
+                lines.push(`${indent}if (imx::renderer::begin_modal(${title}, true, nullptr)) {`);
+            }
+            break;
+        }
+        case 'StyleColor': {
+            const varName = `sc_${styleCounter++}`;
+            lines.push(`${indent}imx::StyleColorOverrides ${varName};`);
+            const colorProps = [
+                ['text', 'text'], ['textDisabled', 'text_disabled'],
+                ['windowBg', 'window_bg'], ['frameBg', 'frame_bg'],
+                ['frameBgHovered', 'frame_bg_hovered'], ['frameBgActive', 'frame_bg_active'],
+                ['titleBg', 'title_bg'], ['titleBgActive', 'title_bg_active'],
+                ['button', 'button'], ['buttonHovered', 'button_hovered'],
+                ['buttonActive', 'button_active'], ['header', 'header'],
+                ['headerHovered', 'header_hovered'], ['headerActive', 'header_active'],
+                ['separator', 'separator'], ['checkMark', 'check_mark'],
+                ['sliderGrab', 'slider_grab'], ['border', 'border'],
+                ['popupBg', 'popup_bg'], ['tab', 'tab'],
+            ];
+            for (const [tsName, cppName] of colorProps) {
+                if (node.props[tsName]) {
+                    lines.push(`${indent}${varName}.${cppName} = ${emitImVec4(node.props[tsName])};`);
+                }
+            }
+            lines.push(`${indent}imx::renderer::begin_style_color(${varName});`);
+            break;
+        }
+        case 'StyleVar': {
+            const varName = `sv_${styleCounter++}`;
+            lines.push(`${indent}imx::StyleVarOverrides ${varName};`);
+            const floatProps = [
+                ['alpha', 'alpha'], ['windowRounding', 'window_rounding'],
+                ['frameRounding', 'frame_rounding'], ['frameBorderSize', 'frame_border_size'],
+                ['indentSpacing', 'indent_spacing'], ['tabRounding', 'tab_rounding'],
+            ];
+            for (const [tsName, cppName] of floatProps) {
+                if (node.props[tsName]) {
+                    lines.push(`${indent}${varName}.${cppName} = ${emitFloat(node.props[tsName])};`);
+                }
+            }
+            const vec2Props = [
+                ['windowPadding', 'window_padding'], ['framePadding', 'frame_padding'],
+                ['itemSpacing', 'item_spacing'], ['itemInnerSpacing', 'item_inner_spacing'],
+                ['cellPadding', 'cell_padding'],
+            ];
+            for (const [tsName, cppName] of vec2Props) {
+                if (node.props[tsName]) {
+                    lines.push(`${indent}${varName}.${cppName} = ${emitImVec2(node.props[tsName])};`);
+                }
+            }
+            lines.push(`${indent}imx::renderer::begin_style_var(${varName});`);
+            break;
+        }
+        case 'Group': {
+            lines.push(`${indent}ImGui::BeginGroup();`);
+            break;
+        }
+        case 'ID': {
+            const scope = node.props['scope'] ?? '""';
+            if (scope.startsWith('"')) {
+                lines.push(`${indent}ImGui::PushID(${scope});`);
+            }
+            else {
+                lines.push(`${indent}ImGui::PushID(static_cast<int>(${scope}));`);
+            }
+            break;
+        }
+        case 'DragDropSource': {
+            dragDropSourceStack.push(node.props);
+            lines.push(`${indent}ImGui::BeginGroup();`);
+            break;
+        }
+        case 'DragDropTarget': {
+            dragDropTargetStack.push(node.props);
+            lines.push(`${indent}ImGui::BeginGroup();`);
+            break;
+        }
+        case 'Disabled': {
+            const disabled = node.props['disabled'] ?? 'true';
+            lines.push(`${indent}ImGui::BeginDisabled(${disabled});`);
+            break;
+        }
+        case 'Child': {
+            const id = asCharPtr(node.props['id'] ?? '"##child"');
+            const width = emitFloat(node.props['width'] ?? '0');
+            const height = emitFloat(node.props['height'] ?? '0');
+            const border = node.props['border'] === 'true' ? 'true' : 'false';
+            lines.push(`${indent}ImGui::BeginChild(${id}, ImVec2(${width}, ${height}), ${border});`);
             break;
         }
+        case 'Canvas': {
+            const width = emitFloat(node.props['width'] ?? '0');
+            const height = emitFloat(node.props['height'] ?? '0');
+            const style = buildStyleBlock(node, indent, lines);
+            if (style) {
+                lines.push(`${indent}imx::renderer::begin_canvas(${width}, ${height}, ${style});`);
+            }
+            else {
+                lines.push(`${indent}imx::renderer::begin_canvas(${width}, ${height});`);
+            }
+            break;
+        }
+        case 'DockLayout':
+        case 'DockSplit':
+        case 'DockPanel':
+            break;
     }
 }
 function emitEndContainer(node, lines, indent) {
     switch (node.tag) {
-        case 'Window':
-            lines.push(`${indent}reimgui::renderer::end_window();`);
+        case 'Window': {
+            lines.push(`${indent}imx::renderer::end_window();`);
+            const hadOpen = windowOpenStack.pop() ?? false;
+            if (hadOpen) {
+                lines.push(`${indent}}`);
+            }
             break;
+        }
         case 'Row':
-            lines.push(`${indent}reimgui::renderer::end_row();`);
+            lines.push(`${indent}imx::renderer::end_row();`);
             break;
         case 'Column':
-            lines.push(`${indent}reimgui::renderer::end_column();`);
+            lines.push(`${indent}imx::renderer::end_column();`);
             break;
         case 'View':
-            lines.push(`${indent}reimgui::renderer::end_view();`);
+            lines.push(`${indent}imx::renderer::end_view();`);
             break;
         case 'DockSpace':
-            lines.push(`${indent}reimgui::renderer::end_dockspace();`);
+            lines.push(`${indent}imx::renderer::end_dockspace();`);
             break;
         case 'MenuBar':
-            lines.push(`${indent}reimgui::renderer::end_menu_bar();`);
+            lines.push(`${indent}imx::renderer::end_menu_bar();`);
             lines.push(`${indent}}`);
             break;
         case 'Menu':
-            lines.push(`${indent}reimgui::renderer::end_menu();`);
+            lines.push(`${indent}imx::renderer::end_menu();`);
             lines.push(`${indent}}`);
             break;
         case 'Table':
-            lines.push(`${indent}reimgui::renderer::end_table();`);
+            lines.push(`${indent}imx::renderer::end_table();`);
             lines.push(`${indent}}`);
             break;
         case 'TableRow':
-            lines.push(`${indent}reimgui::renderer::end_table_row();`);
+            lines.push(`${indent}imx::renderer::end_table_row();`);
             break;
         case 'TabBar':
-            lines.push(`${indent}reimgui::renderer::end_tab_bar();`);
+            lines.push(`${indent}imx::renderer::end_tab_bar();`);
             lines.push(`${indent}}`);
             break;
         case 'TabItem':
-            lines.push(`${indent}reimgui::renderer::end_tab_item();`);
+            lines.push(`${indent}imx::renderer::end_tab_item();`);
             lines.push(`${indent}}`);
             break;
         case 'TreeNode':
-            lines.push(`${indent}reimgui::renderer::end_tree_node();`);
+            lines.push(`${indent}imx::renderer::end_tree_node();`);
             lines.push(`${indent}}`);
             break;
         case 'CollapsingHeader':
-            lines.push(`${indent}reimgui::renderer::end_collapsing_header();`);
+            lines.push(`${indent}imx::renderer::end_collapsing_header();`);
+            lines.push(`${indent}}`);
+            break;
+        case 'Theme':
+            lines.push(`${indent}imx::renderer::end_theme();`);
+            break;
+        case 'Modal': {
+            lines.push(`${indent}imx::renderer::end_modal();`);
+            lines.push(`${indent}}`); // close the if (begin_modal) block
+            const hadOpen = windowOpenStack.pop() ?? false;
+            const onCloseBody = modalOnCloseStack.pop() ?? null;
+            if (hadOpen && onCloseBody) {
+                // Check modal_closed OUTSIDE the if(begin_modal) block,
+                // because BeginPopupModal returns false when X is clicked
+                // (it calls EndPopup internally).
+                lines.push(`${indent}if (modal_closed) { ${onCloseBody} }`);
+                lines.push(`${indent}}`); // close the { bool modal_closed scope
+            }
+            else if (hadOpen) {
+                lines.push(`${indent}}`); // close scope without onClose
+            }
+            break;
+        }
+        case 'StyleColor':
+            lines.push(`${indent}imx::renderer::end_style_color();`);
+            break;
+        case 'StyleVar':
+            lines.push(`${indent}imx::renderer::end_style_var();`);
+            break;
+        case 'Group':
+            lines.push(`${indent}ImGui::EndGroup();`);
+            break;
+        case 'ID':
+            lines.push(`${indent}ImGui::PopID();`);
+            break;
+        case 'DragDropSource': {
+            const props = dragDropSourceStack.pop() ?? {};
+            const typeStr = asCharPtr(props['type'] ?? '""');
+            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});`);
+            lines.push(`${indent}    ImGui::SetDragDropPayload(${typeStr}, &_dd_payload, sizeof(_dd_payload));`);
+            lines.push(`${indent}    ImGui::Text("Dragging...");`);
+            lines.push(`${indent}    ImGui::EndDragDropSource();`);
             lines.push(`${indent}}`);
             break;
+        }
+        case 'Disabled':
+            lines.push(`${indent}ImGui::EndDisabled();`);
+            break;
+        case 'Child':
+            lines.push(`${indent}ImGui::EndChild();`);
+            break;
+        case 'Canvas':
+            lines.push(`${indent}imx::renderer::end_canvas();`);
+            break;
+        case 'DragDropTarget': {
+            const props = dragDropTargetStack.pop() ?? {};
+            const typeStr = asCharPtr(props['type'] ?? '""');
+            const onDrop = props['onDrop'] ?? '';
+            lines.push(`${indent}ImGui::EndGroup();`);
+            lines.push(`${indent}if (ImGui::BeginDragDropTarget()) {`);
+            lines.push(`${indent}    if (const ImGuiPayload* _dd_p = ImGui::AcceptDragDropPayload(${typeStr})) {`);
+            // Parse the structured callback: "cppType|paramName|bodyCode"
+            const parts = onDrop.split('|');
+            if (parts.length >= 3) {
+                const cppType = parts[0];
+                const paramName = parts[1];
+                const bodyCode = parts.slice(2).join('|'); // rejoin in case body contained |
+                lines.push(`${indent}        ${cppType} ${paramName} = *(const ${cppType}*)_dd_p->Data;`);
+                lines.push(`${indent}        ${bodyCode}`);
+            }
+            lines.push(`${indent}    }`);
+            lines.push(`${indent}    ImGui::EndDragDropTarget();`);
+            lines.push(`${indent}}`);
+            break;
+        }
+        case 'DockLayout':
+        case 'DockSplit':
+        case 'DockPanel':
+            break;
     }
 }
 function emitText(node, lines, indent) {
+    emitLocComment(node.loc, 'Text', lines, indent);
     if (node.args.length === 0) {
-        lines.push(`${indent}reimgui::renderer::text(${JSON.stringify(node.format)});`);
+        lines.push(`${indent}imx::renderer::text(${JSON.stringify(node.format)});`);
     }
     else {
         const argsStr = node.args.join(', ');
-        lines.push(`${indent}reimgui::renderer::text(${JSON.stringify(node.format)}, ${argsStr});`);
+        lines.push(`${indent}imx::renderer::text(${JSON.stringify(node.format)}, ${argsStr});`);
     }
 }
 function emitButton(node, lines, indent, depth) {
+    emitLocComment(node.loc, 'Button', lines, indent);
     const title = asCharPtr(node.title);
     if (node.action.length === 0) {
-        lines.push(`${indent}reimgui::renderer::button(${title});`);
+        lines.push(`${indent}imx::renderer::button(${title});`);
     }
     else {
-        lines.push(`${indent}if (reimgui::renderer::button(${title})) {`);
+        lines.push(`${indent}if (imx::renderer::button(${title})) {`);
         for (const stmt of node.action) {
             lines.push(`${indent}${INDENT}${stmt}`);
         }
@@ -410,22 +930,23 @@ function emitButton(node, lines, indent, depth) {
     }
 }
 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}reimgui::renderer::menu_item(${label}, ${shortcut});`);
+            lines.push(`${indent}imx::renderer::menu_item(${label}, ${shortcut});`);
         }
         else {
-            lines.push(`${indent}reimgui::renderer::menu_item(${label});`);
+            lines.push(`${indent}imx::renderer::menu_item(${label});`);
         }
     }
     else {
         if (shortcut) {
-            lines.push(`${indent}if (reimgui::renderer::menu_item(${label}, ${shortcut})) {`);
+            lines.push(`${indent}if (imx::renderer::menu_item(${label}, ${shortcut})) {`);
         }
         else {
-            lines.push(`${indent}if (reimgui::renderer::menu_item(${label})) {`);
+            lines.push(`${indent}if (imx::renderer::menu_item(${label})) {`);
         }
         for (const stmt of node.action) {
             lines.push(`${indent}    ${stmt}`);
@@ -434,29 +955,31 @@ function emitMenuItem(node, lines, indent, depth) {
     }
 }
 function emitTextInput(node, lines, indent) {
+    emitLocComment(node.loc, 'TextInput', 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 (reimgui::renderer::text_input(${label}, buf)) {`);
+        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}}`);
         lines.push(`${indent}}`);
     }
     else {
         lines.push(`${indent}auto& buf_${node.bufferIndex} = ctx.get_buffer(${node.bufferIndex});`);
-        lines.push(`${indent}reimgui::renderer::text_input(${label}, buf_${node.bufferIndex});`);
+        lines.push(`${indent}imx::renderer::text_input(${label}, buf_${node.bufferIndex});`);
     }
 }
 function emitCheckbox(node, lines, indent) {
+    emitLocComment(node.loc, 'Checkbox', lines, indent);
     const label = asCharPtr(node.label && node.label !== '""' ? node.label : `"##checkbox_${checkboxCounter}"`);
     checkboxCounter++;
     if (node.stateVar) {
         // State-bound case
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}bool val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (reimgui::renderer::checkbox(${label}, &val)) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::checkbox(${label}, &val)) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
@@ -465,7 +988,7 @@ function emitCheckbox(node, lines, indent) {
         // Props-bound / expression-bound case
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}bool val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (reimgui::renderer::checkbox(${label}, &val)) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::checkbox(${label}, &val)) {`);
         if (node.onChangeExpr) {
             lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
         }
@@ -473,10 +996,13 @@ function emitCheckbox(node, lines, indent) {
         lines.push(`${indent}}`);
     }
     else {
-        lines.push(`${indent}reimgui::renderer::checkbox(${label}, nullptr);`);
+        lines.push(`${indent}imx::renderer::checkbox(${label}, nullptr);`);
     }
 }
 function emitConditional(node, lines, indent, depth) {
+    if (node.loc) {
+        lines.push(`${indent}// ${node.loc.file}:${node.loc.line} conditional`);
+    }
     lines.push(`${indent}if (${node.condition}) {`);
     emitNodes(node.body, lines, depth + 1);
     if (node.elseBody && node.elseBody.length > 0) {
@@ -486,6 +1012,9 @@ function emitConditional(node, lines, indent, depth) {
     lines.push(`${indent}}`);
 }
 function emitListMap(node, lines, indent, depth) {
+    if (node.loc) {
+        lines.push(`${indent}// ${node.loc.file}:${node.loc.line} .map()`);
+    }
     lines.push(`${indent}for (size_t i = 0; i < ${node.array}.size(); i++) {`);
     lines.push(`${indent}${INDENT}auto& ${node.itemVar} = ${node.array}[i];`);
     lines.push(`${indent}${INDENT}ctx.begin_instance("${node.componentName}", i, ${node.stateCount}, ${node.bufferCount});`);
@@ -494,6 +1023,7 @@ function emitListMap(node, lines, indent, depth) {
     lines.push(`${indent}}`);
 }
 function emitCustomComponent(node, lines, indent) {
+    emitLocComment(node.loc, node.name, lines, indent);
     const instanceIndex = customComponentCounter++;
     const propsEntries = Object.entries(node.props);
     lines.push(`${indent}ctx.begin_instance("${node.name}", ${instanceIndex}, ${node.stateCount}, ${node.bufferCount});`);
@@ -512,6 +1042,23 @@ function emitCustomComponent(node, lines, indent) {
     }
     lines.push(`${indent}ctx.end_instance();`);
 }
+function emitNativeWidget(node, lines, indent) {
+    emitLocComment(node.loc, node.name, lines, indent);
+    const idx = nativeWidgetCounter++;
+    const label = `${node.name}##nw_${idx}`;
+    lines.push(`${indent}{`);
+    lines.push(`${indent}${INDENT}imx::WidgetArgs _wa("${label}");`);
+    // Value props
+    for (const [k, v] of Object.entries(node.props)) {
+        lines.push(`${indent}${INDENT}_wa.set("${k}", ${v});`);
+    }
+    // Callback props — already lowered to [&](std::any _v) { ... } lambdas
+    for (const [k, v] of Object.entries(node.callbackProps)) {
+        lines.push(`${indent}${INDENT}_wa.set_callback("${k}", ${v});`);
+    }
+    lines.push(`${indent}${INDENT}imx::call_widget("${node.name}", _wa);`);
+    lines.push(`${indent}}`);
+}
 function ensureFloatLiteral(val) {
     // If already has 'f' suffix or '.', leave as-is
     if (val.endsWith('f') || val.endsWith('F') || val.includes('.'))
@@ -520,12 +1067,13 @@ function ensureFloatLiteral(val) {
     return `${val}.0f`;
 }
 function emitSliderFloat(node, lines, indent) {
+    emitLocComment(node.loc, 'SliderFloat', lines, indent);
     const min = ensureFloatLiteral(node.min);
     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 (reimgui::renderer::slider_float(${node.label}, &val, ${min}, ${max})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::slider_float(${node.label}, &val, ${min}, ${max})) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
@@ -533,7 +1081,7 @@ function emitSliderFloat(node, lines, indent) {
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}float val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (reimgui::renderer::slider_float(${node.label}, &val, ${min}, ${max})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::slider_float(${node.label}, &val, ${min}, ${max})) {`);
         if (node.onChangeExpr) {
             lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
         }
@@ -542,10 +1090,11 @@ function emitSliderFloat(node, lines, indent) {
     }
 }
 function emitSliderInt(node, lines, indent) {
+    emitLocComment(node.loc, 'SliderInt', lines, indent);
     if (node.stateVar) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}int val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (reimgui::renderer::slider_int(${node.label}, &val, ${node.min}, ${node.max})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::slider_int(${node.label}, &val, ${node.min}, ${node.max})) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
@@ -553,7 +1102,7 @@ function emitSliderInt(node, lines, indent) {
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}int val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (reimgui::renderer::slider_int(${node.label}, &val, ${node.min}, ${node.max})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::slider_int(${node.label}, &val, ${node.min}, ${node.max})) {`);
         if (node.onChangeExpr) {
             lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
         }
@@ -562,11 +1111,12 @@ function emitSliderInt(node, lines, indent) {
     }
 }
 function emitDragFloat(node, lines, indent) {
+    emitLocComment(node.loc, 'DragFloat', 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 (reimgui::renderer::drag_float(${node.label}, &val, ${speed})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::drag_float(${node.label}, &val, ${speed})) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
@@ -574,7 +1124,7 @@ function emitDragFloat(node, lines, indent) {
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}float val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (reimgui::renderer::drag_float(${node.label}, &val, ${speed})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::drag_float(${node.label}, &val, ${speed})) {`);
         if (node.onChangeExpr) {
             lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
         }
@@ -583,11 +1133,12 @@ function emitDragFloat(node, lines, indent) {
     }
 }
 function emitDragInt(node, lines, indent) {
+    emitLocComment(node.loc, 'DragInt', 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 (reimgui::renderer::drag_int(${node.label}, &val, ${speed})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::drag_int(${node.label}, &val, ${speed})) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
@@ -595,7 +1146,7 @@ function emitDragInt(node, lines, indent) {
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}int val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (reimgui::renderer::drag_int(${node.label}, &val, ${speed})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::drag_int(${node.label}, &val, ${speed})) {`);
         if (node.onChangeExpr) {
             lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
         }
@@ -604,6 +1155,7 @@ function emitDragInt(node, lines, indent) {
     }
 }
 function emitCombo(node, lines, indent) {
+    emitLocComment(node.loc, 'Combo', lines, indent);
     const itemsList = node.items.split(',').map(s => s.trim()).filter(s => s.length > 0);
     const count = itemsList.length;
     const varName = `combo_items_${comboCounter++}`;
@@ -611,7 +1163,7 @@ function emitCombo(node, lines, indent) {
         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 (reimgui::renderer::combo(${node.label}, &val, ${varName}, ${count})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::combo(${node.label}, &val, ${varName}, ${count})) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
@@ -620,7 +1172,7 @@ function emitCombo(node, lines, indent) {
         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 (reimgui::renderer::combo(${node.label}, &val, ${varName}, ${count})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::combo(${node.label}, &val, ${varName}, ${count})) {`);
         if (node.onChangeExpr) {
             lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
         }
@@ -629,10 +1181,11 @@ function emitCombo(node, lines, indent) {
     }
 }
 function emitInputInt(node, lines, indent) {
+    emitLocComment(node.loc, 'InputInt', lines, indent);
     if (node.stateVar) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}int val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (reimgui::renderer::input_int(${node.label}, &val)) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::input_int(${node.label}, &val)) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
@@ -640,7 +1193,7 @@ function emitInputInt(node, lines, indent) {
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}int val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (reimgui::renderer::input_int(${node.label}, &val)) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::input_int(${node.label}, &val)) {`);
         if (node.onChangeExpr) {
             lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
         }
@@ -649,10 +1202,11 @@ function emitInputInt(node, lines, indent) {
     }
 }
 function emitInputFloat(node, lines, indent) {
+    emitLocComment(node.loc, 'InputFloat', lines, indent);
     if (node.stateVar) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}float val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (reimgui::renderer::input_float(${node.label}, &val)) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::input_float(${node.label}, &val)) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
@@ -660,7 +1214,7 @@ function emitInputFloat(node, lines, indent) {
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}float val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (reimgui::renderer::input_float(${node.label}, &val)) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::input_float(${node.label}, &val)) {`);
         if (node.onChangeExpr) {
             lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
         }
@@ -669,16 +1223,18 @@ function emitInputFloat(node, lines, indent) {
     }
 }
 function emitColorEdit(node, lines, indent) {
+    emitLocComment(node.loc, 'ColorEdit', lines, indent);
     if (node.stateVar) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}auto val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (reimgui::renderer::color_edit(${node.label}, val.data())) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::color_edit(${node.label}, val.data())) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
     }
 }
 function emitListBox(node, lines, indent) {
+    emitLocComment(node.loc, 'ListBox', lines, indent);
     const itemsList = node.items.split(',').map(s => s.trim()).filter(s => s.length > 0);
     const count = itemsList.length;
     const varName = `listbox_items_${listBoxCounter++}`;
@@ -686,7 +1242,7 @@ function emitListBox(node, lines, indent) {
         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 (reimgui::renderer::list_box(${node.label}, &val, ${varName}, ${count})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::list_box(${node.label}, &val, ${varName}, ${count})) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
@@ -695,7 +1251,7 @@ function emitListBox(node, lines, indent) {
         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 (reimgui::renderer::list_box(${node.label}, &val, ${varName}, ${count})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::list_box(${node.label}, &val, ${varName}, ${count})) {`);
         if (node.onChangeExpr) {
             lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
         }
@@ -704,13 +1260,187 @@ function emitListBox(node, lines, indent) {
     }
 }
 function emitProgressBar(node, lines, indent) {
+    emitLocComment(node.loc, 'ProgressBar', lines, indent);
     if (node.overlay) {
-        lines.push(`${indent}reimgui::renderer::progress_bar(${node.value}, ${node.overlay});`);
+        lines.push(`${indent}imx::renderer::progress_bar(${node.value}, ${node.overlay});`);
     }
     else {
-        lines.push(`${indent}reimgui::renderer::progress_bar(${node.value});`);
+        lines.push(`${indent}imx::renderer::progress_bar(${node.value});`);
     }
 }
 function emitTooltip(node, lines, indent) {
-    lines.push(`${indent}reimgui::renderer::tooltip(${node.text});`);
+    emitLocComment(node.loc, 'Tooltip', lines, indent);
+    lines.push(`${indent}imx::renderer::tooltip(${node.text});`);
+}
+function emitBulletText(node, lines, indent) {
+    emitLocComment(node.loc, 'BulletText', lines, indent);
+    if (node.args.length === 0) {
+        lines.push(`${indent}imx::renderer::bullet_text("${node.format}");`);
+    }
+    else {
+        const fmtArgs = node.args.map(a => {
+            if (a.startsWith('"'))
+                return a;
+            return `std::to_string(${a}).c_str()`;
+        }).join(', ');
+        lines.push(`${indent}imx::renderer::bullet_text("${node.format}", ${fmtArgs});`);
+    }
+}
+function emitLabelText(node, lines, indent) {
+    emitLocComment(node.loc, 'LabelText', lines, indent);
+    lines.push(`${indent}imx::renderer::label_text(${asCharPtr(node.label)}, ${asCharPtr(node.value)});`);
+}
+function emitSelectable(node, lines, indent) {
+    emitLocComment(node.loc, 'Selectable', lines, indent);
+    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}`);
+        }
+        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}}`);
+        lines.push(`${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})) {`);
+        if (node.onChangeExpr) {
+            lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
+        }
+        lines.push(`${indent}${INDENT}}`);
+        lines.push(`${indent}}`);
+    }
+}
+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);
+    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}${INDENT}${node.stateVar}.set(buf.value());`);
+    }
+    lines.push(`${innerIndent}}`);
+    lines.push(`${indent}}`);
+}
+function emitColorPicker(node, lines, indent) {
+    emitLocComment(node.loc, 'ColorPicker', lines, indent);
+    if (node.stateVar) {
+        lines.push(`${indent}{`);
+        lines.push(`${indent}${INDENT}auto val = ${node.stateVar}.get();`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::color_picker(${node.label}, val.data())) {`);
+        lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
+        lines.push(`${indent}${INDENT}}`);
+        lines.push(`${indent}}`);
+    }
+}
+function emitPlotLines(node, lines, indent) {
+    emitLocComment(node.loc, 'PlotLines', lines, indent);
+    const idx = plotCounter++;
+    const varName = `_plot_${idx}`;
+    const values = node.values.split(',').map(v => ensureFloatLiteral(v.trim()));
+    const count = values.length;
+    lines.push(`${indent}{`);
+    const innerIndent = indent + INDENT;
+    const styleVar = buildStyleVar(node.style, innerIndent, lines);
+    lines.push(`${innerIndent}float ${varName}[] = {${values.join(', ')}};`);
+    const overlay = node.overlay ? `, ${node.overlay}` : ', nullptr';
+    const styleArg = styleVar ? `, ${styleVar}` : '';
+    lines.push(`${innerIndent}imx::renderer::plot_lines(${node.label}, ${varName}, ${count}${overlay}${styleArg});`);
+    lines.push(`${indent}}`);
+}
+function emitPlotHistogram(node, lines, indent) {
+    emitLocComment(node.loc, 'PlotHistogram', lines, indent);
+    const idx = plotCounter++;
+    const varName = `_plot_${idx}`;
+    const values = node.values.split(',').map(v => ensureFloatLiteral(v.trim()));
+    const count = values.length;
+    lines.push(`${indent}{`);
+    const innerIndent = indent + INDENT;
+    const styleVar = buildStyleVar(node.style, innerIndent, lines);
+    lines.push(`${innerIndent}float ${varName}[] = {${values.join(', ')}};`);
+    const overlay = node.overlay ? `, ${node.overlay}` : ', nullptr';
+    const styleArg = styleVar ? `, ${styleVar}` : '';
+    lines.push(`${innerIndent}imx::renderer::plot_histogram(${node.label}, ${varName}, ${count}${overlay}${styleArg});`);
+    lines.push(`${indent}}`);
+}
+function emitImage(node, lines, indent) {
+    emitLocComment(node.loc, 'Image', lines, indent);
+    const width = node.width ? ensureFloatLiteral(node.width) : '0';
+    const height = node.height ? ensureFloatLiteral(node.height) : '0';
+    if (node.embed && node.embedKey) {
+        // Embedded mode: reference the data from the .embed.h header
+        lines.push(`${indent}imx::renderer::image_embedded("${node.embedKey}", ${node.embedKey}_data, ${node.embedKey}_size, ${width}, ${height});`);
+    }
+    else {
+        // File mode: pass the path string
+        lines.push(`${indent}imx::renderer::image(${node.src}, ${width}, ${height});`);
+    }
+}
+function emitDrawLine(node, lines, indent) {
+    const p1Parts = node.p1.split(',').map((s) => emitFloat(s.trim()));
+    const p2Parts = node.p2.split(',').map((s) => emitFloat(s.trim()));
+    const color = emitImVec4(node.color);
+    const thickness = emitFloat(node.thickness);
+    lines.push(`${indent}imx::renderer::draw_line(${p1Parts.join(', ')}, ${p2Parts.join(', ')}, ${color}, ${thickness});`);
+}
+function emitDrawRect(node, lines, indent) {
+    const minParts = node.min.split(',').map((s) => emitFloat(s.trim()));
+    const maxParts = node.max.split(',').map((s) => emitFloat(s.trim()));
+    const color = emitImVec4(node.color);
+    const filled = node.filled;
+    const thickness = emitFloat(node.thickness);
+    const rounding = emitFloat(node.rounding);
+    lines.push(`${indent}imx::renderer::draw_rect(${minParts.join(', ')}, ${maxParts.join(', ')}, ${color}, ${filled}, ${thickness}, ${rounding});`);
+}
+function emitDrawCircle(node, lines, indent) {
+    const centerParts = node.center.split(',').map((s) => emitFloat(s.trim()));
+    const radius = emitFloat(node.radius);
+    const color = emitImVec4(node.color);
+    const filled = node.filled;
+    const thickness = emitFloat(node.thickness);
+    lines.push(`${indent}imx::renderer::draw_circle(${centerParts.join(', ')}, ${radius}, ${color}, ${filled}, ${thickness});`);
+}
+function emitDrawText(node, lines, indent) {
+    const posParts = node.pos.split(',').map((s) => emitFloat(s.trim()));
+    const color = emitImVec4(node.color);
+    const text = asCharPtr(node.text);
+    lines.push(`${indent}imx::renderer::draw_text(${posParts.join(', ')}, ${color}, ${text});`);
+}
+function collectEmbedKeys(nodes) {
+    const keys = [];
+    for (const node of nodes) {
+        if (node.kind === 'image' && node.embed && node.embedKey) {
+            keys.push(node.embedKey);
+        }
+        else if (node.kind === 'conditional') {
+            keys.push(...collectEmbedKeys(node.body));
+            if (node.elseBody)
+                keys.push(...collectEmbedKeys(node.elseBody));
+        }
+        else if (node.kind === 'list_map') {
+            keys.push(...collectEmbedKeys(node.body));
+        }
+    }
+    return keys;
 }