@reactra/devtools 0.1.0-alpha.0

package/dist/styles.js

@@ -0,0 +1,288 @@
+// @reactra/devtools — injected stylesheet.
+//
+// Owner: reactra-devtools-spec.md §2 + reactra-runtime-spec.md §2
+// (UI-companion tier): no `.css` imports in package source, so the panel
+// ships its styles as a string and injects ONE <style> tag per document
+// (the popup-out window gets its own — Devtools §2), behind a
+// `typeof document` guard. All selectors are prefixed `.rdt-`; the
+// timeline's `.rrd-*` sheet is injected separately via
+// `@reactra/replay-devtools/timeline`'s `ensureStyles` — never duplicated.
+//
+// The `--rdt-*` token block is shared with `@reactra/replay-devtools` via the
+// `/tokens` subpath (C7 — reactra-runtime-spec.md §3 /tokens row).
+// `ensureStyles` calls `ensureTokens` so the popup window also gets tokens.
+import { ensureTokens } from "@reactra/replay-devtools/tokens";
+let injected = new WeakSet();
+/** Append the devtools stylesheet once per document. No-op outside a browser. */
+export const ensureStyles = (target) => {
+    const doc = target ?? (typeof document === "undefined" ? undefined : document);
+    if (!doc || injected.has(doc))
+        return;
+    injected.add(doc);
+    // Tokens first — the devtools CSS references `var(--rdt-*)`.
+    ensureTokens(doc);
+    const tag = doc.createElement("style");
+    tag.setAttribute("data-reactra-devtools", "");
+    tag.textContent = CSS;
+    doc.head.appendChild(tag);
+};
+/** Test hook: lets unit tests assert single-injection semantics. */
+export const __resetStylesForTest = () => {
+    injected = new WeakSet();
+};
+// Devtools-specific CSS. The `--rdt-*` variables are declared by the
+// shared token block (injected above); this sheet only defines layout,
+// components, and animations that are unique to the devtools panel.
+const CSS = `
+/* ---- Pill ---- */
+.rdt-pill {
+  position: fixed; right: 16px; bottom: 16px; z-index: 2147483000;
+  display: inline-flex; align-items: center; gap: 6px;
+  background: var(--rdt-bg-raised); color: var(--rdt-text);
+  border: 1px solid var(--rdt-border-med);
+  border-radius: 999px; padding: 6px 14px; cursor: pointer;
+  font: 600 var(--rdt-sz-base)/1.2 var(--rdt-font);
+  box-shadow: 0 4px 14px rgba(0,0,0,.35);
+}
+.rdt-pill:hover { border-color: var(--rdt-border-focus); }
+.rdt-logo { color: var(--rdt-accent-soft); }
+
+/* ---- Panel shell ---- */
+.rdt-panel {
+  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483001;
+  height: 400px; display: flex; flex-direction: column;
+  background: var(--rdt-bg-base); color: var(--rdt-text);
+  border-top: 1px solid var(--rdt-border-med);
+  font: var(--rdt-sz-base)/1.45 var(--rdt-font);
+  box-shadow: 0 -6px 24px rgba(0,0,0,.4); outline: none;
+}
+.rdt-panel--popup {
+  position: static; height: 100vh; border-top: none; box-shadow: none;
+}
+/* Minimized: collapse to the header bar only (the body is not rendered). */
+.rdt-panel--min { height: auto; }
+
+/* Drag-resize handle (T2.4) — sits on top of the panel at its top edge. */
+.rdt-resize-handle {
+  position: absolute; top: 0; left: 0; right: 0; height: 4px;
+  cursor: ns-resize; z-index: 1;
+}
+.rdt-resize-handle:hover { background: var(--rdt-border-focus); opacity: .5; }
+
+.rdt-head {
+  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+  padding: 7px 12px; background: var(--rdt-bg-raised);
+  border-bottom: 1px solid var(--rdt-border);
+}
+.rdt-title { font-weight: 700; color: var(--rdt-text-bright); }
+.rdt-spacer { flex: 1; }
+.rdt-btn {
+  background: var(--rdt-btn-bg); color: var(--rdt-text);
+  border: 1px solid var(--rdt-btn-border);
+  border-radius: 6px; padding: 3px 10px; cursor: pointer; font: inherit;
+}
+.rdt-btn:hover:not(:disabled) { border-color: var(--rdt-border-focus); color: var(--rdt-text-bright); }
+.rdt-btn:disabled { opacity: .4; cursor: default; }
+.rdt-btn:focus-visible { outline: 2px solid var(--rdt-focus-ring); outline-offset: 2px; }
+.rdt-btn--accent { background: #33285e; border-color: var(--rdt-accent); }
+.rdt-mini { font-size: var(--rdt-sz-xs); padding: 1px 7px; }
+
+/* ---- Tabs ---- */
+.rdt-tabs { display: flex; gap: 4px; }
+.rdt-tab {
+  background: transparent; color: var(--rdt-text-dim);
+  border: 1px solid transparent; border-bottom: 2px solid transparent;
+  border-radius: 6px 6px 0 0; padding: 3px 12px; cursor: pointer; font: inherit;
+}
+.rdt-tab:hover { color: var(--rdt-text-bright); }
+.rdt-tab:focus-visible { outline: 2px solid var(--rdt-focus-ring); outline-offset: 2px; }
+/* Active tab: bottom-border accent strip (UX#10) */
+.rdt-tab--on {
+  background: var(--rdt-btn-bg); color: var(--rdt-text-bright);
+  border-color: var(--rdt-btn-border); border-bottom-color: var(--rdt-accent);
+}
+
+/* ---- Messages ---- */
+.rdt-warn {
+  background: var(--rdt-warn-bg); color: var(--rdt-warn-fg); border-radius: 6px;
+  padding: 2px 8px; font-size: var(--rdt-sz-sm);
+}
+.rdt-err { color: var(--rdt-err); }
+.rdt-hint { color: var(--rdt-text-faint); }
+
+/* ---- Body layout ---- */
+.rdt-body { display: flex; flex: 1; min-height: 0; }
+.rdt-rail {
+  width: 240px; flex: none; overflow-y: auto;
+  border-right: 1px solid var(--rdt-border); padding: 8px 10px;
+}
+.rdt-rail h4 {
+  margin: 0 0 6px; font-size: var(--rdt-sz-sm); color: var(--rdt-text-dim);
+  text-transform: uppercase; letter-spacing: .06em;
+}
+
+/* Rail search input (T2.3) */
+.rdt-search {
+  width: 100%; box-sizing: border-box;
+  background: var(--rdt-bg-deep); color: var(--rdt-text);
+  border: 1px solid var(--rdt-btn-border);
+  border-radius: 6px; padding: 3px 8px; font: inherit;
+  font-size: var(--rdt-sz-sm); margin-bottom: 6px;
+}
+.rdt-search:focus { outline: 2px solid var(--rdt-focus-ring); border-color: var(--rdt-border-focus); }
+.rdt-search::placeholder { color: var(--rdt-text-faint); }
+
+.rdt-item {
+  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
+  background: transparent; color: var(--rdt-text);
+  border: 1px solid transparent;
+  border-radius: 6px; padding: 5px 8px; margin-bottom: 3px;
+  cursor: pointer; font: inherit;
+}
+.rdt-item:hover { background: var(--rdt-bg-hover); border-color: var(--rdt-border); }
+.rdt-item:focus-visible { outline: 2px solid var(--rdt-focus-ring); }
+.rdt-item--on { background: var(--rdt-btn-bg); border-color: var(--rdt-btn-border); }
+.rdt-item--stale { opacity: .45; }
+.rdt-item code { color: var(--rdt-accent-soft); }
+.rdt-count { margin-left: auto; color: var(--rdt-text-faint); font-size: var(--rdt-sz-xs); }
+
+/* Rail header row: title + optional rail-level actions (T2.2 "Clear stale") */
+.rdt-rail-header {
+  display: flex; align-items: baseline; justify-content: space-between;
+  margin-bottom: 6px;
+}
+.rdt-rail-header h4 { margin: 0; }
+
+/* "Clear stale" rail button (T2.2) */
+.rdt-rail-action {
+  font-size: var(--rdt-sz-xs); color: var(--rdt-text-faint);
+  background: none; border: none; cursor: pointer; padding: 0; margin: 4px 0 6px;
+  text-decoration: underline;
+}
+.rdt-rail-action:hover { color: var(--rdt-text-dim); }
+
+.rdt-main { flex: 1; min-width: 0; overflow-y: auto; padding: 10px 14px; }
+.rdt-card {
+  background: var(--rdt-bg-raised); border: 1px solid var(--rdt-border);
+  border-radius: 8px; padding: 8px 12px; margin-bottom: 8px;
+}
+.rdt-card-id {
+  color: var(--rdt-accent-soft); font-weight: 700; margin-bottom: 6px;
+  display: flex; gap: 8px; align-items: center;
+}
+
+/* ---- Grouped sections (T1.3) ---- */
+.rdt-group {
+  margin-bottom: 12px;
+}
+.rdt-group-label {
+  font-size: var(--rdt-sz-xs); color: var(--rdt-text-faint); text-transform: uppercase;
+  letter-spacing: .08em; margin-bottom: 4px; padding-bottom: 2px;
+  border-bottom: 1px solid var(--rdt-border);
+}
+
+/* ---- Badges ---- */
+.rdt-badge { border-radius: 5px; padding: 0 6px; font-size: var(--rdt-sz-xs); font-weight: 700; }
+.rdt-badge--live { background: var(--rdt-ok-bg); color: var(--rdt-ok); }
+.rdt-badge--view { background: var(--rdt-view-bg); color: var(--rdt-view-fg); }
+.rdt-badge--kind { background: var(--rdt-kind-bg); color: var(--rdt-kind-fg); }
+.rdt-badge--stale { background: var(--rdt-stale-bg); color: var(--rdt-stale-fg); }
+.rdt-badge--idle { background: var(--rdt-idle-bg); color: var(--rdt-idle-fg); }
+
+/* ---- Sections / lists ---- */
+.rdt-section {
+  margin: 14px 0 6px; font-size: var(--rdt-sz-sm); color: var(--rdt-text-dim);
+  text-transform: uppercase; letter-spacing: .06em;
+}
+.rdt-list { display: flex; flex-direction: column; gap: 2px; }
+.rdt-row {
+  display: flex; align-items: center; gap: 10px; padding: 4px 8px;
+  border: 1px solid transparent; border-radius: 6px;
+}
+.rdt-row--on { background: var(--rdt-btn-bg); border-color: var(--rdt-btn-border); }
+.rdt-path { color: var(--rdt-path); }
+.rdt-sub { color: var(--rdt-text-faint); font-size: var(--rdt-sz-xs); }
+.rdt-time { margin-left: auto; color: var(--rdt-text-faint); font-size: var(--rdt-sz-xs); }
+.rdt-pair { display: inline-flex; gap: 5px; margin-right: 12px; }
+.rdt-pair .rdt-k { min-width: 0; }
+
+/* ---- Key-value rows ---- */
+.rdt-kv { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; }
+.rdt-k { color: var(--rdt-text-dim); flex: none; min-width: 110px; }
+.rdt-v { color: var(--rdt-text); word-break: break-all; white-space: pre-wrap; }
+/* Timed fade: changed-key color fades out over 1.2s (UX#12).
+   The class is removed after the timer fires in the component. */
+.rdt-v--changed {
+  color: var(--rdt-changed);
+  animation: rdt-fade-changed 1.2s ease-out forwards;
+}
+@keyframes rdt-fade-changed {
+  0% { color: var(--rdt-changed); }
+  80% { color: var(--rdt-changed); }
+  100% { color: var(--rdt-text); }
+}
+
+/* ---- Value tree (T1.2) ---- */
+.rdt-tree { font-size: var(--rdt-sz-sm); }
+.rdt-tree-node { padding: 1px 0; }
+.rdt-tree-toggle {
+  background: none; border: none; cursor: pointer; padding: 0 4px 0 0;
+  color: var(--rdt-text-dim); font: inherit; font-size: var(--rdt-sz-xs);
+}
+.rdt-tree-toggle:hover { color: var(--rdt-accent-soft); }
+.rdt-tree-key { color: var(--rdt-text-dim); }
+.rdt-tree-val { color: var(--rdt-text); }
+.rdt-tree-val--str { color: #8ec07c; }
+.rdt-tree-val--num { color: #b8bb26; }
+.rdt-tree-val--bool { color: var(--rdt-accent-soft); }
+.rdt-tree-val--null { color: var(--rdt-text-faint); }
+.rdt-tree-val--sentinel { color: var(--rdt-warn-fg); }
+.rdt-tree-val--resource { color: var(--rdt-kind-fg); }
+.rdt-tree-children { margin-left: 14px; border-left: 1px solid var(--rdt-border); padding-left: 6px; }
+/* Copy-to-clipboard affordance (T2.5) */
+.rdt-copy {
+  background: none; border: none; cursor: pointer; padding: 0 0 0 6px;
+  color: var(--rdt-text-faint); font: inherit; font-size: var(--rdt-sz-xs);
+  opacity: 0;
+  transition: opacity .15s;
+}
+.rdt-tree-node:hover .rdt-copy { opacity: 1; }
+.rdt-copy:hover { color: var(--rdt-accent-soft); }
+
+/* ---- Invoke ---- */
+.rdt-args {
+  background: var(--rdt-bg-deep); color: var(--rdt-text);
+  border: 1px solid var(--rdt-btn-border);
+  border-radius: 6px; padding: 2px 8px; font: inherit;
+  font-size: var(--rdt-sz-sm); width: 160px;
+}
+.rdt-run { margin-left: 6px; }
+.rdt-invoke-err { color: var(--rdt-err); font-size: var(--rdt-sz-sm); margin-left: 116px; }
+
+/* ---- Time Travel ---- */
+.rdt-transport {
+  display: flex; align-items: center; gap: 6px; padding: 8px 0 4px; flex-wrap: wrap;
+}
+.rdt-pos { color: var(--rdt-text-dim); font-size: var(--rdt-sz-sm); margin-left: 4px; }
+.rdt-select {
+  background: var(--rdt-bg-deep); color: var(--rdt-text);
+  border: 1px solid var(--rdt-btn-border);
+  border-radius: 6px; padding: 2px 6px; font: inherit; font-size: var(--rdt-sz-sm);
+}
+/* Full-width REPLAYING banner (UX#5 / T3.3) */
+.rdt-banner {
+  display: block; width: 100%; box-sizing: border-box;
+  background: var(--rdt-banner-bg); color: var(--rdt-banner-fg);
+  border-radius: 0; padding: 5px 14px;
+  font-size: var(--rdt-sz-sm); font-weight: 700;
+  text-align: center; letter-spacing: .06em;
+  margin: 0 -14px 0; /* bleed to main edges */
+}
+/* Panel-level replaying state class (T3.3) */
+.rdt-panel--replaying .rdt-head {
+  border-bottom-color: var(--rdt-banner-bg);
+}
+.rdt-states { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
+.rdt-rec { color: var(--rdt-rec); }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C,EAAE;AACF,kEAAkE;AAClE,yEAAyE;AACzE,wEAAwE;AACxE,8DAA8D;AAC9D,mEAAmE;AACnE,uDAAuD;AACvD,2EAA2E;AAC3E,EAAE;AACF,8EAA8E;AAC9E,mEAAmE;AACnE,4EAA4E;AAE5E,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAE9D,IAAI,QAAQ,GAAG,IAAI,OAAO,EAAY,CAAA;AAEtC,iFAAiF;AACjF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,MAAiB,EAAQ,EAAE;IACtD,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC9E,IAAI,CAAC,GAAG,IAAI,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;QAAE,OAAM;IACrC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACjB,6DAA6D;IAC7D,YAAY,CAAC,GAAG,CAAC,CAAA;IACjB,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IACtC,GAAG,CAAC,YAAY,CAAC,uBAAuB,EAAE,EAAE,CAAC,CAAA;IAC7C,GAAG,CAAC,WAAW,GAAG,GAAG,CAAA;IACrB,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA;AAC3B,CAAC,CAAA;AAED,oEAAoE;AACpE,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAS,EAAE;IAC7C,QAAQ,GAAG,IAAI,OAAO,EAAY,CAAA;AACpC,CAAC,CAAA;AAED,qEAAqE;AACrE,uEAAuE;AACvE,oEAAoE;AACpE,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2PX,CAAA"}

package/dist/tabs/router.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+import type { NavLog } from "../routerWatcher.ts";
+/** Props of the Router tab. */
+export interface RouterTabProps {
+    /** Panel-owned navigation log (records while the panel is mounted — §6). */
+    navLog: NavLog;
+}
+/** Router tab — current route, manifest, recent navigations (§6). */
+export declare const RouterTab: (props: RouterTabProps) => ReactNode;
+//# sourceMappingURL=router.d.ts.map

package/dist/tabs/router.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../src/tabs/router.ts"],"names":[],"mappings":"AASA,OAAO,EAA2C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG/E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAEjD,+BAA+B;AAC/B,MAAM,WAAW,cAAc;IAC7B,4EAA4E;IAC5E,MAAM,EAAE,MAAM,CAAA;CACf;AAgBD,qEAAqE;AACrE,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,KAAG,SA0FjD,CAAA"}

package/dist/tabs/router.js

@@ -0,0 +1,48 @@
+// @reactra/devtools — the Router tab (Devtools spec §6, read-only v1).
+//
+// Reads `@reactra/router`'s registry via the §2 data layer (routerWatcher):
+// the current route (id/pattern/pathname/params/coerced query), the full
+// manifest with the current route highlighted, and the recent-navigation log.
+// The nav log is owned by the panel (records for the panel's whole lifetime,
+// not just while this tab is visible) and passed in. Read-only in v1;
+// middleware-run visualization is deferred to v1.1 (§6). createElement (no JSX).
+import { createElement as h, useEffect, useState } from "react";
+import { serialize } from "../serialize.js";
+import { currentRoute, listRoutes, subscribeRouter } from "../routerWatcher.js";
+/** Render a params/query object as `key: value` rows, or an em dash if empty. */
+const objectRows = (obj) => {
+    const keys = Object.keys(obj);
+    if (keys.length === 0)
+        return h("span", { className: "rdt-hint" }, "—");
+    return keys.map((k) => h("span", { key: k, className: "rdt-pair" }, h("span", { className: "rdt-k" }, k), h("span", { className: "rdt-v" }, JSON.stringify(serialize(obj[k])))));
+};
+/** Router tab — current route, manifest, recent navigations (§6). */
+export const RouterTab = (props) => {
+    const [, force] = useState(0);
+    useEffect(() => {
+        // Re-render this tab on transitions; the nav LOG itself is recorded at the
+        // panel level (props.navLog) so navigations off this tab still land.
+        const off = subscribeRouter(() => force((n) => n + 1));
+        return off;
+    }, []);
+    const route = currentRoute();
+    const routes = listRoutes();
+    const navs = props.navLog.entries();
+    return h("div", { className: "rdt-main" }, 
+    // ---- Current route ------------------------------------------------------
+    h("div", { className: "rdt-card" }, h("div", { className: "rdt-card-id" }, route.route ? route.route.id : "(no match)", route.route && h("span", { className: "rdt-badge rdt-badge--kind" }, route.route.path)), h("div", { className: "rdt-kv" }, h("span", { className: "rdt-k" }, "pathname"), h("span", { className: "rdt-v rdt-path" }, route.pathname)), h("div", { className: "rdt-kv" }, h("span", { className: "rdt-k" }, "params"), h("span", { className: "rdt-v" }, objectRows(route.params))), h("div", { className: "rdt-kv" }, h("span", { className: "rdt-k" }, "query"), h("span", { className: "rdt-v" }, objectRows(route.query)))), 
+    // ---- Manifest -----------------------------------------------------------
+    h("h4", { className: "rdt-section" }, `Manifest (${routes.length})`), routes.length === 0
+        ? h("div", { className: "rdt-hint" }, "No routes registered.")
+        : h("div", { className: "rdt-list" }, ...routes.map((r) => h("div", {
+            key: r.id,
+            className: route.route && r.id === route.route.id ? "rdt-row rdt-row--on" : "rdt-row",
+        }, h("span", { className: "rdt-path" }, r.path), h("span", { className: "rdt-sub" }, r.id), route.route && r.id === route.route.id &&
+            h("span", { className: "rdt-badge rdt-badge--live" }, "current")))), 
+    // ---- Recent navigations -------------------------------------------------
+    h("h4", { className: "rdt-section" }, `Recent navigations (${navs.length})`), navs.length === 0
+        ? h("div", { className: "rdt-hint" }, "No navigations yet — they're recorded while the panel is mounted.")
+        : h("div", { className: "rdt-list" }, ...navs.map((n, i) => h("div", { key: `${n.timestamp}.${i}`, className: "rdt-row" }, h("span", { className: "rdt-path" }, n.pathname), Object.keys(n.params).length > 0 &&
+            h("span", { className: "rdt-sub" }, JSON.stringify(n.params)), h("span", { className: "rdt-time" }, new Date(n.timestamp).toLocaleTimeString())))));
+};
+//# sourceMappingURL=router.js.map

package/dist/tabs/router.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"router.js","sourceRoot":"","sources":["../../src/tabs/router.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,EAAE;AACF,4EAA4E;AAC5E,yEAAyE;AACzE,8EAA8E;AAC9E,6EAA6E;AAC7E,sEAAsE;AACtE,iFAAiF;AAEjF,OAAO,EAAE,aAAa,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAS/E,iFAAiF;AACjF,MAAM,UAAU,GAAG,CAAC,GAA4B,EAAa,EAAE;IAC7D,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC7B,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,GAAG,CAAC,CAAA;IACvE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CACpB,CAAC,CACC,MAAM,EACN,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EACjC,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,EACpC,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CACrE,CACF,CAAA;AACH,CAAC,CAAA;AAED,qEAAqE;AACrE,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAa,EAAE;IAC5D,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAE7B,SAAS,CAAC,GAAG,EAAE;QACb,2EAA2E;QAC3E,qEAAqE;QACrE,MAAM,GAAG,GAAG,eAAe,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;QACtD,OAAO,GAAG,CAAA;IACZ,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,KAAK,GAAG,YAAY,EAAE,CAAA;IAC5B,MAAM,MAAM,GAAG,UAAU,EAAE,CAAA;IAC3B,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,CAAA;IAEnC,OAAO,CAAC,CACN,KAAK,EACL,EAAE,SAAS,EAAE,UAAU,EAAE;IACzB,4EAA4E;IAC5E,CAAC,CACC,KAAK,EACL,EAAE,SAAS,EAAE,UAAU,EAAE,EACzB,CAAC,CACC,KAAK,EACL,EAAE,SAAS,EAAE,aAAa,EAAE,EAC5B,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAC3C,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,2BAA2B,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CACvF,EACD,CAAC,CACC,KAAK,EACL,EAAE,SAAS,EAAE,QAAQ,EAAE,EACvB,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,UAAU,CAAC,EAC7C,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAE,KAAK,CAAC,QAAQ,CAAC,CAC3D,EACD,CAAC,CACC,KAAK,EACL,EAAE,SAAS,EAAE,QAAQ,EAAE,EACvB,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,QAAQ,CAAC,EAC3C,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAC5D,EACD,CAAC,CACC,KAAK,EACL,EAAE,SAAS,EAAE,QAAQ,EAAE,EACvB,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,OAAO,CAAC,EAC1C,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAC3D,CACF;IACD,4EAA4E;IAC5E,CAAC,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,aAAa,MAAM,CAAC,MAAM,GAAG,CAAC,EACpE,MAAM,CAAC,MAAM,KAAK,CAAC;QACjB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,uBAAuB,CAAC;QAC9D,CAAC,CAAC,CAAC,CACC,KAAK,EACL,EAAE,SAAS,EAAE,UAAU,EAAE,EACzB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAClB,CAAC,CACC,KAAK,EACL;YACE,GAAG,EAAE,CAAC,CAAC,EAAE;YACT,SAAS,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS;SACtF,EACD,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAC5C,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EACzC,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,EAAE;YACpC,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,2BAA2B,EAAE,EAAE,SAAS,CAAC,CACnE,CACF,CACF;IACL,4EAA4E;IAC5E,CAAC,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,uBAAuB,IAAI,CAAC,MAAM,GAAG,CAAC,EAC5E,IAAI,CAAC,MAAM,KAAK,CAAC;QACf,CAAC,CAAC,CAAC,CACC,KAAK,EACL,EAAE,SAAS,EAAE,UAAU,EAAE,EACzB,mEAAmE,CACpE;QACH,CAAC,CAAC,CAAC,CACC,KAAK,EACL,EAAE,SAAS,EAAE,UAAU,EAAE,EACzB,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CACnB,CAAC,CACC,KAAK,EACL,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,SAAS,IAAI,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,EACpD,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,EAChD,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,CAAC;YAC9B,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAC/D,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,kBAAkB,EAAE,CAAC,CACjF,CACF,CACF,CACN,CAAA;AACH,CAAC,CAAA"}

package/dist/tabs/stores.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+import type { DevtoolsModel } from "../model.ts";
+/** Props of the Stores tab. */
+export interface StoresTabProps {
+    /**
+     * The DevtoolsModel facade — its subscribe() provides the consolidated
+     * ticker (T2.1 / arch#2a). When omitted, the tab falls back to its own
+     * 700ms poll (backward-compat for isolated unit tests).
+     */
+    model?: DevtoolsModel;
+}
+/** Stores tab — registered bindings, kind chips, live snapshots (§5). */
+export declare const StoresTab: (props: StoresTabProps) => ReactNode;
+//# sourceMappingURL=stores.d.ts.map

package/dist/tabs/stores.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stores.d.ts","sourceRoot":"","sources":["../../src/tabs/stores.ts"],"names":[],"mappings":"AAQA,OAAO,EAAmD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIvF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAShD,+BAA+B;AAC/B,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB;AAED,yEAAyE;AACzE,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,KAAG,SA2NjD,CAAA"}

package/dist/tabs/stores.js

@@ -0,0 +1,167 @@
+// @reactra/devtools — the Stores tab (Devtools spec §5).
+//
+// Reads `@reactra/store`'s registry via the §2 data layer (storeWatcher):
+// every registered binding with its kind chip + instantiation state, and a
+// live diffed snapshot for instantiated stores (store actions get the §4
+// `▶ run` treatment, DVT004). Read-only otherwise — no store time travel
+// (§10). createElement (no JSX); browser globals only in effects.
+import { createElement as h, useEffect, useRef, useState } from "react";
+import { diffKeys } from "@reactra/replay-devtools/timeline";
+import { callableNames, groupBindings } from "../helpers.js";
+import { runInvoke } from "../invoke.js";
+import { serializeBindings } from "../serialize.js";
+import { ValueTree } from "../ValueTree.js";
+import { listStores, storeSnapshot, subscribeStore } from "../storeWatcher.js";
+/** The kind chip text — `route+subtree` when the binding carries a subtree path (§5). */
+const kindLabel = (r) => (r.subtreePath ? "route+subtree" : r.kind);
+/** Stores tab — registered bindings, kind chips, live snapshots (§5). */
+export const StoresTab = (props) => {
+    const { model } = props;
+    const [, force] = useState(0);
+    const [sel, setSel] = useState(null);
+    const [argText, setArgText] = useState({});
+    const [invokeErr, setInvokeErr] = useState({});
+    // T2.3: search filter for the stores rail — case-insensitive substring.
+    const [search, setSearch] = useState("");
+    // Previous data snapshot per store — drives the changed-key flash.
+    const prevRef = useRef(new Map());
+    const rows = listStores();
+    // T2.3: apply search filter before rendering.
+    const searchLower = search.toLowerCase();
+    const filteredRows = searchLower
+        ? rows.filter((r) => r.name.toLowerCase().includes(searchLower))
+        : rows;
+    // The set of LIVE stores; the effect re-subscribes whenever it changes
+    // (a route store instantiating on entry).
+    const liveKey = rows.map((r) => (r.instantiated ? r.name : "")).join("|");
+    useEffect(() => {
+        const bump = () => force((n) => n + 1);
+        // Subscribe to live store changes for instant delivery on value changes.
+        const offs = rows.filter((r) => r.instantiated).map((r) => subscribeStore(r.name, bump));
+        // Use the consolidated ticker from the model (T2.1) when available;
+        // fall back to a standalone 700ms interval for backward compat.
+        let tickerOff = null;
+        if (model) {
+            // The model's subscribe includes the ticker — no extra setInterval.
+            tickerOff = model.subscribe(bump);
+        }
+        else {
+            const id = setInterval(bump, 700);
+            tickerOff = () => clearInterval(id);
+        }
+        return () => {
+            for (const off of offs)
+                off();
+            tickerOff?.();
+        };
+        // rows is recomputed every render; liveKey is its stable identity.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [liveKey, model]);
+    const selected = sel !== null && rows.some((r) => r.name === sel) ? sel : (rows[0]?.name ?? null);
+    const selRow = rows.find((r) => r.name === selected);
+    const snap = selected ? storeSnapshot(selected) : undefined;
+    // Split store snapshot into data vs action members (T1.3 grouping).
+    const { data: rawData, actions: rawActions } = snap ? groupBindings(snap) : { data: {}, actions: {} };
+    const data = serializeBindings(rawData);
+    const callables = Object.keys(rawActions);
+    const changed = new Set(selected && snap ? diffKeys(prevRef.current.get(selected), data) : []);
+    const preserved = new Set(selRow?.preservedFields ?? []);
+    const invoke = (store, member, fn) => {
+        const key = `${store}.${member}`;
+        // Fix 6b: pass onAsyncError so a rejected async action surfaces inline.
+        const result = runInvoke(fn, argText[key], (msg) => setInvokeErr((c) => ({ ...c, [key]: msg })));
+        if (!result.ok) {
+            setInvokeErr((c) => ({ ...c, [key]: result.error }));
+        }
+        else {
+            setInvokeErr((c) => ({ ...c, [key]: "" }));
+        }
+    };
+    // Remember the rendered snapshot after paint so the next change's diff
+    // highlights exactly what moved.
+    useEffect(() => {
+        if (selected) {
+            const s = storeSnapshot(selected);
+            if (s)
+                prevRef.current.set(selected, serializeBindings(s));
+        }
+    });
+    return h("div", { className: "rdt-body" }, h("div", {
+        className: "rdt-rail",
+        // T3.1: ARIA listbox — the rail is a listbox of selectable stores.
+        role: "listbox",
+        "aria-label": "Stores",
+        "aria-orientation": "vertical",
+        // T3.1: arrow-key navigation in the rail listbox.
+        onKeyDown: (e) => {
+            const visIdx = filteredRows.findIndex((r) => r.name === selected);
+            if (e.key === "ArrowDown" && visIdx < filteredRows.length - 1) {
+                setSel(filteredRows[visIdx + 1].name);
+                e.preventDefault();
+            }
+            else if (e.key === "ArrowUp" && visIdx > 0) {
+                setSel(filteredRows[visIdx - 1].name);
+                e.preventDefault();
+            }
+        },
+    }, h("h4", null, "Stores"), 
+    // T2.3: search input — shown when there are stores to filter.
+    rows.length > 0 &&
+        h("input", {
+            className: "rdt-search",
+            type: "search",
+            placeholder: "Filter stores…",
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            "aria-label": "Filter stores by name",
+        }), rows.length === 0 &&
+        h("div", { className: "rdt-hint" }, "No stores registered."), filteredRows.length === 0 &&
+        rows.length > 0 &&
+        h("div", { className: "rdt-hint" }, `No stores match "${search}".`), ...filteredRows.map((r) => {
+        const isSelected = r.name === selected;
+        return h("button", {
+            key: r.name,
+            className: `rdt-item${isSelected ? " rdt-item--on" : ""}${r.instantiated ? "" : " rdt-item--stale"}`,
+            // T3.1: option role + aria-selected.
+            role: "option",
+            "aria-selected": isSelected,
+            tabIndex: isSelected ? 0 : -1,
+            onClick: () => setSel(r.name),
+            title: r.instantiated ? "live" : "not instantiated (enter its route)",
+        }, h("code", null, r.name), h("span", { className: "rdt-badge rdt-badge--kind" }, kindLabel(r)), !r.instantiated &&
+            h("span", { className: "rdt-badge rdt-badge--idle" }, "idle"));
+    })), h("div", { className: "rdt-main" }, selected === null
+        ? h("div", { className: "rdt-hint" }, "No store selected.")
+        : selRow && !selRow.instantiated
+            ? h("div", { className: "rdt-card" }, h("div", { className: "rdt-card-id" }, selected), h("div", { className: "rdt-hint" }, "not instantiated — enter its route to inspect live state."))
+            : h("div", { className: "rdt-card" }, h("div", { className: "rdt-card-id" }, selected), 
+            // State / data section (T1.3).
+            Object.keys(data).length > 0 &&
+                h("div", { className: "rdt-group" }, h("div", { className: "rdt-group-label" }, "State"), h(ValueTree, { data, changed }), 
+                // Preserved-state badges (Store §6) sit in the data group.
+                preserved.size > 0 &&
+                    h("div", { className: "rdt-kv" }, h("span", { className: "rdt-k" }, "preserved"), h("span", { className: "rdt-v" }, ...[...preserved].map((f) => h("span", { key: f, className: "rdt-badge rdt-badge--kind", title: "preserved state (Store §6)", style: { marginRight: 4 } }, f))))), 
+            // Actions section (T1.3) — the §4 invoke rows (DVT004).
+            callables.length > 0 &&
+                h("div", { className: "rdt-group" }, h("div", { className: "rdt-group-label" }, "Actions"), ...callables.flatMap((k) => {
+                    const key = `${selected}.${k}`;
+                    return [
+                        h("div", { key, className: "rdt-kv" }, h("span", { className: "rdt-k" }, `${k}()`), h("input", {
+                            className: "rdt-args",
+                            placeholder: 'args: ["x", 1]',
+                            value: argText[key] ?? "",
+                            onChange: (e) => setArgText((cur) => ({ ...cur, [key]: e.target.value })),
+                        }), h("button", {
+                            className: "rdt-btn rdt-mini rdt-run",
+                            onClick: () => invoke(selected, k, snap[k]),
+                            title: "Invoke — the exact action the store exposes",
+                        }, "▶ run")),
+                        invokeErr[key]
+                            ? h("div", { key: `${key}.err`, className: "rdt-invoke-err" }, invokeErr[key])
+                            : null,
+                    ];
+                })), Object.keys(data).length === 0 &&
+                callables.length === 0 &&
+                h("div", { className: "rdt-hint" }, "Empty snapshot."))));
+};
+//# sourceMappingURL=stores.js.map

package/dist/tabs/stores.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stores.js","sourceRoot":"","sources":["../../src/tabs/stores.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,EAAE;AACF,0EAA0E;AAC1E,2EAA2E;AAC3E,yEAAyE;AACzE,yEAAyE;AACzE,kEAAkE;AAElE,OAAO,EAAE,aAAa,IAAI,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAA;AACvF,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,cAAc,EAAiB,MAAM,oBAAoB,CAAA;AAE7F,yFAAyF;AACzF,MAAM,SAAS,GAAG,CAAC,CAAW,EAAU,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;AAYrF,yEAAyE;AACzE,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAa,EAAE;IAC5D,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC7B,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAA;IACnD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAyB,EAAE,CAAC,CAAA;IAClE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAyB,EAAE,CAAC,CAAA;IACtE,wEAAwE;IACxE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IACxC,mEAAmE;IACnE,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,GAAG,EAAmC,CAAC,CAAA;IAElE,MAAM,IAAI,GAAG,UAAU,EAAE,CAAA;IACzB,8CAA8C;IAC9C,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,EAAE,CAAA;IACxC,MAAM,YAAY,GAAG,WAAW;QAC9B,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAChE,CAAC,CAAC,IAAI,CAAA;IACR,uEAAuE;IACvE,0CAA0C;IAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAEzE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,GAAS,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;QAC5C,yEAAyE;QACzE,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;QACxF,oEAAoE;QACpE,gEAAgE;QAChE,IAAI,SAAS,GAAwB,IAAI,CAAA;QACzC,IAAI,KAAK,EAAE,CAAC;YACV,oEAAoE;YACpE,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;QACnC,CAAC;aAAM,CAAC;YACN,MAAM,EAAE,GAAG,WAAW,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;YACjC,SAAS,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,CAAA;QACrC,CAAC;QACD,OAAO,GAAG,EAAE;YACV,KAAK,MAAM,GAAG,IAAI,IAAI;gBAAE,GAAG,EAAE,CAAA;YAC7B,SAAS,EAAE,EAAE,CAAA;QACf,CAAC,CAAA;QACD,mEAAmE;QACnE,uDAAuD;IACzD,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpB,MAAM,QAAQ,GAAG,GAAG,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,IAAI,CAAC,CAAA;IACjG,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAA;IACpD,MAAM,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC3D,oEAAoE;IACpE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAA;IACrG,MAAM,IAAI,GAA+B,iBAAiB,CAAC,OAAO,CAAC,CAAA;IACnE,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;IACzC,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,IAA+B,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IACzH,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,MAAM,EAAE,eAAe,IAAI,EAAE,CAAC,CAAA;IAExD,MAAM,MAAM,GAAG,CAAC,KAAa,EAAE,MAAc,EAAE,EAAW,EAAQ,EAAE;QAClE,MAAM,GAAG,GAAG,GAAG,KAAK,IAAI,MAAM,EAAE,CAAA;QAChC,wEAAwE;QACxE,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CACjD,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAC5C,CAAA;QACD,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC;YACf,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QACtD,CAAC;aAAM,CAAC;YACN,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAA;QAC5C,CAAC;IACH,CAAC,CAAA;IAED,uEAAuE;IACvE,iCAAiC;IACjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,EAAE,CAAC;YACb,MAAM,CAAC,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAA;YACjC,IAAI,CAAC;gBAAE,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAA4B,CAAC,CAAA;QACvF,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,CAAC,CACN,KAAK,EACL,EAAE,SAAS,EAAE,UAAU,EAAE,EACzB,CAAC,CACC,KAAK,EACL;QACE,SAAS,EAAE,UAAU;QACrB,mEAAmE;QACnE,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,QAAQ;QACtB,kBAAkB,EAAE,UAAU;QAC9B,kDAAkD;QAClD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;YAC9B,MAAM,MAAM,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAA;YACjE,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,MAAM,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC9D,MAAM,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAE,CAAC,IAAI,CAAC,CAAA;gBACtC,CAAC,CAAC,cAAc,EAAE,CAAA;YACpB,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC7C,MAAM,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAE,CAAC,IAAI,CAAC,CAAA;gBACtC,CAAC,CAAC,cAAc,EAAE,CAAA;YACpB,CAAC;QACH,CAAC;KACF,EACD,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC;IACvB,8DAA8D;IAC9D,IAAI,CAAC,MAAM,GAAG,CAAC;QACb,CAAC,CAAC,OAAO,EAAE;YACT,SAAS,EAAE,YAAY;YACvB,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,gBAAgB;YAC7B,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;YACzE,YAAY,EAAE,uBAAuB;SACtC,CAAC,EACJ,IAAI,CAAC,MAAM,KAAK,CAAC;QACf,CAAC,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,uBAAuB,CAAC,EAC9D,YAAY,CAAC,MAAM,KAAK,CAAC;QACvB,IAAI,CAAC,MAAM,GAAG,CAAC;QACf,CAAC,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,oBAAoB,MAAM,IAAI,CAAC,EACrE,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;QACxB,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAA;QACtC,OAAO,CAAC,CACN,QAAQ,EACR;YACE,GAAG,EAAE,CAAC,CAAC,IAAI;YACX,SAAS,EAAE,WAAW,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE;YACpG,qCAAqC;YACrC,IAAI,EAAE,QAAQ;YACd,eAAe,EAAE,UAAU;YAC3B,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7B,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,oCAAoC;SACtE,EACD,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,EACvB,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,2BAA2B,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,EACnE,CAAC,CAAC,CAAC,YAAY;YACb,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,2BAA2B,EAAE,EAAE,MAAM,CAAC,CAChE,CAAA;IACH,CAAC,CAAC,CACH,EACD,CAAC,CACC,KAAK,EACL,EAAE,SAAS,EAAE,UAAU,EAAE,EACzB,QAAQ,KAAK,IAAI;QACf,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,oBAAoB,CAAC;QAC3D,CAAC,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,YAAY;YAC9B,CAAC,CAAC,CAAC,CACC,KAAK,EACL,EAAE,SAAS,EAAE,UAAU,EAAE,EACzB,CAAC,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,QAAQ,CAAC,EAChD,CAAC,CACC,KAAK,EACL,EAAE,SAAS,EAAE,UAAU,EAAE,EACzB,2DAA2D,CAC5D,CACF;YACH,CAAC,CAAC,CAAC,CACC,KAAK,EACL,EAAE,SAAS,EAAE,UAAU,EAAE,EACzB,CAAC,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,QAAQ,CAAC;YAChD,+BAA+B;YAC/B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC;gBAC1B,CAAC,CACC,KAAK,EACL,EAAE,SAAS,EAAE,WAAW,EAAE,EAC1B,CAAC,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,iBAAiB,EAAE,EAAE,OAAO,CAAC,EACnD,CAAC,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gBAC/B,2DAA2D;gBAC3D,SAAS,CAAC,IAAI,GAAG,CAAC;oBAChB,CAAC,CACC,KAAK,EACL,EAAE,SAAS,EAAE,QAAQ,EAAE,EACvB,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,WAAW,CAAC,EAC9C,CAAC,CACC,MAAM,EACN,EAAE,SAAS,EAAE,OAAO,EAAE,EACtB,GAAG,CAAC,GAAG,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAC1B,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,2BAA2B,EAAE,KAAK,EAAE,4BAA4B,EAAE,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CACjI,CACF,CACF,CACJ;YACH,wDAAwD;YACxD,SAAS,CAAC,MAAM,GAAG,CAAC;gBAClB,CAAC,CACC,KAAK,EACL,EAAE,SAAS,EAAE,WAAW,EAAE,EAC1B,CAAC,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,iBAAiB,EAAE,EAAE,SAAS,CAAC,EACrD,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;oBACzB,MAAM,GAAG,GAAG,GAAG,QAAQ,IAAI,CAAC,EAAE,CAAA;oBAC9B,OAAO;wBACL,CAAC,CACC,KAAK,EACL,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,EAC5B,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,GAAG,CAAC,IAAI,CAAC,EAC3C,CAAC,CAAC,OAAO,EAAE;4BACT,SAAS,EAAE,UAAU;4BACrB,WAAW,EAAE,gBAAgB;4BAC7B,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE;4BACzB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAC7C,UAAU,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;yBAC3D,CAAC,EACF,CAAC,CACC,QAAQ,EACR;4BACE,SAAS,EAAE,0BAA0B;4BACrC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAK,CAAC,CAAC,CAAC,CAAC;4BAC5C,KAAK,EAAE,6CAA6C;yBACrD,EACD,OAAO,CACR,CACF;wBACD,SAAS,CAAC,GAAG,CAAC;4BACZ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;4BAC9E,CAAC,CAAC,IAAI;qBACT,CAAA;gBACH,CAAC,CAAC,CACH,EACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC;gBAC5B,SAAS,CAAC,MAAM,KAAK,CAAC;gBACtB,CAAC,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,iBAAiB,CAAC,CACzD,CACR,CACF,CAAA;AACH,CAAC,CAAA"}

package/dist/tabs/timeTravel.d.ts

@@ -0,0 +1,46 @@
+import { type ReactNode } from "react";
+import type { HookRecorder } from "../hookRecorder.ts";
+/** Props of the Time Travel tab. */
+export interface TimeTravelTabProps {
+    recorder: HookRecorder;
+    hookState: "pending" | "installed" | "occupied";
+    /**
+     * T3.3: called when the replaying state changes so the parent panel can
+     * apply `rdt-panel--replaying` to the shell.
+     */
+    onReplayingChange?: (replaying: boolean) => void;
+}
+/** Which component names re-drove the running UI vs rendered panel-only (§7). */
+interface DriveResult {
+    live: string[];
+    view: string[];
+}
+/** Side-effect deps for {@link driveEntriesRouteFirst} — injected so the routing /
+ * store / component re-drive can be exercised in a unit test without a real router. */
+export interface DriveEntryDeps {
+    /** Raw (lossless) store snapshot folded under `componentId` at/before `absT`. */
+    rawStoreStateAt: (componentId: string, absT: number) => Record<string, unknown> | undefined;
+    /** Re-drive the URL (router navigate). */
+    navigate: (path: string) => void;
+    /** Current `pathname + search`, or undefined under SSR/Node. */
+    currentLocation: () => string | undefined;
+    /** Drive a store to a snapshot; returns the count of fields written. */
+    replayStoreState: (name: string, state: Record<string, unknown>) => number;
+    /** Drive a replayable component to a snapshot; returns the setter count. */
+    applyReplayState: (state: Record<string, unknown>, name: string) => number;
+}
+/**
+ * Drive folded `statesAt` entries back into the live app, **route-first** (architect
+ * C2). Pass A re-drives every `Route` navigation — which fires the router's `onEnter`
+ * synchronously → `StoreRegistry.instantiate` for the target route's stores. Pass B
+ * then restores stores (incl. the route stores Pass A just instantiated) + replayable
+ * components. A route store on a middleware-gated / not-yet-loaded route instantiates
+ * asynchronously, so it's still absent in Pass B → `replayStoreState` returns 0 →
+ * `view` (clean degrade, no settle-tick — C1). Pure but for the injected side effects,
+ * so the ordering invariant is unit-testable.
+ */
+export declare const driveEntriesRouteFirst: (entries: ReadonlyArray<readonly [string, unknown]>, absT: number, deps: DriveEntryDeps) => DriveResult;
+/** Time Travel tab — passive history + replayable live re-drive (§7). */
+export declare const TimeTravelTab: (props: TimeTravelTabProps) => ReactNode;
+export {};
+//# sourceMappingURL=timeTravel.d.ts.map

package/dist/tabs/timeTravel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeTravel.d.ts","sourceRoot":"","sources":["../../src/tabs/timeTravel.ts"],"names":[],"mappings":"AAWA,OAAO,EAA4D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAoBhG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAYtD,oCAAoC;AACpC,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,YAAY,CAAA;IACtB,SAAS,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAA;IAC/C;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CACjD;AAED,iFAAiF;AACjF,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,IAAI,EAAE,MAAM,EAAE,CAAA;CACf;AAED;uFACuF;AACvF,MAAM,WAAW,cAAc;IAC7B,iFAAiF;IACjF,eAAe,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAA;IAC3F,0CAA0C;IAC1C,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,gEAAgE;IAChE,eAAe,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;IACzC,wEAAwE;IACxE,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAA;IAC1E,4EAA4E;IAC5E,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;CAC3E;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB,GACjC,SAAS,aAAa,CAAC,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAClD,MAAM,MAAM,EACZ,MAAM,cAAc,KACnB,WAoCF,CAAA;AAED,yEAAyE;AACzE,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,KAAG,SAmWzD,CAAA"}