bippy
Version:
hack into react internals
1,493 lines (1,491 loc) • 50.2 kB
JavaScript
import { getFiberSource } from '../chunk-Q7ZA5HFI.js';
import '../chunk-ELVWOSDS.js';
import { getFiberFromHostInstance, getLatestFiber, getDisplayName, isInstrumentationActive, hasRDTHook, getRDTHook, detectReactBuildType } from '../chunk-UTLFO7LL.js';
import '../chunk-EPG3GO3H.js';
import React14, { createContext, memo, Children, useContext, useCallback, useState, useLayoutEffect, forwardRef, useMemo, useEffect, useImperativeHandle as useImperativeHandle$1 } from 'react';
import ReactDOM from 'react-dom';
/**
* @license bippy
*
* Copyright (c) Aiden Bai, Million Software, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __commonJS = (cb, mod) => function __require() {
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(!mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
var require_is_object = __commonJS({
"node_modules/is-object/index.js"(exports, module) {
module.exports = function isObject(x) {
return typeof x === "object" && x !== null;
};
}
});
var require_is_window = __commonJS({
"node_modules/is-window/index.js"(exports, module) {
module.exports = function(obj) {
if (obj == null) {
return false;
}
var o = Object(obj);
return o === o.window;
};
}
});
var require_is_dom = __commonJS({
"node_modules/is-dom/index.js"(exports, module) {
var isObject = require_is_object();
var isWindow = require_is_window();
function isNode(val) {
if (!isObject(val) || !isWindow(window) || typeof window.Node !== "function") {
return false;
}
return typeof val.nodeType === "number" && typeof val.nodeName === "string";
}
module.exports = isNode;
}
});
var themes_exports = {};
__export(themes_exports, {
chromeDark: () => theme,
chromeLight: () => theme2
});
var theme = {
BASE_FONT_FAMILY: "Menlo, monospace",
BASE_FONT_SIZE: "11px",
BASE_LINE_HEIGHT: 1.2,
BASE_BACKGROUND_COLOR: "rgb(36, 36, 36)",
BASE_COLOR: "rgb(213, 213, 213)",
OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
OBJECT_NAME_COLOR: "rgb(227, 110, 236)",
OBJECT_VALUE_NULL_COLOR: "rgb(127, 127, 127)",
OBJECT_VALUE_UNDEFINED_COLOR: "rgb(127, 127, 127)",
OBJECT_VALUE_REGEXP_COLOR: "rgb(233, 63, 59)",
OBJECT_VALUE_STRING_COLOR: "rgb(233, 63, 59)",
OBJECT_VALUE_SYMBOL_COLOR: "rgb(233, 63, 59)",
OBJECT_VALUE_NUMBER_COLOR: "hsl(252, 100%, 75%)",
OBJECT_VALUE_BOOLEAN_COLOR: "hsl(252, 100%, 75%)",
OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "rgb(85, 106, 242)",
HTML_TAG_COLOR: "rgb(93, 176, 215)",
HTML_TAGNAME_COLOR: "rgb(93, 176, 215)",
HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
HTML_ATTRIBUTE_NAME_COLOR: "rgb(155, 187, 220)",
HTML_ATTRIBUTE_VALUE_COLOR: "rgb(242, 151, 102)",
HTML_COMMENT_COLOR: "rgb(137, 137, 137)",
HTML_DOCTYPE_COLOR: "rgb(192, 192, 192)",
ARROW_COLOR: "rgb(145, 145, 145)",
ARROW_MARGIN_RIGHT: 3,
ARROW_FONT_SIZE: 12,
ARROW_ANIMATION_DURATION: "0",
TREENODE_FONT_FAMILY: "Menlo, monospace",
TREENODE_FONT_SIZE: "11px",
TREENODE_LINE_HEIGHT: 1.2,
TREENODE_PADDING_LEFT: 12,
TABLE_BORDER_COLOR: "rgb(85, 85, 85)",
TABLE_TH_BACKGROUND_COLOR: "rgb(44, 44, 44)",
TABLE_TH_HOVER_COLOR: "rgb(48, 48, 48)",
TABLE_SORT_ICON_COLOR: "black",
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))",
TABLE_DATA_BACKGROUND_SIZE: "128px 32px"
};
var theme2 = {
BASE_FONT_FAMILY: "Menlo, monospace",
BASE_FONT_SIZE: "11px",
BASE_LINE_HEIGHT: 1.2,
BASE_BACKGROUND_COLOR: "white",
BASE_COLOR: "black",
OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
OBJECT_NAME_COLOR: "rgb(136, 19, 145)",
OBJECT_VALUE_NULL_COLOR: "rgb(128, 128, 128)",
OBJECT_VALUE_UNDEFINED_COLOR: "rgb(128, 128, 128)",
OBJECT_VALUE_REGEXP_COLOR: "rgb(196, 26, 22)",
OBJECT_VALUE_STRING_COLOR: "rgb(196, 26, 22)",
OBJECT_VALUE_SYMBOL_COLOR: "rgb(196, 26, 22)",
OBJECT_VALUE_NUMBER_COLOR: "rgb(28, 0, 207)",
OBJECT_VALUE_BOOLEAN_COLOR: "rgb(28, 0, 207)",
OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "rgb(13, 34, 170)",
HTML_TAG_COLOR: "rgb(168, 148, 166)",
HTML_TAGNAME_COLOR: "rgb(136, 18, 128)",
HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
HTML_ATTRIBUTE_NAME_COLOR: "rgb(153, 69, 0)",
HTML_ATTRIBUTE_VALUE_COLOR: "rgb(26, 26, 166)",
HTML_COMMENT_COLOR: "rgb(35, 110, 37)",
HTML_DOCTYPE_COLOR: "rgb(192, 192, 192)",
ARROW_COLOR: "#6e6e6e",
ARROW_MARGIN_RIGHT: 3,
ARROW_FONT_SIZE: 12,
ARROW_ANIMATION_DURATION: "0",
TREENODE_FONT_FAMILY: "Menlo, monospace",
TREENODE_FONT_SIZE: "11px",
TREENODE_LINE_HEIGHT: 1.2,
TREENODE_PADDING_LEFT: 12,
TABLE_BORDER_COLOR: "#aaa",
TABLE_TH_BACKGROUND_COLOR: "#eee",
TABLE_TH_HOVER_COLOR: "hsla(0, 0%, 90%, 1)",
TABLE_SORT_ICON_COLOR: "#6e6e6e",
TABLE_DATA_BACKGROUND_IMAGE: "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
TABLE_DATA_BACKGROUND_SIZE: "128px 32px"
};
var ExpandedPathsContext = createContext([{}, () => {
}]);
var unselectable = {
WebkitTouchCallout: "none",
WebkitUserSelect: "none",
KhtmlUserSelect: "none",
MozUserSelect: "none",
msUserSelect: "none",
OUserSelect: "none",
userSelect: "none"
};
var createTheme = (theme32) => ({
DOMNodePreview: {
htmlOpenTag: {
base: {
color: theme32.HTML_TAG_COLOR
},
tagName: {
color: theme32.HTML_TAGNAME_COLOR,
textTransform: theme32.HTML_TAGNAME_TEXT_TRANSFORM
},
htmlAttributeName: {
color: theme32.HTML_ATTRIBUTE_NAME_COLOR
},
htmlAttributeValue: {
color: theme32.HTML_ATTRIBUTE_VALUE_COLOR
}
},
htmlCloseTag: {
base: {
color: theme32.HTML_TAG_COLOR
},
offsetLeft: {
marginLeft: -theme32.TREENODE_PADDING_LEFT
},
tagName: {
color: theme32.HTML_TAGNAME_COLOR,
textTransform: theme32.HTML_TAGNAME_TEXT_TRANSFORM
}
},
htmlComment: {
color: theme32.HTML_COMMENT_COLOR
},
htmlDoctype: {
color: theme32.HTML_DOCTYPE_COLOR
}
},
ObjectPreview: {
objectDescription: {
fontStyle: "italic"
},
preview: {
fontStyle: "italic"
},
arrayMaxProperties: theme32.OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES,
objectMaxProperties: theme32.OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES
},
ObjectName: {
base: {
color: theme32.OBJECT_NAME_COLOR
},
dimmed: {
opacity: 0.6
}
},
ObjectValue: {
objectValueNull: {
color: theme32.OBJECT_VALUE_NULL_COLOR
},
objectValueUndefined: {
color: theme32.OBJECT_VALUE_UNDEFINED_COLOR
},
objectValueRegExp: {
color: theme32.OBJECT_VALUE_REGEXP_COLOR
},
objectValueString: {
color: theme32.OBJECT_VALUE_STRING_COLOR
},
objectValueSymbol: {
color: theme32.OBJECT_VALUE_SYMBOL_COLOR
},
objectValueNumber: {
color: theme32.OBJECT_VALUE_NUMBER_COLOR
},
objectValueBoolean: {
color: theme32.OBJECT_VALUE_BOOLEAN_COLOR
},
objectValueFunctionPrefix: {
color: theme32.OBJECT_VALUE_FUNCTION_PREFIX_COLOR,
fontStyle: "italic"
},
objectValueFunctionName: {
fontStyle: "italic"
}
},
TreeView: {
treeViewOutline: {
padding: 0,
margin: 0,
listStyleType: "none"
}
},
TreeNode: {
treeNodeBase: {
color: theme32.BASE_COLOR,
backgroundColor: theme32.BASE_BACKGROUND_COLOR,
lineHeight: theme32.TREENODE_LINE_HEIGHT,
cursor: "default",
boxSizing: "border-box",
listStyle: "none",
fontFamily: theme32.TREENODE_FONT_FAMILY,
fontSize: theme32.TREENODE_FONT_SIZE
},
treeNodePreviewContainer: {},
treeNodePlaceholder: {
whiteSpace: "pre",
fontSize: theme32.ARROW_FONT_SIZE,
marginRight: theme32.ARROW_MARGIN_RIGHT,
...unselectable
},
treeNodeArrow: {
base: {
color: theme32.ARROW_COLOR,
display: "inline-block",
fontSize: theme32.ARROW_FONT_SIZE,
marginRight: theme32.ARROW_MARGIN_RIGHT,
...parseFloat(theme32.ARROW_ANIMATION_DURATION) > 0 ? {
transition: `transform ${theme32.ARROW_ANIMATION_DURATION} ease 0s`
} : {},
...unselectable
},
expanded: {
WebkitTransform: "rotateZ(90deg)",
MozTransform: "rotateZ(90deg)",
transform: "rotateZ(90deg)"
},
collapsed: {
WebkitTransform: "rotateZ(0deg)",
MozTransform: "rotateZ(0deg)",
transform: "rotateZ(0deg)"
}
},
treeNodeChildNodesContainer: {
margin: 0,
paddingLeft: theme32.TREENODE_PADDING_LEFT
}
},
TableInspector: {
base: {
color: theme32.BASE_COLOR,
position: "relative",
border: `1px solid ${theme32.TABLE_BORDER_COLOR}`,
fontFamily: theme32.BASE_FONT_FAMILY,
fontSize: theme32.BASE_FONT_SIZE,
lineHeight: "120%",
boxSizing: "border-box",
cursor: "default"
}
},
TableInspectorHeaderContainer: {
base: {
top: 0,
height: "17px",
left: 0,
right: 0,
overflowX: "hidden"
},
table: {
tableLayout: "fixed",
borderSpacing: 0,
borderCollapse: "separate",
height: "100%",
width: "100%",
margin: 0
}
},
TableInspectorDataContainer: {
tr: {
display: "table-row"
},
td: {
boxSizing: "border-box",
border: "none",
height: "16px",
verticalAlign: "top",
padding: "1px 4px",
WebkitUserSelect: "text",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
overflow: "hidden",
lineHeight: "14px"
},
div: {
position: "static",
top: "17px",
bottom: 0,
overflowY: "overlay",
transform: "translateZ(0)",
left: 0,
right: 0,
overflowX: "hidden"
},
table: {
positon: "static",
left: 0,
top: 0,
right: 0,
bottom: 0,
borderTop: "0 none transparent",
margin: 0,
backgroundImage: theme32.TABLE_DATA_BACKGROUND_IMAGE,
backgroundSize: theme32.TABLE_DATA_BACKGROUND_SIZE,
tableLayout: "fixed",
borderSpacing: 0,
borderCollapse: "separate",
width: "100%",
fontSize: theme32.BASE_FONT_SIZE,
lineHeight: "120%"
}
},
TableInspectorTH: {
base: {
position: "relative",
height: "auto",
textAlign: "left",
backgroundColor: theme32.TABLE_TH_BACKGROUND_COLOR,
borderBottom: `1px solid ${theme32.TABLE_BORDER_COLOR}`,
fontWeight: "normal",
verticalAlign: "middle",
padding: "0 4px",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
overflow: "hidden",
lineHeight: "14px",
":hover": {
backgroundColor: theme32.TABLE_TH_HOVER_COLOR
}
},
div: {
whiteSpace: "nowrap",
textOverflow: "ellipsis",
overflow: "hidden",
fontSize: theme32.BASE_FONT_SIZE,
lineHeight: "120%"
}
},
TableInspectorLeftBorder: {
none: {
borderLeft: "none"
},
solid: {
borderLeft: `1px solid ${theme32.TABLE_BORDER_COLOR}`
}
},
TableInspectorSortIcon: {
display: "block",
marginRight: 3,
width: 8,
height: 7,
marginTop: -7,
color: theme32.TABLE_SORT_ICON_COLOR,
fontSize: 12,
...unselectable
}
});
var DEFAULT_THEME_NAME = "chromeLight";
var ThemeContext = createContext(createTheme(themes_exports[DEFAULT_THEME_NAME]));
var useStyles = (baseStylesKey) => {
const themeStyles = useContext(ThemeContext);
return themeStyles[baseStylesKey];
};
var themeAcceptor = (WrappedComponent) => {
const ThemeAcceptor = ({ theme: theme32 = DEFAULT_THEME_NAME, ...restProps }) => {
const themeStyles = useMemo(() => {
switch (Object.prototype.toString.call(theme32)) {
case "[object String]":
return createTheme(themes_exports[theme32]);
case "[object Object]":
return createTheme(theme32);
default:
return createTheme(themes_exports[DEFAULT_THEME_NAME]);
}
}, [theme32]);
return /* @__PURE__ */ React14.createElement(ThemeContext.Provider, {
value: themeStyles
}, /* @__PURE__ */ React14.createElement(WrappedComponent, {
...restProps
}));
};
return ThemeAcceptor;
};
var Arrow = ({ expanded, styles }) => /* @__PURE__ */ React14.createElement("span", {
style: {
...styles.base,
...expanded ? styles.expanded : styles.collapsed
}
}, "\u25B6");
var TreeNode = memo((props) => {
props = {
expanded: true,
nodeRenderer: ({ name }) => /* @__PURE__ */ React14.createElement("span", null, name),
onClick: () => {
},
shouldShowArrow: false,
shouldShowPlaceholder: true,
...props
};
const { expanded, onClick, children, nodeRenderer, title, shouldShowArrow, shouldShowPlaceholder } = props;
const styles = useStyles("TreeNode");
const NodeRenderer = nodeRenderer;
return /* @__PURE__ */ React14.createElement("li", {
"aria-expanded": expanded,
role: "treeitem",
style: styles.treeNodeBase,
title
}, /* @__PURE__ */ React14.createElement("div", {
style: styles.treeNodePreviewContainer,
onClick
}, shouldShowArrow || Children.count(children) > 0 ? /* @__PURE__ */ React14.createElement(Arrow, {
expanded,
styles: styles.treeNodeArrow
}) : shouldShowPlaceholder && /* @__PURE__ */ React14.createElement("span", {
style: styles.treeNodePlaceholder
}, "\xA0"), /* @__PURE__ */ React14.createElement(NodeRenderer, {
...props
})), /* @__PURE__ */ React14.createElement("ol", {
role: "group",
style: styles.treeNodeChildNodesContainer
}, expanded ? children : void 0));
});
var DEFAULT_ROOT_PATH = "$";
var WILDCARD = "*";
function hasChildNodes(data, dataIterator) {
return !dataIterator(data).next().done;
}
var wildcardPathsFromLevel = (level) => {
return Array.from({ length: level }, (_, i) => [DEFAULT_ROOT_PATH].concat(Array.from({ length: i }, () => "*")).join("."));
};
var getExpandedPaths = (data, dataIterator, expandPaths, expandLevel, prevExpandedPaths) => {
const wildcardPaths = [].concat(wildcardPathsFromLevel(expandLevel)).concat(expandPaths).filter((path) => typeof path === "string");
const expandedPaths = [];
wildcardPaths.forEach((wildcardPath) => {
const keyPaths = wildcardPath.split(".");
const populatePaths = (curData, curPath, depth) => {
if (depth === keyPaths.length) {
expandedPaths.push(curPath);
return;
}
const key = keyPaths[depth];
if (depth === 0) {
if (hasChildNodes(curData, dataIterator) && (key === DEFAULT_ROOT_PATH || key === WILDCARD)) {
populatePaths(curData, DEFAULT_ROOT_PATH, depth + 1);
}
} else {
if (key === WILDCARD) {
for (const { name, data: data2 } of dataIterator(curData)) {
if (hasChildNodes(data2, dataIterator)) {
populatePaths(data2, `${curPath}.${name}`, depth + 1);
}
}
} else {
const value = curData[key];
if (hasChildNodes(value, dataIterator)) {
populatePaths(value, `${curPath}.${key}`, depth + 1);
}
}
}
};
populatePaths(data, "", 0);
});
return expandedPaths.reduce((obj, path) => {
obj[path] = true;
return obj;
}, { ...prevExpandedPaths });
};
var ConnectedTreeNode = memo((props) => {
const { data, dataIterator, path, depth, nodeRenderer } = props;
const [expandedPaths, setExpandedPaths] = useContext(ExpandedPathsContext);
const nodeHasChildNodes = hasChildNodes(data, dataIterator);
const expanded = !!expandedPaths[path];
const handleClick = useCallback(() => nodeHasChildNodes && setExpandedPaths((prevExpandedPaths) => ({
...prevExpandedPaths,
[path]: !expanded
})), [nodeHasChildNodes, setExpandedPaths, path, expanded]);
return /* @__PURE__ */ React14.createElement(TreeNode, {
expanded,
onClick: handleClick,
shouldShowArrow: nodeHasChildNodes,
shouldShowPlaceholder: depth > 0,
nodeRenderer,
...props
}, expanded ? [...dataIterator(data)].map(({ name, data: data2, ...renderNodeProps }) => {
return /* @__PURE__ */ React14.createElement(ConnectedTreeNode, {
name,
data: data2,
depth: depth + 1,
path: `${path}.${name}`,
key: name,
dataIterator,
nodeRenderer,
...renderNodeProps
});
}) : null);
});
var TreeView = memo(({ name, data, dataIterator, nodeRenderer, expandPaths, expandLevel }) => {
const styles = useStyles("TreeView");
const stateAndSetter = useState({});
const [, setExpandedPaths] = stateAndSetter;
useLayoutEffect(() => setExpandedPaths((prevExpandedPaths) => getExpandedPaths(data, dataIterator, expandPaths, expandLevel, prevExpandedPaths)), [data, dataIterator, expandPaths, expandLevel]);
return /* @__PURE__ */ React14.createElement(ExpandedPathsContext.Provider, {
value: stateAndSetter
}, /* @__PURE__ */ React14.createElement("ol", {
role: "tree",
style: styles.treeViewOutline
}, /* @__PURE__ */ React14.createElement(ConnectedTreeNode, {
name,
data,
dataIterator,
depth: 0,
path: DEFAULT_ROOT_PATH,
nodeRenderer
})));
});
var ObjectName = ({ name, dimmed = false, styles = {} }) => {
const themeStyles = useStyles("ObjectName");
const appliedStyles = {
...themeStyles.base,
...dimmed ? themeStyles["dimmed"] : {},
...styles
};
return /* @__PURE__ */ React14.createElement("span", {
style: appliedStyles
}, name);
};
var ObjectValue = ({ object, styles }) => {
const themeStyles = useStyles("ObjectValue");
const mkStyle = (key) => ({ ...themeStyles[key], ...styles });
switch (typeof object) {
case "bigint":
return /* @__PURE__ */ React14.createElement("span", {
style: mkStyle("objectValueNumber")
}, String(object), "n");
case "number":
return /* @__PURE__ */ React14.createElement("span", {
style: mkStyle("objectValueNumber")
}, String(object));
case "string":
return /* @__PURE__ */ React14.createElement("span", {
style: mkStyle("objectValueString")
}, '"', object, '"');
case "boolean":
return /* @__PURE__ */ React14.createElement("span", {
style: mkStyle("objectValueBoolean")
}, String(object));
case "undefined":
return /* @__PURE__ */ React14.createElement("span", {
style: mkStyle("objectValueUndefined")
}, "undefined");
case "object":
if (object === null) {
return /* @__PURE__ */ React14.createElement("span", {
style: mkStyle("objectValueNull")
}, "null");
}
if (object instanceof Date) {
return /* @__PURE__ */ React14.createElement("span", null, object.toString());
}
if (object instanceof RegExp) {
return /* @__PURE__ */ React14.createElement("span", {
style: mkStyle("objectValueRegExp")
}, object.toString());
}
if (Array.isArray(object)) {
return /* @__PURE__ */ React14.createElement("span", null, `Array(${object.length})`);
}
if (!object.constructor) {
return /* @__PURE__ */ React14.createElement("span", null, "Object");
}
if (typeof object.constructor.isBuffer === "function" && object.constructor.isBuffer(object)) {
return /* @__PURE__ */ React14.createElement("span", null, `Buffer[${object.length}]`);
}
return /* @__PURE__ */ React14.createElement("span", null, object.constructor.name);
case "function":
return /* @__PURE__ */ React14.createElement("span", null, /* @__PURE__ */ React14.createElement("span", {
style: mkStyle("objectValueFunctionPrefix")
}, "\u0192\xA0"), /* @__PURE__ */ React14.createElement("span", {
style: mkStyle("objectValueFunctionName")
}, object.name, "()"));
case "symbol":
return /* @__PURE__ */ React14.createElement("span", {
style: mkStyle("objectValueSymbol")
}, object.toString());
default:
return /* @__PURE__ */ React14.createElement("span", null);
}
};
var hasOwnProperty = Object.prototype.hasOwnProperty;
var propertyIsEnumerable = Object.prototype.propertyIsEnumerable;
function getPropertyValue(object, propertyName) {
const propertyDescriptor = Object.getOwnPropertyDescriptor(object, propertyName);
if (propertyDescriptor.get) {
try {
return propertyDescriptor.get();
} catch {
return propertyDescriptor.get;
}
}
return object[propertyName];
}
function intersperse(arr, sep) {
if (arr.length === 0) {
return [];
}
return arr.slice(1).reduce((xs, x) => xs.concat([sep, x]), [arr[0]]);
}
var ObjectPreview = ({ data }) => {
const styles = useStyles("ObjectPreview");
const object = data;
if (typeof object !== "object" || object === null || object instanceof Date || object instanceof RegExp) {
return /* @__PURE__ */ React14.createElement(ObjectValue, {
object
});
}
if (Array.isArray(object)) {
const maxProperties = styles.arrayMaxProperties;
const previewArray = object.slice(0, maxProperties).map((element, index) => /* @__PURE__ */ React14.createElement(ObjectValue, {
key: index,
object: element
}));
if (object.length > maxProperties) {
previewArray.push(/* @__PURE__ */ React14.createElement("span", {
key: "ellipsis"
}, "\u2026"));
}
const arrayLength = object.length;
return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("span", {
style: styles.objectDescription
}, arrayLength === 0 ? `` : `(${arrayLength})\xA0`), /* @__PURE__ */ React14.createElement("span", {
style: styles.preview
}, "[", intersperse(previewArray, ", "), "]"));
} else {
const maxProperties = styles.objectMaxProperties;
const propertyNodes = [];
for (const propertyName in object) {
if (hasOwnProperty.call(object, propertyName)) {
let ellipsis;
if (propertyNodes.length === maxProperties - 1 && Object.keys(object).length > maxProperties) {
ellipsis = /* @__PURE__ */ React14.createElement("span", {
key: "ellipsis"
}, "\u2026");
}
const propertyValue = getPropertyValue(object, propertyName);
propertyNodes.push(/* @__PURE__ */ React14.createElement("span", {
key: propertyName
}, /* @__PURE__ */ React14.createElement(ObjectName, {
name: propertyName || `""`
}), ":\xA0", /* @__PURE__ */ React14.createElement(ObjectValue, {
object: propertyValue
}), ellipsis));
if (ellipsis)
break;
}
}
const objectConstructorName = object.constructor ? object.constructor.name : "Object";
return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("span", {
style: styles.objectDescription
}, objectConstructorName === "Object" ? "" : `${objectConstructorName} `), /* @__PURE__ */ React14.createElement("span", {
style: styles.preview
}, "{", intersperse(propertyNodes, ", "), "}"));
}
};
var ObjectRootLabel = ({ name, data }) => {
if (typeof name === "string") {
return /* @__PURE__ */ React14.createElement("span", null, /* @__PURE__ */ React14.createElement(ObjectName, {
name
}), /* @__PURE__ */ React14.createElement("span", null, ": "), /* @__PURE__ */ React14.createElement(ObjectPreview, {
data
}));
} else {
return /* @__PURE__ */ React14.createElement(ObjectPreview, {
data
});
}
};
var ObjectLabel = ({ name, data, isNonenumerable = false }) => {
const object = data;
return /* @__PURE__ */ React14.createElement("span", null, typeof name === "string" ? /* @__PURE__ */ React14.createElement(ObjectName, {
name,
dimmed: isNonenumerable
}) : /* @__PURE__ */ React14.createElement(ObjectPreview, {
data: name
}), /* @__PURE__ */ React14.createElement("span", null, ": "), /* @__PURE__ */ React14.createElement(ObjectValue, {
object
}));
};
var createIterator = (showNonenumerable, sortObjectKeys) => {
const objectIterator = function* (data) {
const shouldIterate = typeof data === "object" && data !== null || typeof data === "function";
if (!shouldIterate)
return;
const dataIsArray = Array.isArray(data);
if (!dataIsArray && data[Symbol.iterator]) {
let i = 0;
for (const entry of data) {
if (Array.isArray(entry) && entry.length === 2) {
const [k, v] = entry;
yield {
name: k,
data: v
};
} else {
yield {
name: i.toString(),
data: entry
};
}
i++;
}
} else {
const keys = Object.getOwnPropertyNames(data);
if (sortObjectKeys === true && !dataIsArray) {
keys.sort();
} else if (typeof sortObjectKeys === "function") {
keys.sort(sortObjectKeys);
}
for (const propertyName of keys) {
if (propertyIsEnumerable.call(data, propertyName)) {
const propertyValue = getPropertyValue(data, propertyName);
yield {
name: propertyName || `""`,
data: propertyValue
};
} else if (showNonenumerable) {
let propertyValue;
try {
propertyValue = getPropertyValue(data, propertyName);
} catch (e) {
}
if (propertyValue !== void 0) {
yield {
name: propertyName,
data: propertyValue,
isNonenumerable: true
};
}
}
}
if (showNonenumerable && data !== Object.prototype) {
yield {
name: "__proto__",
data: Object.getPrototypeOf(data),
isNonenumerable: true
};
}
}
};
return objectIterator;
};
var defaultNodeRenderer = ({ depth, name, data, isNonenumerable }) => depth === 0 ? /* @__PURE__ */ React14.createElement(ObjectRootLabel, {
name,
data
}) : /* @__PURE__ */ React14.createElement(ObjectLabel, {
name,
data,
isNonenumerable
});
var ObjectInspector = ({ showNonenumerable = false, sortObjectKeys, nodeRenderer, ...treeViewProps }) => {
const dataIterator = createIterator(showNonenumerable, sortObjectKeys);
const renderer = nodeRenderer ? nodeRenderer : defaultNodeRenderer;
return /* @__PURE__ */ React14.createElement(TreeView, {
nodeRenderer: renderer,
dataIterator,
...treeViewProps
});
};
var themedObjectInspector = themeAcceptor(ObjectInspector);
function getHeaders(data) {
if (typeof data === "object") {
let rowHeaders = [];
if (Array.isArray(data)) {
const nRows = data.length;
rowHeaders = [...Array(nRows).keys()];
} else if (data !== null) {
rowHeaders = Object.keys(data);
}
const colHeaders = rowHeaders.reduce((colHeaders2, rowHeader) => {
const row = data[rowHeader];
if (typeof row === "object" && row !== null) {
const cols = Object.keys(row);
cols.reduce((xs, x) => {
if (!xs.includes(x)) {
xs.push(x);
}
return xs;
}, colHeaders2);
}
return colHeaders2;
}, []);
return {
rowHeaders,
colHeaders
};
}
return void 0;
}
var DataContainer = ({ rows, columns, rowsData }) => {
const styles = useStyles("TableInspectorDataContainer");
const borderStyles = useStyles("TableInspectorLeftBorder");
return /* @__PURE__ */ React14.createElement("div", {
style: styles.div
}, /* @__PURE__ */ React14.createElement("table", {
style: styles.table
}, /* @__PURE__ */ React14.createElement("colgroup", null), /* @__PURE__ */ React14.createElement("tbody", null, rows.map((row, i) => /* @__PURE__ */ React14.createElement("tr", {
key: row,
style: styles.tr
}, /* @__PURE__ */ React14.createElement("td", {
style: { ...styles.td, ...borderStyles.none }
}, row), columns.map((column) => {
const rowData = rowsData[i];
if (typeof rowData === "object" && rowData !== null && hasOwnProperty.call(rowData, column)) {
return /* @__PURE__ */ React14.createElement("td", {
key: column,
style: { ...styles.td, ...borderStyles.solid }
}, /* @__PURE__ */ React14.createElement(ObjectValue, {
object: rowData[column]
}));
} else {
return /* @__PURE__ */ React14.createElement("td", {
key: column,
style: { ...styles.td, ...borderStyles.solid }
});
}
}))))));
};
var SortIconContainer = (props) => /* @__PURE__ */ React14.createElement("div", {
style: {
position: "absolute",
top: 1,
right: 0,
bottom: 1,
display: "flex",
alignItems: "center"
}
}, props.children);
var SortIcon = ({ sortAscending }) => {
const styles = useStyles("TableInspectorSortIcon");
const glyph = sortAscending ? "\u25B2" : "\u25BC";
return /* @__PURE__ */ React14.createElement("div", {
style: styles
}, glyph);
};
var TH = ({
sortAscending = false,
sorted = false,
onClick = void 0,
borderStyle = {},
children,
...thProps
}) => {
const styles = useStyles("TableInspectorTH");
const [hovered, setHovered] = useState(false);
const handleMouseEnter = useCallback(() => setHovered(true), []);
const handleMouseLeave = useCallback(() => setHovered(false), []);
return /* @__PURE__ */ React14.createElement("th", {
...thProps,
style: {
...styles.base,
...borderStyle,
...hovered ? styles.base[":hover"] : {}
},
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
onClick
}, /* @__PURE__ */ React14.createElement("div", {
style: styles.div
}, children), sorted && /* @__PURE__ */ React14.createElement(SortIconContainer, null, /* @__PURE__ */ React14.createElement(SortIcon, {
sortAscending
})));
};
var HeaderContainer = ({
indexColumnText = "(index)",
columns = [],
sorted,
sortIndexColumn,
sortColumn,
sortAscending,
onTHClick,
onIndexTHClick
}) => {
const styles = useStyles("TableInspectorHeaderContainer");
const borderStyles = useStyles("TableInspectorLeftBorder");
return /* @__PURE__ */ React14.createElement("div", {
style: styles.base
}, /* @__PURE__ */ React14.createElement("table", {
style: styles.table
}, /* @__PURE__ */ React14.createElement("tbody", null, /* @__PURE__ */ React14.createElement("tr", null, /* @__PURE__ */ React14.createElement(TH, {
borderStyle: borderStyles.none,
sorted: sorted && sortIndexColumn,
sortAscending,
onClick: onIndexTHClick
}, indexColumnText), columns.map((column) => /* @__PURE__ */ React14.createElement(TH, {
borderStyle: borderStyles.solid,
key: column,
sorted: sorted && sortColumn === column,
sortAscending,
onClick: onTHClick.bind(null, column)
}, column))))));
};
var TableInspector = ({
data,
columns
}) => {
const styles = useStyles("TableInspector");
const [{ sorted, sortIndexColumn, sortColumn, sortAscending }, setState] = useState({
sorted: false,
sortIndexColumn: false,
sortColumn: void 0,
sortAscending: false
});
const handleIndexTHClick = useCallback(() => {
setState(({ sortIndexColumn: sortIndexColumn2, sortAscending: sortAscending2 }) => ({
sorted: true,
sortIndexColumn: true,
sortColumn: void 0,
sortAscending: sortIndexColumn2 ? !sortAscending2 : true
}));
}, []);
const handleTHClick = useCallback((col) => {
setState(({ sortColumn: sortColumn2, sortAscending: sortAscending2 }) => ({
sorted: true,
sortIndexColumn: false,
sortColumn: col,
sortAscending: col === sortColumn2 ? !sortAscending2 : true
}));
}, []);
if (typeof data !== "object" || data === null) {
return /* @__PURE__ */ React14.createElement("div", null);
}
let { rowHeaders, colHeaders } = getHeaders(data);
if (columns !== void 0) {
colHeaders = columns;
}
let rowsData = rowHeaders.map((rowHeader) => data[rowHeader]);
let columnDataWithRowIndexes;
if (sortColumn !== void 0) {
columnDataWithRowIndexes = rowsData.map((rowData, index) => {
if (typeof rowData === "object" && rowData !== null) {
const columnData = rowData[sortColumn];
return [columnData, index];
}
return [void 0, index];
});
} else {
if (sortIndexColumn) {
columnDataWithRowIndexes = rowHeaders.map((rowData, index) => {
const columnData = rowHeaders[index];
return [columnData, index];
});
}
}
if (columnDataWithRowIndexes !== void 0) {
const comparator = (mapper, ascending) => {
return (a, b) => {
const v1 = mapper(a);
const v2 = mapper(b);
const type1 = typeof v1;
const type2 = typeof v2;
const lt = (v12, v22) => {
if (v12 < v22) {
return -1;
} else if (v12 > v22) {
return 1;
} else {
return 0;
}
};
let result;
if (type1 === type2) {
result = lt(v1, v2);
} else {
const order = {
string: 0,
number: 1,
object: 2,
symbol: 3,
boolean: 4,
undefined: 5,
function: 6
};
result = lt(order[type1], order[type2]);
}
if (!ascending)
result = -result;
return result;
};
};
const sortedRowIndexes = columnDataWithRowIndexes.sort(comparator((item) => item[0], sortAscending)).map((item) => item[1]);
rowHeaders = sortedRowIndexes.map((i) => rowHeaders[i]);
rowsData = sortedRowIndexes.map((i) => rowsData[i]);
}
return /* @__PURE__ */ React14.createElement("div", {
style: styles.base
}, /* @__PURE__ */ React14.createElement(HeaderContainer, {
columns: colHeaders,
sorted,
sortIndexColumn,
sortColumn,
sortAscending,
onTHClick: handleTHClick,
onIndexTHClick: handleIndexTHClick
}), /* @__PURE__ */ React14.createElement(DataContainer, {
rows: rowHeaders,
columns: colHeaders,
rowsData
}));
};
var themedTableInspector = themeAcceptor(TableInspector);
var TEXT_NODE_MAX_INLINE_CHARS = 80;
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;
var OpenTag = ({ tagName, attributes, styles }) => {
return /* @__PURE__ */ React14.createElement("span", {
style: styles.base
}, "<", /* @__PURE__ */ React14.createElement("span", {
style: styles.tagName
}, tagName), (() => {
if (attributes) {
const attributeNodes = [];
for (let i = 0; i < attributes.length; i++) {
const attribute = attributes[i];
attributeNodes.push(/* @__PURE__ */ React14.createElement("span", {
key: i
}, " ", /* @__PURE__ */ React14.createElement("span", {
style: styles.htmlAttributeName
}, attribute.name), '="', /* @__PURE__ */ React14.createElement("span", {
style: styles.htmlAttributeValue
}, attribute.value), '"'));
}
return attributeNodes;
}
})(), ">");
};
var CloseTag = ({ tagName, isChildNode = false, styles }) => /* @__PURE__ */ React14.createElement("span", {
style: Object.assign({}, styles.base, isChildNode && styles.offsetLeft)
}, "</", /* @__PURE__ */ React14.createElement("span", {
style: styles.tagName
}, tagName), ">");
var nameByNodeType = {
1: "ELEMENT_NODE",
3: "TEXT_NODE",
7: "PROCESSING_INSTRUCTION_NODE",
8: "COMMENT_NODE",
9: "DOCUMENT_NODE",
10: "DOCUMENT_TYPE_NODE",
11: "DOCUMENT_FRAGMENT_NODE"
};
var DOMNodePreview = ({ isCloseTag, data, expanded }) => {
const styles = useStyles("DOMNodePreview");
if (isCloseTag) {
return /* @__PURE__ */ React14.createElement(CloseTag, {
styles: styles.htmlCloseTag,
isChildNode: true,
tagName: data.tagName
});
}
switch (data.nodeType) {
case Node.ELEMENT_NODE:
return /* @__PURE__ */ React14.createElement("span", null, /* @__PURE__ */ React14.createElement(OpenTag, {
tagName: data.tagName,
attributes: data.attributes,
styles: styles.htmlOpenTag
}), shouldInline(data) ? data.textContent : !expanded && "\u2026", !expanded && /* @__PURE__ */ React14.createElement(CloseTag, {
tagName: data.tagName,
styles: styles.htmlCloseTag
}));
case Node.TEXT_NODE:
return /* @__PURE__ */ React14.createElement("span", null, data.textContent);
case Node.CDATA_SECTION_NODE:
return /* @__PURE__ */ React14.createElement("span", null, "<![CDATA[" + data.textContent + "]]>");
case Node.COMMENT_NODE:
return /* @__PURE__ */ React14.createElement("span", {
style: styles.htmlComment
}, "<!--", data.textContent, "-->");
case Node.PROCESSING_INSTRUCTION_NODE:
return /* @__PURE__ */ React14.createElement("span", null, data.nodeName);
case Node.DOCUMENT_TYPE_NODE:
return /* @__PURE__ */ React14.createElement("span", {
style: styles.htmlDoctype
}, "<!DOCTYPE ", data.name, data.publicId ? ` PUBLIC "${data.publicId}"` : "", !data.publicId && data.systemId ? " SYSTEM" : "", data.systemId ? ` "${data.systemId}"` : "", ">");
case Node.DOCUMENT_NODE:
return /* @__PURE__ */ React14.createElement("span", null, data.nodeName);
case Node.DOCUMENT_FRAGMENT_NODE:
return /* @__PURE__ */ React14.createElement("span", null, data.nodeName);
default:
return /* @__PURE__ */ React14.createElement("span", null, nameByNodeType[data.nodeType]);
}
};
var domIterator = function* (data) {
if (data && data.childNodes) {
const textInlined = shouldInline(data);
if (textInlined) {
return;
}
for (let i = 0; i < data.childNodes.length; i++) {
const node = data.childNodes[i];
if (node.nodeType === Node.TEXT_NODE && node.textContent.trim().length === 0)
continue;
yield {
name: `${node.tagName}[${i}]`,
data: node
};
}
if (data.tagName) {
yield {
name: "CLOSE_TAG",
data: {
tagName: data.tagName
},
isCloseTag: true
};
}
}
};
var DOMInspector = (props) => {
return /* @__PURE__ */ React14.createElement(TreeView, {
nodeRenderer: DOMNodePreview,
dataIterator: domIterator,
...props
});
};
var themedDOMInspector = themeAcceptor(DOMInspector);
var import_is_dom = __toESM(require_is_dom());
var Inspector = ({ table = false, data, ...rest }) => {
if (table) {
return /* @__PURE__ */ React14.createElement(themedTableInspector, {
data,
...rest
});
}
if ((0, import_is_dom.default)(data))
return /* @__PURE__ */ React14.createElement(themedDOMInspector, {
data,
...rest
});
return /* @__PURE__ */ React14.createElement(themedObjectInspector, {
data,
...rest
});
};
// src/experiments/inspect.tsx
var useImperativeHandlePolyfill = (ref, init, deps) => {
useEffect(() => {
if (ref) {
if (typeof ref === "function") {
ref(init());
} else if (typeof ref === "object" && "current" in ref) {
ref.current = init();
}
}
}, deps);
};
var useImperativeHandle = useImperativeHandle$1 || useImperativeHandlePolyfill;
var throttle = (fn, wait) => {
let timeout = null;
return function() {
if (!timeout) {
timeout = setTimeout(() => {
fn.apply(this, arguments);
timeout = null;
}, wait);
}
};
};
var theme3 = {
BASE_FONT_FAMILY: "Menlo, monospace",
BASE_FONT_SIZE: "12px",
BASE_LINE_HEIGHT: 1.2,
BASE_BACKGROUND_COLOR: "none",
BASE_COLOR: "#FFF",
OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
OBJECT_NAME_COLOR: "#FFC799",
OBJECT_VALUE_NULL_COLOR: "#A0A0A0",
OBJECT_VALUE_UNDEFINED_COLOR: "#A0A0A0",
OBJECT_VALUE_REGEXP_COLOR: "#FF8080",
OBJECT_VALUE_STRING_COLOR: "#99FFE4",
OBJECT_VALUE_SYMBOL_COLOR: "#FFC799",
OBJECT_VALUE_NUMBER_COLOR: "#FFC799",
OBJECT_VALUE_BOOLEAN_COLOR: "#FFC799",
OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "#FFC799",
HTML_TAG_COLOR: "#FFC799",
HTML_TAGNAME_COLOR: "#FFC799",
HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
HTML_ATTRIBUTE_NAME_COLOR: "#A0A0A0",
HTML_ATTRIBUTE_VALUE_COLOR: "#99FFE4",
HTML_COMMENT_COLOR: "#8b8b8b94",
HTML_DOCTYPE_COLOR: "#A0A0A0",
ARROW_COLOR: "#A0A0A0",
ARROW_MARGIN_RIGHT: 3,
ARROW_FONT_SIZE: 12,
ARROW_ANIMATION_DURATION: "0",
TREENODE_FONT_FAMILY: "Menlo, monospace",
TREENODE_FONT_SIZE: "11px",
TREENODE_LINE_HEIGHT: 1.2,
TREENODE_PADDING_LEFT: 12,
TABLE_BORDER_COLOR: "#282828",
TABLE_TH_BACKGROUND_COLOR: "#161616",
TABLE_TH_HOVER_COLOR: "#232323",
TABLE_SORT_ICON_COLOR: "#A0A0A0",
TABLE_DATA_BACKGROUND_IMAGE: "none",
TABLE_DATA_BACKGROUND_SIZE: "0"
};
var RawInspector = forwardRef(
({ enabled = true, dangerouslyRunInProduction = false }, ref) => {
const [element, setElement] = useState(null);
const [currentFiber, setCurrentFiber] = useState(null);
const [currentFiberSource, setCurrentFiberSource] = useState(null);
const [rect, setRect] = useState(null);
const [isActive, setIsActive] = useState(true);
const [isEnabled, setIsEnabled] = useState(enabled);
const [position, setPosition] = useState({ top: 0, left: 0 });
const currentCleanedFiber = useMemo(() => {
if (!currentFiber) return null;
const clonedFiber = { ...currentFiber };
for (const key in clonedFiber) {
const value = clonedFiber[key];
if (!value) delete clonedFiber[key];
}
return clonedFiber;
}, [currentFiber]);
useImperativeHandle(ref, () => ({
enable: () => setIsEnabled(true),
disable: () => {
setIsEnabled(false);
setElement(null);
setRect(null);
},
inspectElement: (element2) => {
if (!isEnabled) return;
setElement(element2);
setRect(element2.getBoundingClientRect());
}
}));
useEffect(() => {
(async () => {
if (!element) return;
const fiber = getFiberFromHostInstance(element);
if (!fiber) return;
const latestFiber = getLatestFiber(fiber);
const source = await getFiberSource(latestFiber);
setCurrentFiber(latestFiber);
if (source) {
setCurrentFiberSource(source);
}
})();
}, [element]);
useEffect(() => {
const handleMouseMove = (event) => {
const isActive2 = isInstrumentationActive() || hasRDTHook();
if (!isActive2) {
setIsActive(false);
return;
}
if (!dangerouslyRunInProduction) {
const rdtHook = getRDTHook();
for (const renderer of rdtHook.renderers.values()) {
const buildType = detectReactBuildType(renderer);
if (buildType === "production") {
setIsActive(false);
return;
}
}
}
if (!isEnabled) {
setElement(null);
setRect(null);
return;
}
const element2 = document.elementFromPoint(event.clientX, event.clientY);
if (!element2) return;
setElement(element2);
setRect(element2.getBoundingClientRect());
};
const throttledMouseMove = throttle(handleMouseMove, 16);
document.addEventListener("mousemove", throttledMouseMove);
return () => document.removeEventListener("mousemove", throttledMouseMove);
}, [isEnabled, dangerouslyRunInProduction]);
useEffect(() => {
if (!rect) return;
const padding = 10;
const inspectorWidth = 400;
const inspectorHeight = 320;
let left = rect.left + rect.width + padding;
let top = rect.top;
if (left + inspectorWidth > window.innerWidth) {
left = Math.max(padding, rect.left - inspectorWidth - padding);
}
if (top >= rect.top && top <= rect.bottom) {
if (rect.bottom + inspectorHeight + padding <= window.innerHeight) {
top = rect.bottom + padding;
} else if (rect.top - inspectorHeight - padding >= 0) {
top = rect.top - inspectorHeight - padding;
} else {
top = window.innerHeight - inspectorHeight - padding;
}
}
top = Math.max(
padding,
Math.min(top, window.innerHeight - inspectorHeight - padding)
);
left = Math.max(
padding,
Math.min(left, window.innerWidth - inspectorWidth - padding)
);
setPosition({ top, left });
}, [rect]);
if (!rect || !isActive || !isEnabled) return null;
if (!currentFiber) return null;
return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
"div",
{
className: "inspector-container",
style: {
position: "fixed",
backgroundColor: "#101010",
color: "#FFF",
zIndex: 50,
padding: "1rem",
width: "30ch",
height: "25ch",
transition: "all 150ms ease-in-out",
overflow: "auto",
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.5)",
border: "1px solid #444",
borderRadius: "8px",
opacity: rect ? 1 : 0,
transform: rect ? "translateY(0)" : "translateY(10px)",
pointerEvents: rect ? "auto" : "none",
top: position.top,
left: position.left
}
},
currentFiber && /* @__PURE__ */ React14.createElement(
Inspector,
{
theme: theme3,
data: currentCleanedFiber,
expandLevel: 1,
table: false
}
),
/* @__PURE__ */ React14.createElement(
"div",
{
style: {
position: "absolute",
bottom: "0",
left: "0",
right: "0",
display: "flex",
alignItems: "center",
gap: "1rem",
backgroundColor: "#101010",
padding: "0.75rem 1rem",
borderTop: "1px solid #555",
borderBottomLeftRadius: "8px",
borderBottomRightRadius: "8px",
zIndex: 1e3
}
},
/* @__PURE__ */ React14.createElement(
"div",
{
style: {
fontSize: "0.875rem",
color: "#FFF",
padding: "0.25rem 0.5rem",
borderRadius: "4px",
backgroundColor: "#3a3a3a"
}
},
`<${getDisplayName(currentFiber.type) || "unknown"}>`
),
/* @__PURE__ */ React14.createElement(
"div",
{
style: {
fontSize: "0.75rem",
color: "#CCC"
}
},
currentFiberSource ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, currentFiberSource.fileName.split("/").slice(-2).join("/"), " ", /* @__PURE__ */ React14.createElement("br", null), "@ line ", currentFiberSource.lineNumber, ", column", " ", currentFiberSource.columnNumber) : null
)
)
), /* @__PURE__ */ React14.createElement("style", null, `
.inspector-container::-webkit-scrollbar {
width: 8px;
}
.inspector-container::-webkit-scrollbar-track {
background: #1E1E1E;
border-radius: 8px;
}
.inspector-container::-webkit-scrollbar-thumb {
background: #444;
border-radius: 8px;
}
.inspector-container::-webkit-scrollbar-thumb:hover {
background: #555;
}
`), /* @__PURE__ */ React14.createElement(
"div",
{
style: {
position: "fixed",
zIndex: 40,
pointerEvents: "none",
transition: "all 150ms",
border: "1px dashed #505050",
left: rect.left,
top: rect.top,
width: rect.width,
height: rect.height,
opacity: rect ? 1 : 0
}
}
));
}
);
var Inspector2 = forwardRef(
(props, ref) => {
const [root, setRoot] = useState(null);
useEffect(() => {
const div = document.createElement("div");
document.documentElement.appendChild(div);
const shadowRoot = div.attachShadow({ mode: "open" });
setRoot(shadowRoot);
return () => {
document.documentElement.removeChild(div);
};
}, []);
if (!root) return null;
return ReactDOM.crea