executable-stories-react 0.18.0 → 0.20.0

package/dist/interactive.js

@@ -520,7 +520,7 @@ function ReportDocEntries({ entries }) {
 }
 
 // src/components/ReportSteps.tsx
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 var STEP_GLYPH = {
   passed: "\u2713",
   failed: "\u2717",
@@ -597,6 +597,23 @@ function ReportStepItem({
             children: step.errorMessage
           }
         ) : null,
+        step.expected !== void 0 || step.actual !== void 0 ? /* @__PURE__ */ jsxs10(
+          "dl",
+          {
+            "data-slot": "step-comparison",
+            className: "mt-1.5 ml-6 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 font-mono text-xs",
+            children: [
+              step.expected !== void 0 ? /* @__PURE__ */ jsxs10(Fragment6, { children: [
+                /* @__PURE__ */ jsx19("dt", { className: "text-muted-foreground", children: "Expected" }),
+                /* @__PURE__ */ jsx19("dd", { className: "overflow-x-auto whitespace-pre-wrap text-pass", children: step.expected })
+              ] }) : null,
+              step.actual !== void 0 ? /* @__PURE__ */ jsxs10(Fragment6, { children: [
+                /* @__PURE__ */ jsx19("dt", { className: "text-muted-foreground", children: "Actual" }),
+                /* @__PURE__ */ jsx19("dd", { className: "overflow-x-auto whitespace-pre-wrap text-fail", children: step.actual })
+              ] }) : null
+            ]
+          }
+        ) : null,
         step.docEntries.length > 0 ? /* @__PURE__ */ jsx19("div", { "data-es-docs": true, className: "mt-2 ml-6", children: /* @__PURE__ */ jsx19(ReportDocEntries, { entries: step.docEntries }) }) : null
       ]
     }
@@ -720,43 +737,77 @@ function StateCardView({ card }) {
 }
 
 // src/components/ReportAttachments.tsx
-import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+function attachmentText(att) {
+  if (att.contentEncoding !== "BASE64") return att.body;
+  try {
+    return new TextDecoder().decode(Uint8Array.from(atob(att.body), (c) => c.charCodeAt(0)));
+  } catch {
+    return void 0;
+  }
+}
+function preview(att) {
+  const type = att.mediaType.split(";")[0].trim().toLowerCase();
+  const text = attachmentText(att);
+  if (text === void 0) return null;
+  if (type === "text/plain") {
+    return /* @__PURE__ */ jsx21("pre", { className: "max-h-96 overflow-auto rounded-md border border-border bg-muted/40 p-3 text-xs whitespace-pre-wrap", children: text });
+  }
+  if (type === "text/markdown") {
+    return /* @__PURE__ */ jsx21(
+      "div",
+      {
+        className: "es-doc-prose prose prose-sm max-w-none rounded-md border border-border p-3",
+        dangerouslySetInnerHTML: { __html: safeMarkdownHtml(text) }
+      }
+    );
+  }
+  if (type === "text/html") {
+    return /* @__PURE__ */ jsx21(DocHtml, { entry: { kind: "html", content: text, title: att.name, phase: "runtime" } });
+  }
+  return null;
+}
 function ReportAttachments({ attachments }) {
   if (attachments.length === 0) return null;
   return (
     // role="group" (not a labelled <section>) so multiple scenarios' attachment
     // blocks don't create duplicate "Attachments" region landmarks.
     /* @__PURE__ */ jsx21("div", { role: "group", "aria-label": "Attachments", className: "mt-3 flex flex-col gap-2", children: attachments.map((att, i) => {
-      const dataUri = att.contentEncoding === "BASE64" ? `data:${att.mediaType};base64,${att.body}` : `data:${att.mediaType},${encodeURIComponent(att.body)}`;
-      const isImage = att.mediaType.startsWith("image/");
-      return /* @__PURE__ */ jsx21("figure", { className: "m-0", children: isImage ? /* @__PURE__ */ jsxs12(Fragment6, { children: [
+      const dataUri = att.external ? void 0 : att.contentEncoding === "BASE64" ? `data:${att.mediaType};base64,${att.body}` : `data:${att.mediaType},${encodeURIComponent(att.body)}`;
+      const href = dataUri ?? safeUrl(att.body);
+      const imageSrc = dataUri ?? safeImageUrl(att.body);
+      const isImage = att.mediaType.startsWith("image/") && imageSrc !== void 0;
+      return /* @__PURE__ */ jsx21("figure", { className: "m-0", children: isImage ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
         /* @__PURE__ */ jsx21(
           "img",
           {
-            src: dataUri,
+            src: imageSrc,
             alt: att.name,
             loading: "lazy",
             className: "max-w-full rounded-md border border-border"
           }
         ),
         /* @__PURE__ */ jsx21("figcaption", { className: "mt-1 text-xs text-muted-foreground", children: att.name })
-      ] }) : /* @__PURE__ */ jsxs12(
-        "a",
-        {
-          href: dataUri,
-          download: att.name,
-          className: "text-xs text-link underline underline-offset-2",
-          children: [
-            att.name,
-            " ",
-            /* @__PURE__ */ jsxs12("span", { className: "text-muted-foreground", children: [
-              "(",
-              att.mediaType,
-              ")"
-            ] })
-          ]
-        }
-      ) }, `${att.name}-${i}`);
+      ] }) : /* @__PURE__ */ jsxs12(Fragment7, { children: [
+        att.external ? null : preview(att),
+        /* @__PURE__ */ jsxs12(
+          "a",
+          {
+            href,
+            download: att.name,
+            className: "text-xs text-link underline underline-offset-2",
+            children: [
+              att.name,
+              " ",
+              /* @__PURE__ */ jsxs12("span", { className: "text-muted-foreground", children: [
+                "(",
+                att.mediaType,
+                ")"
+              ] })
+            ]
+          }
+        )
+      ] }) }, `${att.name}-${i}`);
     }) })
   );
 }
@@ -950,7 +1001,7 @@ function diffSinceLastRun(history, scenarios) {
 }
 
 // src/components/ScenarioRunHistory.tsx
-import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 var MAX_DOTS = 10;
 var DOT_COLOR = {
   passed: "bg-pass",
@@ -970,7 +1021,7 @@ function ScenarioRunHistory({ scenarioId }) {
   const recent = entries.slice(-MAX_DOTS);
   const flaky = flakinessOf(recent) === "flaky";
   const summary = flaky ? `${describeRunHistory(recent)} \xB7 Flaky` : describeRunHistory(recent);
-  return /* @__PURE__ */ jsxs14(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs14(Fragment8, { children: [
     flaky ? /* @__PURE__ */ jsx23(Badge, { variant: "pending", "aria-label": "Flaky: status flips between recent runs", title: summary, children: "Flaky" }) : null,
     /* @__PURE__ */ jsx23(
       "span",
@@ -1392,9 +1443,9 @@ function ReportScenario({ scenario, hideTitle = false }) {
 }
 
 // src/components/ReportScenarioList.tsx
-import { Fragment as Fragment8, jsx as jsx27 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx27 } from "react/jsx-runtime";
 function ReportScenarioList({ feature }) {
-  return /* @__PURE__ */ jsx27(Fragment8, { children: feature.scenarios.map((scenario) => /* @__PURE__ */ jsx27(ReportScenario, { scenario }, scenario.id)) });
+  return /* @__PURE__ */ jsx27(Fragment9, { children: feature.scenarios.map((scenario) => /* @__PURE__ */ jsx27(ReportScenario, { scenario }, scenario.id)) });
 }
 
 // src/components/ReportFeatureIntro.tsx
@@ -1432,7 +1483,7 @@ function featureKindLabel(kind) {
 }
 
 // src/components/ReportFeature.tsx
-import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 function ReportFeature({ feature }) {
   const titleId = `${feature.id}-title`;
   const bodyId = `${feature.id}-body`;
@@ -1492,14 +1543,14 @@ function ReportFeature({ feature }) {
                     s.failed,
                     " failed"
                   ] }),
-                  s.skipped > 0 ? /* @__PURE__ */ jsxs19(Fragment9, { children: [
+                  s.skipped > 0 ? /* @__PURE__ */ jsxs19(Fragment10, { children: [
                     /* @__PURE__ */ jsx29("span", { "aria-hidden": true, children: "\xB7" }),
                     /* @__PURE__ */ jsxs19("span", { children: [
                       s.skipped,
                       " skipped"
                     ] })
                   ] }) : null,
-                  s.pending > 0 ? /* @__PURE__ */ jsxs19(Fragment9, { children: [
+                  s.pending > 0 ? /* @__PURE__ */ jsxs19(Fragment10, { children: [
                     /* @__PURE__ */ jsx29("span", { "aria-hidden": true, children: "\xB7" }),
                     /* @__PURE__ */ jsxs19("span", { children: [
                       s.pending,
@@ -1686,7 +1737,7 @@ function ReportSchemaError({ error }) {
 }
 
 // src/components/ReportShell.tsx
-import { Fragment as Fragment10, jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 function ReportErrorShell({
   error,
   className,
@@ -2224,7 +2275,7 @@ function listFailures(report) {
 
 // src/interactive/ReportAgentFilterNotice.tsx
 import { Bot, X } from "lucide-react";
-import { Fragment as Fragment11, jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 function ReportAgentFilterNotice({
   applied,
   onReset,
@@ -2244,7 +2295,7 @@ function ReportAgentFilterNotice({
         /* @__PURE__ */ jsx40(Bot, { "aria-hidden": true, className: "size-4 shrink-0 text-primary" }),
         /* @__PURE__ */ jsxs26("span", { className: "min-w-0 flex-1", children: [
           "An agent filtered this report",
-          terms.length > 0 ? /* @__PURE__ */ jsxs26(Fragment11, { children: [
+          terms.length > 0 ? /* @__PURE__ */ jsxs26(Fragment12, { children: [
             " to ",
             terms.join(" \xB7 ")
           ] }) : null,
@@ -2413,7 +2464,7 @@ function ReportFilters({
 
 // src/interactive/ReportFreshness.tsx
 import { useEffect as useEffect3, useState as useState5 } from "react";
-import { Fragment as Fragment12, jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
 function ReportFreshness({ lastRunMs, ciUrl, staleAfterDays, nowMs }) {
   const [now, setNow] = useState5(nowMs);
   useEffect3(() => {
@@ -2447,7 +2498,7 @@ function ReportFreshness({ lastRunMs, ciUrl, staleAfterDays, nowMs }) {
   return /* @__PURE__ */ jsxs29("p", { className: "es-freshness", "aria-label": "Report freshness", children: [
     "Verified ",
     age,
-    runLink ? /* @__PURE__ */ jsxs29(Fragment12, { children: [
+    runLink ? /* @__PURE__ */ jsxs29(Fragment13, { children: [
       " \xB7 ",
       runLink
     ] }) : null
@@ -2455,10 +2506,10 @@ function ReportFreshness({ lastRunMs, ciUrl, staleAfterDays, nowMs }) {
 }
 
 // src/interactive/ReportLastRunDelta.tsx
-import { Fragment as Fragment13, jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
 var MAX_LINKS = 5;
 function ScenarioLinks({ scenarios, tone }) {
-  return /* @__PURE__ */ jsxs30(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs30(Fragment14, { children: [
     scenarios.slice(0, MAX_LINKS).map((s, i) => /* @__PURE__ */ jsxs30("span", { children: [
       i > 0 ? ", " : "",
       /* @__PURE__ */ jsx44("a", { href: `#${s.id}`, className: cn("underline underline-offset-2 hover:no-underline", tone), children: s.title })
@@ -2655,7 +2706,7 @@ function Button({
 }
 
 // src/interactive/ReportShare.tsx
-import { Fragment as Fragment14, jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
 var DEFAULT_SHARE_COMMAND = "npx executable-stories share reports/";
 function ReportShare({
   command = DEFAULT_SHARE_COMMAND,
@@ -2669,7 +2720,7 @@ function ReportShare({
     if (open && !dialog.open) dialog.showModal();
     else if (!open && dialog.open) dialog.close();
   }, [open]);
-  return /* @__PURE__ */ jsxs32(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs32(Fragment15, { children: [
     /* @__PURE__ */ jsxs32(
       Button,
       {
@@ -2764,7 +2815,7 @@ function diffSinceVisit(previous, report) {
 }
 
 // src/interactive/ReportSinceLastVisit.tsx
-import { Fragment as Fragment15, jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
 var KEY = "es-last-visit";
 var MAX_LINKS2 = 5;
 function readVisit() {
@@ -2789,7 +2840,7 @@ function writeVisit(snapshot) {
   }
 }
 function ScenarioLinks2({ scenarios, tone }) {
-  return /* @__PURE__ */ jsxs33(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs33(Fragment16, { children: [
     scenarios.slice(0, MAX_LINKS2).map((s, i) => /* @__PURE__ */ jsxs33("span", { children: [
       i > 0 ? ", " : "",
       /* @__PURE__ */ jsx48("a", { href: `#${s.id}`, className: cn("underline underline-offset-2 hover:no-underline", tone), children: s.title })
@@ -3413,7 +3464,7 @@ function reportTools(deps) {
 }
 
 // src/interactive/ReportInteractive.tsx
-import { Fragment as Fragment16, jsx as jsx52, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx52, jsxs as jsxs37 } from "react/jsx-runtime";
 function ReportInteractive(props) {
   const { report, className, title, dataTheme } = props;
   const result = unwrapReport(report);
@@ -3682,7 +3733,7 @@ function ReportInteractiveView({
                   ]
                 }
               ),
-              hideHeader ? null : /* @__PURE__ */ jsxs37(Fragment16, { children: [
+              hideHeader ? null : /* @__PURE__ */ jsxs37(Fragment17, { children: [
                 /* @__PURE__ */ jsx52(ReportSummary, {}),
                 /* @__PURE__ */ jsx52(ReportMeta, {})
               ] }),
@@ -3814,7 +3865,7 @@ import { createElement, useEffect as useEffect13, useState as useState14 } from
 
 // src/components/doc/MermaidView.tsx
 import { useEffect as useEffect12, useRef as useRef8, useState as useState13 } from "react";
-import { Fragment as Fragment17, jsx as jsx53, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx53, jsxs as jsxs38 } from "react/jsx-runtime";
 function prefersDark(el) {
   const themed = el?.closest("[data-theme]");
   if (themed?.dataset.theme === "dark") return true;
@@ -3884,7 +3935,7 @@ function MermaidView({ entry, load }) {
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs38(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs38(Fragment18, { children: [
     error ? /* @__PURE__ */ jsxs38(
       "p",
       {