executable-stories-react 0.16.0 → 0.17.1

package/dist/index.d.cts

@@ -63,6 +63,12 @@ interface ReportProps {
     title?: string;
     /** Optional theme attribute scope. Use to force "light" or "dark". */
     dataTheme?: "light" | "dark";
+    /**
+     * Draw the "Architecture, as it ran" section above the features. Off by
+     * default: only an instrumented run has anything to draw. `--html-architecture`
+     * turns it on.
+     */
+    architecture?: boolean;
 }
 declare function Report(props: ReportProps): react.JSX.Element;
 

package/dist/index.d.ts

@@ -63,6 +63,12 @@ interface ReportProps {
     title?: string;
     /** Optional theme attribute scope. Use to force "light" or "dark". */
     dataTheme?: "light" | "dark";
+    /**
+     * Draw the "Architecture, as it ran" section above the features. Off by
+     * default: only an instrumented run has anything to draw. `--html-architecture`
+     * turns it on.
+     */
+    architecture?: boolean;
 }
 declare function Report(props: ReportProps): react.JSX.Element;
 

package/dist/index.js

@@ -1811,7 +1811,7 @@ function ReportSpanGraph() {
     /* @__PURE__ */ jsx37("h2", { id: "es-span-graph-heading", className: "text-base font-semibold text-foreground", children: "Architecture, as it ran" }),
     /* @__PURE__ */ jsx37("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__ */ jsx37(DocMermaid, { entry: { kind: "mermaid", phase: "static", code } }),
-    /* @__PURE__ */ jsxs25("table", { className: "mt-2 w-full text-left text-sm", children: [
+    /* @__PURE__ */ jsxs25("table", { className: "mt-2 w-full border-collapse text-left text-sm", children: [
       /* @__PURE__ */ jsx37("caption", { className: "sr-only", children: "Each component and the scenarios that exercised it" }),
       /* @__PURE__ */ jsx37("thead", { children: /* @__PURE__ */ jsxs25("tr", { className: "text-xs text-muted-foreground", children: [
         /* @__PURE__ */ jsx37("th", { scope: "col", className: "py-1 pr-4 font-medium", children: "Component" }),
@@ -1824,7 +1824,7 @@ function ReportSpanGraph() {
           /* @__PURE__ */ jsx37(MarkBadge, { node })
         ] }),
         /* @__PURE__ */ jsx37("td", { className: "py-1.5 pr-4 text-xs text-muted-foreground", children: LANE_LABEL[node.kind] }),
-        /* @__PURE__ */ jsx37("td", { className: "py-1.5", children: /* @__PURE__ */ jsx37("ul", { className: "flex flex-col gap-0.5", children: node.scenarioIds.map((id) => /* @__PURE__ */ jsx37("li", { children: /* @__PURE__ */ jsx37("a", { href: `#${id}`, className: "text-xs underline underline-offset-2", children: titleById.get(id) ?? id }) }, id)) }) })
+        /* @__PURE__ */ jsx37("td", { className: "py-1.5", children: /* @__PURE__ */ jsx37("ul", { className: "flex flex-col gap-0.5", children: node.scenarioIds.map((id) => /* @__PURE__ */ jsx37("li", { children: /* @__PURE__ */ jsx37("a", { href: `#${id}`, className: "text-xs text-link underline underline-offset-2 hover:text-foreground", children: titleById.get(id) ?? id }) }, id)) }) })
       ] }, node.id)) })
     ] })
   ] });
@@ -1833,7 +1833,7 @@ function ReportSpanGraph() {
 // src/components/Report.tsx
 import { jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
 function Report(props) {
-  const { report, customRenderers, renderers, className, title, dataTheme } = props;
+  const { report, customRenderers, renderers, className, title, dataTheme, architecture = false } = props;
   const result = unwrapReport(report);
   if (!result.ok) {
     return /* @__PURE__ */ jsx38(ReportErrorShell, { error: result.error, className, title, dataTheme });
@@ -1842,7 +1842,7 @@ function Report(props) {
   const hasContent = data.features.length > 0;
   return /* @__PURE__ */ jsx38(ReportRoot, { report: data, customRenderers, renderers, children: /* @__PURE__ */ jsxs26("main", { className: cn("es-report", className), "aria-label": title ?? "Test report", "data-theme": dataTheme, children: [
     /* @__PURE__ */ jsx38("header", { className: "es-report-header", children: /* @__PURE__ */ jsx38(ReportTitleBlock, { title }) }),
-    /* @__PURE__ */ jsx38(ReportSpanGraph, {}),
+    architecture ? /* @__PURE__ */ jsx38(ReportSpanGraph, {}) : null,
     hasContent ? /* @__PURE__ */ jsx38(ReportFeatureList, {}) : /* @__PURE__ */ jsx38(ReportEmpty, {})
   ] }) });
 }
@@ -1877,7 +1877,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)}`;