@generative-a11y/devtools 0.1.0

package/dist/overlay.js

@@ -0,0 +1,802 @@
+// src/overlay.ts
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+
+// src/inspector.tsx
+import * as React4 from "react";
+import { Copy, Pause, Play, RefreshCw, Search, X } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+
+// src/components/ui/button.tsx
+import "react";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/button.tsx
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "ga-:group/button ga-:inline-flex ga-:shrink-0 ga-:items-center ga-:justify-center ga-:rounded-lg ga-:border ga-:border-transparent ga-:bg-clip-padding ga-:text-sm ga-:font-medium ga-:whitespace-nowrap ga-:transition-all ga-:outline-none ga-:select-none ga-:focus-visible:border-ring ga-:focus-visible:ring-3 ga-:focus-visible:ring-ring/50 ga-:active:not-aria-[haspopup]:translate-y-px ga-:disabled:pointer-events-none ga-:disabled:opacity-50 ga-:aria-invalid:border-destructive ga-:aria-invalid:ring-3 ga-:aria-invalid:ring-destructive/20 ga-:dark:aria-invalid:border-destructive/50 ga-:dark:aria-invalid:ring-destructive/40 ga-:[&_svg]:pointer-events-none ga-:[&_svg]:shrink-0 ga-:[&_svg:not([class*=size-])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "ga-:bg-primary ga-:text-primary-foreground ga-:hover:bg-primary/80",
+        outline: "ga-:border-border ga-:bg-background ga-:hover:bg-muted ga-:hover:text-foreground ga-:aria-expanded:bg-muted ga-:aria-expanded:text-foreground ga-:dark:border-input ga-:dark:bg-input/30 ga-:dark:hover:bg-input/50",
+        secondary: "ga-:bg-secondary ga-:text-secondary-foreground ga-:hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] ga-:aria-expanded:bg-secondary ga-:aria-expanded:text-secondary-foreground",
+        ghost: "ga-:hover:bg-muted ga-:hover:text-foreground ga-:aria-expanded:bg-muted ga-:aria-expanded:text-foreground ga-:dark:hover:bg-muted/50",
+        destructive: "ga-:bg-destructive/10 ga-:text-destructive ga-:hover:bg-destructive/20 ga-:focus-visible:border-destructive/40 ga-:focus-visible:ring-destructive/20 ga-:dark:bg-destructive/20 ga-:dark:hover:bg-destructive/30 ga-:dark:focus-visible:ring-destructive/40",
+        link: "ga-:text-primary ga-:underline-offset-4 ga-:hover:underline"
+      },
+      size: {
+        default: "ga-:h-8 ga-:gap-1.5 ga-:px-2.5 ga-:has-data-[icon=inline-end]:pr-2 ga-:has-data-[icon=inline-start]:pl-2",
+        xs: "ga-:h-6 ga-:gap-1 ga-:rounded-[min(var(--radius-md),10px)] ga-:px-2 ga-:text-xs ga-:in-data-[slot=button-group]:rounded-lg ga-:has-data-[icon=inline-end]:pr-1.5 ga-:has-data-[icon=inline-start]:pl-1.5 ga-:[&_svg:not([class*=size-])]:size-3",
+        sm: "ga-:h-7 ga-:gap-1 ga-:rounded-[min(var(--radius-md),12px)] ga-:px-2.5 ga-:text-[0.8rem] ga-:in-data-[slot=button-group]:rounded-lg ga-:has-data-[icon=inline-end]:pr-1.5 ga-:has-data-[icon=inline-start]:pl-1.5 ga-:[&_svg:not([class*=size-])]:size-3.5",
+        lg: "ga-:h-9 ga-:gap-1.5 ga-:px-2.5 ga-:has-data-[icon=inline-end]:pr-2 ga-:has-data-[icon=inline-start]:pl-2",
+        icon: "ga-:size-8",
+        "icon-xs": "ga-:size-6 ga-:rounded-[min(var(--radius-md),10px)] ga-:in-data-[slot=button-group]:rounded-lg ga-:[&_svg:not([class*=size-])]:size-3",
+        "icon-sm": "ga-:size-7 ga-:rounded-[min(var(--radius-md),12px)] ga-:in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "ga-:size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/input.tsx
+import "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "ga-:h-8 ga-:w-full ga-:min-w-0 ga-:rounded-lg ga-:border ga-:border-input ga-:bg-transparent ga-:px-2.5 ga-:py-1 ga-:text-base ga-:transition-colors ga-:outline-none ga-:file:inline-flex ga-:file:h-6 ga-:file:border-0 ga-:file:bg-transparent ga-:file:text-sm ga-:file:font-medium ga-:file:text-foreground ga-:placeholder:text-muted-foreground ga-:focus-visible:border-ring ga-:focus-visible:ring-3 ga-:focus-visible:ring-ring/50 ga-:disabled:pointer-events-none ga-:disabled:cursor-not-allowed ga-:disabled:bg-input/50 ga-:disabled:opacity-50 ga-:aria-invalid:border-destructive ga-:aria-invalid:ring-3 ga-:aria-invalid:ring-destructive/20 ga-:md:text-sm ga-:dark:bg-input/30 ga-:dark:disabled:bg-input/80 ga-:dark:aria-invalid:border-destructive/50 ga-:dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/resizable.tsx
+import * as ResizablePrimitive from "react-resizable-panels";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ResizablePanelGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    ResizablePrimitive.Group,
+    {
+      "data-slot": "resizable-panel-group",
+      className: cn(
+        "ga-:flex ga-:h-full ga-:w-full ga-:aria-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ResizablePanel({ ...props }) {
+  return /* @__PURE__ */ jsx3(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
+}
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    ResizablePrimitive.Separator,
+    {
+      "data-slot": "resizable-handle",
+      className: cn(
+        "ga-:relative ga-:flex ga-:w-px ga-:items-center ga-:justify-center ga-:bg-border ga-:ring-offset-background ga-:after:absolute ga-:after:inset-y-0 ga-:after:left-1/2 ga-:after:w-1 ga-:after:-translate-x-1/2 ga-:focus-visible:ring-1 ga-:focus-visible:ring-ring ga-:focus-visible:outline-hidden ga-:aria-[orientation=horizontal]:h-px ga-:aria-[orientation=horizontal]:w-full ga-:aria-[orientation=horizontal]:after:left-0 ga-:aria-[orientation=horizontal]:after:h-1 ga-:aria-[orientation=horizontal]:after:w-full ga-:aria-[orientation=horizontal]:after:translate-x-0 ga-:aria-[orientation=horizontal]:after:-translate-y-1/2 ga-:[&[aria-orientation=horizontal]>div]:rotate-90",
+        className
+      ),
+      ...props,
+      children: withHandle && /* @__PURE__ */ jsx3("div", { className: "ga-:z-10 ga-:flex ga-:h-6 ga-:w-1 ga-:shrink-0 ga-:rounded-lg ga-:bg-border" })
+    }
+  );
+}
+
+// src/components/ui/scroll-area.tsx
+import "react";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ScrollAreaPrimitive.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("ga-:relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx4(
+          ScrollAreaPrimitive.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: "ga-:size-full ga-:rounded-[inherit] ga-:transition-[color,box-shadow] ga-:outline-none ga-:focus-visible:ring-[3px] ga-:focus-visible:ring-ring/50 ga-:focus-visible:outline-1",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx4(ScrollBar, {}),
+        /* @__PURE__ */ jsx4(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      "data-orientation": orientation,
+      orientation,
+      className: cn(
+        "ga-:flex ga-:touch-none ga-:p-px ga-:transition-colors ga-:select-none ga-:data-horizontal:h-2.5 ga-:data-horizontal:flex-col ga-:data-horizontal:border-t ga-:data-horizontal:border-t-transparent ga-:data-vertical:h-full ga-:data-vertical:w-2.5 ga-:data-vertical:border-l ga-:data-vertical:border-l-transparent",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx4(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "ga-:relative ga-:flex-1 ga-:rounded-full ga-:bg-border"
+        }
+      )
+    }
+  );
+}
+
+// src/inspector.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var key = (record) => String(record.captureSequence);
+var time = (value) => value >= 1e10 ? new Date(value).toISOString().slice(11, 23) : `+${(value / 1e3).toFixed(2)}s`;
+var stage = (record) => record.kind === "event-observed" ? "Source evidence" : record.kind === "decision" ? "Runtime decision" : "DOM delivery";
+var title = (record) => record.kind === "event-observed" ? record.sourceType ?? "Observed event" : record.kind === "dom-delivery" ? `${record.deliveryStatus ?? "Delivery"} via ${record.deliveryMethod ?? "browser"}` : record.reason ?? record.disposition ?? "Runtime decision";
+function correlation(record) {
+  const prefix = `${record.runtimeId}:`;
+  if (record.sourceEventId) return `${prefix}event:${record.sourceEventId}`;
+  if (record.responseId)
+    return `${prefix}response:${record.responseId}:${record.sourceType ?? "unknown"}`;
+  if (record.toolId)
+    return `${prefix}tool:${record.toolId}:${record.sourceType ?? "unknown"}`;
+  if (record.interactionId)
+    return `${prefix}interaction:${record.interactionId}`;
+  if (record.approvalId) return `${prefix}approval:${record.approvalId}`;
+  if (record.announcementId)
+    return `${prefix}announcement:${record.announcementId}`;
+  return `${prefix}record:${record.captureSequence}`;
+}
+function explain(record) {
+  if (record.kind === "event-observed")
+    return "The adapter supplied this normalized public lifecycle signal.";
+  if (record.kind === "dom-delivery")
+    return record.deliveryStatus === "unavailable" ? "The DOM driver was unavailable, so no browser delivery action was observed." : "The DOM driver reported this delivery action.";
+  return {
+    scheduled: "The runtime placed an announcement intent into its bounded queue.",
+    coalesced: "The runtime merged this work with an existing queued announcement.",
+    duplicate: "The runtime suppressed a recently delivered duplicate.",
+    "policy-silent": "The active policy intentionally made this event silent.",
+    "queue-capacity": "The bounded queue rejected or displaced this work.",
+    "scope-cancelled": "The lifecycle scope ended before this queued work delivered.",
+    "runtime-disposed": "The runtime was disposed and cancelled remaining queued work.",
+    "stale-response": "This signal did not match the active response epoch.",
+    "stale-tool": "This signal did not match the active tool instance.",
+    "delivery-error": "A registered announcement listener failed during delivery.",
+    delivered: "A registered runtime announcement listener accepted this intent."
+  }[record.reason ?? ""] ?? "The runtime recorded this policy decision.";
+}
+function useSnapshot(store) {
+  return React4.useSyncExternalStore(
+    React4.useCallback((listener) => store.subscribe(listener), [store]),
+    React4.useCallback(() => store.getSnapshot(), [store])
+  );
+}
+function CausalChain({
+  records
+}) {
+  return /* @__PURE__ */ jsxs2("section", { className: "ga-causal-chain", "data-testid": "causal-chain", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "ga-section-heading", children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx5("p", { children: "Related evidence" }),
+        /* @__PURE__ */ jsx5("h3", { children: "Observed path" })
+      ] }),
+      /* @__PURE__ */ jsxs2("span", { children: [
+        records.length,
+        " records"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx5("ol", { children: records.map((record, index) => /* @__PURE__ */ jsxs2("li", { "data-stage": record.kind, children: [
+      /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", children: String(index + 1).padStart(2, "0") }),
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx5("b", { children: stage(record) }),
+        /* @__PURE__ */ jsx5("code", { children: title(record) })
+      ] }),
+      /* @__PURE__ */ jsx5("time", { children: time(record.at) })
+    ] }, key(record))) })
+  ] });
+}
+function Detail({
+  record,
+  related,
+  snapshot
+}) {
+  if (!record)
+    return /* @__PURE__ */ jsx5("aside", { className: "ga-trace-detail", "data-testid": "trace-detail", children: /* @__PURE__ */ jsxs2("div", { className: "ga-empty-state", children: [
+      /* @__PURE__ */ jsx5("p", { children: "Choose a record" }),
+      /* @__PURE__ */ jsx5("h3", { children: "Trace one accessibility decision from source to delivery." }),
+      /* @__PURE__ */ jsx5("span", { children: "Selection never changes the runtime, queue, or host focus." })
+    ] }) });
+  const source = snapshot.runtimeSources[record.runtimeSourceId ?? record.runtimeId];
+  const runtime = snapshot.runtimeSnapshots[record.runtimeId];
+  const deliveries = related.filter((item) => item.kind === "dom-delivery");
+  return /* @__PURE__ */ jsxs2("aside", { className: "ga-trace-detail", "data-testid": "trace-detail", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "ga-detail-intro", children: [
+      /* @__PURE__ */ jsx5("p", { children: stage(record) }),
+      /* @__PURE__ */ jsx5("h3", { children: title(record) }),
+      /* @__PURE__ */ jsx5("span", { children: explain(record) })
+    ] }),
+    /* @__PURE__ */ jsxs2("section", { className: "ga-detail-section", children: [
+      /* @__PURE__ */ jsx5("h4", { children: "Why inspect this" }),
+      /* @__PURE__ */ jsx5("p", { children: record.reason?.startsWith("stale") ? "Compare the instance with the current runtime snapshot." : "Inspect related evidence and queue context if this was unexpected." })
+    ] }),
+    /* @__PURE__ */ jsx5(CausalChain, { records: related }),
+    /* @__PURE__ */ jsxs2("section", { className: "ga-detail-section", children: [
+      /* @__PURE__ */ jsx5("h4", { children: "Source evidence" }),
+      source ? /* @__PURE__ */ jsxs2("dl", { className: "ga-key-values", children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx5("dt", { children: "Adapter" }),
+          /* @__PURE__ */ jsx5("dd", { children: source.adapter })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx5("dt", { children: "Interruption" }),
+          /* @__PURE__ */ jsx5("dd", { children: source.fidelity.interruption })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx5("dt", { children: "Retry" }),
+          /* @__PURE__ */ jsx5("dd", { children: source.fidelity.retries })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx5("dt", { children: "Connection" }),
+          /* @__PURE__ */ jsx5("dd", { children: source.fidelity.connection })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "ga-key-values-wide", children: [
+          /* @__PURE__ */ jsx5("dt", { children: "Public signals" }),
+          /* @__PURE__ */ jsx5("dd", { children: source.evidence.join(", ") })
+        ] })
+      ] }) : /* @__PURE__ */ jsx5("p", { children: "Adapter evidence was not declared for this runtime." })
+    ] }),
+    /* @__PURE__ */ jsxs2("section", { className: "ga-detail-section", children: [
+      /* @__PURE__ */ jsx5("h4", { children: "Policy and scheduling" }),
+      runtime ? /* @__PURE__ */ jsxs2("dl", { className: "ga-key-values", children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx5("dt", { children: "Queue" }),
+          /* @__PURE__ */ jsxs2("dd", { children: [
+            runtime.pendingCount,
+            " pending"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx5("dt", { children: "Minimum gap" }),
+          /* @__PURE__ */ jsxs2("dd", { children: [
+            runtime.policy.minimumGapMs,
+            " ms"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx5("dt", { children: "Due" }),
+          /* @__PURE__ */ jsx5("dd", { children: record.dueAt === void 0 ? "Not scheduled" : time(record.dueAt) })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx5("dt", { children: "Queue sequence" }),
+          /* @__PURE__ */ jsx5("dd", { children: record.queueSequence ?? "Not queued" })
+        ] })
+      ] }) : /* @__PURE__ */ jsx5("p", { children: "No current runtime snapshot is available." })
+    ] }),
+    /* @__PURE__ */ jsxs2("section", { className: "ga-detail-section", children: [
+      /* @__PURE__ */ jsx5("h4", { children: "Delivery evidence" }),
+      deliveries.length ? deliveries.map((delivery) => /* @__PURE__ */ jsx5("p", { children: /* @__PURE__ */ jsxs2("code", { children: [
+        delivery.deliveryMethod,
+        " \xB7 ",
+        delivery.deliveryStatus
+      ] }) }, key(delivery))) : /* @__PURE__ */ jsx5("p", { children: "No instrumented DOM delivery result is correlated with this record." }),
+      /* @__PURE__ */ jsx5("p", { className: "ga-boundary", children: "A runtime intent or DOM result does not prove that a screen reader spoke." })
+    ] }),
+    /* @__PURE__ */ jsxs2("details", { className: "ga-raw-record", children: [
+      /* @__PURE__ */ jsx5("summary", { children: "Structured record" }),
+      /* @__PURE__ */ jsx5("pre", { children: JSON.stringify(record, null, 2) })
+    ] })
+  ] });
+}
+function List({
+  records,
+  selected,
+  onSelect
+}) {
+  const index = Math.max(
+    0,
+    records.findIndex((record) => key(record) === selected)
+  );
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "aria-activedescendant": selected ? `trace-${selected}` : void 0,
+      "aria-label": "Captured accessibility trace",
+      className: "ga-trace-list",
+      onKeyDown: (event) => {
+        const direction = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+        if (!direction || !records.length) return;
+        event.preventDefault();
+        const next = records[Math.max(0, Math.min(records.length - 1, index + direction))];
+        if (next) {
+          onSelect(key(next));
+          event.currentTarget.querySelector(`#trace-${key(next)}`)?.scrollIntoView({ block: "nearest" });
+        }
+      },
+      role: "listbox",
+      tabIndex: 0,
+      children: [
+        records.map((record) => /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            "aria-selected": key(record) === selected,
+            className: "ga-trace-row",
+            id: `trace-${key(record)}`,
+            onClick: () => onSelect(key(record)),
+            role: "option",
+            children: [
+              /* @__PURE__ */ jsx5("time", { children: time(record.at) }),
+              /* @__PURE__ */ jsx5("span", { children: stage(record) }),
+              /* @__PURE__ */ jsx5("strong", { children: title(record) }),
+              /* @__PURE__ */ jsx5("code", { children: record.reason ?? record.sourceType ?? record.deliveryStatus ?? "recorded" })
+            ]
+          },
+          key(record)
+        )),
+        !records.length ? /* @__PURE__ */ jsx5("div", { className: "ga-empty-list", children: "No trace records match this view." }) : null
+      ]
+    }
+  );
+}
+function DevtoolsInspector({
+  store,
+  onClose,
+  onCopy
+}) {
+  const snapshot = useSnapshot(store);
+  const reduceMotion = useReducedMotion();
+  const [query, setQuery] = React4.useState("");
+  const [filter, setFilter] = React4.useState("all");
+  const [selectedKey, setSelectedKey] = React4.useState();
+  const [feedback, setFeedback] = React4.useState();
+  const feedbackTimer = React4.useRef(void 0);
+  const actionRevision = React4.useRef(0);
+  const visible = snapshot.records.filter(
+    (record) => (filter === "all" || record.kind === filter) && [
+      record.kind,
+      record.sourceType,
+      record.reason,
+      record.disposition,
+      record.responseId,
+      record.toolId,
+      record.interactionId,
+      record.approvalId
+    ].filter(Boolean).join(" ").toLowerCase().includes(query.trim().toLowerCase())
+  ).slice().reverse();
+  const selected = visible.find((record) => key(record) === selectedKey) ?? visible[0];
+  const related = selected ? snapshot.records.filter(
+    (record) => correlation(record) === correlation(selected)
+  ) : [];
+  React4.useEffect(
+    () => () => {
+      if (feedbackTimer.current !== void 0)
+        window.clearTimeout(feedbackTimer.current);
+    },
+    []
+  );
+  const closeInspector = () => {
+    actionRevision.current += 1;
+    if (feedbackTimer.current !== void 0)
+      window.clearTimeout(feedbackTimer.current);
+    feedbackTimer.current = void 0;
+    setFeedback(void 0);
+    onClose();
+  };
+  const notice = (message) => {
+    if (feedbackTimer.current !== void 0)
+      window.clearTimeout(feedbackTimer.current);
+    setFeedback(message);
+    feedbackTimer.current = window.setTimeout(
+      () => setFeedback(void 0),
+      2200
+    );
+  };
+  const copy = async () => {
+    if (!onCopy) return notice("Copy is unavailable in this mount");
+    const revision = ++actionRevision.current;
+    if (feedbackTimer.current !== void 0)
+      window.clearTimeout(feedbackTimer.current);
+    setFeedback("Copying trace");
+    try {
+      await onCopy(JSON.stringify(store.exportTrace(), null, 2));
+      if (actionRevision.current === revision) notice("Trace copied");
+    } catch {
+      if (actionRevision.current === revision)
+        notice("Copy could not complete");
+    }
+  };
+  return /* @__PURE__ */ jsxs2(
+    "section",
+    {
+      "aria-label": "Generative accessibility trace explorer",
+      className: "ga-inspector",
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          closeInspector();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs2("header", { className: "ga-inspector-header", children: [
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx5("p", { children: "Local diagnostic session" }),
+            /* @__PURE__ */ jsx5("h2", { children: "Accessibility trace" })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "ga-header-actions", children: [
+            /* @__PURE__ */ jsxs2(
+              Button,
+              {
+                onClick: () => {
+                  if (snapshot.paused) {
+                    store.resumeCapture();
+                    notice("Capture resumed");
+                  } else {
+                    store.pauseCapture();
+                    notice("Capture paused");
+                  }
+                },
+                size: "sm",
+                variant: "secondary",
+                children: [
+                  snapshot.paused ? /* @__PURE__ */ jsx5(Play, { "aria-hidden": "true", size: 14 }) : /* @__PURE__ */ jsx5(Pause, { "aria-hidden": "true", size: 14 }),
+                  snapshot.paused ? "Resume" : "Pause"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              Button,
+              {
+                "aria-label": "Refresh runtime snapshot",
+                onClick: () => {
+                  store.refreshSnapshots();
+                  notice("Runtime snapshot refreshed");
+                },
+                size: "icon-sm",
+                variant: "ghost",
+                children: /* @__PURE__ */ jsx5(RefreshCw, { "aria-hidden": "true", size: 15 })
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              Button,
+              {
+                "aria-label": "Close inspector",
+                onClick: closeInspector,
+                size: "icon-sm",
+                variant: "ghost",
+                children: /* @__PURE__ */ jsx5(X, { "aria-hidden": "true", size: 17 })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx5("div", { "aria-live": "polite", role: "status", children: /* @__PURE__ */ jsx5(AnimatePresence, { children: feedback ? /* @__PURE__ */ jsx5(
+          motion.div,
+          {
+            animate: reduceMotion ? false : { opacity: 1, y: 0 },
+            className: "ga-workspace-feedback",
+            "data-testid": "workspace-feedback",
+            ...reduceMotion ? {} : { exit: { opacity: 0, y: 4 } },
+            initial: reduceMotion ? false : { opacity: 0, y: 4 },
+            children: feedback
+          }
+        ) : null }) }),
+        /* @__PURE__ */ jsxs2("div", { className: "ga-session-toolbar", children: [
+          /* @__PURE__ */ jsxs2("label", { className: "ga-inspector-search", children: [
+            /* @__PURE__ */ jsx5(Search, { "aria-hidden": "true", size: 15 }),
+            /* @__PURE__ */ jsx5(
+              Input,
+              {
+                "aria-label": "Search trace",
+                onChange: (event) => setQuery(event.target.value),
+                placeholder: "Search safe metadata",
+                type: "search",
+                value: query
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx5(
+            "div",
+            {
+              "aria-label": "Trace category",
+              className: "ga-filter-group",
+              role: "group",
+              children: ["all", "event-observed", "decision", "dom-delivery"].map(
+                (value) => /* @__PURE__ */ jsx5(
+                  Button,
+                  {
+                    "aria-pressed": filter === value,
+                    onClick: () => setFilter(value),
+                    size: "sm",
+                    variant: filter === value ? "secondary" : "ghost",
+                    children: value === "all" ? "All" : value === "event-observed" ? "Source" : value === "decision" ? "Decisions" : "Delivery"
+                  },
+                  value
+                )
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs2("span", { className: "ga-session-count", children: [
+            snapshot.records.length,
+            " captured \xB7 ",
+            snapshot.droppedCount,
+            " dropped"
+          ] }),
+          /* @__PURE__ */ jsxs2(Button, { onClick: () => void copy(), size: "sm", variant: "ghost", children: [
+            /* @__PURE__ */ jsx5(Copy, { "aria-hidden": "true", size: 14 }),
+            " Copy"
+          ] }),
+          /* @__PURE__ */ jsx5(
+            Button,
+            {
+              onClick: () => {
+                store.clear();
+                setSelectedKey(void 0);
+                notice("Local trace cleared");
+              },
+              size: "sm",
+              variant: "ghost",
+              children: "Clear"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2(
+          ResizablePanelGroup,
+          {
+            className: "ga-explorer-layout",
+            orientation: "horizontal",
+            children: [
+              /* @__PURE__ */ jsx5(ResizablePanel, { defaultSize: 48, minSize: 34, children: /* @__PURE__ */ jsx5(ScrollArea, { className: "ga-trace-scroll", children: /* @__PURE__ */ jsx5(
+                List,
+                {
+                  onSelect: setSelectedKey,
+                  records: visible,
+                  selected: selected ? key(selected) : void 0
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx5(ResizableHandle, { withHandle: true }),
+              /* @__PURE__ */ jsx5(ResizablePanel, { defaultSize: 52, minSize: 34, children: /* @__PURE__ */ jsx5(Detail, { record: selected, related, snapshot }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/overlay.ts
+var styles = `
+:host { all: initial; color: #e7e5e4; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+*, *::before, *::after { box-sizing: border-box; }
+button, input { font: inherit; }
+button { cursor: pointer; }
+button:focus-visible, input:focus-visible, [role="separator"]:focus-visible { outline: 1px solid #d6d3d1; outline-offset: 2px; }
+.ga-launcher { position: fixed; z-index: 2147483646; left: 50%; bottom: 0; min-width: 184px; min-height: 34px; padding: 0 16px; color: #d6d3d1; background: #18181b; border: 1px solid #3f3f46; border-bottom: 0; border-radius: 8px 8px 0 0; box-shadow: 0 -8px 28px #0004; font-size: 12px; font-weight: 560; letter-spacing: -.005em; transform: translateX(-50%); }
+.ga-launcher:hover { color: #fafaf9; background: #27272a; }
+.ga-bottom-dock { position: fixed; z-index: 2147483647; right: 0; bottom: 0; left: 0; width: 100%; height: min(570px, 62vh); min-height: 340px; overflow: hidden; color: #e7e5e4; background: #18181b; border-top: 1px solid #3f3f46; border-radius: 12px 12px 0 0; box-shadow: 0 -20px 60px #0008; }
+.ga-inspector { position: relative; display: flex; height: 100%; min-height: 0; flex-direction: column; background: #171717; }
+.ga-inspector-header { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 18px; border-bottom: 1px solid #3f3f46; background: #18181b; }
+[data-slot="button"] { display: inline-flex; min-height: 30px; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; color: #d6d3d1; background: transparent; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 600; }
+[data-slot="button"][data-variant="outline"] { border-color: #52525b; background: #27272a; }
+[data-slot="button"][data-variant="outline"]:hover, [data-slot="button"][data-variant="ghost"]:hover { color: #fafaf9; background: #3f3f46; }
+[data-slot="button"][data-variant="secondary"] { color: #1c1917; background: #e7e5e4; }
+[data-slot="button"][data-variant="secondary"]:hover { background: #fafaf9; }
+[data-slot="button"][data-size="icon-sm"] { width: 30px; padding: 0; }
+.ga-workspace-feedback { position: absolute; z-index: 5; top: 58px; right: 16px; padding: 8px 10px; color: #fafaf9; background: #27272a; border: 1px solid #52525b; border-radius: 7px; box-shadow: 0 10px 30px #0007; font-size: 12px; }
+.ga-inspector-search { display: flex; width: min(360px, 50%); align-items: center; gap: 8px; padding: 0 9px; color: #a8a29e; background: #20201f; border: 1px solid #3f3f46; border-radius: 7px; }
+[data-slot="input"] { width: 100%; height: 31px; padding: 0; color: #e7e5e4; background: transparent; border: 0; outline: 0; font-size: 12px; }
+[data-slot="input"]::placeholder { color: #a8a29e; }
+[data-slot="resizable-panel"] { min-width: 0; min-height: 0; }
+[data-slot="resizable-handle"] { position: relative; width: 1px; background: #3f3f46; }
+[data-slot="resizable-handle"] > div { position: absolute; top: calc(50% - 14px); left: -2px; width: 5px; height: 28px; background: #71717a; border-radius: 999px; }
+[data-slot="scroll-area"], [data-slot="scroll-area-viewport"] { height: 100%; }
+@media (prefers-reduced-motion: no-preference) { .ga-bottom-dock { animation: ga-inspector-enter 180ms cubic-bezier(.2,.8,.2,1); } @keyframes ga-inspector-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } }
+:host { color: #171717; font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+button:focus-visible, input:focus-visible, [role="listbox"]:focus-visible, [role="separator"]:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
+.ga-launcher { color: #f7f7f7; background: #111; border-color: #111; border-radius: 4px 4px 0 0; box-shadow: none; }
+.ga-launcher:hover { color: #fff; background: #333; }
+.ga-bottom-dock { height: min(620px, 68vh); color: #171717; background: #f7f7f7; border-color: #111; border-radius: 0; box-shadow: 0 -12px 34px #0003; }
+.ga-inspector { background: #f7f7f7; }
+.ga-inspector-header { min-height: 58px; padding: 12px 24px; color: #111; background: #f7f7f7; border-color: #d0d0d0; }
+.ga-inspector-header p, .ga-inspector-header h2 { margin: 0; }
+.ga-inspector-header p, .ga-section-heading p, .ga-detail-intro > p { color: #5f5f5f; font: 600 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
+.ga-inspector-header h2 { margin-top: 3px; color: #111; font-size: 16px; font-weight: 650; letter-spacing: -.03em; }
+.ga-header-actions { display: flex; align-items: center; gap: 4px; }
+[data-slot="button"] { color: #171717; border-radius: 3px; font-weight: 600; }
+[data-slot="button"][data-variant="secondary"] { color: #f7f7f7; background: #111; }
+[data-slot="button"][data-variant="outline"] { color: #171717; border-color: #bdbdbd; background: transparent; }
+[data-slot="button"][data-variant="ghost"]:hover { color: #111; background: #e8e8e8; }
+.ga-session-toolbar { display: flex; min-height: 50px; align-items: center; gap: 8px; padding: 8px 24px; border-bottom: 1px solid #d0d0d0; }
+.ga-inspector-search { width: min(330px, 35%); color: #5f5f5f; background: #fff; border-color: #d0d0d0; border-radius: 3px; }
+[data-slot="input"] { color: #171717; }
+.ga-filter-group { display: inline-flex; gap: 2px; }
+.ga-filter-group [aria-pressed="true"] { color: #f7f7f7; background: #111; }
+.ga-session-count { margin-left: auto; color: #5f5f5f; font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.ga-explorer-layout { min-height: 0; flex: 1; }
+.ga-inspector > [data-slot="resizable-panel-group"], .ga-explorer-layout { display: flex; min-height: 0; flex: 1; }
+[data-slot="resizable-handle"] { background: #d0d0d0; }
+.ga-trace-scroll, .ga-trace-detail { height: 100%; }
+.ga-trace-list { min-height: 100%; padding: 8px 0; outline: none; }
+.ga-trace-row { display: grid; grid-template-columns: 76px 110px minmax(130px, 1fr) auto; gap: 9px; align-items: center; min-height: 44px; padding: 8px 24px; cursor: pointer; border-bottom: 1px solid #e0e0e0; }
+.ga-trace-row:hover, .ga-trace-row[aria-selected="true"] { background: #e8e8e8; }
+.ga-trace-row time, .ga-trace-row span, .ga-trace-row code, .ga-causal-chain code, .ga-key-values dt, .ga-key-values dd { font: 600 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.ga-trace-row time, .ga-trace-row span, .ga-trace-row code { color: #5f5f5f; }
+.ga-trace-row strong { overflow: hidden; color: #171717; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+.ga-empty-list { padding: 24px; color: #5f5f5f; font-size: 12px; }
+.ga-trace-detail { overflow: auto; padding: 22px 24px; background: #fff; }
+.ga-detail-intro h3, .ga-empty-state h3, .ga-section-heading h3 { margin: 4px 0 8px; color: #111; font-size: 16px; font-weight: 650; letter-spacing: -.03em; }
+.ga-detail-intro > span, .ga-empty-state span, .ga-detail-section p { color: #5f5f5f; font-size: 12px; line-height: 1.55; }
+.ga-detail-section { padding: 16px 0; border-top: 1px solid #d0d0d0; }
+.ga-detail-section h4 { margin: 0 0 8px; color: #111; font-size: 12px; font-weight: 650; }
+.ga-detail-section p { margin: 0 0 6px; }
+.ga-boundary { padding-left: 10px; border-left: 2px solid #111; }
+.ga-causal-chain { margin: 20px 0; padding: 16px 0; border-top: 1px solid #111; border-bottom: 1px solid #111; }
+.ga-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
+.ga-section-heading > span { color: #5f5f5f; font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.ga-causal-chain ol { margin: 14px 0 0; padding: 0; list-style: none; }
+.ga-causal-chain li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 38px; border-top: 1px solid #e0e0e0; }
+.ga-causal-chain li > span, .ga-causal-chain li b, .ga-causal-chain time { color: #5f5f5f; font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.ga-causal-chain li code { display: block; margin-top: 3px; color: #111; }
+.ga-key-values { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: #d0d0d0; border: 1px solid #d0d0d0; }
+.ga-key-values > div { min-width: 0; padding: 8px; background: #f7f7f7; }
+.ga-key-values-wide { grid-column: 1 / -1; }
+.ga-key-values dt { color: #5f5f5f; text-transform: uppercase; }
+.ga-key-values dd { overflow: hidden; margin: 4px 0 0; color: #111; text-overflow: ellipsis; white-space: nowrap; }
+.ga-raw-record { margin-top: 16px; color: #171717; font-size: 12px; }
+.ga-raw-record summary { cursor: pointer; font-weight: 650; }
+.ga-raw-record pre { overflow: auto; margin: 10px 0 0; padding: 10px; color: #f7f7f7; background: #111; font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.ga-workspace-feedback { top: 68px; color: #f7f7f7; background: #111; border-color: #111; border-radius: 3px; box-shadow: none; }
+@media (max-width: 760px) { .ga-bottom-dock { height: min(720px, 80vh); } .ga-inspector-header, .ga-session-toolbar { padding-right: 12px; padding-left: 12px; } .ga-session-toolbar { flex-wrap: wrap; } .ga-inspector-search { width: 100%; } .ga-session-count { margin-left: 0; } .ga-explorer-layout { flex-direction: column; } [data-slot="resizable-handle"] { width: 100%; height: 1px; } .ga-trace-row { grid-template-columns: 70px 1fr; padding: 8px 12px; } .ga-trace-row span, .ga-trace-row code { grid-column: 2; } .ga-trace-detail { padding: 18px 12px; } .ga-key-values { grid-template-columns: 1fr; } .ga-key-values-wide { grid-column: auto; } }
+`;
+function mountDevtoolsOverlay(options) {
+  const selectedDocument = options.document ?? (typeof document === "undefined" ? void 0 : document);
+  if (!selectedDocument?.body)
+    throw new Error("A mountable document is required");
+  const host = selectedDocument.createElement("generative-a11y-devtools");
+  const shadow = host.attachShadow({ mode: "open" });
+  const style = selectedDocument.createElement("style");
+  style.textContent = styles;
+  const launcher = selectedDocument.createElement("button");
+  launcher.className = "ga-launcher";
+  launcher.type = "button";
+  launcher.textContent = "Open workspace";
+  launcher.setAttribute("aria-expanded", "false");
+  const panel = selectedDocument.createElement("aside");
+  panel.className = "ga-bottom-dock";
+  panel.hidden = true;
+  panel.tabIndex = -1;
+  panel.setAttribute(
+    "aria-label",
+    "Generative accessibility runtime inspector"
+  );
+  const reactContainer = selectedDocument.createElement("div");
+  reactContainer.style.height = "100%";
+  panel.append(reactContainer);
+  shadow.append(style, launcher, panel);
+  let root;
+  let open = false;
+  let disposed = false;
+  let previousFocus = null;
+  let focusBeforePointer = null;
+  const asHTMLElement = (element) => {
+    const HTMLElementConstructor = selectedDocument.defaultView?.HTMLElement;
+    return HTMLElementConstructor && element instanceof HTMLElementConstructor ? element : null;
+  };
+  const close = () => {
+    open = false;
+    panel.hidden = true;
+    panel.setAttribute("data-state", "collapsed");
+    launcher.setAttribute("aria-expanded", "false");
+    root?.unmount();
+    root = void 0;
+    (previousFocus ?? launcher).focus();
+  };
+  const openPanel = () => {
+    open = true;
+    panel.hidden = false;
+    panel.setAttribute("data-state", "expanded");
+    launcher.setAttribute("aria-expanded", "true");
+    if (!root) root = createRoot(reactContainer);
+    const copyText = options.copyText ?? ((value) => {
+      const clipboard = selectedDocument.defaultView?.navigator.clipboard;
+      if (!clipboard) throw new Error("Clipboard access is unavailable");
+      return clipboard.writeText(value);
+    });
+    root.render(
+      createElement(DevtoolsInspector, {
+        onClose: close,
+        onCopy: copyText,
+        store: options.store
+      })
+    );
+    panel.focus();
+  };
+  launcher.addEventListener("pointerdown", () => {
+    const active = asHTMLElement(selectedDocument.activeElement);
+    focusBeforePointer = active === host ? null : active;
+  });
+  launcher.addEventListener("click", () => {
+    if (open) close();
+    else {
+      const documentFocus = asHTMLElement(selectedDocument.activeElement);
+      previousFocus = focusBeforePointer ?? asHTMLElement(shadow.activeElement) ?? (documentFocus === selectedDocument.body ? null : documentFocus);
+      focusBeforePointer = null;
+      openPanel();
+    }
+  });
+  shadow.addEventListener("keydown", (event) => {
+    if (open && event.key === "Escape") close();
+  });
+  selectedDocument.body.append(host);
+  return {
+    host,
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      if (open) close();
+      else root?.unmount();
+      root = void 0;
+      host.remove();
+    }
+  };
+}
+export {
+  mountDevtoolsOverlay
+};