@rohal12/spindle 0.28.4 → 0.29.1

package/package.json

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

package/src/class-registry.ts

@@ -99,12 +99,18 @@ export function serialize<T>(value: T): T {
 
     if (val instanceof Date) {
       seen.delete(obj);
-      return val.toISOString();
+      return {
+        [CLASS_TAG]: '__Date__',
+        [DATA_TAG]: { iso: val.toISOString() },
+      };
     }
 
     if (val instanceof RegExp) {
       seen.delete(obj);
-      return val.toString();
+      return {
+        [CLASS_TAG]: '__RegExp__',
+        [DATA_TAG]: { source: val.source, flags: val.flags },
+      };
     }
 
     if (Array.isArray(val)) {
@@ -153,6 +159,15 @@ export function deserialize<T>(value: T): T {
     if (CLASS_TAG in obj && DATA_TAG in obj) {
       const name = obj[CLASS_TAG] as string;
       const data = obj[DATA_TAG] as Record<string, unknown>;
+
+      // Built-in types
+      if (name === '__Date__') {
+        return new Date(data.iso as string);
+      }
+      if (name === '__RegExp__') {
+        return new RegExp(data.source as string, data.flags as string);
+      }
+
       const ctor = registry.get(name);
       if (!ctor) {
         console.warn(

package/src/components/Passage.tsx

@@ -37,7 +37,8 @@ export function Passage({ passage, dataTransition }: PassageProps) {
       return (
         <div class="error">
           Error parsing passage &ldquo;{passage.name}&rdquo;
-          {sourceLocationOf(passage)}: {(err as Error).message}
+          {sourceLocationOf(passage)}:{' '}
+          {err instanceof Error ? err.message : String(err)}
         </div>
       );
     }

package/src/components/PassageDialog.tsx

@@ -38,7 +38,11 @@ export function PassageDialog({
       const ast = buildAST(tokens);
       return renderNodes(ast);
     } catch (err) {
-      return <div class="error">Error in dialog: {(err as Error).message}</div>;
+      return (
+        <div class="error">
+          Error in dialog: {err instanceof Error ? err.message : String(err)}
+        </div>
+      );
     }
   }, [markup]);
 

package/src/components/macros/Button.tsx

@@ -1,9 +1,11 @@
 import { h, render } from 'preact';
+import { useContext } from 'preact/hooks';
 import { defineMacro } from '../../define-macro';
 import {
   renderNodes,
   LocalsUpdateContext,
   LocalsValuesContext,
+  NobrContext,
 } from '../../markup/render';
 
 defineMacro({
@@ -11,6 +13,7 @@ defineMacro({
   interpolate: true,
   render({ rawArgs, children = [] }, ctx) {
     const label = ctx.resolve?.(rawArgs.replace(/^["']|["']$/g, '')) ?? rawArgs;
+    const nobr = useContext(NobrContext);
 
     const handleClick = () => {
       // Render children into a detached DOM node — all macro side effects
@@ -18,12 +21,16 @@ defineMacro({
       // Wrap with locals context so @local variables from for-loops are available.
       const container = document.createElement('div');
       const vnode = h(
-        LocalsUpdateContext.Provider,
-        { value: { update: ctx.update, getValues: ctx.getValues } },
+        NobrContext.Provider,
+        { value: nobr },
         h(
-          LocalsValuesContext.Provider,
-          { value: ctx.getValues() },
-          renderNodes(children),
+          LocalsUpdateContext.Provider,
+          { value: { update: ctx.update, getValues: ctx.getValues } },
+          h(
+            LocalsValuesContext.Provider,
+            { value: ctx.getValues() },
+            renderNodes(children),
+          ),
         ),
       );
       render(vnode, container);

package/src/components/macros/Computed.tsx

@@ -63,7 +63,6 @@ function computeAndApply(
   locals: Record<string, unknown>,
   rawArgs: string,
 ): void {
-  const state = useStoryStore.getState();
   let newValue: unknown;
   try {
     newValue = evaluate(expr, variables, temporary, locals);
@@ -75,8 +74,9 @@ function computeAndApply(
     return;
   }
 
-  const current = isTemp ? state.temporary[name] : state.variables[name];
+  const current = isTemp ? temporary[name] : variables[name];
   if (!valuesEqual(current, newValue)) {
+    const state = useStoryStore.getState();
     if (isTemp) state.setTemporary(name, newValue);
     else state.setVariable(name, newValue);
   }
@@ -106,13 +106,12 @@ defineMacro({
     const ran = ctx.hooks.useRef(false);
     if (!ran.current) {
       ran.current = true;
-      const state = useStoryStore.getState();
       computeAndApply(
         expr,
         name,
         isTemp,
-        state.variables,
-        state.temporary,
+        mergedVars,
+        mergedTemps,
         mergedLocals,
         rawArgs,
       );

package/src/components/macros/For.tsx

@@ -62,18 +62,19 @@ function ForIteration({
   initialValues: Record<string, unknown>;
   children: ASTNode[];
 }) {
-  const [localState, setLocalState] = useState<Record<string, unknown>>(() => ({
-    ...parentValues,
-    ...ownKeys,
-    ...initialValues,
-  }));
+  const [localMutations, setLocalMutations] = useState<Record<string, unknown>>(
+    () => ({ ...initialValues }),
+  );
+
+  // Recomputed every render — picks up new parentValues/ownKeys from parent
+  const localState = { ...parentValues, ...ownKeys, ...localMutations };
 
   const valuesRef = useRef(localState);
   valuesRef.current = localState;
 
   const getValues = useCallback(() => valuesRef.current, []);
   const update = useCallback((key: string, value: unknown) => {
-    setLocalState((prev) => ({ ...prev, [key]: value }));
+    setLocalMutations((prev) => ({ ...prev, [key]: value }));
   }, []);
   const updater = useMemo(() => ({ update, getValues }), [update, getValues]);
 

package/src/components/macros/MacroLink.tsx

@@ -1,9 +1,11 @@
 import { h, render } from 'preact';
+import { useContext } from 'preact/hooks';
 import { useStoryStore } from '../../store';
 import {
   renderNodes,
   LocalsUpdateContext,
   LocalsValuesContext,
+  NobrContext,
 } from '../../markup/render';
 import { defineMacro } from '../../define-macro';
 
@@ -32,15 +34,20 @@ function renderChildrenDetached(
   children: import('../../markup/ast').ASTNode[],
   getValues: () => Record<string, unknown>,
   update: (key: string, value: unknown) => void,
+  nobr: boolean,
 ) {
   const container = document.createElement('div');
   const vnode = h(
-    LocalsUpdateContext.Provider,
-    { value: { update, getValues } },
+    NobrContext.Provider,
+    { value: nobr },
     h(
-      LocalsValuesContext.Provider,
-      { value: getValues() },
-      renderNodes(children),
+      LocalsUpdateContext.Provider,
+      { value: { update, getValues } },
+      h(
+        LocalsValuesContext.Provider,
+        { value: getValues() },
+        renderNodes(children),
+      ),
     ),
   );
   render(vnode, container);
@@ -52,10 +59,11 @@ defineMacro({
   interpolate: true,
   render({ rawArgs, children = [] }, ctx) {
     const { display, passage } = parseArgs(rawArgs);
+    const nobr = useContext(NobrContext);
 
     const handleClick = (e: Event) => {
       e.preventDefault();
-      renderChildrenDetached(children, ctx.getValues, ctx.update);
+      renderChildrenDetached(children, ctx.getValues, ctx.update, nobr);
       if (passage) {
         useStoryStore.getState().navigate(passage);
       }
@@ -68,7 +76,7 @@ defineMacro({
       label: display,
       target: passage ?? undefined,
       perform: () => {
-        renderChildrenDetached(children, ctx.getValues, ctx.update);
+        renderChildrenDetached(children, ctx.getValues, ctx.update, nobr);
         if (passage) {
           useStoryStore.getState().navigate(passage);
         }

package/src/components/macros/SaveManager.tsx

@@ -88,6 +88,10 @@ export function SaveManagerContent() {
     statusTimer.current = window.setTimeout(() => setStatus(null), 3000);
   };
 
+  useEffect(() => {
+    return () => clearTimeout(statusTimer.current);
+  }, []);
+
   const toggleCollapse = (id: string) => {
     setCollapsed((prev) => {
       const next = new Set(prev);

package/src/components/macros/Type.tsx

@@ -10,6 +10,8 @@ defineMacro({
     const containerRef = useRef<HTMLSpanElement>(null);
     const [totalChars, setTotalChars] = useState(0);
     const [visibleChars, setVisibleChars] = useState(0);
+    const visibleCharsRef = useRef(0);
+    visibleCharsRef.current = visibleChars;
 
     useEffect(() => {
       if (containerRef.current) {
@@ -21,7 +23,7 @@ defineMacro({
     // Typewriter interval
     useEffect(() => {
       if (totalChars === 0) return;
-      if (visibleChars >= totalChars) return;
+      if (visibleCharsRef.current >= totalChars) return;
 
       const timer = setInterval(() => {
         setVisibleChars((c) => {

package/src/components/macros/Widget.tsx

@@ -13,9 +13,12 @@ defineMacro({
   render({ rawArgs, children = [] }, ctx) {
     const { name, params } = parseWidgetDef(rawArgs);
 
+    const childrenKey = JSON.stringify(children);
+    const paramsKey = params.join(',');
+
     ctx.hooks.useLayoutEffect(() => {
       registerWidget(name, children, params);
-    }, []);
+    }, [name, childrenKey, paramsKey]);
 
     return null;
   },

package/src/components/macros/WidgetInvocation.tsx

@@ -9,6 +9,7 @@ import {
   LocalsValuesContext,
   LocalsUpdateContext,
   NobrContext,
+  WidgetChildrenContext,
   renderNodes,
 } from '../../markup/render';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
@@ -19,6 +20,7 @@ interface WidgetInvocationProps {
   body: ASTNode[];
   params: string[];
   rawArgs?: string;
+  invocationChildren?: ASTNode[];
 }
 
 /**
@@ -110,13 +112,20 @@ export function WidgetInvocation({
   body,
   params,
   rawArgs,
+  invocationChildren,
 }: WidgetInvocationProps) {
   const parentValues = useContext(LocalsValuesContext);
   const nobr = useContext(NobrContext);
   const [mergedVars, mergedTemps, mergedLocals] = useMergedLocals();
 
+  const childrenValue = invocationChildren?.length ? invocationChildren : null;
+
   if (params.length === 0 || !rawArgs) {
-    return <>{renderNodes(body, { nobr, locals: parentValues })}</>;
+    return (
+      <WidgetChildrenContext.Provider value={childrenValue}>
+        {renderNodes(body, { nobr, locals: parentValues })}
+      </WidgetChildrenContext.Provider>
+    );
   }
 
   const argExprs = splitArgs(rawArgs);
@@ -137,10 +146,12 @@ export function WidgetInvocation({
   }
 
   return (
-    <WidgetBody
-      body={body}
-      parentValues={parentValues}
-      ownKeys={ownKeys}
-    />
+    <WidgetChildrenContext.Provider value={childrenValue}>
+      <WidgetBody
+        body={body}
+        parentValues={parentValues}
+        ownKeys={ownKeys}
+      />
+    </WidgetChildrenContext.Provider>
   );
 }

package/src/expression.ts

@@ -118,6 +118,57 @@ function transform(expr: string): string {
             } else if (ic === '\\' && i + 1 < expr.length) {
               inner += ic + expr.charAt(i + 1);
               i++;
+            } else if (ic === '"' || ic === "'") {
+              // Skip quoted strings — braces inside are not depth-relevant
+              inner += ic;
+              i++;
+              while (i < expr.length) {
+                const sc = expr.charAt(i);
+                if (sc === '\\' && i + 1 < expr.length) {
+                  inner += sc + expr.charAt(i + 1);
+                  i += 2;
+                } else if (sc === ic) {
+                  inner += sc;
+                  i++;
+                  break;
+                } else {
+                  inner += sc;
+                  i++;
+                }
+              }
+              continue; // skip the i++ at the end
+            } else if (ic === '`') {
+              // Nested template literal — consume entirely
+              inner += ic;
+              i++;
+              while (i < expr.length) {
+                const tc = expr.charAt(i);
+                if (tc === '\\' && i + 1 < expr.length) {
+                  inner += tc + expr.charAt(i + 1);
+                  i += 2;
+                } else if (tc === '$' && expr.charAt(i + 1) === '{') {
+                  // Nested interpolation — track brace depth
+                  inner += '${';
+                  i += 2;
+                  let nestedDepth = 1;
+                  while (i < expr.length && nestedDepth > 0) {
+                    const nc = expr.charAt(i);
+                    if (nc === '{') nestedDepth++;
+                    else if (nc === '}') nestedDepth--;
+                    if (nestedDepth > 0) inner += nc;
+                    i++;
+                  }
+                  inner += '}';
+                } else if (tc === '`') {
+                  inner += tc;
+                  i++;
+                  break;
+                } else {
+                  inner += tc;
+                  i++;
+                }
+              }
+              continue; // skip the i++ at the end
             } else {
               inner += ic;
             }

package/src/index.tsx

@@ -13,8 +13,9 @@ import {
   extractDefaults,
 } from './story-variables';
 import { tokenize } from './markup/tokenizer';
-import { buildAST } from './markup/ast';
+import { buildAST, registerBlockMacro } from './markup/ast';
 import { registerWidget } from './widgets/widget-registry';
+import { astContainsChildren } from './widgets/ast-scanner';
 import type { ASTNode } from './markup/ast';
 import './macros/register-builtins';
 import builtinCSS from './styles.css?inline';
@@ -122,7 +123,12 @@ function boot() {
               (t) =>
                 t.startsWith('$') || t.startsWith('_') || t.startsWith('@'),
             );
-          registerWidget(widgetName, node.children as ASTNode[], params);
+          const children = node.children as ASTNode[];
+          const isBlock = astContainsChildren(children);
+          registerWidget(widgetName, children, params, isBlock);
+          if (isBlock) {
+            registerBlockMacro(widgetName);
+          }
         }
       }
     }

package/src/markup/markdown.ts

@@ -12,7 +12,11 @@ import {
 export function markdownToHtml(text: string): string {
   return micromark(text, {
     allowDangerousHtml: true,
-    extensions: [gfmTable(), gfmStrikethrough()],
+    extensions: [
+      gfmTable(),
+      gfmStrikethrough(),
+      { disable: { null: ['codeIndented'] } },
+    ],
     htmlExtensions: [gfmTableHtml(), gfmStrikethroughHtml()],
   });
 }

package/src/markup/render.tsx

@@ -23,6 +23,7 @@ const defaultUpdater: LocalsUpdater = {
 export const LocalsValuesContext = createContext<Record<string, unknown>>({});
 export const LocalsUpdateContext = createContext<LocalsUpdater>(defaultUpdater);
 export const NobrContext = createContext(false);
+export const WidgetChildrenContext = createContext<ASTNode[] | null>(null);
 
 /**
  * Convert an HTML string (from micromark) to Preact VNodes,
@@ -97,6 +98,14 @@ function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
   );
 }
 
+function ChildrenSlot() {
+  const childrenAST = useContext(WidgetChildrenContext);
+  const nobr = useContext(NobrContext);
+  const locals = useContext(LocalsValuesContext);
+  if (!childrenAST || childrenAST.length === 0) return null;
+  return <>{renderNodes(childrenAST, { nobr, locals })}</>;
+}
+
 function renderMacro(node: MacroNode, key: number) {
   if (isSubMacro(node.name)) return null;
 
@@ -108,6 +117,7 @@ function renderMacro(node: MacroNode, key: number) {
         body={widget.body}
         params={widget.params}
         rawArgs={node.rawArgs}
+        invocationChildren={node.children}
       />
     );
   }
@@ -148,6 +158,9 @@ function renderSingleNode(
       return node.value;
 
     case 'variable':
+      if (node.scope === 'local' && node.name === 'children') {
+        return <ChildrenSlot key={key} />;
+      }
       return (
         <VarDisplay
           key={key}
@@ -246,7 +259,7 @@ export function renderNodes(
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes[i]!;
     if (node.type === 'text') {
-      combined += node.value.replace(/^[ \t]{4,}/gm, ' ');
+      combined += node.value;
     } else if (node.type === 'variable' && hasUnclosedBacktick(combined)) {
       // Inline variable value to avoid placeholder inside code span
       combined += getVariableTextValue(node, locals);

package/src/saves/types.ts

@@ -69,7 +69,8 @@ export function isSaveExport(value: unknown): value is SaveExport {
 
   const payload = save.payload as Record<string, unknown>;
   if (typeof payload.passage !== 'string') return false;
-  if (!Array.isArray(payload.history)) return false;
+  if (!Array.isArray(payload.history) || payload.history.length === 0)
+    return false;
   if (typeof payload.historyIndex !== 'number') return false;
   if (typeof payload.variables !== 'object' || payload.variables === null)
     return false;
@@ -82,7 +83,7 @@ export function isSavePayload(value: unknown): value is SavePayload {
   const obj = value as Record<string, unknown>;
   if (typeof obj.passage !== 'string') return false;
   if (typeof obj.variables !== 'object' || obj.variables === null) return false;
-  if (!Array.isArray(obj.history)) return false;
+  if (!Array.isArray(obj.history) || obj.history.length === 0) return false;
   if (typeof obj.historyIndex !== 'number') return false;
   return true;
 }

package/src/store.ts

@@ -576,6 +576,10 @@ export const useStoryStore = create<StoryState>()(
     },
 
     loadFromPayload: (payload: SavePayload) => {
+      if (payload.history.length === 0) {
+        console.warn('loadFromPayload: rejecting payload with empty history');
+        return;
+      }
       // Convert full snapshots to patch entries
       const base = deserialize(payload.history[0]?.variables ?? {}) as Record<
         string,

package/src/story-init.ts

@@ -19,12 +19,16 @@ export function executeStoryInit() {
     const tokens = tokenize(storyInit.content);
     const ast = buildAST(tokens);
 
+    // Mount into a persistent hidden container. We intentionally do NOT
+    // unmount — this lets async effects (useEffect, setTimeout, etc.)
+    // inside StoryInit macros fire through the normal Preact pipeline.
     const container = document.createElement('div');
+    container.style.display = 'none';
+    document.body.appendChild(container);
     render(
       h(() => renderNodes(ast) as any, null),
       container,
     );
-    render(null, container);
   }
 
   // Register SaveTitle passage if it exists

package/src/widgets/ast-scanner.ts

@@ -0,0 +1,29 @@
+import type { ASTNode } from '../markup/ast';
+
+/**
+ * Recursively scan an AST node array for a VariableNode
+ * with scope 'local' and name 'children' (@children).
+ */
+export function astContainsChildren(nodes: ASTNode[]): boolean {
+  for (const node of nodes) {
+    if (
+      node.type === 'variable' &&
+      node.scope === 'local' &&
+      node.name === 'children'
+    ) {
+      return true;
+    }
+    if (node.type === 'html' && astContainsChildren(node.children)) {
+      return true;
+    }
+    if (node.type === 'macro') {
+      if (astContainsChildren(node.children)) return true;
+      if (node.branches) {
+        for (const branch of node.branches) {
+          if (astContainsChildren(branch.children)) return true;
+        }
+      }
+    }
+  }
+  return false;
+}

package/src/widgets/widget-registry.ts

@@ -3,6 +3,7 @@ import type { ASTNode } from '../markup/ast';
 interface WidgetEntry {
   body: ASTNode[];
   params: string[];
+  isBlock: boolean;
 }
 
 const widgets = new Map<string, WidgetEntry>();
@@ -11,14 +12,24 @@ export function registerWidget(
   name: string,
   bodyAST: ASTNode[],
   params: string[],
+  isBlock = false,
 ): void {
-  widgets.set(name.toLowerCase(), { body: bodyAST, params });
+  const filteredParams = params.filter((p) => p !== '@children');
+  widgets.set(name.toLowerCase(), {
+    body: bodyAST,
+    params: filteredParams,
+    isBlock,
+  });
 }
 
 export function getWidget(name: string): WidgetEntry | undefined {
   return widgets.get(name.toLowerCase());
 }
 
+export function isBlockWidget(name: string): boolean {
+  return widgets.get(name.toLowerCase())?.isBlock ?? false;
+}
+
 export function clearWidgets(): void {
   widgets.clear();
 }