@rohal12/spindle 0.16.0 → 0.17.0

package/src/components/macros/MenubarButtons.tsx

@@ -0,0 +1,158 @@
+import { useState } from 'preact/hooks';
+import { useStoryStore } from '../../store';
+import { settings } from '../../settings';
+import { defineMacro } from '../../define-macro';
+import { PassageDialog } from '../PassageDialog';
+import type { ActionType } from '../../action-registry';
+import type { ComponentChildren } from 'preact';
+
+interface MenubarActionConfig {
+  name: string;
+  label: ComponentChildren;
+  actionType: ActionType;
+  title?: string;
+  confirm?: string;
+  hidden?: () => boolean;
+  setup?: () => { perform: () => void; disabled?: boolean };
+  dialog?: {
+    passageName: string;
+    fallbackMarkup?: string;
+    panelClass?: string;
+  };
+}
+
+export function defineMenubarAction(config: MenubarActionConfig) {
+  defineMacro({
+    name: config.name,
+    render(_, ctx) {
+      if (config.hidden?.()) return null;
+
+      const [dialogOpen, setDialogOpen] = config.dialog
+        ? useState(false)
+        : [false, undefined as never];
+
+      const setup = config.setup?.() ?? { perform: () => {} };
+      const { disabled } = setup;
+
+      const cls = ctx.className
+        ? `menubar-button ${ctx.className}`
+        : 'menubar-button';
+
+      const perform = config.dialog
+        ? () => setDialogOpen(true)
+        : config.confirm
+          ? () => {
+              if (confirm(config.confirm!)) setup.perform();
+            }
+          : setup.perform;
+
+      ctx.useAction({
+        type: config.actionType,
+        key: config.name,
+        authorId: ctx.id,
+        label: typeof config.label === 'string' ? config.label : config.name,
+        disabled,
+        perform: config.dialog ? () => setDialogOpen(true) : setup.perform,
+      });
+
+      return (
+        <>
+          <button
+            id={ctx.id}
+            class={cls}
+            onClick={perform}
+            disabled={disabled}
+            title={config.title}
+          >
+            {config.label}
+          </button>
+          {config.dialog && dialogOpen && (
+            <PassageDialog
+              passageName={config.dialog.passageName}
+              fallbackMarkup={config.dialog.fallbackMarkup}
+              panelClass={config.dialog.panelClass}
+              onClose={() => setDialogOpen(false)}
+            />
+          )}
+        </>
+      );
+    },
+  });
+}
+
+defineMenubarAction({
+  name: 'back',
+  label: '← Back',
+  actionType: 'back',
+  setup: () => ({
+    perform: useStoryStore((s) => s.goBack),
+    disabled: !useStoryStore((s) => s.historyIndex > 0),
+  }),
+});
+
+defineMenubarAction({
+  name: 'forward',
+  label: 'Forward →',
+  actionType: 'forward',
+  setup: () => ({
+    perform: useStoryStore((s) => s.goForward),
+    disabled: !useStoryStore((s) => s.historyIndex < s.history.length - 1),
+  }),
+});
+
+defineMenubarAction({
+  name: 'quicksave',
+  label: 'QuickSave',
+  actionType: 'save',
+  title: 'Quick Save (F6)',
+  setup: () => ({
+    perform: useStoryStore((s) => s.save),
+  }),
+});
+
+defineMenubarAction({
+  name: 'quickload',
+  label: 'QuickLoad',
+  actionType: 'load',
+  title: 'Quick Load (F9)',
+  confirm: 'Load saved game? Current progress will be lost.',
+  setup: () => {
+    const load = useStoryStore((s) => s.load);
+    const hasSave = useStoryStore((s) => s.hasSave);
+    useStoryStore((s) => s.saveVersion);
+    return { perform: () => load(), disabled: !hasSave() };
+  },
+});
+
+defineMenubarAction({
+  name: 'restart',
+  label: '↺ Restart',
+  actionType: 'restart',
+  confirm: 'Restart the story? All progress will be lost.',
+  setup: () => ({
+    perform: useStoryStore((s) => s.restart),
+  }),
+});
+
+defineMenubarAction({
+  name: 'saves',
+  label: 'Saves',
+  actionType: 'dialog',
+  dialog: {
+    passageName: 'SaveLoad',
+    fallbackMarkup: '{save-manager}',
+    panelClass: 'dialog-saves',
+  },
+});
+
+defineMenubarAction({
+  name: 'settings',
+  label: 'Settings',
+  actionType: 'dialog',
+  hidden: () => !settings.hasAny(),
+  dialog: {
+    passageName: 'Settings',
+    fallbackMarkup: '{settings-controls}',
+    panelClass: 'dialog-settings',
+  },
+});

package/src/components/macros/Meter.tsx

@@ -1,13 +1,6 @@
-import { evaluate } from '../../expression';
-import { useMergedLocals } from '../../hooks/use-merged-locals';
-import { useInterpolate } from '../../hooks/use-interpolate';
-import { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
+import { defineMacro } from '../../define-macro';
+import { MacroError } from './MacroError';
 
-/**
- * Parse rawArgs into currentExpr, maxExpr, and optional labelMode.
- * Supports: {meter $current $max}, {meter $current $max "%"}, etc.
- */
 function parseArgs(rawArgs: string): {
   currentExpr: string;
   maxExpr: string;
@@ -25,8 +18,6 @@ function parseArgs(rawArgs: string): {
   }
 
   // Split remaining into two expressions.
-  // Expressions can contain dots, brackets, parens — we need to find the split point.
-  // Strategy: walk tokens, splitting on whitespace that isn't inside parens/brackets.
   const exprs = splitExpressions(rest);
   if (exprs.length < 2) {
     throw new Error(
@@ -79,48 +70,40 @@ function formatLabel(
   return `${current} / ${max}`;
 }
 
-export function Meter({ rawArgs, className, id }: MacroProps) {
-  const resolve = useInterpolate();
-  className = resolve(className);
-  id = resolve(id);
-  const [mergedVars, mergedTemps, mergedLocals] = useMergedLocals();
+defineMacro({
+  name: 'meter',
+  interpolate: true,
+  merged: true,
+  render({ rawArgs }, ctx) {
+    try {
+      const { currentExpr, maxExpr, labelMode } = parseArgs(rawArgs);
+      const current = Number(ctx.evaluate!(currentExpr));
+      const max = Number(ctx.evaluate!(maxExpr));
+      const pct =
+        max === 0 ? 0 : Math.max(0, Math.min(100, (current / max) * 100));
+      const label = formatLabel(current, max, labelMode);
 
-  try {
-    const { currentExpr, maxExpr, labelMode } = parseArgs(rawArgs);
-    const current = Number(
-      evaluate(currentExpr, mergedVars, mergedTemps, mergedLocals),
-    );
-    const max = Number(
-      evaluate(maxExpr, mergedVars, mergedTemps, mergedLocals),
-    );
-    const pct =
-      max === 0 ? 0 : Math.max(0, Math.min(100, (current / max) * 100));
-    const label = formatLabel(current, max, labelMode);
-
-    const classes = ['macro-meter', className].filter(Boolean).join(' ');
+      const classes = ctx.cls;
 
-    return (
-      <div
-        class={classes}
-        id={id}
-      >
+      return (
         <div
-          class="macro-meter-fill"
-          style={`width: ${pct}%`}
+          class={classes}
+          id={ctx.id}
+        >
+          <div
+            class="macro-meter-fill"
+            style={`width: ${pct}%`}
+          />
+          {label != null && <span class="macro-meter-label">{label}</span>}
+        </div>
+      );
+    } catch (err) {
+      return (
+        <MacroError
+          macro="meter"
+          error={err}
         />
-        {label != null && <span class="macro-meter-label">{label}</span>}
-      </div>
-    );
-  } catch (err) {
-    return (
-      <span
-        class="error"
-        title={String(err)}
-      >
-        {`{meter error: ${err instanceof Error ? err.message : String(err)}}`}
-      </span>
-    );
-  }
-}
-
-registerMacro('meter', Meter);
+      );
+    }
+  },
+});

package/src/components/macros/Numberbox.tsx

@@ -1,50 +1,33 @@
-import { useStoryStore } from '../../store';
-import { useAction } from '../../hooks/use-action';
-import { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
+import { defineMacro } from '../../define-macro';
 
-function parseArgs(rawArgs: string): { varName: string; placeholder: string } {
-  const match = rawArgs.match(/^\s*(["']?\$\w+["']?)\s*(?:["'](.*)["'])?\s*$/);
-  if (!match) {
-    return { varName: rawArgs.trim(), placeholder: '' };
-  }
-  const varName = match[1]!.replace(/["']/g, '');
-  const placeholder = match[2] || '';
-  return { varName, placeholder };
-}
+defineMacro({
+  name: 'numberbox',
+  storeVar: true,
+  render({ rawArgs }, ctx) {
+    const { placeholder } = ctx.parseVarArgs(rawArgs);
 
-export function Numberbox({ rawArgs, className, id }: MacroProps) {
-  const { varName, placeholder } = parseArgs(rawArgs);
-  const name = varName.startsWith('$') ? varName.slice(1) : varName;
+    ctx.useAction({
+      type: 'numberbox',
+      key: `$${ctx.varName}`,
+      authorId: ctx.id,
+      label: placeholder || ctx.varName!,
+      variable: ctx.varName,
+      value: ctx.value,
+      perform: (v) => ctx.setValue!(v !== undefined ? Number(v) : 0),
+    });
 
-  const value = useStoryStore((s) => s.variables[name]);
-  const setVariable = useStoryStore((s) => s.setVariable);
-
-  useAction({
-    type: 'numberbox',
-    key: `$${name}`,
-    authorId: id,
-    label: placeholder || name,
-    variable: name,
-    value,
-    perform: (v) => setVariable(name, v !== undefined ? Number(v) : 0),
-  });
-
-  const cls = className ? `macro-numberbox ${className}` : 'macro-numberbox';
-
-  return (
-    <input
-      type="number"
-      id={id}
-      class={cls}
-      value={value == null ? '' : String(value)}
-      placeholder={placeholder}
-      onInput={(e) => {
-        const val = (e.target as HTMLInputElement).value;
-        setVariable(name, val === '' ? 0 : Number(val));
-      }}
-    />
-  );
-}
-
-registerMacro('numberbox', Numberbox);
+    return (
+      <input
+        type="number"
+        id={ctx.id}
+        class={ctx.cls}
+        value={ctx.value == null ? '' : String(ctx.value)}
+        placeholder={placeholder}
+        onInput={(e) => {
+          const val = (e.target as HTMLInputElement).value;
+          ctx.setValue!(val === '' ? 0 : Number(val));
+        }}
+      />
+    );
+  },
+});

package/src/components/macros/PassageDisplay.tsx

@@ -1,36 +1,33 @@
 import { useStoryStore } from '../../store';
 import { Passage } from '../Passage';
-import { useInterpolate } from '../../hooks/use-interpolate';
-import { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
+import { defineMacro } from '../../define-macro';
 
-export function PassageDisplay({ className, id }: MacroProps) {
-  const resolve = useInterpolate();
-  className = resolve(className);
-  id = resolve(id);
-  const currentPassage = useStoryStore((s) => s.currentPassage);
-  const storyData = useStoryStore((s) => s.storyData);
+defineMacro({
+  name: 'passage',
+  interpolate: true,
+  render(_props, ctx) {
+    const currentPassage = useStoryStore((s) => s.currentPassage);
+    const storyData = useStoryStore((s) => s.storyData);
+
+    const passage = storyData?.passages.get(currentPassage);
+    if (!passage) {
+      return (
+        <div class="error">
+          Error: Passage &ldquo;{currentPassage}&rdquo; not found.
+        </div>
+      );
+    }
 
-  const passage = storyData?.passages.get(currentPassage);
-  if (!passage) {
     return (
-      <div class="error">
-        Error: Passage &ldquo;{currentPassage}&rdquo; not found.
+      <div
+        id={ctx.id ?? 'story'}
+        class={ctx.className ?? 'story'}
+      >
+        <Passage
+          passage={passage}
+          key={currentPassage}
+        />
       </div>
     );
-  }
-
-  return (
-    <div
-      id={id ?? 'story'}
-      class={className ?? 'story'}
-    >
-      <Passage
-        passage={passage}
-        key={currentPassage}
-      />
-    </div>
-  );
-}
-
-registerMacro('passage', PassageDisplay);
+  },
+});

package/src/components/macros/Print.tsx

@@ -1,39 +1,22 @@
-import { evaluate } from '../../expression';
-import { useMergedLocals } from '../../hooks/use-merged-locals';
-import { useInterpolate } from '../../hooks/use-interpolate';
-import { currentSourceLocation } from '../../utils/source-location';
-import { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
+import { defineMacro } from '../../define-macro';
+import { MacroError } from './MacroError';
 
-export function Print({ rawArgs, className, id }: MacroProps) {
-  const resolve = useInterpolate();
-  className = resolve(className);
-  id = resolve(id);
-  const [mergedVars, mergedTemps, mergedLocals] = useMergedLocals();
-
-  try {
-    const result = evaluate(rawArgs, mergedVars, mergedTemps, mergedLocals);
-    const display = result == null ? '' : String(result);
-    if (className || id)
+defineMacro({
+  name: 'print',
+  interpolate: true,
+  merged: true,
+  render({ rawArgs }, ctx) {
+    try {
+      const result = ctx.evaluate!(rawArgs);
+      const display = result == null ? '' : String(result);
+      return ctx.wrap(display);
+    } catch (err) {
       return (
-        <span
-          id={id}
-          class={className}
-        >
-          {display}
-        </span>
+        <MacroError
+          macro="print"
+          error={err}
+        />
       );
-    return <>{display}</>;
-  } catch (err) {
-    return (
-      <span
-        class="error"
-        title={String(err)}
-      >
-        {`{print error${currentSourceLocation()}: ${err instanceof Error ? err.message : String(err)}}`}
-      </span>
-    );
-  }
-}
-
-registerMacro('print', Print);
+    }
+  },
+});

package/src/components/macros/Radiobutton.tsx

@@ -1,7 +1,5 @@
 import { useStoryStore } from '../../store';
-import { useAction } from '../../hooks/use-action';
-import { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
+import { defineMacro } from '../../define-macro';
 
 function parseArgs(rawArgs: string): {
   varName: string;
@@ -28,41 +26,38 @@ function parseArgs(rawArgs: string): {
   };
 }
 
-export function Radiobutton({ rawArgs, className, id }: MacroProps) {
-  const { varName, value: radioValue, label } = parseArgs(rawArgs);
-  const name = varName.startsWith('$') ? varName.slice(1) : varName;
+defineMacro({
+  name: 'radiobutton',
+  render({ rawArgs }, ctx) {
+    const { varName, value: radioValue, label } = parseArgs(rawArgs);
+    const name = varName.startsWith('$') ? varName.slice(1) : varName;
 
-  const currentValue = useStoryStore((s) => s.variables[name]);
-  const setVariable = useStoryStore((s) => s.setVariable);
+    const currentValue = useStoryStore((s) => s.variables[name]);
+    const setVariable = useStoryStore((s) => s.setVariable);
 
-  useAction({
-    type: 'radiobutton',
-    key: `$${name}:${radioValue}`,
-    authorId: id,
-    label: label || radioValue,
-    variable: name,
-    value: currentValue,
-    perform: () => setVariable(name, radioValue),
-  });
+    ctx.useAction({
+      type: 'radiobutton',
+      key: `$${name}:${radioValue}`,
+      authorId: ctx.id,
+      label: label || radioValue,
+      variable: name,
+      value: currentValue,
+      perform: () => setVariable(name, radioValue),
+    });
 
-  const cls = className
-    ? `macro-radiobutton ${className}`
-    : 'macro-radiobutton';
-
-  return (
-    <label
-      id={id}
-      class={cls}
-    >
-      <input
-        type="radio"
-        name={`radio-${name}`}
-        checked={currentValue === radioValue}
-        onChange={() => setVariable(name, radioValue)}
-      />
-      {label ? ` ${label}` : null}
-    </label>
-  );
-}
-
-registerMacro('radiobutton', Radiobutton);
+    return (
+      <label
+        id={ctx.id}
+        class={ctx.cls}
+      >
+        <input
+          type="radio"
+          name={`radio-${name}`}
+          checked={currentValue === radioValue}
+          onChange={() => setVariable(name, radioValue)}
+        />
+        {label ? ` ${label}` : null}
+      </label>
+    );
+  },
+});

package/src/components/macros/Repeat.tsx

@@ -1,65 +1,60 @@
 import { createContext } from 'preact';
-import { useState, useEffect, useCallback, useMemo } from 'preact/hooks';
-import { renderNodes } from '../../markup/render';
 import { parseDelay } from '../../utils/parse-delay';
 import { hasInterpolation, interpolate } from '../../interpolation';
 import { useStoryStore } from '../../store';
-import { registerMacro } from '../../registry';
-import type { MacroProps } from '../../registry';
+import { defineMacro } from '../../define-macro';
 
 export const RepeatContext = createContext<{ stop: () => void }>({
   stop: () => {},
 });
 
-export function Repeat({
-  rawArgs,
-  children = [],
-  className: rawClassName,
-  id: rawId,
-}: MacroProps) {
-  const [className, id] = useMemo(() => {
-    const resolveOnce = (s: string | undefined) => {
-      if (!s || !hasInterpolation(s)) return s;
-      const st = useStoryStore.getState();
-      return interpolate(s, st.variables, st.temporary, {});
-    };
-    return [resolveOnce(rawClassName), resolveOnce(rawId)];
-  }, [rawClassName, rawId]);
-
-  const delay = parseDelay(rawArgs);
-  const [count, setCount] = useState(0);
-  const [stopped, setStopped] = useState(false);
-
-  const stop = useCallback(() => setStopped(true), []);
-
-  useEffect(() => {
-    if (stopped) return;
-    const interval = setInterval(() => {
-      setCount((c) => c + 1);
-    }, delay);
-    return () => clearInterval(interval);
-  }, [delay, stopped]);
-
-  if (count === 0 && !stopped) return null;
-
-  const cls = className ? `macro-repeat ${className}` : undefined;
-
-  const content = (
-    <RepeatContext.Provider value={{ stop }}>
-      <span key={count}>{renderNodes(children)}</span>
-    </RepeatContext.Provider>
-  );
-
-  if (cls || id)
-    return (
-      <span
-        id={id}
-        class={cls}
-      >
-        {content}
-      </span>
+defineMacro({
+  name: 'repeat',
+  render({ rawArgs, children = [], className: rawClassName, id: rawId }, ctx) {
+    const { useState, useEffect, useCallback, useMemo } = ctx.hooks;
+
+    const [className, id] = useMemo(() => {
+      const resolveOnce = (s: string | undefined) => {
+        if (!s || !hasInterpolation(s)) return s;
+        const st = useStoryStore.getState();
+        return interpolate(s, st.variables, st.temporary, {});
+      };
+      return [resolveOnce(rawClassName), resolveOnce(rawId)];
+    }, [rawClassName, rawId]);
+
+    const delay = parseDelay(rawArgs);
+    const [count, setCount] = useState(0);
+    const [stopped, setStopped] = useState(false);
+
+    const stop = useCallback(() => setStopped(true), []);
+
+    useEffect(() => {
+      if (stopped) return;
+      const interval = setInterval(() => {
+        setCount((c) => c + 1);
+      }, delay);
+      return () => clearInterval(interval);
+    }, [delay, stopped]);
+
+    if (count === 0 && !stopped) return null;
+
+    const cls = className ? `macro-repeat ${className}` : undefined;
+
+    const content = (
+      <RepeatContext.Provider value={{ stop }}>
+        <span key={count}>{ctx.renderNodes(children)}</span>
+      </RepeatContext.Provider>
     );
-  return content;
-}
 
-registerMacro('repeat', Repeat);
+    if (cls || id)
+      return (
+        <span
+          id={id}
+          class={cls}
+        >
+          {content}
+        </span>
+      );
+    return content;
+  },
+});