bippy 0.3.3 → 0.3.4

package/dist/experiments/inspect.cjs

@@ -2,15 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../chunk-XTFJAVWU.cjs');
-var chunk3O2CJZLJ_cjs = require('../chunk-3O2CJZLJ.cjs');
+var chunk5UPESIXB_cjs = require('../chunk-5UPESIXB.cjs');
+require('../chunk-ZGXPNYXM.cjs');
+var chunkHBEFN4VG_cjs = require('../chunk-HBEFN4VG.cjs');
 require('../chunk-AQ674A4M.cjs');
-var React17 = require('react');
+var React14 = require('react');
 var ReactDOM = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React17__default = /*#__PURE__*/_interopDefault(React17);
+var React14__default = /*#__PURE__*/_interopDefault(React14);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 
 /**
@@ -157,7 +158,7 @@ var theme2 = {
   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 = React17.createContext([{}, () => {
+var ExpandedPathsContext = React14.createContext([{}, () => {
 }]);
 var unselectable = {
   WebkitTouchCallout: "none",
@@ -423,14 +424,14 @@ var createTheme = (theme32) => ({
   }
 });
 var DEFAULT_THEME_NAME = "chromeLight";
-var ThemeContext = React17.createContext(createTheme(themes_exports[DEFAULT_THEME_NAME]));
+var ThemeContext = React14.createContext(createTheme(themes_exports[DEFAULT_THEME_NAME]));
 var useStyles = (baseStylesKey) => {
-  const themeStyles = React17.useContext(ThemeContext);
+  const themeStyles = React14.useContext(ThemeContext);
   return themeStyles[baseStylesKey];
 };
 var themeAcceptor = (WrappedComponent) => {
   const ThemeAcceptor = ({ theme: theme32 = DEFAULT_THEME_NAME, ...restProps }) => {
-    const themeStyles = React17.useMemo(() => {
+    const themeStyles = React14.useMemo(() => {
       switch (Object.prototype.toString.call(theme32)) {
         case "[object String]":
           return createTheme(themes_exports[theme32]);
@@ -440,24 +441,24 @@ var themeAcceptor = (WrappedComponent) => {
           return createTheme(themes_exports[DEFAULT_THEME_NAME]);
       }
     }, [theme32]);
-    return /* @__PURE__ */ React17__default.default.createElement(ThemeContext.Provider, {
+    return /* @__PURE__ */ React14__default.default.createElement(ThemeContext.Provider, {
       value: themeStyles
-    }, /* @__PURE__ */ React17__default.default.createElement(WrappedComponent, {
+    }, /* @__PURE__ */ React14__default.default.createElement(WrappedComponent, {
       ...restProps
     }));
   };
   return ThemeAcceptor;
 };
-var Arrow = ({ expanded, styles }) => /* @__PURE__ */ React17__default.default.createElement("span", {
+var Arrow = ({ expanded, styles }) => /* @__PURE__ */ React14__default.default.createElement("span", {
   style: {
     ...styles.base,
     ...expanded ? styles.expanded : styles.collapsed
   }
 }, "\u25B6");
-var TreeNode = React17.memo((props) => {
+var TreeNode = React14.memo((props) => {
   props = {
     expanded: true,
-    nodeRenderer: ({ name }) => /* @__PURE__ */ React17__default.default.createElement("span", null, name),
+    nodeRenderer: ({ name }) => /* @__PURE__ */ React14__default.default.createElement("span", null, name),
     onClick: () => {
     },
     shouldShowArrow: false,
@@ -467,22 +468,22 @@ var TreeNode = React17.memo((props) => {
   const { expanded, onClick, children, nodeRenderer, title, shouldShowArrow, shouldShowPlaceholder } = props;
   const styles = useStyles("TreeNode");
   const NodeRenderer = nodeRenderer;
-  return /* @__PURE__ */ React17__default.default.createElement("li", {
+  return /* @__PURE__ */ React14__default.default.createElement("li", {
     "aria-expanded": expanded,
     role: "treeitem",
     style: styles.treeNodeBase,
     title
-  }, /* @__PURE__ */ React17__default.default.createElement("div", {
+  }, /* @__PURE__ */ React14__default.default.createElement("div", {
     style: styles.treeNodePreviewContainer,
     onClick
-  }, shouldShowArrow || React17.Children.count(children) > 0 ? /* @__PURE__ */ React17__default.default.createElement(Arrow, {
+  }, shouldShowArrow || React14.Children.count(children) > 0 ? /* @__PURE__ */ React14__default.default.createElement(Arrow, {
     expanded,
     styles: styles.treeNodeArrow
-  }) : shouldShowPlaceholder && /* @__PURE__ */ React17__default.default.createElement("span", {
+  }) : shouldShowPlaceholder && /* @__PURE__ */ React14__default.default.createElement("span", {
     style: styles.treeNodePlaceholder
-  }, "\xA0"), /* @__PURE__ */ React17__default.default.createElement(NodeRenderer, {
+  }, "\xA0"), /* @__PURE__ */ React14__default.default.createElement(NodeRenderer, {
     ...props
-  })), /* @__PURE__ */ React17__default.default.createElement("ol", {
+  })), /* @__PURE__ */ React14__default.default.createElement("ol", {
     role: "group",
     style: styles.treeNodeChildNodesContainer
   }, expanded ? children : void 0));
@@ -532,16 +533,16 @@ var getExpandedPaths = (data, dataIterator, expandPaths, expandLevel, prevExpand
     return obj;
   }, { ...prevExpandedPaths });
 };
-var ConnectedTreeNode = React17.memo((props) => {
+var ConnectedTreeNode = React14.memo((props) => {
   const { data, dataIterator, path, depth, nodeRenderer } = props;
-  const [expandedPaths, setExpandedPaths] = React17.useContext(ExpandedPathsContext);
+  const [expandedPaths, setExpandedPaths] = React14.useContext(ExpandedPathsContext);
   const nodeHasChildNodes = hasChildNodes(data, dataIterator);
   const expanded = !!expandedPaths[path];
-  const handleClick = React17.useCallback(() => nodeHasChildNodes && setExpandedPaths((prevExpandedPaths) => ({
+  const handleClick = React14.useCallback(() => nodeHasChildNodes && setExpandedPaths((prevExpandedPaths) => ({
     ...prevExpandedPaths,
     [path]: !expanded
   })), [nodeHasChildNodes, setExpandedPaths, path, expanded]);
-  return /* @__PURE__ */ React17__default.default.createElement(TreeNode, {
+  return /* @__PURE__ */ React14__default.default.createElement(TreeNode, {
     expanded,
     onClick: handleClick,
     shouldShowArrow: nodeHasChildNodes,
@@ -549,7 +550,7 @@ var ConnectedTreeNode = React17.memo((props) => {
     nodeRenderer,
     ...props
   }, expanded ? [...dataIterator(data)].map(({ name, data: data2, ...renderNodeProps }) => {
-    return /* @__PURE__ */ React17__default.default.createElement(ConnectedTreeNode, {
+    return /* @__PURE__ */ React14__default.default.createElement(ConnectedTreeNode, {
       name,
       data: data2,
       depth: depth + 1,
@@ -561,17 +562,17 @@ var ConnectedTreeNode = React17.memo((props) => {
     });
   }) : null);
 });
-var TreeView = React17.memo(({ name, data, dataIterator, nodeRenderer, expandPaths, expandLevel }) => {
+var TreeView = React14.memo(({ name, data, dataIterator, nodeRenderer, expandPaths, expandLevel }) => {
   const styles = useStyles("TreeView");
-  const stateAndSetter = React17.useState({});
+  const stateAndSetter = React14.useState({});
   const [, setExpandedPaths] = stateAndSetter;
-  React17.useLayoutEffect(() => setExpandedPaths((prevExpandedPaths) => getExpandedPaths(data, dataIterator, expandPaths, expandLevel, prevExpandedPaths)), [data, dataIterator, expandPaths, expandLevel]);
-  return /* @__PURE__ */ React17__default.default.createElement(ExpandedPathsContext.Provider, {
+  React14.useLayoutEffect(() => setExpandedPaths((prevExpandedPaths) => getExpandedPaths(data, dataIterator, expandPaths, expandLevel, prevExpandedPaths)), [data, dataIterator, expandPaths, expandLevel]);
+  return /* @__PURE__ */ React14__default.default.createElement(ExpandedPathsContext.Provider, {
     value: stateAndSetter
-  }, /* @__PURE__ */ React17__default.default.createElement("ol", {
+  }, /* @__PURE__ */ React14__default.default.createElement("ol", {
     role: "tree",
     style: styles.treeViewOutline
-  }, /* @__PURE__ */ React17__default.default.createElement(ConnectedTreeNode, {
+  }, /* @__PURE__ */ React14__default.default.createElement(ConnectedTreeNode, {
     name,
     data,
     dataIterator,
@@ -587,7 +588,7 @@ var ObjectName = ({ name, dimmed = false, styles = {} }) => {
     ...dimmed ? themeStyles["dimmed"] : {},
     ...styles
   };
-  return /* @__PURE__ */ React17__default.default.createElement("span", {
+  return /* @__PURE__ */ React14__default.default.createElement("span", {
     style: appliedStyles
   }, name);
 };
@@ -596,61 +597,61 @@ var ObjectValue = ({ object, styles }) => {
   const mkStyle = (key) => ({ ...themeStyles[key], ...styles });
   switch (typeof object) {
     case "bigint":
-      return /* @__PURE__ */ React17__default.default.createElement("span", {
+      return /* @__PURE__ */ React14__default.default.createElement("span", {
         style: mkStyle("objectValueNumber")
       }, String(object), "n");
     case "number":
-      return /* @__PURE__ */ React17__default.default.createElement("span", {
+      return /* @__PURE__ */ React14__default.default.createElement("span", {
         style: mkStyle("objectValueNumber")
       }, String(object));
     case "string":
-      return /* @__PURE__ */ React17__default.default.createElement("span", {
+      return /* @__PURE__ */ React14__default.default.createElement("span", {
         style: mkStyle("objectValueString")
       }, '"', object, '"');
     case "boolean":
-      return /* @__PURE__ */ React17__default.default.createElement("span", {
+      return /* @__PURE__ */ React14__default.default.createElement("span", {
         style: mkStyle("objectValueBoolean")
       }, String(object));
     case "undefined":
-      return /* @__PURE__ */ React17__default.default.createElement("span", {
+      return /* @__PURE__ */ React14__default.default.createElement("span", {
         style: mkStyle("objectValueUndefined")
       }, "undefined");
     case "object":
       if (object === null) {
-        return /* @__PURE__ */ React17__default.default.createElement("span", {
+        return /* @__PURE__ */ React14__default.default.createElement("span", {
           style: mkStyle("objectValueNull")
         }, "null");
       }
       if (object instanceof Date) {
-        return /* @__PURE__ */ React17__default.default.createElement("span", null, object.toString());
+        return /* @__PURE__ */ React14__default.default.createElement("span", null, object.toString());
       }
       if (object instanceof RegExp) {
-        return /* @__PURE__ */ React17__default.default.createElement("span", {
+        return /* @__PURE__ */ React14__default.default.createElement("span", {
           style: mkStyle("objectValueRegExp")
         }, object.toString());
       }
       if (Array.isArray(object)) {
-        return /* @__PURE__ */ React17__default.default.createElement("span", null, `Array(${object.length})`);
+        return /* @__PURE__ */ React14__default.default.createElement("span", null, `Array(${object.length})`);
       }
       if (!object.constructor) {
-        return /* @__PURE__ */ React17__default.default.createElement("span", null, "Object");
+        return /* @__PURE__ */ React14__default.default.createElement("span", null, "Object");
       }
       if (typeof object.constructor.isBuffer === "function" && object.constructor.isBuffer(object)) {
-        return /* @__PURE__ */ React17__default.default.createElement("span", null, `Buffer[${object.length}]`);
+        return /* @__PURE__ */ React14__default.default.createElement("span", null, `Buffer[${object.length}]`);
       }
-      return /* @__PURE__ */ React17__default.default.createElement("span", null, object.constructor.name);
+      return /* @__PURE__ */ React14__default.default.createElement("span", null, object.constructor.name);
     case "function":
-      return /* @__PURE__ */ React17__default.default.createElement("span", null, /* @__PURE__ */ React17__default.default.createElement("span", {
+      return /* @__PURE__ */ React14__default.default.createElement("span", null, /* @__PURE__ */ React14__default.default.createElement("span", {
         style: mkStyle("objectValueFunctionPrefix")
-      }, "\u0192\xA0"), /* @__PURE__ */ React17__default.default.createElement("span", {
+      }, "\u0192\xA0"), /* @__PURE__ */ React14__default.default.createElement("span", {
         style: mkStyle("objectValueFunctionName")
       }, object.name, "()"));
     case "symbol":
-      return /* @__PURE__ */ React17__default.default.createElement("span", {
+      return /* @__PURE__ */ React14__default.default.createElement("span", {
         style: mkStyle("objectValueSymbol")
       }, object.toString());
     default:
-      return /* @__PURE__ */ React17__default.default.createElement("span", null);
+      return /* @__PURE__ */ React14__default.default.createElement("span", null);
   }
 };
 var hasOwnProperty = Object.prototype.hasOwnProperty;
@@ -676,25 +677,25 @@ var ObjectPreview = ({ data }) => {
   const styles = useStyles("ObjectPreview");
   const object = data;
   if (typeof object !== "object" || object === null || object instanceof Date || object instanceof RegExp) {
-    return /* @__PURE__ */ React17__default.default.createElement(ObjectValue, {
+    return /* @__PURE__ */ React14__default.default.createElement(ObjectValue, {
       object
     });
   }
   if (Array.isArray(object)) {
     const maxProperties = styles.arrayMaxProperties;
-    const previewArray = object.slice(0, maxProperties).map((element, index) => /* @__PURE__ */ React17__default.default.createElement(ObjectValue, {
+    const previewArray = object.slice(0, maxProperties).map((element, index) => /* @__PURE__ */ React14__default.default.createElement(ObjectValue, {
       key: index,
       object: element
     }));
     if (object.length > maxProperties) {
-      previewArray.push(/* @__PURE__ */ React17__default.default.createElement("span", {
+      previewArray.push(/* @__PURE__ */ React14__default.default.createElement("span", {
         key: "ellipsis"
       }, "\u2026"));
     }
     const arrayLength = object.length;
-    return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, null, /* @__PURE__ */ React17__default.default.createElement("span", {
+    return /* @__PURE__ */ React14__default.default.createElement(React14__default.default.Fragment, null, /* @__PURE__ */ React14__default.default.createElement("span", {
       style: styles.objectDescription
-    }, arrayLength === 0 ? `` : `(${arrayLength})\xA0`), /* @__PURE__ */ React17__default.default.createElement("span", {
+    }, arrayLength === 0 ? `` : `(${arrayLength})\xA0`), /* @__PURE__ */ React14__default.default.createElement("span", {
       style: styles.preview
     }, "[", intersperse(previewArray, ", "), "]"));
   } else {
@@ -704,16 +705,16 @@ var ObjectPreview = ({ data }) => {
       if (hasOwnProperty.call(object, propertyName)) {
         let ellipsis;
         if (propertyNodes.length === maxProperties - 1 && Object.keys(object).length > maxProperties) {
-          ellipsis = /* @__PURE__ */ React17__default.default.createElement("span", {
+          ellipsis = /* @__PURE__ */ React14__default.default.createElement("span", {
             key: "ellipsis"
           }, "\u2026");
         }
         const propertyValue = getPropertyValue(object, propertyName);
-        propertyNodes.push(/* @__PURE__ */ React17__default.default.createElement("span", {
+        propertyNodes.push(/* @__PURE__ */ React14__default.default.createElement("span", {
           key: propertyName
-        }, /* @__PURE__ */ React17__default.default.createElement(ObjectName, {
+        }, /* @__PURE__ */ React14__default.default.createElement(ObjectName, {
           name: propertyName || `""`
-        }), ":\xA0", /* @__PURE__ */ React17__default.default.createElement(ObjectValue, {
+        }), ":\xA0", /* @__PURE__ */ React14__default.default.createElement(ObjectValue, {
           object: propertyValue
         }), ellipsis));
         if (ellipsis)
@@ -721,34 +722,34 @@ var ObjectPreview = ({ data }) => {
       }
     }
     const objectConstructorName = object.constructor ? object.constructor.name : "Object";
-    return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, null, /* @__PURE__ */ React17__default.default.createElement("span", {
+    return /* @__PURE__ */ React14__default.default.createElement(React14__default.default.Fragment, null, /* @__PURE__ */ React14__default.default.createElement("span", {
       style: styles.objectDescription
-    }, objectConstructorName === "Object" ? "" : `${objectConstructorName} `), /* @__PURE__ */ React17__default.default.createElement("span", {
+    }, objectConstructorName === "Object" ? "" : `${objectConstructorName} `), /* @__PURE__ */ React14__default.default.createElement("span", {
       style: styles.preview
     }, "{", intersperse(propertyNodes, ", "), "}"));
   }
 };
 var ObjectRootLabel = ({ name, data }) => {
   if (typeof name === "string") {
-    return /* @__PURE__ */ React17__default.default.createElement("span", null, /* @__PURE__ */ React17__default.default.createElement(ObjectName, {
+    return /* @__PURE__ */ React14__default.default.createElement("span", null, /* @__PURE__ */ React14__default.default.createElement(ObjectName, {
       name
-    }), /* @__PURE__ */ React17__default.default.createElement("span", null, ": "), /* @__PURE__ */ React17__default.default.createElement(ObjectPreview, {
+    }), /* @__PURE__ */ React14__default.default.createElement("span", null, ": "), /* @__PURE__ */ React14__default.default.createElement(ObjectPreview, {
       data
     }));
   } else {
-    return /* @__PURE__ */ React17__default.default.createElement(ObjectPreview, {
+    return /* @__PURE__ */ React14__default.default.createElement(ObjectPreview, {
       data
     });
   }
 };
 var ObjectLabel = ({ name, data, isNonenumerable = false }) => {
   const object = data;
-  return /* @__PURE__ */ React17__default.default.createElement("span", null, typeof name === "string" ? /* @__PURE__ */ React17__default.default.createElement(ObjectName, {
+  return /* @__PURE__ */ React14__default.default.createElement("span", null, typeof name === "string" ? /* @__PURE__ */ React14__default.default.createElement(ObjectName, {
     name,
     dimmed: isNonenumerable
-  }) : /* @__PURE__ */ React17__default.default.createElement(ObjectPreview, {
+  }) : /* @__PURE__ */ React14__default.default.createElement(ObjectPreview, {
     data: name
-  }), /* @__PURE__ */ React17__default.default.createElement("span", null, ": "), /* @__PURE__ */ React17__default.default.createElement(ObjectValue, {
+  }), /* @__PURE__ */ React14__default.default.createElement("span", null, ": "), /* @__PURE__ */ React14__default.default.createElement(ObjectValue, {
     object
   }));
 };
@@ -815,10 +816,10 @@ var createIterator = (showNonenumerable, sortObjectKeys) => {
   };
   return objectIterator;
 };
-var defaultNodeRenderer = ({ depth, name, data, isNonenumerable }) => depth === 0 ? /* @__PURE__ */ React17__default.default.createElement(ObjectRootLabel, {
+var defaultNodeRenderer = ({ depth, name, data, isNonenumerable }) => depth === 0 ? /* @__PURE__ */ React14__default.default.createElement(ObjectRootLabel, {
   name,
   data
-}) : /* @__PURE__ */ React17__default.default.createElement(ObjectLabel, {
+}) : /* @__PURE__ */ React14__default.default.createElement(ObjectLabel, {
   name,
   data,
   isNonenumerable
@@ -826,7 +827,7 @@ var defaultNodeRenderer = ({ depth, name, data, isNonenumerable }) => depth ===
 var ObjectInspector = ({ showNonenumerable = false, sortObjectKeys, nodeRenderer, ...treeViewProps }) => {
   const dataIterator = createIterator(showNonenumerable, sortObjectKeys);
   const renderer = nodeRenderer ? nodeRenderer : defaultNodeRenderer;
-  return /* @__PURE__ */ React17__default.default.createElement(TreeView, {
+  return /* @__PURE__ */ React14__default.default.createElement(TreeView, {
     nodeRenderer: renderer,
     dataIterator,
     ...treeViewProps
@@ -865,33 +866,33 @@ function getHeaders(data) {
 var DataContainer = ({ rows, columns, rowsData }) => {
   const styles = useStyles("TableInspectorDataContainer");
   const borderStyles = useStyles("TableInspectorLeftBorder");
-  return /* @__PURE__ */ React17__default.default.createElement("div", {
+  return /* @__PURE__ */ React14__default.default.createElement("div", {
     style: styles.div
-  }, /* @__PURE__ */ React17__default.default.createElement("table", {
+  }, /* @__PURE__ */ React14__default.default.createElement("table", {
     style: styles.table
-  }, /* @__PURE__ */ React17__default.default.createElement("colgroup", null), /* @__PURE__ */ React17__default.default.createElement("tbody", null, rows.map((row, i) => /* @__PURE__ */ React17__default.default.createElement("tr", {
+  }, /* @__PURE__ */ React14__default.default.createElement("colgroup", null), /* @__PURE__ */ React14__default.default.createElement("tbody", null, rows.map((row, i) => /* @__PURE__ */ React14__default.default.createElement("tr", {
     key: row,
     style: styles.tr
-  }, /* @__PURE__ */ React17__default.default.createElement("td", {
+  }, /* @__PURE__ */ React14__default.default.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__ */ React17__default.default.createElement("td", {
+      return /* @__PURE__ */ React14__default.default.createElement("td", {
         key: column,
         style: { ...styles.td, ...borderStyles.solid }
-      }, /* @__PURE__ */ React17__default.default.createElement(ObjectValue, {
+      }, /* @__PURE__ */ React14__default.default.createElement(ObjectValue, {
         object: rowData[column]
       }));
     } else {
-      return /* @__PURE__ */ React17__default.default.createElement("td", {
+      return /* @__PURE__ */ React14__default.default.createElement("td", {
         key: column,
         style: { ...styles.td, ...borderStyles.solid }
       });
     }
   }))))));
 };
-var SortIconContainer = (props) => /* @__PURE__ */ React17__default.default.createElement("div", {
+var SortIconContainer = (props) => /* @__PURE__ */ React14__default.default.createElement("div", {
   style: {
     position: "absolute",
     top: 1,
@@ -904,7 +905,7 @@ var SortIconContainer = (props) => /* @__PURE__ */ React17__default.default.crea
 var SortIcon = ({ sortAscending }) => {
   const styles = useStyles("TableInspectorSortIcon");
   const glyph = sortAscending ? "\u25B2" : "\u25BC";
-  return /* @__PURE__ */ React17__default.default.createElement("div", {
+  return /* @__PURE__ */ React14__default.default.createElement("div", {
     style: styles
   }, glyph);
 };
@@ -917,10 +918,10 @@ var TH = ({
   ...thProps
 }) => {
   const styles = useStyles("TableInspectorTH");
-  const [hovered, setHovered] = React17.useState(false);
-  const handleMouseEnter = React17.useCallback(() => setHovered(true), []);
-  const handleMouseLeave = React17.useCallback(() => setHovered(false), []);
-  return /* @__PURE__ */ React17__default.default.createElement("th", {
+  const [hovered, setHovered] = React14.useState(false);
+  const handleMouseEnter = React14.useCallback(() => setHovered(true), []);
+  const handleMouseLeave = React14.useCallback(() => setHovered(false), []);
+  return /* @__PURE__ */ React14__default.default.createElement("th", {
     ...thProps,
     style: {
       ...styles.base,
@@ -930,9 +931,9 @@ var TH = ({
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     onClick
-  }, /* @__PURE__ */ React17__default.default.createElement("div", {
+  }, /* @__PURE__ */ React14__default.default.createElement("div", {
     style: styles.div
-  }, children), sorted && /* @__PURE__ */ React17__default.default.createElement(SortIconContainer, null, /* @__PURE__ */ React17__default.default.createElement(SortIcon, {
+  }, children), sorted && /* @__PURE__ */ React14__default.default.createElement(SortIconContainer, null, /* @__PURE__ */ React14__default.default.createElement(SortIcon, {
     sortAscending
   })));
 };
@@ -948,16 +949,16 @@ var HeaderContainer = ({
 }) => {
   const styles = useStyles("TableInspectorHeaderContainer");
   const borderStyles = useStyles("TableInspectorLeftBorder");
-  return /* @__PURE__ */ React17__default.default.createElement("div", {
+  return /* @__PURE__ */ React14__default.default.createElement("div", {
     style: styles.base
-  }, /* @__PURE__ */ React17__default.default.createElement("table", {
+  }, /* @__PURE__ */ React14__default.default.createElement("table", {
     style: styles.table
-  }, /* @__PURE__ */ React17__default.default.createElement("tbody", null, /* @__PURE__ */ React17__default.default.createElement("tr", null, /* @__PURE__ */ React17__default.default.createElement(TH, {
+  }, /* @__PURE__ */ React14__default.default.createElement("tbody", null, /* @__PURE__ */ React14__default.default.createElement("tr", null, /* @__PURE__ */ React14__default.default.createElement(TH, {
     borderStyle: borderStyles.none,
     sorted: sorted && sortIndexColumn,
     sortAscending,
     onClick: onIndexTHClick
-  }, indexColumnText), columns.map((column) => /* @__PURE__ */ React17__default.default.createElement(TH, {
+  }, indexColumnText), columns.map((column) => /* @__PURE__ */ React14__default.default.createElement(TH, {
     borderStyle: borderStyles.solid,
     key: column,
     sorted: sorted && sortColumn === column,
@@ -970,13 +971,13 @@ var TableInspector = ({
   columns
 }) => {
   const styles = useStyles("TableInspector");
-  const [{ sorted, sortIndexColumn, sortColumn, sortAscending }, setState] = React17.useState({
+  const [{ sorted, sortIndexColumn, sortColumn, sortAscending }, setState] = React14.useState({
     sorted: false,
     sortIndexColumn: false,
     sortColumn: void 0,
     sortAscending: false
   });
-  const handleIndexTHClick = React17.useCallback(() => {
+  const handleIndexTHClick = React14.useCallback(() => {
     setState(({ sortIndexColumn: sortIndexColumn2, sortAscending: sortAscending2 }) => ({
       sorted: true,
       sortIndexColumn: true,
@@ -984,7 +985,7 @@ var TableInspector = ({
       sortAscending: sortIndexColumn2 ? !sortAscending2 : true
     }));
   }, []);
-  const handleTHClick = React17.useCallback((col) => {
+  const handleTHClick = React14.useCallback((col) => {
     setState(({ sortColumn: sortColumn2, sortAscending: sortAscending2 }) => ({
       sorted: true,
       sortIndexColumn: false,
@@ -993,7 +994,7 @@ var TableInspector = ({
     }));
   }, []);
   if (typeof data !== "object" || data === null) {
-    return /* @__PURE__ */ React17__default.default.createElement("div", null);
+    return /* @__PURE__ */ React14__default.default.createElement("div", null);
   }
   let { rowHeaders, colHeaders } = getHeaders(data);
   if (columns !== void 0) {
@@ -1057,9 +1058,9 @@ var TableInspector = ({
     rowHeaders = sortedRowIndexes.map((i) => rowHeaders[i]);
     rowsData = sortedRowIndexes.map((i) => rowsData[i]);
   }
-  return /* @__PURE__ */ React17__default.default.createElement("div", {
+  return /* @__PURE__ */ React14__default.default.createElement("div", {
     style: styles.base
-  }, /* @__PURE__ */ React17__default.default.createElement(HeaderContainer, {
+  }, /* @__PURE__ */ React14__default.default.createElement(HeaderContainer, {
     columns: colHeaders,
     sorted,
     sortIndexColumn,
@@ -1067,7 +1068,7 @@ var TableInspector = ({
     sortAscending,
     onTHClick: handleTHClick,
     onIndexTHClick: handleIndexTHClick
-  }), /* @__PURE__ */ React17__default.default.createElement(DataContainer, {
+  }), /* @__PURE__ */ React14__default.default.createElement(DataContainer, {
     rows: rowHeaders,
     columns: colHeaders,
     rowsData
@@ -1077,20 +1078,20 @@ 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__ */ React17__default.default.createElement("span", {
+  return /* @__PURE__ */ React14__default.default.createElement("span", {
     style: styles.base
-  }, "<", /* @__PURE__ */ React17__default.default.createElement("span", {
+  }, "<", /* @__PURE__ */ React14__default.default.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__ */ React17__default.default.createElement("span", {
+        attributeNodes.push(/* @__PURE__ */ React14__default.default.createElement("span", {
           key: i
-        }, " ", /* @__PURE__ */ React17__default.default.createElement("span", {
+        }, " ", /* @__PURE__ */ React14__default.default.createElement("span", {
           style: styles.htmlAttributeName
-        }, attribute.name), '="', /* @__PURE__ */ React17__default.default.createElement("span", {
+        }, attribute.name), '="', /* @__PURE__ */ React14__default.default.createElement("span", {
           style: styles.htmlAttributeValue
         }, attribute.value), '"'));
       }
@@ -1098,9 +1099,9 @@ var OpenTag = ({ tagName, attributes, styles }) => {
     }
   })(), ">");
 };
-var CloseTag = ({ tagName, isChildNode = false, styles }) => /* @__PURE__ */ React17__default.default.createElement("span", {
+var CloseTag = ({ tagName, isChildNode = false, styles }) => /* @__PURE__ */ React14__default.default.createElement("span", {
   style: Object.assign({}, styles.base, isChildNode && styles.offsetLeft)
-}, "</", /* @__PURE__ */ React17__default.default.createElement("span", {
+}, "</", /* @__PURE__ */ React14__default.default.createElement("span", {
   style: styles.tagName
 }, tagName), ">");
 var nameByNodeType = {
@@ -1115,7 +1116,7 @@ var nameByNodeType = {
 var DOMNodePreview = ({ isCloseTag, data, expanded }) => {
   const styles = useStyles("DOMNodePreview");
   if (isCloseTag) {
-    return /* @__PURE__ */ React17__default.default.createElement(CloseTag, {
+    return /* @__PURE__ */ React14__default.default.createElement(CloseTag, {
       styles: styles.htmlCloseTag,
       isChildNode: true,
       tagName: data.tagName
@@ -1123,34 +1124,34 @@ var DOMNodePreview = ({ isCloseTag, data, expanded }) => {
   }
   switch (data.nodeType) {
     case Node.ELEMENT_NODE:
-      return /* @__PURE__ */ React17__default.default.createElement("span", null, /* @__PURE__ */ React17__default.default.createElement(OpenTag, {
+      return /* @__PURE__ */ React14__default.default.createElement("span", null, /* @__PURE__ */ React14__default.default.createElement(OpenTag, {
         tagName: data.tagName,
         attributes: data.attributes,
         styles: styles.htmlOpenTag
-      }), shouldInline(data) ? data.textContent : !expanded && "\u2026", !expanded && /* @__PURE__ */ React17__default.default.createElement(CloseTag, {
+      }), shouldInline(data) ? data.textContent : !expanded && "\u2026", !expanded && /* @__PURE__ */ React14__default.default.createElement(CloseTag, {
         tagName: data.tagName,
         styles: styles.htmlCloseTag
       }));
     case Node.TEXT_NODE:
-      return /* @__PURE__ */ React17__default.default.createElement("span", null, data.textContent);
+      return /* @__PURE__ */ React14__default.default.createElement("span", null, data.textContent);
     case Node.CDATA_SECTION_NODE:
-      return /* @__PURE__ */ React17__default.default.createElement("span", null, "<![CDATA[" + data.textContent + "]]>");
+      return /* @__PURE__ */ React14__default.default.createElement("span", null, "<![CDATA[" + data.textContent + "]]>");
     case Node.COMMENT_NODE:
-      return /* @__PURE__ */ React17__default.default.createElement("span", {
+      return /* @__PURE__ */ React14__default.default.createElement("span", {
         style: styles.htmlComment
       }, "<!--", data.textContent, "-->");
     case Node.PROCESSING_INSTRUCTION_NODE:
-      return /* @__PURE__ */ React17__default.default.createElement("span", null, data.nodeName);
+      return /* @__PURE__ */ React14__default.default.createElement("span", null, data.nodeName);
     case Node.DOCUMENT_TYPE_NODE:
-      return /* @__PURE__ */ React17__default.default.createElement("span", {
+      return /* @__PURE__ */ React14__default.default.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__ */ React17__default.default.createElement("span", null, data.nodeName);
+      return /* @__PURE__ */ React14__default.default.createElement("span", null, data.nodeName);
     case Node.DOCUMENT_FRAGMENT_NODE:
-      return /* @__PURE__ */ React17__default.default.createElement("span", null, data.nodeName);
+      return /* @__PURE__ */ React14__default.default.createElement("span", null, data.nodeName);
     default:
-      return /* @__PURE__ */ React17__default.default.createElement("span", null, nameByNodeType[data.nodeType]);
+      return /* @__PURE__ */ React14__default.default.createElement("span", null, nameByNodeType[data.nodeType]);
   }
 };
 var domIterator = function* (data) {
@@ -1180,7 +1181,7 @@ var domIterator = function* (data) {
   }
 };
 var DOMInspector = (props) => {
-  return /* @__PURE__ */ React17__default.default.createElement(TreeView, {
+  return /* @__PURE__ */ React14__default.default.createElement(TreeView, {
     nodeRenderer: DOMNodePreview,
     dataIterator: domIterator,
     ...props
@@ -1190,41 +1191,35 @@ var themedDOMInspector = themeAcceptor(DOMInspector);
 var import_is_dom = __toESM(require_is_dom());
 var Inspector = ({ table = false, data, ...rest }) => {
   if (table) {
-    return /* @__PURE__ */ React17__default.default.createElement(themedTableInspector, {
+    return /* @__PURE__ */ React14__default.default.createElement(themedTableInspector, {
       data,
       ...rest
     });
   }
   if ((0, import_is_dom.default)(data))
-    return /* @__PURE__ */ React17__default.default.createElement(themedDOMInspector, {
+    return /* @__PURE__ */ React14__default.default.createElement(themedDOMInspector, {
       data,
       ...rest
     });
-  return /* @__PURE__ */ React17__default.default.createElement(themedObjectInspector, {
+  return /* @__PURE__ */ React14__default.default.createElement(themedObjectInspector, {
     data,
     ...rest
   });
 };
 
 // src/experiments/inspect.tsx
-var FIBER_PROP_EXPLANATIONS = {
-  tag: "Numeric type identifier for this fiber (e.g. 1=FunctionComponent, 5=HostComponent)",
-  elementType: "The original function/class/element type",
-  type: "The resolved function/class after going through any HOCs",
-  stateNode: "Reference to the actual instance (DOM node, class instance, etc)",
-  return: "Parent fiber",
-  child: "First child fiber",
-  sibling: "Next sibling fiber",
-  index: "Position among siblings",
-  ref: "Ref object or function",
-  pendingProps: "Props that are about to be applied",
-  memoizedProps: "Props from the last render",
-  memoizedState: "State from the last render",
-  dependencies: "Context and other dependencies this fiber subscribes to",
-  flags: "Side-effects flags (e.g. needs update, deletion)",
-  lanes: "Priority lanes for updates",
-  childLanes: "Priority lanes for child updates"
+var useImperativeHandlePolyfill = (ref, init, deps) => {
+  React14.useEffect(() => {
+    if (ref) {
+      if (typeof ref === "function") {
+        ref(init());
+      } else if (typeof ref === "object" && "current" in ref) {
+        ref.current = init();
+      }
+    }
+  }, deps);
 };
+var useImperativeHandle = React14.useImperativeHandle || useImperativeHandlePolyfill;
 var throttle = (fn, wait) => {
   let timeout = null;
   return function() {
@@ -1236,7 +1231,6 @@ var throttle = (fn, wait) => {
     }
   };
 };
-var isMac = typeof navigator !== "undefined" && navigator.platform?.toLowerCase().includes("mac");
 var theme3 = {
   BASE_FONT_FAMILY: "Menlo, monospace",
   BASE_FONT_SIZE: "12px",
@@ -1276,181 +1270,82 @@ var theme3 = {
   TABLE_DATA_BACKGROUND_IMAGE: "none",
   TABLE_DATA_BACKGROUND_SIZE: "0"
 };
-var BackButton = React17__default.default.memo(({ onClick }) => /* @__PURE__ */ React17__default.default.createElement(
-  "button",
-  {
-    type: "button",
-    onClick,
-    style: {
-      padding: "0.5ch 1ch",
-      background: "#161616",
-      border: "1px solid #282828",
-      color: "#FFF",
-      borderRadius: "0.25rem",
-      cursor: "pointer",
-      fontSize: "0.875rem",
-      opacity: 0.8,
-      transition: "opacity 150ms"
-    },
-    onMouseEnter: (e) => {
-      e.currentTarget.style.opacity = "1";
-    },
-    onMouseLeave: (e) => {
-      e.currentTarget.style.opacity = "0.8";
-    }
-  },
-  "\u2190 Back"
-));
-var BreadcrumbButton = React17__default.default.memo(
-  ({
-    name,
-    onClick,
-    onKeyDown
-  }) => /* @__PURE__ */ React17__default.default.createElement(
-    "button",
-    {
-      type: "button",
-      onClick,
-      onKeyDown,
-      style: {
-        cursor: "pointer",
-        textDecoration: "underline",
-        color: "#A0A0A0",
-        background: "none",
-        border: "none",
-        padding: 0,
-        font: "inherit"
-      },
-      onMouseEnter: (e) => {
-        e.currentTarget.style.backgroundColor = "#232323";
-        e.currentTarget.style.color = "#FFF";
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.backgroundColor = "";
-        e.currentTarget.style.color = "#A0A0A0";
+var RawInspector = React14.forwardRef(
+  ({ enabled = true, dangerouslyRunInProduction = false }, ref) => {
+    const [element, setElement] = React14.useState(null);
+    const [currentFiber, setCurrentFiber] = React14.useState(null);
+    const [currentFiberSource, setCurrentFiberSource] = React14.useState(null);
+    const [rect, setRect] = React14.useState(null);
+    const [isActive, setIsActive] = React14.useState(true);
+    const [isEnabled, setIsEnabled] = React14.useState(enabled);
+    const [position, setPosition] = React14.useState({ top: 0, left: 0 });
+    const currentCleanedFiber = React14.useMemo(() => {
+      if (!currentFiber) return null;
+      const clonedFiber = { ...currentFiber };
+      for (const key in clonedFiber) {
+        const value = clonedFiber[key];
+        if (!value) delete clonedFiber[key];
       }
-    },
-    name
-  )
-);
-var CloseButton = React17__default.default.memo(({ onClick }) => /* @__PURE__ */ React17__default.default.createElement(
-  "button",
-  {
-    type: "button",
-    onClick,
-    style: {
-      border: "none",
-      background: "none",
-      cursor: "pointer",
-      padding: "0.5ch",
-      fontSize: "2ch",
-      opacity: 0.5,
-      color: "#FFF"
-    }
-  },
-  "\xD7"
-));
-var RawInspector = React17__default.default.memo(
-  ({ enabled = true, dangerouslyRunInProduction = false }) => {
-    const [element, setElement] = React17.useState(null);
-    const [rect, setRect] = React17.useState(null);
-    const [isActive, setIsActive] = React17.useState(true);
-    const [isDialogMode, setIsDialogMode] = React17.useState(false);
-    const [tooltip, setTooltip] = React17.useState(null);
-    const [selectedFiber, setSelectedFiber] = React17.useState(null);
-    const [position, setPosition] = React17.useState({
-      top: 0,
-      left: 0
-    });
-    const [fiberHistory, setFiberHistory] = React17.useState([]);
-    const getFiberForDisplay = React17.useCallback(() => {
-      if (selectedFiber) return selectedFiber;
-      const fiber2 = chunk3O2CJZLJ_cjs.getFiberFromHostInstance(element);
-      return fiber2;
-    }, [selectedFiber, element]);
-    const handlePropertyHover = (_e, propName) => {
-      if (!isDialogMode) return;
-      const explanation = FIBER_PROP_EXPLANATIONS[propName];
-      setTooltip(explanation || null);
-    };
-    const handlePropertyLeave = () => {
-      setTooltip(null);
-    };
-    const handleClose = React17.useCallback(() => {
-      setIsDialogMode(false);
-      setFiberHistory([]);
-      setTooltip(null);
-      setSelectedFiber(null);
-      setElement(null);
-      setRect(null);
-    }, []);
-    React17.useEffect(() => {
-      const handleKeyDown = (e) => {
-        if (e.key === "o" && (e.metaKey || e.ctrlKey) && rect) {
-          e.preventDefault();
-          const currentFiber = getFiberForDisplay();
-          if (currentFiber) {
-            setFiberHistory([currentFiber]);
-          }
-          setIsDialogMode(true);
-        } else if (e.key === "Escape") {
-          handleClose();
-        }
-      };
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [rect, getFiberForDisplay, handleClose]);
-    React17.useEffect(() => {
-      if (!isDialogMode) {
-        setTooltip(null);
-        setFiberHistory([]);
-        setSelectedFiber(null);
+      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());
       }
-    }, [isDialogMode]);
-    React17.useEffect(() => {
+    }));
+    React14.useEffect(() => {
+      (async () => {
+        if (!element) return;
+        const fiber = chunkHBEFN4VG_cjs.getFiberFromHostInstance(element);
+        if (!fiber) return;
+        const latestFiber = chunkHBEFN4VG_cjs.getLatestFiber(fiber);
+        const source = await chunk5UPESIXB_cjs.getFiberSource(latestFiber);
+        setCurrentFiber(latestFiber);
+        if (source) {
+          setCurrentFiberSource(source);
+        }
+      })();
+    }, [element]);
+    React14.useEffect(() => {
       const handleMouseMove = (event) => {
-        if (isDialogMode) return;
-        const isActive2 = chunk3O2CJZLJ_cjs.isInstrumentationActive() || chunk3O2CJZLJ_cjs.hasRDTHook();
+        const isActive2 = chunkHBEFN4VG_cjs.isInstrumentationActive() || chunkHBEFN4VG_cjs.hasRDTHook();
         if (!isActive2) {
           setIsActive(false);
           return;
         }
         if (!dangerouslyRunInProduction) {
-          const rdtHook = chunk3O2CJZLJ_cjs.getRDTHook();
+          const rdtHook = chunkHBEFN4VG_cjs.getRDTHook();
           for (const renderer of rdtHook.renderers.values()) {
-            const buildType = chunk3O2CJZLJ_cjs.detectReactBuildType(renderer);
+            const buildType = chunkHBEFN4VG_cjs.detectReactBuildType(renderer);
             if (buildType === "production") {
               setIsActive(false);
               return;
             }
           }
         }
-        if (!enabled) {
+        if (!isEnabled) {
           setElement(null);
           setRect(null);
-          setSelectedFiber(null);
           return;
         }
-        if (!isDialogMode) {
-          const element2 = document.elementFromPoint(
-            event.clientX,
-            event.clientY
-          );
-          if (!element2) return;
-          setElement(element2);
-          setRect(element2.getBoundingClientRect());
-          setSelectedFiber(null);
-        }
+        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);
-      };
-    }, [enabled, isDialogMode, dangerouslyRunInProduction]);
-    React17.useEffect(() => {
+      return () => document.removeEventListener("mousemove", throttledMouseMove);
+    }, [isEnabled, dangerouslyRunInProduction]);
+    React14.useEffect(() => {
       if (!rect) return;
       const padding = 10;
       const inspectorWidth = 400;
@@ -1479,239 +1374,100 @@ var RawInspector = React17__default.default.memo(
       );
       setPosition({ top, left });
     }, [rect]);
-    React17.useEffect(() => {
-      if (selectedFiber) {
-        const element2 = chunk3O2CJZLJ_cjs.getNearestHostFiber(selectedFiber)?.stateNode;
-        if (element2) {
-          setElement(element2);
-          setRect(element2.getBoundingClientRect());
-        }
-      }
-    }, [selectedFiber]);
-    const handleBack = () => {
-      const previousFiber = fiberHistory[fiberHistory.length - 1];
-      if (previousFiber) {
-        setFiberHistory((prev) => prev.slice(0, -1));
-        setSelectedFiber(previousFiber);
-      }
-    };
-    if (!rect || !isActive) return null;
-    const fiber = getFiberForDisplay();
-    if (!fiber) return null;
-    let foundInspect = false;
-    chunk3O2CJZLJ_cjs.traverseFiber(
-      fiber,
-      (innerFiber) => {
-        if (innerFiber.type === Inspector2) {
-          foundInspect = true;
-          return true;
-        }
-      },
-      true
-    );
-    if (foundInspect) return null;
-    const dialogStyle = isDialogMode ? {
-      position: "fixed",
-      top: "50%",
-      left: "50%",
-      transform: "translate(-50%, -50%)",
-      width: "80vw",
-      height: "80vh",
-      maxWidth: "none",
-      maxHeight: "none",
-      padding: "2ch",
-      boxShadow: "0 0 0 5px rgba(0, 0, 0, 0.3)",
-      backgroundColor: "#1a1a1a",
-      border: "1px solid #333",
-      zIndex: 1e3
-    } : {};
-    const overlayStyle = isDialogMode ? {
-      position: "fixed",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      backgroundColor: "rgba(0, 0, 0, 0.7)",
-      zIndex: 999
-    } : {};
-    const fiberStack = fiber ? chunk3O2CJZLJ_cjs.getFiberStack(fiber) : [];
-    return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, null, isDialogMode && /* @__PURE__ */ React17__default.default.createElement(
-      "div",
-      {
-        style: overlayStyle,
-        onClick: handleClose,
-        onKeyDown: (e) => {
-          if (e.key === "Escape") {
-            handleClose();
-          }
-        },
-        role: "button",
-        tabIndex: 0
-      }
-    ), /* @__PURE__ */ React17__default.default.createElement(
+    if (!rect || !isActive || !isEnabled) return null;
+    if (!currentFiber) return null;
+    return /* @__PURE__ */ React14__default.default.createElement(React14__default.default.Fragment, null, /* @__PURE__ */ React14__default.default.createElement(
       "div",
       {
+        className: "inspector-container",
         style: {
           position: "fixed",
           backgroundColor: "#101010",
           color: "#FFF",
           zIndex: 50,
-          padding: "1ch",
-          width: "50ch",
-          height: isDialogMode ? "80ch" : "40ch",
-          transition: "all 150ms, z-index 0ms",
-          overflow: "visible",
-          boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.3)",
-          border: "1px solid #282828",
-          top: position.top,
-          left: position.left,
+          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",
-          display: "flex",
-          flexDirection: "column",
-          ...dialogStyle
+          top: position.top,
+          left: position.left
         }
       },
-      /* @__PURE__ */ React17__default.default.createElement(
+      currentFiber && /* @__PURE__ */ React14__default.default.createElement(
+        Inspector,
+        {
+          theme: theme3,
+          data: currentCleanedFiber,
+          expandLevel: 1,
+          table: false
+        }
+      ),
+      /* @__PURE__ */ React14__default.default.createElement(
         "div",
         {
           style: {
+            position: "absolute",
+            bottom: "0",
+            left: "0",
+            right: "0",
             display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center"
+            alignItems: "center",
+            gap: "1rem",
+            backgroundColor: "#101010",
+            padding: "0.75rem 1rem",
+            borderTop: "1px solid #555",
+            borderBottomLeftRadius: "8px",
+            borderBottomRightRadius: "8px",
+            zIndex: 1e3
           }
         },
-        /* @__PURE__ */ React17__default.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "1ch" } }, fiberHistory.length > 0 && /* @__PURE__ */ React17__default.default.createElement(BackButton, { onClick: handleBack }), /* @__PURE__ */ React17__default.default.createElement(
-          "h3",
+        /* @__PURE__ */ React14__default.default.createElement(
+          "div",
           {
             style: {
               fontSize: "0.875rem",
-              backgroundColor: "#161616",
               color: "#FFF",
-              padding: "0 0.5ch",
-              borderRadius: "0.125rem",
-              width: "fit-content",
-              margin: 0
+              padding: "0.25rem 0.5rem",
+              borderRadius: "4px",
+              backgroundColor: "#3a3a3a"
             }
           },
-          `<${typeof fiber.type === "string" ? fiber.type : chunk3O2CJZLJ_cjs.getDisplayName(fiber.type) || "unknown"}>`,
-          !isDialogMode && /* @__PURE__ */ React17__default.default.createElement(
-            "span",
-            {
-              style: {
-                marginLeft: "1ch",
-                opacity: 0.5,
-                fontSize: "0.75rem"
-              }
-            },
-            `Press ${isMac ? "\u2318" : "ctrl"}O to expand`
-          )
-        )),
-        isDialogMode && /* @__PURE__ */ React17__default.default.createElement(CloseButton, { onClick: handleClose })
-      ),
-      isDialogMode && /* @__PURE__ */ React17__default.default.createElement(
-        "div",
-        {
-          style: {
-            borderTop: "1px solid #282828",
-            padding: "0.5ch 0",
-            fontSize: "0.75rem",
-            color: "#A0A0A0",
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "ellipsis"
-          }
-        },
-        fiberStack.reverse().map((f, i, arr) => {
-          const name = typeof f.type === "string" ? f.type : chunk3O2CJZLJ_cjs.getDisplayName(f.type) || "unknown";
-          if (!name) return null;
-          return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, { key: chunk3O2CJZLJ_cjs.getFiberId(f) }, /* @__PURE__ */ React17__default.default.createElement(
-            BreadcrumbButton,
-            {
-              name,
-              onClick: () => {
-                if (selectedFiber) {
-                  setFiberHistory((prev) => [...prev, selectedFiber]);
-                }
-                setSelectedFiber(f);
-                const element2 = chunk3O2CJZLJ_cjs.getNearestHostFiber(f)?.stateNode;
-                if (element2) {
-                  setElement(element2);
-                  setRect(element2.getBoundingClientRect());
-                }
-              },
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  if (selectedFiber) {
-                    setFiberHistory((prev) => [...prev, selectedFiber]);
-                  }
-                  setSelectedFiber(f);
-                  const element2 = chunk3O2CJZLJ_cjs.getNearestHostFiber(f)?.stateNode;
-                  if (element2) {
-                    setElement(element2);
-                    setRect(element2.getBoundingClientRect());
-                  }
-                }
-              }
+          `<${chunkHBEFN4VG_cjs.getDisplayName(currentFiber.type) || "unknown"}>`
+        ),
+        /* @__PURE__ */ React14__default.default.createElement(
+          "div",
+          {
+            style: {
+              fontSize: "0.75rem",
+              color: "#CCC"
             }
-          ), i < arr.length - 1 && " > ");
-        })
-      ),
-      /* @__PURE__ */ React17__default.default.createElement("div", { style: { flex: 1, overflow: "auto" } }, fiber && /* @__PURE__ */ React17__default.default.createElement(
-        Inspector,
-        {
-          theme: theme3,
-          data: fiber,
-          expandLevel: 1,
-          table: false,
-          nodeRenderer: (props) => {
-            const Component = props.depth === 0 ? ObjectRootLabel : ObjectLabel;
-            return /* @__PURE__ */ React17__default.default.createElement(
-              "span",
-              {
-                onMouseEnter: (e) => handlePropertyHover(e, props.name),
-                onMouseLeave: handlePropertyLeave,
-                style: {
-                  cursor: FIBER_PROP_EXPLANATIONS[props.name] ? "help" : "default",
-                  padding: "1px 0",
-                  display: "inline-block",
-                  fontWeight: FIBER_PROP_EXPLANATIONS[props.name] ? 500 : "normal"
-                }
-              },
-              /* @__PURE__ */ React17__default.default.createElement(
-                Component,
-                {
-                  name: props.name,
-                  data: props.data,
-                  isNonenumerable: props.isNonenumerable
-                }
-              )
-            );
+          },
+          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
+        )
+      )
+    ), /* @__PURE__ */ React14__default.default.createElement("style", null, `
+          .inspector-container::-webkit-scrollbar {
+            width: 8px;
           }
-        }
-      )),
-      tooltip && /* @__PURE__ */ React17__default.default.createElement(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            zIndex: 1001,
-            backgroundColor: "#161616",
-            color: "#FFF",
-            bottom: "2ch",
-            right: "2ch",
-            pointerEvents: "none",
-            overflowY: "auto",
-            padding: "1ch",
-            fontSize: "1ch",
-            border: "1px solid #282828",
-            borderRadius: "0.25ch"
+          .inspector-container::-webkit-scrollbar-track {
+            background: #1E1E1E;
+            border-radius: 8px;
           }
-        },
-        tooltip
-      )
-    ), !isDialogMode && /* @__PURE__ */ React17__default.default.createElement(
+          .inspector-container::-webkit-scrollbar-thumb {
+            background: #444;
+            border-radius: 8px;
+          }
+          .inspector-container::-webkit-scrollbar-thumb:hover {
+            background: #555;
+          }
+        `), /* @__PURE__ */ React14__default.default.createElement(
       "div",
       {
         style: {
@@ -1730,20 +1486,22 @@ var RawInspector = React17__default.default.memo(
     ));
   }
 );
-var Inspector2 = React17__default.default.memo(({ ...props }) => {
-  const [root, setRoot] = React17.useState(null);
-  React17.useEffect(() => {
-    const div = document.createElement("div");
-    document.body.appendChild(div);
-    const shadowRoot = div.attachShadow({ mode: "open" });
-    setRoot(shadowRoot);
-    return () => {
-      document.body.removeChild(div);
-    };
-  }, []);
-  if (!root) return null;
-  return ReactDOM__default.default.createPortal(/* @__PURE__ */ React17__default.default.createElement(RawInspector, { ...props }), root);
-});
+var Inspector2 = React14.forwardRef(
+  (props, ref) => {
+    const [root, setRoot] = React14.useState(null);
+    React14.useEffect(() => {
+      const div = document.createElement("div");
+      document.body.appendChild(div);
+      const shadowRoot = div.attachShadow({ mode: "open" });
+      setRoot(shadowRoot);
+      return () => {
+        document.body.removeChild(div);
+      };
+    }, []);
+    if (!root) return null;
+    return ReactDOM__default.default.createPortal(/* @__PURE__ */ React14__default.default.createElement(RawInspector, { ref, ...props }), root);
+  }
+);
 var inspect_default = Inspector2;
 
 exports.Inspector = Inspector2;