@rohal12/spindle 0.1.0 → 0.3.0

package/src/components/macros/Forward.tsx

@@ -1,4 +1,5 @@
 import { useStoryStore } from '../../store';
+import { useAction } from '../../hooks/use-action';
 
 interface ForwardProps {
   className?: string;
@@ -12,6 +13,15 @@ export function Forward({ className, id }: ForwardProps) {
   );
   const cls = className ? `menubar-button ${className}` : 'menubar-button';
 
+  useAction({
+    type: 'forward',
+    key: 'forward',
+    authorId: id,
+    label: 'Forward',
+    disabled: !canGoForward,
+    perform: () => goForward(),
+  });
+
   return (
     <button
       id={id}

package/src/components/macros/Listbox.tsx

@@ -1,5 +1,6 @@
 import { useStoryStore } from '../../store';
 import { extractOptions } from './option-utils';
+import { useAction } from '../../hooks/use-action';
 import type { ASTNode } from '../../markup/ast';
 
 interface ListboxProps {
@@ -18,6 +19,19 @@ export function Listbox({ rawArgs, children, className, id }: ListboxProps) {
 
   const options = extractOptions(children);
 
+  useAction({
+    type: 'listbox',
+    key: `$${name}`,
+    authorId: id,
+    label: name,
+    variable: name,
+    options,
+    value,
+    perform: (v) => {
+      if (v !== undefined) setVariable(name, String(v));
+    },
+  });
+
   const cls = className ? `macro-listbox ${className}` : 'macro-listbox';
 
   return (
@@ -25,9 +39,7 @@ export function Listbox({ rawArgs, children, className, id }: ListboxProps) {
       id={id}
       class={cls}
       value={value == null ? '' : String(value)}
-      onChange={(e) =>
-        setVariable(name, (e.target as HTMLSelectElement).value)
-      }
+      onChange={(e) => setVariable(name, (e.target as HTMLSelectElement).value)}
     >
       {options.map((opt) => (
         <option

package/src/components/macros/MacroLink.tsx

@@ -1,6 +1,7 @@
 import { useStoryStore } from '../../store';
 import { execute } from '../../expression';
 import type { ASTNode } from '../../markup/ast';
+import { deepClone } from '../../class-registry';
 
 interface MacroLinkProps {
   rawArgs: string;
@@ -30,20 +31,16 @@ function parseArgs(rawArgs: string): {
   return { display: rawArgs.trim(), passage: null };
 }
 
-/**
- * Collect text from AST nodes for imperative execution (like Do.tsx).
- */
-function collectText(nodes: ASTNode[]): string {
-  return nodes.map((n) => (n.type === 'text' ? n.value : '')).join('');
-}
+import { collectText } from '../../utils/extract-text';
+import { useAction } from '../../hooks/use-action';
 
 /**
  * Execute the children imperatively: walk AST for {set} and {do} macros.
  */
 function executeChildren(children: ASTNode[]) {
   const state = useStoryStore.getState();
-  const vars = structuredClone(state.variables);
-  const temps = structuredClone(state.temporary);
+  const vars = deepClone(state.variables);
+  const temps = deepClone(state.temporary);
 
   for (const node of children) {
     if (node.type !== 'macro') continue;
@@ -92,6 +89,20 @@ export function MacroLink({
     }
   };
 
+  useAction({
+    type: 'link',
+    key: passage || display,
+    authorId: id,
+    label: display,
+    target: passage ?? undefined,
+    perform: () => {
+      executeChildren(children);
+      if (passage) {
+        useStoryStore.getState().navigate(passage);
+      }
+    },
+  });
+
   const cls = className ? `macro-link ${className}` : 'macro-link';
 
   return (

package/src/components/macros/Meter.tsx

@@ -0,0 +1,130 @@
+import { useStoryStore } from '../../store';
+import { useContext } from 'preact/hooks';
+import { evaluate } from '../../expression';
+import { LocalsContext } from '../../markup/render';
+
+interface MeterProps {
+  rawArgs: string;
+  className?: string;
+  id?: string;
+}
+
+/**
+ * Parse rawArgs into currentExpr, maxExpr, and optional labelMode.
+ * Supports: {meter $current $max}, {meter $current $max "%"}, etc.
+ */
+function parseArgs(rawArgs: string): {
+  currentExpr: string;
+  maxExpr: string;
+  labelMode: string;
+} {
+  const trimmed = rawArgs.trim();
+
+  // Extract quoted label mode from the end if present
+  let labelMode = '';
+  let rest = trimmed;
+  const quoteMatch = rest.match(/\s+(?:"([^"]*)"|'([^']*)')$/);
+  if (quoteMatch) {
+    labelMode = quoteMatch[1] ?? quoteMatch[2];
+    rest = rest.slice(0, quoteMatch.index!).trim();
+  }
+
+  // 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(
+      'meter requires two arguments: {meter currentExpr maxExpr}',
+    );
+  }
+
+  return {
+    currentExpr: exprs[0],
+    maxExpr: exprs.slice(1).join(' '),
+    labelMode,
+  };
+}
+
+function splitExpressions(input: string): string[] {
+  const result: string[] = [];
+  let current = '';
+  let depth = 0;
+
+  for (let i = 0; i < input.length; i++) {
+    const ch = input[i];
+    if (ch === '(' || ch === '[') {
+      depth++;
+      current += ch;
+    } else if (ch === ')' || ch === ']') {
+      depth--;
+      current += ch;
+    } else if (/\s/.test(ch) && depth === 0 && current.length > 0) {
+      result.push(current);
+      current = '';
+      // Skip additional whitespace
+      while (i + 1 < input.length && /\s/.test(input[i + 1])) i++;
+    } else {
+      current += ch;
+    }
+  }
+  if (current.length > 0) result.push(current);
+  return result;
+}
+
+function formatLabel(
+  current: number,
+  max: number,
+  labelMode: string,
+): string | null {
+  if (labelMode === 'none') return null;
+  if (labelMode === '%') return `${Math.round((current / max) * 100)}%`;
+  if (labelMode) return `${current} ${labelMode} / ${max} ${labelMode}`;
+  return `${current} / ${max}`;
+}
+
+export function Meter({ rawArgs, className, id }: MeterProps) {
+  const variables = useStoryStore((s) => s.variables);
+  const temporary = useStoryStore((s) => s.temporary);
+  const locals = useContext(LocalsContext);
+
+  // Merge locals into variables for expression evaluation
+  const mergedVars = { ...variables };
+  const mergedTemps = { ...temporary };
+  for (const [key, val] of Object.entries(locals)) {
+    if (key.startsWith('$')) mergedVars[key.slice(1)] = val;
+    else if (key.startsWith('_')) mergedTemps[key.slice(1)] = val;
+  }
+
+  try {
+    const { currentExpr, maxExpr, labelMode } = parseArgs(rawArgs);
+    const current = Number(evaluate(currentExpr, mergedVars, mergedTemps));
+    const max = Number(evaluate(maxExpr, mergedVars, mergedTemps));
+    const pct = Math.max(0, Math.min(100, (current / max) * 100));
+    const label = formatLabel(current, max, labelMode);
+
+    const classes = ['macro-meter', className].filter(Boolean).join(' ');
+
+    return (
+      <div
+        class={classes}
+        id={id}
+      >
+        <div
+          class="macro-meter-fill"
+          style={`width: ${pct}%`}
+        />
+        {label != null && <span class="macro-meter-label">{label}</span>}
+      </div>
+    );
+  } catch (err) {
+    return (
+      <span
+        class="error"
+        title={String(err)}
+      >
+        {`{meter error: ${(err as Error).message}}`}
+      </span>
+    );
+  }
+}

package/src/components/macros/Numberbox.tsx

@@ -1,4 +1,5 @@
 import { useStoryStore } from '../../store';
+import { useAction } from '../../hooks/use-action';
 
 interface NumberboxProps {
   rawArgs: string;
@@ -7,9 +8,7 @@ interface NumberboxProps {
 }
 
 function parseArgs(rawArgs: string): { varName: string; placeholder: string } {
-  const match = rawArgs.match(
-    /^\s*(["']?\$\w+["']?)\s*(?:["'](.*)["'])?\s*$/,
-  );
+  const match = rawArgs.match(/^\s*(["']?\$\w+["']?)\s*(?:["'](.*)["'])?\s*$/);
   if (!match) {
     return { varName: rawArgs.trim(), placeholder: '' };
   }
@@ -25,6 +24,16 @@ export function Numberbox({ rawArgs, className, id }: NumberboxProps) {
   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 (

package/src/components/macros/QuickLoad.tsx

@@ -1,4 +1,5 @@
 import { useStoryStore } from '../../store';
+import { useAction } from '../../hooks/use-action';
 
 interface QuickLoadProps {
   className?: string;
@@ -19,6 +20,15 @@ export function QuickLoad({ className, id }: QuickLoadProps) {
     }
   };
 
+  useAction({
+    type: 'load',
+    key: 'quickload',
+    authorId: id,
+    label: 'QuickLoad',
+    disabled,
+    perform: () => load(),
+  });
+
   return (
     <button
       id={id}

package/src/components/macros/QuickSave.tsx

@@ -1,4 +1,5 @@
 import { useStoryStore } from '../../store';
+import { useAction } from '../../hooks/use-action';
 
 interface QuickSaveProps {
   className?: string;
@@ -9,6 +10,14 @@ export function QuickSave({ className, id }: QuickSaveProps) {
   const save = useStoryStore((s) => s.save);
   const cls = className ? `menubar-button ${className}` : 'menubar-button';
 
+  useAction({
+    type: 'save',
+    key: 'quicksave',
+    authorId: id,
+    label: 'QuickSave',
+    perform: () => save(),
+  });
+
   return (
     <button
       id={id}

package/src/components/macros/Radiobutton.tsx

@@ -1,4 +1,5 @@
 import { useStoryStore } from '../../store';
+import { useAction } from '../../hooks/use-action';
 
 interface RadiobuttonProps {
   rawArgs: string;
@@ -38,6 +39,16 @@ export function Radiobutton({ rawArgs, className, id }: RadiobuttonProps) {
   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),
+  });
+
   const cls = className
     ? `macro-radiobutton ${className}`
     : 'macro-radiobutton';

package/src/components/macros/Restart.tsx

@@ -1,4 +1,5 @@
 import { useStoryStore } from '../../store';
+import { useAction } from '../../hooks/use-action';
 
 interface RestartProps {
   className?: string;
@@ -15,6 +16,14 @@ export function Restart({ className, id }: RestartProps) {
     }
   };
 
+  useAction({
+    type: 'restart',
+    key: 'restart',
+    authorId: id,
+    label: 'Restart',
+    perform: () => restart(),
+  });
+
   return (
     <button
       id={id}

package/src/components/macros/Set.tsx

@@ -1,6 +1,7 @@
 import { useLayoutEffect } from 'preact/hooks';
 import { useStoryStore } from '../../store';
 import { execute } from '../../expression';
+import { deepClone } from '../../class-registry';
 
 interface SetProps {
   rawArgs: string;
@@ -9,8 +10,8 @@ interface SetProps {
 export function Set({ rawArgs }: SetProps) {
   useLayoutEffect(() => {
     const state = useStoryStore.getState();
-    const vars = structuredClone(state.variables);
-    const temps = structuredClone(state.temporary);
+    const vars = deepClone(state.variables);
+    const temps = deepClone(state.temporary);
 
     try {
       execute(rawArgs, vars, temps);

package/src/components/macros/Textarea.tsx

@@ -1,4 +1,5 @@
 import { useStoryStore } from '../../store';
+import { useAction } from '../../hooks/use-action';
 
 interface TextareaProps {
   rawArgs: string;
@@ -7,9 +8,7 @@ interface TextareaProps {
 }
 
 function parseArgs(rawArgs: string): { varName: string; placeholder: string } {
-  const match = rawArgs.match(
-    /^\s*(["']?\$\w+["']?)\s*(?:["'](.*)["'])?\s*$/,
-  );
+  const match = rawArgs.match(/^\s*(["']?\$\w+["']?)\s*(?:["'](.*)["'])?\s*$/);
   if (!match) {
     return { varName: rawArgs.trim(), placeholder: '' };
   }
@@ -25,6 +24,16 @@ export function Textarea({ rawArgs, className, id }: TextareaProps) {
   const value = useStoryStore((s) => s.variables[name]);
   const setVariable = useStoryStore((s) => s.setVariable);
 
+  useAction({
+    type: 'textarea',
+    key: `$${name}`,
+    authorId: id,
+    label: placeholder || name,
+    variable: name,
+    value,
+    perform: (v) => setVariable(name, v !== undefined ? String(v) : ''),
+  });
+
   const cls = className ? `macro-textarea ${className}` : 'macro-textarea';
 
   return (

package/src/components/macros/Textbox.tsx

@@ -1,4 +1,5 @@
 import { useStoryStore } from '../../store';
+import { useAction } from '../../hooks/use-action';
 
 interface TextboxProps {
   rawArgs: string;
@@ -7,9 +8,7 @@ interface TextboxProps {
 }
 
 function parseArgs(rawArgs: string): { varName: string; placeholder: string } {
-  const match = rawArgs.match(
-    /^\s*(["']?\$\w+["']?)\s*(?:["'](.*)["'])?\s*$/,
-  );
+  const match = rawArgs.match(/^\s*(["']?\$\w+["']?)\s*(?:["'](.*)["'])?\s*$/);
   if (!match) {
     return { varName: rawArgs.trim(), placeholder: '' };
   }
@@ -25,6 +24,16 @@ export function Textbox({ rawArgs, className, id }: TextboxProps) {
   const value = useStoryStore((s) => s.variables[name]);
   const setVariable = useStoryStore((s) => s.setVariable);
 
+  useAction({
+    type: 'textbox',
+    key: `$${name}`,
+    authorId: id,
+    label: placeholder || name,
+    variable: name,
+    value,
+    perform: (v) => setVariable(name, v !== undefined ? String(v) : ''),
+  });
+
   const cls = className ? `macro-textbox ${className}` : 'macro-textbox';
 
   return (

package/src/components/macros/Type.tsx

@@ -44,11 +44,7 @@ export function Type({ rawArgs, children, className, id }: TypeProps) {
 
   const done = visibleChars >= totalChars && totalChars > 0;
 
-  const cls = [
-    'macro-type',
-    done ? 'macro-type-done' : '',
-    className || '',
-  ]
+  const cls = ['macro-type', done ? 'macro-type-done' : '', className || '']
     .filter(Boolean)
     .join(' ');
 
@@ -58,10 +54,7 @@ export function Type({ rawArgs, children, className, id }: TypeProps) {
       class={cls}
       ref={containerRef}
       style={{
-        clipPath:
-          totalChars > 0 && !done
-            ? undefined
-            : undefined,
+        clipPath: totalChars > 0 && !done ? undefined : undefined,
       }}
     >
       <span

package/src/hooks/use-action.ts

@@ -0,0 +1,49 @@
+import { useLayoutEffect, useRef } from 'preact/hooks';
+import {
+  registerAction,
+  generateActionId,
+  type ActionType,
+  type StoryAction,
+} from '../action-registry';
+
+export interface UseActionOptions {
+  type: ActionType;
+  key: string;
+  authorId?: string;
+  label: string;
+  target?: string;
+  variable?: string;
+  options?: string[];
+  value?: unknown;
+  disabled?: boolean;
+  perform: (value?: unknown) => void;
+}
+
+export function useAction(opts: UseActionOptions): string {
+  const idRef = useRef<string>('');
+
+  // Generate ID only once on first call
+  if (!idRef.current) {
+    idRef.current = generateActionId(opts.type, opts.key, opts.authorId);
+  }
+
+  const id = idRef.current;
+
+  useLayoutEffect(() => {
+    const action: StoryAction = {
+      id,
+      type: opts.type,
+      label: opts.label,
+      perform: opts.perform,
+    };
+    if (opts.target !== undefined) action.target = opts.target;
+    if (opts.variable !== undefined) action.variable = opts.variable;
+    if (opts.options !== undefined) action.options = opts.options;
+    if (opts.value !== undefined) action.value = opts.value;
+    if (opts.disabled !== undefined) action.disabled = opts.disabled;
+
+    return registerAction(action);
+  });
+
+  return id;
+}

package/src/index.tsx

@@ -3,6 +3,7 @@ import { App } from './components/App';
 import { parseStoryData } from './parser';
 import { useStoryStore } from './store';
 import { installStoryAPI } from './story-api';
+import { resetIdCounters } from './action-registry';
 import { executeStoryInit } from './story-init';
 import {
   parseStoryVariables,
@@ -93,11 +94,7 @@ function boot() {
       const widgetTokens = tokenize(passage.content);
       const widgetAST = buildAST(widgetTokens);
       for (const node of widgetAST) {
-        if (
-          node.type === 'macro' &&
-          node.name === 'widget' &&
-          node.rawArgs
-        ) {
+        if (node.type === 'macro' && node.name === 'widget' && node.rawArgs) {
           const widgetName = node.rawArgs.trim().replace(/["']/g, '');
           registerWidget(widgetName, node.children as ASTNode[]);
         }
@@ -105,6 +102,15 @@ function boot() {
     }
   }
 
+  // Reset action ID counters on passage change
+  let prevPassage = '';
+  useStoryStore.subscribe((state) => {
+    if (state.currentPassage !== prevPassage) {
+      prevPassage = state.currentPassage;
+      resetIdCounters();
+    }
+  });
+
   const root = document.getElementById('root');
   if (!root) {
     throw new Error('spindle: No <div id="root"> element found.');

package/src/markup/ast.ts

@@ -89,11 +89,7 @@ export function buildAST(tokens: Token[]): ASTNode[] {
     if (stack.length === 0) return root;
     const top = stack[stack.length - 1].node;
     // For if-blocks, append to the last branch's children
-    if (
-      top.type === 'macro' &&
-      top.branches &&
-      top.branches.length > 0
-    ) {
+    if (top.type === 'macro' && top.branches && top.branches.length > 0) {
       return top.branches[top.branches.length - 1].children;
     }
     return top.children;
@@ -204,7 +200,8 @@ export function buildAST(tokens: Token[]): ASTNode[] {
         // Handle branch macros (elseif/else, case/default, next)
         if (BRANCH_PARENT[token.name]) {
           const expectedParent = BRANCH_PARENT[token.name];
-          const topNode = stack.length > 0 ? stack[stack.length - 1].node : null;
+          const topNode =
+            stack.length > 0 ? stack[stack.length - 1].node : null;
           if (
             !topNode ||
             topNode.type !== 'macro' ||

package/src/markup/markdown.ts

@@ -1,8 +1,5 @@
 import { micromark } from 'micromark';
-import {
-  gfmTable,
-  gfmTableHtml,
-} from 'micromark-extension-gfm-table';
+import { gfmTable, gfmTableHtml } from 'micromark-extension-gfm-table';
 import {
   gfmStrikethrough,
   gfmStrikethroughHtml,

package/src/markup/render.tsx

@@ -33,6 +33,7 @@ import { Stop } from '../components/macros/Stop';
 import { Type } from '../components/macros/Type';
 import { Widget } from '../components/macros/Widget';
 import { Computed } from '../components/macros/Computed';
+import { Meter } from '../components/macros/Meter';
 import { getWidget } from '../widgets/widget-registry';
 import { getMacro } from '../registry';
 import { markdownToHtml } from './markdown';
@@ -119,6 +120,16 @@ function renderMacro(node: MacroNode, key: number) {
         />
       );
 
+    case 'meter':
+      return (
+        <Meter
+          key={key}
+          rawArgs={node.rawArgs}
+          className={node.className}
+          id={node.id}
+        />
+      );
+
     case 'if':
       return (
         <If
@@ -371,9 +382,7 @@ function renderMacro(node: MacroNode, key: number) {
       );
 
     case 'stop':
-      return (
-        <Stop key={key} />
-      );
+      return <Stop key={key} />;
 
     case 'type':
       return (
@@ -487,9 +496,7 @@ function renderSingleNode(
  * Used for inline containers (button labels, link text) where block-level
  * markdown (lists, headers) would misinterpret content like "-" or "+".
  */
-export function renderInlineNodes(
-  nodes: ASTNode[],
-): preact.ComponentChildren {
+export function renderInlineNodes(nodes: ASTNode[]): preact.ComponentChildren {
   if (nodes.length === 0) return null;
   return nodes.map((node, i) => renderSingleNode(node, i));
 }