bippy 0.2.0 → 0.2.2

package/dist/inspect.cjs

@@ -0,0 +1,1560 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('./chunk-YZYCWAB2.cjs');
+var chunkXCDPKSJZ_cjs = require('./chunk-XCDPKSJZ.cjs');
+var React14 = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React14__default = /*#__PURE__*/_interopDefault(React14);
+
+/**
+ * @license bippy
+ *
+ * Copyright (c) Aiden Bai, Million Software, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(!mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var require_is_object = __commonJS({
+  "node_modules/is-object/index.js"(exports, module) {
+    module.exports = function isObject(x) {
+      return typeof x === "object" && x !== null;
+    };
+  }
+});
+var require_is_window = __commonJS({
+  "node_modules/is-window/index.js"(exports, module) {
+    module.exports = function(obj) {
+      if (obj == null) {
+        return false;
+      }
+      var o = Object(obj);
+      return o === o.window;
+    };
+  }
+});
+var require_is_dom = __commonJS({
+  "node_modules/is-dom/index.js"(exports, module) {
+    var isObject = require_is_object();
+    var isWindow = require_is_window();
+    function isNode(val) {
+      if (!isObject(val) || !isWindow(window) || typeof window.Node !== "function") {
+        return false;
+      }
+      return typeof val.nodeType === "number" && typeof val.nodeName === "string";
+    }
+    module.exports = isNode;
+  }
+});
+var themes_exports = {};
+__export(themes_exports, {
+  chromeDark: () => theme,
+  chromeLight: () => theme2
+});
+var theme = {
+  BASE_FONT_FAMILY: "Menlo, monospace",
+  BASE_FONT_SIZE: "11px",
+  BASE_LINE_HEIGHT: 1.2,
+  BASE_BACKGROUND_COLOR: "rgb(36, 36, 36)",
+  BASE_COLOR: "rgb(213, 213, 213)",
+  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
+  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
+  OBJECT_NAME_COLOR: "rgb(227, 110, 236)",
+  OBJECT_VALUE_NULL_COLOR: "rgb(127, 127, 127)",
+  OBJECT_VALUE_UNDEFINED_COLOR: "rgb(127, 127, 127)",
+  OBJECT_VALUE_REGEXP_COLOR: "rgb(233, 63, 59)",
+  OBJECT_VALUE_STRING_COLOR: "rgb(233, 63, 59)",
+  OBJECT_VALUE_SYMBOL_COLOR: "rgb(233, 63, 59)",
+  OBJECT_VALUE_NUMBER_COLOR: "hsl(252, 100%, 75%)",
+  OBJECT_VALUE_BOOLEAN_COLOR: "hsl(252, 100%, 75%)",
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "rgb(85, 106, 242)",
+  HTML_TAG_COLOR: "rgb(93, 176, 215)",
+  HTML_TAGNAME_COLOR: "rgb(93, 176, 215)",
+  HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
+  HTML_ATTRIBUTE_NAME_COLOR: "rgb(155, 187, 220)",
+  HTML_ATTRIBUTE_VALUE_COLOR: "rgb(242, 151, 102)",
+  HTML_COMMENT_COLOR: "rgb(137, 137, 137)",
+  HTML_DOCTYPE_COLOR: "rgb(192, 192, 192)",
+  ARROW_COLOR: "rgb(145, 145, 145)",
+  ARROW_MARGIN_RIGHT: 3,
+  ARROW_FONT_SIZE: 12,
+  ARROW_ANIMATION_DURATION: "0",
+  TREENODE_FONT_FAMILY: "Menlo, monospace",
+  TREENODE_FONT_SIZE: "11px",
+  TREENODE_LINE_HEIGHT: 1.2,
+  TREENODE_PADDING_LEFT: 12,
+  TABLE_BORDER_COLOR: "rgb(85, 85, 85)",
+  TABLE_TH_BACKGROUND_COLOR: "rgb(44, 44, 44)",
+  TABLE_TH_HOVER_COLOR: "rgb(48, 48, 48)",
+  TABLE_SORT_ICON_COLOR: "black",
+  TABLE_DATA_BACKGROUND_IMAGE: "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(51, 139, 255, 0.0980392) 50%, rgba(51, 139, 255, 0.0980392))",
+  TABLE_DATA_BACKGROUND_SIZE: "128px 32px"
+};
+var theme2 = {
+  BASE_FONT_FAMILY: "Menlo, monospace",
+  BASE_FONT_SIZE: "11px",
+  BASE_LINE_HEIGHT: 1.2,
+  BASE_BACKGROUND_COLOR: "white",
+  BASE_COLOR: "black",
+  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
+  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
+  OBJECT_NAME_COLOR: "rgb(136, 19, 145)",
+  OBJECT_VALUE_NULL_COLOR: "rgb(128, 128, 128)",
+  OBJECT_VALUE_UNDEFINED_COLOR: "rgb(128, 128, 128)",
+  OBJECT_VALUE_REGEXP_COLOR: "rgb(196, 26, 22)",
+  OBJECT_VALUE_STRING_COLOR: "rgb(196, 26, 22)",
+  OBJECT_VALUE_SYMBOL_COLOR: "rgb(196, 26, 22)",
+  OBJECT_VALUE_NUMBER_COLOR: "rgb(28, 0, 207)",
+  OBJECT_VALUE_BOOLEAN_COLOR: "rgb(28, 0, 207)",
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "rgb(13, 34, 170)",
+  HTML_TAG_COLOR: "rgb(168, 148, 166)",
+  HTML_TAGNAME_COLOR: "rgb(136, 18, 128)",
+  HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
+  HTML_ATTRIBUTE_NAME_COLOR: "rgb(153, 69, 0)",
+  HTML_ATTRIBUTE_VALUE_COLOR: "rgb(26, 26, 166)",
+  HTML_COMMENT_COLOR: "rgb(35, 110, 37)",
+  HTML_DOCTYPE_COLOR: "rgb(192, 192, 192)",
+  ARROW_COLOR: "#6e6e6e",
+  ARROW_MARGIN_RIGHT: 3,
+  ARROW_FONT_SIZE: 12,
+  ARROW_ANIMATION_DURATION: "0",
+  TREENODE_FONT_FAMILY: "Menlo, monospace",
+  TREENODE_FONT_SIZE: "11px",
+  TREENODE_LINE_HEIGHT: 1.2,
+  TREENODE_PADDING_LEFT: 12,
+  TABLE_BORDER_COLOR: "#aaa",
+  TABLE_TH_BACKGROUND_COLOR: "#eee",
+  TABLE_TH_HOVER_COLOR: "hsla(0, 0%, 90%, 1)",
+  TABLE_SORT_ICON_COLOR: "#6e6e6e",
+  TABLE_DATA_BACKGROUND_IMAGE: "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
+  TABLE_DATA_BACKGROUND_SIZE: "128px 32px"
+};
+var ExpandedPathsContext = React14.createContext([{}, () => {
+}]);
+var unselectable = {
+  WebkitTouchCallout: "none",
+  WebkitUserSelect: "none",
+  KhtmlUserSelect: "none",
+  MozUserSelect: "none",
+  msUserSelect: "none",
+  OUserSelect: "none",
+  userSelect: "none"
+};
+var createTheme = (theme3) => ({
+  DOMNodePreview: {
+    htmlOpenTag: {
+      base: {
+        color: theme3.HTML_TAG_COLOR
+      },
+      tagName: {
+        color: theme3.HTML_TAGNAME_COLOR,
+        textTransform: theme3.HTML_TAGNAME_TEXT_TRANSFORM
+      },
+      htmlAttributeName: {
+        color: theme3.HTML_ATTRIBUTE_NAME_COLOR
+      },
+      htmlAttributeValue: {
+        color: theme3.HTML_ATTRIBUTE_VALUE_COLOR
+      }
+    },
+    htmlCloseTag: {
+      base: {
+        color: theme3.HTML_TAG_COLOR
+      },
+      offsetLeft: {
+        marginLeft: -theme3.TREENODE_PADDING_LEFT
+      },
+      tagName: {
+        color: theme3.HTML_TAGNAME_COLOR,
+        textTransform: theme3.HTML_TAGNAME_TEXT_TRANSFORM
+      }
+    },
+    htmlComment: {
+      color: theme3.HTML_COMMENT_COLOR
+    },
+    htmlDoctype: {
+      color: theme3.HTML_DOCTYPE_COLOR
+    }
+  },
+  ObjectPreview: {
+    objectDescription: {
+      fontStyle: "italic"
+    },
+    preview: {
+      fontStyle: "italic"
+    },
+    arrayMaxProperties: theme3.OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES,
+    objectMaxProperties: theme3.OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES
+  },
+  ObjectName: {
+    base: {
+      color: theme3.OBJECT_NAME_COLOR
+    },
+    dimmed: {
+      opacity: 0.6
+    }
+  },
+  ObjectValue: {
+    objectValueNull: {
+      color: theme3.OBJECT_VALUE_NULL_COLOR
+    },
+    objectValueUndefined: {
+      color: theme3.OBJECT_VALUE_UNDEFINED_COLOR
+    },
+    objectValueRegExp: {
+      color: theme3.OBJECT_VALUE_REGEXP_COLOR
+    },
+    objectValueString: {
+      color: theme3.OBJECT_VALUE_STRING_COLOR
+    },
+    objectValueSymbol: {
+      color: theme3.OBJECT_VALUE_SYMBOL_COLOR
+    },
+    objectValueNumber: {
+      color: theme3.OBJECT_VALUE_NUMBER_COLOR
+    },
+    objectValueBoolean: {
+      color: theme3.OBJECT_VALUE_BOOLEAN_COLOR
+    },
+    objectValueFunctionPrefix: {
+      color: theme3.OBJECT_VALUE_FUNCTION_PREFIX_COLOR,
+      fontStyle: "italic"
+    },
+    objectValueFunctionName: {
+      fontStyle: "italic"
+    }
+  },
+  TreeView: {
+    treeViewOutline: {
+      padding: 0,
+      margin: 0,
+      listStyleType: "none"
+    }
+  },
+  TreeNode: {
+    treeNodeBase: {
+      color: theme3.BASE_COLOR,
+      backgroundColor: theme3.BASE_BACKGROUND_COLOR,
+      lineHeight: theme3.TREENODE_LINE_HEIGHT,
+      cursor: "default",
+      boxSizing: "border-box",
+      listStyle: "none",
+      fontFamily: theme3.TREENODE_FONT_FAMILY,
+      fontSize: theme3.TREENODE_FONT_SIZE
+    },
+    treeNodePreviewContainer: {},
+    treeNodePlaceholder: {
+      whiteSpace: "pre",
+      fontSize: theme3.ARROW_FONT_SIZE,
+      marginRight: theme3.ARROW_MARGIN_RIGHT,
+      ...unselectable
+    },
+    treeNodeArrow: {
+      base: {
+        color: theme3.ARROW_COLOR,
+        display: "inline-block",
+        fontSize: theme3.ARROW_FONT_SIZE,
+        marginRight: theme3.ARROW_MARGIN_RIGHT,
+        ...parseFloat(theme3.ARROW_ANIMATION_DURATION) > 0 ? {
+          transition: `transform ${theme3.ARROW_ANIMATION_DURATION} ease 0s`
+        } : {},
+        ...unselectable
+      },
+      expanded: {
+        WebkitTransform: "rotateZ(90deg)",
+        MozTransform: "rotateZ(90deg)",
+        transform: "rotateZ(90deg)"
+      },
+      collapsed: {
+        WebkitTransform: "rotateZ(0deg)",
+        MozTransform: "rotateZ(0deg)",
+        transform: "rotateZ(0deg)"
+      }
+    },
+    treeNodeChildNodesContainer: {
+      margin: 0,
+      paddingLeft: theme3.TREENODE_PADDING_LEFT
+    }
+  },
+  TableInspector: {
+    base: {
+      color: theme3.BASE_COLOR,
+      position: "relative",
+      border: `1px solid ${theme3.TABLE_BORDER_COLOR}`,
+      fontFamily: theme3.BASE_FONT_FAMILY,
+      fontSize: theme3.BASE_FONT_SIZE,
+      lineHeight: "120%",
+      boxSizing: "border-box",
+      cursor: "default"
+    }
+  },
+  TableInspectorHeaderContainer: {
+    base: {
+      top: 0,
+      height: "17px",
+      left: 0,
+      right: 0,
+      overflowX: "hidden"
+    },
+    table: {
+      tableLayout: "fixed",
+      borderSpacing: 0,
+      borderCollapse: "separate",
+      height: "100%",
+      width: "100%",
+      margin: 0
+    }
+  },
+  TableInspectorDataContainer: {
+    tr: {
+      display: "table-row"
+    },
+    td: {
+      boxSizing: "border-box",
+      border: "none",
+      height: "16px",
+      verticalAlign: "top",
+      padding: "1px 4px",
+      WebkitUserSelect: "text",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      lineHeight: "14px"
+    },
+    div: {
+      position: "static",
+      top: "17px",
+      bottom: 0,
+      overflowY: "overlay",
+      transform: "translateZ(0)",
+      left: 0,
+      right: 0,
+      overflowX: "hidden"
+    },
+    table: {
+      positon: "static",
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      borderTop: "0 none transparent",
+      margin: 0,
+      backgroundImage: theme3.TABLE_DATA_BACKGROUND_IMAGE,
+      backgroundSize: theme3.TABLE_DATA_BACKGROUND_SIZE,
+      tableLayout: "fixed",
+      borderSpacing: 0,
+      borderCollapse: "separate",
+      width: "100%",
+      fontSize: theme3.BASE_FONT_SIZE,
+      lineHeight: "120%"
+    }
+  },
+  TableInspectorTH: {
+    base: {
+      position: "relative",
+      height: "auto",
+      textAlign: "left",
+      backgroundColor: theme3.TABLE_TH_BACKGROUND_COLOR,
+      borderBottom: `1px solid ${theme3.TABLE_BORDER_COLOR}`,
+      fontWeight: "normal",
+      verticalAlign: "middle",
+      padding: "0 4px",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      lineHeight: "14px",
+      ":hover": {
+        backgroundColor: theme3.TABLE_TH_HOVER_COLOR
+      }
+    },
+    div: {
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      fontSize: theme3.BASE_FONT_SIZE,
+      lineHeight: "120%"
+    }
+  },
+  TableInspectorLeftBorder: {
+    none: {
+      borderLeft: "none"
+    },
+    solid: {
+      borderLeft: `1px solid ${theme3.TABLE_BORDER_COLOR}`
+    }
+  },
+  TableInspectorSortIcon: {
+    display: "block",
+    marginRight: 3,
+    width: 8,
+    height: 7,
+    marginTop: -7,
+    color: theme3.TABLE_SORT_ICON_COLOR,
+    fontSize: 12,
+    ...unselectable
+  }
+});
+var DEFAULT_THEME_NAME = "chromeLight";
+var ThemeContext = React14.createContext(createTheme(themes_exports[DEFAULT_THEME_NAME]));
+var useStyles = (baseStylesKey) => {
+  const themeStyles = React14.useContext(ThemeContext);
+  return themeStyles[baseStylesKey];
+};
+var themeAcceptor = (WrappedComponent) => {
+  const ThemeAcceptor = ({ theme: theme3 = DEFAULT_THEME_NAME, ...restProps }) => {
+    const themeStyles = React14.useMemo(() => {
+      switch (Object.prototype.toString.call(theme3)) {
+        case "[object String]":
+          return createTheme(themes_exports[theme3]);
+        case "[object Object]":
+          return createTheme(theme3);
+        default:
+          return createTheme(themes_exports[DEFAULT_THEME_NAME]);
+      }
+    }, [theme3]);
+    return /* @__PURE__ */ React14__default.default.createElement(ThemeContext.Provider, {
+      value: themeStyles
+    }, /* @__PURE__ */ React14__default.default.createElement(WrappedComponent, {
+      ...restProps
+    }));
+  };
+  return ThemeAcceptor;
+};
+var Arrow = ({ expanded, styles }) => /* @__PURE__ */ React14__default.default.createElement("span", {
+  style: {
+    ...styles.base,
+    ...expanded ? styles.expanded : styles.collapsed
+  }
+}, "\u25B6");
+var TreeNode = React14.memo((props) => {
+  props = {
+    expanded: true,
+    nodeRenderer: ({ name }) => /* @__PURE__ */ React14__default.default.createElement("span", null, name),
+    onClick: () => {
+    },
+    shouldShowArrow: false,
+    shouldShowPlaceholder: true,
+    ...props
+  };
+  const { expanded, onClick, children, nodeRenderer, title, shouldShowArrow, shouldShowPlaceholder } = props;
+  const styles = useStyles("TreeNode");
+  const NodeRenderer = nodeRenderer;
+  return /* @__PURE__ */ React14__default.default.createElement("li", {
+    "aria-expanded": expanded,
+    role: "treeitem",
+    style: styles.treeNodeBase,
+    title
+  }, /* @__PURE__ */ React14__default.default.createElement("div", {
+    style: styles.treeNodePreviewContainer,
+    onClick
+  }, shouldShowArrow || React14.Children.count(children) > 0 ? /* @__PURE__ */ React14__default.default.createElement(Arrow, {
+    expanded,
+    styles: styles.treeNodeArrow
+  }) : shouldShowPlaceholder && /* @__PURE__ */ React14__default.default.createElement("span", {
+    style: styles.treeNodePlaceholder
+  }, "\xA0"), /* @__PURE__ */ React14__default.default.createElement(NodeRenderer, {
+    ...props
+  })), /* @__PURE__ */ React14__default.default.createElement("ol", {
+    role: "group",
+    style: styles.treeNodeChildNodesContainer
+  }, expanded ? children : void 0));
+});
+var DEFAULT_ROOT_PATH = "$";
+var WILDCARD = "*";
+function hasChildNodes(data, dataIterator) {
+  return !dataIterator(data).next().done;
+}
+var wildcardPathsFromLevel = (level) => {
+  return Array.from({ length: level }, (_, i) => [DEFAULT_ROOT_PATH].concat(Array.from({ length: i }, () => "*")).join("."));
+};
+var getExpandedPaths = (data, dataIterator, expandPaths, expandLevel, prevExpandedPaths) => {
+  const wildcardPaths = [].concat(wildcardPathsFromLevel(expandLevel)).concat(expandPaths).filter((path) => typeof path === "string");
+  const expandedPaths = [];
+  wildcardPaths.forEach((wildcardPath) => {
+    const keyPaths = wildcardPath.split(".");
+    const populatePaths = (curData, curPath, depth) => {
+      if (depth === keyPaths.length) {
+        expandedPaths.push(curPath);
+        return;
+      }
+      const key = keyPaths[depth];
+      if (depth === 0) {
+        if (hasChildNodes(curData, dataIterator) && (key === DEFAULT_ROOT_PATH || key === WILDCARD)) {
+          populatePaths(curData, DEFAULT_ROOT_PATH, depth + 1);
+        }
+      } else {
+        if (key === WILDCARD) {
+          for (const { name, data: data2 } of dataIterator(curData)) {
+            if (hasChildNodes(data2, dataIterator)) {
+              populatePaths(data2, `${curPath}.${name}`, depth + 1);
+            }
+          }
+        } else {
+          const value = curData[key];
+          if (hasChildNodes(value, dataIterator)) {
+            populatePaths(value, `${curPath}.${key}`, depth + 1);
+          }
+        }
+      }
+    };
+    populatePaths(data, "", 0);
+  });
+  return expandedPaths.reduce((obj, path) => {
+    obj[path] = true;
+    return obj;
+  }, { ...prevExpandedPaths });
+};
+var ConnectedTreeNode = React14.memo((props) => {
+  const { data, dataIterator, path, depth, nodeRenderer } = props;
+  const [expandedPaths, setExpandedPaths] = React14.useContext(ExpandedPathsContext);
+  const nodeHasChildNodes = hasChildNodes(data, dataIterator);
+  const expanded = !!expandedPaths[path];
+  const handleClick = React14.useCallback(() => nodeHasChildNodes && setExpandedPaths((prevExpandedPaths) => ({
+    ...prevExpandedPaths,
+    [path]: !expanded
+  })), [nodeHasChildNodes, setExpandedPaths, path, expanded]);
+  return /* @__PURE__ */ React14__default.default.createElement(TreeNode, {
+    expanded,
+    onClick: handleClick,
+    shouldShowArrow: nodeHasChildNodes,
+    shouldShowPlaceholder: depth > 0,
+    nodeRenderer,
+    ...props
+  }, expanded ? [...dataIterator(data)].map(({ name, data: data2, ...renderNodeProps }) => {
+    return /* @__PURE__ */ React14__default.default.createElement(ConnectedTreeNode, {
+      name,
+      data: data2,
+      depth: depth + 1,
+      path: `${path}.${name}`,
+      key: name,
+      dataIterator,
+      nodeRenderer,
+      ...renderNodeProps
+    });
+  }) : null);
+});
+var TreeView = React14.memo(({ name, data, dataIterator, nodeRenderer, expandPaths, expandLevel }) => {
+  const styles = useStyles("TreeView");
+  const stateAndSetter = React14.useState({});
+  const [, setExpandedPaths] = stateAndSetter;
+  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__ */ React14__default.default.createElement("ol", {
+    role: "tree",
+    style: styles.treeViewOutline
+  }, /* @__PURE__ */ React14__default.default.createElement(ConnectedTreeNode, {
+    name,
+    data,
+    dataIterator,
+    depth: 0,
+    path: DEFAULT_ROOT_PATH,
+    nodeRenderer
+  })));
+});
+var ObjectName = ({ name, dimmed = false, styles = {} }) => {
+  const themeStyles = useStyles("ObjectName");
+  const appliedStyles = {
+    ...themeStyles.base,
+    ...dimmed ? themeStyles["dimmed"] : {},
+    ...styles
+  };
+  return /* @__PURE__ */ React14__default.default.createElement("span", {
+    style: appliedStyles
+  }, name);
+};
+var ObjectValue = ({ object, styles }) => {
+  const themeStyles = useStyles("ObjectValue");
+  const mkStyle = (key) => ({ ...themeStyles[key], ...styles });
+  switch (typeof object) {
+    case "bigint":
+      return /* @__PURE__ */ React14__default.default.createElement("span", {
+        style: mkStyle("objectValueNumber")
+      }, String(object), "n");
+    case "number":
+      return /* @__PURE__ */ React14__default.default.createElement("span", {
+        style: mkStyle("objectValueNumber")
+      }, String(object));
+    case "string":
+      return /* @__PURE__ */ React14__default.default.createElement("span", {
+        style: mkStyle("objectValueString")
+      }, '"', object, '"');
+    case "boolean":
+      return /* @__PURE__ */ React14__default.default.createElement("span", {
+        style: mkStyle("objectValueBoolean")
+      }, String(object));
+    case "undefined":
+      return /* @__PURE__ */ React14__default.default.createElement("span", {
+        style: mkStyle("objectValueUndefined")
+      }, "undefined");
+    case "object":
+      if (object === null) {
+        return /* @__PURE__ */ React14__default.default.createElement("span", {
+          style: mkStyle("objectValueNull")
+        }, "null");
+      }
+      if (object instanceof Date) {
+        return /* @__PURE__ */ React14__default.default.createElement("span", null, object.toString());
+      }
+      if (object instanceof RegExp) {
+        return /* @__PURE__ */ React14__default.default.createElement("span", {
+          style: mkStyle("objectValueRegExp")
+        }, object.toString());
+      }
+      if (Array.isArray(object)) {
+        return /* @__PURE__ */ React14__default.default.createElement("span", null, `Array(${object.length})`);
+      }
+      if (!object.constructor) {
+        return /* @__PURE__ */ React14__default.default.createElement("span", null, "Object");
+      }
+      if (typeof object.constructor.isBuffer === "function" && object.constructor.isBuffer(object)) {
+        return /* @__PURE__ */ React14__default.default.createElement("span", null, `Buffer[${object.length}]`);
+      }
+      return /* @__PURE__ */ React14__default.default.createElement("span", null, object.constructor.name);
+    case "function":
+      return /* @__PURE__ */ React14__default.default.createElement("span", null, /* @__PURE__ */ React14__default.default.createElement("span", {
+        style: mkStyle("objectValueFunctionPrefix")
+      }, "\u0192\xA0"), /* @__PURE__ */ React14__default.default.createElement("span", {
+        style: mkStyle("objectValueFunctionName")
+      }, object.name, "()"));
+    case "symbol":
+      return /* @__PURE__ */ React14__default.default.createElement("span", {
+        style: mkStyle("objectValueSymbol")
+      }, object.toString());
+    default:
+      return /* @__PURE__ */ React14__default.default.createElement("span", null);
+  }
+};
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var propertyIsEnumerable = Object.prototype.propertyIsEnumerable;
+function getPropertyValue(object, propertyName) {
+  const propertyDescriptor = Object.getOwnPropertyDescriptor(object, propertyName);
+  if (propertyDescriptor.get) {
+    try {
+      return propertyDescriptor.get();
+    } catch {
+      return propertyDescriptor.get;
+    }
+  }
+  return object[propertyName];
+}
+function intersperse(arr, sep) {
+  if (arr.length === 0) {
+    return [];
+  }
+  return arr.slice(1).reduce((xs, x) => xs.concat([sep, x]), [arr[0]]);
+}
+var ObjectPreview = ({ data }) => {
+  const styles = useStyles("ObjectPreview");
+  const object = data;
+  if (typeof object !== "object" || object === null || object instanceof Date || object instanceof RegExp) {
+    return /* @__PURE__ */ React14__default.default.createElement(ObjectValue, {
+      object
+    });
+  }
+  if (Array.isArray(object)) {
+    const maxProperties = styles.arrayMaxProperties;
+    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__ */ React14__default.default.createElement("span", {
+        key: "ellipsis"
+      }, "\u2026"));
+    }
+    const arrayLength = object.length;
+    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__ */ React14__default.default.createElement("span", {
+      style: styles.preview
+    }, "[", intersperse(previewArray, ", "), "]"));
+  } else {
+    const maxProperties = styles.objectMaxProperties;
+    const propertyNodes = [];
+    for (const propertyName in object) {
+      if (hasOwnProperty.call(object, propertyName)) {
+        let ellipsis;
+        if (propertyNodes.length === maxProperties - 1 && Object.keys(object).length > maxProperties) {
+          ellipsis = /* @__PURE__ */ React14__default.default.createElement("span", {
+            key: "ellipsis"
+          }, "\u2026");
+        }
+        const propertyValue = getPropertyValue(object, propertyName);
+        propertyNodes.push(/* @__PURE__ */ React14__default.default.createElement("span", {
+          key: propertyName
+        }, /* @__PURE__ */ React14__default.default.createElement(ObjectName, {
+          name: propertyName || `""`
+        }), ":\xA0", /* @__PURE__ */ React14__default.default.createElement(ObjectValue, {
+          object: propertyValue
+        }), ellipsis));
+        if (ellipsis)
+          break;
+      }
+    }
+    const objectConstructorName = object.constructor ? object.constructor.name : "Object";
+    return /* @__PURE__ */ React14__default.default.createElement(React14__default.default.Fragment, null, /* @__PURE__ */ React14__default.default.createElement("span", {
+      style: styles.objectDescription
+    }, objectConstructorName === "Object" ? "" : `${objectConstructorName} `), /* @__PURE__ */ React14__default.default.createElement("span", {
+      style: styles.preview
+    }, "{", intersperse(propertyNodes, ", "), "}"));
+  }
+};
+var ObjectRootLabel = ({ name, data }) => {
+  if (typeof name === "string") {
+    return /* @__PURE__ */ React14__default.default.createElement("span", null, /* @__PURE__ */ React14__default.default.createElement(ObjectName, {
+      name
+    }), /* @__PURE__ */ React14__default.default.createElement("span", null, ": "), /* @__PURE__ */ React14__default.default.createElement(ObjectPreview, {
+      data
+    }));
+  } else {
+    return /* @__PURE__ */ React14__default.default.createElement(ObjectPreview, {
+      data
+    });
+  }
+};
+var ObjectLabel = ({ name, data, isNonenumerable = false }) => {
+  const object = data;
+  return /* @__PURE__ */ React14__default.default.createElement("span", null, typeof name === "string" ? /* @__PURE__ */ React14__default.default.createElement(ObjectName, {
+    name,
+    dimmed: isNonenumerable
+  }) : /* @__PURE__ */ React14__default.default.createElement(ObjectPreview, {
+    data: name
+  }), /* @__PURE__ */ React14__default.default.createElement("span", null, ": "), /* @__PURE__ */ React14__default.default.createElement(ObjectValue, {
+    object
+  }));
+};
+var createIterator = (showNonenumerable, sortObjectKeys) => {
+  const objectIterator = function* (data) {
+    const shouldIterate = typeof data === "object" && data !== null || typeof data === "function";
+    if (!shouldIterate)
+      return;
+    const dataIsArray = Array.isArray(data);
+    if (!dataIsArray && data[Symbol.iterator]) {
+      let i = 0;
+      for (const entry of data) {
+        if (Array.isArray(entry) && entry.length === 2) {
+          const [k, v] = entry;
+          yield {
+            name: k,
+            data: v
+          };
+        } else {
+          yield {
+            name: i.toString(),
+            data: entry
+          };
+        }
+        i++;
+      }
+    } else {
+      const keys = Object.getOwnPropertyNames(data);
+      if (sortObjectKeys === true && !dataIsArray) {
+        keys.sort();
+      } else if (typeof sortObjectKeys === "function") {
+        keys.sort(sortObjectKeys);
+      }
+      for (const propertyName of keys) {
+        if (propertyIsEnumerable.call(data, propertyName)) {
+          const propertyValue = getPropertyValue(data, propertyName);
+          yield {
+            name: propertyName || `""`,
+            data: propertyValue
+          };
+        } else if (showNonenumerable) {
+          let propertyValue;
+          try {
+            propertyValue = getPropertyValue(data, propertyName);
+          } catch (e) {
+          }
+          if (propertyValue !== void 0) {
+            yield {
+              name: propertyName,
+              data: propertyValue,
+              isNonenumerable: true
+            };
+          }
+        }
+      }
+      if (showNonenumerable && data !== Object.prototype) {
+        yield {
+          name: "__proto__",
+          data: Object.getPrototypeOf(data),
+          isNonenumerable: true
+        };
+      }
+    }
+  };
+  return objectIterator;
+};
+var defaultNodeRenderer = ({ depth, name, data, isNonenumerable }) => depth === 0 ? /* @__PURE__ */ React14__default.default.createElement(ObjectRootLabel, {
+  name,
+  data
+}) : /* @__PURE__ */ React14__default.default.createElement(ObjectLabel, {
+  name,
+  data,
+  isNonenumerable
+});
+var ObjectInspector = ({ showNonenumerable = false, sortObjectKeys, nodeRenderer, ...treeViewProps }) => {
+  const dataIterator = createIterator(showNonenumerable, sortObjectKeys);
+  const renderer = nodeRenderer ? nodeRenderer : defaultNodeRenderer;
+  return /* @__PURE__ */ React14__default.default.createElement(TreeView, {
+    nodeRenderer: renderer,
+    dataIterator,
+    ...treeViewProps
+  });
+};
+var themedObjectInspector = themeAcceptor(ObjectInspector);
+function getHeaders(data) {
+  if (typeof data === "object") {
+    let rowHeaders = [];
+    if (Array.isArray(data)) {
+      const nRows = data.length;
+      rowHeaders = [...Array(nRows).keys()];
+    } else if (data !== null) {
+      rowHeaders = Object.keys(data);
+    }
+    const colHeaders = rowHeaders.reduce((colHeaders2, rowHeader) => {
+      const row = data[rowHeader];
+      if (typeof row === "object" && row !== null) {
+        const cols = Object.keys(row);
+        cols.reduce((xs, x) => {
+          if (!xs.includes(x)) {
+            xs.push(x);
+          }
+          return xs;
+        }, colHeaders2);
+      }
+      return colHeaders2;
+    }, []);
+    return {
+      rowHeaders,
+      colHeaders
+    };
+  }
+  return void 0;
+}
+var DataContainer = ({ rows, columns, rowsData }) => {
+  const styles = useStyles("TableInspectorDataContainer");
+  const borderStyles = useStyles("TableInspectorLeftBorder");
+  return /* @__PURE__ */ React14__default.default.createElement("div", {
+    style: styles.div
+  }, /* @__PURE__ */ React14__default.default.createElement("table", {
+    style: styles.table
+  }, /* @__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__ */ 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__ */ React14__default.default.createElement("td", {
+        key: column,
+        style: { ...styles.td, ...borderStyles.solid }
+      }, /* @__PURE__ */ React14__default.default.createElement(ObjectValue, {
+        object: rowData[column]
+      }));
+    } else {
+      return /* @__PURE__ */ React14__default.default.createElement("td", {
+        key: column,
+        style: { ...styles.td, ...borderStyles.solid }
+      });
+    }
+  }))))));
+};
+var SortIconContainer = (props) => /* @__PURE__ */ React14__default.default.createElement("div", {
+  style: {
+    position: "absolute",
+    top: 1,
+    right: 0,
+    bottom: 1,
+    display: "flex",
+    alignItems: "center"
+  }
+}, props.children);
+var SortIcon = ({ sortAscending }) => {
+  const styles = useStyles("TableInspectorSortIcon");
+  const glyph = sortAscending ? "\u25B2" : "\u25BC";
+  return /* @__PURE__ */ React14__default.default.createElement("div", {
+    style: styles
+  }, glyph);
+};
+var TH = ({
+  sortAscending = false,
+  sorted = false,
+  onClick = void 0,
+  borderStyle = {},
+  children,
+  ...thProps
+}) => {
+  const styles = useStyles("TableInspectorTH");
+  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,
+      ...borderStyle,
+      ...hovered ? styles.base[":hover"] : {}
+    },
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onClick
+  }, /* @__PURE__ */ React14__default.default.createElement("div", {
+    style: styles.div
+  }, children), sorted && /* @__PURE__ */ React14__default.default.createElement(SortIconContainer, null, /* @__PURE__ */ React14__default.default.createElement(SortIcon, {
+    sortAscending
+  })));
+};
+var HeaderContainer = ({
+  indexColumnText = "(index)",
+  columns = [],
+  sorted,
+  sortIndexColumn,
+  sortColumn,
+  sortAscending,
+  onTHClick,
+  onIndexTHClick
+}) => {
+  const styles = useStyles("TableInspectorHeaderContainer");
+  const borderStyles = useStyles("TableInspectorLeftBorder");
+  return /* @__PURE__ */ React14__default.default.createElement("div", {
+    style: styles.base
+  }, /* @__PURE__ */ React14__default.default.createElement("table", {
+    style: styles.table
+  }, /* @__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__ */ React14__default.default.createElement(TH, {
+    borderStyle: borderStyles.solid,
+    key: column,
+    sorted: sorted && sortColumn === column,
+    sortAscending,
+    onClick: onTHClick.bind(null, column)
+  }, column))))));
+};
+var TableInspector = ({
+  data,
+  columns
+}) => {
+  const styles = useStyles("TableInspector");
+  const [{ sorted, sortIndexColumn, sortColumn, sortAscending }, setState] = React14.useState({
+    sorted: false,
+    sortIndexColumn: false,
+    sortColumn: void 0,
+    sortAscending: false
+  });
+  const handleIndexTHClick = React14.useCallback(() => {
+    setState(({ sortIndexColumn: sortIndexColumn2, sortAscending: sortAscending2 }) => ({
+      sorted: true,
+      sortIndexColumn: true,
+      sortColumn: void 0,
+      sortAscending: sortIndexColumn2 ? !sortAscending2 : true
+    }));
+  }, []);
+  const handleTHClick = React14.useCallback((col) => {
+    setState(({ sortColumn: sortColumn2, sortAscending: sortAscending2 }) => ({
+      sorted: true,
+      sortIndexColumn: false,
+      sortColumn: col,
+      sortAscending: col === sortColumn2 ? !sortAscending2 : true
+    }));
+  }, []);
+  if (typeof data !== "object" || data === null) {
+    return /* @__PURE__ */ React14__default.default.createElement("div", null);
+  }
+  let { rowHeaders, colHeaders } = getHeaders(data);
+  if (columns !== void 0) {
+    colHeaders = columns;
+  }
+  let rowsData = rowHeaders.map((rowHeader) => data[rowHeader]);
+  let columnDataWithRowIndexes;
+  if (sortColumn !== void 0) {
+    columnDataWithRowIndexes = rowsData.map((rowData, index) => {
+      if (typeof rowData === "object" && rowData !== null) {
+        const columnData = rowData[sortColumn];
+        return [columnData, index];
+      }
+      return [void 0, index];
+    });
+  } else {
+    if (sortIndexColumn) {
+      columnDataWithRowIndexes = rowHeaders.map((rowData, index) => {
+        const columnData = rowHeaders[index];
+        return [columnData, index];
+      });
+    }
+  }
+  if (columnDataWithRowIndexes !== void 0) {
+    const comparator = (mapper, ascending) => {
+      return (a, b) => {
+        const v1 = mapper(a);
+        const v2 = mapper(b);
+        const type1 = typeof v1;
+        const type2 = typeof v2;
+        const lt = (v12, v22) => {
+          if (v12 < v22) {
+            return -1;
+          } else if (v12 > v22) {
+            return 1;
+          } else {
+            return 0;
+          }
+        };
+        let result;
+        if (type1 === type2) {
+          result = lt(v1, v2);
+        } else {
+          const order = {
+            string: 0,
+            number: 1,
+            object: 2,
+            symbol: 3,
+            boolean: 4,
+            undefined: 5,
+            function: 6
+          };
+          result = lt(order[type1], order[type2]);
+        }
+        if (!ascending)
+          result = -result;
+        return result;
+      };
+    };
+    const sortedRowIndexes = columnDataWithRowIndexes.sort(comparator((item) => item[0], sortAscending)).map((item) => item[1]);
+    rowHeaders = sortedRowIndexes.map((i) => rowHeaders[i]);
+    rowsData = sortedRowIndexes.map((i) => rowsData[i]);
+  }
+  return /* @__PURE__ */ React14__default.default.createElement("div", {
+    style: styles.base
+  }, /* @__PURE__ */ React14__default.default.createElement(HeaderContainer, {
+    columns: colHeaders,
+    sorted,
+    sortIndexColumn,
+    sortColumn,
+    sortAscending,
+    onTHClick: handleTHClick,
+    onIndexTHClick: handleIndexTHClick
+  }), /* @__PURE__ */ React14__default.default.createElement(DataContainer, {
+    rows: rowHeaders,
+    columns: colHeaders,
+    rowsData
+  }));
+};
+var themedTableInspector = themeAcceptor(TableInspector);
+var TEXT_NODE_MAX_INLINE_CHARS = 80;
+var shouldInline = (data) => data.childNodes.length === 0 || data.childNodes.length === 1 && data.childNodes[0].nodeType === Node.TEXT_NODE && data.textContent.length < TEXT_NODE_MAX_INLINE_CHARS;
+var OpenTag = ({ tagName, attributes, styles }) => {
+  return /* @__PURE__ */ React14__default.default.createElement("span", {
+    style: styles.base
+  }, "<", /* @__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__ */ React14__default.default.createElement("span", {
+          key: i
+        }, " ", /* @__PURE__ */ React14__default.default.createElement("span", {
+          style: styles.htmlAttributeName
+        }, attribute.name), '="', /* @__PURE__ */ React14__default.default.createElement("span", {
+          style: styles.htmlAttributeValue
+        }, attribute.value), '"'));
+      }
+      return attributeNodes;
+    }
+  })(), ">");
+};
+var CloseTag = ({ tagName, isChildNode = false, styles }) => /* @__PURE__ */ React14__default.default.createElement("span", {
+  style: Object.assign({}, styles.base, isChildNode && styles.offsetLeft)
+}, "</", /* @__PURE__ */ React14__default.default.createElement("span", {
+  style: styles.tagName
+}, tagName), ">");
+var nameByNodeType = {
+  1: "ELEMENT_NODE",
+  3: "TEXT_NODE",
+  7: "PROCESSING_INSTRUCTION_NODE",
+  8: "COMMENT_NODE",
+  9: "DOCUMENT_NODE",
+  10: "DOCUMENT_TYPE_NODE",
+  11: "DOCUMENT_FRAGMENT_NODE"
+};
+var DOMNodePreview = ({ isCloseTag, data, expanded }) => {
+  const styles = useStyles("DOMNodePreview");
+  if (isCloseTag) {
+    return /* @__PURE__ */ React14__default.default.createElement(CloseTag, {
+      styles: styles.htmlCloseTag,
+      isChildNode: true,
+      tagName: data.tagName
+    });
+  }
+  switch (data.nodeType) {
+    case Node.ELEMENT_NODE:
+      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__ */ React14__default.default.createElement(CloseTag, {
+        tagName: data.tagName,
+        styles: styles.htmlCloseTag
+      }));
+    case Node.TEXT_NODE:
+      return /* @__PURE__ */ React14__default.default.createElement("span", null, data.textContent);
+    case Node.CDATA_SECTION_NODE:
+      return /* @__PURE__ */ React14__default.default.createElement("span", null, "<![CDATA[" + data.textContent + "]]>");
+    case Node.COMMENT_NODE:
+      return /* @__PURE__ */ React14__default.default.createElement("span", {
+        style: styles.htmlComment
+      }, "<!--", data.textContent, "-->");
+    case Node.PROCESSING_INSTRUCTION_NODE:
+      return /* @__PURE__ */ React14__default.default.createElement("span", null, data.nodeName);
+    case Node.DOCUMENT_TYPE_NODE:
+      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__ */ React14__default.default.createElement("span", null, data.nodeName);
+    case Node.DOCUMENT_FRAGMENT_NODE:
+      return /* @__PURE__ */ React14__default.default.createElement("span", null, data.nodeName);
+    default:
+      return /* @__PURE__ */ React14__default.default.createElement("span", null, nameByNodeType[data.nodeType]);
+  }
+};
+var domIterator = function* (data) {
+  if (data && data.childNodes) {
+    const textInlined = shouldInline(data);
+    if (textInlined) {
+      return;
+    }
+    for (let i = 0; i < data.childNodes.length; i++) {
+      const node = data.childNodes[i];
+      if (node.nodeType === Node.TEXT_NODE && node.textContent.trim().length === 0)
+        continue;
+      yield {
+        name: `${node.tagName}[${i}]`,
+        data: node
+      };
+    }
+    if (data.tagName) {
+      yield {
+        name: "CLOSE_TAG",
+        data: {
+          tagName: data.tagName
+        },
+        isCloseTag: true
+      };
+    }
+  }
+};
+var DOMInspector = (props) => {
+  return /* @__PURE__ */ React14__default.default.createElement(TreeView, {
+    nodeRenderer: DOMNodePreview,
+    dataIterator: domIterator,
+    ...props
+  });
+};
+var themedDOMInspector = themeAcceptor(DOMInspector);
+var import_is_dom = __toESM(require_is_dom());
+var Inspector = ({ table = false, data, ...rest }) => {
+  if (table) {
+    return /* @__PURE__ */ React14__default.default.createElement(themedTableInspector, {
+      data,
+      ...rest
+    });
+  }
+  if ((0, import_is_dom.default)(data))
+    return /* @__PURE__ */ React14__default.default.createElement(themedDOMInspector, {
+      data,
+      ...rest
+    });
+  return /* @__PURE__ */ React14__default.default.createElement(themedObjectInspector, {
+    data,
+    ...rest
+  });
+};
+
+// src/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 throttle = (fn, wait) => {
+  let timeout = null;
+  return function() {
+    if (!timeout) {
+      timeout = setTimeout(() => {
+        fn.apply(this, arguments);
+        timeout = null;
+      }, wait);
+    }
+  };
+};
+var isMac = typeof navigator !== "undefined" && navigator.platform.toLowerCase().includes("mac");
+var Inspector2 = ({
+  enabled = true,
+  dangerouslyRunInProduction = false
+}) => {
+  const [element, setElement] = React14.useState(null);
+  const [rect, setRect] = React14.useState(null);
+  const [isActive, setIsActive] = React14.useState(true);
+  const [isDialogMode, setIsDialogMode] = React14.useState(false);
+  const [tooltip, setTooltip] = React14.useState(null);
+  const [position, setPosition] = React14.useState({
+    top: 0,
+    left: 0
+  });
+  const handlePropertyHover = (_e, propName) => {
+    if (!isDialogMode) return;
+    const explanation = FIBER_PROP_EXPLANATIONS[propName];
+    if (!explanation) return;
+    setTooltip(explanation);
+  };
+  const handlePropertyLeave = () => {
+    setTooltip(null);
+  };
+  React14.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "o" && (e.metaKey || e.ctrlKey) && rect) {
+        e.preventDefault();
+        setIsDialogMode(true);
+      } else if (e.key === "Escape" && isDialogMode) {
+        setIsDialogMode(false);
+        setTooltip(null);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [rect, isDialogMode]);
+  React14.useEffect(() => {
+    if (!isDialogMode) {
+      setTooltip(null);
+    }
+  }, [isDialogMode]);
+  React14.useEffect(() => {
+    const handleMouseMove = (event) => {
+      if (isDialogMode) return;
+      const isActive2 = chunkXCDPKSJZ_cjs.isInstrumentationActive();
+      if (!isActive2) {
+        setIsActive(false);
+        return;
+      }
+      if (!dangerouslyRunInProduction) {
+        const rdtHook = chunkXCDPKSJZ_cjs.getRDTHook();
+        for (const renderer of rdtHook.renderers.values()) {
+          const buildType = chunkXCDPKSJZ_cjs.detectReactBuildType(renderer);
+          if (buildType === "production") {
+            setIsActive(false);
+            return;
+          }
+        }
+      }
+      if (!enabled) {
+        setElement(null);
+        setRect(null);
+        return;
+      }
+      const element2 = document.elementFromPoint(event.clientX, event.clientY);
+      if (!element2) return;
+      setElement(element2);
+      setRect(element2.getBoundingClientRect());
+    };
+    const throttledMouseMove = throttle(handleMouseMove, 16);
+    document.addEventListener("mousemove", throttledMouseMove);
+    return () => {
+      document.removeEventListener("mousemove", throttledMouseMove);
+    };
+  }, [enabled, isDialogMode]);
+  React14.useEffect(() => {
+    if (!rect) return;
+    const padding = 10;
+    const inspectorWidth = 400;
+    const inspectorHeight = 320;
+    let left = rect.left + rect.width + padding;
+    let top = rect.top;
+    if (left + inspectorWidth > window.innerWidth) {
+      left = Math.max(padding, rect.left - inspectorWidth - padding);
+    }
+    if (top >= rect.top && top <= rect.bottom) {
+      if (rect.bottom + inspectorHeight + padding <= window.innerHeight) {
+        top = rect.bottom + padding;
+      } else if (rect.top - inspectorHeight - padding >= 0) {
+        top = rect.top - inspectorHeight - padding;
+      } else {
+        top = window.innerHeight - inspectorHeight - padding;
+      }
+    }
+    top = Math.max(
+      padding,
+      Math.min(top, window.innerHeight - inspectorHeight - padding)
+    );
+    left = Math.max(
+      padding,
+      Math.min(left, window.innerWidth - inspectorWidth - padding)
+    );
+    setPosition({ top, left });
+  }, [rect]);
+  if (window.innerWidth < 800 || !rect || !isActive) return null;
+  let fiber = chunkXCDPKSJZ_cjs.getFiberFromHostInstance(element);
+  let foundInspect = false;
+  if (!fiber) return;
+  if (fiber.return && chunkXCDPKSJZ_cjs.isCompositeFiber(fiber.return)) {
+    fiber = fiber.return;
+  }
+  chunkXCDPKSJZ_cjs.traverseFiber(
+    fiber,
+    (innerFiber) => {
+      if (innerFiber.type === Inspector2) {
+        foundInspect = true;
+        return true;
+      }
+    },
+    true
+  );
+  if (foundInspect) return;
+  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.1)",
+    zIndex: 1e3
+  } : {};
+  const overlayStyle = isDialogMode ? {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    zIndex: 999
+  } : {};
+  const fiberStack = fiber ? chunkXCDPKSJZ_cjs.getFiberStack(fiber) : [];
+  const breadcrumbs = fiberStack.reverse().map(
+    (f) => typeof f.type === "string" ? f.type : chunkXCDPKSJZ_cjs.getDisplayName(f.type) || null
+  ).filter((name) => name !== null).join(" > ");
+  return /* @__PURE__ */ React14__default.default.createElement(React14__default.default.Fragment, null, isDialogMode && /* @__PURE__ */ React14__default.default.createElement(
+    "div",
+    {
+      style: overlayStyle,
+      onClick: () => setIsDialogMode(false),
+      onKeyDown: (e) => e.key === "Escape" && setIsDialogMode(false),
+      role: "button",
+      tabIndex: 0
+    }
+  ), /* @__PURE__ */ React14__default.default.createElement(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        backgroundColor: "white",
+        zIndex: 50,
+        padding: "1ch",
+        width: "50ch",
+        height: "40ch",
+        transition: "all 150ms",
+        overflow: "visible",
+        boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+        border: "1px solid black",
+        top: position.top,
+        left: position.left,
+        opacity: rect ? 1 : 0,
+        transform: rect ? "translateY(0)" : "translateY(10px)",
+        pointerEvents: rect ? "auto" : "none",
+        display: "flex",
+        flexDirection: "column",
+        ...dialogStyle
+      }
+    },
+    /* @__PURE__ */ React14__default.default.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: "1ch"
+        }
+      },
+      /* @__PURE__ */ React14__default.default.createElement(
+        "h3",
+        {
+          style: {
+            fontSize: "0.875rem",
+            backgroundColor: "#f5f5f5",
+            padding: "0 0.5ch",
+            borderRadius: "0.125rem",
+            width: "fit-content",
+            margin: 0
+          }
+        },
+        `<${typeof fiber.type === "string" ? fiber.type : chunkXCDPKSJZ_cjs.getDisplayName(fiber.type) || "unknown"}>`,
+        /* @__PURE__ */ React14__default.default.createElement(
+          "span",
+          {
+            style: { marginLeft: "1ch", opacity: 0.5, fontSize: "0.75rem" }
+          },
+          `Press ${isMac ? "\u2318" : "ctrl"}+o to expand`
+        )
+      ),
+      isDialogMode && /* @__PURE__ */ React14__default.default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => setIsDialogMode(false),
+          style: {
+            border: "none",
+            background: "none",
+            cursor: "pointer",
+            padding: "0.5ch",
+            fontSize: "2ch",
+            opacity: 0.5
+          }
+        },
+        "\xD7"
+      )
+    ),
+    /* @__PURE__ */ React14__default.default.createElement(
+      "div",
+      {
+        onMouseLeave: handlePropertyLeave,
+        style: {
+          flex: 1,
+          overflow: "auto"
+        }
+      },
+      /* @__PURE__ */ React14__default.default.createElement(
+        Inspector,
+        {
+          data: fiber,
+          expandLevel: 1,
+          table: false,
+          nodeRenderer: (props) => {
+            const Component = props.depth === 0 ? ObjectRootLabel : ObjectLabel;
+            return /* @__PURE__ */ React14__default.default.createElement(
+              "span",
+              {
+                onMouseEnter: (e) => handlePropertyHover(e, props.name),
+                style: {
+                  cursor: FIBER_PROP_EXPLANATIONS[props.name] ? "help" : "default",
+                  padding: "1px 0",
+                  display: "inline-block",
+                  fontWeight: FIBER_PROP_EXPLANATIONS[props.name] ? 500 : "normal"
+                }
+              },
+              /* @__PURE__ */ React14__default.default.createElement(
+                Component,
+                {
+                  name: props.name,
+                  data: props.data,
+                  isNonenumerable: props.isNonenumerable
+                }
+              )
+            );
+          }
+        }
+      )
+    ),
+    /* @__PURE__ */ React14__default.default.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__default.default.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          zIndex: 1001,
+          backgroundColor: "#000",
+          color: "white",
+          bottom: "2ch",
+          right: "2ch",
+          pointerEvents: "none",
+          overflowY: "auto",
+          padding: "1ch",
+          fontSize: "1ch"
+        }
+      },
+      tooltip
+    )
+  ), !isDialogMode && /* @__PURE__ */ React14__default.default.createElement(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        zIndex: 40,
+        pointerEvents: "none",
+        transition: "all 150ms",
+        border: "1px dashed #a3a3a3",
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+        opacity: rect ? 1 : 0
+      }
+    }
+  ));
+};
+var inspect_default = Inspector2;
+
+exports.Inspector = Inspector2;
+exports.default = inspect_default;