react-state-inspector-devtools 1.0.3 → 1.1.2

package/dist/index.mjs

@@ -189,7 +189,7 @@ function useComponentLabel(label) {
 }
 
 // src/StateInspectorUI.tsx
-import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 
 // src/ui/constants.ts
@@ -248,38 +248,73 @@ function safeStringify(v) {
   }
 }
 
+// src/ui/icons/DevtoolsIcon.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DevtoolsIcon = (props) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2("g", { clipPath: "url(#clip0_1_13)", children: /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "M2 7.00002C1.90538 7.00034 1.81262 6.97381 1.73248 6.92351C1.65234 6.87321 1.58812 6.8012 1.54727 6.71585C1.50643 6.6305 1.49065 6.53531 1.50175 6.44135C1.51285 6.34739 1.55039 6.2585 1.61 6.18502L6.56 1.08502C6.59713 1.04216 6.64773 1.0132 6.70349 1.00289C6.75925 0.992575 6.81686 1.00153 6.86687 1.02827C6.91687 1.05502 6.95629 1.09797 6.97867 1.15007C7.00104 1.20218 7.00504 1.26034 6.99 1.31502L6.03 4.32502C6.00169 4.40078 5.99219 4.48228 6.0023 4.56252C6.01241 4.64277 6.04183 4.71936 6.08805 4.78573C6.13426 4.85211 6.19589 4.90628 6.26764 4.9436C6.33939 4.98092 6.41912 5.00028 6.5 5.00002H10C10.0946 4.9997 10.1874 5.02623 10.2675 5.07653C10.3477 5.12683 10.4119 5.19884 10.4527 5.28419C10.4936 5.36954 10.5094 5.46473 10.4983 5.55869C10.4871 5.65266 10.4496 5.74154 10.39 5.81502L5.44 10.915C5.40287 10.9579 5.35227 10.9868 5.29651 10.9972C5.24075 11.0075 5.18314 10.9985 5.13313 10.9718C5.08313 10.945 5.04371 10.9021 5.02133 10.85C4.99896 10.7979 4.99496 10.7397 5.01 10.685L5.97 7.67502C5.99831 7.59926 6.00781 7.51776 5.9977 7.43752C5.98759 7.35727 5.95817 7.28068 5.91195 7.21431C5.86574 7.14793 5.80411 7.09376 5.73236 7.05644C5.66061 7.01912 5.58088 6.99976 5.5 7.00002H2Z",
+            fill: "inherit",
+            stroke: "inherit",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsx2("clipPath", { id: "clip0_1_13", children: /* @__PURE__ */ jsx2("rect", { width: "12", height: "12", fill: "white" }) }) })
+      ]
+    }
+  );
+};
+var DevtoolsIcon_default = DevtoolsIcon;
+
 // src/ui/components/FloatingButton.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function FloatingButton({ onClick }) {
-  return /* @__PURE__ */ jsx2(
+import { jsx as jsx3 } from "react/jsx-runtime";
+function FloatingButton({ onClick, isActive }) {
+  return /* @__PURE__ */ jsx3(
     "button",
     {
+      "data-rsi-floating-button": true,
       title: "State Inspector (\u2318\u21E7I / Ctrl\u21E7I)",
       onClick,
       style: {
         position: "fixed",
         right: 16,
         bottom: 16,
-        width: 44,
-        height: 44,
-        borderRadius: 22,
+        width: 48,
+        height: 48,
+        borderRadius: 24,
         border: "none",
-        background: "#111",
+        background: isActive ? "#155DFC" : "#111",
         color: "#fff",
         cursor: "pointer",
-        zIndex: 999999
+        zIndex: 999999,
+        padding: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
       },
       "aria-label": "Toggle State Inspector",
-      children: "\u25CE"
+      children: /* @__PURE__ */ jsx3(DevtoolsIcon_default, { fill: isActive ? "#FFF" : void 0, stroke: "#FFF", height: 20, width: 20 })
     }
   );
 }
 
 // src/ui/components/DockPreviewOverlay.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function DockPreviewOverlay({ preview }) {
   if (!preview) return null;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       style: {
@@ -288,26 +323,66 @@ function DockPreviewOverlay({ preview }) {
         pointerEvents: "none",
         zIndex: 999998
       },
-      children: /* @__PURE__ */ jsx3("div", { style: previewRectStyle(preview) })
+      children: /* @__PURE__ */ jsx4("div", { style: previewRectStyle(preview) })
     }
   );
 }
 
 // src/ui/components/ResizeHandle.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-function ResizeHandle({ onResize }) {
-  return /* @__PURE__ */ jsx4(
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
+var EDGE_SIZE = 6;
+var CORNER_SIZE = 12;
+var handleConfigs = {
+  // Edges
+  top: { top: 0, left: CORNER_SIZE, right: CORNER_SIZE, height: EDGE_SIZE, cursor: "ns-resize" },
+  bottom: {
+    bottom: 0,
+    left: CORNER_SIZE,
+    right: CORNER_SIZE,
+    height: EDGE_SIZE,
+    cursor: "ns-resize"
+  },
+  left: { left: 0, top: CORNER_SIZE, bottom: CORNER_SIZE, width: EDGE_SIZE, cursor: "ew-resize" },
+  right: { right: 0, top: CORNER_SIZE, bottom: CORNER_SIZE, width: EDGE_SIZE, cursor: "ew-resize" },
+  // Corners
+  "top-left": { top: 0, left: 0, width: CORNER_SIZE, height: CORNER_SIZE, cursor: "nwse-resize" },
+  "top-right": { top: 0, right: 0, width: CORNER_SIZE, height: CORNER_SIZE, cursor: "nesw-resize" },
+  "bottom-left": {
+    bottom: 0,
+    left: 0,
+    width: CORNER_SIZE,
+    height: CORNER_SIZE,
+    cursor: "nesw-resize"
+  },
+  "bottom-right": {
+    bottom: 0,
+    right: 0,
+    width: CORNER_SIZE,
+    height: CORNER_SIZE,
+    cursor: "nwse-resize"
+  }
+};
+function Handle({
+  direction,
+  onResize
+}) {
+  const config = handleConfigs[direction];
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       onPointerDown: (e) => {
+        e.stopPropagation();
         const startX = e.clientX;
         const startY = e.clientY;
         e.currentTarget.setPointerCapture(e.pointerId);
         const onMove = (ev) => {
-          onResize({
-            dx: ev.clientX - startX,
-            dy: ev.clientY - startY
-          });
+          onResize(
+            {
+              dx: ev.clientX - startX,
+              dy: ev.clientY - startY
+            },
+            direction
+          );
         };
         const onUp = () => {
           window.removeEventListener("pointermove", onMove);
@@ -318,24 +393,38 @@ function ResizeHandle({ onResize }) {
       },
       style: {
         position: "absolute",
-        right: 6,
-        bottom: 6,
-        width: 14,
-        height: 14,
-        borderRadius: 6,
-        border: "1px solid #333",
-        background: "#838383",
-        cursor: "nwse-resize"
+        top: config.top,
+        right: config.right,
+        bottom: config.bottom,
+        left: config.left,
+        width: config.width,
+        height: config.height,
+        cursor: config.cursor,
+        background: "transparent",
+        zIndex: 10
       }
     }
   );
 }
+var directions = [
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right"
+];
+function ResizeHandle({ onResize }) {
+  return /* @__PURE__ */ jsx5(Fragment, { children: directions.map((dir) => /* @__PURE__ */ jsx5(Handle, { direction: dir, onResize }, dir)) });
+}
 
 // src/ui/components/SidebarResizer.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function SidebarResizer({ leftWidth, onWidthChange, hidden }) {
   if (hidden) return null;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       onPointerDown: (e) => {
@@ -368,67 +457,131 @@ function SidebarResizer({ leftWidth, onWidthChange, hidden }) {
 }
 
 // src/ui/components/DragHandle.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { useState as useState2 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function DragHandle({ children, onDragStart, onDragEnd, style }) {
-  return /* @__PURE__ */ jsx6(
+  const [isDragging, setIsDragging] = useState2(false);
+  return /* @__PURE__ */ jsx7(
     "div",
     {
-      style: { cursor: "grab", userSelect: "none", ...style },
-      onPointerDown: onDragStart,
-      onPointerUp: onDragEnd,
+      style: { cursor: isDragging ? "grabbing" : "grab", userSelect: "none", ...style },
+      onPointerDown: (e) => {
+        const target = e.target;
+        try {
+          if (target && typeof target.closest === "function" && target.closest('button, input, textarea, a, [role="button"], [data-no-drag]')) {
+            return;
+          }
+        } catch (e2) {
+          console.error(e2);
+        }
+        setIsDragging(true);
+        onDragStart(e);
+      },
+      onPointerUp: () => {
+        if (isDragging) {
+          setIsDragging(false);
+          onDragEnd();
+        }
+      },
       children
     }
   );
 }
 
+// src/ui/styles.ts
+var inputStyle = {
+  padding: "8px 10px",
+  borderRadius: 4,
+  border: "none",
+  background: "#18181B",
+  color: "#fff",
+  minWidth: 120
+};
+var cardStyle = {
+  border: "1px solid rgba(39, 39, 42, 0.30)",
+  borderRadius: 12,
+  padding: 10
+};
+
+// src/ui/components/SearchInput.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function SearchInput({ value, onChange, inputRef }) {
+  return /* @__PURE__ */ jsx8(
+    "input",
+    {
+      value,
+      onChange: (e) => onChange(e.target.value),
+      placeholder: "Filter\u2026",
+      ref: inputRef,
+      style: {
+        ...inputStyle,
+        outline: "none"
+      }
+    }
+  );
+}
+
 // src/ui/components/ComponentList.tsx
-import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
 function ComponentList({
   components,
   selectedId,
   onSelect,
-  onDragStart,
-  onDragEnd,
-  height,
-  hidden
+  hidden,
+  query,
+  onQueryChange,
+  searchRef
 }) {
   if (hidden) return null;
-  return /* @__PURE__ */ jsxs("div", { style: { padding: 12, height, flexDirection: "column", boxSizing: "border-box", display: "flex" }, children: [
-    /* @__PURE__ */ jsxs(
-      DragHandle,
+  return /* @__PURE__ */ jsxs2("div", { style: { padding: 4, boxSizing: "border-box", backgroundColor: "#09090B" }, children: [
+    /* @__PURE__ */ jsx9(
+      "div",
       {
-        onDragStart,
-        onDragEnd,
-        style: { display: "flex", alignItems: "center", justifyContent: "space-between" },
-        children: [
-          /* @__PURE__ */ jsx7("h4", { style: { margin: 0 }, children: "Components" }),
-          /* @__PURE__ */ jsx7("span", { style: { fontSize: 12, opacity: 0.7 }, children: components.length })
-        ]
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          paddingTop: 4,
+          paddingBottom: 8,
+          paddingLeft: 4,
+          paddingRight: 4
+        },
+        children: /* @__PURE__ */ jsx9(SearchInput, { value: query, onChange: onQueryChange, inputRef: searchRef })
       }
     ),
-    /* @__PURE__ */ jsx7("div", { style: { marginTop: 10, display: "flex", flexDirection: "column", gap: 8, overflow: "auto", flex: 1 }, children: components.map((c) => {
+    /* @__PURE__ */ jsx9("div", { style: { display: "flex", flexDirection: "column", gap: 2, overflow: "auto", flex: 1 }, children: components.map((c) => {
       const active = c.id === selectedId;
-      return /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsxs2(
         "button",
         {
           id: `rsi-comp-${c.id}`,
           onClick: () => onSelect(c.id),
           style: {
-            textAlign: "left",
-            background: active ? "#2a2a2a" : "transparent",
-            border: "1px solid #333",
-            borderRadius: 10,
-            padding: 10,
-            color: "#fff",
-            cursor: "pointer",
-            flex: "none"
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: 8,
+            backgroundColor: active ? "#27272A" : "transparent",
+            border: "none"
           },
           children: [
-            /* @__PURE__ */ jsx7("div", { style: { fontWeight: 700 }, children: c.label }),
-            /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, opacity: 0.7 }, children: [
-              "states: ",
-              c.stateKeys.length || 0
-            ] })
+            /* @__PURE__ */ jsx9("div", { style: { fontWeight: 500, fontSize: 12, color: active ? "#fff" : "#9F9FA9" }, children: c.label }),
+            /* @__PURE__ */ jsx9(
+              "div",
+              {
+                style: {
+                  fontSize: 9,
+                  height: 16,
+                  width: 16,
+                  color: "#D4D4D8",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: 8,
+                  backgroundColor: "#3F3F47"
+                },
+                children: c.stateKeys.length
+              }
+            )
           ]
         },
         c.id
@@ -438,17 +591,14 @@ function ComponentList({
 }
 
 // src/ui/components/StatePanelHeader.tsx
-import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 function StatePanelHeader({
   selectedLabel,
   leftCollapsed,
-  onToggleCollapse,
-  onClose,
-  onDragStart,
-  onDragEnd
+  onToggleCollapse
 }) {
-  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center" }, children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx10(
       "button",
       {
         onClick: (e) => {
@@ -470,77 +620,16 @@ function StatePanelHeader({
         children: leftCollapsed ? "\xBB" : "\xAB"
       }
     ),
-    /* @__PURE__ */ jsxs2(
-      DragHandle,
-      {
-        onDragStart,
-        onDragEnd,
-        style: { display: "flex", flexDirection: "column", flex: 1 },
-        children: [
-          /* @__PURE__ */ jsx8("h4", { style: { margin: 0 }, children: "State" }),
-          /* @__PURE__ */ jsx8("div", { style: { fontSize: 12, opacity: 0.7 }, children: selectedLabel ?? "No selection" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx8(
-      "button",
-      {
-        onClick: onClose,
-        style: {
-          background: "transparent",
-          color: "#fff",
-          border: "1px solid #333",
-          borderRadius: 10,
-          padding: "6px 10px",
-          cursor: "pointer",
-          fontSize: 12,
-          marginLeft: "auto"
-        },
-        children: "Close"
-      }
-    )
+    /* @__PURE__ */ jsx10("h4", { style: { margin: 0 }, children: selectedLabel ?? "No selection" })
   ] });
 }
 
-// src/ui/styles.ts
-var inputStyle = {
-  padding: "8px 10px",
-  borderRadius: 10,
-  border: "1px solid #333",
-  background: "#111",
-  color: "#fff"
-};
-var cardStyle = {
-  border: "1px solid #333",
-  borderRadius: 12,
-  padding: 10
-};
-
-// src/ui/components/SearchInput.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-function SearchInput({ value, onChange, inputRef }) {
-  return /* @__PURE__ */ jsx9(
-    "input",
-    {
-      value,
-      onChange: (e) => onChange(e.target.value),
-      placeholder: "Search components / state keys\u2026",
-      ref: inputRef,
-      style: {
-        ...inputStyle,
-        marginTop: 10,
-        outline: "none"
-      }
-    }
-  );
-}
-
 // src/ui/components/JsonEditor.tsx
-import { useEffect as useEffect3, useState as useState2 } from "react";
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 function JsonEditor({ initial, onValidJson }) {
-  const [raw, setRaw] = useState2(initial);
-  const [error, setError] = useState2(null);
+  const [raw, setRaw] = useState3(initial);
+  const [error, setError] = useState3(null);
   useEffect3(() => {
     setRaw(initial);
   }, [initial]);
@@ -555,8 +644,8 @@ function JsonEditor({ initial, onValidJson }) {
       setError("Invalid JSON");
     }
   };
-  return /* @__PURE__ */ jsxs3("div", { style: { display: "grid", gap: 6 }, children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs4("div", { style: { display: "grid", gap: 6 }, children: [
+    /* @__PURE__ */ jsx11(
       "textarea",
       {
         value: raw,
@@ -570,16 +659,16 @@ function JsonEditor({ initial, onValidJson }) {
         }
       }
     ),
-    error && /* @__PURE__ */ jsx10("div", { style: { fontSize: 12, color: "#ff6b6b" }, children: error })
+    error && /* @__PURE__ */ jsx11("div", { style: { fontSize: 12, color: "#ff6b6b" }, children: error })
   ] });
 }
 
 // src/ui/components/StateEditor.tsx
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 function StateEditor({ value, meta, onChange }) {
   if (meta?.type === "boolean" || typeof value === "boolean") {
-    return /* @__PURE__ */ jsxs4("label", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsxs5("label", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx12(
         "input",
         {
           type: "checkbox",
@@ -587,26 +676,29 @@ function StateEditor({ value, meta, onChange }) {
           onChange: (e) => onChange(e.target.checked)
         }
       ),
-      /* @__PURE__ */ jsx11("span", { style: { fontSize: 13, opacity: 0.8 }, children: String(Boolean(value)) })
+      /* @__PURE__ */ jsx12("span", { style: { fontSize: 13, opacity: 0.8 }, children: String(Boolean(value)) })
     ] });
   }
   if (meta?.type === "select" && Array.isArray(meta.options)) {
     const current = typeof value === "string" ? value : String(value ?? "");
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       "select",
       {
         value: current,
         onChange: (e) => onChange(e.target.value),
-        style: inputStyle,
+        style: {
+          ...inputStyle,
+          minWidth: 120
+        },
         children: meta.options.map((opt) => {
           const o = isOptionObject(opt) ? opt : { label: String(opt), value: String(opt) };
-          return /* @__PURE__ */ jsx11("option", { value: o.value, children: o.label }, o.value);
+          return /* @__PURE__ */ jsx12("option", { value: o.value, children: o.label }, o.value);
         })
       }
     );
   }
   if (meta?.type === "number") {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       "input",
       {
         type: "number",
@@ -620,9 +712,9 @@ function StateEditor({ value, meta, onChange }) {
     );
   }
   if (meta?.type === "json" || value && typeof value === "object") {
-    return /* @__PURE__ */ jsx11(JsonEditor, { initial: safeStringify(value), onValidJson: onChange });
+    return /* @__PURE__ */ jsx12(JsonEditor, { initial: safeStringify(value), onValidJson: onChange });
   }
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "input",
     {
       type: "text",
@@ -635,23 +727,35 @@ function StateEditor({ value, meta, onChange }) {
 }
 
 // src/ui/components/StateCard.tsx
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 function StateCard({ state }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       style: {
         ...cardStyle,
         display: "flex",
-        flexDirection: "column",
+        flexDirection: "row",
+        justifyContent: "space-between",
         gap: 8
       },
       children: [
-        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", justifyContent: "space-between", gap: 12 }, children: [
-          /* @__PURE__ */ jsx12("div", { style: { fontWeight: 700 }, children: state.key }),
-          /* @__PURE__ */ jsx12("div", { style: { fontSize: 12, opacity: 0.6 }, children: state.meta?.type ?? "auto" })
-        ] }),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between",
+              gap: 1
+            },
+            children: [
+              /* @__PURE__ */ jsx13("div", { style: { fontSize: 14 }, children: state.key }),
+              /* @__PURE__ */ jsx13("div", { style: { fontSize: 12, color: "#52525C", textTransform: "uppercase" }, children: state.meta?.type ?? "auto" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx13(
           StateEditor,
           {
             value: state.value,
@@ -665,60 +769,258 @@ function StateCard({ state }) {
 }
 
 // src/ui/components/StateEditorPanel.tsx
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 function StateEditorPanel({
   selected,
-  query,
-  onQueryChange,
-  searchRef,
   leftCollapsed,
-  onToggleCollapse,
-  onClose,
-  onDragStart,
-  onDragEnd
+  onToggleCollapse
 }) {
-  return /* @__PURE__ */ jsxs6("div", { style: { padding: 12, overflow: "auto", display: "flex", flexDirection: "column", boxSizing: "border-box" }, children: [
-    /* @__PURE__ */ jsx13(
-      StatePanelHeader,
-      {
-        selectedLabel: selected?.label ?? null,
-        leftCollapsed,
-        onToggleCollapse,
-        onClose,
-        onDragStart,
-        onDragEnd
-      }
-    ),
-    /* @__PURE__ */ jsx13(
-      SearchInput,
-      {
-        value: query,
-        onChange: onQueryChange,
-        inputRef: searchRef
-      }
-    ),
-    /* @__PURE__ */ jsxs6("div", { style: { marginTop: 12, display: "grid", gap: 10 }, children: [
-      selected && selected.states.size === 0 && /* @__PURE__ */ jsx13("div", { style: { fontSize: 13, opacity: 0.7 }, children: "This component has no inspectable state." }),
-      !selected && /* @__PURE__ */ jsx13("div", { style: { opacity: 0.7, fontSize: 13 }, children: "No component selected." }),
-      selected && Array.from(selected.states.values()).map((s) => /* @__PURE__ */ jsx13(StateCard, { state: s }, s.key))
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      style: {
+        padding: 12,
+        overflow: "auto",
+        display: "flex",
+        flexDirection: "column",
+        boxSizing: "border-box",
+        backgroundColor: "#0C0C0E"
+      },
+      children: [
+        /* @__PURE__ */ jsx14(
+          StatePanelHeader,
+          {
+            selectedLabel: selected?.label ?? null,
+            leftCollapsed,
+            onToggleCollapse
+          }
+        ),
+        /* @__PURE__ */ jsxs7("div", { style: { marginTop: 12, display: "grid", gap: 10 }, children: [
+          selected && selected.states.size === 0 && /* @__PURE__ */ jsx14("div", { style: { fontSize: 13, opacity: 0.7 }, children: "This component has no inspectable state." }),
+          !selected && /* @__PURE__ */ jsx14("div", { style: { opacity: 0.7, fontSize: 13 }, children: "No component selected." }),
+          selected && Array.from(selected.states.values()).map((s) => /* @__PURE__ */ jsx14(StateCard, { state: s }, s.key))
+        ] })
+      ]
+    }
+  );
 }
 
+// src/ui/icons/DragIcon.tsx
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+var DragIcon = (props) => {
+  return /* @__PURE__ */ jsxs8(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M7.99998 6.66665C8.36817 6.66665 8.66665 6.36817 8.66665 5.99998C8.66665 5.63179 8.36817 5.33331 7.99998 5.33331C7.63179 5.33331 7.33331 5.63179 7.33331 5.99998C7.33331 6.36817 7.63179 6.66665 7.99998 6.66665Z",
+            stroke: "#3F3F46",
+            strokeWidth: 1.33333,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M12.6667 6.66665C13.0349 6.66665 13.3333 6.36817 13.3333 5.99998C13.3333 5.63179 13.0349 5.33331 12.6667 5.33331C12.2985 5.33331 12 5.63179 12 5.99998C12 6.36817 12.2985 6.66665 12.6667 6.66665Z",
+            stroke: "#3F3F46",
+            strokeWidth: 1.33333,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M3.33335 6.66665C3.70154 6.66665 4.00002 6.36817 4.00002 5.99998C4.00002 5.63179 3.70154 5.33331 3.33335 5.33331C2.96516 5.33331 2.66669 5.63179 2.66669 5.99998C2.66669 6.36817 2.96516 6.66665 3.33335 6.66665Z",
+            stroke: "#3F3F46",
+            strokeWidth: 1.33333,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M7.99998 10.6666C8.36817 10.6666 8.66665 10.3682 8.66665 9.99998C8.66665 9.63179 8.36817 9.33331 7.99998 9.33331C7.63179 9.33331 7.33331 9.63179 7.33331 9.99998C7.33331 10.3682 7.63179 10.6666 7.99998 10.6666Z",
+            stroke: "#3F3F46",
+            strokeWidth: 1.33333,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M12.6667 10.6666C13.0349 10.6666 13.3333 10.3682 13.3333 9.99998C13.3333 9.63179 13.0349 9.33331 12.6667 9.33331C12.2985 9.33331 12 9.63179 12 9.99998C12 10.3682 12.2985 10.6666 12.6667 10.6666Z",
+            stroke: "#3F3F46",
+            strokeWidth: 1.33333,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "path",
+          {
+            d: "M3.33335 10.6666C3.70154 10.6666 4.00002 10.3682 4.00002 9.99998C4.00002 9.63179 3.70154 9.33331 3.33335 9.33331C2.96516 9.33331 2.66669 9.63179 2.66669 9.99998C2.66669 10.3682 2.96516 10.6666 3.33335 10.6666Z",
+            stroke: "#3F3F46",
+            strokeWidth: 1.33333,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+};
+var DragIcon_default = DragIcon;
+
+// src/ui/icons/CloseIcon.tsx
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+var CloseIcon = (props) => {
+  return /* @__PURE__ */ jsxs9(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx16(
+          "path",
+          {
+            d: "M10.5 3.5L3.5 10.5",
+            stroke: "#71717B",
+            strokeWidth: 1.16667,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          "path",
+          {
+            d: "M3.5 3.5L10.5 10.5",
+            stroke: "#71717B",
+            strokeWidth: 1.16667,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+};
+var CloseIcon_default = CloseIcon;
+
+// src/ui/components/DockHeader.tsx
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+var DockHeader = ({ setOpen, handleDragStart, handleDragEnd }) => {
+  return /* @__PURE__ */ jsx17(DragHandle, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      style: {
+        height: 40,
+        width: "100%",
+        padding: "9.5px 12px",
+        boxSizing: "border-box",
+        borderBottom: "1px solid rgba(39, 39, 42, 0.5)",
+        display: "flex",
+        flexDirection: "row",
+        backgroundColor: "rgba(24, 24, 27, 0.5)"
+      },
+      children: [
+        /* @__PURE__ */ jsx17(
+          "div",
+          {
+            style: {
+              width: 20,
+              height: 20,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              marginRight: 8,
+              backgroundColor: "#27272A",
+              borderRadius: 4
+            },
+            children: /* @__PURE__ */ jsx17(DevtoolsIcon_default, { fill: "#9F9FA9", stroke: "#9F9FA9", height: 12, width: 12 })
+          }
+        ),
+        /* @__PURE__ */ jsx17(
+          "span",
+          {
+            style: {
+              fontSize: 12,
+              fontWeight: 500,
+              color: "#E4E4E7"
+            },
+            children: "React Inspector"
+          }
+        ),
+        /* @__PURE__ */ jsxs10(
+          "div",
+          {
+            style: {
+              marginLeft: "auto",
+              display: "flex",
+              flexDirection: "row",
+              gap: 16,
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx17(DragIcon_default, {}),
+              /* @__PURE__ */ jsx17(
+                "div",
+                {
+                  "data-no-drag": true,
+                  style: {
+                    cursor: "pointer",
+                    width: 20,
+                    height: 20,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setOpen(false);
+                  },
+                  children: /* @__PURE__ */ jsx17(CloseIcon_default, {})
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+};
+var DockHeader_default = DockHeader;
+
 // src/StateInspectorUI.tsx
-import { Fragment, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function StateInspectorUI() {
   const store = useInspectorStore();
-  const [query, setQuery] = useState3("");
-  const [leftCollapsed, setLeftCollapsed] = useState3(false);
-  const [layout, setLayout] = useState3("floating");
-  const [preview, setPreview] = useState3(null);
-  const [isTransitioning, setIsTransitioning] = useState3(false);
-  const [open, setOpen] = useState3(false);
-  const [selectedId, setSelectedId] = useState3(null);
-  const [tick, force] = useState3(0);
+  const [query, setQuery] = useState4("");
+  const [leftCollapsed, setLeftCollapsed] = useState4(false);
+  const [layout, setLayout] = useState4("floating");
+  const [preview, setPreview] = useState4(null);
+  const [isTransitioning, setIsTransitioning] = useState4(false);
+  const [open, setOpen] = useState4(false);
+  const [selectedId, setSelectedId] = useState4(null);
+  const [tick, force] = useState4(0);
   const searchRef = useRef2(null);
-  const [pos, setPos] = useState3(() => {
+  const [pos, setPos] = useState4(() => {
     try {
       const raw = localStorage.getItem(LS_KEY);
       return raw ? JSON.parse(raw) : { right: 16, bottom: 72 };
@@ -726,7 +1028,7 @@ function StateInspectorUI() {
       return { right: 16, bottom: 72 };
     }
   });
-  const [leftWidth, setLeftWidth] = useState3(() => {
+  const [leftWidth, setLeftWidth] = useState4(() => {
     try {
       const raw = localStorage.getItem(LS_LEFT_W);
       return raw ? Number(raw) : 280;
@@ -734,7 +1036,7 @@ function StateInspectorUI() {
       return 280;
     }
   });
-  const [size, setSize] = useState3(() => {
+  const [size, setSize] = useState4(() => {
     try {
       const raw = localStorage.getItem(LS_SIZE);
       return raw ? JSON.parse(raw) : { width: 720, height: 420 };
@@ -774,15 +1076,12 @@ function StateInspectorUI() {
     const shouldCollapse = leftWidth <= 200 || (size.width ?? 720) - leftWidth < 320;
     setLeftCollapsed(shouldCollapse);
   }, [leftWidth, size.width]);
-  console.log("Store", store);
   useEffect4(() => store.subscribe(() => force((x) => x + 1)), [store]);
   const snapshot = useMemo3(() => store.getSnapshot(), [store, tick]);
-  console.log("Snapshot", snapshot);
   const components = useMemo3(
     () => snapshot.components.filter((c) => c.mounted),
     [snapshot.components]
   );
-  console.log(components);
   const q = query.trim().toLowerCase();
   const filtered = useMemo3(
     () => q ? components.filter((c) => {
@@ -792,7 +1091,6 @@ function StateInspectorUI() {
     }) : components,
     [q, components]
   );
-  console.log(filtered);
   useEffect4(() => {
     if (!open) return;
     if (components.length === 0) {
@@ -892,20 +1190,56 @@ function StateInspectorUI() {
     window.addEventListener("pointermove", onMove);
     window.addEventListener("pointerup", onUp);
   };
-  const handlePanelResize = (startSize) => (delta) => {
-    setSize({
-      width: Math.min(window.innerWidth - 16, Math.max(480, (startSize.width ?? 0) + delta.dx)),
-      height: Math.min(window.innerHeight - 120, Math.max(280, (startSize.height ?? 0) + delta.dy))
-    });
+  const handlePanelResize = (startSize, startPos) => (delta, direction) => {
+    const isLeft = direction === "left" || direction.endsWith("left");
+    const isTop = direction === "top" || direction.startsWith("top");
+    const isHorizontal = direction !== "top" && direction !== "bottom";
+    const isVertical = direction !== "left" && direction !== "right";
+    const currentWidth = startSize.width ?? 720;
+    const currentHeight = startSize.height ?? 420;
+    let newWidth = currentWidth;
+    let newHeight = currentHeight;
+    if (isHorizontal) {
+      if (isLeft) {
+        newWidth = Math.min(window.innerWidth - 16, Math.max(480, currentWidth - delta.dx));
+      } else {
+        newWidth = Math.min(window.innerWidth - 16, Math.max(480, currentWidth + delta.dx));
+      }
+    }
+    if (isVertical) {
+      if (isTop) {
+        newHeight = Math.min(window.innerHeight - 120, Math.max(280, currentHeight - delta.dy));
+      } else {
+        newHeight = Math.min(window.innerHeight - 120, Math.max(280, currentHeight + delta.dy));
+      }
+    }
+    setSize({ width: newWidth, height: newHeight });
+    const newPos = { ...startPos };
+    if (isLeft && startPos.left !== void 0) {
+      const widthDelta = newWidth - currentWidth;
+      newPos.left = Math.max(8, startPos.left - widthDelta);
+    } else if (isLeft && startPos.right !== void 0) {
+      const widthDelta = newWidth - currentWidth;
+      newPos.right = Math.max(8, startPos.right - widthDelta);
+    }
+    if (isTop && startPos.top !== void 0) {
+      const heightDelta = newHeight - currentHeight;
+      newPos.top = Math.max(8, startPos.top - heightDelta);
+    } else if (isTop && startPos.bottom !== void 0) {
+      const heightDelta = newHeight - currentHeight;
+      newPos.bottom = Math.max(8, startPos.bottom - heightDelta);
+    }
+    setPos(newPos);
   };
   if (!store.enabled) return null;
   return createPortal(
-    /* @__PURE__ */ jsxs7(Fragment, { children: [
-      /* @__PURE__ */ jsx14(FloatingButton, { onClick: () => setOpen((o) => !o) }),
-      /* @__PURE__ */ jsx14(DockPreviewOverlay, { preview }),
-      open && /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsxs11(Fragment2, { children: [
+      /* @__PURE__ */ jsx18(FloatingButton, { onClick: () => setOpen((o) => !o), isActive: open }),
+      /* @__PURE__ */ jsx18(DockPreviewOverlay, { preview }),
+      open && /* @__PURE__ */ jsxs11(
         "div",
         {
+          "data-rsi-root": true,
           style: {
             position: "fixed",
             left: pos.left,
@@ -921,45 +1255,59 @@ function StateInspectorUI() {
             borderRadius: 12,
             border: "1px solid #333",
             zIndex: 999999,
-            display: "grid",
-            gridTemplateColumns: leftCollapsed ? "auto" : `${leftWidth}px 14px auto`,
             overflow: "hidden",
-            transition: isTransitioning ? "all 0.3s ease" : "none"
+            transition: isTransitioning ? "all 0.3s ease" : "none",
+            display: "flex",
+            flexDirection: "column"
           },
           children: [
-            /* @__PURE__ */ jsx14(ResizeHandle, { onResize: handlePanelResize(size) }),
-            /* @__PURE__ */ jsx14(
-              ComponentList,
-              {
-                components: filtered,
-                selectedId,
-                onSelect: setSelectedId,
-                onDragStart: handleDragStart,
-                onDragEnd: handleDragEnd,
-                height: size.height,
-                hidden: leftCollapsed
-              }
-            ),
-            /* @__PURE__ */ jsx14(
-              SidebarResizer,
+            /* @__PURE__ */ jsx18(
+              DockHeader_default,
               {
-                leftWidth,
-                onWidthChange: setLeftWidth,
-                hidden: leftCollapsed
+                setOpen,
+                handleDragStart,
+                handleDragEnd
               }
             ),
-            /* @__PURE__ */ jsx14(
-              StateEditorPanel,
+            /* @__PURE__ */ jsxs11(
+              "div",
               {
-                selected,
-                query,
-                onQueryChange: setQuery,
-                searchRef,
-                leftCollapsed,
-                onToggleCollapse: () => setLeftCollapsed((v) => !v),
-                onClose: () => setOpen(false),
-                onDragStart: handleDragStart,
-                onDragEnd: handleDragEnd
+                style: {
+                  display: "grid",
+                  gridTemplateColumns: leftCollapsed ? "auto" : `${leftWidth}px 14px auto`,
+                  height: "100%"
+                },
+                children: [
+                  /* @__PURE__ */ jsx18(ResizeHandle, { onResize: handlePanelResize(size, pos) }),
+                  /* @__PURE__ */ jsx18(
+                    ComponentList,
+                    {
+                      query,
+                      onQueryChange: setQuery,
+                      searchRef,
+                      components: filtered,
+                      selectedId,
+                      onSelect: setSelectedId,
+                      hidden: leftCollapsed
+                    }
+                  ),
+                  /* @__PURE__ */ jsx18(
+                    SidebarResizer,
+                    {
+                      leftWidth,
+                      onWidthChange: setLeftWidth,
+                      hidden: leftCollapsed
+                    }
+                  ),
+                  /* @__PURE__ */ jsx18(
+                    StateEditorPanel,
+                    {
+                      selected,
+                      leftCollapsed,
+                      onToggleCollapse: () => setLeftCollapsed((v) => !v)
+                    }
+                  )
+                ]
               }
             )
           ]