bippy 0.3.13 → 0.3.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/LICENSE +1 -1
  2. package/dist/chunk-DWy1uDak.cjs +47 -0
  3. package/dist/core-BHLOH6E0.js +744 -0
  4. package/dist/core-BOYfIZ0s.d.cts +293 -0
  5. package/dist/core-C9jPbnEc.cjs +1164 -0
  6. package/dist/core-CmL25iLV.d.ts +293 -0
  7. package/dist/core.cjs +79 -286
  8. package/dist/core.d.cts +2 -221
  9. package/dist/core.d.ts +2 -221
  10. package/dist/core.js +11 -2
  11. package/dist/experiments/inspect.cjs +1109 -1400
  12. package/dist/experiments/inspect.d.cts +12 -10
  13. package/dist/experiments/inspect.d.ts +12 -10
  14. package/dist/experiments/inspect.js +1101 -1385
  15. package/dist/index-BtBZHVmz.d.cts +1 -0
  16. package/dist/index-D0E78WnU.d.ts +1 -0
  17. package/dist/index.cjs +80 -287
  18. package/dist/index.d.cts +3 -5
  19. package/dist/index.d.ts +3 -5
  20. package/dist/index.iife.js +9 -0
  21. package/dist/index.js +12 -3
  22. package/dist/jsx-dev-runtime.cjs +18 -33
  23. package/dist/jsx-dev-runtime.d.cts +7 -6
  24. package/dist/jsx-dev-runtime.d.ts +7 -6
  25. package/dist/jsx-dev-runtime.js +17 -28
  26. package/dist/jsx-runtime.cjs +16 -12
  27. package/dist/jsx-runtime.d.cts +3 -3
  28. package/dist/jsx-runtime.d.ts +3 -3
  29. package/dist/jsx-runtime.js +12 -4
  30. package/dist/source-C6Kcs2bv.cjs +2438 -0
  31. package/dist/source-CAKKlkON.js +2446 -0
  32. package/dist/source.cjs +84 -300
  33. package/dist/source.d.cts +8 -10
  34. package/dist/source.d.ts +8 -10
  35. package/dist/source.iife.js +14 -0
  36. package/dist/source.js +13 -4
  37. package/dist/src-BMy3jWE4.cjs +14 -0
  38. package/dist/{chunk-H6ZLR634.js → src-CAEV45VU.js} +5 -4
  39. package/package.json +6 -7
  40. package/dist/chunk-3DXHQSXK.js +0 -788
  41. package/dist/chunk-4N6XEHJD.cjs +0 -859
  42. package/dist/chunk-AQ674A4M.cjs +0 -38
  43. package/dist/chunk-EPG3GO3H.js +0 -35
  44. package/dist/chunk-FUZZZTS6.js +0 -2255
  45. package/dist/chunk-NKMRHYKS.cjs +0 -2259
  46. package/dist/chunk-TGUPYBYL.cjs +0 -15
  47. package/dist/index.global.js +0 -9
  48. package/dist/jsx-runtime-KafG0Y8O.d.cts +0 -72
  49. package/dist/jsx-runtime-KafG0Y8O.d.ts +0 -72
  50. package/dist/source.global.js +0 -9
@@ -1,27 +1,21 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var chunkNKMRHYKS_cjs = require('../chunk-NKMRHYKS.cjs');
6
- require('../chunk-TGUPYBYL.cjs');
7
- var chunk4N6XEHJD_cjs = require('../chunk-4N6XEHJD.cjs');
8
- require('../chunk-AQ674A4M.cjs');
9
- var React14 = require('react');
10
- var ReactDOM = require('react-dom');
11
-
12
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
13
-
14
- var React14__default = /*#__PURE__*/_interopDefault(React14);
15
- var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
16
-
17
1
  /**
18
2
  * @license bippy
19
3
  *
20
- * Copyright (c) Aiden Bai, Million Software, Inc.
4
+ * Copyright (c) Aiden Bai
21
5
  *
22
6
  * This source code is licensed under the MIT license found in the
23
7
  * LICENSE file in the root directory of this source tree.
24
8
  */
9
+ Object.defineProperty(exports, '__esModule', { value: true });
10
+ const require_chunk = require('../chunk-DWy1uDak.cjs');
11
+ const require_core = require('../core-C9jPbnEc.cjs');
12
+ require('../src-BMy3jWE4.cjs');
13
+ const require_source = require('../source-C6Kcs2bv.cjs');
14
+ const react_jsx_runtime = require_chunk.__toESM(require("react/jsx-runtime"));
15
+ const react = require_chunk.__toESM(require("react"));
16
+ const react_dom = require_chunk.__toESM(require("react-dom"));
17
+
18
+ //#region ../../node_modules/.pnpm/react-inspector@6.0.2_react@19.0.0/node_modules/react-inspector/dist/index.mjs
25
19
  var __create = Object.create;
26
20
  var __defProp = Object.defineProperty;
27
21
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -29,1430 +23,1147 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
29
23
  var __getProtoOf = Object.getPrototypeOf;
30
24
  var __hasOwnProp = Object.prototype.hasOwnProperty;
31
25
  var __commonJS = (cb, mod) => function __require() {
32
- return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
26
+ return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
33
27
  };
34
28
  var __export = (target, all) => {
35
- for (var name in all)
36
- __defProp(target, name, { get: all[name], enumerable: true });
29
+ for (var name in all) __defProp(target, name, {
30
+ get: all[name],
31
+ enumerable: true
32
+ });
37
33
  };
38
34
  var __copyProps = (to, from, except, desc) => {
39
- if (from && typeof from === "object" || typeof from === "function") {
40
- for (let key of __getOwnPropNames(from))
41
- if (!__hasOwnProp.call(to, key) && key !== except)
42
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
43
- }
44
- return to;
35
+ if (from && typeof from === "object" || typeof from === "function") {
36
+ for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
37
+ get: () => from[key],
38
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
39
+ });
40
+ }
41
+ return to;
45
42
  };
46
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(!mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
47
- var require_is_object = __commonJS({
48
- "node_modules/is-object/index.js"(exports, module) {
49
- module.exports = function isObject(x) {
50
- return typeof x === "object" && x !== null;
51
- };
52
- }
53
- });
54
- var require_is_window = __commonJS({
55
- "node_modules/is-window/index.js"(exports, module) {
56
- module.exports = function(obj) {
57
- if (obj == null) {
58
- return false;
59
- }
60
- var o = Object(obj);
61
- return o === o.window;
62
- };
63
- }
64
- });
65
- var require_is_dom = __commonJS({
66
- "node_modules/is-dom/index.js"(exports, module) {
67
- var isObject = require_is_object();
68
- var isWindow = require_is_window();
69
- function isNode(val) {
70
- if (!isObject(val) || !isWindow(window) || typeof window.Node !== "function") {
71
- return false;
72
- }
73
- return typeof val.nodeType === "number" && typeof val.nodeName === "string";
74
- }
75
- module.exports = isNode;
76
- }
77
- });
43
+ var __toESM$1 = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
44
+ value: mod,
45
+ enumerable: true
46
+ }) : target, mod));
47
+ var require_is_object = __commonJS({ "node_modules/is-object/index.js"(exports$1, module$1) {
48
+ "use strict";
49
+ module$1.exports = function isObject(x) {
50
+ return typeof x === "object" && x !== null;
51
+ };
52
+ } });
53
+ var require_is_window = __commonJS({ "node_modules/is-window/index.js"(exports$1, module$1) {
54
+ "use strict";
55
+ module$1.exports = function(obj) {
56
+ if (obj == null) return false;
57
+ var o = Object(obj);
58
+ return o === o.window;
59
+ };
60
+ } });
61
+ var require_is_dom = __commonJS({ "node_modules/is-dom/index.js"(exports$1, module$1) {
62
+ var isObject = require_is_object();
63
+ var isWindow = require_is_window();
64
+ function isNode(val) {
65
+ if (!isObject(val) || !isWindow(window) || typeof window.Node !== "function") return false;
66
+ return typeof val.nodeType === "number" && typeof val.nodeName === "string";
67
+ }
68
+ module$1.exports = isNode;
69
+ } });
78
70
  var themes_exports = {};
79
71
  __export(themes_exports, {
80
- chromeDark: () => theme,
81
- chromeLight: () => theme2
72
+ chromeDark: () => theme$1,
73
+ chromeLight: () => theme2
82
74
  });
83
- var theme = {
84
- BASE_FONT_FAMILY: "Menlo, monospace",
85
- BASE_FONT_SIZE: "11px",
86
- BASE_LINE_HEIGHT: 1.2,
87
- BASE_BACKGROUND_COLOR: "rgb(36, 36, 36)",
88
- BASE_COLOR: "rgb(213, 213, 213)",
89
- OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
90
- OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
91
- OBJECT_NAME_COLOR: "rgb(227, 110, 236)",
92
- OBJECT_VALUE_NULL_COLOR: "rgb(127, 127, 127)",
93
- OBJECT_VALUE_UNDEFINED_COLOR: "rgb(127, 127, 127)",
94
- OBJECT_VALUE_REGEXP_COLOR: "rgb(233, 63, 59)",
95
- OBJECT_VALUE_STRING_COLOR: "rgb(233, 63, 59)",
96
- OBJECT_VALUE_SYMBOL_COLOR: "rgb(233, 63, 59)",
97
- OBJECT_VALUE_NUMBER_COLOR: "hsl(252, 100%, 75%)",
98
- OBJECT_VALUE_BOOLEAN_COLOR: "hsl(252, 100%, 75%)",
99
- OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "rgb(85, 106, 242)",
100
- HTML_TAG_COLOR: "rgb(93, 176, 215)",
101
- HTML_TAGNAME_COLOR: "rgb(93, 176, 215)",
102
- HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
103
- HTML_ATTRIBUTE_NAME_COLOR: "rgb(155, 187, 220)",
104
- HTML_ATTRIBUTE_VALUE_COLOR: "rgb(242, 151, 102)",
105
- HTML_COMMENT_COLOR: "rgb(137, 137, 137)",
106
- HTML_DOCTYPE_COLOR: "rgb(192, 192, 192)",
107
- ARROW_COLOR: "rgb(145, 145, 145)",
108
- ARROW_MARGIN_RIGHT: 3,
109
- ARROW_FONT_SIZE: 12,
110
- ARROW_ANIMATION_DURATION: "0",
111
- TREENODE_FONT_FAMILY: "Menlo, monospace",
112
- TREENODE_FONT_SIZE: "11px",
113
- TREENODE_LINE_HEIGHT: 1.2,
114
- TREENODE_PADDING_LEFT: 12,
115
- TABLE_BORDER_COLOR: "rgb(85, 85, 85)",
116
- TABLE_TH_BACKGROUND_COLOR: "rgb(44, 44, 44)",
117
- TABLE_TH_HOVER_COLOR: "rgb(48, 48, 48)",
118
- TABLE_SORT_ICON_COLOR: "black",
119
- TABLE_DATA_BACKGROUND_IMAGE: "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(51, 139, 255, 0.0980392) 50%, rgba(51, 139, 255, 0.0980392))",
120
- TABLE_DATA_BACKGROUND_SIZE: "128px 32px"
75
+ var theme$1 = {
76
+ BASE_FONT_FAMILY: "Menlo, monospace",
77
+ BASE_FONT_SIZE: "11px",
78
+ BASE_LINE_HEIGHT: 1.2,
79
+ BASE_BACKGROUND_COLOR: "rgb(36, 36, 36)",
80
+ BASE_COLOR: "rgb(213, 213, 213)",
81
+ OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
82
+ OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
83
+ OBJECT_NAME_COLOR: "rgb(227, 110, 236)",
84
+ OBJECT_VALUE_NULL_COLOR: "rgb(127, 127, 127)",
85
+ OBJECT_VALUE_UNDEFINED_COLOR: "rgb(127, 127, 127)",
86
+ OBJECT_VALUE_REGEXP_COLOR: "rgb(233, 63, 59)",
87
+ OBJECT_VALUE_STRING_COLOR: "rgb(233, 63, 59)",
88
+ OBJECT_VALUE_SYMBOL_COLOR: "rgb(233, 63, 59)",
89
+ OBJECT_VALUE_NUMBER_COLOR: "hsl(252, 100%, 75%)",
90
+ OBJECT_VALUE_BOOLEAN_COLOR: "hsl(252, 100%, 75%)",
91
+ OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "rgb(85, 106, 242)",
92
+ HTML_TAG_COLOR: "rgb(93, 176, 215)",
93
+ HTML_TAGNAME_COLOR: "rgb(93, 176, 215)",
94
+ HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
95
+ HTML_ATTRIBUTE_NAME_COLOR: "rgb(155, 187, 220)",
96
+ HTML_ATTRIBUTE_VALUE_COLOR: "rgb(242, 151, 102)",
97
+ HTML_COMMENT_COLOR: "rgb(137, 137, 137)",
98
+ HTML_DOCTYPE_COLOR: "rgb(192, 192, 192)",
99
+ ARROW_COLOR: "rgb(145, 145, 145)",
100
+ ARROW_MARGIN_RIGHT: 3,
101
+ ARROW_FONT_SIZE: 12,
102
+ ARROW_ANIMATION_DURATION: "0",
103
+ TREENODE_FONT_FAMILY: "Menlo, monospace",
104
+ TREENODE_FONT_SIZE: "11px",
105
+ TREENODE_LINE_HEIGHT: 1.2,
106
+ TREENODE_PADDING_LEFT: 12,
107
+ TABLE_BORDER_COLOR: "rgb(85, 85, 85)",
108
+ TABLE_TH_BACKGROUND_COLOR: "rgb(44, 44, 44)",
109
+ TABLE_TH_HOVER_COLOR: "rgb(48, 48, 48)",
110
+ TABLE_SORT_ICON_COLOR: "black",
111
+ TABLE_DATA_BACKGROUND_IMAGE: "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(51, 139, 255, 0.0980392) 50%, rgba(51, 139, 255, 0.0980392))",
112
+ TABLE_DATA_BACKGROUND_SIZE: "128px 32px"
121
113
  };
122
114
  var theme2 = {
123
- BASE_FONT_FAMILY: "Menlo, monospace",
124
- BASE_FONT_SIZE: "11px",
125
- BASE_LINE_HEIGHT: 1.2,
126
- BASE_BACKGROUND_COLOR: "white",
127
- BASE_COLOR: "black",
128
- OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
129
- OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
130
- OBJECT_NAME_COLOR: "rgb(136, 19, 145)",
131
- OBJECT_VALUE_NULL_COLOR: "rgb(128, 128, 128)",
132
- OBJECT_VALUE_UNDEFINED_COLOR: "rgb(128, 128, 128)",
133
- OBJECT_VALUE_REGEXP_COLOR: "rgb(196, 26, 22)",
134
- OBJECT_VALUE_STRING_COLOR: "rgb(196, 26, 22)",
135
- OBJECT_VALUE_SYMBOL_COLOR: "rgb(196, 26, 22)",
136
- OBJECT_VALUE_NUMBER_COLOR: "rgb(28, 0, 207)",
137
- OBJECT_VALUE_BOOLEAN_COLOR: "rgb(28, 0, 207)",
138
- OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "rgb(13, 34, 170)",
139
- HTML_TAG_COLOR: "rgb(168, 148, 166)",
140
- HTML_TAGNAME_COLOR: "rgb(136, 18, 128)",
141
- HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
142
- HTML_ATTRIBUTE_NAME_COLOR: "rgb(153, 69, 0)",
143
- HTML_ATTRIBUTE_VALUE_COLOR: "rgb(26, 26, 166)",
144
- HTML_COMMENT_COLOR: "rgb(35, 110, 37)",
145
- HTML_DOCTYPE_COLOR: "rgb(192, 192, 192)",
146
- ARROW_COLOR: "#6e6e6e",
147
- ARROW_MARGIN_RIGHT: 3,
148
- ARROW_FONT_SIZE: 12,
149
- ARROW_ANIMATION_DURATION: "0",
150
- TREENODE_FONT_FAMILY: "Menlo, monospace",
151
- TREENODE_FONT_SIZE: "11px",
152
- TREENODE_LINE_HEIGHT: 1.2,
153
- TREENODE_PADDING_LEFT: 12,
154
- TABLE_BORDER_COLOR: "#aaa",
155
- TABLE_TH_BACKGROUND_COLOR: "#eee",
156
- TABLE_TH_HOVER_COLOR: "hsla(0, 0%, 90%, 1)",
157
- TABLE_SORT_ICON_COLOR: "#6e6e6e",
158
- TABLE_DATA_BACKGROUND_IMAGE: "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
159
- TABLE_DATA_BACKGROUND_SIZE: "128px 32px"
115
+ BASE_FONT_FAMILY: "Menlo, monospace",
116
+ BASE_FONT_SIZE: "11px",
117
+ BASE_LINE_HEIGHT: 1.2,
118
+ BASE_BACKGROUND_COLOR: "white",
119
+ BASE_COLOR: "black",
120
+ OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
121
+ OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
122
+ OBJECT_NAME_COLOR: "rgb(136, 19, 145)",
123
+ OBJECT_VALUE_NULL_COLOR: "rgb(128, 128, 128)",
124
+ OBJECT_VALUE_UNDEFINED_COLOR: "rgb(128, 128, 128)",
125
+ OBJECT_VALUE_REGEXP_COLOR: "rgb(196, 26, 22)",
126
+ OBJECT_VALUE_STRING_COLOR: "rgb(196, 26, 22)",
127
+ OBJECT_VALUE_SYMBOL_COLOR: "rgb(196, 26, 22)",
128
+ OBJECT_VALUE_NUMBER_COLOR: "rgb(28, 0, 207)",
129
+ OBJECT_VALUE_BOOLEAN_COLOR: "rgb(28, 0, 207)",
130
+ OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "rgb(13, 34, 170)",
131
+ HTML_TAG_COLOR: "rgb(168, 148, 166)",
132
+ HTML_TAGNAME_COLOR: "rgb(136, 18, 128)",
133
+ HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
134
+ HTML_ATTRIBUTE_NAME_COLOR: "rgb(153, 69, 0)",
135
+ HTML_ATTRIBUTE_VALUE_COLOR: "rgb(26, 26, 166)",
136
+ HTML_COMMENT_COLOR: "rgb(35, 110, 37)",
137
+ HTML_DOCTYPE_COLOR: "rgb(192, 192, 192)",
138
+ ARROW_COLOR: "#6e6e6e",
139
+ ARROW_MARGIN_RIGHT: 3,
140
+ ARROW_FONT_SIZE: 12,
141
+ ARROW_ANIMATION_DURATION: "0",
142
+ TREENODE_FONT_FAMILY: "Menlo, monospace",
143
+ TREENODE_FONT_SIZE: "11px",
144
+ TREENODE_LINE_HEIGHT: 1.2,
145
+ TREENODE_PADDING_LEFT: 12,
146
+ TABLE_BORDER_COLOR: "#aaa",
147
+ TABLE_TH_BACKGROUND_COLOR: "#eee",
148
+ TABLE_TH_HOVER_COLOR: "hsla(0, 0%, 90%, 1)",
149
+ TABLE_SORT_ICON_COLOR: "#6e6e6e",
150
+ TABLE_DATA_BACKGROUND_IMAGE: "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
151
+ TABLE_DATA_BACKGROUND_SIZE: "128px 32px"
160
152
  };
161
- var ExpandedPathsContext = React14.createContext([{}, () => {
162
- }]);
153
+ var ExpandedPathsContext = (0, react.createContext)([{}, () => {}]);
163
154
  var unselectable = {
164
- WebkitTouchCallout: "none",
165
- WebkitUserSelect: "none",
166
- KhtmlUserSelect: "none",
167
- MozUserSelect: "none",
168
- msUserSelect: "none",
169
- OUserSelect: "none",
170
- userSelect: "none"
155
+ WebkitTouchCallout: "none",
156
+ WebkitUserSelect: "none",
157
+ KhtmlUserSelect: "none",
158
+ MozUserSelect: "none",
159
+ msUserSelect: "none",
160
+ OUserSelect: "none",
161
+ userSelect: "none"
171
162
  };
172
- var createTheme = (theme32) => ({
173
- DOMNodePreview: {
174
- htmlOpenTag: {
175
- base: {
176
- color: theme32.HTML_TAG_COLOR
177
- },
178
- tagName: {
179
- color: theme32.HTML_TAGNAME_COLOR,
180
- textTransform: theme32.HTML_TAGNAME_TEXT_TRANSFORM
181
- },
182
- htmlAttributeName: {
183
- color: theme32.HTML_ATTRIBUTE_NAME_COLOR
184
- },
185
- htmlAttributeValue: {
186
- color: theme32.HTML_ATTRIBUTE_VALUE_COLOR
187
- }
188
- },
189
- htmlCloseTag: {
190
- base: {
191
- color: theme32.HTML_TAG_COLOR
192
- },
193
- offsetLeft: {
194
- marginLeft: -theme32.TREENODE_PADDING_LEFT
195
- },
196
- tagName: {
197
- color: theme32.HTML_TAGNAME_COLOR,
198
- textTransform: theme32.HTML_TAGNAME_TEXT_TRANSFORM
199
- }
200
- },
201
- htmlComment: {
202
- color: theme32.HTML_COMMENT_COLOR
203
- },
204
- htmlDoctype: {
205
- color: theme32.HTML_DOCTYPE_COLOR
206
- }
207
- },
208
- ObjectPreview: {
209
- objectDescription: {
210
- fontStyle: "italic"
211
- },
212
- preview: {
213
- fontStyle: "italic"
214
- },
215
- arrayMaxProperties: theme32.OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES,
216
- objectMaxProperties: theme32.OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES
217
- },
218
- ObjectName: {
219
- base: {
220
- color: theme32.OBJECT_NAME_COLOR
221
- },
222
- dimmed: {
223
- opacity: 0.6
224
- }
225
- },
226
- ObjectValue: {
227
- objectValueNull: {
228
- color: theme32.OBJECT_VALUE_NULL_COLOR
229
- },
230
- objectValueUndefined: {
231
- color: theme32.OBJECT_VALUE_UNDEFINED_COLOR
232
- },
233
- objectValueRegExp: {
234
- color: theme32.OBJECT_VALUE_REGEXP_COLOR
235
- },
236
- objectValueString: {
237
- color: theme32.OBJECT_VALUE_STRING_COLOR
238
- },
239
- objectValueSymbol: {
240
- color: theme32.OBJECT_VALUE_SYMBOL_COLOR
241
- },
242
- objectValueNumber: {
243
- color: theme32.OBJECT_VALUE_NUMBER_COLOR
244
- },
245
- objectValueBoolean: {
246
- color: theme32.OBJECT_VALUE_BOOLEAN_COLOR
247
- },
248
- objectValueFunctionPrefix: {
249
- color: theme32.OBJECT_VALUE_FUNCTION_PREFIX_COLOR,
250
- fontStyle: "italic"
251
- },
252
- objectValueFunctionName: {
253
- fontStyle: "italic"
254
- }
255
- },
256
- TreeView: {
257
- treeViewOutline: {
258
- padding: 0,
259
- margin: 0,
260
- listStyleType: "none"
261
- }
262
- },
263
- TreeNode: {
264
- treeNodeBase: {
265
- color: theme32.BASE_COLOR,
266
- backgroundColor: theme32.BASE_BACKGROUND_COLOR,
267
- lineHeight: theme32.TREENODE_LINE_HEIGHT,
268
- cursor: "default",
269
- boxSizing: "border-box",
270
- listStyle: "none",
271
- fontFamily: theme32.TREENODE_FONT_FAMILY,
272
- fontSize: theme32.TREENODE_FONT_SIZE
273
- },
274
- treeNodePreviewContainer: {},
275
- treeNodePlaceholder: {
276
- whiteSpace: "pre",
277
- fontSize: theme32.ARROW_FONT_SIZE,
278
- marginRight: theme32.ARROW_MARGIN_RIGHT,
279
- ...unselectable
280
- },
281
- treeNodeArrow: {
282
- base: {
283
- color: theme32.ARROW_COLOR,
284
- display: "inline-block",
285
- fontSize: theme32.ARROW_FONT_SIZE,
286
- marginRight: theme32.ARROW_MARGIN_RIGHT,
287
- ...parseFloat(theme32.ARROW_ANIMATION_DURATION) > 0 ? {
288
- transition: `transform ${theme32.ARROW_ANIMATION_DURATION} ease 0s`
289
- } : {},
290
- ...unselectable
291
- },
292
- expanded: {
293
- WebkitTransform: "rotateZ(90deg)",
294
- MozTransform: "rotateZ(90deg)",
295
- transform: "rotateZ(90deg)"
296
- },
297
- collapsed: {
298
- WebkitTransform: "rotateZ(0deg)",
299
- MozTransform: "rotateZ(0deg)",
300
- transform: "rotateZ(0deg)"
301
- }
302
- },
303
- treeNodeChildNodesContainer: {
304
- margin: 0,
305
- paddingLeft: theme32.TREENODE_PADDING_LEFT
306
- }
307
- },
308
- TableInspector: {
309
- base: {
310
- color: theme32.BASE_COLOR,
311
- position: "relative",
312
- border: `1px solid ${theme32.TABLE_BORDER_COLOR}`,
313
- fontFamily: theme32.BASE_FONT_FAMILY,
314
- fontSize: theme32.BASE_FONT_SIZE,
315
- lineHeight: "120%",
316
- boxSizing: "border-box",
317
- cursor: "default"
318
- }
319
- },
320
- TableInspectorHeaderContainer: {
321
- base: {
322
- top: 0,
323
- height: "17px",
324
- left: 0,
325
- right: 0,
326
- overflowX: "hidden"
327
- },
328
- table: {
329
- tableLayout: "fixed",
330
- borderSpacing: 0,
331
- borderCollapse: "separate",
332
- height: "100%",
333
- width: "100%",
334
- margin: 0
335
- }
336
- },
337
- TableInspectorDataContainer: {
338
- tr: {
339
- display: "table-row"
340
- },
341
- td: {
342
- boxSizing: "border-box",
343
- border: "none",
344
- height: "16px",
345
- verticalAlign: "top",
346
- padding: "1px 4px",
347
- WebkitUserSelect: "text",
348
- whiteSpace: "nowrap",
349
- textOverflow: "ellipsis",
350
- overflow: "hidden",
351
- lineHeight: "14px"
352
- },
353
- div: {
354
- position: "static",
355
- top: "17px",
356
- bottom: 0,
357
- overflowY: "overlay",
358
- transform: "translateZ(0)",
359
- left: 0,
360
- right: 0,
361
- overflowX: "hidden"
362
- },
363
- table: {
364
- positon: "static",
365
- left: 0,
366
- top: 0,
367
- right: 0,
368
- bottom: 0,
369
- borderTop: "0 none transparent",
370
- margin: 0,
371
- backgroundImage: theme32.TABLE_DATA_BACKGROUND_IMAGE,
372
- backgroundSize: theme32.TABLE_DATA_BACKGROUND_SIZE,
373
- tableLayout: "fixed",
374
- borderSpacing: 0,
375
- borderCollapse: "separate",
376
- width: "100%",
377
- fontSize: theme32.BASE_FONT_SIZE,
378
- lineHeight: "120%"
379
- }
380
- },
381
- TableInspectorTH: {
382
- base: {
383
- position: "relative",
384
- height: "auto",
385
- textAlign: "left",
386
- backgroundColor: theme32.TABLE_TH_BACKGROUND_COLOR,
387
- borderBottom: `1px solid ${theme32.TABLE_BORDER_COLOR}`,
388
- fontWeight: "normal",
389
- verticalAlign: "middle",
390
- padding: "0 4px",
391
- whiteSpace: "nowrap",
392
- textOverflow: "ellipsis",
393
- overflow: "hidden",
394
- lineHeight: "14px",
395
- ":hover": {
396
- backgroundColor: theme32.TABLE_TH_HOVER_COLOR
397
- }
398
- },
399
- div: {
400
- whiteSpace: "nowrap",
401
- textOverflow: "ellipsis",
402
- overflow: "hidden",
403
- fontSize: theme32.BASE_FONT_SIZE,
404
- lineHeight: "120%"
405
- }
406
- },
407
- TableInspectorLeftBorder: {
408
- none: {
409
- borderLeft: "none"
410
- },
411
- solid: {
412
- borderLeft: `1px solid ${theme32.TABLE_BORDER_COLOR}`
413
- }
414
- },
415
- TableInspectorSortIcon: {
416
- display: "block",
417
- marginRight: 3,
418
- width: 8,
419
- height: 7,
420
- marginTop: -7,
421
- color: theme32.TABLE_SORT_ICON_COLOR,
422
- fontSize: 12,
423
- ...unselectable
424
- }
163
+ var createTheme = (theme3) => ({
164
+ DOMNodePreview: {
165
+ htmlOpenTag: {
166
+ base: { color: theme3.HTML_TAG_COLOR },
167
+ tagName: {
168
+ color: theme3.HTML_TAGNAME_COLOR,
169
+ textTransform: theme3.HTML_TAGNAME_TEXT_TRANSFORM
170
+ },
171
+ htmlAttributeName: { color: theme3.HTML_ATTRIBUTE_NAME_COLOR },
172
+ htmlAttributeValue: { color: theme3.HTML_ATTRIBUTE_VALUE_COLOR }
173
+ },
174
+ htmlCloseTag: {
175
+ base: { color: theme3.HTML_TAG_COLOR },
176
+ offsetLeft: { marginLeft: -theme3.TREENODE_PADDING_LEFT },
177
+ tagName: {
178
+ color: theme3.HTML_TAGNAME_COLOR,
179
+ textTransform: theme3.HTML_TAGNAME_TEXT_TRANSFORM
180
+ }
181
+ },
182
+ htmlComment: { color: theme3.HTML_COMMENT_COLOR },
183
+ htmlDoctype: { color: theme3.HTML_DOCTYPE_COLOR }
184
+ },
185
+ ObjectPreview: {
186
+ objectDescription: { fontStyle: "italic" },
187
+ preview: { fontStyle: "italic" },
188
+ arrayMaxProperties: theme3.OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES,
189
+ objectMaxProperties: theme3.OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES
190
+ },
191
+ ObjectName: {
192
+ base: { color: theme3.OBJECT_NAME_COLOR },
193
+ dimmed: { opacity: .6 }
194
+ },
195
+ ObjectValue: {
196
+ objectValueNull: { color: theme3.OBJECT_VALUE_NULL_COLOR },
197
+ objectValueUndefined: { color: theme3.OBJECT_VALUE_UNDEFINED_COLOR },
198
+ objectValueRegExp: { color: theme3.OBJECT_VALUE_REGEXP_COLOR },
199
+ objectValueString: { color: theme3.OBJECT_VALUE_STRING_COLOR },
200
+ objectValueSymbol: { color: theme3.OBJECT_VALUE_SYMBOL_COLOR },
201
+ objectValueNumber: { color: theme3.OBJECT_VALUE_NUMBER_COLOR },
202
+ objectValueBoolean: { color: theme3.OBJECT_VALUE_BOOLEAN_COLOR },
203
+ objectValueFunctionPrefix: {
204
+ color: theme3.OBJECT_VALUE_FUNCTION_PREFIX_COLOR,
205
+ fontStyle: "italic"
206
+ },
207
+ objectValueFunctionName: { fontStyle: "italic" }
208
+ },
209
+ TreeView: { treeViewOutline: {
210
+ padding: 0,
211
+ margin: 0,
212
+ listStyleType: "none"
213
+ } },
214
+ TreeNode: {
215
+ treeNodeBase: {
216
+ color: theme3.BASE_COLOR,
217
+ backgroundColor: theme3.BASE_BACKGROUND_COLOR,
218
+ lineHeight: theme3.TREENODE_LINE_HEIGHT,
219
+ cursor: "default",
220
+ boxSizing: "border-box",
221
+ listStyle: "none",
222
+ fontFamily: theme3.TREENODE_FONT_FAMILY,
223
+ fontSize: theme3.TREENODE_FONT_SIZE
224
+ },
225
+ treeNodePreviewContainer: {},
226
+ treeNodePlaceholder: {
227
+ whiteSpace: "pre",
228
+ fontSize: theme3.ARROW_FONT_SIZE,
229
+ marginRight: theme3.ARROW_MARGIN_RIGHT,
230
+ ...unselectable
231
+ },
232
+ treeNodeArrow: {
233
+ base: {
234
+ color: theme3.ARROW_COLOR,
235
+ display: "inline-block",
236
+ fontSize: theme3.ARROW_FONT_SIZE,
237
+ marginRight: theme3.ARROW_MARGIN_RIGHT,
238
+ ...parseFloat(theme3.ARROW_ANIMATION_DURATION) > 0 ? { transition: `transform ${theme3.ARROW_ANIMATION_DURATION} ease 0s` } : {},
239
+ ...unselectable
240
+ },
241
+ expanded: {
242
+ WebkitTransform: "rotateZ(90deg)",
243
+ MozTransform: "rotateZ(90deg)",
244
+ transform: "rotateZ(90deg)"
245
+ },
246
+ collapsed: {
247
+ WebkitTransform: "rotateZ(0deg)",
248
+ MozTransform: "rotateZ(0deg)",
249
+ transform: "rotateZ(0deg)"
250
+ }
251
+ },
252
+ treeNodeChildNodesContainer: {
253
+ margin: 0,
254
+ paddingLeft: theme3.TREENODE_PADDING_LEFT
255
+ }
256
+ },
257
+ TableInspector: { base: {
258
+ color: theme3.BASE_COLOR,
259
+ position: "relative",
260
+ border: `1px solid ${theme3.TABLE_BORDER_COLOR}`,
261
+ fontFamily: theme3.BASE_FONT_FAMILY,
262
+ fontSize: theme3.BASE_FONT_SIZE,
263
+ lineHeight: "120%",
264
+ boxSizing: "border-box",
265
+ cursor: "default"
266
+ } },
267
+ TableInspectorHeaderContainer: {
268
+ base: {
269
+ top: 0,
270
+ height: "17px",
271
+ left: 0,
272
+ right: 0,
273
+ overflowX: "hidden"
274
+ },
275
+ table: {
276
+ tableLayout: "fixed",
277
+ borderSpacing: 0,
278
+ borderCollapse: "separate",
279
+ height: "100%",
280
+ width: "100%",
281
+ margin: 0
282
+ }
283
+ },
284
+ TableInspectorDataContainer: {
285
+ tr: { display: "table-row" },
286
+ td: {
287
+ boxSizing: "border-box",
288
+ border: "none",
289
+ height: "16px",
290
+ verticalAlign: "top",
291
+ padding: "1px 4px",
292
+ WebkitUserSelect: "text",
293
+ whiteSpace: "nowrap",
294
+ textOverflow: "ellipsis",
295
+ overflow: "hidden",
296
+ lineHeight: "14px"
297
+ },
298
+ div: {
299
+ position: "static",
300
+ top: "17px",
301
+ bottom: 0,
302
+ overflowY: "overlay",
303
+ transform: "translateZ(0)",
304
+ left: 0,
305
+ right: 0,
306
+ overflowX: "hidden"
307
+ },
308
+ table: {
309
+ positon: "static",
310
+ left: 0,
311
+ top: 0,
312
+ right: 0,
313
+ bottom: 0,
314
+ borderTop: "0 none transparent",
315
+ margin: 0,
316
+ backgroundImage: theme3.TABLE_DATA_BACKGROUND_IMAGE,
317
+ backgroundSize: theme3.TABLE_DATA_BACKGROUND_SIZE,
318
+ tableLayout: "fixed",
319
+ borderSpacing: 0,
320
+ borderCollapse: "separate",
321
+ width: "100%",
322
+ fontSize: theme3.BASE_FONT_SIZE,
323
+ lineHeight: "120%"
324
+ }
325
+ },
326
+ TableInspectorTH: {
327
+ base: {
328
+ position: "relative",
329
+ height: "auto",
330
+ textAlign: "left",
331
+ backgroundColor: theme3.TABLE_TH_BACKGROUND_COLOR,
332
+ borderBottom: `1px solid ${theme3.TABLE_BORDER_COLOR}`,
333
+ fontWeight: "normal",
334
+ verticalAlign: "middle",
335
+ padding: "0 4px",
336
+ whiteSpace: "nowrap",
337
+ textOverflow: "ellipsis",
338
+ overflow: "hidden",
339
+ lineHeight: "14px",
340
+ ":hover": { backgroundColor: theme3.TABLE_TH_HOVER_COLOR }
341
+ },
342
+ div: {
343
+ whiteSpace: "nowrap",
344
+ textOverflow: "ellipsis",
345
+ overflow: "hidden",
346
+ fontSize: theme3.BASE_FONT_SIZE,
347
+ lineHeight: "120%"
348
+ }
349
+ },
350
+ TableInspectorLeftBorder: {
351
+ none: { borderLeft: "none" },
352
+ solid: { borderLeft: `1px solid ${theme3.TABLE_BORDER_COLOR}` }
353
+ },
354
+ TableInspectorSortIcon: {
355
+ display: "block",
356
+ marginRight: 3,
357
+ width: 8,
358
+ height: 7,
359
+ marginTop: -7,
360
+ color: theme3.TABLE_SORT_ICON_COLOR,
361
+ fontSize: 12,
362
+ ...unselectable
363
+ }
425
364
  });
426
365
  var DEFAULT_THEME_NAME = "chromeLight";
427
- var ThemeContext = React14.createContext(createTheme(themes_exports[DEFAULT_THEME_NAME]));
366
+ var ThemeContext = (0, react.createContext)(createTheme(themes_exports[DEFAULT_THEME_NAME]));
428
367
  var useStyles = (baseStylesKey) => {
429
- const themeStyles = React14.useContext(ThemeContext);
430
- return themeStyles[baseStylesKey];
368
+ const themeStyles = (0, react.useContext)(ThemeContext);
369
+ return themeStyles[baseStylesKey];
431
370
  };
432
371
  var themeAcceptor = (WrappedComponent) => {
433
- const ThemeAcceptor = ({ theme: theme32 = DEFAULT_THEME_NAME, ...restProps }) => {
434
- const themeStyles = React14.useMemo(() => {
435
- switch (Object.prototype.toString.call(theme32)) {
436
- case "[object String]":
437
- return createTheme(themes_exports[theme32]);
438
- case "[object Object]":
439
- return createTheme(theme32);
440
- default:
441
- return createTheme(themes_exports[DEFAULT_THEME_NAME]);
442
- }
443
- }, [theme32]);
444
- return /* @__PURE__ */ React14__default.default.createElement(ThemeContext.Provider, {
445
- value: themeStyles
446
- }, /* @__PURE__ */ React14__default.default.createElement(WrappedComponent, {
447
- ...restProps
448
- }));
449
- };
450
- return ThemeAcceptor;
372
+ const ThemeAcceptor = ({ theme: theme3 = DEFAULT_THEME_NAME,...restProps }) => {
373
+ const themeStyles = (0, react.useMemo)(() => {
374
+ switch (Object.prototype.toString.call(theme3)) {
375
+ case "[object String]": return createTheme(themes_exports[theme3]);
376
+ case "[object Object]": return createTheme(theme3);
377
+ default: return createTheme(themes_exports[DEFAULT_THEME_NAME]);
378
+ }
379
+ }, [theme3]);
380
+ return /* @__PURE__ */ react.default.createElement(ThemeContext.Provider, { value: themeStyles }, /* @__PURE__ */ react.default.createElement(WrappedComponent, { ...restProps }));
381
+ };
382
+ return ThemeAcceptor;
451
383
  };
452
- var Arrow = ({ expanded, styles }) => /* @__PURE__ */ React14__default.default.createElement("span", {
453
- style: {
454
- ...styles.base,
455
- ...expanded ? styles.expanded : styles.collapsed
456
- }
457
- }, "\u25B6");
458
- var TreeNode = React14.memo((props) => {
459
- props = {
460
- expanded: true,
461
- nodeRenderer: ({ name }) => /* @__PURE__ */ React14__default.default.createElement("span", null, name),
462
- onClick: () => {
463
- },
464
- shouldShowArrow: false,
465
- shouldShowPlaceholder: true,
466
- ...props
467
- };
468
- const { expanded, onClick, children, nodeRenderer, title, shouldShowArrow, shouldShowPlaceholder } = props;
469
- const styles = useStyles("TreeNode");
470
- const NodeRenderer = nodeRenderer;
471
- return /* @__PURE__ */ React14__default.default.createElement("li", {
472
- "aria-expanded": expanded,
473
- role: "treeitem",
474
- style: styles.treeNodeBase,
475
- title
476
- }, /* @__PURE__ */ React14__default.default.createElement("div", {
477
- style: styles.treeNodePreviewContainer,
478
- onClick
479
- }, shouldShowArrow || React14.Children.count(children) > 0 ? /* @__PURE__ */ React14__default.default.createElement(Arrow, {
480
- expanded,
481
- styles: styles.treeNodeArrow
482
- }) : shouldShowPlaceholder && /* @__PURE__ */ React14__default.default.createElement("span", {
483
- style: styles.treeNodePlaceholder
484
- }, "\xA0"), /* @__PURE__ */ React14__default.default.createElement(NodeRenderer, {
485
- ...props
486
- })), /* @__PURE__ */ React14__default.default.createElement("ol", {
487
- role: "group",
488
- style: styles.treeNodeChildNodesContainer
489
- }, expanded ? children : void 0));
384
+ var Arrow = ({ expanded, styles }) => /* @__PURE__ */ react.default.createElement("span", { style: {
385
+ ...styles.base,
386
+ ...expanded ? styles.expanded : styles.collapsed
387
+ } }, "▶");
388
+ var TreeNode = (0, react.memo)((props) => {
389
+ props = {
390
+ expanded: true,
391
+ nodeRenderer: ({ name }) => /* @__PURE__ */ react.default.createElement("span", null, name),
392
+ onClick: () => {},
393
+ shouldShowArrow: false,
394
+ shouldShowPlaceholder: true,
395
+ ...props
396
+ };
397
+ const { expanded, onClick, children, nodeRenderer, title, shouldShowArrow, shouldShowPlaceholder } = props;
398
+ const styles = useStyles("TreeNode");
399
+ const NodeRenderer = nodeRenderer;
400
+ return /* @__PURE__ */ react.default.createElement("li", {
401
+ "aria-expanded": expanded,
402
+ role: "treeitem",
403
+ style: styles.treeNodeBase,
404
+ title
405
+ }, /* @__PURE__ */ react.default.createElement("div", {
406
+ style: styles.treeNodePreviewContainer,
407
+ onClick
408
+ }, shouldShowArrow || react.Children.count(children) > 0 ? /* @__PURE__ */ react.default.createElement(Arrow, {
409
+ expanded,
410
+ styles: styles.treeNodeArrow
411
+ }) : shouldShowPlaceholder && /* @__PURE__ */ react.default.createElement("span", { style: styles.treeNodePlaceholder }, "\xA0"), /* @__PURE__ */ react.default.createElement(NodeRenderer, { ...props })), /* @__PURE__ */ react.default.createElement("ol", {
412
+ role: "group",
413
+ style: styles.treeNodeChildNodesContainer
414
+ }, expanded ? children : void 0));
490
415
  });
491
416
  var DEFAULT_ROOT_PATH = "$";
492
417
  var WILDCARD = "*";
493
418
  function hasChildNodes(data, dataIterator) {
494
- return !dataIterator(data).next().done;
419
+ return !dataIterator(data).next().done;
495
420
  }
496
421
  var wildcardPathsFromLevel = (level) => {
497
- return Array.from({ length: level }, (_, i) => [DEFAULT_ROOT_PATH].concat(Array.from({ length: i }, () => "*")).join("."));
422
+ return Array.from({ length: level }, (_, i) => [DEFAULT_ROOT_PATH].concat(Array.from({ length: i }, () => "*")).join("."));
498
423
  };
499
424
  var getExpandedPaths = (data, dataIterator, expandPaths, expandLevel, prevExpandedPaths) => {
500
- const wildcardPaths = [].concat(wildcardPathsFromLevel(expandLevel)).concat(expandPaths).filter((path) => typeof path === "string");
501
- const expandedPaths = [];
502
- wildcardPaths.forEach((wildcardPath) => {
503
- const keyPaths = wildcardPath.split(".");
504
- const populatePaths = (curData, curPath, depth) => {
505
- if (depth === keyPaths.length) {
506
- expandedPaths.push(curPath);
507
- return;
508
- }
509
- const key = keyPaths[depth];
510
- if (depth === 0) {
511
- if (hasChildNodes(curData, dataIterator) && (key === DEFAULT_ROOT_PATH || key === WILDCARD)) {
512
- populatePaths(curData, DEFAULT_ROOT_PATH, depth + 1);
513
- }
514
- } else {
515
- if (key === WILDCARD) {
516
- for (const { name, data: data2 } of dataIterator(curData)) {
517
- if (hasChildNodes(data2, dataIterator)) {
518
- populatePaths(data2, `${curPath}.${name}`, depth + 1);
519
- }
520
- }
521
- } else {
522
- const value = curData[key];
523
- if (hasChildNodes(value, dataIterator)) {
524
- populatePaths(value, `${curPath}.${key}`, depth + 1);
525
- }
526
- }
527
- }
528
- };
529
- populatePaths(data, "", 0);
530
- });
531
- return expandedPaths.reduce((obj, path) => {
532
- obj[path] = true;
533
- return obj;
534
- }, { ...prevExpandedPaths });
425
+ const wildcardPaths = [].concat(wildcardPathsFromLevel(expandLevel)).concat(expandPaths).filter((path) => typeof path === "string");
426
+ const expandedPaths = [];
427
+ wildcardPaths.forEach((wildcardPath) => {
428
+ const keyPaths = wildcardPath.split(".");
429
+ const populatePaths = (curData, curPath, depth) => {
430
+ if (depth === keyPaths.length) {
431
+ expandedPaths.push(curPath);
432
+ return;
433
+ }
434
+ const key = keyPaths[depth];
435
+ if (depth === 0) {
436
+ if (hasChildNodes(curData, dataIterator) && (key === DEFAULT_ROOT_PATH || key === WILDCARD)) populatePaths(curData, DEFAULT_ROOT_PATH, depth + 1);
437
+ } else if (key === WILDCARD) {
438
+ for (const { name, data: data2 } of dataIterator(curData)) if (hasChildNodes(data2, dataIterator)) populatePaths(data2, `${curPath}.${name}`, depth + 1);
439
+ } else {
440
+ const value = curData[key];
441
+ if (hasChildNodes(value, dataIterator)) populatePaths(value, `${curPath}.${key}`, depth + 1);
442
+ }
443
+ };
444
+ populatePaths(data, "", 0);
445
+ });
446
+ return expandedPaths.reduce((obj, path) => {
447
+ obj[path] = true;
448
+ return obj;
449
+ }, { ...prevExpandedPaths });
535
450
  };
536
- var ConnectedTreeNode = React14.memo((props) => {
537
- const { data, dataIterator, path, depth, nodeRenderer } = props;
538
- const [expandedPaths, setExpandedPaths] = React14.useContext(ExpandedPathsContext);
539
- const nodeHasChildNodes = hasChildNodes(data, dataIterator);
540
- const expanded = !!expandedPaths[path];
541
- const handleClick = React14.useCallback(() => nodeHasChildNodes && setExpandedPaths((prevExpandedPaths) => ({
542
- ...prevExpandedPaths,
543
- [path]: !expanded
544
- })), [nodeHasChildNodes, setExpandedPaths, path, expanded]);
545
- return /* @__PURE__ */ React14__default.default.createElement(TreeNode, {
546
- expanded,
547
- onClick: handleClick,
548
- shouldShowArrow: nodeHasChildNodes,
549
- shouldShowPlaceholder: depth > 0,
550
- nodeRenderer,
551
- ...props
552
- }, expanded ? [...dataIterator(data)].map(({ name, data: data2, ...renderNodeProps }) => {
553
- return /* @__PURE__ */ React14__default.default.createElement(ConnectedTreeNode, {
554
- name,
555
- data: data2,
556
- depth: depth + 1,
557
- path: `${path}.${name}`,
558
- key: name,
559
- dataIterator,
560
- nodeRenderer,
561
- ...renderNodeProps
562
- });
563
- }) : null);
451
+ var ConnectedTreeNode = (0, react.memo)((props) => {
452
+ const { data, dataIterator, path, depth, nodeRenderer } = props;
453
+ const [expandedPaths, setExpandedPaths] = (0, react.useContext)(ExpandedPathsContext);
454
+ const nodeHasChildNodes = hasChildNodes(data, dataIterator);
455
+ const expanded = !!expandedPaths[path];
456
+ const handleClick = (0, react.useCallback)(() => nodeHasChildNodes && setExpandedPaths((prevExpandedPaths) => ({
457
+ ...prevExpandedPaths,
458
+ [path]: !expanded
459
+ })), [
460
+ nodeHasChildNodes,
461
+ setExpandedPaths,
462
+ path,
463
+ expanded
464
+ ]);
465
+ return /* @__PURE__ */ react.default.createElement(TreeNode, {
466
+ expanded,
467
+ onClick: handleClick,
468
+ shouldShowArrow: nodeHasChildNodes,
469
+ shouldShowPlaceholder: depth > 0,
470
+ nodeRenderer,
471
+ ...props
472
+ }, expanded ? [...dataIterator(data)].map(({ name, data: data2,...renderNodeProps }) => {
473
+ return /* @__PURE__ */ react.default.createElement(ConnectedTreeNode, {
474
+ name,
475
+ data: data2,
476
+ depth: depth + 1,
477
+ path: `${path}.${name}`,
478
+ key: name,
479
+ dataIterator,
480
+ nodeRenderer,
481
+ ...renderNodeProps
482
+ });
483
+ }) : null);
564
484
  });
565
- var TreeView = React14.memo(({ name, data, dataIterator, nodeRenderer, expandPaths, expandLevel }) => {
566
- const styles = useStyles("TreeView");
567
- const stateAndSetter = React14.useState({});
568
- const [, setExpandedPaths] = stateAndSetter;
569
- React14.useLayoutEffect(() => setExpandedPaths((prevExpandedPaths) => getExpandedPaths(data, dataIterator, expandPaths, expandLevel, prevExpandedPaths)), [data, dataIterator, expandPaths, expandLevel]);
570
- return /* @__PURE__ */ React14__default.default.createElement(ExpandedPathsContext.Provider, {
571
- value: stateAndSetter
572
- }, /* @__PURE__ */ React14__default.default.createElement("ol", {
573
- role: "tree",
574
- style: styles.treeViewOutline
575
- }, /* @__PURE__ */ React14__default.default.createElement(ConnectedTreeNode, {
576
- name,
577
- data,
578
- dataIterator,
579
- depth: 0,
580
- path: DEFAULT_ROOT_PATH,
581
- nodeRenderer
582
- })));
485
+ var TreeView = (0, react.memo)(({ name, data, dataIterator, nodeRenderer, expandPaths, expandLevel }) => {
486
+ const styles = useStyles("TreeView");
487
+ const stateAndSetter = (0, react.useState)({});
488
+ const [, setExpandedPaths] = stateAndSetter;
489
+ (0, react.useLayoutEffect)(() => setExpandedPaths((prevExpandedPaths) => getExpandedPaths(data, dataIterator, expandPaths, expandLevel, prevExpandedPaths)), [
490
+ data,
491
+ dataIterator,
492
+ expandPaths,
493
+ expandLevel
494
+ ]);
495
+ return /* @__PURE__ */ react.default.createElement(ExpandedPathsContext.Provider, { value: stateAndSetter }, /* @__PURE__ */ react.default.createElement("ol", {
496
+ role: "tree",
497
+ style: styles.treeViewOutline
498
+ }, /* @__PURE__ */ react.default.createElement(ConnectedTreeNode, {
499
+ name,
500
+ data,
501
+ dataIterator,
502
+ depth: 0,
503
+ path: DEFAULT_ROOT_PATH,
504
+ nodeRenderer
505
+ })));
583
506
  });
584
507
  var ObjectName = ({ name, dimmed = false, styles = {} }) => {
585
- const themeStyles = useStyles("ObjectName");
586
- const appliedStyles = {
587
- ...themeStyles.base,
588
- ...dimmed ? themeStyles["dimmed"] : {},
589
- ...styles
590
- };
591
- return /* @__PURE__ */ React14__default.default.createElement("span", {
592
- style: appliedStyles
593
- }, name);
508
+ const themeStyles = useStyles("ObjectName");
509
+ const appliedStyles = {
510
+ ...themeStyles.base,
511
+ ...dimmed ? themeStyles["dimmed"] : {},
512
+ ...styles
513
+ };
514
+ return /* @__PURE__ */ react.default.createElement("span", { style: appliedStyles }, name);
594
515
  };
595
516
  var ObjectValue = ({ object, styles }) => {
596
- const themeStyles = useStyles("ObjectValue");
597
- const mkStyle = (key) => ({ ...themeStyles[key], ...styles });
598
- switch (typeof object) {
599
- case "bigint":
600
- return /* @__PURE__ */ React14__default.default.createElement("span", {
601
- style: mkStyle("objectValueNumber")
602
- }, String(object), "n");
603
- case "number":
604
- return /* @__PURE__ */ React14__default.default.createElement("span", {
605
- style: mkStyle("objectValueNumber")
606
- }, String(object));
607
- case "string":
608
- return /* @__PURE__ */ React14__default.default.createElement("span", {
609
- style: mkStyle("objectValueString")
610
- }, '"', object, '"');
611
- case "boolean":
612
- return /* @__PURE__ */ React14__default.default.createElement("span", {
613
- style: mkStyle("objectValueBoolean")
614
- }, String(object));
615
- case "undefined":
616
- return /* @__PURE__ */ React14__default.default.createElement("span", {
617
- style: mkStyle("objectValueUndefined")
618
- }, "undefined");
619
- case "object":
620
- if (object === null) {
621
- return /* @__PURE__ */ React14__default.default.createElement("span", {
622
- style: mkStyle("objectValueNull")
623
- }, "null");
624
- }
625
- if (object instanceof Date) {
626
- return /* @__PURE__ */ React14__default.default.createElement("span", null, object.toString());
627
- }
628
- if (object instanceof RegExp) {
629
- return /* @__PURE__ */ React14__default.default.createElement("span", {
630
- style: mkStyle("objectValueRegExp")
631
- }, object.toString());
632
- }
633
- if (Array.isArray(object)) {
634
- return /* @__PURE__ */ React14__default.default.createElement("span", null, `Array(${object.length})`);
635
- }
636
- if (!object.constructor) {
637
- return /* @__PURE__ */ React14__default.default.createElement("span", null, "Object");
638
- }
639
- if (typeof object.constructor.isBuffer === "function" && object.constructor.isBuffer(object)) {
640
- return /* @__PURE__ */ React14__default.default.createElement("span", null, `Buffer[${object.length}]`);
641
- }
642
- return /* @__PURE__ */ React14__default.default.createElement("span", null, object.constructor.name);
643
- case "function":
644
- return /* @__PURE__ */ React14__default.default.createElement("span", null, /* @__PURE__ */ React14__default.default.createElement("span", {
645
- style: mkStyle("objectValueFunctionPrefix")
646
- }, "\u0192\xA0"), /* @__PURE__ */ React14__default.default.createElement("span", {
647
- style: mkStyle("objectValueFunctionName")
648
- }, object.name, "()"));
649
- case "symbol":
650
- return /* @__PURE__ */ React14__default.default.createElement("span", {
651
- style: mkStyle("objectValueSymbol")
652
- }, object.toString());
653
- default:
654
- return /* @__PURE__ */ React14__default.default.createElement("span", null);
655
- }
517
+ const themeStyles = useStyles("ObjectValue");
518
+ const mkStyle = (key) => ({
519
+ ...themeStyles[key],
520
+ ...styles
521
+ });
522
+ switch (typeof object) {
523
+ case "bigint": return /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueNumber") }, String(object), "n");
524
+ case "number": return /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueNumber") }, String(object));
525
+ case "string": return /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueString") }, "\"", object, "\"");
526
+ case "boolean": return /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueBoolean") }, String(object));
527
+ case "undefined": return /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueUndefined") }, "undefined");
528
+ case "object":
529
+ if (object === null) return /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueNull") }, "null");
530
+ if (object instanceof Date) return /* @__PURE__ */ react.default.createElement("span", null, object.toString());
531
+ if (object instanceof RegExp) return /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueRegExp") }, object.toString());
532
+ if (Array.isArray(object)) return /* @__PURE__ */ react.default.createElement("span", null, `Array(${object.length})`);
533
+ if (!object.constructor) return /* @__PURE__ */ react.default.createElement("span", null, "Object");
534
+ if (typeof object.constructor.isBuffer === "function" && object.constructor.isBuffer(object)) return /* @__PURE__ */ react.default.createElement("span", null, `Buffer[${object.length}]`);
535
+ return /* @__PURE__ */ react.default.createElement("span", null, object.constructor.name);
536
+ case "function": return /* @__PURE__ */ react.default.createElement("span", null, /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueFunctionPrefix") }, "ƒ\xA0"), /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueFunctionName") }, object.name, "()"));
537
+ case "symbol": return /* @__PURE__ */ react.default.createElement("span", { style: mkStyle("objectValueSymbol") }, object.toString());
538
+ default: return /* @__PURE__ */ react.default.createElement("span", null);
539
+ }
656
540
  };
657
541
  var hasOwnProperty = Object.prototype.hasOwnProperty;
658
542
  var propertyIsEnumerable = Object.prototype.propertyIsEnumerable;
659
543
  function getPropertyValue(object, propertyName) {
660
- const propertyDescriptor = Object.getOwnPropertyDescriptor(object, propertyName);
661
- if (propertyDescriptor.get) {
662
- try {
663
- return propertyDescriptor.get();
664
- } catch {
665
- return propertyDescriptor.get;
666
- }
667
- }
668
- return object[propertyName];
544
+ const propertyDescriptor = Object.getOwnPropertyDescriptor(object, propertyName);
545
+ if (propertyDescriptor.get) try {
546
+ return propertyDescriptor.get();
547
+ } catch {
548
+ return propertyDescriptor.get;
549
+ }
550
+ return object[propertyName];
669
551
  }
670
552
  function intersperse(arr, sep) {
671
- if (arr.length === 0) {
672
- return [];
673
- }
674
- return arr.slice(1).reduce((xs, x) => xs.concat([sep, x]), [arr[0]]);
553
+ if (arr.length === 0) return [];
554
+ return arr.slice(1).reduce((xs, x) => xs.concat([sep, x]), [arr[0]]);
675
555
  }
676
556
  var ObjectPreview = ({ data }) => {
677
- const styles = useStyles("ObjectPreview");
678
- const object = data;
679
- if (typeof object !== "object" || object === null || object instanceof Date || object instanceof RegExp) {
680
- return /* @__PURE__ */ React14__default.default.createElement(ObjectValue, {
681
- object
682
- });
683
- }
684
- if (Array.isArray(object)) {
685
- const maxProperties = styles.arrayMaxProperties;
686
- const previewArray = object.slice(0, maxProperties).map((element, index) => /* @__PURE__ */ React14__default.default.createElement(ObjectValue, {
687
- key: index,
688
- object: element
689
- }));
690
- if (object.length > maxProperties) {
691
- previewArray.push(/* @__PURE__ */ React14__default.default.createElement("span", {
692
- key: "ellipsis"
693
- }, "\u2026"));
694
- }
695
- const arrayLength = object.length;
696
- return /* @__PURE__ */ React14__default.default.createElement(React14__default.default.Fragment, null, /* @__PURE__ */ React14__default.default.createElement("span", {
697
- style: styles.objectDescription
698
- }, arrayLength === 0 ? `` : `(${arrayLength})\xA0`), /* @__PURE__ */ React14__default.default.createElement("span", {
699
- style: styles.preview
700
- }, "[", intersperse(previewArray, ", "), "]"));
701
- } else {
702
- const maxProperties = styles.objectMaxProperties;
703
- const propertyNodes = [];
704
- for (const propertyName in object) {
705
- if (hasOwnProperty.call(object, propertyName)) {
706
- let ellipsis;
707
- if (propertyNodes.length === maxProperties - 1 && Object.keys(object).length > maxProperties) {
708
- ellipsis = /* @__PURE__ */ React14__default.default.createElement("span", {
709
- key: "ellipsis"
710
- }, "\u2026");
711
- }
712
- const propertyValue = getPropertyValue(object, propertyName);
713
- propertyNodes.push(/* @__PURE__ */ React14__default.default.createElement("span", {
714
- key: propertyName
715
- }, /* @__PURE__ */ React14__default.default.createElement(ObjectName, {
716
- name: propertyName || `""`
717
- }), ":\xA0", /* @__PURE__ */ React14__default.default.createElement(ObjectValue, {
718
- object: propertyValue
719
- }), ellipsis));
720
- if (ellipsis)
721
- break;
722
- }
723
- }
724
- const objectConstructorName = object.constructor ? object.constructor.name : "Object";
725
- return /* @__PURE__ */ React14__default.default.createElement(React14__default.default.Fragment, null, /* @__PURE__ */ React14__default.default.createElement("span", {
726
- style: styles.objectDescription
727
- }, objectConstructorName === "Object" ? "" : `${objectConstructorName} `), /* @__PURE__ */ React14__default.default.createElement("span", {
728
- style: styles.preview
729
- }, "{", intersperse(propertyNodes, ", "), "}"));
730
- }
557
+ const styles = useStyles("ObjectPreview");
558
+ const object = data;
559
+ if (typeof object !== "object" || object === null || object instanceof Date || object instanceof RegExp) return /* @__PURE__ */ react.default.createElement(ObjectValue, { object });
560
+ if (Array.isArray(object)) {
561
+ const maxProperties = styles.arrayMaxProperties;
562
+ const previewArray = object.slice(0, maxProperties).map((element, index) => /* @__PURE__ */ react.default.createElement(ObjectValue, {
563
+ key: index,
564
+ object: element
565
+ }));
566
+ if (object.length > maxProperties) previewArray.push(/* @__PURE__ */ react.default.createElement("span", { key: "ellipsis" }, "…"));
567
+ const arrayLength = object.length;
568
+ return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("span", { style: styles.objectDescription }, arrayLength === 0 ? `` : `(${arrayLength})\xA0`), /* @__PURE__ */ react.default.createElement("span", { style: styles.preview }, "[", intersperse(previewArray, ", "), "]"));
569
+ } else {
570
+ const maxProperties = styles.objectMaxProperties;
571
+ const propertyNodes = [];
572
+ for (const propertyName in object) if (hasOwnProperty.call(object, propertyName)) {
573
+ let ellipsis;
574
+ if (propertyNodes.length === maxProperties - 1 && Object.keys(object).length > maxProperties) ellipsis = /* @__PURE__ */ react.default.createElement("span", { key: "ellipsis" }, "…");
575
+ const propertyValue = getPropertyValue(object, propertyName);
576
+ propertyNodes.push(/* @__PURE__ */ react.default.createElement("span", { key: propertyName }, /* @__PURE__ */ react.default.createElement(ObjectName, { name: propertyName || `""` }), ":\xA0", /* @__PURE__ */ react.default.createElement(ObjectValue, { object: propertyValue }), ellipsis));
577
+ if (ellipsis) break;
578
+ }
579
+ const objectConstructorName = object.constructor ? object.constructor.name : "Object";
580
+ return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("span", { style: styles.objectDescription }, objectConstructorName === "Object" ? "" : `${objectConstructorName} `), /* @__PURE__ */ react.default.createElement("span", { style: styles.preview }, "{", intersperse(propertyNodes, ", "), "}"));
581
+ }
731
582
  };
732
583
  var ObjectRootLabel = ({ name, data }) => {
733
- if (typeof name === "string") {
734
- return /* @__PURE__ */ React14__default.default.createElement("span", null, /* @__PURE__ */ React14__default.default.createElement(ObjectName, {
735
- name
736
- }), /* @__PURE__ */ React14__default.default.createElement("span", null, ": "), /* @__PURE__ */ React14__default.default.createElement(ObjectPreview, {
737
- data
738
- }));
739
- } else {
740
- return /* @__PURE__ */ React14__default.default.createElement(ObjectPreview, {
741
- data
742
- });
743
- }
584
+ if (typeof name === "string") return /* @__PURE__ */ react.default.createElement("span", null, /* @__PURE__ */ react.default.createElement(ObjectName, { name }), /* @__PURE__ */ react.default.createElement("span", null, ": "), /* @__PURE__ */ react.default.createElement(ObjectPreview, { data }));
585
+ else return /* @__PURE__ */ react.default.createElement(ObjectPreview, { data });
744
586
  };
745
587
  var ObjectLabel = ({ name, data, isNonenumerable = false }) => {
746
- const object = data;
747
- return /* @__PURE__ */ React14__default.default.createElement("span", null, typeof name === "string" ? /* @__PURE__ */ React14__default.default.createElement(ObjectName, {
748
- name,
749
- dimmed: isNonenumerable
750
- }) : /* @__PURE__ */ React14__default.default.createElement(ObjectPreview, {
751
- data: name
752
- }), /* @__PURE__ */ React14__default.default.createElement("span", null, ": "), /* @__PURE__ */ React14__default.default.createElement(ObjectValue, {
753
- object
754
- }));
588
+ const object = data;
589
+ return /* @__PURE__ */ react.default.createElement("span", null, typeof name === "string" ? /* @__PURE__ */ react.default.createElement(ObjectName, {
590
+ name,
591
+ dimmed: isNonenumerable
592
+ }) : /* @__PURE__ */ react.default.createElement(ObjectPreview, { data: name }), /* @__PURE__ */ react.default.createElement("span", null, ": "), /* @__PURE__ */ react.default.createElement(ObjectValue, { object }));
755
593
  };
756
594
  var createIterator = (showNonenumerable, sortObjectKeys) => {
757
- const objectIterator = function* (data) {
758
- const shouldIterate = typeof data === "object" && data !== null || typeof data === "function";
759
- if (!shouldIterate)
760
- return;
761
- const dataIsArray = Array.isArray(data);
762
- if (!dataIsArray && data[Symbol.iterator]) {
763
- let i = 0;
764
- for (const entry of data) {
765
- if (Array.isArray(entry) && entry.length === 2) {
766
- const [k, v] = entry;
767
- yield {
768
- name: k,
769
- data: v
770
- };
771
- } else {
772
- yield {
773
- name: i.toString(),
774
- data: entry
775
- };
776
- }
777
- i++;
778
- }
779
- } else {
780
- const keys = Object.getOwnPropertyNames(data);
781
- if (sortObjectKeys === true && !dataIsArray) {
782
- keys.sort();
783
- } else if (typeof sortObjectKeys === "function") {
784
- keys.sort(sortObjectKeys);
785
- }
786
- for (const propertyName of keys) {
787
- if (propertyIsEnumerable.call(data, propertyName)) {
788
- const propertyValue = getPropertyValue(data, propertyName);
789
- yield {
790
- name: propertyName || `""`,
791
- data: propertyValue
792
- };
793
- } else if (showNonenumerable) {
794
- let propertyValue;
795
- try {
796
- propertyValue = getPropertyValue(data, propertyName);
797
- } catch (e) {
798
- }
799
- if (propertyValue !== void 0) {
800
- yield {
801
- name: propertyName,
802
- data: propertyValue,
803
- isNonenumerable: true
804
- };
805
- }
806
- }
807
- }
808
- if (showNonenumerable && data !== Object.prototype) {
809
- yield {
810
- name: "__proto__",
811
- data: Object.getPrototypeOf(data),
812
- isNonenumerable: true
813
- };
814
- }
815
- }
816
- };
817
- return objectIterator;
595
+ const objectIterator = function* (data) {
596
+ const shouldIterate = typeof data === "object" && data !== null || typeof data === "function";
597
+ if (!shouldIterate) return;
598
+ const dataIsArray = Array.isArray(data);
599
+ if (!dataIsArray && data[Symbol.iterator]) {
600
+ let i = 0;
601
+ for (const entry of data) {
602
+ if (Array.isArray(entry) && entry.length === 2) {
603
+ const [k, v] = entry;
604
+ yield {
605
+ name: k,
606
+ data: v
607
+ };
608
+ } else yield {
609
+ name: i.toString(),
610
+ data: entry
611
+ };
612
+ i++;
613
+ }
614
+ } else {
615
+ const keys = Object.getOwnPropertyNames(data);
616
+ if (sortObjectKeys === true && !dataIsArray) keys.sort();
617
+ else if (typeof sortObjectKeys === "function") keys.sort(sortObjectKeys);
618
+ for (const propertyName of keys) if (propertyIsEnumerable.call(data, propertyName)) {
619
+ const propertyValue = getPropertyValue(data, propertyName);
620
+ yield {
621
+ name: propertyName || `""`,
622
+ data: propertyValue
623
+ };
624
+ } else if (showNonenumerable) {
625
+ let propertyValue;
626
+ try {
627
+ propertyValue = getPropertyValue(data, propertyName);
628
+ } catch (e) {}
629
+ if (propertyValue !== void 0) yield {
630
+ name: propertyName,
631
+ data: propertyValue,
632
+ isNonenumerable: true
633
+ };
634
+ }
635
+ if (showNonenumerable && data !== Object.prototype) yield {
636
+ name: "__proto__",
637
+ data: Object.getPrototypeOf(data),
638
+ isNonenumerable: true
639
+ };
640
+ }
641
+ };
642
+ return objectIterator;
818
643
  };
819
- var defaultNodeRenderer = ({ depth, name, data, isNonenumerable }) => depth === 0 ? /* @__PURE__ */ React14__default.default.createElement(ObjectRootLabel, {
820
- name,
821
- data
822
- }) : /* @__PURE__ */ React14__default.default.createElement(ObjectLabel, {
823
- name,
824
- data,
825
- isNonenumerable
644
+ var defaultNodeRenderer = ({ depth, name, data, isNonenumerable }) => depth === 0 ? /* @__PURE__ */ react.default.createElement(ObjectRootLabel, {
645
+ name,
646
+ data
647
+ }) : /* @__PURE__ */ react.default.createElement(ObjectLabel, {
648
+ name,
649
+ data,
650
+ isNonenumerable
826
651
  });
827
- var ObjectInspector = ({ showNonenumerable = false, sortObjectKeys, nodeRenderer, ...treeViewProps }) => {
828
- const dataIterator = createIterator(showNonenumerable, sortObjectKeys);
829
- const renderer = nodeRenderer ? nodeRenderer : defaultNodeRenderer;
830
- return /* @__PURE__ */ React14__default.default.createElement(TreeView, {
831
- nodeRenderer: renderer,
832
- dataIterator,
833
- ...treeViewProps
834
- });
652
+ var ObjectInspector = ({ showNonenumerable = false, sortObjectKeys, nodeRenderer,...treeViewProps }) => {
653
+ const dataIterator = createIterator(showNonenumerable, sortObjectKeys);
654
+ const renderer = nodeRenderer ? nodeRenderer : defaultNodeRenderer;
655
+ return /* @__PURE__ */ react.default.createElement(TreeView, {
656
+ nodeRenderer: renderer,
657
+ dataIterator,
658
+ ...treeViewProps
659
+ });
835
660
  };
836
661
  var themedObjectInspector = themeAcceptor(ObjectInspector);
837
662
  function getHeaders(data) {
838
- if (typeof data === "object") {
839
- let rowHeaders = [];
840
- if (Array.isArray(data)) {
841
- const nRows = data.length;
842
- rowHeaders = [...Array(nRows).keys()];
843
- } else if (data !== null) {
844
- rowHeaders = Object.keys(data);
845
- }
846
- const colHeaders = rowHeaders.reduce((colHeaders2, rowHeader) => {
847
- const row = data[rowHeader];
848
- if (typeof row === "object" && row !== null) {
849
- const cols = Object.keys(row);
850
- cols.reduce((xs, x) => {
851
- if (!xs.includes(x)) {
852
- xs.push(x);
853
- }
854
- return xs;
855
- }, colHeaders2);
856
- }
857
- return colHeaders2;
858
- }, []);
859
- return {
860
- rowHeaders,
861
- colHeaders
862
- };
863
- }
864
- return void 0;
663
+ if (typeof data === "object") {
664
+ let rowHeaders = [];
665
+ if (Array.isArray(data)) {
666
+ const nRows = data.length;
667
+ rowHeaders = [...Array(nRows).keys()];
668
+ } else if (data !== null) rowHeaders = Object.keys(data);
669
+ const colHeaders = rowHeaders.reduce((colHeaders2, rowHeader) => {
670
+ const row = data[rowHeader];
671
+ if (typeof row === "object" && row !== null) {
672
+ const cols = Object.keys(row);
673
+ cols.reduce((xs, x) => {
674
+ if (!xs.includes(x)) xs.push(x);
675
+ return xs;
676
+ }, colHeaders2);
677
+ }
678
+ return colHeaders2;
679
+ }, []);
680
+ return {
681
+ rowHeaders,
682
+ colHeaders
683
+ };
684
+ }
685
+ return void 0;
865
686
  }
866
687
  var DataContainer = ({ rows, columns, rowsData }) => {
867
- const styles = useStyles("TableInspectorDataContainer");
868
- const borderStyles = useStyles("TableInspectorLeftBorder");
869
- return /* @__PURE__ */ React14__default.default.createElement("div", {
870
- style: styles.div
871
- }, /* @__PURE__ */ React14__default.default.createElement("table", {
872
- style: styles.table
873
- }, /* @__PURE__ */ React14__default.default.createElement("colgroup", null), /* @__PURE__ */ React14__default.default.createElement("tbody", null, rows.map((row, i) => /* @__PURE__ */ React14__default.default.createElement("tr", {
874
- key: row,
875
- style: styles.tr
876
- }, /* @__PURE__ */ React14__default.default.createElement("td", {
877
- style: { ...styles.td, ...borderStyles.none }
878
- }, row), columns.map((column) => {
879
- const rowData = rowsData[i];
880
- if (typeof rowData === "object" && rowData !== null && hasOwnProperty.call(rowData, column)) {
881
- return /* @__PURE__ */ React14__default.default.createElement("td", {
882
- key: column,
883
- style: { ...styles.td, ...borderStyles.solid }
884
- }, /* @__PURE__ */ React14__default.default.createElement(ObjectValue, {
885
- object: rowData[column]
886
- }));
887
- } else {
888
- return /* @__PURE__ */ React14__default.default.createElement("td", {
889
- key: column,
890
- style: { ...styles.td, ...borderStyles.solid }
891
- });
892
- }
893
- }))))));
688
+ const styles = useStyles("TableInspectorDataContainer");
689
+ const borderStyles = useStyles("TableInspectorLeftBorder");
690
+ return /* @__PURE__ */ react.default.createElement("div", { style: styles.div }, /* @__PURE__ */ react.default.createElement("table", { style: styles.table }, /* @__PURE__ */ react.default.createElement("colgroup", null), /* @__PURE__ */ react.default.createElement("tbody", null, rows.map((row, i) => /* @__PURE__ */ react.default.createElement("tr", {
691
+ key: row,
692
+ style: styles.tr
693
+ }, /* @__PURE__ */ react.default.createElement("td", { style: {
694
+ ...styles.td,
695
+ ...borderStyles.none
696
+ } }, row), columns.map((column) => {
697
+ const rowData = rowsData[i];
698
+ if (typeof rowData === "object" && rowData !== null && hasOwnProperty.call(rowData, column)) return /* @__PURE__ */ react.default.createElement("td", {
699
+ key: column,
700
+ style: {
701
+ ...styles.td,
702
+ ...borderStyles.solid
703
+ }
704
+ }, /* @__PURE__ */ react.default.createElement(ObjectValue, { object: rowData[column] }));
705
+ else return /* @__PURE__ */ react.default.createElement("td", {
706
+ key: column,
707
+ style: {
708
+ ...styles.td,
709
+ ...borderStyles.solid
710
+ }
711
+ });
712
+ }))))));
894
713
  };
895
- var SortIconContainer = (props) => /* @__PURE__ */ React14__default.default.createElement("div", {
896
- style: {
897
- position: "absolute",
898
- top: 1,
899
- right: 0,
900
- bottom: 1,
901
- display: "flex",
902
- alignItems: "center"
903
- }
904
- }, props.children);
714
+ var SortIconContainer = (props) => /* @__PURE__ */ react.default.createElement("div", { style: {
715
+ position: "absolute",
716
+ top: 1,
717
+ right: 0,
718
+ bottom: 1,
719
+ display: "flex",
720
+ alignItems: "center"
721
+ } }, props.children);
905
722
  var SortIcon = ({ sortAscending }) => {
906
- const styles = useStyles("TableInspectorSortIcon");
907
- const glyph = sortAscending ? "\u25B2" : "\u25BC";
908
- return /* @__PURE__ */ React14__default.default.createElement("div", {
909
- style: styles
910
- }, glyph);
723
+ const styles = useStyles("TableInspectorSortIcon");
724
+ const glyph = sortAscending ? "" : "";
725
+ return /* @__PURE__ */ react.default.createElement("div", { style: styles }, glyph);
911
726
  };
912
- var TH = ({
913
- sortAscending = false,
914
- sorted = false,
915
- onClick = void 0,
916
- borderStyle = {},
917
- children,
918
- ...thProps
919
- }) => {
920
- const styles = useStyles("TableInspectorTH");
921
- const [hovered, setHovered] = React14.useState(false);
922
- const handleMouseEnter = React14.useCallback(() => setHovered(true), []);
923
- const handleMouseLeave = React14.useCallback(() => setHovered(false), []);
924
- return /* @__PURE__ */ React14__default.default.createElement("th", {
925
- ...thProps,
926
- style: {
927
- ...styles.base,
928
- ...borderStyle,
929
- ...hovered ? styles.base[":hover"] : {}
930
- },
931
- onMouseEnter: handleMouseEnter,
932
- onMouseLeave: handleMouseLeave,
933
- onClick
934
- }, /* @__PURE__ */ React14__default.default.createElement("div", {
935
- style: styles.div
936
- }, children), sorted && /* @__PURE__ */ React14__default.default.createElement(SortIconContainer, null, /* @__PURE__ */ React14__default.default.createElement(SortIcon, {
937
- sortAscending
938
- })));
727
+ var TH = ({ sortAscending = false, sorted = false, onClick = void 0, borderStyle = {}, children,...thProps }) => {
728
+ const styles = useStyles("TableInspectorTH");
729
+ const [hovered, setHovered] = (0, react.useState)(false);
730
+ const handleMouseEnter = (0, react.useCallback)(() => setHovered(true), []);
731
+ const handleMouseLeave = (0, react.useCallback)(() => setHovered(false), []);
732
+ return /* @__PURE__ */ react.default.createElement("th", {
733
+ ...thProps,
734
+ style: {
735
+ ...styles.base,
736
+ ...borderStyle,
737
+ ...hovered ? styles.base[":hover"] : {}
738
+ },
739
+ onMouseEnter: handleMouseEnter,
740
+ onMouseLeave: handleMouseLeave,
741
+ onClick
742
+ }, /* @__PURE__ */ react.default.createElement("div", { style: styles.div }, children), sorted && /* @__PURE__ */ react.default.createElement(SortIconContainer, null, /* @__PURE__ */ react.default.createElement(SortIcon, { sortAscending })));
939
743
  };
940
- var HeaderContainer = ({
941
- indexColumnText = "(index)",
942
- columns = [],
943
- sorted,
944
- sortIndexColumn,
945
- sortColumn,
946
- sortAscending,
947
- onTHClick,
948
- onIndexTHClick
949
- }) => {
950
- const styles = useStyles("TableInspectorHeaderContainer");
951
- const borderStyles = useStyles("TableInspectorLeftBorder");
952
- return /* @__PURE__ */ React14__default.default.createElement("div", {
953
- style: styles.base
954
- }, /* @__PURE__ */ React14__default.default.createElement("table", {
955
- style: styles.table
956
- }, /* @__PURE__ */ React14__default.default.createElement("tbody", null, /* @__PURE__ */ React14__default.default.createElement("tr", null, /* @__PURE__ */ React14__default.default.createElement(TH, {
957
- borderStyle: borderStyles.none,
958
- sorted: sorted && sortIndexColumn,
959
- sortAscending,
960
- onClick: onIndexTHClick
961
- }, indexColumnText), columns.map((column) => /* @__PURE__ */ React14__default.default.createElement(TH, {
962
- borderStyle: borderStyles.solid,
963
- key: column,
964
- sorted: sorted && sortColumn === column,
965
- sortAscending,
966
- onClick: onTHClick.bind(null, column)
967
- }, column))))));
744
+ var HeaderContainer = ({ indexColumnText = "(index)", columns = [], sorted, sortIndexColumn, sortColumn, sortAscending, onTHClick, onIndexTHClick }) => {
745
+ const styles = useStyles("TableInspectorHeaderContainer");
746
+ const borderStyles = useStyles("TableInspectorLeftBorder");
747
+ return /* @__PURE__ */ react.default.createElement("div", { style: styles.base }, /* @__PURE__ */ react.default.createElement("table", { style: styles.table }, /* @__PURE__ */ react.default.createElement("tbody", null, /* @__PURE__ */ react.default.createElement("tr", null, /* @__PURE__ */ react.default.createElement(TH, {
748
+ borderStyle: borderStyles.none,
749
+ sorted: sorted && sortIndexColumn,
750
+ sortAscending,
751
+ onClick: onIndexTHClick
752
+ }, indexColumnText), columns.map((column) => /* @__PURE__ */ react.default.createElement(TH, {
753
+ borderStyle: borderStyles.solid,
754
+ key: column,
755
+ sorted: sorted && sortColumn === column,
756
+ sortAscending,
757
+ onClick: onTHClick.bind(null, column)
758
+ }, column))))));
968
759
  };
969
- var TableInspector = ({
970
- data,
971
- columns
972
- }) => {
973
- const styles = useStyles("TableInspector");
974
- const [{ sorted, sortIndexColumn, sortColumn, sortAscending }, setState] = React14.useState({
975
- sorted: false,
976
- sortIndexColumn: false,
977
- sortColumn: void 0,
978
- sortAscending: false
979
- });
980
- const handleIndexTHClick = React14.useCallback(() => {
981
- setState(({ sortIndexColumn: sortIndexColumn2, sortAscending: sortAscending2 }) => ({
982
- sorted: true,
983
- sortIndexColumn: true,
984
- sortColumn: void 0,
985
- sortAscending: sortIndexColumn2 ? !sortAscending2 : true
986
- }));
987
- }, []);
988
- const handleTHClick = React14.useCallback((col) => {
989
- setState(({ sortColumn: sortColumn2, sortAscending: sortAscending2 }) => ({
990
- sorted: true,
991
- sortIndexColumn: false,
992
- sortColumn: col,
993
- sortAscending: col === sortColumn2 ? !sortAscending2 : true
994
- }));
995
- }, []);
996
- if (typeof data !== "object" || data === null) {
997
- return /* @__PURE__ */ React14__default.default.createElement("div", null);
998
- }
999
- let { rowHeaders, colHeaders } = getHeaders(data);
1000
- if (columns !== void 0) {
1001
- colHeaders = columns;
1002
- }
1003
- let rowsData = rowHeaders.map((rowHeader) => data[rowHeader]);
1004
- let columnDataWithRowIndexes;
1005
- if (sortColumn !== void 0) {
1006
- columnDataWithRowIndexes = rowsData.map((rowData, index) => {
1007
- if (typeof rowData === "object" && rowData !== null) {
1008
- const columnData = rowData[sortColumn];
1009
- return [columnData, index];
1010
- }
1011
- return [void 0, index];
1012
- });
1013
- } else {
1014
- if (sortIndexColumn) {
1015
- columnDataWithRowIndexes = rowHeaders.map((rowData, index) => {
1016
- const columnData = rowHeaders[index];
1017
- return [columnData, index];
1018
- });
1019
- }
1020
- }
1021
- if (columnDataWithRowIndexes !== void 0) {
1022
- const comparator = (mapper, ascending) => {
1023
- return (a, b) => {
1024
- const v1 = mapper(a);
1025
- const v2 = mapper(b);
1026
- const type1 = typeof v1;
1027
- const type2 = typeof v2;
1028
- const lt = (v12, v22) => {
1029
- if (v12 < v22) {
1030
- return -1;
1031
- } else if (v12 > v22) {
1032
- return 1;
1033
- } else {
1034
- return 0;
1035
- }
1036
- };
1037
- let result;
1038
- if (type1 === type2) {
1039
- result = lt(v1, v2);
1040
- } else {
1041
- const order = {
1042
- string: 0,
1043
- number: 1,
1044
- object: 2,
1045
- symbol: 3,
1046
- boolean: 4,
1047
- undefined: 5,
1048
- function: 6
1049
- };
1050
- result = lt(order[type1], order[type2]);
1051
- }
1052
- if (!ascending)
1053
- result = -result;
1054
- return result;
1055
- };
1056
- };
1057
- const sortedRowIndexes = columnDataWithRowIndexes.sort(comparator((item) => item[0], sortAscending)).map((item) => item[1]);
1058
- rowHeaders = sortedRowIndexes.map((i) => rowHeaders[i]);
1059
- rowsData = sortedRowIndexes.map((i) => rowsData[i]);
1060
- }
1061
- return /* @__PURE__ */ React14__default.default.createElement("div", {
1062
- style: styles.base
1063
- }, /* @__PURE__ */ React14__default.default.createElement(HeaderContainer, {
1064
- columns: colHeaders,
1065
- sorted,
1066
- sortIndexColumn,
1067
- sortColumn,
1068
- sortAscending,
1069
- onTHClick: handleTHClick,
1070
- onIndexTHClick: handleIndexTHClick
1071
- }), /* @__PURE__ */ React14__default.default.createElement(DataContainer, {
1072
- rows: rowHeaders,
1073
- columns: colHeaders,
1074
- rowsData
1075
- }));
760
+ var TableInspector = ({ data, columns }) => {
761
+ const styles = useStyles("TableInspector");
762
+ const [{ sorted, sortIndexColumn, sortColumn, sortAscending }, setState] = (0, react.useState)({
763
+ sorted: false,
764
+ sortIndexColumn: false,
765
+ sortColumn: void 0,
766
+ sortAscending: false
767
+ });
768
+ const handleIndexTHClick = (0, react.useCallback)(() => {
769
+ setState(({ sortIndexColumn: sortIndexColumn2, sortAscending: sortAscending2 }) => ({
770
+ sorted: true,
771
+ sortIndexColumn: true,
772
+ sortColumn: void 0,
773
+ sortAscending: sortIndexColumn2 ? !sortAscending2 : true
774
+ }));
775
+ }, []);
776
+ const handleTHClick = (0, react.useCallback)((col) => {
777
+ setState(({ sortColumn: sortColumn2, sortAscending: sortAscending2 }) => ({
778
+ sorted: true,
779
+ sortIndexColumn: false,
780
+ sortColumn: col,
781
+ sortAscending: col === sortColumn2 ? !sortAscending2 : true
782
+ }));
783
+ }, []);
784
+ if (typeof data !== "object" || data === null) return /* @__PURE__ */ react.default.createElement("div", null);
785
+ let { rowHeaders, colHeaders } = getHeaders(data);
786
+ if (columns !== void 0) colHeaders = columns;
787
+ let rowsData = rowHeaders.map((rowHeader) => data[rowHeader]);
788
+ let columnDataWithRowIndexes;
789
+ if (sortColumn !== void 0) columnDataWithRowIndexes = rowsData.map((rowData, index) => {
790
+ if (typeof rowData === "object" && rowData !== null) {
791
+ const columnData = rowData[sortColumn];
792
+ return [columnData, index];
793
+ }
794
+ return [void 0, index];
795
+ });
796
+ else if (sortIndexColumn) columnDataWithRowIndexes = rowHeaders.map((rowData, index) => {
797
+ const columnData = rowHeaders[index];
798
+ return [columnData, index];
799
+ });
800
+ if (columnDataWithRowIndexes !== void 0) {
801
+ const comparator = (mapper, ascending) => {
802
+ return (a, b) => {
803
+ const v1 = mapper(a);
804
+ const v2 = mapper(b);
805
+ const type1 = typeof v1;
806
+ const type2 = typeof v2;
807
+ const lt = (v12, v22) => {
808
+ if (v12 < v22) return -1;
809
+ else if (v12 > v22) return 1;
810
+ else return 0;
811
+ };
812
+ let result;
813
+ if (type1 === type2) result = lt(v1, v2);
814
+ else {
815
+ const order = {
816
+ string: 0,
817
+ number: 1,
818
+ object: 2,
819
+ symbol: 3,
820
+ boolean: 4,
821
+ undefined: 5,
822
+ function: 6
823
+ };
824
+ result = lt(order[type1], order[type2]);
825
+ }
826
+ if (!ascending) result = -result;
827
+ return result;
828
+ };
829
+ };
830
+ const sortedRowIndexes = columnDataWithRowIndexes.sort(comparator((item) => item[0], sortAscending)).map((item) => item[1]);
831
+ rowHeaders = sortedRowIndexes.map((i) => rowHeaders[i]);
832
+ rowsData = sortedRowIndexes.map((i) => rowsData[i]);
833
+ }
834
+ return /* @__PURE__ */ react.default.createElement("div", { style: styles.base }, /* @__PURE__ */ react.default.createElement(HeaderContainer, {
835
+ columns: colHeaders,
836
+ sorted,
837
+ sortIndexColumn,
838
+ sortColumn,
839
+ sortAscending,
840
+ onTHClick: handleTHClick,
841
+ onIndexTHClick: handleIndexTHClick
842
+ }), /* @__PURE__ */ react.default.createElement(DataContainer, {
843
+ rows: rowHeaders,
844
+ columns: colHeaders,
845
+ rowsData
846
+ }));
1076
847
  };
1077
848
  var themedTableInspector = themeAcceptor(TableInspector);
1078
849
  var TEXT_NODE_MAX_INLINE_CHARS = 80;
1079
850
  var shouldInline = (data) => data.childNodes.length === 0 || data.childNodes.length === 1 && data.childNodes[0].nodeType === Node.TEXT_NODE && data.textContent.length < TEXT_NODE_MAX_INLINE_CHARS;
1080
851
  var OpenTag = ({ tagName, attributes, styles }) => {
1081
- return /* @__PURE__ */ React14__default.default.createElement("span", {
1082
- style: styles.base
1083
- }, "<", /* @__PURE__ */ React14__default.default.createElement("span", {
1084
- style: styles.tagName
1085
- }, tagName), (() => {
1086
- if (attributes) {
1087
- const attributeNodes = [];
1088
- for (let i = 0; i < attributes.length; i++) {
1089
- const attribute = attributes[i];
1090
- attributeNodes.push(/* @__PURE__ */ React14__default.default.createElement("span", {
1091
- key: i
1092
- }, " ", /* @__PURE__ */ React14__default.default.createElement("span", {
1093
- style: styles.htmlAttributeName
1094
- }, attribute.name), '="', /* @__PURE__ */ React14__default.default.createElement("span", {
1095
- style: styles.htmlAttributeValue
1096
- }, attribute.value), '"'));
1097
- }
1098
- return attributeNodes;
1099
- }
1100
- })(), ">");
852
+ return /* @__PURE__ */ react.default.createElement("span", { style: styles.base }, "<", /* @__PURE__ */ react.default.createElement("span", { style: styles.tagName }, tagName), (() => {
853
+ if (attributes) {
854
+ const attributeNodes = [];
855
+ for (let i = 0; i < attributes.length; i++) {
856
+ const attribute = attributes[i];
857
+ attributeNodes.push(/* @__PURE__ */ react.default.createElement("span", { key: i }, " ", /* @__PURE__ */ react.default.createElement("span", { style: styles.htmlAttributeName }, attribute.name), "=\"", /* @__PURE__ */ react.default.createElement("span", { style: styles.htmlAttributeValue }, attribute.value), "\""));
858
+ }
859
+ return attributeNodes;
860
+ }
861
+ })(), ">");
1101
862
  };
1102
- var CloseTag = ({ tagName, isChildNode = false, styles }) => /* @__PURE__ */ React14__default.default.createElement("span", {
1103
- style: Object.assign({}, styles.base, isChildNode && styles.offsetLeft)
1104
- }, "</", /* @__PURE__ */ React14__default.default.createElement("span", {
1105
- style: styles.tagName
1106
- }, tagName), ">");
863
+ var CloseTag = ({ tagName, isChildNode = false, styles }) => /* @__PURE__ */ react.default.createElement("span", { style: Object.assign({}, styles.base, isChildNode && styles.offsetLeft) }, "</", /* @__PURE__ */ react.default.createElement("span", { style: styles.tagName }, tagName), ">");
1107
864
  var nameByNodeType = {
1108
- 1: "ELEMENT_NODE",
1109
- 3: "TEXT_NODE",
1110
- 7: "PROCESSING_INSTRUCTION_NODE",
1111
- 8: "COMMENT_NODE",
1112
- 9: "DOCUMENT_NODE",
1113
- 10: "DOCUMENT_TYPE_NODE",
1114
- 11: "DOCUMENT_FRAGMENT_NODE"
865
+ 1: "ELEMENT_NODE",
866
+ 3: "TEXT_NODE",
867
+ 7: "PROCESSING_INSTRUCTION_NODE",
868
+ 8: "COMMENT_NODE",
869
+ 9: "DOCUMENT_NODE",
870
+ 10: "DOCUMENT_TYPE_NODE",
871
+ 11: "DOCUMENT_FRAGMENT_NODE"
1115
872
  };
1116
873
  var DOMNodePreview = ({ isCloseTag, data, expanded }) => {
1117
- const styles = useStyles("DOMNodePreview");
1118
- if (isCloseTag) {
1119
- return /* @__PURE__ */ React14__default.default.createElement(CloseTag, {
1120
- styles: styles.htmlCloseTag,
1121
- isChildNode: true,
1122
- tagName: data.tagName
1123
- });
1124
- }
1125
- switch (data.nodeType) {
1126
- case Node.ELEMENT_NODE:
1127
- return /* @__PURE__ */ React14__default.default.createElement("span", null, /* @__PURE__ */ React14__default.default.createElement(OpenTag, {
1128
- tagName: data.tagName,
1129
- attributes: data.attributes,
1130
- styles: styles.htmlOpenTag
1131
- }), shouldInline(data) ? data.textContent : !expanded && "\u2026", !expanded && /* @__PURE__ */ React14__default.default.createElement(CloseTag, {
1132
- tagName: data.tagName,
1133
- styles: styles.htmlCloseTag
1134
- }));
1135
- case Node.TEXT_NODE:
1136
- return /* @__PURE__ */ React14__default.default.createElement("span", null, data.textContent);
1137
- case Node.CDATA_SECTION_NODE:
1138
- return /* @__PURE__ */ React14__default.default.createElement("span", null, "<![CDATA[" + data.textContent + "]]>");
1139
- case Node.COMMENT_NODE:
1140
- return /* @__PURE__ */ React14__default.default.createElement("span", {
1141
- style: styles.htmlComment
1142
- }, "<!--", data.textContent, "-->");
1143
- case Node.PROCESSING_INSTRUCTION_NODE:
1144
- return /* @__PURE__ */ React14__default.default.createElement("span", null, data.nodeName);
1145
- case Node.DOCUMENT_TYPE_NODE:
1146
- return /* @__PURE__ */ React14__default.default.createElement("span", {
1147
- style: styles.htmlDoctype
1148
- }, "<!DOCTYPE ", data.name, data.publicId ? ` PUBLIC "${data.publicId}"` : "", !data.publicId && data.systemId ? " SYSTEM" : "", data.systemId ? ` "${data.systemId}"` : "", ">");
1149
- case Node.DOCUMENT_NODE:
1150
- return /* @__PURE__ */ React14__default.default.createElement("span", null, data.nodeName);
1151
- case Node.DOCUMENT_FRAGMENT_NODE:
1152
- return /* @__PURE__ */ React14__default.default.createElement("span", null, data.nodeName);
1153
- default:
1154
- return /* @__PURE__ */ React14__default.default.createElement("span", null, nameByNodeType[data.nodeType]);
1155
- }
874
+ const styles = useStyles("DOMNodePreview");
875
+ if (isCloseTag) return /* @__PURE__ */ react.default.createElement(CloseTag, {
876
+ styles: styles.htmlCloseTag,
877
+ isChildNode: true,
878
+ tagName: data.tagName
879
+ });
880
+ switch (data.nodeType) {
881
+ case Node.ELEMENT_NODE: return /* @__PURE__ */ react.default.createElement("span", null, /* @__PURE__ */ react.default.createElement(OpenTag, {
882
+ tagName: data.tagName,
883
+ attributes: data.attributes,
884
+ styles: styles.htmlOpenTag
885
+ }), shouldInline(data) ? data.textContent : !expanded && "…", !expanded && /* @__PURE__ */ react.default.createElement(CloseTag, {
886
+ tagName: data.tagName,
887
+ styles: styles.htmlCloseTag
888
+ }));
889
+ case Node.TEXT_NODE: return /* @__PURE__ */ react.default.createElement("span", null, data.textContent);
890
+ case Node.CDATA_SECTION_NODE: return /* @__PURE__ */ react.default.createElement("span", null, "<![CDATA[" + data.textContent + "]]>");
891
+ case Node.COMMENT_NODE: return /* @__PURE__ */ react.default.createElement("span", { style: styles.htmlComment }, "<!--", data.textContent, "-->");
892
+ case Node.PROCESSING_INSTRUCTION_NODE: return /* @__PURE__ */ react.default.createElement("span", null, data.nodeName);
893
+ case Node.DOCUMENT_TYPE_NODE: return /* @__PURE__ */ react.default.createElement("span", { style: styles.htmlDoctype }, "<!DOCTYPE ", data.name, data.publicId ? ` PUBLIC "${data.publicId}"` : "", !data.publicId && data.systemId ? " SYSTEM" : "", data.systemId ? ` "${data.systemId}"` : "", ">");
894
+ case Node.DOCUMENT_NODE: return /* @__PURE__ */ react.default.createElement("span", null, data.nodeName);
895
+ case Node.DOCUMENT_FRAGMENT_NODE: return /* @__PURE__ */ react.default.createElement("span", null, data.nodeName);
896
+ default: return /* @__PURE__ */ react.default.createElement("span", null, nameByNodeType[data.nodeType]);
897
+ }
1156
898
  };
1157
899
  var domIterator = function* (data) {
1158
- if (data && data.childNodes) {
1159
- const textInlined = shouldInline(data);
1160
- if (textInlined) {
1161
- return;
1162
- }
1163
- for (let i = 0; i < data.childNodes.length; i++) {
1164
- const node = data.childNodes[i];
1165
- if (node.nodeType === Node.TEXT_NODE && node.textContent.trim().length === 0)
1166
- continue;
1167
- yield {
1168
- name: `${node.tagName}[${i}]`,
1169
- data: node
1170
- };
1171
- }
1172
- if (data.tagName) {
1173
- yield {
1174
- name: "CLOSE_TAG",
1175
- data: {
1176
- tagName: data.tagName
1177
- },
1178
- isCloseTag: true
1179
- };
1180
- }
1181
- }
900
+ if (data && data.childNodes) {
901
+ const textInlined = shouldInline(data);
902
+ if (textInlined) return;
903
+ for (let i = 0; i < data.childNodes.length; i++) {
904
+ const node = data.childNodes[i];
905
+ if (node.nodeType === Node.TEXT_NODE && node.textContent.trim().length === 0) continue;
906
+ yield {
907
+ name: `${node.tagName}[${i}]`,
908
+ data: node
909
+ };
910
+ }
911
+ if (data.tagName) yield {
912
+ name: "CLOSE_TAG",
913
+ data: { tagName: data.tagName },
914
+ isCloseTag: true
915
+ };
916
+ }
1182
917
  };
1183
918
  var DOMInspector = (props) => {
1184
- return /* @__PURE__ */ React14__default.default.createElement(TreeView, {
1185
- nodeRenderer: DOMNodePreview,
1186
- dataIterator: domIterator,
1187
- ...props
1188
- });
919
+ return /* @__PURE__ */ react.default.createElement(TreeView, {
920
+ nodeRenderer: DOMNodePreview,
921
+ dataIterator: domIterator,
922
+ ...props
923
+ });
1189
924
  };
1190
925
  var themedDOMInspector = themeAcceptor(DOMInspector);
1191
- var import_is_dom = __toESM(require_is_dom());
1192
- var Inspector = ({ table = false, data, ...rest }) => {
1193
- if (table) {
1194
- return /* @__PURE__ */ React14__default.default.createElement(themedTableInspector, {
1195
- data,
1196
- ...rest
1197
- });
1198
- }
1199
- if ((0, import_is_dom.default)(data))
1200
- return /* @__PURE__ */ React14__default.default.createElement(themedDOMInspector, {
1201
- data,
1202
- ...rest
1203
- });
1204
- return /* @__PURE__ */ React14__default.default.createElement(themedObjectInspector, {
1205
- data,
1206
- ...rest
1207
- });
926
+ var import_is_dom = __toESM$1(require_is_dom());
927
+ var Inspector$1 = ({ table = false, data,...rest }) => {
928
+ if (table) return /* @__PURE__ */ react.default.createElement(themedTableInspector, {
929
+ data,
930
+ ...rest
931
+ });
932
+ if ((0, import_is_dom.default)(data)) return /* @__PURE__ */ react.default.createElement(themedDOMInspector, {
933
+ data,
934
+ ...rest
935
+ });
936
+ return /* @__PURE__ */ react.default.createElement(themedObjectInspector, {
937
+ data,
938
+ ...rest
939
+ });
1208
940
  };
1209
941
 
1210
- // src/experiments/inspect.tsx
1211
- var useImperativeHandlePolyfill = (ref, init, deps) => {
1212
- React14.useEffect(() => {
1213
- if (ref) {
1214
- if (typeof ref === "function") {
1215
- ref(init());
1216
- } else if (typeof ref === "object" && "current" in ref) {
1217
- ref.current = init();
1218
- }
1219
- }
1220
- }, deps);
942
+ //#endregion
943
+ //#region src/experiments/inspect.tsx
944
+ const useImperativeHandlePolyfill = (ref, init, deps) => {
945
+ (0, react.useEffect)(() => {
946
+ if (ref) {
947
+ if (typeof ref === "function") ref(init());
948
+ else if (typeof ref === "object" && "current" in ref) ref.current = init();
949
+ }
950
+ }, deps);
1221
951
  };
1222
- var useImperativeHandle = React14.useImperativeHandle || useImperativeHandlePolyfill;
1223
- var throttle = (fn, wait) => {
1224
- let timeout = null;
1225
- return function() {
1226
- if (!timeout) {
1227
- timeout = setTimeout(() => {
1228
- fn.apply(this, arguments);
1229
- timeout = null;
1230
- }, wait);
1231
- }
1232
- };
952
+ const useImperativeHandle = react.useImperativeHandle || useImperativeHandlePolyfill;
953
+ const throttle = (fn, wait) => {
954
+ let timeout = null;
955
+ return function() {
956
+ if (!timeout) timeout = setTimeout(() => {
957
+ fn.apply(this, arguments);
958
+ timeout = null;
959
+ }, wait);
960
+ };
1233
961
  };
1234
- var theme3 = {
1235
- BASE_FONT_FAMILY: "Menlo, monospace",
1236
- BASE_FONT_SIZE: "12px",
1237
- BASE_LINE_HEIGHT: 1.2,
1238
- BASE_BACKGROUND_COLOR: "none",
1239
- BASE_COLOR: "#FFF",
1240
- OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
1241
- OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
1242
- OBJECT_NAME_COLOR: "#FFC799",
1243
- OBJECT_VALUE_NULL_COLOR: "#A0A0A0",
1244
- OBJECT_VALUE_UNDEFINED_COLOR: "#A0A0A0",
1245
- OBJECT_VALUE_REGEXP_COLOR: "#FF8080",
1246
- OBJECT_VALUE_STRING_COLOR: "#99FFE4",
1247
- OBJECT_VALUE_SYMBOL_COLOR: "#FFC799",
1248
- OBJECT_VALUE_NUMBER_COLOR: "#FFC799",
1249
- OBJECT_VALUE_BOOLEAN_COLOR: "#FFC799",
1250
- OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "#FFC799",
1251
- HTML_TAG_COLOR: "#FFC799",
1252
- HTML_TAGNAME_COLOR: "#FFC799",
1253
- HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
1254
- HTML_ATTRIBUTE_NAME_COLOR: "#A0A0A0",
1255
- HTML_ATTRIBUTE_VALUE_COLOR: "#99FFE4",
1256
- HTML_COMMENT_COLOR: "#8b8b8b94",
1257
- HTML_DOCTYPE_COLOR: "#A0A0A0",
1258
- ARROW_COLOR: "#A0A0A0",
1259
- ARROW_MARGIN_RIGHT: 3,
1260
- ARROW_FONT_SIZE: 12,
1261
- ARROW_ANIMATION_DURATION: "0",
1262
- TREENODE_FONT_FAMILY: "Menlo, monospace",
1263
- TREENODE_FONT_SIZE: "11px",
1264
- TREENODE_LINE_HEIGHT: 1.2,
1265
- TREENODE_PADDING_LEFT: 12,
1266
- TABLE_BORDER_COLOR: "#282828",
1267
- TABLE_TH_BACKGROUND_COLOR: "#161616",
1268
- TABLE_TH_HOVER_COLOR: "#232323",
1269
- TABLE_SORT_ICON_COLOR: "#A0A0A0",
1270
- TABLE_DATA_BACKGROUND_IMAGE: "none",
1271
- TABLE_DATA_BACKGROUND_SIZE: "0"
962
+ const theme = {
963
+ BASE_FONT_FAMILY: "Menlo, monospace",
964
+ BASE_FONT_SIZE: "12px",
965
+ BASE_LINE_HEIGHT: 1.2,
966
+ BASE_BACKGROUND_COLOR: "none",
967
+ BASE_COLOR: "#FFF",
968
+ OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
969
+ OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
970
+ OBJECT_NAME_COLOR: "#FFC799",
971
+ OBJECT_VALUE_NULL_COLOR: "#A0A0A0",
972
+ OBJECT_VALUE_UNDEFINED_COLOR: "#A0A0A0",
973
+ OBJECT_VALUE_REGEXP_COLOR: "#FF8080",
974
+ OBJECT_VALUE_STRING_COLOR: "#99FFE4",
975
+ OBJECT_VALUE_SYMBOL_COLOR: "#FFC799",
976
+ OBJECT_VALUE_NUMBER_COLOR: "#FFC799",
977
+ OBJECT_VALUE_BOOLEAN_COLOR: "#FFC799",
978
+ OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "#FFC799",
979
+ HTML_TAG_COLOR: "#FFC799",
980
+ HTML_TAGNAME_COLOR: "#FFC799",
981
+ HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
982
+ HTML_ATTRIBUTE_NAME_COLOR: "#A0A0A0",
983
+ HTML_ATTRIBUTE_VALUE_COLOR: "#99FFE4",
984
+ HTML_COMMENT_COLOR: "#8b8b8b94",
985
+ HTML_DOCTYPE_COLOR: "#A0A0A0",
986
+ ARROW_COLOR: "#A0A0A0",
987
+ ARROW_MARGIN_RIGHT: 3,
988
+ ARROW_FONT_SIZE: 12,
989
+ ARROW_ANIMATION_DURATION: "0",
990
+ TREENODE_FONT_FAMILY: "Menlo, monospace",
991
+ TREENODE_FONT_SIZE: "11px",
992
+ TREENODE_LINE_HEIGHT: 1.2,
993
+ TREENODE_PADDING_LEFT: 12,
994
+ TABLE_BORDER_COLOR: "#282828",
995
+ TABLE_TH_BACKGROUND_COLOR: "#161616",
996
+ TABLE_TH_HOVER_COLOR: "#232323",
997
+ TABLE_SORT_ICON_COLOR: "#A0A0A0",
998
+ TABLE_DATA_BACKGROUND_IMAGE: "none",
999
+ TABLE_DATA_BACKGROUND_SIZE: "0"
1272
1000
  };
1273
- var RawInspector = React14.forwardRef(
1274
- ({ enabled = true, dangerouslyRunInProduction = false }, ref) => {
1275
- const [element, setElement] = React14.useState(null);
1276
- const [currentFiber, setCurrentFiber] = React14.useState(null);
1277
- const [currentFiberSource, setCurrentFiberSource] = React14.useState(null);
1278
- const [rect, setRect] = React14.useState(null);
1279
- const [isActive, setIsActive] = React14.useState(true);
1280
- const [isEnabled, setIsEnabled] = React14.useState(enabled);
1281
- const [position, setPosition] = React14.useState({ top: 0, left: 0 });
1282
- const currentCleanedFiber = React14.useMemo(() => {
1283
- if (!currentFiber) return null;
1284
- const clonedFiber = { ...currentFiber };
1285
- for (const key in clonedFiber) {
1286
- const value = clonedFiber[key];
1287
- if (!value) delete clonedFiber[key];
1288
- }
1289
- return clonedFiber;
1290
- }, [currentFiber]);
1291
- useImperativeHandle(ref, () => ({
1292
- enable: () => setIsEnabled(true),
1293
- disable: () => {
1294
- setIsEnabled(false);
1295
- setElement(null);
1296
- setRect(null);
1297
- },
1298
- inspectElement: (element2) => {
1299
- if (!isEnabled) return;
1300
- setElement(element2);
1301
- setRect(element2.getBoundingClientRect());
1302
- }
1303
- }));
1304
- React14.useEffect(() => {
1305
- (async () => {
1306
- if (!element) return;
1307
- const fiber = chunk4N6XEHJD_cjs.getFiberFromHostInstance(element);
1308
- if (!fiber) return;
1309
- const latestFiber = chunk4N6XEHJD_cjs.getLatestFiber(fiber);
1310
- const source = await chunkNKMRHYKS_cjs.getFiberSource(latestFiber);
1311
- setCurrentFiber(latestFiber);
1312
- if (source) {
1313
- setCurrentFiberSource(source);
1314
- }
1315
- })();
1316
- }, [element]);
1317
- React14.useEffect(() => {
1318
- const handleMouseMove = (event) => {
1319
- const isActive2 = chunk4N6XEHJD_cjs.isInstrumentationActive() || chunk4N6XEHJD_cjs.hasRDTHook();
1320
- if (!isActive2) {
1321
- setIsActive(false);
1322
- return;
1323
- }
1324
- if (!dangerouslyRunInProduction) {
1325
- const rdtHook = chunk4N6XEHJD_cjs.getRDTHook();
1326
- for (const renderer of rdtHook.renderers.values()) {
1327
- const buildType = chunk4N6XEHJD_cjs.detectReactBuildType(renderer);
1328
- if (buildType === "production") {
1329
- setIsActive(false);
1330
- return;
1331
- }
1332
- }
1333
- }
1334
- if (!isEnabled) {
1335
- setElement(null);
1336
- setRect(null);
1337
- return;
1338
- }
1339
- const element2 = document.elementFromPoint(event.clientX, event.clientY);
1340
- if (!element2) return;
1341
- setElement(element2);
1342
- setRect(element2.getBoundingClientRect());
1343
- };
1344
- const throttledMouseMove = throttle(handleMouseMove, 16);
1345
- document.addEventListener("mousemove", throttledMouseMove);
1346
- return () => document.removeEventListener("mousemove", throttledMouseMove);
1347
- }, [isEnabled, dangerouslyRunInProduction]);
1348
- React14.useEffect(() => {
1349
- if (!rect) return;
1350
- const padding = 10;
1351
- const inspectorWidth = 400;
1352
- const inspectorHeight = 320;
1353
- let left = rect.left + rect.width + padding;
1354
- let top = rect.top;
1355
- if (left + inspectorWidth > window.innerWidth) {
1356
- left = Math.max(padding, rect.left - inspectorWidth - padding);
1357
- }
1358
- if (top >= rect.top && top <= rect.bottom) {
1359
- if (rect.bottom + inspectorHeight + padding <= window.innerHeight) {
1360
- top = rect.bottom + padding;
1361
- } else if (rect.top - inspectorHeight - padding >= 0) {
1362
- top = rect.top - inspectorHeight - padding;
1363
- } else {
1364
- top = window.innerHeight - inspectorHeight - padding;
1365
- }
1366
- }
1367
- top = Math.max(
1368
- padding,
1369
- Math.min(top, window.innerHeight - inspectorHeight - padding)
1370
- );
1371
- left = Math.max(
1372
- padding,
1373
- Math.min(left, window.innerWidth - inspectorWidth - padding)
1374
- );
1375
- setPosition({ top, left });
1376
- }, [rect]);
1377
- if (!rect || !isActive || !isEnabled) return null;
1378
- if (!currentFiber) return null;
1379
- return /* @__PURE__ */ React14__default.default.createElement(React14__default.default.Fragment, null, /* @__PURE__ */ React14__default.default.createElement(
1380
- "div",
1381
- {
1382
- className: "inspector-container",
1383
- style: {
1384
- position: "fixed",
1385
- backgroundColor: "#101010",
1386
- color: "#FFF",
1387
- zIndex: 50,
1388
- padding: "1rem",
1389
- width: "30ch",
1390
- height: "25ch",
1391
- transition: "all 150ms ease-in-out",
1392
- overflow: "auto",
1393
- boxShadow: "0 4px 8px rgba(0, 0, 0, 0.5)",
1394
- border: "1px solid #444",
1395
- borderRadius: "8px",
1396
- opacity: rect ? 1 : 0,
1397
- transform: rect ? "translateY(0)" : "translateY(10px)",
1398
- pointerEvents: rect ? "auto" : "none",
1399
- top: position.top,
1400
- left: position.left
1401
- }
1402
- },
1403
- currentFiber && /* @__PURE__ */ React14__default.default.createElement(
1404
- Inspector,
1405
- {
1406
- theme: theme3,
1407
- data: currentCleanedFiber,
1408
- expandLevel: 1,
1409
- table: false
1410
- }
1411
- ),
1412
- /* @__PURE__ */ React14__default.default.createElement(
1413
- "div",
1414
- {
1415
- style: {
1416
- position: "absolute",
1417
- bottom: "0",
1418
- left: "0",
1419
- right: "0",
1420
- display: "flex",
1421
- alignItems: "center",
1422
- gap: "1rem",
1423
- backgroundColor: "#101010",
1424
- padding: "0.75rem 1rem",
1425
- borderTop: "1px solid #555",
1426
- borderBottomLeftRadius: "8px",
1427
- borderBottomRightRadius: "8px",
1428
- zIndex: 1e3
1429
- }
1430
- },
1431
- /* @__PURE__ */ React14__default.default.createElement(
1432
- "div",
1433
- {
1434
- style: {
1435
- fontSize: "0.875rem",
1436
- color: "#FFF",
1437
- padding: "0.25rem 0.5rem",
1438
- borderRadius: "4px",
1439
- backgroundColor: "#3a3a3a"
1440
- }
1441
- },
1442
- `<${chunk4N6XEHJD_cjs.getDisplayName(currentFiber.type) || "unknown"}>`
1443
- ),
1444
- /* @__PURE__ */ React14__default.default.createElement(
1445
- "div",
1446
- {
1447
- style: {
1448
- fontSize: "0.75rem",
1449
- color: "#CCC"
1450
- }
1451
- },
1452
- currentFiberSource ? /* @__PURE__ */ React14__default.default.createElement(React14__default.default.Fragment, null, currentFiberSource.fileName.split("/").slice(-2).join("/"), " ", /* @__PURE__ */ React14__default.default.createElement("br", null), "@ line ", currentFiberSource.lineNumber, ", column", " ", currentFiberSource.columnNumber) : null
1453
- )
1454
- )
1455
- ), /* @__PURE__ */ React14__default.default.createElement("style", null, `
1001
+ const RawInspector = (0, react.forwardRef)(({ enabled = true, dangerouslyRunInProduction = false }, ref) => {
1002
+ const [element, setElement] = (0, react.useState)(null);
1003
+ const [currentFiber, setCurrentFiber] = (0, react.useState)(null);
1004
+ const [currentFiberSource, setCurrentFiberSource] = (0, react.useState)(null);
1005
+ const [rect, setRect] = (0, react.useState)(null);
1006
+ const [isActive, setIsActive] = (0, react.useState)(true);
1007
+ const [isEnabled, setIsEnabled] = (0, react.useState)(enabled);
1008
+ const [position, setPosition] = (0, react.useState)({
1009
+ top: 0,
1010
+ left: 0
1011
+ });
1012
+ const currentCleanedFiber = (0, react.useMemo)(() => {
1013
+ if (!currentFiber) return null;
1014
+ const clonedFiber = { ...currentFiber };
1015
+ for (const key in clonedFiber) {
1016
+ const value = clonedFiber[key];
1017
+ if (!value) delete clonedFiber[key];
1018
+ }
1019
+ return clonedFiber;
1020
+ }, [currentFiber]);
1021
+ useImperativeHandle(ref, () => ({
1022
+ enable: () => setIsEnabled(true),
1023
+ disable: () => {
1024
+ setIsEnabled(false);
1025
+ setElement(null);
1026
+ setRect(null);
1027
+ },
1028
+ inspectElement: (element$1) => {
1029
+ if (!isEnabled) return;
1030
+ setElement(element$1);
1031
+ setRect(element$1.getBoundingClientRect());
1032
+ }
1033
+ }));
1034
+ (0, react.useEffect)(() => {
1035
+ (async () => {
1036
+ if (!element) return;
1037
+ const fiber = require_core.getFiberFromHostInstance(element);
1038
+ if (!fiber) return;
1039
+ const latestFiber = require_core.getLatestFiber(fiber);
1040
+ const source = await require_source.getFiberSource(latestFiber);
1041
+ setCurrentFiber(latestFiber);
1042
+ if (source) setCurrentFiberSource(source);
1043
+ })();
1044
+ }, [element]);
1045
+ (0, react.useEffect)(() => {
1046
+ const handleMouseMove = (event) => {
1047
+ const isActive$1 = require_core.isInstrumentationActive() || require_core.hasRDTHook();
1048
+ if (!isActive$1) {
1049
+ setIsActive(false);
1050
+ return;
1051
+ }
1052
+ if (!dangerouslyRunInProduction) {
1053
+ const rdtHook = require_core.getRDTHook();
1054
+ for (const renderer of rdtHook.renderers.values()) {
1055
+ const buildType = require_core.detectReactBuildType(renderer);
1056
+ if (buildType === "production") {
1057
+ setIsActive(false);
1058
+ return;
1059
+ }
1060
+ }
1061
+ }
1062
+ if (!isEnabled) {
1063
+ setElement(null);
1064
+ setRect(null);
1065
+ return;
1066
+ }
1067
+ const element$1 = document.elementFromPoint(event.clientX, event.clientY);
1068
+ if (!element$1) return;
1069
+ setElement(element$1);
1070
+ setRect(element$1.getBoundingClientRect());
1071
+ };
1072
+ const throttledMouseMove = throttle(handleMouseMove, 16);
1073
+ document.addEventListener("mousemove", throttledMouseMove);
1074
+ return () => document.removeEventListener("mousemove", throttledMouseMove);
1075
+ }, [isEnabled, dangerouslyRunInProduction]);
1076
+ (0, react.useEffect)(() => {
1077
+ if (!rect) return;
1078
+ const padding = 10;
1079
+ const inspectorWidth = 400;
1080
+ const inspectorHeight = 320;
1081
+ let left = rect.left + rect.width + padding;
1082
+ let top = rect.top;
1083
+ if (left + inspectorWidth > window.innerWidth) left = Math.max(padding, rect.left - inspectorWidth - padding);
1084
+ if (top >= rect.top && top <= rect.bottom) if (rect.bottom + inspectorHeight + padding <= window.innerHeight) top = rect.bottom + padding;
1085
+ else if (rect.top - inspectorHeight - padding >= 0) top = rect.top - inspectorHeight - padding;
1086
+ else top = window.innerHeight - inspectorHeight - padding;
1087
+ top = Math.max(padding, Math.min(top, window.innerHeight - inspectorHeight - padding));
1088
+ left = Math.max(padding, Math.min(left, window.innerWidth - inspectorWidth - padding));
1089
+ setPosition({
1090
+ top,
1091
+ left
1092
+ });
1093
+ }, [rect]);
1094
+ if (!rect || !isActive || !isEnabled) return null;
1095
+ if (!currentFiber) return null;
1096
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
1097
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
1098
+ className: "inspector-container",
1099
+ style: {
1100
+ position: "fixed",
1101
+ backgroundColor: "#101010",
1102
+ color: "#FFF",
1103
+ zIndex: 50,
1104
+ padding: "1rem",
1105
+ width: "30ch",
1106
+ height: "25ch",
1107
+ transition: "all 150ms ease-in-out",
1108
+ overflow: "auto",
1109
+ boxShadow: "0 4px 8px rgba(0, 0, 0, 0.5)",
1110
+ border: "1px solid #444",
1111
+ borderRadius: "8px",
1112
+ opacity: rect ? 1 : 0,
1113
+ transform: rect ? "translateY(0)" : "translateY(10px)",
1114
+ pointerEvents: rect ? "auto" : "none",
1115
+ top: position.top,
1116
+ left: position.left
1117
+ },
1118
+ children: [currentFiber && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Inspector$1, {
1119
+ theme,
1120
+ data: currentCleanedFiber,
1121
+ expandLevel: 1,
1122
+ table: false
1123
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
1124
+ style: {
1125
+ position: "absolute",
1126
+ bottom: "0",
1127
+ left: "0",
1128
+ right: "0",
1129
+ display: "flex",
1130
+ alignItems: "center",
1131
+ gap: "1rem",
1132
+ backgroundColor: "#101010",
1133
+ padding: "0.75rem 1rem",
1134
+ borderTop: "1px solid #555",
1135
+ borderBottomLeftRadius: "8px",
1136
+ borderBottomRightRadius: "8px",
1137
+ zIndex: 1e3
1138
+ },
1139
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
1140
+ style: {
1141
+ fontSize: "0.875rem",
1142
+ color: "#FFF",
1143
+ padding: "0.25rem 0.5rem",
1144
+ borderRadius: "4px",
1145
+ backgroundColor: "#3a3a3a"
1146
+ },
1147
+ children: `<${require_core.getDisplayName(currentFiber.type) || "unknown"}>`
1148
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
1149
+ style: {
1150
+ fontSize: "0.75rem",
1151
+ color: "#CCC"
1152
+ },
1153
+ children: currentFiberSource ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
1154
+ currentFiberSource.fileName.split("/").slice(-2).join("/"),
1155
+ " ",
1156
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
1157
+ "@ line ",
1158
+ currentFiberSource.lineNumber,
1159
+ ", column",
1160
+ " ",
1161
+ currentFiberSource.columnNumber
1162
+ ] }) : null
1163
+ })]
1164
+ })]
1165
+ }),
1166
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: `
1456
1167
  .inspector-container::-webkit-scrollbar {
1457
1168
  width: 8px;
1458
1169
  }
@@ -1467,43 +1178,41 @@ var RawInspector = React14.forwardRef(
1467
1178
  .inspector-container::-webkit-scrollbar-thumb:hover {
1468
1179
  background: #555;
1469
1180
  }
1470
- `), /* @__PURE__ */ React14__default.default.createElement(
1471
- "div",
1472
- {
1473
- style: {
1474
- position: "fixed",
1475
- zIndex: 40,
1476
- pointerEvents: "none",
1477
- transition: "all 150ms",
1478
- border: "1px dashed #505050",
1479
- left: rect.left,
1480
- top: rect.top,
1481
- width: rect.width,
1482
- height: rect.height,
1483
- opacity: rect ? 1 : 0
1484
- }
1485
- }
1486
- ));
1487
- }
1488
- );
1489
- var Inspector2 = React14.forwardRef(
1490
- (props, ref) => {
1491
- const [root, setRoot] = React14.useState(null);
1492
- React14.useEffect(() => {
1493
- const div = document.createElement("div");
1494
- document.documentElement.appendChild(div);
1495
- const shadowRoot = div.attachShadow({ mode: "open" });
1496
- setRoot(shadowRoot);
1497
- return () => {
1498
- document.documentElement.removeChild(div);
1499
- };
1500
- }, []);
1501
- if (!root) return null;
1502
- return ReactDOM__default.default.createPortal(/* @__PURE__ */ React14__default.default.createElement(RawInspector, { ref, ...props }), root);
1503
- }
1504
- );
1505
- var inspect_default = Inspector2;
1181
+ ` }),
1182
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
1183
+ position: "fixed",
1184
+ zIndex: 40,
1185
+ pointerEvents: "none",
1186
+ transition: "all 150ms",
1187
+ border: "1px dashed #505050",
1188
+ left: rect.left,
1189
+ top: rect.top,
1190
+ width: rect.width,
1191
+ height: rect.height,
1192
+ opacity: rect ? 1 : 0
1193
+ } })
1194
+ ] });
1195
+ });
1196
+ const Inspector = (0, react.forwardRef)((props, ref) => {
1197
+ const [root, setRoot] = (0, react.useState)(null);
1198
+ (0, react.useEffect)(() => {
1199
+ const div = document.createElement("div");
1200
+ document.documentElement.appendChild(div);
1201
+ const shadowRoot = div.attachShadow({ mode: "open" });
1202
+ setRoot(shadowRoot);
1203
+ return () => {
1204
+ document.documentElement.removeChild(div);
1205
+ };
1206
+ }, []);
1207
+ if (!root) return null;
1208
+ return react_dom.default.createPortal(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RawInspector, {
1209
+ ref,
1210
+ ...props
1211
+ }), root);
1212
+ });
1213
+ var inspect_default = Inspector;
1506
1214
 
1507
- exports.Inspector = Inspector2;
1215
+ //#endregion
1216
+ exports.Inspector = Inspector;
1508
1217
  exports.RawInspector = RawInspector;
1509
- exports.default = inspect_default;
1218
+ exports.default = inspect_default;