react-reinspect 0.1.0 → 0.1.2

package/README.md

@@ -1,6 +1,44 @@
 # react-reinspect
-
-Visual runtime inspector for React components with render counters and style overrides.
+Runtime React inspector for real apps.
+
+`react-reinspect` helps you inspect components directly in your running UI:
+- See component boundaries and names.
+- Right-click any wrapped component to edit style props live.
+- Inspect and override props at runtime.
+- Track rerenders by attempts, commits, or both.
+
+[![npm version](https://img.shields.io/npm/v/react-reinspect.svg)](https://www.npmjs.com/package/react-reinspect)
+[![npm downloads](https://img.shields.io/npm/dm/react-reinspect.svg)](https://www.npmjs.com/package/react-reinspect)
+[![license](https://img.shields.io/npm/l/react-reinspect.svg)](./LICENSE)
+
+## Why This Exists
+
+React DevTools is excellent for component trees and profiling.  
+`react-reinspect` is optimized for *in-context debugging in the page itself*:
+
+- Inspect where a component lives visually.
+- Tune common style props instantly.
+- Test prop overrides without editing source first.
+- Spot rerender hotspots while interacting with the real UI.
+
+## Features
+
+- Runtime overlay + floating settings panel.
+- Right-click inspector menu per component.
+- CSS prop editing:
+  - `backgroundColor`, `color`, `fontSize`, `padding`, `margin`, `borderRadius`, `borderWidth`, `borderColor`, `opacity`, `width`, `height`, `gap`
+- Props inspector:
+  - `Detected` view for readable values
+  - `Raw` JSON editor for direct overrides
+  - Function preview + copy source
+  - JSON preview + copy for object/array props
+- Render counting:
+  - Global toggle or per-component toggle
+  - Capture mode: `attempts` | `commits` | `both`
+- Flexible wrapping:
+  - `withReinspect(...)`
+  - `wrapInspectableMap(...)`
+  - `autoWrapInspectable(...)` (for auto-discovery pipelines)
 
 ## Install
 
@@ -8,59 +46,193 @@ Visual runtime inspector for React components with render counters and style ove
 pnpm add react-reinspect
 ```
 
-## Usage
+Peer dependencies:
+- `react >= 18`
+- `react-dom >= 18`
+
+Styles are auto-injected when `react-reinspect` loads.  
+If your app enforces strict CSP and blocks inline styles, import this once in your app root:
+
+```tsx
+import 'react-reinspect/style.css'
+```
+
+Auto-discovery is compile-time and requires the Vite plugin:
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { reinspectAutoDiscoverPlugin } from 'react-reinspect/vite-plugin'
+
+export default defineConfig({
+  plugins: [reinspectAutoDiscoverPlugin(), react()],
+})
+```
+
+Without this plugin, only manually wrapped components (`withReinspect`) are inspectable.
+
+
+## Example
+
+![screen shot example showing react-reinspect](docs/assets/screenshot-example.png)
+
+
+## Agentic Quick Start
+
+Use this prompt on your favorite AI coding agent.
+
+```text
+You are a senior React code agent, your task is to integrate react-reinspect to this project. react-reinspect is a frontend utility that helps developers see the outline of react components and edit their props at runtime within their browser. it is not intended for production use at all. 
+
+Do all of the following in one pass:
+1) Install `react-reinspect` using this repo's package manager.
+2) Turn it on in dev mode ONLY by wiring `ReinspectProvider` at app root.
+3) Keep production safe (e.g.: `enabled: import.meta.env.DEV` or however we manage dev/prod in this repo.).
+4) Run validation (build/tests if available) and fix any issues.
+5) Output a concise summary with changed files and how to use it.
+
+Use this example as the baseline:
+
+import { ReinspectProvider, type ReinspectConfig } from 'react-reinspect'
+import 'react-reinspect/style.css'
+
+const reinspectConfig: ReinspectConfig = {
+  enabled: import.meta.env.DEV,
+  // startActive: true,
+  // showFloatingToggle: true,
+  // inspectMode: 'wrapped',
+}
+
+export function AppProviders({ children }: { children: React.ReactNode }) {
+  return <ReinspectProvider config={reinspectConfig}>{children}</ReinspectProvider>
+}
+
+Output format I want from you:
+- What changed (bullet list)
+- Why this is safe in production
+- How to run it locally
+- 1 copy-paste PR title + PR description
+```
+
+## Manual Quick Start
+### 1) Wrap your app with `ReinspectProvider`
 
 ```tsx
 import {
-  DEFAULT_EDITABLE_PROPS,
   ReinspectProvider,
   type ReinspectConfig,
 } from 'react-reinspect'
 
 const reinspectConfig: ReinspectConfig = {
-  enabled: import.meta.env.DEV,
-  startActive: true,
-  showFloatingToggle: true,
-  inspectMode: 'first-party',
-  editableProps: DEFAULT_EDITABLE_PROPS,
+  enabled: import.meta.env.DEV, // inspect in dev env, turn off in prod 
+  // startActive: true, // start with inspector active when page loads
+  // showFloatingToggle: true, // show floating react-reinspect settings button
+  // inspectMode: 'wrapped', // wrapped: only wrapped components, first-party: wrapped + components with inspectable metadata, all: all components
+  // editableProps: DEFAULT_EDITABLE_PROPS, // change the CSS props you can edit
 }
 
-export function AppShell({ children }: { children: React.ReactNode }) {
+export function AppProviders({ children }: { children: React.ReactNode }) {
   return <ReinspectProvider config={reinspectConfig}>{children}</ReinspectProvider>
 }
 ```
 
-## Publish Workflow
+### 2) Use it in the browser
 
-The repository can still contain a local debug app, but npm publish only ships:
+- Click `Reinspect settings` button.
+- Right-click a wrapped component.
+- Switch between `CSS` and `Props` tabs.
+- Toggle rerender tracking when needed.
 
-- `dist/lib`
-- `README.md`
+## API
 
-This is controlled by the `files` whitelist in `package.json`.
+### `ReinspectProvider`
 
-### 1) Build the publishable package
+Wrap your app root.
 
-```bash
-pnpm build:lib
+```tsx
+<ReinspectProvider config={...}>{children}</ReinspectProvider>
+```
+
+### `ReinspectConfig`
+
+| Option | Type | Default | Notes |
+|---|---|---|---|
+| `enabled` | `boolean` | `import.meta.env.DEV` | Master on/off. |
+| `startActive` | `boolean` | `true` | Initial inspector active state. |
+| `showFloatingToggle` | `boolean` | `enabled` | Show built-in settings button. |
+| `inspectMode` | `'wrapped' \| 'first-party' \| 'all'` | `'wrapped'` | Auto-wrap visibility behavior. |
+| `editableProps` | `EditableStyleProp[]` | `DEFAULT_EDITABLE_PROPS` | CSS props editable in inspector. |
+| `palette` | `string[]` | `DEFAULT_PALETTE` | Component outline/badge colors. |
+| `zIndexBase` | `number` | `2147483000` | Overlay stacking baseline. |
+| `shouldCountRenders` | `boolean` | `false` | Global rerender counting. |
+| `countRendersForComponents` | `string[]` | `[]` | Enable counting for specific names. |
+| `renderCaptureMode` | `'attempts' \| 'commits' \| 'both'` | `'attempts'` | Counter mode shown in badges. |
+
+### `withReinspect(Component, options?)`
+
+Wrap a component manually.
+
+`options`:
+- `name?: string`
+- `fallbackName?: string`
+- `source?: 'manual' | 'auto'`
+- `scope?: 'first-party' | 'third-party'`
+
+### `wrapInspectableMap(componentMap, options?)`
+
+Batch-wrap a map of components while preserving prop types.
+
+### `autoWrapInspectable(Component, metadata)`
+
+Helper for auto-discovery transforms.
+
+`metadata`:
+- `scope: 'first-party' | 'third-party'`
+- `componentName?: string`
+- `fallbackName?: string`
+
+### `useReinspect()`
+
+Hook to read/update runtime inspector state from your own UI.
+
+## Production Guidance
+
+- Default behavior is dev-friendly (`enabled` resolves from `import.meta.env.DEV`).
+- If you want zero wrapper markup in production, gate wrapping at definition time:
+
+```tsx
+import { withReinspect } from 'react-reinspect'
+
+const maybeWrap = <P extends object>(Component: React.ComponentType<P>) =>
+  import.meta.env.DEV ? withReinspect(Component) : Component
 ```
 
-### 2) Verify what npm will publish
+## Development
 
 ```bash
-pnpm pack:check
+pnpm dev
+pnpm test
+pnpm build:lib
 ```
 
-### 3) Publish
+## Publish (Maintainers)
+
+This repo can contain a debug/template app, but npm publish only ships package artifacts via the `files` whitelist in `package.json`.
 
 ```bash
+pnpm build:lib
+pnpm pack:check
 npm login
 pnpm publish:npm
 ```
 
-## Local Development
+## Screenshots To Add (Recommended)
 
-```bash
-pnpm dev
-pnpm test
-```
+If you want, share screenshots and I will wire them into this README.
+
+Suggested captures:
+- Floating settings panel open.
+- Right-click CSS editor on a real component.
+- Props inspector `Detected` tab with object/function props.
+- Rerender badges in `both` mode (`attempts | commits`).

package/dist/lib/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`react`),t=require(`react/jsx-runtime`),n=require(`react-dom`);var r=(0,e.createContext)(null);function i(){let t=(0,e.useContext)(r);if(!t)throw Error(`useReinspect must be used within ReinspectProvider`);return t}var a=[`backgroundColor`,`color`,`fontSize`,`padding`,`margin`,`borderRadius`,`borderWidth`,`borderColor`,`opacity`,`width`,`height`,`gap`],o=[`#f97316`,`#2563eb`,`#16a34a`,`#db2777`,`#ca8a04`,`#0f766e`],s=new Set([`backgroundColor`,`color`,`borderColor`]),c=new Set([`fontSize`,`padding`,`margin`,`borderRadius`,`borderWidth`,`width`,`height`,`gap`]),l=2147483e3,u=`reinspect.inspectMode`,d=[`wrapped`,`first-party`,`all`],f=[`attempts`,`commits`,`both`];function p(){return!1}function m(e){return typeof e==`string`&&d.includes(e)}function h(e){return typeof e==`string`&&f.includes(e)}function g(){if(!(typeof window>`u`))try{let e=window.sessionStorage.getItem(u);return m(e)?e:void 0}catch{return}}function _(e){return g()||(m(e)?e:`wrapped`)}function v(e){if(!(typeof window>`u`))try{window.sessionStorage.setItem(u,e)}catch{}}function y(){if(!(typeof window>`u`))try{window.location.reload()}catch{}}function b(e={}){let t=e.enabled??p(),n=e.editableProps&&e.editableProps.length>0?e.editableProps:a,r=e.palette&&e.palette.length>0?e.palette:o;return{enabled:t,startActive:e.startActive??!0,showFloatingToggle:e.showFloatingToggle??t,inspectMode:_(e.inspectMode),editableProps:n,palette:r,zIndexBase:e.zIndexBase??l,shouldCountRenders:e.shouldCountRenders??!1,countRendersForComponents:e.countRendersForComponents??[],renderCaptureMode:h(e.renderCaptureMode)?e.renderCaptureMode:`attempts`}}function x(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 ee(e,t){return t.length===0?o[0]:t[x(e)%t.length]}function S(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 te(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 C(e){let t=Number(e);if(Number.isFinite(t))return t}var w=`Capture rerenders and show totals next to component badges.`,T=`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.`,E=`Choose whether to count render attempts, committed renders, or both.`,D=`Render attempts track render-phase executions (includes Strict Mode extra passes). Committed renders track completed DOM commits. Both shows both counters together.`,O=`Controls which components are automatically discoverable by Reinspect.`,k=`Only wrapped components uses explicit withReinspect wrappers only. All 1st-party components auto-discovers components under your source tree. All components also attempts dependency components (with safety skips).`;function A(e){let t={};for(let n of e)t[n]=!0;return t}function ne({children:n,config:i}){let a=(0,e.useMemo)(()=>b(i),[i]),[o,s]=(0,e.useState)(a.startActive),[c]=(0,e.useState)(a.inspectMode),[l,u]=(0,e.useState)(a.inspectMode),[d,f]=(0,e.useState)(a.shouldCountRenders),[p,m]=(0,e.useState)(a.renderCaptureMode),[h,g]=(0,e.useState)(()=>A(a.countRendersForComponents)),[_,x]=(0,e.useState)({}),S=(0,e.useCallback)((e,t,n)=>{x(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}})},[]),te=(0,e.useCallback)((e,t)=>{g(n=>{if(t)return{...n,[e]:!0};if(!n[e])return n;let r={...n};return delete r[e],r})},[]),C=(0,e.useCallback)(e=>d||!!h[e],[d,h]),w=l!==c,T=(0,e.useCallback)(()=>{w&&(v(l),y())},[w,l]),E=(0,e.useCallback)(e=>ee(e,a.palette),[a.palette]),D=(0,e.useMemo)(()=>({config:a,isActive:a.enabled&&o,setIsActive:s,inspectMode:c,pendingInspectMode:l,setPendingInspectMode:u,hasPendingInspectModeChange:w,applyInspectMode:T,shouldCountRenders:d,setShouldCountRenders:f,renderCaptureMode:p,setRenderCaptureMode:m,renderCountComponents:h,setRenderCountingForComponent:te,isRenderCountingEnabledFor:C,overrides:_,updateOverride:S,getBorderColor:E}),[a,o,c,l,u,w,T,d,p,h,te,C,_,S,E]);return(0,t.jsxs)(r.Provider,{value:D,children:[n,a.enabled&&a.showFloatingToggle?(0,t.jsx)(j,{}):null]})}function j(){let{config:n,isActive:r,setIsActive:a,inspectMode:o,pendingInspectMode:s,setPendingInspectMode:c,hasPendingInspectModeChange:l,applyInspectMode:u,shouldCountRenders:d,setShouldCountRenders:f,renderCaptureMode:p,setRenderCaptureMode:g}=i(),[_,v]=(0,e.useState)(!1),y=(0,e.useRef)(null);return(0,e.useEffect)(()=>{if(!_)return;let e=e=>{let t=e.target;y.current?.contains(t)||v(!1)},t=e=>{e.key===`Escape`&&v(!1)};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[_]),n.enabled?(0,t.jsxs)(`div`,{className:`reinspect-floating-root`,ref:y,children:[(0,t.jsx)(`button`,{type:`button`,className:`reinspect-floating-toggle`,"data-testid":`reinspect-floating-toggle`,onClick:()=>v(e=>!e),"aria-expanded":_,"aria-controls":`reinspect-settings-menu`,children:`Reinspect settings`}),_?(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=>a(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:O})]}),(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:s,onChange:e=>{let t=e.currentTarget.value;m(t)&&c(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: `,o]})]}),(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:w})]}),(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:T})]})]}),(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=>f(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:E})]}),(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:D})]})]}),(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:p,onChange:e=>{let t=e.currentTarget.value;h(t)&&g(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 re=4,M=40,N=40,P=`__reinspect_placeholder__`;function F(e,t){return{[P]:e,display:t}}function I(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function ie(e){if(!I(e))return!1;let t=Object.getPrototypeOf(e);return t===Object.prototype||t===null}function L(e){return I(e)&&typeof e.__reinspect_placeholder__==`string`&&typeof e.display==`string`}function R(e){try{return JSON.stringify(e,null,2)}catch{return null}}function z(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 B(e){let t=e.replace(/\s+/g,` `).trim();return t.length<=120?t:`${t.slice(0,117)}...`}function V(e,t,n){if(n>re)return F(`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:F(`non-finite-number`,String(e));if(r===`undefined`)return F(`undefined`,`undefined`);if(r===`bigint`)return F(`bigint`,`${String(e)}n`);if(r===`symbol`)return F(`symbol`,String(e));if(r===`function`)return F(`function`,`[Function ${e.name||`anonymous`}]`);if(e instanceof Date)return F(`date`,Number.isNaN(e.getTime())?`Invalid Date`:e.toISOString());if(e instanceof RegExp)return F(`regexp`,e.toString());if(r===`object`){let r=e;if(t.has(r))return F(`circular`,`[Circular]`);if(t.add(r),Array.isArray(e)){let i=[],a=Math.min(e.length,N);for(let r=0;r<a;r+=1)i.push(V(e[r],t,n+1));return e.length>N&&i.push(F(`truncated`,`${e.length-N} more items`)),t.delete(r),i}let i={},a=Object.entries(e),o=Math.min(a.length,M);for(let e=0;e<o;e+=1){let[r,o]=a[e];i[r]=V(o,t,n+1)}return a.length>M&&(i.__reinspect_truncated__=F(`truncated`,`${a.length-M} more keys`)),t.delete(r),i}return F(`unsupported`,`[Unsupported value]`)}function H(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=z(t),r=t.name||`anonymous`;return{kind:`function`,summary:`Function ${r}(${t.length})`,copyText:n,functionMeta:{name:r,arity:t.length,preview:B(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})`}:I(e)?{kind:`object`,summary:`Object(${Object.keys(e).length})`}:{kind:`unknown`,summary:String(e)}}function U(e){if(!L(e)){if(Array.isArray(e)){let t=[];for(let n of e){let e=U(n);if(e===void 0)return;t.push(e)}return t}if(I(e)){let t={};for(let[n,r]of Object.entries(e)){let e=U(r);e!==void 0&&(t[n]=e)}return t}return e}}function ae(e){return Object.keys(e).map(t=>({key:t,value:H(e[t])}))}function oe(e){return R(V(e,new WeakSet,0))??`{}`}function se(e){return R(V(e,new WeakSet,0))}function ce(e){if(e===null)return!0;let t=typeof e;return t===`string`||t===`number`||t===`boolean`||Array.isArray(e)?!0:ie(e)}function le(e){let t=e.trim();if(t.length===0)return{parsed:null,error:`Value JSON cannot be empty.`};try{let e=U(JSON.parse(t));return e===void 0||!ce(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 ue(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=U(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 de(e){return e[W]}var fe={enabled:!1,startActive:!1,showFloatingToggle:!1,inspectMode:`wrapped`,editableProps:[],palette:[],zIndexBase:0,shouldCountRenders:!1,countRendersForComponents:[],renderCaptureMode:`attempts`},pe=new Map;function G(e){let t=pe.get(e);if(t)return t;let n={attempts:0,commits:0,hasCommitted:!1,wasCountingEnabled:!1,shouldCountCommit:!1};return pe.set(e,n),n}function me(e,t){let n=G(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 he(e){let t=G(e);t.hasCommitted&&t.shouldCountCommit&&(t.commits+=1),t.hasCommitted=!0,t.shouldCountCommit=!1}function ge(e,t){return t===`commits`?`${e.commits} commits`:t===`both`?`${e.attempts} attempts | ${e.commits} commits`:`${e.attempts} attempts`}function _e(e){let t=e.replace(/([A-Z])/g,` $1`).trim();return t.length>0?t[0].toUpperCase()+t.slice(1):e}function ve(e){return e.trim().toLowerCase().replace(/[\s_-]+/g,``)}function K(e){return e!=null&&e!==``}function ye(e){return e.replace(/[^a-zA-Z0-9_-]/g,`-`)}async function be(e){if(typeof navigator>`u`||!navigator.clipboard?.writeText)return!1;try{return await navigator.clipboard.writeText(e),!0}catch{return!1}}function xe({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 Se(e,t){return t?.name?.trim()||e.displayName?.trim()||e.name?.trim()||t?.fallbackName?.trim()||`Component`}function Ce(e,t,n){return e===`manual`||n===`all`||n===`first-party`&&t===`first-party`}function q(i,a){let o=a?.source??`manual`,l=a?.scope??`first-party`,u=de(i);if(u&&o===`auto`)return i;let d=u&&o===`manual`?u.original:i,f=Se(d,a);function p(i){let a=(0,e.useId)(),u=(0,e.useRef)(null),p=(0,e.useRef)(null),[m,h]=(0,e.useState)(null),[g,_]=(0,e.useState)(`css`),[v,y]=(0,e.useState)(`detected`),[b,x]=(0,e.useState)(``),[ee,w]=(0,e.useState)({}),[T,E]=(0,e.useState)(`{}`),[D,O]=(0,e.useState)(null),[k,A]=(0,e.useState)(null),[ne,j]=(0,e.useState)({}),[re,M]=(0,e.useState)({}),[N,P]=(0,e.useState)({}),[F,I]=(0,e.useState)(null),[ie,L]=(0,e.useState)(``),[R,z]=(0,e.useState)(null),B=(0,e.useContext)(r),V=!!B,H=B?.config??fe,U=B?.getBorderColor??(()=>`#f97316`),W=B?.isActive??!1,de=B?.inspectMode??`wrapped`,G=B?.shouldCountRenders??!1,Se=B?.renderCaptureMode??fe.renderCaptureMode,q=B?.overrides??{},J=B?.updateOverride??(()=>void 0),we=B?.renderCountComponents??{},Te=B?.setRenderCountingForComponent??(()=>void 0),Ee=B?.isRenderCountingEnabledFor??(()=>!1),Y=`${f}-${a}`,De=U(f),Oe=Ce(o,l,de),X=H.enabled&&W&&Oe,ke=Oe&&Ee(f),Ae=!!we[f],je=me(Y,ke),Me=q[Y],Ne=X?S(Me,H.editableProps):{},Z={...i,...ee},Q=Z,$=X&&m!==null,Pe=ve(b),Fe=Pe.length===0?H.editableProps:H.editableProps.filter(e=>ve(e).includes(Pe)),Ie=$&&g===`props`&&v===`detected`?ae(Q):[];(0,e.useEffect)(()=>(he(Y),()=>{pe.delete(Y)}),[Y]),(0,e.useEffect)(()=>{if(!$)return;let e=e=>{let t=e.target;u.current?.contains(t)||p.current?.contains(t)||(h(null),I(null),L(``),z(null))},t=e=>{if(e.key===`Escape`){if(F){I(null),L(``),z(null);return}h(null)}};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[F,$]),(0,e.useEffect)(()=>{if(!k)return;let e=globalThis.setTimeout(()=>{A(null)},1400);return()=>{globalThis.clearTimeout(e)}},[k]);let Le={"--reinspect-color":De,"--reinspect-z-base":H.zIndexBase},Re=e=>{X&&(e.preventDefault(),_(`css`),y(`detected`),x(``),O(null),A(null),j({}),M({}),P({}),I(null),L(``),z(null),E(`{}`),h({x:e.clientX,y:e.clientY}))},ze=()=>{let{parsed:e,error:t}=ue(T);if(t||!e){O(t);return}w(e),O(null)},Be=()=>{w({}),v===`raw`&&E(oe(i)),O(null)},Ve=(e,t)=>{be(e).then(e=>{A(e?`${t} copied.`:`Clipboard access is unavailable.`)})},He=(e,t)=>{if(N[e]){P(t=>({...t,[e]:!1}));return}if(!(e in ne)&&!(e in re)){let n=se(t);n===null?M(t=>({...t,[e]:`JSON preview is unavailable for this value.`})):j(t=>({...t,[e]:n}))}P(t=>({...t,[e]:!0}))},Ue=(e,t)=>{if(!ce(t))return;let n=se(t);if(n===null){A(`Unable to open editor for this value.`);return}I(e),L(n),z(null)},We=()=>{if(!F)return;let{parsed:e,error:t}=le(ie);if(t||e===null){z(t);return}w(t=>({...t,[F]:e})),I(null),L(``),z(null)},Ge=$?(0,t.jsxs)(`div`,{ref:u,className:`reinspect-menu`,role:`dialog`,"aria-label":`${f} inspector controls`,style:{top:`${m.y}px`,left:`${m.x}px`},children:[(0,t.jsxs)(`p`,{className:`reinspect-menu-title`,children:[f,` 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:G?!0:Ae,onChange:e=>Te(f,e.currentTarget.checked),disabled:G,"aria-label":`Capture renders for ${f}`,"data-testid":`reinspect-component-render-toggle-${f}`})]}),G?(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":g===`css`?`active`:`idle`,onClick:()=>_(`css`),children:`CSS`}),(0,t.jsx)(`button`,{type:`button`,"data-state":g===`props`?`active`:`idle`,onClick:()=>_(`props`),children:`Props`})]}),g===`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:`${Y}-css-filter`,"data-testid":`reinspect-css-filter-input`,type:`search`,value:b,placeholder:`Filter`,"aria-label":`Filter CSS properties`,onChange:e=>x(e.currentTarget.value)})]}),(0,t.jsx)(`div`,{className:`reinspect-menu-grid`,children:Fe.map(e=>{let n=Me?.[e],r=`${Y}-${e}`;if(s.has(e)){let i=typeof n==`string`?te(n):`#1f2937`;return(0,t.jsxs)(`div`,{className:`reinspect-field`,children:[(0,t.jsx)(`label`,{htmlFor:r,children:_e(e)}),(0,t.jsxs)(`div`,{className:`reinspect-inline-controls`,children:[(0,t.jsx)(`input`,{id:r,type:`color`,value:i,onChange:t=>J(Y,e,t.currentTarget.value)}),(0,t.jsx)(`button`,{type:`button`,onClick:()=>J(Y,e,void 0),disabled:!K(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=C(t.currentTarget.value);n!==void 0&&J(Y,e,n)}}),(0,t.jsx)(`output`,{children:i.toFixed(2)}),(0,t.jsx)(`button`,{type:`button`,onClick:()=>J(Y,e,void 0),disabled:!K(n),children:`reset`})]})]},e)}if(c.has(e)){let i=typeof n==`number`?n:``;return(0,t.jsxs)(`div`,{className:`reinspect-field`,children:[(0,t.jsxs)(`label`,{htmlFor:r,children:[_e(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===``){J(Y,e,void 0);return}let n=C(t.currentTarget.value);n!==void 0&&J(Y,e,n)}}),(0,t.jsx)(`button`,{type:`button`,onClick:()=>J(Y,e,void 0),disabled:!K(n),children:`reset`})]})]},e)}return(0,t.jsxs)(`div`,{className:`reinspect-field`,children:[(0,t.jsx)(`label`,{htmlFor:r,children:_e(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=>J(Y,e,t.currentTarget.value||void 0)}),(0,t.jsx)(`button`,{type:`button`,onClick:()=>J(Y,e,void 0),disabled:!K(n),children:`reset`})]})]},e)})}),Fe.length===0?(0,t.jsxs)(`p`,{className:`reinspect-menu-empty-state`,children:[`No CSS properties match "`,b.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":v===`detected`?`active`:`idle`,onClick:()=>y(`detected`),children:`Detected`}),(0,t.jsx)(`button`,{type:`button`,"data-state":v===`raw`?`active`:`idle`,onClick:()=>{y(`raw`),O(null),E(oe(Q))},children:`Raw`})]}),v===`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=ye(e.key),r=Q[e.key],i=e.value.kind===`object`||e.value.kind===`array`,a=!!N[e.key],o=ne[e.key],s=re[e.key],c=ce(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:[xe({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:`${Y}-props-json`,children:`Props JSON`}),(0,t.jsx)(`textarea`,{id:`${Y}-props-json`,value:T,onChange:e=>{E(e.currentTarget.value),O(null)},rows:9}),D?(0,t.jsx)(`p`,{className:`reinspect-error`,children:D}):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`})]})]}),k?(0,t.jsx)(`p`,{className:`reinspect-setting-note`,"data-testid":`reinspect-props-copy-status`,children:k}):null]})]}):null,Ke=F?(0,n.createPortal)((0,t.jsx)(`div`,{className:`reinspect-modal-backdrop`,role:`dialog`,"aria-modal":`true`,"aria-label":`Edit ${F} prop`,"data-testid":`reinspect-prop-edit-modal`,children:(0,t.jsxs)(`div`,{className:`reinspect-modal`,ref:p,children:[(0,t.jsxs)(`p`,{className:`reinspect-menu-title`,children:[`Edit prop: `,F]}),(0,t.jsx)(`label`,{htmlFor:`${Y}-prop-edit-json`,children:`JSON value`}),(0,t.jsx)(`textarea`,{id:`${Y}-prop-edit-json`,"data-testid":`reinspect-prop-edit-textarea`,value:ie,onChange:e=>{L(e.currentTarget.value),z(null)},rows:10}),R?(0,t.jsx)(`p`,{className:`reinspect-error`,"data-testid":`reinspect-prop-edit-error`,children:R}):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:()=>{I(null),L(``),z(null)},children:`cancel`})]})]})}),document.body):null;if(!V){if(o===`manual`)throw Error(`useReinspect must be used within ReinspectProvider`);return(0,t.jsx)(d,{...Z})}return o===`auto`&&!Oe?(0,t.jsx)(d,{...Z}):(0,t.jsxs)(`div`,{className:`reinspect-shell`,"data-reinspect-component":f,"data-reinspect-active":X,"data-testid":`reinspect-shell-${f}`,style:Le,onContextMenu:Re,children:[X?(0,t.jsxs)(`span`,{className:`reinspect-name-badge`,children:[f,ke?` | ${ge(je,Se)}`:``]}):null,Ge?(0,n.createPortal)(Ge,document.body):null,Ke,(0,t.jsx)(`div`,{className:`reinspect-content`,"data-reinspect-content":`true`,style:Ne,children:(0,t.jsx)(d,{...Z})})]})}return p.displayName=`withReinspect(${f})`,p[W]={source:o,scope:l,original:d},p}function J(e,t){return de(e)?.source===`manual`?e:q(e,{source:`auto`,scope:t.scope,name:t.componentName,fallbackName:t.fallbackName})}function we(e,t){let n={};for(let r of Object.keys(e)){let i=e[r];n[r]=q(i,typeof t==`function`?t(r,i):t?.[r])}return n}exports.DEFAULT_EDITABLE_PROPS=a,exports.DEFAULT_PALETTE=o,exports.ReinspectFloatingToggle=j,exports.ReinspectProvider=ne,exports.autoWrapInspectable=J,exports.useReinspect=i,exports.withReinspect=q,exports.wrapInspectableMap=we;
+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;

package/dist/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/reinspect/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAA;AAExB,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/reinspect/index.ts"],"names":[],"mappings":"AAAA,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"}