@rohal12/spindle 0.51.0 → 0.51.1

package/dist/pkg/story-variables.js

@@ -768,6 +768,12 @@ var VALID_VAR_TYPES = new Set([
 	"string",
 	"boolean"
 ]);
+/** Boxed sample values whose members a primitive of each type can access. */
+var PRIMITIVE_SAMPLES = {
+	string: Object(""),
+	number: Object(0),
+	boolean: Object(false)
+};
 function inferSchema(value) {
 	if (Array.isArray(value)) return { type: "array" };
 	if (value !== null && typeof value === "object") {
@@ -845,6 +851,13 @@ function validateRef(ref, schema, forLocals) {
 	for (let i = 1; i < parts.length; i++) {
 		const part = parts[i];
 		if (current.type === "array") return null;
+		const sample = PRIMITIVE_SAMPLES[current.type];
+		if (sample && part in sample) {
+			const memberType = typeof sample[part];
+			if (!VALID_VAR_TYPES.has(memberType)) return null;
+			current = { type: memberType };
+			continue;
+		}
 		if (current.type !== "object" || !current.fields) return `Cannot access field "${part}" on $${parts.slice(0, i).join(".")} (type: ${current.type})`;
 		const fieldSchema = current.fields.get(part);
 		if (!fieldSchema) return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rohal12/spindle",
-  "version": "0.51.0",
+  "version": "0.51.1",
   "type": "module",
   "description": "A Preact-based story format for Twine 2.",
   "license": "Unlicense",

package/src/class-registry.ts

@@ -27,7 +27,16 @@ function isPlainObject(value: unknown): value is Record<string, unknown> {
   return proto === Object.prototype || proto === null;
 }
 
-export function deepClone<T>(value: T): T {
+export interface DeepCloneOptions {
+  /**
+   * Return instances of unregistered classes (DOM nodes, promises, other
+   * library objects) by reference instead of copying their own keys into a
+   * plain object, which would lose their prototype and identity.
+   */
+  keepUnregistered?: boolean;
+}
+
+export function deepClone<T>(value: T, options: DeepCloneOptions = {}): T {
   const seen = new Map<object, object>();
 
   function clone(val: unknown): unknown {
@@ -83,6 +92,7 @@ export function deepClone<T>(value: T): T {
     }
 
     // Plain object (or unregistered class — treat as plain)
+    if (!isPlainObject(val) && options.keepUnregistered) return val;
     if (isPlainObject(val) || typeof val === 'object') {
       const copy: Record<string, unknown> = {};
       seen.set(obj, copy);
@@ -98,6 +108,58 @@ export function deepClone<T>(value: T): T {
   return clone(value) as T;
 }
 
+// --- Deep Equal ---
+
+/**
+ * Structural equality over the value types deepClone() supports: primitives,
+ * arrays, plain objects, class instances, Date, RegExp, Map and Set (nested
+ * at any depth). Map and Set entries are compared in insertion order.
+ */
+export function deepEqual(
+  a: unknown,
+  b: unknown,
+  seen: Map<object, object> = new Map(),
+): boolean {
+  if (Object.is(a, b)) return true;
+  if (
+    a === null ||
+    b === null ||
+    typeof a !== 'object' ||
+    typeof b !== 'object'
+  ) {
+    return false;
+  }
+  if (Object.getPrototypeOf(a) !== Object.getPrototypeOf(b)) return false;
+  if (seen.get(a) === b) return true;
+  seen.set(a, b);
+
+  if (a instanceof Date) return Object.is(a.getTime(), (b as Date).getTime());
+  if (a instanceof RegExp) return String(a) === String(b);
+  if (a instanceof Map || a instanceof Set) {
+    const bc = b as Map<unknown, unknown> | Set<unknown>;
+    if (a.size !== bc.size) return false;
+    const ai = a.entries();
+    const bi = bc.entries();
+    for (
+      let x = ai.next(), y = bi.next();
+      !x.done;
+      x = ai.next(), y = bi.next()
+    ) {
+      if (!deepEqual(x.value, y.value, seen)) return false;
+    }
+    return true;
+  }
+
+  const ao = a as Record<string, unknown>;
+  const bo = b as Record<string, unknown>;
+  const keys = Object.keys(ao);
+  if (keys.length !== Object.keys(bo).length) return false;
+  for (const key of keys) {
+    if (!(key in bo) || !deepEqual(ao[key], bo[key], seen)) return false;
+  }
+  return true;
+}
+
 // --- Serialize ---
 
 const CLASS_TAG = '__spindle_class__';

package/src/components/macros/Computed.tsx

@@ -1,5 +1,6 @@
 import { useStoryStore } from '../../store';
 import { evaluate } from '../../expression';
+import { deepEqual } from '../../class-registry';
 import { currentSourceLocation } from '../../utils/source-location';
 import { defineMacro } from '../../define-macro';
 import { MacroError } from './MacroError';
@@ -37,23 +38,6 @@ function parseComputedArgs(rawArgs: string): { target: string; expr: string } {
   );
 }
 
-function valuesEqual(a: unknown, b: unknown): boolean {
-  if (Object.is(a, b)) return true;
-  if (
-    typeof a === 'object' &&
-    a !== null &&
-    typeof b === 'object' &&
-    b !== null
-  ) {
-    try {
-      return JSON.stringify(a) === JSON.stringify(b);
-    } catch {
-      return false;
-    }
-  }
-  return false;
-}
-
 function computeAndApply(
   expr: string,
   name: string,
@@ -78,7 +62,7 @@ function computeAndApply(
     return;
   }
 
-  if (!valuesEqual(prevRef.current, newValue)) {
+  if (!deepEqual(prevRef.current, newValue)) {
     prevRef.current = newValue;
     if (isLocal) {
       try {

package/src/components/macros/Include.tsx

@@ -4,6 +4,62 @@ import { buildAST } from '../../markup/ast';
 import { NobrContext } from '../../markup/render';
 import { defineMacro } from '../../define-macro';
 
+const FLAG = 'inline';
+
+/**
+ * Split a standalone `inline` flag off the start or end of the include
+ * arguments. The flag only counts outside quotes, brackets, parentheses and
+ * braces, separated by whitespace from the target expression, so passage
+ * names and expressions containing the word stay intact (#201).
+ */
+function parseIncludeArgs(rawArgs: string): {
+  nameExpr: string;
+  inline: boolean;
+} {
+  const trimmed = rawArgs.trim();
+
+  // First and last whitespace runs at depth 0, as [start, end) offsets.
+  let first: [number, number] | null = null;
+  let last: [number, number] | null = null;
+  let depth = 0;
+  let inString: string | null = null;
+  for (let i = 0; i < trimmed.length; i++) {
+    const ch = trimmed[i]!;
+    if (inString) {
+      if (ch === '\\') i++;
+      else if (ch === inString) inString = null;
+      continue;
+    }
+    if (ch === '"' || ch === "'" || ch === '`') inString = ch;
+    else if (ch === '(' || ch === '[' || ch === '{') depth++;
+    else if (ch === ')' || ch === ']' || ch === '}') depth--;
+    else if (depth === 0 && /\s/.test(ch)) {
+      let end = i + 1;
+      while (end < trimmed.length && /\s/.test(trimmed[end]!)) end++;
+      last = [i, end];
+      first ??= last;
+      i = end - 1;
+    }
+  }
+
+  // Next to a binary operator the word is an operand (`"a" + inline`).
+  if (
+    last &&
+    last[1] === trimmed.length - FLAG.length &&
+    trimmed.endsWith(FLAG)
+  ) {
+    const rest = trimmed.slice(0, last[0]);
+    if (!/[-+*/%&|^!=<>?:,.]$/.test(rest))
+      return { nameExpr: rest, inline: true };
+  }
+  if (first && first[0] === FLAG.length && trimmed.startsWith(FLAG)) {
+    const rest = trimmed.slice(first[1]);
+    if (!/^[-+*/%&|^=<>?:,.]/.test(rest))
+      return { nameExpr: rest, inline: true };
+  }
+  return { nameExpr: trimmed, inline: false };
+}
+
 defineMacro({
   name: 'include',
   interpolate: true,
@@ -11,8 +67,7 @@ defineMacro({
   render({ rawArgs }, ctx) {
     const storyData = useStoryStore((s) => s.storyData);
 
-    const inline = /\binline\b/.test(rawArgs);
-    const nameExpr = rawArgs.replace(/\binline\b/, '').trim();
+    const { nameExpr, inline } = parseIncludeArgs(rawArgs);
 
     let passageName: string;
     try {

package/src/components/macros/MacroLink.tsx

@@ -14,12 +14,13 @@ function parseArgs(rawArgs: string): {
   display: string;
   passage: string | null;
 } {
-  // {link "text" "Passage"} or {link "text"}
+  // {link "text" "Passage"} or {link "text"}. A backslash escapes a quote
+  // or another backslash inside a quoted argument (#200).
   const parts: string[] = [];
-  const re = /(["'])(.*?)\1/g;
+  const re = /(["'])((?:\\[^]|(?!\1)[^\\])*)\1/g;
   let m;
   while ((m = re.exec(rawArgs)) !== null) {
-    parts.push(m[2]!);
+    parts.push(m[2]!.replace(/\\(["'\\])/g, '$1'));
   }
   if (parts.length >= 2) {
     return { display: parts[0]!, passage: parts[1]! };

package/src/components/macros/SaveManager.tsx

@@ -12,6 +12,7 @@ import {
   createSave,
   overwriteSave,
   deleteSaveById,
+  populateKnownSaves,
   renameSave,
   exportSave,
   importSave,
@@ -151,6 +152,12 @@ export function SaveManagerContent() {
     if (!confirm('Delete this save?')) return;
     try {
       await deleteSaveById(saveId);
+      // The save may have been held by a slot; hasSave() and QuickLoad
+      // read the store's cache
+      const known = await populateKnownSaves(ifid);
+      useStoryStore.setState((state) => {
+        state.knownSaves = known;
+      });
       showStatus('Save deleted');
       await refresh();
     } catch {

package/src/components/macros/VarDisplay.tsx

@@ -34,9 +34,10 @@ export function VarDisplay({ name, scope, className, id }: VarDisplayProps) {
     value = storeValue;
   }
 
-  // Resolve dot path (e.g. "character.name" → character['name'])
+  // Resolve dot path (e.g. "character.name" → character['name']). Primitives
+  // box on access, so built-ins like "name.length" resolve too.
   for (let i = 1; i < parts.length; i++) {
-    if (value == null || typeof value !== 'object') {
+    if (value == null) {
       value = undefined;
       break;
     }

package/src/components/macros/Widget.tsx

@@ -1,4 +1,6 @@
 import { registerWidget } from '../../widgets/widget-registry';
+import { astContainsChildren } from '../../widgets/ast-scanner';
+import { registerBlockMacro } from '../../markup/ast';
 import { defineMacro } from '../../define-macro';
 
 function parseWidgetDef(rawArgs: string): { name: string; params: string[] } {
@@ -18,7 +20,11 @@ defineMacro({
     const paramsKey = params.join(',');
 
     ctx.hooks.useLayoutEffect(() => {
-      registerWidget(name, children, params);
+      // Widgets whose body renders {@children} take a closing tag; register
+      // them as block macros so passages parsed later nest their content.
+      const isBlock = astContainsChildren(children);
+      registerWidget(name, children, params, isBlock);
+      if (isBlock) registerBlockMacro(name);
     }, [name, childrenKey, paramsKey]);
 
     return null;

package/src/components/macros/WidgetInvocation.tsx

@@ -230,7 +230,9 @@ export function WidgetInvocation({
 
   const childrenValue = invocationChildren?.length ? invocationChildren : null;
 
-  if (params.length === 0 || !rawArgs) {
+  // Parameterized widgets always get their own local scope, even when invoked
+  // without arguments: missing parameters shadow outer locals as undefined.
+  if (params.length === 0) {
     return (
       <WidgetChildrenContext.Provider value={childrenValue}>
         {renderNodes(body, { nobr, locals: parentValues })}
@@ -238,7 +240,7 @@ export function WidgetInvocation({
     );
   }
 
-  const argExprs = splitArgs(rawArgs);
+  const argExprs = rawArgs ? splitArgs(rawArgs) : [];
   const values: unknown[] = [];
 
   for (let i = 0; i < params.length; i++) {

package/src/execute-mutation.ts

@@ -1,57 +1,6 @@
 import { useStoryStore } from './store';
 import { execute } from './expression';
-import { deepClone } from './class-registry';
-
-/**
- * Structural equality for a deepClone() copy against its source. Lets
- * executeMutation write back only the variables the code actually changed,
- * so untouched clones don't overwrite updates made during execution
- * (e.g. Story.set called from inside {do}).
- */
-function deepEqual(
-  a: unknown,
-  b: unknown,
-  seen: Map<object, object> = new Map(),
-): boolean {
-  if (Object.is(a, b)) return true;
-  if (
-    a === null ||
-    b === null ||
-    typeof a !== 'object' ||
-    typeof b !== 'object'
-  ) {
-    return false;
-  }
-  if (Object.getPrototypeOf(a) !== Object.getPrototypeOf(b)) return false;
-  if (seen.get(a) === b) return true;
-  seen.set(a, b);
-
-  if (a instanceof Date) return a.getTime() === (b as Date).getTime();
-  if (a instanceof RegExp) return String(a) === String(b);
-  if (a instanceof Map || a instanceof Set) {
-    const bc = b as Map<unknown, unknown> | Set<unknown>;
-    if (a.size !== bc.size) return false;
-    const ai = a.entries();
-    const bi = bc.entries();
-    for (
-      let x = ai.next(), y = bi.next();
-      !x.done;
-      x = ai.next(), y = bi.next()
-    ) {
-      if (!deepEqual(x.value, y.value, seen)) return false;
-    }
-    return true;
-  }
-
-  const ao = a as Record<string, unknown>;
-  const bo = b as Record<string, unknown>;
-  const keys = Object.keys(ao);
-  if (keys.length !== Object.keys(bo).length) return false;
-  for (const key of keys) {
-    if (!(key in bo) || !deepEqual(ao[key], bo[key], seen)) return false;
-  }
-  return true;
-}
+import { deepClone, deepEqual } from './class-registry';
 
 /**
  * Write the keys `code` changed (`clone` vs the pre-execution `before`) into
@@ -84,7 +33,12 @@ export function executeMutation(
   const vars = deepClone(state.variables);
   const temps = deepClone(state.temporary);
   const trans = deepClone(state.transient);
-  const localsClone = { ...mergedLocals };
+  // Locals are deep-cloned like the store namespaces: a loop item or widget
+  // argument taken from story state is Immer-frozen, and an unfrozen object
+  // mutated in place would keep its reference, so a nested assignment
+  // (`@item.name = "x"`) would be lost or never reach the scope updater.
+  // Unregistered class instances (DOM nodes etc.) stay shared by reference.
+  const localsClone = deepClone(mergedLocals, { keepUnregistered: true });
 
   execute(code, vars, temps, localsClone, trans);
 
@@ -98,7 +52,7 @@ export function executeMutation(
   });
 
   for (const key of Object.keys(localsClone)) {
-    if (localsClone[key] !== mergedLocals[key]) {
+    if (!deepEqual(localsClone[key], mergedLocals[key])) {
       scopeUpdate(key, localsClone[key]);
     }
   }

package/src/expression.ts

@@ -31,21 +31,45 @@ const fnCache = new Map<string, CompiledExpression>();
 
 /**
  * Transform expression: $var → variables["var"], _var → temporary["var"],
- * @var → locals["var"], %var → transient["var"]
+ * @var → locals["var"]
  * Only transforms when sigils appear as a word boundary (not inside strings naively,
  * but authors already have full JS access so this is acceptable).
+ * `%var` → transient["var"] is handled by `transform` itself, because `%` is
+ * also the modulo operator and only an operand position makes it a sigil.
  */
 const VAR_RE = /\$(\w+)/g;
 const TEMP_RE = /(?<![.\w])_(\w+)/g;
 const LOCAL_RE = /@(\w+)/g;
-const TRANS_RE = /(?<!\w)%(\w+)/g;
+/** Transient name after `%`: an identifier, so `%3` is never a reference. */
+const TRANS_NAME_RE = /[A-Za-z_]\w*/y;
+/** Characters of identifiers, numbers and sigil variable references. */
+const WORD_CHAR_RE = /[\w$@]/;
+const SPACE_RE = /\s/;
+/** Keywords followed by an operand rather than an operator. */
+const OPERAND_KEYWORDS = new Set([
+  'await',
+  'case',
+  'delete',
+  'do',
+  'else',
+  'in',
+  'instanceof',
+  'new',
+  'of',
+  'return',
+  'throw',
+  'typeof',
+  'void',
+  'yield',
+]);
+/** Keywords whose parenthesised header is followed by a statement. */
+const HEADER_KEYWORDS = new Set(['for', 'if', 'while', 'with']);
 
 function transformSegment(segment: string): string {
   return segment
     .replace(VAR_RE, 'variables["$1"]')
     .replace(TEMP_RE, 'temporary["$1"]')
-    .replace(LOCAL_RE, 'locals["$1"]')
-    .replace(TRANS_RE, 'transient["$1"]');
+    .replace(LOCAL_RE, 'locals["$1"]');
 }
 
 /**
@@ -53,12 +77,23 @@ function transformSegment(segment: string): string {
  * character so that variable sigils ($, _, @, %) inside string literals are
  * left untouched while code — including expressions inside template-literal
  * `${…}` interpolations — is transformed.
+ *
+ * It also tracks whether the next token is an operand or an operator, so that
+ * `%name` in operand position is a transient reference while `%` after an
+ * operand — `($n)%3`, `$a[i] %2`, `$a%$b` — stays the modulo operator.
  */
 function transform(expr: string): string {
   let result = '';
   let code = ''; // accumulates code characters to be transformed
   let i = 0;
 
+  let operandNext = true; // an operand (not an operator) comes next
+  let word = ''; // identifier/number currently being read
+  let afterDot = false; // `word` is a property name, never a keyword
+  let afterHeaderKeyword = false; // last token was if/while/for/with
+  let lastPunct = '';
+  const parenIsHeader: boolean[] = []; // per open `(`: closes a header?
+
   function flushCode() {
     if (code) {
       result += transformSegment(code);
@@ -66,6 +101,49 @@ function transform(expr: string): string {
     }
   }
 
+  function endWord() {
+    if (!word) return;
+    operandNext = !afterDot && OPERAND_KEYWORDS.has(word);
+    afterHeaderKeyword = !afterDot && HEADER_KEYWORDS.has(word);
+    afterDot = false;
+    lastPunct = '';
+    word = '';
+  }
+
+  /** A string or template literal, or a transient reference, just ended. */
+  function endOperand() {
+    endWord();
+    operandNext = false;
+    afterHeaderKeyword = false;
+    afterDot = false;
+    lastPunct = '';
+  }
+
+  function trackCode(c: string) {
+    if (WORD_CHAR_RE.test(c)) {
+      word += c;
+      return;
+    }
+    endWord();
+    // A line may start a new statement such as `%x = 1`.
+    if (c === '\n') operandNext = true;
+    if (SPACE_RE.test(c)) return;
+    if (c === '(') parenIsHeader.push(afterHeaderKeyword);
+    if (c === ')') {
+      // `if (…) %x = 1` vs `($n)%3`
+      operandNext = parenIsHeader.pop() ?? false;
+    } else if (c === '.') {
+      // Property access, unless it is the spread `...`
+      operandNext = lastPunct === '.';
+    } else {
+      // `]` ends an operand; `}` closes a block, so a statement may follow.
+      operandNext = c !== ']';
+    }
+    afterDot = c === '.';
+    afterHeaderKeyword = false;
+    lastPunct = c;
+  }
+
   while (i < expr.length) {
     const ch = expr.charAt(i);
 
@@ -90,6 +168,7 @@ function transform(expr: string): string {
         }
       }
       result += str;
+      endOperand();
       continue;
     }
 
@@ -192,10 +271,26 @@ function transform(expr: string): string {
           i++;
         }
       }
+      endOperand();
       continue;
     }
 
+    // Transient reference — only where an operand is expected
+    if (ch === '%') {
+      endWord();
+      TRANS_NAME_RE.lastIndex = i + 1;
+      const name = operandNext ? TRANS_NAME_RE.exec(expr)?.[0] : undefined;
+      if (name) {
+        flushCode();
+        result += `transient["${name}"]`;
+        i += 1 + name.length;
+        endOperand();
+        continue;
+      }
+    }
+
     // Regular code character
+    trackCode(ch);
     code += ch;
     i++;
   }

package/src/index.tsx

@@ -2,14 +2,13 @@ import { render } from 'preact';
 import { App } from './components/App';
 import { parseStoryData } from './parser';
 import { useStoryStore, enterRuntimePhase } from './store';
-import { emit } from './event-emitter';
 import {
   installStoryAPI,
   getReadyPromise,
   setDeclaredVariables,
 } from './story-api';
 import { resetIdCounters } from './action-registry';
-import { executeStoryInit } from './story-init';
+import { initializeStory } from './story-init';
 import { connectTriggersToStore } from './triggers';
 import { loadSession } from './saves/save-manager';
 import {
@@ -141,26 +140,15 @@ export function boot() {
   // Enter runtime phase — handlers registered from here on are cleaned on restart
   enterRuntimePhase();
 
-  // Execute StoryInit passage if it exists
-  executeStoryInit();
-
-  // Restore session state if the page was refreshed
-  const sessionPayload = loadSession(storyData.ifid);
-  if (sessionPayload) {
-    useStoryStore.getState().loadFromPayload(sessionPayload);
-  }
-
-  // Fire storyinit after all state is settled (defaults + StoryInit + session)
-  emit('storyinit');
-
-  // Pass 1: Pre-scan all widget passages to discover block widgets.
-  // Register them as block macros BEFORE any tokenize/buildAST calls,
-  // so that widget bodies using other block widgets parse correctly
-  // regardless of passage order.
+  // Pass 1: Pre-scan StoryInit and all widget passages to discover block
+  // widgets. Register them as block macros BEFORE any tokenize/buildAST
+  // calls (StoryInit's included), so that passages invoking block widgets
+  // and widget bodies using other block widgets parse correctly regardless
+  // of passage or definition order.
   const blockWidgetPattern =
     /\{widget\s+["']?(\w+)["']?[^}]*\}([\s\S]*?)\{\/widget\}/g;
-  for (const [, passage] of storyData.passages) {
-    if (passage.tags.includes('widget')) {
+  for (const [passageName, passage] of storyData.passages) {
+    if (passageName === 'StoryInit' || passage.tags.includes('widget')) {
       let match;
       while ((match = blockWidgetPattern.exec(passage.content)) !== null) {
         const name = match[1]!;
@@ -173,6 +161,10 @@ export function boot() {
     }
   }
 
+  // Run StoryInit, restore the session if the page was refreshed, and fire
+  // storyinit after all state is settled (defaults + StoryInit + session)
+  initializeStory(loadSession(storyData.ifid));
+
   // Pass 2: Full parse and register widgets from passages tagged "widget"
   for (const [, passage] of storyData.passages) {
     if (passage.tags.includes('widget')) {

package/src/interpolation.ts

@@ -11,7 +11,8 @@ export function hasInterpolation(s: string): boolean {
 function resolveDotPath(root: unknown, parts: string[]): unknown {
   let value = root;
   for (let i = 1; i < parts.length; i++) {
-    if (value == null || typeof value !== 'object') return undefined;
+    // Primitives box on access, so `{$name.length}` works too.
+    if (value == null) return undefined;
     value = (value as Record<string, unknown>)[parts[i]!];
   }
   return value;

package/src/markup/ast.ts

@@ -91,6 +91,14 @@ const BRANCH_PARENT: Record<string, string> = {
 /** Block macros that use the branches[] array */
 const BRANCHING_BLOCK_MACROS = new Set(['if', 'switch', 'timed']);
 
+/**
+ * Quote a bracket-link value as a {link} argument, escaping backslashes and
+ * double quotes so MacroLink reads the value back unchanged (#200).
+ */
+function quoteArg(value: string): string {
+  return `"${value.replace(/[\\"]/g, '\\$&')}"`;
+}
+
 /**
  * Build an AST from a token array. Block macros are nested into trees
  * using a stack. Throws on unclosed or mismatched macros.
@@ -118,7 +126,7 @@ export function buildAST(tokens: Token[]): ASTNode[] {
         break;
 
       case 'link': {
-        const rawArgs = `"${token.display}" "${token.target}"`;
+        const rawArgs = `${quoteArg(token.display)} ${quoteArg(token.target)}`;
         const macroNode: MacroNode = {
           type: 'macro',
           name: 'link',

package/src/markup/render.tsx

@@ -339,7 +339,8 @@ function getVariableTextValue(
   else value = locals[root];
 
   for (let i = 1; i < parts.length; i++) {
-    if (value == null || typeof value !== 'object') return '';
+    // Primitives box on access, so `{$name.length}` works too.
+    if (value == null) return '';
     value = (value as Record<string, unknown>)[parts[i]!];
   }