react-reinspect 0.1.7 → 0.1.8

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.
Files changed (60) hide show
  1. package/README.md +21 -37
  2. package/dist/lib/autoWrap.d.ts +1 -8
  3. package/dist/lib/autoWrap.d.ts.map +1 -1
  4. package/dist/lib/constants.d.ts +2 -2
  5. package/dist/lib/constants.d.ts.map +1 -1
  6. package/dist/lib/context.d.ts +1 -3
  7. package/dist/lib/context.d.ts.map +1 -1
  8. package/dist/lib/core/renderCounter.d.ts +11 -0
  9. package/dist/lib/core/renderCounter.d.ts.map +1 -0
  10. package/dist/lib/core/state.d.ts +42 -0
  11. package/dist/lib/core/state.d.ts.map +1 -0
  12. package/dist/lib/dom/styleInjection.d.ts +2 -0
  13. package/dist/lib/dom/styleInjection.d.ts.map +1 -0
  14. package/dist/lib/index.cjs +1 -1
  15. package/dist/lib/index.d.ts +2 -5
  16. package/dist/lib/index.d.ts.map +1 -1
  17. package/dist/lib/index.js +258 -1156
  18. package/dist/lib/injectStyles.d.ts +1 -1
  19. package/dist/lib/injectStyles.d.ts.map +1 -1
  20. package/dist/lib/internal/auto-wrap.cjs +1 -0
  21. package/dist/lib/internal/auto-wrap.d.ts +9 -0
  22. package/dist/lib/internal/auto-wrap.d.ts.map +1 -0
  23. package/dist/lib/internal/auto-wrap.js +12 -0
  24. package/dist/lib/propsInspector.d.ts.map +1 -1
  25. package/dist/lib/react/context.d.ts +3 -0
  26. package/dist/lib/react/context.d.ts.map +1 -0
  27. package/dist/lib/react/overlay.d.ts +15 -0
  28. package/dist/lib/react/overlay.d.ts.map +1 -0
  29. package/dist/lib/react/provider.d.ts +4 -0
  30. package/dist/lib/react/provider.d.ts.map +1 -0
  31. package/dist/lib/react/wrap.d.ts +11 -0
  32. package/dist/lib/react/wrap.d.ts.map +1 -0
  33. package/dist/lib/store.d.ts +1 -2
  34. package/dist/lib/store.d.ts.map +1 -1
  35. package/dist/lib/types.d.ts +24 -17
  36. package/dist/lib/types.d.ts.map +1 -1
  37. package/dist/lib/utils.d.ts +4 -4
  38. package/dist/lib/utils.d.ts.map +1 -1
  39. package/dist/lib/withReinspect.d.ts +1 -6
  40. package/dist/lib/withReinspect.d.ts.map +1 -1
  41. package/dist/lib/wrap-8xVFW-im.js +996 -0
  42. package/dist/lib/wrap-Bu931FVO.cjs +1 -0
  43. package/dist/lib/wrapInspectableMap.d.ts +1 -1
  44. package/dist/lib/wrapInspectableMap.d.ts.map +1 -1
  45. package/dist/lib/wrapMarker.d.ts +6 -3
  46. package/dist/lib/wrapMarker.d.ts.map +1 -1
  47. package/dist/plugin/internal/autoDiscoverTransform.d.ts +26 -0
  48. package/dist/plugin/internal/autoDiscoverTransform.d.ts.map +1 -0
  49. package/dist/plugin/internal/autoDiscoverTransform.js +397 -0
  50. package/dist/plugin/reinspectAutoDiscoverPlugin.d.ts +5 -8
  51. package/dist/plugin/reinspectAutoDiscoverPlugin.d.ts.map +1 -1
  52. package/dist/plugin/reinspectAutoDiscoverPlugin.js +11 -358
  53. package/dist/plugin/reinspectNextAutoDiscoverLoader.d.ts +1 -0
  54. package/dist/plugin/reinspectNextAutoDiscoverLoader.d.ts.map +1 -1
  55. package/dist/plugin/reinspectNextAutoDiscoverLoader.js +5 -27
  56. package/dist/plugin/reinspectNextPlugin.d.ts +2 -0
  57. package/dist/plugin/reinspectNextPlugin.d.ts.map +1 -1
  58. package/dist/plugin/reinspectNextPlugin.js +19 -15
  59. package/docs/assets/screenshot-example.png +0 -0
  60. package/package.json +8 -2
package/README.md CHANGED
@@ -37,8 +37,7 @@ React DevTools is excellent for component trees and profiling.
37
37
  - Capture mode: `attempts` | `commits` | `both`
38
38
  - Flexible wrapping:
39
39
  - `withReinspect(...)`
40
- - `wrapInspectableMap(...)`
41
- - `autoWrapInspectable(...)` (for auto-discovery pipelines)
40
+ - auto-discovery wrapping via `reinspectAutoDiscoverPlugin(...)` / `withReinspectAutoDiscover(...)`
42
41
 
43
42
  ## Install
44
43
 
@@ -66,7 +65,7 @@ import react from '@vitejs/plugin-react'
66
65
  import { reinspectAutoDiscoverPlugin } from 'react-reinspect/vite-plugin'
67
66
 
68
67
  export default defineConfig({
69
- plugins: [reinspectAutoDiscoverPlugin(), react()],
68
+ plugins: [reinspectAutoDiscoverPlugin({ include: 'first-party' }), react()],
70
69
  })
71
70
  ```
72
71
 
@@ -88,7 +87,13 @@ If your Next dev server runs with Turbopack, switch to webpack mode for this tra
88
87
 
89
88
  ## Example
90
89
 
91
- ![screen shot example showing react-reinspect](docs/assets/screenshot-example.png)
90
+ ![react-reinspect runtime inspector example](https://cdn.jsdelivr.net/npm/react-reinspect@latest/docs/assets/screenshot-example.png)
91
+
92
+ ## Screenshots
93
+
94
+ ### Runtime inspector in-app
95
+
96
+ ![react-reinspect overlay, props editor, and rerender badge](https://cdn.jsdelivr.net/npm/react-reinspect@latest/docs/assets/screenshot-example.png)
92
97
 
93
98
 
94
99
  ## Agentic Quick Start
@@ -177,7 +182,9 @@ export default defineConfig({
177
182
  import { withReinspectAutoDiscover } from 'react-reinspect/next-plugin'
178
183
 
179
184
  const nextConfig = {}
180
- export default withReinspectAutoDiscover(nextConfig)
185
+ export default withReinspectAutoDiscover(nextConfig, {
186
+ includeThirdParty: false,
187
+ })
181
188
 
182
189
  // Next.js dev script for auto-discovery:
183
190
  // package.json -> "dev": "next dev --webpack"
@@ -205,7 +212,7 @@ const reinspectConfig: ReinspectConfig = {
205
212
  // startActive: true, // start with inspector active when page loads
206
213
  // showFloatingToggle: true, // show floating react-reinspect settings button
207
214
  // inspectMode: 'wrapped', // wrapped: only wrapped components, first-party: wrapped + components with inspectable metadata, all: all components
208
- // editableProps: DEFAULT_EDITABLE_PROPS, // change the CSS props you can edit
215
+ // editableProps: ['padding', 'margin'], // change the CSS props you can edit
209
216
  }
210
217
 
211
218
  export function AppProviders({ children }: { children: React.ReactNode }) {
@@ -333,16 +340,15 @@ Wrap your app root.
333
340
 
334
341
  | Option | Type | Default | Notes |
335
342
  |---|---|---|---|
336
- | `enabled` | `boolean` | `import.meta.env.DEV` | Master on/off. |
343
+ | `enabled` | `boolean` | `false` | Master on/off. |
337
344
  | `startActive` | `boolean` | `true` | Initial inspector active state. |
338
345
  | `showFloatingToggle` | `boolean` | `enabled` | Show built-in settings button. |
339
346
  | `inspectMode` | `'wrapped' \| 'first-party' \| 'all'` | `'wrapped'` | Auto-wrap visibility behavior. |
340
- | `editableProps` | `EditableStyleProp[]` | `DEFAULT_EDITABLE_PROPS` | CSS props editable in inspector. |
341
- | `palette` | `string[]` | `DEFAULT_PALETTE` | Component outline/badge colors. |
347
+ | `editableProps` | `EditableStyleProp[]` | built-in defaults | CSS props editable in inspector. |
348
+ | `palette` | `string[]` | built-in defaults | Component outline/badge colors. |
342
349
  | `zIndexBase` | `number` | `2147483000` | Overlay stacking baseline. |
343
- | `shouldCountRenders` | `boolean` | `false` | Global rerender counting. |
344
- | `countRendersForComponents` | `string[]` | `[]` | Enable counting for specific names. |
345
- | `renderCaptureMode` | `'attempts' \| 'commits' \| 'both'` | `'attempts'` | Counter mode shown in badges. |
350
+ | `renderCounters` | `'off' \| 'attempts' \| 'commits' \| 'both'` | `'off'` | Global render-counter mode. |
351
+ | `countRendersForComponents` | `string[]` | `[]` | Component-specific counting when global mode is `off`. |
346
352
 
347
353
  ### `withReinspect(Component, options?)`
348
354
 
@@ -350,22 +356,10 @@ Wrap a component manually.
350
356
 
351
357
  `options`:
352
358
  - `name?: string`
353
- - `fallbackName?: string`
354
- - `source?: 'manual' | 'auto'`
355
- - `scope?: 'first-party' | 'third-party'`
356
359
 
357
- ### `wrapInspectableMap(componentMap, options?)`
360
+ `wrapInspectableMap` remains available as an internal utility (`react-reinspect/dist` deep-import), but is no longer part of the stable public runtime API.
358
361
 
359
- Batch-wrap a map of components while preserving prop types.
360
-
361
- ### `autoWrapInspectable(Component, metadata)`
362
-
363
- Helper for auto-discovery transforms.
364
-
365
- `metadata`:
366
- - `scope: 'first-party' | 'third-party'`
367
- - `componentName?: string`
368
- - `fallbackName?: string`
362
+ `autoWrapInspectable` is now internal-only and used by the transform plugins via `react-reinspect/internal/auto-wrap`.
369
363
 
370
364
  ### `useReinspect()`
371
365
 
@@ -373,7 +367,7 @@ Hook to read/update runtime inspector state from your own UI.
373
367
 
374
368
  ## Production Guidance
375
369
 
376
- - Default behavior is dev-friendly (`enabled` resolves from `import.meta.env.DEV`).
370
+ - Default behavior is production-safe (`enabled` defaults to `false`).
377
371
  - If you want zero wrapper markup in production, gate wrapping at definition time:
378
372
 
379
373
  ```tsx
@@ -401,13 +395,3 @@ pnpm pack:check
401
395
  npm login
402
396
  pnpm publish:npm
403
397
  ```
404
-
405
- ## Screenshots To Add (Recommended)
406
-
407
- If you want, share screenshots and I will wire them into this README.
408
-
409
- Suggested captures:
410
- - Floating settings panel open.
411
- - Right-click CSS editor on a real component.
412
- - Props inspector `Detected` tab with object/function props.
413
- - Rerender badges in `both` mode (`attempts | commits`).
@@ -1,9 +1,2 @@
1
- import type { ComponentType } from 'react';
2
- import type { AutoDiscoverScope } from './types';
3
- export interface AutoWrapInspectableMetadata {
4
- componentName?: string;
5
- fallbackName?: string;
6
- scope: AutoDiscoverScope;
7
- }
8
- export declare function autoWrapInspectable<P extends object>(Component: ComponentType<P>, metadata: AutoWrapInspectableMetadata): ComponentType<P>;
1
+ export { autoWrapInspectable, type AutoWrapInspectableMetadata, } from './internal/auto-wrap';
9
2
  //# sourceMappingURL=autoWrap.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"autoWrap.d.ts","sourceRoot":"","sources":["../../src/reinspect/autoWrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAIhD,MAAM,WAAW,2BAA2B;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,iBAAiB,CAAA;CACzB;AAED,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,EAClD,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAC3B,QAAQ,EAAE,2BAA2B,GACpC,aAAa,CAAC,CAAC,CAAC,CAYlB"}
1
+ {"version":3,"file":"autoWrap.d.ts","sourceRoot":"","sources":["../../src/reinspect/autoWrap.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,2BAA2B,GACjC,MAAM,sBAAsB,CAAA"}
@@ -1,6 +1,6 @@
1
1
  import type { EditableStyleProp } from './types';
2
- export declare const DEFAULT_EDITABLE_PROPS: EditableStyleProp[];
3
- export declare const DEFAULT_PALETTE: string[];
2
+ export declare const DEFAULT_EDITABLE_PROPS: readonly EditableStyleProp[];
3
+ export declare const DEFAULT_PALETTE: readonly string[];
4
4
  export declare const COLOR_STYLE_PROPS: Set<EditableStyleProp>;
5
5
  export declare const NUMERIC_STYLE_PROPS: Set<EditableStyleProp>;
6
6
  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,iBAAiB,EAarD,CAAA;AAED,eAAO,MAAM,eAAe,UAO3B,CAAA;AAED,eAAO,MAAM,iBAAiB,wBAI5B,CAAA;AAEF,eAAO,MAAM,mBAAmB,wBAS9B,CAAA;AAEF,eAAO,MAAM,kBAAkB,EAAE,iBAA6B,CAAA"}
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,eAAe,EAAE,SAAS,MAAM,EAO5C,CAAA;AAED,eAAO,MAAM,iBAAiB,wBAI5B,CAAA;AAEF,eAAO,MAAM,mBAAmB,wBAS9B,CAAA;AAEF,eAAO,MAAM,kBAAkB,EAAE,iBAA6B,CAAA"}
@@ -1,4 +1,2 @@
1
- import type { ReinspectProviderProps } from './types';
2
- export declare function ReinspectProvider({ children, config, }: ReinspectProviderProps): import("react/jsx-runtime").JSX.Element;
3
- export declare function ReinspectFloatingToggle(): import("react/jsx-runtime").JSX.Element | null;
1
+ export { ReinspectProvider, ReinspectFloatingToggle } from './react/provider';
4
2
  //# sourceMappingURL=context.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/reinspect/context.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAKV,sBAAsB,EAEvB,MAAM,SAAS,CAAA;AAyChB,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,MAAM,GACP,EAAE,sBAAsB,2CAmJxB;AAED,wBAAgB,uBAAuB,mDA4OtC"}
1
+ {"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/reinspect/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA"}
@@ -0,0 +1,11 @@
1
+ import type { RenderCounterMode } from '../types';
2
+ export interface RenderCounts {
3
+ attempts: number;
4
+ commits: number;
5
+ }
6
+ export declare function incrementRenderCounts(instanceId: string): void;
7
+ export declare function readRenderCounts(instanceId: string): RenderCounts;
8
+ export declare function resetRenderCounts(instanceId: string): void;
9
+ export declare function useRenderCounts(instanceId: string): RenderCounts;
10
+ export declare function formatRenderCountLabel(counts: RenderCounts, counterMode: RenderCounterMode): string;
11
+ //# sourceMappingURL=renderCounter.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"renderCounter.d.ts","sourceRoot":"","sources":["../../../src/reinspect/core/renderCounter.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAEjD,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;CAChB;AAsCD,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAO9D;AAED,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,YAAY,CAOjE;AAED,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAG1D;AA0BD,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,YAAY,CAWhE;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,YAAY,EACpB,WAAW,EAAE,iBAAiB,GAC7B,MAAM,CAUR"}
@@ -0,0 +1,42 @@
1
+ import type { ComponentStyleOverrides, EditableStyleProp, InspectMode, RenderCounterMode, ResolvedReinspectConfig, StyleOverrideValue } from '../types';
2
+ export interface ReinspectState {
3
+ isActive: boolean;
4
+ inspectMode: InspectMode;
5
+ pendingInspectMode: InspectMode;
6
+ renderCounterMode: RenderCounterMode;
7
+ renderCountComponents: Record<string, true>;
8
+ overrides: Record<string, ComponentStyleOverrides>;
9
+ }
10
+ interface HydrateConfigAction {
11
+ type: 'hydrate-config';
12
+ config: ResolvedReinspectConfig;
13
+ }
14
+ interface SetIsActiveAction {
15
+ type: 'set-is-active';
16
+ value: boolean;
17
+ }
18
+ interface SetPendingInspectModeAction {
19
+ type: 'set-pending-inspect-mode';
20
+ value: InspectMode;
21
+ }
22
+ interface SetRenderCounterModeAction {
23
+ type: 'set-render-counter-mode';
24
+ value: RenderCounterMode;
25
+ }
26
+ interface SetRenderCountingForComponentAction {
27
+ type: 'set-render-counting-for-component';
28
+ componentName: string;
29
+ enabled: boolean;
30
+ }
31
+ interface UpdateOverrideAction {
32
+ type: 'update-override';
33
+ componentId: string;
34
+ prop: EditableStyleProp;
35
+ value: StyleOverrideValue | undefined;
36
+ }
37
+ export type ReinspectStateAction = HydrateConfigAction | SetIsActiveAction | SetPendingInspectModeAction | SetRenderCounterModeAction | SetRenderCountingForComponentAction | UpdateOverrideAction;
38
+ export declare function buildRenderCountComponentMap(componentNames: readonly string[]): Record<string, true>;
39
+ export declare function buildInitialReinspectState(config: ResolvedReinspectConfig): ReinspectState;
40
+ export declare function reinspectStateReducer(state: ReinspectState, action: ReinspectStateAction): ReinspectState;
41
+ export {};
42
+ //# sourceMappingURL=state.d.ts.map
@@ -0,0 +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,CAWhB;AAuBD,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,cAAc,EACrB,MAAM,EAAE,oBAAoB,GAC3B,cAAc,CAwHhB"}
@@ -0,0 +1,2 @@
1
+ export declare function injectReinspectStyles(styleText: string): void;
2
+ //# sourceMappingURL=styleInjection.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styleInjection.d.ts","sourceRoot":"","sources":["../../../src/reinspect/dom/styleInjection.ts"],"names":[],"mappings":"AAUA,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAmB7D"}
@@ -1 +1 @@
1
- "use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`react`),t=require(`react/jsx-runtime`),n=require(`react-dom`);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)}var s=(0,e.createContext)(null);function c(){let t=(0,e.useContext)(s);if(!t)throw Error(`useReinspect must be used within ReinspectProvider`);return t}var l=[`backgroundColor`,`color`,`fontSize`,`padding`,`margin`,`borderRadius`,`borderWidth`,`borderColor`,`opacity`,`width`,`height`,`gap`],u=[`#f97316`,`#2563eb`,`#16a34a`,`#db2777`,`#ca8a04`,`#0f766e`],d=new Set([`backgroundColor`,`color`,`borderColor`]),ee=new Set([`fontSize`,`padding`,`margin`,`borderRadius`,`borderWidth`,`width`,`height`,`gap`]),f=2147483e3,p=`reinspect.inspectMode`,m=[`wrapped`,`first-party`,`all`],h=[`attempts`,`commits`,`both`];function g(){return!1}function _(e){return typeof e==`string`&&m.includes(e)}function v(e){return typeof e==`string`&&h.includes(e)}function y(){if(!(typeof window>`u`))try{let e=window.sessionStorage.getItem(p);return _(e)?e:void 0}catch{return}}function b(e){return y()||(_(e)?e:`wrapped`)}function te(e){if(!(typeof window>`u`))try{window.sessionStorage.setItem(p,e)}catch{}}function x(){if(!(typeof window>`u`))try{window.location.reload()}catch{}}function S(e={}){let t=e.enabled??g(),n=e.editableProps&&e.editableProps.length>0?e.editableProps:l,r=e.palette&&e.palette.length>0?e.palette:u;return{enabled:t,startActive:e.startActive??!0,showFloatingToggle:e.showFloatingToggle??t,inspectMode:b(e.inspectMode),editableProps:n,palette:r,zIndexBase:e.zIndexBase??f,shouldCountRenders:e.shouldCountRenders??!1,countRendersForComponents:e.countRendersForComponents??[],renderCaptureMode:v(e.renderCaptureMode)?e.renderCaptureMode:`attempts`}}function C(e){let t=0;for(let n=0;n<e.length;n+=1)t=(t<<5)-t+e.charCodeAt(n),t|=0;return Math.abs(t)}function ne(e,t){return t.length===0?u[0]:t[C(e)%t.length]}function w(e,t){if(!e)return{};let n={};for(let r of t){let t=e[r];t==null||t===``||(n[r]=t)}return n}function T(e){if(!e)return`#1f2937`;if(/^#[0-9a-fA-F]{6}$/.test(e))return e;if(/^#[0-9a-fA-F]{3}$/.test(e)){let[,t,n,r]=e;return`#${t}${t}${n}${n}${r}${r}`}return`#1f2937`}function re(e){let t=Number(e);if(Number.isFinite(t))return t}var E=`Capture rerenders and show totals next to component badges.`,D=`Tracks every rerender after initial mount for wrapped components. Use this toggle to capture for all components, or enable a specific component from its right-click inspector menu.`,O=`Choose whether to count render attempts, committed renders, or both.`,ie=`Render attempts track render-phase executions (includes Strict Mode extra passes). Committed renders track completed DOM commits. Both shows both counters together.`,ae=`Controls which components are automatically discoverable by Reinspect.`,k=`Only wrapped components uses explicit withReinspect wrappers only. All 1st-party components auto-discovers components under your source tree. All components also attempts dependency components (with safety skips).`;function A(e){let t={};for(let n of e)t[n]=!0;return t}function oe({children:n,config:r}){let i=(0,e.useMemo)(()=>S(r),[r]),[a,o]=(0,e.useState)(i.startActive),[c]=(0,e.useState)(i.inspectMode),[l,u]=(0,e.useState)(i.inspectMode),[d,ee]=(0,e.useState)(i.shouldCountRenders),[f,p]=(0,e.useState)(i.renderCaptureMode),[m,h]=(0,e.useState)(()=>A(i.countRendersForComponents)),[g,_]=(0,e.useState)({}),v=(0,e.useCallback)((e,t,n)=>{_(r=>{let i={...r[e]??{}};if(n==null||n===``?delete i[t]:i[t]=n,Object.keys(i).length===0){let t={...r};return delete t[e],t}return{...r,[e]:i}})},[]),y=(0,e.useCallback)((e,t)=>{h(n=>{if(t)return{...n,[e]:!0};if(!n[e])return n;let r={...n};return delete r[e],r})},[]),b=(0,e.useCallback)(e=>d||!!m[e],[d,m]),C=l!==c,w=(0,e.useCallback)(()=>{C&&(te(l),x())},[C,l]),T=(0,e.useCallback)(e=>ne(e,i.palette),[i.palette]),re=(0,e.useMemo)(()=>({config:i,isActive:i.enabled&&a,setIsActive:o,inspectMode:c,pendingInspectMode:l,setPendingInspectMode:u,hasPendingInspectModeChange:C,applyInspectMode:w,shouldCountRenders:d,setShouldCountRenders:ee,renderCaptureMode:f,setRenderCaptureMode:p,renderCountComponents:m,setRenderCountingForComponent:y,isRenderCountingEnabledFor:b,overrides:g,updateOverride:v,getBorderColor:T}),[i,a,c,l,u,C,w,d,f,m,y,b,g,v,T]);return(0,t.jsxs)(s.Provider,{value:re,children:[n,i.enabled&&i.showFloatingToggle?(0,t.jsx)(j,{}):null]})}function j(){let{config:n,isActive:r,setIsActive:i,inspectMode:a,pendingInspectMode:o,setPendingInspectMode:s,hasPendingInspectModeChange:l,applyInspectMode:u,shouldCountRenders:d,setShouldCountRenders:ee,renderCaptureMode:f,setRenderCaptureMode:p}=c(),[m,h]=(0,e.useState)(!1),g=(0,e.useRef)(null);return(0,e.useEffect)(()=>{if(!m)return;let e=e=>{let t=e.target;g.current?.contains(t)||h(!1)},t=e=>{e.key===`Escape`&&h(!1)};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[m]),n.enabled?(0,t.jsxs)(`div`,{className:`reinspect-floating-root`,ref:g,children:[(0,t.jsx)(`button`,{type:`button`,className:`reinspect-floating-toggle`,"data-testid":`reinspect-floating-toggle`,onClick:()=>h(e=>!e),"aria-expanded":m,"aria-controls":`reinspect-settings-menu`,children:`Reinspect settings`}),m?(0,t.jsxs)(`div`,{id:`reinspect-settings-menu`,className:`reinspect-settings-menu`,role:`dialog`,"aria-label":`Reinspect settings`,"data-testid":`reinspect-settings-menu`,children:[(0,t.jsx)(`p`,{className:`reinspect-settings-title`,children:`Reinspect settings`}),(0,t.jsxs)(`label`,{className:`reinspect-settings-toggle-row`,children:[(0,t.jsx)(`span`,{className:`reinspect-settings-toggle-label`,children:`Inspector enabled`}),(0,t.jsx)(`input`,{"data-testid":`reinspect-setting-inspector-active`,type:`checkbox`,checked:r,onChange:e=>i(e.currentTarget.checked)})]}),(0,t.jsx)(`div`,{className:`reinspect-settings-divider`}),(0,t.jsxs)(`section`,{className:`reinspect-setting-block`,children:[(0,t.jsxs)(`header`,{className:`reinspect-setting-header`,children:[(0,t.jsxs)(`div`,{children:[(0,t.jsx)(`p`,{className:`reinspect-setting-name`,children:`INSPECT_MODE`}),(0,t.jsx)(`p`,{className:`reinspect-setting-short-description`,children:ae})]}),(0,t.jsxs)(`span`,{className:`reinspect-tooltip-host`,children:[(0,t.jsx)(`button`,{type:`button`,className:`reinspect-tooltip-trigger`,"aria-label":`Explain INSPECT_MODE`,children:`?`}),(0,t.jsx)(`span`,{className:`reinspect-tooltip-content`,role:`tooltip`,children:k})]})]}),(0,t.jsxs)(`label`,{className:`reinspect-settings-select-row`,children:[(0,t.jsx)(`span`,{className:`reinspect-settings-toggle-label`,children:`Inspect Mode`}),(0,t.jsxs)(`select`,{"data-testid":`reinspect-setting-inspect-mode`,value:o,onChange:e=>{let t=e.currentTarget.value;_(t)&&s(t)},children:[(0,t.jsx)(`option`,{value:`wrapped`,children:`Only wrapped components`}),(0,t.jsx)(`option`,{value:`first-party`,children:`All 1st-party components`}),(0,t.jsx)(`option`,{value:`all`,children:`All components`})]})]}),(0,t.jsx)(`button`,{type:`button`,className:`reinspect-apply-button`,"data-testid":`reinspect-apply-inspect-mode`,onClick:u,disabled:!l,children:`Apply & Reload`}),l?(0,t.jsx)(`p`,{className:`reinspect-setting-note`,"data-testid":`reinspect-inspect-mode-reload-note`,children:`Inspect mode changes are applied after reload.`}):(0,t.jsxs)(`p`,{className:`reinspect-setting-note`,children:[`Current mode: `,a]})]}),(0,t.jsx)(`div`,{className:`reinspect-settings-divider`}),(0,t.jsxs)(`section`,{className:`reinspect-setting-block`,children:[(0,t.jsxs)(`header`,{className:`reinspect-setting-header`,children:[(0,t.jsxs)(`div`,{children:[(0,t.jsx)(`p`,{className:`reinspect-setting-name`,children:`SHOULD_COUNT_RENDERS`}),(0,t.jsx)(`p`,{className:`reinspect-setting-short-description`,children:E})]}),(0,t.jsxs)(`span`,{className:`reinspect-tooltip-host`,children:[(0,t.jsx)(`button`,{type:`button`,className:`reinspect-tooltip-trigger`,"aria-label":`Explain SHOULD_COUNT_RENDERS`,children:`?`}),(0,t.jsx)(`span`,{className:`reinspect-tooltip-content`,role:`tooltip`,children:D})]})]}),(0,t.jsxs)(`label`,{className:`reinspect-settings-toggle-row`,children:[(0,t.jsx)(`span`,{className:`reinspect-settings-toggle-label`,children:`Capture render for all components`}),(0,t.jsx)(`input`,{"data-testid":`reinspect-setting-should-count-renders`,type:`checkbox`,checked:d,onChange:e=>ee(e.currentTarget.checked)})]}),(0,t.jsxs)(`header`,{className:`reinspect-setting-header`,children:[(0,t.jsxs)(`div`,{children:[(0,t.jsx)(`p`,{className:`reinspect-setting-name`,children:`RENDER_CAPTURE_MODE`}),(0,t.jsx)(`p`,{className:`reinspect-setting-short-description`,children:O})]}),(0,t.jsxs)(`span`,{className:`reinspect-tooltip-host`,children:[(0,t.jsx)(`button`,{type:`button`,className:`reinspect-tooltip-trigger`,"aria-label":`Explain RENDER_CAPTURE_MODE`,children:`?`}),(0,t.jsx)(`span`,{className:`reinspect-tooltip-content`,role:`tooltip`,children:ie})]})]}),(0,t.jsxs)(`label`,{className:`reinspect-settings-select-row`,children:[(0,t.jsx)(`span`,{className:`reinspect-settings-toggle-label`,children:`Capture mode`}),(0,t.jsxs)(`select`,{"data-testid":`reinspect-setting-render-capture-mode`,value:f,onChange:e=>{let t=e.currentTarget.value;v(t)&&p(t)},children:[(0,t.jsx)(`option`,{value:`attempts`,children:`Render attempts`}),(0,t.jsx)(`option`,{value:`commits`,children:`Committed renders`}),(0,t.jsx)(`option`,{value:`both`,children:`Both`})]})]})]})]}):null]}):null}var M=4,N=40,P=40,F=`__reinspect_placeholder__`;function I(e,t){return{[F]:e,display:t}}function L(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function R(e){if(!L(e))return!1;let t=Object.getPrototypeOf(e);return t===Object.prototype||t===null}function se(e){return L(e)&&typeof e.__reinspect_placeholder__==`string`&&typeof e.display==`string`}function z(e){try{return JSON.stringify(e,null,2)}catch{return null}}function ce(e){try{let t=Function.prototype.toString.call(e);return typeof t!=`string`||t.trim().length===0?`[Function source unavailable]`:t}catch{return`[Function source unavailable]`}}function le(e){let t=e.replace(/\s+/g,` `).trim();return t.length<=120?t:`${t.slice(0,117)}...`}function B(e,t,n){if(n>M)return I(`truncated`,`[Max depth reached]`);if(e===null)return null;let r=typeof e;if(r===`string`||r===`boolean`)return e;if(r===`number`)return Number.isFinite(e)?e:I(`non-finite-number`,String(e));if(r===`undefined`)return I(`undefined`,`undefined`);if(r===`bigint`)return I(`bigint`,`${String(e)}n`);if(r===`symbol`)return I(`symbol`,String(e));if(r===`function`)return I(`function`,`[Function ${e.name||`anonymous`}]`);if(e instanceof Date)return I(`date`,Number.isNaN(e.getTime())?`Invalid Date`:e.toISOString());if(e instanceof RegExp)return I(`regexp`,e.toString());if(r===`object`){let r=e;if(t.has(r))return I(`circular`,`[Circular]`);if(t.add(r),Array.isArray(e)){let i=[],a=Math.min(e.length,P);for(let r=0;r<a;r+=1)i.push(B(e[r],t,n+1));return e.length>P&&i.push(I(`truncated`,`${e.length-P} more items`)),t.delete(r),i}let i={},a=Object.entries(e),o=Math.min(a.length,N);for(let e=0;e<o;e+=1){let[r,o]=a[e];i[r]=B(o,t,n+1)}return a.length>N&&(i.__reinspect_truncated__=I(`truncated`,`${a.length-N} more keys`)),t.delete(r),i}return I(`unsupported`,`[Unsupported value]`)}function V(e){if(e===null)return{kind:`null`,summary:`null`,copyText:`null`};let t=typeof e;if(t===`undefined`)return{kind:`undefined`,summary:`undefined`,copyText:`undefined`};if(t===`boolean`)return{kind:`boolean`,summary:String(e),copyText:String(e)};if(t===`number`)return{kind:`number`,summary:String(e),copyText:String(e)};if(t===`string`)return{kind:`string`,summary:JSON.stringify(e),copyText:String(e)};if(t===`bigint`)return{kind:`bigint`,summary:`${String(e)}n`,copyText:`${String(e)}n`};if(t===`symbol`){let t=String(e);return{kind:`symbol`,summary:t,copyText:t}}if(t===`function`){let t=e,n=ce(t),r=t.name||`anonymous`;return{kind:`function`,summary:`Function ${r}(${t.length})`,copyText:n,functionMeta:{name:r,arity:t.length,preview:le(n),source:n}}}if(e instanceof Date){let t=Number.isNaN(e.getTime())?`Invalid Date`:e.toISOString();return{kind:`date`,summary:`Date ${t}`,copyText:t}}if(e instanceof RegExp){let t=e.toString();return{kind:`regexp`,summary:t,copyText:t}}return Array.isArray(e)?{kind:`array`,summary:`Array(${e.length})`}:L(e)?{kind:`object`,summary:`Object(${Object.keys(e).length})`}:{kind:`unknown`,summary:String(e)}}function H(e){if(!se(e)){if(Array.isArray(e)){let t=[];for(let n of e){let e=H(n);if(e===void 0)return;t.push(e)}return t}if(L(e)){let t={};for(let[n,r]of Object.entries(e)){let e=H(r);e!==void 0&&(t[n]=e)}return t}return e}}function ue(e){return Object.keys(e).map(t=>({key:t,value:V(e[t])}))}function de(e){return z(B(e,new WeakSet,0))??`{}`}function fe(e){return z(B(e,new WeakSet,0))}function U(e){if(e===null)return!0;let t=typeof e;return t===`string`||t===`number`||t===`boolean`||Array.isArray(e)?!0:R(e)}function pe(e){let t=e.trim();if(t.length===0)return{parsed:null,error:`Value JSON cannot be empty.`};try{let e=H(JSON.parse(t));return e===void 0||!U(e)?{parsed:null,error:`Only objects, arrays, and primitive JSON values are editable.`}:{parsed:e,error:null}}catch{return{parsed:null,error:`Invalid JSON. Fix syntax and try Apply again.`}}}function me(e){let t=e.trim();if(t.length===0)return{parsed:{},error:null};try{let e=JSON.parse(t);if(typeof e!=`object`||!e||Array.isArray(e))return{parsed:null,error:`Props JSON must be an object (example: {"title":"Demo"}).`};let n={};for(let[t,r]of Object.entries(e)){let e=H(r);e!==void 0&&(n[t]=e)}return{parsed:n,error:null}}catch{return{parsed:null,error:`Invalid JSON. Fix syntax and try Apply again.`}}}var W=Symbol.for(`reinspect.wrapped`);function G(e){return e[W]}var he={enabled:!1,startActive:!1,showFloatingToggle:!1,inspectMode:`wrapped`,editableProps:[],palette:[],zIndexBase:0,shouldCountRenders:!1,countRendersForComponents:[],renderCaptureMode:`attempts`},K=new Map;function q(e){let t=K.get(e);if(t)return t;let n={attempts:0,commits:0,hasCommitted:!1,wasCountingEnabled:!1,shouldCountCommit:!1};return K.set(e,n),n}function ge(e,t){let n=q(e);if(!t)return n.wasCountingEnabled=!1,n.shouldCountCommit=!1,{attempts:n.attempts,commits:n.commits};let r=n.hasCommitted&&n.wasCountingEnabled;return r&&(n.attempts+=1),n.wasCountingEnabled=!0,n.shouldCountCommit=r,{attempts:n.attempts,commits:n.commits+ +!!r}}function _e(e){let t=q(e);t.hasCommitted&&t.shouldCountCommit&&(t.commits+=1),t.hasCommitted=!0,t.shouldCountCommit=!1}function ve(e,t){return t===`commits`?`${e.commits} commits`:t===`both`?`${e.attempts} attempts | ${e.commits} commits`:`${e.attempts} attempts`}function ye(e){let t=e.replace(/([A-Z])/g,` $1`).trim();return t.length>0?t[0].toUpperCase()+t.slice(1):e}function be(e){return e.trim().toLowerCase().replace(/[\s_-]+/g,``)}function J(e){return e!=null&&e!==``}function xe(e){return e.replace(/[^a-zA-Z0-9_-]/g,`-`)}async function Se(e){if(typeof navigator>`u`||!navigator.clipboard?.writeText)return!1;try{return await navigator.clipboard.writeText(e),!0}catch{return!1}}function Ce({value:e,onCopy:n}){if(e.kind===`function`&&e.functionMeta){let r=e.functionMeta;return(0,t.jsxs)(`div`,{className:`reinspect-prop-function`,children:[(0,t.jsx)(`code`,{children:e.summary}),(0,t.jsx)(`pre`,{children:r.preview}),(0,t.jsx)(`button`,{type:`button`,onClick:()=>n(r.source,`Function source`),disabled:!r.source,children:`Copy function source`})]})}return(0,t.jsxs)(`div`,{className:`reinspect-prop-scalar`,children:[(0,t.jsx)(`code`,{children:e.summary}),e.copyText?(0,t.jsx)(`button`,{type:`button`,onClick:()=>n(e.copyText??``,`Value`),children:`Copy`}):null]})}function we(e,t){return t?.name?.trim()||e.displayName?.trim()||e.name?.trim()||t?.fallbackName?.trim()||`Component`}function Te(e,t,n){return e===`manual`||n===`all`||n===`first-party`&&t===`first-party`}function Y(r,i){let a=i?.source??`manual`,o=i?.scope??`first-party`,c=G(r);if(c&&a===`auto`)return r;let l=c&&a===`manual`?c.original:r,u=we(l,i);function f(r){let i=(0,e.useId)(),c=(0,e.useRef)(null),f=(0,e.useRef)(null),[p,m]=(0,e.useState)(null),[h,g]=(0,e.useState)(`css`),[_,v]=(0,e.useState)(`detected`),[y,b]=(0,e.useState)(``),[te,x]=(0,e.useState)({}),[S,C]=(0,e.useState)(`{}`),[ne,E]=(0,e.useState)(null),[D,O]=(0,e.useState)(null),[ie,ae]=(0,e.useState)({}),[k,A]=(0,e.useState)({}),[oe,j]=(0,e.useState)({}),[M,N]=(0,e.useState)(null),[P,F]=(0,e.useState)(``),[I,L]=(0,e.useState)(null),R=(0,e.useContext)(s),se=!!R,z=R?.config??he,ce=R?.getBorderColor??(()=>`#f97316`),le=R?.isActive??!1,B=R?.inspectMode??`wrapped`,V=R?.shouldCountRenders??!1,H=R?.renderCaptureMode??he.renderCaptureMode,W=R?.overrides??{},G=R?.updateOverride??(()=>void 0),q=R?.renderCountComponents??{},we=R?.setRenderCountingForComponent??(()=>void 0),Y=R?.isRenderCountingEnabledFor??(()=>!1),X=`${u}-${i}`,Ee=ce(u),De=Te(a,o,B),Z=z.enabled&&le&&De,Oe=De&&Y(u),ke=!!q[u],Ae=ge(X,Oe),je=W[X],Me=Z?w(je,z.editableProps):{},Q={...r,...te},Ne=Q,$=Z&&p!==null,Pe=be(y),Fe=Pe.length===0?z.editableProps:z.editableProps.filter(e=>be(e).includes(Pe)),Ie=$&&h===`props`&&_===`detected`?ue(Ne):[];(0,e.useEffect)(()=>(_e(X),()=>{K.delete(X)}),[X]),(0,e.useEffect)(()=>{if(!$)return;let e=e=>{let t=e.target;c.current?.contains(t)||f.current?.contains(t)||(m(null),N(null),F(``),L(null))},t=e=>{if(e.key===`Escape`){if(M){N(null),F(``),L(null);return}m(null)}};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[M,$]),(0,e.useEffect)(()=>{if(!D)return;let e=globalThis.setTimeout(()=>{O(null)},1400);return()=>{globalThis.clearTimeout(e)}},[D]);let Le={"--reinspect-color":Ee,"--reinspect-z-base":z.zIndexBase},Re=e=>{Z&&(e.preventDefault(),g(`css`),v(`detected`),b(``),E(null),O(null),ae({}),A({}),j({}),N(null),F(``),L(null),C(`{}`),m({x:e.clientX,y:e.clientY}))},ze=()=>{let{parsed:e,error:t}=me(S);if(t||!e){E(t);return}x(e),E(null)},Be=()=>{x({}),_===`raw`&&C(de(r)),E(null)},Ve=(e,t)=>{Se(e).then(e=>{O(e?`${t} copied.`:`Clipboard access is unavailable.`)})},He=(e,t)=>{if(oe[e]){j(t=>({...t,[e]:!1}));return}if(!(e in ie)&&!(e in k)){let n=fe(t);n===null?A(t=>({...t,[e]:`JSON preview is unavailable for this value.`})):ae(t=>({...t,[e]:n}))}j(t=>({...t,[e]:!0}))},Ue=(e,t)=>{if(!U(t))return;let n=fe(t);if(n===null){O(`Unable to open editor for this value.`);return}N(e),F(n),L(null)},We=()=>{if(!M)return;let{parsed:e,error:t}=pe(P);if(t||e===null){L(t);return}x(t=>({...t,[M]:e})),N(null),F(``),L(null)},Ge=$?(0,t.jsxs)(`div`,{ref:c,className:`reinspect-menu`,role:`dialog`,"aria-label":`${u} inspector controls`,style:{top:`${p.y}px`,left:`${p.x}px`},children:[(0,t.jsxs)(`p`,{className:`reinspect-menu-title`,children:[u,` inspector`]}),(0,t.jsxs)(`label`,{className:`reinspect-menu-component-setting`,children:[(0,t.jsx)(`span`,{children:`Capture renders for this component`}),(0,t.jsx)(`input`,{type:`checkbox`,checked:V?!0:ke,onChange:e=>we(u,e.currentTarget.checked),disabled:V,"aria-label":`Capture renders for ${u}`,"data-testid":`reinspect-component-render-toggle-${u}`})]}),V?(0,t.jsx)(`p`,{className:`reinspect-setting-note`,children:`Global capture is enabled from Reinspect settings.`}):null,(0,t.jsxs)(`div`,{className:`reinspect-submenu`,children:[(0,t.jsx)(`button`,{type:`button`,"data-state":h===`css`?`active`:`idle`,onClick:()=>g(`css`),children:`CSS`}),(0,t.jsx)(`button`,{type:`button`,"data-state":h===`props`?`active`:`idle`,onClick:()=>g(`props`),children:`Props`})]}),h===`css`?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(`div`,{className:`reinspect-menu-filter`,children:[(0,t.jsx)(`span`,{className:`reinspect-menu-filter-icon`,"aria-hidden":`true`,children:(0,t.jsx)(`svg`,{viewBox:`0 0 24 24`,focusable:`false`,children:(0,t.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,t.jsx)(`input`,{id:`${X}-css-filter`,"data-testid":`reinspect-css-filter-input`,type:`search`,value:y,placeholder:`Filter`,"aria-label":`Filter CSS properties`,onChange:e=>b(e.currentTarget.value)})]}),(0,t.jsx)(`div`,{className:`reinspect-menu-grid`,children:Fe.map(e=>{let n=je?.[e],r=`${X}-${e}`;if(d.has(e)){let i=typeof n==`string`?T(n):`#1f2937`;return(0,t.jsxs)(`div`,{className:`reinspect-field`,children:[(0,t.jsx)(`label`,{htmlFor:r,children:ye(e)}),(0,t.jsxs)(`div`,{className:`reinspect-inline-controls`,children:[(0,t.jsx)(`input`,{id:r,type:`color`,value:i,onChange:t=>G(X,e,t.currentTarget.value)}),(0,t.jsx)(`button`,{type:`button`,onClick:()=>G(X,e,void 0),disabled:!J(n),children:`reset`})]})]},e)}if(e===`opacity`){let i=typeof n==`number`?n:1;return(0,t.jsxs)(`div`,{className:`reinspect-field`,children:[(0,t.jsx)(`label`,{htmlFor:r,children:`Opacity`}),(0,t.jsxs)(`div`,{className:`reinspect-inline-controls reinspect-opacity-controls`,children:[(0,t.jsx)(`input`,{id:r,type:`range`,min:`0`,max:`1`,step:`0.05`,value:i,onChange:t=>{let n=re(t.currentTarget.value);n!==void 0&&G(X,e,n)}}),(0,t.jsx)(`output`,{children:i.toFixed(2)}),(0,t.jsx)(`button`,{type:`button`,onClick:()=>G(X,e,void 0),disabled:!J(n),children:`reset`})]})]},e)}if(ee.has(e)){let i=typeof n==`number`?n:``;return(0,t.jsxs)(`div`,{className:`reinspect-field`,children:[(0,t.jsxs)(`label`,{htmlFor:r,children:[ye(e),` (px)`]}),(0,t.jsxs)(`div`,{className:`reinspect-inline-controls`,children:[(0,t.jsx)(`input`,{id:r,type:`number`,step:`1`,value:i,onChange:t=>{if(t.currentTarget.value===``){G(X,e,void 0);return}let n=re(t.currentTarget.value);n!==void 0&&G(X,e,n)}}),(0,t.jsx)(`button`,{type:`button`,onClick:()=>G(X,e,void 0),disabled:!J(n),children:`reset`})]})]},e)}return(0,t.jsxs)(`div`,{className:`reinspect-field`,children:[(0,t.jsx)(`label`,{htmlFor:r,children:ye(e)}),(0,t.jsxs)(`div`,{className:`reinspect-inline-controls`,children:[(0,t.jsx)(`input`,{id:r,type:`text`,value:typeof n==`string`?n:``,onChange:t=>G(X,e,t.currentTarget.value||void 0)}),(0,t.jsx)(`button`,{type:`button`,onClick:()=>G(X,e,void 0),disabled:!J(n),children:`reset`})]})]},e)})}),Fe.length===0?(0,t.jsxs)(`p`,{className:`reinspect-menu-empty-state`,children:[`No CSS properties match "`,y.trim(),`".`]}):null]}):(0,t.jsxs)(`div`,{className:`reinspect-props-panel`,children:[(0,t.jsxs)(`div`,{className:`reinspect-props-submenu`,children:[(0,t.jsx)(`button`,{type:`button`,"data-state":_===`detected`?`active`:`idle`,onClick:()=>v(`detected`),children:`Detected`}),(0,t.jsx)(`button`,{type:`button`,"data-state":_===`raw`?`active`:`idle`,onClick:()=>{v(`raw`),E(null),C(de(Ne))},children:`Raw`})]}),_===`detected`?Ie.length>0?(0,t.jsxs)(`div`,{className:`reinspect-props-table`,children:[(0,t.jsxs)(`div`,{className:`reinspect-props-header`,children:[(0,t.jsx)(`span`,{children:`Key`}),(0,t.jsx)(`span`,{children:`Value`})]}),Ie.map(e=>{let n=xe(e.key),r=Ne[e.key],i=e.value.kind===`object`||e.value.kind===`array`,a=!!oe[e.key],o=ie[e.key],s=k[e.key],c=U(r);return(0,t.jsxs)(`div`,{className:`reinspect-props-row`,"data-testid":`reinspect-prop-row-${n}`,children:[(0,t.jsx)(`code`,{className:`reinspect-prop-key`,children:e.key}),(0,t.jsxs)(`div`,{className:`reinspect-prop-cell`,"data-testid":`reinspect-prop-value-${n}`,children:[Ce({value:e.value,onCopy:Ve}),i||c?(0,t.jsxs)(`div`,{className:`reinspect-prop-actions`,children:[i?(0,t.jsx)(`button`,{type:`button`,"data-testid":`reinspect-prop-show-json-${n}`,onClick:()=>He(e.key,r),children:a?`Hide JSON`:`Show JSON`}):null,c?(0,t.jsx)(`button`,{type:`button`,"data-testid":`reinspect-prop-edit-${n}`,onClick:()=>Ue(e.key,r),children:`Edit`}):null]}):null,a?(0,t.jsx)(`div`,{className:`reinspect-prop-json-preview`,"data-testid":`reinspect-prop-json-preview-${n}`,children:s?(0,t.jsx)(`p`,{className:`reinspect-error`,children:s}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(`pre`,{children:o}),o?(0,t.jsx)(`button`,{type:`button`,"data-testid":`reinspect-prop-copy-json-${n}`,onClick:()=>Ve(o,`JSON value`),children:`Copy JSON`}):null]})}):null]})]},e.key)})]}):(0,t.jsx)(`p`,{className:`reinspect-menu-empty-state`,children:`No props detected.`}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(`label`,{htmlFor:`${X}-props-json`,children:`Props JSON`}),(0,t.jsx)(`textarea`,{id:`${X}-props-json`,value:S,onChange:e=>{C(e.currentTarget.value),E(null)},rows:9}),ne?(0,t.jsx)(`p`,{className:`reinspect-error`,children:ne}):null,(0,t.jsxs)(`div`,{className:`reinspect-inline-controls`,children:[(0,t.jsx)(`button`,{type:`button`,onClick:ze,children:`apply`}),(0,t.jsx)(`button`,{type:`button`,onClick:Be,children:`reset`})]})]}),D?(0,t.jsx)(`p`,{className:`reinspect-setting-note`,"data-testid":`reinspect-props-copy-status`,children:D}):null]})]}):null,Ke=M?(0,n.createPortal)((0,t.jsx)(`div`,{className:`reinspect-modal-backdrop`,role:`dialog`,"aria-modal":`true`,"aria-label":`Edit ${M} prop`,"data-testid":`reinspect-prop-edit-modal`,children:(0,t.jsxs)(`div`,{className:`reinspect-modal`,ref:f,children:[(0,t.jsxs)(`p`,{className:`reinspect-menu-title`,children:[`Edit prop: `,M]}),(0,t.jsx)(`label`,{htmlFor:`${X}-prop-edit-json`,children:`JSON value`}),(0,t.jsx)(`textarea`,{id:`${X}-prop-edit-json`,"data-testid":`reinspect-prop-edit-textarea`,value:P,onChange:e=>{F(e.currentTarget.value),L(null)},rows:10}),I?(0,t.jsx)(`p`,{className:`reinspect-error`,"data-testid":`reinspect-prop-edit-error`,children:I}):null,(0,t.jsxs)(`div`,{className:`reinspect-inline-controls`,children:[(0,t.jsx)(`button`,{type:`button`,onClick:We,children:`apply`}),(0,t.jsx)(`button`,{type:`button`,onClick:()=>{N(null),F(``),L(null)},children:`cancel`})]})]})}),document.body):null;if(!se){if(a===`manual`)throw Error(`useReinspect must be used within ReinspectProvider`);return(0,t.jsx)(l,{...Q})}return a===`auto`&&!De?(0,t.jsx)(l,{...Q}):(0,t.jsxs)(`div`,{className:`reinspect-shell`,"data-reinspect-component":u,"data-reinspect-active":Z,"data-testid":`reinspect-shell-${u}`,style:Le,onContextMenu:Re,children:[Z?(0,t.jsxs)(`span`,{className:`reinspect-name-badge`,children:[u,Oe?` | ${ve(Ae,H)}`:``]}):null,Ge?(0,n.createPortal)(Ge,document.body):null,Ke,(0,t.jsx)(`div`,{className:`reinspect-content`,"data-reinspect-content":`true`,style:Me,children:(0,t.jsx)(l,{...Q})})]})}return f.displayName=`withReinspect(${u})`,f[W]={source:a,scope:o,original:l},f}function X(e,t){return G(e)?.source===`manual`?e:Y(e,{source:`auto`,scope:t.scope,name:t.componentName,fallbackName:t.fallbackName})}function Ee(e,t){let n={};for(let r of Object.keys(e)){let i=e[r];n[r]=Y(i,typeof t==`function`?t(r,i):t?.[r])}return n}o(r),exports.DEFAULT_EDITABLE_PROPS=l,exports.DEFAULT_PALETTE=u,exports.ReinspectFloatingToggle=j,exports.ReinspectProvider=oe,exports.autoWrapInspectable=X,exports.useReinspect=c,exports.withReinspect=Y,exports.wrapInspectableMap=Ee;
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,10 +1,7 @@
1
1
  import './reinspect.css';
2
- export { ReinspectProvider, ReinspectFloatingToggle } from './context';
2
+ export { ReinspectProvider } from './context';
3
3
  export { useReinspect } from './useReinspect';
4
- export { autoWrapInspectable } from './autoWrap';
5
4
  export { withReinspect } from './withReinspect';
6
- export { wrapInspectableMap } from './wrapInspectableMap';
7
- export { DEFAULT_EDITABLE_PROPS, DEFAULT_PALETTE } from './constants';
8
- export type { EditableStyleProp, InspectMode, AutoDiscoverScope, RenderCaptureMode, ReinspectConfig, ResolvedReinspectConfig, ComponentStyleOverrides, } from './types';
5
+ export type { InspectMode, RenderCounterMode, ReinspectConfig, ResolvedReinspectConfig, } from './types';
9
6
  export type { WithReinspectOptions } from './withReinspect';
10
7
  //# sourceMappingURL=index.d.ts.map
@@ -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,uBAAuB,EAAE,MAAM,WAAW,CAAA;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAErE,YAAY,EACV,iBAAiB,EACjB,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,uBAAuB,EACvB,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,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,uBAAuB,GACxB,MAAM,SAAS,CAAA;AAEhB,YAAY,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA"}