react-reinspect 0.1.0

package/dist/lib/index.js

@@ -0,0 +1,1263 @@
+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";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { createPortal as d } from "react-dom";
+//#region src/reinspect/store.ts
+var f = e(null);
+//#endregion
+//#region src/reinspect/useReinspect.ts
+function p() {
+	let e = n(f);
+	if (!e) throw Error("useReinspect must be used within ReinspectProvider");
+	return e;
+}
+//#endregion
+//#region src/reinspect/constants.ts
+var m = [
+	"backgroundColor",
+	"color",
+	"fontSize",
+	"padding",
+	"margin",
+	"borderRadius",
+	"borderWidth",
+	"borderColor",
+	"opacity",
+	"width",
+	"height",
+	"gap"
+], h = [
+	"#f97316",
+	"#2563eb",
+	"#16a34a",
+	"#db2777",
+	"#ca8a04",
+	"#0f766e"
+], g = new Set([
+	"backgroundColor",
+	"color",
+	"borderColor"
+]), _ = new Set([
+	"fontSize",
+	"padding",
+	"margin",
+	"borderRadius",
+	"borderWidth",
+	"width",
+	"height",
+	"gap"
+]), v = 2147483e3, y = "reinspect.inspectMode", b = [
+	"wrapped",
+	"first-party",
+	"all"
+], x = [
+	"attempts",
+	"commits",
+	"both"
+];
+function S() {
+	return !1;
+}
+function C(e) {
+	return typeof e == "string" && b.includes(e);
+}
+function w(e) {
+	return typeof e == "string" && x.includes(e);
+}
+function T() {
+	if (!(typeof window > "u")) try {
+		let e = window.sessionStorage.getItem(y);
+		return C(e) ? e : void 0;
+	} catch {
+		return;
+	}
+}
+function E(e) {
+	return T() || (C(e) ? e : "wrapped");
+}
+function D(e) {
+	if (!(typeof window > "u")) try {
+		window.sessionStorage.setItem(y, e);
+	} catch {}
+}
+function ee() {
+	if (!(typeof window > "u")) try {
+		window.location.reload();
+	} catch {}
+}
+function O(e = {}) {
+	let t = e.enabled ?? S(), n = e.editableProps && e.editableProps.length > 0 ? e.editableProps : m, r = e.palette && e.palette.length > 0 ? e.palette : h;
+	return {
+		enabled: t,
+		startActive: e.startActive ?? !0,
+		showFloatingToggle: e.showFloatingToggle ?? t,
+		inspectMode: E(e.inspectMode),
+		editableProps: n,
+		palette: r,
+		zIndexBase: e.zIndexBase ?? v,
+		shouldCountRenders: e.shouldCountRenders ?? !1,
+		countRendersForComponents: e.countRendersForComponents ?? [],
+		renderCaptureMode: w(e.renderCaptureMode) ? e.renderCaptureMode : "attempts"
+	};
+}
+function k(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 A(e, t) {
+	return t.length === 0 ? h[0] : t[k(e) % t.length];
+}
+function te(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 ne(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;
+}
+//#endregion
+//#region src/reinspect/context.tsx
+var ie = "Capture rerenders and show totals next to component badges.", j = "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.", M = "Choose whether to count render attempts, committed renders, or both.", N = "Render attempts track render-phase executions (includes Strict Mode extra passes). Committed renders track completed DOM commits. Both shows both counters together.", P = "Controls which components are automatically discoverable by Reinspect.", ae = "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 oe(e) {
+	let t = {};
+	for (let n of e) t[n] = !0;
+	return t;
+}
+function se({ children: e, config: n }) {
+	let r = a(() => O(n), [n]), [i, o] = s(r.startActive), [c] = s(r.inspectMode), [d, p] = s(r.inspectMode), [m, h] = s(r.shouldCountRenders), [g, _] = s(r.renderCaptureMode), [v, y] = s(() => oe(r.countRendersForComponents)), [b, x] = s({}), S = t((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
+			};
+		});
+	}, []), C = t((e, t) => {
+		y((n) => {
+			if (t) return {
+				...n,
+				[e]: !0
+			};
+			if (!n[e]) return n;
+			let r = { ...n };
+			return delete r[e], r;
+		});
+	}, []), w = t((e) => m || !!v[e], [m, v]), T = d !== c, E = t(() => {
+		T && (D(d), ee());
+	}, [T, d]), k = t((e) => A(e, r.palette), [r.palette]), te = a(() => ({
+		config: r,
+		isActive: r.enabled && i,
+		setIsActive: o,
+		inspectMode: c,
+		pendingInspectMode: d,
+		setPendingInspectMode: p,
+		hasPendingInspectModeChange: T,
+		applyInspectMode: E,
+		shouldCountRenders: m,
+		setShouldCountRenders: h,
+		renderCaptureMode: g,
+		setRenderCaptureMode: _,
+		renderCountComponents: v,
+		setRenderCountingForComponent: C,
+		isRenderCountingEnabledFor: w,
+		overrides: b,
+		updateOverride: S,
+		getBorderColor: k
+	}), [
+		r,
+		i,
+		c,
+		d,
+		p,
+		T,
+		E,
+		m,
+		g,
+		v,
+		C,
+		w,
+		b,
+		S,
+		k
+	]);
+	return /* @__PURE__ */ u(f.Provider, {
+		value: te,
+		children: [e, r.enabled && r.showFloatingToggle ? /* @__PURE__ */ l(F, {}) : null]
+	});
+}
+function F() {
+	let { config: e, isActive: t, setIsActive: n, inspectMode: i, pendingInspectMode: a, setPendingInspectMode: c, hasPendingInspectModeChange: d, applyInspectMode: f, shouldCountRenders: m, setShouldCountRenders: h, renderCaptureMode: g, setRenderCaptureMode: _ } = p(), [v, y] = s(!1), b = o(null);
+	return r(() => {
+		if (!v) return;
+		let e = (e) => {
+			let t = e.target;
+			b.current?.contains(t) || y(!1);
+		}, t = (e) => {
+			e.key === "Escape" && y(!1);
+		};
+		return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
+			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
+		};
+	}, [v]), e.enabled ? /* @__PURE__ */ u("div", {
+		className: "reinspect-floating-root",
+		ref: b,
+		children: [/* @__PURE__ */ l("button", {
+			type: "button",
+			className: "reinspect-floating-toggle",
+			"data-testid": "reinspect-floating-toggle",
+			onClick: () => y((e) => !e),
+			"aria-expanded": v,
+			"aria-controls": "reinspect-settings-menu",
+			children: "Reinspect settings"
+		}), v ? /* @__PURE__ */ u("div", {
+			id: "reinspect-settings-menu",
+			className: "reinspect-settings-menu",
+			role: "dialog",
+			"aria-label": "Reinspect settings",
+			"data-testid": "reinspect-settings-menu",
+			children: [
+				/* @__PURE__ */ l("p", {
+					className: "reinspect-settings-title",
+					children: "Reinspect settings"
+				}),
+				/* @__PURE__ */ u("label", {
+					className: "reinspect-settings-toggle-row",
+					children: [/* @__PURE__ */ l("span", {
+						className: "reinspect-settings-toggle-label",
+						children: "Inspector enabled"
+					}), /* @__PURE__ */ l("input", {
+						"data-testid": "reinspect-setting-inspector-active",
+						type: "checkbox",
+						checked: t,
+						onChange: (e) => n(e.currentTarget.checked)
+					})]
+				}),
+				/* @__PURE__ */ l("div", { className: "reinspect-settings-divider" }),
+				/* @__PURE__ */ u("section", {
+					className: "reinspect-setting-block",
+					children: [
+						/* @__PURE__ */ u("header", {
+							className: "reinspect-setting-header",
+							children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("p", {
+								className: "reinspect-setting-name",
+								children: "INSPECT_MODE"
+							}), /* @__PURE__ */ l("p", {
+								className: "reinspect-setting-short-description",
+								children: P
+							})] }), /* @__PURE__ */ u("span", {
+								className: "reinspect-tooltip-host",
+								children: [/* @__PURE__ */ l("button", {
+									type: "button",
+									className: "reinspect-tooltip-trigger",
+									"aria-label": "Explain INSPECT_MODE",
+									children: "?"
+								}), /* @__PURE__ */ l("span", {
+									className: "reinspect-tooltip-content",
+									role: "tooltip",
+									children: ae
+								})]
+							})]
+						}),
+						/* @__PURE__ */ u("label", {
+							className: "reinspect-settings-select-row",
+							children: [/* @__PURE__ */ l("span", {
+								className: "reinspect-settings-toggle-label",
+								children: "Inspect Mode"
+							}), /* @__PURE__ */ u("select", {
+								"data-testid": "reinspect-setting-inspect-mode",
+								value: a,
+								onChange: (e) => {
+									let t = e.currentTarget.value;
+									C(t) && c(t);
+								},
+								children: [
+									/* @__PURE__ */ l("option", {
+										value: "wrapped",
+										children: "Only wrapped components"
+									}),
+									/* @__PURE__ */ l("option", {
+										value: "first-party",
+										children: "All 1st-party components"
+									}),
+									/* @__PURE__ */ l("option", {
+										value: "all",
+										children: "All components"
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ l("button", {
+							type: "button",
+							className: "reinspect-apply-button",
+							"data-testid": "reinspect-apply-inspect-mode",
+							onClick: f,
+							disabled: !d,
+							children: "Apply & Reload"
+						}),
+						d ? /* @__PURE__ */ l("p", {
+							className: "reinspect-setting-note",
+							"data-testid": "reinspect-inspect-mode-reload-note",
+							children: "Inspect mode changes are applied after reload."
+						}) : /* @__PURE__ */ u("p", {
+							className: "reinspect-setting-note",
+							children: ["Current mode: ", i]
+						})
+					]
+				}),
+				/* @__PURE__ */ l("div", { className: "reinspect-settings-divider" }),
+				/* @__PURE__ */ u("section", {
+					className: "reinspect-setting-block",
+					children: [
+						/* @__PURE__ */ u("header", {
+							className: "reinspect-setting-header",
+							children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("p", {
+								className: "reinspect-setting-name",
+								children: "SHOULD_COUNT_RENDERS"
+							}), /* @__PURE__ */ l("p", {
+								className: "reinspect-setting-short-description",
+								children: ie
+							})] }), /* @__PURE__ */ u("span", {
+								className: "reinspect-tooltip-host",
+								children: [/* @__PURE__ */ l("button", {
+									type: "button",
+									className: "reinspect-tooltip-trigger",
+									"aria-label": "Explain SHOULD_COUNT_RENDERS",
+									children: "?"
+								}), /* @__PURE__ */ l("span", {
+									className: "reinspect-tooltip-content",
+									role: "tooltip",
+									children: j
+								})]
+							})]
+						}),
+						/* @__PURE__ */ u("label", {
+							className: "reinspect-settings-toggle-row",
+							children: [/* @__PURE__ */ l("span", {
+								className: "reinspect-settings-toggle-label",
+								children: "Capture render for all components"
+							}), /* @__PURE__ */ l("input", {
+								"data-testid": "reinspect-setting-should-count-renders",
+								type: "checkbox",
+								checked: m,
+								onChange: (e) => h(e.currentTarget.checked)
+							})]
+						}),
+						/* @__PURE__ */ u("header", {
+							className: "reinspect-setting-header",
+							children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("p", {
+								className: "reinspect-setting-name",
+								children: "RENDER_CAPTURE_MODE"
+							}), /* @__PURE__ */ l("p", {
+								className: "reinspect-setting-short-description",
+								children: M
+							})] }), /* @__PURE__ */ u("span", {
+								className: "reinspect-tooltip-host",
+								children: [/* @__PURE__ */ l("button", {
+									type: "button",
+									className: "reinspect-tooltip-trigger",
+									"aria-label": "Explain RENDER_CAPTURE_MODE",
+									children: "?"
+								}), /* @__PURE__ */ l("span", {
+									className: "reinspect-tooltip-content",
+									role: "tooltip",
+									children: N
+								})]
+							})]
+						}),
+						/* @__PURE__ */ u("label", {
+							className: "reinspect-settings-select-row",
+							children: [/* @__PURE__ */ l("span", {
+								className: "reinspect-settings-toggle-label",
+								children: "Capture mode"
+							}), /* @__PURE__ */ u("select", {
+								"data-testid": "reinspect-setting-render-capture-mode",
+								value: g,
+								onChange: (e) => {
+									let t = e.currentTarget.value;
+									w(t) && _(t);
+								},
+								children: [
+									/* @__PURE__ */ l("option", {
+										value: "attempts",
+										children: "Render attempts"
+									}),
+									/* @__PURE__ */ l("option", {
+										value: "commits",
+										children: "Committed renders"
+									}),
+									/* @__PURE__ */ l("option", {
+										value: "both",
+										children: "Both"
+									})
+								]
+							})]
+						})
+					]
+				})
+			]
+		}) : null]
+	}) : null;
+}
+//#endregion
+//#region src/reinspect/propsInspector.ts
+var I = 4, L = 40, R = 40, z = "__reinspect_placeholder__";
+function B(e, t) {
+	return {
+		[z]: e,
+		display: t
+	};
+}
+function V(e) {
+	return typeof e == "object" && !!e && !Array.isArray(e);
+}
+function H(e) {
+	if (!V(e)) return !1;
+	let t = Object.getPrototypeOf(e);
+	return t === Object.prototype || t === null;
+}
+function U(e) {
+	return V(e) && typeof e.__reinspect_placeholder__ == "string" && typeof e.display == "string";
+}
+function ce(e) {
+	try {
+		return JSON.stringify(e, null, 2);
+	} catch {
+		return null;
+	}
+}
+function W(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 G(e, t, n) {
+	if (n > I) return B("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 : B("non-finite-number", String(e));
+	if (r === "undefined") return B("undefined", "undefined");
+	if (r === "bigint") return B("bigint", `${String(e)}n`);
+	if (r === "symbol") return B("symbol", String(e));
+	if (r === "function") return B("function", `[Function ${e.name || "anonymous"}]`);
+	if (e instanceof Date) return B("date", Number.isNaN(e.getTime()) ? "Invalid Date" : e.toISOString());
+	if (e instanceof RegExp) return B("regexp", e.toString());
+	if (r === "object") {
+		let r = e;
+		if (t.has(r)) return B("circular", "[Circular]");
+		if (t.add(r), Array.isArray(e)) {
+			let i = [], a = Math.min(e.length, R);
+			for (let r = 0; r < a; r += 1) i.push(G(e[r], t, n + 1));
+			return e.length > R && i.push(B("truncated", `${e.length - R} more items`)), t.delete(r), i;
+		}
+		let i = {}, a = Object.entries(e), o = Math.min(a.length, L);
+		for (let e = 0; e < o; e += 1) {
+			let [r, o] = a[e];
+			i[r] = G(o, t, n + 1);
+		}
+		return a.length > L && (i.__reinspect_truncated__ = B("truncated", `${a.length - L} more keys`)), t.delete(r), i;
+	}
+	return B("unsupported", "[Unsupported value]");
+}
+function ue(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 = W(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})`
+	} : V(e) ? {
+		kind: "object",
+		summary: `Object(${Object.keys(e).length})`
+	} : {
+		kind: "unknown",
+		summary: String(e)
+	};
+}
+function K(e) {
+	if (!U(e)) {
+		if (Array.isArray(e)) {
+			let t = [];
+			for (let n of e) {
+				let e = K(n);
+				if (e === void 0) return;
+				t.push(e);
+			}
+			return t;
+		}
+		if (V(e)) {
+			let t = {};
+			for (let [n, r] of Object.entries(e)) {
+				let e = K(r);
+				e !== void 0 && (t[n] = e);
+			}
+			return t;
+		}
+		return e;
+	}
+}
+function de(e) {
+	return Object.keys(e).map((t) => ({
+		key: t,
+		value: ue(e[t])
+	}));
+}
+function fe(e) {
+	return ce(G(e, /* @__PURE__ */ new WeakSet(), 0)) ?? "{}";
+}
+function pe(e) {
+	return ce(G(e, /* @__PURE__ */ new WeakSet(), 0));
+}
+function me(e) {
+	if (e === null) return !0;
+	let t = typeof e;
+	return t === "string" || t === "number" || t === "boolean" || Array.isArray(e) ? !0 : H(e);
+}
+function he(e) {
+	let t = e.trim();
+	if (t.length === 0) return {
+		parsed: null,
+		error: "Value JSON cannot be empty."
+	};
+	try {
+		let e = K(JSON.parse(t));
+		return e === void 0 || !me(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 ge(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 = K(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."
+		};
+	}
+}
+//#endregion
+//#region src/reinspect/wrapMarker.ts
+var _e = Symbol.for("reinspect.wrapped");
+function ve(e) {
+	return e[_e];
+}
+//#endregion
+//#region src/reinspect/withReinspect.tsx
+var ye = {
+	enabled: !1,
+	startActive: !1,
+	showFloatingToggle: !1,
+	inspectMode: "wrapped",
+	editableProps: [],
+	palette: [],
+	zIndexBase: 0,
+	shouldCountRenders: !1,
+	countRendersForComponents: [],
+	renderCaptureMode: "attempts"
+}, be = /* @__PURE__ */ new Map();
+function q(e) {
+	let t = be.get(e);
+	if (t) return t;
+	let n = {
+		attempts: 0,
+		commits: 0,
+		hasCommitted: !1,
+		wasCountingEnabled: !1,
+		shouldCountCommit: !1
+	};
+	return be.set(e, n), n;
+}
+function xe(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 Se(e) {
+	let t = q(e);
+	t.hasCommitted && t.shouldCountCommit && (t.commits += 1), t.hasCommitted = !0, t.shouldCountCommit = !1;
+}
+function Ce(e, t) {
+	return t === "commits" ? `${e.commits} commits` : t === "both" ? `${e.attempts} attempts | ${e.commits} commits` : `${e.attempts} attempts`;
+}
+function we(e) {
+	let t = e.replace(/([A-Z])/g, " $1").trim();
+	return t.length > 0 ? t[0].toUpperCase() + t.slice(1) : e;
+}
+function Te(e) {
+	return e.trim().toLowerCase().replace(/[\s_-]+/g, "");
+}
+function J(e) {
+	return e != null && e !== "";
+}
+function Ee(e) {
+	return e.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+async function De(e) {
+	if (typeof navigator > "u" || !navigator.clipboard?.writeText) return !1;
+	try {
+		return await navigator.clipboard.writeText(e), !0;
+	} catch {
+		return !1;
+	}
+}
+function Oe({ value: e, onCopy: t }) {
+	if (e.kind === "function" && e.functionMeta) {
+		let n = e.functionMeta;
+		return /* @__PURE__ */ u("div", {
+			className: "reinspect-prop-function",
+			children: [
+				/* @__PURE__ */ l("code", { children: e.summary }),
+				/* @__PURE__ */ l("pre", { children: n.preview }),
+				/* @__PURE__ */ l("button", {
+					type: "button",
+					onClick: () => t(n.source, "Function source"),
+					disabled: !n.source,
+					children: "Copy function source"
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ u("div", {
+		className: "reinspect-prop-scalar",
+		children: [/* @__PURE__ */ l("code", { children: e.summary }), e.copyText ? /* @__PURE__ */ l("button", {
+			type: "button",
+			onClick: () => t(e.copyText ?? "", "Value"),
+			children: "Copy"
+		}) : null]
+	});
+}
+function ke(e, t) {
+	return t?.name?.trim() || e.displayName?.trim() || e.name?.trim() || t?.fallbackName?.trim() || "Component";
+}
+function Ae(e, t, n) {
+	return e === "manual" || n === "all" || n === "first-party" && t === "first-party";
+}
+function Y(e, t) {
+	let a = t?.source ?? "manual", p = t?.scope ?? "first-party", m = ve(e);
+	if (m && a === "auto") return e;
+	let h = m && a === "manual" ? m.original : e, v = ke(h, t);
+	function y(e) {
+		let t = i(), m = o(null), y = o(null), [b, x] = s(null), [S, C] = s("css"), [w, T] = s("detected"), [E, D] = s(""), [ee, O] = s({}), [k, A] = s("{}"), [ie, j] = s(null), [M, N] = s(null), [P, ae] = s({}), [oe, se] = s({}), [F, I] = s({}), [L, R] = s(null), [z, B] = s(""), [V, H] = s(null), U = n(f), ce = !!U, W = U?.config ?? ye, le = U?.getBorderColor ?? (() => "#f97316"), G = U?.isActive ?? !1, ue = U?.inspectMode ?? "wrapped", K = U?.shouldCountRenders ?? !1, _e = U?.renderCaptureMode ?? ye.renderCaptureMode, ve = U?.overrides ?? {}, q = U?.updateOverride ?? (() => void 0), ke = U?.renderCountComponents ?? {}, Y = U?.setRenderCountingForComponent ?? (() => void 0), je = U?.isRenderCountingEnabledFor ?? (() => !1), X = `${v}-${t}`, Me = le(v), Ne = Ae(a, p, ue), Z = W.enabled && G && Ne, Pe = Ne && je(v), Fe = !!ke[v], Ie = xe(X, Pe), Le = ve[X], Re = Z ? te(Le, W.editableProps) : {}, Q = {
+			...e,
+			...ee
+		}, ze = Q, $ = Z && b !== null, Be = Te(E), Ve = Be.length === 0 ? W.editableProps : W.editableProps.filter((e) => Te(e).includes(Be)), He = $ && S === "props" && w === "detected" ? de(ze) : [];
+		r(() => (Se(X), () => {
+			be.delete(X);
+		}), [X]), r(() => {
+			if (!$) return;
+			let e = (e) => {
+				let t = e.target;
+				m.current?.contains(t) || y.current?.contains(t) || (x(null), R(null), B(""), H(null));
+			}, t = (e) => {
+				if (e.key === "Escape") {
+					if (L) {
+						R(null), B(""), H(null);
+						return;
+					}
+					x(null);
+				}
+			};
+			return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
+				document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
+			};
+		}, [L, $]), r(() => {
+			if (!M) return;
+			let e = globalThis.setTimeout(() => {
+				N(null);
+			}, 1400);
+			return () => {
+				globalThis.clearTimeout(e);
+			};
+		}, [M]);
+		let Ue = {
+			"--reinspect-color": Me,
+			"--reinspect-z-base": W.zIndexBase
+		}, We = (e) => {
+			Z && (e.preventDefault(), C("css"), T("detected"), D(""), j(null), N(null), ae({}), se({}), I({}), R(null), B(""), H(null), A("{}"), x({
+				x: e.clientX,
+				y: e.clientY
+			}));
+		}, Ge = () => {
+			let { parsed: e, error: t } = ge(k);
+			if (t || !e) {
+				j(t);
+				return;
+			}
+			O(e), j(null);
+		}, Ke = () => {
+			O({}), w === "raw" && A(fe(e)), j(null);
+		}, qe = (e, t) => {
+			De(e).then((e) => {
+				N(e ? `${t} copied.` : "Clipboard access is unavailable.");
+			});
+		}, Je = (e, t) => {
+			if (F[e]) {
+				I((t) => ({
+					...t,
+					[e]: !1
+				}));
+				return;
+			}
+			if (!(e in P) && !(e in oe)) {
+				let n = pe(t);
+				n === null ? se((t) => ({
+					...t,
+					[e]: "JSON preview is unavailable for this value."
+				})) : ae((t) => ({
+					...t,
+					[e]: n
+				}));
+			}
+			I((t) => ({
+				...t,
+				[e]: !0
+			}));
+		}, Ye = (e, t) => {
+			if (!me(t)) return;
+			let n = pe(t);
+			if (n === null) {
+				N("Unable to open editor for this value.");
+				return;
+			}
+			R(e), B(n), H(null);
+		}, Xe = () => {
+			if (!L) return;
+			let { parsed: e, error: t } = he(z);
+			if (t || e === null) {
+				H(t);
+				return;
+			}
+			O((t) => ({
+				...t,
+				[L]: e
+			})), R(null), B(""), H(null);
+		}, Ze = $ ? /* @__PURE__ */ u("div", {
+			ref: m,
+			className: "reinspect-menu",
+			role: "dialog",
+			"aria-label": `${v} inspector controls`,
+			style: {
+				top: `${b.y}px`,
+				left: `${b.x}px`
+			},
+			children: [
+				/* @__PURE__ */ u("p", {
+					className: "reinspect-menu-title",
+					children: [v, " inspector"]
+				}),
+				/* @__PURE__ */ u("label", {
+					className: "reinspect-menu-component-setting",
+					children: [/* @__PURE__ */ l("span", { children: "Capture renders for this component" }), /* @__PURE__ */ l("input", {
+						type: "checkbox",
+						checked: K ? !0 : Fe,
+						onChange: (e) => Y(v, e.currentTarget.checked),
+						disabled: K,
+						"aria-label": `Capture renders for ${v}`,
+						"data-testid": `reinspect-component-render-toggle-${v}`
+					})]
+				}),
+				K ? /* @__PURE__ */ l("p", {
+					className: "reinspect-setting-note",
+					children: "Global capture is enabled from Reinspect settings."
+				}) : null,
+				/* @__PURE__ */ u("div", {
+					className: "reinspect-submenu",
+					children: [/* @__PURE__ */ l("button", {
+						type: "button",
+						"data-state": S === "css" ? "active" : "idle",
+						onClick: () => C("css"),
+						children: "CSS"
+					}), /* @__PURE__ */ l("button", {
+						type: "button",
+						"data-state": S === "props" ? "active" : "idle",
+						onClick: () => C("props"),
+						children: "Props"
+					})]
+				}),
+				S === "css" ? /* @__PURE__ */ u(c, { children: [
+					/* @__PURE__ */ u("div", {
+						className: "reinspect-menu-filter",
+						children: [/* @__PURE__ */ l("span", {
+							className: "reinspect-menu-filter-icon",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ l("svg", {
+								viewBox: "0 0 24 24",
+								focusable: "false",
+								children: /* @__PURE__ */ l("path", {
+									d: "M10.5 3a7.5 7.5 0 015.92 12.1l4.24 4.23a1 1 0 01-1.42 1.42l-4.23-4.24A7.5 7.5 0 1110.5 3zm0 2a5.5 5.5 0 100 11 5.5 5.5 0 000-11z",
+									fill: "currentColor"
+								})
+							})
+						}), /* @__PURE__ */ l("input", {
+							id: `${X}-css-filter`,
+							"data-testid": "reinspect-css-filter-input",
+							type: "search",
+							value: E,
+							placeholder: "Filter",
+							"aria-label": "Filter CSS properties",
+							onChange: (e) => D(e.currentTarget.value)
+						})]
+					}),
+					/* @__PURE__ */ l("div", {
+						className: "reinspect-menu-grid",
+						children: Ve.map((e) => {
+							let t = Le?.[e], n = `${X}-${e}`;
+							if (g.has(e)) {
+								let r = typeof t == "string" ? ne(t) : "#1f2937";
+								return /* @__PURE__ */ u("div", {
+									className: "reinspect-field",
+									children: [/* @__PURE__ */ l("label", {
+										htmlFor: n,
+										children: we(e)
+									}), /* @__PURE__ */ u("div", {
+										className: "reinspect-inline-controls",
+										children: [/* @__PURE__ */ l("input", {
+											id: n,
+											type: "color",
+											value: r,
+											onChange: (t) => q(X, e, t.currentTarget.value)
+										}), /* @__PURE__ */ l("button", {
+											type: "button",
+											onClick: () => q(X, e, void 0),
+											disabled: !J(t),
+											children: "reset"
+										})]
+									})]
+								}, e);
+							}
+							if (e === "opacity") {
+								let r = typeof t == "number" ? t : 1;
+								return /* @__PURE__ */ u("div", {
+									className: "reinspect-field",
+									children: [/* @__PURE__ */ l("label", {
+										htmlFor: n,
+										children: "Opacity"
+									}), /* @__PURE__ */ u("div", {
+										className: "reinspect-inline-controls reinspect-opacity-controls",
+										children: [
+											/* @__PURE__ */ l("input", {
+												id: n,
+												type: "range",
+												min: "0",
+												max: "1",
+												step: "0.05",
+												value: r,
+												onChange: (t) => {
+													let n = re(t.currentTarget.value);
+													n !== void 0 && q(X, e, n);
+												}
+											}),
+											/* @__PURE__ */ l("output", { children: r.toFixed(2) }),
+											/* @__PURE__ */ l("button", {
+												type: "button",
+												onClick: () => q(X, e, void 0),
+												disabled: !J(t),
+												children: "reset"
+											})
+										]
+									})]
+								}, e);
+							}
+							if (_.has(e)) {
+								let r = typeof t == "number" ? t : "";
+								return /* @__PURE__ */ u("div", {
+									className: "reinspect-field",
+									children: [/* @__PURE__ */ u("label", {
+										htmlFor: n,
+										children: [we(e), " (px)"]
+									}), /* @__PURE__ */ u("div", {
+										className: "reinspect-inline-controls",
+										children: [/* @__PURE__ */ l("input", {
+											id: n,
+											type: "number",
+											step: "1",
+											value: r,
+											onChange: (t) => {
+												if (t.currentTarget.value === "") {
+													q(X, e, void 0);
+													return;
+												}
+												let n = re(t.currentTarget.value);
+												n !== void 0 && q(X, e, n);
+											}
+										}), /* @__PURE__ */ l("button", {
+											type: "button",
+											onClick: () => q(X, e, void 0),
+											disabled: !J(t),
+											children: "reset"
+										})]
+									})]
+								}, e);
+							}
+							return /* @__PURE__ */ u("div", {
+								className: "reinspect-field",
+								children: [/* @__PURE__ */ l("label", {
+									htmlFor: n,
+									children: we(e)
+								}), /* @__PURE__ */ u("div", {
+									className: "reinspect-inline-controls",
+									children: [/* @__PURE__ */ l("input", {
+										id: n,
+										type: "text",
+										value: typeof t == "string" ? t : "",
+										onChange: (t) => q(X, e, t.currentTarget.value || void 0)
+									}), /* @__PURE__ */ l("button", {
+										type: "button",
+										onClick: () => q(X, e, void 0),
+										disabled: !J(t),
+										children: "reset"
+									})]
+								})]
+							}, e);
+						})
+					}),
+					Ve.length === 0 ? /* @__PURE__ */ u("p", {
+						className: "reinspect-menu-empty-state",
+						children: [
+							"No CSS properties match \"",
+							E.trim(),
+							"\"."
+						]
+					}) : null
+				] }) : /* @__PURE__ */ u("div", {
+					className: "reinspect-props-panel",
+					children: [
+						/* @__PURE__ */ u("div", {
+							className: "reinspect-props-submenu",
+							children: [/* @__PURE__ */ l("button", {
+								type: "button",
+								"data-state": w === "detected" ? "active" : "idle",
+								onClick: () => T("detected"),
+								children: "Detected"
+							}), /* @__PURE__ */ l("button", {
+								type: "button",
+								"data-state": w === "raw" ? "active" : "idle",
+								onClick: () => {
+									T("raw"), j(null), A(fe(ze));
+								},
+								children: "Raw"
+							})]
+						}),
+						w === "detected" ? He.length > 0 ? /* @__PURE__ */ u("div", {
+							className: "reinspect-props-table",
+							children: [/* @__PURE__ */ u("div", {
+								className: "reinspect-props-header",
+								children: [/* @__PURE__ */ l("span", { children: "Key" }), /* @__PURE__ */ l("span", { children: "Value" })]
+							}), He.map((e) => {
+								let t = Ee(e.key), n = ze[e.key], r = e.value.kind === "object" || e.value.kind === "array", i = !!F[e.key], a = P[e.key], o = oe[e.key], s = me(n);
+								return /* @__PURE__ */ u("div", {
+									className: "reinspect-props-row",
+									"data-testid": `reinspect-prop-row-${t}`,
+									children: [/* @__PURE__ */ l("code", {
+										className: "reinspect-prop-key",
+										children: e.key
+									}), /* @__PURE__ */ u("div", {
+										className: "reinspect-prop-cell",
+										"data-testid": `reinspect-prop-value-${t}`,
+										children: [
+											Oe({
+												value: e.value,
+												onCopy: qe
+											}),
+											r || s ? /* @__PURE__ */ u("div", {
+												className: "reinspect-prop-actions",
+												children: [r ? /* @__PURE__ */ l("button", {
+													type: "button",
+													"data-testid": `reinspect-prop-show-json-${t}`,
+													onClick: () => Je(e.key, n),
+													children: i ? "Hide JSON" : "Show JSON"
+												}) : null, s ? /* @__PURE__ */ l("button", {
+													type: "button",
+													"data-testid": `reinspect-prop-edit-${t}`,
+													onClick: () => Ye(e.key, n),
+													children: "Edit"
+												}) : null]
+											}) : null,
+											i ? /* @__PURE__ */ l("div", {
+												className: "reinspect-prop-json-preview",
+												"data-testid": `reinspect-prop-json-preview-${t}`,
+												children: o ? /* @__PURE__ */ l("p", {
+													className: "reinspect-error",
+													children: o
+												}) : /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("pre", { children: a }), a ? /* @__PURE__ */ l("button", {
+													type: "button",
+													"data-testid": `reinspect-prop-copy-json-${t}`,
+													onClick: () => qe(a, "JSON value"),
+													children: "Copy JSON"
+												}) : null] })
+											}) : null
+										]
+									})]
+								}, e.key);
+							})]
+						}) : /* @__PURE__ */ l("p", {
+							className: "reinspect-menu-empty-state",
+							children: "No props detected."
+						}) : /* @__PURE__ */ u(c, { children: [
+							/* @__PURE__ */ l("label", {
+								htmlFor: `${X}-props-json`,
+								children: "Props JSON"
+							}),
+							/* @__PURE__ */ l("textarea", {
+								id: `${X}-props-json`,
+								value: k,
+								onChange: (e) => {
+									A(e.currentTarget.value), j(null);
+								},
+								rows: 9
+							}),
+							ie ? /* @__PURE__ */ l("p", {
+								className: "reinspect-error",
+								children: ie
+							}) : null,
+							/* @__PURE__ */ u("div", {
+								className: "reinspect-inline-controls",
+								children: [/* @__PURE__ */ l("button", {
+									type: "button",
+									onClick: Ge,
+									children: "apply"
+								}), /* @__PURE__ */ l("button", {
+									type: "button",
+									onClick: Ke,
+									children: "reset"
+								})]
+							})
+						] }),
+						M ? /* @__PURE__ */ l("p", {
+							className: "reinspect-setting-note",
+							"data-testid": "reinspect-props-copy-status",
+							children: M
+						}) : null
+					]
+				})
+			]
+		}) : null, Qe = L ? d(/* @__PURE__ */ l("div", {
+			className: "reinspect-modal-backdrop",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": `Edit ${L} prop`,
+			"data-testid": "reinspect-prop-edit-modal",
+			children: /* @__PURE__ */ u("div", {
+				className: "reinspect-modal",
+				ref: y,
+				children: [
+					/* @__PURE__ */ u("p", {
+						className: "reinspect-menu-title",
+						children: ["Edit prop: ", L]
+					}),
+					/* @__PURE__ */ l("label", {
+						htmlFor: `${X}-prop-edit-json`,
+						children: "JSON value"
+					}),
+					/* @__PURE__ */ l("textarea", {
+						id: `${X}-prop-edit-json`,
+						"data-testid": "reinspect-prop-edit-textarea",
+						value: z,
+						onChange: (e) => {
+							B(e.currentTarget.value), H(null);
+						},
+						rows: 10
+					}),
+					V ? /* @__PURE__ */ l("p", {
+						className: "reinspect-error",
+						"data-testid": "reinspect-prop-edit-error",
+						children: V
+					}) : null,
+					/* @__PURE__ */ u("div", {
+						className: "reinspect-inline-controls",
+						children: [/* @__PURE__ */ l("button", {
+							type: "button",
+							onClick: Xe,
+							children: "apply"
+						}), /* @__PURE__ */ l("button", {
+							type: "button",
+							onClick: () => {
+								R(null), B(""), H(null);
+							},
+							children: "cancel"
+						})]
+					})
+				]
+			})
+		}), document.body) : null;
+		if (!ce) {
+			if (a === "manual") throw Error("useReinspect must be used within ReinspectProvider");
+			return /* @__PURE__ */ l(h, { ...Q });
+		}
+		return a === "auto" && !Ne ? /* @__PURE__ */ l(h, { ...Q }) : /* @__PURE__ */ u("div", {
+			className: "reinspect-shell",
+			"data-reinspect-component": v,
+			"data-reinspect-active": Z,
+			"data-testid": `reinspect-shell-${v}`,
+			style: Ue,
+			onContextMenu: We,
+			children: [
+				Z ? /* @__PURE__ */ u("span", {
+					className: "reinspect-name-badge",
+					children: [v, Pe ? ` | ${Ce(Ie, _e)}` : ""]
+				}) : null,
+				Ze ? d(Ze, document.body) : null,
+				Qe,
+				/* @__PURE__ */ l("div", {
+					className: "reinspect-content",
+					"data-reinspect-content": "true",
+					style: Re,
+					children: /* @__PURE__ */ l(h, { ...Q })
+				})
+			]
+		});
+	}
+	return y.displayName = `withReinspect(${v})`, y[_e] = {
+		source: a,
+		scope: p,
+		original: h
+	}, y;
+}
+//#endregion
+//#region src/reinspect/autoWrap.ts
+function je(e, t) {
+	return ve(e)?.source === "manual" ? e : Y(e, {
+		source: "auto",
+		scope: t.scope,
+		name: t.componentName,
+		fallbackName: t.fallbackName
+	});
+}
+//#endregion
+//#region src/reinspect/wrapInspectableMap.ts
+function X(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;
+}
+//#endregion
+export { m as DEFAULT_EDITABLE_PROPS, h as DEFAULT_PALETTE, F as ReinspectFloatingToggle, se as ReinspectProvider, je as autoWrapInspectable, p as useReinspect, Y as withReinspect, X as wrapInspectableMap };