@zenithbuild/cli 0.6.2 → 0.6.4

package/dist/build.js

@@ -16,13 +16,11 @@ import { existsSync, readFileSync, writeFileSync } from 'node:fs';
 import { mkdir, readdir, rm, stat } from 'node:fs/promises';
 import { createRequire } from 'node:module';
 import { basename, dirname, extname, join, relative, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
 import { generateManifest } from './manifest.js';
 import { buildComponentRegistry, expandComponents, extractTemplate, isDocumentMode } from './resolve-components.js';
+import { resolveBundlerBin, resolveCompilerBin } from './toolchain-paths.js';
+import { maybeWarnAboutZenithVersionMismatch } from './version-check.js';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-const CLI_ROOT = resolve(__dirname, '..');
 const require = createRequire(import.meta.url);
 let cachedTypeScript = undefined;
 
@@ -40,40 +38,6 @@ function loadTypeScriptApi() {
     return cachedTypeScript;
 }
 
-/**
- * Resolve a binary path from deterministic candidates.
- *
- * Supports both repository layout (../zenith-*) and installed package layout
- * under node_modules/@zenithbuild (../compiler, ../bundler).
- *
- * @param {string[]} candidates
- * @returns {string}
- */
-function resolveBinary(candidates) {
-    for (const candidate of candidates) {
-        if (existsSync(candidate)) {
-            return candidate;
-        }
-    }
-    return candidates[0];
-}
-
-const COMPILER_BIN = resolveBinary([
-    resolve(CLI_ROOT, '../compiler/target/release/zenith-compiler'),
-    resolve(CLI_ROOT, '../zenith-compiler/target/release/zenith-compiler')
-]);
-
-function getBundlerBin() {
-    const envBin = process.env.ZENITH_BUNDLER_BIN;
-    if (envBin && typeof envBin === 'string' && existsSync(envBin)) {
-        return envBin;
-    }
-    return resolveBinary([
-        resolve(CLI_ROOT, '../bundler/target/release/zenith-bundler'),
-        resolve(CLI_ROOT, '../zenith-bundler/target/release/zenith-bundler')
-    ]);
-}
-
 /**
  * Build a per-build warning emitter that deduplicates repeated compiler lines.
  *
@@ -133,9 +97,11 @@ function forwardStreamLines(stream, onLine) {
  * @param {object} compilerRunOptions
  * @param {(warning: string) => void} [compilerRunOptions.onWarning]
  * @param {boolean} [compilerRunOptions.suppressWarnings]
+ * @param {string} [compilerRunOptions.compilerBin]
  * @returns {object}
  */
 function runCompiler(filePath, stdinSource, compilerOpts = {}, compilerRunOptions = {}) {
+    const compilerBin = compilerRunOptions.compilerBin || resolveCompilerBin();
     const args = stdinSource !== undefined
         ? ['--stdin', filePath]
         : [filePath];
@@ -150,7 +116,7 @@ function runCompiler(filePath, stdinSource, compilerOpts = {}, compilerRunOption
         opts.input = stdinSource;
     }
 
-    const result = spawnSync(COMPILER_BIN, args, opts);
+    const result = spawnSync(compilerBin, args, opts);
 
     if (result.error) {
         throw new Error(`Compiler spawn failed for ${filePath}: ${result.error.message}`);
@@ -200,11 +166,33 @@ function stripStyleBlocks(source) {
  * @param {string} compPath
  * @param {string} componentSource
  * @param {object} compIr
- * @returns {{ map: Map<string, string>, ambiguous: Set<string> }}
+ * @param {object} compilerOpts
+ * @param {string} compilerBin
+ * @returns {{
+ *   map: Map<string, string>,
+ *   bindings: Map<string, {
+ *     compiled_expr: string | null,
+ *     signal_index: number | null,
+ *     signal_indices: number[],
+ *     state_index: number | null,
+ *     component_instance: string | null,
+ *     component_binding: string | null
+ *   }>,
+ *   signals: Array<{ id?: number, kind?: string, state_index?: number }>,
+ *   stateBindings: Array<{ key?: string, value?: string }>,
+ *   ambiguous: Set<string>
+ * }}
  */
-function buildComponentExpressionRewrite(compPath, componentSource, compIr, compilerOpts) {
-    const out = { map: new Map(), ambiguous: new Set() };
+function buildComponentExpressionRewrite(compPath, componentSource, compIr, compilerOpts, compilerBin) {
+    const out = {
+        map: new Map(),
+        bindings: new Map(),
+        signals: Array.isArray(compIr?.signals) ? compIr.signals : [],
+        stateBindings: Array.isArray(compIr?.hoisted?.state) ? compIr.hoisted.state : [],
+        ambiguous: new Set()
+    };
     const rewrittenExpressions = Array.isArray(compIr?.expressions) ? compIr.expressions : [];
+    const rewrittenBindings = Array.isArray(compIr?.expression_bindings) ? compIr.expression_bindings : [];
     if (rewrittenExpressions.length === 0) {
         return out;
     }
@@ -216,7 +204,10 @@ function buildComponentExpressionRewrite(compPath, componentSource, compIr, comp
 
     let templateIr;
     try {
-        templateIr = runCompiler(compPath, templateOnly, compilerOpts, { suppressWarnings: true });
+        templateIr = runCompiler(compPath, templateOnly, compilerOpts, {
+            suppressWarnings: true,
+            compilerBin
+        });
     } catch {
         return out;
     }
@@ -229,34 +220,243 @@ function buildComponentExpressionRewrite(compPath, componentSource, compIr, comp
         if (typeof raw !== 'string' || typeof rewritten !== 'string') {
             continue;
         }
-        if (raw === rewritten) {
-            continue;
+
+        const binding = rewrittenBindings[i];
+        const normalizedBinding = binding && typeof binding === 'object'
+            ? {
+                compiled_expr: typeof binding.compiled_expr === 'string' ? binding.compiled_expr : null,
+                signal_index: Number.isInteger(binding.signal_index) ? binding.signal_index : null,
+                signal_indices: Array.isArray(binding.signal_indices)
+                    ? binding.signal_indices.filter((value) => Number.isInteger(value))
+                    : [],
+                state_index: Number.isInteger(binding.state_index) ? binding.state_index : null,
+                component_instance: typeof binding.component_instance === 'string' ? binding.component_instance : null,
+                component_binding: typeof binding.component_binding === 'string' ? binding.component_binding : null
+            }
+            : null;
+
+        if (!out.ambiguous.has(raw) && normalizedBinding) {
+            const existingBinding = out.bindings.get(raw);
+            if (existingBinding) {
+                if (JSON.stringify(existingBinding) !== JSON.stringify(normalizedBinding)) {
+                    out.bindings.delete(raw);
+                    out.map.delete(raw);
+                    out.ambiguous.add(raw);
+                    continue;
+                }
+            } else {
+                out.bindings.set(raw, normalizedBinding);
+            }
         }
-        const existing = out.map.get(raw);
-        if (existing && existing !== rewritten) {
-            out.map.delete(raw);
-            out.ambiguous.add(raw);
+
+        if (raw !== rewritten) {
+            const existing = out.map.get(raw);
+            if (existing && existing !== rewritten) {
+                out.bindings.delete(raw);
+                out.map.delete(raw);
+                out.ambiguous.add(raw);
+                continue;
+            }
+            if (!out.ambiguous.has(raw)) {
+                out.map.set(raw, rewritten);
+            }
+        }
+    }
+
+    return out;
+}
+
+function remapCompiledExpressionSignals(compiledExpr, componentSignals, componentStateBindings, pageSignalIndexByStateKey) {
+    if (typeof compiledExpr !== 'string' || compiledExpr.length === 0) {
+        return null;
+    }
+
+    return compiledExpr.replace(/signalMap\.get\((\d+)\)/g, (full, rawIndex) => {
+        const localIndex = Number.parseInt(rawIndex, 10);
+        if (!Number.isInteger(localIndex)) {
+            return full;
+        }
+        const signal = componentSignals[localIndex];
+        if (!signal || !Number.isInteger(signal.state_index)) {
+            return full;
+        }
+        const stateKey = componentStateBindings[signal.state_index]?.key;
+        if (typeof stateKey !== 'string' || stateKey.length === 0) {
+            return full;
+        }
+        const pageIndex = pageSignalIndexByStateKey.get(stateKey);
+        if (!Number.isInteger(pageIndex)) {
+            return full;
+        }
+        return `signalMap.get(${pageIndex})`;
+    });
+}
+
+function resolveRewrittenBindingMetadata(pageIr, componentRewrite, binding) {
+    if (!binding || typeof binding !== 'object') {
+        return null;
+    }
+
+    const pageStateBindings = Array.isArray(pageIr?.hoisted?.state) ? pageIr.hoisted.state : [];
+    const pageSignals = Array.isArray(pageIr?.signals) ? pageIr.signals : [];
+    const pageStateIndexByKey = new Map();
+    const pageSignalIndexByStateKey = new Map();
+
+    for (let index = 0; index < pageStateBindings.length; index++) {
+        const key = pageStateBindings[index]?.key;
+        if (typeof key === 'string' && key.length > 0 && !pageStateIndexByKey.has(key)) {
+            pageStateIndexByKey.set(key, index);
+        }
+    }
+
+    for (let index = 0; index < pageSignals.length; index++) {
+        const stateIndex = pageSignals[index]?.state_index;
+        if (!Number.isInteger(stateIndex)) {
             continue;
         }
-        if (!out.ambiguous.has(raw)) {
-            out.map.set(raw, rewritten);
+        const stateKey = pageStateBindings[stateIndex]?.key;
+        if (typeof stateKey === 'string' && stateKey.length > 0 && !pageSignalIndexByStateKey.has(stateKey)) {
+            pageSignalIndexByStateKey.set(stateKey, index);
+        }
+    }
+
+    const componentSignals = Array.isArray(componentRewrite?.signals) ? componentRewrite.signals : [];
+    const componentStateBindings = Array.isArray(componentRewrite?.stateBindings) ? componentRewrite.stateBindings : [];
+
+    let signalIndices = Array.isArray(binding.signal_indices)
+        ? [...new Set(
+            binding.signal_indices
+                .map((signalIndex) => {
+                    if (!Number.isInteger(signalIndex)) {
+                        return null;
+                    }
+                    const signal = componentSignals[signalIndex];
+                    if (!signal || !Number.isInteger(signal.state_index)) {
+                        return null;
+                    }
+                    const stateKey = componentStateBindings[signal.state_index]?.key;
+                    if (typeof stateKey !== 'string' || stateKey.length === 0) {
+                        return null;
+                    }
+                    const pageIndex = pageSignalIndexByStateKey.get(stateKey);
+                    return Number.isInteger(pageIndex) ? pageIndex : null;
+                })
+                .filter((value) => Number.isInteger(value))
+        )].sort((a, b) => a - b)
+        : [];
+
+    let signalIndex = null;
+    if (Number.isInteger(binding.signal_index)) {
+        const signal = componentSignals[binding.signal_index];
+        const stateKey = signal && Number.isInteger(signal.state_index)
+            ? componentStateBindings[signal.state_index]?.key
+            : null;
+        const pageIndex = typeof stateKey === 'string' ? pageSignalIndexByStateKey.get(stateKey) : null;
+        signalIndex = Number.isInteger(pageIndex) ? pageIndex : null;
+    }
+    if (signalIndex === null && signalIndices.length === 1) {
+        signalIndex = signalIndices[0];
+    }
+
+    let stateIndex = null;
+    if (Number.isInteger(binding.state_index)) {
+        const stateKey = componentStateBindings[binding.state_index]?.key;
+        const pageIndex = typeof stateKey === 'string' ? pageStateIndexByKey.get(stateKey) : null;
+        stateIndex = Number.isInteger(pageIndex) ? pageIndex : null;
+    }
+
+    if (Number.isInteger(stateIndex)) {
+        const fallbackSignalIndices = pageSignals
+            .map((signal, index) => signal?.state_index === stateIndex ? index : null)
+            .filter((value) => Number.isInteger(value));
+        const signalIndicesMatchState = signalIndices.every(
+            (index) => pageSignals[index]?.state_index === stateIndex
+        );
+        if ((!signalIndicesMatchState || signalIndices.length === 0) && fallbackSignalIndices.length > 0) {
+            signalIndices = fallbackSignalIndices;
+        }
+        if (
+            (signalIndex === null || pageSignals[signalIndex]?.state_index !== stateIndex) &&
+            fallbackSignalIndices.length === 1
+        ) {
+            signalIndex = fallbackSignalIndices[0];
         }
     }
 
-    return out;
+    let compiledExpr = remapCompiledExpressionSignals(
+        binding.compiled_expr,
+        componentSignals,
+        componentStateBindings,
+        pageSignalIndexByStateKey
+    );
+    if (
+        typeof compiledExpr === 'string' &&
+        signalIndices.length === 1 &&
+        Array.isArray(binding.signal_indices) &&
+        binding.signal_indices.length <= 1
+    ) {
+        compiledExpr = compiledExpr.replace(/signalMap\.get\(\d+\)/g, `signalMap.get(${signalIndices[0]})`);
+    }
+
+    return {
+        compiled_expr: compiledExpr,
+        signal_index: signalIndex,
+        signal_indices: signalIndices,
+        state_index: stateIndex,
+        component_instance: typeof binding.component_instance === 'string' ? binding.component_instance : null,
+        component_binding: typeof binding.component_binding === 'string' ? binding.component_binding : null
+    };
 }
 
 /**
  * Merge a per-component rewrite table into the page-level rewrite table.
  *
  * @param {Map<string, string>} pageMap
+ * @param {Map<string, {
+ *   compiled_expr: string | null,
+ *   signal_index: number | null,
+ *   signal_indices: number[],
+ *   state_index: number | null,
+ *   component_instance: string | null,
+ *   component_binding: string | null
+ * }>} pageBindingMap
  * @param {Set<string>} pageAmbiguous
- * @param {{ map: Map<string, string>, ambiguous: Set<string> }} componentRewrite
+ * @param {{
+ *   map: Map<string, string>,
+ *   bindings: Map<string, {
+ *     compiled_expr: string | null,
+ *     signal_index: number | null,
+ *     signal_indices: number[],
+ *     state_index: number | null,
+ *     component_instance: string | null,
+ *     component_binding: string | null
+ *   }>,
+ *   signals: Array<{ id?: number, kind?: string, state_index?: number }>,
+ *   stateBindings: Array<{ key?: string, value?: string }>,
+ *   ambiguous: Set<string>
+ * }} componentRewrite
+ * @param {object} pageIr
  */
-function mergeExpressionRewriteMaps(pageMap, pageAmbiguous, componentRewrite) {
+function mergeExpressionRewriteMaps(pageMap, pageBindingMap, pageAmbiguous, componentRewrite, pageIr) {
     for (const raw of componentRewrite.ambiguous) {
         pageAmbiguous.add(raw);
         pageMap.delete(raw);
+        pageBindingMap.delete(raw);
+    }
+
+    for (const [raw, binding] of componentRewrite.bindings.entries()) {
+        if (pageAmbiguous.has(raw)) {
+            continue;
+        }
+        const resolved = resolveRewrittenBindingMetadata(pageIr, componentRewrite, binding);
+        const existing = pageBindingMap.get(raw);
+        if (existing && JSON.stringify(existing) !== JSON.stringify(resolved)) {
+            pageAmbiguous.add(raw);
+            pageMap.delete(raw);
+            pageBindingMap.delete(raw);
+            continue;
+        }
+        pageBindingMap.set(raw, resolved);
     }
 
     for (const [raw, rewritten] of componentRewrite.map.entries()) {
@@ -267,6 +467,7 @@ function mergeExpressionRewriteMaps(pageMap, pageAmbiguous, componentRewrite) {
         if (existing && existing !== rewritten) {
             pageAmbiguous.add(raw);
             pageMap.delete(raw);
+            pageBindingMap.delete(raw);
             continue;
         }
         pageMap.set(raw, rewritten);
@@ -329,9 +530,17 @@ function rewriteRefBindingIdentifiers(pageIr, preferredKeys = null) {
  *
  * @param {object} pageIr
  * @param {Map<string, string>} expressionMap
+ * @param {Map<string, {
+ *   compiled_expr: string | null,
+ *   signal_index: number | null,
+ *   signal_indices: number[],
+ *   state_index: number | null,
+ *   component_instance: string | null,
+ *   component_binding: string | null
+ * }>} bindingMap
  * @param {Set<string>} ambiguous
  */
-function applyExpressionRewrites(pageIr, expressionMap, ambiguous) {
+function applyExpressionRewrites(pageIr, expressionMap, bindingMap, ambiguous) {
     if (!Array.isArray(pageIr?.expressions) || pageIr.expressions.length === 0) {
         return;
     }
@@ -345,24 +554,213 @@ function applyExpressionRewrites(pageIr, expressionMap, ambiguous) {
         if (ambiguous.has(current)) {
             continue;
         }
+
         const rewritten = expressionMap.get(current);
-        if (!rewritten || rewritten === current) {
+        const rewrittenBinding = bindingMap.get(current);
+        if (rewritten && rewritten !== current) {
+            pageIr.expressions[index] = rewritten;
+        }
+
+        if (!bindings[index] || typeof bindings[index] !== 'object') {
             continue;
         }
-        pageIr.expressions[index] = rewritten;
+
+        if (rewritten && rewritten !== current && bindings[index].literal === current) {
+            bindings[index].literal = rewritten;
+        }
+
+        if (rewrittenBinding) {
+            bindings[index].compiled_expr = rewrittenBinding.compiled_expr;
+            bindings[index].signal_index = rewrittenBinding.signal_index;
+            bindings[index].signal_indices = rewrittenBinding.signal_indices;
+            bindings[index].state_index = rewrittenBinding.state_index;
+            bindings[index].component_instance = rewrittenBinding.component_instance;
+            bindings[index].component_binding = rewrittenBinding.component_binding;
+        } else if (rewritten && rewritten !== current && bindings[index].compiled_expr === current) {
+            bindings[index].compiled_expr = rewritten;
+        }
+
         if (
-            bindings[index] &&
-            typeof bindings[index] === 'object' &&
-            bindings[index].literal === current
+            !rewrittenBinding &&
+            (!rewritten || rewritten === current) &&
+            bindings[index].literal === current &&
+            bindings[index].compiled_expr === current
         ) {
-            bindings[index].literal = rewritten;
-            if (bindings[index].compiled_expr === current) {
-                bindings[index].compiled_expr = rewritten;
+            bindings[index].compiled_expr = current;
+        }
+    }
+}
+
+function applyScopedIdentifierRewrites(pageIr, scopeRewrite) {
+    if (!Array.isArray(pageIr?.expressions) || pageIr.expressions.length === 0) {
+        return;
+    }
+    const bindings = Array.isArray(pageIr.expression_bindings) ? pageIr.expression_bindings : [];
+    const rewriteContext = {
+        scopeRewrite
+    };
+
+    for (let index = 0; index < pageIr.expressions.length; index++) {
+        const current = pageIr.expressions[index];
+        if (typeof current === 'string') {
+            pageIr.expressions[index] = rewritePropsExpression(current, rewriteContext);
+        }
+
+        if (!bindings[index] || typeof bindings[index] !== 'object') {
+            continue;
+        }
+
+        if (typeof bindings[index].literal === 'string') {
+            bindings[index].literal = rewritePropsExpression(bindings[index].literal, rewriteContext);
+        }
+        if (typeof bindings[index].compiled_expr === 'string') {
+            bindings[index].compiled_expr = rewritePropsExpression(bindings[index].compiled_expr, rewriteContext);
+        }
+    }
+}
+
+function synthesizeSignalBackedCompiledExpressions(pageIr) {
+    if (!Array.isArray(pageIr?.expression_bindings) || pageIr.expression_bindings.length === 0) {
+        return;
+    }
+
+    const stateBindings = Array.isArray(pageIr?.hoisted?.state) ? pageIr.hoisted.state : [];
+    const signals = Array.isArray(pageIr?.signals) ? pageIr.signals : [];
+    if (stateBindings.length === 0 || signals.length === 0) {
+        return;
+    }
+
+    const signalIndexByStateKey = new Map();
+    for (let index = 0; index < signals.length; index++) {
+        const stateIndex = signals[index]?.state_index;
+        const stateKey = Number.isInteger(stateIndex) ? stateBindings[stateIndex]?.key : null;
+        if (typeof stateKey === 'string' && stateKey.length > 0) {
+            signalIndexByStateKey.set(stateKey, index);
+        }
+    }
+    if (signalIndexByStateKey.size === 0) {
+        return;
+    }
+
+    for (let index = 0; index < pageIr.expression_bindings.length; index++) {
+        const binding = pageIr.expression_bindings[index];
+        if (!binding || typeof binding !== 'object') {
+            continue;
+        }
+        if (typeof binding.compiled_expr === 'string' && binding.compiled_expr.includes('signalMap.get(')) {
+            continue;
+        }
+
+        const candidate = typeof binding.literal === 'string' && binding.literal.trim().length > 0
+            ? binding.literal
+            : typeof pageIr.expressions?.[index] === 'string'
+                ? pageIr.expressions[index]
+                : null;
+        if (typeof candidate !== 'string' || candidate.trim().length === 0) {
+            continue;
+        }
+
+        let rewritten = candidate;
+        const signalIndices = [];
+        for (const [stateKey, signalIndex] of signalIndexByStateKey.entries()) {
+            if (!rewritten.includes(stateKey)) {
+                continue;
+            }
+            const escaped = stateKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            const pattern = new RegExp(`\\b${escaped}\\b`, 'g');
+            if (!pattern.test(rewritten)) {
+                continue;
+            }
+            rewritten = rewritten.replace(pattern, `signalMap.get(${signalIndex}).get()`);
+            signalIndices.push(signalIndex);
+        }
+
+        if (rewritten === candidate || signalIndices.length === 0) {
+            continue;
+        }
+
+        const uniqueSignalIndices = [...new Set(signalIndices)].sort((a, b) => a - b);
+        binding.compiled_expr = rewritten;
+        binding.signal_indices = uniqueSignalIndices;
+        if (uniqueSignalIndices.length === 1) {
+            binding.signal_index = uniqueSignalIndices[0];
+            const stateIndex = signals[uniqueSignalIndices[0]]?.state_index;
+            if (Number.isInteger(stateIndex)) {
+                binding.state_index = stateIndex;
             }
         }
     }
 }
 
+function normalizeExpressionBindingDependencies(pageIr) {
+    if (!Array.isArray(pageIr?.expression_bindings) || pageIr.expression_bindings.length === 0) {
+        return;
+    }
+
+    const signals = Array.isArray(pageIr.signals) ? pageIr.signals : [];
+    const dependencyRe = /signalMap\.get\((\d+)\)/g;
+
+    for (const binding of pageIr.expression_bindings) {
+        if (!binding || typeof binding !== 'object' || typeof binding.compiled_expr !== 'string') {
+            continue;
+        }
+
+        const indices = [];
+        dependencyRe.lastIndex = 0;
+        let match;
+        while ((match = dependencyRe.exec(binding.compiled_expr)) !== null) {
+            const index = Number.parseInt(match[1], 10);
+            if (Number.isInteger(index)) {
+                indices.push(index);
+            }
+        }
+
+        if (indices.length === 0) {
+            continue;
+        }
+
+        let signalIndices = [...new Set(indices)].sort((a, b) => a - b);
+        if (Number.isInteger(binding.state_index)) {
+            const owningSignalIndices = signals
+                .map((signal, index) => signal?.state_index === binding.state_index ? index : null)
+                .filter((value) => Number.isInteger(value));
+            const extractedMatchState =
+                signalIndices.length > 0 &&
+                signalIndices.every((index) => signals[index]?.state_index === binding.state_index);
+            if (owningSignalIndices.length > 0 && !extractedMatchState) {
+                signalIndices = owningSignalIndices;
+            }
+        }
+
+        if (
+            !Array.isArray(binding.signal_indices) ||
+            binding.signal_indices.length === 0 ||
+            binding.signal_indices.some((index) => signals[index]?.state_index !== binding.state_index)
+        ) {
+            binding.signal_indices = signalIndices;
+        }
+        if (
+            (!Number.isInteger(binding.signal_index) ||
+                signals[binding.signal_index]?.state_index !== binding.state_index) &&
+            signalIndices.length === 1
+        ) {
+            binding.signal_index = signalIndices[0];
+        }
+        if (!Number.isInteger(binding.state_index) && Number.isInteger(binding.signal_index)) {
+            const stateIndex = signals[binding.signal_index]?.state_index;
+            if (Number.isInteger(stateIndex)) {
+                binding.state_index = stateIndex;
+            }
+        }
+        if (signalIndices.length === 1) {
+            binding.compiled_expr = binding.compiled_expr.replace(
+                /signalMap\.get\(\d+\)/g,
+                `signalMap.get(${signalIndices[0]})`
+            );
+        }
+    }
+}
+
 /**
  * Rewrite legacy markup-literal identifiers in expression literals to the
  * internal `__ZENITH_INTERNAL_ZENHTML` binding used by the runtime.
@@ -798,9 +1196,10 @@ const OPEN_COMPONENT_TAG_RE = /<([A-Z][a-zA-Z0-9]*)(\s[^<>]*?)?\s*(\/?)>/g;
  *
  * @param {string} source
  * @param {Map<string, string>} registry
- * @returns {Map<string, string[]>}
+ * @param {string | null} ownerPath
+ * @returns {Map<string, Array<{ attrs: string, ownerPath: string | null }>>}
  */
-function collectComponentUsageAttrs(source, registry) {
+function collectComponentUsageAttrs(source, registry, ownerPath = null) {
     const out = new Map();
     OPEN_COMPONENT_TAG_RE.lastIndex = 0;
     let match;
@@ -813,11 +1212,47 @@ function collectComponentUsageAttrs(source, registry) {
         if (!out.has(name)) {
             out.set(name, []);
         }
-        out.get(name).push(attrs);
+        out.get(name).push({ attrs, ownerPath });
     }
     return out;
 }
 
+/**
+ * Collect component usage attrs recursively so nested component callsites
+ * receive deterministic props preludes during page-hoist merging.
+ *
+ * Current Zenith architecture still resolves one attrs set per component type.
+ * This helper preserves that model while ensuring nested usages are not lost.
+ *
+ * @param {string} source
+ * @param {Map<string, string>} registry
+ * @param {string | null} ownerPath
+ * @param {Set<string>} visitedFiles
+ * @param {Map<string, Array<{ attrs: string, ownerPath: string | null }>>} out
+ * @returns {Map<string, Array<{ attrs: string, ownerPath: string | null }>>}
+ */
+function collectRecursiveComponentUsageAttrs(source, registry, ownerPath = null, visitedFiles = new Set(), out = new Map()) {
+    const local = collectComponentUsageAttrs(source, registry, ownerPath);
+    for (const [name, attrsList] of local.entries()) {
+        if (!out.has(name)) {
+            out.set(name, []);
+        }
+        out.get(name).push(...attrsList);
+    }
+
+    for (const name of local.keys()) {
+        const compPath = registry.get(name);
+        if (!compPath || visitedFiles.has(compPath)) {
+            continue;
+        }
+        visitedFiles.add(compPath);
+        const componentSource = readFileSync(compPath, 'utf8');
+        collectRecursiveComponentUsageAttrs(componentSource, registry, compPath, visitedFiles, out);
+    }
+
+    return out;
+}
+
 /**
  * Merge a component's IR into the page IR.
  *
@@ -828,7 +1263,16 @@ function collectComponentUsageAttrs(source, registry) {
  * @param {object} compIr — the component's compiled IR
  * @param {string} compPath — component file path
  * @param {string} pageFile — page file path
- * @param {{ includeCode: boolean, cssImportsOnly: boolean, documentMode?: boolean, componentAttrs?: string }} options
+ * @param {{
+ *   includeCode: boolean,
+ *   cssImportsOnly: boolean,
+ *   documentMode?: boolean,
+ *   componentAttrs?: string,
+ *   componentAttrsRewrite?: {
+ *     expressionRewrite?: { map?: Map<string, string>, ambiguous?: Set<string> } | null,
+ *     scopeRewrite?: { map?: Map<string, string>, ambiguous?: Set<string> } | null
+ *   } | null
+ * }} options
  * @param {Set<string>} seenStaticImports
  */
 function mergeComponentIr(pageIr, compIr, compPath, pageFile, options, seenStaticImports, knownRefKeys = null) {
@@ -920,6 +1364,41 @@ function mergeComponentIr(pageIr, compIr, compPath, pageFile, options, seenStati
         }
     }
 
+    if (options.includeCode && Array.isArray(compIr.signals)) {
+        pageIr.signals = Array.isArray(pageIr.signals) ? pageIr.signals : [];
+        const existingSignalStateKeys = new Set(
+            pageIr.signals
+                .map((signal) => {
+                    const stateIndex = signal?.state_index;
+                    return Number.isInteger(stateIndex) ? pageIr.hoisted.state?.[stateIndex]?.key : null;
+                })
+                .filter(Boolean)
+        );
+
+        for (const signal of compIr.signals) {
+            if (!signal || !Number.isInteger(signal.state_index)) {
+                continue;
+            }
+            const stateKey = compIr.hoisted?.state?.[signal.state_index]?.key;
+            if (typeof stateKey !== 'string' || stateKey.length === 0) {
+                continue;
+            }
+            const pageStateIndex = pageIr.hoisted.state.findIndex((entry) => entry?.key === stateKey);
+            if (!Number.isInteger(pageStateIndex) || pageStateIndex < 0) {
+                continue;
+            }
+            if (existingSignalStateKeys.has(stateKey)) {
+                continue;
+            }
+            existingSignalStateKeys.add(stateKey);
+            pageIr.signals.push({
+                id: pageIr.signals.length,
+                kind: typeof signal.kind === 'string' && signal.kind.length > 0 ? signal.kind : 'signal',
+                state_index: pageStateIndex
+            });
+        }
+    }
+
     // Merge hoisted code blocks (rebased to the page file path)
     if (options.includeCode && compIr.hoisted?.code?.length) {
         for (const block of compIr.hoisted.code) {
@@ -927,7 +1406,11 @@ function mergeComponentIr(pageIr, compIr, compPath, pageFile, options, seenStati
             const filteredImports = options.cssImportsOnly
                 ? stripNonCssStaticImportsInSource(rebased)
                 : rebased;
-            const withPropsPrelude = injectPropsPrelude(filteredImports, options.componentAttrs || '');
+            const withPropsPrelude = injectPropsPrelude(
+                filteredImports,
+                options.componentAttrs || '',
+                options.componentAttrsRewrite || null
+            );
             const transpiled = transpileTypeScriptToJs(withPropsPrelude, compPath);
             const deduped = dedupeStaticImportsInSource(transpiled, seenStaticImports);
             const deferred = deferComponentRuntimeBlock(deduped);
@@ -1228,11 +1711,304 @@ function renderObjectKey(key) {
     return JSON.stringify(key);
 }
 
+/**
+ * @param {string} value
+ * @returns {string | null}
+ */
+function deriveScopedIdentifierAlias(value) {
+    const ident = String(value || '').trim();
+    if (!/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(ident)) {
+        return null;
+    }
+    const parts = ident.split('_').filter(Boolean);
+    const candidate = parts.length > 1 ? parts[parts.length - 1] : ident;
+    return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(candidate) ? candidate : ident;
+}
+
+/**
+ * @param {string} source
+ * @returns {string[]}
+ */
+function extractDeclaredIdentifiers(source) {
+    const text = String(source || '').trim();
+    if (!text) {
+        return [];
+    }
+
+    const ts = loadTypeScriptApi();
+    if (ts) {
+        const sourceFile = ts.createSourceFile('zenith-hoisted-declaration.ts', text, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+        const identifiers = [];
+        const collectBindingNames = (name) => {
+            if (ts.isIdentifier(name)) {
+                identifiers.push(name.text);
+                return;
+            }
+            if (ts.isObjectBindingPattern(name) || ts.isArrayBindingPattern(name)) {
+                for (const element of name.elements) {
+                    if (ts.isBindingElement(element)) {
+                        collectBindingNames(element.name);
+                    }
+                }
+            }
+        };
+
+        for (const statement of sourceFile.statements) {
+            if (!ts.isVariableStatement(statement)) {
+                continue;
+            }
+            for (const declaration of statement.declarationList.declarations) {
+                collectBindingNames(declaration.name);
+            }
+        }
+
+        if (identifiers.length > 0) {
+            return identifiers;
+        }
+    }
+
+    const fallback = [];
+    const match = text.match(/^\s*(?:const|let|var)\s+([\s\S]+?);?\s*$/);
+    if (!match) {
+        return fallback;
+    }
+    const declarationList = match[1];
+    const identifierRe = /(?:^|,)\s*([A-Za-z_$][A-Za-z0-9_$]*)\s*(?::[^=,]+)?=/g;
+    let found;
+    while ((found = identifierRe.exec(declarationList)) !== null) {
+        fallback.push(found[1]);
+    }
+    return fallback;
+}
+
+/**
+ * @param {Map<string, string>} map
+ * @param {Set<string>} ambiguous
+ * @param {string | null} raw
+ * @param {string | null} rewritten
+ */
+function recordScopedIdentifierRewrite(map, ambiguous, raw, rewritten) {
+    if (typeof raw !== 'string' || raw.length === 0 || typeof rewritten !== 'string' || rewritten.length === 0) {
+        return;
+    }
+    const existing = map.get(raw);
+    if (existing && existing !== rewritten) {
+        map.delete(raw);
+        ambiguous.add(raw);
+        return;
+    }
+    if (!ambiguous.has(raw)) {
+        map.set(raw, rewritten);
+    }
+}
+
+/**
+ * @param {object | null | undefined} ir
+ * @returns {{ map: Map<string, string>, ambiguous: Set<string> }}
+ */
+function buildScopedIdentifierRewrite(ir) {
+    const out = { map: new Map(), ambiguous: new Set() };
+    if (!ir || typeof ir !== 'object') {
+        return out;
+    }
+
+    const stateBindings = Array.isArray(ir?.hoisted?.state) ? ir.hoisted.state : [];
+    for (const stateEntry of stateBindings) {
+        const key = typeof stateEntry?.key === 'string' ? stateEntry.key : null;
+        recordScopedIdentifierRewrite(out.map, out.ambiguous, deriveScopedIdentifierAlias(key), key);
+    }
+
+    const functionBindings = Array.isArray(ir?.hoisted?.functions) ? ir.hoisted.functions : [];
+    for (const fnName of functionBindings) {
+        if (typeof fnName !== 'string') {
+            continue;
+        }
+        recordScopedIdentifierRewrite(out.map, out.ambiguous, deriveScopedIdentifierAlias(fnName), fnName);
+    }
+
+    const declarations = Array.isArray(ir?.hoisted?.declarations) ? ir.hoisted.declarations : [];
+    for (const declaration of declarations) {
+        if (typeof declaration !== 'string') {
+            continue;
+        }
+        for (const identifier of extractDeclaredIdentifiers(declaration)) {
+            recordScopedIdentifierRewrite(out.map, out.ambiguous, deriveScopedIdentifierAlias(identifier), identifier);
+        }
+    }
+
+    return out;
+}
+
+function rewriteIdentifiersWithinExpression(expr, scopeMap, scopeAmbiguous) {
+    const ts = loadTypeScriptApi();
+    if (!(scopeMap instanceof Map) || !ts) {
+        return expr;
+    }
+
+    const wrapped = `const __zenith_expr__ = (${expr});`;
+    let sourceFile;
+    try {
+        sourceFile = ts.createSourceFile('zenith-expression.ts', wrapped, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    } catch {
+        return expr;
+    }
+
+    const statement = sourceFile.statements[0];
+    if (!statement || !ts.isVariableStatement(statement)) {
+        return expr;
+    }
+    const initializer = statement.declarationList.declarations[0]?.initializer;
+    const root = initializer && ts.isParenthesizedExpression(initializer) ? initializer.expression : initializer;
+    if (!root) {
+        return expr;
+    }
+
+    const replacements = [];
+    const collectBoundNames = (name, target) => {
+        if (ts.isIdentifier(name)) {
+            target.add(name.text);
+            return;
+        }
+        if (ts.isObjectBindingPattern(name) || ts.isArrayBindingPattern(name)) {
+            for (const element of name.elements) {
+                if (ts.isBindingElement(element)) {
+                    collectBoundNames(element.name, target);
+                }
+            }
+        }
+    };
+    const shouldSkipIdentifier = (node, localBindings) => {
+        if (localBindings.has(node.text)) {
+            return true;
+        }
+        const parent = node.parent;
+        if (!parent) {
+            return false;
+        }
+        if (ts.isPropertyAccessExpression(parent) && parent.name === node) {
+            return true;
+        }
+        if (ts.isPropertyAssignment(parent) && parent.name === node) {
+            return true;
+        }
+        if (ts.isShorthandPropertyAssignment(parent)) {
+            return true;
+        }
+        if (ts.isBindingElement(parent) && parent.name === node) {
+            return true;
+        }
+        if (ts.isParameter(parent) && parent.name === node) {
+            return true;
+        }
+        return false;
+    };
+    const visit = (node, localBindings) => {
+        let nextBindings = localBindings;
+        if (ts.isArrowFunction(node) || ts.isFunctionExpression(node)) {
+            nextBindings = new Set(localBindings);
+            if (node.name && ts.isIdentifier(node.name)) {
+                nextBindings.add(node.name.text);
+            }
+            for (const param of node.parameters) {
+                collectBoundNames(param.name, nextBindings);
+            }
+        }
+
+        if (ts.isIdentifier(node) && !shouldSkipIdentifier(node, nextBindings)) {
+            const rewritten = scopeMap.get(node.text);
+            if (
+                typeof rewritten === 'string' &&
+                rewritten.length > 0 &&
+                rewritten !== node.text &&
+                !(scopeAmbiguous instanceof Set && scopeAmbiguous.has(node.text))
+            ) {
+                replacements.push({
+                    start: node.getStart(sourceFile),
+                    end: node.getEnd(),
+                    text: rewritten
+                });
+            }
+        }
+
+        ts.forEachChild(node, (child) => visit(child, nextBindings));
+    };
+
+    visit(root, new Set());
+    if (replacements.length === 0) {
+        return expr;
+    }
+
+    let rewritten = wrapped;
+    for (const replacement of replacements.sort((a, b) => b.start - a.start)) {
+        rewritten = `${rewritten.slice(0, replacement.start)}${replacement.text}${rewritten.slice(replacement.end)}`;
+    }
+
+    const prefix = 'const __zenith_expr__ = (';
+    const suffix = ');';
+    if (!rewritten.startsWith(prefix) || !rewritten.endsWith(suffix)) {
+        return expr;
+    }
+    return rewritten.slice(prefix.length, rewritten.length - suffix.length);
+}
+
+/**
+ * @param {string} expr
+ * @param {{
+ *   expressionRewrite?: { map?: Map<string, string>, ambiguous?: Set<string> } | null,
+ *   scopeRewrite?: { map?: Map<string, string>, ambiguous?: Set<string> } | null
+ * } | null} rewriteContext
+ * @returns {string}
+ */
+function rewritePropsExpression(expr, rewriteContext = null) {
+    const trimmed = String(expr || '').trim();
+    if (!trimmed) {
+        return trimmed;
+    }
+
+    const expressionMap = rewriteContext?.expressionRewrite?.map;
+    const expressionAmbiguous = rewriteContext?.expressionRewrite?.ambiguous;
+    if (
+        expressionMap instanceof Map &&
+        !(expressionAmbiguous instanceof Set && expressionAmbiguous.has(trimmed))
+    ) {
+        const exact = expressionMap.get(trimmed);
+        if (typeof exact === 'string' && exact.length > 0) {
+            return exact;
+        }
+    }
+
+    const scopeMap = rewriteContext?.scopeRewrite?.map;
+    const scopeAmbiguous = rewriteContext?.scopeRewrite?.ambiguous;
+    const rootMatch = trimmed.match(/^([A-Za-z_$][A-Za-z0-9_$]*)([\s\S]*)$/);
+    if (!(scopeMap instanceof Map)) {
+        return trimmed;
+    }
+    if (!rootMatch) {
+        return rewriteIdentifiersWithinExpression(trimmed, scopeMap, scopeAmbiguous);
+    }
+
+    const root = rootMatch[1];
+    if (scopeAmbiguous instanceof Set && scopeAmbiguous.has(root)) {
+        return rewriteIdentifiersWithinExpression(trimmed, scopeMap, scopeAmbiguous);
+    }
+
+    const rewrittenRoot = scopeMap.get(root);
+    if (typeof rewrittenRoot !== 'string' || rewrittenRoot.length === 0 || rewrittenRoot === root) {
+        return rewriteIdentifiersWithinExpression(trimmed, scopeMap, scopeAmbiguous);
+    }
+
+    return `${rewrittenRoot}${rootMatch[2]}`;
+}
+
 /**
  * @param {string} attrs
+ * @param {{
+ *   expressionRewrite?: { map?: Map<string, string>, ambiguous?: Set<string> } | null,
+ *   scopeRewrite?: { map?: Map<string, string>, ambiguous?: Set<string> } | null
+ * } | null} rewriteContext
  * @returns {string}
  */
-function renderPropsLiteralFromAttrs(attrs) {
+function renderPropsLiteralFromAttrs(attrs, rewriteContext = null) {
     const src = String(attrs || '').trim();
     if (!src) {
         return '{}';
@@ -1257,7 +2033,7 @@ function renderPropsLiteralFromAttrs(attrs) {
             valueCode = JSON.stringify(singleQuoted);
         } else if (expressionValue !== undefined) {
             const trimmed = String(expressionValue).trim();
-            valueCode = trimmed.length > 0 ? trimmed : 'undefined';
+            valueCode = trimmed.length > 0 ? rewritePropsExpression(trimmed, rewriteContext) : 'undefined';
         }
 
         entries.push(`${renderObjectKey(rawName)}: ${valueCode}`);
@@ -1273,9 +2049,13 @@ function renderPropsLiteralFromAttrs(attrs) {
 /**
  * @param {string} source
  * @param {string} attrs
+ * @param {{
+ *   expressionRewrite?: { map?: Map<string, string>, ambiguous?: Set<string> } | null,
+ *   scopeRewrite?: { map?: Map<string, string>, ambiguous?: Set<string> } | null
+ * } | null} rewriteContext
  * @returns {string}
  */
-function injectPropsPrelude(source, attrs) {
+function injectPropsPrelude(source, attrs, rewriteContext = null) {
     if (typeof source !== 'string' || source.trim().length === 0) {
         return source;
     }
@@ -1286,7 +2066,7 @@ function injectPropsPrelude(source, attrs) {
         return source;
     }
 
-    const propsLiteral = renderPropsLiteralFromAttrs(attrs);
+    const propsLiteral = renderPropsLiteralFromAttrs(attrs, rewriteContext);
     return `var props = ${propsLiteral};\n${source}`;
 }
 
@@ -1347,13 +2127,21 @@ function deferComponentRuntimeBlock(source) {
  * @param {string} projectRoot
  * @param {object | null} [logger]
  * @param {boolean} [showInfo]
+ * @param {string} [bundlerBin]
  * @returns {Promise<void>}
  */
-function runBundler(envelope, outDir, projectRoot, logger = null, showInfo = true) {
+function runBundler(
+    envelope,
+    outDir,
+    projectRoot,
+    logger = null,
+    showInfo = true,
+    bundlerBin = resolveBundlerBin(projectRoot)
+) {
     return new Promise((resolvePromise, rejectPromise) => {
         const useStructuredLogger = Boolean(logger && typeof logger.childLine === 'function');
         const child = spawn(
-            getBundlerBin(),
+            bundlerBin,
             ['--out-dir', outDir],
             {
                 cwd: projectRoot,
@@ -1441,6 +2229,8 @@ async function collectAssets(rootDir) {
 export async function build(options) {
     const { pagesDir, outDir, config = {}, logger = null, showBundlerInfo = true } = options;
     const projectRoot = deriveProjectRootFromPagesDir(pagesDir);
+    const compilerBin = resolveCompilerBin(projectRoot);
+    const bundlerBin = resolveBundlerBin(projectRoot);
     const softNavigationEnabled = config.softNavigation === true || config.router === true;
     const compilerOpts = {
         typescriptDefault: config.typescriptDefault === true,
@@ -1451,6 +2241,15 @@ export async function build(options) {
     await rm(outDir, { recursive: true, force: true });
     await mkdir(outDir, { recursive: true });
 
+    if (logger) {
+        await maybeWarnAboutZenithVersionMismatch({
+            projectRoot,
+            logger,
+            command: 'build',
+            bundlerBinPath: bundlerBin
+        });
+    }
+
     // Derive src/ directory from pages/ directory
     const srcDir = resolve(pagesDir, '..');
 
@@ -1488,7 +2287,7 @@ export async function build(options) {
     for (const entry of manifest) {
         const sourceFile = join(pagesDir, entry.file);
         const rawSource = readFileSync(sourceFile, 'utf8');
-        const componentUsageAttrs = collectComponentUsageAttrs(rawSource, registry);
+        const componentUsageAttrs = collectRecursiveComponentUsageAttrs(rawSource, registry, sourceFile);
 
         const baseName = sourceFile.slice(0, -extname(sourceFile).length);
         let adjacentGuard = null;
@@ -1510,7 +2309,10 @@ export async function build(options) {
             sourceFile,
             compileSource,
             compilerOpts,
-            { onWarning: emitCompilerWarning }
+            {
+                compilerBin,
+                onWarning: emitCompilerWarning
+            }
         );
 
         const hasGuard = (extractedServer.serverScript && extractedServer.serverScript.has_guard) || adjacentGuard !== null;
@@ -1541,6 +2343,7 @@ export async function build(options) {
         // Ensure IR has required array fields for merging
         pageIr.components_scripts = pageIr.components_scripts || {};
         pageIr.component_instances = pageIr.component_instances || [];
+        pageIr.signals = Array.isArray(pageIr.signals) ? pageIr.signals : [];
         pageIr.hoisted = pageIr.hoisted || { imports: [], declarations: [], functions: [], signals: [], state: [], code: [] };
         pageIr.hoisted.imports = pageIr.hoisted.imports || [];
         pageIr.hoisted.declarations = pageIr.hoisted.declarations || [];
@@ -1550,8 +2353,25 @@ export async function build(options) {
         pageIr.hoisted.code = pageIr.hoisted.code || [];
         const seenStaticImports = new Set();
         const pageExpressionRewriteMap = new Map();
+        const pageExpressionBindingMap = new Map();
         const pageAmbiguousExpressionMap = new Set();
         const knownRefKeys = new Set();
+        const pageScopeRewrite = buildScopedIdentifierRewrite(pageIr);
+        const pageSelfExpressionRewrite = buildComponentExpressionRewrite(
+            sourceFile,
+            compileSource,
+            pageIr,
+            compilerOpts,
+            compilerBin
+        );
+        mergeExpressionRewriteMaps(
+            pageExpressionRewriteMap,
+            pageExpressionBindingMap,
+            pageAmbiguousExpressionMap,
+            pageSelfExpressionRewrite,
+            pageIr
+        );
+        const componentScopeRewriteCache = new Map();
 
         // 2c. Compile each used component separately for its script IR
         for (const compName of usedComponents) {
@@ -1568,7 +2388,10 @@ export async function build(options) {
                     compPath,
                     componentCompileSource,
                     compilerOpts,
-                    { onWarning: emitCompilerWarning }
+                    {
+                        compilerBin,
+                        onWarning: emitCompilerWarning
+                    }
                 );
                 componentIrCache.set(compPath, compIr);
             }
@@ -1581,14 +2404,62 @@ export async function build(options) {
 
             let expressionRewrite = componentExpressionRewriteCache.get(compPath);
             if (!expressionRewrite) {
-                expressionRewrite = buildComponentExpressionRewrite(compPath, componentSource, compIr, compilerOpts);
+                expressionRewrite = buildComponentExpressionRewrite(
+                    compPath,
+                    componentSource,
+                    compIr,
+                    compilerOpts,
+                    compilerBin
+                );
                 componentExpressionRewriteCache.set(compPath, expressionRewrite);
             }
-            mergeExpressionRewriteMaps(
-                pageExpressionRewriteMap,
-                pageAmbiguousExpressionMap,
-                expressionRewrite
-            );
+
+            let usageEntry = (componentUsageAttrs.get(compName) || [])[0] || { attrs: '', ownerPath: sourceFile };
+            if (!usageEntry || typeof usageEntry !== 'object') {
+                usageEntry = { attrs: '', ownerPath: sourceFile };
+            }
+
+            let attrExpressionRewrite = pageSelfExpressionRewrite;
+            let attrScopeRewrite = pageScopeRewrite;
+            const ownerPath = typeof usageEntry.ownerPath === 'string' && usageEntry.ownerPath.length > 0
+                ? usageEntry.ownerPath
+                : sourceFile;
+
+            if (ownerPath !== sourceFile) {
+                let ownerIr = componentIrCache.get(ownerPath);
+                if (!ownerIr) {
+                    const ownerSource = readFileSync(ownerPath, 'utf8');
+                    ownerIr = runCompiler(
+                        ownerPath,
+                        stripStyleBlocks(ownerSource),
+                        compilerOpts,
+                        {
+                            compilerBin,
+                            onWarning: emitCompilerWarning
+                        }
+                    );
+                    componentIrCache.set(ownerPath, ownerIr);
+                }
+
+                attrExpressionRewrite = componentExpressionRewriteCache.get(ownerPath);
+                if (!attrExpressionRewrite) {
+                    const ownerSource = readFileSync(ownerPath, 'utf8');
+                    attrExpressionRewrite = buildComponentExpressionRewrite(
+                        ownerPath,
+                        ownerSource,
+                        ownerIr,
+                        compilerOpts,
+                        compilerBin
+                    );
+                    componentExpressionRewriteCache.set(ownerPath, attrExpressionRewrite);
+                }
+
+                attrScopeRewrite = componentScopeRewriteCache.get(ownerPath);
+                if (!attrScopeRewrite) {
+                    attrScopeRewrite = buildScopedIdentifierRewrite(ownerIr);
+                    componentScopeRewriteCache.set(ownerPath, attrScopeRewrite);
+                }
+            }
 
             // 2d. Merge component IR into page IR
             mergeComponentIr(
@@ -1600,18 +2471,34 @@ export async function build(options) {
                     includeCode: true,
                     cssImportsOnly: isDocMode,
                     documentMode: isDocMode,
-                    componentAttrs: (componentUsageAttrs.get(compName) || [])[0] || ''
+                    componentAttrs: typeof usageEntry.attrs === 'string' ? usageEntry.attrs : '',
+                    componentAttrsRewrite: {
+                        expressionRewrite: attrExpressionRewrite,
+                        scopeRewrite: attrScopeRewrite
+                    }
                 },
                 seenStaticImports,
                 knownRefKeys
             );
+
+            mergeExpressionRewriteMaps(
+                pageExpressionRewriteMap,
+                pageExpressionBindingMap,
+                pageAmbiguousExpressionMap,
+                expressionRewrite,
+                pageIr
+            );
         }
 
         applyExpressionRewrites(
             pageIr,
             pageExpressionRewriteMap,
+            pageExpressionBindingMap,
             pageAmbiguousExpressionMap
         );
+        applyScopedIdentifierRewrites(pageIr, buildScopedIdentifierRewrite(pageIr));
+        synthesizeSignalBackedCompiledExpressions(pageIr);
+        normalizeExpressionBindingDependencies(pageIr);
 
         rewriteLegacyMarkupIdentifiers(pageIr);
         rewriteRefBindingIdentifiers(pageIr, knownRefKeys);
@@ -1625,7 +2512,7 @@ export async function build(options) {
     }
 
     if (envelopes.length > 0) {
-    await runBundler(envelopes, outDir, projectRoot, logger, showBundlerInfo);
+        await runBundler(envelopes, outDir, projectRoot, logger, showBundlerInfo, bundlerBin);
     }
 
     const assets = await collectAssets(outDir);