@llui/vite-plugin 0.0.42 → 0.2.0

package/dist/transform.js

@@ -227,7 +227,9 @@ export function transformLlui(source, _filename, devMode = false, emitAgentMetad
     // function is generated per-component, so bit assignments in other files
     // won't match. Files without component() get FULL_MASK on all bindings.
     const fileHasComponent = hasComponentDef(sourceFile, lluiImport);
-    const fieldBits = fileHasComponent ? collectDeps(source) : new Map();
+    const { lo: fieldBits, hi: fieldBitsHi } = fileHasComponent
+        ? collectDeps(source)
+        : { lo: new Map(), hi: new Map() };
     if (verbose && fileHasComponent) {
         const pairs = [...fieldBits.entries()]
             .map(([path, bit]) => `${path}=${bit === -1 ? 'FULL' : bit}`)
@@ -301,7 +303,7 @@ export function transformLlui(source, _filename, devMode = false, emitAgentMetad
         }
         // Pass 1: Transform element helper calls to elSplit or elTemplate
         if (ts.isCallExpression(node)) {
-            const transformed = tryTransformElementCall(node, importedHelpers, fieldBits, compiledHelpers, bailedHelpers, f);
+            const transformed = tryTransformElementCall(node, importedHelpers, fieldBits, compiledHelpers, bailedHelpers, f, fieldBitsHi);
             if (transformed) {
                 if (ts.isIdentifier(transformed.expression)) {
                     if (transformed.expression.text === 'elTemplate')
@@ -332,7 +334,7 @@ export function transformLlui(source, _filename, devMode = false, emitAgentMetad
         }
         // Pass 2: Inject __dirty, __update, and __msgSchema into component() calls
         if (ts.isCallExpression(node) && isComponentCall(node, lluiImport)) {
-            let result = tryInjectDirty(node, fieldBits, f);
+            let result = tryInjectDirty(node, fieldBits, f, fieldBitsHi);
             if (result)
                 usesApplyBinding = true;
             // Extract schema data once — used both for devMode injections and the
@@ -767,7 +769,7 @@ function emitStaticProp(staticProps, f, kind, resolvedKey, value) {
     }
 }
 // ── Pass 1: Element → elSplit ────────────────────────────────────
-function tryTransformElementCall(node, helpers, fieldBits, compiled, bailed, f) {
+function tryTransformElementCall(node, helpers, fieldBits, compiled, bailed, f, fieldBitsHi = new Map()) {
     if (!ts.isIdentifier(node.expression))
         return null;
     const localName = node.expression.text;
@@ -890,7 +892,7 @@ function tryTransformElementCall(node, helpers, fieldBits, compiled, bailed, f)
             {
                 const kind = classifyKind(key);
                 const resolvedKey = resolveKey(key, kind);
-                const { mask, readsState } = computeAccessorMask(classified.accessor, fieldBits);
+                const { mask, maskHi, readsState } = computeAccessorMask(classified.accessor, fieldBits, undefined, fieldBitsHi);
                 // Zero-mask constant folding only applies to inline arrows whose body
                 // we can safely call at compile time. For identifier-bound forms
                 // (`accessor !== value`) we skip the fold — calling the identifier's
@@ -899,16 +901,25 @@ function tryTransformElementCall(node, helpers, fieldBits, compiled, bailed, f)
                 if (classified.kind === 'arrow' &&
                     classified.accessor === value &&
                     mask === 0 &&
+                    maskHi === 0 &&
                     !readsState) {
                     emitStaticProp(staticProps, f, kind, resolvedKey, f.createCallExpression(classified.accessor, undefined, []));
                     continue;
                 }
-                bindings.push(f.createArrayLiteralExpression([
-                    createMaskLiteral(f, mask === 0 && readsState ? 0xffffffff | 0 : mask),
+                const effectiveMask = mask === 0 && maskHi === 0 && readsState ? 0xffffffff | 0 : mask;
+                // Emit a 5-tuple only when the accessor reads a high-word
+                // prefix (positions 31..61). For the common ≤31-prefix case
+                // the emit stays byte-identical to the pre-multi-word baseline,
+                // and stale runtime bundles ignore the 5th slot.
+                const tupleEls = [
+                    createMaskLiteral(f, effectiveMask),
                     f.createStringLiteral(kind),
                     f.createStringLiteral(resolvedKey),
                     classified.valueForBinding,
-                ]));
+                ];
+                if (maskHi !== 0)
+                    tupleEls.push(createMaskLiteral(f, maskHi));
+                bindings.push(f.createArrayLiteralExpression(tupleEls));
             }
         }
     }
@@ -924,7 +935,7 @@ function tryTransformElementCall(node, helpers, fieldBits, compiled, bailed, f)
     compiled.add(localName);
     // Subtree collapse: if children contain nested element helpers,
     // collapse the entire tree into a single elTemplate() call
-    const analyzed = analyzeSubtree(node, helpers, fieldBits, []);
+    const analyzed = analyzeSubtree(node, helpers, fieldBits, [], fieldBitsHi);
     if (analyzed && hasNestedElements(analyzed)) {
         // Mark all descendant helpers as compiled for import cleanup
         collectUsedHelpers(analyzed, compiled);
@@ -1072,8 +1083,8 @@ function tryInjectStructuralMask(node, viewHelperNames, viewHelperAliases, field
         ...node.arguments.slice(1),
     ]);
 }
-function tryInjectDirty(node, fieldBits, f) {
-    if (fieldBits.size === 0)
+function tryInjectDirty(node, fieldBits, f, fieldBitsHi = new Map()) {
+    if (fieldBits.size === 0 && fieldBitsHi.size === 0)
         return null;
     const configArg = node.arguments[0];
     if (!configArg || !ts.isObjectLiteralExpression(configArg))
@@ -1086,36 +1097,20 @@ function tryInjectDirty(node, fieldBits, f) {
             return null;
         }
     }
-    // Build __dirty: (o, n) => (Object.is(o.field, n.field) ? 0 : bit) | ...
-    // Compare at top-level field (depth 1) — nested path changes within a
-    // field must trigger the bit even if the specific sub-path isn't tracked.
-    // e.g., route.page tracked but route.data changes → must fire.
+    // Top-level field → aggregated bit mask. Sub-paths under one field
+    // (`route.page`, `route.data`) collapse into a single entry so
+    // `tryBuildHandlers` and `__maskLegend` can reason per-field. Positions
+    // 0..30 live here; 31..61 in the parallel high-word map below.
     const topLevelBits = new Map();
     for (const [path, bit] of fieldBits) {
         const topField = path.split('.')[0];
         topLevelBits.set(topField, (topLevelBits.get(topField) ?? 0) | bit);
     }
-    const comparisons = [];
-    for (const [field, bit] of topLevelBits) {
-        const oAccess = buildAccess(f, 'o', [field]);
-        const nAccess = buildAccess(f, 'n', [field]);
-        comparisons.push(f.createParenthesizedExpression(f.createConditionalExpression(f.createCallExpression(f.createPropertyAccessExpression(f.createIdentifier('Object'), 'is'), undefined, [oAccess, nAccess]), f.createToken(ts.SyntaxKind.QuestionToken), f.createNumericLiteral(0), f.createToken(ts.SyntaxKind.ColonToken), createMaskLiteral(f, bit))));
-    }
-    let dirtyBody = comparisons[0];
-    for (let i = 1; i < comparisons.length; i++) {
-        dirtyBody = f.createBinaryExpression(dirtyBody, ts.SyntaxKind.BarToken, comparisons[i]);
-    }
-    // Fallback: if no tracked bit fired but the state reference changed, some
-    // untracked field must have changed — return FULL_MASK so bindings whose
-    // accessors came from external modules (spread parts) still fire.
-    //   tracked || (Object.is(o, n) ? 0 : FULL_MASK)
-    const fallback = f.createParenthesizedExpression(f.createConditionalExpression(f.createCallExpression(f.createPropertyAccessExpression(f.createIdentifier('Object'), 'is'), undefined, [f.createIdentifier('o'), f.createIdentifier('n')]), f.createToken(ts.SyntaxKind.QuestionToken), f.createNumericLiteral(0), f.createToken(ts.SyntaxKind.ColonToken), createMaskLiteral(f, -1)));
-    dirtyBody = f.createBinaryExpression(f.createParenthesizedExpression(dirtyBody), ts.SyntaxKind.BarBarToken, fallback);
-    const dirtyFn = f.createArrowFunction(undefined, undefined, [
-        f.createParameterDeclaration(undefined, undefined, 'o'),
-        f.createParameterDeclaration(undefined, undefined, 'n'),
-    ], undefined, f.createToken(ts.SyntaxKind.EqualsGreaterThanToken), dirtyBody);
-    const dirtyProp = f.createPropertyAssignment('__dirty', dirtyFn);
+    const topLevelBitsHi = new Map();
+    for (const [path, bit] of fieldBitsHi) {
+        const topField = path.split('.')[0];
+        topLevelBitsHi.set(topField, (topLevelBitsHi.get(topField) ?? 0) | bit);
+    }
     // __maskLegend: maps each top-level state field to the bit(s) that fire when
     // it changes. Lets introspection tools decode runtime dirty masks to field names.
     const legendProps = [];
@@ -1128,25 +1123,59 @@ function tryInjectDirty(node, fieldBits, f) {
     const legendProp = f.createPropertyAssignment('__maskLegend', f.createObjectLiteralExpression(legendProps, false));
     // Structural mask — used by both __update and __handlers
     const structuralMask = computeStructuralMask(configArg, fieldBits);
-    const phase2Mask = computePhase2Mask(configArg, fieldBits);
-    const updateBody = buildUpdateBody(f, structuralMask, phase2Mask);
+    const updateBody = buildUpdateBody(f, structuralMask);
+    // `dHi` is the high-word dirty mask, appended as the trailing
+    // positional arg so stale 5-param compiled bundles continue to gate
+    // correctly: the runtime calls `__update(s, d, b, bl, p, dHi)`,
+    // old bundles' 5-param arrow ignores the extra arg (for ≤31-prefix
+    // components dHi is always 0 anyway). New bundles use it for
+    // precise two-word Phase 1 gating.
     const updateFn = f.createArrowFunction(undefined, undefined, [
         f.createParameterDeclaration(undefined, undefined, 's'),
         f.createParameterDeclaration(undefined, undefined, 'd'),
         f.createParameterDeclaration(undefined, undefined, 'b'),
         f.createParameterDeclaration(undefined, undefined, 'bl'),
         f.createParameterDeclaration(undefined, undefined, 'p'),
+        f.createParameterDeclaration(undefined, undefined, 'dHi', undefined, undefined, f.createNumericLiteral(0)),
     ], undefined, f.createToken(ts.SyntaxKind.EqualsGreaterThanToken), updateBody);
     const updateProp = f.createPropertyAssignment('__update', updateFn);
     // __handlers: per-message-type specialized update functions.
     // Analyzes the update() switch/case and generates direct handlers
     // that bypass the generic Phase 1/2 pipeline for single-message updates.
-    const handlersProp = tryBuildHandlers(configArg, topLevelBits, structuralMask, f);
-    // Keep __update even when __handlers is present — it provides Phase 1
-    // mask gating for multi-message batches that bypass __handlers.
-    const extraProps = [dirtyProp, legendProp, updateProp];
+    const handlersProp = tryBuildHandlers(configArg, topLevelBits, topLevelBitsHi, structuralMask, f);
+    // Both `__update` and `__handlers` carry two-word gates: `__update`'s
+    // Phase 1 block loop uses `(mask & d) | (maskHi & dHi)`, and
+    // `__handlers` passes `caseDirtyHi` to `_handleMsg` which gates blocks
+    // against both words. `dHi` defaults to 0 so any stale 5-arg call site
+    // still works. `__dirty` is no longer emitted — `__prefixes` (below)
+    // is strictly more precise, and the runtime throws on hand-authored
+    // `__dirty`. `__maskLegend` survives because the agent layer uses it
+    // to decode runtime dirty masks back to top-level field names.
+    const extraProps = [legendProp, updateProp];
     if (handlersProp)
         extraProps.push(handlersProp);
+    // __prefixes: opt-in path-keyed reactivity (see
+    // docs/proposals/unified-composition-model.md). One closure per
+    // distinct path that an accessor reads, hoisted into a stable array;
+    // the array position IS the bit position used by the path's bindings.
+    // The runtime prefers __prefixes when present and computes the
+    // combinedDirty mask by reference-comparing `prefix(prev)` vs
+    // `prefix(next)` for each entry — strictly more precise than the
+    // top-level-conflated __dirty (which always co-fires bindings sharing
+    // a top-level field even when only one sub-path actually mutated).
+    //
+    // Emit `__prefixes` whenever any reactive paths are present. For
+    // components with ≤31 paths, the runtime's
+    // `computeDirtyFromPrefixes` returns a single `number`; for
+    // 32..61-path components it returns a `[lo, hi]` tuple that the
+    // runtime fans out into `combinedDirty` + `combinedDirtyHi`. The
+    // binding-level mask gating is still single-word at the compiler
+    // emit layer today, so high-position bindings still re-evaluate
+    // every cycle — but the dirty computation itself is now precise,
+    // which lets memo()'d aggregates short-circuit correctly.
+    const prefixesProp = buildPrefixesProp(fieldBits, fieldBitsHi, f);
+    if (prefixesProp)
+        extraProps.push(prefixesProp);
     const newConfig = f.createObjectLiteralExpression([...configArg.properties, ...extraProps], true);
     return f.createCallExpression(node.expression, node.typeArguments, [
         newConfig,
@@ -1164,8 +1193,8 @@ function tryInjectDirty(node, fieldBits, f) {
  * Conservative: only generates handlers for cases where the field
  * modifications are statically determinable. Complex cases are skipped.
  */
-function tryBuildHandlers(configArg, topLevelBits, structuralMask, f) {
-    if (topLevelBits.size === 0)
+function tryBuildHandlers(configArg, topLevelBits, topLevelBitsHi, structuralMask, f) {
+    if (topLevelBits.size === 0 && topLevelBitsHi.size === 0)
         return null;
     // Find the update function in the component config
     let updateFn = null;
@@ -1241,7 +1270,7 @@ function tryBuildHandlers(configArg, topLevelBits, structuralMask, f) {
         let bailOut = false;
         for (const returnExpr of returnExprs) {
             const stateExpr = returnExpr.elements[0];
-            const fields = analyzeModifiedFields(stateExpr, stateName, topLevelBits);
+            const fields = analyzeModifiedFields(stateExpr, stateName, topLevelBits, topLevelBitsHi);
             if (!fields) {
                 bailOut = true;
                 break;
@@ -1252,14 +1281,29 @@ function tryBuildHandlers(configArg, topLevelBits, structuralMask, f) {
         if (bailOut)
             continue; // at least one return path was too complex
         const modifiedFields = Array.from(allModified);
-        // Compute the dirty mask for this case
+        // Compute the dirty mask for this case across both words. Fields
+        // tracked in `topLevelBitsHi` contribute to `caseDirtyHi`; fields
+        // tracked nowhere (`undefined` lookup in both) fall back to
+        // FULL_MASK in the low word — same conservative behavior as
+        // before, just preserved per-word now.
         let caseDirty = 0;
+        let caseDirtyHi = 0;
         for (const field of modifiedFields) {
-            caseDirty |= topLevelBits.get(field) ?? 0xffffffff | 0;
+            const lo = topLevelBits.get(field);
+            const hi = topLevelBitsHi.get(field);
+            if (lo === undefined && hi === undefined) {
+                caseDirty |= 0xffffffff | 0;
+            }
+            else {
+                if (lo !== undefined)
+                    caseDirty |= lo;
+                if (hi !== undefined)
+                    caseDirtyHi |= hi;
+            }
         }
         // Detect array operation pattern for structural block optimization
         const arrayOp = detectArrayOp(clause, stateName, modifiedFields, structuralMask, caseDirty);
-        const handler = buildCaseHandler(f, caseDirty, arrayOp);
+        const handler = buildCaseHandler(f, caseDirty, caseDirtyHi, arrayOp);
         handlers.push(f.createPropertyAssignment(f.createStringLiteral(msgType), handler));
     }
     if (handlers.length === 0)
@@ -1445,7 +1489,12 @@ function hasSliceAssignment(clause, stateName, varName) {
  * Analyze which top-level state fields are modified in a return expression.
  * Returns the set of field names, or null if too complex to determine.
  */
-function analyzeModifiedFields(stateExpr, stateName, topLevelBits) {
+function analyzeModifiedFields(stateExpr, stateName, topLevelBits, topLevelBitsHi = new Map()) {
+    // Recognize fields tracked in EITHER the low-word or high-word map.
+    // 32..61-prefix components have their overflow paths in
+    // `topLevelBitsHi`; the case handler's `caseDirty` / `caseDirtyHi`
+    // logic depends on us recognizing those fields here.
+    const isTracked = (name) => topLevelBits.has(name) || topLevelBitsHi.has(name);
     // Pattern: { ...state, field1: ..., field2: ... } or { field1: ..., field2: ... }
     if (ts.isObjectLiteralExpression(stateExpr)) {
         const modified = [];
@@ -1464,14 +1513,14 @@ function analyzeModifiedFields(stateExpr, stateName, topLevelBits) {
             }
             if (ts.isPropertyAssignment(prop) && ts.isIdentifier(prop.name)) {
                 const fieldName = prop.name.text;
-                if (topLevelBits.has(fieldName)) {
+                if (isTracked(fieldName)) {
                     modified.push(fieldName);
                 }
             }
             // Handle shorthand: { ...state, rows } where rows is a local variable
             if (ts.isShorthandPropertyAssignment(prop)) {
                 const fieldName = prop.name.text;
-                if (topLevelBits.has(fieldName)) {
+                if (isTracked(fieldName)) {
                     modified.push(fieldName);
                 }
             }
@@ -1504,7 +1553,7 @@ function analyzeModifiedFields(stateExpr, stateName, topLevelBits) {
  * Build a handler that delegates to __handleMsg(inst, msg, dirty, method).
  * method: 0=reconcile, 1=reconcileItems, 2=reconcileClear, 3=reconcileRemove, -1=skip blocks
  */
-function buildCaseHandler(f, caseDirty, arrayOp) {
+function buildCaseHandler(f, caseDirty, caseDirtyHi, arrayOp) {
     const method = typeof arrayOp === 'object' && arrayOp.type === 'strided'
         ? 10 + arrayOp.stride // reconcileChanged with stride
         : arrayOp === 'none'
@@ -1516,18 +1565,24 @@ function buildCaseHandler(f, caseDirty, arrayOp) {
                     : arrayOp === 'remove'
                         ? 3
                         : 0; // general
-    // (inst, msg) => __handleMsg(inst, msg, dirty, method)
-    return f.createArrowFunction(undefined, undefined, [
-        f.createParameterDeclaration(undefined, undefined, 'inst'),
-        f.createParameterDeclaration(undefined, undefined, 'msg'),
-    ], undefined, f.createToken(ts.SyntaxKind.EqualsGreaterThanToken), f.createCallExpression(f.createIdentifier('__handleMsg'), undefined, [
+    // (inst, msg) => __handleMsg(inst, msg, dirty, method, [dirtyHi])
+    const args = [
         f.createIdentifier('inst'),
         f.createIdentifier('msg'),
         createMaskLiteral(f, caseDirty),
         method >= 0
             ? f.createNumericLiteral(method)
             : f.createPrefixUnaryExpression(ts.SyntaxKind.MinusToken, f.createNumericLiteral(1)),
-    ]));
+    ];
+    // Emit the 5th positional arg only when the case touches a high-word
+    // field. Stale runtime bundles' _handleMsg signatures ignored that
+    // slot anyway; new ones (defaulted to 0) make it explicit when needed.
+    if (caseDirtyHi !== 0)
+        args.push(createMaskLiteral(f, caseDirtyHi));
+    return f.createArrowFunction(undefined, undefined, [
+        f.createParameterDeclaration(undefined, undefined, 'inst'),
+        f.createParameterDeclaration(undefined, undefined, 'msg'),
+    ], undefined, f.createToken(ts.SyntaxKind.EqualsGreaterThanToken), f.createCallExpression(f.createIdentifier('__handleMsg'), undefined, args));
 }
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function _deadCode_legacyCaseHandler(f, caseDirty, arrayOp) {
@@ -2010,17 +2065,6 @@ function computeStructuralMask(configArg, fieldBits) {
     walk(viewProp.initializer);
     return foundStructural ? mask || 0xffffffff | 0 : 0;
 }
-/**
- * Compute the OR of all component-level binding masks from text() calls
- * and element bindings in the view. Returns 0 if no component-level bindings.
- */
-function computePhase2Mask(_configArg, _fieldBits) {
-    // For now, return FULL_MASK — a future pass can analyze all binding sites
-    // in the view to compute the precise aggregate. The key optimization is
-    // already in Phase 1 gating: when structuralMask doesn't intersect dirty,
-    // the entire reconciliation is skipped.
-    return 0xffffffff | 0;
-}
 /**
  * Build the __update function body:
  * {
@@ -2053,16 +2097,22 @@ function computePhase2Mask(_configArg, _fieldBits) {
  *   }
  * }
  */
-function buildUpdateBody(f, structuralMask, _phase2Mask) {
+function buildUpdateBody(f, structuralMask) {
     const stmts = [];
     // Phase 1: structural block reconciliation, gated by aggregate mask
     if (structuralMask !== 0) {
         const phase1Stmts = [];
         // for (let i = 0; i < bl.length; i++) {
         //   const bk = bl[i];
-        //   if (!bk || (bk.mask & d) === 0) continue;
-        //   bk.reconcile(s, d)
+        //   if (!bk || !((bk.mask & d) | (bk.maskHi & dHi))) continue;
+        //   bk.reconcile(s, d, dHi)
         // }
+        // Two-word gate matches the runtime's `genericUpdate`: bits 0..30
+        // in `d`, bits 31..61 in `dHi`. For ≤31-prefix components both
+        // `bk.maskHi` and `dHi` are 0, so V8's inline cache collapses the
+        // OR back to the single-word check. >31-prefix components use the
+        // high word for precise gating.
+        //
         // Re-read bl.length each iteration and null-check bk — a branch's
         // reconcile may dispose the old scope, whose disposers splice child
         // structural blocks out of this shared array mid-iteration.
@@ -2070,8 +2120,8 @@ function buildUpdateBody(f, structuralMask, _phase2Mask) {
             f.createVariableStatement(undefined, f.createVariableDeclarationList([
                 f.createVariableDeclaration('bk', undefined, undefined, f.createElementAccessExpression(f.createIdentifier('bl'), f.createIdentifier('i'))),
             ], ts.NodeFlags.Const)),
-            f.createIfStatement(f.createBinaryExpression(f.createPrefixUnaryExpression(ts.SyntaxKind.ExclamationToken, f.createIdentifier('bk')), ts.SyntaxKind.BarBarToken, f.createBinaryExpression(f.createParenthesizedExpression(f.createBinaryExpression(f.createPropertyAccessExpression(f.createIdentifier('bk'), 'mask'), ts.SyntaxKind.AmpersandToken, f.createIdentifier('d'))), ts.SyntaxKind.EqualsEqualsEqualsToken, f.createNumericLiteral(0))), f.createContinueStatement()),
-            f.createExpressionStatement(f.createCallExpression(f.createPropertyAccessExpression(f.createIdentifier('bk'), 'reconcile'), undefined, [f.createIdentifier('s'), f.createIdentifier('d')])),
+            f.createIfStatement(f.createBinaryExpression(f.createPrefixUnaryExpression(ts.SyntaxKind.ExclamationToken, f.createIdentifier('bk')), ts.SyntaxKind.BarBarToken, f.createPrefixUnaryExpression(ts.SyntaxKind.ExclamationToken, f.createParenthesizedExpression(f.createBinaryExpression(f.createParenthesizedExpression(f.createBinaryExpression(f.createPropertyAccessExpression(f.createIdentifier('bk'), 'mask'), ts.SyntaxKind.AmpersandToken, f.createIdentifier('d'))), ts.SyntaxKind.BarToken, f.createParenthesizedExpression(f.createBinaryExpression(f.createPropertyAccessExpression(f.createIdentifier('bk'), 'maskHi'), ts.SyntaxKind.AmpersandToken, f.createIdentifier('dHi'))))))), f.createContinueStatement()),
+            f.createExpressionStatement(f.createCallExpression(f.createPropertyAccessExpression(f.createIdentifier('bk'), 'reconcile'), undefined, [f.createIdentifier('s'), f.createIdentifier('d'), f.createIdentifier('dHi')])),
         ], true));
         phase1Stmts.push(blockLoop);
         // Compaction: if (b.length > p || (p > 0 && b[0].dead)) { ... }
@@ -2097,15 +2147,50 @@ function buildUpdateBody(f, structuralMask, _phase2Mask) {
             stmts.push(...phase1Stmts);
         }
     }
-    // Phase 2: delegate to shared runtime — __runPhase2(s, d, b, p)
+    // Phase 2: delegate to shared runtime — __runPhase2(s, d, dHi, b, p)
     stmts.push(f.createExpressionStatement(f.createCallExpression(f.createIdentifier('__runPhase2'), undefined, [
         f.createIdentifier('s'),
         f.createIdentifier('d'),
+        f.createIdentifier('dHi'),
         f.createIdentifier('b'),
         f.createIdentifier('p'),
     ])));
     return f.createBlock(stmts, true);
 }
+/**
+ * Build the `__prefixes` property assignment from path → bit maps.
+ *
+ * Emits one arrow `(s) => s.<path>` per distinct path. Array index =
+ * the path's bit position: positions 0..30 come from `fieldBits` (low
+ * word), positions 31..61 from `fieldBitsHi` (high word). The runtime
+ * walks this array and reference-compares `prefix(prev)` vs
+ * `prefix(next)` per entry, fanning bits into a `(lo, hi)` pair when
+ * the array length exceeds 31.
+ *
+ * Returns null if no paths are present.
+ */
+function buildPrefixesProp(fieldBits, fieldBitsHi, f) {
+    if (fieldBits.size === 0 && fieldBitsHi.size === 0)
+        return null;
+    // Sort paths by bit value within each word. Bits are powers of two
+    // inside their word (1, 2, 4, …, 1<<30), so sorting numerically gives
+    // ascending bit position. FULL_MASK (-1) entries from past-61
+    // overflow shouldn't drive a prefix entry — defensively skip them.
+    const orderedLo = [...fieldBits.entries()]
+        .filter(([, bit]) => bit > 0)
+        .sort(([, a], [, b]) => a - b);
+    const orderedHi = [...fieldBitsHi.entries()].sort(([, a], [, b]) => a - b);
+    const buildArrow = (path) => {
+        const parts = path.split('.');
+        const body = buildAccess(f, 's', parts);
+        return f.createArrowFunction(undefined, undefined, [f.createParameterDeclaration(undefined, undefined, 's')], undefined, f.createToken(ts.SyntaxKind.EqualsGreaterThanToken), body);
+    };
+    const arrows = [
+        ...orderedLo.map(([path]) => buildArrow(path)),
+        ...orderedHi.map(([path]) => buildArrow(path)),
+    ];
+    return f.createPropertyAssignment('__prefixes', f.createArrayLiteralExpression(arrows, false));
+}
 function buildAccess(f, root, parts) {
     let expr = f.createIdentifier(root);
     for (const part of parts) {
@@ -2817,7 +2902,7 @@ const VOID_ELEMENTS = new Set([
  * Try to analyze an element call and all its descendants as a collapsible subtree.
  * Returns null if any part of the tree is not eligible for collapse.
  */
-function analyzeSubtree(node, helpers, fieldBits, path) {
+function analyzeSubtree(node, helpers, fieldBits, path, fieldBitsHi = new Map()) {
     if (!ts.isIdentifier(node.expression))
         return null;
     const localName = node.expression.text;
@@ -2871,8 +2956,8 @@ function analyzeSubtree(node, helpers, fieldBits, path) {
             if (ts.isArrowFunction(value) || ts.isFunctionExpression(value)) {
                 const kind = classifyKind(key);
                 const resolvedKey = resolveKey(key, kind);
-                const { mask, readsState } = computeAccessorMask(value, fieldBits);
-                if (mask === 0 && !readsState) {
+                const { mask, maskHi, readsState } = computeAccessorMask(value, fieldBits, undefined, fieldBitsHi);
+                if (mask === 0 && maskHi === 0 && !readsState) {
                     // Constant fold — treat as static if we can extract a string
                     const staticVal = tryExtractStaticString(value);
                     if (staticVal !== null) {
@@ -2881,21 +2966,22 @@ function analyzeSubtree(node, helpers, fieldBits, path) {
                         continue;
                     }
                 }
-                bindings.push([mask === 0 && readsState ? 0xffffffff | 0 : mask, kind, resolvedKey, value]);
+                const finalMask = mask === 0 && maskHi === 0 && readsState ? 0xffffffff | 0 : mask;
+                bindings.push([finalMask, maskHi, kind, resolvedKey, value]);
                 continue;
             }
             // Per-item accessor call
             if (ts.isCallExpression(value) && isPerItemCall(value)) {
                 const kind = classifyKind(key);
                 const resolvedKey = resolveKey(key, kind);
-                bindings.push([0xffffffff | 0, kind, resolvedKey, value]);
+                bindings.push([0xffffffff | 0, 0, kind, resolvedKey, value]);
                 continue;
             }
             // Per-item property access: item.field (or hoisted __a0/__a1/…)
             if (isPerItemFieldAccess(value) || isHoistedPerItem(value)) {
                 const kind = classifyKind(key);
                 const resolvedKey = resolveKey(key, kind);
-                bindings.push([0xffffffff | 0, kind, resolvedKey, value]);
+                bindings.push([0xffffffff | 0, 0, kind, resolvedKey, value]);
                 continue;
             }
             // Static literal prop
@@ -2944,11 +3030,12 @@ function analyzeSubtree(node, helpers, fieldBits, path) {
                 // Reactive text — accessor is first arg
                 const accessor = child.arguments[0];
                 if (ts.isArrowFunction(accessor) || ts.isFunctionExpression(accessor)) {
-                    const { mask, readsState } = computeAccessorMask(accessor, fieldBits);
+                    const { mask, maskHi, readsState } = computeAccessorMask(accessor, fieldBits, undefined, fieldBitsHi);
                     children.push({
                         type: 'reactiveText',
                         accessor,
-                        mask: mask === 0 && readsState ? 0xffffffff | 0 : mask,
+                        mask: mask === 0 && maskHi === 0 && readsState ? 0xffffffff | 0 : mask,
+                        maskHi,
                         childIdx,
                     });
                     childIdx++; // placeholder text node in template
@@ -2960,6 +3047,7 @@ function analyzeSubtree(node, helpers, fieldBits, path) {
                         type: 'reactiveText',
                         accessor,
                         mask: 0xffffffff | 0,
+                        maskHi: 0,
                         childIdx,
                     });
                     childIdx++; // placeholder text node in template
@@ -2972,6 +3060,7 @@ function analyzeSubtree(node, helpers, fieldBits, path) {
                         type: 'reactiveText',
                         accessor,
                         mask: 0xffffffff | 0,
+                        maskHi: 0,
                         childIdx,
                     });
                     childIdx++;
@@ -2983,7 +3072,7 @@ function analyzeSubtree(node, helpers, fieldBits, path) {
             if (ts.isCallExpression(child) &&
                 ts.isIdentifier(child.expression) &&
                 helpers.has(child.expression.text)) {
-                const childNode = analyzeSubtree(child, helpers, fieldBits, [...path, childIdx]);
+                const childNode = analyzeSubtree(child, helpers, fieldBits, [...path, childIdx], fieldBitsHi);
                 if (!childNode)
                     return null;
                 children.push({ type: 'element', node: childNode });
@@ -3196,24 +3285,33 @@ function emitSubtreeTemplate(analyzed, fieldBits, f) {
                 ], ts.NodeFlags.Const)));
                 stmts.push(f.createExpressionStatement(f.createCallExpression(f.createPropertyAccessExpression(f.createPropertyAccessExpression(f.createIdentifier(cVar), 'parentNode'), 'replaceChild'), undefined, [f.createIdentifier(tVar), f.createIdentifier(cVar)])));
             }
-            // __bind(__t0, mask, 'text', undefined, accessor)
-            stmts.push(f.createExpressionStatement(f.createCallExpression(f.createIdentifier('__bind'), undefined, [
+            // __bind(__t0, mask, 'text', undefined, accessor, [maskHi])
+            const rtArgs = [
                 f.createIdentifier(tVar),
                 createMaskLiteral(f, rt.mask),
                 f.createStringLiteral('text'),
                 f.createIdentifier('undefined'),
                 rt.accessor,
-            ])));
-        }
-        // Reactive bindings — __bind(node, mask, kind, key, accessor)
-        for (const [mask, kind, key, accessor] of op.bindings) {
-            stmts.push(f.createExpressionStatement(f.createCallExpression(f.createIdentifier('__bind'), undefined, [
+            ];
+            // Only pass the 6th positional arg when the accessor reads a
+            // high-word prefix. Keeps the emit byte-identical to the
+            // pre-multi-word baseline for the common case.
+            if (rt.maskHi !== 0)
+                rtArgs.push(createMaskLiteral(f, rt.maskHi));
+            stmts.push(f.createExpressionStatement(f.createCallExpression(f.createIdentifier('__bind'), undefined, rtArgs)));
+        }
+        // Reactive bindings — __bind(node, mask, kind, key, accessor, [maskHi])
+        for (const [mask, maskHi, kind, key, accessor] of op.bindings) {
+            const args = [
                 nodeRef,
                 createMaskLiteral(f, mask),
                 f.createStringLiteral(kind),
                 key ? f.createStringLiteral(key) : f.createIdentifier('undefined'),
                 accessor,
-            ])));
+            ];
+            if (maskHi !== 0)
+                args.push(createMaskLiteral(f, maskHi));
+            stmts.push(f.createExpressionStatement(f.createCallExpression(f.createIdentifier('__bind'), undefined, args)));
         }
     }
     // Emit delegated event listeners on root
@@ -3427,22 +3525,23 @@ function isHoistedPerItem(node) {
 // See `NON_DELEGATION_HELPERS` in collect-deps.ts — same set of names
 // that aren't followed when scanning for `helper(s)` delegation calls.
 const NON_DELEGATION_HELPERS = new Set(['sample', 'item', 'memo', 'text', 'unsafeHtml']);
-function computeAccessorMask(accessor, fieldBits, visited = new Set()) {
+function computeAccessorMask(accessor, fieldBits, visited = new Set(), fieldBitsHi) {
     if (visited.has(accessor))
-        return { mask: 0, readsState: false };
+        return { mask: 0, maskHi: 0, readsState: false };
     visited.add(accessor);
     if (accessor.parameters.length === 0)
-        return { mask: 0xffffffff | 0, readsState: false };
+        return { mask: 0xffffffff | 0, maskHi: 0, readsState: false };
     const paramName = accessor.parameters[0].name;
     if (!ts.isIdentifier(paramName))
-        return { mask: 0xffffffff | 0, readsState: false };
+        return { mask: 0xffffffff | 0, maskHi: 0, readsState: false };
     // FunctionDeclaration always has a body (we never resolve overloads here);
     // ArrowFunction's body may be a single expression. Both shapes are walked
     // identically by ts.forEachChild, so no special-casing is needed below.
     if (!accessor.body)
-        return { mask: 0xffffffff | 0, readsState: false };
+        return { mask: 0xffffffff | 0, maskHi: 0, readsState: false };
     const stateParam = paramName.text;
     let mask = 0;
+    let maskHi = 0;
     let readsState = false;
     // `inNestedFn` gates only the delegation-recursion. Property-access
     // path extraction happens everywhere — inner-arrow callbacks like
@@ -3472,9 +3571,13 @@ function computeAccessorMask(accessor, fieldBits, visited = new Set()) {
                 const chain = resolveChain(node, stateParam);
                 if (chain) {
                     const bit = fieldBits.get(chain);
+                    const bitHi = fieldBitsHi?.get(chain);
                     if (bit !== undefined) {
                         mask |= bit;
                     }
+                    else if (bitHi !== undefined) {
+                        maskHi |= bitHi;
+                    }
                     else {
                         // Match paths that overlap our chain in either direction:
                         //   - `path` extends `chain` — fieldBits has finer-grained paths
@@ -3490,6 +3593,15 @@ function computeAccessorMask(accessor, fieldBits, visited = new Set()) {
                                 mask |= b;
                             }
                         }
+                        if (fieldBitsHi) {
+                            for (const [path, b] of fieldBitsHi) {
+                                if (path === chain ||
+                                    path.startsWith(chain + '.') ||
+                                    chain.startsWith(path + '.')) {
+                                    maskHi |= b;
+                                }
+                            }
+                        }
                     }
                 }
             }
@@ -3506,8 +3618,9 @@ function computeAccessorMask(accessor, fieldBits, visited = new Set()) {
                 if (arg0 && ts.isIdentifier(arg0) && arg0.text === stateParam) {
                     const resolved = resolveAccessorBody(node.expression);
                     if (resolved) {
-                        const inner = computeAccessorMask(resolved, fieldBits, visited);
+                        const inner = computeAccessorMask(resolved, fieldBits, visited, fieldBitsHi);
                         mask |= inner.mask;
+                        maskHi |= inner.maskHi;
                         if (inner.readsState)
                             readsState = true;
                     }
@@ -3518,10 +3631,10 @@ function computeAccessorMask(accessor, fieldBits, visited = new Set()) {
         ts.forEachChild(node, (child) => walk(child, inNestedFn || enteringNested));
     }
     walk(accessor.body, false);
-    if (mask === 0 && readsState) {
-        return { mask: 0xffffffff | 0, readsState: true };
+    if (mask === 0 && maskHi === 0 && readsState) {
+        return { mask: 0xffffffff | 0, maskHi: 0, readsState: true };
     }
-    return { mask, readsState };
+    return { mask, maskHi, readsState };
 }
 function resolveChain(node, paramName) {
     const parts = [];