bippy 0.2.6 → 0.2.8

package/dist/inspect.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('./chunk-YZYCWAB2.cjs');
-var chunkA425RZH5_cjs = require('./chunk-A425RZH5.cjs');
+var chunkC4DL5GYW_cjs = require('./chunk-C4DL5GYW.cjs');
 var React17 = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -4584,6 +4584,8 @@ function zoom_default2() {
 }
 
 // src/inspect.tsx
+var renderCounts = /* @__PURE__ */ new WeakMap();
+var fiberStates = /* @__PURE__ */ new Map();
 var FIBER_PROP_EXPLANATIONS = {
   tag: "Numeric type identifier for this fiber (e.g. 1=FunctionComponent, 5=HostComponent)",
   elementType: "The original function/class/element type",
@@ -4796,14 +4798,29 @@ var FiberGraph = React17__default.default.memo(
     const zoomRef = React17.useRef();
     const linksGroupRef = React17.useRef(null);
     const nodesGroupRef = React17.useRef(null);
+    const renderedFibersRef = React17.useRef(/* @__PURE__ */ new Set());
+    const flashTimeoutRef = React17.useRef();
+    const [timelineIndex, setTimelineIndex] = React17.useState(-1);
+    const [isPlaying, setIsPlaying] = React17.useState(false);
+    const playIntervalRef = React17.useRef();
+    const [activeTab, setActiveTab] = React17.useState("graph");
+    const [tooltip, setTooltip] = React17.useState(null);
+    const handlePropertyHover = (e, propName) => {
+      if (!isDialogMode) return;
+      const explanation = FIBER_PROP_EXPLANATIONS[propName];
+      setTooltip(explanation || null);
+    };
+    const handlePropertyLeave = () => {
+      setTooltip(null);
+    };
     const { nodes, links } = React17.useMemo(() => {
       const nodes2 = [];
       const links2 = [];
       const nodeMap = /* @__PURE__ */ new Map();
       let nodeCounter = 0;
-      const baseId = chunkA425RZH5_cjs.getFiberId(fiber).toString();
+      const baseId = chunkC4DL5GYW_cjs.getFiberId(fiber).toString();
       const rootId = `${baseId}-${nodeCounter++}`;
-      const rootName = typeof fiber.type === "string" ? fiber.type : fiber.type === null && fiber.tag === chunkA425RZH5_cjs.HostRootTag ? "#root" : fiber.type === null && fiber.tag === chunkA425RZH5_cjs.HostTextTag ? "#text" : chunkA425RZH5_cjs.getDisplayName(fiber.type) || fiber.type?.name || fiber.type?.displayName || "Component";
+      const rootName = typeof fiber.type === "string" ? fiber.type : fiber.type === null && fiber.tag === chunkC4DL5GYW_cjs.HostRootTag ? "#root" : fiber.type === null && fiber.tag === chunkC4DL5GYW_cjs.HostTextTag ? "#text" : chunkC4DL5GYW_cjs.getDisplayName(fiber.type) || fiber.type?.name || fiber.type?.displayName || "Component";
       const rootNode = {
         id: rootId,
         name: rootName,
@@ -4824,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 === chunkA425RZH5_cjs.FragmentTag) {
+          if (currentFiber.tag === chunkC4DL5GYW_cjs.FragmentTag) {
             if (currentFiber.child) {
               stack2.push({
                 fiber: currentFiber.child,
@@ -4835,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(chunkA425RZH5_cjs.getFiberId(currentFiber.return).toString())?.id || parentId : parentId,
+                parentId: currentFiber.return ? nodeMap.get(chunkC4DL5GYW_cjs.getFiberId(currentFiber.return).toString())?.id || parentId : parentId,
                 depth
               });
             }
             continue;
           }
-          if (currentFiber.type === null && chunkA425RZH5_cjs.isHostFiber(currentFiber)) {
+          if (currentFiber.type === null && chunkC4DL5GYW_cjs.isHostFiber(currentFiber)) {
             if (currentFiber.child) {
               stack2.push({
                 fiber: currentFiber.child,
@@ -4852,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(chunkA425RZH5_cjs.getFiberId(currentFiber.return).toString())?.id || parentId : parentId,
+                parentId: currentFiber.return ? nodeMap.get(chunkC4DL5GYW_cjs.getFiberId(currentFiber.return).toString())?.id || parentId : parentId,
                 depth
               });
             }
             continue;
           }
-          const childId = `${chunkA425RZH5_cjs.getFiberId(currentFiber)}-${nodeCounter++}`;
+          const childId = `${chunkC4DL5GYW_cjs.getFiberId(currentFiber)}-${nodeCounter++}`;
           let name = "unknown";
           if (typeof currentFiber.type === "string") {
             name = currentFiber.type;
-          } else if (currentFiber.type === null && currentFiber.tag === chunkA425RZH5_cjs.HostTextTag) {
+          } else if (currentFiber.type === null && currentFiber.tag === chunkC4DL5GYW_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 === chunkA425RZH5_cjs.HostRootTag) {
+          } else if (currentFiber.type === null && currentFiber.tag === chunkC4DL5GYW_cjs.HostRootTag) {
             name = "#root";
           } else {
-            name = chunkA425RZH5_cjs.getDisplayName(currentFiber.type) || currentFiber.type?.name || currentFiber.type?.displayName || "Component";
+            name = chunkC4DL5GYW_cjs.getDisplayName(currentFiber.type) || currentFiber.type?.name || currentFiber.type?.displayName || "Component";
           }
           const node = {
             id: childId,
@@ -4896,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(chunkA425RZH5_cjs.getFiberId(currentFiber.return).toString())?.id || parentId : parentId,
+              parentId: currentFiber.return ? nodeMap.get(chunkC4DL5GYW_cjs.getFiberId(currentFiber.return).toString())?.id || parentId : parentId,
               depth
             });
           }
@@ -4969,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 = chunkA425RZH5_cjs.getNearestHostFiber(d.data.fiber)?.stateNode;
+        const element = chunkC4DL5GYW_cjs.getNearestHostFiber(d.data.fiber)?.stateNode;
         if (element instanceof HTMLElement) {
           element.scrollIntoView({ behavior: "smooth", block: "center" });
           const originalOutline = element.style.outline;
@@ -4991,17 +5008,22 @@ var FiberGraph = React17__default.default.memo(
           const isRoot = d.data.id === nodes[0].id;
           const isPreview = !isDialogMode;
           const scale = isRoot ? isPreview ? 2 : 1.75 : 1;
-          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", chunkA425RZH5_cjs.isCompositeFiber(d.data.fiber) ? "#FFF" : "#232323").attr("stroke", "#505050").attr("stroke-width", isRoot ? "3" : "2");
+          const isRendered = renderedFibersRef.current.has(
+            chunkC4DL5GYW_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", chunkC4DL5GYW_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() {
-            select_default2(this).attr("stroke", "#505050").attr("stroke-width", isRoot ? "3" : "2");
+            select_default2(this).attr("stroke", isRendered ? "#FFC799" : "#505050").attr("stroke-width", isRoot ? "3" : "2");
           });
-          g.selectAll("text.name").data([d]).join("text").attr("class", "name").attr("text-anchor", "middle").attr("dy", `${-0.6 * scale}em`).attr("fill", chunkA425RZH5_cjs.isCompositeFiber(d.data.fiber) ? "#000" : "#FFF").attr("font-weight", "500").attr(
+          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", chunkC4DL5GYW_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);
-          g.selectAll("text.props").data([d]).join("text").attr("class", "props").attr("text-anchor", "middle").attr("dy", `${0.9 * scale}em`).attr("fill", chunkA425RZH5_cjs.isCompositeFiber(d.data.fiber) ? "#666" : "#999").attr(
+          ).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", chunkC4DL5GYW_cjs.isCompositeFiber(d.data.fiber) ? "#666" : "#999").attr(
             "font-size",
             isRoot ? isPreview ? "1.25em" : "1.1em" : "0.75em"
           ).text(() => {
@@ -5065,7 +5087,173 @@ var FiberGraph = React17__default.default.memo(
         setTimeout(handleFit, 0);
       }
     }, [nodes.length, handleFit]);
-    return /* @__PURE__ */ React17__default.default.createElement("div", { style: { height: "50ch", marginTop: "2ch" } }, /* @__PURE__ */ React17__default.default.createElement(
+    React17.useEffect(() => {
+      chunkC4DL5GYW_cjs.onCommitFiberRoot((root2) => {
+        if (flashTimeoutRef.current) {
+          clearTimeout(flashTimeoutRef.current);
+        }
+        renderedFibersRef.current = /* @__PURE__ */ new Set();
+        chunkC4DL5GYW_cjs.traverseRenderedFibers(root2, (renderedFiber) => {
+          const fiberId = chunkC4DL5GYW_cjs.getFiberId(renderedFiber).toString();
+          renderedFibersRef.current.add(fiberId);
+          const states = fiberStates.get(fiberId) || [];
+          states.push({
+            props: renderedFiber.memoizedProps ?? {},
+            hookState: renderedFiber.memoizedState ?? {},
+            timestamp: Date.now()
+          });
+          fiberStates.set(fiberId, states);
+          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(
+              chunkC4DL5GYW_cjs.getFiberId(d.data.fiber).toString()
+            );
+            if (isRendered) {
+              const rect = select_default2(this).select("rect");
+              rect.attr("stroke", "#FFC799").style("filter", "drop-shadow(0 0 8px #FFC799)").transition().duration(400).style("filter", "none").attr("stroke", "#505050");
+              const renderCount = renderCounts.get(d.data.fiber) || 0;
+              const renderText = renderCount > 0 ? ` \xD7${renderCount}` : "";
+              select_default2(this).select("text.name").text(d.data.name + renderText);
+            }
+          });
+        }
+        flashTimeoutRef.current = setTimeout(() => {
+          renderedFibersRef.current = /* @__PURE__ */ new Set();
+        }, 400);
+      });
+      return () => {
+        if (flashTimeoutRef.current) {
+          clearTimeout(flashTimeoutRef.current);
+        }
+      };
+    }, []);
+    const handleTimelineChange = React17.useCallback((index) => {
+      setTimelineIndex(index);
+      const fiberId = chunkC4DL5GYW_cjs.getFiberId(fiber).toString();
+      const states = fiberStates.get(fiberId);
+      if (states?.[index]) {
+        const rdtHook = chunkC4DL5GYW_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]);
+    const handlePlayPause = React17.useCallback(() => {
+      setIsPlaying((prev) => !prev);
+    }, []);
+    const handleStepForward = React17.useCallback(() => {
+      const states = fiberStates.get(chunkC4DL5GYW_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(chunkC4DL5GYW_cjs.getFiberId(fiber).toString());
+      if (states) {
+        const prevIndex = Math.max(timelineIndex - 1, 0);
+        handleTimelineChange(prevIndex);
+      }
+    }, [fiber, timelineIndex, handleTimelineChange]);
+    React17.useEffect(() => {
+      if (isPlaying) {
+        playIntervalRef.current = setInterval(() => {
+          const states = fiberStates.get(chunkC4DL5GYW_cjs.getFiberId(fiber).toString());
+          if (states) {
+            const nextIndex = timelineIndex + 1;
+            if (nextIndex >= states.length) {
+              setIsPlaying(false);
+            } else {
+              handleTimelineChange(nextIndex);
+            }
+          }
+        }, 1e3);
+      } else if (playIntervalRef.current) {
+        clearInterval(playIntervalRef.current);
+      }
+      return () => {
+        if (playIntervalRef.current) {
+          clearInterval(playIntervalRef.current);
+        }
+      };
+    }, [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",
+      {
+        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"
+      } })
+    )), /* @__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,
@@ -5090,7 +5278,213 @@ var FiberGraph = React17__default.default.memo(
       },
       /* @__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",
+            {
+              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"
+    } }, 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(chunkC4DL5GYW_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(chunkC4DL5GYW_cjs.getFiberId(fiber).toString())?.length,
+        style: {
+          background: "transparent",
+          border: "1px solid #282828",
+          color: "#FFF",
+          borderRadius: "0.25rem",
+          cursor: fiberStates.get(chunkC4DL5GYW_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(chunkC4DL5GYW_cjs.getFiberId(fiber).toString())?.length,
+        style: {
+          background: "transparent",
+          border: "1px solid #282828",
+          color: "#FFF",
+          borderRadius: "0.25rem",
+          cursor: fiberStates.get(chunkC4DL5GYW_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(chunkC4DL5GYW_cjs.getFiberId(fiber).toString())?.length,
+        style: {
+          background: "transparent",
+          border: "1px solid #282828",
+          color: "#FFF",
+          borderRadius: "0.25rem",
+          cursor: fiberStates.get(chunkC4DL5GYW_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(chunkC4DL5GYW_cjs.getFiberId(fiber).toString())?.[timelineIndex]?.timestamp ? new Date(fiberStates.get(chunkC4DL5GYW_cjs.getFiberId(fiber).toString())?.[timelineIndex]?.timestamp ?? 0).toLocaleTimeString() : "--:--:--"), !fiberStates.get(chunkC4DL5GYW_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(chunkC4DL5GYW_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(chunkC4DL5GYW_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(chunkC4DL5GYW_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(chunkC4DL5GYW_cjs.getFiberId(fiber).toString())?.length ?? 1) - 1,
+        value: timelineIndex,
+        onChange: (e) => handleTimelineChange(Number(e.target.value)),
+        disabled: !fiberStates.get(chunkC4DL5GYW_cjs.getFiberId(fiber).toString())?.length,
+        style: {
+          width: "100%",
+          accentColor: "#FFC799",
+          opacity: fiberStates.get(chunkC4DL5GYW_cjs.getFiberId(fiber).toString())?.length ? 1 : 0.5
+        }
+      }
+    )));
   }
 );
 var Inspector2 = React17__default.default.memo(
@@ -5108,17 +5502,9 @@ var Inspector2 = React17__default.default.memo(
     const [fiberHistory, setFiberHistory] = React17.useState([]);
     const getFiberForDisplay = React17.useCallback(() => {
       if (selectedFiber) return selectedFiber;
-      const fiber2 = chunkA425RZH5_cjs.getFiberFromHostInstance(element);
+      const fiber2 = chunkC4DL5GYW_cjs.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 handleFiberSelect = (fiber2) => {
       if (fiber2 !== selectedFiber) {
         if (!isDialogMode) {
@@ -5169,15 +5555,15 @@ var Inspector2 = React17__default.default.memo(
     React17.useEffect(() => {
       const handleMouseMove = (event) => {
         if (isDialogMode) return;
-        const isActive2 = chunkA425RZH5_cjs.isInstrumentationActive() || chunkA425RZH5_cjs.hasRDTHook();
+        const isActive2 = chunkC4DL5GYW_cjs.isInstrumentationActive() || chunkC4DL5GYW_cjs.hasRDTHook();
         if (!isActive2) {
           setIsActive(false);
           return;
         }
         if (!dangerouslyRunInProduction) {
-          const rdtHook = chunkA425RZH5_cjs.getRDTHook();
+          const rdtHook = chunkC4DL5GYW_cjs.getRDTHook();
           for (const renderer of rdtHook.renderers.values()) {
-            const buildType = chunkA425RZH5_cjs.detectReactBuildType(renderer);
+            const buildType = chunkC4DL5GYW_cjs.detectReactBuildType(renderer);
             if (buildType === "production") {
               setIsActive(false);
               return;
@@ -5238,7 +5624,7 @@ var Inspector2 = React17__default.default.memo(
     }, [rect]);
     React17.useEffect(() => {
       if (selectedFiber) {
-        const element2 = chunkA425RZH5_cjs.getNearestHostFiber(selectedFiber)?.stateNode;
+        const element2 = chunkC4DL5GYW_cjs.getNearestHostFiber(selectedFiber)?.stateNode;
         if (element2) {
           setElement(element2);
           setRect(element2.getBoundingClientRect());
@@ -5256,7 +5642,7 @@ var Inspector2 = React17__default.default.memo(
     const fiber = getFiberForDisplay();
     if (!fiber) return null;
     let foundInspect = false;
-    chunkA425RZH5_cjs.traverseFiber(
+    chunkC4DL5GYW_cjs.traverseFiber(
       fiber,
       (innerFiber) => {
         if (innerFiber.type === Inspector2) {
@@ -5291,7 +5677,7 @@ var Inspector2 = React17__default.default.memo(
       backgroundColor: "rgba(0, 0, 0, 0.7)",
       zIndex: 999
     } : {};
-    const fiberStack = fiber ? chunkA425RZH5_cjs.getFiberStack(fiber) : [];
+    const fiberStack = fiber ? chunkC4DL5GYW_cjs.getFiberStack(fiber) : [];
     return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, null, isDialogMode && /* @__PURE__ */ React17__default.default.createElement(
       "div",
       {
@@ -5352,7 +5738,7 @@ var Inspector2 = React17__default.default.memo(
               margin: 0
             }
           },
-          `<${typeof fiber.type === "string" ? fiber.type : chunkA425RZH5_cjs.getDisplayName(fiber.type) || "unknown"}>`,
+          `<${typeof fiber.type === "string" ? fiber.type : chunkC4DL5GYW_cjs.getDisplayName(fiber.type) || "unknown"}>`,
           !isDialogMode && /* @__PURE__ */ React17__default.default.createElement(
             "span",
             {
@@ -5381,9 +5767,9 @@ var Inspector2 = React17__default.default.memo(
           }
         },
         fiberStack.reverse().map((f, i, arr) => {
-          const name = typeof f.type === "string" ? f.type : chunkA425RZH5_cjs.getDisplayName(f.type) || "unknown";
+          const name = typeof f.type === "string" ? f.type : chunkC4DL5GYW_cjs.getDisplayName(f.type) || "unknown";
           if (!name) return null;
-          return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, { key: chunkA425RZH5_cjs.getFiberId(f) }, /* @__PURE__ */ React17__default.default.createElement(
+          return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, { key: chunkC4DL5GYW_cjs.getFiberId(f) }, /* @__PURE__ */ React17__default.default.createElement(
             BreadcrumbButton,
             {
               name,
@@ -5392,7 +5778,7 @@ var Inspector2 = React17__default.default.memo(
                   setFiberHistory((prev) => [...prev, selectedFiber]);
                 }
                 setSelectedFiber(f);
-                const element2 = chunkA425RZH5_cjs.getNearestHostFiber(f)?.stateNode;
+                const element2 = chunkC4DL5GYW_cjs.getNearestHostFiber(f)?.stateNode;
                 if (element2) {
                   setElement(element2);
                   setRect(element2.getBoundingClientRect());
@@ -5404,7 +5790,7 @@ var Inspector2 = React17__default.default.memo(
                     setFiberHistory((prev) => [...prev, selectedFiber]);
                   }
                   setSelectedFiber(f);
-                  const element2 = chunkA425RZH5_cjs.getNearestHostFiber(f)?.stateNode;
+                  const element2 = chunkC4DL5GYW_cjs.getNearestHostFiber(f)?.stateNode;
                   if (element2) {
                     setElement(element2);
                     setRect(element2.getBoundingClientRect());
@@ -5418,58 +5804,12 @@ var Inspector2 = React17__default.default.memo(
       fiber && /* @__PURE__ */ React17__default.default.createElement(
         FiberGraph,
         {
-          key: chunkA425RZH5_cjs.getFiberId(fiber),
+          key: chunkC4DL5GYW_cjs.getFiberId(fiber),
           fiber,
           onFiberSelect: handleFiberSelect,
           isDialogMode
         }
       ),
-      /* @__PURE__ */ React17__default.default.createElement(
-        "div",
-        {
-          onMouseLeave: handlePropertyLeave,
-          style: {
-            flex: isDialogMode ? 1 : "none",
-            overflow: "auto",
-            marginTop: "1ch",
-            borderTop: "1px solid #282828",
-            paddingTop: "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",
-                {
-                  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",
         {