executable-stories-react 0.8.0 → 0.9.0

package/dist/interactive.cjs

@@ -47,7 +47,7 @@ __export(interactive_exports, {
 module.exports = __toCommonJS(interactive_exports);
 
 // src/interactive/ReportInteractive.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/result.ts
 var ok = (data) => ({ ok: true, data });
@@ -1012,11 +1012,11 @@ function flakinessOf(entries) {
   if (transitionScore > 0.2 || failureRate > 0.3) return "unstable";
   return "stable";
 }
-function diffSinceLastRun(history2, scenarios) {
+function diffSinceLastRun(history, scenarios) {
   let hasPreviousRun = false;
   const delta = { newlyFailing: [], newlyPassing: [], added: [] };
   for (const scenario of scenarios) {
-    const entries = history2[scenario.id];
+    const entries = history[scenario.id];
     if (!entries || entries.length === 0) continue;
     const last = entries[entries.length - 1];
     const prev = entries[entries.length - 2];
@@ -1046,8 +1046,8 @@ function dotTitle(e) {
   return parts.join(" \xB7 ");
 }
 function ScenarioRunHistory({ scenarioId }) {
-  const history2 = useScenarioHistory();
-  const entries = history2?.[scenarioId];
+  const history = useScenarioHistory();
+  const entries = history?.[scenarioId];
   if (!entries || entries.length < 2) return null;
   const recent = entries.slice(-MAX_DOTS);
   const flaky = flakinessOf(recent) === "flaky";
@@ -2011,6 +2011,54 @@ var ReportSearch = (0, import_react8.forwardRef)(
 // src/interactive/ReportFailureBanner.tsx
 var import_react9 = require("react");
 
+// src/lib/hash-state.ts
+var DEFAULT_URL_STATE = {
+  query: "",
+  status: "all",
+  tags: [],
+  detail: "full"
+};
+var STATUSES = ["all", "passed", "failed", "skipped", "pending"];
+function splitHash(hash) {
+  const raw = hash.replace(/^#/, "");
+  const split = raw.indexOf("?");
+  if (split === -1) return { anchor: raw, params: new URLSearchParams() };
+  return { anchor: raw.slice(0, split), params: new URLSearchParams(raw.slice(split + 1)) };
+}
+function decodeUrlState(params) {
+  const status = params.get("status");
+  const tags = params.get("tags");
+  return {
+    query: params.get("q") ?? DEFAULT_URL_STATE.query,
+    status: STATUSES.includes(status) ? status : DEFAULT_URL_STATE.status,
+    tags: tags ? tags.split(",").filter(Boolean) : [],
+    detail: params.get("docs") === "0" ? "minimal" : "full"
+  };
+}
+function encodeUrlState(state) {
+  const params = new URLSearchParams();
+  if (state.query) params.set("q", state.query);
+  if (state.status !== "all") params.set("status", state.status);
+  if (state.tags.length > 0) params.set("tags", state.tags.join(","));
+  if (state.detail === "minimal") params.set("docs", "0");
+  return params.toString();
+}
+function formatHash(anchor, params) {
+  if (params) return `#${anchor}?${params}`;
+  return anchor ? `#${anchor}` : "";
+}
+function writeHash(anchor, params) {
+  if (typeof window === "undefined") return;
+  const next = formatHash(anchor, params);
+  if (next === window.location.hash) return;
+  const url = next || window.location.href.split("#")[0];
+  try {
+    window.history.replaceState(window.history.state, "", url);
+  } catch {
+    window.location.hash = next.slice(1);
+  }
+}
+
 // src/lib/scroll.ts
 function prefersReducedMotion() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
@@ -2026,8 +2074,8 @@ function scrollToScenarioId(scenarioId, options = {}) {
     behavior: prefersReducedMotion() ? "auto" : "smooth",
     block: "start"
   });
-  if (options.updateHash !== false && typeof history !== "undefined") {
-    history.replaceState(null, "", `#${scenarioId}`);
+  if (options.updateHash !== false) {
+    writeHash(scenarioId, splitHash(window.location.hash).params.toString());
   }
 }
 
@@ -2129,12 +2177,12 @@ function ScenarioLinks({ scenarios, tone }) {
   ] });
 }
 function ReportLastRunDelta({
-  history: history2,
+  history,
   report
 }) {
-  if (!history2) return null;
+  if (!history) return null;
   const scenarios = report.features.flatMap((f) => f.scenarios.map((s) => ({ id: s.id, title: s.title })));
-  const delta = diffSinceLastRun(history2, scenarios);
+  const delta = diffSinceLastRun(history, scenarios);
   if (!delta) return null;
   const { newlyFailing, newlyPassing, added } = delta;
   if (newlyFailing.length === 0 && newlyPassing.length === 0 && added.length === 0) {
@@ -2320,12 +2368,14 @@ function useKeyboardShortcuts(handlers) {
 // src/interactive/use-deep-link-scroll.ts
 var import_react13 = require("react");
 function useDeepLinkScroll() {
+  const lastAnchor = (0, import_react13.useRef)(null);
   (0, import_react13.useEffect)(() => {
     function scrollToHash() {
-      const hash = window.location.hash.replace(/^#/, "");
-      if (!hash) return;
+      const { anchor } = splitHash(window.location.hash);
+      if (!anchor || anchor === lastAnchor.current) return;
+      lastAnchor.current = anchor;
       requestAnimationFrame(() => {
-        scrollToScenarioId(hash, { updateHash: false });
+        scrollToScenarioId(anchor, { updateHash: false });
       });
     }
     scrollToHash();
@@ -2691,6 +2741,34 @@ function useTheme() {
   return { pref, setPref };
 }
 
+// src/interactive/use-url-state.ts
+var import_react18 = require("react");
+var WRITE_DELAY_MS = 250;
+function useUrlState() {
+  const [state, setState] = (0, import_react18.useState)(DEFAULT_URL_STATE);
+  const ready = (0, import_react18.useRef)(false);
+  (0, import_react18.useEffect)(() => {
+    const read = () => setState(decodeUrlState(splitHash(window.location.hash).params));
+    read();
+    ready.current = true;
+    window.addEventListener("hashchange", read);
+    return () => window.removeEventListener("hashchange", read);
+  }, []);
+  (0, import_react18.useEffect)(() => {
+    if (!ready.current) return;
+    const timer = setTimeout(
+      () => writeHash(splitHash(window.location.hash).anchor, encodeUrlState(state)),
+      WRITE_DELAY_MS
+    );
+    return () => clearTimeout(timer);
+  }, [state]);
+  const update = (0, import_react18.useCallback)(
+    (patch) => setState((prev) => ({ ...prev, ...patch })),
+    []
+  );
+  return [state, update];
+}
+
 // src/interactive/ReportInteractive.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function ReportInteractive(props) {
@@ -2733,25 +2811,32 @@ function ReportInteractiveView({
   staleAfterDays = 7,
   scenarioHistory
 }) {
-  const [query, setQuery] = (0, import_react18.useState)("");
-  const [statusFilter, setStatusFilter] = (0, import_react18.useState)("all");
-  const [activeTags, setActiveTags] = (0, import_react18.useState)([]);
-  const [detail, setDetail] = (0, import_react18.useState)("full");
-  const [helpOpen, setHelpOpen] = (0, import_react18.useState)(false);
+  const [urlState, setUrlState] = useUrlState();
+  const { query, status: statusFilter, tags: activeTags, detail } = urlState;
+  const setQuery = (0, import_react19.useCallback)((next) => setUrlState({ query: next }), [setUrlState]);
+  const setStatusFilter = (0, import_react19.useCallback)(
+    (next) => setUrlState({ status: next }),
+    [setUrlState]
+  );
+  const setDetail = (0, import_react19.useCallback)(
+    (next) => setUrlState({ detail: next }),
+    [setUrlState]
+  );
+  const [helpOpen, setHelpOpen] = (0, import_react19.useState)(false);
   const { pref: themePref, setPref: setThemePref } = useTheme();
-  const searchRef = (0, import_react18.useRef)(null);
-  const expandId = (0, import_react18.useId)();
-  const docsId = (0, import_react18.useId)();
-  const deferredQuery = (0, import_react18.useDeferredValue)(query);
-  const failures = (0, import_react18.useMemo)(() => listFailures(report), [report]);
-  const filtered = (0, import_react18.useMemo)(
+  const searchRef = (0, import_react19.useRef)(null);
+  const expandId = (0, import_react19.useId)();
+  const docsId = (0, import_react19.useId)();
+  const deferredQuery = (0, import_react19.useDeferredValue)(query);
+  const failures = (0, import_react19.useMemo)(() => listFailures(report), [report]);
+  const filtered = (0, import_react19.useMemo)(
     // Features carrying failures float to the top so the first thing on screen
     // is the thing that needs attention; an all-green run keeps source order.
     () => failuresFirst(filterReport(report, { query: deferredQuery, status: statusFilter, tags: activeTags })),
     [report, deferredQuery, statusFilter, activeTags]
   );
   const isFiltering = query !== deferredQuery;
-  const statusOptions = (0, import_react18.useMemo)(() => {
+  const statusOptions = (0, import_react19.useMemo)(() => {
     const s = report.summary;
     const opts = [
       { key: "all", label: "All", count: s.total }
@@ -2762,19 +2847,21 @@ function ReportInteractiveView({
     if (s.pending) opts.push({ key: "pending", label: "Pending", count: s.pending });
     return opts;
   }, [report]);
-  const tagOptions = (0, import_react18.useMemo)(() => allTags(report), [report]);
-  const toggleTag = (0, import_react18.useCallback)(
-    (tag) => setActiveTags((prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]),
-    []
+  const tagOptions = (0, import_react19.useMemo)(() => allTags(report), [report]);
+  const toggleTag = (0, import_react19.useCallback)(
+    (tag) => setUrlState({
+      tags: activeTags.includes(tag) ? activeTags.filter((t) => t !== tag) : [...activeTags, tag]
+    }),
+    [activeTags, setUrlState]
   );
-  const [toast, setToast] = (0, import_react18.useState)(null);
-  const toastTimer = (0, import_react18.useRef)(null);
-  const showToast = (0, import_react18.useCallback)((msg) => {
+  const [toast, setToast] = (0, import_react19.useState)(null);
+  const toastTimer = (0, import_react19.useRef)(null);
+  const showToast = (0, import_react19.useCallback)((msg) => {
     setToast(msg);
     if (toastTimer.current) clearTimeout(toastTimer.current);
     toastTimer.current = setTimeout(() => setToast(null), 1800);
   }, []);
-  const copy = (0, import_react18.useCallback)(
+  const copy = (0, import_react19.useCallback)(
     (text, msg) => {
       if (typeof navigator !== "undefined" && navigator.clipboard) {
         navigator.clipboard.writeText(text).then(() => showToast(msg), () => showToast("Copy failed"));
@@ -2782,7 +2869,7 @@ function ReportInteractiveView({
     },
     [showToast]
   );
-  const scenarioActions = (0, import_react18.useMemo)(
+  const scenarioActions = (0, import_react19.useMemo)(
     () => ({
       copyLink: (s) => copy(scenarioPermalink(s), "Link copied"),
       copyMarkdown: (s) => copy(scenarioToMarkdown2(s), "Markdown copied"),
@@ -2790,15 +2877,15 @@ function ReportInteractiveView({
     }),
     [copy]
   );
-  const failureIndexRef = (0, import_react18.useRef)(0);
-  const allCollapsibleIds = (0, import_react18.useMemo)(
+  const failureIndexRef = (0, import_react19.useRef)(0);
+  const allCollapsibleIds = (0, import_react19.useMemo)(
     () => report.features.flatMap((f) => [f.id, ...f.scenarios.map((s) => s.id)]),
     [report]
   );
-  const collapse = useCollapseState((0, import_react18.useCallback)(() => defaultCollapsedIds(report), [report]));
-  const collapseAll = (0, import_react18.useCallback)(() => collapse.collapseAll(allCollapsibleIds), [collapse, allCollapsibleIds]);
-  const [expandedAll, setExpandedAll] = (0, import_react18.useState)(() => report.summary.failed === 0);
-  const setExpanded = (0, import_react18.useCallback)(
+  const collapse = useCollapseState((0, import_react19.useCallback)(() => defaultCollapsedIds(report), [report]));
+  const collapseAll = (0, import_react19.useCallback)(() => collapse.collapseAll(allCollapsibleIds), [collapse, allCollapsibleIds]);
+  const [expandedAll, setExpandedAll] = (0, import_react19.useState)(() => report.summary.failed === 0);
+  const setExpanded = (0, import_react19.useCallback)(
     (expanded) => {
       if (expanded) collapse.expandAll();
       else collapseAll();
@@ -2806,10 +2893,10 @@ function ReportInteractiveView({
     },
     [collapse, collapseAll]
   );
-  const focusSearch = (0, import_react18.useCallback)(() => {
+  const focusSearch = (0, import_react19.useCallback)(() => {
     searchRef.current?.focus();
   }, []);
-  const stepFailure = (0, import_react18.useCallback)(
+  const stepFailure = (0, import_react19.useCallback)(
     (direction) => {
       if (failures.length === 0) return;
       failureIndexRef.current = (failureIndexRef.current + direction + failures.length) % failures.length;
@@ -2818,10 +2905,10 @@ function ReportInteractiveView({
     },
     [failures]
   );
-  const toggleHelp = (0, import_react18.useCallback)(() => {
+  const toggleHelp = (0, import_react19.useCallback)(() => {
     setHelpOpen((v) => !v);
   }, []);
-  const escape = (0, import_react18.useCallback)(() => {
+  const escape = (0, import_react19.useCallback)(() => {
     if (helpOpen) setHelpOpen(false);
     else if (query !== "") setQuery("");
   }, [helpOpen, query]);
@@ -2958,13 +3045,13 @@ function ReportInteractiveView({
 }
 
 // src/interactive/ReportInteractiveIsland.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/interactive/island-renderers.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/components/doc/MermaidView.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function prefersDark(el) {
   const themed = el?.closest("[data-theme]");
@@ -2973,23 +3060,40 @@ function prefersDark(el) {
   return typeof window !== "undefined" && !!window.matchMedia?.("(prefers-color-scheme: dark)").matches;
 }
 function MermaidView({ entry, load }) {
-  const ref = (0, import_react19.useRef)(null);
-  const [svg, setSvg] = (0, import_react19.useState)(null);
-  (0, import_react19.useEffect)(() => {
+  const ref = (0, import_react20.useRef)(null);
+  const [svg, setSvg] = (0, import_react20.useState)(null);
+  const [error, setError] = (0, import_react20.useState)(null);
+  (0, import_react20.useEffect)(() => {
     let cancelled = false;
     const draw = async () => {
+      let mermaid;
+      try {
+        mermaid = await load();
+      } catch {
+        if (!cancelled) {
+          setSvg(null);
+          setError(null);
+        }
+        return;
+      }
       try {
-        const mermaid = await load();
         mermaid.initialize({
           startOnLoad: false,
           securityLevel: "strict",
           theme: prefersDark(ref.current) ? "dark" : "default"
         });
+        await mermaid.parse(entry.code);
         const id = `es-mermaid-${Math.random().toString(36).slice(2)}`;
         const { svg: rendered } = await mermaid.render(id, entry.code);
-        if (!cancelled) setSvg(rendered);
-      } catch {
-        if (!cancelled) setSvg(null);
+        if (!cancelled) {
+          setSvg(rendered);
+          setError(null);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setSvg(null);
+          setError(err instanceof Error ? err.message : String(err));
+        }
       }
     };
     void draw();
@@ -3015,7 +3119,21 @@ function MermaidView({ entry, load }) {
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(MermaidSource, { entry, ref });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+      "p",
+      {
+        role: "alert",
+        "data-es-mermaid-error": true,
+        className: "mt-3 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive",
+        children: [
+          "Diagram failed to render: ",
+          error
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(MermaidSource, { entry, ref })
+  ] });
 }
 
 // src/interactive/island-renderers.tsx
@@ -3036,8 +3154,8 @@ function cachedCdnModule(url) {
 var loadMermaidFromCdn = cachedCdnModule(MERMAID_ESM);
 var loadHljs = cachedCdnModule(HLJS_ESM);
 function CdnHighlightedCode({ entry }) {
-  const [html, setHtml] = (0, import_react20.useState)(null);
-  (0, import_react20.useEffect)(() => {
+  const [html, setHtml] = (0, import_react21.useState)(null);
+  (0, import_react21.useEffect)(() => {
     let cancelled = false;
     void (async () => {
       try {
@@ -3064,10 +3182,10 @@ function CdnHighlightedCode({ entry }) {
 function buildIslandRenderers(opts) {
   const renderers = {};
   if (opts.mermaid) {
-    renderers.mermaid = (entry) => (0, import_react20.createElement)(MermaidView, { entry, load: loadMermaidFromCdn });
+    renderers.mermaid = (entry) => (0, import_react21.createElement)(MermaidView, { entry, load: loadMermaidFromCdn });
   }
   if (opts.syntaxHighlighting) {
-    renderers.code = (entry) => (0, import_react20.createElement)(CdnHighlightedCode, { entry });
+    renderers.code = (entry) => (0, import_react21.createElement)(CdnHighlightedCode, { entry });
   }
   return renderers;
 }
@@ -3083,7 +3201,7 @@ function ReportInteractiveIsland({
   syntaxHighlighting = true,
   mermaid = true
 }) {
-  const renderers = (0, import_react21.useMemo)(
+  const renderers = (0, import_react22.useMemo)(
     () => buildIslandRenderers({ syntaxHighlighting, mermaid }),
     [syntaxHighlighting, mermaid]
   );