@rohal12/spindle 0.27.0 → 0.28.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rohal12/spindle",
-  "version": "0.27.0",
+  "version": "0.28.1",
   "type": "module",
   "description": "A Preact-based story format for Twine 2.",
   "license": "Unlicense",
@@ -23,14 +23,14 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/pkg/types/index.d.ts",
+      "types": "./types/index.d.ts",
       "import": "./dist/pkg/index.js"
     }
   },
   "files": [
     "dist/pkg/index.js",
     "dist/pkg/format.js",
-    "dist/pkg/types",
+    "types",
     "src"
   ],
   "scripts": {

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

@@ -49,6 +49,7 @@ export function TriggerDialogHost() {
       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

@@ -80,7 +80,10 @@ export interface StoryAPI {
     callbackOrOptions: (() => void) | WatchOptions,
   ): () => void;
   unwatch(name: string): void;
-  openDialog(passageName: string, options?: { panelClass?: string }): void;
+  openDialog(
+    passageName: string,
+    options?: { panelClass?: string; showCloseButton?: boolean },
+  ): void;
   closeDialog(): void;
   closeAllDialogs(): void;
   isDialogOpen(): boolean;
@@ -297,8 +300,15 @@ function createStoryAPI(): StoryAPI {
       removeTrigger(name);
     },
 
-    openDialog(passageName: string, options?: { panelClass?: string }): void {
-      pushDialog({ passageName, panelClass: options?.panelClass });
+    openDialog(
+      passageName: string,
+      options?: { panelClass?: string; showCloseButton?: boolean },
+    ): void {
+      pushDialog({
+        passageName,
+        panelClass: options?.panelClass,
+        showCloseButton: options?.showCloseButton,
+      });
     },
 
     closeDialog(): void {

package/src/triggers.ts

@@ -13,6 +13,7 @@ export interface WatchOptions {
 export interface QueuedDialog {
   passageName: string;
   panelClass?: string;
+  showCloseButton?: boolean;
 }
 
 interface Trigger {

package/{dist/pkg/types → types}/index.d.ts

@@ -181,4 +181,23 @@ export interface StoryAPI {
     /** Set a custom function to generate save titles. */
     setTitleGenerator(fn: (payload: SavePayload) => string): void;
   };
+
+  /**
+   * Open a dialog rendering the given passage.
+   * @param passageName - The passage to render inside the dialog.
+   * @param options - Optional configuration for the dialog panel.
+   */
+  openDialog(
+    passageName: string,
+    options?: { panelClass?: string; showCloseButton?: boolean },
+  ): void;
+
+  /** Close the topmost open dialog. */
+  closeDialog(): void;
+
+  /** Close all open dialogs. */
+  closeAllDialogs(): void;
+
+  /** Check whether any dialog is currently open. */
+  isDialogOpen(): boolean;
 }

package/dist/pkg/types/globals.d.ts

@@ -1,18 +0,0 @@
-import type { StoryAPI } from './index.js';
-
-declare global {
-  /**
-   * The main Spindle story API, available globally at runtime.
-   * Provides access to variables, navigation, save/load, and visit tracking.
-   *
-   * @example
-   * ```typescript
-   * Story.set("health", 100);
-   * Story.goto("Chapter 2");
-   * if (Story.hasVisited("Secret Room")) { ... }
-   * ```
-   */
-  const Story: StoryAPI;
-}
-
-export {};