bippy 0.2.9 → 0.2.11

package/dist/inspect.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('./chunk-YZYCWAB2.cjs');
-var chunkR2Y4F7D7_cjs = require('./chunk-R2Y4F7D7.cjs');
+var chunk4DXMRM7J_cjs = require('./chunk-4DXMRM7J.cjs');
 var React17 = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -4785,7 +4785,7 @@ var CloseButton = React17__default.default.memo(({ onClick }) => /* @__PURE__ */
   },
   "\xD7"
 ));
-var FiberGraph = React17__default.default.memo(
+React17__default.default.memo(
   ({
     fiber,
     onFiberSelect,
@@ -4818,9 +4818,9 @@ var FiberGraph = React17__default.default.memo(
       const links2 = [];
       const nodeMap = /* @__PURE__ */ new Map();
       let nodeCounter = 0;
-      const baseId = chunkR2Y4F7D7_cjs.getFiberId(fiber).toString();
+      const baseId = chunk4DXMRM7J_cjs.getFiberId(fiber).toString();
       const rootId = `${baseId}-${nodeCounter++}`;
-      const rootName = typeof fiber.type === "string" ? fiber.type : fiber.type === null && fiber.tag === chunkR2Y4F7D7_cjs.HostRootTag ? "#root" : fiber.type === null && fiber.tag === chunkR2Y4F7D7_cjs.HostTextTag ? "#text" : chunkR2Y4F7D7_cjs.getDisplayName(fiber.type) || fiber.type?.name || fiber.type?.displayName || "Component";
+      const rootName = typeof fiber.type === "string" ? fiber.type : fiber.type === null && fiber.tag === chunk4DXMRM7J_cjs.HostRootTag ? "#root" : fiber.type === null && fiber.tag === chunk4DXMRM7J_cjs.HostTextTag ? "#text" : chunk4DXMRM7J_cjs.getDisplayName(fiber.type) || fiber.type?.name || fiber.type?.displayName || "Component";
       const rootNode = {
         id: rootId,
         name: rootName,
@@ -4841,7 +4841,7 @@ var FiberGraph = React17__default.default.memo(
           const current = stack2.pop();
           if (!current) continue;
           const { fiber: currentFiber, parentId, depth } = current;
-          if (currentFiber.tag === chunkR2Y4F7D7_cjs.FragmentTag) {
+          if (currentFiber.tag === chunk4DXMRM7J_cjs.FragmentTag) {
             if (currentFiber.child) {
               stack2.push({
                 fiber: currentFiber.child,
@@ -4852,13 +4852,13 @@ var FiberGraph = React17__default.default.memo(
             if (currentFiber.sibling && currentFiber.return === currentFiber.sibling.return) {
               stack2.push({
                 fiber: currentFiber.sibling,
-                parentId: currentFiber.return ? nodeMap.get(chunkR2Y4F7D7_cjs.getFiberId(currentFiber.return).toString())?.id || parentId : parentId,
+                parentId: currentFiber.return ? nodeMap.get(chunk4DXMRM7J_cjs.getFiberId(currentFiber.return).toString())?.id || parentId : parentId,
                 depth
               });
             }
             continue;
           }
-          if (currentFiber.type === null && chunkR2Y4F7D7_cjs.isHostFiber(currentFiber)) {
+          if (currentFiber.type === null && chunk4DXMRM7J_cjs.isHostFiber(currentFiber)) {
             if (currentFiber.child) {
               stack2.push({
                 fiber: currentFiber.child,
@@ -4869,27 +4869,27 @@ var FiberGraph = React17__default.default.memo(
             if (currentFiber.sibling && currentFiber.return === currentFiber.sibling.return) {
               stack2.push({
                 fiber: currentFiber.sibling,
-                parentId: currentFiber.return ? nodeMap.get(chunkR2Y4F7D7_cjs.getFiberId(currentFiber.return).toString())?.id || parentId : parentId,
+                parentId: currentFiber.return ? nodeMap.get(chunk4DXMRM7J_cjs.getFiberId(currentFiber.return).toString())?.id || parentId : parentId,
                 depth
               });
             }
             continue;
           }
-          const childId = `${chunkR2Y4F7D7_cjs.getFiberId(currentFiber)}-${nodeCounter++}`;
+          const childId = `${chunk4DXMRM7J_cjs.getFiberId(currentFiber)}-${nodeCounter++}`;
           let name = "unknown";
           if (typeof currentFiber.type === "string") {
             name = currentFiber.type;
-          } else if (currentFiber.type === null && currentFiber.tag === chunkR2Y4F7D7_cjs.HostTextTag) {
+          } else if (currentFiber.type === null && currentFiber.tag === chunk4DXMRM7J_cjs.HostTextTag) {
             const text = currentFiber.stateNode?.nodeValue?.trim() || "";
             if (text) {
               name = text.length > 20 ? `"${text.slice(0, 20)}..."` : `"${text}"`;
             } else {
               name = "#text";
             }
-          } else if (currentFiber.type === null && currentFiber.tag === chunkR2Y4F7D7_cjs.HostRootTag) {
+          } else if (currentFiber.type === null && currentFiber.tag === chunk4DXMRM7J_cjs.HostRootTag) {
             name = "#root";
           } else {
-            name = chunkR2Y4F7D7_cjs.getDisplayName(currentFiber.type) || currentFiber.type?.name || currentFiber.type?.displayName || "Component";
+            name = chunk4DXMRM7J_cjs.getDisplayName(currentFiber.type) || currentFiber.type?.name || currentFiber.type?.displayName || "Component";
           }
           const node = {
             id: childId,
@@ -4913,7 +4913,7 @@ var FiberGraph = React17__default.default.memo(
           if (currentFiber.sibling && currentFiber.return === currentFiber.sibling.return) {
             stack2.push({
               fiber: currentFiber.sibling,
-              parentId: currentFiber.return ? nodeMap.get(chunkR2Y4F7D7_cjs.getFiberId(currentFiber.return).toString())?.id || parentId : parentId,
+              parentId: currentFiber.return ? nodeMap.get(chunk4DXMRM7J_cjs.getFiberId(currentFiber.return).toString())?.id || parentId : parentId,
               depth
             });
           }
@@ -4986,7 +4986,7 @@ var FiberGraph = React17__default.default.memo(
       nodeElements.exit().remove();
       const nodeEnter = nodeElements.enter().append("g").attr("transform", (d) => `translate(${d.x},${d.y})`).style("cursor", "pointer").on("click", (event, d) => {
         event.stopPropagation();
-        const element = chunkR2Y4F7D7_cjs.getNearestHostFiber(d.data.fiber)?.stateNode;
+        const element = chunk4DXMRM7J_cjs.getNearestHostFiber(d.data.fiber)?.stateNode;
         if (element instanceof HTMLElement) {
           element.scrollIntoView({ behavior: "smooth", block: "center" });
           const originalOutline = element.style.outline;
@@ -5009,9 +5009,9 @@ var FiberGraph = React17__default.default.memo(
           const isPreview = !isDialogMode;
           const scale = isRoot ? isPreview ? 2 : 1.75 : 1;
           const isRendered = renderedFibersRef.current.has(
-            chunkR2Y4F7D7_cjs.getFiberId(d.data.fiber).toString()
+            chunk4DXMRM7J_cjs.getFiberId(d.data.fiber).toString()
           );
-          const rect = g.selectAll("rect").data([d]).join("rect").attr("x", -75 * scale).attr("y", -30 * scale).attr("width", 150 * scale).attr("height", 60 * scale).attr("rx", 6 * scale).attr("fill", chunkR2Y4F7D7_cjs.isCompositeFiber(d.data.fiber) ? "#FFF" : "#232323").attr("stroke", isRendered ? "#FFC799" : "#505050").attr("stroke-width", isRoot ? "3" : "2");
+          const rect = g.selectAll("rect").data([d]).join("rect").attr("x", -75 * scale).attr("y", -30 * scale).attr("width", 150 * scale).attr("height", 60 * scale).attr("rx", 6 * scale).attr("fill", chunk4DXMRM7J_cjs.isCompositeFiber(d.data.fiber) ? "#FFF" : "#232323").attr("stroke", isRendered ? "#FFC799" : "#505050").attr("stroke-width", isRoot ? "3" : "2");
           rect.on("mouseover", function() {
             select_default2(this).attr("stroke", "#808080").attr("stroke-width", isRoot ? "4" : "3");
           }).on("mouseout", function() {
@@ -5019,11 +5019,11 @@ var FiberGraph = React17__default.default.memo(
           });
           const renderCount = renderCounts.get(d.data.fiber) || 0;
           const renderText = renderCount > 0 ? ` \xD7${renderCount}` : "";
-          g.selectAll("text.name").data([d]).join("text").attr("class", "name").attr("text-anchor", "middle").attr("dy", `${-0.6 * scale}em`).attr("fill", chunkR2Y4F7D7_cjs.isCompositeFiber(d.data.fiber) ? "#000" : "#FFF").attr("font-weight", "500").attr(
+          g.selectAll("text.name").data([d]).join("text").attr("class", "name").attr("text-anchor", "middle").attr("dy", `${-0.6 * scale}em`).attr("fill", chunk4DXMRM7J_cjs.isCompositeFiber(d.data.fiber) ? "#000" : "#FFF").attr("font-weight", "500").attr(
             "font-size",
             isRoot ? isPreview ? "1.75em" : "1.5em" : "1em"
           ).text(d.data.name + renderText);
-          g.selectAll("text.props").data([d]).join("text").attr("class", "props").attr("text-anchor", "middle").attr("dy", `${0.9 * scale}em`).attr("fill", chunkR2Y4F7D7_cjs.isCompositeFiber(d.data.fiber) ? "#666" : "#999").attr(
+          g.selectAll("text.props").data([d]).join("text").attr("class", "props").attr("text-anchor", "middle").attr("dy", `${0.9 * scale}em`).attr("fill", chunk4DXMRM7J_cjs.isCompositeFiber(d.data.fiber) ? "#666" : "#999").attr(
             "font-size",
             isRoot ? isPreview ? "1.25em" : "1.1em" : "0.75em"
           ).text(() => {
@@ -5088,13 +5088,13 @@ var FiberGraph = React17__default.default.memo(
       }
     }, [nodes.length, handleFit]);
     React17.useEffect(() => {
-      chunkR2Y4F7D7_cjs.onCommitFiberRoot((root2) => {
+      chunk4DXMRM7J_cjs.onCommitFiberRoot((root2) => {
         if (flashTimeoutRef.current) {
           clearTimeout(flashTimeoutRef.current);
         }
         renderedFibersRef.current = /* @__PURE__ */ new Set();
-        chunkR2Y4F7D7_cjs.traverseRenderedFibers(root2, (renderedFiber) => {
-          const fiberId = chunkR2Y4F7D7_cjs.getFiberId(renderedFiber).toString();
+        chunk4DXMRM7J_cjs.traverseRenderedFibers(root2, (renderedFiber) => {
+          const fiberId = chunk4DXMRM7J_cjs.getFiberId(renderedFiber).toString();
           renderedFibersRef.current.add(fiberId);
           const states = fiberStates.get(fiberId) || [];
           states.push({
@@ -5103,13 +5103,16 @@ var FiberGraph = React17__default.default.memo(
             timestamp: Date.now()
           });
           fiberStates.set(fiberId, states);
-          renderCounts.set(renderedFiber, (renderCounts.get(renderedFiber) || 0) + 1);
+          renderCounts.set(
+            renderedFiber,
+            (renderCounts.get(renderedFiber) || 0) + 1
+          );
         });
         if (nodesGroupRef.current) {
           const nodeElements = select_default2(nodesGroupRef.current).selectAll("g");
           nodeElements.each(function(d) {
             const isRendered = renderedFibersRef.current.has(
-              chunkR2Y4F7D7_cjs.getFiberId(d.data.fiber).toString()
+              chunk4DXMRM7J_cjs.getFiberId(d.data.fiber).toString()
             );
             if (isRendered) {
               const rect = select_default2(this).select("rect");
@@ -5130,40 +5133,43 @@ var FiberGraph = React17__default.default.memo(
         }
       };
     }, []);
-    const handleTimelineChange = React17.useCallback((index) => {
-      setTimelineIndex(index);
-      const fiberId = chunkR2Y4F7D7_cjs.getFiberId(fiber).toString();
-      const states = fiberStates.get(fiberId);
-      if (states?.[index]) {
-        const rdtHook = chunkR2Y4F7D7_cjs.getRDTHook();
-        if (rdtHook?.renderers.size > 0) {
-          const renderer = Array.from(rdtHook.renderers.values())?.[0];
-          const overrideProps = renderer?.currentDispatcherRef?.current?.overrideProps;
-          const overrideHookState = renderer?.currentDispatcherRef?.current?.overrideHookState;
-          const state = states?.[index];
-          if (state) {
-            if (overrideProps) {
-              overrideProps(fiber, state.props);
-            }
-            if (overrideHookState) {
-              overrideHookState(fiber, state.hookState);
+    const handleTimelineChange = React17.useCallback(
+      (index) => {
+        setTimelineIndex(index);
+        const fiberId = chunk4DXMRM7J_cjs.getFiberId(fiber).toString();
+        const states = fiberStates.get(fiberId);
+        if (states?.[index]) {
+          const rdtHook = chunk4DXMRM7J_cjs.getRDTHook();
+          if (rdtHook?.renderers.size > 0) {
+            const renderer = Array.from(rdtHook.renderers.values())?.[0];
+            const overrideProps = renderer?.currentDispatcherRef?.current?.overrideProps;
+            const overrideHookState = renderer?.currentDispatcherRef?.current?.overrideHookState;
+            const state = states?.[index];
+            if (state) {
+              if (overrideProps) {
+                overrideProps(fiber, state.props);
+              }
+              if (overrideHookState) {
+                overrideHookState(fiber, state.hookState);
+              }
             }
           }
         }
-      }
-    }, [fiber]);
+      },
+      [fiber]
+    );
     const handlePlayPause = React17.useCallback(() => {
       setIsPlaying((prev) => !prev);
     }, []);
     const handleStepForward = React17.useCallback(() => {
-      const states = fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString());
+      const states = fiberStates.get(chunk4DXMRM7J_cjs.getFiberId(fiber).toString());
       if (states) {
         const nextIndex = Math.min(timelineIndex + 1, states.length - 1);
         handleTimelineChange(nextIndex);
       }
     }, [fiber, timelineIndex, handleTimelineChange]);
     const handleStepBack = React17.useCallback(() => {
-      const states = fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString());
+      const states = fiberStates.get(chunk4DXMRM7J_cjs.getFiberId(fiber).toString());
       if (states) {
         const prevIndex = Math.max(timelineIndex - 1, 0);
         handleTimelineChange(prevIndex);
@@ -5172,7 +5178,7 @@ var FiberGraph = React17__default.default.memo(
     React17.useEffect(() => {
       if (isPlaying) {
         playIntervalRef.current = setInterval(() => {
-          const states = fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString());
+          const states = fiberStates.get(chunk4DXMRM7J_cjs.getFiberId(fiber).toString());
           if (states) {
             const nextIndex = timelineIndex + 1;
             if (nextIndex >= states.length) {
@@ -5191,300 +5197,399 @@ var FiberGraph = React17__default.default.memo(
         }
       };
     }, [isPlaying, fiber, timelineIndex, handleTimelineChange]);
-    return /* @__PURE__ */ React17__default.default.createElement("div", { style: { height: "50ch", marginTop: "2ch", display: "flex", flexDirection: "column", position: "relative" } }, isDialogMode && /* @__PURE__ */ React17__default.default.createElement("div", { style: {
-      display: "flex",
-      gap: "0.5ch",
-      marginBottom: "1ch",
-      padding: "0 1ch",
-      borderBottom: "1px solid #282828"
-    } }, /* @__PURE__ */ React17__default.default.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => setActiveTab("graph"),
-        style: {
-          background: "transparent",
-          border: "none",
-          color: activeTab === "graph" ? "#FFC799" : "#A0A0A0",
-          padding: "1ch",
-          cursor: "pointer",
-          position: "relative",
-          fontSize: "0.875rem",
-          fontWeight: activeTab === "graph" ? 500 : 400
-        }
-      },
-      "Graph View",
-      activeTab === "graph" && /* @__PURE__ */ React17__default.default.createElement("div", { style: {
-        position: "absolute",
-        bottom: "-1px",
-        left: 0,
-        right: 0,
-        height: "2px",
-        background: "#FFC799",
-        borderRadius: "2px 2px 0 0"
-      } })
-    ), /* @__PURE__ */ React17__default.default.createElement(
-      "button",
+    return /* @__PURE__ */ React17__default.default.createElement(
+      "div",
       {
-        type: "button",
-        onClick: () => setActiveTab("fiber"),
         style: {
-          background: "transparent",
-          border: "none",
-          color: activeTab === "fiber" ? "#FFC799" : "#A0A0A0",
-          padding: "1ch",
-          cursor: "pointer",
-          position: "relative",
-          fontSize: "0.875rem",
-          fontWeight: activeTab === "fiber" ? 500 : 400
+          height: "50ch",
+          marginTop: "2ch",
+          display: "flex",
+          flexDirection: "column",
+          position: "relative"
         }
       },
-      "Fiber View",
-      activeTab === "fiber" && /* @__PURE__ */ React17__default.default.createElement("div", { style: {
-        position: "absolute",
-        bottom: "-1px",
-        left: 0,
-        right: 0,
-        height: "2px",
-        background: "#FFC799",
-        borderRadius: "2px 2px 0 0"
-      } })
-    )), /* @__PURE__ */ React17__default.default.createElement("div", { style: { position: "relative", flex: 1 } }, /* @__PURE__ */ React17__default.default.createElement("div", { style: {
-      position: "absolute",
-      inset: 0,
-      display: activeTab === "graph" ? "block" : "none"
-    } }, /* @__PURE__ */ React17__default.default.createElement(
-      Controls,
-      {
-        onZoomIn: handleZoomIn,
-        onZoomOut: handleZoomOut,
-        onReset: handleReset,
-        onFit: handleFit
-      }
-    ), /* @__PURE__ */ React17__default.default.createElement(
-      "svg",
-      {
-        ref: svgRef,
-        viewBox: `0 0 ${svgWidth} ${svgHeight}`,
-        xmlns: "http://www.w3.org/2000/svg",
-        style: {
-          width: "100%",
-          height: "100%",
-          background: "#101010",
-          borderRadius: "0.25rem",
-          cursor: "grab"
+      isDialogMode && /* @__PURE__ */ React17__default.default.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: "0.5ch",
+            marginBottom: "1ch",
+            padding: "0 1ch",
+            borderBottom: "1px solid #282828"
+          }
         },
-        "aria-label": "Fiber Tree Visualization"
-      },
-      /* @__PURE__ */ React17__default.default.createElement("title", null, "Fiber Tree Visualization"),
-      /* @__PURE__ */ React17__default.default.createElement("g", { ref: svgGroupRef }, /* @__PURE__ */ React17__default.default.createElement("g", { ref: linksGroupRef, className: "links" }), /* @__PURE__ */ React17__default.default.createElement("g", { ref: nodesGroupRef, className: "nodes" }))
-    )), /* @__PURE__ */ React17__default.default.createElement("div", { style: {
-      position: "absolute",
-      inset: 0,
-      display: activeTab === "fiber" ? "block" : "none",
-      overflow: "auto",
-      background: "#101010",
-      borderRadius: "0.25rem",
-      padding: "1ch"
-    } }, /* @__PURE__ */ React17__default.default.createElement(
-      Inspector,
-      {
-        theme: theme3,
-        data: fiber,
-        expandLevel: isDialogMode ? 1 : 0,
-        table: false,
-        nodeRenderer: (props) => {
-          const Component = props.depth === 0 ? ObjectRootLabel : ObjectLabel;
-          return /* @__PURE__ */ React17__default.default.createElement(
-            "span",
+        /* @__PURE__ */ React17__default.default.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: () => setActiveTab("graph"),
+            style: {
+              background: "transparent",
+              border: "none",
+              color: activeTab === "graph" ? "#FFC799" : "#A0A0A0",
+              padding: "1ch",
+              cursor: "pointer",
+              position: "relative",
+              fontSize: "0.875rem",
+              fontWeight: activeTab === "graph" ? 500 : 400
+            }
+          },
+          "Graph View",
+          activeTab === "graph" && /* @__PURE__ */ React17__default.default.createElement(
+            "div",
             {
-              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"
+                position: "absolute",
+                bottom: "-1px",
+                left: 0,
+                right: 0,
+                height: "2px",
+                background: "#FFC799",
+                borderRadius: "2px 2px 0 0"
               }
-            },
-            /* @__PURE__ */ React17__default.default.createElement(
-              Component,
-              {
-                name: props.name,
-                data: props.data,
-                isNonenumerable: props.isNonenumerable
+            }
+          )
+        ),
+        /* @__PURE__ */ React17__default.default.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: () => setActiveTab("fiber"),
+            style: {
+              background: "transparent",
+              border: "none",
+              color: activeTab === "fiber" ? "#FFC799" : "#A0A0A0",
+              padding: "1ch",
+              cursor: "pointer",
+              position: "relative",
+              fontSize: "0.875rem",
+              fontWeight: activeTab === "fiber" ? 500 : 400
+            }
+          },
+          "Fiber View",
+          activeTab === "fiber" && /* @__PURE__ */ React17__default.default.createElement(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                bottom: "-1px",
+                left: 0,
+                right: 0,
+                height: "2px",
+                background: "#FFC799",
+                borderRadius: "2px 2px 0 0"
               }
-            )
-          );
-        }
-      }
-    ), tooltip && /* @__PURE__ */ React17__default.default.createElement("div", { style: {
-      position: "absolute",
-      zIndex: 1001,
-      backgroundColor: "#161616",
-      color: "#FFF",
-      bottom: "2ch",
-      right: "2ch",
-      pointerEvents: "none",
-      overflowY: "auto",
-      padding: "1ch",
-      fontSize: "1ch",
-      border: "1px solid #282828",
-      borderRadius: "0.25ch"
-    } }, tooltip))), isDialogMode && /* @__PURE__ */ React17__default.default.createElement("div", { style: {
-      background: "#161616",
-      padding: "1ch",
-      margin: "1ch 1ch 0 1ch",
-      borderRadius: "0.25rem",
-      border: "1px solid #282828",
-      display: "flex",
-      flexDirection: "column",
-      gap: "0.5ch",
-      opacity: fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString())?.length ? 1 : 0.5
-    } }, /* @__PURE__ */ React17__default.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "0.5ch" } }, /* @__PURE__ */ React17__default.default.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: handleStepBack,
-        disabled: !fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString())?.length,
-        style: {
-          background: "transparent",
-          border: "1px solid #282828",
-          color: "#FFF",
-          borderRadius: "0.25rem",
-          cursor: fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString())?.length ? "pointer" : "not-allowed",
-          padding: "0.25ch 0.5ch"
-        }
-      },
-      "\u23EE"
-    ), /* @__PURE__ */ React17__default.default.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: handlePlayPause,
-        disabled: !fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString())?.length,
-        style: {
-          background: "transparent",
-          border: "1px solid #282828",
-          color: "#FFF",
-          borderRadius: "0.25rem",
-          cursor: fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString())?.length ? "pointer" : "not-allowed",
-          padding: "0.25ch 0.5ch"
-        }
-      },
-      isPlaying ? "\u23F8" : "\u25B6\uFE0F"
-    ), /* @__PURE__ */ React17__default.default.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: handleStepForward,
-        disabled: !fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString())?.length,
-        style: {
-          background: "transparent",
-          border: "1px solid #282828",
-          color: "#FFF",
-          borderRadius: "0.25rem",
-          cursor: fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString())?.length ? "pointer" : "not-allowed",
-          padding: "0.25ch 0.5ch"
-        }
-      },
-      "\u23ED"
-    ), /* @__PURE__ */ React17__default.default.createElement("span", { style: { color: "#A0A0A0", fontSize: "0.75rem" } }, timelineIndex >= 0 && fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString())?.[timelineIndex]?.timestamp ? new Date(fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString())?.[timelineIndex]?.timestamp ?? 0).toLocaleTimeString() : "--:--:--"), !fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString())?.length && /* @__PURE__ */ React17__default.default.createElement("span", { style: { color: "#A0A0A0", fontSize: "0.75rem", marginLeft: "auto" } }, "No state changes recorded yet")), /* @__PURE__ */ React17__default.default.createElement("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "0.25ch",
-      height: "2ch",
-      position: "relative"
-    } }, (fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString()) ?? []).map((state, i) => {
-      const isActive = i === timelineIndex;
-      return /* @__PURE__ */ React17__default.default.createElement(
+            }
+          )
+        )
+      ),
+      /* @__PURE__ */ React17__default.default.createElement("div", { style: { position: "relative", flex: 1 } }, /* @__PURE__ */ React17__default.default.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            display: activeTab === "graph" ? "block" : "none"
+          }
+        },
+        /* @__PURE__ */ React17__default.default.createElement(
+          Controls,
+          {
+            onZoomIn: handleZoomIn,
+            onZoomOut: handleZoomOut,
+            onReset: handleReset,
+            onFit: handleFit
+          }
+        ),
+        /* @__PURE__ */ React17__default.default.createElement(
+          "svg",
+          {
+            ref: svgRef,
+            viewBox: `0 0 ${svgWidth} ${svgHeight}`,
+            xmlns: "http://www.w3.org/2000/svg",
+            style: {
+              width: "100%",
+              height: "100%",
+              background: "#101010",
+              borderRadius: "0.25rem",
+              cursor: "grab"
+            },
+            "aria-label": "Fiber Tree Visualization"
+          },
+          /* @__PURE__ */ React17__default.default.createElement("title", null, "Fiber Tree Visualization"),
+          /* @__PURE__ */ React17__default.default.createElement("g", { ref: svgGroupRef }, /* @__PURE__ */ React17__default.default.createElement("g", { ref: linksGroupRef, className: "links" }), /* @__PURE__ */ React17__default.default.createElement("g", { ref: nodesGroupRef, className: "nodes" }))
+        )
+      ), /* @__PURE__ */ React17__default.default.createElement(
         "div",
         {
-          key: state.timestamp,
-          onClick: () => handleTimelineChange(i),
-          onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              handleTimelineChange(i);
+          style: {
+            position: "absolute",
+            inset: 0,
+            display: activeTab === "fiber" ? "block" : "none",
+            overflow: "auto",
+            background: "#101010",
+            borderRadius: "0.25rem",
+            padding: "1ch"
+          }
+        },
+        /* @__PURE__ */ React17__default.default.createElement(
+          Inspector,
+          {
+            theme: theme3,
+            data: fiber,
+            expandLevel: 1,
+            table: false,
+            nodeRenderer: (props) => {
+              const Component = props.depth === 0 ? ObjectRootLabel : ObjectLabel;
+              return /* @__PURE__ */ React17__default.default.createElement(
+                "span",
+                {
+                  onMouseEnter: (e) => handlePropertyHover(e, props.name),
+                  onMouseLeave: handlePropertyLeave,
+                  style: {
+                    cursor: FIBER_PROP_EXPLANATIONS[props.name] ? "help" : "default",
+                    padding: "1px 0",
+                    display: "inline-block",
+                    fontWeight: FIBER_PROP_EXPLANATIONS[props.name] ? 500 : "normal"
+                  }
+                },
+                /* @__PURE__ */ React17__default.default.createElement(
+                  Component,
+                  {
+                    name: props.name,
+                    data: props.data,
+                    isNonenumerable: props.isNonenumerable
+                  }
+                )
+              );
+            }
+          }
+        ),
+        tooltip && /* @__PURE__ */ React17__default.default.createElement(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              zIndex: 1001,
+              backgroundColor: "#161616",
+              color: "#FFF",
+              bottom: "2ch",
+              right: "2ch",
+              pointerEvents: "none",
+              overflowY: "auto",
+              padding: "1ch",
+              fontSize: "1ch",
+              border: "1px solid #282828",
+              borderRadius: "0.25ch"
             }
           },
-          role: "button",
-          tabIndex: 0,
+          tooltip
+        )
+      )),
+      isDialogMode && /* @__PURE__ */ React17__default.default.createElement(
+        "div",
+        {
           style: {
-            flex: 1,
-            height: "100%",
-            background: isActive ? "#FFC799" : "#282828",
-            cursor: "pointer",
-            position: "relative",
-            borderRadius: "0.125rem",
-            transition: "background-color 150ms",
-            outline: "none"
+            background: "#161616",
+            padding: "1ch",
+            margin: "1ch 1ch 0 1ch",
+            borderRadius: "0.25rem",
+            border: "1px solid #282828",
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.5ch",
+            opacity: fiberStates.get(chunk4DXMRM7J_cjs.getFiberId(fiber).toString())?.length ? 1 : 0.5
+          }
+        },
+        /* @__PURE__ */ React17__default.default.createElement(
+          "div",
+          {
+            style: { display: "flex", alignItems: "center", gap: "0.5ch" }
           },
-          onMouseEnter: (e) => {
-            const target = e.currentTarget;
-            const tooltip2 = document.createElement("div");
-            tooltip2.style.position = "absolute";
-            tooltip2.style.bottom = "100%";
-            tooltip2.style.left = "50%";
-            tooltip2.style.transform = "translateX(-50%)";
-            tooltip2.style.background = "#161616";
-            tooltip2.style.color = "#FFF";
-            tooltip2.style.padding = "0.5ch";
-            tooltip2.style.borderRadius = "0.25rem";
-            tooltip2.style.fontSize = "0.75rem";
-            tooltip2.style.whiteSpace = "nowrap";
-            tooltip2.style.pointerEvents = "none";
-            tooltip2.style.border = "1px solid #282828";
-            tooltip2.style.zIndex = "1000";
-            const changes = [];
-            const states = fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString());
-            const prevState = i > 0 && states ? states[i - 1] : null;
-            if (prevState) {
-              const propChanges = Object.keys(state.props).filter(
-                (key) => state.props[key] !== prevState.props[key]
-              );
-              if (propChanges.length > 0) {
-                changes.push(`Props: ${propChanges.join(", ")}`);
+          /* @__PURE__ */ React17__default.default.createElement(
+            "button",
+            {
+              type: "button",
+              onClick: handleStepBack,
+              disabled: !fiberStates.get(chunk4DXMRM7J_cjs.getFiberId(fiber).toString())?.length,
+              style: {
+                background: "transparent",
+                border: "1px solid #282828",
+                color: "#FFF",
+                borderRadius: "0.25rem",
+                cursor: fiberStates.get(chunk4DXMRM7J_cjs.getFiberId(fiber).toString())?.length ? "pointer" : "not-allowed",
+                padding: "0.25ch 0.5ch"
               }
-              const hookChanges = Object.keys(state.hookState).filter(
-                (key) => state.hookState[key] !== prevState.hookState[key]
-              );
-              if (hookChanges.length > 0) {
-                changes.push(`State: ${hookChanges.join(", ")}`);
+            },
+            "\u23EE"
+          ),
+          /* @__PURE__ */ React17__default.default.createElement(
+            "button",
+            {
+              type: "button",
+              onClick: handlePlayPause,
+              disabled: !fiberStates.get(chunk4DXMRM7J_cjs.getFiberId(fiber).toString())?.length,
+              style: {
+                background: "transparent",
+                border: "1px solid #282828",
+                color: "#FFF",
+                borderRadius: "0.25rem",
+                cursor: fiberStates.get(chunk4DXMRM7J_cjs.getFiberId(fiber).toString())?.length ? "pointer" : "not-allowed",
+                padding: "0.25ch 0.5ch"
+              }
+            },
+            isPlaying ? "\u23F8" : "\u25B6\uFE0F"
+          ),
+          /* @__PURE__ */ React17__default.default.createElement(
+            "button",
+            {
+              type: "button",
+              onClick: handleStepForward,
+              disabled: !fiberStates.get(chunk4DXMRM7J_cjs.getFiberId(fiber).toString())?.length,
+              style: {
+                background: "transparent",
+                border: "1px solid #282828",
+                color: "#FFF",
+                borderRadius: "0.25rem",
+                cursor: fiberStates.get(chunk4DXMRM7J_cjs.getFiberId(fiber).toString())?.length ? "pointer" : "not-allowed",
+                padding: "0.25ch 0.5ch"
               }
+            },
+            "\u23ED"
+          ),
+          /* @__PURE__ */ React17__default.default.createElement("span", { style: { color: "#A0A0A0", fontSize: "0.75rem" } }, timelineIndex >= 0 && fiberStates.get(chunk4DXMRM7J_cjs.getFiberId(fiber).toString())?.[timelineIndex]?.timestamp ? new Date(
+            fiberStates.get(chunk4DXMRM7J_cjs.getFiberId(fiber).toString())?.[timelineIndex]?.timestamp ?? 0
+          ).toLocaleTimeString() : "--:--:--"),
+          !fiberStates.get(chunk4DXMRM7J_cjs.getFiberId(fiber).toString())?.length && /* @__PURE__ */ React17__default.default.createElement(
+            "span",
+            {
+              style: {
+                color: "#A0A0A0",
+                fontSize: "0.75rem",
+                marginLeft: "auto"
+              }
+            },
+            "No state changes recorded yet"
+          )
+        ),
+        /* @__PURE__ */ React17__default.default.createElement(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "0.25ch",
+              height: "2ch",
+              position: "relative"
             }
-            tooltip2.textContent = changes.length > 0 ? changes.join(" | ") : prevState ? "No changes" : "Initial state";
-            target.appendChild(tooltip2);
           },
-          onMouseLeave: (e) => {
-            const tooltip2 = e.currentTarget.querySelector("div");
-            if (tooltip2) {
-              tooltip2.remove();
+          (fiberStates.get(chunk4DXMRM7J_cjs.getFiberId(fiber).toString()) ?? []).map(
+            (state, i) => {
+              const isActive = i === timelineIndex;
+              return /* @__PURE__ */ React17__default.default.createElement(
+                "div",
+                {
+                  key: state.timestamp,
+                  onClick: () => handleTimelineChange(i),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      handleTimelineChange(i);
+                    }
+                  },
+                  role: "button",
+                  tabIndex: 0,
+                  style: {
+                    flex: 1,
+                    height: "100%",
+                    background: isActive ? "#FFC799" : "#282828",
+                    cursor: "pointer",
+                    position: "relative",
+                    borderRadius: "0.125rem",
+                    transition: "background-color 150ms",
+                    outline: "none"
+                  },
+                  onMouseEnter: (e) => {
+                    const target = e.currentTarget;
+                    const tooltip2 = document.createElement("div");
+                    tooltip2.style.position = "absolute";
+                    tooltip2.style.bottom = "100%";
+                    tooltip2.style.left = "50%";
+                    tooltip2.style.transform = "translateX(-50%)";
+                    tooltip2.style.background = "#161616";
+                    tooltip2.style.color = "#FFF";
+                    tooltip2.style.padding = "0.5ch";
+                    tooltip2.style.borderRadius = "0.25rem";
+                    tooltip2.style.fontSize = "0.75rem";
+                    tooltip2.style.whiteSpace = "nowrap";
+                    tooltip2.style.pointerEvents = "none";
+                    tooltip2.style.border = "1px solid #282828";
+                    tooltip2.style.zIndex = "1000";
+                    const changes = [];
+                    const states = fiberStates.get(
+                      chunk4DXMRM7J_cjs.getFiberId(fiber).toString()
+                    );
+                    const prevState = i > 0 && states ? states[i - 1] : null;
+                    if (prevState) {
+                      const propChanges = Object.keys(state.props).filter(
+                        (key) => state.props[key] !== prevState.props[key]
+                      );
+                      if (propChanges.length > 0) {
+                        changes.push(`Props: ${propChanges.join(", ")}`);
+                      }
+                      const hookChanges = Object.keys(
+                        state.hookState
+                      ).filter(
+                        (key) => state.hookState[key] !== prevState.hookState[key]
+                      );
+                      if (hookChanges.length > 0) {
+                        changes.push(`State: ${hookChanges.join(", ")}`);
+                      }
+                    }
+                    tooltip2.textContent = changes.length > 0 ? changes.join(" | ") : prevState ? "No changes" : "Initial state";
+                    target.appendChild(tooltip2);
+                  },
+                  onMouseLeave: (e) => {
+                    const tooltip2 = e.currentTarget.querySelector("div");
+                    if (tooltip2) {
+                      tooltip2.remove();
+                    }
+                  }
+                }
+              );
+            }
+          ),
+          !fiberStates.get(chunk4DXMRM7J_cjs.getFiberId(fiber).toString())?.length && /* @__PURE__ */ React17__default.default.createElement(
+            "div",
+            {
+              style: {
+                flex: 1,
+                height: "100%",
+                background: "#282828",
+                borderRadius: "0.125rem",
+                opacity: 0.5
+              }
+            }
+          )
+        ),
+        /* @__PURE__ */ React17__default.default.createElement(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: (fiberStates.get(chunk4DXMRM7J_cjs.getFiberId(fiber).toString())?.length ?? 1) - 1,
+            value: timelineIndex,
+            onChange: (e) => handleTimelineChange(Number(e.target.value)),
+            disabled: !fiberStates.get(chunk4DXMRM7J_cjs.getFiberId(fiber).toString())?.length,
+            style: {
+              width: "100%",
+              accentColor: "#FFC799",
+              opacity: fiberStates.get(chunk4DXMRM7J_cjs.getFiberId(fiber).toString())?.length ? 1 : 0.5
             }
           }
-        }
-      );
-    }), !fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString())?.length && /* @__PURE__ */ React17__default.default.createElement("div", { style: {
-      flex: 1,
-      height: "100%",
-      background: "#282828",
-      borderRadius: "0.125rem",
-      opacity: 0.5
-    } })), /* @__PURE__ */ React17__default.default.createElement(
-      "input",
-      {
-        type: "range",
-        min: 0,
-        max: (fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString())?.length ?? 1) - 1,
-        value: timelineIndex,
-        onChange: (e) => handleTimelineChange(Number(e.target.value)),
-        disabled: !fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString())?.length,
-        style: {
-          width: "100%",
-          accentColor: "#FFC799",
-          opacity: fiberStates.get(chunkR2Y4F7D7_cjs.getFiberId(fiber).toString())?.length ? 1 : 0.5
-        }
-      }
-    )));
+        )
+      )
+    );
   }
 );
 var Inspector2 = React17__default.default.memo(
@@ -5502,22 +5607,16 @@ var Inspector2 = React17__default.default.memo(
     const [fiberHistory, setFiberHistory] = React17.useState([]);
     const getFiberForDisplay = React17.useCallback(() => {
       if (selectedFiber) return selectedFiber;
-      const fiber2 = chunkR2Y4F7D7_cjs.getFiberFromHostInstance(element);
+      const fiber2 = chunk4DXMRM7J_cjs.getFiberFromHostInstance(element);
       return fiber2;
     }, [selectedFiber, element]);
-    const handleFiberSelect = (fiber2) => {
-      if (fiber2 !== selectedFiber) {
-        if (!isDialogMode) {
-          const currentFiber = getFiberForDisplay();
-          if (currentFiber) {
-            setFiberHistory([currentFiber]);
-          }
-          setIsDialogMode(true);
-        } else if (selectedFiber) {
-          setFiberHistory((prev) => [...prev, selectedFiber]);
-        }
-        setSelectedFiber(fiber2);
-      }
+    const handlePropertyHover = (_e, propName) => {
+      if (!isDialogMode) return;
+      const explanation = FIBER_PROP_EXPLANATIONS[propName];
+      setTooltip(explanation || null);
+    };
+    const handlePropertyLeave = () => {
+      setTooltip(null);
     };
     const handleClose = React17.useCallback(() => {
       setIsDialogMode(false);
@@ -5555,15 +5654,15 @@ var Inspector2 = React17__default.default.memo(
     React17.useEffect(() => {
       const handleMouseMove = (event) => {
         if (isDialogMode) return;
-        const isActive2 = chunkR2Y4F7D7_cjs.isInstrumentationActive() || chunkR2Y4F7D7_cjs.hasRDTHook();
+        const isActive2 = chunk4DXMRM7J_cjs.isInstrumentationActive() || chunk4DXMRM7J_cjs.hasRDTHook();
         if (!isActive2) {
           setIsActive(false);
           return;
         }
         if (!dangerouslyRunInProduction) {
-          const rdtHook = chunkR2Y4F7D7_cjs.getRDTHook();
+          const rdtHook = chunk4DXMRM7J_cjs.getRDTHook();
           for (const renderer of rdtHook.renderers.values()) {
-            const buildType = chunkR2Y4F7D7_cjs.detectReactBuildType(renderer);
+            const buildType = chunk4DXMRM7J_cjs.detectReactBuildType(renderer);
             if (buildType === "production") {
               setIsActive(false);
               return;
@@ -5624,7 +5723,7 @@ var Inspector2 = React17__default.default.memo(
     }, [rect]);
     React17.useEffect(() => {
       if (selectedFiber) {
-        const element2 = chunkR2Y4F7D7_cjs.getNearestHostFiber(selectedFiber)?.stateNode;
+        const element2 = chunk4DXMRM7J_cjs.getNearestHostFiber(selectedFiber)?.stateNode;
         if (element2) {
           setElement(element2);
           setRect(element2.getBoundingClientRect());
@@ -5642,7 +5741,7 @@ var Inspector2 = React17__default.default.memo(
     const fiber = getFiberForDisplay();
     if (!fiber) return null;
     let foundInspect = false;
-    chunkR2Y4F7D7_cjs.traverseFiber(
+    chunk4DXMRM7J_cjs.traverseFiber(
       fiber,
       (innerFiber) => {
         if (innerFiber.type === Inspector2) {
@@ -5677,7 +5776,7 @@ var Inspector2 = React17__default.default.memo(
       backgroundColor: "rgba(0, 0, 0, 0.7)",
       zIndex: 999
     } : {};
-    const fiberStack = fiber ? chunkR2Y4F7D7_cjs.getFiberStack(fiber) : [];
+    const fiberStack = fiber ? chunk4DXMRM7J_cjs.getFiberStack(fiber) : [];
     return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, null, isDialogMode && /* @__PURE__ */ React17__default.default.createElement(
       "div",
       {
@@ -5738,7 +5837,7 @@ var Inspector2 = React17__default.default.memo(
               margin: 0
             }
           },
-          `<${typeof fiber.type === "string" ? fiber.type : chunkR2Y4F7D7_cjs.getDisplayName(fiber.type) || "unknown"}>`,
+          `<${typeof fiber.type === "string" ? fiber.type : chunk4DXMRM7J_cjs.getDisplayName(fiber.type) || "unknown"}>`,
           !isDialogMode && /* @__PURE__ */ React17__default.default.createElement(
             "span",
             {
@@ -5767,9 +5866,9 @@ var Inspector2 = React17__default.default.memo(
           }
         },
         fiberStack.reverse().map((f, i, arr) => {
-          const name = typeof f.type === "string" ? f.type : chunkR2Y4F7D7_cjs.getDisplayName(f.type) || "unknown";
+          const name = typeof f.type === "string" ? f.type : chunk4DXMRM7J_cjs.getDisplayName(f.type) || "unknown";
           if (!name) return null;
-          return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, { key: chunkR2Y4F7D7_cjs.getFiberId(f) }, /* @__PURE__ */ React17__default.default.createElement(
+          return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, { key: chunk4DXMRM7J_cjs.getFiberId(f) }, /* @__PURE__ */ React17__default.default.createElement(
             BreadcrumbButton,
             {
               name,
@@ -5778,7 +5877,7 @@ var Inspector2 = React17__default.default.memo(
                   setFiberHistory((prev) => [...prev, selectedFiber]);
                 }
                 setSelectedFiber(f);
-                const element2 = chunkR2Y4F7D7_cjs.getNearestHostFiber(f)?.stateNode;
+                const element2 = chunk4DXMRM7J_cjs.getNearestHostFiber(f)?.stateNode;
                 if (element2) {
                   setElement(element2);
                   setRect(element2.getBoundingClientRect());
@@ -5790,7 +5889,7 @@ var Inspector2 = React17__default.default.memo(
                     setFiberHistory((prev) => [...prev, selectedFiber]);
                   }
                   setSelectedFiber(f);
-                  const element2 = chunkR2Y4F7D7_cjs.getNearestHostFiber(f)?.stateNode;
+                  const element2 = chunk4DXMRM7J_cjs.getNearestHostFiber(f)?.stateNode;
                   if (element2) {
                     setElement(element2);
                     setRect(element2.getBoundingClientRect());
@@ -5801,15 +5900,39 @@ var Inspector2 = React17__default.default.memo(
           ), i < arr.length - 1 && " > ");
         })
       ),
-      fiber && /* @__PURE__ */ React17__default.default.createElement(
-        FiberGraph,
+      /* @__PURE__ */ React17__default.default.createElement("div", { style: { flex: 1, overflow: "auto" } }, fiber && /* @__PURE__ */ React17__default.default.createElement(
+        Inspector,
         {
-          key: chunkR2Y4F7D7_cjs.getFiberId(fiber),
-          fiber,
-          onFiberSelect: handleFiberSelect,
-          isDialogMode
+          theme: theme3,
+          data: fiber,
+          expandLevel: 1,
+          table: false,
+          nodeRenderer: (props) => {
+            const Component = props.depth === 0 ? ObjectRootLabel : ObjectLabel;
+            return /* @__PURE__ */ React17__default.default.createElement(
+              "span",
+              {
+                onMouseEnter: (e) => handlePropertyHover(e, props.name),
+                onMouseLeave: handlePropertyLeave,
+                style: {
+                  cursor: FIBER_PROP_EXPLANATIONS[props.name] ? "help" : "default",
+                  padding: "1px 0",
+                  display: "inline-block",
+                  fontWeight: FIBER_PROP_EXPLANATIONS[props.name] ? 500 : "normal"
+                }
+              },
+              /* @__PURE__ */ React17__default.default.createElement(
+                Component,
+                {
+                  name: props.name,
+                  data: props.data,
+                  isNonenumerable: props.isNonenumerable
+                }
+              )
+            );
+          }
         }
-      ),
+      )),
       tooltip && /* @__PURE__ */ React17__default.default.createElement(
         "div",
         {