@rohal12/spindle 0.26.1 → 0.27.0

package/package.json

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

package/src/components/TriggerDialogHost.tsx

@@ -1,19 +1,38 @@
-import { useState, useEffect, useCallback } from 'preact/hooks';
+import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
 import { PassageDialog } from './PassageDialog';
 import {
   subscribeTriggerDialogs,
   shiftDialogQueue,
   dialogQueueLength,
+  registerDialogHost,
 } from '../triggers';
+import type { QueuedDialog } from '../triggers';
 
 export function TriggerDialogHost() {
-  const [current, setCurrent] = useState<string | null>(null);
+  const [current, setCurrent] = useState<QueuedDialog | null>(null);
+  const currentRef = useRef(current);
+  currentRef.current = current;
 
   const advance = useCallback(() => {
     const next = shiftDialogQueue();
     setCurrent(next ?? null);
   }, []);
 
+  const handleClose = useCallback(() => {
+    setCurrent(null);
+    // Show next queued dialog after a tick
+    if (dialogQueueLength() > 0) {
+      requestAnimationFrame(advance);
+    }
+  }, [advance]);
+
+  useEffect(() => {
+    return registerDialogHost({
+      close: handleClose,
+      isOpen: () => currentRef.current !== null,
+    });
+  }, [handleClose]);
+
   useEffect(() => {
     return subscribeTriggerDialogs(() => {
       setCurrent((prev) => {
@@ -23,19 +42,12 @@ export function TriggerDialogHost() {
     });
   }, []);
 
-  const handleClose = useCallback(() => {
-    setCurrent(null);
-    // Show next queued dialog after a tick
-    if (dialogQueueLength() > 0) {
-      requestAnimationFrame(advance);
-    }
-  }, [advance]);
-
   if (!current) return null;
 
   return (
     <PassageDialog
-      passageName={current}
+      passageName={current.passageName}
+      panelClass={current.panelClass}
       onClose={handleClose}
     />
   );

package/src/components/macros/WidgetInvocation.tsx

@@ -81,17 +81,19 @@ function WidgetBody({
   ownKeys: Record<string, unknown>;
 }) {
   const nobr = useContext(NobrContext);
-  const [localState, setLocalState] = useState<Record<string, unknown>>(() => ({
-    ...parentValues,
-    ...ownKeys,
-  }));
+  const [localMutations, setLocalMutations] = useState<Record<string, unknown>>(
+    {},
+  );
+
+  // Recomputed every render — picks up new 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/story-api.ts

@@ -21,7 +21,14 @@ import {
   randomInt,
   snapshotPRNG,
 } from './prng';
-import { addTrigger, removeTrigger } from './triggers';
+import {
+  addTrigger,
+  removeTrigger,
+  pushDialog,
+  clearDialogQueue,
+  closeCurrentDialog,
+  isDialogShowing,
+} from './triggers';
 import type { WatchOptions } from './triggers';
 import type { TransitionConfig } from './transition';
 
@@ -73,6 +80,10 @@ export interface StoryAPI {
     callbackOrOptions: (() => void) | WatchOptions,
   ): () => void;
   unwatch(name: string): void;
+  openDialog(passageName: string, options?: { panelClass?: string }): void;
+  closeDialog(): void;
+  closeAllDialogs(): void;
+  isDialogOpen(): boolean;
   setNobr(enabled: boolean): void;
   setCSS(enabled: boolean): void;
   setTransition(config: TransitionConfig | null): void;
@@ -286,6 +297,23 @@ function createStoryAPI(): StoryAPI {
       removeTrigger(name);
     },
 
+    openDialog(passageName: string, options?: { panelClass?: string }): void {
+      pushDialog({ passageName, panelClass: options?.panelClass });
+    },
+
+    closeDialog(): void {
+      closeCurrentDialog();
+    },
+
+    closeAllDialogs(): void {
+      clearDialogQueue();
+      closeCurrentDialog();
+    },
+
+    isDialogOpen(): boolean {
+      return isDialogShowing();
+    },
+
     setNobr(enabled: boolean): void {
       useStoryStore.setState({ nobr: enabled });
     },

package/src/triggers.ts

@@ -10,6 +10,11 @@ export interface WatchOptions {
   priority?: number;
 }
 
+export interface QueuedDialog {
+  passageName: string;
+  panelClass?: string;
+}
+
 interface Trigger {
   id: number;
   name?: string;
@@ -25,9 +30,15 @@ let triggers: Trigger[] = [];
 let checking = false;
 
 type DialogCallback = () => void;
-let dialogQueue: string[] = [];
+let dialogQueue: QueuedDialog[] = [];
 let dialogNotify: DialogCallback | null = null;
 
+interface DialogHostCallbacks {
+  close: () => void;
+  isOpen: () => boolean;
+}
+let dialogHostCallbacks: DialogHostCallbacks | null = null;
+
 function evalCondition(condition: string): boolean {
   const state = useStoryStore.getState();
   try {
@@ -84,7 +95,7 @@ function fireTrigger(trigger: Trigger): void {
   }
 
   if (options.dialog) {
-    dialogQueue.push(options.dialog);
+    dialogQueue.push({ passageName: options.dialog });
     dialogNotify?.();
   }
 
@@ -141,6 +152,7 @@ export function resetTriggers(): void {
   triggers = [];
   dialogQueue = [];
   nextId = 0;
+  dialogHostCallbacks?.close();
 }
 
 export function subscribeTriggerDialogs(cb: () => void): () => void {
@@ -152,10 +164,34 @@ export function subscribeTriggerDialogs(cb: () => void): () => void {
   };
 }
 
-export function shiftDialogQueue(): string | undefined {
+export function shiftDialogQueue(): QueuedDialog | undefined {
   return dialogQueue.shift();
 }
 
 export function dialogQueueLength(): number {
   return dialogQueue.length;
 }
+
+export function pushDialog(item: QueuedDialog): void {
+  dialogQueue.push(item);
+  dialogNotify?.();
+}
+
+export function clearDialogQueue(): void {
+  dialogQueue = [];
+}
+
+export function registerDialogHost(callbacks: DialogHostCallbacks): () => void {
+  dialogHostCallbacks = callbacks;
+  return () => {
+    if (dialogHostCallbacks === callbacks) dialogHostCallbacks = null;
+  };
+}
+
+export function closeCurrentDialog(): void {
+  dialogHostCallbacks?.close();
+}
+
+export function isDialogShowing(): boolean {
+  return dialogHostCallbacks?.isOpen() ?? false;
+}