bippy 0.2.21 → 0.2.23

package/dist/experiments/inspect.js

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