@reactra/replay-devtools 0.1.0-alpha.0

package/dist/helpers.d.ts

@@ -0,0 +1,101 @@
+import type { ReplayEvent, SessionBundle } from "@reactra/behaviours/replayable";
+import { diffKeys } from "@reactra/replay";
+import type { ReplayPlayer } from "@reactra/replay";
+export { diffKeys };
+/** Visual identity of one event type on the timeline + table. */
+export interface EventStyle {
+    /** CSS color for the timeline tick / table chip. */
+    color: string;
+    /** Single-character glyph for compact rows. */
+    glyph: string;
+}
+export declare const eventStyle: (e: ReplayEvent) => EventStyle;
+/** One-line human summary of a recorded event (table detail column). */
+export declare const describeEvent: (e: ReplayEvent) => string;
+/** "+12.3s" — timeline offset formatting. */
+export declare const formatOffset: (ms: number) => string;
+/**
+ * The sessions-list query string for a "key=value" filter-box value —
+ * `?meta.<key>=<value>` (the replay-server read API; NOT a Reactra spec
+ * contract). Whitespace-trimmed; no "=" or empty key/value → "".
+ */
+export declare const sessionsQuery: (metaFilter: string) => string;
+/** Bearer-or-custom auth headers for the read API fetches. */
+export declare const authHeaders: (token?: string, headers?: () => HeadersInit) => HeadersInit;
+/**
+ * Sorted unique event offsets — the timeline's discrete stops. With a
+ * `predicate`, only matching events contribute stops: the transport
+ * (prev/next/playback/drive) then walks ONLY the filtered events — the
+ * type/instance chips and the from/to window all funnel through here.
+ */
+export declare const eventStops: (bundle: SessionBundle, predicate?: (e: ReplayEvent) => boolean) => number[];
+/**
+ * Clamp one dragged edge of the timeline window (the Chrome-Network-style
+ * brush). The dragged edge stays inside [0, duration] and never crosses the
+ * opposite edge.
+ */
+export declare const clampWindowEdge: (edge: "from" | "to", value: number, other: number, duration: number) => number;
+/** The index of the latest stop ≤ `offset` (-1 = before all stops). */
+export declare const stopIndexAt: (stops: readonly number[], offset: number) => number;
+/** Recorded instance ids in first-seen order (filter chips + state cards). */
+export declare const instanceIds: (bundle: SessionBundle) => string[];
+/**
+ * Playback delay until the next stop, at `speed`× real time. The gap is floored
+ * at MIN_STEP_MS so clustered/same-timestamp events remain visible, then divided
+ * by `speed`; long recorded idles are clamped so auto-play never stalls the
+ * viewer (max 2s wall time).
+ */
+export declare const playbackDelay: (curOffset: number, nextOffset: number, speed: number) => number;
+/**
+ * Gridline offsets for the timeline's time scale: the smallest "nice" step
+ * (100ms / 250ms / … / 1h) that yields at most `targetCount` ticks across
+ * `durationMs`, starting at 0. A zero/negative duration has just the origin.
+ */
+export declare const timeScaleTicks: (durationMs: number, targetCount?: number) => number[];
+/**
+ * Route-first drive decision (Replay §5 C2): given the route `path` folded at
+ * the scrub target and the current browser location, return the path to
+ * `navigate()` to — or `undefined` when no navigation is needed (no recorded
+ * route, or the URL already matches). Navigating only on a real difference
+ * keeps scrub idempotent and avoids spurious history churn.
+ */
+export declare const routeDriveTarget: (recordedPath: string | undefined, currentLocation: string) => string | undefined;
+/**
+ * A filesystem-safe download filename for a `SessionBundle`.
+ *
+ * Format: `replay-<sessionId>-<YYYY-MM-DD>.json`. All characters are safe
+ * for every major OS file system — no spaces, slashes, colons, or other
+ * characters that require escaping in a `Content-Disposition` header or a
+ * `<a download>` attribute.
+ */
+export declare const bundleFilename: (b: SessionBundle) => string;
+/**
+ * Serialize a `SessionBundle` to a JSON string that round-trips without loss.
+ *
+ * The output is the wire format — importing and exporting a bundle should
+ * produce a byte-identical file (modulo key ordering, which `JSON.parse` then
+ * `JSON.stringify` may alter, but the data is structurally equal).
+ */
+export declare const bundleToBlobText: (b: SessionBundle) => string;
+/**
+ * Walk `stops` from `fromIndex + dir` (direction `dir`: 1=forward, -1=backward)
+ * and return the index of the first stop where `key` changes for instance `id`.
+ *
+ * "Changes" means the key is in `diffKeys(stateAt(j-1), stateAt(j))` — the
+ * same shallow-JSON comparison the state-card highlights use. When walking
+ * backward the comparison is reversed: the "previous" is `stops[j]` and the
+ * "current" for the diff is the stop that was displayed at the cursor
+ * (i.e. `stops[j+1]`), so clicking "previous change" lands on the stop that
+ * INTRODUCED the value the cursor is showing.
+ *
+ * Returns `null` when no such stop exists (reached end of range, or `id`/`key`
+ * absent throughout). Pure — no panel state touched; safe to call in a handler.
+ *
+ * Per-stop cost is one `statesAt` call (O(n) over snapshots). The walk is
+ * bounded by the filtered `stops` length, which is the set the panel already
+ * renders.
+ */
+export declare const nextChangeStop: (player: ReplayPlayer, bundle: SessionBundle, stops: readonly number[], fromIndex: number, id: string, key: string, dir: 1 | -1) => number | null;
+/** Compact scale-tick label: "0s", "12s", "1.5s", "2m", "2m30s". */
+export declare const formatScaleTick: (ms: number) => string;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAChF,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAInD,OAAO,EAAE,QAAQ,EAAE,CAAA;AAEnB,iEAAiE;AACjE,MAAM,WAAW,UAAU;IACzB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAA;IACb,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAA;CACd;AAMD,eAAO,MAAM,UAAU,GAAI,GAAG,WAAW,KAAG,UAsB3C,CAAA;AAED,wEAAwE;AACxE,eAAO,MAAM,aAAa,GAAI,GAAG,WAAW,KAAG,MAe9C,CAAA;AAED,6CAA6C;AAC7C,eAAO,MAAM,YAAY,GAAI,IAAI,MAAM,KAAG,MAAuC,CAAA;AAEjF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,YAAY,MAAM,KAAG,MAOlD,CAAA;AAED,8DAA8D;AAC9D,eAAO,MAAM,WAAW,GACtB,QAAQ,MAAM,EACd,UAAU,MAAM,WAAW,KAC1B,WAIF,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GACrB,QAAQ,aAAa,EACrB,YAAY,CAAC,CAAC,EAAE,WAAW,KAAK,OAAO,KACtC,MAAM,EAKgB,CAAA;AAEzB;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAC1B,MAAM,MAAM,GAAG,IAAI,EACnB,OAAO,MAAM,EACb,OAAO,MAAM,EACb,UAAU,MAAM,KACf,MAGF,CAAA;AAED,uEAAuE;AACvE,eAAO,MAAM,WAAW,GAAI,OAAO,SAAS,MAAM,EAAE,EAAE,QAAQ,MAAM,KAAG,MAOtE,CAAA;AAED,8EAA8E;AAC9E,eAAO,MAAM,WAAW,GAAI,QAAQ,aAAa,KAAG,MAAM,EAMzD,CAAA;AAWD;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,WAAW,MAAM,EAAE,YAAY,MAAM,EAAE,OAAO,MAAM,KAAG,MACd,CAAA;AAQvE;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,YAAY,MAAM,EAAE,oBAAe,KAAG,MAAM,EAO1E,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAC3B,cAAc,MAAM,GAAG,SAAS,EAChC,iBAAiB,MAAM,KACtB,MAAM,GAAG,SAGX,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,GAAG,aAAa,KAAG,MAIjD,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAAI,GAAG,aAAa,KAAG,MAA2B,CAAA;AAE/E;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,cAAc,GACzB,QAAQ,YAAY,EACpB,QAAQ,aAAa,EACrB,OAAO,SAAS,MAAM,EAAE,EACxB,WAAW,MAAM,EACjB,IAAI,MAAM,EACV,KAAK,MAAM,EACX,KAAK,CAAC,GAAG,CAAC,CAAC,KACV,MAAM,GAAG,IAwBX,CAAA;AAED,oEAAoE;AACpE,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,MAO5C,CAAA"}

package/dist/helpers.js

@@ -0,0 +1,236 @@
+// @reactra/replay-devtools — pure panel logic (no React, no DOM).
+//
+// Owner: reactra-runtime-spec.md §3 (`@reactra/replay-devtools`, internal
+// tier — exported for tests); the event/bundle shapes are Replay spec §3.
+// Everything here is Node-portable by construction so the panel's behaviour
+// is unit-testable without a renderer.
+import { diffKeys } from "@reactra/replay";
+// COND-2: diffKeys is now defined in @reactra/replay; re-exported here so all
+// existing import paths (replay-devtools consumers + the /timeline subpath) keep
+// working unchanged.
+export { diffKeys };
+// Timeline color language: one hue per concern, keyframes emphasized. The colors
+// are `--rdt-ev-*` TOKENS (not literal hex) so they stay visible on BOTH the dark
+// and light track/table backgrounds — a single fixed hue (especially the
+// near-white keyframe marker) is invisible on a light background. Owner: /tokens.
+export const eventStyle = (e) => {
+    switch (e.type) {
+        case "action":
+            return { color: "var(--rdt-ev-action)", glyph: "▶" };
+        case "state_snapshot":
+            return e.keyframe
+                ? { color: "var(--rdt-ev-keyframe)", glyph: "⬛" }
+                : { color: "var(--rdt-ev-delta)", glyph: "Δ" };
+        case "resource":
+            return { color: "var(--rdt-ev-resource)", glyph: "◆" };
+        case "mount":
+            return e.phase === "mount"
+                ? { color: "var(--rdt-ev-mount)", glyph: "+" }
+                : { color: "var(--rdt-ev-unmount)", glyph: "−" };
+        case "gap":
+            return { color: "var(--rdt-ev-gap)", glyph: "⚠" };
+        case "tx_mark":
+            return {
+                color: "var(--rdt-ev-action)",
+                glyph: e.phase === "optimistic" ? "⚡" : e.phase === "rolledback" ? "↩" : "✓",
+            };
+    }
+};
+/** One-line human summary of a recorded event (table detail column). */
+export const describeEvent = (e) => {
+    switch (e.type) {
+        case "mount":
+            return e.phase;
+        case "action":
+            return `${e.name}(${e.payload.map((p) => JSON.stringify(p)).join(", ")}) — ${e.duration.toFixed(1)}ms`;
+        case "state_snapshot":
+            return `${e.keyframe ? "keyframe " : ""}${JSON.stringify(e.state)}`;
+        case "resource":
+            return `${e.name} → ${e.status}`;
+        case "gap":
+            return `${e.dropped} events dropped (rate guard)`;
+        case "tx_mark":
+            return `command ${e.phase}: ${JSON.stringify(e.state)}`;
+    }
+};
+/** "+12.3s" — timeline offset formatting. */
+export const formatOffset = (ms) => `+${(ms / 1000).toFixed(1)}s`;
+/**
+ * The sessions-list query string for a "key=value" filter-box value —
+ * `?meta.<key>=<value>` (the replay-server read API; NOT a Reactra spec
+ * contract). Whitespace-trimmed; no "=" or empty key/value → "".
+ */
+export const sessionsQuery = (metaFilter) => {
+    const eq = metaFilter.indexOf("=");
+    if (eq <= 0)
+        return "";
+    const key = metaFilter.slice(0, eq).trim();
+    const value = metaFilter.slice(eq + 1).trim();
+    if (!key || !value)
+        return "";
+    return `?meta.${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+};
+/** Bearer-or-custom auth headers for the read API fetches. */
+export const authHeaders = (token, headers) => {
+    if (headers)
+        return headers();
+    if (token)
+        return { authorization: `Bearer ${token}` };
+    return {};
+};
+/**
+ * Sorted unique event offsets — the timeline's discrete stops. With a
+ * `predicate`, only matching events contribute stops: the transport
+ * (prev/next/playback/drive) then walks ONLY the filtered events — the
+ * type/instance chips and the from/to window all funnel through here.
+ */
+export const eventStops = (bundle, predicate) => [
+    ...new Set(bundle.events.filter((e) => !predicate || predicate(e)).map((e) => e.timestamp - bundle.startTime)),
+].sort((a, b) => a - b);
+/**
+ * Clamp one dragged edge of the timeline window (the Chrome-Network-style
+ * brush). The dragged edge stays inside [0, duration] and never crosses the
+ * opposite edge.
+ */
+export const clampWindowEdge = (edge, value, other, duration) => {
+    const v = Math.min(duration, Math.max(0, value));
+    return edge === "from" ? Math.min(v, other) : Math.max(v, other);
+};
+/** The index of the latest stop ≤ `offset` (-1 = before all stops). */
+export const stopIndexAt = (stops, offset) => {
+    let i = -1;
+    for (const t of stops) {
+        if (t <= offset)
+            i++;
+        else
+            break;
+    }
+    return i;
+};
+/** Recorded instance ids in first-seen order (filter chips + state cards). */
+export const instanceIds = (bundle) => {
+    const seen = [];
+    for (const e of bundle.events) {
+        if (!seen.includes(e.componentId))
+            seen.push(e.componentId);
+    }
+    return seen;
+};
+/**
+ * The minimum per-step gap (ms) auto-play honours before dividing by `speed`.
+ * Recorded commits often cluster within a few ms of each other (React commits
+ * in bursts), so a raw 16ms floor flashed the whole flow past in one frame and
+ * read as "nothing played". 200ms makes each step perceptible at 1× while
+ * higher speeds still accelerate it (e.g. 4× → 50ms/step).
+ */
+const MIN_STEP_MS = 200;
+/**
+ * Playback delay until the next stop, at `speed`× real time. The gap is floored
+ * at MIN_STEP_MS so clustered/same-timestamp events remain visible, then divided
+ * by `speed`; long recorded idles are clamped so auto-play never stalls the
+ * viewer (max 2s wall time).
+ */
+export const playbackDelay = (curOffset, nextOffset, speed) => Math.min(2000, Math.max(MIN_STEP_MS, nextOffset - curOffset) / speed);
+/** The "nice" step candidates for the timeline's time scale, in ms. */
+const SCALE_STEPS = [
+    100, 250, 500, 1_000, 2_000, 5_000, 10_000, 15_000, 30_000,
+    60_000, 120_000, 300_000, 600_000, 1_800_000, 3_600_000,
+];
+/**
+ * Gridline offsets for the timeline's time scale: the smallest "nice" step
+ * (100ms / 250ms / … / 1h) that yields at most `targetCount` ticks across
+ * `durationMs`, starting at 0. A zero/negative duration has just the origin.
+ */
+export const timeScaleTicks = (durationMs, targetCount = 8) => {
+    if (durationMs <= 0)
+        return [0];
+    const step = SCALE_STEPS.find((s) => durationMs / s <= targetCount) ?? SCALE_STEPS[SCALE_STEPS.length - 1];
+    const ticks = [];
+    for (let t = 0; t <= durationMs; t += step)
+        ticks.push(t);
+    return ticks;
+};
+/**
+ * Route-first drive decision (Replay §5 C2): given the route `path` folded at
+ * the scrub target and the current browser location, return the path to
+ * `navigate()` to — or `undefined` when no navigation is needed (no recorded
+ * route, or the URL already matches). Navigating only on a real difference
+ * keeps scrub idempotent and avoids spurious history churn.
+ */
+export const routeDriveTarget = (recordedPath, currentLocation) => {
+    if (recordedPath === undefined)
+        return undefined;
+    return recordedPath === currentLocation ? undefined : recordedPath;
+};
+/**
+ * A filesystem-safe download filename for a `SessionBundle`.
+ *
+ * Format: `replay-<sessionId>-<YYYY-MM-DD>.json`. All characters are safe
+ * for every major OS file system — no spaces, slashes, colons, or other
+ * characters that require escaping in a `Content-Disposition` header or a
+ * `<a download>` attribute.
+ */
+export const bundleFilename = (b) => {
+    const d = new Date(b.startTime);
+    const ymd = `${d.getUTCFullYear()}-${String(d.getUTCMonth() + 1).padStart(2, "0")}-${String(d.getUTCDate()).padStart(2, "0")}`;
+    return `replay-${b.sessionId}-${ymd}.json`;
+};
+/**
+ * Serialize a `SessionBundle` to a JSON string that round-trips without loss.
+ *
+ * The output is the wire format — importing and exporting a bundle should
+ * produce a byte-identical file (modulo key ordering, which `JSON.parse` then
+ * `JSON.stringify` may alter, but the data is structurally equal).
+ */
+export const bundleToBlobText = (b) => JSON.stringify(b);
+/**
+ * Walk `stops` from `fromIndex + dir` (direction `dir`: 1=forward, -1=backward)
+ * and return the index of the first stop where `key` changes for instance `id`.
+ *
+ * "Changes" means the key is in `diffKeys(stateAt(j-1), stateAt(j))` — the
+ * same shallow-JSON comparison the state-card highlights use. When walking
+ * backward the comparison is reversed: the "previous" is `stops[j]` and the
+ * "current" for the diff is the stop that was displayed at the cursor
+ * (i.e. `stops[j+1]`), so clicking "previous change" lands on the stop that
+ * INTRODUCED the value the cursor is showing.
+ *
+ * Returns `null` when no such stop exists (reached end of range, or `id`/`key`
+ * absent throughout). Pure — no panel state touched; safe to call in a handler.
+ *
+ * Per-stop cost is one `statesAt` call (O(n) over snapshots). The walk is
+ * bounded by the filtered `stops` length, which is the set the panel already
+ * renders.
+ */
+export const nextChangeStop = (player, bundle, stops, fromIndex, id, key, dir) => {
+    const start = fromIndex + dir;
+    const end = dir === 1 ? stops.length - 1 : 0;
+    for (let j = start; dir === 1 ? j <= end : j >= end; j += dir) {
+        const curStop = stops[j];
+        if (curStop === undefined)
+            break;
+        const curState = player.statesAt(bundle.startTime + curStop).get(id);
+        if (!curState || !(key in curState))
+            continue;
+        // A stop "changes" `key` when diffKeys(state@(j-1), state@j) includes it.
+        // This is the same comparison in both directions — walking backward just
+        // means we visit the stops in reverse order to find the most-recent prior
+        // change point.
+        const prevStop = stops[j - 1];
+        const prevState = prevStop !== undefined
+            ? player.statesAt(bundle.startTime + prevStop).get(id)
+            : undefined;
+        if (diffKeys(prevState, curState).includes(key))
+            return j;
+    }
+    return null;
+};
+/** Compact scale-tick label: "0s", "12s", "1.5s", "2m", "2m30s". */
+export const formatScaleTick = (ms) => {
+    if (ms >= 60_000) {
+        const m = Math.floor(ms / 60_000);
+        const s = Math.round((ms % 60_000) / 1000);
+        return s === 0 ? `${m}m` : `${m}m${s}s`;
+    }
+    return `${Number((ms / 1000).toFixed(2))}s`;
+};
+//# sourceMappingURL=helpers.js.map

package/dist/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { ReplayDevtools, type ReplayDevtoolsProps } from "./panel.ts";
+export { authHeaders as __authHeaders, bundleFilename as __bundleFilename, bundleToBlobText as __bundleToBlobText, describeEvent as __describeEvent, diffKeys as __diffKeys, eventStops as __eventStops, eventStyle as __eventStyle, formatOffset as __formatOffset, instanceIds as __instanceIds, playbackDelay as __playbackDelay, sessionsQuery as __sessionsQuery, stopIndexAt as __stopIndexAt, } from "./helpers.ts";
+export { __resetStylesForTest, ensureStyles as __ensureStyles } from "./styles.ts";
+export { __resetTokensForTest } from "./tokens.ts";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAGrE,OAAO,EACL,WAAW,IAAI,aAAa,EAC5B,cAAc,IAAI,gBAAgB,EAClC,gBAAgB,IAAI,kBAAkB,EACtC,aAAa,IAAI,eAAe,EAChC,QAAQ,IAAI,UAAU,EACtB,UAAU,IAAI,YAAY,EAC1B,UAAU,IAAI,YAAY,EAC1B,YAAY,IAAI,cAAc,EAC9B,WAAW,IAAI,aAAa,EAC5B,aAAa,IAAI,eAAe,EAChC,aAAa,IAAI,eAAe,EAChC,WAAW,IAAI,aAAa,GAC7B,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,oBAAoB,EAAE,YAAY,IAAI,cAAc,EAAE,MAAM,aAAa,CAAA;AAClF,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA"}

package/dist/index.js

@@ -0,0 +1,15 @@
+// @reactra/replay-devtools — public surface.
+//
+// Owner: reactra-runtime-spec.md §2 (UI-companion tier) + §3. User-facing:
+// the panel and its props type. The pure helpers are internal tier —
+// re-exported __-prefixed for tests only, never documented as user API.
+//
+// The `/chrome` and `/tokens` subpaths are separate named exports (not
+// re-exported here) — consumers import from `@reactra/replay-devtools/chrome`
+// and `@reactra/replay-devtools/tokens` directly (package.json exports map).
+export { ReplayDevtools } from "./panel.js";
+// Internal tier (tests only — Runtime spec §1 visibility tiers).
+export { authHeaders as __authHeaders, bundleFilename as __bundleFilename, bundleToBlobText as __bundleToBlobText, describeEvent as __describeEvent, diffKeys as __diffKeys, eventStops as __eventStops, eventStyle as __eventStyle, formatOffset as __formatOffset, instanceIds as __instanceIds, playbackDelay as __playbackDelay, sessionsQuery as __sessionsQuery, stopIndexAt as __stopIndexAt, } from "./helpers.js";
+export { __resetStylesForTest, ensureStyles as __ensureStyles } from "./styles.js";
+export { __resetTokensForTest } from "./tokens.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,EAAE;AACF,2EAA2E;AAC3E,qEAAqE;AACrE,wEAAwE;AACxE,EAAE;AACF,uEAAuE;AACvE,8EAA8E;AAC9E,6EAA6E;AAE7E,OAAO,EAAE,cAAc,EAA4B,MAAM,YAAY,CAAA;AAErE,iEAAiE;AACjE,OAAO,EACL,WAAW,IAAI,aAAa,EAC5B,cAAc,IAAI,gBAAgB,EAClC,gBAAgB,IAAI,kBAAkB,EACtC,aAAa,IAAI,eAAe,EAChC,QAAQ,IAAI,UAAU,EACtB,UAAU,IAAI,YAAY,EAC1B,UAAU,IAAI,YAAY,EAC1B,YAAY,IAAI,cAAc,EAC9B,WAAW,IAAI,aAAa,EAC5B,aAAa,IAAI,eAAe,EAChC,aAAa,IAAI,eAAe,EAChC,WAAW,IAAI,aAAa,GAC7B,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,oBAAoB,EAAE,YAAY,IAAI,cAAc,EAAE,MAAM,aAAa,CAAA;AAClF,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA"}

package/dist/panel.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+/** Props of the session-recorder panel (Runtime spec §3). */
+export interface ReplayDevtoolsProps {
+    /** Base path of the replay-server HTTP READ API (default `"/replay"`). */
+    endpoint?: string;
+    /** Bearer-token sugar for the read API (REPLAY_TOKEN deployments). */
+    token?: string;
+    /** Custom auth-header supplier — wins over `token`. */
+    headers?: () => HeadersInit;
+    /** Start with the drawer open instead of the collapsed pill. */
+    defaultOpen?: boolean;
+    /** Show the live re-drive toggle (default true). */
+    drive?: boolean;
+}
+/**
+ * The Reactra session-recorder panel: finalize-and-scrub, a color-coded
+ * visual timeline, transport controls with auto-playback, keyboard stepping
+ * (←/→/space), per-instance state cards with change highlighting, event-type
+ * and instance filters, live re-drive, and server-session browsing.
+ *
+ * Window chrome: Shift+Alt+R hotkey, drag-to-resize, minimize, pop-out,
+ * System→Light→Dark theme — all powered by the shared `/chrome` helpers.
+ */
+export declare const ReplayDevtools: (props: ReplayDevtoolsProps) => ReactNode;
+//# sourceMappingURL=panel.d.ts.map

package/dist/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../src/panel.ts"],"names":[],"mappings":"AA2BA,OAAO,EAA4D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAiChG,6DAA6D;AAC7D,MAAM,WAAW,mBAAmB;IAClC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,WAAW,CAAA;IAC3B,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oDAAoD;IACpD,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAaD;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,KAAG,SAq3B3D,CAAA"}