@rohal12/spindle 0.26.2 → 0.28.0

package/package.json

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

package/src/components/PassageDialog.tsx

@@ -12,6 +12,7 @@ interface PassageDialogProps {
   fallbackMarkup?: string;
   panelClass?: string;
   onClose: () => void;
+  showCloseButton?: boolean;
 }
 
 export function PassageDialog({
@@ -19,6 +20,7 @@ export function PassageDialog({
   fallbackMarkup,
   panelClass,
   onClose,
+  showCloseButton = true,
 }: PassageDialogProps) {
   const storyData = useStoryStore((s) => s.storyData);
 
@@ -55,12 +57,14 @@ export function PassageDialog({
         onClick={handleBackdrop}
       >
         <div class={cls}>
-          <button
-            class="dialog-close"
-            onClick={onClose}
-          >
-            ✕
-          </button>
+          {showCloseButton && (
+            <button
+              class="dialog-close"
+              onClick={onClose}
+            >
+              ✕
+            </button>
+          )}
           <div class="dialog-body">{content}</div>
         </div>
       </div>

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,20 +42,14 @@ 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}
+      showCloseButton={current.showCloseButton}
     />
   );
 }

package/src/components/macros/Dialog.tsx

@@ -3,11 +3,15 @@ import { PassageDialog } from '../PassageDialog';
 
 defineMacro({
   name: 'dialog',
+  block: true,
   interpolate: true,
   render({ rawArgs, children = [] }, ctx) {
     const [open, setOpen] = ctx.hooks.useState(false);
 
-    const label = ctx.resolve?.(rawArgs.replace(/^["']|["']$/g, '')) ?? rawArgs;
+    const noclose = /\bnoclose\s*$/.test(rawArgs);
+    const labelRaw = rawArgs.replace(/\bnoclose\s*$/, '').trim();
+    const label =
+      ctx.resolve?.(labelRaw.replace(/^["']|["']$/g, '')) ?? labelRaw;
     const passageName = ctx
       .collectText(children)
       .trim()
@@ -26,6 +30,7 @@ defineMacro({
           <PassageDialog
             passageName={passageName}
             onClose={() => setOpen(false)}
+            showCloseButton={!noclose}
           />
         )}
       </>

package/src/components/macros/MenubarButtons.tsx

@@ -18,6 +18,7 @@ interface MenubarActionConfig {
     passageName: string;
     fallbackMarkup?: string;
     panelClass?: string;
+    showCloseButton?: boolean;
   };
 }
 
@@ -72,6 +73,7 @@ export function defineMenubarAction(config: MenubarActionConfig) {
               fallbackMarkup={config.dialog.fallbackMarkup}
               panelClass={config.dialog.panelClass}
               onClose={() => setDialogOpen(false)}
+              showCloseButton={config.dialog.showCloseButton}
             />
           )}
         </>

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,13 @@ export interface StoryAPI {
     callbackOrOptions: (() => void) | WatchOptions,
   ): () => void;
   unwatch(name: string): void;
+  openDialog(
+    passageName: string,
+    options?: { panelClass?: string; showCloseButton?: boolean },
+  ): void;
+  closeDialog(): void;
+  closeAllDialogs(): void;
+  isDialogOpen(): boolean;
   setNobr(enabled: boolean): void;
   setCSS(enabled: boolean): void;
   setTransition(config: TransitionConfig | null): void;
@@ -286,6 +300,30 @@ function createStoryAPI(): StoryAPI {
       removeTrigger(name);
     },
 
+    openDialog(
+      passageName: string,
+      options?: { panelClass?: string; showCloseButton?: boolean },
+    ): void {
+      pushDialog({
+        passageName,
+        panelClass: options?.panelClass,
+        showCloseButton: options?.showCloseButton,
+      });
+    },
+
+    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,12 @@ export interface WatchOptions {
   priority?: number;
 }
 
+export interface QueuedDialog {
+  passageName: string;
+  panelClass?: string;
+  showCloseButton?: boolean;
+}
+
 interface Trigger {
   id: number;
   name?: string;
@@ -25,9 +31,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 +96,7 @@ function fireTrigger(trigger: Trigger): void {
   }
 
   if (options.dialog) {
-    dialogQueue.push(options.dialog);
+    dialogQueue.push({ passageName: options.dialog });
     dialogNotify?.();
   }
 
@@ -141,6 +153,7 @@ export function resetTriggers(): void {
   triggers = [];
   dialogQueue = [];
   nextId = 0;
+  dialogHostCallbacks?.close();
 }
 
 export function subscribeTriggerDialogs(cb: () => void): () => void {
@@ -152,10 +165,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;
+}