@weasel-js/forge 1.8.0 → 1.8.1

package/dist/shell/index.js

@@ -1,18 +1,20 @@
-import { isIndexId, indexId, libraryOf, indexEntries, schemaFromDescription, LibraryBadge, openChannel, IndexPage } from '../chunk-KIFCYY4F.js';
+import { parseRoute, paramsToKnobs, knobPaths, sameKnob, knobsToParams, formatRoute, PLAYHEAD_PARAM, reservedParams } from '../chunk-CJX3W5HY.js';
+import { isIndexId, indexId, libraryOf, indexEntries, schemaFromDescription, LibraryBadge, openChannel, IndexPage } from '../chunk-JQD3MVUQ.js';
 import { isGallery } from '../chunk-WEQSLPKT.js';
-import { useTrialFrame, createTrialFrames, StoryGlobalsContext, TrialFramesContext, StoryTrial, useCssOverrides, TrialHost } from '../chunk-SEK6EKHO.js';
-export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-SEK6EKHO.js';
-import { labGlobals, withGlobals, followApp, storyConfig, GLOBALS_KEY, effectiveGlobals, labOptions, isGlobalsPath } from '../chunk-JNJGIUYU.js';
-import { loadStories, indexRenderOf } from '../chunk-NYBMOSSR.js';
-import '../chunk-Y3WZ2EWR.js';
+import { useTrialFrame, createTrialFrames, createTrialClocks, StoryGlobalsContext, TrialFramesContext, TrialClocksContext, StoryTrial, useCssOverrides, useTrialClock, TrialHost } from '../chunk-GHTVXHNJ.js';
+export { StoryGlobalsContext, StoryTrial, TrialFramesContext, TrialHost, useTrialFrame } from '../chunk-GHTVXHNJ.js';
+import { labGlobals, withGlobals, followApp, storyConfig, GLOBALS_KEY, effectiveGlobals, PLAYHEAD_KEY, labOptions, isGlobalsPath } from '../chunk-NI5FYQHW.js';
+import { loadStories, indexRenderOf } from '../chunk-5N4YP5HS.js';
+import '../chunk-L5XM5VKB.js';
 import '../chunk-HRGPFQBW.js';
-import { stableStringify, PORT_HANDOFF, FRAME_HELLO, PROTOCOL_VERSION } from '../chunk-YKN3IAEX.js';
-import { useTrialId, Button, Lab, useLabContext, TrialIdContext, usePersistedState, Select, inferTokenType, ToggleBar as ToggleBar$1, Input, TokenPanel, refitScale } from '@weasel-js/labkit';
+import '../chunk-MGQWCPYE.js';
+import { stableStringify, PORT_HANDOFF, FRAME_HELLO, PROTOCOL_VERSION } from '../chunk-KJGXJD3U.js';
+import { useTrialId, Button, Lab, useLabContext, TrialIdContext, usePersistedState, Select, useTrialState, inferTokenType, ToggleBar as ToggleBar$1, Input, TokenPanel, refitScale } from '@weasel-js/labkit';
 import num from '@weasel-js/theme/numeric.module.css';
-import { createContext, useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect, useId, useContext } from 'react';
+import { createContext, useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect, useId, useContext, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createRoot } from 'react-dom/client';
-import { InfoIcon, ToggleBar, Checkbox, Dialog, DisclosureMark, Button as Button$1, TuneIcon, Callout } from '@weasel-js/ui';
+import { InfoIcon, ToggleBar, Checkbox, Dialog, DisclosureMark, Button as Button$1, TuneIcon, Callout, Slider, Transport } from '@weasel-js/ui';
 import { TOKEN_MANIFEST, THEME_SOURCES, isByAxis } from '@weasel-js/theme';
 import { scale, httpThemeApi } from '@weasel-js/theme/engine';
 import { f, valueAtPath, isConfigBranch } from '@weasel-js/labkit/config';
@@ -625,6 +627,120 @@ function createFramePool(frameUrl, size = 2) {
   };
 }
 var FramePoolContext = createContext(null);
+
+// src/shell/routedTrial.ts
+function routedTrial(trials, focusedTrialId, route) {
+  return trials.find((t) => t.id === focusedTrialId && t.instrumentName === route) ?? trials.find((t) => t.instrumentName === route);
+}
+function readRoute() {
+  return parseRoute(location.hash).story;
+}
+function readRouteParams() {
+  return { ...parseRoute(location.hash).params };
+}
+function replaceRouteParams(update) {
+  const { story, params } = parseRoute(location.hash);
+  if (story === null) return;
+  const next = formatRoute({ story, params: update({ ...params }) });
+  if (next !== location.hash) history.replaceState(history.state, "", next);
+}
+function readRouteEntry() {
+  const state = history.state;
+  const entry = state?.forgeRoute;
+  return typeof entry?.step === "number" ? entry : null;
+}
+function crossesInPlace(from, to) {
+  if (!from || !to || from.step === to.step) return false;
+  return to.step < from.step ? from.inPlace : to.inPlace;
+}
+function stamp(entry, hash) {
+  history.replaceState({ ...history.state ?? {}, forgeRoute: entry }, "", hash);
+}
+function setRoute(id, options = {}) {
+  if (readRoute() === id) {
+    history.replaceState(history.state, "", formatRoute({ story: id, params: readRouteParams() }));
+    return;
+  }
+  const hash = formatRoute({ story: id, params: {} });
+  const from = readRouteEntry() ?? { step: 0, inPlace: false };
+  stamp(from, location.hash);
+  location.hash = hash;
+  stamp({ step: from.step + 1, inPlace: options.inPlace ?? false }, hash);
+}
+function useRoute() {
+  const [route, setCurrent] = useState(readRoute);
+  useEffect(() => {
+    const sync = () => setCurrent(readRoute());
+    window.addEventListener("hashchange", sync);
+    sync();
+    return () => window.removeEventListener("hashchange", sync);
+  }, []);
+  return [route, setRoute];
+}
+
+// src/timeline/playheadUrl.ts
+function formatSeconds(ms) {
+  const rounded = Math.round(ms) / 1e3;
+  return String(rounded === 0 ? 0 : rounded);
+}
+function parseSeconds(text) {
+  if (text == null || !/^\s*-?(\d+\.?\d*|\.\d+)\s*$/.test(text)) return null;
+  return Math.round(Number(text) * 1e3);
+}
+function readPlayheadParam() {
+  return parseSeconds(readRouteParams()[PLAYHEAD_PARAM]);
+}
+function writePlayheadParam(ms) {
+  replaceRouteParams(
+    ({ [PLAYHEAD_PARAM]: _held, ...rest }) => ms === null ? rest : { ...rest, [PLAYHEAD_PARAM]: formatSeconds(ms) }
+  );
+}
+function PlayheadSync({ trialId, route, applied }) {
+  const clock = useTrialClock(trialId);
+  useEffect(() => {
+    if (!clock) return;
+    const fromUrl = () => {
+      const t = readPlayheadParam();
+      if (t === null || t === clock.get().time) return;
+      clock.request(t);
+    };
+    let held;
+    const toUrl = () => {
+      if (clock.pending() !== null) return;
+      const { playing, time, span } = clock.get();
+      const next = playing || time === span.start ? null : time;
+      if (next === held) return;
+      held = next;
+      writePlayheadParam(next);
+    };
+    if (applied.current !== route) {
+      applied.current = route;
+      fromUrl();
+    }
+    toUrl();
+    const off = clock.subscribe(toUrl);
+    const onHashChange = () => {
+      if (readRoute() !== route) return;
+      held = void 0;
+      fromUrl();
+      toUrl();
+    };
+    window.addEventListener("hashchange", onHashChange);
+    return () => {
+      off();
+      window.removeEventListener("hashchange", onHashChange);
+    };
+  }, [clock, route, applied]);
+  return null;
+}
+function RoutePlayhead() {
+  const lab = useLabContext();
+  const [route] = useRoute();
+  const applied = useRef(null);
+  const trial = route === null ? void 0 : routedTrial(lab.trials, lab.focusedTrialId, route);
+  if (!trial || route === null) return null;
+  return /* @__PURE__ */ jsx(PlayheadSync, { trialId: trial.id, route, applied }, `${trial.id} ${route}`);
+}
 var RECORD = "fg-globals";
 function useLabGlobals(declarations) {
   const [stored, setStored] = usePersistedState(RECORD, null, { scope: "lab" });
@@ -706,6 +822,46 @@ function LabGlobals({
   useEffect(() => onChange(resolved), [resolved, onChange]);
   return null;
 }
+function KnobSync({ schema, config }) {
+  const { setConfig } = useTrialState();
+  const reading = useRef(true);
+  const [typed, setTyped] = useState(0);
+  useEffect(() => {
+    const onHashChange = () => {
+      reading.current = true;
+      setTyped((n) => n + 1);
+    };
+    window.addEventListener("hashchange", onHashChange);
+    return () => window.removeEventListener("hashchange", onHashChange);
+  }, []);
+  useEffect(() => {
+    if (reading.current) {
+      reading.current = false;
+      const knobs2 = paramsToKnobs(schema, readRouteParams());
+      let wrote = false;
+      for (const { path, leaf } of knobPaths(schema)) {
+        const target = path in knobs2 ? knobs2[path] : leaf.default;
+        const current = valueAtPath(config, path);
+        if (sameKnob(current === void 0 ? leaf.default : current, target)) continue;
+        setConfig(path, target);
+        wrote = true;
+      }
+      if (wrote) return;
+    }
+    const knobs = knobsToParams(schema, config);
+    replaceRouteParams((params) => ({ ...knobs, ...reservedParams(params) }));
+  }, [schema, config, setConfig, typed]);
+  return null;
+}
+function RouteKnobs({ instruments, isReady }) {
+  const lab = useLabContext();
+  const [route] = useRoute();
+  if (route === null || !isReady(route)) return null;
+  const trial = routedTrial(lab.trials, lab.focusedTrialId, route);
+  const schema = instruments.find((instrument) => instrument.name === route)?.config;
+  if (!trial || !schema) return null;
+  return /* @__PURE__ */ jsx(TrialIdContext.Provider, { value: trial.id, children: /* @__PURE__ */ jsx(KnobSync, { schema, config: trial.config }, `${trial.id} ${route}`) });
+}
 
 // src/shell/revealTrial.ts
 var FLASH_MS = 600;
@@ -727,44 +883,6 @@ function revealTrial(trialId, root = document) {
   );
   return true;
 }
-function readRoute() {
-  const { hash } = location;
-  if (!hash.startsWith("#/")) return null;
-  return decodeURIComponent(hash.slice(2)) || null;
-}
-function readRouteEntry() {
-  const state = history.state;
-  const entry = state?.forgeRoute;
-  return typeof entry?.step === "number" ? entry : null;
-}
-function crossesInPlace(from, to) {
-  if (!from || !to || from.step === to.step) return false;
-  return to.step < from.step ? from.inPlace : to.inPlace;
-}
-function stamp(entry, hash) {
-  history.replaceState({ ...history.state ?? {}, forgeRoute: entry }, "", hash);
-}
-function setRoute(id, options = {}) {
-  const hash = `#/${encodeURIComponent(id)}`;
-  if (readRoute() === id) {
-    history.replaceState(history.state, "", hash);
-    return;
-  }
-  const from = readRouteEntry() ?? { step: 0, inPlace: false };
-  stamp(from, location.hash);
-  location.hash = hash;
-  stamp({ step: from.step + 1, inPlace: options.inPlace ?? false }, hash);
-}
-function useRoute() {
-  const [route, setCurrent] = useState(readRoute);
-  useEffect(() => {
-    const sync = () => setCurrent(readRoute());
-    window.addEventListener("hashchange", sync);
-    sync();
-    return () => window.removeEventListener("hashchange", sync);
-  }, []);
-  return [route, setRoute];
-}
 
 // src/shell/tree/buildTree.ts
 function sortFolder(nodes) {
@@ -1212,6 +1330,44 @@ function createAnswerBook() {
     }
   };
 }
+function TransportBar({ clock }) {
+  const { time, playing, loop, rate, span } = useSyncExternalStore(clock.subscribe, clock.get);
+  return /* @__PURE__ */ jsxs("div", { className: "fg-transport", children: [
+    /* @__PURE__ */ jsx(
+      Slider,
+      {
+        className: "fg-transport__scrub",
+        ariaLabel: "Scrub",
+        density: "slim",
+        readoutPlacement: "none",
+        min: span.start,
+        max: span.end > span.start ? span.end : span.start + 1,
+        thumbs: [{ value: time, valueText: `${formatSeconds(time)} seconds` }],
+        onInput: ([thumb]) => {
+          if (thumb) clock.seek(thumb.value);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Transport,
+      {
+        paused: !playing,
+        loop,
+        rate,
+        playhead: time,
+        duration: span.end,
+        onPlay: clock.play,
+        onPause: clock.pause,
+        onLoopChange: (next) => clock.setLoop(next !== false && next !== 0),
+        onRateChange: clock.setRate
+      }
+    )
+  ] });
+}
+function TrialTransport({ trialId }) {
+  const clock = useTrialClock(trialId);
+  return clock ? /* @__PURE__ */ jsx(TransportBar, { clock }) : null;
+}
 function IndexTrial({ bundle, setup, config }) {
   const lab = useLabContext();
   const trialId = useContext(TrialIdContext);
@@ -1243,10 +1399,14 @@ function IndexTrial({ bundle, setup, config }) {
   };
   return /* @__PURE__ */ jsx(TrialHost, { layout: "fullscreen", setup, config, children: render });
 }
+function withPlayhead(schema) {
+  return f.schema({ ...schema.nodes, [PLAYHEAD_KEY]: f.custom("forge-playhead", null).hidden() });
+}
 function documentInstrument(options) {
   const { entry, loaded, setup, globals = {} } = options;
   const schema = loaded.kind === "story" ? loaded.story.config : f.schema({});
-  const config = withGlobals(schema, globals);
+  const timed = loaded.kind === "story" && loaded.story.timeline !== null;
+  const config = withGlobals(timed ? withPlayhead(schema) : schema, globals);
   const initialState = loaded.kind === "story" ? loaded.story.initialState : null;
   return {
     name: entry.id,
@@ -1254,8 +1414,9 @@ function documentInstrument(options) {
     config,
     defaultConfig: () => config.defaults(),
     initialState: (c) => initialState?.(c) ?? null,
-    render: (ctx) => loaded.kind === "story" ? /* @__PURE__ */ jsx(StoryTrial, { story: loaded.story, setup, ctx }) : /* @__PURE__ */ jsx(IndexTrial, { bundle: loaded.bundle, setup, config: ctx.config }),
-    ...loaded.kind === "story" && loaded.story.viewport ? { stage: { size: { width: loaded.story.viewport.width, height: loaded.story.viewport.height } } } : {}
+    render: (ctx) => loaded.kind === "story" ? /* @__PURE__ */ jsx(StoryTrial, { story: loaded.story, setup, ctx }, loaded.story.id) : /* @__PURE__ */ jsx(IndexTrial, { bundle: loaded.bundle, setup, config: ctx.config }),
+    ...loaded.kind === "story" && loaded.story.viewport ? { stage: { size: { width: loaded.story.viewport.width, height: loaded.story.viewport.height } } } : {},
+    ...timed ? { chrome: [{ id: "fg-transport", region: "status", render: (c) => /* @__PURE__ */ jsx(TrialTransport, { trialId: c.trialId }) }] } : {}
   };
 }
 function StoryLoad({ entry, load, fault }) {
@@ -1747,6 +1908,7 @@ function useStoryRegistry(index, options) {
   return { instruments: cache.list, isReady, onReady, reload };
 }
 var NO_DECLARATIONS = {};
+var DEFAULT_TITLE = "weaselforge";
 function initialStory(entries, fallback) {
   const route = readRoute();
   return route !== null && entries.some((entry) => entry.id === route) ? route : fallback;
@@ -1785,7 +1947,12 @@ function useInfoShortcut(open) {
 }
 function Workshop({ index, frameUrl, importers, setup, changes, config, stories = [], storageKey, storage, dependencies }) {
   const declarations = config?.globals ?? NO_DECLARATIONS;
+  const title = config?.title ?? DEFAULT_TITLE;
+  useEffect(() => {
+    document.title = title;
+  }, [title]);
   const [frames] = useState(createTrialFrames);
+  const [clocks] = useState(createTrialClocks);
   const [pool, setPool] = useState(null);
   const framed = importers === void 0 || index.some((entry) => entry.isolate !== void 0);
   useEffect(() => {
@@ -1823,12 +1990,12 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
         region: "palette",
         item: { icon: InfoIcon, label: "Info", shortcut: "\u2318I", onActivate: () => setInfoOpen(true) }
       },
-      CSS_VARS_SECTION,
+      ...config?.cssVars === false ? [] : [CSS_VARS_SECTION],
       A11Y_SECTION,
       ...Object.keys(declarations).length > 0 ? [{ id: "fg-globals", region: "header", render: () => /* @__PURE__ */ jsx(GlobalsToolbar, { declarations }) }] : [],
       ...config?.labChrome ?? []
     ],
-    [index, declarations, config?.labChrome]
+    [index, declarations, config?.cssVars, config?.labChrome]
   );
   const first = index[0];
   if (!first) {
@@ -1837,10 +2004,10 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
       stories.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "fg-empty__globs", "aria-label": "Story globs", children: stories.map((glob) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { children: glob }) }, glob)) }) : null
     ] });
   }
-  return /* @__PURE__ */ jsx(StoryGlobalsContext.Provider, { value: labValues, children: /* @__PURE__ */ jsx(DependenciesContext.Provider, { value: dependencies ?? null, children: /* @__PURE__ */ jsx(FramePoolContext.Provider, { value: pool, children: /* @__PURE__ */ jsx(TrialFramesContext.Provider, { value: frames, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(StoryGlobalsContext.Provider, { value: labValues, children: /* @__PURE__ */ jsx(DependenciesContext.Provider, { value: dependencies ?? null, children: /* @__PURE__ */ jsx(FramePoolContext.Provider, { value: pool, children: /* @__PURE__ */ jsx(TrialFramesContext.Provider, { value: frames, children: /* @__PURE__ */ jsx(TrialClocksContext.Provider, { value: clocks, children: /* @__PURE__ */ jsxs(
     Lab,
     {
-      title: "weaselforge",
+      title,
       density: "roomy",
       ...labTheme ? { theme: labTheme } : {},
       instruments: registry.instruments,
@@ -1854,6 +2021,8 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
       ...config?.path !== void 0 ? { path: config.path } : {},
       children: [
         /* @__PURE__ */ jsx(RouteOpener, { index: entries }),
+        /* @__PURE__ */ jsx(RouteKnobs, { instruments: registry.instruments, isReady: registry.isReady }),
+        /* @__PURE__ */ jsx(RoutePlayhead, {}),
         /* @__PURE__ */ jsx(
           StoryInfoDialog,
           {
@@ -1866,7 +2035,7 @@ function Workshop({ index, frameUrl, importers, setup, changes, config, stories
         /* @__PURE__ */ jsx(LabGlobals, { declarations, onChange: reportLabValues })
       ]
     }
-  ) }) }) }) });
+  ) }) }) }) }) });
 }
 function mountWorkshop({ container, ...props }) {
   const target = container ?? document.getElementById("root");