@rohal12/spindle 0.18.1 → 0.20.0

package/src/store.ts

@@ -7,8 +7,10 @@ import {
   type Patch,
 } from 'immer';
 import type { StoryData } from './parser';
+import type { TransitionConfig } from './transition';
 import type { SavePayload, SaveHistoryMoment } from './saves/types';
 import { executeStoryInit } from './story-init';
+import { resetTriggers } from './triggers';
 import {
   initSaveSystem,
   startNewPlaythrough,
@@ -201,6 +203,8 @@ export interface StoryState {
   maxHistory: number;
   saveError: string | null;
   loadError: string | null;
+  transitionConfig: TransitionConfig | null;
+  nextTransition: TransitionConfig | null;
 
   setMaxHistory: (limit: number) => void;
   init: (
@@ -222,6 +226,9 @@ export interface StoryState {
   getSavePayload: () => SavePayload;
   loadFromPayload: (payload: SavePayload) => void;
   getHistoryVariables: (index: number) => Record<string, unknown>;
+  setTransition: (config: TransitionConfig | null) => void;
+  setNextTransition: (config: TransitionConfig | null) => void;
+  consumeNextTransition: () => TransitionConfig | null;
 }
 
 export const useStoryStore = create<StoryState>()(
@@ -240,6 +247,8 @@ export const useStoryStore = create<StoryState>()(
     maxHistory: 40,
     saveError: null,
     loadError: null,
+    transitionConfig: null,
+    nextTransition: null,
 
     setMaxHistory: (limit: number) => {
       set((state) => {
@@ -441,6 +450,7 @@ export const useStoryStore = create<StoryState>()(
       if (!startPassage) return;
 
       resetPRNG();
+      resetTriggers();
       const initialVars = deepClone(variableDefaults);
       resetModuleState(deepClone(initialVars));
 
@@ -614,5 +624,27 @@ export const useStoryStore = create<StoryState>()(
     getHistoryVariables: (index: number): Record<string, unknown> => {
       return deepClone(reconstructVarsAt(index));
     },
+
+    setTransition: (config: TransitionConfig | null) => {
+      set((state) => {
+        state.transitionConfig = config as TransitionConfig | null;
+      });
+    },
+
+    setNextTransition: (config: TransitionConfig | null) => {
+      set((state) => {
+        state.nextTransition = config as TransitionConfig | null;
+      });
+    },
+
+    consumeNextTransition: (): TransitionConfig | null => {
+      const current = get().nextTransition;
+      if (current !== null) {
+        set((state) => {
+          state.nextTransition = null;
+        });
+      }
+      return current;
+    },
   })),
 );

package/src/story-api.ts

@@ -21,6 +21,9 @@ import {
   randomInt,
   snapshotPRNG,
 } from './prng';
+import { addTrigger, removeTrigger } from './triggers';
+import type { WatchOptions } from './triggers';
+import type { TransitionConfig } from './transition';
 
 export type { StoryAction };
 
@@ -65,6 +68,13 @@ export interface StoryAPI {
   on(event: 'actionsChanged', callback: ActionsChangedCallback): () => void;
   on(event: 'variableChanged', callback: VariableChangedCallback): () => void;
   waitForActions(): Promise<StoryAction[]>;
+  watch(
+    condition: string,
+    callbackOrOptions: (() => void) | WatchOptions,
+  ): () => void;
+  unwatch(name: string): void;
+  setTransition(config: TransitionConfig | null): void;
+  setNextTransition(config: TransitionConfig | null): void;
   random(): number;
   randomInt(min: number, max: number): number;
   readonly config: {
@@ -263,6 +273,25 @@ function createStoryAPI(): StoryAPI {
       });
     },
 
+    watch(
+      condition: string,
+      callbackOrOptions: (() => void) | WatchOptions,
+    ): () => void {
+      return addTrigger(condition, callbackOrOptions);
+    },
+
+    unwatch(name: string): void {
+      removeTrigger(name);
+    },
+
+    setTransition(config: TransitionConfig | null): void {
+      useStoryStore.getState().setTransition(config);
+    },
+
+    setNextTransition(config: TransitionConfig | null): void {
+      useStoryStore.getState().setNextTransition(config);
+    },
+
     random(): number {
       return random();
     },

package/src/story-init.ts

@@ -1,63 +1,30 @@
+import { h, render } from 'preact';
 import { useStoryStore } from './store';
 import { tokenize } from './markup/tokenizer';
 import { buildAST } from './markup/ast';
-import { execute } from './expression';
-import type { ASTNode } from './markup/ast';
+import { renderNodes } from './markup/render';
 import { setSaveTitlePassage } from './saves/save-manager';
-import { deepClone } from './class-registry';
 
 /**
- * Walk AST nodes from StoryInit and execute {set} and {do} imperatively
- * (no Preact rendering needed for initialization).
- */
-function walkAndExecute(
-  nodes: ASTNode[],
-  vars: Record<string, unknown>,
-  temps: Record<string, unknown>,
-) {
-  for (const node of nodes) {
-    if (node.type !== 'macro') continue;
-
-    if (node.name === 'set') {
-      execute(node.rawArgs, vars, temps);
-    } else if (node.name === 'do') {
-      const code = node.children
-        .map((n) => (n.type === 'text' ? n.value : ''))
-        .join('');
-      execute(code, vars, temps);
-    }
-  }
-}
-
-/**
- * Execute the StoryInit passage: tokenize, parse, and run all {set}/{do} macros.
- * Called during boot and after restart() to ensure variables are initialized.
+ * Execute the StoryInit passage: tokenize, parse, and render all macros
+ * into a detached DOM node so their side effects fire through the normal
+ * Preact pipeline. This is macro-agnostic — any macro works in StoryInit.
  */
 export function executeStoryInit() {
   const state = useStoryStore.getState();
   if (!state.storyData) return;
 
   const storyInit = state.storyData.passages.get('StoryInit');
-  if (!storyInit) return;
-
-  const tokens = tokenize(storyInit.content);
-  const ast = buildAST(tokens);
-
-  const vars = deepClone(state.variables);
-  const temps = deepClone(state.temporary);
-
-  walkAndExecute(ast, vars, temps);
-
-  // Apply all changes to the store
-  for (const key of Object.keys(vars)) {
-    if (vars[key] !== state.variables[key]) {
-      state.setVariable(key, vars[key]);
-    }
-  }
-  for (const key of Object.keys(temps)) {
-    if (temps[key] !== state.temporary[key]) {
-      state.setTemporary(key, temps[key]);
-    }
+  if (storyInit) {
+    const tokens = tokenize(storyInit.content);
+    const ast = buildAST(tokens);
+
+    const container = document.createElement('div');
+    render(
+      h(() => renderNodes(ast) as any, null),
+      container,
+    );
+    render(null, container);
   }
 
   // Register SaveTitle passage if it exists

package/src/styles.css

@@ -29,8 +29,32 @@ tw-storydata {
   padding: 2em 1.5em;
 }
 
+/* Passage transitions */
+
+.passage-container {
+  position: relative;
+}
+
+.passage-container--crossfading {
+  display: grid;
+}
+
+.passage-container--crossfading > * {
+  grid-area: 1 / 1;
+}
+
 .passage {
-  animation: passage-fade-in 0.3s ease-in;
+  animation: passage-fade-in var(--passage-in-duration, 0.3s) ease;
+}
+
+.passage[data-transition='none'] {
+  animation: none;
+}
+
+.passage-snapshot {
+  animation: passage-fade-out var(--passage-out-duration, 0.3s) ease forwards;
+  pointer-events: none;
+  user-select: none;
 }
 
 @keyframes passage-fade-in {
@@ -44,6 +68,24 @@ tw-storydata {
   }
 }
 
+@keyframes passage-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .passage,
+  .passage-snapshot {
+    animation-duration: 0.01s !important;
+  }
+}
+
 .macro-button {
   background: rgba(100, 181, 246, 0.15);
   color: #64b5f6;

package/src/transition.ts

@@ -0,0 +1,69 @@
+export type TransitionType = 'none' | 'fade' | 'fade-through' | 'crossfade';
+
+export interface TransitionConfig {
+  type: TransitionType;
+  duration?: number;
+  pause?: number;
+}
+
+export type ResolvedTransition = Required<TransitionConfig>;
+
+const TRANSITION_TYPES = new Set<TransitionType>([
+  'none',
+  'fade',
+  'fade-through',
+  'crossfade',
+]);
+
+export const BUILT_IN_DEFAULT: ResolvedTransition = {
+  type: 'fade-through',
+  duration: 300,
+  pause: 50,
+};
+
+export function resolveTransitionFromTags(
+  tags: string[],
+): TransitionConfig | null {
+  const typeTag = tags.find((t) => t.startsWith('transition:'));
+  if (!typeTag) return null;
+
+  const rawType = typeTag.slice('transition:'.length);
+  if (!TRANSITION_TYPES.has(rawType as TransitionType)) {
+    console.warn(`Unknown transition type: "${rawType}"`);
+    return null;
+  }
+
+  const config: TransitionConfig = { type: rawType as TransitionType };
+
+  for (const tag of tags) {
+    if (tag.startsWith('duration:')) {
+      const n = Number(tag.slice('duration:'.length));
+      if (!Number.isNaN(n)) config.duration = n;
+    } else if (tag.startsWith('pause:')) {
+      const n = Number(tag.slice('pause:'.length));
+      if (!Number.isNaN(n)) config.pause = n;
+    }
+  }
+
+  return config;
+}
+
+export function fillDefaults(partial: TransitionConfig): ResolvedTransition {
+  return {
+    type: partial.type,
+    duration: partial.duration ?? BUILT_IN_DEFAULT.duration,
+    pause: partial.pause ?? BUILT_IN_DEFAULT.pause,
+  };
+}
+
+export function resolveTransition(
+  targetTags: string[],
+  nextTransition: TransitionConfig | null,
+  storeDefault: TransitionConfig | null,
+): ResolvedTransition {
+  const fromTags = resolveTransitionFromTags(targetTags);
+  if (fromTags) return fillDefaults(fromTags);
+  if (nextTransition) return fillDefaults(nextTransition);
+  if (storeDefault) return fillDefaults(storeDefault);
+  return { ...BUILT_IN_DEFAULT };
+}

package/src/triggers.ts

@@ -0,0 +1,161 @@
+import { evaluate, execute } from './expression';
+import { useStoryStore } from './store';
+
+export interface WatchOptions {
+  goto?: string;
+  dialog?: string;
+  run?: string;
+  once?: boolean;
+  name?: string;
+  priority?: number;
+}
+
+interface Trigger {
+  id: number;
+  name?: string;
+  condition: string;
+  callback?: () => void;
+  options?: WatchOptions;
+  lastResult: boolean;
+  priority: number;
+}
+
+let nextId = 0;
+let triggers: Trigger[] = [];
+let checking = false;
+
+type DialogCallback = () => void;
+let dialogQueue: string[] = [];
+let dialogNotify: DialogCallback | null = null;
+
+function evalCondition(condition: string): boolean {
+  const state = useStoryStore.getState();
+  try {
+    return !!evaluate(condition, state.variables, state.temporary);
+  } catch {
+    return false;
+  }
+}
+
+export function addTrigger(
+  condition: string,
+  callbackOrOptions: (() => void) | WatchOptions,
+): () => void {
+  const id = nextId++;
+  const isCallback = typeof callbackOrOptions === 'function';
+  const options = isCallback ? undefined : callbackOrOptions;
+  const callback = isCallback ? callbackOrOptions : undefined;
+
+  const trigger: Trigger = {
+    id,
+    name: options?.name,
+    condition,
+    callback,
+    options,
+    lastResult: evalCondition(condition),
+    priority: options?.priority ?? 0,
+  };
+
+  triggers.push(trigger);
+  triggers.sort((a, b) => b.priority - a.priority);
+
+  return () => {
+    triggers = triggers.filter((t) => t.id !== id);
+  };
+}
+
+export function removeTrigger(name: string): void {
+  triggers = triggers.filter((t) => t.name !== name);
+}
+
+function fireTrigger(trigger: Trigger): void {
+  const { callback, options } = trigger;
+
+  if (callback) {
+    callback();
+    return;
+  }
+
+  if (!options) return;
+
+  if (options.run) {
+    const state = useStoryStore.getState();
+    execute(options.run, state.variables, state.temporary);
+  }
+
+  if (options.dialog) {
+    dialogQueue.push(options.dialog);
+    dialogNotify?.();
+  }
+
+  if (options.goto) {
+    useStoryStore.getState().navigate(options.goto);
+  }
+}
+
+const MAX_RECHECK_DEPTH = 10;
+
+export function checkTriggers(): void {
+  if (checking) return;
+  checking = true;
+
+  try {
+    for (let depth = 0; depth < MAX_RECHECK_DEPTH; depth++) {
+      let anyFired = false;
+
+      // Snapshot triggers list — firing may remove `once` triggers
+      const current = [...triggers];
+      for (const trigger of current) {
+        // Skip if removed during this cycle
+        if (!triggers.includes(trigger)) continue;
+
+        const result = evalCondition(trigger.condition);
+        const wasFalse = !trigger.lastResult;
+        trigger.lastResult = result;
+
+        if (result && wasFalse) {
+          anyFired = true;
+
+          if (trigger.options?.once) {
+            triggers = triggers.filter((t) => t.id !== trigger.id);
+          }
+
+          fireTrigger(trigger);
+        }
+      }
+
+      if (!anyFired) break;
+    }
+  } finally {
+    checking = false;
+  }
+}
+
+export function reinitTriggerState(): void {
+  for (const trigger of triggers) {
+    trigger.lastResult = evalCondition(trigger.condition);
+  }
+}
+
+export function resetTriggers(): void {
+  triggers = [];
+  dialogQueue = [];
+  nextId = 0;
+}
+
+export function subscribeTriggerDialogs(cb: () => void): () => void {
+  dialogNotify = cb;
+  // Flush any queued dialogs
+  if (dialogQueue.length > 0) cb();
+  return () => {
+    if (dialogNotify === cb) dialogNotify = null;
+  };
+}
+
+export function shiftDialogQueue(): string | undefined {
+  return dialogQueue.shift();
+}
+
+export function dialogQueueLength(): number {
+  return dialogQueue.length;
+}