react-reinspect 0.1.8 → 0.1.9

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.
@@ -1,996 +0,0 @@
1
- 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";
2
- import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
3
- import { createPortal as ee } from "react-dom";
4
- //#region src/reinspect/react/context.ts
5
- var te = t(null), ne = [
6
- "backgroundColor",
7
- "color",
8
- "fontSize",
9
- "padding",
10
- "margin",
11
- "borderRadius",
12
- "borderWidth",
13
- "borderColor",
14
- "opacity",
15
- "width",
16
- "height",
17
- "gap"
18
- ], f = [
19
- "#f97316",
20
- "#2563eb",
21
- "#16a34a",
22
- "#db2777",
23
- "#ca8a04",
24
- "#0f766e"
25
- ], re = new Set([
26
- "backgroundColor",
27
- "color",
28
- "borderColor"
29
- ]), ie = new Set([
30
- "fontSize",
31
- "padding",
32
- "margin",
33
- "borderRadius",
34
- "borderWidth",
35
- "width",
36
- "height",
37
- "gap"
38
- ]), p = 2147483e3, m = "reinspect.inspectMode", h = [
39
- "wrapped",
40
- "first-party",
41
- "all"
42
- ], g = [
43
- "off",
44
- "attempts",
45
- "commits",
46
- "both"
47
- ], _ = !1;
48
- function v() {
49
- _ || typeof console > "u" || (_ = !0, console.warn("[react-reinspect] `shouldCountRenders` and `renderCaptureMode` are deprecated. Use `renderCounters` instead."));
50
- }
51
- function y(e) {
52
- return typeof e == "string" && h.includes(e);
53
- }
54
- function b(e) {
55
- return typeof e == "string" && g.includes(e);
56
- }
57
- function x() {
58
- if (!(typeof window > "u")) try {
59
- let e = window.sessionStorage.getItem(m);
60
- return y(e) ? e : void 0;
61
- } catch {
62
- return;
63
- }
64
- }
65
- function S(e) {
66
- return x() || (y(e) ? e : "wrapped");
67
- }
68
- function C(e) {
69
- if (!(typeof window > "u")) try {
70
- window.sessionStorage.setItem(m, e);
71
- } catch {}
72
- }
73
- function ae() {
74
- if (!(typeof window > "u")) try {
75
- window.location.reload();
76
- } catch {}
77
- }
78
- function w(e) {
79
- 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");
80
- }
81
- function T(e = {}) {
82
- 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;
83
- return {
84
- enabled: t,
85
- startActive: e.startActive ?? !0,
86
- showFloatingToggle: e.showFloatingToggle ?? t,
87
- inspectMode: S(e.inspectMode),
88
- editableProps: n,
89
- palette: r,
90
- zIndexBase: e.zIndexBase ?? p,
91
- renderCounters: w(e),
92
- countRendersForComponents: e.countRendersForComponents ?? []
93
- };
94
- }
95
- function E(e) {
96
- let t = 0;
97
- for (let n = 0; n < e.length; n += 1) t = (t << 5) - t + e.charCodeAt(n), t |= 0;
98
- return Math.abs(t);
99
- }
100
- function oe(e, t) {
101
- return t.length === 0 ? f[0] ?? "#f97316" : t[E(e) % t.length] ?? "#f97316";
102
- }
103
- function se(e, t) {
104
- if (!e) return {};
105
- let n = {};
106
- for (let r of t) {
107
- let t = e[r];
108
- t == null || t === "" || (n[r] = t);
109
- }
110
- return n;
111
- }
112
- function ce(e) {
113
- if (!e) return "#1f2937";
114
- if (/^#[0-9a-fA-F]{6}$/.test(e)) return e;
115
- if (/^#[0-9a-fA-F]{3}$/.test(e)) {
116
- let [, t = "0", n = "0", r = "0"] = e;
117
- return `#${t}${t}${n}${n}${r}${r}`;
118
- }
119
- return "#1f2937";
120
- }
121
- function le(e) {
122
- let t = Number(e);
123
- if (Number.isFinite(t)) return t;
124
- }
125
- //#endregion
126
- //#region src/reinspect/propsInspector.ts
127
- var D = 4, O = 40, k = 40, A = "__reinspect_placeholder__";
128
- function j(e, t) {
129
- return {
130
- [A]: e,
131
- display: t
132
- };
133
- }
134
- function M(e) {
135
- return typeof e == "object" && !!e && !Array.isArray(e);
136
- }
137
- function ue(e) {
138
- if (!M(e)) return !1;
139
- let t = Object.getPrototypeOf(e);
140
- return t === Object.prototype || t === null;
141
- }
142
- function N(e) {
143
- return M(e) && typeof e.__reinspect_placeholder__ == "string" && typeof e.display == "string";
144
- }
145
- function P(e) {
146
- try {
147
- return JSON.stringify(e, null, 2);
148
- } catch {
149
- return null;
150
- }
151
- }
152
- function F(e) {
153
- try {
154
- let t = Function.prototype.toString.call(e);
155
- return typeof t != "string" || t.trim().length === 0 ? "[Function source unavailable]" : t;
156
- } catch {
157
- return "[Function source unavailable]";
158
- }
159
- }
160
- function I(e) {
161
- let t = e.replace(/\s+/g, " ").trim();
162
- return t.length <= 120 ? t : `${t.slice(0, 117)}...`;
163
- }
164
- function L(e, t, n) {
165
- if (n > D) return j("truncated", "[Max depth reached]");
166
- if (e === null) return null;
167
- let r = typeof e;
168
- if (r === "string" || r === "boolean") return e;
169
- if (r === "number") return Number.isFinite(e) ? e : j("non-finite-number", String(e));
170
- if (r === "undefined") return j("undefined", "undefined");
171
- if (r === "bigint") return j("bigint", `${String(e)}n`);
172
- if (r === "symbol") return j("symbol", String(e));
173
- if (r === "function") return j("function", `[Function ${e.name || "anonymous"}]`);
174
- if (e instanceof Date) return j("date", Number.isNaN(e.getTime()) ? "Invalid Date" : e.toISOString());
175
- if (e instanceof RegExp) return j("regexp", e.toString());
176
- if (r === "object") {
177
- let r = e;
178
- if (t.has(r)) return j("circular", "[Circular]");
179
- if (t.add(r), Array.isArray(e)) {
180
- let i = [], a = Math.min(e.length, k);
181
- for (let r = 0; r < a; r += 1) i.push(L(e[r], t, n + 1));
182
- return e.length > k && i.push(j("truncated", `${e.length - k} more items`)), t.delete(r), i;
183
- }
184
- let i = {}, a = Object.entries(e), o = Math.min(a.length, O);
185
- for (let e = 0; e < o; e += 1) {
186
- let r = a[e];
187
- if (!r) continue;
188
- let [o, s] = r;
189
- i[o] = L(s, t, n + 1);
190
- }
191
- return a.length > O && (i.__reinspect_truncated__ = j("truncated", `${a.length - O} more keys`)), t.delete(r), i;
192
- }
193
- return j("unsupported", "[Unsupported value]");
194
- }
195
- function R(e) {
196
- if (e === null) return {
197
- kind: "null",
198
- summary: "null",
199
- copyText: "null"
200
- };
201
- let t = typeof e;
202
- if (t === "undefined") return {
203
- kind: "undefined",
204
- summary: "undefined",
205
- copyText: "undefined"
206
- };
207
- if (t === "boolean") return {
208
- kind: "boolean",
209
- summary: String(e),
210
- copyText: String(e)
211
- };
212
- if (t === "number") return {
213
- kind: "number",
214
- summary: String(e),
215
- copyText: String(e)
216
- };
217
- if (t === "string") return {
218
- kind: "string",
219
- summary: JSON.stringify(e),
220
- copyText: String(e)
221
- };
222
- if (t === "bigint") return {
223
- kind: "bigint",
224
- summary: `${String(e)}n`,
225
- copyText: `${String(e)}n`
226
- };
227
- if (t === "symbol") {
228
- let t = String(e);
229
- return {
230
- kind: "symbol",
231
- summary: t,
232
- copyText: t
233
- };
234
- }
235
- if (t === "function") {
236
- let t = e, n = F(t), r = t.name || "anonymous";
237
- return {
238
- kind: "function",
239
- summary: `Function ${r}(${t.length})`,
240
- copyText: n,
241
- functionMeta: {
242
- name: r,
243
- arity: t.length,
244
- preview: I(n),
245
- source: n
246
- }
247
- };
248
- }
249
- if (e instanceof Date) {
250
- let t = Number.isNaN(e.getTime()) ? "Invalid Date" : e.toISOString();
251
- return {
252
- kind: "date",
253
- summary: `Date ${t}`,
254
- copyText: t
255
- };
256
- }
257
- if (e instanceof RegExp) {
258
- let t = e.toString();
259
- return {
260
- kind: "regexp",
261
- summary: t,
262
- copyText: t
263
- };
264
- }
265
- return Array.isArray(e) ? {
266
- kind: "array",
267
- summary: `Array(${e.length})`
268
- } : M(e) ? {
269
- kind: "object",
270
- summary: `Object(${Object.keys(e).length})`
271
- } : {
272
- kind: "unknown",
273
- summary: String(e)
274
- };
275
- }
276
- function z(e) {
277
- if (!N(e)) {
278
- if (Array.isArray(e)) {
279
- let t = [];
280
- for (let n of e) {
281
- let e = z(n);
282
- if (e === void 0) return;
283
- t.push(e);
284
- }
285
- return t;
286
- }
287
- if (M(e)) {
288
- let t = {};
289
- for (let [n, r] of Object.entries(e)) {
290
- let e = z(r);
291
- e !== void 0 && (t[n] = e);
292
- }
293
- return t;
294
- }
295
- return e;
296
- }
297
- }
298
- function de(e) {
299
- return Object.keys(e).map((t) => ({
300
- key: t,
301
- value: R(e[t])
302
- }));
303
- }
304
- function fe(e) {
305
- return P(L(e, /* @__PURE__ */ new WeakSet(), 0)) ?? "{}";
306
- }
307
- function pe(e) {
308
- return P(L(e, /* @__PURE__ */ new WeakSet(), 0));
309
- }
310
- function me(e) {
311
- if (e === null) return !0;
312
- let t = typeof e;
313
- return t === "string" || t === "number" || t === "boolean" || Array.isArray(e) ? !0 : ue(e);
314
- }
315
- function he(e) {
316
- let t = e.trim();
317
- if (t.length === 0) return {
318
- parsed: null,
319
- error: "Value JSON cannot be empty."
320
- };
321
- try {
322
- let e = z(JSON.parse(t));
323
- return e === void 0 || !me(e) ? {
324
- parsed: null,
325
- error: "Only objects, arrays, and primitive JSON values are editable."
326
- } : {
327
- parsed: e,
328
- error: null
329
- };
330
- } catch {
331
- return {
332
- parsed: null,
333
- error: "Invalid JSON. Fix syntax and try Apply again."
334
- };
335
- }
336
- }
337
- function ge(e) {
338
- let t = e.trim();
339
- if (t.length === 0) return {
340
- parsed: {},
341
- error: null
342
- };
343
- try {
344
- let e = JSON.parse(t);
345
- if (typeof e != "object" || !e || Array.isArray(e)) return {
346
- parsed: null,
347
- error: "Props JSON must be an object (example: {\"title\":\"Demo\"})."
348
- };
349
- let n = {};
350
- for (let [t, r] of Object.entries(e)) {
351
- let e = z(r);
352
- e !== void 0 && (n[t] = e);
353
- }
354
- return {
355
- parsed: n,
356
- error: null
357
- };
358
- } catch {
359
- return {
360
- parsed: null,
361
- error: "Invalid JSON. Fix syntax and try Apply again."
362
- };
363
- }
364
- }
365
- //#endregion
366
- //#region src/reinspect/wrapMarker.ts
367
- var B = Symbol.for("reinspect.wrapped");
368
- function V(e) {
369
- return e[B];
370
- }
371
- function _e(e, t) {
372
- e[B] = t;
373
- }
374
- //#endregion
375
- //#region src/reinspect/core/renderCounter.ts
376
- var H = {
377
- attempts: 0,
378
- commits: 0
379
- }, U = /* @__PURE__ */ new Map(), W = /* @__PURE__ */ new Map();
380
- function ve(e) {
381
- let t = U.get(e);
382
- if (t) return t;
383
- let n = {
384
- attempts: 0,
385
- commits: 0
386
- };
387
- return U.set(e, n), n;
388
- }
389
- function G(e) {
390
- let t = W.get(e);
391
- if (t) for (let e of t) e();
392
- }
393
- function ye(e) {
394
- let t = ve(e);
395
- U.set(e, {
396
- attempts: t.attempts + 1,
397
- commits: t.commits + 1
398
- }), G(e);
399
- }
400
- function be(e) {
401
- return U.get(e) || H;
402
- }
403
- function xe(e) {
404
- U.delete(e), G(e);
405
- }
406
- function K(e, t) {
407
- let n = W.get(e);
408
- return n ? n.add(t) : W.set(e, new Set([t])), () => {
409
- let n = W.get(e);
410
- n && (n.delete(t), n.size === 0 && W.delete(e));
411
- };
412
- }
413
- function Se(e) {
414
- return c(n((t) => K(e, t), [e]), n(() => be(e), [e]), () => H);
415
- }
416
- function Ce(e, t) {
417
- return t === "commits" ? `${e.commits} commits` : t === "both" ? `${e.attempts} attempts | ${e.commits} commits` : `${e.attempts} attempts`;
418
- }
419
- //#endregion
420
- //#region src/reinspect/react/overlay.tsx
421
- function we({ value: e, onCopy: t }) {
422
- if (e.kind === "function" && e.functionMeta) {
423
- let n = e.functionMeta;
424
- return /* @__PURE__ */ d("div", {
425
- className: "reinspect-prop-function",
426
- children: [
427
- /* @__PURE__ */ u("code", { children: e.summary }),
428
- /* @__PURE__ */ u("pre", { children: n.preview }),
429
- /* @__PURE__ */ u("button", {
430
- type: "button",
431
- onClick: () => t(n.source, "Function source"),
432
- disabled: !n.source,
433
- children: "Copy function source"
434
- })
435
- ]
436
- });
437
- }
438
- return /* @__PURE__ */ d("div", {
439
- className: "reinspect-prop-scalar",
440
- children: [/* @__PURE__ */ u("code", { children: e.summary }), e.copyText ? /* @__PURE__ */ u("button", {
441
- type: "button",
442
- onClick: () => t(e.copyText ?? "", "Value"),
443
- children: "Copy"
444
- }) : null]
445
- });
446
- }
447
- function Te({ instanceId: e, counterMode: t }) {
448
- return /* @__PURE__ */ u(l, { children: Ce(Se(e), t) });
449
- }
450
- //#endregion
451
- //#region src/reinspect/react/wrap.tsx
452
- var Ee = {
453
- enabled: !1,
454
- startActive: !1,
455
- showFloatingToggle: !1,
456
- inspectMode: "wrapped",
457
- editableProps: [],
458
- palette: [],
459
- zIndexBase: 0,
460
- renderCounters: "off",
461
- countRendersForComponents: []
462
- }, q = 0;
463
- function De(e) {
464
- return q += 1, `${e}-${q.toString(36)}`;
465
- }
466
- function Oe(e) {
467
- let t = e.replace(/([A-Z])/g, " $1").trim(), n = t.slice(0, 1);
468
- return t.length > 0 ? n.toUpperCase() + t.slice(1) : e;
469
- }
470
- function ke(e) {
471
- return e.trim().toLowerCase().replace(/[\s_-]+/g, "");
472
- }
473
- function J(e) {
474
- return e != null && e !== "";
475
- }
476
- function Ae(e) {
477
- return e.replace(/[^a-zA-Z0-9_-]/g, "-");
478
- }
479
- async function je(e) {
480
- if (typeof navigator > "u" || !navigator.clipboard?.writeText) return !1;
481
- try {
482
- return await navigator.clipboard.writeText(e), !0;
483
- } catch {
484
- return !1;
485
- }
486
- }
487
- function Y(e, t) {
488
- return t?.componentName?.trim() || e.displayName?.trim() || e.name?.trim() || t?.fallbackName?.trim() || "Component";
489
- }
490
- function Me(e, t, n) {
491
- return e === "manual" || n === "all" || n === "first-party" && t === "first-party";
492
- }
493
- function Ne(t, n) {
494
- let c = n?.source ?? "manual", ne = n?.scope ?? "first-party", f = V(t);
495
- if (f && c === "auto") return t;
496
- let p = f && c === "manual" ? f.original : t, m = Y(p, n);
497
- function h(t) {
498
- 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);
499
- n.current ||= De(m);
500
- 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 = {
501
- ...t,
502
- ...ae
503
- }, 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);
504
- i(() => {
505
- Ge.current = Z;
506
- }, [Z]);
507
- let Ke = a(() => (e, t) => {
508
- t === "mount" || !Ge.current || ye(Y);
509
- }, [Y]);
510
- i(() => () => {
511
- xe(Y);
512
- }, [Y]), i(() => {
513
- if (!$) return;
514
- let e = (e) => {
515
- let t = e.target;
516
- f.current?.contains(t) || h.current?.contains(t) || (_(null), I(null), R(""), B(null));
517
- }, t = (e) => {
518
- if (e.key === "Escape") {
519
- if (F) {
520
- I(null), R(""), B(null);
521
- return;
522
- }
523
- _(null);
524
- }
525
- };
526
- return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
527
- document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
528
- };
529
- }, [F, $]), i(() => {
530
- if (!O) return;
531
- let e = globalThis.setTimeout(() => {
532
- k(null);
533
- }, 1400);
534
- return () => {
535
- globalThis.clearTimeout(e);
536
- };
537
- }, [O]);
538
- let qe = {
539
- "--reinspect-color": Ne,
540
- "--reinspect-z-base": H.zIndexBase
541
- }, Je = (e) => {
542
- X && (e.preventDefault(), y("css"), x("detected"), C(""), D(null), k(null), j({}), ue({}), P({}), I(null), R(""), B(null), E("{}"), _({
543
- x: e.clientX,
544
- y: e.clientY
545
- }));
546
- }, Ye = () => {
547
- let { parsed: e, error: t } = ge(T);
548
- if (t || !e) {
549
- D(t);
550
- return;
551
- }
552
- w(e), D(null);
553
- }, Xe = () => {
554
- w({}), b === "raw" && E(fe(t)), D(null);
555
- }, Ze = (e, t) => {
556
- je(e).then((e) => {
557
- k(e ? `${t} copied.` : "Clipboard access is unavailable.");
558
- });
559
- }, Qe = (e, t) => {
560
- if (N[e]) {
561
- P((t) => ({
562
- ...t,
563
- [e]: !1
564
- }));
565
- return;
566
- }
567
- if (!(e in A) && !(e in M)) {
568
- let n = pe(t);
569
- n === null ? ue((t) => ({
570
- ...t,
571
- [e]: "JSON preview is unavailable for this value."
572
- })) : j((t) => ({
573
- ...t,
574
- [e]: n
575
- }));
576
- }
577
- P((t) => ({
578
- ...t,
579
- [e]: !0
580
- }));
581
- }, $e = (e, t) => {
582
- if (!me(t)) return;
583
- let n = pe(t);
584
- if (n === null) {
585
- k("Unable to open editor for this value.");
586
- return;
587
- }
588
- I(e), R(n), B(null);
589
- }, et = () => {
590
- if (!F) return;
591
- let { parsed: e, error: t } = he(L);
592
- if (t || e === null) {
593
- B(t);
594
- return;
595
- }
596
- w((t) => ({
597
- ...t,
598
- [F]: e
599
- })), I(null), R(""), B(null);
600
- }, tt = $ ? /* @__PURE__ */ d("div", {
601
- ref: f,
602
- className: "reinspect-menu",
603
- role: "dialog",
604
- "aria-label": `${m} inspector controls`,
605
- style: {
606
- top: `${g.y}px`,
607
- left: `${g.x}px`
608
- },
609
- children: [
610
- /* @__PURE__ */ d("p", {
611
- className: "reinspect-menu-title",
612
- children: [m, " inspector"]
613
- }),
614
- /* @__PURE__ */ d("label", {
615
- className: "reinspect-menu-component-setting",
616
- children: [/* @__PURE__ */ u("span", { children: "Capture renders for this component" }), /* @__PURE__ */ u("input", {
617
- type: "checkbox",
618
- checked: Le ? !0 : Ie,
619
- onChange: (e) => Ce(m, e.currentTarget.checked),
620
- disabled: Le,
621
- "aria-label": `Capture renders for ${m}`,
622
- "data-testid": `reinspect-component-render-toggle-${m}`
623
- })]
624
- }),
625
- Le ? /* @__PURE__ */ u("p", {
626
- className: "reinspect-setting-note",
627
- children: "Global capture is enabled from Reinspect settings."
628
- }) : null,
629
- /* @__PURE__ */ d("div", {
630
- className: "reinspect-submenu",
631
- children: [/* @__PURE__ */ u("button", {
632
- type: "button",
633
- "data-state": v === "css" ? "active" : "idle",
634
- onClick: () => y("css"),
635
- children: "CSS"
636
- }), /* @__PURE__ */ u("button", {
637
- type: "button",
638
- "data-state": v === "props" ? "active" : "idle",
639
- onClick: () => y("props"),
640
- children: "Props"
641
- })]
642
- }),
643
- v === "css" ? /* @__PURE__ */ d(l, { children: [
644
- /* @__PURE__ */ d("div", {
645
- className: "reinspect-menu-filter",
646
- children: [/* @__PURE__ */ u("span", {
647
- className: "reinspect-menu-filter-icon",
648
- "aria-hidden": "true",
649
- children: /* @__PURE__ */ u("svg", {
650
- viewBox: "0 0 24 24",
651
- focusable: "false",
652
- children: /* @__PURE__ */ u("path", {
653
- 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",
654
- fill: "currentColor"
655
- })
656
- })
657
- }), /* @__PURE__ */ u("input", {
658
- id: `${Y}-css-filter`,
659
- "data-testid": "reinspect-css-filter-input",
660
- type: "search",
661
- value: S,
662
- placeholder: "Filter",
663
- "aria-label": "Filter CSS properties",
664
- onChange: (e) => C(e.currentTarget.value)
665
- })]
666
- }),
667
- /* @__PURE__ */ u("div", {
668
- className: "reinspect-menu-grid",
669
- children: Ue.map((e) => {
670
- let t = ze?.[e], n = `${Y}-${e}`;
671
- if (re.has(e)) {
672
- let r = typeof t == "string" ? ce(t) : "#1f2937";
673
- return /* @__PURE__ */ d("div", {
674
- className: "reinspect-field",
675
- children: [/* @__PURE__ */ u("label", {
676
- htmlFor: n,
677
- children: Oe(e)
678
- }), /* @__PURE__ */ d("div", {
679
- className: "reinspect-inline-controls",
680
- children: [/* @__PURE__ */ u("input", {
681
- id: n,
682
- type: "color",
683
- value: r,
684
- onChange: (t) => K(Y, e, t.currentTarget.value)
685
- }), /* @__PURE__ */ u("button", {
686
- type: "button",
687
- onClick: () => K(Y, e, void 0),
688
- disabled: !J(t),
689
- children: "reset"
690
- })]
691
- })]
692
- }, e);
693
- }
694
- if (e === "opacity") {
695
- let r = typeof t == "number" ? t : 1;
696
- return /* @__PURE__ */ d("div", {
697
- className: "reinspect-field",
698
- children: [/* @__PURE__ */ u("label", {
699
- htmlFor: n,
700
- children: "Opacity"
701
- }), /* @__PURE__ */ d("div", {
702
- className: "reinspect-inline-controls reinspect-opacity-controls",
703
- children: [
704
- /* @__PURE__ */ u("input", {
705
- id: n,
706
- type: "range",
707
- min: "0",
708
- max: "1",
709
- step: "0.05",
710
- value: r,
711
- onChange: (t) => {
712
- let n = le(t.currentTarget.value);
713
- n !== void 0 && K(Y, e, n);
714
- }
715
- }),
716
- /* @__PURE__ */ u("output", { children: r.toFixed(2) }),
717
- /* @__PURE__ */ u("button", {
718
- type: "button",
719
- onClick: () => K(Y, e, void 0),
720
- disabled: !J(t),
721
- children: "reset"
722
- })
723
- ]
724
- })]
725
- }, e);
726
- }
727
- if (ie.has(e)) {
728
- let r = typeof t == "number" ? t : "";
729
- return /* @__PURE__ */ d("div", {
730
- className: "reinspect-field",
731
- children: [/* @__PURE__ */ d("label", {
732
- htmlFor: n,
733
- children: [Oe(e), " (px)"]
734
- }), /* @__PURE__ */ d("div", {
735
- className: "reinspect-inline-controls",
736
- children: [/* @__PURE__ */ u("input", {
737
- id: n,
738
- type: "number",
739
- step: "1",
740
- value: r,
741
- onChange: (t) => {
742
- if (t.currentTarget.value === "") {
743
- K(Y, e, void 0);
744
- return;
745
- }
746
- let n = le(t.currentTarget.value);
747
- n !== void 0 && K(Y, e, n);
748
- }
749
- }), /* @__PURE__ */ u("button", {
750
- type: "button",
751
- onClick: () => K(Y, e, void 0),
752
- disabled: !J(t),
753
- children: "reset"
754
- })]
755
- })]
756
- }, e);
757
- }
758
- return /* @__PURE__ */ d("div", {
759
- className: "reinspect-field",
760
- children: [/* @__PURE__ */ u("label", {
761
- htmlFor: n,
762
- children: Oe(e)
763
- }), /* @__PURE__ */ d("div", {
764
- className: "reinspect-inline-controls",
765
- children: [/* @__PURE__ */ u("input", {
766
- id: n,
767
- type: "text",
768
- value: typeof t == "string" ? t : "",
769
- onChange: (t) => K(Y, e, t.currentTarget.value || void 0)
770
- }), /* @__PURE__ */ u("button", {
771
- type: "button",
772
- onClick: () => K(Y, e, void 0),
773
- disabled: !J(t),
774
- children: "reset"
775
- })]
776
- })]
777
- }, e);
778
- })
779
- }),
780
- Ue.length === 0 ? /* @__PURE__ */ d("p", {
781
- className: "reinspect-menu-empty-state",
782
- children: [
783
- "No CSS properties match \"",
784
- S.trim(),
785
- "\"."
786
- ]
787
- }) : null
788
- ] }) : /* @__PURE__ */ d("div", {
789
- className: "reinspect-props-panel",
790
- children: [
791
- /* @__PURE__ */ d("div", {
792
- className: "reinspect-props-submenu",
793
- children: [/* @__PURE__ */ u("button", {
794
- type: "button",
795
- "data-state": b === "detected" ? "active" : "idle",
796
- onClick: () => x("detected"),
797
- children: "Detected"
798
- }), /* @__PURE__ */ u("button", {
799
- type: "button",
800
- "data-state": b === "raw" ? "active" : "idle",
801
- onClick: () => {
802
- x("raw"), D(null), E(fe(Ve));
803
- },
804
- children: "Raw"
805
- })]
806
- }),
807
- b === "detected" ? We.length > 0 ? /* @__PURE__ */ d("div", {
808
- className: "reinspect-props-table",
809
- children: [/* @__PURE__ */ d("div", {
810
- className: "reinspect-props-header",
811
- children: [/* @__PURE__ */ u("span", { children: "Key" }), /* @__PURE__ */ u("span", { children: "Value" })]
812
- }), We.map((e) => {
813
- 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);
814
- return /* @__PURE__ */ d("div", {
815
- className: "reinspect-props-row",
816
- "data-testid": `reinspect-prop-row-${t}`,
817
- children: [/* @__PURE__ */ u("code", {
818
- className: "reinspect-prop-key",
819
- children: e.key
820
- }), /* @__PURE__ */ d("div", {
821
- className: "reinspect-prop-cell",
822
- "data-testid": `reinspect-prop-value-${t}`,
823
- children: [
824
- we({
825
- value: e.value,
826
- onCopy: Ze
827
- }),
828
- r || s ? /* @__PURE__ */ d("div", {
829
- className: "reinspect-prop-actions",
830
- children: [r ? /* @__PURE__ */ u("button", {
831
- type: "button",
832
- "data-testid": `reinspect-prop-show-json-${t}`,
833
- onClick: () => Qe(e.key, n),
834
- children: i ? "Hide JSON" : "Show JSON"
835
- }) : null, s ? /* @__PURE__ */ u("button", {
836
- type: "button",
837
- "data-testid": `reinspect-prop-edit-${t}`,
838
- onClick: () => $e(e.key, n),
839
- children: "Edit"
840
- }) : null]
841
- }) : null,
842
- i ? /* @__PURE__ */ u("div", {
843
- className: "reinspect-prop-json-preview",
844
- "data-testid": `reinspect-prop-json-preview-${t}`,
845
- children: o ? /* @__PURE__ */ u("p", {
846
- className: "reinspect-error",
847
- children: o
848
- }) : /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("pre", { children: a }), a ? /* @__PURE__ */ u("button", {
849
- type: "button",
850
- "data-testid": `reinspect-prop-copy-json-${t}`,
851
- onClick: () => Ze(a, "JSON value"),
852
- children: "Copy JSON"
853
- }) : null] })
854
- }) : null
855
- ]
856
- })]
857
- }, e.key);
858
- })]
859
- }) : /* @__PURE__ */ u("p", {
860
- className: "reinspect-menu-empty-state",
861
- children: "No props detected."
862
- }) : /* @__PURE__ */ d(l, { children: [
863
- /* @__PURE__ */ u("label", {
864
- htmlFor: `${Y}-props-json`,
865
- children: "Props JSON"
866
- }),
867
- /* @__PURE__ */ u("textarea", {
868
- id: `${Y}-props-json`,
869
- value: T,
870
- onChange: (e) => {
871
- E(e.currentTarget.value), D(null);
872
- },
873
- rows: 9
874
- }),
875
- oe ? /* @__PURE__ */ u("p", {
876
- className: "reinspect-error",
877
- children: oe
878
- }) : null,
879
- /* @__PURE__ */ d("div", {
880
- className: "reinspect-inline-controls",
881
- children: [/* @__PURE__ */ u("button", {
882
- type: "button",
883
- onClick: Ye,
884
- children: "apply"
885
- }), /* @__PURE__ */ u("button", {
886
- type: "button",
887
- onClick: Xe,
888
- children: "reset"
889
- })]
890
- })
891
- ] }),
892
- O ? /* @__PURE__ */ u("p", {
893
- className: "reinspect-setting-note",
894
- "data-testid": "reinspect-props-copy-status",
895
- children: O
896
- }) : null
897
- ]
898
- })
899
- ]
900
- }) : null, nt = F ? ee(/* @__PURE__ */ u("div", {
901
- className: "reinspect-modal-backdrop",
902
- role: "dialog",
903
- "aria-modal": "true",
904
- "aria-label": `Edit ${F} prop`,
905
- "data-testid": "reinspect-prop-edit-modal",
906
- children: /* @__PURE__ */ d("div", {
907
- className: "reinspect-modal",
908
- ref: h,
909
- children: [
910
- /* @__PURE__ */ d("p", {
911
- className: "reinspect-menu-title",
912
- children: ["Edit prop: ", F]
913
- }),
914
- /* @__PURE__ */ u("label", {
915
- htmlFor: `${Y}-prop-edit-json`,
916
- children: "JSON value"
917
- }),
918
- /* @__PURE__ */ u("textarea", {
919
- id: `${Y}-prop-edit-json`,
920
- "data-testid": "reinspect-prop-edit-textarea",
921
- value: L,
922
- onChange: (e) => {
923
- R(e.currentTarget.value), B(null);
924
- },
925
- rows: 10
926
- }),
927
- z ? /* @__PURE__ */ u("p", {
928
- className: "reinspect-error",
929
- "data-testid": "reinspect-prop-edit-error",
930
- children: z
931
- }) : null,
932
- /* @__PURE__ */ d("div", {
933
- className: "reinspect-inline-controls",
934
- children: [/* @__PURE__ */ u("button", {
935
- type: "button",
936
- onClick: et,
937
- children: "apply"
938
- }), /* @__PURE__ */ u("button", {
939
- type: "button",
940
- onClick: () => {
941
- I(null), R(""), B(null);
942
- },
943
- children: "cancel"
944
- })]
945
- })
946
- ]
947
- })
948
- }), document.body) : null;
949
- if (!_e) {
950
- if (c === "manual") throw Error("useReinspect must be used within ReinspectProvider");
951
- return /* @__PURE__ */ u(p, { ...Q });
952
- }
953
- if (!X) return /* @__PURE__ */ u(p, { ...Q });
954
- let rt = Z ? /* @__PURE__ */ u(e, {
955
- id: Y,
956
- onRender: Ke,
957
- children: /* @__PURE__ */ u(p, { ...Q })
958
- }) : /* @__PURE__ */ u(p, { ...Q });
959
- return /* @__PURE__ */ d("div", {
960
- className: "reinspect-shell",
961
- "data-reinspect-component": m,
962
- "data-reinspect-active": X,
963
- "data-testid": `reinspect-shell-${m}`,
964
- style: qe,
965
- onContextMenu: Je,
966
- children: [
967
- X ? /* @__PURE__ */ d("span", {
968
- className: "reinspect-name-badge",
969
- children: [
970
- m,
971
- Fe ? " | " : "",
972
- Fe ? /* @__PURE__ */ u(Te, {
973
- instanceId: Y,
974
- counterMode: Re
975
- }) : null
976
- ]
977
- }) : null,
978
- tt ? ee(tt, document.body) : null,
979
- nt,
980
- /* @__PURE__ */ u("div", {
981
- className: "reinspect-content",
982
- "data-reinspect-content": "true",
983
- style: Be,
984
- children: rt
985
- })
986
- ]
987
- });
988
- }
989
- return h.displayName = `withReinspect(${m})`, _e(h, {
990
- source: c,
991
- scope: ne,
992
- original: p
993
- }), h;
994
- }
995
- //#endregion
996
- 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 };