executable-stories-react 0.16.0 → 0.17.0

package/dist/interactive.cjs

@@ -1747,7 +1747,7 @@ function ReportSpanGraph() {
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h2", { id: "es-span-graph-heading", className: "text-base font-semibold text-foreground", children: "Architecture, as it ran" }),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: "Derived from this run\u2019s traces. Every component was named by a span while a scenario ran, so nothing here is inferred from the code. Instrumented, exercised paths only: a component no scenario reaches does not appear." }),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DocMermaid, { entry: { kind: "mermaid", phase: "static", code } }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("table", { className: "mt-2 w-full text-left text-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("table", { className: "mt-2 w-full border-collapse text-left text-sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("caption", { className: "sr-only", children: "Each component and the scenarios that exercised it" }),
       /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("tr", { className: "text-xs text-muted-foreground", children: [
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("th", { scope: "col", className: "py-1 pr-4 font-medium", children: "Component" }),
@@ -1760,7 +1760,7 @@ function ReportSpanGraph() {
           /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MarkBadge, { node })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("td", { className: "py-1.5 pr-4 text-xs text-muted-foreground", children: LANE_LABEL[node.kind] }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("td", { className: "py-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { className: "flex flex-col gap-0.5", children: node.scenarioIds.map((id) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("a", { href: `#${id}`, className: "text-xs underline underline-offset-2", children: titleById.get(id) ?? id }) }, id)) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("td", { className: "py-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { className: "flex flex-col gap-0.5", children: node.scenarioIds.map((id) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("a", { href: `#${id}`, className: "text-xs text-link underline underline-offset-2 hover:text-foreground", children: titleById.get(id) ?? id }) }, id)) }) })
       ] }, node.id)) })
     ] })
   ] });
@@ -2907,18 +2907,42 @@ function TocContent({ onNavigate }) {
     [report]
   );
   (0, import_react19.useEffect)(() => {
-    if (typeof IntersectionObserver === "undefined") return;
+    if (typeof window === "undefined") return;
     const els = scenarioIds.map((id) => document.getElementById(id)).filter((el) => el !== null);
     if (els.length === 0) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
-        if (visible[0]) setActiveId(visible[0].target.id);
-      },
-      { rootMargin: "-8% 0px -80% 0px" }
-    );
-    els.forEach((el) => observer.observe(el));
-    return () => observer.disconnect();
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      const atBottom = window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2;
+      const line = atBottom ? window.innerHeight : window.innerHeight * 0.2;
+      let active = els[0];
+      let best = -Infinity;
+      let firstId = null;
+      let firstTop = Infinity;
+      for (const el of els) {
+        const top = el.getBoundingClientRect().top;
+        if (top <= line && top > best) {
+          best = top;
+          active = el;
+        }
+        if (top < firstTop) {
+          firstTop = top;
+          firstId = el.id;
+        }
+      }
+      setActiveId(best === -Infinity ? firstId : active.id);
+    };
+    const onScroll = () => {
+      if (frame === 0) frame = requestAnimationFrame(update);
+    };
+    update();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll);
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+      if (frame !== 0) cancelAnimationFrame(frame);
+    };
   }, [scenarioIds]);
   if (report.features.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("ul", { className: "flex list-none flex-col gap-4 pl-0", children: report.features.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("li", { children: [
@@ -3458,6 +3482,7 @@ function ReportInteractiveView({
   staleAfterDays = 7,
   scenarioHistory,
   share = false,
+  architecture = false,
   shareCommand
 }) {
   const [urlState, setUrlState] = useUrlState();
@@ -3668,7 +3693,7 @@ function ReportInteractiveView({
                 /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ReportSummary, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ReportMeta, {})
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ReportSpanGraph, {}),
+              architecture ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ReportSpanGraph, {}) : null,
               /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                 ReportFreshness,
                 {
@@ -3824,7 +3849,10 @@ function MermaidView({ entry, load }) {
         mermaid.initialize({
           startOnLoad: false,
           securityLevel: "strict",
-          theme: prefersDark(ref.current) ? "dark" : "default"
+          // "neutral" in light: the same theme the static, no-JS render uses
+          // in ssr-entry, so a diagram keeps its colours when the island takes
+          // over.
+          theme: prefersDark(ref.current) ? "dark" : "neutral"
         });
         await mermaid.parse(entry.code);
         const id = `es-mermaid-${Math.random().toString(36).slice(2)}`;
@@ -3883,7 +3911,7 @@ function MermaidView({ entry, load }) {
 // src/interactive/island-renderers.tsx
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var HLJS_ESM = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js";
-var MERMAID_ESM = "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
+var MERMAID_ESM = "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
 function cachedCdnModule(url) {
   let loader;
   return () => {