@rohal12/spindle 0.30.0 → 0.31.1

package/package.json

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

package/src/components/TriggerDialogHost.tsx

@@ -9,47 +9,58 @@ import {
 import type { QueuedDialog } from '../triggers';
 
 export function TriggerDialogHost() {
-  const [current, setCurrent] = useState<QueuedDialog | null>(null);
-  const currentRef = useRef(current);
-  currentRef.current = current;
+  const [stack, setStack] = useState<QueuedDialog[]>([]);
+  const stackRef = useRef(stack);
+  stackRef.current = stack;
 
-  const advance = useCallback(() => {
-    const next = shiftDialogQueue();
-    setCurrent(next ?? null);
+  const push = useCallback((item: QueuedDialog) => {
+    setStack((prev) => [...prev, item]);
   }, []);
 
   const handleClose = useCallback(() => {
-    setCurrent(null);
-    // Show next queued dialog after a tick
-    if (dialogQueueLength() > 0) {
-      requestAnimationFrame(advance);
-    }
-  }, [advance]);
+    setStack((prev) => prev.slice(0, -1));
+  }, []);
+
+  const handleCloseAll = useCallback(() => {
+    setStack([]);
+  }, []);
 
   useEffect(() => {
     return registerDialogHost({
       close: handleClose,
-      isOpen: () => currentRef.current !== null,
+      closeAll: handleCloseAll,
+      push,
+      isOpen: () => stackRef.current.length > 0,
     });
-  }, [handleClose]);
+  }, [handleClose, handleCloseAll, push]);
 
+  // Flush any dialogs that were queued before the host mounted
   useEffect(() => {
     return subscribeTriggerDialogs(() => {
-      setCurrent((prev) => {
-        if (prev !== null) return prev; // already showing one
-        return shiftDialogQueue() ?? null;
-      });
+      const items: QueuedDialog[] = [];
+      while (dialogQueueLength() > 0) {
+        const next = shiftDialogQueue();
+        if (next) items.push(next);
+      }
+      if (items.length > 0) {
+        setStack((prev) => [...prev, ...items]);
+      }
     });
   }, []);
 
-  if (!current) return null;
+  if (stack.length === 0) return null;
 
   return (
-    <PassageDialog
-      passageName={current.passageName}
-      panelClass={current.panelClass}
-      onClose={handleClose}
-      showCloseButton={current.showCloseButton}
-    />
+    <>
+      {stack.map((dialog, i) => (
+        <PassageDialog
+          key={`${dialog.passageName}-${i}`}
+          passageName={dialog.passageName}
+          panelClass={dialog.panelClass}
+          onClose={handleClose}
+          showCloseButton={dialog.showCloseButton}
+        />
+      ))}
+    </>
   );
 }

package/src/components/macros/Checkbox.tsx

@@ -1,7 +1,7 @@
 import { defineMacro } from '../../define-macro';
 
 function parseLabel(rawArgs: string): string {
-  const match = rawArgs.match(/^\s*["']?\$?\w+["']?\s+["']?(.+?)["']?\s*$/);
+  const match = rawArgs.match(/^\s*["']?\$?[\w.]+["']?\s+["']?(.+?)["']?\s*$/);
   return match?.[1] ?? '';
 }
 

package/src/components/macros/Cycle.tsx

@@ -1,4 +1,3 @@
-import { useStoryStore } from '../../store';
 import { defineMacro } from '../../define-macro';
 
 defineMacro({
@@ -9,7 +8,7 @@ defineMacro({
 
     const handleClick = () => {
       if (options.length === 0) return;
-      const current = useStoryStore.getState().variables[ctx.varName!];
+      const current = ctx.getValue!();
       const currentIndex = options.indexOf(String(current));
       const nextIndex = (currentIndex + 1) % options.length;
       ctx.setValue!(options[nextIndex]);

package/src/components/macros/Radiobutton.tsx

@@ -2,7 +2,7 @@ import { defineMacro } from '../../define-macro';
 
 function parseRadioArgs(rawArgs: string): { value: string; label: string } {
   const match = rawArgs.match(
-    /^\s*["']?\$?\w+["']?\s+["'](.+?)["']\s+["']?(.+?)["']?\s*$/,
+    /^\s*["']?\$?[\w.]+["']?\s+["'](.+?)["']\s+["']?(.+?)["']?\s*$/,
   );
   if (!match) {
     const parts = rawArgs.trim().split(/\s+/).slice(1);

package/src/components/macros/option-utils.ts

@@ -4,7 +4,9 @@ export function parseVarArgs(rawArgs: string): {
   varName: string;
   placeholder: string;
 } {
-  const match = rawArgs.match(/^\s*(["']?\$\w+["']?)\s*(?:["'](.*)["'])?\s*$/);
+  const match = rawArgs.match(
+    /^\s*(["']?\$[\w.]+["']?)\s*(?:["'](.*)["'])?\s*$/,
+  );
   if (!match) {
     return { varName: rawArgs.trim(), placeholder: '' };
   }

package/src/define-macro.ts

@@ -52,6 +52,7 @@ export interface MacroContext {
   varName?: string;
   value?: unknown;
   setValue?: (value: unknown) => void;
+  getValue?: () => unknown;
   evaluate?: (expr: string) => unknown;
   collectText: typeof collectText;
   sourceLocation: typeof currentSourceLocation;
@@ -93,6 +94,33 @@ const sharedHooks = {
   useContext,
 };
 
+/** Traverse a dot-path on an object, returning the nested value. */
+function getByPath(obj: Record<string, unknown>, segments: string[]): unknown {
+  let current: unknown = obj;
+  for (const seg of segments) {
+    if (current == null || typeof current !== 'object') return undefined;
+    current = (current as Record<string, unknown>)[seg];
+  }
+  return current;
+}
+
+/** Set a nested value by dot-path segments on an (Immer draft) object. */
+function setByPath(
+  obj: Record<string, unknown>,
+  segments: string[],
+  value: unknown,
+): void {
+  let target: Record<string, unknown> = obj;
+  for (let i = 0; i < segments.length - 1; i++) {
+    const seg = segments[i]!;
+    if (target[seg] == null || typeof target[seg] !== 'object') {
+      target[seg] = {};
+    }
+    target = target[seg] as Record<string, unknown>;
+  }
+  target[segments[segments.length - 1]!] = value;
+}
+
 export function defineMacro(config: MacroDefinition): void {
   function Wrapper(props: MacroProps) {
     // className/id resolved first (interpolate may transform them)
@@ -146,11 +174,21 @@ export function defineMacro(config: MacroDefinition): void {
 
     if (config.storeVar) {
       const firstToken = props.rawArgs.trim().split(/[\s"']+/)[0] ?? '';
-      const varName = firstToken.replace(/["']/g, '').replace(/^\$/, '');
-      ctx.varName = varName;
-      ctx.value = useStoryStore((s) => s.variables[varName]);
-      const setVariable = useStoryStore((s) => s.setVariable);
-      ctx.setValue = (value: unknown) => setVariable(varName, value);
+      const varExpr = firstToken.replace(/["']/g, '').replace(/^\$/, '');
+      const segments = varExpr.split('.');
+      ctx.varName = varExpr;
+      ctx.value = useStoryStore((s) => getByPath(s.variables, segments));
+      ctx.getValue = () =>
+        getByPath(useStoryStore.getState().variables, segments);
+      ctx.setValue = (value: unknown) => {
+        useStoryStore.setState((state) => {
+          setByPath(
+            state.variables as Record<string, unknown>,
+            segments,
+            value,
+          );
+        });
+      };
     }
 
     return config.render(props, ctx);

package/src/story-api.ts

@@ -25,8 +25,8 @@ import {
   addTrigger,
   removeTrigger,
   pushDialog,
-  clearDialogQueue,
   closeCurrentDialog,
+  closeAllOpenDialogs,
   isDialogShowing,
 } from './triggers';
 import type { WatchOptions } from './triggers';
@@ -316,8 +316,7 @@ function createStoryAPI(): StoryAPI {
     },
 
     closeAllDialogs(): void {
-      clearDialogQueue();
-      closeCurrentDialog();
+      closeAllOpenDialogs();
     },
 
     isDialogOpen(): boolean {

package/src/triggers.ts

@@ -36,6 +36,8 @@ let dialogNotify: DialogCallback | null = null;
 
 interface DialogHostCallbacks {
   close: () => void;
+  closeAll: () => void;
+  push: (item: QueuedDialog) => void;
   isOpen: () => boolean;
 }
 let dialogHostCallbacks: DialogHostCallbacks | null = null;
@@ -153,7 +155,7 @@ export function resetTriggers(): void {
   triggers = [];
   dialogQueue = [];
   nextId = 0;
-  dialogHostCallbacks?.close();
+  dialogHostCallbacks?.closeAll();
 }
 
 export function subscribeTriggerDialogs(cb: () => void): () => void {
@@ -174,8 +176,12 @@ export function dialogQueueLength(): number {
 }
 
 export function pushDialog(item: QueuedDialog): void {
-  dialogQueue.push(item);
-  dialogNotify?.();
+  if (dialogHostCallbacks) {
+    dialogHostCallbacks.push(item);
+  } else {
+    dialogQueue.push(item);
+    dialogNotify?.();
+  }
 }
 
 export function clearDialogQueue(): void {
@@ -193,6 +199,11 @@ export function closeCurrentDialog(): void {
   dialogHostCallbacks?.close();
 }
 
+export function closeAllOpenDialogs(): void {
+  clearDialogQueue();
+  dialogHostCallbacks?.closeAll();
+}
+
 export function isDialogShowing(): boolean {
   return dialogHostCallbacks?.isOpen() ?? false;
 }