@paramour-js/devtools-panel 0.6.0

package/dist/match.js

@@ -0,0 +1,49 @@
+/**
+ * Does `pathname` (from `window.location`) match this route's pattern?
+ * Powers the "current URL" grouping: static segments compare against the
+ * percent-DECODED path part; `single` consumes exactly one part; `catchall`
+ * one-plus; `optional-catchall` zero-plus (both are terminal by Next's
+ * grammar, mirrored by core's tokenizer). Trailing slashes are
+ * normalization noise (`/shop/` matches `/shop`).
+ */
+export function matchesPathname(segments, pathname) {
+    const parts = pathname.split("/").filter((part) => part !== "");
+    let index = 0;
+    for (const segment of segments) {
+        switch (segment.kind) {
+            case "catchall": {
+                if (parts.length - index < 1)
+                    return false;
+                index = parts.length;
+                break;
+            }
+            case "optional-catchall": {
+                index = parts.length;
+                break;
+            }
+            case "single": {
+                if (parts[index] === undefined)
+                    return false;
+                index += 1;
+                break;
+            }
+            case "static": {
+                const part = parts[index];
+                if (part === undefined || decodePart(part) !== segment.raw)
+                    return false;
+                index += 1;
+                break;
+            }
+        }
+    }
+    return index === parts.length;
+}
+/** A malformed escape in a URL the panel merely OBSERVES must not throw. */
+function decodePart(part) {
+    try {
+        return decodeURIComponent(part);
+    }
+    catch {
+        return part;
+    }
+}

package/dist/plugin.d.ts

@@ -0,0 +1,20 @@
+import type { ReactElement } from "react";
+/**
+ * The TanStack Devtools plugin entry: the user owns the shell — install
+ * `@tanstack/react-devtools`, mount
+ * `<TanStackDevtools plugins={[paramourDevtoolsPlugin()]} />`, done. The
+ * entry type is declared STRUCTURALLY (the shell's contract is just
+ * name/render/id/defaultOpen) so this module never imports the shell at
+ * runtime; assignability to the real plugin type is certified by the
+ * package's type tests. The shell clones `render` and injects `theme`.
+ */
+export interface ParamourDevtoolsPluginEntry {
+    readonly defaultOpen?: boolean;
+    readonly id: string;
+    readonly name: string;
+    readonly render: ReactElement;
+}
+export interface ParamourDevtoolsPluginOptions {
+    readonly defaultOpen?: boolean;
+}
+export declare function paramourDevtoolsPlugin(options?: ParamourDevtoolsPluginOptions): ParamourDevtoolsPluginEntry;

package/dist/plugin.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ParamourDevtoolsPanel } from "./components/panel.js";
+export function paramourDevtoolsPlugin(options) {
+    return {
+        ...(options?.defaultOpen === undefined
+            ? {}
+            : { defaultOpen: options.defaultOpen }),
+        id: "paramour-devtools",
+        name: "Paramour",
+        render: _jsx(ParamourDevtoolsPanel, {}),
+    };
+}

package/dist/seam.d.ts

@@ -0,0 +1,16 @@
+import type { ParamourDevtoolsSeam } from "@paramour-js/next/devtools-seam";
+/**
+ * The panel's half of the observation seam. The contract of record lives in
+ * `@paramour-js/next`'s `src/devtools-seam.ts`; this module consumes it
+ * TYPES-ONLY via the `./devtools-seam` subpath export (which has no runtime
+ * condition — a runtime import of it fails module resolution by
+ * construction, enforcing "attach via the global only" mechanically). Both
+ * sides are create-if-absent on the same `Symbol.for` key, so mount order —
+ * hooks first or panel first — is irrelevant and pre-mount observations
+ * replay from the buffer.
+ */
+export type { ParamourDevtoolsSeam, ParamourHookId, ParamourNavigate, ParamourObservation, ParamourObservationResult, ParamourParamsObservation, ParamourSearchObservation, ParamourSearchWire, } from "@paramour-js/next/devtools-seam";
+/** Same realm-global registry key the hooks use; see the contract of record. */
+export declare const SEAM_KEY: unique symbol;
+/** The slot, created on first touch by whichever side runs first. */
+export declare function getOrCreateSeam(): ParamourDevtoolsSeam;

package/dist/seam.js

@@ -0,0 +1,16 @@
+/** Same realm-global registry key the hooks use; see the contract of record. */
+export const SEAM_KEY = Symbol.for("paramour.devtools.seam");
+const globalSlots = globalThis;
+/** The slot, created on first touch by whichever side runs first. */
+export function getOrCreateSeam() {
+    const existing = globalSlots[SEAM_KEY];
+    if (existing !== undefined)
+        return existing;
+    const created = {
+        buffer: [],
+        listeners: new Set(),
+        version: 1,
+    };
+    globalSlots[SEAM_KEY] = created;
+    return created;
+}

package/dist/store.d.ts

@@ -0,0 +1,70 @@
+import type { AnyRoute } from "paramour";
+import type { ParamourNavigate, ParamourObservation } from "./seam.js";
+/**
+ * The panel's session store: a module-level singleton shaped for
+ * `useSyncExternalStore`. It outlives panel mounts, so the session history
+ * survives closing/reopening the shell; it attaches to the seam on the
+ * FIRST subscriber (replaying the buffer) and detaches at zero.
+ */
+/**
+ * Per-data-key counters, incremented when that key's PARSED value changes
+ * between observations — feeds the row-flash highlight. Kept per HALF: an
+ * App route may legally declare a search key named like a path param (the
+ * collision is forbidden only for pages routes), and a shared record would
+ * cross-flash the other table's row.
+ */
+export interface ChangeStamps {
+    readonly params: Readonly<Record<string, number>>;
+    readonly search: Readonly<Record<string, number>>;
+}
+export interface DevtoolsSnapshot {
+    /** Session keys classified as the page currently on screen. */
+    readonly currentKeys: readonly string[];
+    /** Every route observed this session, first-observed order. */
+    readonly sessions: readonly RouteSession[];
+}
+/**
+ * One observed route, keyed `${routerKind}:${path}` rather than by object
+ * reference — HMR re-mints route objects on every save, and the composite
+ * key keeps one session across re-mints while the latest route object wins
+ * (its codecs are the live ones).
+ */
+export interface RouteSession {
+    readonly changeStamps: ChangeStamps;
+    readonly key: string;
+    /**
+     * The NEWEST observation's navigate, regardless of half: the other half's
+     * closure can be older — its fingerprint may not have moved since — and
+     * edits must always route through the freshest resolution base.
+     */
+    readonly navigate: ParamourNavigate;
+    readonly params?: ParamourObservation;
+    /** The NEWEST observation's basePath-relative pathname. */
+    readonly pathname: string;
+    readonly route: AnyRoute;
+    readonly search?: ParamourObservation;
+    /** error if any half errored, else pending if any half pends, else ok. */
+    readonly status: "error" | "ok" | "pending";
+}
+export declare function getServerSnapshot(): DevtoolsSnapshot;
+export declare function getSnapshot(): DevtoolsSnapshot;
+/**
+ * The parsed record a change-stamp comparison keys on — and the route
+ * view's table data (shared so the two can never diverge): the success
+ * arm's data object; error/pending halves contribute nothing (a row that
+ * stops parsing shows status, not a flash).
+ */
+export declare function parsedRecord(observation: ParamourObservation | undefined): Readonly<Record<string, unknown>> | undefined;
+/**
+ * Test hook: drop all sessions, cached snapshots, and any live seam
+ * attachment (a component left mounted by a previous test must not pin the
+ * store to a stale seam). Not in the barrel.
+ */
+export declare function resetStoreForTests(): void;
+/**
+ * `useSyncExternalStore`-shaped subscribe. First subscriber: replay the
+ * seam buffer through the reducer, then attach the live seam listener and
+ * a `popstate` backup (a back/forward that changes no decode still moves
+ * `currentKeys`). Last unsubscribe detaches both.
+ */
+export declare function subscribe(listener: () => void): () => void;

package/dist/store.js

@@ -0,0 +1,305 @@
+import { matchesPathname } from "./match.js";
+import { getOrCreateSeam } from "./seam.js";
+const EMPTY_SNAPSHOT = { currentKeys: [], sessions: [] };
+const state = {
+    consumed: new WeakSet(),
+    detach: undefined,
+    listeners: new Set(),
+    notifyScheduled: false,
+    prefix: undefined,
+    sessions: [],
+    snapshot: EMPTY_SNAPSHOT,
+    snapshotHref: "",
+};
+export function getServerSnapshot() {
+    return EMPTY_SNAPSHOT;
+}
+export function getSnapshot() {
+    return state.snapshot;
+}
+/**
+ * The parsed record a change-stamp comparison keys on — and the route
+ * view's table data (shared so the two can never diverge): the success
+ * arm's data object; error/pending halves contribute nothing (a row that
+ * stops parsing shows status, not a flash).
+ */
+export function parsedRecord(observation) {
+    if (observation === undefined)
+        return undefined;
+    if (observation.result.status !== "success")
+        return undefined;
+    const { data } = observation.result;
+    if (typeof data !== "object" || data === null)
+        return undefined;
+    return data;
+}
+/**
+ * Test hook: drop all sessions, cached snapshots, and any live seam
+ * attachment (a component left mounted by a previous test must not pin the
+ * store to a stale seam). Not in the barrel.
+ */
+export function resetStoreForTests() {
+    if (state.detach !== undefined) {
+        state.detach();
+        state.detach = undefined;
+    }
+    state.consumed = new WeakSet();
+    state.listeners.clear();
+    state.notifyScheduled = false;
+    state.prefix = undefined;
+    state.sessions = [];
+    state.snapshot = EMPTY_SNAPSHOT;
+    state.snapshotHref = "";
+}
+/**
+ * `useSyncExternalStore`-shaped subscribe. First subscriber: replay the
+ * seam buffer through the reducer, then attach the live seam listener and
+ * a `popstate` backup (a back/forward that changes no decode still moves
+ * `currentKeys`). Last unsubscribe detaches both.
+ */
+export function subscribe(listener) {
+    if (state.listeners.size === 0)
+        attach();
+    state.listeners.add(listener);
+    return () => {
+        state.listeners.delete(listener);
+        if (state.listeners.size === 0 && state.detach !== undefined) {
+            state.detach();
+            state.detach = undefined;
+        }
+    };
+}
+function attach() {
+    const seam = getOrCreateSeam();
+    for (const observation of seam.buffer)
+        reduce(observation);
+    recomputeSnapshot();
+    const onObservation = (observation) => {
+        reduce(observation);
+        recomputeSnapshot();
+        // Hooks emit during render, so a synchronous notify here would
+        // setState the panel while the EMITTING component is still rendering —
+        // React's "cannot update a component while rendering" violation. The
+        // snapshot updates eagerly; only the React wake-up defers a microtask.
+        scheduleNotify();
+    };
+    const onPopstate = () => {
+        recomputeSnapshot();
+        notify();
+    };
+    // Next commits client navigations via history.pushState/replaceState —
+    // no popstate fires — and the hooks emit render-phase BEFORE that commit,
+    // so the emit-time recompute reads the OLD pathname. Wrapping both is the
+    // only signal that the URL actually moved; without it the freshly
+    // navigated page classifies as a stale snapshot (editing disabled) until
+    // some unrelated event.
+    // eslint-disable-next-line @typescript-eslint/unbound-method -- captured to restore on detach (identity preserved); only ever invoked via .call(window.history)
+    const { pushState: originalPushState, replaceState: originalReplaceState } = window.history;
+    const wrapCommit = (original) => (data, unused, url) => {
+        original.call(window.history, data, unused, url);
+        recomputeSnapshot();
+        // The commit runs inside React's own commit phase (an insertion
+        // effect) — defer the wake-up exactly like an observation's.
+        scheduleNotify();
+    };
+    const wrappedPushState = wrapCommit(originalPushState);
+    const wrappedReplaceState = wrapCommit(originalReplaceState);
+    window.history.pushState = wrappedPushState;
+    window.history.replaceState = wrappedReplaceState;
+    seam.listeners.add(onObservation);
+    window.addEventListener("popstate", onPopstate);
+    state.detach = () => {
+        seam.listeners.delete(onObservation);
+        window.removeEventListener("popstate", onPopstate);
+        // Restore ONLY what is still ours: a library that patched history
+        // AFTER the panel attached (lazy-loaded analytics, another devtools
+        // plugin) holds our wrapper inside its own — a blind restore of the
+        // attach-time functions would silently sever it for the rest of the
+        // tab session. Its patch keeps working either way: our wrapper stays
+        // in its chain and merely recomputes against a detached store.
+        if (window.history.pushState === wrappedPushState) {
+            window.history.pushState = originalPushState;
+        }
+        if (window.history.replaceState === wrappedReplaceState) {
+            window.history.replaceState = originalReplaceState;
+        }
+    };
+}
+/** A malformed escape in a URL the panel merely OBSERVES must not throw. */
+function decodePathname(pathname) {
+    try {
+        return decodeURIComponent(pathname);
+    }
+    catch {
+        return pathname;
+    }
+}
+/**
+ * Is this session the page currently on screen? Two conditions: the live
+ * location must still correspond to the session's last OBSERVED pathname —
+ * a URL that moved with no fresh observation means the retained
+ * `navigate` belongs to a page no longer mounted, so pattern-matching the
+ * location alone would enable editing through a stale closure
+ * (`/product/1` → `/product/2` with no re-emit) — and the route's own
+ * pattern must match that observed pathname, so a session whose route
+ * object mismatches where its hook actually rendered never claims currency.
+ */
+function isCurrent(locationPathname, session) {
+    return (locationCovers(locationPathname, session.pathname) &&
+        matchesPathname(session.route["~segments"], session.pathname));
+}
+/**
+ * Does the live location correspond to `observed`? Observed pathnames are
+ * basePath-/locale-relative while `window.location.pathname` carries the
+ * prefix, so the comparison is suffix-based — observed pathnames start
+ * with "/", which makes plain `endsWith` boundary-safe. Percent-encoding
+ * may differ between the two sources, so a failed raw comparison retries
+ * decoded. Trailing slashes are normalization noise.
+ */
+function locationCovers(locationPathname, observed) {
+    const location = normalizePathname(locationPathname);
+    const target = normalizePathname(observed);
+    if (target === "/") {
+        // No suffix to align on: only a prefix learned from an earlier
+        // non-root match (or a prefix-less app) can verify a root observation.
+        return location === "/" || location === state.prefix;
+    }
+    if (location.endsWith(target)) {
+        state.prefix = location.slice(0, location.length - target.length);
+        return true;
+    }
+    const decodedLocation = decodePathname(location);
+    const decodedTarget = decodePathname(target);
+    if (decodedLocation.endsWith(decodedTarget)) {
+        state.prefix = decodedLocation.slice(0, decodedLocation.length - decodedTarget.length);
+        return true;
+    }
+    return false;
+}
+function normalizePathname(pathname) {
+    return pathname.length > 1 && pathname.endsWith("/")
+        ? pathname.slice(0, -1)
+        : pathname;
+}
+function notify() {
+    for (const listener of state.listeners)
+        listener();
+}
+function recomputeSnapshot() {
+    const { href, pathname } = window.location;
+    const currentKeys = state.sessions
+        .filter((session) => isCurrent(pathname, session))
+        .map((session) => session.key);
+    // Bail out when nothing observable moved: Next apps churn `replaceState`
+    // (scroll restoration etc.), and minting a fresh snapshot every commit
+    // defeats useSyncExternalStore's Object.is bailout — the whole panel
+    // would re-render per commit. `href` participates because the route view
+    // reads `location.href` (copy-URL) during render.
+    if (href === state.snapshotHref &&
+        state.snapshot.sessions === state.sessions &&
+        sameKeys(state.snapshot.currentKeys, currentKeys)) {
+        return;
+    }
+    state.snapshotHref = href;
+    // `reduce` reassigns `state.sessions` immutably, so the array can be
+    // shared with the snapshot by reference.
+    state.snapshot = { currentKeys, sessions: state.sessions };
+}
+function reduce(observation) {
+    // Attach-time replays walk the WHOLE buffer; anything the retained
+    // sessions already consumed must not re-apply.
+    if (state.consumed.has(observation))
+        return;
+    state.consumed.add(observation);
+    const key = `${observation.routerKind}:${observation.route.path}`;
+    const index = state.sessions.findIndex((session) => session.key === key);
+    const previous = index === -1 ? undefined : state.sessions[index];
+    const half = observation.kind === "params" ? "params" : "search";
+    const previousHalf = previous?.[half];
+    const halfStamps = { ...previous?.changeStamps[half] };
+    const before = parsedRecord(previousHalf);
+    const after = parsedRecord(observation);
+    if (after !== undefined) {
+        for (const [dataKey, value] of Object.entries(after)) {
+            const previousValue = before?.[dataKey];
+            if (before !== undefined && !sameValue(previousValue, value)) {
+                halfStamps[dataKey] = (halfStamps[dataKey] ?? 0) + 1;
+            }
+        }
+    }
+    const changeStamps = {
+        params: half === "params" ? halfStamps : (previous?.changeStamps.params ?? {}),
+        search: half === "search" ? halfStamps : (previous?.changeStamps.search ?? {}),
+    };
+    const merged = {
+        changeStamps,
+        key,
+        navigate: observation.navigate,
+        ...(half === "params"
+            ? { params: observation }
+            : previous?.params === undefined
+                ? {}
+                : { params: previous.params }),
+        pathname: observation.pathname,
+        route: observation.route,
+        ...(half === "search"
+            ? { search: observation }
+            : previous?.search === undefined
+                ? {}
+                : { search: previous.search }),
+        status: "ok",
+    };
+    const withStatus = { ...merged, status: statusOf(merged) };
+    if (index === -1) {
+        state.sessions = [...state.sessions, withStatus];
+    }
+    else {
+        state.sessions = state.sessions.map((session, sessionIndex) => sessionIndex === index ? withStatus : session);
+    }
+}
+function sameKeys(a, b) {
+    return a.length === b.length && a.every((key, index) => key === b[index]);
+}
+/** Cheap stable comparison: JSON with Date-safe replacer, sorted keys. */
+function sameValue(a, b) {
+    return stableStringify(a) === stableStringify(b);
+}
+function scheduleNotify() {
+    if (state.notifyScheduled)
+        return;
+    state.notifyScheduled = true;
+    queueMicrotask(() => {
+        state.notifyScheduled = false;
+        notify();
+    });
+}
+function stableStringify(value) {
+    if (value === undefined)
+        return "undefined";
+    if (value instanceof Date)
+        return `date:${String(value.getTime())}`;
+    if (Array.isArray(value)) {
+        return `[${value.map((element) => stableStringify(element)).join(",")}]`;
+    }
+    if (typeof value === "object" && value !== null) {
+        const entries = Object.entries(value)
+            .sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0))
+            .map(([key, entry]) => `${JSON.stringify(key)}:${stableStringify(entry)}`);
+        return `{${entries.join(",")}}`;
+    }
+    if (typeof value === "bigint")
+        return `${String(value)}n`;
+    if (typeof value === "function" || typeof value === "symbol") {
+        return `[${typeof value}]`;
+    }
+    return JSON.stringify(value);
+}
+function statusOf(session) {
+    const halves = [session.params, session.search];
+    if (halves.some((half) => half?.result.status === "error"))
+        return "error";
+    if (halves.some((half) => half?.result.status === "pending")) {
+        return "pending";
+    }
+    return "ok";
+}

package/dist/styles.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The panel's entire stylesheet, rendered as an inline `<style>` element by
+ * the panel root — no stylesheet import, no CSS-in-JS dependency, zero
+ * runtime deps. All selectors are `.pmr-` prefixed, so duplicate injection
+ * (two panels) is harmless. CSP note: an inline `<style>` needs
+ * `style-src 'unsafe-inline'` or a nonce — acceptable for a dev-only tool,
+ * documented rather than solved in v1.
+ *
+ * Theming: the shell's `theme` prop lands as a `data-theme` attribute on
+ * `.pmr-root`; the custom-property token set below flips with it — no theme
+ * context, no remount. Violet/indigo accent is paramour's own; the four
+ * status colors follow devtool traffic-light convention. Density and the
+ * monospace wire stack keep the tables scannable; the only motion is the
+ * ~400ms row flash plus the copy-button glyph swap.
+ */
+export declare const PANEL_CSS = "\n.pmr-root {\n  --pmr-accent: #6d5ae6;\n  --pmr-accent-soft: #6d5ae62e;\n  --pmr-bg: #ffffff;\n  --pmr-bg-raised: #f6f5fb;\n  --pmr-border: #e2e0ef;\n  --pmr-flash-duration: 400ms;\n  --pmr-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  --pmr-font-ui: system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  --pmr-status-error: #e5484d;\n  --pmr-status-ok: #30a46c;\n  --pmr-status-pending: #f5a524;\n  --pmr-status-stale: #8f8f8f;\n  --pmr-text: #232130;\n  --pmr-text-muted: #6f6c85;\n\n  background: var(--pmr-bg);\n  color: var(--pmr-text);\n  display: flex;\n  font-family: var(--pmr-font-ui);\n  font-size: 12px;\n  height: 100%;\n  line-height: 1.45;\n  min-height: 0;\n  overflow: hidden;\n  width: 100%;\n}\n.pmr-root[data-theme=\"dark\"] {\n  --pmr-accent: #8b7cf0;\n  --pmr-accent-soft: #8b7cf03d;\n  --pmr-bg: #17151f;\n  --pmr-bg-raised: #201d2b;\n  --pmr-border: #322e42;\n  --pmr-status-error: #ff6369;\n  --pmr-status-ok: #3dd68c;\n  --pmr-status-pending: #ffb224;\n  --pmr-status-stale: #7c7c7c;\n  --pmr-text: #eceaf4;\n  --pmr-text-muted: #9b97ad;\n}\n\n.pmr-sidebar {\n  border-right: 1px solid var(--pmr-border);\n  flex: 0 0 190px;\n  overflow-y: auto;\n  padding: 6px 0;\n}\n.pmr-sidebar-entry {\n  align-items: center;\n  background: none;\n  border: none;\n  color: var(--pmr-text);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  gap: 6px;\n  padding: 4px 10px;\n  text-align: left;\n  width: 100%;\n}\n.pmr-sidebar-entry:hover {\n  background: var(--pmr-bg-raised);\n}\n.pmr-sidebar-entry[data-selected=\"true\"] {\n  background: var(--pmr-accent-soft);\n}\n.pmr-sidebar-entry[data-stale=\"true\"] {\n  opacity: 0.55;\n}\n.pmr-sidebar-path {\n  font-family: var(--pmr-font-mono);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pmr-main {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow-y: auto;\n  padding: 8px 12px 16px;\n}\n\n.pmr-banner {\n  align-items: center;\n  background: var(--pmr-bg-raised);\n  border: 1px solid var(--pmr-border);\n  border-radius: 6px;\n  display: flex;\n  gap: 8px;\n  margin: 8px 0 6px;\n  padding: 6px 10px;\n}\n.pmr-banner-path {\n  font-family: var(--pmr-font-mono);\n  font-size: 13px;\n  font-weight: 600;\n}\n.pmr-badge {\n  border: 1px solid var(--pmr-border);\n  border-radius: 999px;\n  color: var(--pmr-text-muted);\n  font-size: 10px;\n  padding: 0 6px;\n  text-transform: uppercase;\n}\n.pmr-stale-badge {\n  color: var(--pmr-status-stale);\n  font-size: 10px;\n  text-transform: uppercase;\n}\n\n.pmr-dot {\n  align-items: center;\n  display: inline-flex;\n  flex: none;\n  gap: 3px;\n}\n.pmr-dot::before {\n  border-radius: 50%;\n  content: \"\";\n  display: inline-block;\n  height: 8px;\n  width: 8px;\n}\n.pmr-dot--error::before { background: var(--pmr-status-error); }\n.pmr-dot--ok::before { background: var(--pmr-status-ok); }\n.pmr-dot--pending::before { background: var(--pmr-status-pending); }\n.pmr-dot--stale::before { background: var(--pmr-status-stale); }\n.pmr-dot-glyph {\n  font-size: 10px;\n}\n.pmr-dot--error .pmr-dot-glyph { color: var(--pmr-status-error); }\n.pmr-dot--ok .pmr-dot-glyph { color: var(--pmr-status-ok); }\n.pmr-dot--pending .pmr-dot-glyph { color: var(--pmr-status-pending); }\n.pmr-dot--stale .pmr-dot-glyph { color: var(--pmr-status-stale); }\n\n.pmr-section-title {\n  color: var(--pmr-text-muted);\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  margin: 10px 0 2px;\n  text-transform: uppercase;\n}\n.pmr-table {\n  border-collapse: collapse;\n  width: 100%;\n}\n.pmr-table th {\n  border-bottom: 1px solid var(--pmr-border);\n  color: var(--pmr-text-muted);\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 8px 2px 0;\n  text-align: left;\n  text-transform: uppercase;\n}\n.pmr-table td {\n  border-bottom: 1px solid var(--pmr-border);\n  height: 22px;\n  padding: 2px 8px 2px 0;\n  vertical-align: middle;\n}\n.pmr-mono {\n  font-family: var(--pmr-font-mono);\n}\n.pmr-muted {\n  color: var(--pmr-text-muted);\n}\n@keyframes pmr-flash {\n  from { background-color: var(--pmr-accent-soft); }\n  to { background-color: transparent; }\n}\n.pmr-flash {\n  animation: pmr-flash var(--pmr-flash-duration) ease-out;\n}\n.pmr-tag {\n  border: 1px solid var(--pmr-border);\n  border-radius: 3px;\n  color: var(--pmr-text-muted);\n  font-size: 10px;\n  padding: 0 4px;\n}\n\n.pmr-input,\n.pmr-select,\n.pmr-textarea {\n  background: var(--pmr-bg);\n  border: 1px solid var(--pmr-border);\n  border-radius: 4px;\n  color: var(--pmr-text);\n  font-family: var(--pmr-font-mono);\n  font-size: 11px;\n  max-width: 180px;\n  padding: 1px 4px;\n  width: 100%;\n}\n.pmr-textarea {\n  min-height: 34px;\n  resize: vertical;\n}\n.pmr-input:focus,\n.pmr-select:focus,\n.pmr-textarea:focus {\n  border-color: var(--pmr-accent);\n  outline: none;\n}\n.pmr-icon-button {\n  background: none;\n  border: 1px solid var(--pmr-border);\n  border-radius: 4px;\n  color: var(--pmr-text-muted);\n  cursor: pointer;\n  font: inherit;\n  font-size: 10px;\n  padding: 1px 6px;\n}\n.pmr-icon-button:hover {\n  border-color: var(--pmr-accent);\n  color: var(--pmr-text);\n}\n.pmr-icon-button[data-active=\"true\"] {\n  border-color: var(--pmr-accent);\n  color: var(--pmr-accent);\n}\n.pmr-preview {\n  font-family: var(--pmr-font-mono);\n  font-size: 10px;\n}\n.pmr-preview--error {\n  color: var(--pmr-status-error);\n}\n.pmr-preview--ok {\n  color: var(--pmr-text-muted);\n}\n\n.pmr-issues {\n  border: 1px solid var(--pmr-status-error);\n  border-radius: 6px;\n  margin-top: 10px;\n  padding: 6px 10px;\n}\n.pmr-issues .pmr-section-title {\n  color: var(--pmr-status-error);\n  margin-top: 0;\n}\n\n.pmr-empty {\n  color: var(--pmr-text-muted);\n  font-style: italic;\n  margin: auto;\n  padding: 24px;\n  text-align: center;\n}\n\n.pmr-toolbar {\n  display: flex;\n  gap: 4px;\n  margin-left: auto;\n}\n";