bippy 0.2.2 → 0.2.4

package/dist/inspect.js

@@ -1,6 +1,6 @@
 import './chunk-6TJRMCM3.js';
-import { getFiberFromHostInstance, isCompositeFiber, traverseFiber, getFiberStack, getDisplayName, isInstrumentationActive, getRDTHook, detectReactBuildType } from './chunk-XBNRYX4A.js';
-import React14, { createContext, memo, Children, useContext, useCallback, useState, useLayoutEffect, useEffect, useMemo } from 'react';
+import { getNearestHostFiber, traverseFiber, getFiberStack, getDisplayName, getFiberId, getFiberFromHostInstance, isCompositeFiber, isInstrumentationActive, getRDTHook, detectReactBuildType } from './chunk-MISFWX22.js';
+import React17, { createContext, memo, Children, useContext, useCallback, useState, useLayoutEffect, useEffect, useMemo } from 'react';
 
 /**
  * @license bippy
@@ -429,15 +429,15 @@ var themeAcceptor = (WrappedComponent) => {
           return createTheme(themes_exports[DEFAULT_THEME_NAME]);
       }
     }, [theme3]);
-    return /* @__PURE__ */ React14.createElement(ThemeContext.Provider, {
+    return /* @__PURE__ */ React17.createElement(ThemeContext.Provider, {
       value: themeStyles
-    }, /* @__PURE__ */ React14.createElement(WrappedComponent, {
+    }, /* @__PURE__ */ React17.createElement(WrappedComponent, {
       ...restProps
     }));
   };
   return ThemeAcceptor;
 };
-var Arrow = ({ expanded, styles }) => /* @__PURE__ */ React14.createElement("span", {
+var Arrow = ({ expanded, styles }) => /* @__PURE__ */ React17.createElement("span", {
   style: {
     ...styles.base,
     ...expanded ? styles.expanded : styles.collapsed
@@ -446,7 +446,7 @@ var Arrow = ({ expanded, styles }) => /* @__PURE__ */ React14.createElement("spa
 var TreeNode = memo((props) => {
   props = {
     expanded: true,
-    nodeRenderer: ({ name }) => /* @__PURE__ */ React14.createElement("span", null, name),
+    nodeRenderer: ({ name }) => /* @__PURE__ */ React17.createElement("span", null, name),
     onClick: () => {
     },
     shouldShowArrow: false,
@@ -456,22 +456,22 @@ var TreeNode = memo((props) => {
   const { expanded, onClick, children, nodeRenderer, title, shouldShowArrow, shouldShowPlaceholder } = props;
   const styles = useStyles("TreeNode");
   const NodeRenderer = nodeRenderer;
-  return /* @__PURE__ */ React14.createElement("li", {
+  return /* @__PURE__ */ React17.createElement("li", {
     "aria-expanded": expanded,
     role: "treeitem",
     style: styles.treeNodeBase,
     title
-  }, /* @__PURE__ */ React14.createElement("div", {
+  }, /* @__PURE__ */ React17.createElement("div", {
     style: styles.treeNodePreviewContainer,
     onClick
-  }, shouldShowArrow || Children.count(children) > 0 ? /* @__PURE__ */ React14.createElement(Arrow, {
+  }, shouldShowArrow || Children.count(children) > 0 ? /* @__PURE__ */ React17.createElement(Arrow, {
     expanded,
     styles: styles.treeNodeArrow
-  }) : shouldShowPlaceholder && /* @__PURE__ */ React14.createElement("span", {
+  }) : shouldShowPlaceholder && /* @__PURE__ */ React17.createElement("span", {
     style: styles.treeNodePlaceholder
-  }, "\xA0"), /* @__PURE__ */ React14.createElement(NodeRenderer, {
+  }, "\xA0"), /* @__PURE__ */ React17.createElement(NodeRenderer, {
     ...props
-  })), /* @__PURE__ */ React14.createElement("ol", {
+  })), /* @__PURE__ */ React17.createElement("ol", {
     role: "group",
     style: styles.treeNodeChildNodesContainer
   }, expanded ? children : void 0));
@@ -530,7 +530,7 @@ var ConnectedTreeNode = memo((props) => {
     ...prevExpandedPaths,
     [path]: !expanded
   })), [nodeHasChildNodes, setExpandedPaths, path, expanded]);
-  return /* @__PURE__ */ React14.createElement(TreeNode, {
+  return /* @__PURE__ */ React17.createElement(TreeNode, {
     expanded,
     onClick: handleClick,
     shouldShowArrow: nodeHasChildNodes,
@@ -538,7 +538,7 @@ var ConnectedTreeNode = memo((props) => {
     nodeRenderer,
     ...props
   }, expanded ? [...dataIterator(data)].map(({ name, data: data2, ...renderNodeProps }) => {
-    return /* @__PURE__ */ React14.createElement(ConnectedTreeNode, {
+    return /* @__PURE__ */ React17.createElement(ConnectedTreeNode, {
       name,
       data: data2,
       depth: depth + 1,
@@ -555,12 +555,12 @@ var TreeView = memo(({ name, data, dataIterator, nodeRenderer, expandPaths, expa
   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, {
+  return /* @__PURE__ */ React17.createElement(ExpandedPathsContext.Provider, {
     value: stateAndSetter
-  }, /* @__PURE__ */ React14.createElement("ol", {
+  }, /* @__PURE__ */ React17.createElement("ol", {
     role: "tree",
     style: styles.treeViewOutline
-  }, /* @__PURE__ */ React14.createElement(ConnectedTreeNode, {
+  }, /* @__PURE__ */ React17.createElement(ConnectedTreeNode, {
     name,
     data,
     dataIterator,
@@ -576,7 +576,7 @@ var ObjectName = ({ name, dimmed = false, styles = {} }) => {
     ...dimmed ? themeStyles["dimmed"] : {},
     ...styles
   };
-  return /* @__PURE__ */ React14.createElement("span", {
+  return /* @__PURE__ */ React17.createElement("span", {
     style: appliedStyles
   }, name);
 };
@@ -585,61 +585,61 @@ var ObjectValue = ({ object, styles }) => {
   const mkStyle = (key) => ({ ...themeStyles[key], ...styles });
   switch (typeof object) {
     case "bigint":
-      return /* @__PURE__ */ React14.createElement("span", {
+      return /* @__PURE__ */ React17.createElement("span", {
         style: mkStyle("objectValueNumber")
       }, String(object), "n");
     case "number":
-      return /* @__PURE__ */ React14.createElement("span", {
+      return /* @__PURE__ */ React17.createElement("span", {
         style: mkStyle("objectValueNumber")
       }, String(object));
     case "string":
-      return /* @__PURE__ */ React14.createElement("span", {
+      return /* @__PURE__ */ React17.createElement("span", {
         style: mkStyle("objectValueString")
       }, '"', object, '"');
     case "boolean":
-      return /* @__PURE__ */ React14.createElement("span", {
+      return /* @__PURE__ */ React17.createElement("span", {
         style: mkStyle("objectValueBoolean")
       }, String(object));
     case "undefined":
-      return /* @__PURE__ */ React14.createElement("span", {
+      return /* @__PURE__ */ React17.createElement("span", {
         style: mkStyle("objectValueUndefined")
       }, "undefined");
     case "object":
       if (object === null) {
-        return /* @__PURE__ */ React14.createElement("span", {
+        return /* @__PURE__ */ React17.createElement("span", {
           style: mkStyle("objectValueNull")
         }, "null");
       }
       if (object instanceof Date) {
-        return /* @__PURE__ */ React14.createElement("span", null, object.toString());
+        return /* @__PURE__ */ React17.createElement("span", null, object.toString());
       }
       if (object instanceof RegExp) {
-        return /* @__PURE__ */ React14.createElement("span", {
+        return /* @__PURE__ */ React17.createElement("span", {
           style: mkStyle("objectValueRegExp")
         }, object.toString());
       }
       if (Array.isArray(object)) {
-        return /* @__PURE__ */ React14.createElement("span", null, `Array(${object.length})`);
+        return /* @__PURE__ */ React17.createElement("span", null, `Array(${object.length})`);
       }
       if (!object.constructor) {
-        return /* @__PURE__ */ React14.createElement("span", null, "Object");
+        return /* @__PURE__ */ React17.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__ */ React17.createElement("span", null, `Buffer[${object.length}]`);
       }
-      return /* @__PURE__ */ React14.createElement("span", null, object.constructor.name);
+      return /* @__PURE__ */ React17.createElement("span", null, object.constructor.name);
     case "function":
-      return /* @__PURE__ */ React14.createElement("span", null, /* @__PURE__ */ React14.createElement("span", {
+      return /* @__PURE__ */ React17.createElement("span", null, /* @__PURE__ */ React17.createElement("span", {
         style: mkStyle("objectValueFunctionPrefix")
-      }, "\u0192\xA0"), /* @__PURE__ */ React14.createElement("span", {
+      }, "\u0192\xA0"), /* @__PURE__ */ React17.createElement("span", {
         style: mkStyle("objectValueFunctionName")
       }, object.name, "()"));
     case "symbol":
-      return /* @__PURE__ */ React14.createElement("span", {
+      return /* @__PURE__ */ React17.createElement("span", {
         style: mkStyle("objectValueSymbol")
       }, object.toString());
     default:
-      return /* @__PURE__ */ React14.createElement("span", null);
+      return /* @__PURE__ */ React17.createElement("span", null);
   }
 };
 var hasOwnProperty = Object.prototype.hasOwnProperty;
@@ -665,25 +665,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__ */ React14.createElement(ObjectValue, {
+    return /* @__PURE__ */ React17.createElement(ObjectValue, {
       object
     });
   }
   if (Array.isArray(object)) {
     const maxProperties = styles.arrayMaxProperties;
-    const previewArray = object.slice(0, maxProperties).map((element, index) => /* @__PURE__ */ React14.createElement(ObjectValue, {
+    const previewArray = object.slice(0, maxProperties).map((element, index) => /* @__PURE__ */ React17.createElement(ObjectValue, {
       key: index,
       object: element
     }));
     if (object.length > maxProperties) {
-      previewArray.push(/* @__PURE__ */ React14.createElement("span", {
+      previewArray.push(/* @__PURE__ */ React17.createElement("span", {
         key: "ellipsis"
       }, "\u2026"));
     }
     const arrayLength = object.length;
-    return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("span", {
+    return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("span", {
       style: styles.objectDescription
-    }, arrayLength === 0 ? `` : `(${arrayLength})\xA0`), /* @__PURE__ */ React14.createElement("span", {
+    }, arrayLength === 0 ? `` : `(${arrayLength})\xA0`), /* @__PURE__ */ React17.createElement("span", {
       style: styles.preview
     }, "[", intersperse(previewArray, ", "), "]"));
   } else {
@@ -693,16 +693,16 @@ var ObjectPreview = ({ data }) => {
       if (hasOwnProperty.call(object, propertyName)) {
         let ellipsis;
         if (propertyNodes.length === maxProperties - 1 && Object.keys(object).length > maxProperties) {
-          ellipsis = /* @__PURE__ */ React14.createElement("span", {
+          ellipsis = /* @__PURE__ */ React17.createElement("span", {
             key: "ellipsis"
           }, "\u2026");
         }
         const propertyValue = getPropertyValue(object, propertyName);
-        propertyNodes.push(/* @__PURE__ */ React14.createElement("span", {
+        propertyNodes.push(/* @__PURE__ */ React17.createElement("span", {
           key: propertyName
-        }, /* @__PURE__ */ React14.createElement(ObjectName, {
+        }, /* @__PURE__ */ React17.createElement(ObjectName, {
           name: propertyName || `""`
-        }), ":\xA0", /* @__PURE__ */ React14.createElement(ObjectValue, {
+        }), ":\xA0", /* @__PURE__ */ React17.createElement(ObjectValue, {
           object: propertyValue
         }), ellipsis));
         if (ellipsis)
@@ -710,34 +710,34 @@ var ObjectPreview = ({ data }) => {
       }
     }
     const objectConstructorName = object.constructor ? object.constructor.name : "Object";
-    return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("span", {
+    return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("span", {
       style: styles.objectDescription
-    }, objectConstructorName === "Object" ? "" : `${objectConstructorName} `), /* @__PURE__ */ React14.createElement("span", {
+    }, objectConstructorName === "Object" ? "" : `${objectConstructorName} `), /* @__PURE__ */ React17.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, {
+    return /* @__PURE__ */ React17.createElement("span", null, /* @__PURE__ */ React17.createElement(ObjectName, {
       name
-    }), /* @__PURE__ */ React14.createElement("span", null, ": "), /* @__PURE__ */ React14.createElement(ObjectPreview, {
+    }), /* @__PURE__ */ React17.createElement("span", null, ": "), /* @__PURE__ */ React17.createElement(ObjectPreview, {
       data
     }));
   } else {
-    return /* @__PURE__ */ React14.createElement(ObjectPreview, {
+    return /* @__PURE__ */ React17.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, {
+  return /* @__PURE__ */ React17.createElement("span", null, typeof name === "string" ? /* @__PURE__ */ React17.createElement(ObjectName, {
     name,
     dimmed: isNonenumerable
-  }) : /* @__PURE__ */ React14.createElement(ObjectPreview, {
+  }) : /* @__PURE__ */ React17.createElement(ObjectPreview, {
     data: name
-  }), /* @__PURE__ */ React14.createElement("span", null, ": "), /* @__PURE__ */ React14.createElement(ObjectValue, {
+  }), /* @__PURE__ */ React17.createElement("span", null, ": "), /* @__PURE__ */ React17.createElement(ObjectValue, {
     object
   }));
 };
@@ -804,10 +804,10 @@ var createIterator = (showNonenumerable, sortObjectKeys) => {
   };
   return objectIterator;
 };
-var defaultNodeRenderer = ({ depth, name, data, isNonenumerable }) => depth === 0 ? /* @__PURE__ */ React14.createElement(ObjectRootLabel, {
+var defaultNodeRenderer = ({ depth, name, data, isNonenumerable }) => depth === 0 ? /* @__PURE__ */ React17.createElement(ObjectRootLabel, {
   name,
   data
-}) : /* @__PURE__ */ React14.createElement(ObjectLabel, {
+}) : /* @__PURE__ */ React17.createElement(ObjectLabel, {
   name,
   data,
   isNonenumerable
@@ -815,7 +815,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__ */ React14.createElement(TreeView, {
+  return /* @__PURE__ */ React17.createElement(TreeView, {
     nodeRenderer: renderer,
     dataIterator,
     ...treeViewProps
@@ -854,33 +854,33 @@ function getHeaders(data) {
 var DataContainer = ({ rows, columns, rowsData }) => {
   const styles = useStyles("TableInspectorDataContainer");
   const borderStyles = useStyles("TableInspectorLeftBorder");
-  return /* @__PURE__ */ React14.createElement("div", {
+  return /* @__PURE__ */ React17.createElement("div", {
     style: styles.div
-  }, /* @__PURE__ */ React14.createElement("table", {
+  }, /* @__PURE__ */ React17.createElement("table", {
     style: styles.table
-  }, /* @__PURE__ */ React14.createElement("colgroup", null), /* @__PURE__ */ React14.createElement("tbody", null, rows.map((row, i) => /* @__PURE__ */ React14.createElement("tr", {
+  }, /* @__PURE__ */ React17.createElement("colgroup", null), /* @__PURE__ */ React17.createElement("tbody", null, rows.map((row, i) => /* @__PURE__ */ React17.createElement("tr", {
     key: row,
     style: styles.tr
-  }, /* @__PURE__ */ React14.createElement("td", {
+  }, /* @__PURE__ */ React17.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", {
+      return /* @__PURE__ */ React17.createElement("td", {
         key: column,
         style: { ...styles.td, ...borderStyles.solid }
-      }, /* @__PURE__ */ React14.createElement(ObjectValue, {
+      }, /* @__PURE__ */ React17.createElement(ObjectValue, {
         object: rowData[column]
       }));
     } else {
-      return /* @__PURE__ */ React14.createElement("td", {
+      return /* @__PURE__ */ React17.createElement("td", {
         key: column,
         style: { ...styles.td, ...borderStyles.solid }
       });
     }
   }))))));
 };
-var SortIconContainer = (props) => /* @__PURE__ */ React14.createElement("div", {
+var SortIconContainer = (props) => /* @__PURE__ */ React17.createElement("div", {
   style: {
     position: "absolute",
     top: 1,
@@ -893,7 +893,7 @@ var SortIconContainer = (props) => /* @__PURE__ */ React14.createElement("div",
 var SortIcon = ({ sortAscending }) => {
   const styles = useStyles("TableInspectorSortIcon");
   const glyph = sortAscending ? "\u25B2" : "\u25BC";
-  return /* @__PURE__ */ React14.createElement("div", {
+  return /* @__PURE__ */ React17.createElement("div", {
     style: styles
   }, glyph);
 };
@@ -909,7 +909,7 @@ var TH = ({
   const [hovered, setHovered] = useState(false);
   const handleMouseEnter = useCallback(() => setHovered(true), []);
   const handleMouseLeave = useCallback(() => setHovered(false), []);
-  return /* @__PURE__ */ React14.createElement("th", {
+  return /* @__PURE__ */ React17.createElement("th", {
     ...thProps,
     style: {
       ...styles.base,
@@ -919,9 +919,9 @@ var TH = ({
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     onClick
-  }, /* @__PURE__ */ React14.createElement("div", {
+  }, /* @__PURE__ */ React17.createElement("div", {
     style: styles.div
-  }, children), sorted && /* @__PURE__ */ React14.createElement(SortIconContainer, null, /* @__PURE__ */ React14.createElement(SortIcon, {
+  }, children), sorted && /* @__PURE__ */ React17.createElement(SortIconContainer, null, /* @__PURE__ */ React17.createElement(SortIcon, {
     sortAscending
   })));
 };
@@ -937,16 +937,16 @@ var HeaderContainer = ({
 }) => {
   const styles = useStyles("TableInspectorHeaderContainer");
   const borderStyles = useStyles("TableInspectorLeftBorder");
-  return /* @__PURE__ */ React14.createElement("div", {
+  return /* @__PURE__ */ React17.createElement("div", {
     style: styles.base
-  }, /* @__PURE__ */ React14.createElement("table", {
+  }, /* @__PURE__ */ React17.createElement("table", {
     style: styles.table
-  }, /* @__PURE__ */ React14.createElement("tbody", null, /* @__PURE__ */ React14.createElement("tr", null, /* @__PURE__ */ React14.createElement(TH, {
+  }, /* @__PURE__ */ React17.createElement("tbody", null, /* @__PURE__ */ React17.createElement("tr", null, /* @__PURE__ */ React17.createElement(TH, {
     borderStyle: borderStyles.none,
     sorted: sorted && sortIndexColumn,
     sortAscending,
     onClick: onIndexTHClick
-  }, indexColumnText), columns.map((column) => /* @__PURE__ */ React14.createElement(TH, {
+  }, indexColumnText), columns.map((column) => /* @__PURE__ */ React17.createElement(TH, {
     borderStyle: borderStyles.solid,
     key: column,
     sorted: sorted && sortColumn === column,
@@ -982,7 +982,7 @@ var TableInspector = ({
     }));
   }, []);
   if (typeof data !== "object" || data === null) {
-    return /* @__PURE__ */ React14.createElement("div", null);
+    return /* @__PURE__ */ React17.createElement("div", null);
   }
   let { rowHeaders, colHeaders } = getHeaders(data);
   if (columns !== void 0) {
@@ -1046,9 +1046,9 @@ var TableInspector = ({
     rowHeaders = sortedRowIndexes.map((i) => rowHeaders[i]);
     rowsData = sortedRowIndexes.map((i) => rowsData[i]);
   }
-  return /* @__PURE__ */ React14.createElement("div", {
+  return /* @__PURE__ */ React17.createElement("div", {
     style: styles.base
-  }, /* @__PURE__ */ React14.createElement(HeaderContainer, {
+  }, /* @__PURE__ */ React17.createElement(HeaderContainer, {
     columns: colHeaders,
     sorted,
     sortIndexColumn,
@@ -1056,7 +1056,7 @@ var TableInspector = ({
     sortAscending,
     onTHClick: handleTHClick,
     onIndexTHClick: handleIndexTHClick
-  }), /* @__PURE__ */ React14.createElement(DataContainer, {
+  }), /* @__PURE__ */ React17.createElement(DataContainer, {
     rows: rowHeaders,
     columns: colHeaders,
     rowsData
@@ -1066,20 +1066,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__ */ React14.createElement("span", {
+  return /* @__PURE__ */ React17.createElement("span", {
     style: styles.base
-  }, "<", /* @__PURE__ */ React14.createElement("span", {
+  }, "<", /* @__PURE__ */ React17.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", {
+        attributeNodes.push(/* @__PURE__ */ React17.createElement("span", {
           key: i
-        }, " ", /* @__PURE__ */ React14.createElement("span", {
+        }, " ", /* @__PURE__ */ React17.createElement("span", {
           style: styles.htmlAttributeName
-        }, attribute.name), '="', /* @__PURE__ */ React14.createElement("span", {
+        }, attribute.name), '="', /* @__PURE__ */ React17.createElement("span", {
           style: styles.htmlAttributeValue
         }, attribute.value), '"'));
       }
@@ -1087,9 +1087,9 @@ var OpenTag = ({ tagName, attributes, styles }) => {
     }
   })(), ">");
 };
-var CloseTag = ({ tagName, isChildNode = false, styles }) => /* @__PURE__ */ React14.createElement("span", {
+var CloseTag = ({ tagName, isChildNode = false, styles }) => /* @__PURE__ */ React17.createElement("span", {
   style: Object.assign({}, styles.base, isChildNode && styles.offsetLeft)
-}, "</", /* @__PURE__ */ React14.createElement("span", {
+}, "</", /* @__PURE__ */ React17.createElement("span", {
   style: styles.tagName
 }, tagName), ">");
 var nameByNodeType = {
@@ -1104,7 +1104,7 @@ var nameByNodeType = {
 var DOMNodePreview = ({ isCloseTag, data, expanded }) => {
   const styles = useStyles("DOMNodePreview");
   if (isCloseTag) {
-    return /* @__PURE__ */ React14.createElement(CloseTag, {
+    return /* @__PURE__ */ React17.createElement(CloseTag, {
       styles: styles.htmlCloseTag,
       isChildNode: true,
       tagName: data.tagName
@@ -1112,34 +1112,34 @@ var DOMNodePreview = ({ isCloseTag, data, expanded }) => {
   }
   switch (data.nodeType) {
     case Node.ELEMENT_NODE:
-      return /* @__PURE__ */ React14.createElement("span", null, /* @__PURE__ */ React14.createElement(OpenTag, {
+      return /* @__PURE__ */ React17.createElement("span", null, /* @__PURE__ */ React17.createElement(OpenTag, {
         tagName: data.tagName,
         attributes: data.attributes,
         styles: styles.htmlOpenTag
-      }), shouldInline(data) ? data.textContent : !expanded && "\u2026", !expanded && /* @__PURE__ */ React14.createElement(CloseTag, {
+      }), shouldInline(data) ? data.textContent : !expanded && "\u2026", !expanded && /* @__PURE__ */ React17.createElement(CloseTag, {
         tagName: data.tagName,
         styles: styles.htmlCloseTag
       }));
     case Node.TEXT_NODE:
-      return /* @__PURE__ */ React14.createElement("span", null, data.textContent);
+      return /* @__PURE__ */ React17.createElement("span", null, data.textContent);
     case Node.CDATA_SECTION_NODE:
-      return /* @__PURE__ */ React14.createElement("span", null, "<![CDATA[" + data.textContent + "]]>");
+      return /* @__PURE__ */ React17.createElement("span", null, "<![CDATA[" + data.textContent + "]]>");
     case Node.COMMENT_NODE:
-      return /* @__PURE__ */ React14.createElement("span", {
+      return /* @__PURE__ */ React17.createElement("span", {
         style: styles.htmlComment
       }, "<!--", data.textContent, "-->");
     case Node.PROCESSING_INSTRUCTION_NODE:
-      return /* @__PURE__ */ React14.createElement("span", null, data.nodeName);
+      return /* @__PURE__ */ React17.createElement("span", null, data.nodeName);
     case Node.DOCUMENT_TYPE_NODE:
-      return /* @__PURE__ */ React14.createElement("span", {
+      return /* @__PURE__ */ React17.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);
+      return /* @__PURE__ */ React17.createElement("span", null, data.nodeName);
     case Node.DOCUMENT_FRAGMENT_NODE:
-      return /* @__PURE__ */ React14.createElement("span", null, data.nodeName);
+      return /* @__PURE__ */ React17.createElement("span", null, data.nodeName);
     default:
-      return /* @__PURE__ */ React14.createElement("span", null, nameByNodeType[data.nodeType]);
+      return /* @__PURE__ */ React17.createElement("span", null, nameByNodeType[data.nodeType]);
   }
 };
 var domIterator = function* (data) {
@@ -1169,7 +1169,7 @@ var domIterator = function* (data) {
   }
 };
 var DOMInspector = (props) => {
-  return /* @__PURE__ */ React14.createElement(TreeView, {
+  return /* @__PURE__ */ React17.createElement(TreeView, {
     nodeRenderer: DOMNodePreview,
     dataIterator: domIterator,
     ...props
@@ -1179,17 +1179,17 @@ 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, {
+    return /* @__PURE__ */ React17.createElement(themedTableInspector, {
       data,
       ...rest
     });
   }
   if ((0, import_is_dom.default)(data))
-    return /* @__PURE__ */ React14.createElement(themedDOMInspector, {
+    return /* @__PURE__ */ React17.createElement(themedDOMInspector, {
       data,
       ...rest
     });
-  return /* @__PURE__ */ React14.createElement(themedObjectInspector, {
+  return /* @__PURE__ */ React17.createElement(themedObjectInspector, {
     data,
     ...rest
   });
@@ -1235,10 +1235,17 @@ var Inspector2 = ({
   const [isActive, setIsActive] = useState(true);
   const [isDialogMode, setIsDialogMode] = useState(false);
   const [tooltip, setTooltip] = useState(null);
+  const [selectedFiber, setSelectedFiber] = useState(null);
   const [position, setPosition] = useState({
     top: 0,
     left: 0
   });
+  const getFiberForDisplay = () => {
+    if (selectedFiber) return selectedFiber;
+    const fiber2 = getFiberFromHostInstance(element);
+    if (!fiber2) return null;
+    return fiber2.return && isCompositeFiber(fiber2.return) ? fiber2.return : fiber2;
+  };
   const handlePropertyHover = (_e, propName) => {
     if (!isDialogMode) return;
     const explanation = FIBER_PROP_EXPLANATIONS[propName];
@@ -1287,19 +1294,21 @@ var Inspector2 = ({
       if (!enabled) {
         setElement(null);
         setRect(null);
+        setSelectedFiber(null);
         return;
       }
       const element2 = document.elementFromPoint(event.clientX, event.clientY);
       if (!element2) return;
       setElement(element2);
       setRect(element2.getBoundingClientRect());
+      setSelectedFiber(null);
     };
     const throttledMouseMove = throttle(handleMouseMove, 16);
     document.addEventListener("mousemove", throttledMouseMove);
     return () => {
       document.removeEventListener("mousemove", throttledMouseMove);
     };
-  }, [enabled, isDialogMode]);
+  }, [enabled, isDialogMode, dangerouslyRunInProduction]);
   useEffect(() => {
     if (!rect) return;
     const padding = 10;
@@ -1329,13 +1338,19 @@ var Inspector2 = ({
     );
     setPosition({ top, left });
   }, [rect]);
+  useEffect(() => {
+    if (selectedFiber) {
+      const element2 = getNearestHostFiber(selectedFiber)?.stateNode;
+      if (element2) {
+        setElement(element2);
+        setRect(element2.getBoundingClientRect());
+      }
+    }
+  }, [selectedFiber]);
   if (window.innerWidth < 800 || !rect || !isActive) return null;
-  let fiber = getFiberFromHostInstance(element);
+  const fiber = getFiberForDisplay();
+  if (!fiber) return null;
   let foundInspect = false;
-  if (!fiber) return;
-  if (fiber.return && isCompositeFiber(fiber.return)) {
-    fiber = fiber.return;
-  }
   traverseFiber(
     fiber,
     (innerFiber) => {
@@ -1346,7 +1361,7 @@ var Inspector2 = ({
     },
     true
   );
-  if (foundInspect) return;
+  if (foundInspect) return null;
   const dialogStyle = isDialogMode ? {
     position: "fixed",
     top: "50%",
@@ -1370,10 +1385,7 @@ var Inspector2 = ({
     zIndex: 999
   } : {};
   const fiberStack = fiber ? getFiberStack(fiber) : [];
-  const breadcrumbs = fiberStack.reverse().map(
-    (f) => typeof f.type === "string" ? f.type : getDisplayName(f.type) || null
-  ).filter((name) => name !== null).join(" > ");
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, isDialogMode && /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, isDialogMode && /* @__PURE__ */ React17.createElement(
     "div",
     {
       style: overlayStyle,
@@ -1382,7 +1394,7 @@ var Inspector2 = ({
       role: "button",
       tabIndex: 0
     }
-  ), /* @__PURE__ */ React14.createElement(
+  ), /* @__PURE__ */ React17.createElement(
     "div",
     {
       style: {
@@ -1406,7 +1418,7 @@ var Inspector2 = ({
         ...dialogStyle
       }
     },
-    /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React17.createElement(
       "div",
       {
         style: {
@@ -1416,7 +1428,7 @@ var Inspector2 = ({
           marginBottom: "1ch"
         }
       },
-      /* @__PURE__ */ React14.createElement(
+      /* @__PURE__ */ React17.createElement(
         "h3",
         {
           style: {
@@ -1429,15 +1441,87 @@ var Inspector2 = ({
           }
         },
         `<${typeof fiber.type === "string" ? fiber.type : getDisplayName(fiber.type) || "unknown"}>`,
-        /* @__PURE__ */ React14.createElement(
+        !isDialogMode && /* @__PURE__ */ React17.createElement(
           "span",
           {
             style: { marginLeft: "1ch", opacity: 0.5, fontSize: "0.75rem" }
           },
-          `Press ${isMac ? "\u2318" : "ctrl"}+o to expand`
+          `Press ${isMac ? "\u2318" : "ctrl"}O to expand`
         )
       ),
-      isDialogMode && /* @__PURE__ */ React14.createElement(
+      isDialogMode && fiber.child && /* @__PURE__ */ React17.createElement(
+        "div",
+        {
+          style: {
+            marginTop: "1ch",
+            marginBottom: "1ch",
+            marginRight: "auto",
+            marginLeft: "1ch",
+            fontSize: "0.75rem",
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "0.5ch"
+          }
+        },
+        /* @__PURE__ */ React17.createElement("span", { style: { opacity: 0.5 } }, "Children:"),
+        /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5ch" } }, (() => {
+          const children = [];
+          let currentChild = fiber.child;
+          while (currentChild !== null) {
+            children.push(currentChild);
+            currentChild = currentChild.sibling;
+          }
+          return children.map((child) => {
+            const name = typeof child.type === "string" ? child.type : getDisplayName(child.type) || "unknown";
+            return /* @__PURE__ */ React17.createElement(
+              "button",
+              {
+                key: getFiberId(child),
+                type: "button",
+                onClick: () => {
+                  setSelectedFiber(child);
+                  const element2 = getNearestHostFiber(child)?.stateNode;
+                  if (element2) {
+                    setElement(element2);
+                    setRect(element2.getBoundingClientRect());
+                  }
+                },
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    setSelectedFiber(child);
+                    const element2 = getNearestHostFiber(child)?.stateNode;
+                    if (element2) {
+                      setElement(element2);
+                      setRect(element2.getBoundingClientRect());
+                    }
+                  }
+                },
+                style: {
+                  cursor: "pointer",
+                  padding: "0 0.5ch",
+                  background: "#f5f5f5",
+                  border: "1px solid #eee",
+                  borderRadius: "0.125rem",
+                  fontSize: "inherit",
+                  color: "#666"
+                },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.backgroundColor = "#000";
+                  e.currentTarget.style.color = "#fff";
+                  e.currentTarget.style.borderColor = "#000";
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.backgroundColor = "#f5f5f5";
+                  e.currentTarget.style.color = "#666";
+                  e.currentTarget.style.borderColor = "#eee";
+                }
+              },
+              name
+            );
+          });
+        })())
+      ),
+      isDialogMode && /* @__PURE__ */ React17.createElement(
         "button",
         {
           type: "button",
@@ -1454,7 +1538,68 @@ var Inspector2 = ({
         "\xD7"
       )
     ),
-    /* @__PURE__ */ React14.createElement(
+    isDialogMode && /* @__PURE__ */ React17.createElement(
+      "div",
+      {
+        style: {
+          borderTop: "1px solid #eee",
+          padding: "0.5ch 0",
+          fontSize: "0.75rem",
+          color: "#666",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          marginBottom: "2ch"
+        }
+      },
+      fiberStack.reverse().map((f, i, arr) => {
+        const name = typeof f.type === "string" ? f.type : getDisplayName(f.type) || "unknown";
+        if (!name) return null;
+        return /* @__PURE__ */ React17.createElement(React17.Fragment, { key: getFiberId(f) }, /* @__PURE__ */ React17.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setSelectedFiber(f);
+              const element2 = getNearestHostFiber(f)?.stateNode;
+              if (element2) {
+                setElement(element2);
+                setRect(element2.getBoundingClientRect());
+              }
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                setSelectedFiber(f);
+                const element2 = getNearestHostFiber(f)?.stateNode;
+                if (element2) {
+                  setElement(element2);
+                  setRect(element2.getBoundingClientRect());
+                }
+              }
+            },
+            style: {
+              cursor: "pointer",
+              textDecoration: "underline",
+              color: "#666",
+              background: "none",
+              border: "none",
+              padding: 0,
+              font: "inherit"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = "#000";
+              e.currentTarget.style.color = "#fff";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = "";
+              e.currentTarget.style.color = "#666";
+            }
+          },
+          name
+        ), i < arr.length - 1 && " > ");
+      })
+    ),
+    /* @__PURE__ */ React17.createElement(
       "div",
       {
         onMouseLeave: handlePropertyLeave,
@@ -1463,7 +1608,7 @@ var Inspector2 = ({
           overflow: "auto"
         }
       },
-      /* @__PURE__ */ React14.createElement(
+      /* @__PURE__ */ React17.createElement(
         Inspector,
         {
           data: fiber,
@@ -1471,7 +1616,7 @@ var Inspector2 = ({
           table: false,
           nodeRenderer: (props) => {
             const Component = props.depth === 0 ? ObjectRootLabel : ObjectLabel;
-            return /* @__PURE__ */ React14.createElement(
+            return /* @__PURE__ */ React17.createElement(
               "span",
               {
                 onMouseEnter: (e) => handlePropertyHover(e, props.name),
@@ -1482,7 +1627,7 @@ var Inspector2 = ({
                   fontWeight: FIBER_PROP_EXPLANATIONS[props.name] ? 500 : "normal"
                 }
               },
-              /* @__PURE__ */ React14.createElement(
+              /* @__PURE__ */ React17.createElement(
                 Component,
                 {
                   name: props.name,
@@ -1495,22 +1640,7 @@ var Inspector2 = ({
         }
       )
     ),
-    /* @__PURE__ */ React14.createElement(
-      "div",
-      {
-        style: {
-          borderTop: "1px solid #eee",
-          padding: "0.5ch 0",
-          fontSize: "0.75rem",
-          color: "#666",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis"
-        }
-      },
-      breadcrumbs
-    ),
-    tooltip && /* @__PURE__ */ React14.createElement(
+    tooltip && /* @__PURE__ */ React17.createElement(
       "div",
       {
         style: {
@@ -1528,7 +1658,7 @@ var Inspector2 = ({
       },
       tooltip
     )
-  ), !isDialogMode && /* @__PURE__ */ React14.createElement(
+  ), !isDialogMode && /* @__PURE__ */ React17.createElement(
     "div",
     {
       style: {