executable-stories-react 0.1.0

package/dist/interactive.cjs

@@ -0,0 +1,846 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/interactive/index.ts
+var interactive_exports = {};
+__export(interactive_exports, {
+  ReportFailureBanner: () => ReportFailureBanner,
+  ReportInteractive: () => ReportInteractive,
+  ReportSearch: () => ReportSearch,
+  ReportShortcutsHelp: () => ReportShortcutsHelp,
+  filterReport: () => filterReport,
+  listFailures: () => listFailures,
+  normalizeQuery: () => normalizeQuery,
+  useDeepLinkScroll: () => useDeepLinkScroll,
+  useKeyboardShortcuts: () => useKeyboardShortcuts
+});
+module.exports = __toCommonJS(interactive_exports);
+
+// src/interactive/ReportInteractive.tsx
+var import_react10 = require("react");
+
+// src/context/ReportRoot.tsx
+var import_react2 = require("react");
+
+// src/context/ReportContext.ts
+var import_react = require("react");
+var ReportContext = (0, import_react.createContext)(null);
+
+// src/context/ReportRoot.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var EMPTY_CUSTOM = {};
+var EMPTY_RENDERERS = {};
+function ReportRoot({
+  report,
+  customRenderers,
+  renderers,
+  children
+}) {
+  const value = (0, import_react2.useMemo)(
+    () => ({
+      report,
+      customRenderers: customRenderers ?? EMPTY_CUSTOM,
+      renderers: renderers ?? EMPTY_RENDERERS
+    }),
+    [report, customRenderers, renderers]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReportContext.Provider, { value, children });
+}
+
+// src/hooks/useReport.ts
+var import_react3 = require("react");
+function useReport() {
+  const ctx = (0, import_react3.useContext)(ReportContext);
+  if (!ctx) {
+    throw new Error(
+      "useReport must be used inside <ReportRoot> or <Report>. Wrap your tree with one of those."
+    );
+  }
+  return ctx.report;
+}
+
+// src/components/ReportSummary.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ReportSummary({ className }) {
+  const report = useReport();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    ReportSummaryView,
+    {
+      summary: report.summary,
+      ...className !== void 0 && { className },
+      ariaLabel: "Run summary"
+    }
+  );
+}
+function ReportSummaryView({ summary, className, ariaLabel }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "p",
+    {
+      className: ["es-report-summary", className].filter(Boolean).join(" "),
+      "aria-label": ariaLabel,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: summary.total }),
+          " scenario",
+          summary.total === 1 ? "" : "s"
+        ] }),
+        " \xB7 ",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { "data-status": "passed", children: [
+          summary.passed,
+          " passed"
+        ] }),
+        " \xB7 ",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { "data-status": "failed", children: [
+          summary.failed,
+          " failed"
+        ] }),
+        summary.skipped > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          " \xB7 ",
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { "data-status": "skipped", children: [
+            summary.skipped,
+            " skipped"
+          ] })
+        ] }) : null,
+        summary.pending > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          " \xB7 ",
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { "data-status": "pending", children: [
+            summary.pending,
+            " pending"
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/components/doc/DocNote.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function DocNote({ entry }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "es-doc es-doc-note", children: entry.text });
+}
+
+// src/components/doc/DocTag.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function DocTag({ entry }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "es-doc es-tags", "aria-label": "Tags", children: entry.names.map((n) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: n }, n)) });
+}
+
+// src/components/doc/DocKv.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function formatValue(value) {
+  if (value === null) return "null";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+function DocKv({ entry }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("dl", { className: "es-doc es-doc-kv", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("dt", { children: entry.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("dd", { children: formatValue(entry.value) })
+  ] });
+}
+
+// src/hooks/useRenderers.ts
+var import_react4 = require("react");
+var EMPTY_CUSTOM2 = {};
+var EMPTY_RENDERERS2 = {};
+function useCustomRenderers() {
+  const ctx = (0, import_react4.useContext)(ReportContext);
+  return ctx?.customRenderers ?? EMPTY_CUSTOM2;
+}
+function useBuiltinRenderers() {
+  const ctx = (0, import_react4.useContext)(ReportContext);
+  return ctx?.renderers ?? EMPTY_RENDERERS2;
+}
+
+// src/components/doc/DocCode.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function DocCode({ entry }) {
+  const renderers = useBuiltinRenderers();
+  if (renderers.code) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: renderers.code(entry) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("figure", { className: "es-doc es-doc-code", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("figcaption", { children: entry.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("pre", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("code", { className: entry.lang ? `language-${entry.lang}` : void 0, children: entry.content }) })
+  ] });
+}
+
+// src/components/doc/DocTable.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function DocTable({ entry }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("figure", { className: "es-doc es-doc-table", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("figcaption", { children: entry.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("table", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { children: entry.columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { scope: "col", children: c }, c)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { children: entry.rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { children: row.map((cell, j) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { children: cell }, j)) }, i)) })
+    ] })
+  ] });
+}
+
+// src/components/doc/DocLink.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function DocLink({ entry }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "a",
+    {
+      className: "es-doc es-doc-link",
+      href: entry.url,
+      rel: "noreferrer noopener",
+      target: "_blank",
+      children: entry.label
+    }
+  );
+}
+
+// src/components/doc/DocSection.tsx
+var import_marked = require("marked");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function safeMarkdownHtml(markdown) {
+  const raw = import_marked.marked.parse(markdown, { async: false });
+  return raw.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "").replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, "").replace(/\son[a-z]+\s*=\s*"[^"]*"/gi, "").replace(/\son[a-z]+\s*=\s*'[^']*'/gi, "").replace(/\son[a-z]+\s*=\s*[^\s>]+/gi, "").replace(/(href|src)\s*=\s*"\s*javascript:[^"]*"/gi, '$1="#"').replace(/(href|src)\s*=\s*'\s*javascript:[^']*'/gi, "$1='#'");
+}
+function DocSection({ entry }) {
+  const renderers = useBuiltinRenderers();
+  if (renderers.section) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: renderers.section(entry) });
+  }
+  const html = safeMarkdownHtml(entry.markdown);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { className: "es-doc es-doc-section", "aria-label": entry.title, children: [
+    entry.title ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h4", { className: "es-doc-section-title", children: entry.title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        className: "es-doc-section-content",
+        dangerouslySetInnerHTML: { __html: html }
+      }
+    )
+  ] });
+}
+
+// src/components/doc/DocMermaid.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function DocMermaid({ entry }) {
+  const renderers = useBuiltinRenderers();
+  if (renderers.mermaid) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: renderers.mermaid(entry) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "figure",
+    {
+      className: "es-doc es-doc-mermaid",
+      "aria-label": entry.title ?? "Diagram",
+      children: [
+        entry.title ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("figcaption", { children: entry.title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("pre", { "data-mermaid": true, children: entry.code })
+      ]
+    }
+  );
+}
+
+// src/components/doc/DocScreenshot.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function DocScreenshot({ entry }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("figure", { className: "es-doc es-doc-screenshot", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("img", { src: entry.path, alt: entry.alt ?? "", loading: "lazy" }),
+    entry.alt ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("figcaption", { children: entry.alt }) : null
+  ] });
+}
+
+// src/components/doc/DocCustom.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function DocCustom({ entry }) {
+  const renderers = useCustomRenderers();
+  const renderer = renderers[entry.type];
+  if (renderer) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: renderer(entry) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "es-doc es-doc-custom", "data-type": entry.type, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "es-doc-custom-type", children: entry.type }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("pre", { children: safeStringify(entry.data) })
+  ] });
+}
+function safeStringify(value) {
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+// src/components/doc/DocEntry.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function DocEntry({ entry }) {
+  switch (entry.kind) {
+    case "note":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DocNote, { entry });
+    case "tag":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DocTag, { entry });
+    case "kv":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DocKv, { entry });
+    case "code":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DocCode, { entry });
+    case "table":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DocTable, { entry });
+    case "link":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DocLink, { entry });
+    case "section":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DocSection, { entry });
+    case "mermaid":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DocMermaid, { entry });
+    case "screenshot":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DocScreenshot, { entry });
+    case "custom":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DocCustom, { entry });
+  }
+}
+
+// src/components/ReportDocEntries.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function ReportDocEntries({ entries }) {
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: entries.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DocEntry, { entry }, i)) });
+}
+
+// src/components/ReportSteps.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function ReportSteps({ scenario }) {
+  if (scenario.steps.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ol", { className: "es-steps", children: scenario.steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ReportStepItem, { step }, step.id)) });
+}
+function ReportStepItem({ step }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "li",
+    {
+      id: step.id,
+      className: `es-step es-step-${step.status}`,
+      "data-status": step.status,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "es-step-keyword", children: step.keyword }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "es-step-text", children: step.text }),
+        step.errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("pre", { className: "es-scenario-error", role: "alert", children: step.errorMessage }) : null,
+        step.docEntries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "es-step-docs", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ReportDocEntries, { entries: step.docEntries }) }) : null
+      ]
+    }
+  );
+}
+
+// src/components/ReportScenario.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var STATUS_LABEL = {
+  passed: "Passed",
+  failed: "Failed",
+  skipped: "Skipped",
+  pending: "Pending"
+};
+function ReportScenario({ scenario }) {
+  const titleId = `${scenario.id}-title`;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "article",
+    {
+      id: scenario.id,
+      className: `es-scenario es-status-${scenario.status}`,
+      "aria-labelledby": titleId,
+      "data-status": scenario.status,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("h3", { id: titleId, className: "es-scenario-title", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: scenario.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "es-scenario-status", "aria-label": `Status: ${STATUS_LABEL[scenario.status]}`, children: STATUS_LABEL[scenario.status] })
+        ] }),
+        scenario.tags.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "es-tags", "aria-label": "Tags", children: scenario.tags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { children: t }, t)) }) : null,
+        scenario.errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("pre", { className: "es-scenario-error", role: "alert", children: scenario.errorMessage }) : null,
+        scenario.docEntries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "es-scenario-docs", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ReportDocEntries, { entries: scenario.docEntries }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ReportSteps, { scenario })
+      ]
+    }
+  );
+}
+
+// src/components/ReportScenarioList.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function ReportScenarioList({ feature }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: feature.scenarios.map((scenario) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReportScenario, { scenario }, scenario.id)) });
+}
+
+// src/components/ReportFeature.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function ReportFeature({ feature }) {
+  const titleId = `${feature.id}-title`;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "section",
+    {
+      id: feature.id,
+      className: "es-feature",
+      "aria-labelledby": titleId,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h2", { id: titleId, className: "es-feature-title", children: feature.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "es-feature-source", children: feature.sourceFile }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ReportSummaryView, { summary: feature.summary, className: "es-feature-summary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ReportScenarioList, { feature })
+      ]
+    }
+  );
+}
+
+// src/components/ReportFeatureList.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function ReportFeatureList() {
+  const report = useReport();
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: report.features.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ReportFeature, { feature }, feature.id)) });
+}
+
+// src/components/ReportEmpty.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function ReportEmpty({ message }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("section", { className: "es-empty", "aria-live": "polite", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: message ?? "No scenarios in this report." }) });
+}
+
+// src/components/ReportSchemaError.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function ReportSchemaError({ error }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("section", { className: "es-schema-error", role: "alert", "aria-live": "assertive", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("strong", { children: "Report could not be displayed." }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: error.message }),
+    error.code === "SCHEMA_VERSION_MISMATCH" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { children: [
+      "The report bundle is newer than this version of ",
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("code", { children: "executable-stories-react" }),
+      ". Upgrade the package, or regenerate the report with an older formatters CLI."
+    ] }) : null,
+    error.issues && error.issues.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("details", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("summary", { children: [
+        error.issues.length,
+        " validation issue",
+        error.issues.length === 1 ? "" : "s"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("pre", { children: error.issues.slice(0, 20).map((i) => `${i.path}: ${i.message}`).join("\n") })
+    ] }) : null
+  ] });
+}
+
+// src/interactive/ReportSearch.tsx
+var import_react5 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var ReportSearch = (0, import_react5.forwardRef)(
+  function ReportSearch2(props, ref) {
+    const {
+      value,
+      onChange,
+      matchedCount,
+      totalCount,
+      placeholder = "Search scenarios, tags, or step text\u2026",
+      className
+    } = props;
+    const inputId = (0, import_react5.useId)();
+    const showCounts = typeof matchedCount === "number" && typeof totalCount === "number";
+    function handleChange(e) {
+      onChange(e.target.value);
+    }
+    function handleKeyDown(e) {
+      if (e.key === "Escape" && value !== "") {
+        onChange("");
+        e.preventDefault();
+      }
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: ["es-search", className].filter(Boolean).join(" "), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { htmlFor: inputId, className: "es-search-label", children: "Search" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "input",
+        {
+          ref,
+          id: inputId,
+          type: "search",
+          value,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          placeholder,
+          autoComplete: "off",
+          spellCheck: false,
+          "aria-keyshortcuts": "/"
+        }
+      ),
+      showCounts ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "es-search-counts", "aria-live": "polite", children: value ? `${matchedCount} of ${totalCount}` : `${totalCount} total` }) : null
+    ] });
+  }
+);
+
+// src/interactive/ReportFailureBanner.tsx
+var import_react6 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function ReportFailureBanner({ failures }) {
+  const first = failures[0];
+  const jumpToFirst = (0, import_react6.useCallback)(() => {
+    if (!first) return;
+    if (typeof window === "undefined") return;
+    const el = document.getElementById(first.scenarioId);
+    el?.scrollIntoView({ behavior: "smooth", block: "start" });
+    if (typeof history !== "undefined") {
+      history.replaceState(null, "", `#${first.scenarioId}`);
+    }
+  }, [first]);
+  if (failures.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "aside",
+    {
+      className: "es-failure-banner",
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": "Failure summary",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "es-failure-banner-text", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("strong", { children: failures.length }),
+          " ",
+          "failure",
+          failures.length === 1 ? "" : "s"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "es-failure-banner-jump",
+            onClick: jumpToFirst,
+            "aria-label": "Jump to first failure",
+            children: "Jump to first \u2193"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/interactive/ReportShortcutsHelp.tsx
+var import_react7 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var SHORTCUTS = [
+  { keys: "/", description: "Focus search" },
+  { keys: "f", description: "Jump to next failure" },
+  { keys: "Shift+F", description: "Jump to previous failure" },
+  { keys: "Esc", description: "Clear search / close dialog" },
+  { keys: "?", description: "Toggle this help" }
+];
+function ReportShortcutsHelp({ open, onClose }) {
+  const dialogRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) dialog.showModal();
+    else if (!open && dialog.open) dialog.close();
+  }, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "dialog",
+    {
+      ref: dialogRef,
+      className: "es-shortcuts-help",
+      "aria-label": "Keyboard shortcuts",
+      onClose,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { children: "Keyboard shortcuts" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dl", { children: SHORTCUTS.map((s) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dt", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("kbd", { children: s.keys }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dd", { children: s.description })
+        ] }, s.keys)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("form", { method: "dialog", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "submit", className: "es-shortcuts-close", children: "Close" }) })
+      ]
+    }
+  );
+}
+
+// src/interactive/use-keyboard-shortcuts.ts
+var import_react8 = require("react");
+function isEditableTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  if (target.isContentEditable) return true;
+  return false;
+}
+function useKeyboardShortcuts(handlers) {
+  const ref = (0, import_react8.useRef)(handlers);
+  ref.current = handlers;
+  (0, import_react8.useEffect)(() => {
+    function onKeyDown(e) {
+      const h = ref.current;
+      if (e.key === "Escape") {
+        h.onEscape?.();
+        return;
+      }
+      if (isEditableTarget(e.target)) return;
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      switch (e.key) {
+        case "/":
+          h.onFocusSearch?.();
+          e.preventDefault();
+          return;
+        case "?":
+          h.onToggleHelp?.();
+          e.preventDefault();
+          return;
+        case "f":
+          h.onNextFailure?.();
+          e.preventDefault();
+          return;
+        case "F":
+          h.onPrevFailure?.();
+          e.preventDefault();
+          return;
+        default:
+          return;
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+}
+
+// src/interactive/use-deep-link-scroll.ts
+var import_react9 = require("react");
+function useDeepLinkScroll() {
+  (0, import_react9.useEffect)(() => {
+    function scrollToHash() {
+      const hash = window.location.hash.replace(/^#/, "");
+      if (!hash) return;
+      const el = document.getElementById(hash);
+      if (!el) return;
+      requestAnimationFrame(() => {
+        el.scrollIntoView({ behavior: "smooth", block: "start" });
+      });
+    }
+    scrollToHash();
+    window.addEventListener("hashchange", scrollToHash);
+    return () => window.removeEventListener("hashchange", scrollToHash);
+  }, []);
+}
+
+// src/interactive/filter.ts
+function normalizeQuery(query) {
+  return query.trim().toLowerCase();
+}
+function scenarioMatches(scenario, q) {
+  if (q === "") return true;
+  if (scenario.title.toLowerCase().includes(q)) return true;
+  for (const tag of scenario.tags) {
+    if (tag.toLowerCase().includes(q)) return true;
+  }
+  for (const step of scenario.steps) {
+    if (step.text.toLowerCase().includes(q)) return true;
+  }
+  return false;
+}
+function summarizeScenarios(scenarios) {
+  let total = 0, passed = 0, failed = 0, skipped = 0, pending = 0, durationMs = 0;
+  for (const s of scenarios) {
+    total += 1;
+    durationMs += s.durationMs;
+    if (s.status === "passed") passed += 1;
+    else if (s.status === "failed") failed += 1;
+    else if (s.status === "skipped") skipped += 1;
+    else pending += 1;
+  }
+  return { total, passed, failed, skipped, pending, durationMs };
+}
+function filterReport(report, query) {
+  const q = normalizeQuery(query);
+  if (q === "") return report;
+  const features = [];
+  let topTotal = 0, topPassed = 0, topFailed = 0, topSkipped = 0, topPending = 0, topDuration = 0;
+  for (const feature of report.features) {
+    const matched = feature.scenarios.filter((s) => scenarioMatches(s, q));
+    if (matched.length === 0) continue;
+    const summary = summarizeScenarios(matched);
+    features.push({ ...feature, summary, scenarios: matched });
+    topTotal += summary.total;
+    topPassed += summary.passed;
+    topFailed += summary.failed;
+    topSkipped += summary.skipped;
+    topPending += summary.pending;
+    topDuration += summary.durationMs;
+  }
+  return {
+    ...report,
+    summary: {
+      total: topTotal,
+      passed: topPassed,
+      failed: topFailed,
+      skipped: topSkipped,
+      pending: topPending,
+      durationMs: topDuration
+    },
+    features
+  };
+}
+function listFailures(report) {
+  const out = [];
+  for (const feature of report.features) {
+    for (const scenario of feature.scenarios) {
+      if (scenario.status === "failed") {
+        const ref = {
+          featureId: feature.id,
+          scenarioId: scenario.id,
+          scenarioTitle: scenario.title
+        };
+        if (scenario.errorMessage !== void 0) {
+          ref.errorMessage = scenario.errorMessage;
+        }
+        out.push(ref);
+      }
+    }
+  }
+  return out;
+}
+
+// src/interactive/ReportInteractive.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function isResult(value) {
+  return typeof value === "object" && value !== null && "ok" in value && typeof value.ok === "boolean";
+}
+function ReportInteractive(props) {
+  const { report, className, title, dataTheme } = props;
+  if (isResult(report)) {
+    if (!report.ok) {
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        "main",
+        {
+          className: ["es-report", className].filter(Boolean).join(" "),
+          "aria-label": title ?? "Test report",
+          "data-theme": dataTheme,
+          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReportSchemaError, { error: report.error })
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReportInteractiveView, { ...props, report: report.data });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReportInteractiveView, { ...props, report });
+}
+function ReportInteractiveView({
+  report,
+  customRenderers,
+  renderers,
+  className,
+  title,
+  dataTheme
+}) {
+  const [query, setQuery] = (0, import_react10.useState)("");
+  const [helpOpen, setHelpOpen] = (0, import_react10.useState)(false);
+  const searchRef = (0, import_react10.useRef)(null);
+  const failures = (0, import_react10.useMemo)(() => listFailures(report), [report]);
+  const filtered = (0, import_react10.useMemo)(() => filterReport(report, query), [report, query]);
+  const failureIndexRef = (0, import_react10.useRef)(0);
+  const focusSearch = (0, import_react10.useCallback)(() => {
+    searchRef.current?.focus();
+  }, []);
+  const scrollToScenario = (0, import_react10.useCallback)((scenarioId) => {
+    if (typeof document === "undefined") return;
+    const el = document.getElementById(scenarioId);
+    if (!el) return;
+    el.scrollIntoView({ behavior: "smooth", block: "start" });
+    if (typeof history !== "undefined") {
+      history.replaceState(null, "", `#${scenarioId}`);
+    }
+  }, []);
+  const stepFailure = (0, import_react10.useCallback)(
+    (direction) => {
+      if (failures.length === 0) return;
+      failureIndexRef.current = (failureIndexRef.current + direction + failures.length) % failures.length;
+      const target = failures[failureIndexRef.current];
+      if (target) scrollToScenario(target.scenarioId);
+    },
+    [failures, scrollToScenario]
+  );
+  const toggleHelp = (0, import_react10.useCallback)(() => {
+    setHelpOpen((v) => !v);
+  }, []);
+  const escape = (0, import_react10.useCallback)(() => {
+    if (helpOpen) setHelpOpen(false);
+    else if (query !== "") setQuery("");
+  }, [helpOpen, query]);
+  useKeyboardShortcuts({
+    onFocusSearch: focusSearch,
+    onNextFailure: () => stepFailure(1),
+    onPrevFailure: () => stepFailure(-1),
+    onToggleHelp: toggleHelp,
+    onEscape: escape
+  });
+  useDeepLinkScroll();
+  const hasContent = filtered.features.length > 0;
+  const totalScenarios = report.summary.total;
+  const matchedScenarios = filtered.summary.total;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    ReportRoot,
+    {
+      report: filtered,
+      customRenderers,
+      renderers,
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        "main",
+        {
+          className: ["es-report", "es-report-interactive", className].filter(Boolean).join(" "),
+          "aria-label": title ?? "Test report",
+          "data-theme": dataTheme,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("header", { className: "es-report-header", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h1", { children: title ?? "Story Report" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReportSummary, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                ReportSearch,
+                {
+                  ref: searchRef,
+                  value: query,
+                  onChange: setQuery,
+                  matchedCount: matchedScenarios,
+                  totalCount: totalScenarios
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReportFailureBanner, { failures }),
+            hasContent ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReportFeatureList, {}) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReportEmpty, { message: query ? "No scenarios match the search." : void 0 }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "es-shortcuts-trigger",
+                "aria-label": "Keyboard shortcuts",
+                "aria-keyshortcuts": "Shift+?",
+                onClick: toggleHelp,
+                children: "?"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReportShortcutsHelp, { open: helpOpen, onClose: () => setHelpOpen(false) })
+          ]
+        }
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ReportFailureBanner,
+  ReportInteractive,
+  ReportSearch,
+  ReportShortcutsHelp,
+  filterReport,
+  listFailures,
+  normalizeQuery,
+  useDeepLinkScroll,
+  useKeyboardShortcuts
+});
+//# sourceMappingURL=interactive.cjs.map