@weasel-js/forge 1.5.0

package/dist/chunk-KKF7ZX5E.js

@@ -0,0 +1,572 @@
+import { isNative } from './chunk-2GXKNXTJ.js';
+import { titleFromFile, storyNameFromExport, storyId } from './chunk-UZCXH724.js';
+import { describeSchema, openChannel, answerSchema } from './chunk-O5OQZQRZ.js';
+import { isPortSafe, appliedLocal, coverOf, ArgsContext } from './chunk-KKVTFMWV.js';
+import { stableStringify, PORT_HANDOFF } from './chunk-IOBG7GZQ.js';
+import { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import { createContext, createElement, Component, useContext, useState, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { f } from '@weasel-js/labkit/config';
+
+// src/frame/cssVars.ts
+var VAR_REF = /var\(\s*(--[\w-]+)/g;
+function collect(text, names) {
+  if (!text.includes("var(")) return;
+  for (const [, name] of text.matchAll(VAR_REF)) names.add(name);
+}
+function walkRules(sheet, names) {
+  let rules;
+  try {
+    rules = sheet.cssRules;
+  } catch {
+    return;
+  }
+  for (const rule of Array.from(rules)) {
+    const imported = rule.styleSheet;
+    if (imported) walkRules(imported, names);
+    else collect(rule.cssText, names);
+  }
+}
+function scanCssVars(doc, overridden = () => false) {
+  const names = /* @__PURE__ */ new Set();
+  for (const el of Array.from(doc.querySelectorAll("[style]"))) collect(el.getAttribute("style") ?? "", names);
+  for (const sheet of Array.from(doc.styleSheets)) walkRules(sheet, names);
+  const values = resolveValues(doc, names);
+  return [...names].sort().map((name) => ({ name, value: values.get(name) ?? "", overridden: overridden(name) }));
+}
+function resolveValues(doc, names) {
+  const view = doc.defaultView;
+  const values = /* @__PURE__ */ new Map();
+  if (!view) return values;
+  const root = view.getComputedStyle(doc.documentElement);
+  const missing = [];
+  for (const name of names) {
+    const value = root.getPropertyValue(name).trim();
+    if (value) values.set(name, value);
+    else missing.push(name);
+  }
+  for (const el of missing.length > 0 ? Array.from((doc.body ?? doc.documentElement).querySelectorAll("*")) : []) {
+    const style = view.getComputedStyle(el);
+    for (let i = missing.length - 1; i >= 0; i--) {
+      const value = style.getPropertyValue(missing[i]).trim();
+      if (!value) continue;
+      values.set(missing[i], value);
+      missing.splice(i, 1);
+    }
+    if (missing.length === 0) break;
+  }
+  return values;
+}
+function resolveCssVar(doc, name) {
+  return resolveValues(doc, [name]).get(name) ?? "";
+}
+function createOverrides(doc, scope = ":root") {
+  const values = /* @__PURE__ */ new Map();
+  const style = doc.createElement("style");
+  style.setAttribute("data-fg-overrides", "");
+  const keepLast = () => {
+    if (style.parentNode === doc.head) {
+      let next = style.nextElementSibling;
+      while (next?.hasAttribute("data-fg-overrides")) next = next.nextElementSibling;
+      if (next === null) return;
+    }
+    doc.head.append(style);
+  };
+  const write = () => {
+    const decls = [...values].map(([name, value]) => `  ${name}: ${value};`);
+    style.textContent = decls.length > 0 ? `:is(${scope}):not(#fg-overrides) {
+${decls.join("\n")}
+}
+` : "";
+  };
+  keepLast();
+  const observer = typeof MutationObserver === "undefined" ? null : new MutationObserver(keepLast);
+  observer?.observe(doc.head, { childList: true });
+  return {
+    set(name, value) {
+      if (value === null) values.delete(name);
+      else values.set(name, value);
+      write();
+    },
+    has: (name) => values.has(name),
+    owns: (node) => style.contains(node),
+    dispose() {
+      observer?.disconnect();
+      style.remove();
+    }
+  };
+}
+function RenderStory({ story, ctx }) {
+  return story.render(ctx);
+}
+function Decorated({ story, ctx, decorators }) {
+  let inner = () => /* @__PURE__ */ jsx(RenderStory, { story, ctx });
+  for (const decorate of [...story.decorators, ...decorators]) {
+    const wrapped = inner;
+    inner = () => decorate(wrapped, ctx);
+  }
+  return inner();
+}
+var StoryHost = class extends Component {
+  state = { error: null, failed: false, resetKey: this.props.resetKey };
+  static getDerivedStateFromProps(props, state) {
+    return props.resetKey === state.resetKey ? null : { error: null, failed: false, resetKey: props.resetKey };
+  }
+  static getDerivedStateFromError(error) {
+    return { error, failed: true };
+  }
+  componentDidCatch(error) {
+    this.props.onError(error);
+  }
+  render() {
+    if (this.state.failed) {
+      const { error } = this.state;
+      return /* @__PURE__ */ jsx("pre", { className: "fg-frame__fault", children: error instanceof Error ? error.message : String(error) });
+    }
+    const { story, ctx, decorators } = this.props;
+    return /* @__PURE__ */ jsx(Decorated, { story, ctx, decorators });
+  }
+};
+var VARS_SETTLE_MS = 100;
+function fault(phase, error, seq) {
+  return {
+    type: "fault",
+    phase,
+    message: error instanceof Error ? error.message : String(error),
+    ...error instanceof Error && error.stack ? { stack: error.stack } : {},
+    ...seq === void 0 ? {} : { seq }
+  };
+}
+function startFrame({ story, channel, container, setup = {} }) {
+  const { send } = channel;
+  send({ type: "ready", schema: describeSchema(story.config), layout: story.layout, viewport: story.viewport });
+  const wrapper = document.createElement("div");
+  wrapper.className = `fg-frame fg-frame--${story.layout}`;
+  container.append(wrapper);
+  const root = createRoot(wrapper);
+  const decorators = setup.decorators ?? [];
+  let initialized = false;
+  let config;
+  let state = null;
+  let globals = {};
+  let answeredKey = null;
+  let resetKey = 0;
+  let seq = 0;
+  const overrides = createOverrides(document, setup.cssVarsScope);
+  let lastVars = null;
+  let reported = null;
+  const publishVars = (vars) => {
+    lastVars = vars;
+    const key = JSON.stringify(vars);
+    if (key === reported) return;
+    reported = key;
+    send({ type: "vars", vars });
+  };
+  const reportVars = () => publishVars(scanCssVars(document, overrides.has));
+  const ownMutation = (record) => overrides.owns(record.target) || record.type === "childList" && [...record.addedNodes, ...record.removedNodes].length > 0 && [...record.addedNodes, ...record.removedNodes].every(overrides.owns);
+  let settleTimer;
+  const mutations = typeof MutationObserver === "undefined" ? null : new MutationObserver((records) => {
+    if (records.every(ownMutation)) return;
+    clearTimeout(settleTimer);
+    settleTimer = setTimeout(reportVars, VARS_SETTLE_MS);
+  });
+  mutations?.observe(document.documentElement, {
+    subtree: true,
+    childList: true,
+    characterData: true,
+    attributes: true,
+    attributeFilter: ["style", "class"]
+  });
+  const setConfig = (path, value) => send({ type: "setConfig", path, value });
+  const setState = (next) => {
+    state = typeof next === "function" ? next(state) : next;
+    send({ type: "setState", state });
+    render();
+  };
+  const render = () => {
+    const ctx = { config, setConfig, state, setState, globals, title: story.title, name: story.name };
+    const at = seq;
+    root.render(
+      /* @__PURE__ */ jsx(
+        StoryHost,
+        {
+          story,
+          ctx,
+          decorators,
+          resetKey,
+          onError: (error) => send(fault("render", error, at))
+        }
+      )
+    );
+    const key = stableStringify(config);
+    if (key !== answeredKey) {
+      answeredKey = key;
+      send({ type: "answers", answers: { configKey: key, ...answerSchema(story.config, config) } });
+    }
+  };
+  const input = (apply) => {
+    seq += 1;
+    try {
+      apply();
+      if (!initialized) return;
+      resetKey += 1;
+      flushSync(render);
+    } catch (error) {
+      send(fault("render", error, seq));
+      return;
+    }
+    reportVars();
+  };
+  const play = async () => {
+    try {
+      await story.play?.({ canvasElement: wrapper, config, globals });
+      send({ type: "played", ok: true });
+    } catch (error) {
+      send({ type: "played", ok: false, message: error instanceof Error ? error.message : String(error) });
+      send(fault("play", error));
+    }
+  };
+  const off = channel.on((msg) => {
+    switch (msg.type) {
+      case "init":
+        input(() => {
+          initialized = true;
+          config = msg.config;
+          globals = msg.globals;
+          state = msg.state;
+          if (state === null && story.initialState) {
+            state = story.initialState(config);
+            send({ type: "setState", state });
+          }
+          setup.applyGlobals?.(globals, document.documentElement);
+        });
+        break;
+      case "config":
+        input(() => {
+          config = msg.config;
+        });
+        break;
+      case "state":
+        input(() => {
+          state = msg.state;
+        });
+        break;
+      case "globals":
+        input(() => {
+          globals = msg.globals;
+          setup.applyGlobals?.(globals, document.documentElement);
+        });
+        break;
+      case "vars.set": {
+        overrides.set(msg.name, msg.value);
+        const at = lastVars?.findIndex((v) => v.name === msg.name) ?? -1;
+        if (!lastVars || at < 0) break;
+        const vars = lastVars.slice();
+        vars[at] = { name: msg.name, value: resolveCssVar(document, msg.name), overridden: overrides.has(msg.name) };
+        publishVars(vars);
+        break;
+      }
+      case "play":
+        void play();
+        break;
+    }
+  });
+  const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
+    const { width, height } = wrapper.getBoundingClientRect();
+    send({ type: "size", width: Math.ceil(width), height: Math.ceil(height) });
+  });
+  observer?.observe(wrapper);
+  return () => {
+    off();
+    observer?.disconnect();
+    mutations?.disconnect();
+    clearTimeout(settleTimer);
+    overrides.dispose();
+    root.unmount();
+    wrapper.remove();
+  };
+}
+function reportImportFault(channel, error) {
+  channel.send(fault("import", error));
+}
+
+// src/csf/isPlainObject.ts
+var isPlainObject = (value) => !!value && typeof value === "object" && Object.getPrototypeOf(value) === Object.prototype;
+
+// src/csf/argsToSchema.ts
+function controlOf(argType) {
+  const { control } = argType;
+  if (control === false) return false;
+  if (typeof control === "string") return { type: control };
+  return { type: control?.type, min: control?.min, max: control?.max, step: control?.step };
+}
+function stringOptions(argType) {
+  const opts = argType.options;
+  return opts && opts.length > 0 && opts.every((o) => typeof o === "string") ? opts : null;
+}
+function inferred(value) {
+  switch (typeof value) {
+    case "number":
+      return f.number(value);
+    case "boolean":
+      return f.boolean(value);
+    case "string":
+      return f.string(value);
+    default:
+      return Array.isArray(value) || isPlainObject(value) ? f.custom("json", value) : null;
+  }
+}
+function bounded(node, control) {
+  let out = node;
+  if (control.min !== void 0 && control.max !== void 0) out = out.range(control.min, control.max);
+  if (control.step !== void 0) out = out.step(control.step);
+  return out;
+}
+function controlled(control, argType, has, value) {
+  const options = stringOptions(argType);
+  const def = () => has ? value : void 0;
+  switch (control.type) {
+    case "number": {
+      const node = bounded(f.number(def()), control);
+      return control.min !== void 0 && control.max !== void 0 ? node.input() : node;
+    }
+    case "range":
+    case "slider":
+      return has ? bounded(f.number(def()), control).slider() : null;
+    case "boolean":
+      return f.boolean(def());
+    case "switch":
+      return f.boolean(def()).toggle();
+    case "text":
+    case "textarea":
+      return f.string(def());
+    case "select":
+    case "radio":
+    case "inline-radio":
+    case void 0: {
+      if (!options) return control.type === void 0 && has ? inferred(value) : null;
+      const node = f.enum(def(), options);
+      return control.type === "radio" || control.type === "inline-radio" ? node.radio() : node;
+    }
+    case "object":
+      return has ? f.custom("json", value) : null;
+    default:
+      return has ? inferred(value) : null;
+  }
+}
+function matched(key, value, argType, matchers) {
+  if (typeof value !== "string" || argType?.control !== void 0 || stringOptions(argType ?? {})) return null;
+  return matchers.color?.test(key) ? f.color(value) : null;
+}
+function argsToSchema(args, argTypes, matchers = {}) {
+  const nodes = {};
+  for (const key of /* @__PURE__ */ new Set([...Object.keys(args), ...Object.keys(argTypes)])) {
+    const has = key in args;
+    const value = args[key];
+    if (has && !isPortSafe(value)) continue;
+    const argType = argTypes[key];
+    const control = argType ? controlOf(argType) : false;
+    let node = (has ? matched(key, value, argType, matchers) : null) ?? (control ? controlled(control, argType ?? {}, has, value) : has ? inferred(value) : null);
+    if (!node) continue;
+    if (argType && (argType.control === false || argType.table?.disable)) node = node.hidden();
+    if (argType?.description) node = node.describe(argType.description);
+    if (argType?.name) node = node.label(argType.name);
+    nodes[key] = node;
+  }
+  return f.schema(nodes);
+}
+
+// src/csf/loadCsfModule.tsx
+var LAYOUTS = ["centered", "padded", "fullscreen"];
+var asArray = (value) => value === void 0 ? [] : Array.isArray(value) ? value : [value];
+var withoutUndefined = (args) => Object.fromEntries(Object.entries(args).filter(([, value]) => value !== void 0));
+var matches = (key, filter) => Array.isArray(filter) ? filter.includes(key) : key.match(filter) !== null;
+function combineParameters(...sources) {
+  const out = {};
+  for (const source of sources) {
+    for (const [key, value] of Object.entries(source ?? {})) {
+      if (value === void 0) continue;
+      out[key] = isPlainObject(value) && isPlainObject(out[key]) ? combineParameters(out[key], value) : value;
+    }
+  }
+  return out;
+}
+function resolveViewport(parameters, globals) {
+  const selected = globals.viewport;
+  const options = parameters.viewport?.options;
+  const styles = selected?.value ? options?.[selected.value]?.styles : void 0;
+  const px = (v) => v && /^\d+(\.\d+)?px$/.test(v) ? Number.parseFloat(v) : Number.NaN;
+  const width = px(styles?.width);
+  const height = px(styles?.height);
+  if (Number.isNaN(width) || Number.isNaN(height)) return null;
+  return selected?.isRotated ? { width: height, height: width } : { width, height };
+}
+var InnerStory = createContext(null);
+function Story() {
+  return useContext(InnerStory)?.() ?? null;
+}
+function Call({ fn }) {
+  return fn();
+}
+var LocalArgsContext = createContext(null);
+function Scoped({
+  id,
+  build,
+  fn
+}) {
+  const outer = useContext(LocalArgsContext);
+  const [local, setLocal] = useState({});
+  const shared = outer?.story === id ? outer : { story: id, local, setLocal };
+  const [scope, context] = build(shared);
+  const { config } = scope;
+  const prune = shared.setLocal;
+  useEffect(() => {
+    prune((prev) => {
+      const kept = Object.entries(prev).filter(([key, entry]) => coverOf(config[key]) === entry.over);
+      return kept.length === Object.keys(prev).length ? prev : Object.fromEntries(kept);
+    });
+  }, [config, prune]);
+  return createElement(
+    LocalArgsContext.Provider,
+    { value: shared },
+    createElement(ArgsContext.Provider, { value: scope }, createElement(Call, { fn: () => fn(context) }))
+  );
+}
+function loadCsfModule(mod, file, root, projectParameters = {}) {
+  const meta = isPlainObject(mod.default) ? mod.default : {};
+  const title = meta.title ?? titleFromFile(file, root);
+  const stories = [];
+  for (const [exportName, value] of Object.entries(mod)) {
+    if (exportName === "default" || exportName === "__namedExportsOrder" || exportName === "__esModule") continue;
+    if (meta.includeStories && !matches(exportName, meta.includeStories)) continue;
+    if (meta.excludeStories && matches(exportName, meta.excludeStories)) continue;
+    if (!value || typeof value !== "object" && typeof value !== "function") continue;
+    const spec = typeof value === "function" ? { ...value, render: value } : value;
+    const id = storyId(title, exportName);
+    const name = spec.name || spec.storyName || storyNameFromExport(exportName);
+    const args = { ...meta.args, ...spec.args };
+    const parameters = combineParameters(projectParameters, meta.parameters, spec.parameters);
+    const matchers = parameters.controls?.matchers;
+    const config = argsToSchema(
+      args,
+      combineParameters(meta.argTypes, spec.argTypes),
+      isPlainObject(matchers) ? matchers : {}
+    );
+    const defaults = config.defaults();
+    const storyGlobals = { ...meta.globals, ...spec.globals };
+    const component = meta.component;
+    const renderFn = spec.render ?? meta.render ?? (component ? (a) => createElement(component, a) : void 0);
+    const csfContext = (config2, globals, local = {}) => ({
+      args: withoutUndefined({ ...args, ...withoutUndefined(config2), ...appliedLocal(local, config2) }),
+      globals,
+      parameters,
+      title,
+      name,
+      id,
+      viewMode: "story"
+    });
+    const scoped = (ctx, fn) => createElement(Scoped, {
+      id,
+      build: ({ local, setLocal }) => {
+        const context = csfContext(ctx.config, ctx.globals, local);
+        const scope = {
+          args: context.args,
+          config: ctx.config,
+          defaults,
+          original: args,
+          setConfig: ctx.setConfig,
+          setLocal
+        };
+        return [scope, context];
+      },
+      fn
+    });
+    const adapt = (decorator) => (inner, ctx) => createElement(
+      InnerStory.Provider,
+      { value: inner },
+      scoped(ctx, (context) => decorator(Story, context))
+    );
+    const layout = parameters.layout;
+    const play = spec.play ?? meta.play;
+    stories.push({
+      id,
+      title,
+      name,
+      exportName,
+      config,
+      initialState: null,
+      render: (ctx) => {
+        if (!renderFn) return null;
+        return scoped(ctx, (context) => renderFn(context.args, context));
+      },
+      decorators: [...asArray(spec.decorators), ...asArray(meta.decorators)].map(adapt),
+      layout: layout && LAYOUTS.includes(layout) ? layout : "padded",
+      viewport: resolveViewport(parameters, storyGlobals),
+      play: play ? ({ canvasElement, config: config2, globals }) => play({ ...csfContext(config2, globals), canvasElement, step: async (_label, fn) => fn() }) : null
+    });
+  }
+  return stories;
+}
+function loadNativeModule(mod, file, root) {
+  const metaSpec = isNative(mod.default, "meta") ? mod.default : {};
+  const title = metaSpec.title ?? titleFromFile(file, root);
+  const stories = [];
+  for (const [exportName, value] of Object.entries(mod)) {
+    if (exportName === "default" || !isNative(value, "story")) continue;
+    const spec = value;
+    stories.push({
+      id: storyId(title, exportName),
+      title,
+      name: spec.name ?? storyNameFromExport(exportName),
+      exportName,
+      config: spec.config ?? f.schema({}),
+      initialState: spec.state ?? null,
+      render: spec.render,
+      decorators: [...spec.decorators ?? [], ...metaSpec.decorators ?? []],
+      layout: spec.layout ?? metaSpec.layout ?? "centered",
+      viewport: spec.viewport ?? null,
+      play: spec.play ?? null
+    });
+  }
+  return stories;
+}
+
+// src/frame/mountFrame.tsx
+function loadStories(mod, file, root, parameters) {
+  return isNative(mod.default, "meta") ? loadNativeModule(mod, file, root) : loadCsfModule(mod, file, root, parameters);
+}
+function waitForPort() {
+  return new Promise((resolve) => {
+    const onMessage = (event) => {
+      const data = event.data;
+      const port = event.ports[0];
+      if (event.origin !== location.origin || event.source !== window.parent) return;
+      if (typeof data !== "object" || data === null || data.type !== PORT_HANDOFF || !port) return;
+      window.removeEventListener("message", onMessage);
+      resolve(port);
+    };
+    window.addEventListener("message", onMessage);
+  });
+}
+async function mountFrame(options) {
+  const channel = openChannel(await waitForPort());
+  const id = location.hash.slice(1);
+  try {
+    const entry = options.index.find((e) => e.id === id);
+    if (!entry) throw new Error(`No story with id "${id}"`);
+    const importer = options.importers[entry.file];
+    if (!importer) throw new Error(`No importer for ${entry.file}`);
+    const mod = await importer();
+    const stories = (options.load ?? loadStories)(mod, entry.file, options.root, options.setup?.parameters);
+    const story = stories.find((s) => s.exportName === entry.exportName);
+    if (!story) throw new Error(`${entry.file} has no story export "${entry.exportName}"`);
+    startFrame({ story, channel, container: document.getElementById("root") ?? document.body, setup: options.setup });
+  } catch (error) {
+    reportImportFault(channel, error);
+  }
+}
+
+export { loadStories, mountFrame, reportImportFault, startFrame };
+//# sourceMappingURL=chunk-KKF7ZX5E.js.map
+//# sourceMappingURL=chunk-KKF7ZX5E.js.map