bippy 0.2.4 → 0.2.5

package/dist/inspect.js

@@ -1,5 +1,5 @@
 import './chunk-6TJRMCM3.js';
-import { getNearestHostFiber, traverseFiber, getFiberStack, getDisplayName, getFiberId, getFiberFromHostInstance, isCompositeFiber, isInstrumentationActive, getRDTHook, detectReactBuildType } from './chunk-MISFWX22.js';
+import { getNearestHostFiber, traverseFiber, getFiberStack, getDisplayName, getFiberId, getFiberFromHostInstance, isCompositeFiber, isInstrumentationActive, hasRDTHook, getRDTHook, detectReactBuildType } from './chunk-4TD4C62I.js';
 import React17, { createContext, memo, Children, useContext, useCallback, useState, useLayoutEffect, useEffect, useMemo } from 'react';
 
 /**
@@ -1226,456 +1226,465 @@ var throttle = (fn, wait) => {
   };
 };
 var isMac = typeof navigator !== "undefined" && navigator.platform.toLowerCase().includes("mac");
-var Inspector2 = ({
-  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 getFiberForDisplay = () => {
-    if (selectedFiber) return selectedFiber;
-    const fiber2 = getFiberFromHostInstance(element);
-    if (!fiber2) return null;
-    return fiber2.return && isCompositeFiber(fiber2.return) ? fiber2.return : fiber2;
-  };
-  const handlePropertyHover = (_e, propName) => {
-    if (!isDialogMode) return;
-    const explanation = FIBER_PROP_EXPLANATIONS[propName];
-    if (!explanation) return;
-    setTooltip(explanation);
-  };
-  const handlePropertyLeave = () => {
-    setTooltip(null);
-  };
-  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);
-      }
+var Inspector2 = 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 getFiberForDisplay = () => {
+      if (selectedFiber) return selectedFiber;
+      const fiber2 = getFiberFromHostInstance(element);
+      if (!fiber2) return null;
+      return fiber2.return && isCompositeFiber(fiber2.return) ? fiber2.return : fiber2;
+    };
+    const handlePropertyHover = (_e, propName) => {
+      if (!isDialogMode) return;
+      const explanation = FIBER_PROP_EXPLANATIONS[propName];
+      setTooltip(explanation || null);
     };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [rect, isDialogMode]);
-  useEffect(() => {
-    if (!isDialogMode) {
+    const handlePropertyLeave = () => {
       setTooltip(null);
-    }
-  }, [isDialogMode]);
-  useEffect(() => {
-    const handleMouseMove = (event) => {
-      if (isDialogMode) return;
-      const isActive2 = isInstrumentationActive();
-      if (!isActive2) {
-        setIsActive(false);
-        return;
+    };
+    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]);
+    useEffect(() => {
+      if (!isDialogMode) {
+        setTooltip(null);
       }
-      if (!dangerouslyRunInProduction) {
-        const rdtHook = getRDTHook();
-        for (const renderer of rdtHook.renderers.values()) {
-          const buildType = detectReactBuildType(renderer);
-          if (buildType === "production") {
-            setIsActive(false);
-            return;
+    }, [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;
-      }
-      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) {
+        if (!enabled) {
+          setElement(null);
+          setRect(null);
+          setSelectedFiber(null);
+          return;
+        }
+        const element2 = document.elementFromPoint(event.clientX, event.clientY);
+        if (!element2) return;
         setElement(element2);
         setRect(element2.getBoundingClientRect());
+        setSelectedFiber(null);
+      };
+      const throttledMouseMove = throttle(handleMouseMove, 16);
+      document.addEventListener("mousemove", throttledMouseMove);
+      return () => {
+        document.removeEventListener("mousemove", throttledMouseMove);
+      };
+    }, [enabled, isDialogMode, 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);
       }
-    }
-  }, [selectedFiber]);
-  if (window.innerWidth < 800 || !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;
+      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;
+        }
       }
-    },
-    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.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 ? getFiberStack(fiber) : [];
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, isDialogMode && /* @__PURE__ */ React17.createElement(
-    "div",
-    {
-      style: overlayStyle,
-      onClick: () => setIsDialogMode(false),
-      onKeyDown: (e) => e.key === "Escape" && setIsDialogMode(false),
-      role: "button",
-      tabIndex: 0
-    }
-  ), /* @__PURE__ */ React17.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
+      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());
+        }
       }
-    },
-    /* @__PURE__ */ React17.createElement(
+    }, [selectedFiber]);
+    if (window.innerWidth < 800 || !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.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 ? getFiberStack(fiber) : [];
+    return /* @__PURE__ */ React17.createElement(React17.Fragment, null, isDialogMode && /* @__PURE__ */ React17.createElement(
+      "div",
+      {
+        style: overlayStyle,
+        onClick: () => setIsDialogMode(false),
+        onKeyDown: (e) => e.key === "Escape" && setIsDialogMode(false),
+        role: "button",
+        tabIndex: 0
+      }
+    ), /* @__PURE__ */ React17.createElement(
       "div",
       {
         style: {
+          position: "fixed",
+          backgroundColor: "white",
+          zIndex: 50,
+          padding: "1ch",
+          width: "50ch",
+          height: "40ch",
+          transition: "all 150ms, z-index 0ms",
+          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",
-          justifyContent: "space-between",
-          alignItems: "center",
-          marginBottom: "1ch"
+          flexDirection: "column",
+          ...dialogStyle
         }
       },
       /* @__PURE__ */ React17.createElement(
-        "h3",
+        "div",
         {
           style: {
-            fontSize: "0.875rem",
-            backgroundColor: "#f5f5f5",
-            padding: "0 0.5ch",
-            borderRadius: "0.125rem",
-            width: "fit-content",
-            margin: 0
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "1ch"
           }
         },
-        `<${typeof fiber.type === "string" ? fiber.type : getDisplayName(fiber.type) || "unknown"}>`,
-        !isDialogMode && /* @__PURE__ */ React17.createElement(
-          "span",
+        /* @__PURE__ */ React17.createElement(
+          "h3",
           {
-            style: { marginLeft: "1ch", opacity: 0.5, fontSize: "0.75rem" }
+            style: {
+              fontSize: "0.875rem",
+              backgroundColor: "#f5f5f5",
+              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 && fiber.child && /* @__PURE__ */ React17.createElement(
+          "div",
+          {
+            style: {
+              marginTop: "1ch",
+              marginBottom: "1ch",
+              marginRight: "auto",
+              marginLeft: "1ch",
+              fontSize: "0.75rem",
+              display: "flex",
+              flexWrap: "wrap",
+              gap: "0.5ch"
+            }
+          },
+          /* @__PURE__ */ React17.createElement("span", { style: { opacity: 0.5 } }, "Children:"),
+          /* @__PURE__ */ React17.createElement(
+            "div",
+            {
+              style: { display: "flex", flexWrap: "wrap", gap: "0.5ch" }
+            },
+            (() => {
+              const children = [];
+              let currentChild = fiber.child;
+              while (currentChild !== null) {
+                children.push(currentChild);
+                currentChild = currentChild.sibling;
+              }
+              return children.map((child) => {
+                const name = typeof child.type === "string" ? child.type : getDisplayName(child.type) || "unknown";
+                return /* @__PURE__ */ React17.createElement(
+                  "button",
+                  {
+                    key: getFiberId(child),
+                    type: "button",
+                    onClick: () => {
+                      setSelectedFiber(child);
+                      const element2 = getNearestHostFiber(child)?.stateNode;
+                      if (element2) {
+                        setElement(element2);
+                        setRect(element2.getBoundingClientRect());
+                      }
+                    },
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        setSelectedFiber(child);
+                        const element2 = getNearestHostFiber(child)?.stateNode;
+                        if (element2) {
+                          setElement(element2);
+                          setRect(element2.getBoundingClientRect());
+                        }
+                      }
+                    },
+                    style: {
+                      cursor: "pointer",
+                      padding: "0 0.5ch",
+                      background: "#f5f5f5",
+                      border: "1px solid #eee",
+                      borderRadius: "0.125rem",
+                      fontSize: "inherit",
+                      color: "#666"
+                    },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.backgroundColor = "#000";
+                      e.currentTarget.style.color = "#fff";
+                      e.currentTarget.style.borderColor = "#000";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.backgroundColor = "#f5f5f5";
+                      e.currentTarget.style.color = "#666";
+                      e.currentTarget.style.borderColor = "#eee";
+                    }
+                  },
+                  name
+                );
+              });
+            })()
+          )
+        ),
+        isDialogMode && /* @__PURE__ */ React17.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: () => setIsDialogMode(false),
+            style: {
+              border: "none",
+              background: "none",
+              cursor: "pointer",
+              padding: "0.5ch",
+              fontSize: "2ch",
+              opacity: 0.5
+            }
           },
-          `Press ${isMac ? "\u2318" : "ctrl"}O to expand`
+          "\xD7"
         )
       ),
-      isDialogMode && fiber.child && /* @__PURE__ */ React17.createElement(
+      isDialogMode && /* @__PURE__ */ React17.createElement(
         "div",
         {
           style: {
-            marginTop: "1ch",
-            marginBottom: "1ch",
-            marginRight: "auto",
-            marginLeft: "1ch",
+            borderTop: "1px solid #eee",
+            padding: "0.5ch 0",
             fontSize: "0.75rem",
-            display: "flex",
-            flexWrap: "wrap",
-            gap: "0.5ch"
+            color: "#666",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            marginBottom: "2ch"
           }
         },
-        /* @__PURE__ */ React17.createElement("span", { style: { opacity: 0.5 } }, "Children:"),
-        /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5ch" } }, (() => {
-          const children = [];
-          let currentChild = fiber.child;
-          while (currentChild !== null) {
-            children.push(currentChild);
-            currentChild = currentChild.sibling;
-          }
-          return children.map((child) => {
-            const name = typeof child.type === "string" ? child.type : getDisplayName(child.type) || "unknown";
-            return /* @__PURE__ */ React17.createElement(
-              "button",
-              {
-                key: getFiberId(child),
-                type: "button",
-                onClick: () => {
-                  setSelectedFiber(child);
-                  const element2 = getNearestHostFiber(child)?.stateNode;
+        fiberStack.reverse().map((f, i, arr) => {
+          const name = typeof f.type === "string" ? f.type : getDisplayName(f.type) || "unknown";
+          if (!name) return null;
+          return /* @__PURE__ */ React17.createElement(React17.Fragment, { key: getFiberId(f) }, /* @__PURE__ */ React17.createElement(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setSelectedFiber(f);
+                const element2 = getNearestHostFiber(f)?.stateNode;
+                if (element2) {
+                  setElement(element2);
+                  setRect(element2.getBoundingClientRect());
+                }
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  setSelectedFiber(f);
+                  const element2 = getNearestHostFiber(f)?.stateNode;
                   if (element2) {
                     setElement(element2);
                     setRect(element2.getBoundingClientRect());
                   }
-                },
-                onKeyDown: (e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    setSelectedFiber(child);
-                    const element2 = getNearestHostFiber(child)?.stateNode;
-                    if (element2) {
-                      setElement(element2);
-                      setRect(element2.getBoundingClientRect());
-                    }
-                  }
-                },
-                style: {
-                  cursor: "pointer",
-                  padding: "0 0.5ch",
-                  background: "#f5f5f5",
-                  border: "1px solid #eee",
-                  borderRadius: "0.125rem",
-                  fontSize: "inherit",
-                  color: "#666"
-                },
-                onMouseEnter: (e) => {
-                  e.currentTarget.style.backgroundColor = "#000";
-                  e.currentTarget.style.color = "#fff";
-                  e.currentTarget.style.borderColor = "#000";
-                },
-                onMouseLeave: (e) => {
-                  e.currentTarget.style.backgroundColor = "#f5f5f5";
-                  e.currentTarget.style.color = "#666";
-                  e.currentTarget.style.borderColor = "#eee";
                 }
               },
-              name
-            );
-          });
-        })())
+              style: {
+                cursor: "pointer",
+                textDecoration: "underline",
+                color: "#666",
+                background: "none",
+                border: "none",
+                padding: 0,
+                font: "inherit"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = "#000";
+                e.currentTarget.style.color = "#fff";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "";
+                e.currentTarget.style.color = "#666";
+              }
+            },
+            name
+          ), i < arr.length - 1 && " > ");
+        })
       ),
-      isDialogMode && /* @__PURE__ */ React17.createElement(
-        "button",
+      /* @__PURE__ */ React17.createElement(
+        "div",
         {
-          type: "button",
-          onClick: () => setIsDialogMode(false),
+          onMouseLeave: handlePropertyLeave,
           style: {
-            border: "none",
-            background: "none",
-            cursor: "pointer",
-            padding: "0.5ch",
-            fontSize: "2ch",
-            opacity: 0.5
+            flex: 1,
+            overflow: "auto"
           }
         },
-        "\xD7"
-      )
-    ),
-    isDialogMode && /* @__PURE__ */ React17.createElement(
-      "div",
-      {
-        style: {
-          borderTop: "1px solid #eee",
-          padding: "0.5ch 0",
-          fontSize: "0.75rem",
-          color: "#666",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          marginBottom: "2ch"
-        }
-      },
-      fiberStack.reverse().map((f, i, arr) => {
-        const name = typeof f.type === "string" ? f.type : getDisplayName(f.type) || "unknown";
-        if (!name) return null;
-        return /* @__PURE__ */ React17.createElement(React17.Fragment, { key: getFiberId(f) }, /* @__PURE__ */ React17.createElement(
-          "button",
+        /* @__PURE__ */ React17.createElement(
+          Inspector,
           {
-            type: "button",
-            onClick: () => {
-              setSelectedFiber(f);
-              const element2 = getNearestHostFiber(f)?.stateNode;
-              if (element2) {
-                setElement(element2);
-                setRect(element2.getBoundingClientRect());
-              }
-            },
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                setSelectedFiber(f);
-                const element2 = getNearestHostFiber(f)?.stateNode;
-                if (element2) {
-                  setElement(element2);
-                  setRect(element2.getBoundingClientRect());
-                }
-              }
-            },
-            style: {
-              cursor: "pointer",
-              textDecoration: "underline",
-              color: "#666",
-              background: "none",
-              border: "none",
-              padding: 0,
-              font: "inherit"
-            },
-            onMouseEnter: (e) => {
-              e.currentTarget.style.backgroundColor = "#000";
-              e.currentTarget.style.color = "#fff";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.backgroundColor = "";
-              e.currentTarget.style.color = "#666";
+            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
+                  }
+                )
+              );
             }
-          },
-          name
-        ), i < arr.length - 1 && " > ");
-      })
-    ),
-    /* @__PURE__ */ React17.createElement(
-      "div",
-      {
-        onMouseLeave: handlePropertyLeave,
-        style: {
-          flex: 1,
-          overflow: "auto"
-        }
-      },
-      /* @__PURE__ */ React17.createElement(
-        Inspector,
+          }
+        )
+      ),
+      tooltip && /* @__PURE__ */ React17.createElement(
+        "div",
         {
-          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),
-                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
-                }
-              )
-            );
+          style: {
+            position: "absolute",
+            zIndex: 1001,
+            backgroundColor: "#000",
+            color: "white",
+            bottom: "2ch",
+            right: "2ch",
+            pointerEvents: "none",
+            overflowY: "auto",
+            padding: "1ch",
+            fontSize: "1ch"
           }
-        }
+        },
+        tooltip
       )
-    ),
-    tooltip && /* @__PURE__ */ React17.createElement(
+    ), !isDialogMode && /* @__PURE__ */ React17.createElement(
       "div",
       {
         style: {
-          position: "absolute",
-          zIndex: 1001,
-          backgroundColor: "#000",
-          color: "white",
-          bottom: "2ch",
-          right: "2ch",
+          position: "fixed",
+          zIndex: 40,
           pointerEvents: "none",
-          overflowY: "auto",
-          padding: "1ch",
-          fontSize: "1ch"
+          transition: "all 150ms",
+          border: "1px dashed #a3a3a3",
+          left: rect.left,
+          top: rect.top,
+          width: rect.width,
+          height: rect.height,
+          opacity: rect ? 1 : 0
         }
-      },
-      tooltip
-    )
-  ), !isDialogMode && /* @__PURE__ */ React17.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;
 
 export { Inspector2 as Inspector, inspect_default as default };