executable-stories-react 0.16.0 → 0.17.0

package/dist/ssr.cjs

@@ -1824,7 +1824,7 @@ function ReportSpanGraph() {
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h2", { id: "es-span-graph-heading", className: "text-base font-semibold text-foreground", children: "Architecture, as it ran" }),
     /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsx)(DocMermaid, { entry: { kind: "mermaid", phase: "static", code } }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("table", { className: "mt-2 w-full text-left text-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("table", { className: "mt-2 w-full border-collapse text-left text-sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("caption", { className: "sr-only", children: "Each component and the scenarios that exercised it" }),
       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("tr", { className: "text-xs text-muted-foreground", children: [
         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("th", { scope: "col", className: "py-1 pr-4 font-medium", children: "Component" }),
@@ -1837,7 +1837,7 @@ function ReportSpanGraph() {
           /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MarkBadge, { node })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("td", { className: "py-1.5 pr-4 text-xs text-muted-foreground", children: LANE_LABEL[node.kind] }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("td", { className: "py-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { className: "flex flex-col gap-0.5", children: node.scenarioIds.map((id) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("a", { href: `#${id}`, className: "text-xs underline underline-offset-2", children: titleById.get(id) ?? id }) }, id)) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("td", { className: "py-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { className: "flex flex-col gap-0.5", children: node.scenarioIds.map((id) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("a", { href: `#${id}`, className: "text-xs text-link underline underline-offset-2 hover:text-foreground", children: titleById.get(id) ?? id }) }, id)) }) })
       ] }, node.id)) })
     ] })
   ] });
@@ -1846,7 +1846,7 @@ function ReportSpanGraph() {
 // src/components/Report.tsx
 var import_jsx_runtime39 = require("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__ */ (0, import_jsx_runtime39.jsx)(ReportErrorShell, { error: result.error, className, title, dataTheme });
@@ -1855,7 +1855,7 @@ function Report(props) {
   const hasContent = data.features.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportRoot, { report: data, customRenderers, renderers, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("main", { className: cn("es-report", className), "aria-label": title ?? "Test report", "data-theme": dataTheme, children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("header", { className: "es-report-header", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportTitleBlock, { title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportSpanGraph, {}),
+    architecture ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportSpanGraph, {}) : null,
     hasContent ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportFeatureList, {}) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ReportEmpty, {})
   ] }) });
 }
@@ -1871,7 +1871,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 = [];
@@ -1917,10 +1917,11 @@ function renderReportToHtml(report, options = {}) {
     staleAfterDays = 7,
     scenarioHistory,
     share = false,
-    shareCommand = ""
+    shareCommand = "",
+    architecture = false
   } = options;
   const markup = (0, import_server.renderToStaticMarkup)(
-    (0, import_react12.createElement)(Report, { report, title })
+    (0, import_react12.createElement)(Report, { report, title, architecture })
   );
   const cdn = cdnAssets(syntaxHighlighting, mermaid);
   const parsed = unwrapReport(report);
@@ -1930,8 +1931,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"}">