executable-stories-react 0.1.0

package/dist/interactive.js

@@ -0,0 +1,820 @@
+"use client";
+
+// src/interactive/ReportInteractive.tsx
+import {
+  useCallback as useCallback2,
+  useMemo as useMemo2,
+  useRef as useRef3,
+  useState
+} from "react";
+
+// src/context/ReportRoot.tsx
+import { useMemo } from "react";
+
+// src/context/ReportContext.ts
+import { createContext } from "react";
+var ReportContext = createContext(null);
+
+// src/context/ReportRoot.tsx
+import { jsx } from "react/jsx-runtime";
+var EMPTY_CUSTOM = {};
+var EMPTY_RENDERERS = {};
+function ReportRoot({
+  report,
+  customRenderers,
+  renderers,
+  children
+}) {
+  const value = useMemo(
+    () => ({
+      report,
+      customRenderers: customRenderers ?? EMPTY_CUSTOM,
+      renderers: renderers ?? EMPTY_RENDERERS
+    }),
+    [report, customRenderers, renderers]
+  );
+  return /* @__PURE__ */ jsx(ReportContext.Provider, { value, children });
+}
+
+// src/hooks/useReport.ts
+import { useContext } from "react";
+function useReport() {
+  const ctx = 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
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ReportSummary({ className }) {
+  const report = useReport();
+  return /* @__PURE__ */ jsx2(
+    ReportSummaryView,
+    {
+      summary: report.summary,
+      ...className !== void 0 && { className },
+      ariaLabel: "Run summary"
+    }
+  );
+}
+function ReportSummaryView({ summary, className, ariaLabel }) {
+  return /* @__PURE__ */ jsxs(
+    "p",
+    {
+      className: ["es-report-summary", className].filter(Boolean).join(" "),
+      "aria-label": ariaLabel,
+      children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx2("strong", { children: summary.total }),
+          " scenario",
+          summary.total === 1 ? "" : "s"
+        ] }),
+        " \xB7 ",
+        /* @__PURE__ */ jsxs("span", { "data-status": "passed", children: [
+          summary.passed,
+          " passed"
+        ] }),
+        " \xB7 ",
+        /* @__PURE__ */ jsxs("span", { "data-status": "failed", children: [
+          summary.failed,
+          " failed"
+        ] }),
+        summary.skipped > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          " \xB7 ",
+          /* @__PURE__ */ jsxs("span", { "data-status": "skipped", children: [
+            summary.skipped,
+            " skipped"
+          ] })
+        ] }) : null,
+        summary.pending > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          " \xB7 ",
+          /* @__PURE__ */ jsxs("span", { "data-status": "pending", children: [
+            summary.pending,
+            " pending"
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/components/doc/DocNote.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function DocNote({ entry }) {
+  return /* @__PURE__ */ jsx3("p", { className: "es-doc es-doc-note", children: entry.text });
+}
+
+// src/components/doc/DocTag.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function DocTag({ entry }) {
+  return /* @__PURE__ */ jsx4("ul", { className: "es-doc es-tags", "aria-label": "Tags", children: entry.names.map((n) => /* @__PURE__ */ jsx4("li", { children: n }, n)) });
+}
+
+// src/components/doc/DocKv.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "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__ */ jsxs2("dl", { className: "es-doc es-doc-kv", children: [
+    /* @__PURE__ */ jsx5("dt", { children: entry.label }),
+    /* @__PURE__ */ jsx5("dd", { children: formatValue(entry.value) })
+  ] });
+}
+
+// src/hooks/useRenderers.ts
+import { useContext as useContext2 } from "react";
+var EMPTY_CUSTOM2 = {};
+var EMPTY_RENDERERS2 = {};
+function useCustomRenderers() {
+  const ctx = useContext2(ReportContext);
+  return ctx?.customRenderers ?? EMPTY_CUSTOM2;
+}
+function useBuiltinRenderers() {
+  const ctx = useContext2(ReportContext);
+  return ctx?.renderers ?? EMPTY_RENDERERS2;
+}
+
+// src/components/doc/DocCode.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function DocCode({ entry }) {
+  const renderers = useBuiltinRenderers();
+  if (renderers.code) {
+    return /* @__PURE__ */ jsx6(Fragment2, { children: renderers.code(entry) });
+  }
+  return /* @__PURE__ */ jsxs3("figure", { className: "es-doc es-doc-code", children: [
+    /* @__PURE__ */ jsx6("figcaption", { children: entry.label }),
+    /* @__PURE__ */ jsx6("pre", { children: /* @__PURE__ */ jsx6("code", { className: entry.lang ? `language-${entry.lang}` : void 0, children: entry.content }) })
+  ] });
+}
+
+// src/components/doc/DocTable.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function DocTable({ entry }) {
+  return /* @__PURE__ */ jsxs4("figure", { className: "es-doc es-doc-table", children: [
+    /* @__PURE__ */ jsx7("figcaption", { children: entry.label }),
+    /* @__PURE__ */ jsxs4("table", { children: [
+      /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsx7("tr", { children: entry.columns.map((c) => /* @__PURE__ */ jsx7("th", { scope: "col", children: c }, c)) }) }),
+      /* @__PURE__ */ jsx7("tbody", { children: entry.rows.map((row, i) => /* @__PURE__ */ jsx7("tr", { children: row.map((cell, j) => /* @__PURE__ */ jsx7("td", { children: cell }, j)) }, i)) })
+    ] })
+  ] });
+}
+
+// src/components/doc/DocLink.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function DocLink({ entry }) {
+  return /* @__PURE__ */ jsx8(
+    "a",
+    {
+      className: "es-doc es-doc-link",
+      href: entry.url,
+      rel: "noreferrer noopener",
+      target: "_blank",
+      children: entry.label
+    }
+  );
+}
+
+// src/components/doc/DocSection.tsx
+import { marked } from "marked";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+function safeMarkdownHtml(markdown) {
+  const raw = 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__ */ jsx9(Fragment3, { children: renderers.section(entry) });
+  }
+  const html = safeMarkdownHtml(entry.markdown);
+  return /* @__PURE__ */ jsxs5("section", { className: "es-doc es-doc-section", "aria-label": entry.title, children: [
+    entry.title ? /* @__PURE__ */ jsx9("h4", { className: "es-doc-section-title", children: entry.title }) : null,
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: "es-doc-section-content",
+        dangerouslySetInnerHTML: { __html: html }
+      }
+    )
+  ] });
+}
+
+// src/components/doc/DocMermaid.tsx
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function DocMermaid({ entry }) {
+  const renderers = useBuiltinRenderers();
+  if (renderers.mermaid) {
+    return /* @__PURE__ */ jsx10(Fragment4, { children: renderers.mermaid(entry) });
+  }
+  return /* @__PURE__ */ jsxs6(
+    "figure",
+    {
+      className: "es-doc es-doc-mermaid",
+      "aria-label": entry.title ?? "Diagram",
+      children: [
+        entry.title ? /* @__PURE__ */ jsx10("figcaption", { children: entry.title }) : null,
+        /* @__PURE__ */ jsx10("pre", { "data-mermaid": true, children: entry.code })
+      ]
+    }
+  );
+}
+
+// src/components/doc/DocScreenshot.tsx
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+function DocScreenshot({ entry }) {
+  return /* @__PURE__ */ jsxs7("figure", { className: "es-doc es-doc-screenshot", children: [
+    /* @__PURE__ */ jsx11("img", { src: entry.path, alt: entry.alt ?? "", loading: "lazy" }),
+    entry.alt ? /* @__PURE__ */ jsx11("figcaption", { children: entry.alt }) : null
+  ] });
+}
+
+// src/components/doc/DocCustom.tsx
+import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function DocCustom({ entry }) {
+  const renderers = useCustomRenderers();
+  const renderer = renderers[entry.type];
+  if (renderer) {
+    return /* @__PURE__ */ jsx12(Fragment5, { children: renderer(entry) });
+  }
+  return /* @__PURE__ */ jsxs8("div", { className: "es-doc es-doc-custom", "data-type": entry.type, children: [
+    /* @__PURE__ */ jsx12("p", { className: "es-doc-custom-type", children: entry.type }),
+    /* @__PURE__ */ jsx12("pre", { children: safeStringify(entry.data) })
+  ] });
+}
+function safeStringify(value) {
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+// src/components/doc/DocEntry.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function DocEntry({ entry }) {
+  switch (entry.kind) {
+    case "note":
+      return /* @__PURE__ */ jsx13(DocNote, { entry });
+    case "tag":
+      return /* @__PURE__ */ jsx13(DocTag, { entry });
+    case "kv":
+      return /* @__PURE__ */ jsx13(DocKv, { entry });
+    case "code":
+      return /* @__PURE__ */ jsx13(DocCode, { entry });
+    case "table":
+      return /* @__PURE__ */ jsx13(DocTable, { entry });
+    case "link":
+      return /* @__PURE__ */ jsx13(DocLink, { entry });
+    case "section":
+      return /* @__PURE__ */ jsx13(DocSection, { entry });
+    case "mermaid":
+      return /* @__PURE__ */ jsx13(DocMermaid, { entry });
+    case "screenshot":
+      return /* @__PURE__ */ jsx13(DocScreenshot, { entry });
+    case "custom":
+      return /* @__PURE__ */ jsx13(DocCustom, { entry });
+  }
+}
+
+// src/components/ReportDocEntries.tsx
+import { Fragment as Fragment6, jsx as jsx14 } from "react/jsx-runtime";
+function ReportDocEntries({ entries }) {
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ jsx14(Fragment6, { children: entries.map((entry, i) => /* @__PURE__ */ jsx14(DocEntry, { entry }, i)) });
+}
+
+// src/components/ReportSteps.tsx
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+function ReportSteps({ scenario }) {
+  if (scenario.steps.length === 0) return null;
+  return /* @__PURE__ */ jsx15("ol", { className: "es-steps", children: scenario.steps.map((step) => /* @__PURE__ */ jsx15(ReportStepItem, { step }, step.id)) });
+}
+function ReportStepItem({ step }) {
+  return /* @__PURE__ */ jsxs9(
+    "li",
+    {
+      id: step.id,
+      className: `es-step es-step-${step.status}`,
+      "data-status": step.status,
+      children: [
+        /* @__PURE__ */ jsx15("span", { className: "es-step-keyword", children: step.keyword }),
+        /* @__PURE__ */ jsx15("span", { className: "es-step-text", children: step.text }),
+        step.errorMessage ? /* @__PURE__ */ jsx15("pre", { className: "es-scenario-error", role: "alert", children: step.errorMessage }) : null,
+        step.docEntries.length > 0 ? /* @__PURE__ */ jsx15("div", { className: "es-step-docs", children: /* @__PURE__ */ jsx15(ReportDocEntries, { entries: step.docEntries }) }) : null
+      ]
+    }
+  );
+}
+
+// src/components/ReportScenario.tsx
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+var STATUS_LABEL = {
+  passed: "Passed",
+  failed: "Failed",
+  skipped: "Skipped",
+  pending: "Pending"
+};
+function ReportScenario({ scenario }) {
+  const titleId = `${scenario.id}-title`;
+  return /* @__PURE__ */ jsxs10(
+    "article",
+    {
+      id: scenario.id,
+      className: `es-scenario es-status-${scenario.status}`,
+      "aria-labelledby": titleId,
+      "data-status": scenario.status,
+      children: [
+        /* @__PURE__ */ jsxs10("h3", { id: titleId, className: "es-scenario-title", children: [
+          /* @__PURE__ */ jsx16("span", { children: scenario.title }),
+          /* @__PURE__ */ jsx16("span", { className: "es-scenario-status", "aria-label": `Status: ${STATUS_LABEL[scenario.status]}`, children: STATUS_LABEL[scenario.status] })
+        ] }),
+        scenario.tags.length > 0 ? /* @__PURE__ */ jsx16("ul", { className: "es-tags", "aria-label": "Tags", children: scenario.tags.map((t) => /* @__PURE__ */ jsx16("li", { children: t }, t)) }) : null,
+        scenario.errorMessage ? /* @__PURE__ */ jsx16("pre", { className: "es-scenario-error", role: "alert", children: scenario.errorMessage }) : null,
+        scenario.docEntries.length > 0 ? /* @__PURE__ */ jsx16("div", { className: "es-scenario-docs", children: /* @__PURE__ */ jsx16(ReportDocEntries, { entries: scenario.docEntries }) }) : null,
+        /* @__PURE__ */ jsx16(ReportSteps, { scenario })
+      ]
+    }
+  );
+}
+
+// src/components/ReportScenarioList.tsx
+import { Fragment as Fragment7, jsx as jsx17 } from "react/jsx-runtime";
+function ReportScenarioList({ feature }) {
+  return /* @__PURE__ */ jsx17(Fragment7, { children: feature.scenarios.map((scenario) => /* @__PURE__ */ jsx17(ReportScenario, { scenario }, scenario.id)) });
+}
+
+// src/components/ReportFeature.tsx
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+function ReportFeature({ feature }) {
+  const titleId = `${feature.id}-title`;
+  return /* @__PURE__ */ jsxs11(
+    "section",
+    {
+      id: feature.id,
+      className: "es-feature",
+      "aria-labelledby": titleId,
+      children: [
+        /* @__PURE__ */ jsx18("h2", { id: titleId, className: "es-feature-title", children: feature.title }),
+        /* @__PURE__ */ jsx18("p", { className: "es-feature-source", children: feature.sourceFile }),
+        /* @__PURE__ */ jsx18(ReportSummaryView, { summary: feature.summary, className: "es-feature-summary" }),
+        /* @__PURE__ */ jsx18(ReportScenarioList, { feature })
+      ]
+    }
+  );
+}
+
+// src/components/ReportFeatureList.tsx
+import { Fragment as Fragment8, jsx as jsx19 } from "react/jsx-runtime";
+function ReportFeatureList() {
+  const report = useReport();
+  return /* @__PURE__ */ jsx19(Fragment8, { children: report.features.map((feature) => /* @__PURE__ */ jsx19(ReportFeature, { feature }, feature.id)) });
+}
+
+// src/components/ReportEmpty.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function ReportEmpty({ message }) {
+  return /* @__PURE__ */ jsx20("section", { className: "es-empty", "aria-live": "polite", children: /* @__PURE__ */ jsx20("p", { children: message ?? "No scenarios in this report." }) });
+}
+
+// src/components/ReportSchemaError.tsx
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+function ReportSchemaError({ error }) {
+  return /* @__PURE__ */ jsxs12("section", { className: "es-schema-error", role: "alert", "aria-live": "assertive", children: [
+    /* @__PURE__ */ jsx21("p", { children: /* @__PURE__ */ jsx21("strong", { children: "Report could not be displayed." }) }),
+    /* @__PURE__ */ jsx21("p", { children: error.message }),
+    error.code === "SCHEMA_VERSION_MISMATCH" ? /* @__PURE__ */ jsxs12("p", { children: [
+      "The report bundle is newer than this version of ",
+      /* @__PURE__ */ jsx21("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__ */ jsxs12("details", { children: [
+      /* @__PURE__ */ jsxs12("summary", { children: [
+        error.issues.length,
+        " validation issue",
+        error.issues.length === 1 ? "" : "s"
+      ] }),
+      /* @__PURE__ */ jsx21("pre", { children: error.issues.slice(0, 20).map((i) => `${i.path}: ${i.message}`).join("\n") })
+    ] }) : null
+  ] });
+}
+
+// src/interactive/ReportSearch.tsx
+import {
+  forwardRef,
+  useId
+} from "react";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+var ReportSearch = forwardRef(
+  function ReportSearch2(props, ref) {
+    const {
+      value,
+      onChange,
+      matchedCount,
+      totalCount,
+      placeholder = "Search scenarios, tags, or step text\u2026",
+      className
+    } = props;
+    const inputId = 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__ */ jsxs13("div", { className: ["es-search", className].filter(Boolean).join(" "), children: [
+      /* @__PURE__ */ jsx22("label", { htmlFor: inputId, className: "es-search-label", children: "Search" }),
+      /* @__PURE__ */ jsx22(
+        "input",
+        {
+          ref,
+          id: inputId,
+          type: "search",
+          value,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          placeholder,
+          autoComplete: "off",
+          spellCheck: false,
+          "aria-keyshortcuts": "/"
+        }
+      ),
+      showCounts ? /* @__PURE__ */ jsx22("span", { className: "es-search-counts", "aria-live": "polite", children: value ? `${matchedCount} of ${totalCount}` : `${totalCount} total` }) : null
+    ] });
+  }
+);
+
+// src/interactive/ReportFailureBanner.tsx
+import { useCallback } from "react";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+function ReportFailureBanner({ failures }) {
+  const first = failures[0];
+  const jumpToFirst = 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__ */ jsxs14(
+    "aside",
+    {
+      className: "es-failure-banner",
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": "Failure summary",
+      children: [
+        /* @__PURE__ */ jsxs14("span", { className: "es-failure-banner-text", children: [
+          /* @__PURE__ */ jsx23("strong", { children: failures.length }),
+          " ",
+          "failure",
+          failures.length === 1 ? "" : "s"
+        ] }),
+        /* @__PURE__ */ jsx23(
+          "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
+import { useEffect, useRef } from "react";
+import { jsx as jsx24, jsxs as jsxs15 } from "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 = useRef(null);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) dialog.showModal();
+    else if (!open && dialog.open) dialog.close();
+  }, [open]);
+  return /* @__PURE__ */ jsxs15(
+    "dialog",
+    {
+      ref: dialogRef,
+      className: "es-shortcuts-help",
+      "aria-label": "Keyboard shortcuts",
+      onClose,
+      children: [
+        /* @__PURE__ */ jsx24("h2", { children: "Keyboard shortcuts" }),
+        /* @__PURE__ */ jsx24("dl", { children: SHORTCUTS.map((s) => /* @__PURE__ */ jsxs15("div", { children: [
+          /* @__PURE__ */ jsx24("dt", { children: /* @__PURE__ */ jsx24("kbd", { children: s.keys }) }),
+          /* @__PURE__ */ jsx24("dd", { children: s.description })
+        ] }, s.keys)) }),
+        /* @__PURE__ */ jsx24("form", { method: "dialog", children: /* @__PURE__ */ jsx24("button", { type: "submit", className: "es-shortcuts-close", children: "Close" }) })
+      ]
+    }
+  );
+}
+
+// src/interactive/use-keyboard-shortcuts.ts
+import { useEffect as useEffect2, useRef as useRef2 } from "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 = useRef2(handlers);
+  ref.current = handlers;
+  useEffect2(() => {
+    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
+import { useEffect as useEffect3 } from "react";
+function useDeepLinkScroll() {
+  useEffect3(() => {
+    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
+import { jsx as jsx25, jsxs as jsxs16 } from "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__ */ jsx25(
+        "main",
+        {
+          className: ["es-report", className].filter(Boolean).join(" "),
+          "aria-label": title ?? "Test report",
+          "data-theme": dataTheme,
+          children: /* @__PURE__ */ jsx25(ReportSchemaError, { error: report.error })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx25(ReportInteractiveView, { ...props, report: report.data });
+  }
+  return /* @__PURE__ */ jsx25(ReportInteractiveView, { ...props, report });
+}
+function ReportInteractiveView({
+  report,
+  customRenderers,
+  renderers,
+  className,
+  title,
+  dataTheme
+}) {
+  const [query, setQuery] = useState("");
+  const [helpOpen, setHelpOpen] = useState(false);
+  const searchRef = useRef3(null);
+  const failures = useMemo2(() => listFailures(report), [report]);
+  const filtered = useMemo2(() => filterReport(report, query), [report, query]);
+  const failureIndexRef = useRef3(0);
+  const focusSearch = useCallback2(() => {
+    searchRef.current?.focus();
+  }, []);
+  const scrollToScenario = useCallback2((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 = useCallback2(
+    (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 = useCallback2(() => {
+    setHelpOpen((v) => !v);
+  }, []);
+  const escape = useCallback2(() => {
+    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__ */ jsx25(
+    ReportRoot,
+    {
+      report: filtered,
+      customRenderers,
+      renderers,
+      children: /* @__PURE__ */ jsxs16(
+        "main",
+        {
+          className: ["es-report", "es-report-interactive", className].filter(Boolean).join(" "),
+          "aria-label": title ?? "Test report",
+          "data-theme": dataTheme,
+          children: [
+            /* @__PURE__ */ jsxs16("header", { className: "es-report-header", children: [
+              /* @__PURE__ */ jsx25("h1", { children: title ?? "Story Report" }),
+              /* @__PURE__ */ jsx25(ReportSummary, {}),
+              /* @__PURE__ */ jsx25(
+                ReportSearch,
+                {
+                  ref: searchRef,
+                  value: query,
+                  onChange: setQuery,
+                  matchedCount: matchedScenarios,
+                  totalCount: totalScenarios
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx25(ReportFailureBanner, { failures }),
+            hasContent ? /* @__PURE__ */ jsx25(ReportFeatureList, {}) : /* @__PURE__ */ jsx25(ReportEmpty, { message: query ? "No scenarios match the search." : void 0 }),
+            /* @__PURE__ */ jsx25(
+              "button",
+              {
+                type: "button",
+                className: "es-shortcuts-trigger",
+                "aria-label": "Keyboard shortcuts",
+                "aria-keyshortcuts": "Shift+?",
+                onClick: toggleHelp,
+                children: "?"
+              }
+            ),
+            /* @__PURE__ */ jsx25(ReportShortcutsHelp, { open: helpOpen, onClose: () => setHelpOpen(false) })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  ReportFailureBanner,
+  ReportInteractive,
+  ReportSearch,
+  ReportShortcutsHelp,
+  filterReport,
+  listFailures,
+  normalizeQuery,
+  useDeepLinkScroll,
+  useKeyboardShortcuts
+};
+//# sourceMappingURL=interactive.js.map