executable-stories-react 0.10.0 → 0.10.1

package/dist/ssr.cjs

@@ -311,23 +311,11 @@ function useReport() {
   return ctx.report;
 }
 
-// ../executable-stories-core/dist/utils/duration.js
-function formatDuration(ms) {
-  if (ms < 1e3) {
-    return `${Math.round(ms)} ms`;
-  }
-  if (ms < 6e4) {
-    return `${(ms / 1e3).toFixed(2)} s`;
-  }
-  const minutes = Math.floor(ms / 6e4);
-  const seconds = Math.floor(ms % 6e4 / 1e3);
-  if (minutes < 60) {
-    return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
-  }
-  const hours = Math.floor(minutes / 60);
-  const remainingMinutes = minutes % 60;
-  return `${hours}h ${remainingMinutes}m`;
-}
+// src/components/ReportScenario.tsx
+var import_duration3 = require("executable-stories-core/utils/duration");
+
+// src/components/ReportSteps.tsx
+var import_duration = require("executable-stories-core/utils/duration");
 
 // src/components/doc/DocNote.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -419,28 +407,13 @@ function DocLink({ entry }) {
 // src/components/doc/DocSection.tsx
 var import_marked = require("marked");
 
-// ../executable-stories-core/dist/utils/url.js
-function safeUrl(value) {
-  if (!value) return void 0;
-  const trimmed = value.trim();
-  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(trimmed);
-  if (scheme && !/^https?$/i.test(scheme[1] ?? "")) return void 0;
-  return trimmed;
-}
-function safeImageUrl(value) {
-  if (!value) return void 0;
-  const trimmed = value.trim();
-  if (/^data:image\//i.test(trimmed)) return trimmed;
-  return safeUrl(trimmed);
-}
-function isLocalFsPath(value) {
-  return /^(?:[/\\]|[A-Za-z]:[/\\])/.test(value);
-}
+// src/lib/url.ts
+var import_url = require("executable-stories-core/utils/url");
 
 // src/components/doc/DocSection.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function neutralizeUrl(value) {
-  return safeUrl(value) ?? "#";
+  return (0, import_url.safeUrl)(value) ?? "#";
 }
 function safeMarkdownHtml(markdown) {
   const raw = import_marked.marked.parse(markdown, { async: false });
@@ -491,7 +464,7 @@ function DocMermaid({ entry }) {
 // src/components/doc/DocScreenshot.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function DocScreenshot({ entry }) {
-  const src = isLocalFsPath(entry.path) ? void 0 : safeImageUrl(entry.path);
+  const src = (0, import_url.isLocalFsPath)(entry.path) ? void 0 : (0, import_url.safeImageUrl)(entry.path);
   if (!src) {
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("figure", { className: "my-3 rounded-md border border-dashed border-border p-3 text-sm text-muted-foreground", children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "font-medium", children: "Screenshot unavailable" }),
@@ -516,15 +489,15 @@ function DocScreenshot({ entry }) {
 // src/components/doc/DocVideo.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function DocVideo({ entry }) {
-  if (isLocalFsPath(entry.path)) {
+  if ((0, import_url.isLocalFsPath)(entry.path)) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("figure", { className: "my-3 rounded-md border border-dashed border-border p-3 text-sm text-muted-foreground", children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "font-medium", children: "Video unavailable" }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mt-1 break-all font-mono text-xs", children: entry.path }),
       entry.caption ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("figcaption", { className: "mt-1.5 text-xs", children: entry.caption }) : null
     ] });
   }
-  const src = safeUrl(entry.path);
-  const poster = safeUrl(entry.poster);
+  const src = (0, import_url.safeUrl)(entry.path);
+  const poster = (0, import_url.safeUrl)(entry.poster);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("figure", { className: "my-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "video",
@@ -545,7 +518,7 @@ var import_jsx_runtime13 = require("react/jsx-runtime");
 function DocHtml({ entry }) {
   const height = typeof entry.height === "number" ? `${entry.height}px` : entry.height ?? "400px";
   const title = entry.title ?? "Embedded HTML";
-  const safeHref = safeUrl(entry.url ?? entry.path);
+  const safeHref = (0, import_url.safeUrl)(entry.url ?? entry.path);
   const frameProps = entry.content !== void 0 ? { srcDoc: entry.content } : { src: safeHref ?? "" };
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("figure", { className: "my-3 overflow-hidden rounded-md border border-border", children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("figcaption", { className: "flex items-center justify-between border-b border-border bg-muted/40 px-3 py-1.5 text-xs font-medium text-muted-foreground", children: [
@@ -712,7 +685,7 @@ function ReportStepItem({ step }) {
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "flex-1 text-foreground", children: highlightStepParams(step.text) }),
-          step.durationMs > 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "shrink-0 whitespace-nowrap font-mono text-[0.6875rem] text-muted-foreground", children: formatDuration(step.durationMs) }) : null
+          step.durationMs > 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "shrink-0 whitespace-nowrap font-mono text-[0.6875rem] text-muted-foreground", children: (0, import_duration.formatDuration)(step.durationMs) }) : null
         ] }),
         step.errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "pre",
@@ -728,125 +701,10 @@ function ReportStepItem({ step }) {
   );
 }
 
-// ../executable-stories-core/dist/state-diff.js
-var isPlainObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
-function deepEqual(a, b) {
-  if (Object.is(a, b)) return true;
-  if (Array.isArray(a) && Array.isArray(b)) {
-    return a.length === b.length && a.every((v, i) => deepEqual(v, b[i]));
-  }
-  if (isPlainObject(a) && isPlainObject(b)) {
-    const ak = Object.keys(a);
-    const bk = Object.keys(b);
-    return ak.length === bk.length && ak.every((k) => k in b && deepEqual(a[k], b[k]));
-  }
-  return false;
-}
-var joinKey = (path, key) => path === "" ? key : `${path}.${key}`;
-function walk(path, before, after, out) {
-  if (Object.is(before, after)) return;
-  if (Array.isArray(before) && Array.isArray(after)) {
-    const shared = Math.min(before.length, after.length);
-    for (let i = 0; i < shared; i++) walk(`${path}[${i}]`, before[i], after[i], out);
-    for (let i = shared; i < after.length; i++) out.push({ path: `${path}[${i}]`, kind: "added", after: after[i] });
-    for (let i = shared; i < before.length; i++) out.push({ path: `${path}[${i}]`, kind: "removed", before: before[i] });
-    return;
-  }
-  if (isPlainObject(before) && isPlainObject(after)) {
-    for (const key of Object.keys(after)) {
-      const p = joinKey(path, key);
-      if (key in before) walk(p, before[key], after[key], out);
-      else out.push({ path: p, kind: "added", after: after[key] });
-    }
-    for (const key of Object.keys(before)) {
-      if (!(key in after)) out.push({ path: joinKey(path, key), kind: "removed", before: before[key] });
-    }
-    return;
-  }
-  if (!deepEqual(before, after)) out.push({ path, kind: "changed", before, after });
-}
-function diffStateValues(before, after) {
-  const out = [];
-  walk("", before, after, out);
-  return out;
-}
-function formatStateValue(value, maxLen = 60) {
-  const s = value === void 0 ? "undefined" : JSON.stringify(value);
-  return s.length > maxLen ? `${s.slice(0, maxLen - 1)}\u2026` : s;
-}
-function summarizeStateChanges(changes) {
-  return changes.map((c) => {
-    const at = c.path === "" ? "(root)" : c.path;
-    switch (c.kind) {
-      case "added":
-        return `+ ${at}: ${formatStateValue(c.after)}`;
-      case "removed":
-        return `\u2212 ${at}`;
-      case "changed":
-        return `${at}: ${formatStateValue(c.before)} \u2192 ${formatStateValue(c.after)}`;
-    }
-  });
-}
-
-// ../executable-stories-core/dist/storyboard.js
-function findScreenshot(entries) {
-  for (const entry of entries) {
-    if (entry.kind === "screenshot") return entry;
-    if (entry.children) {
-      const nested = findScreenshot(entry.children);
-      if (nested) return nested;
-    }
-  }
-  return void 0;
-}
-function findStates(entries, out = []) {
-  for (const entry of entries) {
-    if (entry.kind === "state") out.push(entry);
-    if (entry.children) findStates(entry.children, out);
-  }
-  return out;
-}
-var laneOf = (label) => label ?? "";
-function extractStoryboardFrames(scenario) {
-  const frames = [];
-  const laneOrder = [];
-  const previous = /* @__PURE__ */ new Map();
-  for (const step of scenario.steps) {
-    const shot = findScreenshot(step.docEntries);
-    const stateDocs = findStates(step.docEntries);
-    if (!shot && stateDocs.length === 0) continue;
-    const byLane = /* @__PURE__ */ new Map();
-    for (const doc of stateDocs) {
-      const lane = laneOf(doc.label);
-      if (!byLane.has(lane) && !laneOrder.includes(lane)) laneOrder.push(lane);
-      byLane.set(lane, doc);
-    }
-    const states = [];
-    for (const lane of laneOrder) {
-      const doc = byLane.get(lane);
-      if (!doc) continue;
-      const card = {
-        ...doc.label !== void 0 && { label: doc.label },
-        value: doc.value
-      };
-      if (previous.has(lane)) card.changes = diffStateValues(previous.get(lane), doc.value);
-      previous.set(lane, doc.value);
-      states.push(card);
-    }
-    frames.push({
-      stepId: step.id,
-      stepIndex: step.index,
-      keyword: step.keyword,
-      text: step.text,
-      status: step.status,
-      ...shot && { screenshot: { path: shot.path, ...shot.alt !== void 0 && { alt: shot.alt } } },
-      states
-    });
-  }
-  return frames;
-}
-
 // src/components/ReportStoryboard.tsx
+var import_storyboard = require("executable-stories-core/storyboard");
+var import_state_diff = require("executable-stories-core/state-diff");
+var import_url6 = require("executable-stories-core/utils/url");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var FRAME_GLYPH = {
   passed: "\u2713",
@@ -861,7 +719,7 @@ var FRAME_GLYPH_COLOR = {
   pending: "text-pend"
 };
 function ReportStoryboard({ scenario }) {
-  const frames = extractStoryboardFrames(scenario);
+  const frames = (0, import_storyboard.extractStoryboardFrames)(scenario);
   if (frames.length < 2) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("section", { "data-slot": "storyboard", "aria-label": "Storyboard", className: "mb-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h4", { className: "mb-1.5 text-xs font-semibold tracking-wide text-muted-foreground uppercase", children: "Storyboard" }),
@@ -895,7 +753,7 @@ function StoryboardFrameItem({ frame }) {
 }
 function FrameScreenshot({ frame, label }) {
   const path = frame.screenshot?.path ?? "";
-  const src = isLocalFsPath(path) ? void 0 : safeImageUrl(path);
+  const src = (0, import_url6.isLocalFsPath)(path) ? void 0 : (0, import_url6.safeImageUrl)(path);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "a",
     {
@@ -941,7 +799,7 @@ function StateCardView({ card }) {
           "rounded-sm px-1.5 py-0.5 font-mono text-[0.625rem] leading-snug break-all",
           CHANGE_TONE[change.kind]
         ),
-        children: summarizeStateChanges([change])[0]
+        children: (0, import_state_diff.summarizeStateChanges)([change])[0]
       },
       i
     )) }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "mt-1.5 text-[0.625rem] text-muted-foreground", children: "No changes" })),
@@ -1001,6 +859,9 @@ function ReportAttachments({ attachments }) {
   );
 }
 
+// src/components/ReportTrace.tsx
+var import_duration2 = require("executable-stories-core/utils/duration");
+
 // src/lib/trace.ts
 var VALID = /* @__PURE__ */ new Set(["ok", "error", "unset"]);
 var safeStatus = (s) => VALID.has(s) ? s : "unset";
@@ -1053,15 +914,15 @@ function toTraceRows(spans) {
   roots.sort((a, b) => a.span.startTimeMs - b.span.startTimeMs);
   const rows = [];
   const seen = /* @__PURE__ */ new Set();
-  const walk2 = (node, depth) => {
+  const walk = (node, depth) => {
     if (seen.has(node.span.spanId)) return;
     seen.add(node.span.spanId);
     rows.push({ ...node.span, depth });
-    for (const child of node.children) walk2(child, depth + 1);
+    for (const child of node.children) walk(child, depth + 1);
   };
-  for (const root of roots) walk2(root, 0);
+  for (const root of roots) walk(root, 0);
   for (const node of byId.values()) {
-    if (!seen.has(node.span.spanId)) walk2(node, 0);
+    if (!seen.has(node.span.spanId)) walk(node, 0);
   }
   return rows;
 }
@@ -1095,7 +956,7 @@ function ReportTrace({ spans }) {
       " span",
       rows.length === 1 ? "" : "s",
       ", ",
-      formatDuration(totalMs),
+      (0, import_duration2.formatDuration)(totalMs),
       ")"
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ul", { className: "flex flex-col gap-0.5 px-3 pb-3 font-mono text-[0.6875rem]", children: rows.map((row, i) => {
@@ -1118,7 +979,7 @@ function ReportTrace({ spans }) {
             style: { left: `${leftPct}%`, width: `${widthPct}%` }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "w-16 shrink-0 text-right text-muted-foreground", children: formatDuration(row.durationMs) })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "w-16 shrink-0 text-right text-muted-foreground", children: (0, import_duration2.formatDuration)(row.durationMs) })
       ] }, `${row.spanId}-${i}`);
     }) })
   ] });
@@ -1229,6 +1090,7 @@ function useCollapse() {
 
 // src/interactive/scenario-actions.tsx
 var import_react7 = require("react");
+var import_scenario_markdown = require("executable-stories-core/utils/scenario-markdown");
 var ScenarioActionsContext = (0, import_react7.createContext)(null);
 var ScenarioActionsProvider = ScenarioActionsContext.Provider;
 function useScenarioActions() {
@@ -1374,7 +1236,7 @@ function ReportScenario({ scenario, hideTitle = false }) {
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ScenarioRunHistory, { scenarioId: scenario.id }),
-              scenario.durationMs > 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "whitespace-nowrap font-mono text-[0.6875rem] text-muted-foreground", children: formatDuration(scenario.durationMs) }) : null,
+              scenario.durationMs > 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "whitespace-nowrap font-mono text-[0.6875rem] text-muted-foreground", children: (0, import_duration3.formatDuration)(scenario.durationMs) }) : null,
               meta.showPill ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Badge, { variant: meta.badgeVariant, "aria-label": `Status: ${label}`, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sr-only", children: `Status: ${label}` }),
               actions ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DropdownMenu, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
@@ -1634,6 +1496,9 @@ function ReportSummaryView({ summary, className, ariaLabel }) {
   );
 }
 
+// src/components/ReportMeta.tsx
+var import_duration4 = require("executable-stories-core/utils/duration");
+
 // src/lib/provenance.ts
 var CI_DISPLAY_NAMES = {
   github: "GitHub Actions",
@@ -1674,7 +1539,7 @@ function ReportMeta() {
     items.push({ label: "Started", value: new Date(report.startedAtMs).toLocaleString() });
   }
   if (report.durationMs) {
-    items.push({ label: "Duration", value: formatDuration(report.durationMs) });
+    items.push({ label: "Duration", value: (0, import_duration4.formatDuration)(report.durationMs) });
   }
   if (report.packageVersion) {
     items.push({ label: "Version", value: report.packageVersion });