@fluixi/compiler 1.0.0-alpha.73 → 1.0.0-alpha.74

package/dist/frontend/babel/plugin.js

@@ -1,85 +1,44 @@
 /**
- * @fileoverview Comprehensive Babel Plugin for Reactive JSX Transformation
+ * @fileoverview Babel front-end for the Fluixi compiler.
  * @module @fluixi/babel-plugin-jsx
  *
- * This plugin transforms JSX into optimized reactive DOM operations with:
- * - Fine-grained reactivity detection
- * - Signal/store wrapping
- * - Event delegation
- * - Static hoisting
- * - Lit-HTML integration
- * - Control flow optimization
+ * This is a host adapter, not the compiler. It parses with babel and, for each
+ * JSX element/fragment and each `` html`...` `` template, hands the node to the
+ * shared pipeline — build IR, run the imperative backend — then splices the
+ * emitted code back into the program. Everything that decides *what* the output
+ * means (directives, control flow, component resolution, load strategies,
+ * reactivity, templates) lives in ../../{ir,resolve,optimize,codegen}, which
+ * import no babel at all.
+ *
+ * What stays here is genuinely host work: dispatching the visitors, collecting
+ * the runtime symbols the backend reported so the imports can be injected, and
+ * hoisting static templates to module scope.
  */
 import { declare } from '@babel/helper-plugin-utils';
 import { createComponentResolver, } from '../../resolve/component-resolver.js';
 import { resolveComponentSources } from '../../resolve/resolve-ir.js';
 import { collapseStrategies } from '../../optimize/collapse-strategies.js';
-import { EAGER, isDeferred, isLoadDirective, parseLoadDirective, LoadDirectiveError, } from '../../resolve/load-directive.js';
-import { DOM_CONTROL_FLOW, CORE_CONTROL_FLOW, ROUTER_COMPONENTS as ROUTER_COMPONENT_NAMES, } from '../../resolve/builtins.js';
-import { types as t, template, } from '@babel/core';
+import { isDeferred } from '../../resolve/load-directive.js';
+import { CORE_CONTROL_FLOW, ROUTER_COMPONENTS as ROUTER_COMPONENT_NAMES, } from '../../resolve/builtins.js';
+import { types as t, template } from '@babel/core';
 import { buildIR } from './build-ir.js';
 import { buildIRFromLit } from './build-ir-lit.js';
 import { imperativeBackend } from '../../codegen/backends/imperative.js';
 // ============================================================================
 // Constants
 // ============================================================================
-// The names come from `resolve/builtins.ts`, which publishes them for the TS plugin,
-// the language server and codemods — tools that need to know where `<Show>` comes from
-// but must not re-derive it. What stays here is the part that is genuinely codegen:
-// which names get special lowering, reactive-getter props, and memo exemption.
-const CONTROL_FLOW_COMPONENTS = new Set([...DOM_CONTROL_FLOW, ...CORE_CONTROL_FLOW]);
 // Control-flow components that live in @fluixi/core, NOT @fluixi/dom — they must
 // be auto-imported from core (dom doesn't export them).
 const CORE_ONLY_CONTROL_FLOW = new Set(CORE_CONTROL_FLOW);
 // Router components auto-imported (from routerModule) the same way control flow is:
 // use `<Router>`/`<Outlet>`/… in a template and the import is injected if absent.
 const ROUTER_COMPONENTS = new Set(ROUTER_COMPONENT_NAMES);
-// Control-flow components read a single reactive *value* prop inside their own tracking
-// scope. Emit that prop as a getter (like `children`) so reading it re-runs the caller's
-// expression — otherwise `each={items()}` / `when={cond()}` snapshot once and never update.
-// The runtime routes these through `resolveReactiveProp`, which also unwraps the accessor
-// form (`each={items}`), so all three shapes work with no compiler-side ambiguity.
-//
-// Excluded on purpose: `Dynamic.component` (a component IS a function, so the value can't be
-// told apart from an accessor — its idiomatic `component={signal}` form already reacts) and
-// `Portal.mount` (read once at mount, not a reactive value).
-const CONTROL_FLOW_VALUE_PROPS = {
-    Show: 'when',
-    For: 'each',
-    Index: 'each',
-    Match: 'when',
-};
-const REACTIVE_PATTERNS = {
-    signalCall: /\w+\(\)$/,
-    storeAccess: /\w+\.\w+/,
-    arrowFunction: /^\(\)\s*=>/,
-    functionCall: /^function\s*\(/,
-};
-const EVENT_PROPS = /^on[A-Z]/;
-const DELEGATABLE_EVENTS = [
-    'click',
-    'dblclick',
-    'input',
-    'change',
-    'submit',
-    'focus',
-    'blur',
-    'keydown',
-    'keyup',
-    'keypress',
-    'mousedown',
-    'mouseup',
-    'mouseover',
-    'mouseout',
-    'mouseenter',
-    'mouseleave',
-];
 // ============================================================================
 // Main Plugin
 // ============================================================================
 export default declare((api, options = {}) => {
     api.assertVersion(7);
-    const { runtime = 'automatic', importSource = '@fluixi/jsx', pragma = 'jsx', pragmaFrag = 'Fragment', development = false, detectReactivity = true, useLitHTML = true, hoistStatics = true, delegateEvents = true, delegatedEvents = DELEGATABLE_EVENTS, optimizeControlFlow = true, sourceMaps = true, signalModule = '@fluixi/dom', controlFlowModule = '@fluixi/dom', routerModule = '@fluixi/core/router-next', reactiveModule = '@fluixi/reactive/signal', autoShowTransform = false, backend = 'imperative', codegen = 'ir', templateClone = true, partialTemplates = true, 
+    const { delegateEvents = true, signalModule = '@fluixi/dom', controlFlowModule = '@fluixi/dom', routerModule = '@fluixi/core/router-next', reactiveModule = '@fluixi/reactive/signal', templateClone = true, partialTemplates = true, 
     // `both` by default: JSX and html`` are compiled out of the box, so
     // `fluixi()` needs no `format` option. Injected imports are deduped, so a
     // file mixing the two styles won't redeclare a binding.
@@ -89,8 +48,6 @@ export default declare((api, options = {}) => {
     const componentResolver = createComponentResolver(resolveRules);
     const compileLit = format === 'lit' || format === 'both';
     const pluginState = {
-        backend,
-        codegen,
         irImports: new Set(),
         libModule: '@fluixi/core',
         controlFlowModule,
@@ -98,9 +55,7 @@ export default declare((api, options = {}) => {
         templateClone,
         partialTemplates,
         hasJSX: false,
-        hasReactivity: false,
         hasLitHTML: false,
-        needsSignalImport: false,
         needsControlFlowImport: false,
         needsCreateMemo: false,
         controlFlowComponents: new Set(),
@@ -108,7 +63,6 @@ export default declare((api, options = {}) => {
         deferredComponents: new Map(),
         componentResolver,
         delegatedEvents: new Set(),
-        staticElements: new Map(),
         staticTemplates: new Map(),
         staticCounter: 0,
     };
@@ -138,10 +92,8 @@ export default declare((api, options = {}) => {
                     // Reset state for new file
                     Object.assign(state, {
                         hasJSX: false,
-                        hasReactivity: false,
                         hasLitHTML: false,
                         hasLitIR: false,
-                        needsSignalImport: false,
                         needsControlFlowImport: false,
                         needsCreateMemo: false,
                         controlFlowComponents: new Set(),
@@ -149,17 +101,13 @@ export default declare((api, options = {}) => {
                         deferredComponents: new Map(),
                         componentResolver,
                         delegatedEvents: new Set(),
-                        staticElements: new Map(),
                         staticTemplates: new Map(),
-                        autoShow: autoShowTransform,
                         staticCounter: 0,
                         libModule: '@fluixi/core',
                         controlFlowModule,
                         routerModule,
                         templateClone,
                         partialTemplates,
-                        backend,
-                        codegen,
                         irImports: new Set(),
                         needsCreateNativeElement: false,
                         needsInsert: false,
@@ -170,19 +118,10 @@ export default declare((api, options = {}) => {
                 },
                 exit(path, state) {
                     const imports = [];
-                    if (!state.hasJSX) {
-                        // Add signal directive import if needed
-                        if (state.needsSignalImport) {
-                            imports.push(t.importDeclaration([
-                                t.importSpecifier(t.identifier('signal'), t.identifier('signal')),
-                            ], t.stringLiteral(signalModule)));
-                        }
-                    }
                     if (state.hasJSX || state.hasLitIR) {
                         if (state.irImports.size > 0) {
-                            // IR pipeline (JSX codegen:'ir' and/or lit templates): import exactly
-                            // the symbols emit() reported, splitting control-flow components to
-                            // the control-flow module.
+                            // Import exactly the symbols emit() reported, splitting control-flow
+                            // components to the control-flow module.
                             const CF = new Set([
                                 'Show', 'For', 'Index', 'Switch', 'Match',
                                 'Dynamic', 'ErrorBoundary', 'Portal', 'Suspense',
@@ -208,48 +147,10 @@ export default declare((api, options = {}) => {
                                 imports.push(t.importDeclaration(cf.map(spec), t.stringLiteral(controlFlowModule)));
                             }
                         }
-                        if (state.hasJSX && backend === 'imperative' && codegen !== 'ir') {
-                            // Compiled imperative output: import only the runtime primitives
-                            // actually emitted, straight from the dom runtime module.
-                            const want = [
-                                [!!state.needsCreateNativeElement, 'createNativeElement'],
-                                [!!state.needsSpread, 'spread'],
-                                [!!state.needsInsert, 'insert'],
-                                [!!state.needsCreateComponent, 'createComponent'],
-                                [!!state.needsMergeProps, 'mergeProps'],
-                            ];
-                            const specifiers = want
-                                .filter(([need, name]) => need && !path.scope.hasBinding(name))
-                                .map(([, name]) => t.importSpecifier(t.identifier(name), t.identifier(name)));
-                            if (specifiers.length > 0) {
-                                imports.push(t.importDeclaration(specifiers, t.stringLiteral(signalModule)));
-                            }
-                        }
-                        else if (state.hasJSX && runtime === 'automatic' && backend !== 'imperative') {
-                            // Not under the imperative backend: `codegen: 'ir'` lands here because the
-                            // branch above excludes it, and emitted an unused jsx/jsxs/Fragment import.
-                            // The IR path produces runtime calls, never JSX factory calls.
-                            // Add JSX runtime imports
-                            const specifiers = [
-                                t.importSpecifier(t.identifier('jsx'), t.identifier('jsx')),
-                                t.importSpecifier(t.identifier('jsxs'), t.identifier('jsxs')),
-                                t.importSpecifier(t.identifier('Fragment'), t.identifier('Fragment')),
-                            ];
-                            if (development) {
-                                specifiers.push(t.importSpecifier(t.identifier('jsxDEV'), t.identifier('jsxDEV')));
-                            }
-                            // Add mergeProps import if spreads are used
-                            if (state.needsMergeProps) {
-                                specifiers.push(t.importSpecifier(t.identifier('mergeProps'), t.identifier('mergeProps')));
-                            }
-                            imports.push(t.importDeclaration(specifiers, t.stringLiteral(importSource)));
-                        }
                         // createMemo (wraps conditionals/components) is a reactive primitive,
                         // so it comes from the reactive module, not dom.
                         if (state.needsCreateMemo && !path.scope.hasBinding('createMemo')) {
-                            imports.push(t.importDeclaration([t.importSpecifier(t.identifier('createMemo'), t.identifier('createMemo'))], t.stringLiteral(backend === 'imperative'
-                                ? reactiveModule
-                                : state.libModule ?? '@fluixi/core')));
+                            imports.push(t.importDeclaration([t.importSpecifier(t.identifier('createMemo'), t.identifier('createMemo'))], t.stringLiteral(reactiveModule)));
                         }
                         // Add control flow imports for auto-transformed components (Show, etc.)
                         // Only add components that aren't already bound in the file scope.
@@ -320,23 +221,13 @@ export default declare((api, options = {}) => {
                         if (delegateEvents && state.delegatedEvents.size > 0) {
                             imports.push(t.importDeclaration([
                                 t.importSpecifier(t.identifier('delegateEvents'), t.identifier('delegateEvents')),
-                            ], t.stringLiteral(backend === 'imperative' ? signalModule : '@fluixi/jsx')));
+                            ], t.stringLiteral(signalModule)));
                             // Add delegateEvents call at top of program
                             const eventsArray = t.arrayExpression(Array.from(state.delegatedEvents).map((event) => t.stringLiteral(event)));
                             const delegateCall = t.expressionStatement(t.callExpression(t.identifier('delegateEvents'), [eventsArray]));
                             path.node.body.unshift(delegateCall);
                         }
-                        // Add hoisted static elements
-                        if (hoistStatics && state.staticElements.size > 0) {
-                            const hoisted = [];
-                            state.staticElements.forEach((value, key) => {
-                                hoisted.push(t.variableDeclaration('const', [
-                                    t.variableDeclarator(t.identifier(key), value),
-                                ]));
-                            });
-                            path.node.body.unshift(...hoisted);
-                        }
-                        // After the hoisted statics but before imports are unshifted, so the
+                        // Before imports are unshifted, so the
                         // final order is: imports, deferred bindings, everything else.
                         if (deferredDecls.length > 0) {
                             path.node.body.unshift(...deferredDecls);
@@ -368,109 +259,24 @@ export default declare((api, options = {}) => {
                     }
                 },
             },
+            // Both JSX forms take the one path: build IR, run the imperative backend,
+            // splice the emitted code back in. It handles the whole subtree, so nothing
+            // below this node needs its own visitor.
             JSXElement(path, state) {
                 state.hasJSX = true;
-                // IR pipeline path: build IR -> emit() -> reparse. Handles the whole
-                // subtree, so we bypass the inline transform entirely.
-                if (backend === 'imperative' && codegen === 'ir') {
-                    path.replaceWith(emitViaIR(path.node, state));
-                    return;
-                }
-                const element = path.node;
-                const openingElement = element.openingElement;
-                // Router components auto-import like control flow, but aren't optimized —
-                // just register the name so the import gets injected if it isn't bound. A
-                // configured rule takes precedence; registering anyway would inject the
-                // router's import alongside the resolved one and bind the name twice.
-                if (t.isJSXIdentifier(openingElement.name) &&
-                    ROUTER_COMPONENTS.has(openingElement.name.name) &&
-                    !state.componentResolver?.resolve(openingElement.name.name)) {
-                    state.controlFlowComponents.add(openingElement.name.name);
-                    state.needsControlFlowImport = true;
-                }
-                // Check if it's a control flow component
-                if (t.isJSXIdentifier(openingElement.name) &&
-                    CONTROL_FLOW_COMPONENTS.has(openingElement.name.name)) {
-                    state.controlFlowComponents.add(openingElement.name.name);
-                    if (optimizeControlFlow) {
-                        const optimized = optimizeControlFlowComponent(element, state);
-                        if (optimized) {
-                            path.replaceWith(optimized);
-                            return;
-                        }
-                    }
-                }
-                // Try to hoist static elements.
-                // Not in imperative mode: hoisting a live DOM node would share one node
-                // across renders. Static hoisting there needs template-clone (contract v2).
-                if (hoistStatics && backend !== 'imperative' && isStaticElement(element, state)) {
-                    const hoisted = hoistStaticElement(element, state);
-                    if (hoisted) {
-                        path.replaceWith(hoisted);
-                        return;
-                    }
-                }
-                // Transform to JSX runtime calls
-                const transformed = transformJSXElement(element, state, {
-                    runtime,
-                    pragma,
-                    development,
-                    detectReactivity,
-                    useLitHTML,
-                    autoShow: autoShowTransform,
-                });
-                path.replaceWith(transformed);
+                path.replaceWith(emitViaIR(path.node, state));
             },
             JSXFragment(path, state) {
                 state.hasJSX = true;
-                if (backend === 'imperative' && codegen === 'ir') {
-                    path.replaceWith(emitViaIR(path.node, state));
-                    return;
-                }
-                const transformed = transformJSXFragment(path.node, state, {
-                    runtime,
-                    pragmaFrag,
-                    development,
-                });
-                path.replaceWith(transformed);
-            },
-            // Detect reactive patterns in code
-            CallExpression(path, state) {
-                if (!detectReactivity)
-                    return;
-                const callee = path.node.callee;
-                if (callee.name === 'handleToggle') {
-                    // console.log('call express', path);
-                }
-                // Detect signal creation
-                if (t.isIdentifier(callee) &&
-                    (callee.name === 'createSignal' ||
-                        callee.name === 'createStore' ||
-                        callee.name === 'useContext' ||
-                        callee.name === 'useLocation')) {
-                    // console.log('call express', callee.name);
-                    state.hasReactivity = true;
-                }
-            },
-            // NOTE: JSXExpressionContainer visitor is intentionally a no-op.
-            // JSXElement.enter fires BEFORE children are traversed, so by the time
-            // Babel would visit nested JSXExpressionContainers the JSXElement has
-            // already been replaced via path.replaceWith(). Attribute and children
-            // expressions are processed directly in transformAttributeValue /
-            // transformChildren above.
-            JSXExpressionContainer(_path) {
-                // no-op
+                path.replaceWith(emitViaIR(path.node, state));
             },
             TaggedTemplateExpression(path, state) {
-                // Compile `html`...`` (and `svg`...``) templates through the shared IR
-                // pipeline: same IR the JSX front-end builds, same imperative backend,
-                // same runtime calls.
+                // `html`...`` and `svg`...`` lower through the same IR and the same
+                // backend as JSX — one pipeline, two authoring syntaxes.
                 if (compileLit &&
-                    backend === 'imperative' &&
                     t.isIdentifier(path.node.tag) &&
                     (path.node.tag.name === litTag || path.node.tag.name === 'svg')) {
                     path.replaceWith(emitLitViaIR(path.node, state));
-                    return;
                 }
             },
         },
@@ -479,128 +285,34 @@ export default declare((api, options = {}) => {
 // ============================================================================
 // JSX Transformation
 // ============================================================================
-function transformJSXElement(element, state, options) {
-    const { runtime, pragma, development, autoShow = true } = options;
-    if (runtime === 'automatic') {
-        return transformAutomaticElement(element, state, development, autoShow);
-    }
-    else {
-        return transformClassicElement(element, state, pragma);
-    }
-}
-// ============================================================================
-// Imperative backend emission
-//
-// Emits direct calls into the @fluixi/dom runtime instead of jsx()/jsxs():
-//   native element  ->  (() => { const _el = createNativeElement(tag);
-//                                 spread({ element: _el, props });
-//                                 insert(_el, children);
-//                                 return _el; })()
-//   component       ->  createMemo(() => createComponent(Comp, props))
-// This matches @fluixi/jsx's component semantics exactly while removing
-// the per-render jsx() dispatch for host elements. Targets RUNTIME_CONTRACT_V1.
-// ============================================================================
-// Build-time SVG detection, kept in lockstep with isSVGElement in the dom runtime.
-const SVG_TAGS = new Set([
-    'svg', 'path', 'circle', 'rect', 'line', 'polygon', 'polyline',
-    'ellipse', 'g', 'defs', 'clipPath', 'text',
-]);
-/** Build the props object, merging spreads via mergeProps (reactivity-preserving). */
-function buildPropsObject(props, spreads, state) {
-    if (spreads.length > 0) {
-        state.needsMergeProps = true;
-        return t.callExpression(t.identifier('mergeProps'), [
-            ...spreads,
-            t.objectExpression(props),
-        ]);
-    }
-    return t.objectExpression(props);
-}
-/** Wrap children expressions into a single value for `insert` / `children` prop. */
-function childrenValue(children) {
-    return children.length === 1 ? children[0] : t.arrayExpression(children);
-}
-function emitImperativeElement(tag, isNative, props, spreads, children, state) {
-    if (!isNative) {
-        // Component: children go into props as a LAZY getter, so child components are
-        // created inside the component's execution (owner nesting for context/Suspense),
-        // after the component runs (provider ordering), and lazily (ErrorBoundary catch).
-        const allProps = [...props];
-        if (children.length > 0) {
-            allProps.push(t.objectMethod('get', t.identifier('children'), [], t.blockStatement([t.returnStatement(childrenValue(children))])));
-        }
-        return emitComponentCall(tag, buildPropsObject(allProps, spreads, state), state);
-    }
-    // Native element: createNativeElement + spread (attrs only) + insert (children).
-    const tagName = tag.value;
-    const isSVG = SVG_TAGS.has(tagName);
-    const elId = t.identifier('_el$');
-    const stmts = [];
-    state.needsCreateNativeElement = true;
-    const createArgs = [tag];
-    if (isSVG)
-        createArgs.push(t.booleanLiteral(true));
-    stmts.push(t.variableDeclaration('const', [
-        t.variableDeclarator(elId, t.callExpression(t.identifier('createNativeElement'), createArgs)),
-    ]));
-    if (props.length > 0 || spreads.length > 0) {
-        state.needsSpread = true;
-        const spreadProps = [
-            t.objectProperty(t.identifier('element'), elId),
-            t.objectProperty(t.identifier('props'), buildPropsObject(props, spreads, state)),
-        ];
-        if (isSVG) {
-            spreadProps.push(t.objectProperty(t.identifier('isSVG'), t.booleanLiteral(true)));
-        }
-        stmts.push(t.expressionStatement(t.callExpression(t.identifier('spread'), [t.objectExpression(spreadProps)])));
-    }
-    // Insert each child individually (like the jsx runtime's applyProps), so a
-    // reactive/component child that isn't the only child still gets its own
-    // reactive binding. A single insert(el, [array]) does NOT bind function
-    // elements sitting inside the array.
-    if (children.length > 0) {
-        state.needsInsert = true;
-        for (const child of children) {
-            const isFn = t.isArrowFunctionExpression(child) ||
-                t.isFunctionExpression(child) ||
-                (t.isCallExpression(child) &&
-                    t.isIdentifier(child.callee) &&
-                    child.callee.name === 'createMemo');
-            const args = isFn
-                ? [t.cloneNode(elId), child, t.nullLiteral()]
-                : [t.cloneNode(elId), child];
-            stmts.push(t.expressionStatement(t.callExpression(t.identifier('insert'), args)));
-        }
-    }
-    stmts.push(t.returnStatement(elId));
-    return t.callExpression(t.arrowFunctionExpression([], t.blockStatement(stmts)), []);
-}
-/**
- * Emit a component invocation. jsx backend: `jsx(Comp, props)`. Imperative:
- * `createMemo(() => createComponent(Comp, props))` — same shape jsx-runtime
- * produces for components, so it stays reactive when used as a child.
- */
-/**
- * Read a `load:` attribute's literal value. A `${…}` hole is rejected: the strategy
- * decides how the module is emitted, so it has to be known at compile time.
- */
-function readLoadDirective(name, attr) {
-    let value = null;
-    if (attr.value) {
-        if (t.isStringLiteral(attr.value))
-            value = attr.value.value;
-        else {
-            throw new LoadDirectiveError(`'${name}' needs a literal value, not an expression — the strategy is compile-time.`);
-        }
-    }
-    return parseLoadDirective(name, value);
-}
 /**
  * Two usages of one component in the same file share a binding, so their strategies
  * have to agree. The earlier-loading one wins: the module is in whichever chunk loads
  * first regardless, so deferring the other buys nothing — the same reasoning as the
  * collapse pass, applied within a file.
  */
+/**
+ * What to do with JSX or a template found inside an expression: resolve its
+ * component references and record what the module needs, exactly as the
+ * top-level node gets. The IR itself is emitted and dropped by the walk, so
+ * anything not taken off it here is lost — which is how `{(b) => <Input/>}`
+ * came out referring to a component nothing imported.
+ */
+function nestedHook(state) {
+    return (ir) => {
+        resolveComponentSources(ir, {
+            resolver: state.componentResolver,
+            modules: {
+                controlFlowModule: state.controlFlowModule,
+                coreModule: state.libModule,
+                routerModule: state.routerModule,
+            },
+            strategyFor: (node) => node.load,
+        });
+        collapseStrategies(ir);
+        collectRuntimeNeeds(ir, state);
+    };
+}
 /** The strategy as an object literal the runtime can read. */
 function strategyLiteral(strategy) {
     const props = [
@@ -617,84 +329,6 @@ function strategyLiteral(strategy) {
     }
     return t.objectExpression(props);
 }
-function mergeStrategy(existing, incoming) {
-    if (!isDeferred(existing) || !isDeferred(incoming))
-        return EAGER;
-    return existing;
-}
-function emitComponentCall(comp, propsObj, state) {
-    // Configured tags register here rather than in the JSX element visitor: this is the
-    // chokepoint every component passes through, and the visitor missed children because
-    // a lowered parent is replaced before its subtree is walked.
-    //
-    // A configured rule wins over the router built-ins. Those are only an import — no
-    // special lowering, no reactive-getter props — so letting a project's own `Link` lose
-    // to them silently was the same failure `Switch` has: the tag renders the router's
-    // component and nothing reports it. Control flow still wins, because there the name
-    // selects codegen and a rule cannot supply that.
-    // Control flow needs its import injected too, and registering it here rather than in
-    // the JSX visitor is what makes nested usage work: a lowered parent is replaced before
-    // its subtree is walked, so `<div><Show/></div>` never reached the visitor and `Show`
-    // compiled to a reference to nothing. Every fixture imported Show by hand, so nothing
-    // caught it.
-    if (t.isIdentifier(comp) && CONTROL_FLOW_COMPONENTS.has(comp.name)) {
-        state.controlFlowComponents.add(comp.name);
-        state.needsControlFlowImport = true;
-    }
-    let resolvedByRule = false;
-    if (t.isIdentifier(comp) && !CONTROL_FLOW_COMPONENTS.has(comp.name) && state.componentResolver) {
-        const resolved = state.componentResolver.resolve(comp.name);
-        if (resolved) {
-            const strategy = state.pendingLoad ?? EAGER;
-            // An eager usage seen earlier in the file already put the module in the chunk,
-            // so a later deferred usage of the same name collapses to eager. Without this the
-            // file gets both a static import and a `const` for one name — a redeclaration.
-            const alreadyEager = state.resolvedComponents.has(comp.name);
-            if (isDeferred(strategy) && !alreadyEager) {
-                // A deferred component becomes a `deferred(() => import(...))` binding rather
-                // than a static import, so the bundler puts it in its own chunk.
-                const existing = state.deferredComponents.get(comp.name);
-                const merged = existing ? mergeStrategy(existing.strategy, strategy) : strategy;
-                if (isDeferred(merged)) {
-                    state.deferredComponents.set(comp.name, { ...resolved, strategy: merged });
-                }
-                else {
-                    state.deferredComponents.delete(comp.name);
-                    state.resolvedComponents.set(comp.name, resolved);
-                }
-            }
-            else {
-                // An eager usage anywhere wins: the module is in the chunk already.
-                state.deferredComponents.delete(comp.name);
-                state.resolvedComponents.set(comp.name, resolved);
-            }
-            resolvedByRule = true;
-        }
-    }
-    state.pendingLoad = undefined;
-    // Router components auto-import like control flow — register the name here so
-    // `<Outlet/>` nested in markup is caught, not only a top-level router tag. Unbound
-    // names are injected at Program.exit.
-    if (!resolvedByRule && t.isIdentifier(comp) && ROUTER_COMPONENTS.has(comp.name)) {
-        state.controlFlowComponents.add(comp.name);
-        state.needsControlFlowImport = true;
-    }
-    if (state.backend === 'imperative') {
-        state.needsCreateComponent = true;
-        state.needsCreateMemo = true;
-        return t.callExpression(t.identifier('createMemo'), [
-            t.arrowFunctionExpression([], t.callExpression(t.identifier('createComponent'), [comp, propsObj])),
-        ]);
-    }
-    return t.callExpression(t.identifier('jsx'), [comp, propsObj]);
-}
-/**
- * IR-pipeline path (codegen: 'ir'): build host-agnostic IR from the JSX node, run
- * the imperative backend's emit(), and reparse the emitted code into an AST
- * expression. Records the runtime symbols used so Program.exit can import them.
- * Produces the same runtime calls as the inline path — this is the route a future
- * swc front-end reuses.
- */
 /**
  * Hoist the backend's static templates to module scope and rewrite the emitted code to
  * reference them. Deduped by HTML, so a subtree repeated in a file is parsed once.
@@ -722,7 +356,7 @@ function emitViaIR(node, state) {
     // `used` collects runtime symbols emitted for JSX nested inside expressions
     // (render-props, ternaries, fallback={<p/>}, …) so we import them too.
     const used = new Set();
-    const ir = buildIR(node, used);
+    const ir = buildIR(node, used, nestedHook(state));
     // The same passes the lit path runs. Without them `codegen: 'ir'` silently skipped
     // resolution entirely — a resolved tag compiled to a reference with no import.
     resolveComponentSources(ir, {
@@ -785,7 +419,7 @@ function dedupeImports(imports) {
 function emitLitViaIR(node, state) {
     const used = new Set();
     const svg = t.isIdentifier(node.tag) && node.tag.name === 'svg';
-    const ir = buildIRFromLit(node, used, { svg });
+    const ir = buildIRFromLit(node, used, { svg, onNested: nestedHook(state) });
     // Resolve pass: annotate each component reference with where it comes from, before
     // codegen. Bindings are not checked here — Program.exit knows the whole file's scope
     // and drops any injected import whose name turns out to be bound.
@@ -897,870 +531,3 @@ function collectRuntimeNeeds(node, state) {
             collectRuntimeNeeds(c, state);
     }
 }
-//This method will convert props to lazy props like 
-function lazyProps(properties) {
-    return properties.map((prop) => {
-        // Only transform normal properties (e.g., { open: variable })
-        // Skip methods, spread elements, or already existing getters
-        if (t.isObjectProperty(prop)) {
-            // Handle potential computed properties (like {[someKey]: variable})
-            const key = prop.key;
-            const computed = prop.computed;
-            const value = prop.value;
-            // Create a getter method: get key() { return value; }
-            return t.objectMethod('get', // Kind of method
-            key, // Property key
-            [], // Getters take no arguments
-            t.blockStatement([
-                // Body: { return value; }
-                t.returnStatement(value),
-            ]), computed // Preserve computed status if true
-            );
-        }
-        // Keep existing ObjectMethods (like get already there, or regular methods) as-is
-        return prop;
-    });
-}
-;
-function transformAutomaticElement(element, state, development, autoShow = true) {
-    const openingElement = element.openingElement;
-    const children = element.children;
-    // Get element name/tag
-    const tag = getElementName(openingElement.name);
-    // Only auto-wrap reactive expressions for native HTML elements (lowercase tag).
-    // Component props must NOT be wrapped — the component receives the value
-    // as-is and is responsible for its own reactivity.
-    const isNativeElement = t.isJSXIdentifier(openingElement.name) &&
-        /^[a-z]/.test(openingElement.name.name);
-    // Transform attributes to props object
-    const attrs = transformAttributes(openingElement.attributes, state, isNativeElement, t.isJSXIdentifier(openingElement.name) ? openingElement.name.name : '');
-    let props = attrs.props;
-    const spreads = attrs.spreads;
-    // Component props become lazy getters so the component is created ONCE and reactivity flows
-    // through the getter (a reactive `prop={sig()}` read eagerly would re-create the whole
-    // component via the enclosing createMemo, so a <Portal> re-mounts and piles up). Static props
-    // as getters are harmless. Native-element attrs must NOT be wrapped: they already carry their
-    // own reactivity as `() => expr` thunks that `spread` consumes.
-    if (!isNativeElement)
-        props = lazyProps(props);
-    // Transform children
-    const transformedChildren = transformChildren(children, state, autoShow);
-    // Imperative backend: emit direct runtime calls instead of jsx()/jsxs().
-    if (state.backend === 'imperative') {
-        return emitImperativeElement(tag, isNativeElement, props, spreads, transformedChildren, state);
-    }
-    // Add children to props if any
-    if (transformedChildren.length > 0) {
-        const childrenProp = transformedChildren.length === 1
-            ? transformedChildren[0]
-            : t.arrayExpression(transformedChildren);
-        props.push(t.objectProperty(t.identifier('children'), childrenProp));
-    }
-    // Build props object with spreads
-    let propsObj;
-    if (spreads.length > 0) {
-        // Use mergeProps helper to preserve reactivity for store proxies
-        const baseProps = props.length > 0 ? t.objectExpression(props) : t.objectExpression([]);
-        // Import mergeProps from jsx-runtime if spreads are used
-        state.needsMergeProps = true;
-        propsObj = t.callExpression(t.identifier('mergeProps'), [
-            ...spreads,
-            baseProps,
-        ]);
-    }
-    else {
-        propsObj = t.objectExpression(props);
-    }
-    // Determine function name
-    const functionName = development
-        ? 'jsxDEV'
-        : transformedChildren.length > 1
-            ? 'jsxs'
-            : 'jsx';
-    // Build jsx call
-    const args = [tag, propsObj];
-    if (development) {
-        // Add key, isStaticChildren, source, self for dev mode
-        args.push(t.identifier('undefined'), // key
-        t.booleanLiteral(false), // isStaticChildren
-        t.identifier('undefined'), // source
-        t.identifier('undefined') // self
-        );
-    }
-    return t.callExpression(t.identifier(functionName), args);
-}
-function transformClassicElement(element, state, pragma) {
-    const openingElement = element.openingElement;
-    const children = element.children;
-    const tag = getElementName(openingElement.name);
-    const isNativeElement = t.isJSXIdentifier(openingElement.name) &&
-        /^[a-z]/.test(openingElement.name.name);
-    const { props, spreads } = transformAttributes(openingElement.attributes, state, isNativeElement, t.isJSXIdentifier(openingElement.name) ? openingElement.name.name : '');
-    const transformedChildren = transformChildren(children, state, state.autoShow ?? true);
-    let propsObj;
-    if (spreads.length > 0) {
-        // Use mergeProps helper to preserve reactivity for store proxies
-        // mergeProps(...spreads, baseProps) instead of Object.assign
-        const baseProps = props.length > 0 ? t.objectExpression(props) : t.objectExpression([]);
-        // Import mergeProps from jsx-runtime if spreads are used
-        state.needsMergeProps = true;
-        propsObj = t.callExpression(t.identifier('mergeProps'), [
-            ...spreads,
-            baseProps,
-        ]);
-    }
-    else {
-        propsObj = props.length > 0 ? t.objectExpression(props) : t.nullLiteral();
-    }
-    const args = [tag, propsObj, ...transformedChildren];
-    return t.callExpression(t.identifier(pragma), args);
-}
-function transformJSXFragment(fragment, state, options) {
-    const { runtime, pragmaFrag, development } = options;
-    const children = transformChildren(fragment.children, state, state.autoShow ?? true);
-    // Imperative backend: a fragment is just its children; insert() flattens arrays.
-    if (state.backend === 'imperative') {
-        if (children.length === 0)
-            return t.nullLiteral();
-        return childrenValue(children);
-    }
-    if (runtime === 'automatic') {
-        const functionName = development
-            ? 'jsxDEV'
-            : children.length > 1
-                ? 'jsxs'
-                : 'jsx';
-        const props = t.objectExpression([
-            t.objectProperty(t.identifier('children'), children.length === 1 ? children[0] : t.arrayExpression(children)),
-        ]);
-        const args = [t.identifier('Fragment'), props];
-        if (development) {
-            args.push(t.identifier('undefined'), t.booleanLiteral(false), t.identifier('undefined'), t.identifier('undefined'));
-        }
-        return t.callExpression(t.identifier(functionName), args);
-    }
-    else {
-        return t.callExpression(t.identifier(pragmaFrag), children);
-    }
-}
-// ============================================================================
-// Element Name Transformation
-// ============================================================================
-function getElementName(name) {
-    if (t.isJSXIdentifier(name)) {
-        const nameStr = name.name;
-        // Check if it's a native element (lowercase)
-        if (nameStr[0] === nameStr[0].toLowerCase()) {
-            return t.stringLiteral(nameStr);
-        }
-        // Component reference
-        return t.identifier(nameStr);
-    }
-    if (t.isJSXMemberExpression(name)) {
-        return transformJSXMemberExpression(name);
-    }
-    if (t.isJSXNamespacedName(name)) {
-        return t.stringLiteral(`${name.namespace.name}:${name.name.name}`);
-    }
-    return t.stringLiteral('div');
-}
-function transformJSXMemberExpression(expr) {
-    let object;
-    if (t.isJSXIdentifier(expr.object)) {
-        object = t.identifier(expr.object.name);
-    }
-    else {
-        object = transformJSXMemberExpression(expr.object);
-    }
-    return t.memberExpression(object, t.identifier(expr.property.name));
-}
-// ============================================================================
-// Attribute Transformation
-// ============================================================================
-/** Returns true when `name` can be used as an unquoted JS identifier. */
-function isValidJSIdentifier(name) {
-    return /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(name);
-}
-function transformAttributes(attributes, state, isNativeElement = true, tagName = '') {
-    const props = [];
-    const spreads = [];
-    const cfValueProp = CONTROL_FLOW_VALUE_PROPS[tagName];
-    // `use:name` directives, collected into the single `use` prop the runtime dispatches on.
-    const usePairs = [];
-    // `load:` is a directive, not a prop — it says when this component's module is
-    // fetched. Cleared per element so a strategy cannot leak onto the next tag.
-    state.pendingLoad = undefined;
-    for (const attr of attributes) {
-        if (t.isJSXSpreadAttribute(attr)) {
-            // Collect spread expressions separately
-            spreads.push(attr.argument);
-        }
-        else if (t.isJSXAttribute(attr)) {
-            const name = getAttributeName(attr.name);
-            if (isLoadDirective(name)) {
-                // Same parser the html`` lowering uses, so the two syntaxes cannot drift.
-                state.pendingLoad = readLoadDirective(name, attr);
-                continue;
-            }
-            // use:name / use:name={opts} -> one `use` prop holding [directive, () => opts] pairs.
-            // Without this the attribute reached the runtime as a prop literally named "use:name",
-            // which nothing dispatches on — so the directive silently never ran. The IR path has
-            // always normalised it; this is the same normalisation for the inline path.
-            if (t.isJSXNamespacedName(attr.name) && attr.name.namespace.name === 'use') {
-                const directive = t.identifier(attr.name.name.name);
-                const opts = attr.value === null ? null : transformAttributeValue(attr.value, state, name, isNativeElement);
-                usePairs.push(t.arrayExpression(
-                // The options are wrapped in an arrow so the directive can track them, matching
-                // what the runtime's applyUse expects of the second slot.
-                opts ? [directive, t.arrowFunctionExpression([], opts)] : [directive]));
-                continue;
-            }
-            const value = transformAttributeValue(attr.value, state, name, isNativeElement);
-            // Detect event handlers for delegation
-            if (EVENT_PROPS.test(name)) {
-                const eventName = name.slice(2).toLowerCase();
-                if (DELEGATABLE_EVENTS.includes(eventName)) {
-                    state.delegatedEvents.add(eventName);
-                }
-            }
-            const key = isValidJSIdentifier(name)
-                ? t.identifier(name)
-                : t.stringLiteral(name);
-            // Inline JSX passed to a COMPONENT prop (e.g. <Suspense fallback={<div/>}>) becomes a
-            // LAZY getter — same as children. Otherwise it's an eager IIFE built when the props object
-            // is constructed; during hydration that walks the hydration cursor and adopts the real
-            // server node (a fallback `<div>` matches the content `<div>` by tag), duplicating the
-            // tree. As a getter the node is only built when the component actually reads the prop.
-            const raw = attr.value;
-            const isInlineJsx = t.isJSXElement(raw) ||
-                t.isJSXFragment(raw) ||
-                (t.isJSXExpressionContainer(raw) &&
-                    (t.isJSXElement(raw.expression) || t.isJSXFragment(raw.expression)));
-            // Control-flow reactive value prop (each/when/component/mount): emit as a getter so
-            // reading it re-runs the caller's expression inside the component's tracking scope.
-            const isCfValueProp = !isNativeElement && name === cfValueProp;
-            // A reactive component prop (`prop={sig()}`, `prop={store.x}`) must be a getter, not an
-            // eager value: eager reads the signal inside the enclosing `createMemo(() =>
-            // createComponent(Comp, props))`, so the memo re-creates the WHOLE component on every
-            // change (a <Portal> then re-mounts and piles up). As a getter the component is created
-            // once and reactivity flows through the getter into the component's own effects.
-            const rawExpr = t.isJSXExpressionContainer(raw) && !t.isJSXEmptyExpression(raw.expression)
-                ? raw.expression
-                : null;
-            const isReactiveComponentProp = !isNativeElement && !!rawExpr && shouldAutoWrapAttrExpression(rawExpr, name);
-            if ((!isNativeElement && isInlineJsx) || isCfValueProp || isReactiveComponentProp) {
-                props.push(t.objectMethod('get', key, [], t.blockStatement([t.returnStatement(value)])));
-            }
-            else {
-                props.push(t.objectProperty(key, value));
-            }
-        }
-    }
-    if (usePairs.length > 0) {
-        props.push(t.objectProperty(t.identifier('use'), t.arrayExpression(usePairs)));
-    }
-    return { props, spreads };
-}
-function getAttributeName(name) {
-    if (t.isJSXIdentifier(name)) {
-        return name.name === 'class' ? 'className' : name.name;
-    }
-    if (t.isJSXNamespacedName(name)) {
-        return `${name.namespace.name}:${name.name.name}`;
-    }
-    return 'unknown';
-}
-function transformAttributeValue(value, state, attrName = '', isNativeElement = true) {
-    if (value === null) {
-        return t.booleanLiteral(true);
-    }
-    if (t.isStringLiteral(value)) {
-        // JSX allows string attribute values to span multiple lines, but JS string
-        // literals cannot contain raw newlines. When multi-line, normalise: collapse
-        // any run of whitespace (including newlines) to a single space and trim.
-        // We create a *new* StringLiteral so Babel discards the original extra.raw
-        // (which still contains the literal newlines) and generates a clean literal.
-        if (value.value.includes('\n')) {
-            return t.stringLiteral(value.value.replace(/\s+/g, ' ').trim());
-        }
-        return value;
-    }
-    if (t.isJSXExpressionContainer(value)) {
-        if (t.isJSXEmptyExpression(value.expression)) {
-            return t.booleanLiteral(true);
-        }
-        const expr = value.expression;
-        // Auto-wrap reactive expressions so DOM attribute reads happen inside effects.
-        // Only applies to native HTML elements — component props must NOT be wrapped
-        // because the component receives the value directly and calling it would give
-        // () => value instead of value.
-        if (isNativeElement && shouldAutoWrapAttrExpression(expr, attrName)) {
-            return t.arrowFunctionExpression([], expr);
-        }
-        return expr;
-    }
-    if (t.isJSXElement(value)) {
-        return transformAutomaticElement(value, state, false, state.autoShow ?? true);
-    }
-    if (t.isJSXFragment(value)) {
-        return transformJSXFragment(value, state, {
-            runtime: 'automatic',
-            pragmaFrag: 'Fragment',
-            development: false,
-        });
-    }
-    return t.booleanLiteral(true);
-}
-/**
- * Decide whether a JSX attribute value expression should be auto-wrapped
- * in `() => expr` for fine-grained reactivity (SolidJS style).
- */
-function shouldAutoWrapAttrExpression(expr, attrName) {
-    // Event handlers must NOT be wrapped — they are called by the runtime.
-    // Covers both camelCase (onClick) and namespaced (on:click) forms.
-    if (EVENT_PROPS.test(attrName) || attrName.startsWith('on:')) {
-        return false;
-    }
-    // ref receives the DOM element directly — never wrap.
-    if (attrName === 'ref') {
-        return false;
-    }
-    // use:Directive — the directive itself decides how to handle the value.
-    if (attrName.startsWith('use:')) {
-        return false;
-    }
-    // Already an arrow function or function expression — already reactive.
-    if (t.isArrowFunctionExpression(expr) || t.isFunctionExpression(expr)) {
-        return false;
-    }
-    // Plain identifier — may itself be a signal accessor/function; let runtime handle it.
-    if (t.isIdentifier(expr)) {
-        return false;
-    }
-    // Static literals need no wrapping.
-    if (t.isStringLiteral(expr) ||
-        t.isNumericLiteral(expr) ||
-        t.isBooleanLiteral(expr) ||
-        t.isNullLiteral(expr)) {
-        return false;
-    }
-    // Call expressions: signal(), count(), store.method()
-    if (t.isCallExpression(expr) || t.isOptionalCallExpression(expr)) {
-        return true;
-    }
-    // Member expressions: store.prop, obj.value
-    if (t.isMemberExpression(expr) || t.isOptionalMemberExpression(expr)) {
-        return true;
-    }
-    // Compound expressions that may contain reactive reads.
-    if (t.isLogicalExpression(expr) ||
-        t.isConditionalExpression(expr) ||
-        t.isBinaryExpression(expr) ||
-        t.isUnaryExpression(expr)) {
-        return true;
-    }
-    // Template literals: `Hello ${name()}`
-    if (t.isTemplateLiteral(expr)) {
-        return true;
-    }
-    // Object expressions: classList={{ active: isActive() }}
-    if (t.isObjectExpression(expr)) {
-        return true;
-    }
-    // Array expressions: style={[baseStyle, dynamicStyle()]}
-    if (t.isArrayExpression(expr)) {
-        return true;
-    }
-    return false;
-}
-// ============================================================================
-// Children Transformation
-// ============================================================================
-/**
- * Canonical JSX text cleaning (matches babel/React/Solid): trim line-boundary
- * whitespace, collapse runs to single spaces, and drop text that is only
- * whitespace spanning a newline. Returns '' when the node is insignificant.
- */
-function cleanJSXText(value) {
-    const lines = value.split(/\r\n|\n|\r/);
-    let lastNonEmpty = 0;
-    for (let i = 0; i < lines.length; i++) {
-        if (/[^ \t]/.test(lines[i]))
-            lastNonEmpty = i;
-    }
-    let out = '';
-    for (let i = 0; i < lines.length; i++) {
-        let line = lines[i].replace(/\t/g, ' ');
-        if (i !== 0)
-            line = line.replace(/^ +/, '');
-        if (i !== lines.length - 1)
-            line = line.replace(/ +$/, '');
-        if (!line)
-            continue;
-        if (i !== lastNonEmpty)
-            line += ' ';
-        out += line;
-    }
-    return out;
-}
-function transformChildren(children, state, autoShow = true) {
-    const result = [];
-    for (const child of children) {
-        if (t.isJSXText(child)) {
-            // Canonical JSX whitespace handling (as React/Solid): whitespace-only text
-            // that spans a line break is insignificant and dropped; inline runs collapse
-            // to a single space. This matters beyond cosmetics — keeping a `" "` text
-            // node next to a child turns `props.children` into an ARRAY, and an array
-            // insert doesn't reactively bind a memo/component sitting inside it (so a
-            // nested lazy/<Suspense> never updates). Dropping the stray whitespace keeps
-            // a lone child a lone child, so insert binds it reactively.
-            const text = cleanJSXText(child.value);
-            if (text)
-                result.push(t.stringLiteral(text));
-        }
-        else if (t.isJSXExpressionContainer(child)) {
-            if (!t.isJSXEmptyExpression(child.expression)) {
-                const expr = child.expression;
-                // Auto-transform patterns into jsx(Show, ...) so JSX subtrees are
-                // created once and never recreated on every signal change.
-                //
-                // Handled patterns:
-                //   () => cond && <JSX />                — arrow logical
-                //   () => cond ? <JSX /> : fallback       — arrow ternary
-                //   cond && <JSX />                       — bare logical
-                //   cond ? <JSX /> : fallback             — bare ternary
-                if (autoShow) {
-                    const showNode = tryTransformArrowToShow(expr, state) ??
-                        tryTransformRawToShow(expr, state);
-                    if (showNode) {
-                        result.push(showNode);
-                        continue;
-                    }
-                }
-                else {
-                    // autoShow off: wrap JSX conditional expressions in createMemo(() => expr)
-                    // so the condition is still evaluated reactively without recreating the tree.
-                    const memoNode = tryWrapConditionalAsMemo(expr, state);
-                    if (memoNode) {
-                        result.push(memoNode);
-                        continue;
-                    }
-                }
-                // Auto-wrap reactive expressions for SolidJS-style reactivity
-                if (shouldAutoWrapExpression(expr)) {
-                    result.push(t.arrowFunctionExpression([], expr));
-                }
-                else {
-                    result.push(expr);
-                }
-            }
-        }
-        else if (t.isJSXElement(child)) {
-            result.push(transformAutomaticElement(child, state, false, state.autoShow ?? true));
-        }
-        else if (t.isJSXFragment(child)) {
-            result.push(transformJSXFragment(child, state, {
-                runtime: 'automatic',
-                pragmaFrag: 'Fragment',
-                development: false,
-            }));
-        }
-        else if (t.isJSXSpreadChild(child)) {
-            result.push(child.expression);
-        }
-    }
-    return result;
-}
-// ============================================================================
-// Auto-Show Transform
-// ============================================================================
-/**
- * Detects the patterns:
- *   () => condition && <JSX />
- *   () => condition ? <JSX /> : null
- *   () => condition ? <JSX /> : <Fallback />
- *
- * and rewrites them to:
- *   jsx(Show, { when: () => condition, children: jsx(...), fallback? })
- *
- * This prevents the JSX subtree from being recreated on every reactive update.
- * Show's memo only re-evaluates when the boolean result of `condition` changes.
- */
-function tryTransformArrowToShow(expr, state) {
-    if (!t.isArrowFunctionExpression(expr) ||
-        expr.params.length !== 0 ||
-        expr.async) {
-        return null;
-    }
-    const body = expr.body;
-    // Pattern 1: () => condition && <JSX />   (or () => condition && (() => <JSX />))
-    if (t.isLogicalExpression(body) &&
-        body.operator === '&&') {
-        const jsx = getJSXContent(body.right);
-        if (jsx) {
-            return buildShowCall(unwrapZeroArgArrow(body.left), jsx, null, state);
-        }
-    }
-    // Pattern 2: () => condition ? <JSX /> : null | undefined | false
-    // Pattern 3: () => condition ? <JSX /> : <Fallback />
-    // Pattern 4: () => condition ? <JSX /> : otherCond ? <JSX2 /> : <Fallback /> (nested ternary)
-    if (t.isConditionalExpression(body)) {
-        const jsx = getJSXContent(body.consequent);
-        if (jsx) {
-            const fallback = buildFallback(body.alternate, state);
-            return buildShowCall(unwrapZeroArgArrow(body.test), jsx, fallback, state, true);
-        }
-    }
-    return null;
-}
-/**
- * Handles bare (non-arrow-wrapped) ternary and logical JSX expressions:
- *
- *   cond && <JSX />
- *   cond ? <JSX /> : fallback
- *
- * These are transformed to `jsx(Show, { when: () => cond, ... })` exactly like
- * their arrow-wrapped counterparts, preventing JSX subtrees from being
- * recreated on every reactive update.
- */
-function tryTransformRawToShow(expr, state) {
-    // cond && <JSX />   (or cond && (() => <JSX />))
-    if (t.isLogicalExpression(expr) && expr.operator === '&&') {
-        const jsx = getJSXContent(expr.right);
-        if (jsx) {
-            return buildShowCall(unwrapZeroArgArrow(expr.left), jsx, null, state);
-        }
-    }
-    // cond ? <JSX /> : fallback   (consequent may be () => <JSX />)
-    // test may be (() => expr) — unwrap to avoid double arrow wrapping
-    if (t.isConditionalExpression(expr)) {
-        const jsx = getJSXContent(expr.consequent);
-        if (jsx) {
-            const fallback = buildFallback(expr.alternate, state);
-            return buildShowCall(unwrapZeroArgArrow(expr.test), jsx, fallback, state);
-        }
-    }
-    return null;
-}
-/**
- * When autoShow is disabled, wraps ALL ternary and logical-AND expressions in
- * `createMemo(() => normalizedExpr)` so the condition evaluates reactively and
- * the result is cached (not re-evaluated on every render cycle).
- *
- * Normalization rules applied before wrapping:
- *   - Outer zero-arg arrow unwrapped:  `() => cond ? a : b` → body used directly
- *   - Arrow-wrapped test unwrapped:    `(() => cond) ? a : b` → `cond ? a : b`
- *   - Arrow-wrapped JSX consequent:    `() => <JSX>` → `<JSX>` (so Babel transforms it)
- *   - Arrow-wrapped JSX alternate:     `() => <JSX>` → `<JSX>` likewise
- *   - Non-JSX branches left as-is:     strings, identifiers, call results, etc.
- *
- * Examples:
- *   {cond ? "a" : "b"}                →  createMemo(() => cond ? "a" : "b")
- *   {cond ? <A/> : <B/>}              →  createMemo(() => cond ? <A/> : <B/>)
- *   {(() => cond) ? ()=><A/> : <B/>}  →  createMemo(() => cond ? <A/> : <B/>)
- *   {cond && <A/>}                    →  createMemo(() => cond && <A/>)
- */
-function tryWrapConditionalAsMemo(expr, state) {
-    // Unwrap outer zero-arg arrow: () => <inner> → work on inner directly
-    const inner = t.isArrowFunctionExpression(expr) &&
-        expr.params.length === 0 &&
-        !expr.async &&
-        t.isExpression(expr.body)
-        ? expr.body
-        : expr;
-    if (t.isConditionalExpression(inner)) {
-        // Unwrap arrow-wrapped test to prevent always-truthy condition
-        const normalizedTest = unwrapZeroArgArrow(inner.test);
-        // Unwrap arrow-wrapped JSX branches so Babel can transform them;
-        // non-JSX branches (strings, calls, etc.) are kept as-is
-        const consequentJsx = getJSXContent(inner.consequent);
-        const normalizedConsequent = consequentJsx ?? inner.consequent;
-        const altJsx = getJSXContent(inner.alternate);
-        const normalizedAlternate = altJsx ?? inner.alternate;
-        const normalized = t.conditionalExpression(normalizedTest, normalizedConsequent, normalizedAlternate);
-        // If either branch is a control-flow component (For, Switch, Index, Show, …),
-        // do NOT wrap in createMemo — return null so the caller falls through to the
-        // plain `() => expr` path via shouldAutoWrapExpression.
-        if (isControlFlowJSX(inner.consequent) ||
-            isControlFlowJSX(inner.alternate)) {
-            return null;
-        }
-        state.needsCreateMemo = true;
-        return t.callExpression(t.identifier('createMemo'), [
-            t.arrowFunctionExpression([], normalized),
-        ]);
-    }
-    if (t.isLogicalExpression(inner) && inner.operator === '&&') {
-        const normalizedLeft = unwrapZeroArgArrow(inner.left);
-        const rightJsx = getJSXContent(inner.right);
-        const normalizedRight = rightJsx ?? inner.right;
-        const normalized = t.logicalExpression('&&', normalizedLeft, normalizedRight);
-        // Same guard for logical && (e.g. {show && <For ...>})
-        if (isControlFlowJSX(inner.right)) {
-            return null;
-        }
-        state.needsCreateMemo = true;
-        return t.callExpression(t.identifier('createMemo'), [
-            t.arrowFunctionExpression([], normalized),
-        ]);
-    }
-    return null;
-}
-/**
- * Recursively transforms a fallback expression into a reactive value.
- * If the expression is a nested ternary `cond ? <JSX /> : rest`, it is
- * transformed into a nested `Show` call so the condition is tracked reactively.
- */
-function buildFallback(expr, state) {
-    if (isFalsyNode(expr))
-        return null;
-    // bare JSX or () => <JSX>
-    const directJsx = getJSXContent(expr);
-    if (directJsx) {
-        return transformJSXNode(directJsx, state);
-    }
-    // Nested ternary whose truthy branch is JSX (or arrow-wrapped JSX)
-    if (t.isConditionalExpression(expr)) {
-        const inner = expr;
-        const innerJsx = getJSXContent(inner.consequent);
-        if (innerJsx) {
-            const nestedFallback = buildFallback(inner.alternate, state);
-            return buildShowCall(unwrapZeroArgArrow(inner.test), innerJsx, nestedFallback, state);
-        }
-    }
-    return expr;
-}
-function isJSXNode(node) {
-    return t.isJSXElement(node) || t.isJSXFragment(node);
-}
-/**
- * Returns true when `expr` (or a zero-arg arrow wrapping it) is a JSXElement
- * whose tag is one of the Fluixi control-flow components (For, Switch, Index,
- * Show, Portal, Dynamic, ErrorBoundary, Suspense).  These must NOT be wrapped in
- * createMemo — a plain `() => expr` arrow is sufficient and avoids double-tracking.
- */
-function isControlFlowJSX(expr) {
-    const jsx = getJSXContent(expr);
-    if (!jsx || !t.isJSXElement(jsx))
-        return false;
-    const name = jsx.openingElement.name;
-    return t.isJSXIdentifier(name) && CONTROL_FLOW_COMPONENTS.has(name.name);
-}
-/**
- * Returns the JSX content from either bare `<JSX>` or a zero-arg arrow `() => <JSX>`.
- * This allows Show transformation to work regardless of whether the author wrapped the
- * consequent/alternate in an arrow function or not.
- */
-function getJSXContent(expr) {
-    if (isJSXNode(expr))
-        return expr;
-    if (t.isArrowFunctionExpression(expr) &&
-        expr.params.length === 0 &&
-        !expr.async &&
-        isJSXNode(expr.body)) {
-        return expr.body;
-    }
-    return null;
-}
-/**
- * Unwraps a zero-argument arrow `() => expr` to `expr`.
- * Used to avoid double-wrapping when the test/condition is already `() => cond`.
- * `buildShowCall` always wraps the condition in `() =>`, so passing a bare expr
- * produces `() => cond`; passing `() => cond` without unwrapping produces `() => () => cond`
- * which is always truthy.
- */
-function unwrapZeroArgArrow(expr) {
-    if (t.isArrowFunctionExpression(expr) &&
-        expr.params.length === 0 &&
-        !expr.async &&
-        t.isExpression(expr.body)) {
-        return expr.body;
-    }
-    return expr;
-}
-function isFalsyNode(node) {
-    return (t.isNullLiteral(node) ||
-        (t.isIdentifier(node) && node.name === 'undefined') ||
-        (t.isBooleanLiteral(node) && node.value === false));
-}
-function transformJSXNode(node, state) {
-    if (t.isJSXElement(node)) {
-        return transformAutomaticElement(node, state, false, state.autoShow ?? true);
-    }
-    return transformJSXFragment(node, state, {
-        runtime: 'automatic',
-        pragmaFrag: 'Fragment',
-        development: false,
-    });
-}
-function buildShowCall(condition, children, fallback, state, fromArrow = false) {
-    // Register Show so it gets auto-imported if needed
-    state.controlFlowComponents.add('Show');
-    state.needsControlFlowImport = true;
-    const transformedChildren = transformJSXNode(children, state);
-    // console.log('build show call', generate(condition).code);
-    const props = [
-        t.objectProperty(t.identifier('when'), t.arrowFunctionExpression([], condition)
-        // fromArrow ? (condition) : t.arrowFunctionExpression([], condition),
-        ),
-        t.objectProperty(t.identifier('children'), transformedChildren),
-    ];
-    if (fallback) {
-        props.push(t.objectProperty(t.identifier('fallback'), fallback));
-    }
-    return emitComponentCall(t.identifier('Show'), t.objectExpression(props), state);
-}
-// ============================================================================
-// Reactivity Detection
-// ============================================================================
-/**
- * Check if an expression should be auto-wrapped in an arrow function for reactivity
- * This enables SolidJS-style reactivity where you can write {store.property} or {signal()}
- * without manual wrapping
- */
-function shouldAutoWrapExpression(expr) {
-    // Member expressions: store.property, user.name, etc.
-    // These need wrapping so property access happens inside an effect
-    if (t.isMemberExpression(expr) || t.isOptionalMemberExpression(expr)) {
-        // `props.children` (any `.children`) is a stable subtree reference, not a
-        // reactive value. Wrapping it in `() => props.children` adds an insert layer
-        // that fully unwraps the children's Suspense/memo to a static node, severing
-        // the reactive binding — so a nested lazy/<Suspense> that resolves later
-        // never propagates up through the component-children hop. Pass it through
-        // non-reactive (insert(el, props.children)) so insert binds to the child's
-        // own memo, exactly like a directly-rendered <Outlet/>.
-        if (!expr.computed && t.isIdentifier(expr.property, { name: 'children' })) {
-            return false;
-        }
-        return true;
-    }
-    // Call expressions: signal(), count(), etc.
-    // These are already function calls but need wrapping to re-run on updates
-    if (t.isCallExpression(expr) || t.isOptionalCallExpression(expr)) {
-        return true;
-    }
-    // DON'T wrap plain identifiers - they might be signal accessors or functions
-    // that should be passed as-is. Only wrap when accessing properties or calling.
-    if (t.isIdentifier(expr)) {
-        return false;
-    }
-    // Logical expressions: signal() && other, store.value || default
-    if (t.isLogicalExpression(expr) || t.isConditionalExpression(expr)) {
-        return true;
-    }
-    // Binary expressions: signal() + 1, store.count * 2
-    if (t.isBinaryExpression(expr)) {
-        return true;
-    }
-    // Unary expressions: !signal(), -store.count
-    if (t.isUnaryExpression(expr)) {
-        return true;
-    }
-    // Template literals: `Count: ${count()}`
-    if (t.isTemplateLiteral(expr)) {
-        return true;
-    }
-    // Don't wrap literals, strings, numbers, etc.
-    return false;
-}
-// ============================================================================
-// Static Optimization
-// ============================================================================
-function shouldWrapReactive(expr, state) {
-    // Call expressions ending with () - likely signal accessors
-    if (t.isCallExpression(expr) && t.isIdentifier(expr.callee)) {
-        return true;
-    }
-    // Arrow functions with no parameters - could be computed values
-    if (t.isArrowFunctionExpression(expr) && expr.params.length === 0) {
-        return true;
-    }
-    // Function expressions with no parameters
-    if (t.isFunctionExpression(expr) && expr.params.length === 0) {
-        return true;
-    }
-    // Member expressions - could be store access
-    if (t.isMemberExpression(expr)) {
-        return true;
-    }
-    return false;
-}
-function wrapReactiveExpression(expr) {
-    return t.callExpression(t.identifier(''), [
-        t.arrowFunctionExpression([], expr),
-    ]);
-}
-// ============================================================================
-// Static Element Optimization
-// ============================================================================
-function isStaticElement(element, state) {
-    const openingElement = element.openingElement;
-    // Check if tag is static (string literal)
-    if (!t.isJSXIdentifier(openingElement.name)) {
-        return false;
-    }
-    const tagName = openingElement.name.name;
-    if (tagName[0] !== tagName[0].toLowerCase()) {
-        // Component, not a native element
-        return false;
-    }
-    // Check if all attributes are static
-    for (const attr of openingElement.attributes) {
-        if (t.isJSXSpreadAttribute(attr)) {
-            return false;
-        }
-        if (t.isJSXAttribute(attr)) {
-            const value = attr.value;
-            if (t.isJSXExpressionContainer(value)) {
-                if (!t.isStringLiteral(value.expression) &&
-                    !t.isNumericLiteral(value.expression)) {
-                    return false;
-                }
-            }
-        }
-    }
-    // Check if all children are static
-    for (const child of element.children) {
-        if (t.isJSXElement(child) && !isStaticElement(child, state)) {
-            return false;
-        }
-        if (t.isJSXExpressionContainer(child)) {
-            return false;
-        }
-    }
-    return true;
-}
-function hoistStaticElement(element, state) {
-    const varName = `_$static${state.staticCounter++}`;
-    const transformed = transformAutomaticElement(element, state, false);
-    state.staticElements.set(varName, transformed);
-    return t.identifier(varName);
-}
-// ============================================================================
-// Control Flow Optimization
-// ============================================================================
-function optimizeControlFlowComponent(element, state) {
-    const componentName = element.openingElement.name.name;
-    // Optimize Show component
-    if (componentName === 'Show') {
-        return optimizeShowComponent(element, state);
-    }
-    // Optimize For component
-    if (componentName === 'For') {
-        return optimizeForComponent(element, state);
-    }
-    return null;
-}
-function optimizeShowComponent(element, state) {
-    // Extract when, fallback, and children
-    // Apply optimizations based on patterns
-    return null; // Placeholder for optimization logic
-}
-function optimizeForComponent(element, state) {
-    // Extract each and children
-    // Apply keyed reconciliation optimizations
-    return null; // Placeholder for optimization logic
-}
-// ============================================================================
-// Exports
-// ============================================================================