executable-stories-react 0.18.0 → 0.20.0

package/dist/interactive.cjs

@@ -633,6 +633,23 @@ function ReportStepItem({
             children: step.errorMessage
           }
         ) : null,
+        step.expected !== void 0 || step.actual !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          "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__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("dt", { className: "text-muted-foreground", children: "Expected" }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("dd", { className: "overflow-x-auto whitespace-pre-wrap text-pass", children: step.expected })
+              ] }) : null,
+              step.actual !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("dt", { className: "text-muted-foreground", children: "Actual" }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("dd", { className: "overflow-x-auto whitespace-pre-wrap text-fail", children: step.actual })
+              ] }) : null
+            ]
+          }
+        ) : null,
         step.docEntries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { "data-es-docs": true, className: "mt-2 ml-6", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ReportDocEntries, { entries: step.docEntries }) }) : null
       ]
     }
@@ -757,42 +774,76 @@ function StateCardView({ card }) {
 
 // src/components/ReportAttachments.tsx
 var import_jsx_runtime21 = require("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__ */ (0, import_jsx_runtime21.jsx)("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__ */ (0, import_jsx_runtime21.jsx)(
+      "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__ */ (0, import_jsx_runtime21.jsx)(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__ */ (0, import_jsx_runtime21.jsx)("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/");
+      const dataUri = att.external ? void 0 : att.contentEncoding === "BASE64" ? `data:${att.mediaType};base64,${att.body}` : `data:${att.mediaType},${encodeURIComponent(att.body)}`;
+      const href = dataUri ?? (0, import_url.safeUrl)(att.body);
+      const imageSrc = dataUri ?? (0, import_url.safeImageUrl)(att.body);
+      const isImage = att.mediaType.startsWith("image/") && imageSrc !== void 0;
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("figure", { className: "m-0", children: isImage ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "img",
           {
-            src: dataUri,
+            src: imageSrc,
             alt: att.name,
             loading: "lazy",
             className: "max-w-full rounded-md border border-border"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("figcaption", { className: "mt-1 text-xs text-muted-foreground", children: att.name })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-        "a",
-        {
-          href: dataUri,
-          download: att.name,
-          className: "text-xs text-link underline underline-offset-2",
-          children: [
-            att.name,
-            " ",
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "text-muted-foreground", children: [
-              "(",
-              att.mediaType,
-              ")"
-            ] })
-          ]
-        }
-      ) }, `${att.name}-${i}`);
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+        att.external ? null : preview(att),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          "a",
+          {
+            href,
+            download: att.name,
+            className: "text-xs text-link underline underline-offset-2",
+            children: [
+              att.name,
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "text-muted-foreground", children: [
+                "(",
+                att.mediaType,
+                ")"
+              ] })
+            ]
+          }
+        )
+      ] }) }, `${att.name}-${i}`);
     }) })
   );
 }