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/dist/lib/index.js CHANGED
@@ -1,1280 +1,382 @@
1
1
  "use client";
2
- import { createContext as e, useCallback as t, useContext as n, useEffect as r, useId as i, useMemo as a, useRef as o, useState as s } from "react";
3
- import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
4
- import { createPortal as d } from "react-dom";
2
+ import { a as e, c as t, i as n, l as r, o as i, r as a, s as o, t as s } from "./wrap-8xVFW-im.js";
3
+ import { useCallback as c, useContext as l, useEffect as u, useMemo as d, useReducer as f, useRef as p, useState as m } from "react";
4
+ import { jsx as h, jsxs as g } from "react/jsx-runtime";
5
5
  //#region src/reinspect/reinspect.css?inline
6
- var f = ".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}", p = "reinspect-runtime-styles";
7
- function m() {
6
+ var _ = ".reinspect-shell{border-radius:14px;transition:outline-color .12s;position:relative}.reinspect-shell[data-reinspect-active=true]{outline:2px dashed var(--reinspect-color);outline-offset:2px}.reinspect-content{border-radius:inherit}.reinspect-name-badge{z-index:calc(var(--reinspect-z-base) + 5);letter-spacing:.04em;color:#0f172a;background:color-mix(in srgb, var(--reinspect-color) 25%, white);border:1px solid color-mix(in srgb, var(--reinspect-color) 45%, white);pointer-events:none;white-space:nowrap;border-radius:999px;padding:5px 8px;font-size:11px;line-height:1;position:absolute;top:-14px;left:10px}.reinspect-menu{z-index:2147483647;background:#fff;border:1px solid #cbd5e1;border-radius:12px;width:min(300px,100vw - 24px);max-height:min(420px,70vh);padding:12px;position:fixed;overflow:auto;box-shadow:0 20px 25px -5px #0f172a33,0 8px 10px -6px #0f172a33}.reinspect-menu-title{color:#0f172a;margin:0 0 10px;font-size:13px;font-weight:600}.reinspect-menu-component-setting{color:#1e293b;grid-template-columns:1fr auto;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;display:grid}.reinspect-menu-component-setting input[type=checkbox]{width:15px;height:15px}.reinspect-setting-note{color:#64748b;margin:0 0 10px;font-size:11px}.reinspect-submenu{grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;display:grid}.reinspect-submenu button{color:#1e293b;cursor:pointer;background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;padding:6px 8px;font-size:12px}.reinspect-submenu button[data-state=active]{background:#e0f2fe;border-color:#0284c7}.reinspect-menu-grid{gap:9px;display:grid}.reinspect-menu-filter{margin-bottom:10px;position:relative}.reinspect-menu-filter-icon{color:#64748b;pointer-events:none;width:14px;height:14px;position:absolute;top:50%;left:9px;transform:translateY(-50%)}.reinspect-menu-filter-icon svg{width:100%;height:100%;display:block}.reinspect-menu-filter input{border:1px solid #cbd5e1;border-radius:8px;width:100%;padding:5px 7px 5px 30px;font-size:12px}.reinspect-menu-empty-state{color:#64748b;margin:8px 0 0;font-size:12px}.reinspect-field{gap:4px;display:grid}.reinspect-field label{color:#334155;font-size:12px}.reinspect-inline-controls{grid-template-columns:1fr auto;gap:6px;display:grid}.reinspect-inline-controls input,.reinspect-inline-controls button,.reinspect-inline-controls output{font-size:12px}.reinspect-inline-controls input[type=number],.reinspect-inline-controls input[type=text]{border:1px solid #cbd5e1;border-radius:8px;width:100%;padding:5px 7px}.reinspect-inline-controls button{color:#1e293b;cursor:pointer;background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;padding:5px 7px}.reinspect-inline-controls button:disabled{opacity:.45;cursor:default}.reinspect-opacity-controls{grid-template-columns:1fr auto auto;align-items:center}.reinspect-opacity-controls output{color:#475569;text-align:right;min-width:36px}.reinspect-props-panel{gap:8px;display:grid}.reinspect-props-submenu{grid-template-columns:1fr 1fr;gap:6px;display:grid}.reinspect-props-submenu button{color:#1e293b;cursor:pointer;background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;padding:6px 8px;font-size:12px}.reinspect-props-submenu button[data-state=active]{background:#e0f2fe;border-color:#0284c7}.reinspect-props-panel label{color:#334155;font-size:12px}.reinspect-props-table{gap:6px;display:grid}.reinspect-props-header{color:#475569;text-transform:uppercase;letter-spacing:.04em;grid-template-columns:.85fr 1.15fr;gap:8px;font-size:11px;display:grid}.reinspect-props-row{border:1px solid #e2e8f0;border-radius:8px;grid-template-columns:.85fr 1.15fr;align-items:start;gap:8px;padding:6px;display:grid}.reinspect-prop-key{color:#0f172a;word-break:break-word;font-size:12px}.reinspect-prop-cell{min-width:0}.reinspect-prop-cell code{color:#0f172a;word-break:break-word;font-size:11px}.reinspect-prop-missing{color:#94a3b8;font-size:11px}.reinspect-prop-scalar{gap:4px;display:grid}.reinspect-prop-actions{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.reinspect-prop-scalar button,.reinspect-prop-function button,.reinspect-prop-tree summary button{color:#1e293b;cursor:pointer;background:#f8fafc;border:1px solid #cbd5e1;border-radius:7px;justify-self:start;padding:3px 6px;font-size:11px}.reinspect-prop-actions button,.reinspect-prop-json-preview button{color:#1e293b;cursor:pointer;background:#f8fafc;border:1px solid #cbd5e1;border-radius:7px;padding:3px 6px;font-size:11px}.reinspect-prop-tree{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:5px}.reinspect-prop-tree summary{cursor:pointer;color:#1e293b;justify-content:space-between;align-items:center;gap:8px;font-size:11px;display:flex}.reinspect-prop-tree-children{gap:6px;margin-top:6px;display:grid}.reinspect-prop-tree-row{grid-template-columns:.8fr 1.2fr;align-items:start;gap:6px;display:grid}.reinspect-prop-tree-row>code{color:#334155;word-break:break-word;font-size:10px}.reinspect-prop-function{gap:4px;display:grid}.reinspect-prop-function pre{white-space:pre-wrap;word-break:break-word;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;margin:0;padding:6px;font-size:11px;line-height:1.3}.reinspect-prop-json-preview{gap:6px;margin-top:6px;display:grid}.reinspect-prop-json-preview pre{white-space:pre-wrap;word-break:break-word;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;max-height:180px;margin:0;padding:6px;font-size:11px;line-height:1.3;overflow:auto}.reinspect-modal-backdrop{z-index:2147483647;background:#0f172a73;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.reinspect-modal{background:#fff;border:1px solid #cbd5e1;border-radius:12px;gap:8px;width:min(560px,100%);padding:12px;display:grid;box-shadow:0 24px 28px -12px #0f172a40,0 10px 16px -10px #0f172a38}.reinspect-modal textarea,.reinspect-props-panel textarea{resize:vertical;border:1px solid #cbd5e1;border-radius:8px;width:100%;padding:8px;font-family:IBM Plex Mono,SFMono-Regular,monospace;font-size:12px}.reinspect-error{color:#b91c1c;margin:0;font-size:12px}.reinspect-floating-toggle{z-index:2147483647;color:#f8fafc;letter-spacing:.03em;cursor:pointer;background:linear-gradient(120deg,#0f172a,#334155);border:none;border-radius:999px;padding:10px 15px;font-size:13px;font-weight:600;position:fixed;bottom:18px;right:18px;box-shadow:0 10px 18px #0f172a47}.reinspect-floating-root{z-index:2147483645;position:fixed;bottom:18px;right:18px}.reinspect-floating-root .reinspect-floating-toggle{position:static}.reinspect-settings-menu{background:#fff;border:1px solid #cbd5e1;border-radius:12px;gap:10px;width:min(360px,100vw - 24px);max-height:min(540px,75vh);padding:12px;display:grid;position:absolute;bottom:calc(100% + 10px);right:0;overflow:auto;box-shadow:0 24px 28px -12px #0f172a40,0 10px 16px -10px #0f172a38}.reinspect-settings-title{color:#0f172a;margin:0;font-size:13px;font-weight:700}.reinspect-settings-toggle-row{color:#1e293b;grid-template-columns:1fr auto;align-items:center;gap:8px;font-size:12px;display:grid}.reinspect-settings-select-row{gap:6px;font-size:12px;display:grid}.reinspect-settings-select-row select{color:#0f172a;background:#fff;border:1px solid #cbd5e1;border-radius:8px;width:100%;padding:6px 8px;font-size:12px}.reinspect-settings-toggle-label{line-height:1.35}.reinspect-settings-toggle-row input[type=checkbox]{width:16px;height:16px}.reinspect-settings-divider{background:#e2e8f0;height:1px}.reinspect-setting-block{gap:8px;display:grid}.reinspect-apply-button{color:#f8fafc;cursor:pointer;background:#0f172a;border:1px solid #0f172a;border-radius:8px;padding:6px 8px;font-size:12px;font-weight:600}.reinspect-apply-button:disabled{opacity:.4;cursor:default}.reinspect-setting-header{grid-template-columns:1fr auto;align-items:start;gap:8px;display:grid}.reinspect-setting-name{color:#0f172a;letter-spacing:.02em;margin:0;font-size:12px;font-weight:700}.reinspect-setting-short-description{color:#475569;margin:3px 0 0;font-size:12px;line-height:1.35}.reinspect-tooltip-host{display:inline-flex;position:relative}.reinspect-tooltip-trigger{color:#334155;cursor:help;background:#f8fafc;border:1px solid #cbd5e1;border-radius:999px;justify-content:center;align-items:center;width:20px;height:20px;padding:0;font-size:12px;font-weight:700;display:inline-flex}.reinspect-tooltip-content{color:#f8fafc;opacity:0;pointer-events:none;background:#0f172a;border:1px solid #cbd5e1;border-radius:8px;width:240px;padding:8px;font-size:11px;line-height:1.4;transition:opacity .12s;position:absolute;top:calc(100% + 6px);right:0}.reinspect-tooltip-host:hover .reinspect-tooltip-content,.reinspect-tooltip-host:focus-within .reinspect-tooltip-content{opacity:1;pointer-events:auto}.reinspect-setting-subheading{color:#334155;margin:2px 0 0;font-size:12px;font-weight:600}.reinspect-setting-empty-state{color:#64748b;margin:0;font-size:12px}.reinspect-component-settings-list{gap:6px;display:grid}.reinspect-component-setting-row{color:#1e293b;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:6px 8px;font-size:12px;display:grid}.reinspect-component-setting-row input[type=checkbox]{width:15px;height:15px}", v = "reinspect-runtime-styles";
7
+ function y() {
8
8
  return typeof document > "u" ? null : document;
9
9
  }
10
- function h(e) {
10
+ function b(e) {
11
11
  if (!e) return;
12
- let t = m();
13
- if (!t || t.getElementById(p)) return;
12
+ let t = y();
13
+ if (!t || t.getElementById(v)) return;
14
14
  let n = t.createElement("style");
15
- n.id = p, n.textContent = e, (t.head ?? t.documentElement).appendChild(n);
15
+ n.id = v, n.textContent = e, (t.head ?? t.documentElement).appendChild(n);
16
16
  }
17
17
  //#endregion
18
- //#region src/reinspect/store.ts
19
- var g = e(null);
20
- //#endregion
21
- //#region src/reinspect/useReinspect.ts
22
- function _() {
23
- let e = n(g);
24
- if (!e) throw Error("useReinspect must be used within ReinspectProvider");
25
- return e;
26
- }
27
- //#endregion
28
- //#region src/reinspect/constants.ts
29
- var v = [
30
- "backgroundColor",
31
- "color",
32
- "fontSize",
33
- "padding",
34
- "margin",
35
- "borderRadius",
36
- "borderWidth",
37
- "borderColor",
38
- "opacity",
39
- "width",
40
- "height",
41
- "gap"
42
- ], y = [
43
- "#f97316",
44
- "#2563eb",
45
- "#16a34a",
46
- "#db2777",
47
- "#ca8a04",
48
- "#0f766e"
49
- ], b = new Set([
50
- "backgroundColor",
51
- "color",
52
- "borderColor"
53
- ]), ee = new Set([
54
- "fontSize",
55
- "padding",
56
- "margin",
57
- "borderRadius",
58
- "borderWidth",
59
- "width",
60
- "height",
61
- "gap"
62
- ]), x = 2147483e3, S = "reinspect.inspectMode", C = [
63
- "wrapped",
64
- "first-party",
65
- "all"
66
- ], w = [
67
- "attempts",
68
- "commits",
69
- "both"
70
- ];
71
- function T() {
72
- return !1;
73
- }
74
- function E(e) {
75
- return typeof e == "string" && C.includes(e);
76
- }
77
- function D(e) {
78
- return typeof e == "string" && w.includes(e);
79
- }
80
- function O() {
81
- if (!(typeof window > "u")) try {
82
- let e = window.sessionStorage.getItem(S);
83
- return E(e) ? e : void 0;
84
- } catch {
85
- return;
86
- }
87
- }
88
- function te(e) {
89
- return O() || (E(e) ? e : "wrapped");
90
- }
91
- function k(e) {
92
- if (!(typeof window > "u")) try {
93
- window.sessionStorage.setItem(S, e);
94
- } catch {}
95
- }
96
- function ne() {
97
- if (!(typeof window > "u")) try {
98
- window.location.reload();
99
- } catch {}
18
+ //#region src/reinspect/core/state.ts
19
+ function x(e) {
20
+ let t = {};
21
+ for (let n of e) t[n] = !0;
22
+ return t;
100
23
  }
101
- function A(e = {}) {
102
- let t = e.enabled ?? T(), n = e.editableProps && e.editableProps.length > 0 ? e.editableProps : v, r = e.palette && e.palette.length > 0 ? e.palette : y;
24
+ function S(e) {
103
25
  return {
104
- enabled: t,
105
- startActive: e.startActive ?? !0,
106
- showFloatingToggle: e.showFloatingToggle ?? t,
107
- inspectMode: te(e.inspectMode),
108
- editableProps: n,
109
- palette: r,
110
- zIndexBase: e.zIndexBase ?? x,
111
- shouldCountRenders: e.shouldCountRenders ?? !1,
112
- countRendersForComponents: e.countRendersForComponents ?? [],
113
- renderCaptureMode: D(e.renderCaptureMode) ? e.renderCaptureMode : "attempts"
26
+ isActive: e.startActive,
27
+ inspectMode: e.inspectMode,
28
+ pendingInspectMode: e.inspectMode,
29
+ renderCounterMode: e.renderCounters,
30
+ renderCountComponents: x(e.countRendersForComponents),
31
+ overrides: {}
114
32
  };
115
33
  }
116
- function j(e) {
117
- let t = 0;
118
- for (let n = 0; n < e.length; n += 1) t = (t << 5) - t + e.charCodeAt(n), t |= 0;
119
- return Math.abs(t);
120
- }
121
- function M(e, t) {
122
- return t.length === 0 ? y[0] : t[j(e) % t.length];
123
- }
124
- function re(e, t) {
125
- if (!e) return {};
126
- let n = {};
127
- for (let r of t) {
128
- let t = e[r];
129
- t == null || t === "" || (n[r] = t);
130
- }
131
- return n;
132
- }
133
- function ie(e) {
134
- if (!e) return "#1f2937";
135
- if (/^#[0-9a-fA-F]{6}$/.test(e)) return e;
136
- if (/^#[0-9a-fA-F]{3}$/.test(e)) {
137
- let [, t, n, r] = e;
138
- return `#${t}${t}${n}${n}${r}${r}`;
34
+ function C(e, t) {
35
+ if (e === t) return !0;
36
+ if (e.length !== t.length) return !1;
37
+ for (let n = 0; n < e.length; n += 1) if (e[n] !== t[n]) return !1;
38
+ return !0;
39
+ }
40
+ function w(e, t) {
41
+ switch (t.type) {
42
+ case "hydrate-config": {
43
+ let n = x(t.config.countRendersForComponents), r = {
44
+ ...e,
45
+ isActive: t.config.enabled ? e.isActive : !1,
46
+ inspectMode: t.config.inspectMode,
47
+ pendingInspectMode: t.config.inspectMode,
48
+ renderCounterMode: t.config.renderCounters,
49
+ renderCountComponents: n
50
+ };
51
+ return r.isActive === e.isActive && r.inspectMode === e.inspectMode && r.pendingInspectMode === e.pendingInspectMode && r.renderCounterMode === e.renderCounterMode && C(Object.keys(r.renderCountComponents), Object.keys(e.renderCountComponents)) ? e : r;
52
+ }
53
+ case "set-is-active": return e.isActive === t.value ? e : {
54
+ ...e,
55
+ isActive: t.value
56
+ };
57
+ case "set-pending-inspect-mode": return e.pendingInspectMode === t.value ? e : {
58
+ ...e,
59
+ pendingInspectMode: t.value
60
+ };
61
+ case "set-render-counter-mode": return e.renderCounterMode === t.value ? e : {
62
+ ...e,
63
+ renderCounterMode: t.value
64
+ };
65
+ case "set-render-counting-for-component": {
66
+ if (t.enabled) return e.renderCountComponents[t.componentName] ? e : {
67
+ ...e,
68
+ renderCountComponents: {
69
+ ...e.renderCountComponents,
70
+ [t.componentName]: !0
71
+ }
72
+ };
73
+ if (!e.renderCountComponents[t.componentName]) return e;
74
+ let n = { ...e.renderCountComponents };
75
+ return delete n[t.componentName], {
76
+ ...e,
77
+ renderCountComponents: n
78
+ };
79
+ }
80
+ case "update-override": {
81
+ let n = { ...e.overrides[t.componentId] ?? {} };
82
+ if (t.value === void 0 || t.value === null || t.value === "" ? delete n[t.prop] : n[t.prop] = t.value, Object.keys(n).length === 0) {
83
+ if (!e.overrides[t.componentId]) return e;
84
+ let n = { ...e.overrides };
85
+ return delete n[t.componentId], {
86
+ ...e,
87
+ overrides: n
88
+ };
89
+ }
90
+ return {
91
+ ...e,
92
+ overrides: {
93
+ ...e.overrides,
94
+ [t.componentId]: n
95
+ }
96
+ };
97
+ }
98
+ default: return e;
139
99
  }
140
- return "#1f2937";
141
- }
142
- function ae(e) {
143
- let t = Number(e);
144
- if (Number.isFinite(t)) return t;
145
100
  }
146
101
  //#endregion
147
- //#region src/reinspect/context.tsx
148
- var N = "Capture rerenders and show totals next to component badges.", oe = "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.", se = "Choose whether to count render attempts, committed renders, or both.", ce = "Render attempts track render-phase executions (includes Strict Mode extra passes). Committed renders track completed DOM commits. Both shows both counters together.", le = "Controls which components are automatically discoverable by Reinspect.", P = "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).";
149
- function F(e) {
150
- let t = {};
151
- for (let n of e) t[n] = !0;
152
- return t;
102
+ //#region src/reinspect/useReinspect.ts
103
+ function T() {
104
+ let e = l(r);
105
+ if (!e) throw Error("useReinspect must be used within ReinspectProvider");
106
+ return e;
153
107
  }
154
- function I({ children: e, config: n }) {
155
- let r = a(() => A(n), [n]), [i, o] = s(r.startActive), [c] = s(r.inspectMode), [d, f] = s(r.inspectMode), [p, m] = s(r.shouldCountRenders), [h, _] = s(r.renderCaptureMode), [v, y] = s(() => F(r.countRendersForComponents)), [b, ee] = s({}), x = t((e, t, n) => {
156
- ee((r) => {
157
- let i = { ...r[e] ?? {} };
158
- if (n == null || n === "" ? delete i[t] : i[t] = n, Object.keys(i).length === 0) {
159
- let t = { ...r };
160
- return delete t[e], t;
161
- }
162
- return {
163
- ...r,
164
- [e]: i
165
- };
108
+ //#endregion
109
+ //#region src/reinspect/react/provider.tsx
110
+ var E = "Controls render counting for wrapped components.", D = "Off disables global counting. Attempts, commits, and both capture rerenders after initial mount.", O = "Controls which components are automatically discoverable by Reinspect.", k = "Only wrapped components uses explicit withReinspect wrappers only. All 1st-party components auto-discovers components under your source tree. All components also attempts dependency components (with safety skips).";
111
+ function A({ children: n, config: a }) {
112
+ let s = d(() => t(a), [a]), [l, p] = f(w, s, S);
113
+ u(() => {
114
+ p({
115
+ type: "hydrate-config",
116
+ config: s
166
117
  });
167
- }, []), S = t((e, t) => {
168
- y((n) => {
169
- if (t) return {
170
- ...n,
171
- [e]: !0
172
- };
173
- if (!n[e]) return n;
174
- let r = { ...n };
175
- return delete r[e], r;
118
+ }, [s]);
119
+ let m = c((e) => {
120
+ p({
121
+ type: "set-is-active",
122
+ value: typeof e == "function" ? e(l.isActive) : e
123
+ });
124
+ }, [l.isActive]), _ = c((e) => {
125
+ p({
126
+ type: "set-pending-inspect-mode",
127
+ value: typeof e == "function" ? e(l.pendingInspectMode) : e
176
128
  });
177
- }, []), C = t((e) => p || !!v[e], [p, v]), w = d !== c, T = t(() => {
178
- w && (k(d), ne());
179
- }, [w, d]), E = t((e) => M(e, r.palette), [r.palette]), D = a(() => ({
180
- config: r,
181
- isActive: r.enabled && i,
182
- setIsActive: o,
183
- inspectMode: c,
184
- pendingInspectMode: d,
185
- setPendingInspectMode: f,
186
- hasPendingInspectModeChange: w,
129
+ }, [l.pendingInspectMode]), v = c((e) => {
130
+ p({
131
+ type: "set-render-counter-mode",
132
+ value: typeof e == "function" ? e(l.renderCounterMode) : e
133
+ });
134
+ }, [l.renderCounterMode]), y = c((e, t, n) => {
135
+ p({
136
+ type: "update-override",
137
+ componentId: e,
138
+ prop: t,
139
+ value: n
140
+ });
141
+ }, []), b = c((e, t) => {
142
+ p({
143
+ type: "set-render-counting-for-component",
144
+ componentName: e,
145
+ enabled: t
146
+ });
147
+ }, []), x = c((e) => l.renderCounterMode !== "off" || !!l.renderCountComponents[e], [l.renderCounterMode, l.renderCountComponents]), C = l.pendingInspectMode !== l.inspectMode, T = c(() => {
148
+ C && (e(l.pendingInspectMode), o());
149
+ }, [C, l.pendingInspectMode]), E = c((e) => i(e, s.palette), [s.palette]), D = d(() => ({
150
+ config: s,
151
+ isActive: s.enabled && l.isActive,
152
+ setIsActive: m,
153
+ inspectMode: l.inspectMode,
154
+ pendingInspectMode: l.pendingInspectMode,
155
+ setPendingInspectMode: _,
156
+ hasPendingInspectModeChange: C,
187
157
  applyInspectMode: T,
188
- shouldCountRenders: p,
189
- setShouldCountRenders: m,
190
- renderCaptureMode: h,
191
- setRenderCaptureMode: _,
192
- renderCountComponents: v,
193
- setRenderCountingForComponent: S,
194
- isRenderCountingEnabledFor: C,
195
- overrides: b,
196
- updateOverride: x,
158
+ renderCounterMode: l.renderCounterMode,
159
+ setRenderCounterMode: v,
160
+ renderCountComponents: l.renderCountComponents,
161
+ setRenderCountingForComponent: b,
162
+ isRenderCountingEnabledFor: x,
163
+ overrides: l.overrides,
164
+ updateOverride: y,
197
165
  getBorderColor: E
198
166
  }), [
199
- r,
200
- i,
201
- c,
202
- d,
203
- f,
204
- w,
167
+ s,
168
+ l.isActive,
169
+ m,
170
+ l.inspectMode,
171
+ l.pendingInspectMode,
172
+ _,
173
+ C,
205
174
  T,
206
- p,
207
- h,
175
+ l.renderCounterMode,
208
176
  v,
209
- S,
210
- C,
177
+ l.renderCountComponents,
211
178
  b,
212
179
  x,
180
+ l.overrides,
181
+ y,
213
182
  E
214
183
  ]);
215
- return /* @__PURE__ */ u(g.Provider, {
184
+ return /* @__PURE__ */ g(r.Provider, {
216
185
  value: D,
217
- children: [e, r.enabled && r.showFloatingToggle ? /* @__PURE__ */ l(L, {}) : null]
186
+ children: [n, s.enabled && s.showFloatingToggle ? /* @__PURE__ */ h(j, {}) : null]
218
187
  });
219
188
  }
220
- function L() {
221
- let { config: e, isActive: t, setIsActive: n, inspectMode: i, pendingInspectMode: a, setPendingInspectMode: c, hasPendingInspectModeChange: d, applyInspectMode: f, shouldCountRenders: p, setShouldCountRenders: m, renderCaptureMode: h, setRenderCaptureMode: g } = _(), [v, y] = s(!1), b = o(null);
222
- return r(() => {
223
- if (!v) return;
189
+ function j() {
190
+ let { config: e, isActive: t, setIsActive: r, inspectMode: i, pendingInspectMode: o, setPendingInspectMode: s, hasPendingInspectModeChange: c, applyInspectMode: l, renderCounterMode: d, setRenderCounterMode: f } = T(), [_, v] = m(!1), y = p(null);
191
+ return u(() => {
192
+ if (!_) return;
224
193
  let e = (e) => {
225
194
  let t = e.target;
226
- b.current?.contains(t) || y(!1);
195
+ t instanceof Node && (y.current?.contains(t) || v(!1));
227
196
  }, t = (e) => {
228
- e.key === "Escape" && y(!1);
197
+ e.key === "Escape" && v(!1);
229
198
  };
230
199
  return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
231
200
  document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
232
201
  };
233
- }, [v]), e.enabled ? /* @__PURE__ */ u("div", {
202
+ }, [_]), e.enabled ? /* @__PURE__ */ g("div", {
234
203
  className: "reinspect-floating-root",
235
- ref: b,
236
- children: [/* @__PURE__ */ l("button", {
204
+ ref: y,
205
+ children: [/* @__PURE__ */ h("button", {
237
206
  type: "button",
238
207
  className: "reinspect-floating-toggle",
239
208
  "data-testid": "reinspect-floating-toggle",
240
- onClick: () => y((e) => !e),
241
- "aria-expanded": v,
209
+ onClick: () => v((e) => !e),
210
+ "aria-expanded": _,
242
211
  "aria-controls": "reinspect-settings-menu",
243
212
  children: "Reinspect settings"
244
- }), v ? /* @__PURE__ */ u("div", {
213
+ }), _ ? /* @__PURE__ */ g("div", {
245
214
  id: "reinspect-settings-menu",
246
215
  className: "reinspect-settings-menu",
247
216
  role: "dialog",
248
217
  "aria-label": "Reinspect settings",
249
218
  "data-testid": "reinspect-settings-menu",
250
219
  children: [
251
- /* @__PURE__ */ l("p", {
220
+ /* @__PURE__ */ h("p", {
252
221
  className: "reinspect-settings-title",
253
222
  children: "Reinspect settings"
254
223
  }),
255
- /* @__PURE__ */ u("label", {
224
+ /* @__PURE__ */ g("label", {
256
225
  className: "reinspect-settings-toggle-row",
257
- children: [/* @__PURE__ */ l("span", {
226
+ children: [/* @__PURE__ */ h("span", {
258
227
  className: "reinspect-settings-toggle-label",
259
228
  children: "Inspector enabled"
260
- }), /* @__PURE__ */ l("input", {
229
+ }), /* @__PURE__ */ h("input", {
261
230
  "data-testid": "reinspect-setting-inspector-active",
262
231
  type: "checkbox",
263
232
  checked: t,
264
- onChange: (e) => n(e.currentTarget.checked)
233
+ onChange: (e) => r(e.currentTarget.checked)
265
234
  })]
266
235
  }),
267
- /* @__PURE__ */ l("div", { className: "reinspect-settings-divider" }),
268
- /* @__PURE__ */ u("section", {
236
+ /* @__PURE__ */ h("div", { className: "reinspect-settings-divider" }),
237
+ /* @__PURE__ */ g("section", {
269
238
  className: "reinspect-setting-block",
270
239
  children: [
271
- /* @__PURE__ */ u("header", {
240
+ /* @__PURE__ */ g("header", {
272
241
  className: "reinspect-setting-header",
273
- children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("p", {
242
+ children: [/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("p", {
274
243
  className: "reinspect-setting-name",
275
244
  children: "INSPECT_MODE"
276
- }), /* @__PURE__ */ l("p", {
245
+ }), /* @__PURE__ */ h("p", {
277
246
  className: "reinspect-setting-short-description",
278
- children: le
279
- })] }), /* @__PURE__ */ u("span", {
247
+ children: O
248
+ })] }), /* @__PURE__ */ g("span", {
280
249
  className: "reinspect-tooltip-host",
281
- children: [/* @__PURE__ */ l("button", {
250
+ children: [/* @__PURE__ */ h("button", {
282
251
  type: "button",
283
252
  className: "reinspect-tooltip-trigger",
284
253
  "aria-label": "Explain INSPECT_MODE",
285
254
  children: "?"
286
- }), /* @__PURE__ */ l("span", {
255
+ }), /* @__PURE__ */ h("span", {
287
256
  className: "reinspect-tooltip-content",
288
257
  role: "tooltip",
289
- children: P
258
+ children: k
290
259
  })]
291
260
  })]
292
261
  }),
293
- /* @__PURE__ */ u("label", {
262
+ /* @__PURE__ */ g("label", {
294
263
  className: "reinspect-settings-select-row",
295
- children: [/* @__PURE__ */ l("span", {
264
+ children: [/* @__PURE__ */ h("span", {
296
265
  className: "reinspect-settings-toggle-label",
297
266
  children: "Inspect Mode"
298
- }), /* @__PURE__ */ u("select", {
267
+ }), /* @__PURE__ */ g("select", {
299
268
  "data-testid": "reinspect-setting-inspect-mode",
300
- value: a,
269
+ value: o,
301
270
  onChange: (e) => {
302
271
  let t = e.currentTarget.value;
303
- E(t) && c(t);
272
+ a(t) && s(t);
304
273
  },
305
274
  children: [
306
- /* @__PURE__ */ l("option", {
275
+ /* @__PURE__ */ h("option", {
307
276
  value: "wrapped",
308
277
  children: "Only wrapped components"
309
278
  }),
310
- /* @__PURE__ */ l("option", {
279
+ /* @__PURE__ */ h("option", {
311
280
  value: "first-party",
312
281
  children: "All 1st-party components"
313
282
  }),
314
- /* @__PURE__ */ l("option", {
283
+ /* @__PURE__ */ h("option", {
315
284
  value: "all",
316
285
  children: "All components"
317
286
  })
318
287
  ]
319
288
  })]
320
289
  }),
321
- /* @__PURE__ */ l("button", {
290
+ /* @__PURE__ */ h("button", {
322
291
  type: "button",
323
292
  className: "reinspect-apply-button",
324
293
  "data-testid": "reinspect-apply-inspect-mode",
325
- onClick: f,
326
- disabled: !d,
294
+ onClick: l,
295
+ disabled: !c,
327
296
  children: "Apply & Reload"
328
297
  }),
329
- d ? /* @__PURE__ */ l("p", {
298
+ c ? /* @__PURE__ */ h("p", {
330
299
  className: "reinspect-setting-note",
331
300
  "data-testid": "reinspect-inspect-mode-reload-note",
332
301
  children: "Inspect mode changes are applied after reload."
333
- }) : /* @__PURE__ */ u("p", {
302
+ }) : /* @__PURE__ */ g("p", {
334
303
  className: "reinspect-setting-note",
335
304
  children: ["Current mode: ", i]
336
305
  })
337
306
  ]
338
307
  }),
339
- /* @__PURE__ */ l("div", { className: "reinspect-settings-divider" }),
340
- /* @__PURE__ */ u("section", {
308
+ /* @__PURE__ */ h("div", { className: "reinspect-settings-divider" }),
309
+ /* @__PURE__ */ g("section", {
341
310
  className: "reinspect-setting-block",
342
- children: [
343
- /* @__PURE__ */ u("header", {
344
- className: "reinspect-setting-header",
345
- children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("p", {
346
- className: "reinspect-setting-name",
347
- children: "SHOULD_COUNT_RENDERS"
348
- }), /* @__PURE__ */ l("p", {
349
- className: "reinspect-setting-short-description",
350
- children: N
351
- })] }), /* @__PURE__ */ u("span", {
352
- className: "reinspect-tooltip-host",
353
- children: [/* @__PURE__ */ l("button", {
354
- type: "button",
355
- className: "reinspect-tooltip-trigger",
356
- "aria-label": "Explain SHOULD_COUNT_RENDERS",
357
- children: "?"
358
- }), /* @__PURE__ */ l("span", {
359
- className: "reinspect-tooltip-content",
360
- role: "tooltip",
361
- children: oe
362
- })]
363
- })]
364
- }),
365
- /* @__PURE__ */ u("label", {
366
- className: "reinspect-settings-toggle-row",
367
- children: [/* @__PURE__ */ l("span", {
368
- className: "reinspect-settings-toggle-label",
369
- children: "Capture render for all components"
370
- }), /* @__PURE__ */ l("input", {
371
- "data-testid": "reinspect-setting-should-count-renders",
372
- type: "checkbox",
373
- checked: p,
374
- onChange: (e) => m(e.currentTarget.checked)
375
- })]
376
- }),
377
- /* @__PURE__ */ u("header", {
378
- className: "reinspect-setting-header",
379
- children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("p", {
380
- className: "reinspect-setting-name",
381
- children: "RENDER_CAPTURE_MODE"
382
- }), /* @__PURE__ */ l("p", {
383
- className: "reinspect-setting-short-description",
384
- children: se
385
- })] }), /* @__PURE__ */ u("span", {
386
- className: "reinspect-tooltip-host",
387
- children: [/* @__PURE__ */ l("button", {
388
- type: "button",
389
- className: "reinspect-tooltip-trigger",
390
- "aria-label": "Explain RENDER_CAPTURE_MODE",
391
- children: "?"
392
- }), /* @__PURE__ */ l("span", {
393
- className: "reinspect-tooltip-content",
394
- role: "tooltip",
395
- children: ce
396
- })]
397
- })]
398
- }),
399
- /* @__PURE__ */ u("label", {
400
- className: "reinspect-settings-select-row",
401
- children: [/* @__PURE__ */ l("span", {
402
- className: "reinspect-settings-toggle-label",
403
- children: "Capture mode"
404
- }), /* @__PURE__ */ u("select", {
405
- "data-testid": "reinspect-setting-render-capture-mode",
406
- value: h,
407
- onChange: (e) => {
408
- let t = e.currentTarget.value;
409
- D(t) && g(t);
410
- },
411
- children: [
412
- /* @__PURE__ */ l("option", {
413
- value: "attempts",
414
- children: "Render attempts"
415
- }),
416
- /* @__PURE__ */ l("option", {
417
- value: "commits",
418
- children: "Committed renders"
419
- }),
420
- /* @__PURE__ */ l("option", {
421
- value: "both",
422
- children: "Both"
423
- })
424
- ]
311
+ children: [/* @__PURE__ */ g("header", {
312
+ className: "reinspect-setting-header",
313
+ children: [/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("p", {
314
+ className: "reinspect-setting-name",
315
+ children: "RENDER_COUNTERS"
316
+ }), /* @__PURE__ */ h("p", {
317
+ className: "reinspect-setting-short-description",
318
+ children: E
319
+ })] }), /* @__PURE__ */ g("span", {
320
+ className: "reinspect-tooltip-host",
321
+ children: [/* @__PURE__ */ h("button", {
322
+ type: "button",
323
+ className: "reinspect-tooltip-trigger",
324
+ "aria-label": "Explain RENDER_COUNTERS",
325
+ children: "?"
326
+ }), /* @__PURE__ */ h("span", {
327
+ className: "reinspect-tooltip-content",
328
+ role: "tooltip",
329
+ children: D
425
330
  })]
426
- })
427
- ]
331
+ })]
332
+ }), /* @__PURE__ */ g("label", {
333
+ className: "reinspect-settings-select-row",
334
+ children: [/* @__PURE__ */ h("span", {
335
+ className: "reinspect-settings-toggle-label",
336
+ children: "Counter mode"
337
+ }), /* @__PURE__ */ g("select", {
338
+ "data-testid": "reinspect-setting-render-counters",
339
+ value: d,
340
+ onChange: (e) => {
341
+ let t = e.currentTarget.value;
342
+ n(t) && f(t);
343
+ },
344
+ children: [
345
+ /* @__PURE__ */ h("option", {
346
+ value: "off",
347
+ children: "Off"
348
+ }),
349
+ /* @__PURE__ */ h("option", {
350
+ value: "attempts",
351
+ children: "Render attempts"
352
+ }),
353
+ /* @__PURE__ */ h("option", {
354
+ value: "commits",
355
+ children: "Committed renders"
356
+ }),
357
+ /* @__PURE__ */ h("option", {
358
+ value: "both",
359
+ children: "Both"
360
+ })
361
+ ]
362
+ })]
363
+ })]
428
364
  })
429
365
  ]
430
366
  }) : null]
431
367
  }) : null;
432
368
  }
433
369
  //#endregion
434
- //#region src/reinspect/propsInspector.ts
435
- var R = 4, z = 40, B = 40, V = "__reinspect_placeholder__";
436
- function H(e, t) {
437
- return {
438
- [V]: e,
439
- display: t
440
- };
441
- }
442
- function U(e) {
443
- return typeof e == "object" && !!e && !Array.isArray(e);
444
- }
445
- function ue(e) {
446
- if (!U(e)) return !1;
447
- let t = Object.getPrototypeOf(e);
448
- return t === Object.prototype || t === null;
449
- }
450
- function de(e) {
451
- return U(e) && typeof e.__reinspect_placeholder__ == "string" && typeof e.display == "string";
452
- }
453
- function fe(e) {
454
- try {
455
- return JSON.stringify(e, null, 2);
456
- } catch {
457
- return null;
458
- }
459
- }
460
- function W(e) {
461
- try {
462
- let t = Function.prototype.toString.call(e);
463
- return typeof t != "string" || t.trim().length === 0 ? "[Function source unavailable]" : t;
464
- } catch {
465
- return "[Function source unavailable]";
466
- }
467
- }
468
- function pe(e) {
469
- let t = e.replace(/\s+/g, " ").trim();
470
- return t.length <= 120 ? t : `${t.slice(0, 117)}...`;
471
- }
472
- function G(e, t, n) {
473
- if (n > R) return H("truncated", "[Max depth reached]");
474
- if (e === null) return null;
475
- let r = typeof e;
476
- if (r === "string" || r === "boolean") return e;
477
- if (r === "number") return Number.isFinite(e) ? e : H("non-finite-number", String(e));
478
- if (r === "undefined") return H("undefined", "undefined");
479
- if (r === "bigint") return H("bigint", `${String(e)}n`);
480
- if (r === "symbol") return H("symbol", String(e));
481
- if (r === "function") return H("function", `[Function ${e.name || "anonymous"}]`);
482
- if (e instanceof Date) return H("date", Number.isNaN(e.getTime()) ? "Invalid Date" : e.toISOString());
483
- if (e instanceof RegExp) return H("regexp", e.toString());
484
- if (r === "object") {
485
- let r = e;
486
- if (t.has(r)) return H("circular", "[Circular]");
487
- if (t.add(r), Array.isArray(e)) {
488
- let i = [], a = Math.min(e.length, B);
489
- for (let r = 0; r < a; r += 1) i.push(G(e[r], t, n + 1));
490
- return e.length > B && i.push(H("truncated", `${e.length - B} more items`)), t.delete(r), i;
491
- }
492
- let i = {}, a = Object.entries(e), o = Math.min(a.length, z);
493
- for (let e = 0; e < o; e += 1) {
494
- let [r, o] = a[e];
495
- i[r] = G(o, t, n + 1);
496
- }
497
- return a.length > z && (i.__reinspect_truncated__ = H("truncated", `${a.length - z} more keys`)), t.delete(r), i;
498
- }
499
- return H("unsupported", "[Unsupported value]");
500
- }
501
- function K(e) {
502
- if (e === null) return {
503
- kind: "null",
504
- summary: "null",
505
- copyText: "null"
506
- };
507
- let t = typeof e;
508
- if (t === "undefined") return {
509
- kind: "undefined",
510
- summary: "undefined",
511
- copyText: "undefined"
512
- };
513
- if (t === "boolean") return {
514
- kind: "boolean",
515
- summary: String(e),
516
- copyText: String(e)
517
- };
518
- if (t === "number") return {
519
- kind: "number",
520
- summary: String(e),
521
- copyText: String(e)
522
- };
523
- if (t === "string") return {
524
- kind: "string",
525
- summary: JSON.stringify(e),
526
- copyText: String(e)
527
- };
528
- if (t === "bigint") return {
529
- kind: "bigint",
530
- summary: `${String(e)}n`,
531
- copyText: `${String(e)}n`
532
- };
533
- if (t === "symbol") {
534
- let t = String(e);
535
- return {
536
- kind: "symbol",
537
- summary: t,
538
- copyText: t
539
- };
540
- }
541
- if (t === "function") {
542
- let t = e, n = W(t), r = t.name || "anonymous";
543
- return {
544
- kind: "function",
545
- summary: `Function ${r}(${t.length})`,
546
- copyText: n,
547
- functionMeta: {
548
- name: r,
549
- arity: t.length,
550
- preview: pe(n),
551
- source: n
552
- }
553
- };
554
- }
555
- if (e instanceof Date) {
556
- let t = Number.isNaN(e.getTime()) ? "Invalid Date" : e.toISOString();
557
- return {
558
- kind: "date",
559
- summary: `Date ${t}`,
560
- copyText: t
561
- };
562
- }
563
- if (e instanceof RegExp) {
564
- let t = e.toString();
565
- return {
566
- kind: "regexp",
567
- summary: t,
568
- copyText: t
569
- };
570
- }
571
- return Array.isArray(e) ? {
572
- kind: "array",
573
- summary: `Array(${e.length})`
574
- } : U(e) ? {
575
- kind: "object",
576
- summary: `Object(${Object.keys(e).length})`
577
- } : {
578
- kind: "unknown",
579
- summary: String(e)
580
- };
581
- }
582
- function q(e) {
583
- if (!de(e)) {
584
- if (Array.isArray(e)) {
585
- let t = [];
586
- for (let n of e) {
587
- let e = q(n);
588
- if (e === void 0) return;
589
- t.push(e);
590
- }
591
- return t;
592
- }
593
- if (U(e)) {
594
- let t = {};
595
- for (let [n, r] of Object.entries(e)) {
596
- let e = q(r);
597
- e !== void 0 && (t[n] = e);
598
- }
599
- return t;
600
- }
601
- return e;
602
- }
603
- }
604
- function me(e) {
605
- return Object.keys(e).map((t) => ({
606
- key: t,
607
- value: K(e[t])
608
- }));
609
- }
610
- function he(e) {
611
- return fe(G(e, /* @__PURE__ */ new WeakSet(), 0)) ?? "{}";
612
- }
613
- function ge(e) {
614
- return fe(G(e, /* @__PURE__ */ new WeakSet(), 0));
615
- }
616
- function _e(e) {
617
- if (e === null) return !0;
618
- let t = typeof e;
619
- return t === "string" || t === "number" || t === "boolean" || Array.isArray(e) ? !0 : ue(e);
620
- }
621
- function ve(e) {
622
- let t = e.trim();
623
- if (t.length === 0) return {
624
- parsed: null,
625
- error: "Value JSON cannot be empty."
626
- };
627
- try {
628
- let e = q(JSON.parse(t));
629
- return e === void 0 || !_e(e) ? {
630
- parsed: null,
631
- error: "Only objects, arrays, and primitive JSON values are editable."
632
- } : {
633
- parsed: e,
634
- error: null
635
- };
636
- } catch {
637
- return {
638
- parsed: null,
639
- error: "Invalid JSON. Fix syntax and try Apply again."
640
- };
641
- }
642
- }
643
- function ye(e) {
644
- let t = e.trim();
645
- if (t.length === 0) return {
646
- parsed: {},
647
- error: null
648
- };
649
- try {
650
- let e = JSON.parse(t);
651
- if (typeof e != "object" || !e || Array.isArray(e)) return {
652
- parsed: null,
653
- error: "Props JSON must be an object (example: {\"title\":\"Demo\"})."
654
- };
655
- let n = {};
656
- for (let [t, r] of Object.entries(e)) {
657
- let e = q(r);
658
- e !== void 0 && (n[t] = e);
659
- }
660
- return {
661
- parsed: n,
662
- error: null
663
- };
664
- } catch {
665
- return {
666
- parsed: null,
667
- error: "Invalid JSON. Fix syntax and try Apply again."
668
- };
669
- }
670
- }
671
- //#endregion
672
- //#region src/reinspect/wrapMarker.ts
673
- var be = Symbol.for("reinspect.wrapped");
674
- function xe(e) {
675
- return e[be];
676
- }
677
- //#endregion
678
370
  //#region src/reinspect/withReinspect.tsx
679
- var Se = {
680
- enabled: !1,
681
- startActive: !1,
682
- showFloatingToggle: !1,
683
- inspectMode: "wrapped",
684
- editableProps: [],
685
- palette: [],
686
- zIndexBase: 0,
687
- shouldCountRenders: !1,
688
- countRendersForComponents: [],
689
- renderCaptureMode: "attempts"
690
- }, Ce = /* @__PURE__ */ new Map();
691
- function J(e) {
692
- let t = Ce.get(e);
693
- if (t) return t;
371
+ function M(e, t) {
694
372
  let n = {
695
- attempts: 0,
696
- commits: 0,
697
- hasCommitted: !1,
698
- wasCountingEnabled: !1,
699
- shouldCountCommit: !1
700
- };
701
- return Ce.set(e, n), n;
702
- }
703
- function we(e, t) {
704
- let n = J(e);
705
- if (!t) return n.wasCountingEnabled = !1, n.shouldCountCommit = !1, {
706
- attempts: n.attempts,
707
- commits: n.commits
708
- };
709
- let r = n.hasCommitted && n.wasCountingEnabled;
710
- return r && (n.attempts += 1), n.wasCountingEnabled = !0, n.shouldCountCommit = r, {
711
- attempts: n.attempts,
712
- commits: n.commits + +!!r
373
+ source: "manual",
374
+ scope: "first-party"
713
375
  };
714
- }
715
- function Te(e) {
716
- let t = J(e);
717
- t.hasCommitted && t.shouldCountCommit && (t.commits += 1), t.hasCommitted = !0, t.shouldCountCommit = !1;
718
- }
719
- function Ee(e, t) {
720
- return t === "commits" ? `${e.commits} commits` : t === "both" ? `${e.attempts} attempts | ${e.commits} commits` : `${e.attempts} attempts`;
721
- }
722
- function De(e) {
723
- let t = e.replace(/([A-Z])/g, " $1").trim();
724
- return t.length > 0 ? t[0].toUpperCase() + t.slice(1) : e;
725
- }
726
- function Oe(e) {
727
- return e.trim().toLowerCase().replace(/[\s_-]+/g, "");
728
- }
729
- function Y(e) {
730
- return e != null && e !== "";
731
- }
732
- function ke(e) {
733
- return e.replace(/[^a-zA-Z0-9_-]/g, "-");
734
- }
735
- async function Ae(e) {
736
- if (typeof navigator > "u" || !navigator.clipboard?.writeText) return !1;
737
- try {
738
- return await navigator.clipboard.writeText(e), !0;
739
- } catch {
740
- return !1;
741
- }
742
- }
743
- function je({ value: e, onCopy: t }) {
744
- if (e.kind === "function" && e.functionMeta) {
745
- let n = e.functionMeta;
746
- return /* @__PURE__ */ u("div", {
747
- className: "reinspect-prop-function",
748
- children: [
749
- /* @__PURE__ */ l("code", { children: e.summary }),
750
- /* @__PURE__ */ l("pre", { children: n.preview }),
751
- /* @__PURE__ */ l("button", {
752
- type: "button",
753
- onClick: () => t(n.source, "Function source"),
754
- disabled: !n.source,
755
- children: "Copy function source"
756
- })
757
- ]
758
- });
759
- }
760
- return /* @__PURE__ */ u("div", {
761
- className: "reinspect-prop-scalar",
762
- children: [/* @__PURE__ */ l("code", { children: e.summary }), e.copyText ? /* @__PURE__ */ l("button", {
763
- type: "button",
764
- onClick: () => t(e.copyText ?? "", "Value"),
765
- children: "Copy"
766
- }) : null]
767
- });
768
- }
769
- function Me(e, t) {
770
- return t?.name?.trim() || e.displayName?.trim() || e.name?.trim() || t?.fallbackName?.trim() || "Component";
771
- }
772
- function Ne(e, t, n) {
773
- return e === "manual" || n === "all" || n === "first-party" && t === "first-party";
774
- }
775
- function X(e, t) {
776
- let a = t?.source ?? "manual", f = t?.scope ?? "first-party", p = xe(e);
777
- if (p && a === "auto") return e;
778
- let m = p && a === "manual" ? p.original : e, h = Me(m, t);
779
- function _(e) {
780
- let t = i(), p = o(null), _ = o(null), [v, y] = s(null), [x, S] = s("css"), [C, w] = s("detected"), [T, E] = s(""), [D, O] = s({}), [te, k] = s("{}"), [ne, A] = s(null), [j, M] = s(null), [N, oe] = s({}), [se, ce] = s({}), [le, P] = s({}), [F, I] = s(null), [L, R] = s(""), [z, B] = s(null), V = n(g), H = !!V, U = V?.config ?? Se, ue = V?.getBorderColor ?? (() => "#f97316"), de = V?.isActive ?? !1, fe = V?.inspectMode ?? "wrapped", W = V?.shouldCountRenders ?? !1, pe = V?.renderCaptureMode ?? Se.renderCaptureMode, G = V?.overrides ?? {}, K = V?.updateOverride ?? (() => void 0), q = V?.renderCountComponents ?? {}, be = V?.setRenderCountingForComponent ?? (() => void 0), xe = V?.isRenderCountingEnabledFor ?? (() => !1), J = `${h}-${t}`, Me = ue(h), X = Ne(a, f, fe), Z = U.enabled && de && X, Pe = X && xe(h), Fe = !!q[h], Ie = we(J, Pe), Le = G[J], Re = Z ? re(Le, U.editableProps) : {}, Q = {
781
- ...e,
782
- ...D
783
- }, ze = Q, $ = Z && v !== null, Be = Oe(T), Ve = Be.length === 0 ? U.editableProps : U.editableProps.filter((e) => Oe(e).includes(Be)), He = $ && x === "props" && C === "detected" ? me(ze) : [];
784
- r(() => (Te(J), () => {
785
- Ce.delete(J);
786
- }), [J]), r(() => {
787
- if (!$) return;
788
- let e = (e) => {
789
- let t = e.target;
790
- p.current?.contains(t) || _.current?.contains(t) || (y(null), I(null), R(""), B(null));
791
- }, t = (e) => {
792
- if (e.key === "Escape") {
793
- if (F) {
794
- I(null), R(""), B(null);
795
- return;
796
- }
797
- y(null);
798
- }
799
- };
800
- return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
801
- document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
802
- };
803
- }, [F, $]), r(() => {
804
- if (!j) return;
805
- let e = globalThis.setTimeout(() => {
806
- M(null);
807
- }, 1400);
808
- return () => {
809
- globalThis.clearTimeout(e);
810
- };
811
- }, [j]);
812
- let Ue = {
813
- "--reinspect-color": Me,
814
- "--reinspect-z-base": U.zIndexBase
815
- }, We = (e) => {
816
- Z && (e.preventDefault(), S("css"), w("detected"), E(""), A(null), M(null), oe({}), ce({}), P({}), I(null), R(""), B(null), k("{}"), y({
817
- x: e.clientX,
818
- y: e.clientY
819
- }));
820
- }, Ge = () => {
821
- let { parsed: e, error: t } = ye(te);
822
- if (t || !e) {
823
- A(t);
824
- return;
825
- }
826
- O(e), A(null);
827
- }, Ke = () => {
828
- O({}), C === "raw" && k(he(e)), A(null);
829
- }, qe = (e, t) => {
830
- Ae(e).then((e) => {
831
- M(e ? `${t} copied.` : "Clipboard access is unavailable.");
832
- });
833
- }, Je = (e, t) => {
834
- if (le[e]) {
835
- P((t) => ({
836
- ...t,
837
- [e]: !1
838
- }));
839
- return;
840
- }
841
- if (!(e in N) && !(e in se)) {
842
- let n = ge(t);
843
- n === null ? ce((t) => ({
844
- ...t,
845
- [e]: "JSON preview is unavailable for this value."
846
- })) : oe((t) => ({
847
- ...t,
848
- [e]: n
849
- }));
850
- }
851
- P((t) => ({
852
- ...t,
853
- [e]: !0
854
- }));
855
- }, Ye = (e, t) => {
856
- if (!_e(t)) return;
857
- let n = ge(t);
858
- if (n === null) {
859
- M("Unable to open editor for this value.");
860
- return;
861
- }
862
- I(e), R(n), B(null);
863
- }, Xe = () => {
864
- if (!F) return;
865
- let { parsed: e, error: t } = ve(L);
866
- if (t || e === null) {
867
- B(t);
868
- return;
869
- }
870
- O((t) => ({
871
- ...t,
872
- [F]: e
873
- })), I(null), R(""), B(null);
874
- }, Ze = $ ? /* @__PURE__ */ u("div", {
875
- ref: p,
876
- className: "reinspect-menu",
877
- role: "dialog",
878
- "aria-label": `${h} inspector controls`,
879
- style: {
880
- top: `${v.y}px`,
881
- left: `${v.x}px`
882
- },
883
- children: [
884
- /* @__PURE__ */ u("p", {
885
- className: "reinspect-menu-title",
886
- children: [h, " inspector"]
887
- }),
888
- /* @__PURE__ */ u("label", {
889
- className: "reinspect-menu-component-setting",
890
- children: [/* @__PURE__ */ l("span", { children: "Capture renders for this component" }), /* @__PURE__ */ l("input", {
891
- type: "checkbox",
892
- checked: W ? !0 : Fe,
893
- onChange: (e) => be(h, e.currentTarget.checked),
894
- disabled: W,
895
- "aria-label": `Capture renders for ${h}`,
896
- "data-testid": `reinspect-component-render-toggle-${h}`
897
- })]
898
- }),
899
- W ? /* @__PURE__ */ l("p", {
900
- className: "reinspect-setting-note",
901
- children: "Global capture is enabled from Reinspect settings."
902
- }) : null,
903
- /* @__PURE__ */ u("div", {
904
- className: "reinspect-submenu",
905
- children: [/* @__PURE__ */ l("button", {
906
- type: "button",
907
- "data-state": x === "css" ? "active" : "idle",
908
- onClick: () => S("css"),
909
- children: "CSS"
910
- }), /* @__PURE__ */ l("button", {
911
- type: "button",
912
- "data-state": x === "props" ? "active" : "idle",
913
- onClick: () => S("props"),
914
- children: "Props"
915
- })]
916
- }),
917
- x === "css" ? /* @__PURE__ */ u(c, { children: [
918
- /* @__PURE__ */ u("div", {
919
- className: "reinspect-menu-filter",
920
- children: [/* @__PURE__ */ l("span", {
921
- className: "reinspect-menu-filter-icon",
922
- "aria-hidden": "true",
923
- children: /* @__PURE__ */ l("svg", {
924
- viewBox: "0 0 24 24",
925
- focusable: "false",
926
- children: /* @__PURE__ */ l("path", {
927
- 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",
928
- fill: "currentColor"
929
- })
930
- })
931
- }), /* @__PURE__ */ l("input", {
932
- id: `${J}-css-filter`,
933
- "data-testid": "reinspect-css-filter-input",
934
- type: "search",
935
- value: T,
936
- placeholder: "Filter",
937
- "aria-label": "Filter CSS properties",
938
- onChange: (e) => E(e.currentTarget.value)
939
- })]
940
- }),
941
- /* @__PURE__ */ l("div", {
942
- className: "reinspect-menu-grid",
943
- children: Ve.map((e) => {
944
- let t = Le?.[e], n = `${J}-${e}`;
945
- if (b.has(e)) {
946
- let r = typeof t == "string" ? ie(t) : "#1f2937";
947
- return /* @__PURE__ */ u("div", {
948
- className: "reinspect-field",
949
- children: [/* @__PURE__ */ l("label", {
950
- htmlFor: n,
951
- children: De(e)
952
- }), /* @__PURE__ */ u("div", {
953
- className: "reinspect-inline-controls",
954
- children: [/* @__PURE__ */ l("input", {
955
- id: n,
956
- type: "color",
957
- value: r,
958
- onChange: (t) => K(J, e, t.currentTarget.value)
959
- }), /* @__PURE__ */ l("button", {
960
- type: "button",
961
- onClick: () => K(J, e, void 0),
962
- disabled: !Y(t),
963
- children: "reset"
964
- })]
965
- })]
966
- }, e);
967
- }
968
- if (e === "opacity") {
969
- let r = typeof t == "number" ? t : 1;
970
- return /* @__PURE__ */ u("div", {
971
- className: "reinspect-field",
972
- children: [/* @__PURE__ */ l("label", {
973
- htmlFor: n,
974
- children: "Opacity"
975
- }), /* @__PURE__ */ u("div", {
976
- className: "reinspect-inline-controls reinspect-opacity-controls",
977
- children: [
978
- /* @__PURE__ */ l("input", {
979
- id: n,
980
- type: "range",
981
- min: "0",
982
- max: "1",
983
- step: "0.05",
984
- value: r,
985
- onChange: (t) => {
986
- let n = ae(t.currentTarget.value);
987
- n !== void 0 && K(J, e, n);
988
- }
989
- }),
990
- /* @__PURE__ */ l("output", { children: r.toFixed(2) }),
991
- /* @__PURE__ */ l("button", {
992
- type: "button",
993
- onClick: () => K(J, e, void 0),
994
- disabled: !Y(t),
995
- children: "reset"
996
- })
997
- ]
998
- })]
999
- }, e);
1000
- }
1001
- if (ee.has(e)) {
1002
- let r = typeof t == "number" ? t : "";
1003
- return /* @__PURE__ */ u("div", {
1004
- className: "reinspect-field",
1005
- children: [/* @__PURE__ */ u("label", {
1006
- htmlFor: n,
1007
- children: [De(e), " (px)"]
1008
- }), /* @__PURE__ */ u("div", {
1009
- className: "reinspect-inline-controls",
1010
- children: [/* @__PURE__ */ l("input", {
1011
- id: n,
1012
- type: "number",
1013
- step: "1",
1014
- value: r,
1015
- onChange: (t) => {
1016
- if (t.currentTarget.value === "") {
1017
- K(J, e, void 0);
1018
- return;
1019
- }
1020
- let n = ae(t.currentTarget.value);
1021
- n !== void 0 && K(J, e, n);
1022
- }
1023
- }), /* @__PURE__ */ l("button", {
1024
- type: "button",
1025
- onClick: () => K(J, e, void 0),
1026
- disabled: !Y(t),
1027
- children: "reset"
1028
- })]
1029
- })]
1030
- }, e);
1031
- }
1032
- return /* @__PURE__ */ u("div", {
1033
- className: "reinspect-field",
1034
- children: [/* @__PURE__ */ l("label", {
1035
- htmlFor: n,
1036
- children: De(e)
1037
- }), /* @__PURE__ */ u("div", {
1038
- className: "reinspect-inline-controls",
1039
- children: [/* @__PURE__ */ l("input", {
1040
- id: n,
1041
- type: "text",
1042
- value: typeof t == "string" ? t : "",
1043
- onChange: (t) => K(J, e, t.currentTarget.value || void 0)
1044
- }), /* @__PURE__ */ l("button", {
1045
- type: "button",
1046
- onClick: () => K(J, e, void 0),
1047
- disabled: !Y(t),
1048
- children: "reset"
1049
- })]
1050
- })]
1051
- }, e);
1052
- })
1053
- }),
1054
- Ve.length === 0 ? /* @__PURE__ */ u("p", {
1055
- className: "reinspect-menu-empty-state",
1056
- children: [
1057
- "No CSS properties match \"",
1058
- T.trim(),
1059
- "\"."
1060
- ]
1061
- }) : null
1062
- ] }) : /* @__PURE__ */ u("div", {
1063
- className: "reinspect-props-panel",
1064
- children: [
1065
- /* @__PURE__ */ u("div", {
1066
- className: "reinspect-props-submenu",
1067
- children: [/* @__PURE__ */ l("button", {
1068
- type: "button",
1069
- "data-state": C === "detected" ? "active" : "idle",
1070
- onClick: () => w("detected"),
1071
- children: "Detected"
1072
- }), /* @__PURE__ */ l("button", {
1073
- type: "button",
1074
- "data-state": C === "raw" ? "active" : "idle",
1075
- onClick: () => {
1076
- w("raw"), A(null), k(he(ze));
1077
- },
1078
- children: "Raw"
1079
- })]
1080
- }),
1081
- C === "detected" ? He.length > 0 ? /* @__PURE__ */ u("div", {
1082
- className: "reinspect-props-table",
1083
- children: [/* @__PURE__ */ u("div", {
1084
- className: "reinspect-props-header",
1085
- children: [/* @__PURE__ */ l("span", { children: "Key" }), /* @__PURE__ */ l("span", { children: "Value" })]
1086
- }), He.map((e) => {
1087
- let t = ke(e.key), n = ze[e.key], r = e.value.kind === "object" || e.value.kind === "array", i = !!le[e.key], a = N[e.key], o = se[e.key], s = _e(n);
1088
- return /* @__PURE__ */ u("div", {
1089
- className: "reinspect-props-row",
1090
- "data-testid": `reinspect-prop-row-${t}`,
1091
- children: [/* @__PURE__ */ l("code", {
1092
- className: "reinspect-prop-key",
1093
- children: e.key
1094
- }), /* @__PURE__ */ u("div", {
1095
- className: "reinspect-prop-cell",
1096
- "data-testid": `reinspect-prop-value-${t}`,
1097
- children: [
1098
- je({
1099
- value: e.value,
1100
- onCopy: qe
1101
- }),
1102
- r || s ? /* @__PURE__ */ u("div", {
1103
- className: "reinspect-prop-actions",
1104
- children: [r ? /* @__PURE__ */ l("button", {
1105
- type: "button",
1106
- "data-testid": `reinspect-prop-show-json-${t}`,
1107
- onClick: () => Je(e.key, n),
1108
- children: i ? "Hide JSON" : "Show JSON"
1109
- }) : null, s ? /* @__PURE__ */ l("button", {
1110
- type: "button",
1111
- "data-testid": `reinspect-prop-edit-${t}`,
1112
- onClick: () => Ye(e.key, n),
1113
- children: "Edit"
1114
- }) : null]
1115
- }) : null,
1116
- i ? /* @__PURE__ */ l("div", {
1117
- className: "reinspect-prop-json-preview",
1118
- "data-testid": `reinspect-prop-json-preview-${t}`,
1119
- children: o ? /* @__PURE__ */ l("p", {
1120
- className: "reinspect-error",
1121
- children: o
1122
- }) : /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("pre", { children: a }), a ? /* @__PURE__ */ l("button", {
1123
- type: "button",
1124
- "data-testid": `reinspect-prop-copy-json-${t}`,
1125
- onClick: () => qe(a, "JSON value"),
1126
- children: "Copy JSON"
1127
- }) : null] })
1128
- }) : null
1129
- ]
1130
- })]
1131
- }, e.key);
1132
- })]
1133
- }) : /* @__PURE__ */ l("p", {
1134
- className: "reinspect-menu-empty-state",
1135
- children: "No props detected."
1136
- }) : /* @__PURE__ */ u(c, { children: [
1137
- /* @__PURE__ */ l("label", {
1138
- htmlFor: `${J}-props-json`,
1139
- children: "Props JSON"
1140
- }),
1141
- /* @__PURE__ */ l("textarea", {
1142
- id: `${J}-props-json`,
1143
- value: te,
1144
- onChange: (e) => {
1145
- k(e.currentTarget.value), A(null);
1146
- },
1147
- rows: 9
1148
- }),
1149
- ne ? /* @__PURE__ */ l("p", {
1150
- className: "reinspect-error",
1151
- children: ne
1152
- }) : null,
1153
- /* @__PURE__ */ u("div", {
1154
- className: "reinspect-inline-controls",
1155
- children: [/* @__PURE__ */ l("button", {
1156
- type: "button",
1157
- onClick: Ge,
1158
- children: "apply"
1159
- }), /* @__PURE__ */ l("button", {
1160
- type: "button",
1161
- onClick: Ke,
1162
- children: "reset"
1163
- })]
1164
- })
1165
- ] }),
1166
- j ? /* @__PURE__ */ l("p", {
1167
- className: "reinspect-setting-note",
1168
- "data-testid": "reinspect-props-copy-status",
1169
- children: j
1170
- }) : null
1171
- ]
1172
- })
1173
- ]
1174
- }) : null, Qe = F ? d(/* @__PURE__ */ l("div", {
1175
- className: "reinspect-modal-backdrop",
1176
- role: "dialog",
1177
- "aria-modal": "true",
1178
- "aria-label": `Edit ${F} prop`,
1179
- "data-testid": "reinspect-prop-edit-modal",
1180
- children: /* @__PURE__ */ u("div", {
1181
- className: "reinspect-modal",
1182
- ref: _,
1183
- children: [
1184
- /* @__PURE__ */ u("p", {
1185
- className: "reinspect-menu-title",
1186
- children: ["Edit prop: ", F]
1187
- }),
1188
- /* @__PURE__ */ l("label", {
1189
- htmlFor: `${J}-prop-edit-json`,
1190
- children: "JSON value"
1191
- }),
1192
- /* @__PURE__ */ l("textarea", {
1193
- id: `${J}-prop-edit-json`,
1194
- "data-testid": "reinspect-prop-edit-textarea",
1195
- value: L,
1196
- onChange: (e) => {
1197
- R(e.currentTarget.value), B(null);
1198
- },
1199
- rows: 10
1200
- }),
1201
- z ? /* @__PURE__ */ l("p", {
1202
- className: "reinspect-error",
1203
- "data-testid": "reinspect-prop-edit-error",
1204
- children: z
1205
- }) : null,
1206
- /* @__PURE__ */ u("div", {
1207
- className: "reinspect-inline-controls",
1208
- children: [/* @__PURE__ */ l("button", {
1209
- type: "button",
1210
- onClick: Xe,
1211
- children: "apply"
1212
- }), /* @__PURE__ */ l("button", {
1213
- type: "button",
1214
- onClick: () => {
1215
- I(null), R(""), B(null);
1216
- },
1217
- children: "cancel"
1218
- })]
1219
- })
1220
- ]
1221
- })
1222
- }), document.body) : null;
1223
- if (!H) {
1224
- if (a === "manual") throw Error("useReinspect must be used within ReinspectProvider");
1225
- return /* @__PURE__ */ l(m, { ...Q });
1226
- }
1227
- return a === "auto" && !X ? /* @__PURE__ */ l(m, { ...Q }) : /* @__PURE__ */ u("div", {
1228
- className: "reinspect-shell",
1229
- "data-reinspect-component": h,
1230
- "data-reinspect-active": Z,
1231
- "data-testid": `reinspect-shell-${h}`,
1232
- style: Ue,
1233
- onContextMenu: We,
1234
- children: [
1235
- Z ? /* @__PURE__ */ u("span", {
1236
- className: "reinspect-name-badge",
1237
- children: [h, Pe ? ` | ${Ee(Ie, pe)}` : ""]
1238
- }) : null,
1239
- Ze ? d(Ze, document.body) : null,
1240
- Qe,
1241
- /* @__PURE__ */ l("div", {
1242
- className: "reinspect-content",
1243
- "data-reinspect-content": "true",
1244
- style: Re,
1245
- children: /* @__PURE__ */ l(m, { ...Q })
1246
- })
1247
- ]
1248
- });
1249
- }
1250
- return _.displayName = `withReinspect(${h})`, _[be] = {
1251
- source: a,
1252
- scope: f,
1253
- original: m
1254
- }, _;
1255
- }
1256
- //#endregion
1257
- //#region src/reinspect/autoWrap.ts
1258
- function Z(e, t) {
1259
- return xe(e)?.source === "manual" ? e : X(e, {
1260
- source: "auto",
1261
- scope: t.scope,
1262
- name: t.componentName,
1263
- fallbackName: t.fallbackName
1264
- });
1265
- }
1266
- //#endregion
1267
- //#region src/reinspect/wrapInspectableMap.ts
1268
- function Pe(e, t) {
1269
- let n = {};
1270
- for (let r of Object.keys(e)) {
1271
- let i = e[r];
1272
- n[r] = X(i, typeof t == "function" ? t(r, i) : t?.[r]);
1273
- }
1274
- return n;
376
+ return t?.name && (n.componentName = t.name), s(e, n);
1275
377
  }
1276
378
  //#endregion
1277
379
  //#region src/reinspect/index.ts
1278
- h(f);
380
+ b(_);
1279
381
  //#endregion
1280
- export { v as DEFAULT_EDITABLE_PROPS, y as DEFAULT_PALETTE, L as ReinspectFloatingToggle, I as ReinspectProvider, Z as autoWrapInspectable, _ as useReinspect, X as withReinspect, Pe as wrapInspectableMap };
382
+ export { A as ReinspectProvider, T as useReinspect, M as withReinspect };