react-reinspect 0.1.8 → 0.1.9

package/dist/lib/index.js

@@ -1,67 +1,104 @@
 "use client";
-import { a as e, c as t, i as n, l as r, o as i, r as a, s as o, t as s } from "./wrap-8xVFW-im.js";
-import { useCallback as c, useContext as l, useEffect as u, useMemo as d, useReducer as f, useRef as p, useState as m } from "react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { _ as e, a as t, b as n, c as r, d as i, f as a, g as o, h as s, i as c, l, m as u, o as d, p as f, r as p, s as m, t as h, u as g, v as _, x as v, y } from "./wrap-DkOzTshV.js";
+import { useCallback as b, useContext as x, useEffect as S, useMemo as C, useReducer as w, useRef as T, useState as E } from "react";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
 //#region src/reinspect/reinspect.css?inline
-var _ = ".reinspect-shell{border-radius:14px;transition:outline-color .12s;position:relative}.reinspect-shell[data-reinspect-active=true]{outline:2px dashed var(--reinspect-color);outline-offset:2px}.reinspect-content{border-radius:inherit}.reinspect-name-badge{z-index:calc(var(--reinspect-z-base) + 5);letter-spacing:.04em;color:#0f172a;background:color-mix(in srgb, var(--reinspect-color) 25%, white);border:1px solid color-mix(in srgb, var(--reinspect-color) 45%, white);pointer-events:none;white-space:nowrap;border-radius:999px;padding:5px 8px;font-size:11px;line-height:1;position:absolute;top:-14px;left:10px}.reinspect-menu{z-index:2147483647;background:#fff;border:1px solid #cbd5e1;border-radius:12px;width:min(300px,100vw - 24px);max-height:min(420px,70vh);padding:12px;position:fixed;overflow:auto;box-shadow:0 20px 25px -5px #0f172a33,0 8px 10px -6px #0f172a33}.reinspect-menu-title{color:#0f172a;margin:0 0 10px;font-size:13px;font-weight:600}.reinspect-menu-component-setting{color:#1e293b;grid-template-columns:1fr auto;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;display:grid}.reinspect-menu-component-setting input[type=checkbox]{width:15px;height:15px}.reinspect-setting-note{color:#64748b;margin:0 0 10px;font-size:11px}.reinspect-submenu{grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;display:grid}.reinspect-submenu button{color:#1e293b;cursor:pointer;background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;padding:6px 8px;font-size:12px}.reinspect-submenu button[data-state=active]{background:#e0f2fe;border-color:#0284c7}.reinspect-menu-grid{gap:9px;display:grid}.reinspect-menu-filter{margin-bottom:10px;position:relative}.reinspect-menu-filter-icon{color:#64748b;pointer-events:none;width:14px;height:14px;position:absolute;top:50%;left:9px;transform:translateY(-50%)}.reinspect-menu-filter-icon svg{width:100%;height:100%;display:block}.reinspect-menu-filter input{border:1px solid #cbd5e1;border-radius:8px;width:100%;padding:5px 7px 5px 30px;font-size:12px}.reinspect-menu-empty-state{color:#64748b;margin:8px 0 0;font-size:12px}.reinspect-field{gap:4px;display:grid}.reinspect-field label{color:#334155;font-size:12px}.reinspect-inline-controls{grid-template-columns:1fr auto;gap:6px;display:grid}.reinspect-inline-controls input,.reinspect-inline-controls button,.reinspect-inline-controls output{font-size:12px}.reinspect-inline-controls input[type=number],.reinspect-inline-controls input[type=text]{border:1px solid #cbd5e1;border-radius:8px;width:100%;padding:5px 7px}.reinspect-inline-controls button{color:#1e293b;cursor:pointer;background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;padding:5px 7px}.reinspect-inline-controls button:disabled{opacity:.45;cursor:default}.reinspect-opacity-controls{grid-template-columns:1fr auto auto;align-items:center}.reinspect-opacity-controls output{color:#475569;text-align:right;min-width:36px}.reinspect-props-panel{gap:8px;display:grid}.reinspect-props-submenu{grid-template-columns:1fr 1fr;gap:6px;display:grid}.reinspect-props-submenu button{color:#1e293b;cursor:pointer;background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;padding:6px 8px;font-size:12px}.reinspect-props-submenu button[data-state=active]{background:#e0f2fe;border-color:#0284c7}.reinspect-props-panel label{color:#334155;font-size:12px}.reinspect-props-table{gap:6px;display:grid}.reinspect-props-header{color:#475569;text-transform:uppercase;letter-spacing:.04em;grid-template-columns:.85fr 1.15fr;gap:8px;font-size:11px;display:grid}.reinspect-props-row{border:1px solid #e2e8f0;border-radius:8px;grid-template-columns:.85fr 1.15fr;align-items:start;gap:8px;padding:6px;display:grid}.reinspect-prop-key{color:#0f172a;word-break:break-word;font-size:12px}.reinspect-prop-cell{min-width:0}.reinspect-prop-cell code{color:#0f172a;word-break:break-word;font-size:11px}.reinspect-prop-missing{color:#94a3b8;font-size:11px}.reinspect-prop-scalar{gap:4px;display:grid}.reinspect-prop-actions{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.reinspect-prop-scalar button,.reinspect-prop-function button,.reinspect-prop-tree summary button{color:#1e293b;cursor:pointer;background:#f8fafc;border:1px solid #cbd5e1;border-radius:7px;justify-self:start;padding:3px 6px;font-size:11px}.reinspect-prop-actions button,.reinspect-prop-json-preview button{color:#1e293b;cursor:pointer;background:#f8fafc;border:1px solid #cbd5e1;border-radius:7px;padding:3px 6px;font-size:11px}.reinspect-prop-tree{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:5px}.reinspect-prop-tree summary{cursor:pointer;color:#1e293b;justify-content:space-between;align-items:center;gap:8px;font-size:11px;display:flex}.reinspect-prop-tree-children{gap:6px;margin-top:6px;display:grid}.reinspect-prop-tree-row{grid-template-columns:.8fr 1.2fr;align-items:start;gap:6px;display:grid}.reinspect-prop-tree-row>code{color:#334155;word-break:break-word;font-size:10px}.reinspect-prop-function{gap:4px;display:grid}.reinspect-prop-function pre{white-space:pre-wrap;word-break:break-word;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;margin:0;padding:6px;font-size:11px;line-height:1.3}.reinspect-prop-json-preview{gap:6px;margin-top:6px;display:grid}.reinspect-prop-json-preview pre{white-space:pre-wrap;word-break:break-word;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;max-height:180px;margin:0;padding:6px;font-size:11px;line-height:1.3;overflow:auto}.reinspect-modal-backdrop{z-index:2147483647;background:#0f172a73;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.reinspect-modal{background:#fff;border:1px solid #cbd5e1;border-radius:12px;gap:8px;width:min(560px,100%);padding:12px;display:grid;box-shadow:0 24px 28px -12px #0f172a40,0 10px 16px -10px #0f172a38}.reinspect-modal textarea,.reinspect-props-panel textarea{resize:vertical;border:1px solid #cbd5e1;border-radius:8px;width:100%;padding:8px;font-family:IBM Plex Mono,SFMono-Regular,monospace;font-size:12px}.reinspect-error{color:#b91c1c;margin:0;font-size:12px}.reinspect-floating-toggle{z-index:2147483647;color:#f8fafc;letter-spacing:.03em;cursor:pointer;background:linear-gradient(120deg,#0f172a,#334155);border:none;border-radius:999px;padding:10px 15px;font-size:13px;font-weight:600;position:fixed;bottom:18px;right:18px;box-shadow:0 10px 18px #0f172a47}.reinspect-floating-root{z-index:2147483645;position:fixed;bottom:18px;right:18px}.reinspect-floating-root .reinspect-floating-toggle{position:static}.reinspect-settings-menu{background:#fff;border:1px solid #cbd5e1;border-radius:12px;gap:10px;width:min(360px,100vw - 24px);max-height:min(540px,75vh);padding:12px;display:grid;position:absolute;bottom:calc(100% + 10px);right:0;overflow:auto;box-shadow:0 24px 28px -12px #0f172a40,0 10px 16px -10px #0f172a38}.reinspect-settings-title{color:#0f172a;margin:0;font-size:13px;font-weight:700}.reinspect-settings-toggle-row{color:#1e293b;grid-template-columns:1fr auto;align-items:center;gap:8px;font-size:12px;display:grid}.reinspect-settings-select-row{gap:6px;font-size:12px;display:grid}.reinspect-settings-select-row select{color:#0f172a;background:#fff;border:1px solid #cbd5e1;border-radius:8px;width:100%;padding:6px 8px;font-size:12px}.reinspect-settings-toggle-label{line-height:1.35}.reinspect-settings-toggle-row input[type=checkbox]{width:16px;height:16px}.reinspect-settings-divider{background:#e2e8f0;height:1px}.reinspect-setting-block{gap:8px;display:grid}.reinspect-apply-button{color:#f8fafc;cursor:pointer;background:#0f172a;border:1px solid #0f172a;border-radius:8px;padding:6px 8px;font-size:12px;font-weight:600}.reinspect-apply-button:disabled{opacity:.4;cursor:default}.reinspect-setting-header{grid-template-columns:1fr auto;align-items:start;gap:8px;display:grid}.reinspect-setting-name{color:#0f172a;letter-spacing:.02em;margin:0;font-size:12px;font-weight:700}.reinspect-setting-short-description{color:#475569;margin:3px 0 0;font-size:12px;line-height:1.35}.reinspect-tooltip-host{display:inline-flex;position:relative}.reinspect-tooltip-trigger{color:#334155;cursor:help;background:#f8fafc;border:1px solid #cbd5e1;border-radius:999px;justify-content:center;align-items:center;width:20px;height:20px;padding:0;font-size:12px;font-weight:700;display:inline-flex}.reinspect-tooltip-content{color:#f8fafc;opacity:0;pointer-events:none;background:#0f172a;border:1px solid #cbd5e1;border-radius:8px;width:240px;padding:8px;font-size:11px;line-height:1.4;transition:opacity .12s;position:absolute;top:calc(100% + 6px);right:0}.reinspect-tooltip-host:hover .reinspect-tooltip-content,.reinspect-tooltip-host:focus-within .reinspect-tooltip-content{opacity:1;pointer-events:auto}.reinspect-setting-subheading{color:#334155;margin:2px 0 0;font-size:12px;font-weight:600}.reinspect-setting-empty-state{color:#64748b;margin:0;font-size:12px}.reinspect-component-settings-list{gap:6px;display:grid}.reinspect-component-setting-row{color:#1e293b;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:6px 8px;font-size:12px;display:grid}.reinspect-component-setting-row input[type=checkbox]{width:15px;height:15px}", v = "reinspect-runtime-styles";
-function y() {
+var k = ":root{--reinspect-font-sans:\"Geist Sans\", \"Geist\", \"Segoe UI\", \"SF Pro Text\", system-ui, -apple-system, sans-serif;--reinspect-font-mono:\"Geist Mono\", \"IBM Plex Mono\", \"SFMono-Regular\", Menlo, Consolas, monospace;--reinspect-menu-bg:oklch(98.2% .014 252);--reinspect-menu-surface:oklch(96.5% .018 252);--reinspect-menu-surface-strong:oklch(93.6% .024 252);--reinspect-menu-surface-stronger:oklch(90.2% .03 252);--reinspect-menu-text:oklch(20.5% .028 252);--reinspect-menu-text-muted:oklch(36.5% .024 252);--reinspect-menu-text-soft:oklch(49% .02 252);--reinspect-menu-border:oklch(66% .024 252/.52);--reinspect-menu-border-strong:oklch(57% .03 252/.65);--reinspect-menu-border-subtle:oklch(73% .02 252/.5);--reinspect-brand-400:oklch(73% .145 254);--reinspect-brand-500:oklch(66% .165 254);--reinspect-brand-600:oklch(58% .165 254);--reinspect-brand-700:oklch(51% .153 254);--reinspect-brand-soft:color-mix(in oklch, var(--reinspect-brand-500) 18%, var(--reinspect-menu-surface));--reinspect-brand-soft-strong:color-mix(in oklch, var(--reinspect-brand-500) 28%, var(--reinspect-menu-surface));--reinspect-brand-soft-hover:color-mix(in oklch, var(--reinspect-brand-500) 36%, var(--reinspect-menu-surface));--reinspect-on-brand:oklch(98.5% .008 252);--reinspect-interactive-bg:var(--reinspect-menu-surface);--reinspect-interactive-bg-hover:var(--reinspect-menu-surface-strong);--reinspect-interactive-bg-active:var(--reinspect-brand-soft-hover);--reinspect-interactive-border:var(--reinspect-menu-border);--reinspect-interactive-border-hover:var(--reinspect-brand-400);--reinspect-interactive-border-active:var(--reinspect-brand-500);--reinspect-interactive-text:var(--reinspect-menu-text);--reinspect-interactive-text-active:var(--reinspect-brand-700);--reinspect-prism-bg:color-mix(in oklch, var(--reinspect-menu-surface-strong) 74%, white);--reinspect-prism-text:var(--reinspect-menu-text);--reinspect-prism-comment:var(--reinspect-menu-text-soft);--reinspect-prism-keyword:var(--reinspect-brand-700);--reinspect-prism-string:color-mix(in oklch, var(--reinspect-semantic-error) 70%, var(--reinspect-menu-text));--reinspect-prism-number:color-mix(in oklch, var(--reinspect-semantic-success) 76%, var(--reinspect-menu-text));--reinspect-prism-boolean:var(--reinspect-prism-keyword);--reinspect-prism-function:color-mix(in oklch, var(--reinspect-semantic-warning) 72%, var(--reinspect-menu-text));--reinspect-prism-property:color-mix(in oklch, var(--reinspect-brand-600) 74%, var(--reinspect-menu-text));--reinspect-prism-operator:var(--reinspect-menu-text);--reinspect-prism-punctuation:var(--reinspect-menu-text);--reinspect-prism-constant:color-mix(in oklch, var(--reinspect-brand-500) 78%, var(--reinspect-menu-text));--reinspect-semantic-error:oklch(62% .165 20);--reinspect-semantic-success:oklch(67% .115 158);--reinspect-semantic-warning:oklch(76% .12 78);--reinspect-focus-ring:color-mix(in oklch, var(--reinspect-brand-500) 70%, white);--reinspect-runtime-soft-mix:22%;--reinspect-runtime-border-mix:54%;--reinspect-runtime-strong-mix:78%;--reinspect-runtime-border-base:var(--reinspect-menu-border-strong);--reinspect-runtime-strong-base:var(--reinspect-menu-text);--reinspect-overlay-backdrop:oklch(24.5% .02 248/.44);--reinspect-shadow-popover:0 28px 44px -18px oklch(25.5% .02 248/.38), 0 10px 20px -12px oklch(25.5% .02 248/.3);--reinspect-shadow-modal:0 24px 28px -12px oklch(25.5% .02 248/.25), 0 10px 16px -10px oklch(25.5% .02 248/.22)}.reinspect-menu[data-reinspect-theme=dark],.reinspect-settings-menu[data-reinspect-theme=dark],.reinspect-modal-backdrop[data-reinspect-theme=dark],.reinspect-modal[data-reinspect-theme=dark],.reinspect-toast[data-reinspect-theme=dark],.reinspect-floating-root[data-reinspect-theme=dark],.reinspect-floating-toggle[data-reinspect-theme=dark]{--reinspect-menu-bg:oklch(19% .018 252);--reinspect-menu-surface:oklch(22.8% .022 252);--reinspect-menu-surface-strong:oklch(27.2% .025 252);--reinspect-menu-surface-stronger:oklch(32.2% .028 252);--reinspect-menu-text:oklch(96.5% .012 252);--reinspect-menu-text-muted:oklch(84% .018 252);--reinspect-menu-text-soft:oklch(73% .017 252);--reinspect-menu-border:oklch(54% .022 252/.55);--reinspect-menu-border-strong:oklch(63% .022 252/.72);--reinspect-menu-border-subtle:oklch(48% .018 252/.52);--reinspect-focus-ring:color-mix(in oklch, var(--reinspect-brand-400) 82%, black);--reinspect-runtime-soft-mix:28%;--reinspect-runtime-border-mix:48%;--reinspect-runtime-strong-mix:74%;--reinspect-runtime-border-base:var(--reinspect-menu-border);--reinspect-runtime-strong-base:var(--reinspect-menu-text);--reinspect-overlay-backdrop:oklch(14.5% .01 248/.58);--reinspect-shadow-popover:0 28px 44px -18px oklch(11% .01 248/.68), 0 10px 20px -12px oklch(11% .01 248/.58);--reinspect-shadow-modal:0 24px 28px -12px oklch(11% .01 248/.62), 0 10px 16px -10px oklch(11% .01 248/.54);--reinspect-interactive-bg:oklch(25.8% .023 252);--reinspect-interactive-bg-hover:oklch(31% .03 252);--reinspect-interactive-bg-active:color-mix(in oklch, var(--reinspect-brand-500) 42%, var(--reinspect-menu-surface-stronger));--reinspect-interactive-border:var(--reinspect-menu-border-strong);--reinspect-interactive-border-hover:var(--reinspect-brand-400);--reinspect-interactive-border-active:var(--reinspect-brand-400);--reinspect-interactive-text:var(--reinspect-menu-text);--reinspect-interactive-text-active:oklch(96.6% .014 252);--reinspect-prism-bg:color-mix(in oklch, var(--reinspect-menu-surface) 88%, black);--reinspect-prism-text:var(--reinspect-menu-text);--reinspect-prism-comment:color-mix(in oklch, var(--reinspect-menu-text-soft) 82%, white);--reinspect-prism-keyword:var(--reinspect-brand-400);--reinspect-prism-string:color-mix(in oklch, var(--reinspect-semantic-warning) 56%, var(--reinspect-menu-text));--reinspect-prism-number:color-mix(in oklch, var(--reinspect-semantic-success) 62%, var(--reinspect-menu-text));--reinspect-prism-boolean:var(--reinspect-prism-keyword);--reinspect-prism-function:color-mix(in oklch, var(--reinspect-semantic-warning) 64%, var(--reinspect-menu-text));--reinspect-prism-property:color-mix(in oklch, var(--reinspect-brand-400) 70%, var(--reinspect-menu-text));--reinspect-prism-operator:var(--reinspect-menu-text);--reinspect-prism-punctuation:var(--reinspect-menu-text);--reinspect-prism-constant:color-mix(in oklch, var(--reinspect-brand-400) 84%, var(--reinspect-menu-text))}.reinspect-shell,.reinspect-menu{--reinspect-runtime-color:var(--reinspect-color,var(--reinspect-brand-500));--reinspect-runtime-soft:color-mix(in oklch, var(--reinspect-runtime-color) var(--reinspect-runtime-soft-mix), var(--reinspect-menu-surface));--reinspect-runtime-border:color-mix(in oklch, var(--reinspect-runtime-color) var(--reinspect-runtime-border-mix), var(--reinspect-runtime-border-base));--reinspect-runtime-strong:color-mix(in oklch, var(--reinspect-runtime-color) var(--reinspect-runtime-strong-mix), var(--reinspect-runtime-strong-base))}.reinspect-menu,.reinspect-settings-menu,.reinspect-modal,.reinspect-floating-toggle{font-family:var(--reinspect-font-sans)}.reinspect-menu,.reinspect-settings-menu,.reinspect-modal{color:var(--reinspect-menu-text)}.reinspect-menu[data-reinspect-theme=light],.reinspect-settings-menu[data-reinspect-theme=light],.reinspect-modal-backdrop[data-reinspect-theme=light],.reinspect-modal[data-reinspect-theme=light],.reinspect-toast[data-reinspect-theme=light],.reinspect-floating-root[data-reinspect-theme=light],.reinspect-floating-toggle[data-reinspect-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}.reinspect-menu[data-reinspect-theme=dark],.reinspect-settings-menu[data-reinspect-theme=dark],.reinspect-modal-backdrop[data-reinspect-theme=dark],.reinspect-modal[data-reinspect-theme=dark],.reinspect-toast[data-reinspect-theme=dark],.reinspect-floating-root[data-reinspect-theme=dark],.reinspect-floating-toggle[data-reinspect-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.reinspect-shell{will-change:box-shadow;border-radius:14px;transition:box-shadow .18s ease-out,filter .18s ease-out;position:relative}.reinspect-shell[data-reinspect-active=true]{box-shadow:0 0 0 1px color-mix(in oklch, var(--reinspect-runtime-color) 62%, var(--reinspect-menu-bg)), 0 0 0 4px color-mix(in oklch, var(--reinspect-runtime-color) 16%, transparent), 0 10px 18px -16px color-mix(in oklch, var(--reinspect-runtime-color) 48%, var(--reinspect-menu-text));filter:saturate(1.03)}.reinspect-shell[data-reinspect-active=true]:hover{box-shadow:0 0 0 1px color-mix(in oklch, var(--reinspect-runtime-color) 74%, var(--reinspect-menu-bg)), 0 0 0 5px color-mix(in oklch, var(--reinspect-runtime-color) 22%, transparent), 0 14px 24px -18px color-mix(in oklch, var(--reinspect-runtime-color) 52%, var(--reinspect-menu-text))}.reinspect-shell[data-reinspect-active=true]:focus-within{box-shadow:0 0 0 1px color-mix(in oklch, var(--reinspect-runtime-color) 78%, var(--reinspect-menu-bg)), 0 0 0 2px color-mix(in oklch, var(--reinspect-runtime-color) 34%, transparent), 0 0 0 6px color-mix(in oklch, var(--reinspect-runtime-color) 20%, transparent), 0 16px 28px -20px color-mix(in oklch, var(--reinspect-runtime-color) 52%, var(--reinspect-menu-text))}.reinspect-content{border-radius:inherit}.reinspect-name-badge{z-index:calc(var(--reinspect-z-base) + 5);letter-spacing:.04em;color:var(--reinspect-runtime-strong);background:var(--reinspect-runtime-soft);border:1px solid var(--reinspect-runtime-border);opacity:.9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;white-space:nowrap;border-radius:999px;padding:4px 8px;font-size:11px;line-height:1;position:absolute;top:-13px;left:10px;box-shadow:0 8px 16px -14px oklch(25.5% .02 248/.45)}.reinspect-menu{z-index:2147483647;border:1px solid var(--reinspect-menu-border);background:var(--reinspect-menu-bg);width:min(560px,100vw - 24px);max-height:min(620px,82vh);box-shadow:var(--reinspect-shadow-popover);overscroll-behavior:contain;border-radius:16px;gap:10px;padding:12px;display:grid;position:fixed;overflow:auto}.reinspect-menu-title{color:var(--reinspect-menu-text);letter-spacing:-.014em;margin:0;font-size:19px;font-weight:760;line-height:1.1}.reinspect-menu-title-row{align-items:center;gap:8px;min-width:0;display:inline-flex}.reinspect-menu-title-color-chip{border:1px solid color-mix(in oklab, var(--reinspect-color) 65%, black 35%);background:var(--reinspect-color);border-radius:3px;flex:none;width:10px;height:10px}.reinspect-menu-title-wrap{gap:3px;min-width:0;display:grid}.reinspect-menu-subtitle{color:var(--reinspect-menu-text-soft);margin:0;font-size:12px;font-weight:560;line-height:1.2}.reinspect-menu-header{grid-template-columns:1fr auto;align-items:start;gap:10px;display:grid}.reinspect-menu-close{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-menu-surface);width:32px;height:32px;color:var(--reinspect-menu-text);cursor:pointer;border-radius:10px;place-items:center;padding:0;font-size:20px;line-height:1;display:grid}.reinspect-menu-close:hover{background:var(--reinspect-menu-surface-strong);border-color:var(--reinspect-menu-border-strong)}.reinspect-menu-close:focus-visible{outline:2px solid var(--reinspect-focus-ring);outline-offset:1px}.reinspect-setting-note{color:var(--reinspect-menu-text-muted);margin:0 0 10px;font-size:12px}.reinspect-setting-helper-text{color:var(--reinspect-menu-text-muted);margin:0;font-size:12px;line-height:1.4}.reinspect-submenu{border:1px solid var(--reinspect-menu-border-subtle);background:var(--reinspect-menu-surface);isolation:isolate;border-radius:11px;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:4px;display:grid;overflow:hidden}.reinspect-submenu button{border:1px solid var(--reinspect-interactive-border);background:var(--reinspect-interactive-bg);color:var(--reinspect-interactive-text);cursor:pointer;white-space:nowrap;opacity:1;border-radius:8px;padding:7px 8px;font-size:12px;font-weight:640;transition:opacity .14s ease-out,transform .14s ease-out,box-shadow .14s ease-out,border-color .14s ease-out,background-color .14s ease-out}.reinspect-submenu button:hover{border-color:var(--reinspect-interactive-border-hover);background:var(--reinspect-interactive-bg-hover)}.reinspect-submenu button[data-state=active]{border-color:var(--reinspect-interactive-border-active);background:var(--reinspect-interactive-bg-active);color:var(--reinspect-interactive-text-active);box-shadow:0 0 0 1px color-mix(in oklch, var(--reinspect-brand-500) 35%, transparent), 0 8px 14px -14px oklch(25.5% .02 248/.38);z-index:1;transform:translateY(-1px)}.reinspect-submenu button:focus-visible{outline:2px solid var(--reinspect-focus-ring);outline-offset:0}@media (prefers-reduced-motion:reduce){.reinspect-shell,.reinspect-submenu button,.reinspect-menu-action-card{transition:none}.reinspect-menu-action-card[data-state=active]:after{animation:none}}.reinspect-menu-shortcuts{gap:8px;margin-bottom:0;display:grid}.reinspect-menu-action-card{border:1px solid var(--reinspect-interactive-border);background:var(--reinspect-interactive-bg);color:var(--reinspect-interactive-text);text-align:left;cursor:pointer;border-radius:12px;gap:4px;padding:9px 10px;font-size:12px;transition:border-color .12s,box-shadow .12s,background-color .12s,transform .12s;display:grid;position:relative}.reinspect-menu-action-card:hover{border-color:var(--reinspect-interactive-border-hover);background:var(--reinspect-interactive-bg-hover);box-shadow:0 1px oklch(25.5% .02 248/.08)}.reinspect-menu-action-card:focus-visible{outline:2px solid var(--reinspect-focus-ring);outline-offset:1px}.reinspect-menu-action-card[data-state=active]{border-color:var(--reinspect-interactive-border-active);background:var(--reinspect-interactive-bg-active);color:var(--reinspect-interactive-text-active);box-shadow:0 0 0 1px color-mix(in oklch, var(--reinspect-brand-500) 40%, transparent), 0 8px 18px -14px oklch(25.5% .02 248/.35);transform:translateY(-1px)}.reinspect-menu-action-card[data-state=active]:after{content:\"Selected\";border:1px solid var(--reinspect-interactive-border-active);background:color-mix(in oklch, var(--reinspect-brand-500) 20%, var(--reinspect-menu-surface));color:var(--reinspect-interactive-text-active);letter-spacing:.01em;border-radius:999px;padding:2px 6px;font-size:9px;font-weight:700;line-height:1;animation:.56s cubic-bezier(.22,1,.36,1) reinspect-selected-pulse;position:absolute;top:8px;right:10px}@keyframes reinspect-selected-pulse{0%{opacity:.72;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.reinspect-menu-action-title{font-weight:700}.reinspect-menu-action-description{color:var(--reinspect-menu-text-muted);font-size:11px;line-height:1.35}.reinspect-menu-action-target{font-family:var(--reinspect-font-mono);color:var(--reinspect-menu-text-muted);white-space:normal;word-break:break-word;font-size:11px}.reinspect-general-panel{gap:10px;display:grid}.reinspect-general-panel .reinspect-setting-note{margin:0}.reinspect-menu-section{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-menu-bg);border-radius:12px;gap:7px;padding:10px;display:grid}.reinspect-menu-section-header,.reinspect-menu-panel-header{grid-template-columns:1fr auto;align-items:center;gap:8px;display:grid}.reinspect-menu-section-title{color:var(--reinspect-menu-text);letter-spacing:.01em;margin:0;font-size:13px;font-weight:700}.reinspect-menu-section-description{color:var(--reinspect-menu-text-muted);margin:0;font-size:12px;line-height:1.4}.reinspect-menu-section-caption{color:var(--reinspect-menu-text-muted);font-family:var(--reinspect-font-mono);margin:0;font-size:10px}.reinspect-menu-switch{justify-self:end}.reinspect-menu-switch:disabled{opacity:.7;cursor:default}.reinspect-menu-divider{background:var(--reinspect-menu-border);height:1px}.reinspect-menu-inline-setting{grid-template-columns:1fr auto;align-items:center;gap:8px;display:grid}.reinspect-menu-inline-copy{gap:2px;display:grid}.reinspect-menu-inline-title{color:var(--reinspect-menu-text);margin:0;font-size:12px;font-weight:700}.reinspect-menu-inline-description{color:var(--reinspect-menu-text-muted);margin:0;font-size:12px;line-height:1.35}.reinspect-css-panel{gap:9px;display:grid}.reinspect-menu-grid{gap:8px;display:grid}.reinspect-menu-filter{align-items:center;display:grid;position:relative}.reinspect-menu-filter-icon{color:var(--reinspect-menu-text-soft);pointer-events:none;width:14px;height:14px;position:absolute;top:50%;left:9px;transform:translateY(-50%)}.reinspect-menu-filter-icon svg{width:100%;height:100%;display:block}.reinspect-menu-filter input{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-menu-bg);width:100%;color:var(--reinspect-menu-text);border-radius:10px;padding:7px 52px 7px 30px;font-size:12px}.reinspect-menu-filter input::placeholder,.reinspect-filter-search-input::placeholder{color:var(--reinspect-menu-text-soft);opacity:1}.reinspect-menu-filter input:focus-visible{outline:2px solid var(--reinspect-focus-ring);outline-offset:0}.reinspect-menu-filter-clear{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-menu-surface);color:var(--reinspect-menu-text);cursor:pointer;border-radius:7px;padding:4px 6px;font-size:10px;font-weight:600;line-height:1;position:absolute;right:6px}.reinspect-menu-filter-clear:hover{border-color:var(--reinspect-brand-400);background:var(--reinspect-brand-soft)}.reinspect-menu-filter-clear:focus-visible{outline:2px solid var(--reinspect-focus-ring);outline-offset:1px}.reinspect-menu-empty-state{border:1px dashed var(--reinspect-menu-border);background:var(--reinspect-brand-soft);color:var(--reinspect-menu-text-muted);border-radius:10px;margin:0;padding:8px 10px;font-size:11px}.reinspect-field{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-menu-bg);border-radius:10px;gap:5px;padding:8px;display:grid}.reinspect-field label{color:var(--reinspect-menu-text);font-size:11px;font-weight:640}.reinspect-inline-controls{grid-template-columns:1fr auto;gap:6px;display:grid}.reinspect-inline-controls input,.reinspect-inline-controls button,.reinspect-inline-controls output{font-size:12px}.reinspect-inline-controls input[type=number],.reinspect-inline-controls input[type=text]{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-menu-bg);width:100%;color:var(--reinspect-menu-text);border-radius:8px;padding:6px 8px}.reinspect-inline-controls input[type=color]{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-menu-bg);border-radius:8px;width:100%;min-height:32px;padding:2px}.reinspect-inline-controls input[type=range]{width:100%}.reinspect-inline-controls input:focus-visible{outline:2px solid var(--reinspect-focus-ring);outline-offset:0}.reinspect-inline-controls button{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-menu-surface);color:var(--reinspect-menu-text);cursor:pointer;border-radius:8px;padding:6px 8px;font-weight:600}.reinspect-inline-controls button:hover{border-color:var(--reinspect-brand-400);background:var(--reinspect-brand-soft-strong)}.reinspect-inline-controls button:focus-visible{outline:2px solid var(--reinspect-focus-ring);outline-offset:1px}.reinspect-inline-controls button:disabled{opacity:.45;cursor:default}.reinspect-opacity-controls{grid-template-columns:1fr auto auto;align-items:center}.reinspect-opacity-controls output{color:var(--reinspect-menu-text);text-align:right;min-width:36px}.reinspect-props-panel{gap:6px;display:grid}.reinspect-props-submenu{border:1px solid var(--reinspect-menu-border-subtle);background:var(--reinspect-menu-surface);border-radius:10px;grid-template-columns:1fr 1fr;gap:4px;padding:3px;display:grid}.reinspect-props-submenu button{border:1px solid var(--reinspect-interactive-border);background:var(--reinspect-interactive-bg);color:var(--reinspect-interactive-text);cursor:pointer;opacity:1;border-radius:7px;padding:5px 8px;font-size:12px;font-weight:600;transition:opacity .12s ease-out,background-color .12s ease-out,border-color .12s ease-out}.reinspect-props-submenu button:hover{border-color:var(--reinspect-interactive-border-hover);background:var(--reinspect-interactive-bg-hover)}.reinspect-props-submenu button[data-state=active]{border-color:var(--reinspect-interactive-border-active);background:var(--reinspect-interactive-bg-active);color:var(--reinspect-interactive-text-active)}.reinspect-props-submenu button:focus-visible{outline:2px solid var(--reinspect-focus-ring);outline-offset:0}.reinspect-props-panel label{color:var(--reinspect-menu-text-muted);font-size:12px}.reinspect-props-table{border:1px solid var(--reinspect-menu-border-subtle);background:var(--reinspect-menu-bg);border-radius:10px;display:grid;overflow:hidden}.reinspect-props-row{grid-template-columns:minmax(90px,.55fr) minmax(0,1.45fr);align-items:start;gap:10px;padding:8px 9px;display:grid}.reinspect-props-row+.reinspect-props-row{border-top:1px solid var(--reinspect-menu-border-subtle)}.reinspect-prop-key{color:var(--reinspect-menu-text);word-break:break-word;font-size:12px;font-weight:600}.reinspect-prop-cell{gap:4px;min-width:0;display:grid}.reinspect-prop-main{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;display:grid}.reinspect-prop-value-render{min-width:0}.reinspect-prop-cell code{font-size:11px;font-family:var(--reinspect-font-mono);color:var(--reinspect-menu-text);word-break:normal;overflow-wrap:break-word}.reinspect-prop-missing{color:var(--reinspect-menu-text-soft);font-size:11px}.reinspect-prop-scalar{gap:3px;display:grid}.reinspect-prop-actions{flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:4px;margin-top:0;display:flex}.reinspect-prop-scalar button,.reinspect-prop-function button,.reinspect-prop-tree summary button{color:var(--reinspect-menu-text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-self:start;padding:2px 4px;font-size:11px;font-weight:600}.reinspect-prop-action-text-button{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-brand-soft);color:var(--reinspect-brand-700);letter-spacing:.01em;cursor:pointer;white-space:nowrap;border-radius:6px;padding:2px 6px;font-size:10px;font-weight:700;line-height:1.4}.reinspect-prop-action-text-button:hover{border-color:var(--reinspect-brand-400);background:var(--reinspect-brand-soft-strong);color:var(--reinspect-brand-700)}.reinspect-prop-action-text-button:focus-visible{outline:2px solid var(--reinspect-focus-ring);outline-offset:1px}.reinspect-prop-actions button,.reinspect-prop-json-preview button{color:var(--reinspect-menu-text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:2px 4px;font-size:11px;font-weight:600}.reinspect-icon-button{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-brand-soft);width:24px;height:24px;color:var(--reinspect-brand-700);cursor:pointer;border-radius:6px;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.reinspect-icon-button svg{width:14px;height:14px;display:block}.reinspect-prop-scalar button:hover,.reinspect-prop-function button:hover,.reinspect-prop-tree summary button:hover,.reinspect-prop-actions button:hover,.reinspect-prop-json-preview button:hover{background:var(--reinspect-brand-soft);color:var(--reinspect-brand-700)}.reinspect-icon-button:hover{border-color:var(--reinspect-brand-400);background:var(--reinspect-brand-soft-strong)}.reinspect-prop-scalar button:focus-visible,.reinspect-prop-function button:focus-visible,.reinspect-prop-tree summary button:focus-visible,.reinspect-prop-actions button:focus-visible,.reinspect-prop-json-preview button:focus-visible{outline:2px solid var(--reinspect-focus-ring);outline-offset:1px}.reinspect-icon-button:disabled{opacity:.45;cursor:default}.reinspect-prop-tree{border:1px solid var(--reinspect-menu-border-subtle);background:var(--reinspect-brand-soft);border-radius:8px;padding:5px}.reinspect-prop-tree summary{cursor:pointer;color:var(--reinspect-menu-text);justify-content:space-between;align-items:center;gap:8px;font-size:11px;display:flex}.reinspect-prop-tree-children{gap:6px;margin-top:6px;display:grid}.reinspect-prop-tree-row{grid-template-columns:.8fr 1.2fr;align-items:start;gap:6px;display:grid}.reinspect-prop-tree-row>code{font-size:10px;font-family:var(--reinspect-font-mono);color:var(--reinspect-menu-text-muted);word-break:break-word}.reinspect-prop-function{gap:4px;display:grid}.reinspect-prop-function pre{border:1px solid var(--reinspect-menu-border-subtle);background:var(--reinspect-prism-bg);white-space:pre-wrap;word-break:break-word;border-radius:8px;margin:0;padding:6px;font-size:11px;line-height:1.3}.reinspect-prop-json-preview{gap:6px;margin-top:6px;display:grid}.reinspect-json-editor{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-prism-bg);border-radius:8px;display:grid;overflow:hidden}.reinspect-json-editor pre,.reinspect-json-editor textarea{font-size:12px;line-height:1.4;font-family:var(--reinspect-font-mono);white-space:pre;word-break:normal;grid-area:1/1;margin:0;padding:8px}.reinspect-json-editor pre{pointer-events:none;overflow:auto}.reinspect-props-panel .reinspect-json-editor .reinspect-json-editor-textarea{color:#0000;width:100%;caret-color:var(--reinspect-prism-text);resize:vertical;tab-size:2;background:0 0;border:none;border-radius:0;overflow:auto}.reinspect-props-panel .reinspect-json-editor .reinspect-json-editor-textarea:focus-visible{outline:none}.reinspect-json-editor:focus-within{box-shadow:0 0 0 2px var(--reinspect-focus-ring)}.reinspect-prop-json-preview pre{border:1px solid var(--reinspect-menu-border-subtle);background:var(--reinspect-prism-bg);white-space:pre-wrap;word-break:break-word;border-radius:8px;max-height:180px;margin:0;padding:6px;font-size:11px;line-height:1.3;overflow:auto}.reinspect-prop-function pre code.reinspect-code-block,.reinspect-prop-json-preview pre code.reinspect-code-block,.reinspect-json-editor pre code.reinspect-code-block{color:var(--reinspect-prism-text);font-family:var(--reinspect-font-mono);white-space:inherit;word-break:inherit;display:block}.reinspect-prop-function pre code.reinspect-code-block .token.comment,.reinspect-prop-function pre code.reinspect-code-block .token.prolog,.reinspect-prop-function pre code.reinspect-code-block .token.doctype,.reinspect-prop-function pre code.reinspect-code-block .token.cdata,.reinspect-prop-json-preview pre code.reinspect-code-block .token.comment,.reinspect-prop-json-preview pre code.reinspect-code-block .token.prolog,.reinspect-prop-json-preview pre code.reinspect-code-block .token.doctype,.reinspect-prop-json-preview pre code.reinspect-code-block .token.cdata,.reinspect-json-editor pre code.reinspect-code-block .token.comment,.reinspect-json-editor pre code.reinspect-code-block .token.prolog,.reinspect-json-editor pre code.reinspect-code-block .token.doctype,.reinspect-json-editor pre code.reinspect-code-block .token.cdata{color:var(--reinspect-prism-comment);font-style:italic}.reinspect-prop-function pre code.reinspect-code-block .token.punctuation,.reinspect-prop-json-preview pre code.reinspect-code-block .token.punctuation,.reinspect-json-editor pre code.reinspect-code-block .token.punctuation{color:var(--reinspect-prism-punctuation)}.reinspect-prop-function pre code.reinspect-code-block .token.property,.reinspect-prop-json-preview pre code.reinspect-code-block .token.property,.reinspect-json-editor pre code.reinspect-code-block .token.property{color:var(--reinspect-prism-property)}.reinspect-prop-function pre code.reinspect-code-block .token.string,.reinspect-prop-json-preview pre code.reinspect-code-block .token.string,.reinspect-prop-function pre code.reinspect-code-block .token.char,.reinspect-prop-json-preview pre code.reinspect-code-block .token.char,.reinspect-prop-function pre code.reinspect-code-block .token.regex,.reinspect-prop-json-preview pre code.reinspect-code-block .token.regex,.reinspect-json-editor pre code.reinspect-code-block .token.string,.reinspect-json-editor pre code.reinspect-code-block .token.char,.reinspect-json-editor pre code.reinspect-code-block .token.regex{color:var(--reinspect-prism-string)}.reinspect-prop-function pre code.reinspect-code-block .token.number,.reinspect-prop-json-preview pre code.reinspect-code-block .token.number,.reinspect-json-editor pre code.reinspect-code-block .token.number{color:var(--reinspect-prism-number)}.reinspect-prop-function pre code.reinspect-code-block .token.boolean,.reinspect-prop-json-preview pre code.reinspect-code-block .token.boolean,.reinspect-json-editor pre code.reinspect-code-block .token.boolean{color:var(--reinspect-prism-boolean)}.reinspect-prop-function pre code.reinspect-code-block .token.keyword,.reinspect-prop-json-preview pre code.reinspect-code-block .token.keyword,.reinspect-json-editor pre code.reinspect-code-block .token.keyword{color:var(--reinspect-prism-keyword)}.reinspect-prop-function pre code.reinspect-code-block .token.function,.reinspect-prop-json-preview pre code.reinspect-code-block .token.function,.reinspect-prop-function pre code.reinspect-code-block .token.function-variable,.reinspect-prop-json-preview pre code.reinspect-code-block .token.function-variable,.reinspect-json-editor pre code.reinspect-code-block .token.function,.reinspect-json-editor pre code.reinspect-code-block .token.function-variable{color:var(--reinspect-prism-function)}.reinspect-prop-function pre code.reinspect-code-block .token.operator,.reinspect-prop-json-preview pre code.reinspect-code-block .token.operator,.reinspect-json-editor pre code.reinspect-code-block .token.operator{color:var(--reinspect-prism-operator)}.reinspect-prop-function pre code.reinspect-code-block .token.constant,.reinspect-prop-json-preview pre code.reinspect-code-block .token.constant,.reinspect-json-editor pre code.reinspect-code-block .token.constant{color:var(--reinspect-prism-constant)}@media (width<=520px){.reinspect-props-row{grid-template-columns:1fr;gap:4px}.reinspect-prop-main{grid-template-columns:1fr;gap:6px}.reinspect-prop-actions{flex-wrap:wrap;justify-content:flex-start}}.reinspect-modal-backdrop{z-index:2147483647;background:var(--reinspect-overlay-backdrop);place-items:center;padding:20px;display:grid;position:fixed;inset:0}.reinspect-modal{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-menu-bg);width:min(560px,100%);box-shadow:var(--reinspect-shadow-modal);border-radius:12px;gap:8px;padding:12px;display:grid}.reinspect-modal textarea,.reinspect-props-panel textarea{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-menu-bg);width:100%;color:var(--reinspect-menu-text);font-size:12px;font-family:var(--reinspect-font-mono);resize:vertical;border-radius:8px;padding:8px}.reinspect-modal textarea::placeholder,.reinspect-props-panel textarea::placeholder{color:var(--reinspect-menu-text-soft);opacity:1}.reinspect-toast{z-index:2147483647;border:1px solid var(--reinspect-menu-border-strong);background:color-mix(in oklch, var(--reinspect-menu-bg) 88%, var(--reinspect-brand-500));width:min(460px,100vw - 20px);box-shadow:var(--reinspect-shadow-modal);border-radius:12px;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 12px;display:grid;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.reinspect-toast-copy{gap:3px;display:grid}.reinspect-toast-title{color:var(--reinspect-menu-text);margin:0;font-size:12px;font-weight:700}.reinspect-toast-description{color:var(--reinspect-menu-text-muted);margin:0;font-size:11px}.reinspect-toast-undo,.reinspect-toast-dismiss{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-menu-bg);color:var(--reinspect-menu-text);cursor:pointer;border-radius:8px}.reinspect-toast-undo{padding:6px 10px;font-size:11px;font-weight:700}.reinspect-toast-dismiss{place-items:center;width:28px;height:28px;padding:0;font-size:16px;line-height:1;display:grid}.reinspect-toast-undo:hover,.reinspect-toast-dismiss:hover{border-color:var(--reinspect-brand-400);background:var(--reinspect-brand-soft)}.reinspect-toast-undo:focus-visible,.reinspect-toast-dismiss:focus-visible{outline:2px solid var(--reinspect-focus-ring);outline-offset:1px}.reinspect-error{color:var(--reinspect-semantic-error);margin:0;font-size:12px}.reinspect-floating-toggle{z-index:2147483647;border:1px solid color-mix(in oklch, var(--reinspect-brand-500) 56%, var(--reinspect-menu-border-strong));background:var(--reinspect-brand-soft);color:var(--reinspect-interactive-text-active);letter-spacing:.03em;cursor:pointer;border-radius:999px;padding:10px 15px;font-size:13px;font-weight:650;transition:background-color .14s,border-color .14s,box-shadow .14s;position:fixed;bottom:18px;right:18px;box-shadow:0 10px 18px -12px oklch(25.5% .02 248/.4),0 2px 8px -6px oklch(25.5% .02 248/.34)}.reinspect-floating-toggle:hover{background:var(--reinspect-brand-soft-hover);border-color:var(--reinspect-brand-500)}.reinspect-floating-toggle:focus-visible{outline:2px solid var(--reinspect-focus-ring);outline-offset:2px}.reinspect-floating-root{z-index:2147483645;position:fixed;bottom:18px;right:18px}.reinspect-floating-root .reinspect-floating-toggle{position:static}.reinspect-settings-menu{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-menu-bg);width:min(420px,100vw - 22px);max-height:min(560px,78vh);box-shadow:var(--reinspect-shadow-modal);border-radius:12px;gap:8px;padding:10px;display:grid;position:absolute;bottom:calc(100% + 10px);right:0;overflow:auto}.reinspect-settings-header-row{grid-template-columns:1fr auto;align-items:center;gap:8px;display:grid}.reinspect-settings-title{color:var(--reinspect-menu-text);margin:0;font-size:14px;font-weight:760}.reinspect-settings-tabs{grid-template-columns:1fr 1fr;gap:6px;display:grid}.reinspect-settings-tabs button{border:1px solid var(--reinspect-interactive-border);background:var(--reinspect-interactive-bg);color:var(--reinspect-interactive-text);cursor:pointer;border-radius:8px;padding:6px 8px;font-size:12px;font-weight:600;transition:border-color .12s ease-out,background-color .12s ease-out,color .12s ease-out}.reinspect-settings-tabs button:hover{border-color:var(--reinspect-interactive-border-hover);background:var(--reinspect-interactive-bg-hover)}.reinspect-settings-tabs button[data-state=active]{border-color:var(--reinspect-interactive-border-active);background:var(--reinspect-interactive-bg-active);color:var(--reinspect-interactive-text-active)}.reinspect-settings-tab-panel{gap:9px;display:grid}.reinspect-settings-toggle-row{color:var(--reinspect-menu-text);grid-template-columns:1fr auto;align-items:center;gap:8px;font-size:12px;display:grid}.reinspect-settings-select-row{gap:5px;font-size:12px;display:grid}.reinspect-settings-select-row select{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-menu-bg);width:100%;color:var(--reinspect-menu-text);border-radius:8px;padding:6px 8px;font-size:12px}.reinspect-settings-toggle-label{font-weight:600;line-height:1.35}.reinspect-settings-inline-switch{grid-template-columns:1fr auto;align-items:center;gap:8px;margin:0;display:grid}.reinspect-settings-toggle-row input[type=checkbox]{width:16px;height:16px}.reinspect-inline-hint{border:1px solid var(--reinspect-menu-border);width:14px;height:14px;color:var(--reinspect-menu-text-soft);vertical-align:text-top;cursor:help;border-radius:999px;justify-content:center;align-items:center;font-size:10px;font-weight:700;display:inline-flex}.reinspect-settings-divider{background:var(--reinspect-menu-border-subtle);height:1px}.reinspect-setting-block{gap:6px;display:grid}.reinspect-macro-setting{border:1px solid var(--reinspect-menu-border-subtle);background:var(--reinspect-menu-surface);border-radius:8px;padding:8px}.reinspect-macro-setting .reinspect-setting-note{margin:0}.reinspect-macro-setting .reinspect-setting-note code{font-family:var(--reinspect-font-mono);font-size:11px}.reinspect-macro-setting .reinspect-inline-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.reinspect-macro-setting .reinspect-inline-controls button[data-state=active]{border-color:var(--reinspect-brand-600);background:var(--reinspect-brand-soft-strong);color:var(--reinspect-brand-700)}.reinspect-apply-button{border:1px solid var(--reinspect-brand-500);background:var(--reinspect-brand-500);color:var(--reinspect-on-brand);cursor:pointer;border-radius:8px;padding:6px 8px;font-size:12px;font-weight:600}.reinspect-apply-button:hover:not(:disabled){border-color:var(--reinspect-brand-600);background:var(--reinspect-brand-600)}.reinspect-apply-button:focus-visible{outline:2px solid var(--reinspect-focus-ring);outline-offset:1px}.reinspect-apply-button:disabled{opacity:.4;cursor:default}.reinspect-filter-title{color:var(--reinspect-menu-text);margin:0;font-size:12px;font-weight:600}.reinspect-setting-empty-state{color:var(--reinspect-menu-text-muted);margin:0;font-size:12px}.reinspect-inspect-mode-actions{grid-template-columns:auto 1fr;align-items:center;gap:8px;display:grid}.reinspect-filter-section{border-top:1px solid var(--reinspect-menu-border-subtle);gap:6px;padding-top:8px;display:grid}.reinspect-filter-row-header{grid-template-columns:1fr auto;align-items:center;gap:6px;display:grid}.reinspect-filter-toolbar{grid-template-columns:1fr auto auto auto auto;align-items:center;gap:6px;display:grid;position:relative}.reinspect-filter-search-icon{width:14px;height:14px;color:var(--reinspect-menu-text-soft);pointer-events:none;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.reinspect-filter-search-icon svg{width:100%;height:100%;display:block}.reinspect-filter-search-input{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-menu-bg);width:100%;color:var(--reinspect-menu-text);font-size:12px;font-family:var(--reinspect-font-mono);border-radius:8px;padding:5px 8px 5px 31px}.reinspect-filter-search-input:focus-visible{outline:2px solid var(--reinspect-focus-ring);outline-offset:0}.reinspect-filter-add-button{border:1px solid var(--reinspect-brand-500);background:var(--reinspect-brand-500);color:var(--reinspect-on-brand);cursor:pointer;border-radius:8px;padding:5px 10px;font-size:11px}.reinspect-filter-add-button:hover:not(:disabled){border-color:var(--reinspect-brand-600);background:var(--reinspect-brand-600)}.reinspect-filter-add-button:focus-visible{outline:2px solid var(--reinspect-focus-ring);outline-offset:1px}.reinspect-filter-add-button:disabled{opacity:.4;cursor:default}.reinspect-filter-modifier{border:1px solid var(--reinspect-interactive-border);background:var(--reinspect-interactive-bg);color:var(--reinspect-interactive-text);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:3px;padding:5px 7px;font-size:11px;font-weight:600;display:inline-flex}.reinspect-filter-modifier:hover{border-color:var(--reinspect-interactive-border-hover);background:var(--reinspect-interactive-bg-hover)}.reinspect-filter-modifier[data-state=active]{border-color:var(--reinspect-interactive-border-active);background:var(--reinspect-interactive-bg-active);color:var(--reinspect-interactive-text-active)}.reinspect-filter-chip-list{flex-wrap:wrap;gap:6px;display:flex}.reinspect-filter-chip{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-menu-bg);color:var(--reinspect-menu-text);border-radius:999px;align-items:center;gap:4px;padding:2px 7px;font-size:11px;display:inline-flex}.reinspect-filter-chip code{font-family:var(--reinspect-font-mono);font-size:11px}.reinspect-filter-chip-remove{color:var(--reinspect-menu-text-soft);cursor:pointer;background:0 0;border:none;padding:0;font-size:14px;line-height:1}.reinspect-filter-clear-button{border:1px solid var(--reinspect-menu-border);background:var(--reinspect-menu-bg);color:var(--reinspect-menu-text);cursor:pointer;border-radius:8px;padding:2px 7px;font-size:11px}.reinspect-filter-clear-button:disabled{opacity:.45;cursor:default}.reinspect-switch-button{border:1px solid var(--reinspect-menu-border-strong);background:var(--reinspect-menu-surface-stronger);cursor:pointer;border-radius:999px;width:34px;height:20px;padding:0;transition:background-color .12s,border-color .12s;display:inline-block;position:relative}.reinspect-switch-button:after{content:\"\";background:var(--reinspect-menu-bg);border-radius:999px;width:16px;height:16px;transition:transform .12s;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px oklch(25.5% .02 248/.2)}.reinspect-switch-button[data-state=on]{background:var(--reinspect-brand-500);border-color:var(--reinspect-brand-600)}.reinspect-switch-button[data-state=on]:after{transform:translate(14px)}.reinspect-switch-button:focus-visible{outline:2px solid var(--reinspect-focus-ring);outline-offset:1px}.reinspect-component-settings-list{gap:6px;display:grid}.reinspect-component-setting-row{border:1px solid var(--reinspect-menu-border-subtle);background:var(--reinspect-menu-surface);color:var(--reinspect-menu-text);border-radius:8px;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:6px 8px;font-size:12px;display:grid}.reinspect-component-setting-row input[type=checkbox]{width:15px;height:15px}", A = "reinspect-runtime-styles";
+function j() {
 	return typeof document > "u" ? null : document;
 }
-function b(e) {
+function M(e) {
 	if (!e) return;
-	let t = y();
-	if (!t || t.getElementById(v)) return;
+	let t = j();
+	if (!t || t.getElementById(A)) return;
 	let n = t.createElement("style");
-	n.id = v, n.textContent = e, (t.head ?? t.documentElement).appendChild(n);
+	n.id = A, n.textContent = e, (t.head ?? t.documentElement).appendChild(n);
 }
 //#endregion
 //#region src/reinspect/core/state.ts
-function x(e) {
+function N(e) {
 	let t = {};
 	for (let n of e) t[n] = !0;
 	return t;
 }
-function S(e) {
+function P(e) {
 	return {
 		isActive: e.startActive,
 		inspectMode: e.inspectMode,
 		pendingInspectMode: e.inspectMode,
+		inspectWhitelist: e.inspectWhitelist,
+		inspectBlacklist: e.inspectBlacklist,
 		renderCounterMode: e.renderCounters,
-		renderCountComponents: x(e.countRendersForComponents),
+		propsSerializationMode: e.propsSerializationMode,
+		menuTheme: e.menuTheme,
+		menuOpenGesture: e.menuOpenGesture,
+		renderCountComponents: N(e.countRendersForComponents),
 		overrides: {}
 	};
 }
-function C(e, t) {
+function F(e, t) {
 	if (e === t) return !0;
 	if (e.length !== t.length) return !1;
 	for (let n = 0; n < e.length; n += 1) if (e[n] !== t[n]) return !1;
 	return !0;
 }
-function w(e, t) {
+function I(e, t) {
+	return e.regex === t.regex && e.wholeWord === t.wholeWord && e.matchCase === t.matchCase && F(e.patterns, t.patterns);
+}
+function L(e, t) {
+	return e.mode === t.mode && e.modifiers.ctrl === t.modifiers.ctrl && e.modifiers.alt === t.modifiers.alt && e.modifiers.shift === t.modifiers.shift && e.modifiers.meta === t.modifiers.meta;
+}
+function R(e, t) {
 	switch (t.type) {
 		case "hydrate-config": {
-			let n = x(t.config.countRendersForComponents), r = {
+			let n = N(t.config.countRendersForComponents), r = {
 				...e,
 				isActive: t.config.enabled ? e.isActive : !1,
 				inspectMode: t.config.inspectMode,
 				pendingInspectMode: t.config.inspectMode,
+				inspectWhitelist: t.config.inspectWhitelist,
+				inspectBlacklist: t.config.inspectBlacklist,
 				renderCounterMode: t.config.renderCounters,
+				propsSerializationMode: t.config.propsSerializationMode,
+				menuTheme: t.config.menuTheme,
+				menuOpenGesture: t.config.menuOpenGesture,
 				renderCountComponents: n
 			};
-			return r.isActive === e.isActive && r.inspectMode === e.inspectMode && r.pendingInspectMode === e.pendingInspectMode && r.renderCounterMode === e.renderCounterMode && C(Object.keys(r.renderCountComponents), Object.keys(e.renderCountComponents)) ? e : r;
+			return r.isActive === e.isActive && r.inspectMode === e.inspectMode && r.pendingInspectMode === e.pendingInspectMode && I(r.inspectWhitelist, e.inspectWhitelist) && I(r.inspectBlacklist, e.inspectBlacklist) && r.renderCounterMode === e.renderCounterMode && r.propsSerializationMode === e.propsSerializationMode && r.menuTheme === e.menuTheme && L(r.menuOpenGesture, e.menuOpenGesture) && F(Object.keys(r.renderCountComponents), Object.keys(e.renderCountComponents)) ? e : r;
 		}
 		case "set-is-active": return e.isActive === t.value ? e : {
 			...e,
 			isActive: t.value
 		};
-		case "set-pending-inspect-mode": return e.pendingInspectMode === t.value ? e : {
+		case "set-pending-inspect-mode": return e.pendingInspectMode === t.value && e.inspectMode === t.value ? e : {
 			...e,
+			inspectMode: t.value,
 			pendingInspectMode: t.value
 		};
+		case "set-inspect-whitelist": return I(e.inspectWhitelist, t.value) ? e : {
+			...e,
+			inspectWhitelist: t.value
+		};
+		case "set-inspect-blacklist": return I(e.inspectBlacklist, t.value) ? e : {
+			...e,
+			inspectBlacklist: t.value
+		};
 		case "set-render-counter-mode": return e.renderCounterMode === t.value ? e : {
 			...e,
 			renderCounterMode: t.value
 		};
+		case "set-props-serialization-mode": return e.propsSerializationMode === t.value ? e : {
+			...e,
+			propsSerializationMode: t.value
+		};
+		case "set-menu-theme": return e.menuTheme === t.value ? e : {
+			...e,
+			menuTheme: t.value
+		};
+		case "set-menu-open-gesture": return L(e.menuOpenGesture, t.value) ? e : {
+			...e,
+			menuOpenGesture: t.value
+		};
 		case "set-render-counting-for-component": {
 			if (t.enabled) return e.renderCountComponents[t.componentName] ? e : {
 				...e,
@@ -100,267 +137,710 @@ function w(e, t) {
 }
 //#endregion
 //#region src/reinspect/useReinspect.ts
-function T() {
-	let e = l(r);
+function z() {
+	let e = x(v);
 	if (!e) throw Error("useReinspect must be used within ReinspectProvider");
 	return e;
 }
 //#endregion
 //#region src/reinspect/react/provider.tsx
-var E = "Controls render counting for wrapped components.", D = "Off disables global counting. Attempts, commits, and both capture rerenders after initial mount.", O = "Controls which components are automatically discoverable by Reinspect.", k = "Only wrapped components uses explicit withReinspect wrappers only. All 1st-party components auto-discovers components under your source tree. All components also attempts dependency components (with safety skips).";
-function A({ children: n, config: a }) {
-	let s = d(() => t(a), [a]), [l, p] = f(w, s, S);
-	u(() => {
-		p({
+var B = /* @__PURE__ */ new Map();
+function V(e) {
+	let t = B.get(e);
+	if (t !== void 0) return t;
+	let n = 0;
+	for (let t = 0; t < e.length; t += 1) n = Math.imul(31, n) + e.charCodeAt(t), n |= 0;
+	let r = n >>> 0;
+	return B.set(e, r), r;
+}
+function H(e) {
+	let t = V(e);
+	return `hsl(${t % 360} ${60 + (t >>> 8) % 14}% ${52 + (t >>> 16) % 8}%)`;
+}
+function U({ label: e, description: t }) {
+	return /* @__PURE__ */ D("span", {
+		className: "reinspect-inline-hint",
+		title: t,
+		"aria-label": t,
+		children: e
+	});
+}
+function W(e) {
+	return e.split(/[\r\n,]+/g).map((e) => e.trim()).filter((e) => e.length > 0);
+}
+function G(e, t) {
+	let n = [...e], r = new Set(e);
+	for (let e of t) r.has(e) || (r.add(e), n.push(e));
+	return n;
+}
+function K(e) {
+	let t = [];
+	return e.ctrl && t.push("Ctrl"), e.alt && t.push("Alt"), e.shift && t.push("Shift"), e.meta && t.push("Meta"), t.join(" + ");
+}
+function q(e) {
+	return e.ctrl || e.alt || e.shift || e.meta;
+}
+function J(e) {
+	return {
+		ctrl: e.ctrlKey,
+		alt: e.altKey,
+		shift: e.shiftKey,
+		meta: e.metaKey
+	};
+}
+function Y({ title: e, info: t, filter: n, setFilter: r, invalidPatterns: i, patternsInputTestId: a, regexTestId: o, wholeWordTestId: s, matchCaseTestId: c, invalidMessageTestId: l }) {
+	let [u, d] = E(""), f = T([]), p = b(() => {
+		W(u).length !== 0 && (f.current = [], d(""));
+	}, [u]), m = b((e) => {
+		r((t) => ({
+			...t,
+			patterns: t.patterns.filter((t) => t !== e)
+		}));
+	}, [r]), h = b(() => {
+		r((e) => ({
+			...e,
+			patterns: []
+		})), f.current = [], d("");
+	}, [r]), g = (e) => {
+		e.key === "Enter" && (e.preventDefault(), p());
+	}, _ = (e) => {
+		let t = W(e);
+		d(e), r((e) => {
+			let n = e.patterns.filter((e) => !f.current.includes(e));
+			return {
+				...e,
+				patterns: G(n, t)
+			};
+		}), f.current = t;
+	};
+	return /* @__PURE__ */ O("section", {
+		className: "reinspect-filter-section",
+		children: [
+			/* @__PURE__ */ O("div", {
+				className: "reinspect-filter-row-header",
+				children: [/* @__PURE__ */ O("p", {
+					className: "reinspect-filter-title",
+					children: [
+						e,
+						" ",
+						/* @__PURE__ */ D(U, {
+							label: "?",
+							description: t
+						})
+					]
+				}), /* @__PURE__ */ D("button", {
+					type: "button",
+					className: "reinspect-filter-clear-button",
+					onClick: h,
+					disabled: n.patterns.length === 0,
+					"data-testid": `${a}-clear`,
+					children: "Clear"
+				})]
+			}),
+			/* @__PURE__ */ O("div", {
+				className: "reinspect-filter-toolbar",
+				children: [
+					/* @__PURE__ */ D("span", {
+						className: "reinspect-filter-search-icon",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ D("svg", {
+							viewBox: "0 0 24 24",
+							focusable: "false",
+							children: /* @__PURE__ */ D("path", {
+								d: "M10.5 3a7.5 7.5 0 015.92 12.1l4.24 4.23a1 1 0 01-1.42 1.42l-4.23-4.24A7.5 7.5 0 1110.5 3zm0 2a5.5 5.5 0 100 11 5.5 5.5 0 000-11z",
+								fill: "currentColor"
+							})
+						})
+					}),
+					/* @__PURE__ */ D("input", {
+						"data-testid": a,
+						className: "reinspect-filter-search-input",
+						type: "search",
+						"aria-label": `${e} patterns`,
+						value: u,
+						placeholder: `Add ${e.toLowerCase()} pattern`,
+						onChange: (e) => _(e.currentTarget.value),
+						onKeyDown: g
+					}),
+					/* @__PURE__ */ D("button", {
+						type: "button",
+						className: "reinspect-filter-modifier",
+						"data-state": n.regex ? "active" : "idle",
+						"data-testid": o,
+						title: "Regex",
+						"aria-label": `${e} regex modifier`,
+						onClick: () => r((e) => ({
+							...e,
+							regex: !e.regex
+						})),
+						children: ".*"
+					}),
+					/* @__PURE__ */ D("button", {
+						type: "button",
+						className: "reinspect-filter-modifier",
+						"data-state": n.wholeWord ? "active" : "idle",
+						"data-testid": s,
+						title: "Whole word",
+						"aria-label": `${e} whole-word modifier`,
+						onClick: () => r((e) => ({
+							...e,
+							wholeWord: !e.wholeWord
+						})),
+						children: "W"
+					}),
+					/* @__PURE__ */ D("button", {
+						type: "button",
+						className: "reinspect-filter-modifier",
+						"data-state": n.matchCase ? "active" : "idle",
+						"data-testid": c,
+						title: "Match case",
+						"aria-label": `${e} case-sensitive modifier`,
+						onClick: () => r((e) => ({
+							...e,
+							matchCase: !e.matchCase
+						})),
+						children: "Aa"
+					}),
+					/* @__PURE__ */ D("button", {
+						type: "button",
+						className: "reinspect-filter-add-button",
+						onClick: p,
+						disabled: W(u).length === 0,
+						"data-testid": `${a}-add`,
+						children: "Add"
+					})
+				]
+			}),
+			n.patterns.length > 0 ? /* @__PURE__ */ D("div", {
+				className: "reinspect-filter-chip-list",
+				children: n.patterns.map((e) => /* @__PURE__ */ O("span", {
+					className: "reinspect-filter-chip",
+					children: [/* @__PURE__ */ D("code", { children: e }), /* @__PURE__ */ D("button", {
+						type: "button",
+						className: "reinspect-filter-chip-remove",
+						"aria-label": `Remove ${e}`,
+						onClick: () => m(e),
+						children: "×"
+					})]
+				}, e))
+			}) : /* @__PURE__ */ D("p", {
+				className: "reinspect-setting-empty-state",
+				children: "No patterns configured."
+			}),
+			i.length > 0 ? /* @__PURE__ */ O("p", {
+				className: "reinspect-error",
+				"data-testid": l,
+				children: ["Invalid regex patterns ignored: ", i.join(", ")]
+			}) : null
+		]
+	});
+}
+function X({ children: n, config: r }) {
+	let l = C(() => _(r), [r]), d = T({}), [p, m] = w(R, l, P);
+	S(() => {
+		m({
 			type: "hydrate-config",
-			config: s
+			config: l
 		});
-	}, [s]);
-	let m = c((e) => {
-		p({
+	}, [l]);
+	let h = b((e) => {
+		m({
 			type: "set-is-active",
-			value: typeof e == "function" ? e(l.isActive) : e
+			value: typeof e == "function" ? e(p.isActive) : e
 		});
-	}, [l.isActive]), _ = c((e) => {
-		p({
+	}, [p.isActive]), g = b((e) => {
+		let t = typeof e == "function" ? e(p.pendingInspectMode) : e;
+		m({
 			type: "set-pending-inspect-mode",
-			value: typeof e == "function" ? e(l.pendingInspectMode) : e
-		});
-	}, [l.pendingInspectMode]), v = c((e) => {
-		p({
+			value: t
+		}), f(t);
+	}, [p.pendingInspectMode]), y = b((e) => {
+		let t = i(typeof e == "function" ? e(p.inspectWhitelist) : e);
+		m({
+			type: "set-inspect-whitelist",
+			value: t
+		}), u(t);
+	}, [p.inspectWhitelist]), x = b((e) => {
+		let t = i(typeof e == "function" ? e(p.inspectBlacklist) : e);
+		m({
+			type: "set-inspect-blacklist",
+			value: t
+		}), a(t);
+	}, [p.inspectBlacklist]), E = b((e) => {
+		m({
 			type: "set-render-counter-mode",
-			value: typeof e == "function" ? e(l.renderCounterMode) : e
+			value: typeof e == "function" ? e(p.renderCounterMode) : e
 		});
-	}, [l.renderCounterMode]), y = c((e, t, n) => {
-		p({
+	}, [p.renderCounterMode]), k = b((t) => {
+		let n = typeof t == "function" ? t(p.propsSerializationMode) : t;
+		m({
+			type: "set-props-serialization-mode",
+			value: n
+		}), e(n);
+	}, [p.propsSerializationMode]), A = b((e) => {
+		let t = typeof e == "function" ? e(p.menuTheme) : e;
+		m({
+			type: "set-menu-theme",
+			value: t
+		}), o(t);
+	}, [p.menuTheme]), j = b((e) => {
+		let t = typeof e == "function" ? e(p.menuOpenGesture) : e;
+		m({
+			type: "set-menu-open-gesture",
+			value: t
+		}), s(t);
+	}, [p.menuOpenGesture]), M = b((e, t, n) => {
+		m({
 			type: "update-override",
 			componentId: e,
 			prop: t,
 			value: n
 		});
-	}, []), b = c((e, t) => {
-		p({
+	}, []), N = b((e, t) => {
+		m({
 			type: "set-render-counting-for-component",
 			componentName: e,
 			enabled: t
 		});
-	}, []), x = c((e) => l.renderCounterMode !== "off" || !!l.renderCountComponents[e], [l.renderCounterMode, l.renderCountComponents]), C = l.pendingInspectMode !== l.inspectMode, T = c(() => {
-		C && (e(l.pendingInspectMode), o());
-	}, [C, l.pendingInspectMode]), E = c((e) => i(e, s.palette), [s.palette]), D = d(() => ({
-		config: s,
-		isActive: s.enabled && l.isActive,
-		setIsActive: m,
-		inspectMode: l.inspectMode,
-		pendingInspectMode: l.pendingInspectMode,
-		setPendingInspectMode: _,
-		hasPendingInspectModeChange: C,
-		applyInspectMode: T,
-		renderCounterMode: l.renderCounterMode,
-		setRenderCounterMode: v,
-		renderCountComponents: l.renderCountComponents,
-		setRenderCountingForComponent: b,
-		isRenderCountingEnabledFor: x,
-		overrides: l.overrides,
-		updateOverride: y,
-		getBorderColor: E
+	}, []), F = b((e) => p.renderCounterMode !== "off" || !!p.renderCountComponents[e], [p.renderCounterMode, p.renderCountComponents]), I = p.pendingInspectMode !== p.inspectMode, L = b(() => {}, []), z = C(() => c(p.inspectWhitelist), [p.inspectWhitelist]), B = C(() => c(p.inspectBlacklist), [p.inspectBlacklist]), V = z.invalidPatterns, U = B.invalidPatterns, W = b((e) => t(e, z, B), [z, B]), G = b((e) => {
+		let t = d.current[e];
+		if (t) return t;
+		let n = H(e);
+		return d.current[e] = n, n;
+	}, []), K = C(() => ({
+		config: l,
+		isActive: l.enabled && p.isActive,
+		setIsActive: h,
+		inspectMode: p.inspectMode,
+		pendingInspectMode: p.pendingInspectMode,
+		setPendingInspectMode: g,
+		hasPendingInspectModeChange: I,
+		applyInspectMode: L,
+		inspectWhitelist: p.inspectWhitelist,
+		setInspectWhitelist: y,
+		inspectWhitelistInvalidPatterns: V,
+		inspectBlacklist: p.inspectBlacklist,
+		setInspectBlacklist: x,
+		inspectBlacklistInvalidPatterns: U,
+		isComponentInspectableByFilters: W,
+		renderCounterMode: p.renderCounterMode,
+		setRenderCounterMode: E,
+		propsSerializationMode: p.propsSerializationMode,
+		setPropsSerializationMode: k,
+		menuTheme: p.menuTheme,
+		setMenuTheme: A,
+		menuOpenGesture: p.menuOpenGesture,
+		setMenuOpenGesture: j,
+		renderCountComponents: p.renderCountComponents,
+		setRenderCountingForComponent: N,
+		isRenderCountingEnabledFor: F,
+		overrides: p.overrides,
+		updateOverride: M,
+		getColor: G
 	}), [
-		s,
-		l.isActive,
-		m,
-		l.inspectMode,
-		l.pendingInspectMode,
-		_,
-		C,
-		T,
-		l.renderCounterMode,
-		v,
-		l.renderCountComponents,
-		b,
-		x,
-		l.overrides,
+		l,
+		p.isActive,
+		h,
+		p.inspectMode,
+		p.pendingInspectMode,
+		g,
+		I,
+		L,
+		p.inspectWhitelist,
 		y,
-		E
+		V,
+		p.inspectBlacklist,
+		x,
+		U,
+		W,
+		p.renderCounterMode,
+		E,
+		p.propsSerializationMode,
+		k,
+		p.menuTheme,
+		A,
+		p.menuOpenGesture,
+		j,
+		p.renderCountComponents,
+		N,
+		F,
+		p.overrides,
+		M,
+		G
 	]);
-	return /* @__PURE__ */ g(r.Provider, {
-		value: D,
-		children: [n, s.enabled && s.showFloatingToggle ? /* @__PURE__ */ h(j, {}) : null]
+	return /* @__PURE__ */ O(v.Provider, {
+		value: K,
+		children: [n, l.enabled && l.showFloatingToggle ? /* @__PURE__ */ D(Z, {}) : null]
 	});
 }
-function j() {
-	let { config: e, isActive: t, setIsActive: r, inspectMode: i, pendingInspectMode: o, setPendingInspectMode: s, hasPendingInspectModeChange: c, applyInspectMode: l, renderCounterMode: d, setRenderCounterMode: f } = T(), [_, v] = m(!1), y = p(null);
-	return u(() => {
-		if (!_) return;
+function Z() {
+	let { config: e, isActive: t, setIsActive: i, pendingInspectMode: a, setPendingInspectMode: o, inspectWhitelist: s, setInspectWhitelist: c, inspectWhitelistInvalidPatterns: u, inspectBlacklist: f, setInspectBlacklist: h, inspectBlacklistInvalidPatterns: _, renderCounterMode: v, setRenderCounterMode: b, propsSerializationMode: x, setPropsSerializationMode: C, menuTheme: w, setMenuTheme: k, menuOpenGesture: A, setMenuOpenGesture: j } = z(), [M, N] = E(!1), [P, F] = E("filter"), [I, L] = E(!1), R = T(null), B = T(null), V = T(null), H = T(!1);
+	return S(() => {
+		if (!M) return;
 		let e = (e) => {
 			let t = e.target;
-			t instanceof Node && (y.current?.contains(t) || v(!1));
+			t instanceof Node && (B.current?.contains(t) || N(!1));
 		}, t = (e) => {
-			e.key === "Escape" && v(!1);
+			e.key === "Escape" && N(!1);
 		};
 		return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
 			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
 		};
-	}, [_]), e.enabled ? /* @__PURE__ */ g("div", {
+	}, [M]), S(() => {
+		if (!M || !V.current) return;
+		let e = V.current;
+		y(e);
+		let t = (t) => {
+			n(t, e);
+		};
+		return document.addEventListener("keydown", t), () => {
+			document.removeEventListener("keydown", t);
+		};
+	}, [M]), S(() => {
+		H.current && !M && R.current?.focus(), H.current = M;
+	}, [M]), S(() => {
+		if (!I) return;
+		let e = (e) => {
+			let t = J(e);
+			q(t) && (e.preventDefault(), e.stopPropagation(), j((e) => ({
+				...e,
+				mode: "modifier-right-click",
+				modifiers: t
+			})), L(!1));
+		};
+		return document.addEventListener("keydown", e, !0), () => {
+			document.removeEventListener("keydown", e, !0);
+		};
+	}, [I, j]), e.enabled ? /* @__PURE__ */ O("div", {
 		className: "reinspect-floating-root",
-		ref: y,
-		children: [/* @__PURE__ */ h("button", {
+		ref: B,
+		"data-reinspect-theme": w,
+		children: [/* @__PURE__ */ D("button", {
 			type: "button",
+			ref: R,
 			className: "reinspect-floating-toggle",
+			"data-reinspect-theme": w,
 			"data-testid": "reinspect-floating-toggle",
-			onClick: () => v((e) => !e),
-			"aria-expanded": _,
+			onClick: () => N((e) => !e),
+			"aria-expanded": M,
 			"aria-controls": "reinspect-settings-menu",
 			children: "Reinspect settings"
-		}), _ ? /* @__PURE__ */ g("div", {
+		}), M ? /* @__PURE__ */ O("div", {
 			id: "reinspect-settings-menu",
+			ref: V,
 			className: "reinspect-settings-menu",
+			"data-reinspect-theme": w,
 			role: "dialog",
+			"aria-modal": "true",
 			"aria-label": "Reinspect settings",
+			tabIndex: -1,
 			"data-testid": "reinspect-settings-menu",
 			children: [
-				/* @__PURE__ */ h("p", {
-					className: "reinspect-settings-title",
-					children: "Reinspect settings"
+				/* @__PURE__ */ O("div", {
+					className: "reinspect-settings-header-row",
+					children: [/* @__PURE__ */ D("p", {
+						className: "reinspect-settings-title",
+						children: "Reinspect settings"
+					}), /* @__PURE__ */ O("div", {
+						className: "reinspect-settings-inline-switch",
+						children: [/* @__PURE__ */ D("span", {
+							className: "reinspect-settings-toggle-label",
+							children: t ? "Enabled" : "Disabled"
+						}), /* @__PURE__ */ D("button", {
+							type: "button",
+							role: "switch",
+							"aria-checked": t,
+							"aria-label": "Toggle inspector enabled",
+							"data-testid": "reinspect-setting-inspector-active",
+							className: "reinspect-switch-button",
+							"data-state": t ? "on" : "off",
+							title: t ? "Disable inspector" : "Enable inspector",
+							onClick: () => i(!t)
+						})]
+					})]
 				}),
-				/* @__PURE__ */ g("label", {
-					className: "reinspect-settings-toggle-row",
-					children: [/* @__PURE__ */ h("span", {
-						className: "reinspect-settings-toggle-label",
-						children: "Inspector enabled"
-					}), /* @__PURE__ */ h("input", {
-						"data-testid": "reinspect-setting-inspector-active",
-						type: "checkbox",
-						checked: t,
-						onChange: (e) => r(e.currentTarget.checked)
+				/* @__PURE__ */ O("div", {
+					className: "reinspect-settings-tabs",
+					role: "tablist",
+					"aria-label": "Reinspect settings categories",
+					children: [/* @__PURE__ */ D("button", {
+						type: "button",
+						role: "tab",
+						id: "reinspect-settings-tab-filter",
+						"data-testid": "reinspect-settings-tab-filter",
+						"data-state": P === "filter" ? "active" : "idle",
+						"aria-selected": P === "filter",
+						"aria-controls": "reinspect-settings-panel-filter",
+						onClick: () => F("filter"),
+						children: "Filter"
+					}), /* @__PURE__ */ D("button", {
+						type: "button",
+						role: "tab",
+						id: "reinspect-settings-tab-settings",
+						"data-testid": "reinspect-settings-tab-settings",
+						"data-state": P === "settings" ? "active" : "idle",
+						"aria-selected": P === "settings",
+						"aria-controls": "reinspect-settings-panel-settings",
+						onClick: () => F("settings"),
+						children: "Settings"
 					})]
 				}),
-				/* @__PURE__ */ h("div", { className: "reinspect-settings-divider" }),
-				/* @__PURE__ */ g("section", {
-					className: "reinspect-setting-block",
+				/* @__PURE__ */ D("div", { className: "reinspect-settings-divider" }),
+				P === "filter" ? /* @__PURE__ */ O("div", {
+					className: "reinspect-settings-tab-panel",
+					role: "tabpanel",
+					id: "reinspect-settings-panel-filter",
+					"aria-labelledby": "reinspect-settings-tab-filter",
 					children: [
-						/* @__PURE__ */ g("header", {
-							className: "reinspect-setting-header",
-							children: [/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("p", {
-								className: "reinspect-setting-name",
-								children: "INSPECT_MODE"
-							}), /* @__PURE__ */ h("p", {
-								className: "reinspect-setting-short-description",
-								children: O
-							})] }), /* @__PURE__ */ g("span", {
-								className: "reinspect-tooltip-host",
-								children: [/* @__PURE__ */ h("button", {
-									type: "button",
-									className: "reinspect-tooltip-trigger",
-									"aria-label": "Explain INSPECT_MODE",
-									children: "?"
-								}), /* @__PURE__ */ h("span", {
-									className: "reinspect-tooltip-content",
-									role: "tooltip",
-									children: k
-								})]
-							})]
+						/* @__PURE__ */ D(Y, {
+							title: "Include",
+							info: "Only matching component names remain inspectable.",
+							filter: s,
+							setFilter: c,
+							invalidPatterns: u,
+							patternsInputTestId: "reinspect-setting-inspect-whitelist-patterns",
+							regexTestId: "reinspect-setting-inspect-whitelist-regex",
+							wholeWordTestId: "reinspect-setting-inspect-whitelist-whole-word",
+							matchCaseTestId: "reinspect-setting-inspect-whitelist-match-case",
+							invalidMessageTestId: "reinspect-setting-inspect-whitelist-invalid"
 						}),
-						/* @__PURE__ */ g("label", {
-							className: "reinspect-settings-select-row",
-							children: [/* @__PURE__ */ h("span", {
-								className: "reinspect-settings-toggle-label",
-								children: "Inspect Mode"
-							}), /* @__PURE__ */ g("select", {
-								"data-testid": "reinspect-setting-inspect-mode",
-								value: o,
-								onChange: (e) => {
-									let t = e.currentTarget.value;
-									a(t) && s(t);
-								},
+						/* @__PURE__ */ D(Y, {
+							title: "Exclude",
+							info: "Matching component names are hidden from inspection.",
+							filter: f,
+							setFilter: h,
+							invalidPatterns: _,
+							patternsInputTestId: "reinspect-setting-inspect-blacklist-patterns",
+							regexTestId: "reinspect-setting-inspect-blacklist-regex",
+							wholeWordTestId: "reinspect-setting-inspect-blacklist-whole-word",
+							matchCaseTestId: "reinspect-setting-inspect-blacklist-match-case",
+							invalidMessageTestId: "reinspect-setting-inspect-blacklist-invalid"
+						}),
+						/* @__PURE__ */ D("p", {
+							className: "reinspect-setting-note",
+							children: "Exclude patterns override include patterns."
+						}),
+						/* @__PURE__ */ D("section", {
+							className: "reinspect-setting-block",
+							children: /* @__PURE__ */ O("label", {
+								className: "reinspect-settings-select-row",
+								children: [/* @__PURE__ */ O("span", {
+									className: "reinspect-settings-toggle-label",
+									children: [
+										"Component scope",
+										" ",
+										/* @__PURE__ */ D(U, {
+											label: "?",
+											description: "Choose which component groups can be inspected."
+										})
+									]
+								}), /* @__PURE__ */ O("select", {
+									"data-testid": "reinspect-setting-inspect-mode",
+									value: a,
+									onChange: (e) => {
+										let t = e.currentTarget.value;
+										d(t) && o(t);
+									},
+									children: [
+										/* @__PURE__ */ D("option", {
+											value: "wrapped",
+											children: "Only wrapped components"
+										}),
+										/* @__PURE__ */ D("option", {
+											value: "first-party",
+											children: "All 1st-party components"
+										}),
+										/* @__PURE__ */ D("option", {
+											value: "all",
+											children: "All components"
+										})
+									]
+								})]
+							})
+						})
+					]
+				}) : /* @__PURE__ */ D("div", {
+					className: "reinspect-settings-tab-panel",
+					role: "tabpanel",
+					id: "reinspect-settings-panel-settings",
+					"aria-labelledby": "reinspect-settings-tab-settings",
+					children: /* @__PURE__ */ O("section", {
+						className: "reinspect-setting-block",
+						children: [
+							/* @__PURE__ */ O("label", {
+								className: "reinspect-settings-select-row",
+								children: [/* @__PURE__ */ O("span", {
+									className: "reinspect-settings-toggle-label",
+									children: [
+										"Render counter mode",
+										" ",
+										/* @__PURE__ */ D(U, {
+											label: "?",
+											description: "Pick whether render attempts, commits, both, or no counters are shown."
+										})
+									]
+								}), /* @__PURE__ */ O("select", {
+									"data-testid": "reinspect-setting-render-counters",
+									value: v,
+									onChange: (e) => {
+										let t = e.currentTarget.value;
+										g(t) && b(t);
+									},
+									children: [
+										/* @__PURE__ */ D("option", {
+											value: "off",
+											children: "Off"
+										}),
+										/* @__PURE__ */ D("option", {
+											value: "attempts",
+											children: "Render attempts"
+										}),
+										/* @__PURE__ */ D("option", {
+											value: "commits",
+											children: "Committed renders"
+										}),
+										/* @__PURE__ */ D("option", {
+											value: "both",
+											children: "Both"
+										})
+									]
+								})]
+							}),
+							/* @__PURE__ */ D("p", {
+								className: "reinspect-setting-note",
+								children: "Per-component capture can be toggled from each component menu."
+							}),
+							/* @__PURE__ */ O("label", {
+								className: "reinspect-settings-select-row",
+								children: [/* @__PURE__ */ O("span", {
+									className: "reinspect-settings-toggle-label",
+									children: [
+										"Menu theme",
+										" ",
+										/* @__PURE__ */ D(U, {
+											label: "?",
+											description: "Choose the Reinspect menu appearance."
+										})
+									]
+								}), /* @__PURE__ */ O("select", {
+									"data-testid": "reinspect-setting-menu-theme",
+									value: w,
+									onChange: (e) => {
+										let t = e.currentTarget.value;
+										r(t) && k(t);
+									},
+									children: [/* @__PURE__ */ D("option", {
+										value: "light",
+										children: "Light"
+									}), /* @__PURE__ */ D("option", {
+										value: "dark",
+										children: "Dark"
+									})]
+								})]
+							}),
+							/* @__PURE__ */ O("label", {
+								className: "reinspect-settings-select-row",
+								children: [/* @__PURE__ */ O("span", {
+									className: "reinspect-settings-toggle-label",
+									children: [
+										"Menu open trigger",
+										" ",
+										/* @__PURE__ */ D(U, {
+											label: "?",
+											description: "Choose how to open the inspector menu on components."
+										})
+									]
+								}), /* @__PURE__ */ O("select", {
+									"data-testid": "reinspect-setting-menu-open-trigger",
+									value: A.mode,
+									onChange: (e) => {
+										let t = e.currentTarget.value;
+										m(t) && j((e) => ({
+											...e,
+											mode: t
+										}));
+									},
+									children: [/* @__PURE__ */ D("option", {
+										value: "right-click",
+										children: "Right click"
+									}), /* @__PURE__ */ D("option", {
+										value: "modifier-right-click",
+										children: "Right click + modifier macro"
+									})]
+								})]
+							}),
+							A.mode === "modifier-right-click" ? /* @__PURE__ */ O("section", {
+								className: "reinspect-setting-block reinspect-macro-setting",
 								children: [
-									/* @__PURE__ */ h("option", {
-										value: "wrapped",
-										children: "Only wrapped components"
+									/* @__PURE__ */ O("p", {
+										className: "reinspect-setting-note",
+										"data-testid": "reinspect-setting-menu-open-modifier-label",
+										children: [
+											"Current macro:",
+											" ",
+											/* @__PURE__ */ D("code", { children: K(A.modifiers) })
+										]
 									}),
-									/* @__PURE__ */ h("option", {
-										value: "first-party",
-										children: "All 1st-party components"
+									/* @__PURE__ */ O("div", {
+										className: "reinspect-inline-controls",
+										children: [/* @__PURE__ */ D("button", {
+											type: "button",
+											"data-testid": "reinspect-setting-menu-open-modifier-record",
+											onClick: () => {
+												L((e) => !e);
+											},
+											"data-state": I ? "active" : "idle",
+											children: I ? "Press modifier keys..." : "Record macro"
+										}), /* @__PURE__ */ D("button", {
+											type: "button",
+											"data-testid": "reinspect-setting-menu-open-modifier-reset",
+											onClick: () => j((e) => ({
+												...e,
+												modifiers: { ...p }
+											})),
+											children: "Reset to Shift"
+										})]
 									}),
-									/* @__PURE__ */ h("option", {
-										value: "all",
-										children: "All components"
+									/* @__PURE__ */ D("p", {
+										className: "reinspect-setting-helper-text",
+										children: "Hold one or more modifier keys (Ctrl, Alt, Shift, Meta), then press any key to save the macro."
 									})
 								]
-							})]
-						}),
-						/* @__PURE__ */ h("button", {
-							type: "button",
-							className: "reinspect-apply-button",
-							"data-testid": "reinspect-apply-inspect-mode",
-							onClick: l,
-							disabled: !c,
-							children: "Apply & Reload"
-						}),
-						c ? /* @__PURE__ */ h("p", {
-							className: "reinspect-setting-note",
-							"data-testid": "reinspect-inspect-mode-reload-note",
-							children: "Inspect mode changes are applied after reload."
-						}) : /* @__PURE__ */ g("p", {
-							className: "reinspect-setting-note",
-							children: ["Current mode: ", i]
-						})
-					]
-				}),
-				/* @__PURE__ */ h("div", { className: "reinspect-settings-divider" }),
-				/* @__PURE__ */ g("section", {
-					className: "reinspect-setting-block",
-					children: [/* @__PURE__ */ g("header", {
-						className: "reinspect-setting-header",
-						children: [/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("p", {
-							className: "reinspect-setting-name",
-							children: "RENDER_COUNTERS"
-						}), /* @__PURE__ */ h("p", {
-							className: "reinspect-setting-short-description",
-							children: E
-						})] }), /* @__PURE__ */ g("span", {
-							className: "reinspect-tooltip-host",
-							children: [/* @__PURE__ */ h("button", {
-								type: "button",
-								className: "reinspect-tooltip-trigger",
-								"aria-label": "Explain RENDER_COUNTERS",
-								children: "?"
-							}), /* @__PURE__ */ h("span", {
-								className: "reinspect-tooltip-content",
-								role: "tooltip",
-								children: D
-							})]
-						})]
-					}), /* @__PURE__ */ g("label", {
-						className: "reinspect-settings-select-row",
-						children: [/* @__PURE__ */ h("span", {
-							className: "reinspect-settings-toggle-label",
-							children: "Counter mode"
-						}), /* @__PURE__ */ g("select", {
-							"data-testid": "reinspect-setting-render-counters",
-							value: d,
-							onChange: (e) => {
-								let t = e.currentTarget.value;
-								n(t) && f(t);
-							},
-							children: [
-								/* @__PURE__ */ h("option", {
-									value: "off",
-									children: "Off"
-								}),
-								/* @__PURE__ */ h("option", {
-									value: "attempts",
-									children: "Render attempts"
-								}),
-								/* @__PURE__ */ h("option", {
-									value: "commits",
-									children: "Committed renders"
-								}),
-								/* @__PURE__ */ h("option", {
-									value: "both",
-									children: "Both"
-								})
-							]
-						})]
-					})]
+							}) : null,
+							/* @__PURE__ */ O("label", {
+								className: "reinspect-settings-select-row",
+								children: [/* @__PURE__ */ O("span", {
+									className: "reinspect-settings-toggle-label",
+									children: [
+										"Props JSON detail",
+										" ",
+										/* @__PURE__ */ D(U, {
+											label: "?",
+											description: "Choose how much data appears in JSON previews and the Raw props editor."
+										})
+									]
+								}), /* @__PURE__ */ O("select", {
+									"data-testid": "reinspect-setting-props-serialization-mode",
+									value: x,
+									onChange: (e) => {
+										let t = e.currentTarget.value;
+										l(t) && C(t);
+									},
+									children: [/* @__PURE__ */ D("option", {
+										value: "distilled",
+										children: "Distilled (recommended)"
+									}), /* @__PURE__ */ D("option", {
+										value: "complete",
+										children: "Complete (includes internals)"
+									})]
+								})]
+							}),
+							/* @__PURE__ */ D("p", {
+								className: "reinspect-setting-helper-text",
+								children: x === "distilled" ? "Shows app-level props first and hides React internals like _owner." : "Shows the full object graph, including React internals and metadata."
+							})
+						]
+					})
 				})
 			]
 		}) : null]
@@ -368,15 +848,15 @@ function j() {
 }
 //#endregion
 //#region src/reinspect/withReinspect.tsx
-function M(e, t) {
+function Q(e, t) {
 	let n = {
 		source: "manual",
 		scope: "first-party"
 	};
-	return t?.name && (n.componentName = t.name), s(e, n);
+	return t?.name && (n.componentName = t.name), h(e, n);
 }
 //#endregion
 //#region src/reinspect/index.ts
-b(_);
+M(k);
 //#endregion
-export { A as ReinspectProvider, T as useReinspect, M as withReinspect };
+export { X as ReinspectProvider, z as useReinspect, Q as withReinspect };