bippy 0.2.10 → 0.2.11

package/dist/inspect.js

@@ -1,5 +1,5 @@
 import './chunk-6TJRMCM3.js';
-import { getFiberId, HostRootTag, HostTextTag, getDisplayName, FragmentTag, isHostFiber, getNearestHostFiber, onCommitFiberRoot, traverseRenderedFibers, getRDTHook, getFiberFromHostInstance, traverseFiber, getFiberStack, isCompositeFiber, isInstrumentationActive, hasRDTHook, detectReactBuildType } from './chunk-6RFLBWUK.js';
+import { getFiberId, HostRootTag, HostTextTag, getDisplayName, FragmentTag, isHostFiber, getNearestHostFiber, onCommitFiberRoot, traverseRenderedFibers, getRDTHook, getFiberFromHostInstance, traverseFiber, getFiberStack, isCompositeFiber, isInstrumentationActive, hasRDTHook, detectReactBuildType } from './chunk-HRNPTAGF.js';
 import React17, { createContext, memo, Children, useContext, useCallback, useState, useLayoutEffect, useRef, useMemo, useEffect } from 'react';
 
 /**
@@ -4777,7 +4777,7 @@ var CloseButton = React17.memo(({ onClick }) => /* @__PURE__ */ React17.createEl
   },
   "\xD7"
 ));
-var FiberGraph = React17.memo(
+React17.memo(
   ({
     fiber,
     onFiberSelect,
@@ -5095,7 +5095,10 @@ var FiberGraph = React17.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");
@@ -5122,28 +5125,31 @@ var FiberGraph = React17.memo(
         }
       };
     }, []);
-    const handleTimelineChange = useCallback((index) => {
-      setTimelineIndex(index);
-      const fiberId = getFiberId(fiber).toString();
-      const states = fiberStates.get(fiberId);
-      if (states?.[index]) {
-        const rdtHook = 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 = useCallback(
+      (index) => {
+        setTimelineIndex(index);
+        const fiberId = getFiberId(fiber).toString();
+        const states = fiberStates.get(fiberId);
+        if (states?.[index]) {
+          const rdtHook = 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 = useCallback(() => {
       setIsPlaying((prev) => !prev);
     }, []);
@@ -5183,300 +5189,399 @@ var FiberGraph = React17.memo(
         }
       };
     }, [isPlaying, fiber, timelineIndex, handleTimelineChange]);
-    return /* @__PURE__ */ React17.createElement("div", { style: { height: "50ch", marginTop: "2ch", display: "flex", flexDirection: "column", position: "relative" } }, isDialogMode && /* @__PURE__ */ React17.createElement("div", { style: {
-      display: "flex",
-      gap: "0.5ch",
-      marginBottom: "1ch",
-      padding: "0 1ch",
-      borderBottom: "1px solid #282828"
-    } }, /* @__PURE__ */ React17.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.createElement("div", { style: {
-        position: "absolute",
-        bottom: "-1px",
-        left: 0,
-        right: 0,
-        height: "2px",
-        background: "#FFC799",
-        borderRadius: "2px 2px 0 0"
-      } })
-    ), /* @__PURE__ */ React17.createElement(
-      "button",
+    return /* @__PURE__ */ React17.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.createElement("div", { style: {
-        position: "absolute",
-        bottom: "-1px",
-        left: 0,
-        right: 0,
-        height: "2px",
-        background: "#FFC799",
-        borderRadius: "2px 2px 0 0"
-      } })
-    )), /* @__PURE__ */ React17.createElement("div", { style: { position: "relative", flex: 1 } }, /* @__PURE__ */ React17.createElement("div", { style: {
-      position: "absolute",
-      inset: 0,
-      display: activeTab === "graph" ? "block" : "none"
-    } }, /* @__PURE__ */ React17.createElement(
-      Controls,
-      {
-        onZoomIn: handleZoomIn,
-        onZoomOut: handleZoomOut,
-        onReset: handleReset,
-        onFit: handleFit
-      }
-    ), /* @__PURE__ */ React17.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.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: "0.5ch",
+            marginBottom: "1ch",
+            padding: "0 1ch",
+            borderBottom: "1px solid #282828"
+          }
         },
-        "aria-label": "Fiber Tree Visualization"
-      },
-      /* @__PURE__ */ React17.createElement("title", null, "Fiber Tree Visualization"),
-      /* @__PURE__ */ React17.createElement("g", { ref: svgGroupRef }, /* @__PURE__ */ React17.createElement("g", { ref: linksGroupRef, className: "links" }), /* @__PURE__ */ React17.createElement("g", { ref: nodesGroupRef, className: "nodes" }))
-    )), /* @__PURE__ */ React17.createElement("div", { style: {
-      position: "absolute",
-      inset: 0,
-      display: activeTab === "fiber" ? "block" : "none",
-      overflow: "auto",
-      background: "#101010",
-      borderRadius: "0.25rem",
-      padding: "1ch"
-    } }, /* @__PURE__ */ React17.createElement(
-      Inspector,
-      {
-        theme: theme3,
-        data: fiber,
-        expandLevel: isDialogMode ? 1 : 0,
-        table: false,
-        nodeRenderer: (props) => {
-          const Component = props.depth === 0 ? ObjectRootLabel : ObjectLabel;
-          return /* @__PURE__ */ React17.createElement(
-            "span",
+        /* @__PURE__ */ React17.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.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.createElement(
-              Component,
-              {
-                name: props.name,
-                data: props.data,
-                isNonenumerable: props.isNonenumerable
+            }
+          )
+        ),
+        /* @__PURE__ */ React17.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.createElement(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                bottom: "-1px",
+                left: 0,
+                right: 0,
+                height: "2px",
+                background: "#FFC799",
+                borderRadius: "2px 2px 0 0"
               }
-            )
-          );
-        }
-      }
-    ), tooltip && /* @__PURE__ */ React17.createElement("div", { style: {
-      position: "absolute",
-      zIndex: 1001,
-      backgroundColor: "#161616",
-      color: "#FFF",
-      bottom: "2ch",
-      right: "2ch",
-      pointerEvents: "none",
-      overflowY: "auto",
-      padding: "1ch",
-      fontSize: "1ch",
-      border: "1px solid #282828",
-      borderRadius: "0.25ch"
-    } }, tooltip))), isDialogMode && /* @__PURE__ */ React17.createElement("div", { style: {
-      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(getFiberId(fiber).toString())?.length ? 1 : 0.5
-    } }, /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", alignItems: "center", gap: "0.5ch" } }, /* @__PURE__ */ React17.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: handleStepBack,
-        disabled: !fiberStates.get(getFiberId(fiber).toString())?.length,
-        style: {
-          background: "transparent",
-          border: "1px solid #282828",
-          color: "#FFF",
-          borderRadius: "0.25rem",
-          cursor: fiberStates.get(getFiberId(fiber).toString())?.length ? "pointer" : "not-allowed",
-          padding: "0.25ch 0.5ch"
-        }
-      },
-      "\u23EE"
-    ), /* @__PURE__ */ React17.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: handlePlayPause,
-        disabled: !fiberStates.get(getFiberId(fiber).toString())?.length,
-        style: {
-          background: "transparent",
-          border: "1px solid #282828",
-          color: "#FFF",
-          borderRadius: "0.25rem",
-          cursor: fiberStates.get(getFiberId(fiber).toString())?.length ? "pointer" : "not-allowed",
-          padding: "0.25ch 0.5ch"
-        }
-      },
-      isPlaying ? "\u23F8" : "\u25B6\uFE0F"
-    ), /* @__PURE__ */ React17.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: handleStepForward,
-        disabled: !fiberStates.get(getFiberId(fiber).toString())?.length,
-        style: {
-          background: "transparent",
-          border: "1px solid #282828",
-          color: "#FFF",
-          borderRadius: "0.25rem",
-          cursor: fiberStates.get(getFiberId(fiber).toString())?.length ? "pointer" : "not-allowed",
-          padding: "0.25ch 0.5ch"
-        }
-      },
-      "\u23ED"
-    ), /* @__PURE__ */ React17.createElement("span", { style: { color: "#A0A0A0", fontSize: "0.75rem" } }, timelineIndex >= 0 && fiberStates.get(getFiberId(fiber).toString())?.[timelineIndex]?.timestamp ? new Date(fiberStates.get(getFiberId(fiber).toString())?.[timelineIndex]?.timestamp ?? 0).toLocaleTimeString() : "--:--:--"), !fiberStates.get(getFiberId(fiber).toString())?.length && /* @__PURE__ */ React17.createElement("span", { style: { color: "#A0A0A0", fontSize: "0.75rem", marginLeft: "auto" } }, "No state changes recorded yet")), /* @__PURE__ */ React17.createElement("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "0.25ch",
-      height: "2ch",
-      position: "relative"
-    } }, (fiberStates.get(getFiberId(fiber).toString()) ?? []).map((state, i) => {
-      const isActive = i === timelineIndex;
-      return /* @__PURE__ */ React17.createElement(
+            }
+          )
+        )
+      ),
+      /* @__PURE__ */ React17.createElement("div", { style: { position: "relative", flex: 1 } }, /* @__PURE__ */ React17.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 === "graph" ? "block" : "none"
+          }
+        },
+        /* @__PURE__ */ React17.createElement(
+          Controls,
+          {
+            onZoomIn: handleZoomIn,
+            onZoomOut: handleZoomOut,
+            onReset: handleReset,
+            onFit: handleFit
+          }
+        ),
+        /* @__PURE__ */ React17.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.createElement("title", null, "Fiber Tree Visualization"),
+          /* @__PURE__ */ React17.createElement("g", { ref: svgGroupRef }, /* @__PURE__ */ React17.createElement("g", { ref: linksGroupRef, className: "links" }), /* @__PURE__ */ React17.createElement("g", { ref: nodesGroupRef, className: "nodes" }))
+        )
+      ), /* @__PURE__ */ React17.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            display: activeTab === "fiber" ? "block" : "none",
+            overflow: "auto",
+            background: "#101010",
+            borderRadius: "0.25rem",
+            padding: "1ch"
+          }
+        },
+        /* @__PURE__ */ React17.createElement(
+          Inspector,
+          {
+            theme: theme3,
+            data: fiber,
+            expandLevel: 1,
+            table: false,
+            nodeRenderer: (props) => {
+              const Component = props.depth === 0 ? ObjectRootLabel : ObjectLabel;
+              return /* @__PURE__ */ React17.createElement(
+                "span",
+                {
+                  onMouseEnter: (e) => handlePropertyHover(e, props.name),
+                  onMouseLeave: handlePropertyLeave,
+                  style: {
+                    cursor: FIBER_PROP_EXPLANATIONS[props.name] ? "help" : "default",
+                    padding: "1px 0",
+                    display: "inline-block",
+                    fontWeight: FIBER_PROP_EXPLANATIONS[props.name] ? 500 : "normal"
+                  }
+                },
+                /* @__PURE__ */ React17.createElement(
+                  Component,
+                  {
+                    name: props.name,
+                    data: props.data,
+                    isNonenumerable: props.isNonenumerable
+                  }
+                )
+              );
+            }
+          }
+        ),
+        tooltip && /* @__PURE__ */ React17.createElement(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              zIndex: 1001,
+              backgroundColor: "#161616",
+              color: "#FFF",
+              bottom: "2ch",
+              right: "2ch",
+              pointerEvents: "none",
+              overflowY: "auto",
+              padding: "1ch",
+              fontSize: "1ch",
+              border: "1px solid #282828",
+              borderRadius: "0.25ch"
             }
           },
-          role: "button",
-          tabIndex: 0,
+          tooltip
+        )
+      )),
+      isDialogMode && /* @__PURE__ */ React17.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(getFiberId(fiber).toString())?.length ? 1 : 0.5
+          }
+        },
+        /* @__PURE__ */ React17.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(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.createElement(
+            "button",
+            {
+              type: "button",
+              onClick: handleStepBack,
+              disabled: !fiberStates.get(getFiberId(fiber).toString())?.length,
+              style: {
+                background: "transparent",
+                border: "1px solid #282828",
+                color: "#FFF",
+                borderRadius: "0.25rem",
+                cursor: fiberStates.get(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.createElement(
+            "button",
+            {
+              type: "button",
+              onClick: handlePlayPause,
+              disabled: !fiberStates.get(getFiberId(fiber).toString())?.length,
+              style: {
+                background: "transparent",
+                border: "1px solid #282828",
+                color: "#FFF",
+                borderRadius: "0.25rem",
+                cursor: fiberStates.get(getFiberId(fiber).toString())?.length ? "pointer" : "not-allowed",
+                padding: "0.25ch 0.5ch"
+              }
+            },
+            isPlaying ? "\u23F8" : "\u25B6\uFE0F"
+          ),
+          /* @__PURE__ */ React17.createElement(
+            "button",
+            {
+              type: "button",
+              onClick: handleStepForward,
+              disabled: !fiberStates.get(getFiberId(fiber).toString())?.length,
+              style: {
+                background: "transparent",
+                border: "1px solid #282828",
+                color: "#FFF",
+                borderRadius: "0.25rem",
+                cursor: fiberStates.get(getFiberId(fiber).toString())?.length ? "pointer" : "not-allowed",
+                padding: "0.25ch 0.5ch"
               }
+            },
+            "\u23ED"
+          ),
+          /* @__PURE__ */ React17.createElement("span", { style: { color: "#A0A0A0", fontSize: "0.75rem" } }, timelineIndex >= 0 && fiberStates.get(getFiberId(fiber).toString())?.[timelineIndex]?.timestamp ? new Date(
+            fiberStates.get(getFiberId(fiber).toString())?.[timelineIndex]?.timestamp ?? 0
+          ).toLocaleTimeString() : "--:--:--"),
+          !fiberStates.get(getFiberId(fiber).toString())?.length && /* @__PURE__ */ React17.createElement(
+            "span",
+            {
+              style: {
+                color: "#A0A0A0",
+                fontSize: "0.75rem",
+                marginLeft: "auto"
+              }
+            },
+            "No state changes recorded yet"
+          )
+        ),
+        /* @__PURE__ */ React17.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(getFiberId(fiber).toString()) ?? []).map(
+            (state, i) => {
+              const isActive = i === timelineIndex;
+              return /* @__PURE__ */ React17.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(
+                      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(getFiberId(fiber).toString())?.length && /* @__PURE__ */ React17.createElement(
+            "div",
+            {
+              style: {
+                flex: 1,
+                height: "100%",
+                background: "#282828",
+                borderRadius: "0.125rem",
+                opacity: 0.5
+              }
+            }
+          )
+        ),
+        /* @__PURE__ */ React17.createElement(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: (fiberStates.get(getFiberId(fiber).toString())?.length ?? 1) - 1,
+            value: timelineIndex,
+            onChange: (e) => handleTimelineChange(Number(e.target.value)),
+            disabled: !fiberStates.get(getFiberId(fiber).toString())?.length,
+            style: {
+              width: "100%",
+              accentColor: "#FFC799",
+              opacity: fiberStates.get(getFiberId(fiber).toString())?.length ? 1 : 0.5
             }
           }
-        }
-      );
-    }), !fiberStates.get(getFiberId(fiber).toString())?.length && /* @__PURE__ */ React17.createElement("div", { style: {
-      flex: 1,
-      height: "100%",
-      background: "#282828",
-      borderRadius: "0.125rem",
-      opacity: 0.5
-    } })), /* @__PURE__ */ React17.createElement(
-      "input",
-      {
-        type: "range",
-        min: 0,
-        max: (fiberStates.get(getFiberId(fiber).toString())?.length ?? 1) - 1,
-        value: timelineIndex,
-        onChange: (e) => handleTimelineChange(Number(e.target.value)),
-        disabled: !fiberStates.get(getFiberId(fiber).toString())?.length,
-        style: {
-          width: "100%",
-          accentColor: "#FFC799",
-          opacity: fiberStates.get(getFiberId(fiber).toString())?.length ? 1 : 0.5
-        }
-      }
-    )));
+        )
+      )
+    );
   }
 );
 var Inspector2 = React17.memo(
@@ -5497,19 +5602,13 @@ var Inspector2 = React17.memo(
       const fiber2 = 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 = useCallback(() => {
       setIsDialogMode(false);
@@ -5793,15 +5892,39 @@ var Inspector2 = React17.memo(
           ), i < arr.length - 1 && " > ");
         })
       ),
-      fiber && /* @__PURE__ */ React17.createElement(
-        FiberGraph,
+      /* @__PURE__ */ React17.createElement("div", { style: { flex: 1, overflow: "auto" } }, fiber && /* @__PURE__ */ React17.createElement(
+        Inspector,
         {
-          key: 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.createElement(
+              "span",
+              {
+                onMouseEnter: (e) => handlePropertyHover(e, props.name),
+                onMouseLeave: handlePropertyLeave,
+                style: {
+                  cursor: FIBER_PROP_EXPLANATIONS[props.name] ? "help" : "default",
+                  padding: "1px 0",
+                  display: "inline-block",
+                  fontWeight: FIBER_PROP_EXPLANATIONS[props.name] ? 500 : "normal"
+                }
+              },
+              /* @__PURE__ */ React17.createElement(
+                Component,
+                {
+                  name: props.name,
+                  data: props.data,
+                  isNonenumerable: props.isNonenumerable
+                }
+              )
+            );
+          }
         }
-      ),
+      )),
       tooltip && /* @__PURE__ */ React17.createElement(
         "div",
         {