executable-stories-react 0.17.1 → 0.19.0

package/dist/index.d.cts

@@ -100,9 +100,9 @@ declare function ReportSummaryView({ summary, className, ariaLabel }: ReportSumm
 declare function ReportMeta(): react.JSX.Element | null;
 
 /**
- * Renders scenario attachments. Base64 images embed inline; everything else
- * becomes a labelled data-URI download link. Mirrors the report's attachments
- * block (which also inlines images and links other media).
+ * Renders scenario attachments. Images embed inline; text documents preview
+ * above their download link; other types get a labelled download link. An
+ * `external` attachment links to its file path and shows no preview.
  */
 declare function ReportAttachments({ attachments }: {
     attachments: ReportAttachment[];
@@ -192,8 +192,13 @@ declare function DocTag({ entry }: {
     entry: ReportDocTag;
 }): react.JSX.Element;
 
-declare function DocKv({ entry }: {
-    entry: ReportDocKv;
+/**
+ * Consecutive `story.kv()` entries share one two-column grid so the values
+ * line up whatever the label lengths; a lone entry is just a one-row grid.
+ * `ReportDocEntries` groups the runs.
+ */
+declare function DocKv({ entries }: {
+    entries: readonly ReportDocKv[];
 }): react.JSX.Element;
 
 declare function DocCode({ entry }: {

package/dist/index.d.ts

@@ -100,9 +100,9 @@ declare function ReportSummaryView({ summary, className, ariaLabel }: ReportSumm
 declare function ReportMeta(): react.JSX.Element | null;
 
 /**
- * Renders scenario attachments. Base64 images embed inline; everything else
- * becomes a labelled data-URI download link. Mirrors the report's attachments
- * block (which also inlines images and links other media).
+ * Renders scenario attachments. Images embed inline; text documents preview
+ * above their download link; other types get a labelled download link. An
+ * `external` attachment links to its file path and shows no preview.
  */
 declare function ReportAttachments({ attachments }: {
     attachments: ReportAttachment[];
@@ -192,8 +192,13 @@ declare function DocTag({ entry }: {
     entry: ReportDocTag;
 }): react.JSX.Element;
 
-declare function DocKv({ entry }: {
-    entry: ReportDocKv;
+/**
+ * Consecutive `story.kv()` entries share one two-column grid so the values
+ * line up whatever the label lengths; a lone entry is just a one-row grid.
+ * `ReportDocEntries` groups the runs.
+ */
+declare function DocKv({ entries }: {
+    entries: readonly ReportDocKv[];
 }): react.JSX.Element;
 
 declare function DocCode({ entry }: {

package/dist/index.js

@@ -341,11 +341,11 @@ function formatValue(value) {
     return String(value);
   }
 }
-function DocKv({ entry }) {
-  return /* @__PURE__ */ jsxs2("dl", { className: "my-2 flex flex-wrap items-baseline gap-x-2 text-sm", children: [
+function DocKv({ entries }) {
+  return /* @__PURE__ */ jsx6("dl", { className: "my-2 grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-sm", children: entries.map((entry, i) => /* @__PURE__ */ jsxs2("div", { className: "contents", children: [
     /* @__PURE__ */ jsx6("dt", { className: "font-semibold text-muted-foreground", children: entry.label }),
     /* @__PURE__ */ jsx6("dd", { className: "min-w-0 break-words font-mono text-foreground", children: formatValue(entry.value) })
-  ] });
+  ] }, i)) });
 }
 
 // src/hooks/useRenderers.ts
@@ -432,7 +432,7 @@ function DocSection({ entry }) {
   if (renderers.section) {
     return /* @__PURE__ */ jsx10(Fragment2, { children: renderers.section(entry) });
   }
-  const html = safeMarkdownHtml(entry.markdown);
+  const html = safeMarkdownHtml(dedent(entry.markdown));
   return /* @__PURE__ */ jsxs5("section", { className: "my-3 text-sm", "aria-label": entry.title, children: [
     entry.title ? /* @__PURE__ */ jsx10("h4", { className: "mb-1 font-semibold text-foreground", children: entry.title }) : null,
     /* @__PURE__ */ jsx10(
@@ -618,7 +618,7 @@ function DocEntry({ entry }) {
     case "tag":
       return /* @__PURE__ */ jsx17(DocTag, { entry });
     case "kv":
-      return /* @__PURE__ */ jsx17(DocKv, { entry });
+      return /* @__PURE__ */ jsx17(DocKv, { entries: [entry] });
     case "code":
       return /* @__PURE__ */ jsx17(DocCode, { entry });
     case "table":
@@ -646,7 +646,15 @@ function DocEntry({ entry }) {
 import { Fragment as Fragment5, jsx as jsx18 } from "react/jsx-runtime";
 function ReportDocEntries({ entries }) {
   if (entries.length === 0) return null;
-  return /* @__PURE__ */ jsx18(Fragment5, { children: entries.map((entry, i) => /* @__PURE__ */ jsx18(DocEntry, { entry }, i)) });
+  const groups = [];
+  for (const entry of entries) {
+    const last = groups[groups.length - 1];
+    if (entry.kind === "kv" && Array.isArray(last)) last.push(entry);
+    else groups.push(entry.kind === "kv" ? [entry] : entry);
+  }
+  return /* @__PURE__ */ jsx18(Fragment5, { children: groups.map(
+    (g, i) => Array.isArray(g) ? /* @__PURE__ */ jsx18(DocKv, { entries: g }, i) : /* @__PURE__ */ jsx18(DocEntry, { entry: g }, i)
+  ) });
 }
 
 // src/components/ReportSteps.tsx
@@ -851,42 +859,76 @@ function StateCardView({ card }) {
 
 // src/components/ReportAttachments.tsx
 import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs13 } 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/");
+      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__ */ jsxs13(Fragment6, { 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__ */ jsxs13(
-        "a",
-        {
-          href: dataUri,
-          download: att.name,
-          className: "text-xs text-link underline underline-offset-2",
-          children: [
-            att.name,
-            " ",
-            /* @__PURE__ */ jsxs13("span", { className: "text-muted-foreground", children: [
-              "(",
-              att.mediaType,
-              ")"
-            ] })
-          ]
-        }
-      ) }, `${att.name}-${i}`);
+      ] }) : /* @__PURE__ */ jsxs13(Fragment6, { children: [
+        att.external ? null : preview(att),
+        /* @__PURE__ */ jsxs13(
+          "a",
+          {
+            href,
+            download: att.name,
+            className: "text-xs text-link underline underline-offset-2",
+            children: [
+              att.name,
+              " ",
+              /* @__PURE__ */ jsxs13("span", { className: "text-muted-foreground", children: [
+                "(",
+                att.mediaType,
+                ")"
+              ] })
+            ]
+          }
+        )
+      ] }) }, `${att.name}-${i}`);
     }) })
   );
 }
@@ -1436,10 +1478,17 @@ function ReportFeatureIntro({ feature }) {
         dangerouslySetInnerHTML: { __html: safeMarkdownHtml(dedent(feature.narrative)) }
       }
     ) : null,
-    hasGlossary ? /* @__PURE__ */ jsx28("dl", { className: "grid gap-1.5", "aria-label": "Glossary", children: feature.glossary.map((entry) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-wrap gap-x-2 text-xs", children: [
-      /* @__PURE__ */ jsx28("dt", { className: "font-medium text-foreground", children: entry.term }),
-      /* @__PURE__ */ jsx28("dd", { className: "flex-1 text-muted-foreground", children: entry.definition })
-    ] }, entry.term)) }) : null
+    hasGlossary ? /* @__PURE__ */ jsx28(
+      "dl",
+      {
+        className: "grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1.5 text-xs",
+        "aria-label": "Glossary",
+        children: feature.glossary.map((entry) => /* @__PURE__ */ jsxs19("div", { className: "contents", children: [
+          /* @__PURE__ */ jsx28("dt", { className: "font-medium text-foreground", children: entry.term }),
+          /* @__PURE__ */ jsx28("dd", { className: "text-muted-foreground", children: entry.definition })
+        ] }, entry.term))
+      }
+    ) : null
   ] });
 }
 function featureKindLabel(kind) {
@@ -1455,7 +1504,6 @@ function ReportFeature({ feature }) {
   const titleId = `${feature.id}-title`;
   const bodyId = `${feature.id}-body`;
   const s = feature.summary;
-  const skipped = s.skipped + s.pending;
   const collapse = useCollapse();
   const collapsed = collapse?.isCollapsed(feature.id) ?? false;
   const kindLabel = featureKindLabel(feature.kind);
@@ -1495,7 +1543,12 @@ function ReportFeature({ feature }) {
               "p",
               {
                 className: "flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground",
-                "aria-label": `${s.passed} passed, ${s.failed} failed, ${skipped} skipped`,
+                "aria-label": [
+                  `${s.passed} passed`,
+                  `${s.failed} failed`,
+                  s.skipped > 0 && `${s.skipped} skipped`,
+                  s.pending > 0 && `${s.pending} pending`
+                ].filter(Boolean).join(", "),
                 children: [
                   /* @__PURE__ */ jsxs20("span", { children: [
                     s.passed,
@@ -1506,12 +1559,19 @@ function ReportFeature({ feature }) {
                     s.failed,
                     " failed"
                   ] }),
-                  skipped > 0 ? /* @__PURE__ */ jsxs20(Fragment9, { children: [
+                  s.skipped > 0 ? /* @__PURE__ */ jsxs20(Fragment9, { children: [
                     /* @__PURE__ */ jsx29("span", { "aria-hidden": true, children: "\xB7" }),
                     /* @__PURE__ */ jsxs20("span", { children: [
-                      skipped,
+                      s.skipped,
                       " skipped"
                     ] })
+                  ] }) : null,
+                  s.pending > 0 ? /* @__PURE__ */ jsxs20(Fragment9, { children: [
+                    /* @__PURE__ */ jsx29("span", { "aria-hidden": true, children: "\xB7" }),
+                    /* @__PURE__ */ jsxs20("span", { children: [
+                      s.pending,
+                      " pending"
+                    ] })
                   ] }) : null
                 ]
               }
@@ -2502,6 +2562,10 @@ var story_report_v1_default = {
         contentEncoding: {
           type: "string",
           enum: ["BASE64", "IDENTITY"]
+        },
+        external: {
+          const: true,
+          description: "body holds the file's path or URL (file missing or too large to embed)."
         }
       },
       required: ["name", "mediaType", "body", "contentEncoding"],