@paramour-js/devtools-panel 0.6.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jason Paff
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,37 @@
+# @paramour-js/devtools-panel
+
+A [TanStack Devtools](https://tanstack.com/devtools) panel for
+[paramour](https://paramour.dev): watch your routes decode in real time.
+Every hook call reports what it saw — which route, the raw wire values, the
+decoded result, or the exact `issues[]` when a decode failed — with
+defaults and `.catch()` recoveries attributed rather than silently blended
+in, and editable search inputs that navigate the app to the URL you
+compose.
+
+```sh
+pnpm add @paramour-js/devtools-panel @tanstack/react-devtools
+```
+
+You own the TanStack shell; paramour is a plugin in it. Mount it once,
+dev-conditionally:
+
+```tsx
+"use client";
+
+import { paramourDevtoolsPlugin } from "@paramour-js/devtools-panel";
+import { TanStackDevtools } from "@tanstack/react-devtools";
+
+export function Devtools() {
+  if (process.env.NODE_ENV === "production") return null;
+  return <TanStackDevtools plugins={[paramourDevtoolsPlugin()]} />;
+}
+```
+
+## Docs
+
+- [Devtools guide](https://paramour.dev/docs/guides/devtools)
+- [Devtools API reference](https://paramour.dev/docs/reference/devtools)
+
+## License
+
+MIT © Jason Paff

package/dist/components/codec-input.d.ts

@@ -0,0 +1,39 @@
+import type { AnyCodec, CodecDescription } from "paramour";
+import type { ReactNode } from "react";
+export declare function CodecInput({ codec, dataKey, description, draftText, hasDraft, onCommit, onDraftChange, parsedValue, raw, }: {
+    readonly codec: AnyCodec;
+    readonly dataKey: string;
+    readonly description: CodecDescription;
+    readonly draftText: string;
+    /** True when a text draft exists — the draft then owns the widget state. */
+    readonly hasDraft: boolean;
+    /**
+     * Commit now; `immediateText` carries a same-event draft (the checkbox's
+     * toggle-and-commit) that React state cannot deliver to this commit —
+     * `setDrafts` lands next render, AFTER the commit would read it.
+     */
+    readonly onCommit: (immediateText?: string) => void;
+    readonly onDraftChange: (text: string) => void;
+    /** The decode's parsed value — the EFFECTIVE state when no draft exists. */
+    readonly parsedValue: unknown;
+    readonly raw: boolean;
+}): ReactNode;
+/**
+ * The kind → widget dispatch. The draft currency is always the WIRE
+ * string (`draftText`): structured widgets (toggle, select, date) convert
+ * their widget value to wire before reporting, so the live preview always
+ * reflects the true wire round-trip. Raw mode swaps in a mono text input
+ * holding the wire verbatim. Enter and blur commit (the deliberate commit
+ * point — no live-as-you-type navigation).
+ */
+/**
+ * Which keys get the multi-line textarea (one wire value per line):
+ * repeated-key (arity "many") codecs in codec mode. Arity alone decides —
+ * element presence stopped implying csv when p.array gained `~element`
+ * (PP1); csv stays arity "single", so its one comma-joined wire value edits
+ * in the plain input below, and raw mode always edits one wire value in a
+ * mono input. Exported so the row's draft SEEDING can agree: only this
+ * widget may be seeded with a newline join — single-line inputs
+ * value-sanitize the `\n` away, fabricating a merged value.
+ */
+export declare function isMultilineWidget(description: CodecDescription, raw: boolean): boolean;

package/dist/components/codec-input.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { serializeValue } from "paramour";
+export function CodecInput({ codec, dataKey, description, draftText, hasDraft, onCommit, onDraftChange, parsedValue, raw, }) {
+    const commitOnEnter = (key) => {
+        if (key === "Enter")
+            onCommit();
+    };
+    if (isMultilineWidget(description, raw)) {
+        // Repeated-key array codecs: one wire value per line (csv keeps its
+        // single comma-joined wire value and stays a plain input below).
+        return (_jsx("textarea", { "aria-label": `edit ${dataKey}`, className: "pmr-textarea", onBlur: () => {
+                onCommit();
+            }, onChange: (event) => {
+                onDraftChange(event.target.value);
+            }, placeholder: "one value per line", value: draftText }));
+    }
+    if (!raw && description.kind === "boolean") {
+        // Without a draft the box mirrors the EFFECTIVE parsed value — an
+        // absent wire with `.default(true)` must render checked, or unchecking
+        // it (committing `false`) is unreachable.
+        const checked = hasDraft
+            ? draftText === trueWire(codec, dataKey)
+            : parsedValue === true;
+        return (_jsx("input", { "aria-label": `edit ${dataKey}`, checked: checked, className: "pmr-input", onChange: (event) => {
+                const text = event.target.checked
+                    ? trueWire(codec, dataKey)
+                    : falseWire(codec, dataKey);
+                onDraftChange(text);
+                onCommit(text);
+            }, type: "checkbox" }));
+    }
+    if (!raw && description.enumMembers !== undefined) {
+        const members = description.enumMembers;
+        // No draft: show the effective member (a defaulted enum reads as its
+        // default), or the hidden placeholder when nothing parsed. A controlled
+        // value that matches NO option would make the browser display the first
+        // member while the draft stays "" — rendering that member unpickable
+        // (selecting it fires no change event).
+        const effectiveMember = typeof parsedValue === "string" && members.includes(parsedValue)
+            ? parsedValue
+            : "";
+        return (_jsxs("select", { "aria-label": `edit ${dataKey}`, className: "pmr-select", onBlur: () => {
+                onCommit();
+            }, onChange: (event) => {
+                onDraftChange(event.target.value);
+            }, onKeyDown: (event) => {
+                commitOnEnter(event.key);
+            }, value: draftText === "" ? effectiveMember : draftText, children: [_jsx("option", { disabled: true, hidden: true, value: "" }), members.map((member) => (_jsx("option", { value: member, children: member }, member)))] }));
+    }
+    const type = raw
+        ? "text"
+        : description.kind === "index" ||
+            description.kind === "integer" ||
+            description.kind === "number"
+            ? "number"
+            : description.kind === "isoDate"
+                ? "date"
+                : "text";
+    const placeholder = raw
+        ? "raw wire value"
+        : description.kind === "timestamp"
+            ? "2026-01-01T00:00:00.000Z"
+            : // An element here means csv's one comma-joined wire value — arrays
+                // also carry an element (PP1) but never reach this input: arity
+                // "many" takes the textarea above.
+                description.element !== undefined
+                    ? `${description.element.kind},…`
+                    : "";
+    return (_jsx("input", { "aria-label": raw ? `raw wire for ${dataKey}` : `edit ${dataKey}`, className: "pmr-input", 
+        // The 1-based wire floor (PP5) — the draft currency is the WIRE string.
+        min: description.kind === "index" ? "1" : undefined, onBlur: () => {
+            onCommit();
+        }, onChange: (event) => {
+            onDraftChange(event.target.value);
+        }, onKeyDown: (event) => {
+            commitOnEnter(event.key);
+        }, placeholder: placeholder, step: description.kind === "index" || description.kind === "integer"
+            ? "1"
+            : "any", type: type, value: draftText }));
+}
+/**
+ * The kind → widget dispatch. The draft currency is always the WIRE
+ * string (`draftText`): structured widgets (toggle, select, date) convert
+ * their widget value to wire before reporting, so the live preview always
+ * reflects the true wire round-trip. Raw mode swaps in a mono text input
+ * holding the wire verbatim. Enter and blur commit (the deliberate commit
+ * point — no live-as-you-type navigation).
+ */
+/**
+ * Which keys get the multi-line textarea (one wire value per line):
+ * repeated-key (arity "many") codecs in codec mode. Arity alone decides —
+ * element presence stopped implying csv when p.array gained `~element`
+ * (PP1); csv stays arity "single", so its one comma-joined wire value edits
+ * in the plain input below, and raw mode always edits one wire value in a
+ * mono input. Exported so the row's draft SEEDING can agree: only this
+ * widget may be seeded with a newline join — single-line inputs
+ * value-sanitize the `\n` away, fabricating a merged value.
+ */
+export function isMultilineWidget(description, raw) {
+    return !raw && description.arity === "many";
+}
+/**
+ * The boolean wires via the codec's own serializer — exact even for a
+ * custom codec whose wire isn't literally "true"/"false".
+ */
+function falseWire(codec, key) {
+    return safeWire(codec, key, false, "false");
+}
+function safeWire(codec, key, value, fallback) {
+    try {
+        return serializeValue(codec, key, value);
+    }
+    catch {
+        return fallback;
+    }
+}
+function trueWire(codec, key) {
+    return safeWire(codec, key, true, "true");
+}

package/dist/components/copy-toolbar.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+/**
+ * Non-invasive copy helpers: the session's URL (absent when a stale
+ * snapshot's URL cannot be rebuilt), the parsed values as JSON (absent when
+ * nothing parsed), and the `href()` reproduction snippet.
+ */
+export declare function CopyToolbar({ parsedJson, snippet, url, }: {
+    readonly parsedJson: string | undefined;
+    readonly snippet: string;
+    readonly url: string | undefined;
+}): ReactNode;

package/dist/components/copy-toolbar.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyButton } from "./primitives.js";
+/**
+ * Non-invasive copy helpers: the session's URL (absent when a stale
+ * snapshot's URL cannot be rebuilt), the parsed values as JSON (absent when
+ * nothing parsed), and the `href()` reproduction snippet.
+ */
+export function CopyToolbar({ parsedJson, snippet, url, }) {
+    return (_jsxs("span", { className: "pmr-toolbar", children: [url === undefined ? null : _jsx(CopyButton, { label: "copy url", text: url }), parsedJson === undefined ? null : (_jsx(CopyButton, { label: "copy json", text: parsedJson })), _jsx(CopyButton, { label: "copy href()", text: snippet })] }));
+}

package/dist/components/issues-section.d.ts

@@ -0,0 +1,15 @@
+import type { Issue } from "paramour";
+import type { ReactNode } from "react";
+/**
+ * `issues[]` rendered prominently on decode failure — always in the
+ * single-scroll flow, never behind a tab, so a failing decode can never be
+ * hidden one click away. The raw-search root sentinel key `"<search>"`
+ * reads as the whole search string failing. `wire` and `expected` are the
+ * issue's structured halves: the wire value is JSON-quoted so an
+ * empty-string value stays visible, and an absent field renders an em dash
+ * (absence is meaningful — a missing key HAS no wire value; a rawSearch
+ * issue has no owning codec to name).
+ */
+export declare function IssuesSection({ issues, }: {
+    readonly issues: readonly Issue[];
+}): ReactNode;

package/dist/components/issues-section.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `issues[]` rendered prominently on decode failure — always in the
+ * single-scroll flow, never behind a tab, so a failing decode can never be
+ * hidden one click away. The raw-search root sentinel key `"<search>"`
+ * reads as the whole search string failing. `wire` and `expected` are the
+ * issue's structured halves: the wire value is JSON-quoted so an
+ * empty-string value stays visible, and an absent field renders an em dash
+ * (absence is meaningful — a missing key HAS no wire value; a rawSearch
+ * issue has no owning codec to name).
+ */
+export function IssuesSection({ issues, }) {
+    if (issues.length === 0)
+        return null;
+    return (_jsxs("div", { className: "pmr-issues", children: [_jsx("div", { className: "pmr-section-title", children: "Issues" }), _jsxs("table", { className: "pmr-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "key" }), _jsx("th", { children: "wire" }), _jsx("th", { children: "expected" }), _jsx("th", { children: "message" })] }) }), _jsx("tbody", { children: issues.map((issue, index) => (_jsxs("tr", { children: [_jsx("td", { className: "pmr-mono", children: issue.key === "<search>" ? "(whole search)" : issue.key }), _jsx("td", { className: "pmr-mono", children: issue.wire === undefined ? "—" : JSON.stringify(issue.wire) }), _jsx("td", { className: "pmr-mono", children: issue.expected ?? "—" }), _jsx("td", { children: issue.message })] }, `${issue.key}:${String(index)}`))) })] })] }));
+}

package/dist/components/panel.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+export interface ParamourDevtoolsPanelProps {
+    /**
+     * Injected by the TanStack shell (the one contract it guarantees every
+     * panel, regardless of framework); selects the stylesheet's token set via
+     * a `data-theme` attribute — no theme context, no remount.
+     */
+    readonly theme?: "dark" | "light";
+}
+/**
+ * The paramour devtools panel: session sidebar on the left; the main pane
+ * auto-follows the route(s) whose observations match the current URL
+ * (layout and page may both report — both render, stacked), or shows a
+ * pinned session's last-known snapshot read-only with a stale marker.
+ */
+export declare function ParamourDevtoolsPanel({ theme, }: ParamourDevtoolsPanelProps): ReactNode;

package/dist/components/panel.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useSyncExternalStore } from "react";
+import { getServerSnapshot, getSnapshot, subscribe } from "../store.js";
+import { PANEL_CSS } from "../styles.js";
+import { EmptyState } from "./primitives.js";
+import { RouteView } from "./route-view.js";
+import { Sidebar } from "./sidebar.js";
+/**
+ * The paramour devtools panel: session sidebar on the left; the main pane
+ * auto-follows the route(s) whose observations match the current URL
+ * (layout and page may both report — both render, stacked), or shows a
+ * pinned session's last-known snapshot read-only with a stale marker.
+ */
+export function ParamourDevtoolsPanel({ theme, }) {
+    const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    const [selectedKey, setSelectedKey] = useState(null);
+    const visible = selectedKey === null
+        ? snapshot.sessions.filter((session) => snapshot.currentKeys.includes(session.key))
+        : snapshot.sessions.filter((session) => session.key === selectedKey);
+    return (_jsxs("div", { className: "pmr-root", "data-theme": theme ?? "light", children: [_jsx("style", { children: PANEL_CSS }), snapshot.sessions.length === 0 ? (_jsx(EmptyState, {})) : (_jsxs(_Fragment, { children: [_jsx(Sidebar, { currentKeys: snapshot.currentKeys, onSelect: setSelectedKey, selectedKey: selectedKey, sessions: snapshot.sessions }), _jsx("div", { className: "pmr-main", children: visible.length === 0 ? (_jsx("div", { className: "pmr-empty", children: "No observed route matches the current URL \u2014 select one from the sidebar to inspect its last-known snapshot." })) : (visible.map((session) => (_jsx(RouteView, { session: session, stale: !snapshot.currentKeys.includes(session.key) }, session.key)))) })] }))] }));
+}

package/dist/components/params-table.d.ts

@@ -0,0 +1,13 @@
+import type { ParamDescription } from "paramour";
+import type { ReactNode } from "react";
+import type { ParamourObservation } from "../seam.js";
+/**
+ * The params half of the inspector. Read-only in v1: editing a path param
+ * navigates to a different RESOURCE — a bigger action than tweaking a
+ * filter, deferred behind `href()`.
+ */
+export declare function ParamsTable({ changeStamps, descriptions, observation, }: {
+    readonly changeStamps: Readonly<Record<string, number>>;
+    readonly descriptions: Readonly<Record<string, ParamDescription>>;
+    readonly observation: ParamourObservation | undefined;
+}): ReactNode;

package/dist/components/params-table.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { formatShape, formatWire, jsLiteral } from "../format.js";
+import { ValueCell } from "./primitives.js";
+/**
+ * The params half of the inspector. Read-only in v1: editing a path param
+ * navigates to a different RESOURCE — a bigger action than tweaking a
+ * filter, deferred behind `href()`.
+ */
+export function ParamsTable({ changeStamps, descriptions, observation, }) {
+    const names = Object.keys(descriptions);
+    if (names.length === 0)
+        return null;
+    const wire = observation?.kind === "params" ? observation.wire : undefined;
+    const parsed = observation?.result.status === "success"
+        ? observation.result.data
+        : undefined;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "pmr-section-title", children: "Params" }), _jsxs("table", { className: "pmr-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "key" }), _jsx("th", { children: "wire" }), _jsx("th", { children: "parsed" }), _jsx("th", { children: "shape" })] }) }), _jsx("tbody", { children: names.map((name) => {
+                            const description = descriptions[name];
+                            if (description === undefined)
+                                return null;
+                            return (_jsxs("tr", { children: [_jsx("td", { className: "pmr-mono", children: name }), _jsx("td", { children: _jsx(ValueCell, { stamp: 0, children: formatWire(wire?.[name]) }) }), _jsx("td", { children: _jsx(ValueCell, { stamp: changeStamps[name] ?? 0, children: parsed === undefined ? "—" : jsLiteral(parsed[name]) }) }), _jsxs("td", { className: "pmr-mono pmr-muted", children: [formatShape(description), segmentHint(description)] })] }, name));
+                        }) })] })] }));
+}
+function segmentHint(description) {
+    switch (description.segmentKind) {
+        case "catchall":
+            return " [...]";
+        case "optional-catchall":
+            return " [[...]]";
+        case "single":
+            return "";
+    }
+}

package/dist/components/primitives.d.ts

@@ -0,0 +1,38 @@
+import type { RouterKind } from "paramour";
+import type { ReactNode } from "react";
+/** Shared leaf components. */
+export type PanelStatus = "error" | "ok" | "pending" | "stale";
+/** Neutral (never a status color) per-key attribution tag. */
+export declare function AttributionTag({ kind, }: {
+    readonly kind: "catch" | "default";
+}): ReactNode;
+/**
+ * Inline micro-feedback — the label swaps to a checkmark briefly; no
+ * toasts. Clipboard failure (denied permission, no focus) is silently
+ * tolerated: a copy button that sometimes needs a second click beats a
+ * crashing panel.
+ */
+export declare function CopyButton({ label, text, }: {
+    readonly label: string;
+    readonly text: string;
+}): ReactNode;
+/**
+ * The pre-observation state is EXPECTED, not a problem — styled as
+ * informational, never as an error.
+ */
+export declare function EmptyState(): ReactNode;
+export declare function RouterBadge({ router, }: {
+    readonly router: RouterKind;
+}): ReactNode;
+export declare function StatusDot({ status, }: {
+    readonly status: PanelStatus;
+}): ReactNode;
+/**
+ * Monospace value cell. The React `key` carries the store's change-stamp,
+ * so a parsed-value change remounts the span and restarts the flash
+ * animation; stamp 0 (first appearance) doesn't flash.
+ */
+export declare function ValueCell({ children, stamp, }: {
+    readonly children: ReactNode;
+    readonly stamp: number;
+}): ReactNode;

package/dist/components/primitives.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+/**
+ * Colorblind-safe glyph shapes layered ON TOP of the color dots, not
+ * replacing them — the at-a-glance color read stays, the glyph carries the
+ * same information without color.
+ */
+const STATUS_GLYPHS = {
+    error: "✕",
+    ok: "✓",
+    pending: "◷",
+    stale: "∅",
+};
+/** Neutral (never a status color) per-key attribution tag. */
+export function AttributionTag({ kind, }) {
+    return _jsx("span", { className: "pmr-tag", children: kind });
+}
+/**
+ * Inline micro-feedback — the label swaps to a checkmark briefly; no
+ * toasts. Clipboard failure (denied permission, no focus) is silently
+ * tolerated: a copy button that sometimes needs a second click beats a
+ * crashing panel.
+ */
+export function CopyButton({ label, text, }) {
+    const [copied, setCopied] = useState(false);
+    return (_jsx("button", { className: "pmr-icon-button", onClick: () => {
+            try {
+                void navigator.clipboard.writeText(text).catch(() => undefined);
+            }
+            catch {
+                // No clipboard API in this environment — the swap still signals.
+            }
+            setCopied(true);
+            setTimeout(() => {
+                setCopied(false);
+            }, 1200);
+        }, type: "button", children: copied ? "✓" : label }));
+}
+/**
+ * The pre-observation state is EXPECTED, not a problem — styled as
+ * informational, never as an error.
+ */
+export function EmptyState() {
+    return (_jsx("div", { className: "pmr-empty", children: "No routes observed yet \u2014 navigate using a paramour hook to see it here." }));
+}
+export function RouterBadge({ router, }) {
+    return _jsx("span", { className: "pmr-badge", children: router });
+}
+export function StatusDot({ status, }) {
+    return (_jsx("span", { "aria-label": status, className: `pmr-dot pmr-dot--${status}`, role: "img", children: _jsx("span", { "aria-hidden": "true", className: "pmr-dot-glyph", children: STATUS_GLYPHS[status] }) }));
+}
+/**
+ * Monospace value cell. The React `key` carries the store's change-stamp,
+ * so a parsed-value change remounts the span and restarts the flash
+ * animation; stamp 0 (first appearance) doesn't flash.
+ */
+export function ValueCell({ children, stamp, }) {
+    return (_jsx("span", { className: stamp > 0 ? "pmr-flash pmr-mono" : "pmr-mono", children: children }, stamp));
+}

package/dist/components/route-view.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import type { RouteSession } from "../store.js";
+/**
+ * One session's stacked single-scroll pane: route-match banner (path
+ * pattern, router kind, status, copy toolbar), params table, search table,
+ * then issues — rendered only when present, never behind a tab. A stale
+ * (non-current) session renders its last-known snapshot with editing
+ * disabled: its `navigate` belongs to a page that is no longer mounted.
+ *
+ * Sessions are immutable store records, so every derivation here is
+ * memoized on the session reference — a panel re-render for some OTHER
+ * session's observation must not re-run `describeRoute`, the literal
+ * printers, or the `href` serialization.
+ */
+export declare function RouteView({ session, stale, }: {
+    readonly session: RouteSession;
+    readonly stale: boolean;
+}): ReactNode;

package/dist/components/route-view.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describeRoute, href, isRawSearch } from "paramour";
+import { useMemo } from "react";
+import { jsLiteral, reproSnippet } from "../format.js";
+import { parsedRecord } from "../store.js";
+import { CopyToolbar } from "./copy-toolbar.js";
+import { IssuesSection } from "./issues-section.js";
+import { ParamsTable } from "./params-table.js";
+import { RouterBadge, StatusDot } from "./primitives.js";
+import { SearchTable } from "./search-table.js";
+/**
+ * One session's stacked single-scroll pane: route-match banner (path
+ * pattern, router kind, status, copy toolbar), params table, search table,
+ * then issues — rendered only when present, never behind a tab. A stale
+ * (non-current) session renders its last-known snapshot with editing
+ * disabled: its `navigate` belongs to a page that is no longer mounted.
+ *
+ * Sessions are immutable store records, so every derivation here is
+ * memoized on the session reference — a panel re-render for some OTHER
+ * session's observation must not re-run `describeRoute`, the literal
+ * printers, or the `href` serialization.
+ */
+export function RouteView({ session, stale, }) {
+    const derived = useMemo(() => {
+        const description = describeRoute(session.route);
+        const routerKind = session.params?.routerKind ?? session.search?.routerKind ?? "app";
+        const params = parsedRecord(session.params);
+        const search = parsedRecord(session.search);
+        const parsedJson = params === undefined && search === undefined
+            ? undefined
+            : jsLiteral({
+                ...(params === undefined ? {} : { params }),
+                ...(search === undefined ? {} : { search }),
+            });
+        const issues = [
+            ...issuesOf(session.params),
+            ...issuesOf(session.search),
+        ];
+        // The blessed-internal search config, needed for editing; `describeRoute`
+        // told us whether it's a codec map. Reading the internal slot here is
+        // sanctioned — it is the same read the hooks make.
+        const searchSlot = session.route["~search"];
+        const searchConfig = description.search.kind === "codecs" && !isRawSearch(searchSlot)
+            ? searchSlot
+            : undefined;
+        return {
+            description,
+            issues,
+            params,
+            parsedJson,
+            routerKind,
+            search,
+            searchConfig,
+            snippet: reproSnippet(description.path, routerKind, params, search),
+            staleHref: staleUrl(session.route, params, search),
+            wireKey: wireFingerprint(session.search),
+        };
+    }, [session]);
+    return (_jsxs("section", { children: [_jsxs("div", { className: "pmr-banner", children: [_jsx("span", { className: "pmr-banner-path", children: derived.description.path }), _jsx(RouterBadge, { router: derived.routerKind }), _jsx(StatusDot, { status: stale ? "stale" : session.status }), stale ? _jsx("span", { className: "pmr-stale-badge", children: "stale snapshot" }) : null, _jsx(CopyToolbar, { parsedJson: derived.parsedJson, snippet: derived.snippet, url: stale ? derived.staleHref : window.location.href })] }), _jsx(ParamsTable, { changeStamps: session.changeStamps.params, descriptions: derived.description.params, observation: session.params }), _jsx(SearchTable, { changeStamps: session.changeStamps.search, description: derived.description.search, 
+                // The NEWEST observation's navigate (either half) — the store keeps
+                // it session-level so a stale half's closure can never shadow a
+                // fresher one.
+                navigate: stale ? undefined : session.navigate, observation: session.search, searchConfig: derived.searchConfig }, derived.wireKey), _jsx(IssuesSection, { issues: derived.issues })] }));
+}
+function issuesOf(observation) {
+    if (observation?.result.status !== "error")
+        return [];
+    return observation.result.error.issues;
+}
+/**
+ * A stale session's copy-url source: its snapshot belongs to a page that
+ * is NO LONGER the live location, so the URL is rebuilt from the
+ * parsed halves through core's `href` — the same serialization the user's
+ * own code would run. Unbuildable (errored params, exotic schema throw) →
+ * `undefined`, and the toolbar hides the button rather than copying the
+ * wrong page's URL.
+ */
+function staleUrl(route, params, search) {
+    const buildHref = href;
+    try {
+        return buildHref(route, {
+            ...(params === undefined ? {} : { params }),
+            ...(search === undefined ? {} : { search }),
+        });
+    }
+    catch {
+        return undefined;
+    }
+}
+function wireFingerprint(observation) {
+    if (observation?.kind !== "search")
+        return "none";
+    return JSON.stringify(observation.wire);
+}

package/dist/components/search-table.d.ts

@@ -0,0 +1,21 @@
+import type { AnyCodec, SearchDescription } from "paramour";
+import type { ReactNode } from "react";
+import type { ParamourObservation } from "../seam.js";
+/**
+ * The search half of the inspector and the panel's editing surface: per-key
+ * widgets validating live through the codec, a per-key RAW WIRE toggle for
+ * reproducing invalid values, clear-to-absent, and a commit-to-push flow —
+ * Enter/blur assembles the FULL pair list (untouched and unknown keys
+ * carried verbatim), serializes through `buildSearchString` (spaces as %20
+ * — S-rule fidelity), and navigates via the EMITTING hook's `navigate`
+ * capability. The parent remounts this component when the observed wire
+ * changes (its React key), which is the drafts-invalidation rule: an
+ * external navigation resets the edit session.
+ */
+export declare function SearchTable({ changeStamps, description, navigate, observation, searchConfig, }: {
+    readonly changeStamps: Readonly<Record<string, number>>;
+    readonly description: SearchDescription;
+    readonly navigate: ((search: string) => void) | undefined;
+    readonly observation: ParamourObservation | undefined;
+    readonly searchConfig: Readonly<Record<string, AnyCodec>> | undefined;
+}): ReactNode;