react-reinspect 0.1.6 → 0.1.8

package/dist/lib/wrap-8xVFW-im.js

@@ -0,0 +1,996 @@
+import { Profiler as e, createContext as t, useCallback as n, useContext as r, useEffect as i, useMemo as a, useRef as o, useState as s, useSyncExternalStore as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { createPortal as ee } from "react-dom";
+//#region src/reinspect/react/context.ts
+var te = t(null), ne = [
+	"backgroundColor",
+	"color",
+	"fontSize",
+	"padding",
+	"margin",
+	"borderRadius",
+	"borderWidth",
+	"borderColor",
+	"opacity",
+	"width",
+	"height",
+	"gap"
+], f = [
+	"#f97316",
+	"#2563eb",
+	"#16a34a",
+	"#db2777",
+	"#ca8a04",
+	"#0f766e"
+], re = new Set([
+	"backgroundColor",
+	"color",
+	"borderColor"
+]), ie = new Set([
+	"fontSize",
+	"padding",
+	"margin",
+	"borderRadius",
+	"borderWidth",
+	"width",
+	"height",
+	"gap"
+]), p = 2147483e3, m = "reinspect.inspectMode", h = [
+	"wrapped",
+	"first-party",
+	"all"
+], g = [
+	"off",
+	"attempts",
+	"commits",
+	"both"
+], _ = !1;
+function v() {
+	_ || typeof console > "u" || (_ = !0, console.warn("[react-reinspect] `shouldCountRenders` and `renderCaptureMode` are deprecated. Use `renderCounters` instead."));
+}
+function y(e) {
+	return typeof e == "string" && h.includes(e);
+}
+function b(e) {
+	return typeof e == "string" && g.includes(e);
+}
+function x() {
+	if (!(typeof window > "u")) try {
+		let e = window.sessionStorage.getItem(m);
+		return y(e) ? e : void 0;
+	} catch {
+		return;
+	}
+}
+function S(e) {
+	return x() || (y(e) ? e : "wrapped");
+}
+function C(e) {
+	if (!(typeof window > "u")) try {
+		window.sessionStorage.setItem(m, e);
+	} catch {}
+}
+function ae() {
+	if (!(typeof window > "u")) try {
+		window.location.reload();
+	} catch {}
+}
+function w(e) {
+	return b(e.renderCounters) ? e.renderCounters : ((e.shouldCountRenders !== void 0 || e.renderCaptureMode !== void 0) && v(), e.shouldCountRenders === !1 ? "off" : e.shouldCountRenders === !0 ? e.renderCaptureMode ?? "attempts" : e.renderCaptureMode ? e.renderCaptureMode : "off");
+}
+function T(e = {}) {
+	let t = e.enabled ?? !1, n = e.editableProps && e.editableProps.length > 0 ? e.editableProps : ne, r = e.palette && e.palette.length > 0 ? e.palette : f;
+	return {
+		enabled: t,
+		startActive: e.startActive ?? !0,
+		showFloatingToggle: e.showFloatingToggle ?? t,
+		inspectMode: S(e.inspectMode),
+		editableProps: n,
+		palette: r,
+		zIndexBase: e.zIndexBase ?? p,
+		renderCounters: w(e),
+		countRendersForComponents: e.countRendersForComponents ?? []
+	};
+}
+function E(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 oe(e, t) {
+	return t.length === 0 ? f[0] ?? "#f97316" : t[E(e) % t.length] ?? "#f97316";
+}
+function se(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 ce(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 = "0", n = "0", r = "0"] = e;
+		return `#${t}${t}${n}${n}${r}${r}`;
+	}
+	return "#1f2937";
+}
+function le(e) {
+	let t = Number(e);
+	if (Number.isFinite(t)) return t;
+}
+//#endregion
+//#region src/reinspect/propsInspector.ts
+var D = 4, O = 40, k = 40, A = "__reinspect_placeholder__";
+function j(e, t) {
+	return {
+		[A]: e,
+		display: t
+	};
+}
+function M(e) {
+	return typeof e == "object" && !!e && !Array.isArray(e);
+}
+function ue(e) {
+	if (!M(e)) return !1;
+	let t = Object.getPrototypeOf(e);
+	return t === Object.prototype || t === null;
+}
+function N(e) {
+	return M(e) && typeof e.__reinspect_placeholder__ == "string" && typeof e.display == "string";
+}
+function P(e) {
+	try {
+		return JSON.stringify(e, null, 2);
+	} catch {
+		return null;
+	}
+}
+function F(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 I(e) {
+	let t = e.replace(/\s+/g, " ").trim();
+	return t.length <= 120 ? t : `${t.slice(0, 117)}...`;
+}
+function L(e, t, n) {
+	if (n > D) return j("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 : j("non-finite-number", String(e));
+	if (r === "undefined") return j("undefined", "undefined");
+	if (r === "bigint") return j("bigint", `${String(e)}n`);
+	if (r === "symbol") return j("symbol", String(e));
+	if (r === "function") return j("function", `[Function ${e.name || "anonymous"}]`);
+	if (e instanceof Date) return j("date", Number.isNaN(e.getTime()) ? "Invalid Date" : e.toISOString());
+	if (e instanceof RegExp) return j("regexp", e.toString());
+	if (r === "object") {
+		let r = e;
+		if (t.has(r)) return j("circular", "[Circular]");
+		if (t.add(r), Array.isArray(e)) {
+			let i = [], a = Math.min(e.length, k);
+			for (let r = 0; r < a; r += 1) i.push(L(e[r], t, n + 1));
+			return e.length > k && i.push(j("truncated", `${e.length - k} more items`)), t.delete(r), i;
+		}
+		let i = {}, a = Object.entries(e), o = Math.min(a.length, O);
+		for (let e = 0; e < o; e += 1) {
+			let r = a[e];
+			if (!r) continue;
+			let [o, s] = r;
+			i[o] = L(s, t, n + 1);
+		}
+		return a.length > O && (i.__reinspect_truncated__ = j("truncated", `${a.length - O} more keys`)), t.delete(r), i;
+	}
+	return j("unsupported", "[Unsupported value]");
+}
+function R(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 = F(t), r = t.name || "anonymous";
+		return {
+			kind: "function",
+			summary: `Function ${r}(${t.length})`,
+			copyText: n,
+			functionMeta: {
+				name: r,
+				arity: t.length,
+				preview: I(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})`
+	} : M(e) ? {
+		kind: "object",
+		summary: `Object(${Object.keys(e).length})`
+	} : {
+		kind: "unknown",
+		summary: String(e)
+	};
+}
+function z(e) {
+	if (!N(e)) {
+		if (Array.isArray(e)) {
+			let t = [];
+			for (let n of e) {
+				let e = z(n);
+				if (e === void 0) return;
+				t.push(e);
+			}
+			return t;
+		}
+		if (M(e)) {
+			let t = {};
+			for (let [n, r] of Object.entries(e)) {
+				let e = z(r);
+				e !== void 0 && (t[n] = e);
+			}
+			return t;
+		}
+		return e;
+	}
+}
+function de(e) {
+	return Object.keys(e).map((t) => ({
+		key: t,
+		value: R(e[t])
+	}));
+}
+function fe(e) {
+	return P(L(e, /* @__PURE__ */ new WeakSet(), 0)) ?? "{}";
+}
+function pe(e) {
+	return P(L(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 : ue(e);
+}
+function he(e) {
+	let t = e.trim();
+	if (t.length === 0) return {
+		parsed: null,
+		error: "Value JSON cannot be empty."
+	};
+	try {
+		let e = z(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 = z(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 B = Symbol.for("reinspect.wrapped");
+function V(e) {
+	return e[B];
+}
+function _e(e, t) {
+	e[B] = t;
+}
+//#endregion
+//#region src/reinspect/core/renderCounter.ts
+var H = {
+	attempts: 0,
+	commits: 0
+}, U = /* @__PURE__ */ new Map(), W = /* @__PURE__ */ new Map();
+function ve(e) {
+	let t = U.get(e);
+	if (t) return t;
+	let n = {
+		attempts: 0,
+		commits: 0
+	};
+	return U.set(e, n), n;
+}
+function G(e) {
+	let t = W.get(e);
+	if (t) for (let e of t) e();
+}
+function ye(e) {
+	let t = ve(e);
+	U.set(e, {
+		attempts: t.attempts + 1,
+		commits: t.commits + 1
+	}), G(e);
+}
+function be(e) {
+	return U.get(e) || H;
+}
+function xe(e) {
+	U.delete(e), G(e);
+}
+function K(e, t) {
+	let n = W.get(e);
+	return n ? n.add(t) : W.set(e, new Set([t])), () => {
+		let n = W.get(e);
+		n && (n.delete(t), n.size === 0 && W.delete(e));
+	};
+}
+function Se(e) {
+	return c(n((t) => K(e, t), [e]), n(() => be(e), [e]), () => H);
+}
+function Ce(e, t) {
+	return t === "commits" ? `${e.commits} commits` : t === "both" ? `${e.attempts} attempts | ${e.commits} commits` : `${e.attempts} attempts`;
+}
+//#endregion
+//#region src/reinspect/react/overlay.tsx
+function we({ value: e, onCopy: t }) {
+	if (e.kind === "function" && e.functionMeta) {
+		let n = e.functionMeta;
+		return /* @__PURE__ */ d("div", {
+			className: "reinspect-prop-function",
+			children: [
+				/* @__PURE__ */ u("code", { children: e.summary }),
+				/* @__PURE__ */ u("pre", { children: n.preview }),
+				/* @__PURE__ */ u("button", {
+					type: "button",
+					onClick: () => t(n.source, "Function source"),
+					disabled: !n.source,
+					children: "Copy function source"
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ d("div", {
+		className: "reinspect-prop-scalar",
+		children: [/* @__PURE__ */ u("code", { children: e.summary }), e.copyText ? /* @__PURE__ */ u("button", {
+			type: "button",
+			onClick: () => t(e.copyText ?? "", "Value"),
+			children: "Copy"
+		}) : null]
+	});
+}
+function Te({ instanceId: e, counterMode: t }) {
+	return /* @__PURE__ */ u(l, { children: Ce(Se(e), t) });
+}
+//#endregion
+//#region src/reinspect/react/wrap.tsx
+var Ee = {
+	enabled: !1,
+	startActive: !1,
+	showFloatingToggle: !1,
+	inspectMode: "wrapped",
+	editableProps: [],
+	palette: [],
+	zIndexBase: 0,
+	renderCounters: "off",
+	countRendersForComponents: []
+}, q = 0;
+function De(e) {
+	return q += 1, `${e}-${q.toString(36)}`;
+}
+function Oe(e) {
+	let t = e.replace(/([A-Z])/g, " $1").trim(), n = t.slice(0, 1);
+	return t.length > 0 ? n.toUpperCase() + t.slice(1) : e;
+}
+function ke(e) {
+	return e.trim().toLowerCase().replace(/[\s_-]+/g, "");
+}
+function J(e) {
+	return e != null && e !== "";
+}
+function Ae(e) {
+	return e.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+async function je(e) {
+	if (typeof navigator > "u" || !navigator.clipboard?.writeText) return !1;
+	try {
+		return await navigator.clipboard.writeText(e), !0;
+	} catch {
+		return !1;
+	}
+}
+function Y(e, t) {
+	return t?.componentName?.trim() || e.displayName?.trim() || e.name?.trim() || t?.fallbackName?.trim() || "Component";
+}
+function Me(e, t, n) {
+	return e === "manual" || n === "all" || n === "first-party" && t === "first-party";
+}
+function Ne(t, n) {
+	let c = n?.source ?? "manual", ne = n?.scope ?? "first-party", f = V(t);
+	if (f && c === "auto") return t;
+	let p = f && c === "manual" ? f.original : t, m = Y(p, n);
+	function h(t) {
+		let n = o(null), f = o(null), h = o(null), [g, _] = s(null), [v, y] = s("css"), [b, x] = s("detected"), [S, C] = s(""), [ae, w] = s({}), [T, E] = s("{}"), [oe, D] = s(null), [O, k] = s(null), [A, j] = s({}), [M, ue] = s({}), [N, P] = s({}), [F, I] = s(null), [L, R] = s(""), [z, B] = s(null), V = r(te), _e = !!V, H = V?.config ?? Ee, U = V?.getBorderColor ?? (() => "#f97316"), W = V?.isActive ?? !1, ve = V?.inspectMode ?? "wrapped", G = V?.renderCounterMode ?? Ee.renderCounters, be = V?.overrides ?? {}, K = V?.updateOverride ?? (() => void 0), Se = V?.renderCountComponents ?? {}, Ce = V?.setRenderCountingForComponent ?? (() => void 0), q = V?.isRenderCountingEnabledFor ?? (() => !1);
+		n.current ||= De(m);
+		let Y = n.current, Ne = U(m), Pe = Me(c, ne, ve), X = H.enabled && W && Pe, Fe = X && q(m), Ie = !!Se[m], Le = G !== "off", Re = G === "off" ? "attempts" : G, Z = Fe, ze = be[Y], Be = X ? se(ze, H.editableProps) : {}, Q = {
+			...t,
+			...ae
+		}, Ve = Q, $ = X && g !== null, He = ke(S), Ue = He.length === 0 ? H.editableProps : H.editableProps.filter((e) => ke(e).includes(He)), We = $ && v === "props" && b === "detected" ? de(Ve) : [], Ge = o(Z);
+		i(() => {
+			Ge.current = Z;
+		}, [Z]);
+		let Ke = a(() => (e, t) => {
+			t === "mount" || !Ge.current || ye(Y);
+		}, [Y]);
+		i(() => () => {
+			xe(Y);
+		}, [Y]), i(() => {
+			if (!$) return;
+			let e = (e) => {
+				let t = e.target;
+				f.current?.contains(t) || h.current?.contains(t) || (_(null), I(null), R(""), B(null));
+			}, t = (e) => {
+				if (e.key === "Escape") {
+					if (F) {
+						I(null), R(""), B(null);
+						return;
+					}
+					_(null);
+				}
+			};
+			return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
+				document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
+			};
+		}, [F, $]), i(() => {
+			if (!O) return;
+			let e = globalThis.setTimeout(() => {
+				k(null);
+			}, 1400);
+			return () => {
+				globalThis.clearTimeout(e);
+			};
+		}, [O]);
+		let qe = {
+			"--reinspect-color": Ne,
+			"--reinspect-z-base": H.zIndexBase
+		}, Je = (e) => {
+			X && (e.preventDefault(), y("css"), x("detected"), C(""), D(null), k(null), j({}), ue({}), P({}), I(null), R(""), B(null), E("{}"), _({
+				x: e.clientX,
+				y: e.clientY
+			}));
+		}, Ye = () => {
+			let { parsed: e, error: t } = ge(T);
+			if (t || !e) {
+				D(t);
+				return;
+			}
+			w(e), D(null);
+		}, Xe = () => {
+			w({}), b === "raw" && E(fe(t)), D(null);
+		}, Ze = (e, t) => {
+			je(e).then((e) => {
+				k(e ? `${t} copied.` : "Clipboard access is unavailable.");
+			});
+		}, Qe = (e, t) => {
+			if (N[e]) {
+				P((t) => ({
+					...t,
+					[e]: !1
+				}));
+				return;
+			}
+			if (!(e in A) && !(e in M)) {
+				let n = pe(t);
+				n === null ? ue((t) => ({
+					...t,
+					[e]: "JSON preview is unavailable for this value."
+				})) : j((t) => ({
+					...t,
+					[e]: n
+				}));
+			}
+			P((t) => ({
+				...t,
+				[e]: !0
+			}));
+		}, $e = (e, t) => {
+			if (!me(t)) return;
+			let n = pe(t);
+			if (n === null) {
+				k("Unable to open editor for this value.");
+				return;
+			}
+			I(e), R(n), B(null);
+		}, et = () => {
+			if (!F) return;
+			let { parsed: e, error: t } = he(L);
+			if (t || e === null) {
+				B(t);
+				return;
+			}
+			w((t) => ({
+				...t,
+				[F]: e
+			})), I(null), R(""), B(null);
+		}, tt = $ ? /* @__PURE__ */ d("div", {
+			ref: f,
+			className: "reinspect-menu",
+			role: "dialog",
+			"aria-label": `${m} inspector controls`,
+			style: {
+				top: `${g.y}px`,
+				left: `${g.x}px`
+			},
+			children: [
+				/* @__PURE__ */ d("p", {
+					className: "reinspect-menu-title",
+					children: [m, " inspector"]
+				}),
+				/* @__PURE__ */ d("label", {
+					className: "reinspect-menu-component-setting",
+					children: [/* @__PURE__ */ u("span", { children: "Capture renders for this component" }), /* @__PURE__ */ u("input", {
+						type: "checkbox",
+						checked: Le ? !0 : Ie,
+						onChange: (e) => Ce(m, e.currentTarget.checked),
+						disabled: Le,
+						"aria-label": `Capture renders for ${m}`,
+						"data-testid": `reinspect-component-render-toggle-${m}`
+					})]
+				}),
+				Le ? /* @__PURE__ */ u("p", {
+					className: "reinspect-setting-note",
+					children: "Global capture is enabled from Reinspect settings."
+				}) : null,
+				/* @__PURE__ */ d("div", {
+					className: "reinspect-submenu",
+					children: [/* @__PURE__ */ u("button", {
+						type: "button",
+						"data-state": v === "css" ? "active" : "idle",
+						onClick: () => y("css"),
+						children: "CSS"
+					}), /* @__PURE__ */ u("button", {
+						type: "button",
+						"data-state": v === "props" ? "active" : "idle",
+						onClick: () => y("props"),
+						children: "Props"
+					})]
+				}),
+				v === "css" ? /* @__PURE__ */ d(l, { children: [
+					/* @__PURE__ */ d("div", {
+						className: "reinspect-menu-filter",
+						children: [/* @__PURE__ */ u("span", {
+							className: "reinspect-menu-filter-icon",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ u("svg", {
+								viewBox: "0 0 24 24",
+								focusable: "false",
+								children: /* @__PURE__ */ u("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__ */ u("input", {
+							id: `${Y}-css-filter`,
+							"data-testid": "reinspect-css-filter-input",
+							type: "search",
+							value: S,
+							placeholder: "Filter",
+							"aria-label": "Filter CSS properties",
+							onChange: (e) => C(e.currentTarget.value)
+						})]
+					}),
+					/* @__PURE__ */ u("div", {
+						className: "reinspect-menu-grid",
+						children: Ue.map((e) => {
+							let t = ze?.[e], n = `${Y}-${e}`;
+							if (re.has(e)) {
+								let r = typeof t == "string" ? ce(t) : "#1f2937";
+								return /* @__PURE__ */ d("div", {
+									className: "reinspect-field",
+									children: [/* @__PURE__ */ u("label", {
+										htmlFor: n,
+										children: Oe(e)
+									}), /* @__PURE__ */ d("div", {
+										className: "reinspect-inline-controls",
+										children: [/* @__PURE__ */ u("input", {
+											id: n,
+											type: "color",
+											value: r,
+											onChange: (t) => K(Y, e, t.currentTarget.value)
+										}), /* @__PURE__ */ u("button", {
+											type: "button",
+											onClick: () => K(Y, e, void 0),
+											disabled: !J(t),
+											children: "reset"
+										})]
+									})]
+								}, e);
+							}
+							if (e === "opacity") {
+								let r = typeof t == "number" ? t : 1;
+								return /* @__PURE__ */ d("div", {
+									className: "reinspect-field",
+									children: [/* @__PURE__ */ u("label", {
+										htmlFor: n,
+										children: "Opacity"
+									}), /* @__PURE__ */ d("div", {
+										className: "reinspect-inline-controls reinspect-opacity-controls",
+										children: [
+											/* @__PURE__ */ u("input", {
+												id: n,
+												type: "range",
+												min: "0",
+												max: "1",
+												step: "0.05",
+												value: r,
+												onChange: (t) => {
+													let n = le(t.currentTarget.value);
+													n !== void 0 && K(Y, e, n);
+												}
+											}),
+											/* @__PURE__ */ u("output", { children: r.toFixed(2) }),
+											/* @__PURE__ */ u("button", {
+												type: "button",
+												onClick: () => K(Y, e, void 0),
+												disabled: !J(t),
+												children: "reset"
+											})
+										]
+									})]
+								}, e);
+							}
+							if (ie.has(e)) {
+								let r = typeof t == "number" ? t : "";
+								return /* @__PURE__ */ d("div", {
+									className: "reinspect-field",
+									children: [/* @__PURE__ */ d("label", {
+										htmlFor: n,
+										children: [Oe(e), " (px)"]
+									}), /* @__PURE__ */ d("div", {
+										className: "reinspect-inline-controls",
+										children: [/* @__PURE__ */ u("input", {
+											id: n,
+											type: "number",
+											step: "1",
+											value: r,
+											onChange: (t) => {
+												if (t.currentTarget.value === "") {
+													K(Y, e, void 0);
+													return;
+												}
+												let n = le(t.currentTarget.value);
+												n !== void 0 && K(Y, e, n);
+											}
+										}), /* @__PURE__ */ u("button", {
+											type: "button",
+											onClick: () => K(Y, e, void 0),
+											disabled: !J(t),
+											children: "reset"
+										})]
+									})]
+								}, e);
+							}
+							return /* @__PURE__ */ d("div", {
+								className: "reinspect-field",
+								children: [/* @__PURE__ */ u("label", {
+									htmlFor: n,
+									children: Oe(e)
+								}), /* @__PURE__ */ d("div", {
+									className: "reinspect-inline-controls",
+									children: [/* @__PURE__ */ u("input", {
+										id: n,
+										type: "text",
+										value: typeof t == "string" ? t : "",
+										onChange: (t) => K(Y, e, t.currentTarget.value || void 0)
+									}), /* @__PURE__ */ u("button", {
+										type: "button",
+										onClick: () => K(Y, e, void 0),
+										disabled: !J(t),
+										children: "reset"
+									})]
+								})]
+							}, e);
+						})
+					}),
+					Ue.length === 0 ? /* @__PURE__ */ d("p", {
+						className: "reinspect-menu-empty-state",
+						children: [
+							"No CSS properties match \"",
+							S.trim(),
+							"\"."
+						]
+					}) : null
+				] }) : /* @__PURE__ */ d("div", {
+					className: "reinspect-props-panel",
+					children: [
+						/* @__PURE__ */ d("div", {
+							className: "reinspect-props-submenu",
+							children: [/* @__PURE__ */ u("button", {
+								type: "button",
+								"data-state": b === "detected" ? "active" : "idle",
+								onClick: () => x("detected"),
+								children: "Detected"
+							}), /* @__PURE__ */ u("button", {
+								type: "button",
+								"data-state": b === "raw" ? "active" : "idle",
+								onClick: () => {
+									x("raw"), D(null), E(fe(Ve));
+								},
+								children: "Raw"
+							})]
+						}),
+						b === "detected" ? We.length > 0 ? /* @__PURE__ */ d("div", {
+							className: "reinspect-props-table",
+							children: [/* @__PURE__ */ d("div", {
+								className: "reinspect-props-header",
+								children: [/* @__PURE__ */ u("span", { children: "Key" }), /* @__PURE__ */ u("span", { children: "Value" })]
+							}), We.map((e) => {
+								let t = Ae(e.key), n = Ve[e.key], r = e.value.kind === "object" || e.value.kind === "array", i = !!N[e.key], a = A[e.key], o = M[e.key], s = me(n);
+								return /* @__PURE__ */ d("div", {
+									className: "reinspect-props-row",
+									"data-testid": `reinspect-prop-row-${t}`,
+									children: [/* @__PURE__ */ u("code", {
+										className: "reinspect-prop-key",
+										children: e.key
+									}), /* @__PURE__ */ d("div", {
+										className: "reinspect-prop-cell",
+										"data-testid": `reinspect-prop-value-${t}`,
+										children: [
+											we({
+												value: e.value,
+												onCopy: Ze
+											}),
+											r || s ? /* @__PURE__ */ d("div", {
+												className: "reinspect-prop-actions",
+												children: [r ? /* @__PURE__ */ u("button", {
+													type: "button",
+													"data-testid": `reinspect-prop-show-json-${t}`,
+													onClick: () => Qe(e.key, n),
+													children: i ? "Hide JSON" : "Show JSON"
+												}) : null, s ? /* @__PURE__ */ u("button", {
+													type: "button",
+													"data-testid": `reinspect-prop-edit-${t}`,
+													onClick: () => $e(e.key, n),
+													children: "Edit"
+												}) : null]
+											}) : null,
+											i ? /* @__PURE__ */ u("div", {
+												className: "reinspect-prop-json-preview",
+												"data-testid": `reinspect-prop-json-preview-${t}`,
+												children: o ? /* @__PURE__ */ u("p", {
+													className: "reinspect-error",
+													children: o
+												}) : /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("pre", { children: a }), a ? /* @__PURE__ */ u("button", {
+													type: "button",
+													"data-testid": `reinspect-prop-copy-json-${t}`,
+													onClick: () => Ze(a, "JSON value"),
+													children: "Copy JSON"
+												}) : null] })
+											}) : null
+										]
+									})]
+								}, e.key);
+							})]
+						}) : /* @__PURE__ */ u("p", {
+							className: "reinspect-menu-empty-state",
+							children: "No props detected."
+						}) : /* @__PURE__ */ d(l, { children: [
+							/* @__PURE__ */ u("label", {
+								htmlFor: `${Y}-props-json`,
+								children: "Props JSON"
+							}),
+							/* @__PURE__ */ u("textarea", {
+								id: `${Y}-props-json`,
+								value: T,
+								onChange: (e) => {
+									E(e.currentTarget.value), D(null);
+								},
+								rows: 9
+							}),
+							oe ? /* @__PURE__ */ u("p", {
+								className: "reinspect-error",
+								children: oe
+							}) : null,
+							/* @__PURE__ */ d("div", {
+								className: "reinspect-inline-controls",
+								children: [/* @__PURE__ */ u("button", {
+									type: "button",
+									onClick: Ye,
+									children: "apply"
+								}), /* @__PURE__ */ u("button", {
+									type: "button",
+									onClick: Xe,
+									children: "reset"
+								})]
+							})
+						] }),
+						O ? /* @__PURE__ */ u("p", {
+							className: "reinspect-setting-note",
+							"data-testid": "reinspect-props-copy-status",
+							children: O
+						}) : null
+					]
+				})
+			]
+		}) : null, nt = F ? ee(/* @__PURE__ */ u("div", {
+			className: "reinspect-modal-backdrop",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": `Edit ${F} prop`,
+			"data-testid": "reinspect-prop-edit-modal",
+			children: /* @__PURE__ */ d("div", {
+				className: "reinspect-modal",
+				ref: h,
+				children: [
+					/* @__PURE__ */ d("p", {
+						className: "reinspect-menu-title",
+						children: ["Edit prop: ", F]
+					}),
+					/* @__PURE__ */ u("label", {
+						htmlFor: `${Y}-prop-edit-json`,
+						children: "JSON value"
+					}),
+					/* @__PURE__ */ u("textarea", {
+						id: `${Y}-prop-edit-json`,
+						"data-testid": "reinspect-prop-edit-textarea",
+						value: L,
+						onChange: (e) => {
+							R(e.currentTarget.value), B(null);
+						},
+						rows: 10
+					}),
+					z ? /* @__PURE__ */ u("p", {
+						className: "reinspect-error",
+						"data-testid": "reinspect-prop-edit-error",
+						children: z
+					}) : null,
+					/* @__PURE__ */ d("div", {
+						className: "reinspect-inline-controls",
+						children: [/* @__PURE__ */ u("button", {
+							type: "button",
+							onClick: et,
+							children: "apply"
+						}), /* @__PURE__ */ u("button", {
+							type: "button",
+							onClick: () => {
+								I(null), R(""), B(null);
+							},
+							children: "cancel"
+						})]
+					})
+				]
+			})
+		}), document.body) : null;
+		if (!_e) {
+			if (c === "manual") throw Error("useReinspect must be used within ReinspectProvider");
+			return /* @__PURE__ */ u(p, { ...Q });
+		}
+		if (!X) return /* @__PURE__ */ u(p, { ...Q });
+		let rt = Z ? /* @__PURE__ */ u(e, {
+			id: Y,
+			onRender: Ke,
+			children: /* @__PURE__ */ u(p, { ...Q })
+		}) : /* @__PURE__ */ u(p, { ...Q });
+		return /* @__PURE__ */ d("div", {
+			className: "reinspect-shell",
+			"data-reinspect-component": m,
+			"data-reinspect-active": X,
+			"data-testid": `reinspect-shell-${m}`,
+			style: qe,
+			onContextMenu: Je,
+			children: [
+				X ? /* @__PURE__ */ d("span", {
+					className: "reinspect-name-badge",
+					children: [
+						m,
+						Fe ? " | " : "",
+						Fe ? /* @__PURE__ */ u(Te, {
+							instanceId: Y,
+							counterMode: Re
+						}) : null
+					]
+				}) : null,
+				tt ? ee(tt, document.body) : null,
+				nt,
+				/* @__PURE__ */ u("div", {
+					className: "reinspect-content",
+					"data-reinspect-content": "true",
+					style: Be,
+					children: rt
+				})
+			]
+		});
+	}
+	return h.displayName = `withReinspect(${m})`, _e(h, {
+		source: c,
+		scope: ne,
+		original: p
+	}), h;
+}
+//#endregion
+export { C as a, T as c, b as i, te as l, V as n, oe as o, y as r, ae as s, Ne as t };