@glyphlab/scenario-react 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Subtubes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,28 @@
-# Temporary Holding Version
+# @glyphlab/scenario-react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The scenario player for React: the state of a run, playback controls, the trace and state panels, and a player that puts them together. No comments and nothing of the app. Peer dependencies: `react`, `zustand`, `@glyphlab/scenario-core`.
+
+```tsx
+import { createSimulationStore, ScenarioPlayer, SimulationContext } from '@glyphlab/scenario-react'
+import '@glyphlab/scenario-react/theme.css'     // default colours; skip it if the host defines the variables itself
+import '@glyphlab/scenario-react/scenario.css'
+import { highlightsAt } from '@glyphlab/scenario-core'
+
+const store = createSimulationStore(() => ({ nodes, edges }))   // where the diagram comes from, asked at every run
+store.getState().registerScenarios(scenarios)
+store.getState().openPanel()
+
+<SimulationContext.Provider value={store}>
+  <ScenarioPlayer />
+</SimulationContext.Provider>
+
+// Light the path up on a diagram (for example a DiagramViewer's highlights) as the run plays:
+store.subscribe((s) => s.trace && setHighlights(highlightsAt(s.trace, s.cursor)))
+```
+
+- **One store per player.** Two players on a page do not share a diagram, scenarios or timer. A host with a single player can call `setDefaultSimulationStore(store)` once instead of using a provider.
+- **Slots** on `ScenarioPlayer`'s `config`: `trace` (your own list of steps), `footer`, `onDelete(scenario)` (shows a delete button; ask for confirmation and call `removeScenario` yourself), `height` and `resizer`. `TraceList` takes `stepActions`, `stepExtras` and `emptyHint`, which is how the Glyph app adds comments to each step.
+- **Pieces on their own**: `PlaybackControls`, `StatePanel` and `TraceList` can be placed anywhere inside a provider.
+- **Theme**: CSS variables only (`theme.css` lists them). The few shared controls it uses (`.icon-btn`, `.chip`) are declared at no specificity, so a host's own styles win.
+
+In the Glyph app, `src/simulation/store.ts` makes the open design's store and `components/ScenarioPlayer.tsx` / `TraceList.tsx` add the app's comments, review bar and confirmed delete.

package/index.d.ts

@@ -0,0 +1,80 @@
+import * as zustand from 'zustand';
+import { Scenario, Values, Trace, ScenarioIssue, GraphModel, TraceStep } from '@glyphlab/scenario-core';
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type PlayStatus = 'idle' | 'playing' | 'paused' | 'finished';
+interface RunOptions {
+    autoplay?: boolean;
+    seek?: number;
+    report?: boolean;
+}
+interface SimulationState {
+    scenarios: Scenario[];
+    activeId: string | null;
+    input: Values;
+    trace: Trace | null;
+    cursor: number;
+    status: PlayStatus;
+    stepMs: number;
+    panelOpen: boolean;
+    runId: number;
+    reportable: boolean;
+    focusMode: boolean;
+    issues: ScenarioIssue[];
+    issuesHidden: boolean;
+    setIssuesHidden: (hidden: boolean) => void;
+    refreshIssues: () => void;
+    registerScenarios: (scenarios: Scenario[]) => void;
+    removeScenario: (id: string) => void;
+    addScenario: (scenario: Scenario) => void;
+    replaceScenario: (scenario: Scenario) => void;
+    openPanel: () => void;
+    closePanel: () => void;
+    setFocusMode: (on: boolean) => void;
+    selectScenario: (id: string) => void;
+    run: (options?: RunOptions) => void;
+    runWith: (scenarioId: string, input: Values, options?: RunOptions) => void;
+    play: () => void;
+    pause: () => void;
+    stepForward: () => void;
+    stepBack: () => void;
+    seek: (index: number) => void;
+    reset: () => void;
+    setStepMs: (ms: number) => void;
+}
+declare function findScenario(scenarios: Scenario[], id: string | null): Scenario | undefined;
+declare function createSimulationStore(graph: () => GraphModel): zustand.UseBoundStore<zustand.StoreApi<SimulationState>>;
+type SimulationStore = ReturnType<typeof createSimulationStore>;
+
+declare const SimulationContext: react.Context<zustand.UseBoundStore<zustand.StoreApi<SimulationState>> | null>;
+declare function setDefaultSimulationStore(store: SimulationStore | null): void;
+declare function useSimStore(): SimulationStore;
+declare function useSim<T>(selector: (state: ReturnType<SimulationStore['getState']>) => T): T;
+
+declare function PlaybackControls(): react.JSX.Element;
+
+declare function StatePanel(): react.JSX.Element;
+
+interface TraceListProps {
+    stepActions?: (step: TraceStep, trace: Trace) => ReactNode;
+    stepExtras?: (step: TraceStep, trace: Trace) => ReactNode;
+    emptyHint?: ReactNode;
+}
+declare function TraceList({ stepActions, stepExtras, emptyHint }?: TraceListProps): react.JSX.Element;
+
+interface ScenarioPlayerConfig {
+    height?: number;
+    resizer?: ReactNode;
+    trace?: ReactNode;
+    footer?: ReactNode;
+    onDelete?: (scenario: Scenario) => void;
+    closable?: boolean;
+    statePanel?: boolean;
+}
+declare function ScenarioPlayer({ config }: {
+    config?: ScenarioPlayerConfig;
+}): react.JSX.Element | null;
+
+export { PlaybackControls, ScenarioPlayer, SimulationContext, StatePanel, TraceList, createSimulationStore, findScenario, setDefaultSimulationStore, useSim, useSimStore };
+export type { PlayStatus, RunOptions, ScenarioPlayerConfig, SimulationState, SimulationStore, TraceListProps };

package/index.js

@@ -0,0 +1,417 @@
+"use client";
+
+// packages/scenario-react/src/store.ts
+import { create } from "zustand";
+import { defaultInput, runScenario, validateScenario } from "@glyphlab/scenario-core";
+function findScenario(scenarios, id) {
+  return scenarios.find((s) => s.id === id);
+}
+function createSimulationStore(graph) {
+  return create()((set, get) => {
+    let timer;
+    const stopTimer = () => {
+      if (timer !== void 0) clearTimeout(timer);
+      timer = void 0;
+    };
+    const schedule = () => {
+      stopTimer();
+      timer = setTimeout(() => {
+        const { trace, cursor, status } = get();
+        if (!trace || status !== "playing") return;
+        if (cursor >= trace.steps.length - 1) {
+          set({ status: "finished" });
+          return;
+        }
+        const next = cursor + 1;
+        set({ cursor: next, status: next >= trace.steps.length - 1 ? "finished" : "playing" });
+        if (get().status === "playing") schedule();
+      }, get().stepMs);
+    };
+    const clearRun = () => {
+      stopTimer();
+      return { trace: null, cursor: -1, status: "idle" };
+    };
+    return {
+      scenarios: [],
+      activeId: null,
+      input: {},
+      trace: null,
+      cursor: -1,
+      status: "idle",
+      stepMs: 1100,
+      panelOpen: false,
+      runId: 0,
+      reportable: false,
+      focusMode: true,
+      issues: [],
+      issuesHidden: false,
+      setIssuesHidden: (issuesHidden) => set({ issuesHidden }),
+      refreshIssues: () => {
+        const scenario = findScenario(get().scenarios, get().activeId);
+        if (!scenario) return;
+        const issues = validateScenario(scenario, graph());
+        if (JSON.stringify(issues) !== JSON.stringify(get().issues)) set({ issues, issuesHidden: issues.length === 0 ? get().issuesHidden : false });
+      },
+      registerScenarios: (scenarios) => {
+        set({ scenarios });
+        const { activeId } = get();
+        if (activeId && !findScenario(scenarios, activeId)) set({ activeId: null, input: {}, issues: [], ...clearRun() });
+        if (!get().activeId && scenarios.length > 0) get().selectScenario(scenarios[0].id);
+      },
+      addScenario: (scenario) => {
+        set((s) => ({ scenarios: [...s.scenarios, scenario] }));
+        if (!get().activeId) get().selectScenario(scenario.id);
+      },
+      replaceScenario: (scenario) => {
+        const { scenarios, activeId } = get();
+        if (!scenarios.some((s) => s.id === scenario.id)) return;
+        set({ scenarios: scenarios.map((s) => s.id === scenario.id ? scenario : s) });
+        if (activeId === scenario.id) get().selectScenario(scenario.id);
+      },
+      removeScenario: (id) => {
+        const { scenarios, activeId } = get();
+        const index = scenarios.findIndex((s) => s.id === id);
+        if (index < 0) return;
+        const rest = scenarios.filter((s) => s.id !== id);
+        set({ scenarios: rest });
+        if (activeId !== id) return;
+        const next = rest[Math.min(index, rest.length - 1)];
+        if (next) get().selectScenario(next.id);
+        else set({ activeId: null, input: {}, issues: [], ...clearRun() });
+      },
+      openPanel: () => set({ panelOpen: true }),
+      setFocusMode: (focusMode) => set({ focusMode }),
+      closePanel: () => {
+        stopTimer();
+        set((s) => ({ panelOpen: false, status: s.status === "playing" ? "paused" : s.status }));
+      },
+      selectScenario: (id) => {
+        const scenario = findScenario(get().scenarios, id);
+        if (!scenario) return;
+        set({
+          activeId: id,
+          input: defaultInput(scenario),
+          issues: validateScenario(scenario, graph()),
+          issuesHidden: false,
+          ...clearRun()
+        });
+      },
+      run: ({ autoplay = true, seek = 0, report = true } = {}) => {
+        const { scenarios, activeId, input } = get();
+        const scenario = findScenario(scenarios, activeId);
+        if (!scenario) return;
+        const trace = runScenario(graph(), scenario, input);
+        const cursor = Math.min(Math.max(seek, 0), trace.steps.length - 1);
+        const atEnd = cursor >= trace.steps.length - 1;
+        stopTimer();
+        set((s) => ({
+          trace,
+          cursor,
+          status: atEnd ? "finished" : autoplay ? "playing" : "paused",
+          runId: s.runId + 1,
+          reportable: autoplay && seek === 0 && report,
+          issues: validateScenario(scenario, graph()),
+          panelOpen: true
+        }));
+        if (get().status === "playing") schedule();
+      },
+      runWith: (scenarioId, input, options) => {
+        const scenario = findScenario(get().scenarios, scenarioId);
+        if (!scenario) return;
+        stopTimer();
+        set({ activeId: scenarioId, input: { ...defaultInput(scenario), ...input }, panelOpen: true });
+        get().run(options);
+      },
+      play: () => {
+        const { trace, cursor } = get();
+        if (!trace) return get().run();
+        if (cursor >= trace.steps.length - 1) set({ cursor: 0 });
+        set({ status: "playing" });
+        schedule();
+      },
+      pause: () => {
+        stopTimer();
+        set((s) => ({ status: s.status === "playing" ? "paused" : s.status }));
+      },
+      stepForward: () => {
+        const { trace, cursor } = get();
+        if (!trace) return get().run({ autoplay: false });
+        stopTimer();
+        const next = Math.min(cursor + 1, trace.steps.length - 1);
+        set({ cursor: next, status: next >= trace.steps.length - 1 ? "finished" : "paused" });
+      },
+      stepBack: () => {
+        const { trace, cursor } = get();
+        if (!trace) return;
+        stopTimer();
+        set({ cursor: Math.max(cursor - 1, 0), status: "paused" });
+      },
+      seek: (index) => {
+        const { trace } = get();
+        if (!trace) return;
+        stopTimer();
+        const cursor = Math.min(Math.max(index, 0), trace.steps.length - 1);
+        set({ cursor, status: cursor >= trace.steps.length - 1 ? "finished" : "paused" });
+      },
+      reset: () => {
+        const { trace } = get();
+        stopTimer();
+        if (trace) set({ cursor: 0, status: "paused" });
+      },
+      setStepMs: (ms) => {
+        set({ stepMs: ms });
+        if (get().status === "playing") schedule();
+      }
+    };
+  });
+}
+
+// packages/scenario-react/src/context.ts
+import { createContext, useContext } from "react";
+import { useStore } from "zustand";
+var SimulationContext = createContext(null);
+var fallback = null;
+function setDefaultSimulationStore(store) {
+  fallback = store;
+}
+function useSimStore() {
+  const store = useContext(SimulationContext) ?? fallback;
+  if (!store) throw new Error("No simulation store: wrap the player in <SimulationContext.Provider value={createSimulationStore(...)}> or call setDefaultSimulationStore.");
+  return store;
+}
+function useSim(selector) {
+  return useStore(useSimStore(), selector);
+}
+
+// packages/scenario-react/src/PlaybackControls.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SPEEDS = [
+  { label: "0.5\xD7", ms: 2200 },
+  { label: "1\xD7", ms: 1100 },
+  { label: "2\xD7", ms: 550 },
+  { label: "4\xD7", ms: 275 }
+];
+function Icon({ d }) {
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d }) });
+}
+function PlaybackControls() {
+  const trace = useSim((s) => s.trace);
+  const cursor = useSim((s) => s.cursor);
+  const status = useSim((s) => s.status);
+  const stepMs = useSim((s) => s.stepMs);
+  const { play, pause, stepForward, stepBack, seek, reset, setStepMs } = useSimStore().getState();
+  const total = trace?.steps.length ?? 0;
+  const playing = status === "playing";
+  return /* @__PURE__ */ jsxs("div", { className: "sim-controls", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sim-buttons", role: "group", "aria-label": "Playback", children: [
+      /* @__PURE__ */ jsx("button", { className: "icon-btn", type: "button", onClick: reset, disabled: !trace, "aria-label": "Back to the start", title: "Back to the start", children: /* @__PURE__ */ jsx(Icon, { d: "M6 5v14M19 5 9 12l10 7z" }) }),
+      /* @__PURE__ */ jsx("button", { className: "icon-btn", type: "button", onClick: stepBack, disabled: !trace || cursor <= 0, "aria-label": "Previous step", title: "Previous step", children: /* @__PURE__ */ jsx(Icon, { d: "m15 18-6-6 6-6" }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "icon-btn sim-play",
+          type: "button",
+          onClick: playing ? pause : play,
+          "aria-label": playing ? "Pause" : "Play",
+          title: playing ? "Pause" : "Play",
+          children: playing ? /* @__PURE__ */ jsx(Icon, { d: "M8 5v14M16 5v14" }) : /* @__PURE__ */ jsx(Icon, { d: "M7 4v16l13-8z" })
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { className: "icon-btn", type: "button", onClick: stepForward, disabled: trace !== null && cursor >= total - 1, "aria-label": "Next step", title: "Next step", children: /* @__PURE__ */ jsx(Icon, { d: "m9 18 6-6-6-6" }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: "sim-progress",
+        type: "range",
+        min: 0,
+        max: Math.max(total - 1, 0),
+        value: Math.max(cursor, 0),
+        disabled: !trace,
+        onChange: (e) => seek(Number(e.target.value)),
+        "aria-label": "Progress"
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "sim-count", children: trace ? `Step ${cursor + 1} of ${total}` : "Not started" }),
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        className: "sim-speed",
+        value: stepMs,
+        onChange: (e) => setStepMs(Number(e.target.value)),
+        "aria-label": "Speed",
+        children: SPEEDS.map((s) => /* @__PURE__ */ jsx("option", { value: s.ms, children: s.label }, s.ms))
+      }
+    )
+  ] });
+}
+
+// packages/scenario-react/src/StatePanel.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var OUTCOME_LABEL = {
+  success: "Succeeded",
+  failure: "Failed",
+  blocked: "Blocked",
+  stopped: "Stopped"
+};
+function show(value) {
+  return typeof value === "boolean" ? value ? "on" : "off" : String(value);
+}
+function StatePanel() {
+  const trace = useSim((s) => s.trace);
+  const cursor = useSim((s) => s.cursor);
+  const scenario = useSim((s) => s.scenarios.find((x) => x.id === s.activeId));
+  const pendingInput = useSim((s) => s.input);
+  const input = trace?.input ?? pendingInput;
+  const step = trace?.steps[cursor];
+  const labels = new Map(scenario?.inputs.map((f) => [f.name, f.label]));
+  const changed = new Set(step?.changes.map((c) => c.key));
+  const finished = step?.kind === "end" && step.outcome;
+  return /* @__PURE__ */ jsxs2("div", { className: "sim-state", children: [
+    finished && step.outcome && /* @__PURE__ */ jsxs2("div", { className: `sim-outcome outcome-${step.outcome}`, role: "status", children: [
+      /* @__PURE__ */ jsx2("strong", { children: OUTCOME_LABEL[step.outcome] }),
+      /* @__PURE__ */ jsx2("p", { children: step.title })
+    ] }),
+    /* @__PURE__ */ jsx2("h3", { children: "Input" }),
+    Object.keys(input).length > 0 ? /* @__PURE__ */ jsx2("dl", { children: Object.entries(input).map(([key, value]) => /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsx2("dt", { children: labels.get(key) ?? key }),
+      /* @__PURE__ */ jsx2("dd", { children: show(value) })
+    ] }, key)) }) : /* @__PURE__ */ jsx2("p", { className: "sim-muted", children: "Nothing yet." }),
+    /* @__PURE__ */ jsx2("h3", { children: "State" }),
+    step && Object.keys(step.state).length > 0 ? /* @__PURE__ */ jsx2("dl", { children: Object.entries(step.state).map(([key, value]) => /* @__PURE__ */ jsxs2("div", { className: changed.has(key) ? "changed" : "", children: [
+      /* @__PURE__ */ jsx2("dt", { children: /* @__PURE__ */ jsx2("code", { children: key }) }),
+      /* @__PURE__ */ jsx2("dd", { children: show(value) })
+    ] }, key)) }) : /* @__PURE__ */ jsx2("p", { className: "sim-muted", children: "Empty." })
+  ] });
+}
+
+// packages/scenario-react/src/TraceList.tsx
+import { useEffect, useRef } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var KIND_LABEL = { enter: "Step", call: "Call", end: "Result" };
+function show2(value) {
+  return value === void 0 ? "\u2205" : String(value);
+}
+function StepBody({ step }) {
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsxs3("div", { className: "sim-step-head", children: [
+      /* @__PURE__ */ jsx3("span", { className: `sim-kind kind-${step.kind}`, children: KIND_LABEL[step.kind] }),
+      /* @__PURE__ */ jsx3("strong", { children: step.nodeTitle })
+    ] }),
+    /* @__PURE__ */ jsx3("p", { className: "sim-step-title", children: step.title }),
+    step.detail && /* @__PURE__ */ jsx3("p", { className: "sim-step-detail", children: step.detail }),
+    step.changes.length > 0 && /* @__PURE__ */ jsx3("ul", { className: "sim-changes", "aria-label": "State changes", children: step.changes.map((c) => /* @__PURE__ */ jsxs3("li", { children: [
+      /* @__PURE__ */ jsx3("code", { children: c.key }),
+      /* @__PURE__ */ jsxs3("span", { children: [
+        c.from === void 0 ? "set to" : `${show2(c.from)} \u2192`,
+        " ",
+        /* @__PURE__ */ jsx3("b", { children: show2(c.to) })
+      ] }),
+      c.ai && /* @__PURE__ */ jsx3("span", { className: "chip ai", title: "Interpreted by the AI", children: "AI" })
+    ] }, c.key)) }),
+    step.decision && /* @__PURE__ */ jsx3("ul", { className: "sim-decision", "aria-label": "Branches", children: step.decision.options.map((o) => /* @__PURE__ */ jsxs3("li", { className: o.taken ? "taken" : "", children: [
+      o.taken ? "\u2713" : "\xB7",
+      " ",
+      o.label
+    ] }, o.label)) }),
+    step.warnings.map((w) => /* @__PURE__ */ jsx3("p", { className: "sim-warning", children: w }, w))
+  ] });
+}
+function TraceList({ stepActions, stepExtras, emptyHint } = {}) {
+  const trace = useSim((s) => s.trace);
+  const cursor = useSim((s) => s.cursor);
+  const seek = useSim((s) => s.seek);
+  const listRef = useRef(null);
+  useEffect(() => {
+    const list = listRef.current;
+    if (list) list.scrollTop = list.scrollHeight;
+  }, [cursor, trace]);
+  if (!trace) {
+    return /* @__PURE__ */ jsx3("p", { className: "sim-empty", children: emptyHint ?? /* @__PURE__ */ jsxs3(Fragment, { children: [
+      "Press ",
+      /* @__PURE__ */ jsx3("strong", { children: "Play" }),
+      " to run this scenario with its default input. The path lights up on the diagram as it plays, and every step is listed here."
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx3("ol", { className: "sim-steps", ref: listRef, "aria-label": "Trace", children: trace.steps.slice(0, cursor + 1).map((step) => {
+    const active = step.index === cursor;
+    const extras = stepExtras?.(step, trace) ?? null;
+    return /* @__PURE__ */ jsxs3("li", { className: `sim-step${active ? " active" : ""}${step.outcome ? ` outcome-${step.outcome}` : ""}`, children: [
+      /* @__PURE__ */ jsxs3("button", { className: "sim-step-main", type: "button", onClick: () => seek(step.index), "aria-current": active, children: [
+        /* @__PURE__ */ jsx3("span", { className: "sim-index", children: step.index + 1 }),
+        /* @__PURE__ */ jsx3("span", { className: "sim-step-content", children: /* @__PURE__ */ jsx3(StepBody, { step }) })
+      ] }),
+      stepActions?.(step, trace),
+      extras && /* @__PURE__ */ jsx3("div", { className: "sim-inline", children: extras })
+    ] }, step.index);
+  }) });
+}
+
+// packages/scenario-react/src/ScenarioPlayer.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var Close = ({ size }) => /* @__PURE__ */ jsx4("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M6 6l12 12M18 6 6 18" }) });
+function ScenarioPlayer({ config = {} }) {
+  const { height, resizer, trace, footer, onDelete, closable = true, statePanel = false } = config;
+  const store = useSimStore();
+  const open = useSim((s) => s.panelOpen);
+  const scenarios = useSim((s) => s.scenarios);
+  const activeId = useSim((s) => s.activeId);
+  const issues = useSim((s) => s.issues);
+  const focusMode = useSim((s) => s.focusMode);
+  const issuesHidden = useSim((s) => s.issuesHidden);
+  const { setFocusMode, selectScenario, closePanel, setIssuesHidden } = store.getState();
+  if (!open) return null;
+  const scenario = scenarios.find((s) => s.id === activeId);
+  return /* @__PURE__ */ jsxs4("section", { className: "sim-player", "aria-label": "Scenario player", style: height === void 0 ? void 0 : { height }, children: [
+    resizer,
+    /* @__PURE__ */ jsxs4("header", { className: "sim-head", children: [
+      /* @__PURE__ */ jsx4("h2", { children: "Scenario player" }),
+      scenarios.length > 0 ? /* @__PURE__ */ jsx4("select", { value: activeId ?? "", onChange: (e) => selectScenario(e.target.value), "aria-label": "Scenario", children: scenarios.map((s) => /* @__PURE__ */ jsx4("option", { value: s.id, children: s.title }, s.id)) }) : null,
+      scenario && onDelete && /* @__PURE__ */ jsx4("button", { className: "icon-btn small", type: "button", onClick: () => onDelete(scenario), "aria-label": "Delete scenario", title: "Delete this scenario from the design", children: /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6" }) }) }),
+      /* @__PURE__ */ jsx4("p", { className: "sim-desc", children: scenarios.length === 0 ? "No scenarios." : scenario?.description }),
+      issues.length > 0 && issuesHidden && /* @__PURE__ */ jsxs4("button", { className: "sim-problems-chip", type: "button", onClick: () => setIssuesHidden(false), title: "Show the problems with this scenario", children: [
+        issues.length,
+        " problem",
+        issues.length === 1 ? "" : "s"
+      ] }),
+      /* @__PURE__ */ jsxs4("label", { className: "sim-focus", title: "Fade the parts of the diagram this step does not involve", children: [
+        /* @__PURE__ */ jsx4("input", { type: "checkbox", checked: focusMode, onChange: (e) => setFocusMode(e.target.checked) }),
+        "Focus"
+      ] }),
+      closable && /* @__PURE__ */ jsx4("button", { className: "icon-btn", type: "button", onClick: closePanel, "aria-label": "Close scenario player", children: /* @__PURE__ */ jsx4(Close, { size: 16 }) })
+    ] }),
+    issues.length > 0 && !issuesHidden && /* @__PURE__ */ jsxs4("div", { className: "sim-problems", children: [
+      /* @__PURE__ */ jsxs4("header", { children: [
+        /* @__PURE__ */ jsxs4("strong", { children: [
+          issues.length,
+          " problem",
+          issues.length === 1 ? "" : "s",
+          " with this scenario"
+        ] }),
+        /* @__PURE__ */ jsx4("button", { className: "icon-btn small", type: "button", onClick: () => setIssuesHidden(true), "aria-label": "Close problems", children: /* @__PURE__ */ jsx4(Close, { size: 14 }) })
+      ] }),
+      /* @__PURE__ */ jsx4("ul", { className: "sim-issues", "aria-label": "Scenario problems", children: issues.map((issue, i) => /* @__PURE__ */ jsx4("li", { className: issue.severity, children: issue.message }, i)) })
+    ] }),
+    scenarios.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "sim-empty", role: "status", children: "Nothing to play." }) : /* @__PURE__ */ jsxs4("div", { className: statePanel ? "sim-grid has-side" : "sim-grid", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "sim-trace", children: [
+        /* @__PURE__ */ jsx4(PlaybackControls, {}),
+        trace ?? /* @__PURE__ */ jsx4(TraceList, {}),
+        footer
+      ] }),
+      statePanel && /* @__PURE__ */ jsx4("aside", { className: "sim-side", "aria-label": "State", children: /* @__PURE__ */ jsx4(StatePanel, {}) })
+    ] })
+  ] });
+}
+export {
+  PlaybackControls,
+  ScenarioPlayer,
+  SimulationContext,
+  StatePanel,
+  TraceList,
+  createSimulationStore,
+  findScenario,
+  setDefaultSimulationStore,
+  useSim,
+  useSimStore
+};
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/store.ts","../src/context.ts","../src/PlaybackControls.tsx","../src/StatePanel.tsx","../src/TraceList.tsx","../src/ScenarioPlayer.tsx"],"sourcesContent":["import { create } from 'zustand'\nimport { defaultInput, runScenario, validateScenario } from '@glyphlab/scenario-core'\nimport type { GraphModel, Scenario, ScenarioIssue, Trace, Values } from '@glyphlab/scenario-core'\n\nexport type PlayStatus = 'idle' | 'playing' | 'paused' | 'finished'\n\nexport interface RunOptions {\n  autoplay?: boolean\n  // Step to show first; later steps stay hidden until played or sought.\n  seek?: number\n  // Whether a finished run is reported to the host (the app posts it to the chat). Off when\n  // the run was started by something that already has the result, like an assistant's tool call.\n  report?: boolean\n}\n\nexport interface SimulationState {\n  scenarios: Scenario[]\n  activeId: string | null\n  input: Values\n  trace: Trace | null\n  // Index of the step currently shown; steps after it are not revealed yet.\n  cursor: number\n  status: PlayStatus\n  // Milliseconds each step stays on screen while playing.\n  stepMs: number\n  panelOpen: boolean\n  // Increments for every new run, so listeners can tell a new run from a replay.\n  runId: number\n  // True for a run that was played from the start, as opposed to one reopened at a given\n  // step; only played runs are worth reporting.\n  reportable: boolean\n  // Fade the rest of the diagram while a run is on screen. A display preference the host\n  // acts on; the simulation itself does not care.\n  focusMode: boolean\n  issues: ScenarioIssue[]\n  // The problems list is closed (it comes back with the next scenario, or when reopened from the header).\n  issuesHidden: boolean\n  setIssuesHidden: (hidden: boolean) => void\n  // Checks the selected scenario against the diagram as it is now. For when the diagram changed under a scenario that is\n  // already selected; nothing happens when the problems are the same.\n  refreshIssues: () => void\n\n  registerScenarios: (scenarios: Scenario[]) => void\n  // Takes a scenario out of this design. If it was the one selected, the next one is, or none when it was the last.\n  removeScenario: (id: string) => void\n  // Adds a scenario to this design, and selects it when none is selected. Does not check it; see check.ts.\n  addScenario: (scenario: Scenario) => void\n  // Swaps a scenario for a new definition with the same id, keeping its place in the list. If it is the selected one,\n  // the input resets to the new defaults and any run is cleared, since the run was of the old steps.\n  replaceScenario: (scenario: Scenario) => void\n  openPanel: () => void\n  closePanel: () => void\n  setFocusMode: (on: boolean) => void\n  selectScenario: (id: string) => void\n  run: (options?: RunOptions) => void\n  // Selects a scenario, sets its input and runs it: the entry point for callers like the chat.\n  runWith: (scenarioId: string, input: Values, options?: RunOptions) => void\n  play: () => void\n  pause: () => void\n  stepForward: () => void\n  stepBack: () => void\n  seek: (index: number) => void\n  reset: () => void\n  setStepMs: (ms: number) => void\n}\n\nexport function findScenario(scenarios: Scenario[], id: string | null) {\n  return scenarios.find((s) => s.id === id)\n}\n\n// A player's state. A host makes one per diagram it plays scenarios on (the Glyph app has one for the open design, and\n// a report makes its own over a saved snapshot), so each has its own diagram, scenarios and timer. `graph` says where\n// to get the diagram when a scenario is run or checked: the player never reads a diagram itself.\nexport function createSimulationStore(graph: () => GraphModel) {\n  return create<SimulationState>()((set, get) => {\n    let timer: ReturnType<typeof setTimeout> | undefined\n    const stopTimer = () => {\n      if (timer !== undefined) clearTimeout(timer)\n      timer = undefined\n    }\n\n    // Advances one step on a timer until the trace ends.\n    const schedule = () => {\n      stopTimer()\n      timer = setTimeout(() => {\n        const { trace, cursor, status } = get()\n        if (!trace || status !== 'playing') return\n        if (cursor >= trace.steps.length - 1) {\n          set({ status: 'finished' })\n          return\n        }\n        const next = cursor + 1\n        set({ cursor: next, status: next >= trace.steps.length - 1 ? 'finished' : 'playing' })\n        if (get().status === 'playing') schedule()\n      }, get().stepMs)\n    }\n\n    const clearRun = () => {\n      stopTimer()\n      return { trace: null, cursor: -1, status: 'idle' as PlayStatus }\n    }\n\n    return {\n      scenarios: [],\n      activeId: null,\n      input: {},\n      trace: null,\n      cursor: -1,\n      status: 'idle',\n      stepMs: 1100,\n      panelOpen: false,\n      runId: 0,\n      reportable: false,\n      focusMode: true,\n      issues: [],\n      issuesHidden: false,\n      setIssuesHidden: (issuesHidden) => set({ issuesHidden }),\n\n      refreshIssues: () => {\n        const scenario = findScenario(get().scenarios, get().activeId)\n        if (!scenario) return\n        const issues = validateScenario(scenario, graph())\n        if (JSON.stringify(issues) !== JSON.stringify(get().issues)) set({ issues, issuesHidden: issues.length === 0 ? get().issuesHidden : false })\n      },\n\n      registerScenarios: (scenarios) => {\n        set({ scenarios })\n        const { activeId } = get()\n        if (activeId && !findScenario(scenarios, activeId)) set({ activeId: null, input: {}, issues: [], ...clearRun() })\n        if (!get().activeId && scenarios.length > 0) get().selectScenario(scenarios[0].id)\n      },\n\n      addScenario: (scenario) => {\n        set((s) => ({ scenarios: [...s.scenarios, scenario] }))\n        if (!get().activeId) get().selectScenario(scenario.id)\n      },\n\n      replaceScenario: (scenario) => {\n        const { scenarios, activeId } = get()\n        if (!scenarios.some((s) => s.id === scenario.id)) return\n        set({ scenarios: scenarios.map((s) => (s.id === scenario.id ? scenario : s)) })\n        if (activeId === scenario.id) get().selectScenario(scenario.id)\n      },\n\n      removeScenario: (id) => {\n        const { scenarios, activeId } = get()\n        const index = scenarios.findIndex((s) => s.id === id)\n        if (index < 0) return\n        const rest = scenarios.filter((s) => s.id !== id)\n        set({ scenarios: rest })\n        if (activeId !== id) return\n        const next = rest[Math.min(index, rest.length - 1)]\n        if (next) get().selectScenario(next.id)\n        else set({ activeId: null, input: {}, issues: [], ...clearRun() })\n      },\n\n      openPanel: () => set({ panelOpen: true }),\n\n      setFocusMode: (focusMode) => set({ focusMode }),\n\n      closePanel: () => {\n        stopTimer()\n        set((s) => ({ panelOpen: false, status: s.status === 'playing' ? 'paused' : s.status }))\n      },\n\n      selectScenario: (id) => {\n        const scenario = findScenario(get().scenarios, id)\n        if (!scenario) return\n        set({\n          activeId: id,\n          input: defaultInput(scenario),\n          issues: validateScenario(scenario, graph()),\n          issuesHidden: false,\n          ...clearRun(),\n        })\n      },\n\n      run: ({ autoplay = true, seek = 0, report = true } = {}) => {\n        const { scenarios, activeId, input } = get()\n        const scenario = findScenario(scenarios, activeId)\n        if (!scenario) return\n        const trace = runScenario(graph(), scenario, input)\n        const cursor = Math.min(Math.max(seek, 0), trace.steps.length - 1)\n        const atEnd = cursor >= trace.steps.length - 1\n        stopTimer()\n        set((s) => ({\n          trace,\n          cursor,\n          status: atEnd ? 'finished' : autoplay ? 'playing' : 'paused',\n          runId: s.runId + 1,\n          reportable: autoplay && seek === 0 && report,\n          issues: validateScenario(scenario, graph()),\n          panelOpen: true,\n        }))\n        if (get().status === 'playing') schedule()\n      },\n\n      runWith: (scenarioId, input, options) => {\n        const scenario = findScenario(get().scenarios, scenarioId)\n        if (!scenario) return\n        stopTimer()\n        set({ activeId: scenarioId, input: { ...defaultInput(scenario), ...input }, panelOpen: true })\n        get().run(options)\n      },\n\n      play: () => {\n        const { trace, cursor } = get()\n        if (!trace) return get().run()\n        if (cursor >= trace.steps.length - 1) set({ cursor: 0 })\n        set({ status: 'playing' })\n        schedule()\n      },\n\n      pause: () => {\n        stopTimer()\n        set((s) => ({ status: s.status === 'playing' ? 'paused' : s.status }))\n      },\n\n      stepForward: () => {\n        const { trace, cursor } = get()\n        if (!trace) return get().run({ autoplay: false })\n        stopTimer()\n        const next = Math.min(cursor + 1, trace.steps.length - 1)\n        set({ cursor: next, status: next >= trace.steps.length - 1 ? 'finished' : 'paused' })\n      },\n\n      stepBack: () => {\n        const { trace, cursor } = get()\n        if (!trace) return\n        stopTimer()\n        set({ cursor: Math.max(cursor - 1, 0), status: 'paused' })\n      },\n\n      seek: (index) => {\n        const { trace } = get()\n        if (!trace) return\n        stopTimer()\n        const cursor = Math.min(Math.max(index, 0), trace.steps.length - 1)\n        set({ cursor, status: cursor >= trace.steps.length - 1 ? 'finished' : 'paused' })\n      },\n\n      reset: () => {\n        const { trace } = get()\n        stopTimer()\n        if (trace) set({ cursor: 0, status: 'paused' })\n      },\n\n      setStepMs: (ms) => {\n        set({ stepMs: ms })\n        if (get().status === 'playing') schedule()\n      },\n    }\n  })\n}\n\nexport type SimulationStore = ReturnType<typeof createSimulationStore>\n","import { createContext, useContext } from 'react'\nimport { useStore } from 'zustand'\nimport type { SimulationStore } from './store'\n\n// Which simulation the player components show. A host wraps them in `SimulationContext.Provider` with a store it made\n// (`createSimulationStore`); a host with one player for the whole app can instead name it once with\n// `setDefaultSimulationStore`, and the components use it wherever there is no provider.\nexport const SimulationContext = createContext<SimulationStore | null>(null)\n\nlet fallback: SimulationStore | null = null\nexport function setDefaultSimulationStore(store: SimulationStore | null) {\n  fallback = store\n}\n\nexport function useSimStore(): SimulationStore {\n  const store = useContext(SimulationContext) ?? fallback\n  if (!store) throw new Error('No simulation store: wrap the player in <SimulationContext.Provider value={createSimulationStore(...)}> or call setDefaultSimulationStore.')\n  return store\n}\n\nexport function useSim<T>(selector: (state: ReturnType<SimulationStore['getState']>) => T): T {\n  return useStore(useSimStore(), selector)\n}\n","import { useSim, useSimStore } from './context'\n\nconst SPEEDS = [\n  { label: '0.5×', ms: 2200 },\n  { label: '1×', ms: 1100 },\n  { label: '2×', ms: 550 },\n  { label: '4×', ms: 275 },\n]\n\nfunction Icon({ d }: { d: string }) {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <path d={d} />\n    </svg>\n  )\n}\n\nexport function PlaybackControls() {\n  const trace = useSim((s) => s.trace)\n  const cursor = useSim((s) => s.cursor)\n  const status = useSim((s) => s.status)\n  const stepMs = useSim((s) => s.stepMs)\n  const { play, pause, stepForward, stepBack, seek, reset, setStepMs } = useSimStore().getState()\n\n  const total = trace?.steps.length ?? 0\n  const playing = status === 'playing'\n\n  return (\n    <div className=\"sim-controls\">\n      <div className=\"sim-buttons\" role=\"group\" aria-label=\"Playback\">\n        <button className=\"icon-btn\" type=\"button\" onClick={reset} disabled={!trace} aria-label=\"Back to the start\" title=\"Back to the start\">\n          <Icon d=\"M6 5v14M19 5 9 12l10 7z\" />\n        </button>\n        <button className=\"icon-btn\" type=\"button\" onClick={stepBack} disabled={!trace || cursor <= 0} aria-label=\"Previous step\" title=\"Previous step\">\n          <Icon d=\"m15 18-6-6 6-6\" />\n        </button>\n        <button\n          className=\"icon-btn sim-play\"\n          type=\"button\"\n          onClick={playing ? pause : play}\n          aria-label={playing ? 'Pause' : 'Play'}\n          title={playing ? 'Pause' : 'Play'}\n        >\n          {playing ? <Icon d=\"M8 5v14M16 5v14\" /> : <Icon d=\"M7 4v16l13-8z\" />}\n        </button>\n        <button className=\"icon-btn\" type=\"button\" onClick={stepForward} disabled={trace !== null && cursor >= total - 1} aria-label=\"Next step\" title=\"Next step\">\n          <Icon d=\"m9 18 6-6-6-6\" />\n        </button>\n      </div>\n\n      <input\n        className=\"sim-progress\"\n        type=\"range\"\n        min={0}\n        max={Math.max(total - 1, 0)}\n        value={Math.max(cursor, 0)}\n        disabled={!trace}\n        onChange={(e) => seek(Number(e.target.value))}\n        aria-label=\"Progress\"\n      />\n      <span className=\"sim-count\">{trace ? `Step ${cursor + 1} of ${total}` : 'Not started'}</span>\n\n      <select\n        className=\"sim-speed\"\n        value={stepMs}\n        onChange={(e) => setStepMs(Number(e.target.value))}\n        aria-label=\"Speed\"\n      >\n        {SPEEDS.map((s) => (\n          <option key={s.ms} value={s.ms}>\n            {s.label}\n          </option>\n        ))}\n      </select>\n    </div>\n  )\n}\n","import { useSim } from './context'\nimport type { Outcome } from '@glyphlab/scenario-core'\n\nconst OUTCOME_LABEL: Record<Outcome, string> = {\n  success: 'Succeeded',\n  failure: 'Failed',\n  blocked: 'Blocked',\n  stopped: 'Stopped',\n}\n\nfunction show(value: string | number | boolean) {\n  return typeof value === 'boolean' ? (value ? 'on' : 'off') : String(value)\n}\n\n// What the run knows right now: its input, the state it has built up, and, at the end,\n// how it turned out.\nexport function StatePanel() {\n  const trace = useSim((s) => s.trace)\n  const cursor = useSim((s) => s.cursor)\n  const scenario = useSim((s) => s.scenarios.find((x) => x.id === s.activeId))\n  // Before a run starts, show the input it will use.\n  const pendingInput = useSim((s) => s.input)\n  const input = trace?.input ?? pendingInput\n\n  const step = trace?.steps[cursor]\n  const labels = new Map(scenario?.inputs.map((f) => [f.name, f.label]))\n  const changed = new Set(step?.changes.map((c) => c.key))\n  const finished = step?.kind === 'end' && step.outcome\n\n  return (\n    <div className=\"sim-state\">\n      {finished && step.outcome && (\n        <div className={`sim-outcome outcome-${step.outcome}`} role=\"status\">\n          <strong>{OUTCOME_LABEL[step.outcome]}</strong>\n          <p>{step.title}</p>\n        </div>\n      )}\n\n      <h3>Input</h3>\n      {Object.keys(input).length > 0 ? (\n        <dl>\n          {Object.entries(input).map(([key, value]) => (\n            <div key={key}>\n              <dt>{labels.get(key) ?? key}</dt>\n              <dd>{show(value)}</dd>\n            </div>\n          ))}\n        </dl>\n      ) : (\n        <p className=\"sim-muted\">Nothing yet.</p>\n      )}\n\n      <h3>State</h3>\n      {step && Object.keys(step.state).length > 0 ? (\n        <dl>\n          {Object.entries(step.state).map(([key, value]) => (\n            <div key={key} className={changed.has(key) ? 'changed' : ''}>\n              <dt>\n                <code>{key}</code>\n              </dt>\n              <dd>{show(value)}</dd>\n            </div>\n          ))}\n        </dl>\n      ) : (\n        <p className=\"sim-muted\">Empty.</p>\n      )}\n    </div>\n  )\n}\n","import { useEffect, useRef } from 'react'\nimport type { ReactNode } from 'react'\nimport type { Trace, TraceStep } from '@glyphlab/scenario-core'\nimport { useSim } from './context'\n\nconst KIND_LABEL = { enter: 'Step', call: 'Call', end: 'Result' } as const\n\nfunction show(value: string | number | boolean | undefined) {\n  return value === undefined ? '∅' : String(value)\n}\n\nfunction StepBody({ step }: { step: TraceStep }) {\n  return (\n    <>\n      <div className=\"sim-step-head\">\n        <span className={`sim-kind kind-${step.kind}`}>{KIND_LABEL[step.kind]}</span>\n        <strong>{step.nodeTitle}</strong>\n      </div>\n      <p className=\"sim-step-title\">{step.title}</p>\n      {step.detail && <p className=\"sim-step-detail\">{step.detail}</p>}\n\n      {step.changes.length > 0 && (\n        <ul className=\"sim-changes\" aria-label=\"State changes\">\n          {step.changes.map((c) => (\n            <li key={c.key}>\n              <code>{c.key}</code>\n              <span>\n                {c.from === undefined ? 'set to' : `${show(c.from)} →`} <b>{show(c.to)}</b>\n              </span>\n              {c.ai && <span className=\"chip ai\" title=\"Interpreted by the AI\">AI</span>}\n            </li>\n          ))}\n        </ul>\n      )}\n\n      {step.decision && (\n        <ul className=\"sim-decision\" aria-label=\"Branches\">\n          {step.decision.options.map((o) => (\n            <li key={o.label} className={o.taken ? 'taken' : ''}>\n              {o.taken ? '✓' : '·'} {o.label}\n            </li>\n          ))}\n        </ul>\n      )}\n\n      {step.warnings.map((w) => (\n        <p key={w} className=\"sim-warning\">\n          {w}\n        </p>\n      ))}\n    </>\n  )\n}\n\nexport interface TraceListProps {\n  // Something beside each step, such as a button to comment on it.\n  stepActions?: (step: TraceStep, trace: Trace) => ReactNode\n  // Something under each step, such as the comments on it. Nothing is drawn when it returns null.\n  stepExtras?: (step: TraceStep, trace: Trace) => ReactNode\n  // What is said before a run starts.\n  emptyHint?: ReactNode\n}\n\n// The steps played so far, newest at the bottom. Clicking a step goes back to it.\nexport function TraceList({ stepActions, stepExtras, emptyHint }: TraceListProps = {}) {\n  const trace = useSim((s) => s.trace)\n  const cursor = useSim((s) => s.cursor)\n  const seek = useSim((s) => s.seek)\n  const listRef = useRef<HTMLOListElement>(null)\n\n  // Keep the newest step in view while playing.\n  useEffect(() => {\n    const list = listRef.current\n    if (list) list.scrollTop = list.scrollHeight\n  }, [cursor, trace])\n\n  if (!trace) {\n    return (\n      <p className=\"sim-empty\">\n        {emptyHint ?? (\n          <>\n            Press <strong>Play</strong> to run this scenario with its default input. The path lights up on the diagram as it plays, and every step is listed here.\n          </>\n        )}\n      </p>\n    )\n  }\n\n  return (\n    <ol className=\"sim-steps\" ref={listRef} aria-label=\"Trace\">\n      {trace.steps.slice(0, cursor + 1).map((step) => {\n        const active = step.index === cursor\n        const extras = stepExtras?.(step, trace) ?? null\n        return (\n          <li key={step.index} className={`sim-step${active ? ' active' : ''}${step.outcome ? ` outcome-${step.outcome}` : ''}`}>\n            <button className=\"sim-step-main\" type=\"button\" onClick={() => seek(step.index)} aria-current={active}>\n              <span className=\"sim-index\">{step.index + 1}</span>\n              <span className=\"sim-step-content\">\n                <StepBody step={step} />\n              </span>\n            </button>\n            {stepActions?.(step, trace)}\n            {extras && <div className=\"sim-inline\">{extras}</div>}\n          </li>\n        )\n      })}\n    </ol>\n  )\n}\n","import type { ReactNode } from 'react'\nimport type { Scenario } from '@glyphlab/scenario-core'\nimport { StatePanel } from './StatePanel'\nimport { PlaybackControls } from './PlaybackControls'\nimport { TraceList } from './TraceList'\nimport { useSim, useSimStore } from './context'\n\nexport interface ScenarioPlayerConfig {\n  // How tall the player is, and the handle that resizes it (the player does not know about layout).\n  height?: number\n  resizer?: ReactNode\n  // The list of steps; the plain one when not given.\n  trace?: ReactNode\n  // Under the steps, for example a bar of review comments.\n  footer?: ReactNode\n  // Shows a delete button for the open scenario and calls this when it is pressed. The host asks for confirmation and\n  // removes the scenario (`removeScenario` on the store); without it there is no button.\n  onDelete?: (scenario: Scenario) => void\n  // Whether the header has a button that closes the player. On unless false; a host that always shows the player turns it off.\n  closable?: boolean\n  // Shows the state panel beside the trace. Off unless true; a host that places StatePanel itself leaves it off.\n  statePanel?: boolean\n}\n\nconst Close = ({ size }: { size: number }) => (\n  <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden=\"true\">\n    <path d=\"M6 6l12 12M18 6 6 18\" />\n  </svg>\n)\n\n// The scenario player: pick a scenario and watch it play out. It reads and writes only the simulation store; what lights\n// up on the diagram, and anything about comments or deleting, is up to the host.\nexport function ScenarioPlayer({ config = {} }: { config?: ScenarioPlayerConfig }) {\n  const { height, resizer, trace, footer, onDelete, closable = true, statePanel = false } = config\n  const store = useSimStore()\n  const open = useSim((s) => s.panelOpen)\n  const scenarios = useSim((s) => s.scenarios)\n  const activeId = useSim((s) => s.activeId)\n  const issues = useSim((s) => s.issues)\n  const focusMode = useSim((s) => s.focusMode)\n  const issuesHidden = useSim((s) => s.issuesHidden)\n  const { setFocusMode, selectScenario, closePanel, setIssuesHidden } = store.getState()\n\n  if (!open) return null\n\n  const scenario = scenarios.find((s) => s.id === activeId)\n\n  return (\n    <section className=\"sim-player\" aria-label=\"Scenario player\" style={height === undefined ? undefined : { height }}>\n      {resizer}\n      <header className=\"sim-head\">\n        <h2>Scenario player</h2>\n        {scenarios.length > 0 ? (\n          <select value={activeId ?? ''} onChange={(e) => selectScenario(e.target.value)} aria-label=\"Scenario\">\n            {scenarios.map((s) => (\n              <option key={s.id} value={s.id}>\n                {s.title}\n              </option>\n            ))}\n          </select>\n        ) : null}\n        {scenario && onDelete && (\n          <button className=\"icon-btn small\" type=\"button\" onClick={() => onDelete(scenario)} aria-label=\"Delete scenario\" title=\"Delete this scenario from the design\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6\" />\n            </svg>\n          </button>\n        )}\n        <p className=\"sim-desc\">{scenarios.length === 0 ? 'No scenarios.' : scenario?.description}</p>\n        {issues.length > 0 && issuesHidden && (\n          <button className=\"sim-problems-chip\" type=\"button\" onClick={() => setIssuesHidden(false)} title=\"Show the problems with this scenario\">\n            {issues.length} problem{issues.length === 1 ? '' : 's'}\n          </button>\n        )}\n        <label className=\"sim-focus\" title=\"Fade the parts of the diagram this step does not involve\">\n          <input type=\"checkbox\" checked={focusMode} onChange={(e) => setFocusMode(e.target.checked)} />\n          Focus\n        </label>\n        {closable && (\n          <button className=\"icon-btn\" type=\"button\" onClick={closePanel} aria-label=\"Close scenario player\">\n            <Close size={16} />\n          </button>\n        )}\n      </header>\n\n      {issues.length > 0 && !issuesHidden && (\n        <div className=\"sim-problems\">\n          <header>\n            <strong>\n              {issues.length} problem{issues.length === 1 ? '' : 's'} with this scenario\n            </strong>\n            <button className=\"icon-btn small\" type=\"button\" onClick={() => setIssuesHidden(true)} aria-label=\"Close problems\">\n              <Close size={14} />\n            </button>\n          </header>\n          <ul className=\"sim-issues\" aria-label=\"Scenario problems\">\n            {issues.map((issue, i) => (\n              <li key={i} className={issue.severity}>\n                {issue.message}\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n\n      {scenarios.length === 0 ? (\n        <p className=\"sim-empty\" role=\"status\">\n          Nothing to play.\n        </p>\n      ) : (\n        <div className={statePanel ? 'sim-grid has-side' : 'sim-grid'}>\n          <div className=\"sim-trace\">\n            <PlaybackControls />\n            {trace ?? <TraceList />}\n            {footer}\n          </div>\n          {statePanel && (\n            <aside className=\"sim-side\" aria-label=\"State\">\n              <StatePanel />\n            </aside>\n          )}\n        </div>\n      )}\n    </section>\n  )\n}\n"],"mappings":"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","names":["jsx","jsxs","jsx","jsxs","show","jsx","jsxs"]}

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "@glyphlab/scenario-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "The scenario player for React: the state of a run (play, pause, step), playback controls, the trace and state panels, and a player that puts them together. No comments, no app.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./scenario.css": "./scenario.css",
+    "./theme.css": "./theme.css"
+  },
+  "files": [
+    "*.js",
+    "*.js.map",
+    "*.d.ts",
+    "*.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "./scenario.css",
+    "./theme.css"
+  ],
+  "peerDependencies": {
+    "@glyphlab/scenario-core": "^0.1.1",
+    "react": "^19",
+    "zustand": "^5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/subtubes-io/subtubes-editor.git",
+    "directory": "packages/scenario-react"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "diagram",
+    "react",
+    "system-design",
+    "glyph"
+  ]
+}

package/scenario.css

@@ -0,0 +1,487 @@
+/* Scenario player. Everything is scoped to .sim-* and uses theme variables (see theme.css for defaults). */
+
+/* The few shared controls the player uses, at no specificity, so a host that styles .icon-btn or .chip itself wins. */
+:where(.sim-player, .sim-controls) .icon-btn {
+  display: inline-grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: inherit;
+  border-radius: 8px;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s;
+}
+
+:where(.sim-player, .sim-controls) .icon-btn:hover:not(:disabled) {
+  background: var(--surface-2);
+}
+
+:where(.sim-player, .sim-controls) .icon-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+:where(.sim-player, .sim-controls) .chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 1px 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  white-space: nowrap;
+}
+
+.sim-player {
+  --sim-active: var(--tools);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: min(400px, 48vh);
+  min-height: 160px;
+  max-height: 80%;
+  flex: none;
+  border-top: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.sim-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.sim-head h2 {
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.sim-head select,
+.sim-speed {
+  padding: 5px 8px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+}
+
+.sim-desc {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 12.5px;
+  color: var(--muted);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.sim-focus {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12.5px;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.sim-focus input {
+  accent-color: var(--accent);
+}
+
+.sim-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  flex: 1;
+  min-height: 0;
+}
+
+.sim-grid.has-side {
+  grid-template-columns: minmax(0, 1fr) 260px;
+}
+
+.sim-side {
+  padding: 12px 16px;
+  overflow-y: auto;
+  border-left: 1px solid var(--border);
+}
+
+.sim-trace {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* Problems found when checking the scenario against the diagram */
+.sim-problems {
+  flex: none;
+  max-height: 35%;
+  overflow: auto;
+  border-bottom: 1px solid var(--border);
+}
+
+.sim-problems > header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px 0 16px;
+  font-size: 12px;
+}
+
+.icon-btn.small {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+}
+
+.sim-problems-chip {
+  flex: none;
+  padding: 3px 9px;
+  border: 1px solid color-mix(in srgb, var(--danger) 50%, var(--border));
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
+  color: var(--danger);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.sim-issues {
+  margin: 0;
+  padding: 4px 16px 6px 32px;
+  font-size: 12px;
+}
+
+.sim-issues .error {
+  color: var(--danger);
+}
+
+.sim-issues .warning {
+  color: var(--tools);
+}
+
+/* Controls */
+.sim-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.sim-buttons {
+  display: flex;
+  gap: 4px;
+}
+
+.sim-buttons .icon-btn {
+  width: 32px;
+  height: 32px;
+}
+
+.sim-buttons .sim-play {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+
+.sim-buttons .sim-play:hover:not(:disabled) {
+  background: var(--accent);
+  filter: brightness(1.1);
+}
+
+.sim-progress {
+  flex: 1;
+  min-width: 80px;
+  accent-color: var(--accent);
+}
+
+.sim-count {
+  min-width: 92px;
+  font-size: 12px;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Trace */
+.sim-empty {
+  padding: 24px 20px;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.sim-steps {
+  flex: 1;
+  min-height: 0;
+  margin: 0;
+  padding: 8px 12px;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.sim-step {
+  position: relative;
+  margin-bottom: 6px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg);
+  opacity: 0.78;
+}
+
+.sim-step.active {
+  opacity: 1;
+  border-color: var(--sim-active);
+  box-shadow: 0 0 0 1px var(--sim-active);
+}
+
+.sim-step.outcome-success.active {
+  border-color: var(--ok);
+  box-shadow: 0 0 0 1px var(--ok);
+}
+
+.sim-step.outcome-failure.active {
+  border-color: var(--danger);
+  box-shadow: 0 0 0 1px var(--danger);
+}
+
+.sim-step-main {
+  display: flex;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 40px 8px 10px;
+  border: none;
+  background: none;
+  text-align: left;
+  cursor: pointer;
+}
+
+.sim-index {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--surface-2);
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--muted);
+}
+
+.sim-step.active .sim-index {
+  background: var(--sim-active);
+  color: #1b1405;
+}
+
+.sim-step-content {
+  min-width: 0;
+  flex: 1;
+}
+
+.sim-step-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.sim-kind {
+  padding: 0 6px;
+  border-radius: 4px;
+  background: var(--surface-2);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.sim-kind.kind-call {
+  color: var(--runtime);
+}
+
+.sim-kind.kind-end {
+  color: var(--ok);
+}
+
+.sim-step-title {
+  margin: 2px 0 0;
+  font-size: 13px;
+}
+
+.sim-step-detail {
+  margin: 2px 0 0;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.sim-changes,
+.sim-decision {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  margin: 6px 0 0;
+  padding: 0;
+  list-style: none;
+  font-size: 12px;
+}
+
+.sim-changes li {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.sim-changes code {
+  padding: 0 5px;
+  border-radius: 4px;
+  background: var(--surface-2);
+  font-family: var(--mono);
+  font-size: 11.5px;
+}
+
+.sim-decision li {
+  color: var(--muted);
+}
+
+.sim-decision li.taken {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.chip.ai {
+  color: var(--runtime);
+  border-color: color-mix(in srgb, var(--runtime) 45%, transparent);
+  background: color-mix(in srgb, var(--runtime) 12%, transparent);
+  font-size: 10.5px;
+}
+
+.sim-warning {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--tools);
+}
+
+.sim-comment-btn {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: none;
+  color: var(--muted);
+  opacity: 0;
+  cursor: pointer;
+}
+
+.sim-step:hover .sim-comment-btn,
+.sim-comment-btn:focus-visible {
+  opacity: 1;
+}
+
+.sim-comment-btn:hover {
+  border-color: var(--border);
+  background: var(--surface-2);
+  color: var(--accent);
+}
+
+.sim-inline {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 10px 10px 42px;
+}
+
+/* State and outcome */
+.sim-state h3 {
+  margin: 0 0 6px;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.sim-state h3:not(:first-child) {
+  margin-top: 14px;
+}
+
+.sim-state dl {
+  margin: 0;
+  font-size: 12.5px;
+}
+
+.sim-state dl > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 3px 6px;
+  border-radius: 6px;
+}
+
+.sim-state dl > div.changed {
+  background: color-mix(in srgb, var(--sim-active) 18%, transparent);
+}
+
+.sim-state dt {
+  flex: 1 1 0;
+  min-width: 0;
+  color: var(--muted);
+}
+
+.sim-state dd {
+  flex: 0 0 auto;
+  min-width: 4ch;
+  max-width: 60%;
+  margin: 0;
+  overflow-wrap: break-word;
+  text-align: right;
+  font-weight: 600;
+}
+
+.sim-state code {
+  font-family: var(--mono);
+  font-size: 12px;
+}
+
+.sim-muted {
+  font-size: 12.5px;
+  color: var(--muted);
+}
+
+.sim-outcome {
+  margin-bottom: 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-left-width: 4px;
+  border-radius: 8px;
+  font-size: 12.5px;
+}
+
+.sim-outcome p {
+  margin: 4px 0 0;
+}
+
+.sim-outcome.outcome-success {
+  border-left-color: var(--ok);
+}
+
+.sim-outcome.outcome-failure {
+  border-left-color: var(--danger);
+}
+
+.sim-outcome.outcome-blocked {
+  border-left-color: var(--tools);
+}

package/theme.css

@@ -0,0 +1,33 @@
+/* Default colours for the scenario player, for a host that does not define these variables itself. They are declared
+   with :where(), so any value the host sets on :root wins whatever the order of the style sheets. */
+:where(:root) {
+  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
+  --bg: #f4f5f7;
+  --surface: #ffffff;
+  --surface-2: #f0f2f5;
+  --border: #dfe3e8;
+  --text: #14171a;
+  --muted: #667085;
+  --accent: #2563eb;
+  --accent-text: #ffffff;
+  --ok: #059669;
+  --danger: #dc2626;
+  --runtime: #7c3aed;
+  --tools: #d97706;
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(:root) {
+    --bg: #161718;
+    --surface: #1f2022;
+    --surface-2: #2a2b2e;
+    --border: #35373b;
+    --text: #e8eaed;
+    --muted: #9aa0a8;
+    --accent: #3b82f6;
+    --ok: #34d399;
+    --danger: #f87171;
+    --runtime: #a78bfa;
+    --tools: #fbbf24;
+  }
+}