@llui/vite-plugin 0.0.42 → 0.1.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))
@@ -1095,6 +1106,16 @@ function tryInjectDirty(node, fieldBits, f) {
         const topField = path.split('.')[0];
         topLevelBits.set(topField, (topLevelBits.get(topField) ?? 0) | bit);
     }
+    // Parallel high-word map: top-level fields whose paths fall at bit
+    // positions 31..61 contribute here instead of (or in addition to)
+    // `topLevelBits`. A field with sub-paths split across both words —
+    // e.g., `user.name` at position 30 and `user.email` at position 31 —
+    // ends up in both maps under the same top-level key.
+    const topLevelBitsHi = new Map();
+    for (const [path, bit] of fieldBitsHi) {
+        const topField = path.split('.')[0];
+        topLevelBitsHi.set(topField, (topLevelBitsHi.get(topField) ?? 0) | bit);
+    }
     const comparisons = [];
     for (const [field, bit] of topLevelBits) {
         const oAccess = buildAccess(f, 'o', [field]);
@@ -1130,23 +1151,65 @@ function tryInjectDirty(node, fieldBits, f) {
     const structuralMask = computeStructuralMask(configArg, fieldBits);
     const phase2Mask = computePhase2Mask(configArg, fieldBits);
     const updateBody = buildUpdateBody(f, structuralMask, phase2Mask);
+    // `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 now —
+    // `__update`'s Phase 1 block loop uses `(mask & d) | (maskHi & dHi)`
+    // with `dHi` as the trailing parameter (defaults to 0 for backward
+    // compat with old 5-arg call sites), and `__handlers` passes
+    // `caseDirtyHi` to `_handleMsg` which gates blocks against both
+    // words. Safe to emit for any prefix count.
+    // `__dirty` emission was removed in 2026-05: `__prefixes` is strictly
+    // more precise (per-prefix rather than per-top-level-field), supports
+    // 62 paths via two-word masks, and the runtime throws if it sees a
+    // hand-authored `__dirty`. `legendProp` (`__maskLegend`) is still
+    // emitted for the agent layer's introspection — it surfaces the
+    // top-level-field-to-bit mapping for `whyDidUpdate` / dispatch
+    // tracing without depending on `__dirty` at runtime.
+    void dirtyFn;
+    void dirtyProp;
+    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 +1227,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 +1304,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 +1315,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 +1523,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 +1547,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 +1587,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 +1599,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) {
@@ -2060,9 +2149,15 @@ function buildUpdateBody(f, structuralMask, _phase2Mask) {
         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 +2165,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 +2192,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 +2947,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 +3001,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 +3011,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 +3075,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 +3092,7 @@ function analyzeSubtree(node, helpers, fieldBits, path) {
                         type: 'reactiveText',
                         accessor,
                         mask: 0xffffffff | 0,
+                        maskHi: 0,
                         childIdx,
                     });
                     childIdx++; // placeholder text node in template
@@ -2972,6 +3105,7 @@ function analyzeSubtree(node, helpers, fieldBits, path) {
                         type: 'reactiveText',
                         accessor,
                         mask: 0xffffffff | 0,
+                        maskHi: 0,
                         childIdx,
                     });
                     childIdx++;
@@ -2983,7 +3117,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 +3330,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 +3570,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 +3616,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 +3638,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 +3663,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 +3676,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 = [];