executable-stories-react 0.17.0 → 0.18.0

package/dist/interactive.d.cts

@@ -95,8 +95,7 @@ interface ReportInteractiveProps {
     share?: boolean;
     /**
      * Draw the "Architecture, as it ran" section (default false). Only an
-     * instrumented suite has anything to draw, and the span picture is a
-     * specialist view. `--html-architecture` turns it on.
+     * instrumented suite has anything to draw. `--html-architecture` turns it on.
      */
     architecture?: boolean;
     /** Command the share dialog hands over. Default: `npx executable-stories share reports/`. */

package/dist/interactive.d.ts

@@ -95,8 +95,7 @@ interface ReportInteractiveProps {
     share?: boolean;
     /**
      * Draw the "Architecture, as it ran" section (default false). Only an
-     * instrumented suite has anything to draw, and the span picture is a
-     * specialist view. `--html-architecture` turns it on.
+     * instrumented suite has anything to draw. `--html-architecture` turns it on.
      */
     architecture?: boolean;
     /** Command the share dialog hands over. Default: `npx executable-stories share reports/`. */

package/dist/interactive.js

@@ -203,11 +203,11 @@ function formatValue(value) {
     return String(value);
   }
 }
-function DocKv({ entry }) {
-  return /* @__PURE__ */ jsxs("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__ */ jsxs("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
@@ -294,7 +294,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__ */ jsxs4("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(
@@ -480,7 +480,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":
@@ -508,7 +508,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
@@ -1403,10 +1411,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__ */ jsxs18("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__ */ jsxs18("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) {
@@ -1422,7 +1437,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);
@@ -1462,7 +1476,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__ */ jsxs19("span", { children: [
                     s.passed,
@@ -1473,12 +1492,19 @@ function ReportFeature({ feature }) {
                     s.failed,
                     " failed"
                   ] }),
-                  skipped > 0 ? /* @__PURE__ */ jsxs19(Fragment9, { children: [
+                  s.skipped > 0 ? /* @__PURE__ */ jsxs19(Fragment9, { children: [
                     /* @__PURE__ */ jsx29("span", { "aria-hidden": true, children: "\xB7" }),
                     /* @__PURE__ */ jsxs19("span", { children: [
-                      skipped,
+                      s.skipped,
                       " skipped"
                     ] })
+                  ] }) : null,
+                  s.pending > 0 ? /* @__PURE__ */ jsxs19(Fragment9, { children: [
+                    /* @__PURE__ */ jsx29("span", { "aria-hidden": true, children: "\xB7" }),
+                    /* @__PURE__ */ jsxs19("span", { children: [
+                      s.pending,
+                      " pending"
+                    ] })
                   ] }) : null
                 ]
               }
@@ -2687,7 +2713,7 @@ function ReportShare({
               "a",
               {
                 className: "text-xs underline underline-offset-2",
-                href: "https://executablestories.com/guides/sharing-reports/",
+                href: "https://docs.executablestories.com/guides/sharing-reports/",
                 target: "_blank",
                 rel: "noreferrer",
                 children: "How sharing works"
@@ -2884,20 +2910,14 @@ function TocContent({ onNavigate }) {
       const line = atBottom ? window.innerHeight : window.innerHeight * 0.2;
       let active = els[0];
       let best = -Infinity;
-      let firstId = null;
-      let firstTop = Infinity;
       for (const el of els) {
         const top = el.getBoundingClientRect().top;
         if (top <= line && top > best) {
           best = top;
           active = el;
         }
-        if (top < firstTop) {
-          firstTop = top;
-          firstId = el.id;
-        }
       }
-      setActiveId(best === -Infinity ? firstId : active.id);
+      setActiveId(active.id);
     };
     const onScroll = () => {
       if (frame === 0) frame = requestAnimationFrame(update);