@rohal12/spindle 0.1.0

package/src/components/macros/Computed.tsx

@@ -0,0 +1,100 @@
+import { useLayoutEffect } from 'preact/hooks';
+import { useContext } from 'preact/hooks';
+import { useStoryStore } from '../../store';
+import { evaluate } from '../../expression';
+import { LocalsContext } from '../../markup/render';
+
+interface ComputedProps {
+  rawArgs: string;
+}
+
+function parseComputedArgs(rawArgs: string): { target: string; expr: string } {
+  const trimmed = rawArgs.trim();
+
+  // Find the first '=' that isn't part of '==' or '!='
+  let depth = 0;
+  for (let i = 0; i < trimmed.length; i++) {
+    const ch = trimmed[i];
+    if (ch === '(' || ch === '[' || ch === '{') depth++;
+    else if (ch === ')' || ch === ']' || ch === '}') depth--;
+    else if (ch === '=' && depth === 0) {
+      if (trimmed[i + 1] === '=') {
+        i++;
+        continue;
+      }
+      if (i > 0 && trimmed[i - 1] === '!') continue;
+
+      const target = trimmed.slice(0, i).trim();
+      const expr = trimmed.slice(i + 1).trim();
+
+      if (!target.match(/^[$_]\w+$/)) {
+        throw new Error(
+          `{computed}: target must be $name or _name, got "${target}"`,
+        );
+      }
+
+      return { target, expr };
+    }
+  }
+
+  throw new Error(
+    `{computed}: expected "target = expression", got "${rawArgs}"`,
+  );
+}
+
+function valuesEqual(a: unknown, b: unknown): boolean {
+  if (Object.is(a, b)) return true;
+  if (
+    typeof a === 'object' &&
+    a !== null &&
+    typeof b === 'object' &&
+    b !== null
+  ) {
+    return JSON.stringify(a) === JSON.stringify(b);
+  }
+  return false;
+}
+
+export function Computed({ rawArgs }: ComputedProps) {
+  // Subscribe to trigger re-renders when store changes
+  useStoryStore((s) => s.variables);
+  useStoryStore((s) => s.temporary);
+  const locals = useContext(LocalsContext);
+
+  const { target, expr } = parseComputedArgs(rawArgs);
+  const isTemp = target.startsWith('_');
+  const name = target.slice(1);
+
+  // Evaluate in useLayoutEffect so preceding {set} effects have already run
+  useLayoutEffect(() => {
+    const state = useStoryStore.getState();
+
+    // Merge locals from for-loops
+    const mergedVars = { ...state.variables };
+    const mergedTemps = { ...state.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;
+    }
+
+    let newValue: unknown;
+    try {
+      newValue = evaluate(expr, mergedVars, mergedTemps);
+    } catch (err) {
+      console.error(`spindle: Error in {computed ${rawArgs}}:`, err);
+      return;
+    }
+
+    const current = isTemp ? state.temporary[name] : state.variables[name];
+
+    if (!valuesEqual(current, newValue)) {
+      if (isTemp) {
+        state.setTemporary(name, newValue);
+      } else {
+        state.setVariable(name, newValue);
+      }
+    }
+  });
+
+  return null;
+}

package/src/components/macros/Cycle.tsx

@@ -0,0 +1,39 @@
+import { useStoryStore } from '../../store';
+import { extractOptions } from './option-utils';
+import type { ASTNode } from '../../markup/ast';
+
+interface CycleProps {
+  rawArgs: string;
+  children: ASTNode[];
+  className?: string;
+  id?: string;
+}
+
+export function Cycle({ rawArgs, children, className, id }: CycleProps) {
+  const varName = rawArgs.trim().replace(/["']/g, '');
+  const name = varName.startsWith('$') ? varName.slice(1) : varName;
+
+  const value = useStoryStore((s) => s.variables[name]);
+  const setVariable = useStoryStore((s) => s.setVariable);
+
+  const options = extractOptions(children);
+
+  const handleClick = () => {
+    if (options.length === 0) return;
+    const currentIndex = options.indexOf(String(value));
+    const nextIndex = (currentIndex + 1) % options.length;
+    setVariable(name, options[nextIndex]);
+  };
+
+  const cls = className ? `macro-cycle ${className}` : 'macro-cycle';
+
+  return (
+    <button
+      id={id}
+      class={cls}
+      onClick={handleClick}
+    >
+      {value == null ? (options[0] || '') : String(value)}
+    </button>
+  );
+}

package/src/components/macros/Do.tsx

@@ -0,0 +1,46 @@
+import { useLayoutEffect } from 'preact/hooks';
+import { useStoryStore } from '../../store';
+import { execute } from '../../expression';
+import type { ASTNode } from '../../markup/ast';
+
+interface DoProps {
+  children: ASTNode[];
+}
+
+/**
+ * Concatenate text children into a single JS string for execution.
+ */
+function collectText(nodes: ASTNode[]): string {
+  return nodes.map((n) => (n.type === 'text' ? n.value : '')).join('');
+}
+
+export function Do({ children }: DoProps) {
+  const code = collectText(children);
+
+  useLayoutEffect(() => {
+    const state = useStoryStore.getState();
+    const vars = { ...state.variables };
+    const temps = { ...state.temporary };
+
+    try {
+      execute(code, vars, temps);
+    } catch (err) {
+      console.error(`spindle: Error in {do}:`, err);
+      return;
+    }
+
+    // Diff and apply
+    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]);
+      }
+    }
+  }, []);
+
+  return null;
+}

package/src/components/macros/For.tsx

@@ -0,0 +1,113 @@
+import { useStoryStore } from '../../store';
+import { useContext } from 'preact/hooks';
+import { evaluate } from '../../expression';
+import { LocalsContext } from '../../markup/render';
+import { renderNodes } from '../../markup/render';
+import type { ASTNode } from '../../markup/ast';
+
+interface ForProps {
+  rawArgs: string;
+  children: ASTNode[];
+  className?: string;
+  id?: string;
+}
+
+/**
+ * Parse for-loop args: "$item, $i of $list" or "$item of $list"
+ */
+function parseForArgs(rawArgs: string): {
+  itemVar: string;
+  indexVar: string | null;
+  listExpr: string;
+} {
+  const ofIdx = rawArgs.indexOf(' of ');
+  if (ofIdx === -1) {
+    throw new Error(`{for} requires "of" keyword: {for ${rawArgs}}`);
+  }
+
+  const varsPart = rawArgs.slice(0, ofIdx).trim();
+  const listExpr = rawArgs.slice(ofIdx + 4).trim();
+
+  const vars = varsPart.split(',').map((v) => v.trim());
+  const itemVar = vars[0];
+  const indexVar = vars.length > 1 ? vars[1] : null;
+
+  return { itemVar, indexVar, listExpr };
+}
+
+export function For({ rawArgs, children, className, id }: ForProps) {
+  const variables = useStoryStore((s) => s.variables);
+  const temporary = useStoryStore((s) => s.temporary);
+  const parentLocals = useContext(LocalsContext);
+
+  // Merge parent locals for expression evaluation
+  const mergedVars = { ...variables };
+  const mergedTemps = { ...temporary };
+  for (const [key, val] of Object.entries(parentLocals)) {
+    if (key.startsWith('$')) mergedVars[key.slice(1)] = val;
+    else if (key.startsWith('_')) mergedTemps[key.slice(1)] = val;
+  }
+
+  let parsed: ReturnType<typeof parseForArgs>;
+  try {
+    parsed = parseForArgs(rawArgs);
+  } catch (err) {
+    return (
+      <span
+        class="error"
+        title={String(err)}
+      >
+        {`{for error: ${(err as Error).message}}`}
+      </span>
+    );
+  }
+
+  const { itemVar, indexVar, listExpr } = parsed;
+
+  let list: unknown[];
+  try {
+    const result = evaluate(listExpr, mergedVars, mergedTemps);
+    if (!Array.isArray(result)) {
+      return (
+        <span class="error">
+          {`{for error: expression did not evaluate to an array}`}
+        </span>
+      );
+    }
+    list = result;
+  } catch (err) {
+    return (
+      <span
+        class="error"
+        title={String(err)}
+      >
+        {`{for error: ${(err as Error).message}}`}
+      </span>
+    );
+  }
+
+  const content = list.map((item, i) => {
+    const locals = { ...parentLocals, [itemVar]: item };
+    if (indexVar) locals[indexVar] = i;
+
+    return (
+      <LocalsContext.Provider
+        key={i}
+        value={locals}
+      >
+        {renderNodes(children)}
+      </LocalsContext.Provider>
+    );
+  });
+
+  if (className || id)
+    return (
+      <span
+        id={id}
+        class={className}
+      >
+        {content}
+      </span>
+    );
+  return <>{content}</>;
+}

package/src/components/macros/Forward.tsx

@@ -0,0 +1,25 @@
+import { useStoryStore } from '../../store';
+
+interface ForwardProps {
+  className?: string;
+  id?: string;
+}
+
+export function Forward({ className, id }: ForwardProps) {
+  const goForward = useStoryStore((s) => s.goForward);
+  const canGoForward = useStoryStore(
+    (s) => s.historyIndex < s.history.length - 1,
+  );
+  const cls = className ? `menubar-button ${className}` : 'menubar-button';
+
+  return (
+    <button
+      id={id}
+      class={cls}
+      onClick={goForward}
+      disabled={!canGoForward}
+    >
+      Forward →
+    </button>
+  );
+}

package/src/components/macros/Goto.tsx

@@ -0,0 +1,23 @@
+import { useLayoutEffect } from 'preact/hooks';
+import { useStoryStore } from '../../store';
+import { evaluate } from '../../expression';
+
+interface GotoProps {
+  rawArgs: string;
+}
+
+export function Goto({ rawArgs }: GotoProps) {
+  useLayoutEffect(() => {
+    const state = useStoryStore.getState();
+    let passageName: string;
+    try {
+      const result = evaluate(rawArgs, state.variables, state.temporary);
+      passageName = String(result);
+    } catch {
+      passageName = rawArgs.replace(/^["']|["']$/g, '');
+    }
+    state.navigate(passageName);
+  }, []);
+
+  return null;
+}

package/src/components/macros/If.tsx

@@ -0,0 +1,63 @@
+import { useStoryStore } from '../../store';
+import { useContext } from 'preact/hooks';
+import { evaluate } from '../../expression';
+import { LocalsContext } from '../../markup/render';
+import { renderNodes } from '../../markup/render';
+import type { Branch } from '../../markup/ast';
+
+interface IfProps {
+  branches: Branch[];
+}
+
+export function If({ branches }: IfProps) {
+  const variables = useStoryStore((s) => s.variables);
+  const temporary = useStoryStore((s) => s.temporary);
+  const locals = useContext(LocalsContext);
+
+  // Merge locals 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;
+  }
+
+  function renderBranch(branch: Branch) {
+    const children = renderNodes(branch.children);
+    if (branch.className || branch.id)
+      return (
+        <span
+          id={branch.id}
+          class={branch.className}
+        >
+          {children}
+        </span>
+      );
+    return <>{children}</>;
+  }
+
+  for (const branch of branches) {
+    // {else} has empty rawArgs — always truthy
+    if (branch.rawArgs === '') {
+      return renderBranch(branch);
+    }
+
+    try {
+      const result = evaluate(branch.rawArgs, mergedVars, mergedTemps);
+      if (result) {
+        return renderBranch(branch);
+      }
+    } catch (err) {
+      return (
+        <span
+          class="error"
+          title={String(err)}
+        >
+          {`{if error: ${(err as Error).message}}`}
+        </span>
+      );
+    }
+  }
+
+  return null;
+}

package/src/components/macros/Include.tsx

@@ -0,0 +1,52 @@
+import { useStoryStore } from '../../store';
+import { evaluate } from '../../expression';
+import { tokenize } from '../../markup/tokenizer';
+import { buildAST } from '../../markup/ast';
+import { renderNodes } from '../../markup/render';
+
+interface IncludeProps {
+  rawArgs: string;
+  className?: string;
+  id?: string;
+}
+
+export function Include({ rawArgs, className, id }: IncludeProps) {
+  const storyData = useStoryStore((s) => s.storyData);
+  const variables = useStoryStore((s) => s.variables);
+  const temporary = useStoryStore((s) => s.temporary);
+
+  if (!storyData) return null;
+
+  let passageName: string;
+  try {
+    const result = evaluate(rawArgs, variables, temporary);
+    passageName = String(result);
+  } catch {
+    passageName = rawArgs.replace(/^["']|["']$/g, '');
+  }
+
+  const passage = storyData.passages.get(passageName);
+  if (passage) {
+    useStoryStore.getState().trackRender(passageName);
+  }
+  if (!passage) {
+    return (
+      <span class="error">{`{include: passage "${passageName}" not found}`}</span>
+    );
+  }
+
+  const tokens = tokenize(passage.content);
+  const ast = buildAST(tokens);
+  const content = renderNodes(ast);
+
+  if (className || id)
+    return (
+      <span
+        id={id}
+        class={className}
+      >
+        {content}
+      </span>
+    );
+  return <>{content}</>;
+}

package/src/components/macros/Listbox.tsx

@@ -0,0 +1,42 @@
+import { useStoryStore } from '../../store';
+import { extractOptions } from './option-utils';
+import type { ASTNode } from '../../markup/ast';
+
+interface ListboxProps {
+  rawArgs: string;
+  children: ASTNode[];
+  className?: string;
+  id?: string;
+}
+
+export function Listbox({ rawArgs, children, className, id }: ListboxProps) {
+  const varName = rawArgs.trim().replace(/["']/g, '');
+  const name = varName.startsWith('$') ? varName.slice(1) : varName;
+
+  const value = useStoryStore((s) => s.variables[name]);
+  const setVariable = useStoryStore((s) => s.setVariable);
+
+  const options = extractOptions(children);
+
+  const cls = className ? `macro-listbox ${className}` : 'macro-listbox';
+
+  return (
+    <select
+      id={id}
+      class={cls}
+      value={value == null ? '' : String(value)}
+      onChange={(e) =>
+        setVariable(name, (e.target as HTMLSelectElement).value)
+      }
+    >
+      {options.map((opt) => (
+        <option
+          key={opt}
+          value={opt}
+        >
+          {opt}
+        </option>
+      ))}
+    </select>
+  );
+}

package/src/components/macros/MacroLink.tsx

@@ -0,0 +1,107 @@
+import { useStoryStore } from '../../store';
+import { execute } from '../../expression';
+import type { ASTNode } from '../../markup/ast';
+
+interface MacroLinkProps {
+  rawArgs: string;
+  children: ASTNode[];
+  className?: string;
+  id?: string;
+}
+
+function parseArgs(rawArgs: string): {
+  display: string;
+  passage: string | null;
+} {
+  // {link "text" "Passage"} or {link "text"}
+  const parts: string[] = [];
+  const re = /["']([^"']+)["']/g;
+  let m;
+  while ((m = re.exec(rawArgs)) !== null) {
+    parts.push(m[1]);
+  }
+  if (parts.length >= 2) {
+    return { display: parts[0], passage: parts[1] };
+  }
+  if (parts.length === 1) {
+    return { display: parts[0], passage: null };
+  }
+  // Fallback: treat entire rawArgs as display text
+  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('');
+}
+
+/**
+ * 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);
+
+  for (const node of children) {
+    if (node.type !== 'macro') continue;
+    if (node.name === 'set') {
+      try {
+        execute(node.rawArgs, vars, temps);
+      } catch (err) {
+        console.error(`spindle: Error in {link} child {set}:`, err);
+      }
+    } else if (node.name === 'do') {
+      const code = collectText(node.children);
+      try {
+        execute(code, vars, temps);
+      } catch (err) {
+        console.error(`spindle: Error in {link} child {do}:`, err);
+      }
+    }
+  }
+
+  // Apply changes
+  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]);
+    }
+  }
+}
+
+export function MacroLink({
+  rawArgs,
+  children,
+  className,
+  id,
+}: MacroLinkProps) {
+  const { display, passage } = parseArgs(rawArgs);
+
+  const handleClick = (e: Event) => {
+    e.preventDefault();
+    executeChildren(children);
+    if (passage) {
+      useStoryStore.getState().navigate(passage);
+    }
+  };
+
+  const cls = className ? `macro-link ${className}` : 'macro-link';
+
+  return (
+    <a
+      id={id}
+      class={cls}
+      href="#"
+      onClick={handleClick}
+    >
+      {display}
+    </a>
+  );
+}

package/src/components/macros/Numberbox.tsx

@@ -0,0 +1,43 @@
+import { useStoryStore } from '../../store';
+
+interface NumberboxProps {
+  rawArgs: string;
+  className?: string;
+  id?: string;
+}
+
+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 };
+}
+
+export function Numberbox({ rawArgs, className, id }: NumberboxProps) {
+  const { varName, placeholder } = parseArgs(rawArgs);
+  const name = varName.startsWith('$') ? varName.slice(1) : varName;
+
+  const value = useStoryStore((s) => s.variables[name]);
+  const setVariable = useStoryStore((s) => s.setVariable);
+
+  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));
+      }}
+    />
+  );
+}