@velarscript/web 0.31.0 → 0.32.0

package/dist/emitter.js

@@ -1,10 +1,17 @@
-import { cssPropertyName, LOOK_ARITHMETIC_HINT, LOOK_MEDIA_LENGTH_UNITS, LOOK_PROPERTIES, LOOK_PROPERTY_KEYWORDS, LOOK_PROPERTY_VALUE_KINDS } from "./look.js";
-import { isCssDeclarationValue } from "./css-tokens.js";
-import { collectLookStaticValues, evaluateLookStaticExpression, isLookStaticValue, lookStaticCss } from "./look-static.js";
-import { keyframeCssValue, keyframesCanonical, keyframesName } from "./keyframes.js";
-import { JavaScriptEmitter, spanIdentity, VELAR_ERROR_NORMALIZATION_MODULE, VELAR_RUNTIME_REGISTRY_KEY } from "@velarscript/compiler/extension";
-import { CSS_STRING_RUNTIME_BODY, LOOK_ARITHMETIC_RUNTIME, WEB_FILE_TYPE_RUNTIME, WEB_LOCAL_REACTIVE_BRIDGE_RUNTIME, WEB_LOCAL_REACTIVE_COLLECTION_BRIDGE_RUNTIME, WEB_RUNTIME_BODY, WEB_RUNTIME_FOUNDATION, WEB_RUNTIME_FOUNDATION_SHARED_ERROR, } from "./runtime-sources.generated.js";
+import { JavaScriptEmitter, spanIdentity } from "@velarscript/compiler/extension";
+import { LOOK_ARITHMETIC_HINT } from "./look.js";
+import { isLookStaticValue } from "./look-static.js";
+import { keyframesCanonical, keyframesName } from "./keyframes.js";
 import { isWebExpression, isWebJsx, isWebKeyframes, isWebLook, isWebStatement, isWebUnit, webExpressionContainsDirectAwait, webStatementContainsDirectAwait, webWatchSubjectLabel, } from "./ast.js";
+import { emitComponent, emitReactiveAssignment } from "./emit/components.js";
+import { emitJsx } from "./emit/jsx.js";
+import { emitLook, emitLookArithmetic, prepareLooks } from "./emit/look.js";
+import { additionalHelpers, containsUnitLiteral, containsWebSyntax, detachedTaskHelpers, emitIsCheck, emitTypeCheck, includesErrorNormalizationRuntime, reactiveBridgeHelpers, visitLookExpressions, } from "./emit/runtime-imports.js";
+// D115 P4 R3d: the JSX recognizers and the scalar-text hint are the emitter's
+// vocabulary, shared with the analyzer that diagnoses what emission demotes.
+// They live with the lowering that defines them and reach their existing
+// importers from here, so no import path moves.
+export { dynamicChildLeaves, jsxKeyedList, JSX_SCALAR_TEXT_HINT, } from "./emit/jsx.js";
 /**
  * Statements whose body is not module evaluation. A `def`, a class method, and
  * a `test` run when something calls them, and reach that caller's failure
@@ -47,22 +54,29 @@ export class WebJavaScriptEmitter extends JavaScriptEmitter {
     lookKeywordProperties = new Set();
     jsxId = 0;
     keyframeNames = new Map();
+    /**
+     * D115 P4 R3d: the four emission families this emitter owns as collaborators
+     * rather than as more of itself, and the one host object they reach it
+     * through. Every `protected` seam is still declared on this class, forwarding
+     * to the family that owns its body, so the base emitter reaches the same seam
+     * it always did.
+     */
+    host;
     constructor(hints, forcedFunctionExports = new Set(), resourceContents = new Map(), extensionImports = new Map(), options = {}) {
         super(hints, forcedFunctionExports, options);
         this.resourceContents = resourceContents;
         this.importedLookStaticValues = new Map([...(extensionImports.get("@velarscript/web") ?? [])]
             .filter((entry) => isLookStaticValue(entry[1])));
+        this.host = this.emitHost();
     }
     emit(program) {
-        this.lookStaticValues = collectLookStaticValues(program, this.importedLookStaticValues);
-        this.prepareLooks(program);
+        prepareLooks(this.host, program);
         this.webOutput = containsWebSyntax(program);
         this.needsFileTypeHelper = false;
         this.needsLookArithmeticRuntime = [...this.hints.extensionCalls.values()].includes(LOOK_ARITHMETIC_HINT);
         this.moduleEvaluation = true;
         return super.emit(program);
     }
-    /** Emits `render` with module evaluation switched off, for a body that runs under an owner of its own. */
     outsideModuleEvaluation(render) {
         const previous = this.moduleEvaluation;
         this.moduleEvaluation = false;
@@ -83,132 +97,22 @@ export class WebJavaScriptEmitter extends JavaScriptEmitter {
         return this.webOutput;
     }
     emitTypeCheck(type, value, state = "undefined") {
-        if (type.kind === "named") {
-            if (type.name === "Event" || type.name === "KeyboardEvent" || type.name === "PointerEvent" || type.name === "InputEvent" || type.name === "CompositionEvent" || type.name === "ClipboardEvent") {
-                return `(typeof ${type.name} !== "undefined" && ${value} instanceof ${type.name})`;
-            }
-            if (type.name === "Element")
-                return `(typeof Element !== "undefined" && ${value} instanceof Element)`;
-            if (type.name === "CanvasElement")
-                return `(typeof HTMLCanvasElement !== "undefined" && ${value} instanceof HTMLCanvasElement)`;
-            if (type.name === "DialogElement")
-                return `(typeof HTMLDialogElement !== "undefined" && ${value} instanceof HTMLDialogElement)`;
-            if (type.name === "InputElement") {
-                return `((typeof HTMLInputElement !== "undefined" && ${value} instanceof HTMLInputElement) || (typeof HTMLSelectElement !== "undefined" && ${value} instanceof HTMLSelectElement) || (typeof HTMLTextAreaElement !== "undefined" && ${value} instanceof HTMLTextAreaElement))`;
-            }
-            if (type.name === "TextAreaElement")
-                return `(typeof HTMLTextAreaElement !== "undefined" && ${value} instanceof HTMLTextAreaElement)`;
-            if (type.name === "Blob")
-                return `(typeof Blob !== "undefined" && ${value} instanceof Blob)`;
-            if (type.name === "File") {
-                this.needsFileTypeHelper = true;
-                return `__velarFileTypeIs(${value})`;
-            }
-        }
-        return super.emitTypeCheck(type, value, state);
+        return emitTypeCheck(this.host, type, value, state);
     }
     emitIsCheck(type, value) {
-        if (type.kind === "named" && (type.name === "Event"
-            || type.name === "KeyboardEvent"
-            || type.name === "PointerEvent"
-            || type.name === "InputEvent"
-            || type.name === "CompositionEvent"
-            || type.name === "ClipboardEvent"
-            || type.name === "Element"
-            || type.name === "CanvasElement"
-            || type.name === "DialogElement"
-            || type.name === "InputElement"
-            || type.name === "TextAreaElement"
-            || type.name === "Blob"
-            || type.name === "File"))
-            return this.emitTypeCheck(type, value);
-        return super.emitIsCheck(type, value);
+        return emitIsCheck(this.host, type, value);
     }
     additionalHelpers(_program) {
-        return [
-            ...(this.needsLookArithmeticRuntime ? [LOOK_ARITHMETIC_RUNTIME] : []),
-            ...(this.webOutput ? this.webRuntimeHelpers() : []),
-            ...(this.needsFileTypeHelper ? [WEB_FILE_TYPE_RUNTIME] : []),
-        ];
-    }
-    webRuntimeHelpers() {
-        if (!this.usesSharedRuntimeModules())
-            return [webRuntime(WEB_RUNTIME_FOUNDATION, this.lookKeywordTable())];
-        this.requireRuntimeModule(VELAR_ERROR_NORMALIZATION_MODULE);
-        return [
-            `import { errorApply as __velarErrorApply, errorCode as __velarErrorCode, isError as __velarIsError, normalizeError as __velarNormalizeError } from ${JSON.stringify(VELAR_ERROR_NORMALIZATION_MODULE)};`,
-            webRuntime(WEB_RUNTIME_FOUNDATION_SHARED_ERROR, this.lookKeywordTable()),
-        ];
-    }
-    /**
-     * The closed keyword sets of the properties this module styles, so a value
-     * the compiler could not read is still checked before it reaches the DOM.
-     * Only the properties written here ship: the whole table is 17 KiB, and a
-     * module pays for the properties it uses.
-     */
-    lookKeywordTable() {
-        const entries = [...this.lookKeywordProperties].sort()
-            .map((name) => `  ${JSON.stringify(cssPropertyName(name))}: ${JSON.stringify([...LOOK_PROPERTY_KEYWORDS.get(name) ?? []])},`);
-        return entries.length === 0
-            ? "const __velarLookKeywords = { __proto__: null };"
-            : `const __velarLookKeywords = {\n  __proto__: null,\n${entries.join("\n")}\n};`;
+        return additionalHelpers(this.host);
     }
     reactiveBridgeHelpers(needsJavaScriptCallBoundary, needsCollections, usedIdentifiers = new Set()) {
-        if (this.usesSharedRuntimeModules())
-            return super.reactiveBridgeHelpers(needsJavaScriptCallBoundary, needsCollections, usedIdentifiers);
-        if (!this.webOutput)
-            return super.reactiveBridgeHelpers(needsJavaScriptCallBoundary, needsCollections, usedIdentifiers);
-        if (!needsJavaScriptCallBoundary && !needsCollections)
-            return [];
-        return [WEB_LOCAL_REACTIVE_BRIDGE_RUNTIME, ...(needsCollections ? [WEB_LOCAL_REACTIVE_COLLECTION_BRIDGE_RUNTIME] : [])];
+        return reactiveBridgeHelpers(this.host, needsJavaScriptCallBoundary, needsCollections, usedIdentifiers);
     }
     includesErrorNormalizationRuntime() {
-        return this.webOutput;
+        return includesErrorNormalizationRuntime(this.host);
     }
-    // Web detached tasks report through the velar/app error chain with the
-    // distinct "detached" phase. The runtime registry is looked up at report
-    // time (module-level tasks can finish before or after the application
-    // runtime installs); the captured microtask throw keeps a failure loud when
-    // no runtime exists yet, and 'unhandled: true' keeps it loud when no
-    // onError handler is installed. Host operations are captured at module
-    // initialization, matching the owned-callback discipline.
     detachedTaskHelpers() {
-        // A module with no Web syntax emits no Web runtime, so it must keep Core's
-        // host reporting: the browser path would route a detached failure through a
-        // runtime registry that never gets installed and end in a microtask throw,
-        // which under `velar test` kills the whole Node test process.
-        if (!this.webOutput)
-            return super.detachedTaskHelpers();
-        return [[
-                `const __velarDetachedRegistryKey = Symbol.for(${JSON.stringify(VELAR_RUNTIME_REGISTRY_KEY)});`,
-                "const __velarDetachedPromiseThen = globalThis.Promise.prototype.then;",
-                "const __velarDetachedApply = Reflect.apply;",
-                "const __velarDetachedEnqueue = queueMicrotask;",
-                "function __velarDetachedReport(failure) {",
-                "  const error = __velarNormalizeError(failure);",
-                "  const runtime = globalThis[__velarDetachedRegistryKey];",
-                "  if (runtime && typeof runtime.report === \"function\") {",
-                "    // An action reports its own failure once, in the action phase with",
-                "    // the action's name as detail. The detached observer of that same",
-                "    // rejection must not report it a second time.",
-                "    try {",
-                "      if (__velarIsError(failure) && __velarGraphWeakSetRemove(runtime.actionFailures, failure)) return;",
-                "    } catch {}",
-                "    runtime.report(error, { phase: \"detached\", detail: \"\", unhandled: true });",
-                "    return;",
-                "  }",
-                "  __velarDetachedApply(__velarDetachedEnqueue, globalThis, [() => { throw error; }]);",
-                "}",
-                "function __velarDetachedTask(task) {",
-                // D114 W2: the one place a detached Promise enters the Web runtime, and
-                // so the one place the reactive window can be told that an observer run
-                // started asynchronous work. The runtime foundation decides whether a run
-                // is in progress; this site only reports the fact.
-                "  __velarNoteAsyncWork();",
-                "  __velarDetachedApply(__velarDetachedPromiseThen, task, [null, __velarDetachedReport]);",
-                "  return null;",
-                "}",
-            ].join("\n")];
+        return detachedTaskHelpers(this.host);
     }
     visitExtensionRuntimeExpression(expression, visitExpression) {
         if (isWebUnit(expression))
@@ -302,7 +206,7 @@ export class WebJavaScriptEmitter extends JavaScriptEmitter {
             if (statement.kind === "ExtensionStatement:web:unsafe-css")
                 return "";
             if (statement.kind === "ExtensionStatement:web:component")
-                return this.emitComponent(statement, depth);
+                return emitComponent(this.host, statement, depth);
             if (statement.kind === "ExtensionStatement:web:state") {
                 const indentation = "  ".repeat(depth);
                 return `${indentation}${statement.exported ? "export " : ""}const ${statement.name} = __velarState(${this.emitMappedExpression(statement.initializer)}, ${JSON.stringify(statement.name)});`;
@@ -338,7 +242,7 @@ export class WebJavaScriptEmitter extends JavaScriptEmitter {
             }
         }
         if (statement.kind === "AssignmentStatement") {
-            const reactive = this.emitReactiveAssignment(statement, depth);
+            const reactive = emitReactiveAssignment(this.host, statement, depth);
             if (reactive)
                 return reactive;
         }
@@ -369,12 +273,12 @@ export class WebJavaScriptEmitter extends JavaScriptEmitter {
         if (expression.kind === "BinaryExpression" && ["+", "-", "*", "/"].includes(expression.operator)
             && (containsUnitLiteral(expression)
                 || this.hints.extensionCalls.get(spanIdentity(expression.span)) === LOOK_ARITHMETIC_HINT)) {
-            return this.emitLookArithmetic(expression);
+            return emitLookArithmetic(this.host, expression);
         }
         if (isWebExpression(expression) && expression.kind === "ExtensionExpression:web:look-hook")
             return "false";
         if (isWebLook(expression))
-            return this.emitLook(expression);
+            return emitLook(this.host, expression);
         if (expression.kind === "CallExpression") {
             // D103 rule 2: a checked design token reference is compile-time text. The
             // analyzer proved the name is a literal custom property identifier and
@@ -398,7 +302,7 @@ export class WebJavaScriptEmitter extends JavaScriptEmitter {
                 return JSON.stringify(controlled);
         }
         if (isWebJsx(expression)) {
-            return this.emitJsx(expression, this.currentScope ?? "__velarGlobalScope", this.currentScope !== null, this.currentJsxNamespace, false);
+            return emitJsx(this.host, expression, this.currentScope ?? "__velarGlobalScope", this.currentScope !== null, this.currentJsxNamespace, false);
         }
         if (expression.kind === "CallExpression" && expression.callee.kind === "IdentifierExpression"
             && expression.callee.name === "mount" && expression.arguments.length === 2) {
@@ -429,887 +333,54 @@ export class WebJavaScriptEmitter extends JavaScriptEmitter {
             return emitted;
         return emitted.replaceAll("__velarListPop(", "__velarWebListPop(");
     }
-    emitLook(expression) {
-        return `__velarLook([${this.emitLookEntries(expression.entries, [EMPTY_LOOK_TERM], "").join(", ")}])`;
-    }
-    emitLookEntries(entries, contexts, target) {
-        const parts = [];
-        for (const entry of entries) {
-            if (entry.kind === "LookSpread") {
-                parts.push(this.emitMappedExpression(entry.value));
-                continue;
-            }
-            if (entry.kind === "LookIf") {
-                const thenContexts = combineLookTerms(contexts, lookConditionTerms(entry.condition, false, this.lookStaticValues));
-                const elseContexts = combineLookTerms(contexts, lookConditionTerms(entry.condition, true, this.lookStaticValues));
-                parts.push(...this.emitLookEntries(entry.thenEntries, thenContexts, target));
-                parts.push(...this.emitLookEntries(entry.elseEntries, elseContexts, target));
-                continue;
-            }
-            if (entry.kind === "LookTarget") {
-                parts.push(...this.emitLookEntries(entry.entries, contexts, entry.name));
-                continue;
-            }
-            const property = cssPropertyName(entry.name);
-            for (const context of contexts) {
-                const token = lookToken(context.staticAtoms, target, property);
-                const rule = `{ rules: { ${JSON.stringify(token)}: ${this.emitLookValue(entry.value)} } }`;
-                const runtime = context.runtimeAtoms.map((atom) => {
-                    const value = this.emitCondition(atom.expression);
-                    return atom.negated ? `!(${value})` : `(${value})`;
-                }).join(" && ");
-                parts.push(runtime ? `(${runtime} ? ${rule} : null)` : rule);
-            }
-        }
-        return parts;
-    }
-    emitLookValue(expression) {
-        return this.emitMappedExpression(expression);
-    }
-    emitLookArithmetic(expression) {
-        return `__velarLookMath(${JSON.stringify(expression.operator)}, ${this.emitMappedExpression(expression.left)}, ${this.emitMappedExpression(expression.right)})`;
-    }
-    emitComponent(statement, depth) {
-        const indentation = "  ".repeat(depth);
-        const outerIndent = "  ".repeat(depth + 1);
-        const bodyIndent = "  ".repeat(depth + 2);
-        const previousScope = this.currentScope;
-        const previousJsxNamespace = this.currentJsxNamespace;
-        this.currentScope = "__velarComponentScope";
-        this.currentJsxNamespace = "__velarNamespace";
-        // Props are live reactive inputs: every parameter becomes a read-only
-        // handle over the per-instance props store, so prop reads lower through
-        // .get() exactly like state reads do.
-        const lines = [];
-        for (const parameter of statement.parameters) {
-            if (parameter.defaultValue) {
-                lines.push(`${bodyIndent}const ${parameter.name} = __velarProp(__velarProps, ${JSON.stringify(parameter.name)}, () => (${this.emitMappedExpression(parameter.defaultValue)}));`);
-            }
-            else {
-                lines.push(`${bodyIndent}const ${parameter.name} = __velarRequiredProp(__velarProps, ${JSON.stringify(parameter.name)}, ${JSON.stringify(statement.name)});`);
-            }
-        }
-        let render = null;
-        let expose = null;
-        let mountedBody = [];
-        let cleanupBody = [];
-        for (const item of statement.body) {
-            if (item.kind === "ExtensionStatement:web:state") {
-                lines.push(`${bodyIndent}const ${item.name} = __velarState(${this.emitMappedExpression(item.initializer)}, ${JSON.stringify(item.name)});`);
-            }
-            else if (item.kind === "ExtensionStatement:web:computed") {
-                lines.push(`${bodyIndent}const ${item.name} = __velarComputed(() => (${this.emitMappedExpression(item.initializer)}));`);
-            }
-            else if (item.kind === "ExtensionStatement:web:resource") {
-                lines.push(`${bodyIndent}const ${item.name} = __velarResource(() => ${this.emitMappedExpression(item.initializer)}, __velarComponentScope, ${JSON.stringify(item.name)});`);
-            }
-            else if (item.kind === "ExtensionStatement:web:action") {
-                const parameters = item.parameters.map((parameter) => this.emitParameter(parameter.name, parameter.defaultValue, parameter.rest)).join(", ");
-                const actionLines = [...this.emitStatementLines(item.body, depth + 3)];
-                if (!this.blockAlwaysReturns(item.body))
-                    actionLines.push(`${"  ".repeat(depth + 3)}return null;`);
-                const actionBody = actionLines.join("\n");
-                lines.push(`${bodyIndent}const ${item.name} = __velarAction(async (${parameters}) => {${actionBody ? `\n${actionBody}\n${bodyIndent}` : ""}}, __velarComponentScope, ${JSON.stringify(item.name)});`);
-            }
-            else if (item.kind === "ExtensionStatement:web:watch") {
-                const parameters = [item.currentName, item.previousName].filter((name) => name !== null).join(", ");
-                const watchLines = this.emitStatementLines(item.body, depth + 3).join("\n");
-                lines.push(`${bodyIndent}__velarWatch(() => ${this.emitMappedExpression(item.expression)}, (${parameters}) => {${watchLines ? `\n${watchLines}\n${bodyIndent}` : ""}}, __velarComponentScope, ${JSON.stringify(webWatchSubjectLabel(item.expression))});`);
-            }
-            else if (item.kind === "ExtensionStatement:web:expose") {
-                expose ??= item.value;
-            }
-            else if (item.kind === "ExtensionStatement:web:mounted") {
-                mountedBody = item.body;
-            }
-            else if (item.kind === "ExtensionStatement:web:cleanup") {
-                cleanupBody = item.body;
-            }
-            else if (item.kind === "ReturnStatement") {
-                render = item.value;
-            }
-            else {
-                lines.push(this.emitMappedStatement(item, depth + 2));
-            }
-        }
-        // A direct JSX root owns its own attribute/child observers and keeps a
-        // stable host. Every other WebNode expression is a live root position:
-        // evaluate it inside a dedicated child scope so conditions and helper
-        // calls can replace the root without rerunning component setup.
-        let renderedRoot = "__velarDomCreateComment(\"missing render\")";
-        if (render) {
-            if (isWebJsx(render))
-                renderedRoot = this.emitMappedExpression(render);
-            else {
-                const rootScope = this.currentScope;
-                this.currentScope = "__velarDynamicScope";
-                try {
-                    renderedRoot = `__velarDynamicComponent((__velarDynamicScope) => ${this.emitMappedExpression(render)}, __velarComponentScope)`;
-                }
-                finally {
-                    this.currentScope = rootScope;
-                }
-            }
-        }
-        lines.push(`${bodyIndent}const __velarRoot = ${renderedRoot};`);
-        lines.push(`${bodyIndent}const __velarHandle = ${expose ? `__velarComponentHandle(${this.emitMappedExpression(expose)}, ${JSON.stringify(statement.name)})` : "null"};`);
-        lines.push(`${bodyIndent}if (__velarProps.class !== undefined) __velarClassBindRoot(__velarRoot, () => __velarProps.class, __velarComponentScope);`);
-        lines.push(`${bodyIndent}if (__velarProps.look !== undefined) __velarLookBindRoot(__velarRoot, () => __velarProps.look, __velarComponentScope);`);
-        // 'class' and 'look' are fields a component may declare and read, so they
-        // arrive as props. The 'style:' slot is not: it is bound to the instance
-        // root by whoever wrote it, at the instantiation site, for every component
-        // alike -- see __velarInstantiate.
-        const mounted = this.emitStatementLines(mountedBody, depth + 3).join("\n");
-        const cleanup = cleanupBody.map((child) => {
-            if (["VariableDeclaration", "FunctionDeclaration", "ClassDeclaration", "TypeDeclaration", "EnumDeclaration"].includes(child.kind)) {
-                return this.emitMappedStatement(child, depth + 3);
-            }
-            const inner = this.emitMappedStatement(child, depth + 4);
-            if (!inner)
-                return "";
-            const cleanupIndent = "  ".repeat(depth + 3);
-            return `${cleanupIndent}__velarCleanupStep(() => {\n${inner}\n${cleanupIndent}}, __velarComponentScope);`;
-        }).filter(Boolean).join("\n");
-        const cleanupBodyText = `() => {${cleanup ? `\n${cleanup}\n${bodyIndent}` : ""}}`;
-        const functionLines = [
-            `${outerIndent}const __velarComponentScope = __velarSetupBegin(__velarScope(${JSON.stringify(statement.name)}));`,
-            `${outerIndent}let __velarConstructionCleanup = () => {};`,
-            `${outerIndent}try {`,
-            `${bodyIndent}__velarConstructionCleanup = ${cleanupBodyText};`,
-            ...lines,
-            `${bodyIndent}return __velarSetupEnd(__velarComponent(__velarRoot, __velarComponentScope, async () => {${mounted ? `\n${mounted}\n${bodyIndent}` : ""}}, __velarConstructionCleanup, __velarHandle));`,
-            `${outerIndent}} catch (__velarConstructionError) {`,
-            `${bodyIndent}__velarSetupEnd(null);`,
-            `${bodyIndent}try { __velarConstructionCleanup(); } catch (__velarCleanupError) { __velarReport(__velarCleanupError, "cleanup", __velarComponentScope); }`,
-            `${bodyIndent}__velarDestroyScope(__velarComponentScope);`,
-            `${bodyIndent}throw __velarConstructionError;`,
-            `${outerIndent}}`,
-        ];
-        this.currentScope = previousScope;
-        this.currentJsxNamespace = previousJsxNamespace;
-        return `${indentation}${statement.exported ? "export " : ""}function ${statement.name}(__velarProps = {}, __velarNamespace = "html") {\n${functionLines.filter(Boolean).join("\n")}\n${indentation}}`;
-    }
-    emitReactiveAssignment(statement, depth) {
-        const indentation = "  ".repeat(depth);
-        if (statement.target.kind === "IdentifierExpression"
-            && this.hints.reactiveReferences.get(spanIdentity(statement.target.span)) === "state") {
-            const state = statement.target.name;
-            const value = this.emitMappedExpression(statement.value);
-            if (statement.operator === "=")
-                return `${indentation}${state}.set(${value});`;
-            return `${indentation}${state}.set(${state}.get() ${statement.operator.slice(0, -1)} ${value});`;
-        }
-        return null;
-    }
-    emitJsx(expression, scope, asChild, namespace, mapped = true) {
-        const render = () => this.emitJsxCode(expression, scope, asChild, namespace);
-        return mapped ? this.emitMappedJavaScript(expression.span, render) : render();
-    }
-    emitJsxCode(expression, scope, asChild, namespace) {
-        if (/^[A-Z]/u.test(expression.tag)) {
-            const reactiveComponent = this.hints.reactiveReferences.has(spanIdentity(expression.tagSpan));
-            const componentScope = reactiveComponent ? "__velarDynamicScope" : scope;
-            const previousScope = this.currentScope;
-            if (reactiveComponent)
-                this.currentScope = componentScope;
-            try {
-                // Static component identity keeps the existing stable child fast path.
-                // A reactive Component value owns a dynamic region that remounts only
-                // when the constructor identity itself changes; ordinary prop updates
-                // continue through the child's live prop cells.
-                const properties = expression.attributes
-                    .filter((attribute) => attribute.name !== "key" && attribute.name !== "ref" && attribute.name !== "look" && !attribute.name.startsWith("look:")
-                    && attribute.name !== "style" && !attribute.name.startsWith("style:"))
-                    .map((attribute) => this.emitMappedJavaScript(attribute.span, () => `${this.emitObjectKey(attribute.name)}: () => (${this.emitJsxAttributeValue(attribute)})`));
-                const lookValue = this.emitJsxLookValue(expression);
-                const lookAttribute = expression.attributes.find((attribute) => attribute.name === "look" || attribute.name.startsWith("look:"));
-                if (lookValue && lookAttribute) {
-                    properties.push(this.emitMappedJavaScript(lookAttribute.span, () => `look: () => (${lookValue})`));
-                }
-                const styleValue = this.emitJsxStyleValue(expression);
-                const styleAttribute = expression.attributes.find((attribute) => attribute.name.startsWith("style:"));
-                if (styleValue && styleAttribute) {
-                    properties.push(this.emitMappedJavaScript(styleAttribute.span, () => `__velarStyle: () => (${styleValue})`));
-                }
-                // Children stay a thunk so the charter's evaluation order holds at
-                // the runtime boundary: props left to right, then children, then the
-                // component function. The thunk takes the scope to build into, so the
-                // position that shows the slot owns what it built and destroys it when
-                // it stops showing it.
-                const children = hasMeaningfulChildren(expression.children)
-                    ? `(__velarChildrenScope = ${componentScope}) => (${this.emitJsxChildrenCode(expression.children, namespace)})`
-                    : "undefined";
-                const ref = expression.attributes.find((attribute) => attribute.name === "ref")?.value;
-                const refSetter = ref && typeof ref !== "string" && ref.kind === "IdentifierExpression"
-                    ? `(next, previous) => { if (previous === undefined || ${ref.name} === previous) ${ref.name} = next; }`
-                    : null;
-                const component = reactiveComponent ? `${expression.tag}.get()` : expression.tag;
-                const arguments_ = `${component}, { ${properties.join(", ")} }, ${children}, ${componentScope}, ${namespace}${refSetter ? `, ${refSetter}` : ""}`;
-                if (reactiveComponent) {
-                    return `__velarDynamicComponent((__velarDynamicScope) => __velarChild(${arguments_}), ${scope})`;
-                }
-                if (asChild)
-                    return `__velarChild(${arguments_})`;
-                // D90 R4-b's designed site: `const root = <App />` builds its instance
-                // while the module evaluates, which is outside every transaction the
-                // runtime owns. The site stays legal and eager; only its failure moves,
-                // from an uncaught module-evaluation throw to the same no-blank-page
-                // machinery `mount` has always run.
-                return `${this.moduleEvaluation ? "__velarModuleInstantiate" : "__velarInstantiate"}(${arguments_})`;
-            }
-            finally {
-                this.currentScope = previousScope;
-            }
-        }
-        const id = ++this.jsxId;
-        const element = `__velarElement${id}`;
-        const elementNamespace = expression.tag === "svg" ? '"svg"' : namespace;
-        const childNamespace = expression.tag === "foreignObject" ? '"html"' : elementNamespace;
-        const lines = [expression.tag
-                ? `const ${element} = __velarCreateElement(${JSON.stringify(expression.tag)}, ${elementNamespace});`
-                : `const ${element} = __velarDomCreateFragment();`];
-        let emittedLook = false;
-        let emittedStyle = false;
-        for (const attribute of expression.attributes) {
-            if (attribute.name === "key")
-                continue;
-            if (attribute.name === "look" || attribute.name.startsWith("look:")) {
-                if (!emittedLook) {
-                    emittedLook = true;
-                    const lookValue = this.emitJsxLookValue(expression);
-                    if (lookValue)
-                        lines.push(this.emitMappedJavaScript(attribute.span, () => `__velarLookBind(${element}, () => ${lookValue}, ${scope});`));
-                }
-                continue;
-            }
-            if (attribute.name.startsWith("style:")) {
-                if (!emittedStyle) {
-                    emittedStyle = true;
-                    const styleValue = this.emitJsxStyleValue(expression);
-                    if (styleValue)
-                        lines.push(this.emitMappedJavaScript(attribute.span, () => `__velarStyleBind(${element}, () => (${styleValue}), ${scope});`));
-                }
-                continue;
-            }
-            if (attribute.name === "style")
-                continue;
-            lines.push(this.emitMappedJavaScript(attribute.span, () => {
-                const value = attribute.value;
-                if (attribute.name === "ref" && value && typeof value !== "string" && value.kind === "IdentifierExpression") {
-                    return `${value.name} = ${element}; __velarAppendOwned(${scope}.cleanups, () => { if (${value.name} === ${element}) ${value.name} = null; });`;
-                }
-                if (attribute.name.startsWith("on:") && value && typeof value !== "string") {
-                    const [event, ...modifiers] = attribute.name.slice(3).split(".");
-                    return `__velarOn(${element}, ${JSON.stringify(event)}, () => (${this.emitMappedExpression(value)}), ${scope}, ${JSON.stringify(modifiers)});`;
-                }
-                if (attribute.name === "bind:value" && value && typeof value !== "string") {
-                    const numeric = expression.tag === "input" && expression.attributes.some((item) => item.name === "type" && item.value === "number");
-                    const enumName = this.hints.enumValueBindings.get(attribute.span.start);
-                    return `__velarBindValue(${element}, ${this.emitBindTarget(value)}, ${scope}, ${numeric}${enumName ? `, ${enumName}.parse` : ""});`;
-                }
-                if (attribute.name === "bind:checked" && value && typeof value !== "string") {
-                    return `__velarBindChecked(${element}, ${this.emitBindTarget(value)}, ${scope});`;
-                }
-                if (attribute.name === "bind:group" && value && typeof value !== "string") {
-                    const multiple = expression.attributes.some((item) => item.name === "type" && item.value === "checkbox");
-                    const enumName = this.hints.enumValueBindings.get(attribute.span.start);
-                    return `__velarBindGroup(${element}, ${this.emitBindTarget(value)}, ${scope}, ${multiple}${enumName ? `, ${enumName}.parse` : ""});`;
-                }
-                if (attribute.name.startsWith("class:") && value && typeof value !== "string") {
-                    return `__velarClass(${element}, ${JSON.stringify(attribute.name.slice(6))}, () => ${this.emitMappedExpression(value)}, ${scope});`;
-                }
-                if (attribute.name === "host")
-                    return `${element}.__velarHost = true;`;
-                if (attribute.name === "class" && value && typeof value !== "string") {
-                    return `__velarClassBind(${element}, () => ${this.emitMappedExpression(value)}, ${scope});`;
-                }
-                if (attribute.name === "unsafe:html") {
-                    const html = typeof value === "string" ? JSON.stringify(value) : value === null ? '""' : this.emitMappedExpression(value);
-                    return `__velarHtml(${element}, () => ${html}, ${scope});`;
-                }
-                if (typeof value === "string" || value === null) {
-                    return `__velarStaticAttr(${element}, ${JSON.stringify(attribute.name)}, ${value === null ? "true" : JSON.stringify(value)});`;
-                }
-                return `__velarAttr(${element}, ${JSON.stringify(attribute.name)}, () => ${this.emitMappedExpression(value)}, ${scope});`;
-            }));
-        }
-        for (const child of expression.children) {
-            if (child.kind === "JSXText") {
-                const text = normalizeJsxText(child.value);
-                if (text)
-                    lines.push(this.emitMappedJavaScript(child.span, () => `__velarDomAppend(${element}, __velarDomCreateTextNode(${JSON.stringify(text)}));`));
-            }
-            else if (child.kind === "ExtensionExpression:web:jsx") {
-                lines.push(this.emitMappedJavaScript(child.span, () => `__velarAppend(${element}, ${this.emitJsx(child, scope, true, childNamespace)});`));
-            }
-            else {
-                lines.push(this.emitMappedJavaScript(child.expression.span, () => this.emitDynamicChild(element, child.expression, scope, childNamespace)));
-            }
-        }
-        lines.push(`return ${element};`);
-        return `(() => { ${lines.join(" ")} })()`;
-    }
-    emitJsxChildren(children, scope, namespace) {
-        const fragmentSpan = children[0]?.span ?? { start: 0, end: 0 };
-        const fragment = { kind: "ExtensionExpression:web:jsx", tag: "", tagSpan: { start: fragmentSpan.start, end: fragmentSpan.start }, attributes: [], children, span: fragmentSpan };
-        return this.emitJsx(fragment, scope, true, namespace);
-    }
-    // The slot body builds into whichever scope the consuming position hands it,
-    // so every observer, ref and cleanup it registers dies with that position
-    // rather than accumulating on the caller for the component's whole lifetime.
-    emitJsxChildrenCode(children, namespace) {
-        const previousScope = this.currentScope;
-        this.currentScope = "__velarChildrenScope";
-        try {
-            return this.emitJsxChildren(children, "__velarChildrenScope", namespace);
-        }
-        finally {
-            this.currentScope = previousScope;
-        }
-    }
-    emitDynamicChild(parent, expression, scope, namespace) {
-        const leaves = dynamicChildLeaves(expression);
-        const previousScope = this.currentScope;
-        const previousJsxNamespace = this.currentJsxNamespace;
-        this.currentScope = "__velarChildScope";
-        this.currentJsxNamespace = namespace;
-        // A conditional splits into one region per branch leaf only when a keyed
-        // list is somewhere among them; each region gates itself on the shared
-        // branch conditions, so at most one region renders content at a time and
-        // the keyed list keeps identity-preserving children across the branch flip.
-        // Without a keyed leaf the interpolation stays one dynamic region -- unless
-        // its checked type can only ever be one text node, which is the whole tree
-        // of a conversation surface and is answered by one text node instead (F1).
-        const keyed = leaves.some((leaf) => leaf.list?.key);
-        const scalarText = !keyed && this.isScalarTextChild(expression);
-        // A scalar region owns no child scope, so nothing inside it may address
-        // one; the guard above proves nothing does.
-        if (scalarText)
-            this.currentScope = scope;
-        const statements = keyed
-            ? leaves.map((leaf) => this.emitDynamicChildLeaf(parent, leaf, scope, namespace))
-            : scalarText
-                ? [`__velarText(${parent}, () => ${this.emitMappedExpression(expression)}, ${scope});`]
-                : [`__velarDynamic(${parent}, (__velarChildScope) => ${this.emitMappedExpression(expression)}, ${scope});`];
-        this.currentScope = previousScope;
-        this.currentJsxNamespace = previousJsxNamespace;
-        return statements.join(" ");
-    }
     /**
-     * The two conditions for the scalar-text fast path, both of which must hold:
-     * the analyzer proved the checked type renders as exactly one text node, and
-     * the expression builds no JSX of its own. Everything else keeps the full
-     * dynamic region, so a widening of the type rule can only ever be a
-     * deliberate edit to `VelarWebAnalyzer.isScalarTextType`.
+     * The one object every family is handed. Its properties are live reads and
+     * writes of this emitter: a family that records "this module needs the
+     * file-type helper" or assigns the stylesheet must set the emitter's own
+     * field, because `emit()`, `css()` and `styleSegments()` read them after
+     * every family has run.
      */
-    isScalarTextChild(expression) {
-        return this.hints.extensionCalls.get(spanIdentity(expression.span)) === JSX_SCALAR_TEXT_HINT
-            && !containsJsxExpression(expression);
-    }
-    emitDynamicChildLeaf(parent, leaf, scope, namespace) {
-        const list = leaf.list;
-        if (list?.key) {
-            const source = this.emitGuardedExpression(leaf.guards, this.emitMappedExpression(list.source), "[]");
-            const parameter = list.arrow.parameters[0].name;
-            const key = this.emitJsxAttributeValue(list.key);
-            const render = this.emitJsx(list.arrow.body, "__velarChildScope", true, namespace);
-            return `__velarKeyed(${parent}, () => ${source}, (${parameter}) => ${key}, (${parameter}, __velarChildScope) => ${render}, ${scope});`;
-        }
-        const value = this.emitGuardedExpression(leaf.guards, this.emitMappedExpression(leaf.expression), "null");
-        return `__velarDynamic(${parent}, (__velarChildScope) => ${value}, ${scope});`;
-    }
-    // Wraps a leaf's expression in its branch conditions, innermost last, so the
-    // leaf evaluates only while its branch is active and yields the inactive
-    // placeholder ('[]' for keyed reads, 'null' for dynamic regions) otherwise.
-    emitGuardedExpression(guards, inner, inactive) {
-        let output = inner;
-        for (let index = guards.length - 1; index >= 0; index -= 1) {
-            const guard = guards[index];
-            const condition = this.emitMappedExpression(guard.condition);
-            output = guard.thenBranch
-                ? `(${condition}) ? (${output}) : ${inactive}`
-                : `(${condition}) ? ${inactive} : (${output})`;
-        }
-        return output;
-    }
-    /**
-     * D47 rule 84(A): a bind target is a state cell, or a writable reactive
-     * location inside one. A member/index path lowers to the get/set pair the
-     * binding helpers already expect, so a field of state reads and writes through
-     * exactly the same statements the author would have written by hand.
-     */
-    emitBindTarget(value) {
-        if (value.kind === "IdentifierExpression")
-            return value.name;
-        const next = { kind: "IdentifierExpression", name: "__velarBindNext", span: value.span };
-        const read = this.emitMappedExpression(value);
-        const assignment = { kind: "AssignmentStatement", target: value, value: next, operator: "=", span: value.span };
-        const write = this.emitStatement(assignment, 0).trim();
-        return `{ get: () => (${read}), set: (__velarBindNext) => { ${write} } }`;
-    }
-    emitJsxAttributeValue(attribute) {
-        if (attribute.value === null)
-            return "true";
-        if (typeof attribute.value === "string")
-            return JSON.stringify(attribute.value);
-        return this.emitMappedExpression(attribute.value);
-    }
-    emitJsxLookValue(expression) {
-        const base = expression.attributes.find((attribute) => attribute.name === "look");
-        const inline = expression.attributes.filter((attribute) => attribute.name.startsWith("look:"));
-        const baseValue = base?.value && typeof base.value !== "string" ? this.emitMappedExpression(base.value) : null;
-        if (inline.length === 0)
-            return baseValue;
-        const rules = inline.map((attribute) => {
-            const property = cssPropertyName(attribute.name.slice("look:".length));
-            const token = lookToken([], "", property);
-            const value = attribute.value === null ? "null"
-                : typeof attribute.value === "string" ? JSON.stringify(attribute.value)
-                    : this.emitMappedExpression(attribute.value);
-            return `${JSON.stringify(token)}: ${value}`;
-        });
-        const anonymous = `{ rules: { ${rules.join(", ")} } }`;
-        return `__velarLook([${[baseValue, anonymous].filter(Boolean).join(", ")}])`;
-    }
-    emitJsxStyleValue(expression) {
-        const inline = expression.attributes.filter((attribute) => attribute.name.startsWith("style:"));
-        if (inline.length === 0)
-            return null;
-        const properties = inline.map((attribute) => {
-            const property = cssPropertyName(attribute.name.slice("style:".length));
-            const value = attribute.value === null ? "null"
-                : typeof attribute.value === "string" ? JSON.stringify(attribute.value)
-                    : this.emitMappedExpression(attribute.value);
-            return `${JSON.stringify(property)}: ${value}`;
-        });
-        return `{ ${properties.join(", ")} }`;
-    }
-    prepareLooks(program) {
-        const rules = new Map();
-        const keyframeRules = new Map();
-        const keyframeCanonicals = new Map();
-        this.keyframeNames.clear();
-        this.lookKeywordProperties.clear();
-        // A token's stylesheet position used to be wherever it first appeared
-        // anywhere in the module, because a Map keeps first-insertion order. The
-        // sequence records that first appearance explicitly so emission can sort by
-        // condition rank first and fall back to declaration order, rather than
-        // letting an unrelated earlier look decide a later one's winner (LOK-U8).
-        let sequence = 0;
-        const addRule = (token, property, target, staticAtoms) => {
-            if (rules.has(token))
-                return;
-            rules.set(token, { token, property, target, staticAtoms, sequence: sequence += 1 });
-        };
-        const noteKeywordProperty = (name) => {
-            if (LOOK_PROPERTY_VALUE_KINDS.get(name) === "keyword")
-                this.lookKeywordProperties.add(name);
-        };
-        const visit = (value) => {
-            if (!value || typeof value !== "object")
-                return;
-            const record = value;
-            if (record.kind === "ExtensionExpression:web:jsx") {
-                const element = record;
-                for (const attribute of element.attributes) {
-                    if (!attribute.name.startsWith("look:") && !attribute.name.startsWith("style:"))
-                        continue;
-                    const name = attribute.name.slice(attribute.name.indexOf(":") + 1);
-                    if (!LOOK_PROPERTIES.has(name))
-                        continue;
-                    noteKeywordProperty(name);
-                    if (!attribute.name.startsWith("look:"))
-                        continue;
-                    const property = cssPropertyName(name);
-                    addRule(lookToken([], "", property), property, "", []);
-                }
-            }
-            if (record.kind === "ExtensionExpression:web:look") {
-                const collect = (entries, contexts = [EMPTY_LOOK_TERM], target = "") => {
-                    for (const entry of entries) {
-                        if (entry.kind === "LookProperty") {
-                            const property = cssPropertyName(entry.name);
-                            noteKeywordProperty(entry.name);
-                            for (const context of contexts) {
-                                addRule(lookToken(context.staticAtoms, target, property), property, target, context.staticAtoms);
-                            }
-                        }
-                        else if (entry.kind === "LookIf") {
-                            collect(entry.thenEntries, combineLookTerms(contexts, lookConditionTerms(entry.condition, false, this.lookStaticValues)), target);
-                            collect(entry.elseEntries, combineLookTerms(contexts, lookConditionTerms(entry.condition, true, this.lookStaticValues)), target);
-                        }
-                        else if (entry.kind === "LookTarget") {
-                            collect(entry.entries, contexts, entry.name);
-                        }
-                    }
-                };
-                collect(record.entries);
-            }
-            if (record.kind === "ExtensionExpression:web:keyframes") {
-                const expression = record;
-                const canonical = keyframesCanonical(expression, this.lookStaticValues);
-                const name = keyframesName(canonical);
-                this.keyframeNames.set(spanIdentity(expression.span), name);
-                const reused = keyframeCanonicals.get(name);
-                // The name is a promise that equal structures share one rule. Reusing
-                // it for a structure that is not equal would make one animation play
-                // another's motion, so the reuse path proves the identity rather than
-                // trusting the digest (LOK-U11).
-                if (reused !== undefined && reused !== canonical) {
-                    throw new Error(`Generated keyframes name ${name} collides between two different keyframe structures`);
-                }
-                if (reused === undefined) {
-                    keyframeCanonicals.set(name, canonical);
-                    const stops = [...expression.stops]
-                        .sort((left, right) => Math.min(...left.offsets) - Math.min(...right.offsets))
-                        .map((stop) => {
-                        const selectors = [...stop.offsets].sort((left, right) => left - right)
-                            .map((offset) => offset === 0 ? "from" : offset === 100 ? "to" : `${offset}%`)
-                            .join(",");
-                        const declarations = stop.entries.map((entry) => {
-                            const css = keyframeCssValue(entry.value, this.lookStaticValues);
-                            // A value the lowering could not prove is one balanced
-                            // declaration never reaches the concatenation: `}` in a stop
-                            // closed the at-rule and turned the rest into author-owned CSS
-                            // in the compiler-owned segment (LOK-U9). The analyzer already
-                            // reports the same null as a diagnostic, so emission only has
-                            // to stay structurally incapable of writing the escape.
-                            return css === null || !isCssDeclarationValue(css) ? "" : `${cssPropertyName(entry.name)}:${css}`;
-                        }).filter(Boolean).join(";");
-                        return `${selectors}{${declarations}}`;
-                    }).join("");
-                    keyframeRules.set(name, `@keyframes ${name}{${stops}}`);
-                }
-            }
-            for (const child of Object.values(record)) {
-                if (Array.isArray(child))
-                    child.forEach(visit);
-                else
-                    visit(child);
-            }
-        };
-        visit(program);
-        const lookCss = [...rules.values()]
-            .map((rule) => ({ rule, depth: lookConditionDepth(rule.staticAtoms) }))
-            // Rank decides, and declaration order only separates rules that share a
-            // rank. Emission used to follow the Map, so the sheet's byte order — and
-            // through it the per-module concatenation order the CLI sorts by
-            // filename — could pick the winner of a tie (LOK-U8, LOK-U10).
-            .sort((left, right) => left.depth - right.depth || left.rule.sequence - right.rule.sequence)
-            .map(({ rule, depth }) => {
-            const hookAtoms = rule.staticAtoms.filter((atom) => atom.kind === "hook");
-            const mediaAtoms = rule.staticAtoms.filter((atom) => atom.kind === "media" || atom.kind === "scheme" || atom.kind === "motion");
-            const base = `[data-velar-look~=${JSON.stringify(rule.token)}]${"[data-velar-look]".repeat(depth)}`;
-            const selectors = lookSelectors(base, hookAtoms, rule.target);
-            const css = `${selectors.join(",")}{${lookDeclaration(rule.token, rule.property)}}`;
-            const query = mediaAtoms.map(lookMediaQuery).join(" and ");
-            return query ? `@media ${query}{${css}}` : css;
-        });
-        const before = [];
-        const after = [];
-        for (const statement of program.body) {
-            if (!isWebStatement(statement) || statement.kind !== "ExtensionStatement:web:unsafe-css")
-                continue;
-            const source = statement.source.kind === "inline"
-                ? statement.source.css
-                : this.resourceContents.get(statement.source.path) ?? "";
-            (statement.placement === "after" ? after : before).push(source.trim());
-        }
-        this.cssSegments = {
-            before: before.filter(Boolean).join("\n\n"),
-            controlled: [...keyframeRules.values(), ...lookCss].filter(Boolean).join("\n\n"),
-            after: after.filter(Boolean).join("\n\n"),
+    emitHost() {
+        const emitter = this;
+        return {
+            get currentJsxNamespace() { return emitter.currentJsxNamespace; },
+            set currentJsxNamespace(value) { emitter.currentJsxNamespace = value; },
+            get currentScope() { return emitter.currentScope; },
+            set currentScope(value) { emitter.currentScope = value; },
+            get cssOutput() { return emitter.cssOutput; },
+            set cssOutput(value) { emitter.cssOutput = value; },
+            get cssSegments() { return emitter.cssSegments; },
+            set cssSegments(value) { emitter.cssSegments = value; },
+            get hints() { return emitter.hints; },
+            get importedLookStaticValues() { return emitter.importedLookStaticValues; },
+            get jsxId() { return emitter.jsxId; },
+            set jsxId(value) { emitter.jsxId = value; },
+            get keyframeNames() { return emitter.keyframeNames; },
+            get lookKeywordProperties() { return emitter.lookKeywordProperties; },
+            get lookStaticValues() { return emitter.lookStaticValues; },
+            set lookStaticValues(value) { emitter.lookStaticValues = value; },
+            get moduleEvaluation() { return emitter.moduleEvaluation; },
+            get needsFileTypeHelper() { return emitter.needsFileTypeHelper; },
+            set needsFileTypeHelper(value) { emitter.needsFileTypeHelper = value; },
+            get needsLookArithmeticRuntime() { return emitter.needsLookArithmeticRuntime; },
+            get resourceContents() { return emitter.resourceContents; },
+            get webOutput() { return emitter.webOutput; },
+            baseDetachedTaskHelpers: () => super.detachedTaskHelpers(),
+            baseIsCheck: (type, value) => super.emitIsCheck(type, value),
+            baseReactiveBridgeHelpers: (needsJavaScriptCallBoundary, needsCollections, usedIdentifiers) => super.reactiveBridgeHelpers(needsJavaScriptCallBoundary, needsCollections, usedIdentifiers),
+            baseTypeCheck: (type, value, state) => super.emitTypeCheck(type, value, state),
+            blockAlwaysReturns: (statements) => emitter.blockAlwaysReturns(statements),
+            emitCondition: (expression) => emitter.emitCondition(expression),
+            emitMappedExpression: (expression) => emitter.emitMappedExpression(expression),
+            emitMappedJavaScript: (sourceSpan, render) => emitter.emitMappedJavaScript(sourceSpan, render),
+            emitMappedStatement: (statement, depth) => emitter.emitMappedStatement(statement, depth),
+            emitObjectKey: (name) => emitter.emitObjectKey(name),
+            emitParameter: (name, defaultValue, rest) => emitter.emitParameter(name, defaultValue, rest),
+            emitStatement: (statement, depth) => emitter.emitStatement(statement, depth),
+            emitStatementLines: (statements, depth) => emitter.emitStatementLines(statements, depth),
+            requireRuntimeModule: (source) => emitter.requireRuntimeModule(source),
+            usesSharedRuntimeModules: () => emitter.usesSharedRuntimeModules(),
         };
-        this.cssOutput = [this.cssSegments.before, this.cssSegments.controlled, this.cssSegments.after].filter(Boolean).join("\n\n");
-        if (this.cssOutput)
-            this.cssOutput += "\n";
-    }
-}
-function normalizeJsxText(value) {
-    const normalized = value.replace(/\s+/gu, " ");
-    if (!value.includes("\n"))
-        return normalized;
-    return (/^\s*\n/u.test(value) ? normalized.trimStart() : normalized).replace(/\n\s*$/u.test(value) ? /\s+$/u : /$^/u, "");
-}
-function hasMeaningfulChildren(children) {
-    return children.some((child) => child.kind !== "JSXText" || child.value.trim().length > 0);
-}
-// The keyed-children fast path is syntactic: an interpolation leaf must be
-// exactly `source.map(single-parameter arrow returning JSX)`, keyed when the
-// arrow's root element carries a `key` attribute. The analyzer mirrors this
-// recognizer through dynamicChildLeaves, so anything the emitter demotes to a
-// rebuild-all dynamic region is diagnosed rather than silently forfeited.
-export function jsxKeyedList(expression) {
-    if (expression.kind !== "CallExpression" || expression.callee.kind !== "MemberExpression" || expression.callee.property !== "map")
-        return null;
-    const callback = expression.arguments[0];
-    if (!callback || callback.kind !== "ArrowFunctionExpression" || callback.asynchronous || callback.parameters.length !== 1 || callback.body.kind !== "ExtensionExpression:web:jsx")
-        return null;
-    const arrow = callback;
-    const key = arrow.body.attributes.find((attribute) => attribute.name === "key") ?? null;
-    return { source: expression.callee.object, arrow, key };
-}
-/**
- * F1: the analyzer's verdict that an interpolation's checked type renders as
- * exactly one text node. The emitter cannot re-derive it — the checked type is
- * gone by lowering time — so the analyzer stamps the child expression's span
- * and the emitter reads it back through the extension-hint channel that
- * `LOOK_ARITHMETIC_HINT` already uses.
- */
-export const JSX_SCALAR_TEXT_HINT = "@velarscript/web:jsx-scalar-text";
-/**
- * The one thing a scalar interpolation must not contain. `__velarText` owns no
- * child scope, so a nested element inside the expression — legal where a
- * function takes a `WebNode` and answers text — would have nothing to register
- * its observers and cleanups against. The type says one text node; this says
- * nothing was built to make it.
- */
-function containsJsxExpression(value) {
-    if (!value || typeof value !== "object")
-        return false;
-    const record = value;
-    if (record.kind === "ExtensionExpression:web:jsx")
-        return true;
-    return Object.values(record).some((child) => Array.isArray(child) ? child.some(containsJsxExpression) : containsJsxExpression(child));
-}
-// Flattens an interpolation into render leaves. A conditional contributes its
-// branch leaves, each remembering the chain of branch conditions that keeps it
-// active, so an empty-state ternary around a keyed list still reaches the
-// keyed fast path instead of demoting every child to rebuild-all updates.
-export function dynamicChildLeaves(expression, guards = []) {
-    const list = jsxKeyedList(expression);
-    if (list)
-        return [{ expression, list, guards }];
-    if (expression.kind === "ConditionalExpression") {
-        return [
-            ...dynamicChildLeaves(expression.thenValue, [...guards, { condition: expression.condition, thenBranch: true }]),
-            ...dynamicChildLeaves(expression.elseValue, [...guards, { condition: expression.condition, thenBranch: false }]),
-        ];
-    }
-    return [{ expression, list: null, guards }];
-}
-const EMPTY_LOOK_TERM = Object.freeze({ staticAtoms: [], runtimeAtoms: [] });
-const LOOK_CONDITION_TERM_LIMIT = 32;
-function lookConditionTerms(expression, negated = false, staticValues = new Map()) {
-    if (expression.kind === "UnaryExpression" && expression.operator === "not")
-        return lookConditionTerms(expression.operand, !negated, staticValues);
-    if (expression.kind === "BinaryExpression" && (expression.operator === "and" || expression.operator === "or")) {
-        const conjunction = (expression.operator === "and") !== negated;
-        const left = lookConditionTerms(expression.left, negated, staticValues);
-        const right = lookConditionTerms(expression.right, negated, staticValues);
-        return conjunction ? combineLookTerms(left, right) : [...left, ...right].slice(0, LOOK_CONDITION_TERM_LIMIT);
-    }
-    if (isWebExpression(expression) && expression.kind === "ExtensionExpression:web:look-hook") {
-        return [{ staticAtoms: [{ kind: "hook", name: expression.name, negated }], runtimeAtoms: [] }];
-    }
-    const media = viewportAtom(expression, negated, staticValues) ?? schemeAtom(expression, negated);
-    if (media)
-        return [{ staticAtoms: [media], runtimeAtoms: [] }];
-    return [{ staticAtoms: [], runtimeAtoms: [{ expression, negated }] }];
-}
-// A breakpoint is complementary the way the schemes and the motion preference
-// are: `not (width <= X)` is `width > X`, one condition with one media query.
-// The atom therefore folds the negation into its operator at construction, so
-// the two spellings reach `lookToken` as the same token instead of as two
-// rules that tie on specificity and are separated by source order.
-const LOOK_NEGATED_MEDIA_OPERATORS = new Map([
-    ["<", ">="], ["<=", ">"], [">", "<="], [">=", "<"],
-]);
-function viewportAtom(expression, negated, staticValues) {
-    if (expression.kind !== "BinaryExpression" || !["<", "<=", ">", ">="].includes(expression.operator))
-        return null;
-    if (expression.left.kind !== "MemberExpression" || expression.left.object.kind !== "IdentifierExpression" || expression.left.object.name !== "viewport")
-        return null;
-    if (expression.left.property !== "width" && expression.left.property !== "height")
-        return null;
-    const threshold = evaluateLookStaticExpression(expression.right, staticValues);
-    if (threshold?.kind !== "unit" || !LOOK_MEDIA_LENGTH_UNITS.has(threshold.unit))
-        return null;
-    const written = expression.operator;
-    return {
-        kind: "media",
-        name: expression.left.property,
-        operator: negated ? LOOK_NEGATED_MEDIA_OPERATORS.get(written) : written,
-        value: lookStaticCss(threshold),
-        negated: false,
-    };
-}
-// 'scheme.dark' / 'scheme.light' lower to prefers-color-scheme media atoms.
-// The two subjects are complementary, so negation flips to the other scheme
-// and the atom itself stays canonical.
-function schemeAtom(expression, negated) {
-    if (expression.kind !== "MemberExpression" || expression.object.kind !== "IdentifierExpression")
-        return null;
-    // LOK-U3: 'motion.reduced' joins the media subjects. prefers-reduced-motion is
-    // complementary in the same way the schemes are, so negation names the other
-    // side of the query rather than wrapping it.
-    if (expression.object.name === "motion") {
-        return expression.property === "reduced" ? { kind: "motion", name: negated ? "no-preference" : "reduce", negated: false } : null;
-    }
-    if (expression.object.name !== "scheme")
-        return null;
-    if (expression.property !== "dark" && expression.property !== "light")
-        return null;
-    const scheme = negated ? (expression.property === "dark" ? "light" : "dark") : expression.property;
-    return { kind: "scheme", name: scheme, negated: false };
-}
-function combineLookTerms(left, right) {
-    const combined = [];
-    for (const first of left) {
-        for (const second of right) {
-            combined.push({
-                staticAtoms: [...first.staticAtoms, ...second.staticAtoms],
-                runtimeAtoms: [...first.runtimeAtoms, ...second.runtimeAtoms],
-            });
-            if (combined.length >= LOOK_CONDITION_TERM_LIMIT)
-                return combined;
-        }
-    }
-    return combined;
-}
-function lookToken(atoms, target, property) {
-    const conditions = atoms.map((atom) => {
-        if (atom.kind === "hook")
-            return `${atom.negated ? "not-" : ""}${kebab(atom.name)}`;
-        if (atom.kind === "scheme")
-            return `scheme-${atom.name}`;
-        if (atom.kind === "motion")
-            return `motion-${atom.name}`;
-        return `viewport-${atom.name}-${lookOperatorName(atom.operator)}-${atom.value}`;
-    }).sort();
-    const prefix = [target ? kebab(target) : "", conditions.length > 0 ? conditions.join("+") : "base"].filter(Boolean).join(":");
-    return `${prefix}:${property}`;
-}
-/**
- * How many extra `[data-velar-look]` selectors a rule carries, so that the
- * winner between two Look rules is decided by the conditions they name rather
- * than by their position in the sheet.
- *
- * The bump used to be a single flat `+1` for any non-empty condition set, which
- * made every conditional rule specificity `(0,2,0)`: a state rule tied with a
- * media rule, and a two-condition refinement tied with the one-condition
- * fallback it refines. Ties then fell through to source order, and source order
- * is per-module concatenation order, which the CLI sorts by filename — so the
- * rendered colour could change when a file was renamed (LOK-U8, LOK-U10,
- * LOK-U12).
- *
- * The rank is base < media < state < media+state, and within a rank a rule that
- * names more conditions outranks one that names fewer. The per-rank span is
- * bounded so a pathological condition count cannot cross a rank boundary; rules
- * that saturate it fall back to declaration order, which is stable.
- */
-const LOOK_RANK_SPAN = 3;
-function lookConditionDepth(atoms) {
-    if (atoms.length === 0)
-        return 0;
-    const hooks = atoms.filter((atom) => atom.kind === "hook").length;
-    const media = atoms.length - hooks;
-    const rank = hooks > 0 ? (media > 0 ? 2 : 1) : 0;
-    return rank * LOOK_RANK_SPAN + Math.min(atoms.length, LOOK_RANK_SPAN);
-}
-function lookVariable(token) {
-    return `--velar-look-${token.replace(/[^A-Za-z0-9_-]+/gu, "-")}`;
-}
-function lookDeclaration(token, property) {
-    const value = `var(${lookVariable(token)})`;
-    return `${property}:${value}`;
-}
-function lookOperatorName(operator) {
-    return operator === "<" ? "lt" : operator === "<=" ? "lte" : operator === ">" ? "gt" : "gte";
-}
-function lookMediaQuery(atom) {
-    if (atom.kind === "scheme")
-        return `(prefers-color-scheme: ${atom.name})`;
-    if (atom.kind === "motion")
-        return `(prefers-reduced-motion: ${atom.name})`;
-    return `(${atom.name} ${atom.operator} ${atom.value})`;
-}
-function lookSelectors(base, atoms, target) {
-    let selectors = [base];
-    for (const atom of atoms) {
-        const states = lookHookSelectors(atom.name);
-        if (atom.negated) {
-            const condition = states.map((state) => `:not(${state})`).join("");
-            selectors = selectors.map((selector) => `${selector}:where(${condition})`);
-        }
-        else {
-            selectors = selectors.flatMap((selector) => states.map((state) => `${selector}:where(${state})`));
-        }
     }
-    const suffix = target ? LOOK_TARGET_SELECTORS.get(target) ?? `::${kebab(target)}` : "";
-    return selectors.map((selector) => `${selector}${suffix}`);
-}
-function lookHookSelectors(name) {
-    if (name === "focusVisible")
-        return [":focus-visible"];
-    if (name === "current")
-        return ["[aria-current=\"page\"]"];
-    if (name === "disabled")
-        return [":disabled", "[aria-disabled=\"true\"]"];
-    if (name === "checked")
-        return [":checked", "[aria-checked=\"true\"]"];
-    if (name === "invalid")
-        return [":invalid", "[aria-invalid=\"true\"]"];
-    if (name === "open")
-        return [":open", "[open]", "[aria-expanded=\"true\"]"];
-    return [`:${kebab(name)}`];
-}
-const LOOK_TARGET_SELECTORS = new Map([
-    ["before", "::before"], ["after", "::after"], ["backdrop", "::backdrop"], ["placeholder", "::placeholder"], ["selection", "::selection"],
-    ["marker", "::marker"], ["fileSelectorButton", "::file-selector-button"],
-]);
-function kebab(value) {
-    return value.replace(/[A-Z]/gu, (character) => `-${character.toLowerCase()}`);
-}
-function visitLookExpressions(entries, visit) {
-    for (const entry of entries) {
-        if (entry.kind === "LookProperty" || entry.kind === "LookSpread")
-            visit(entry.value);
-        else if (entry.kind === "LookIf") {
-            visit(entry.condition);
-            visitLookExpressions(entry.thenEntries, visit);
-            visitLookExpressions(entry.elseEntries, visit);
-        }
-        else
-            visitLookExpressions(entry.entries, visit);
-    }
-}
-function containsUnitLiteral(value) {
-    if (!value || typeof value !== "object")
-        return false;
-    const record = value;
-    if (record.kind === "ExtensionExpression:web:unit")
-        return true;
-    for (const child of Object.values(record)) {
-        if (Array.isArray(child)) {
-            if (child.some(containsUnitLiteral))
-                return true;
-        }
-        else if (containsUnitLiteral(child))
-            return true;
-    }
-    return false;
-}
-function containsWebSyntax(value) {
-    if (!value || typeof value !== "object")
-        return false;
-    const record = value;
-    if (record.kind === "ExtensionStatement:web:component" || record.kind === "ExtensionStatement:web:expose" || record.kind === "ExtensionStatement:web:unsafe-css" || record.kind === "ExtensionExpression:web:look" || record.kind === "ExtensionExpression:web:keyframes" || record.kind === "ExtensionExpression:web:jsx"
-        || record.kind === "ExtensionStatement:web:state" || record.kind === "ExtensionStatement:web:computed" || record.kind === "ExtensionStatement:web:resource" || record.kind === "ExtensionStatement:web:action" || record.kind === "ExtensionStatement:web:watch")
-        return true;
-    if (record.kind === "IdentifierExpression" && (record.name === "mount" || record.name === "tick"))
-        return true;
-    return Object.values(record).some((child) => Array.isArray(child) ? child.some(containsWebSyntax) : containsWebSyntax(child));
-}
-/**
- * The runtime an emitted Web program carries inside itself: the foundation it
- * installs, the CSS string serializer, the closed keyword sets of the Look
- * properties *this* module styles, and the runtime body. Only the keyword table
- * differs per compilation, which is why it is the one hole
- * `runtime/manifest.json` records as an assembly (LOK-U13 keeps the serializer
- * the one css-string.ts publishes rather than a second spelling of it).
- */
-function webRuntime(foundation, lookKeywords) {
-    return `${foundation}\n${CSS_STRING_RUNTIME_BODY}${lookKeywords}\n${WEB_RUNTIME_BODY}`;
 }
 //# sourceMappingURL=emitter.js.map