executable-stories-react 0.16.0 → 0.17.0

package/dist/interactive.d.cts

@@ -93,6 +93,12 @@ interface ReportInteractiveProps {
     scenarioHistory?: ScenarioHistoryMap;
     /** Show the Share button in the header (default false). `--html-share` turns it on. */
     share?: boolean;
+    /**
+     * Draw the "Architecture, as it ran" section (default false). Only an
+     * instrumented suite has anything to draw, and the span picture is a
+     * specialist view. `--html-architecture` turns it on.
+     */
+    architecture?: boolean;
     /** Command the share dialog hands over. Default: `npx executable-stories share reports/`. */
     shareCommand?: string;
 }

package/dist/interactive.d.ts

@@ -93,6 +93,12 @@ interface ReportInteractiveProps {
     scenarioHistory?: ScenarioHistoryMap;
     /** Show the Share button in the header (default false). `--html-share` turns it on. */
     share?: boolean;
+    /**
+     * Draw the "Architecture, as it ran" section (default false). Only an
+     * instrumented suite has anything to draw, and the span picture is a
+     * specialist view. `--html-architecture` turns it on.
+     */
+    architecture?: boolean;
     /** Command the share dialog hands over. Default: `npx executable-stories share reports/`. */
     shareCommand?: string;
 }

package/dist/interactive.js

@@ -1711,7 +1711,7 @@ function ReportSpanGraph() {
     /* @__PURE__ */ jsx35("h2", { id: "es-span-graph-heading", className: "text-base font-semibold text-foreground", children: "Architecture, as it ran" }),
     /* @__PURE__ */ jsx35("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__ */ jsx35(DocMermaid, { entry: { kind: "mermaid", phase: "static", code } }),
-    /* @__PURE__ */ jsxs24("table", { className: "mt-2 w-full text-left text-sm", children: [
+    /* @__PURE__ */ jsxs24("table", { className: "mt-2 w-full border-collapse text-left text-sm", children: [
       /* @__PURE__ */ jsx35("caption", { className: "sr-only", children: "Each component and the scenarios that exercised it" }),
       /* @__PURE__ */ jsx35("thead", { children: /* @__PURE__ */ jsxs24("tr", { className: "text-xs text-muted-foreground", children: [
         /* @__PURE__ */ jsx35("th", { scope: "col", className: "py-1 pr-4 font-medium", children: "Component" }),
@@ -1724,7 +1724,7 @@ function ReportSpanGraph() {
           /* @__PURE__ */ jsx35(MarkBadge, { node })
         ] }),
         /* @__PURE__ */ jsx35("td", { className: "py-1.5 pr-4 text-xs text-muted-foreground", children: LANE_LABEL[node.kind] }),
-        /* @__PURE__ */ jsx35("td", { className: "py-1.5", children: /* @__PURE__ */ jsx35("ul", { className: "flex flex-col gap-0.5", children: node.scenarioIds.map((id) => /* @__PURE__ */ jsx35("li", { children: /* @__PURE__ */ jsx35("a", { href: `#${id}`, className: "text-xs underline underline-offset-2", children: titleById.get(id) ?? id }) }, id)) }) })
+        /* @__PURE__ */ jsx35("td", { className: "py-1.5", children: /* @__PURE__ */ jsx35("ul", { className: "flex flex-col gap-0.5", children: node.scenarioIds.map((id) => /* @__PURE__ */ jsx35("li", { children: /* @__PURE__ */ jsx35("a", { href: `#${id}`, className: "text-xs text-link underline underline-offset-2 hover:text-foreground", children: titleById.get(id) ?? id }) }, id)) }) })
       ] }, node.id)) })
     ] })
   ] });
@@ -2874,18 +2874,42 @@ function TocContent({ onNavigate }) {
     [report]
   );
   useEffect7(() => {
-    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__ */ jsx50("ul", { className: "flex list-none flex-col gap-4 pl-0", children: report.features.map((feature) => /* @__PURE__ */ jsxs35("li", { children: [
@@ -3431,6 +3455,7 @@ function ReportInteractiveView({
   staleAfterDays = 7,
   scenarioHistory,
   share = false,
+  architecture = false,
   shareCommand
 }) {
   const [urlState, setUrlState] = useUrlState();
@@ -3641,7 +3666,7 @@ function ReportInteractiveView({
                 /* @__PURE__ */ jsx52(ReportSummary, {}),
                 /* @__PURE__ */ jsx52(ReportMeta, {})
               ] }),
-              /* @__PURE__ */ jsx52(ReportSpanGraph, {}),
+              architecture ? /* @__PURE__ */ jsx52(ReportSpanGraph, {}) : null,
               /* @__PURE__ */ jsx52(
                 ReportFreshness,
                 {
@@ -3797,7 +3822,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)}`;
@@ -3856,7 +3884,7 @@ function MermaidView({ entry, load }) {
 // src/interactive/island-renderers.tsx
 import { jsx as jsx54 } from "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 () => {