react-reinspect 0.1.8 → 0.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -5
- package/dist/lib/constants.d.ts +2 -1
- package/dist/lib/constants.d.ts.map +1 -1
- package/dist/lib/core/state.d.ts +27 -2
- package/dist/lib/core/state.d.ts.map +1 -1
- package/dist/lib/index.cjs +1 -1
- package/dist/lib/index.d.ts +1 -1
- package/dist/lib/index.d.ts.map +1 -1
- package/dist/lib/index.js +707 -227
- package/dist/lib/internal/auto-wrap.cjs +1 -1
- package/dist/lib/internal/auto-wrap.js +1 -1
- package/dist/lib/propsInspector.d.ts +8 -2
- package/dist/lib/propsInspector.d.ts.map +1 -1
- package/dist/lib/react/focusTrap.d.ts +3 -0
- package/dist/lib/react/focusTrap.d.ts.map +1 -0
- package/dist/lib/react/overlay.d.ts +1 -2
- package/dist/lib/react/overlay.d.ts.map +1 -1
- package/dist/lib/react/provider.d.ts.map +1 -1
- package/dist/lib/react/wrap.d.ts.map +1 -1
- package/dist/lib/style.css +1 -1
- package/dist/lib/syntaxHighlight.d.ts +6 -0
- package/dist/lib/syntaxHighlight.d.ts.map +1 -0
- package/dist/lib/types.d.ts +48 -3
- package/dist/lib/types.d.ts.map +1 -1
- package/dist/lib/utils.d.ts +31 -2
- package/dist/lib/utils.d.ts.map +1 -1
- package/dist/lib/wrap-Cc3mMcCA.cjs +2 -0
- package/dist/lib/wrap-DkOzTshV.js +2456 -0
- package/package.json +25 -2
- package/dist/lib/wrap-8xVFW-im.js +0 -996
- package/dist/lib/wrap-Bu931FVO.cjs +0 -1
package/README.md
CHANGED
|
@@ -212,6 +212,7 @@ const reinspectConfig: ReinspectConfig = {
|
|
|
212
212
|
// startActive: true, // start with inspector active when page loads
|
|
213
213
|
// showFloatingToggle: true, // show floating react-reinspect settings button
|
|
214
214
|
// inspectMode: 'wrapped', // wrapped: only wrapped components, first-party: wrapped + components with inspectable metadata, all: all components
|
|
215
|
+
// propsSerializationMode: 'distilled', // distilled hides React element internals in JSON previews/raw editor
|
|
215
216
|
// editableProps: ['padding', 'margin'], // change the CSS props you can edit
|
|
216
217
|
}
|
|
217
218
|
|
|
@@ -344,12 +345,25 @@ Wrap your app root.
|
|
|
344
345
|
| `startActive` | `boolean` | `true` | Initial inspector active state. |
|
|
345
346
|
| `showFloatingToggle` | `boolean` | `enabled` | Show built-in settings button. |
|
|
346
347
|
| `inspectMode` | `'wrapped' \| 'first-party' \| 'all'` | `'wrapped'` | Auto-wrap visibility behavior. |
|
|
348
|
+
| `inspectWhitelist` | `InspectFilter` | `{ patterns: [], regex: false, wholeWord: false, matchCase: false }` | Optional include filter by component name. |
|
|
349
|
+
| `inspectBlacklist` | `InspectFilter` | `{ patterns: [], regex: false, wholeWord: false, matchCase: false }` | Optional exclude filter by component name. |
|
|
347
350
|
| `editableProps` | `EditableStyleProp[]` | built-in defaults | CSS props editable in inspector. |
|
|
348
|
-
| `
|
|
351
|
+
| `propsSerializationMode` | `'distilled' \| 'complete'` | `'distilled'` | JSON view mode for props/value serialization in inspector menus. |
|
|
349
352
|
| `zIndexBase` | `number` | `2147483000` | Overlay stacking baseline. |
|
|
350
353
|
| `renderCounters` | `'off' \| 'attempts' \| 'commits' \| 'both'` | `'off'` | Global render-counter mode. |
|
|
351
354
|
| `countRendersForComponents` | `string[]` | `[]` | Component-specific counting when global mode is `off`. |
|
|
352
355
|
|
|
356
|
+
### `InspectFilter`
|
|
357
|
+
|
|
358
|
+
```ts
|
|
359
|
+
type InspectFilter = {
|
|
360
|
+
patterns: string[]
|
|
361
|
+
regex: boolean
|
|
362
|
+
wholeWord: boolean
|
|
363
|
+
matchCase: boolean
|
|
364
|
+
}
|
|
365
|
+
```
|
|
366
|
+
|
|
353
367
|
### `withReinspect(Component, options?)`
|
|
354
368
|
|
|
355
369
|
Wrap a component manually.
|
|
@@ -361,10 +375,6 @@ Wrap a component manually.
|
|
|
361
375
|
|
|
362
376
|
`autoWrapInspectable` is now internal-only and used by the transform plugins via `react-reinspect/internal/auto-wrap`.
|
|
363
377
|
|
|
364
|
-
### `useReinspect()`
|
|
365
|
-
|
|
366
|
-
Hook to read/update runtime inspector state from your own UI.
|
|
367
|
-
|
|
368
378
|
## Production Guidance
|
|
369
379
|
|
|
370
380
|
- Default behavior is production-safe (`enabled` defaults to `false`).
|
package/dist/lib/constants.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { EditableStyleProp } from './types';
|
|
2
2
|
export declare const DEFAULT_EDITABLE_PROPS: readonly EditableStyleProp[];
|
|
3
|
-
export declare const
|
|
3
|
+
export declare const REINSPECT_DEFAULT_RUNTIME_COLOR = "var(--reinspect-brand-500)";
|
|
4
|
+
export declare const REINSPECT_FALLBACK_COLOR_INPUT_HEX = "#1f2937";
|
|
4
5
|
export declare const COLOR_STYLE_PROPS: Set<EditableStyleProp>;
|
|
5
6
|
export declare const NUMERIC_STYLE_PROPS: Set<EditableStyleProp>;
|
|
6
7
|
export declare const OPACITY_STYLE_PROP: EditableStyleProp;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/reinspect/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEhD,eAAO,MAAM,sBAAsB,EAAE,SAAS,iBAAiB,EAa9D,CAAA;AAED,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/reinspect/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEhD,eAAO,MAAM,sBAAsB,EAAE,SAAS,iBAAiB,EAa9D,CAAA;AAED,eAAO,MAAM,+BAA+B,+BAA+B,CAAA;AAC3E,eAAO,MAAM,kCAAkC,YAAY,CAAA;AAE3D,eAAO,MAAM,iBAAiB,wBAI5B,CAAA;AAEF,eAAO,MAAM,mBAAmB,wBAS9B,CAAA;AAEF,eAAO,MAAM,kBAAkB,EAAE,iBAA6B,CAAA"}
|
package/dist/lib/core/state.d.ts
CHANGED
|
@@ -1,9 +1,14 @@
|
|
|
1
|
-
import type { ComponentStyleOverrides, EditableStyleProp, InspectMode, RenderCounterMode, ResolvedReinspectConfig, StyleOverrideValue } from '../types';
|
|
1
|
+
import type { ComponentStyleOverrides, EditableStyleProp, InspectFilter, InspectMode, MenuOpenGesture, MenuTheme, PropsSerializationMode, RenderCounterMode, ResolvedReinspectConfig, StyleOverrideValue } from '../types';
|
|
2
2
|
export interface ReinspectState {
|
|
3
3
|
isActive: boolean;
|
|
4
4
|
inspectMode: InspectMode;
|
|
5
5
|
pendingInspectMode: InspectMode;
|
|
6
|
+
inspectWhitelist: InspectFilter;
|
|
7
|
+
inspectBlacklist: InspectFilter;
|
|
6
8
|
renderCounterMode: RenderCounterMode;
|
|
9
|
+
propsSerializationMode: PropsSerializationMode;
|
|
10
|
+
menuTheme: MenuTheme;
|
|
11
|
+
menuOpenGesture: MenuOpenGesture;
|
|
7
12
|
renderCountComponents: Record<string, true>;
|
|
8
13
|
overrides: Record<string, ComponentStyleOverrides>;
|
|
9
14
|
}
|
|
@@ -19,10 +24,30 @@ interface SetPendingInspectModeAction {
|
|
|
19
24
|
type: 'set-pending-inspect-mode';
|
|
20
25
|
value: InspectMode;
|
|
21
26
|
}
|
|
27
|
+
interface SetInspectWhitelistAction {
|
|
28
|
+
type: 'set-inspect-whitelist';
|
|
29
|
+
value: InspectFilter;
|
|
30
|
+
}
|
|
31
|
+
interface SetInspectBlacklistAction {
|
|
32
|
+
type: 'set-inspect-blacklist';
|
|
33
|
+
value: InspectFilter;
|
|
34
|
+
}
|
|
22
35
|
interface SetRenderCounterModeAction {
|
|
23
36
|
type: 'set-render-counter-mode';
|
|
24
37
|
value: RenderCounterMode;
|
|
25
38
|
}
|
|
39
|
+
interface SetPropsSerializationModeAction {
|
|
40
|
+
type: 'set-props-serialization-mode';
|
|
41
|
+
value: PropsSerializationMode;
|
|
42
|
+
}
|
|
43
|
+
interface SetMenuThemeAction {
|
|
44
|
+
type: 'set-menu-theme';
|
|
45
|
+
value: MenuTheme;
|
|
46
|
+
}
|
|
47
|
+
interface SetMenuOpenGestureAction {
|
|
48
|
+
type: 'set-menu-open-gesture';
|
|
49
|
+
value: MenuOpenGesture;
|
|
50
|
+
}
|
|
26
51
|
interface SetRenderCountingForComponentAction {
|
|
27
52
|
type: 'set-render-counting-for-component';
|
|
28
53
|
componentName: string;
|
|
@@ -34,7 +59,7 @@ interface UpdateOverrideAction {
|
|
|
34
59
|
prop: EditableStyleProp;
|
|
35
60
|
value: StyleOverrideValue | undefined;
|
|
36
61
|
}
|
|
37
|
-
export type ReinspectStateAction = HydrateConfigAction | SetIsActiveAction | SetPendingInspectModeAction | SetRenderCounterModeAction | SetRenderCountingForComponentAction | UpdateOverrideAction;
|
|
62
|
+
export type ReinspectStateAction = HydrateConfigAction | SetIsActiveAction | SetPendingInspectModeAction | SetInspectWhitelistAction | SetInspectBlacklistAction | SetRenderCounterModeAction | SetPropsSerializationModeAction | SetMenuThemeAction | SetMenuOpenGestureAction | SetRenderCountingForComponentAction | UpdateOverrideAction;
|
|
38
63
|
export declare function buildRenderCountComponentMap(componentNames: readonly string[]): Record<string, true>;
|
|
39
64
|
export declare function buildInitialReinspectState(config: ResolvedReinspectConfig): ReinspectState;
|
|
40
65
|
export declare function reinspectStateReducer(state: ReinspectState, action: ReinspectStateAction): ReinspectState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../src/reinspect/core/state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,uBAAuB,EACvB,iBAAiB,EACjB,WAAW,EACX,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,UAAU,CAAA;AAEjB,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,WAAW,CAAA;IACxB,kBAAkB,EAAE,WAAW,CAAA;IAC/B,iBAAiB,EAAE,iBAAiB,CAAA;IACpC,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;IAC3C,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAA;CACnD;AAED,UAAU,mBAAmB;IAC3B,IAAI,EAAE,gBAAgB,CAAA;IACtB,MAAM,EAAE,uBAAuB,CAAA;CAChC;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,eAAe,CAAA;IACrB,KAAK,EAAE,OAAO,CAAA;CACf;AAED,UAAU,2BAA2B;IACnC,IAAI,EAAE,0BAA0B,CAAA;IAChC,KAAK,EAAE,WAAW,CAAA;CACnB;AAED,UAAU,0BAA0B;IAClC,IAAI,EAAE,yBAAyB,CAAA;IAC/B,KAAK,EAAE,iBAAiB,CAAA;CACzB;AAED,UAAU,mCAAmC;IAC3C,IAAI,EAAE,mCAAmC,CAAA;IACzC,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,UAAU,oBAAoB;IAC5B,IAAI,EAAE,iBAAiB,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,iBAAiB,CAAA;IACvB,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAAA;CACtC;AAED,MAAM,MAAM,oBAAoB,GAC5B,mBAAmB,GACnB,iBAAiB,GACjB,2BAA2B,GAC3B,0BAA0B,GAC1B,mCAAmC,GACnC,oBAAoB,CAAA;AAExB,wBAAgB,4BAA4B,CAC1C,cAAc,EAAE,SAAS,MAAM,EAAE,GAChC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAOtB;AAED,wBAAgB,0BAA0B,CACxC,MAAM,EAAE,uBAAuB,GAC9B,cAAc,
|
|
1
|
+
{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../src/reinspect/core/state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,uBAAuB,EACvB,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,eAAe,EACf,SAAS,EACT,sBAAsB,EACtB,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,UAAU,CAAA;AAEjB,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,WAAW,CAAA;IACxB,kBAAkB,EAAE,WAAW,CAAA;IAC/B,gBAAgB,EAAE,aAAa,CAAA;IAC/B,gBAAgB,EAAE,aAAa,CAAA;IAC/B,iBAAiB,EAAE,iBAAiB,CAAA;IACpC,sBAAsB,EAAE,sBAAsB,CAAA;IAC9C,SAAS,EAAE,SAAS,CAAA;IACpB,eAAe,EAAE,eAAe,CAAA;IAChC,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;IAC3C,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAA;CACnD;AAED,UAAU,mBAAmB;IAC3B,IAAI,EAAE,gBAAgB,CAAA;IACtB,MAAM,EAAE,uBAAuB,CAAA;CAChC;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,eAAe,CAAA;IACrB,KAAK,EAAE,OAAO,CAAA;CACf;AAED,UAAU,2BAA2B;IACnC,IAAI,EAAE,0BAA0B,CAAA;IAChC,KAAK,EAAE,WAAW,CAAA;CACnB;AAED,UAAU,yBAAyB;IACjC,IAAI,EAAE,uBAAuB,CAAA;IAC7B,KAAK,EAAE,aAAa,CAAA;CACrB;AAED,UAAU,yBAAyB;IACjC,IAAI,EAAE,uBAAuB,CAAA;IAC7B,KAAK,EAAE,aAAa,CAAA;CACrB;AAED,UAAU,0BAA0B;IAClC,IAAI,EAAE,yBAAyB,CAAA;IAC/B,KAAK,EAAE,iBAAiB,CAAA;CACzB;AAED,UAAU,+BAA+B;IACvC,IAAI,EAAE,8BAA8B,CAAA;IACpC,KAAK,EAAE,sBAAsB,CAAA;CAC9B;AAED,UAAU,kBAAkB;IAC1B,IAAI,EAAE,gBAAgB,CAAA;IACtB,KAAK,EAAE,SAAS,CAAA;CACjB;AAED,UAAU,wBAAwB;IAChC,IAAI,EAAE,uBAAuB,CAAA;IAC7B,KAAK,EAAE,eAAe,CAAA;CACvB;AAED,UAAU,mCAAmC;IAC3C,IAAI,EAAE,mCAAmC,CAAA;IACzC,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,UAAU,oBAAoB;IAC5B,IAAI,EAAE,iBAAiB,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,iBAAiB,CAAA;IACvB,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAAA;CACtC;AAED,MAAM,MAAM,oBAAoB,GAC5B,mBAAmB,GACnB,iBAAiB,GACjB,2BAA2B,GAC3B,yBAAyB,GACzB,yBAAyB,GACzB,0BAA0B,GAC1B,+BAA+B,GAC/B,kBAAkB,GAClB,wBAAwB,GACxB,mCAAmC,GACnC,oBAAoB,CAAA;AAExB,wBAAgB,4BAA4B,CAC1C,cAAc,EAAE,SAAS,MAAM,EAAE,GAChC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAOtB;AAED,wBAAgB,0BAA0B,CACxC,MAAM,EAAE,uBAAuB,GAC9B,cAAc,CAgBhB;AAgDD,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,cAAc,EACrB,MAAM,EAAE,oBAAoB,GAC3B,cAAc,CA4LhB"}
|
package/dist/lib/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./wrap-Bu931FVO.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);var r=`.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}`,i=`reinspect-runtime-styles`;function a(){return typeof document>`u`?null:document}function o(e){if(!e)return;let t=a();if(!t||t.getElementById(i))return;let n=t.createElement(`style`);n.id=i,n.textContent=e,(t.head??t.documentElement).appendChild(n)}function s(e){let t={};for(let n of e)t[n]=!0;return t}function c(e){return{isActive:e.startActive,inspectMode:e.inspectMode,pendingInspectMode:e.inspectMode,renderCounterMode:e.renderCounters,renderCountComponents:s(e.countRendersForComponents),overrides:{}}}function l(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 u(e,t){switch(t.type){case`hydrate-config`:{let n=s(t.config.countRendersForComponents),r={...e,isActive:t.config.enabled?e.isActive:!1,inspectMode:t.config.inspectMode,pendingInspectMode:t.config.inspectMode,renderCounterMode:t.config.renderCounters,renderCountComponents:n};return r.isActive===e.isActive&&r.inspectMode===e.inspectMode&&r.pendingInspectMode===e.pendingInspectMode&&r.renderCounterMode===e.renderCounterMode&&l(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:{...e,pendingInspectMode:t.value};case`set-render-counter-mode`:return e.renderCounterMode===t.value?e:{...e,renderCounterMode:t.value};case`set-render-counting-for-component`:{if(t.enabled)return e.renderCountComponents[t.componentName]?e:{...e,renderCountComponents:{...e.renderCountComponents,[t.componentName]:!0}};if(!e.renderCountComponents[t.componentName])return e;let n={...e.renderCountComponents};return delete n[t.componentName],{...e,renderCountComponents:n}}case`update-override`:{let n={...e.overrides[t.componentId]??{}};if(t.value===void 0||t.value===null||t.value===``?delete n[t.prop]:n[t.prop]=t.value,Object.keys(n).length===0){if(!e.overrides[t.componentId])return e;let n={...e.overrides};return delete n[t.componentId],{...e,overrides:n}}return{...e,overrides:{...e.overrides,[t.componentId]:n}}}default:return e}}function d(){let n=(0,t.useContext)(e.l);if(!n)throw Error(`useReinspect must be used within ReinspectProvider`);return n}var f=`Controls render counting for wrapped components.`,p=`Off disables global counting. Attempts, commits, and both capture rerenders after initial mount.`,m=`Controls which components are automatically discoverable by Reinspect.`,h=`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 g({children:r,config:i}){let a=(0,t.useMemo)(()=>e.c(i),[i]),[o,s]=(0,t.useReducer)(u,a,c);(0,t.useEffect)(()=>{s({type:`hydrate-config`,config:a})},[a]);let l=(0,t.useCallback)(e=>{s({type:`set-is-active`,value:typeof e==`function`?e(o.isActive):e})},[o.isActive]),d=(0,t.useCallback)(e=>{s({type:`set-pending-inspect-mode`,value:typeof e==`function`?e(o.pendingInspectMode):e})},[o.pendingInspectMode]),f=(0,t.useCallback)(e=>{s({type:`set-render-counter-mode`,value:typeof e==`function`?e(o.renderCounterMode):e})},[o.renderCounterMode]),p=(0,t.useCallback)((e,t,n)=>{s({type:`update-override`,componentId:e,prop:t,value:n})},[]),m=(0,t.useCallback)((e,t)=>{s({type:`set-render-counting-for-component`,componentName:e,enabled:t})},[]),h=(0,t.useCallback)(e=>o.renderCounterMode!==`off`||!!o.renderCountComponents[e],[o.renderCounterMode,o.renderCountComponents]),g=o.pendingInspectMode!==o.inspectMode,v=(0,t.useCallback)(()=>{g&&(e.a(o.pendingInspectMode),e.s())},[g,o.pendingInspectMode]),y=(0,t.useCallback)(t=>e.o(t,a.palette),[a.palette]),b=(0,t.useMemo)(()=>({config:a,isActive:a.enabled&&o.isActive,setIsActive:l,inspectMode:o.inspectMode,pendingInspectMode:o.pendingInspectMode,setPendingInspectMode:d,hasPendingInspectModeChange:g,applyInspectMode:v,renderCounterMode:o.renderCounterMode,setRenderCounterMode:f,renderCountComponents:o.renderCountComponents,setRenderCountingForComponent:m,isRenderCountingEnabledFor:h,overrides:o.overrides,updateOverride:p,getBorderColor:y}),[a,o.isActive,l,o.inspectMode,o.pendingInspectMode,d,g,v,o.renderCounterMode,f,o.renderCountComponents,m,h,o.overrides,p,y]);return(0,n.jsxs)(e.l.Provider,{value:b,children:[r,a.enabled&&a.showFloatingToggle?(0,n.jsx)(_,{}):null]})}function _(){let{config:r,isActive:i,setIsActive:a,inspectMode:o,pendingInspectMode:s,setPendingInspectMode:c,hasPendingInspectModeChange:l,applyInspectMode:u,renderCounterMode:g,setRenderCounterMode:_}=d(),[v,y]=(0,t.useState)(!1),b=(0,t.useRef)(null);return(0,t.useEffect)(()=>{if(!v)return;let e=e=>{let t=e.target;t instanceof Node&&(b.current?.contains(t)||y(!1))},t=e=>{e.key===`Escape`&&y(!1)};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[v]),r.enabled?(0,n.jsxs)(`div`,{className:`reinspect-floating-root`,ref:b,children:[(0,n.jsx)(`button`,{type:`button`,className:`reinspect-floating-toggle`,"data-testid":`reinspect-floating-toggle`,onClick:()=>y(e=>!e),"aria-expanded":v,"aria-controls":`reinspect-settings-menu`,children:`Reinspect settings`}),v?(0,n.jsxs)(`div`,{id:`reinspect-settings-menu`,className:`reinspect-settings-menu`,role:`dialog`,"aria-label":`Reinspect settings`,"data-testid":`reinspect-settings-menu`,children:[(0,n.jsx)(`p`,{className:`reinspect-settings-title`,children:`Reinspect settings`}),(0,n.jsxs)(`label`,{className:`reinspect-settings-toggle-row`,children:[(0,n.jsx)(`span`,{className:`reinspect-settings-toggle-label`,children:`Inspector enabled`}),(0,n.jsx)(`input`,{"data-testid":`reinspect-setting-inspector-active`,type:`checkbox`,checked:i,onChange:e=>a(e.currentTarget.checked)})]}),(0,n.jsx)(`div`,{className:`reinspect-settings-divider`}),(0,n.jsxs)(`section`,{className:`reinspect-setting-block`,children:[(0,n.jsxs)(`header`,{className:`reinspect-setting-header`,children:[(0,n.jsxs)(`div`,{children:[(0,n.jsx)(`p`,{className:`reinspect-setting-name`,children:`INSPECT_MODE`}),(0,n.jsx)(`p`,{className:`reinspect-setting-short-description`,children:m})]}),(0,n.jsxs)(`span`,{className:`reinspect-tooltip-host`,children:[(0,n.jsx)(`button`,{type:`button`,className:`reinspect-tooltip-trigger`,"aria-label":`Explain INSPECT_MODE`,children:`?`}),(0,n.jsx)(`span`,{className:`reinspect-tooltip-content`,role:`tooltip`,children:h})]})]}),(0,n.jsxs)(`label`,{className:`reinspect-settings-select-row`,children:[(0,n.jsx)(`span`,{className:`reinspect-settings-toggle-label`,children:`Inspect Mode`}),(0,n.jsxs)(`select`,{"data-testid":`reinspect-setting-inspect-mode`,value:s,onChange:t=>{let n=t.currentTarget.value;e.r(n)&&c(n)},children:[(0,n.jsx)(`option`,{value:`wrapped`,children:`Only wrapped components`}),(0,n.jsx)(`option`,{value:`first-party`,children:`All 1st-party components`}),(0,n.jsx)(`option`,{value:`all`,children:`All components`})]})]}),(0,n.jsx)(`button`,{type:`button`,className:`reinspect-apply-button`,"data-testid":`reinspect-apply-inspect-mode`,onClick:u,disabled:!l,children:`Apply & Reload`}),l?(0,n.jsx)(`p`,{className:`reinspect-setting-note`,"data-testid":`reinspect-inspect-mode-reload-note`,children:`Inspect mode changes are applied after reload.`}):(0,n.jsxs)(`p`,{className:`reinspect-setting-note`,children:[`Current mode: `,o]})]}),(0,n.jsx)(`div`,{className:`reinspect-settings-divider`}),(0,n.jsxs)(`section`,{className:`reinspect-setting-block`,children:[(0,n.jsxs)(`header`,{className:`reinspect-setting-header`,children:[(0,n.jsxs)(`div`,{children:[(0,n.jsx)(`p`,{className:`reinspect-setting-name`,children:`RENDER_COUNTERS`}),(0,n.jsx)(`p`,{className:`reinspect-setting-short-description`,children:f})]}),(0,n.jsxs)(`span`,{className:`reinspect-tooltip-host`,children:[(0,n.jsx)(`button`,{type:`button`,className:`reinspect-tooltip-trigger`,"aria-label":`Explain RENDER_COUNTERS`,children:`?`}),(0,n.jsx)(`span`,{className:`reinspect-tooltip-content`,role:`tooltip`,children:p})]})]}),(0,n.jsxs)(`label`,{className:`reinspect-settings-select-row`,children:[(0,n.jsx)(`span`,{className:`reinspect-settings-toggle-label`,children:`Counter mode`}),(0,n.jsxs)(`select`,{"data-testid":`reinspect-setting-render-counters`,value:g,onChange:t=>{let n=t.currentTarget.value;e.i(n)&&_(n)},children:[(0,n.jsx)(`option`,{value:`off`,children:`Off`}),(0,n.jsx)(`option`,{value:`attempts`,children:`Render attempts`}),(0,n.jsx)(`option`,{value:`commits`,children:`Committed renders`}),(0,n.jsx)(`option`,{value:`both`,children:`Both`})]})]})]})]}):null]}):null}function v(t,n){let r={source:`manual`,scope:`first-party`};return n?.name&&(r.componentName=n.name),e.t(t,r)}o(r),exports.ReinspectProvider=g,exports.useReinspect=d,exports.withReinspect=v;
|
|
1
|
+
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./wrap-Cc3mMcCA.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);var r=`: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}`,i=`reinspect-runtime-styles`;function a(){return typeof document>`u`?null:document}function o(e){if(!e)return;let t=a();if(!t||t.getElementById(i))return;let n=t.createElement(`style`);n.id=i,n.textContent=e,(t.head??t.documentElement).appendChild(n)}function s(e){let t={};for(let n of e)t[n]=!0;return t}function c(e){return{isActive:e.startActive,inspectMode:e.inspectMode,pendingInspectMode:e.inspectMode,inspectWhitelist:e.inspectWhitelist,inspectBlacklist:e.inspectBlacklist,renderCounterMode:e.renderCounters,propsSerializationMode:e.propsSerializationMode,menuTheme:e.menuTheme,menuOpenGesture:e.menuOpenGesture,renderCountComponents:s(e.countRendersForComponents),overrides:{}}}function l(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 u(e,t){return e.regex===t.regex&&e.wholeWord===t.wholeWord&&e.matchCase===t.matchCase&&l(e.patterns,t.patterns)}function d(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 f(e,t){switch(t.type){case`hydrate-config`:{let n=s(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&&u(r.inspectWhitelist,e.inspectWhitelist)&&u(r.inspectBlacklist,e.inspectBlacklist)&&r.renderCounterMode===e.renderCounterMode&&r.propsSerializationMode===e.propsSerializationMode&&r.menuTheme===e.menuTheme&&d(r.menuOpenGesture,e.menuOpenGesture)&&l(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.inspectMode===t.value?e:{...e,inspectMode:t.value,pendingInspectMode:t.value};case`set-inspect-whitelist`:return u(e.inspectWhitelist,t.value)?e:{...e,inspectWhitelist:t.value};case`set-inspect-blacklist`:return u(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 d(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,renderCountComponents:{...e.renderCountComponents,[t.componentName]:!0}};if(!e.renderCountComponents[t.componentName])return e;let n={...e.renderCountComponents};return delete n[t.componentName],{...e,renderCountComponents:n}}case`update-override`:{let n={...e.overrides[t.componentId]??{}};if(t.value===void 0||t.value===null||t.value===``?delete n[t.prop]:n[t.prop]=t.value,Object.keys(n).length===0){if(!e.overrides[t.componentId])return e;let n={...e.overrides};return delete n[t.componentId],{...e,overrides:n}}return{...e,overrides:{...e.overrides,[t.componentId]:n}}}default:return e}}function p(){let n=(0,t.useContext)(e.x);if(!n)throw Error(`useReinspect must be used within ReinspectProvider`);return n}var m=new Map;function h(e){let t=m.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 m.set(e,r),r}function g(e){let t=h(e);return`hsl(${t%360} ${60+(t>>>8)%14}% ${52+(t>>>16)%8}%)`}function _({label:e,description:t}){return(0,n.jsx)(`span`,{className:`reinspect-inline-hint`,title:t,"aria-label":t,children:e})}function v(e){return e.split(/[\r\n,]+/g).map(e=>e.trim()).filter(e=>e.length>0)}function y(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 b(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 x(e){return e.ctrl||e.alt||e.shift||e.meta}function S(e){return{ctrl:e.ctrlKey,alt:e.altKey,shift:e.shiftKey,meta:e.metaKey}}function C({title:e,info:r,filter:i,setFilter:a,invalidPatterns:o,patternsInputTestId:s,regexTestId:c,wholeWordTestId:l,matchCaseTestId:u,invalidMessageTestId:d}){let[f,p]=(0,t.useState)(``),m=(0,t.useRef)([]),h=(0,t.useCallback)(()=>{v(f).length!==0&&(m.current=[],p(``))},[f]),g=(0,t.useCallback)(e=>{a(t=>({...t,patterns:t.patterns.filter(t=>t!==e)}))},[a]),b=(0,t.useCallback)(()=>{a(e=>({...e,patterns:[]})),m.current=[],p(``)},[a]),x=e=>{e.key===`Enter`&&(e.preventDefault(),h())},S=e=>{let t=v(e);p(e),a(e=>{let n=e.patterns.filter(e=>!m.current.includes(e));return{...e,patterns:y(n,t)}}),m.current=t};return(0,n.jsxs)(`section`,{className:`reinspect-filter-section`,children:[(0,n.jsxs)(`div`,{className:`reinspect-filter-row-header`,children:[(0,n.jsxs)(`p`,{className:`reinspect-filter-title`,children:[e,` `,(0,n.jsx)(_,{label:`?`,description:r})]}),(0,n.jsx)(`button`,{type:`button`,className:`reinspect-filter-clear-button`,onClick:b,disabled:i.patterns.length===0,"data-testid":`${s}-clear`,children:`Clear`})]}),(0,n.jsxs)(`div`,{className:`reinspect-filter-toolbar`,children:[(0,n.jsx)(`span`,{className:`reinspect-filter-search-icon`,"aria-hidden":`true`,children:(0,n.jsx)(`svg`,{viewBox:`0 0 24 24`,focusable:`false`,children:(0,n.jsx)(`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`})})}),(0,n.jsx)(`input`,{"data-testid":s,className:`reinspect-filter-search-input`,type:`search`,"aria-label":`${e} patterns`,value:f,placeholder:`Add ${e.toLowerCase()} pattern`,onChange:e=>S(e.currentTarget.value),onKeyDown:x}),(0,n.jsx)(`button`,{type:`button`,className:`reinspect-filter-modifier`,"data-state":i.regex?`active`:`idle`,"data-testid":c,title:`Regex`,"aria-label":`${e} regex modifier`,onClick:()=>a(e=>({...e,regex:!e.regex})),children:`.*`}),(0,n.jsx)(`button`,{type:`button`,className:`reinspect-filter-modifier`,"data-state":i.wholeWord?`active`:`idle`,"data-testid":l,title:`Whole word`,"aria-label":`${e} whole-word modifier`,onClick:()=>a(e=>({...e,wholeWord:!e.wholeWord})),children:`W`}),(0,n.jsx)(`button`,{type:`button`,className:`reinspect-filter-modifier`,"data-state":i.matchCase?`active`:`idle`,"data-testid":u,title:`Match case`,"aria-label":`${e} case-sensitive modifier`,onClick:()=>a(e=>({...e,matchCase:!e.matchCase})),children:`Aa`}),(0,n.jsx)(`button`,{type:`button`,className:`reinspect-filter-add-button`,onClick:h,disabled:v(f).length===0,"data-testid":`${s}-add`,children:`Add`})]}),i.patterns.length>0?(0,n.jsx)(`div`,{className:`reinspect-filter-chip-list`,children:i.patterns.map(e=>(0,n.jsxs)(`span`,{className:`reinspect-filter-chip`,children:[(0,n.jsx)(`code`,{children:e}),(0,n.jsx)(`button`,{type:`button`,className:`reinspect-filter-chip-remove`,"aria-label":`Remove ${e}`,onClick:()=>g(e),children:`×`})]},e))}):(0,n.jsx)(`p`,{className:`reinspect-setting-empty-state`,children:`No patterns configured.`}),o.length>0?(0,n.jsxs)(`p`,{className:`reinspect-error`,"data-testid":d,children:[`Invalid regex patterns ignored: `,o.join(`, `)]}):null]})}function w({children:r,config:i}){let a=(0,t.useMemo)(()=>e.v(i),[i]),o=(0,t.useRef)({}),[s,l]=(0,t.useReducer)(f,a,c);(0,t.useEffect)(()=>{l({type:`hydrate-config`,config:a})},[a]);let u=(0,t.useCallback)(e=>{l({type:`set-is-active`,value:typeof e==`function`?e(s.isActive):e})},[s.isActive]),d=(0,t.useCallback)(t=>{let n=typeof t==`function`?t(s.pendingInspectMode):t;l({type:`set-pending-inspect-mode`,value:n}),e.p(n)},[s.pendingInspectMode]),p=(0,t.useCallback)(t=>{let n=e.d(typeof t==`function`?t(s.inspectWhitelist):t);l({type:`set-inspect-whitelist`,value:n}),e.m(n)},[s.inspectWhitelist]),m=(0,t.useCallback)(t=>{let n=e.d(typeof t==`function`?t(s.inspectBlacklist):t);l({type:`set-inspect-blacklist`,value:n}),e.f(n)},[s.inspectBlacklist]),h=(0,t.useCallback)(e=>{l({type:`set-render-counter-mode`,value:typeof e==`function`?e(s.renderCounterMode):e})},[s.renderCounterMode]),_=(0,t.useCallback)(t=>{let n=typeof t==`function`?t(s.propsSerializationMode):t;l({type:`set-props-serialization-mode`,value:n}),e._(n)},[s.propsSerializationMode]),v=(0,t.useCallback)(t=>{let n=typeof t==`function`?t(s.menuTheme):t;l({type:`set-menu-theme`,value:n}),e.g(n)},[s.menuTheme]),y=(0,t.useCallback)(t=>{let n=typeof t==`function`?t(s.menuOpenGesture):t;l({type:`set-menu-open-gesture`,value:n}),e.h(n)},[s.menuOpenGesture]),b=(0,t.useCallback)((e,t,n)=>{l({type:`update-override`,componentId:e,prop:t,value:n})},[]),x=(0,t.useCallback)((e,t)=>{l({type:`set-render-counting-for-component`,componentName:e,enabled:t})},[]),S=(0,t.useCallback)(e=>s.renderCounterMode!==`off`||!!s.renderCountComponents[e],[s.renderCounterMode,s.renderCountComponents]),C=s.pendingInspectMode!==s.inspectMode,w=(0,t.useCallback)(()=>{},[]),E=(0,t.useMemo)(()=>e.i(s.inspectWhitelist),[s.inspectWhitelist]),D=(0,t.useMemo)(()=>e.i(s.inspectBlacklist),[s.inspectBlacklist]),O=E.invalidPatterns,k=D.invalidPatterns,A=(0,t.useCallback)(t=>e.a(t,E,D),[E,D]),j=(0,t.useCallback)(e=>{let t=o.current[e];if(t)return t;let n=g(e);return o.current[e]=n,n},[]),M=(0,t.useMemo)(()=>({config:a,isActive:a.enabled&&s.isActive,setIsActive:u,inspectMode:s.inspectMode,pendingInspectMode:s.pendingInspectMode,setPendingInspectMode:d,hasPendingInspectModeChange:C,applyInspectMode:w,inspectWhitelist:s.inspectWhitelist,setInspectWhitelist:p,inspectWhitelistInvalidPatterns:O,inspectBlacklist:s.inspectBlacklist,setInspectBlacklist:m,inspectBlacklistInvalidPatterns:k,isComponentInspectableByFilters:A,renderCounterMode:s.renderCounterMode,setRenderCounterMode:h,propsSerializationMode:s.propsSerializationMode,setPropsSerializationMode:_,menuTheme:s.menuTheme,setMenuTheme:v,menuOpenGesture:s.menuOpenGesture,setMenuOpenGesture:y,renderCountComponents:s.renderCountComponents,setRenderCountingForComponent:x,isRenderCountingEnabledFor:S,overrides:s.overrides,updateOverride:b,getColor:j}),[a,s.isActive,u,s.inspectMode,s.pendingInspectMode,d,C,w,s.inspectWhitelist,p,O,s.inspectBlacklist,m,k,A,s.renderCounterMode,h,s.propsSerializationMode,_,s.menuTheme,v,s.menuOpenGesture,y,s.renderCountComponents,x,S,s.overrides,b,j]);return(0,n.jsxs)(e.x.Provider,{value:M,children:[r,a.enabled&&a.showFloatingToggle?(0,n.jsx)(T,{}):null]})}function T(){let{config:r,isActive:i,setIsActive:a,pendingInspectMode:o,setPendingInspectMode:s,inspectWhitelist:c,setInspectWhitelist:l,inspectWhitelistInvalidPatterns:u,inspectBlacklist:d,setInspectBlacklist:f,inspectBlacklistInvalidPatterns:m,renderCounterMode:h,setRenderCounterMode:g,propsSerializationMode:v,setPropsSerializationMode:y,menuTheme:w,setMenuTheme:T,menuOpenGesture:E,setMenuOpenGesture:D}=p(),[O,k]=(0,t.useState)(!1),[A,j]=(0,t.useState)(`filter`),[M,N]=(0,t.useState)(!1),P=(0,t.useRef)(null),F=(0,t.useRef)(null),I=(0,t.useRef)(null),L=(0,t.useRef)(!1);return(0,t.useEffect)(()=>{if(!O)return;let e=e=>{let t=e.target;t instanceof Node&&(F.current?.contains(t)||k(!1))},t=e=>{e.key===`Escape`&&k(!1)};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[O]),(0,t.useEffect)(()=>{if(!O||!I.current)return;let t=I.current;e.y(t);let n=n=>{e.b(n,t)};return document.addEventListener(`keydown`,n),()=>{document.removeEventListener(`keydown`,n)}},[O]),(0,t.useEffect)(()=>{L.current&&!O&&P.current?.focus(),L.current=O},[O]),(0,t.useEffect)(()=>{if(!M)return;let e=e=>{let t=S(e);x(t)&&(e.preventDefault(),e.stopPropagation(),D(e=>({...e,mode:`modifier-right-click`,modifiers:t})),N(!1))};return document.addEventListener(`keydown`,e,!0),()=>{document.removeEventListener(`keydown`,e,!0)}},[M,D]),r.enabled?(0,n.jsxs)(`div`,{className:`reinspect-floating-root`,ref:F,"data-reinspect-theme":w,children:[(0,n.jsx)(`button`,{type:`button`,ref:P,className:`reinspect-floating-toggle`,"data-reinspect-theme":w,"data-testid":`reinspect-floating-toggle`,onClick:()=>k(e=>!e),"aria-expanded":O,"aria-controls":`reinspect-settings-menu`,children:`Reinspect settings`}),O?(0,n.jsxs)(`div`,{id:`reinspect-settings-menu`,ref:I,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:[(0,n.jsxs)(`div`,{className:`reinspect-settings-header-row`,children:[(0,n.jsx)(`p`,{className:`reinspect-settings-title`,children:`Reinspect settings`}),(0,n.jsxs)(`div`,{className:`reinspect-settings-inline-switch`,children:[(0,n.jsx)(`span`,{className:`reinspect-settings-toggle-label`,children:i?`Enabled`:`Disabled`}),(0,n.jsx)(`button`,{type:`button`,role:`switch`,"aria-checked":i,"aria-label":`Toggle inspector enabled`,"data-testid":`reinspect-setting-inspector-active`,className:`reinspect-switch-button`,"data-state":i?`on`:`off`,title:i?`Disable inspector`:`Enable inspector`,onClick:()=>a(!i)})]})]}),(0,n.jsxs)(`div`,{className:`reinspect-settings-tabs`,role:`tablist`,"aria-label":`Reinspect settings categories`,children:[(0,n.jsx)(`button`,{type:`button`,role:`tab`,id:`reinspect-settings-tab-filter`,"data-testid":`reinspect-settings-tab-filter`,"data-state":A===`filter`?`active`:`idle`,"aria-selected":A===`filter`,"aria-controls":`reinspect-settings-panel-filter`,onClick:()=>j(`filter`),children:`Filter`}),(0,n.jsx)(`button`,{type:`button`,role:`tab`,id:`reinspect-settings-tab-settings`,"data-testid":`reinspect-settings-tab-settings`,"data-state":A===`settings`?`active`:`idle`,"aria-selected":A===`settings`,"aria-controls":`reinspect-settings-panel-settings`,onClick:()=>j(`settings`),children:`Settings`})]}),(0,n.jsx)(`div`,{className:`reinspect-settings-divider`}),A===`filter`?(0,n.jsxs)(`div`,{className:`reinspect-settings-tab-panel`,role:`tabpanel`,id:`reinspect-settings-panel-filter`,"aria-labelledby":`reinspect-settings-tab-filter`,children:[(0,n.jsx)(C,{title:`Include`,info:`Only matching component names remain inspectable.`,filter:c,setFilter:l,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`}),(0,n.jsx)(C,{title:`Exclude`,info:`Matching component names are hidden from inspection.`,filter:d,setFilter:f,invalidPatterns:m,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`}),(0,n.jsx)(`p`,{className:`reinspect-setting-note`,children:`Exclude patterns override include patterns.`}),(0,n.jsx)(`section`,{className:`reinspect-setting-block`,children:(0,n.jsxs)(`label`,{className:`reinspect-settings-select-row`,children:[(0,n.jsxs)(`span`,{className:`reinspect-settings-toggle-label`,children:[`Component scope`,` `,(0,n.jsx)(_,{label:`?`,description:`Choose which component groups can be inspected.`})]}),(0,n.jsxs)(`select`,{"data-testid":`reinspect-setting-inspect-mode`,value:o,onChange:t=>{let n=t.currentTarget.value;e.o(n)&&s(n)},children:[(0,n.jsx)(`option`,{value:`wrapped`,children:`Only wrapped components`}),(0,n.jsx)(`option`,{value:`first-party`,children:`All 1st-party components`}),(0,n.jsx)(`option`,{value:`all`,children:`All components`})]})]})})]}):(0,n.jsx)(`div`,{className:`reinspect-settings-tab-panel`,role:`tabpanel`,id:`reinspect-settings-panel-settings`,"aria-labelledby":`reinspect-settings-tab-settings`,children:(0,n.jsxs)(`section`,{className:`reinspect-setting-block`,children:[(0,n.jsxs)(`label`,{className:`reinspect-settings-select-row`,children:[(0,n.jsxs)(`span`,{className:`reinspect-settings-toggle-label`,children:[`Render counter mode`,` `,(0,n.jsx)(_,{label:`?`,description:`Pick whether render attempts, commits, both, or no counters are shown.`})]}),(0,n.jsxs)(`select`,{"data-testid":`reinspect-setting-render-counters`,value:h,onChange:t=>{let n=t.currentTarget.value;e.u(n)&&g(n)},children:[(0,n.jsx)(`option`,{value:`off`,children:`Off`}),(0,n.jsx)(`option`,{value:`attempts`,children:`Render attempts`}),(0,n.jsx)(`option`,{value:`commits`,children:`Committed renders`}),(0,n.jsx)(`option`,{value:`both`,children:`Both`})]})]}),(0,n.jsx)(`p`,{className:`reinspect-setting-note`,children:`Per-component capture can be toggled from each component menu.`}),(0,n.jsxs)(`label`,{className:`reinspect-settings-select-row`,children:[(0,n.jsxs)(`span`,{className:`reinspect-settings-toggle-label`,children:[`Menu theme`,` `,(0,n.jsx)(_,{label:`?`,description:`Choose the Reinspect menu appearance.`})]}),(0,n.jsxs)(`select`,{"data-testid":`reinspect-setting-menu-theme`,value:w,onChange:t=>{let n=t.currentTarget.value;e.c(n)&&T(n)},children:[(0,n.jsx)(`option`,{value:`light`,children:`Light`}),(0,n.jsx)(`option`,{value:`dark`,children:`Dark`})]})]}),(0,n.jsxs)(`label`,{className:`reinspect-settings-select-row`,children:[(0,n.jsxs)(`span`,{className:`reinspect-settings-toggle-label`,children:[`Menu open trigger`,` `,(0,n.jsx)(_,{label:`?`,description:`Choose how to open the inspector menu on components.`})]}),(0,n.jsxs)(`select`,{"data-testid":`reinspect-setting-menu-open-trigger`,value:E.mode,onChange:t=>{let n=t.currentTarget.value;e.s(n)&&D(e=>({...e,mode:n}))},children:[(0,n.jsx)(`option`,{value:`right-click`,children:`Right click`}),(0,n.jsx)(`option`,{value:`modifier-right-click`,children:`Right click + modifier macro`})]})]}),E.mode===`modifier-right-click`?(0,n.jsxs)(`section`,{className:`reinspect-setting-block reinspect-macro-setting`,children:[(0,n.jsxs)(`p`,{className:`reinspect-setting-note`,"data-testid":`reinspect-setting-menu-open-modifier-label`,children:[`Current macro:`,` `,(0,n.jsx)(`code`,{children:b(E.modifiers)})]}),(0,n.jsxs)(`div`,{className:`reinspect-inline-controls`,children:[(0,n.jsx)(`button`,{type:`button`,"data-testid":`reinspect-setting-menu-open-modifier-record`,onClick:()=>{N(e=>!e)},"data-state":M?`active`:`idle`,children:M?`Press modifier keys...`:`Record macro`}),(0,n.jsx)(`button`,{type:`button`,"data-testid":`reinspect-setting-menu-open-modifier-reset`,onClick:()=>D(t=>({...t,modifiers:{...e.r}})),children:`Reset to Shift`})]}),(0,n.jsx)(`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.`})]}):null,(0,n.jsxs)(`label`,{className:`reinspect-settings-select-row`,children:[(0,n.jsxs)(`span`,{className:`reinspect-settings-toggle-label`,children:[`Props JSON detail`,` `,(0,n.jsx)(_,{label:`?`,description:`Choose how much data appears in JSON previews and the Raw props editor.`})]}),(0,n.jsxs)(`select`,{"data-testid":`reinspect-setting-props-serialization-mode`,value:v,onChange:t=>{let n=t.currentTarget.value;e.l(n)&&y(n)},children:[(0,n.jsx)(`option`,{value:`distilled`,children:`Distilled (recommended)`}),(0,n.jsx)(`option`,{value:`complete`,children:`Complete (includes internals)`})]})]}),(0,n.jsx)(`p`,{className:`reinspect-setting-helper-text`,children:v===`distilled`?`Shows app-level props first and hides React internals like _owner.`:`Shows the full object graph, including React internals and metadata.`})]})})]}):null]}):null}function E(t,n){let r={source:`manual`,scope:`first-party`};return n?.name&&(r.componentName=n.name),e.t(t,r)}o(r),exports.ReinspectProvider=w,exports.useReinspect=p,exports.withReinspect=E;
|
package/dist/lib/index.d.ts
CHANGED
|
@@ -2,6 +2,6 @@ import './reinspect.css';
|
|
|
2
2
|
export { ReinspectProvider } from './context';
|
|
3
3
|
export { useReinspect } from './useReinspect';
|
|
4
4
|
export { withReinspect } from './withReinspect';
|
|
5
|
-
export type { InspectMode, RenderCounterMode, ReinspectConfig, ResolvedReinspectConfig, } from './types';
|
|
5
|
+
export type { InspectFilter, InspectFilterConfig, InspectMode, MenuOpenGesture, MenuOpenGestureConfig, MenuOpenModifiers, MenuOpenTriggerMode, PropsSerializationMode, RenderCounterMode, ReinspectConfig, ResolvedReinspectConfig, } from './types';
|
|
6
6
|
export type { WithReinspectOptions } from './withReinspect';
|
|
7
7
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/lib/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/reinspect/index.ts"],"names":[],"mappings":"AAEA,OAAO,iBAAiB,CAAA;AAMxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,YAAY,EACV,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,uBAAuB,GACxB,MAAM,SAAS,CAAA;AAEhB,YAAY,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/reinspect/index.ts"],"names":[],"mappings":"AAEA,OAAO,iBAAiB,CAAA;AAMxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,YAAY,EACV,aAAa,EACb,mBAAmB,EACnB,WAAW,EACX,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,mBAAmB,EACnB,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,EACf,uBAAuB,GACxB,MAAM,SAAS,CAAA;AAEhB,YAAY,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA"}
|