executable-stories-react 0.10.0 → 0.10.1

package/dist/interactive.js

@@ -295,23 +295,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
+import { formatDuration as formatDuration3 } from "executable-stories-core/utils/duration";
+
+// src/components/ReportSteps.tsx
+import { formatDuration } from "executable-stories-core/utils/duration";
 
 // src/components/doc/DocNote.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
@@ -380,7 +368,7 @@ function DocTable({ entry }) {
     entry.label ? /* @__PURE__ */ jsx7("figcaption", { className: "mb-1.5 text-xs font-medium text-muted-foreground", children: entry.label }) : null,
     /* @__PURE__ */ jsx7("div", { tabIndex: 0, className: "overflow-x-auto rounded-md border border-border", children: /* @__PURE__ */ jsxs4("table", { className: "w-full border-collapse text-sm", children: [
       /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsx7("tr", { className: "bg-muted/50", children: entry.columns.map((c) => /* @__PURE__ */ jsx7("th", { scope: "col", className: "border-b border-border px-3 py-2 text-left font-semibold", children: c }, c)) }) }),
-      /* @__PURE__ */ jsx7("tbody", { children: entry.rows.map((row, i) => /* @__PURE__ */ jsx7("tr", { children: row.map((cell2, j) => /* @__PURE__ */ jsx7("td", { className: "border-b border-border px-3 py-2 text-foreground", children: cell2 }, j)) }, i)) })
+      /* @__PURE__ */ jsx7("tbody", { children: entry.rows.map((row, i) => /* @__PURE__ */ jsx7("tr", { children: row.map((cell, j) => /* @__PURE__ */ jsx7("td", { className: "border-b border-border px-3 py-2 text-foreground", children: cell }, j)) }, i)) })
     ] }) })
   ] });
 }
@@ -403,23 +391,8 @@ function DocLink({ entry }) {
 // src/components/doc/DocSection.tsx
 import { marked } from "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
+import { safeUrl, safeImageUrl, isLocalFsPath } from "executable-stories-core/utils/url";
 
 // src/components/doc/DocSection.tsx
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -712,125 +685,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
+import { extractStoryboardFrames } from "executable-stories-core/storyboard";
+import { summarizeStateChanges } from "executable-stories-core/state-diff";
+import { isLocalFsPath as isLocalFsPath2, safeImageUrl as safeImageUrl2 } from "executable-stories-core/utils/url";
 import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 var FRAME_GLYPH = {
   passed: "\u2713",
@@ -879,7 +737,7 @@ function StoryboardFrameItem({ frame }) {
 }
 function FrameScreenshot({ frame, label }) {
   const path = frame.screenshot?.path ?? "";
-  const src = isLocalFsPath(path) ? void 0 : safeImageUrl(path);
+  const src = isLocalFsPath2(path) ? void 0 : safeImageUrl2(path);
   return /* @__PURE__ */ jsx20(
     "a",
     {
@@ -985,6 +843,9 @@ function ReportAttachments({ attachments }) {
   );
 }
 
+// src/components/ReportTrace.tsx
+import { formatDuration as formatDuration2 } from "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";
@@ -1037,15 +898,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;
 }
@@ -1079,7 +940,7 @@ function ReportTrace({ spans }) {
       " span",
       rows.length === 1 ? "" : "s",
       ", ",
-      formatDuration(totalMs),
+      formatDuration2(totalMs),
       ")"
     ] }),
     /* @__PURE__ */ jsx22("ul", { className: "flex flex-col gap-0.5 px-3 pb-3 font-mono text-[0.6875rem]", children: rows.map((row, i) => {
@@ -1102,7 +963,7 @@ function ReportTrace({ spans }) {
             style: { left: `${leftPct}%`, width: `${widthPct}%` }
           }
         ) }),
-        /* @__PURE__ */ jsx22("span", { className: "w-16 shrink-0 text-right text-muted-foreground", children: formatDuration(row.durationMs) })
+        /* @__PURE__ */ jsx22("span", { className: "w-16 shrink-0 text-right text-muted-foreground", children: formatDuration2(row.durationMs) })
       ] }, `${row.spanId}-${i}`);
     }) })
   ] });
@@ -1278,130 +1139,14 @@ function useCollapseState(computeDefault) {
 
 // src/interactive/scenario-actions.tsx
 import { createContext as createContext4, useContext as useContext5 } from "react";
-
-// ../executable-stories-core/dist/utils/scenario-markdown.js
-function cell(value) {
-  return value.replaceAll("|", "\\|").replaceAll("\n", " ");
-}
-function stringify(value) {
-  if (typeof value === "string") return value;
-  try {
-    return JSON.stringify(value, null, 2) ?? String(value);
-  } catch {
-    return String(value);
-  }
-}
-function docEntryToMarkdown(entry, stateLanes) {
-  const lines = [];
-  switch (entry.kind) {
-    case "note":
-      lines.push(entry.text);
-      break;
-    case "tag":
-      lines.push(entry.names.map((n) => `\`@${n}\``).join(" "));
-      break;
-    case "kv":
-      lines.push(`**${entry.label}:** ${stringify(entry.value)}`);
-      break;
-    case "code":
-      lines.push(`**${entry.label}**`, "", "```" + (entry.lang ?? ""), entry.content, "```");
-      break;
-    case "table": {
-      lines.push(`**${entry.label}**`, "");
-      lines.push(`| ${entry.columns.map(cell).join(" | ")} |`);
-      lines.push(`| ${entry.columns.map(() => "---").join(" | ")} |`);
-      for (const row of entry.rows) lines.push(`| ${row.map(cell).join(" | ")} |`);
-      break;
-    }
-    case "link":
-      lines.push(`[${entry.label}](${entry.url})`);
-      break;
-    case "section":
-      lines.push(`### ${entry.title}`, "", entry.markdown);
-      break;
-    case "mermaid":
-      if (entry.title) lines.push(`**${entry.title}**`, "");
-      lines.push("```mermaid", entry.code, "```");
-      break;
-    case "screenshot":
-      lines.push(`![${entry.alt ?? "screenshot"}](${entry.path})`);
-      break;
-    case "video":
-      lines.push(`Video: ${entry.path}${entry.caption ? ` \u2014 ${entry.caption}` : ""}`);
-      break;
-    case "html": {
-      const htmlTitle = entry.title ?? "Embedded HTML";
-      if (entry.content) {
-        lines.push(`**${htmlTitle}**`, "", "```html", entry.content, "```");
-      } else if (entry.url) {
-        lines.push(`[${htmlTitle}](${entry.url})`);
-      } else {
-        lines.push(`Embedded HTML: ${entry.path ?? "(inline)"}`);
-      }
-      break;
-    }
-    case "custom":
-      lines.push(`**${entry.type}**`, "", "```json", stringify(entry.data), "```");
-      break;
-    case "state": {
-      const lane = entry.label ?? "";
-      lines.push(`**${entry.label ?? "State"}**`);
-      if (stateLanes?.has(lane)) {
-        const summary = summarizeStateChanges(diffStateValues(stateLanes.get(lane), entry.value));
-        if (summary.length > 0) lines.push("", ...summary.map((l) => `- ${l}`));
-      }
-      stateLanes?.set(lane, entry.value);
-      lines.push("", "<details>", "<summary>snapshot</summary>", "", "```json", stringify(entry.value ?? null), "```", "", "</details>");
-      break;
-    }
-  }
-  for (const child of entry.children ?? []) {
-    lines.push("", ...docEntryToMarkdown(child, stateLanes));
-  }
-  return lines;
-}
-function stepLines(step, ordinal, full, stateLanes) {
-  const status = step.status === "passed" ? "" : ` \u2014 **${step.status}**`;
-  const lines = [`${ordinal}. **${step.keyword}** ${step.text}${status}`];
-  if (!full) return lines;
-  if (step.errorMessage) {
-    lines.push(...step.errorMessage.split("\n").map((l) => `   > ${l}`));
-  }
-  for (const entry of step.docEntries) {
-    lines.push("", ...docEntryToMarkdown(entry, stateLanes).map((l) => l === "" ? l : `   ${l}`));
-  }
-  return lines;
-}
-function scenarioToMarkdown(scenario, options = {}) {
-  const { variant = "full", meta = [] } = options;
-  const full = variant === "full";
-  const lines = full ? [`# ${scenario.title}`, ""] : [`## ${scenario.title} _(${scenario.status})_`, ""];
-  if (full && meta.length > 0) lines.push(...meta);
-  const stateLanes = /* @__PURE__ */ new Map();
-  if (scenario.steps.length > 0) {
-    if (full) lines.push("", "## Steps", "");
-    scenario.steps.forEach((step, i) => lines.push(...stepLines(step, i + 1, full, stateLanes)));
-  }
-  if (scenario.errorMessage) {
-    if (full) lines.push("", "## Failure", "");
-    else lines.push("");
-    lines.push("```", scenario.errorMessage.trim(), "```");
-  }
-  if (full && scenario.docEntries.length > 0) {
-    lines.push("", "## Docs", "");
-    for (const entry of scenario.docEntries) lines.push(...docEntryToMarkdown(entry, stateLanes), "");
-  }
-  return lines.join("\n").replaceAll(/\n{3,}/g, "\n\n").trimEnd() + (full ? "\n" : "");
-}
-
-// src/interactive/scenario-actions.tsx
+import { scenarioToMarkdown as coreScenarioToMarkdown } from "executable-stories-core/utils/scenario-markdown";
 var ScenarioActionsContext = createContext4(null);
 var ScenarioActionsProvider = ScenarioActionsContext.Provider;
 function useScenarioActions() {
   return useContext5(ScenarioActionsContext);
 }
-function scenarioToMarkdown2(scenario) {
-  return scenarioToMarkdown(scenario, { variant: "compact" });
+function scenarioToMarkdown(scenario) {
+  return coreScenarioToMarkdown(scenario, { variant: "compact" });
 }
 function scenarioToPrompt(scenario) {
   const lines = [
@@ -1566,7 +1311,7 @@ function ReportScenario({ scenario, hideTitle = false }) {
             ] }),
             /* @__PURE__ */ jsxs17("div", { className: "flex shrink-0 items-center gap-2", children: [
               /* @__PURE__ */ jsx26(ScenarioRunHistory, { scenarioId: scenario.id }),
-              scenario.durationMs > 0 ? /* @__PURE__ */ jsx26("span", { className: "whitespace-nowrap font-mono text-[0.6875rem] text-muted-foreground", children: formatDuration(scenario.durationMs) }) : null,
+              scenario.durationMs > 0 ? /* @__PURE__ */ jsx26("span", { className: "whitespace-nowrap font-mono text-[0.6875rem] text-muted-foreground", children: formatDuration3(scenario.durationMs) }) : null,
               meta.showPill ? /* @__PURE__ */ jsx26(Badge, { variant: meta.badgeVariant, "aria-label": `Status: ${label}`, children: label }) : /* @__PURE__ */ jsx26("span", { className: "sr-only", children: `Status: ${label}` }),
               actions ? /* @__PURE__ */ jsxs17(DropdownMenu, { children: [
                 /* @__PURE__ */ jsx26(
@@ -1826,6 +1571,9 @@ function ReportSummaryView({ summary, className, ariaLabel }) {
   );
 }
 
+// src/components/ReportMeta.tsx
+import { formatDuration as formatDuration4 } from "executable-stories-core/utils/duration";
+
 // src/lib/provenance.ts
 function reportLastRunMs(report) {
   if (report.finishedAtMs && report.finishedAtMs > 0) return report.finishedAtMs;
@@ -1885,7 +1633,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: formatDuration4(report.durationMs) });
   }
   if (report.packageVersion) {
     items.push({ label: "Version", value: report.packageVersion });
@@ -3014,7 +2762,7 @@ function ReportInteractiveView({
   const scenarioActions = useMemo3(
     () => ({
       copyLink: (s) => copy(scenarioPermalink(s), "Link copied"),
-      copyMarkdown: (s) => copy(scenarioToMarkdown2(s), "Markdown copied"),
+      copyMarkdown: (s) => copy(scenarioToMarkdown(s), "Markdown copied"),
       copyPrompt: (s) => copy(scenarioToPrompt(s), "Prompt copied")
     }),
     [copy]