@rohal12/spindle 0.17.0 → 0.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rohal12/spindle",
-  "version": "0.17.0",
+  "version": "0.18.1",
   "type": "module",
   "description": "A Preact-based story format for Twine 2.",
   "license": "Unlicense",
@@ -47,7 +47,7 @@
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
-    "prepublishOnly": "bun run test && bun run build",
+    "prepublishOnly": "bun run build && bun run test",
     "prepare": "husky"
   },
   "dependencies": {

package/src/components/Passage.tsx

@@ -1,20 +1,36 @@
-import { useMemo } from 'preact/hooks';
+import { useMemo, useEffect, useState } from 'preact/hooks';
 import { tokenize } from '../markup/tokenizer';
 import { buildAST } from '../markup/ast';
 import { renderNodes } from '../markup/render';
+import { useStoryStore } from '../store';
 import type { Passage as PassageData } from '../parser';
 import { sourceLocationOf } from '../utils/source-location';
 
+export function renderPassageContent(passage: PassageData) {
+  const tokens = tokenize(passage.content);
+  const ast = buildAST(tokens);
+  return renderNodes(ast);
+}
+
 interface PassageProps {
   passage: PassageData;
 }
 
+const CODE_PASSAGES = new Set([
+  'PassageReady',
+  'PassageHeader',
+  'PassageFooter',
+  'PassageDone',
+]);
+
 export function Passage({ passage }: PassageProps) {
+  const storyData = useStoryStore((s) => s.storyData);
+  const isCodePassage = CODE_PASSAGES.has(passage.name);
+  const [doneReady, setDoneReady] = useState(false);
+
   const content = useMemo(() => {
     try {
-      const tokens = tokenize(passage.content);
-      const ast = buildAST(tokens);
-      return renderNodes(ast);
+      return renderPassageContent(passage);
     } catch (err) {
       return (
         <div class="error">
@@ -25,13 +41,62 @@ export function Passage({ passage }: PassageProps) {
     }
   }, [passage.content, passage.name]);
 
+  const headerPassage = isCodePassage
+    ? undefined
+    : storyData?.passages.get('PassageHeader');
+  const footerPassage = isCodePassage
+    ? undefined
+    : storyData?.passages.get('PassageFooter');
+  const donePassage = isCodePassage
+    ? undefined
+    : storyData?.passages.get('PassageDone');
+
+  const headerContent = useMemo(() => {
+    if (!headerPassage) return null;
+    try {
+      return renderPassageContent(headerPassage);
+    } catch (err) {
+      console.error('spindle: Error in PassageHeader:', err);
+      return null;
+    }
+  }, [headerPassage?.content]);
+
+  const footerContent = useMemo(() => {
+    if (!footerPassage) return null;
+    try {
+      return renderPassageContent(footerPassage);
+    } catch (err) {
+      console.error('spindle: Error in PassageFooter:', err);
+      return null;
+    }
+  }, [footerPassage?.content]);
+
+  // Defer PassageDone to after DOM commit
+  useEffect(() => {
+    if (donePassage) setDoneReady(true);
+    return () => setDoneReady(false);
+  }, [passage.name]);
+
+  const doneContent = useMemo(() => {
+    if (!doneReady || !donePassage) return null;
+    try {
+      return renderPassageContent(donePassage);
+    } catch (err) {
+      console.error('spindle: Error in PassageDone:', err);
+      return null;
+    }
+  }, [doneReady, donePassage?.content]);
+
   return (
     <div
       class="passage"
       data-passage={passage.name}
       data-tags={passage.tags.join(' ')}
     >
+      {headerContent && <div class="passage-header">{headerContent}</div>}
       {content}
+      {footerContent && <div class="passage-footer">{footerContent}</div>}
+      {doneContent && <div hidden>{doneContent}</div>}
     </div>
   );
 }

package/src/components/StoryInterface.tsx

@@ -1,7 +1,7 @@
 import { useStoryStore } from '../store';
 import { tokenize } from '../markup/tokenizer';
 import { buildAST } from '../markup/ast';
-import { renderNodes } from '../markup/render';
+import { renderInlineNodes } from '../markup/render';
 
 const DEFAULT_MARKUP =
   '<header class="story-menubar">{story-title}{back}{forward}{restart}{quicksave}{quickload}{saves}{settings}</header>\n{passage}';
@@ -16,7 +16,7 @@ export function StoryInterface() {
   try {
     const tokens = tokenize(markup);
     const ast = buildAST(tokens);
-    return <>{renderNodes(ast)}</>;
+    return <>{renderInlineNodes(ast)}</>;
   } catch (err) {
     return (
       <span class="error">

package/src/components/macros/MacroLink.tsx

@@ -11,10 +11,10 @@ function parseArgs(rawArgs: string): {
 } {
   // {link "text" "Passage"} or {link "text"}
   const parts: string[] = [];
-  const re = /["']([^"']+)["']/g;
+  const re = /(["'])(.*?)\1/g;
   let m;
   while ((m = re.exec(rawArgs)) !== null) {
-    parts.push(m[1]!);
+    parts.push(m[2]!);
   }
   if (parts.length >= 2) {
     return { display: parts[0]!, passage: parts[1]! };

package/src/components/macros/PassageDisplay.tsx

@@ -1,5 +1,5 @@
 import { useStoryStore } from '../../store';
-import { Passage } from '../Passage';
+import { Passage, renderPassageContent } from '../Passage';
 import { defineMacro } from '../../define-macro';
 
 defineMacro({
@@ -18,11 +18,21 @@ defineMacro({
       );
     }
 
+    const readyPassage = storyData?.passages.get('PassageReady');
+
     return (
       <div
         id={ctx.id ?? 'story'}
         class={ctx.className ?? 'story'}
       >
+        {readyPassage && (
+          <div
+            key={`ready-${currentPassage}`}
+            hidden
+          >
+            {renderPassageContent(readyPassage)}
+          </div>
+        )}
         <Passage
           passage={passage}
           key={currentPassage}

package/src/components/macros/Span.tsx

@@ -0,0 +1,8 @@
+import { defineMacro } from '../../define-macro';
+
+defineMacro({
+  name: 'span',
+  render({ children = [] }, ctx) {
+    return ctx.wrap(ctx.renderNodes(children));
+  },
+});

package/src/components/macros/Timed.tsx

@@ -32,22 +32,24 @@ defineMacro({
       return () => clearTimeout(timer);
     }, [visibleIndex, sections]);
 
-    if (visibleIndex < 0) return null;
+    if (visibleIndex < 0) return ctx.wrap(null);
 
     const section = sections[visibleIndex]!;
     const content = ctx.renderNodes(section.nodes);
     const sectionClass = ctx.resolve!(section.className);
     const sectionId = ctx.resolve!(section.id);
 
-    if (sectionClass || sectionId)
-      return (
+    const inner =
+      sectionClass || sectionId ? (
         <span
           id={sectionId}
           class={sectionClass}
         >
           {content}
         </span>
+      ) : (
+        content
       );
-    return <>{content}</>;
+    return ctx.wrap(inner);
   },
 });

package/src/expression.ts

@@ -6,12 +6,12 @@ import { random, randomInt } from './prng';
 interface ExpressionFns {
   currentPassage: () => Passage | undefined;
   previousPassage: () => Passage | undefined;
-  visited: (name: string) => number;
-  hasVisited: (name: string) => boolean;
+  visited: (name?: string) => number;
+  hasVisited: (name?: string) => boolean;
   hasVisitedAny: (...names: string[]) => boolean;
   hasVisitedAll: (...names: string[]) => boolean;
-  rendered: (name: string) => number;
-  hasRendered: (name: string) => boolean;
+  rendered: (name?: string) => number;
+  hasRendered: (name?: string) => boolean;
   hasRenderedAny: (...names: string[]) => boolean;
   hasRenderedAll: (...names: string[]) => boolean;
   random: () => number;
@@ -191,15 +191,17 @@ export function buildExpressionFns() {
     return cachedFns;
   }
 
-  const visited = (name: string): number => visitCounts[name] ?? 0;
-  const hasVisited = (name: string): boolean => visited(name) > 0;
+  const visited = (name?: string): number =>
+    visitCounts[name ?? useStoryStore.getState().currentPassage] ?? 0;
+  const hasVisited = (name?: string): boolean => visited(name) > 0;
   const hasVisitedAny = (...names: string[]): boolean =>
     names.some((n) => visited(n) > 0);
   const hasVisitedAll = (...names: string[]): boolean =>
     names.every((n) => visited(n) > 0);
 
-  const rendered = (name: string): number => renderCounts[name] ?? 0;
-  const hasRendered = (name: string): boolean => rendered(name) > 0;
+  const rendered = (name?: string): number =>
+    renderCounts[name ?? useStoryStore.getState().currentPassage] ?? 0;
+  const hasRendered = (name?: string): boolean => rendered(name) > 0;
   const hasRenderedAny = (...names: string[]): boolean =>
     names.some((n) => rendered(n) > 0);
   const hasRenderedAll = (...names: string[]): boolean =>

package/src/index.tsx

@@ -5,6 +5,7 @@ import { useStoryStore } from './store';
 import { installStoryAPI } from './story-api';
 import { resetIdCounters } from './action-registry';
 import { executeStoryInit } from './story-init';
+import { loadSession } from './saves/save-manager';
 import {
   parseStoryVariables,
   validatePassages,
@@ -89,6 +90,12 @@ function boot() {
   // 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);
+  }
+
   // Register widgets from passages tagged "widget"
   for (const [, passage] of storyData.passages) {
     if (passage.tags.includes('widget')) {

package/src/macros/register-builtins.ts

@@ -29,4 +29,5 @@ import '../components/macros/Checkbox';
 import '../components/macros/Radiobutton';
 import '../components/macros/Listbox';
 import '../components/macros/Cycle';
+import '../components/macros/Span';
 import '../components/macros/PassageDisplay';

package/src/markup/ast.ts

@@ -53,6 +53,7 @@ const BLOCK_MACROS = new Set([
   'repeat',
   'type',
   'widget',
+  'span',
 ]);
 
 /** Map from branch macro name → required parent macro name */

package/src/saves/save-manager.ts

@@ -299,6 +299,49 @@ export async function loadQuickSave(
   return loadSave(existingId);
 }
 
+// --- Session Persistence (survives F5, cleared on tab close) ---
+
+const SESSION_KEY_PREFIX = 'spindle.session.';
+
+/**
+ * Write a pre-serialized session payload to sessionStorage.
+ * Callers are responsible for serializing variables (see persistSession in store.ts).
+ */
+export function saveSession(ifid: string, data: unknown): void {
+  try {
+    sessionStorage.setItem(
+      `${SESSION_KEY_PREFIX}${ifid}`,
+      JSON.stringify(data),
+    );
+  } catch {
+    // sessionStorage unavailable or full — silently ignore
+  }
+}
+
+export function loadSession(ifid: string): SavePayload | undefined {
+  try {
+    const raw = sessionStorage.getItem(`${SESSION_KEY_PREFIX}${ifid}`);
+    if (!raw) return undefined;
+    const payload: SavePayload = JSON.parse(raw);
+    payload.variables = deserialize(payload.variables);
+    payload.history = payload.history.map((m) => ({
+      ...m,
+      variables: deserialize(m.variables),
+    }));
+    return payload;
+  } catch {
+    return undefined;
+  }
+}
+
+export function clearSession(ifid: string): void {
+  try {
+    sessionStorage.removeItem(`${SESSION_KEY_PREFIX}${ifid}`);
+  } catch {
+    // ignore
+  }
+}
+
 // --- Export / Import ---
 
 export async function exportSave(

package/src/saves/types.ts

@@ -1,10 +1,17 @@
-import type { HistoryMoment } from '../store';
 import type { PRNGSnapshot } from '../prng';
 
+/** History moment as persisted in saves (full variable snapshots). */
+export interface SaveHistoryMoment {
+  passage: string;
+  variables: Record<string, unknown>;
+  timestamp: number;
+  prng?: PRNGSnapshot | null;
+}
+
 export interface SavePayload {
   passage: string;
   variables: Record<string, unknown>;
-  history: HistoryMoment[];
+  history: SaveHistoryMoment[];
   historyIndex: number;
   visitCounts?: Record<string, number>;
   renderCounts?: Record<string, number>;