executable-stories-react 0.16.0 → 0.17.0

package/dist/ssr.d.cts

@@ -91,6 +91,8 @@ interface RenderReportToHtmlOptions {
     share?: boolean;
     /** Command the share dialog hands over, e.g. `npx executable-stories share reports/`. */
     shareCommand?: string;
+    /** Draw the "Architecture, as it ran" span section (default false). `--html-architecture`. */
+    architecture?: boolean;
 }
 /**
  * Render a StoryReport (or a parse Result) to a complete, self-contained HTML

package/dist/ssr.d.ts

@@ -91,6 +91,8 @@ interface RenderReportToHtmlOptions {
     share?: boolean;
     /** Command the share dialog hands over, e.g. `npx executable-stories share reports/`. */
     shareCommand?: string;
+    /** Draw the "Architecture, as it ran" span section (default false). `--html-architecture`. */
+    architecture?: boolean;
 }
 /**
  * Render a StoryReport (or a parse Result) to a complete, self-contained HTML

package/dist/ssr.js

@@ -1803,7 +1803,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" }),
@@ -1816,7 +1816,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)) })
     ] })
   ] });
@@ -1825,7 +1825,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 });
@@ -1834,7 +1834,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, {})
   ] }) });
 }
@@ -1850,7 +1850,7 @@ function escapeJsonForScript(json) {
 var HLJS_URL = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js";
 var HLJS_CSS_LIGHT = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css";
 var HLJS_CSS_DARK = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css";
-var MERMAID_URL = "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
+var MERMAID_URL = "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
 function cdnAssets(syntaxHighlighting, mermaid) {
   const headParts = [];
   const imports = [];
@@ -1896,10 +1896,11 @@ function renderReportToHtml(report, options = {}) {
     staleAfterDays = 7,
     scenarioHistory,
     share = false,
-    shareCommand = ""
+    shareCommand = "",
+    architecture = false
   } = options;
   const markup = renderToStaticMarkup(
-    createElement(Report, { report, title })
+    createElement(Report, { report, title, architecture })
   );
   const cdn = cdnAssets(syntaxHighlighting, mermaid);
   const parsed = unwrapReport(report);
@@ -1909,8 +1910,9 @@ function renderReportToHtml(report, options = {}) {
   const historyScript = interactive && scenarioHistory && Object.keys(scenarioHistory).length > 0 ? `<script type="application/json" id="${HISTORY_ID}">${escapeJsonForScript(JSON.stringify(scenarioHistory))}</script>` : "";
   const islandTag = interactive ? `<script>${islandScript}</script>` : "";
   const cdnBody = interactive ? "" : cdn.body;
+  const architectureAttr = architecture ? ` data-es-architecture="true"` : "";
   const shareAttrs = share ? ` data-es-share="true"${shareCommand ? ` data-es-share-cmd="${escapeHtml(shareCommand)}"` : ""}` : "";
-  const islandConfigAttrs = interactive ? ` data-es-syntax="${syntaxHighlighting ? "true" : "false"}" data-es-mermaid="${mermaid ? "true" : "false"}" data-es-stale-days="${Number.isFinite(staleAfterDays) && staleAfterDays >= 0 ? staleAfterDays : 7}"${shareAttrs}` : "";
+  const islandConfigAttrs = interactive ? ` data-es-syntax="${syntaxHighlighting ? "true" : "false"}" data-es-mermaid="${mermaid ? "true" : "false"}" data-es-stale-days="${Number.isFinite(staleAfterDays) && staleAfterDays >= 0 ? staleAfterDays : 7}"${shareAttrs}${architectureAttr}` : "";
   const rootAttrs = interactive ? ` id="${ROOT_ID}" data-title="${escapeHtml(title)}"${islandConfigAttrs}` : "";
   return `<!DOCTYPE html>
 <html lang="${escapeHtml(lang)}" data-theme="${theme === "dark" ? "dark" : "light"}">