react-state-inspector-devtools 0.1.8 → 1.0.1

package/dist/index.js

@@ -220,22 +220,536 @@ function useComponentLabel(label) {
 }
 
 // src/StateInspectorUI.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var isMac = navigator.platform.toUpperCase().includes("MAC");
+
+// src/ui/constants.ts
+var LS_LAYOUT = "rsi:panel-layout";
+var LS_KEY = "rsi:panel-pos";
+var LS_SIZE = "rsi:panel-size";
+var LS_LEFT_W = "rsi:left-width";
+var SNAP = 100;
+var DOCK_W = 420;
+var DOCK_H = 320;
+var MARGIN = 12;
+var LEFT_MIN = 180;
+var LEFT_MAX = 420;
+var isMac = typeof navigator !== "undefined" ? navigator.platform.toUpperCase().includes("MAC") : false;
+
+// src/ui/utils.ts
 function isOptionObject(opt) {
   return typeof opt === "object" && opt !== null && "value" in opt;
 }
+function computePreview(x, y) {
+  const w = window.innerWidth;
+  const h = window.innerHeight;
+  const nearLeft = x <= SNAP;
+  const nearRight = x >= w - SNAP;
+  const nearTop = y <= SNAP;
+  const nearBottom = y >= h - SNAP;
+  if (nearLeft) return "dock-left";
+  if (nearRight) return "dock-right";
+  if (nearTop) return "dock-top";
+  if (nearBottom) return "dock-bottom";
+  return null;
+}
+function previewRectStyle(p) {
+  const base = {
+    position: "fixed",
+    border: "1px dashed #555",
+    background: "rgba(255,255,255,0.06)",
+    borderRadius: 12
+  };
+  if (p === "dock-left") {
+    return { ...base, left: MARGIN, top: MARGIN, bottom: MARGIN, width: DOCK_W };
+  }
+  if (p === "dock-right") {
+    return { ...base, right: MARGIN, top: MARGIN, bottom: MARGIN, width: DOCK_W };
+  }
+  if (p === "dock-top") {
+    return { ...base, left: MARGIN, right: MARGIN, top: MARGIN, height: DOCK_H };
+  }
+  return { ...base, left: MARGIN, right: MARGIN, bottom: MARGIN, height: DOCK_H };
+}
+function safeStringify(v) {
+  try {
+    return JSON.stringify(v, null, 2);
+  } catch {
+    return String(v);
+  }
+}
+
+// src/ui/components/FloatingButton.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function FloatingButton({ onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      title: "State Inspector (\u2318\u21E7I / Ctrl\u21E7I)",
+      onClick,
+      style: {
+        position: "fixed",
+        right: 16,
+        bottom: 16,
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        border: "none",
+        background: "#111",
+        color: "#fff",
+        cursor: "pointer",
+        zIndex: 999999
+      },
+      "aria-label": "Toggle State Inspector",
+      children: "\u25CE"
+    }
+  );
+}
+
+// src/ui/components/DockPreviewOverlay.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function DockPreviewOverlay({ preview }) {
+  if (!preview) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        pointerEvents: "none",
+        zIndex: 999998
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: previewRectStyle(preview) })
+    }
+  );
+}
+
+// src/ui/components/ResizeHandle.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ResizeHandle({ onResize }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      onPointerDown: (e) => {
+        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
+          });
+        };
+        const onUp = () => {
+          window.removeEventListener("pointermove", onMove);
+          window.removeEventListener("pointerup", onUp);
+        };
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onUp);
+      },
+      style: {
+        position: "absolute",
+        right: 6,
+        bottom: 6,
+        width: 14,
+        height: 14,
+        borderRadius: 6,
+        border: "1px solid #333",
+        background: "#838383",
+        cursor: "nwse-resize"
+      }
+    }
+  );
+}
+
+// src/ui/components/SidebarResizer.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function SidebarResizer({ leftWidth, onWidthChange, hidden }) {
+  if (hidden) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      onPointerDown: (e) => {
+        e.preventDefault();
+        const startX = e.clientX;
+        const startW = leftWidth;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        const onMove = (ev) => {
+          const dx = ev.clientX - startX;
+          const next = Math.max(LEFT_MIN, Math.min(LEFT_MAX, startW + dx));
+          onWidthChange(next);
+        };
+        const onUp = () => {
+          window.removeEventListener("pointermove", onMove);
+          window.removeEventListener("pointerup", onUp);
+        };
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onUp);
+      },
+      style: {
+        width: 8,
+        cursor: "col-resize",
+        background: "transparent",
+        borderLeft: "1px solid #2a2a2a",
+        borderRight: "1px solid #2a2a2a"
+      },
+      title: "Resize sidebar"
+    }
+  );
+}
+
+// src/ui/components/DragHandle.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function DragHandle({ children, onDragStart, onDragEnd, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      style: { cursor: "grab", userSelect: "none", ...style },
+      onPointerDown: onDragStart,
+      onPointerUp: onDragEnd,
+      children
+    }
+  );
+}
+
+// src/ui/components/ComponentList.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ComponentList({
+  components,
+  selectedId,
+  onSelect,
+  onDragStart,
+  onDragEnd,
+  height,
+  hidden
+}) {
+  if (hidden) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { padding: 12, height, flexDirection: "column", boxSizing: "border-box", display: "flex" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      DragHandle,
+      {
+        onDragStart,
+        onDragEnd,
+        style: { display: "flex", alignItems: "center", justifyContent: "space-between" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h4", { style: { margin: 0 }, children: "Components" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: 12, opacity: 0.7 }, children: components.length })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { marginTop: 10, display: "flex", flexDirection: "column", gap: 8, overflow: "auto", flex: 1 }, children: components.map((c) => {
+      const active = c.id === selectedId;
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "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"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontWeight: 700 }, children: c.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { fontSize: 12, opacity: 0.7 }, children: [
+              "states: ",
+              c.stateKeys.length || 0
+            ] })
+          ]
+        },
+        c.id
+      );
+    }) })
+  ] });
+}
+
+// src/ui/components/StatePanelHeader.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function StatePanelHeader({
+  selectedLabel,
+  leftCollapsed,
+  onToggleCollapse,
+  onClose,
+  onDragStart,
+  onDragEnd
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        onClick: (e) => {
+          e.preventDefault();
+          onToggleCollapse();
+        },
+        style: {
+          padding: 4,
+          marginRight: 12,
+          borderRadius: 6,
+          border: "1px solid #333",
+          background: "transparent",
+          color: "#fff",
+          cursor: "pointer",
+          fontSize: 12,
+          width: 24,
+          height: 24
+        },
+        children: leftCollapsed ? "\xBB" : "\xAB"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      DragHandle,
+      {
+        onDragStart,
+        onDragEnd,
+        style: { display: "flex", flexDirection: "column", flex: 1 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { style: { margin: 0 }, children: "State" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontSize: 12, opacity: 0.7 }, children: selectedLabel ?? "No selection" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "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"
+      }
+    )
+  ] });
+}
+
+// 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
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function SearchInput({ value, onChange, inputRef }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "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
+var import_react3 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function JsonEditor({ initial, onValidJson }) {
+  const [raw, setRaw] = (0, import_react3.useState)(initial);
+  const [error, setError] = (0, import_react3.useState)(null);
+  (0, import_react3.useEffect)(() => {
+    setRaw(initial);
+  }, [initial]);
+  const handleChange = (e) => {
+    const next = e.target.value;
+    setRaw(next);
+    try {
+      const parsed = JSON.parse(next);
+      setError(null);
+      onValidJson(parsed);
+    } catch {
+      setError("Invalid JSON");
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "grid", gap: 6 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "textarea",
+      {
+        value: raw,
+        onChange: handleChange,
+        rows: 6,
+        style: {
+          ...inputStyle,
+          fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+          fontSize: 12,
+          resize: "vertical"
+        }
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { fontSize: 12, color: "#ff6b6b" }, children: error })
+  ] });
+}
+
+// src/ui/components/StateEditor.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function StateEditor({ value, meta, onChange }) {
+  if (meta?.type === "boolean" || typeof value === "boolean") {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          checked: Boolean(value),
+          onChange: (e) => onChange(e.target.checked)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)(
+      "select",
+      {
+        value: current,
+        onChange: (e) => onChange(e.target.value),
+        style: inputStyle,
+        children: meta.options.map((opt) => {
+          const o = isOptionObject(opt) ? opt : { label: String(opt), value: String(opt) };
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: o.value, children: o.label }, o.value);
+        })
+      }
+    );
+  }
+  if (meta?.type === "number") {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "input",
+      {
+        type: "number",
+        value: typeof value === "number" ? value : Number(value ?? 0),
+        min: meta?.min,
+        max: meta?.max,
+        step: meta?.step,
+        onChange: (e) => onChange(e.target.value === "" ? 0 : Number(e.target.value)),
+        style: inputStyle
+      }
+    );
+  }
+  if (meta?.type === "json" || value && typeof value === "object") {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(JsonEditor, { initial: safeStringify(value), onValidJson: onChange });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "input",
+    {
+      type: "text",
+      value: typeof value === "string" ? value : String(value ?? ""),
+      placeholder: meta?.type === "text" ? meta.placeholder : void 0,
+      onChange: (e) => onChange(e.target.value),
+      style: inputStyle
+    }
+  );
+}
+
+// src/ui/components/StateCard.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function StateCard({ state }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
+    {
+      style: {
+        ...cardStyle,
+        display: "flex",
+        flexDirection: "column",
+        gap: 8
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", gap: 12 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontWeight: 700 }, children: state.key }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontSize: 12, opacity: 0.6 }, children: state.meta?.type ?? "auto" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          StateEditor,
+          {
+            value: state.value,
+            meta: state.meta,
+            onChange: (next) => state.setValue(next)
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/ui/components/StateEditorPanel.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function StateEditorPanel({
+  selected,
+  query,
+  onQueryChange,
+  searchRef,
+  leftCollapsed,
+  onToggleCollapse,
+  onClose,
+  onDragStart,
+  onDragEnd
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { padding: 12, overflow: "auto", display: "flex", flexDirection: "column", boxSizing: "border-box" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      StatePanelHeader,
+      {
+        selectedLabel: selected?.label ?? null,
+        leftCollapsed,
+        onToggleCollapse,
+        onClose,
+        onDragStart,
+        onDragEnd
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      SearchInput,
+      {
+        value: query,
+        onChange: onQueryChange,
+        inputRef: searchRef
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { marginTop: 12, display: "grid", gap: 10 }, children: [
+      selected && selected.states.size === 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontSize: 13, opacity: 0.7 }, children: "This component has no inspectable state." }),
+      !selected && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { opacity: 0.7, fontSize: 13 }, children: "No component selected." }),
+      selected && Array.from(selected.states.values()).map((s) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StateCard, { state: s }, s.key))
+    ] })
+  ] });
+}
+
+// src/StateInspectorUI.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function StateInspectorUI() {
   const store = useInspectorStore();
-  const [query, setQuery] = (0, import_react3.useState)("");
-  const [open, setOpen] = (0, import_react3.useState)(false);
-  const [selectedId, setSelectedId] = (0, import_react3.useState)(null);
-  const [, force] = (0, import_react3.useState)(0);
-  const searchRef = (0, import_react3.useRef)(null);
-  const LS_KEY = "rsi:panel-pos";
-  const [pos, setPos] = (0, import_react3.useState)(() => {
+  const [query, setQuery] = (0, import_react4.useState)("");
+  const [leftCollapsed, setLeftCollapsed] = (0, import_react4.useState)(false);
+  const [layout, setLayout] = (0, import_react4.useState)("floating");
+  const [preview, setPreview] = (0, import_react4.useState)(null);
+  const [isTransitioning, setIsTransitioning] = (0, import_react4.useState)(false);
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const [selectedId, setSelectedId] = (0, import_react4.useState)(null);
+  const [, force] = (0, import_react4.useState)(0);
+  const searchRef = (0, import_react4.useRef)(null);
+  const [pos, setPos] = (0, import_react4.useState)(() => {
     try {
       const raw = localStorage.getItem(LS_KEY);
       return raw ? JSON.parse(raw) : { right: 16, bottom: 72 };
@@ -243,48 +757,71 @@ function StateInspectorUI() {
       return { right: 16, bottom: 72 };
     }
   });
-  (0, import_react3.useEffect)(() => {
+  const [leftWidth, setLeftWidth] = (0, import_react4.useState)(() => {
     try {
-      localStorage.setItem(LS_KEY, JSON.stringify(pos));
+      const raw = localStorage.getItem(LS_LEFT_W);
+      return raw ? Number(raw) : 280;
     } catch {
+      return 280;
     }
-  }, [pos]);
-  const SIZE_KEY = "rsi:panel-size";
-  const [size, setSize] = (0, import_react3.useState)(() => {
+  });
+  const [size, setSize] = (0, import_react4.useState)(() => {
     try {
-      const raw = localStorage.getItem(SIZE_KEY);
+      const raw = localStorage.getItem(LS_SIZE);
       return raw ? JSON.parse(raw) : { width: 720, height: 420 };
     } catch {
       return { width: 720, height: 420 };
     }
   });
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     try {
-      localStorage.setItem(SIZE_KEY, JSON.stringify(size));
-    } catch {
+      localStorage.setItem(LS_LAYOUT, layout);
+    } catch (e) {
+      console.error(e);
+    }
+  }, [layout]);
+  (0, import_react4.useEffect)(() => {
+    try {
+      localStorage.setItem(LS_KEY, JSON.stringify(pos));
+    } catch (e) {
+      console.error(e);
+    }
+  }, [pos]);
+  (0, import_react4.useEffect)(() => {
+    try {
+      localStorage.setItem(LS_LEFT_W, String(leftWidth));
+    } catch (e) {
+      console.error(e);
+    }
+  }, [leftWidth]);
+  (0, import_react4.useEffect)(() => {
+    try {
+      localStorage.setItem(LS_SIZE, JSON.stringify(size));
+    } catch (e) {
+      console.error(e);
     }
   }, [size]);
-  (0, import_react3.useEffect)(() => store.subscribe(() => force((x) => x + 1)), [store]);
-  const snapshot = (0, import_react3.useMemo)(() => store.getSnapshot(), [store]);
-  const components = (0, import_react3.useMemo)(
+  (0, import_react4.useEffect)(() => {
+    const shouldCollapse = leftWidth <= 200 || (size.width ?? 720) - leftWidth < 320;
+    setLeftCollapsed(shouldCollapse);
+  }, [leftWidth, size.width]);
+  (0, import_react4.useEffect)(() => store.subscribe(() => force((x) => x + 1)), [store]);
+  const snapshot = (0, import_react4.useMemo)(() => store.getSnapshot(), [store]);
+  const components = (0, import_react4.useMemo)(
     () => snapshot.components.filter((c) => c.mounted),
     [snapshot.components]
   );
   const q = query.trim().toLowerCase();
-  const filtered = (0, import_react3.useMemo)(
+  const filtered = (0, import_react4.useMemo)(
     () => q ? components.filter((c) => {
       const labelHit = c.label.toLowerCase().includes(q);
-      const keyHit = c.stateKeys.some(
-        (k) => k.toLowerCase().includes(q)
-      );
+      const keyHit = c.stateKeys.some((k) => k.toLowerCase().includes(q));
       return labelHit || keyHit;
     }) : components,
     [q, components]
   );
-  (0, import_react3.useEffect)(() => {
-    if (!open) {
-      return;
-    }
+  (0, import_react4.useEffect)(() => {
+    if (!open) return;
     if (components.length === 0) {
       setSelectedId(null);
       return;
@@ -293,17 +830,7 @@ function StateInspectorUI() {
       setSelectedId(components[0].id);
     }
   }, [open, components.length]);
-  (0, import_react3.useEffect)(() => {
-    if (!open) {
-      return;
-    }
-    function onKey(e) {
-      if (e.key === "Escape") setOpen(false);
-    }
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [open]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     function onKey(e) {
       const mod = isMac ? e.metaKey : e.ctrlKey;
       if (mod && e.shiftKey && e.key.toLowerCase() === "i") {
@@ -328,229 +855,140 @@ function StateInspectorUI() {
         const idx = list.findIndex((c) => c.id === selectedId);
         const next = e.key === "ArrowDown" ? list[(Math.max(-1, idx) + 1) % list.length].id : list[idx <= 0 ? list.length - 1 : idx - 1].id;
         setSelectedId(next);
+        setTimeout(() => {
+          document.getElementById(`rsi-comp-${next}`)?.scrollIntoView({ block: "nearest" });
+        }, 0);
       }
     }
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [open, filtered, selectedId]);
-  const selected = (0, import_react3.useMemo)(() => {
+  const selected = (0, import_react4.useMemo)(() => {
     if (!selectedId) return null;
     return store.components.get(selectedId) ?? null;
   }, [store, selectedId]);
+  const handleDragEnd = () => {
+    if (preview) {
+      setLayout(preview);
+      setIsTransitioning(true);
+      const rects = previewRectStyle(preview);
+      setSize({ width: rects.width, height: rects.height });
+      setPos({
+        left: rects.left,
+        right: rects.right,
+        top: rects.top,
+        bottom: rects.bottom
+      });
+      setPreview(null);
+      setTimeout(() => setIsTransitioning(false), 300);
+      return;
+    }
+    setPreview(null);
+  };
+  const handleDragStart = (e) => {
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const start = pos;
+    setLayout("floating");
+    setIsTransitioning(true);
+    setSize({ width: 720, height: 420 });
+    setTimeout(() => setIsTransitioning(false), 300);
+    e.currentTarget.setPointerCapture(e.pointerId);
+    const onMove = (ev) => {
+      const dx = ev.clientX - startX;
+      const dy = ev.clientY - startY;
+      const nextPreview = computePreview(ev.clientX, ev.clientY);
+      setPreview((p) => p === nextPreview ? p : nextPreview);
+      const newPos = {};
+      if (start.left !== void 0) {
+        newPos.left = Math.max(8, start.left + dx);
+      } else {
+        newPos.right = Math.max(8, (start.right ?? 16) - dx);
+      }
+      if (start.top !== void 0) {
+        newPos.top = Math.max(8, start.top + dy);
+      } else {
+        newPos.bottom = Math.max(8, (start.bottom ?? 72) - dy);
+      }
+      setPos(newPos);
+    };
+    const onUp = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+    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))
+    });
+  };
   if (!store.enabled) return null;
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "button",
-        {
-          title: "State Inspector (\u2318\u21E7I / Ctrl\u21E7I)",
-          onClick: () => setOpen((o) => !o),
-          style: {
-            position: "fixed",
-            right: 16,
-            bottom: 16,
-            width: 44,
-            height: 44,
-            borderRadius: 22,
-            border: "none",
-            background: "#111",
-            color: "#fff",
-            cursor: "pointer",
-            zIndex: 999999
-          },
-          "aria-label": "Toggle State Inspector",
-          children: "\u25CE"
-        }
-      ),
-      open && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FloatingButton, { onClick: () => setOpen((o) => !o) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DockPreviewOverlay, { preview }),
+      open && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         "div",
         {
           style: {
             position: "fixed",
+            left: pos.left,
             right: pos.right,
+            top: pos.top,
             bottom: pos.bottom,
-            width: size.width,
-            maxWidth: "calc(100vw - 32px)",
-            height: size.height,
-            maxHeight: "calc(100vh - 120px)",
+            width: size.width || "calc(100dvw - 24px)",
+            maxWidth: "calc(100vw - 24px)",
+            height: size.height || "calc(100dvh - 24px)",
+            maxHeight: "calc(100vh - 24px)",
             background: "#1c1c1c",
             color: "#fff",
             borderRadius: 12,
             border: "1px solid #333",
             zIndex: 999999,
             display: "grid",
-            gridTemplateColumns: "280px 1fr",
-            overflow: "hidden"
+            gridTemplateColumns: leftCollapsed ? "auto" : `${leftWidth}px 14px auto`,
+            overflow: "hidden",
+            transition: isTransitioning ? "all 0.3s ease" : "none"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "div",
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ResizeHandle, { onResize: handlePanelResize(size) }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              ComponentList,
               {
-                onPointerDown: (e) => {
-                  const startX = e.clientX;
-                  const startY = e.clientY;
-                  const start = size;
-                  e.currentTarget.setPointerCapture(e.pointerId);
-                  const onMove = (ev) => {
-                    const dx = ev.clientX - startX;
-                    const dy = ev.clientY - startY;
-                    setSize({
-                      width: Math.min(window.innerWidth - 16, Math.max(480, start.width + dx)),
-                      height: Math.min(window.innerHeight - 120, Math.max(280, start.height + dy))
-                    });
-                  };
-                  const onUp = () => {
-                    window.removeEventListener("pointermove", onMove);
-                    window.removeEventListener("pointerup", onUp);
-                  };
-                  window.addEventListener("pointermove", onMove);
-                  window.addEventListener("pointerup", onUp);
-                },
-                style: {
-                  position: "absolute",
-                  right: 6,
-                  bottom: 6,
-                  width: 14,
-                  height: 14,
-                  borderRadius: 6,
-                  border: "1px solid #333",
-                  background: "#838383",
-                  cursor: "nwse-resize"
-                }
+                components: filtered,
+                selectedId,
+                onSelect: setSelectedId,
+                onDragStart: handleDragStart,
+                onDragEnd: handleDragEnd,
+                height: size.height,
+                hidden: leftCollapsed
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { borderRight: "1px solid #333", padding: 12, height: size.height, display: "flex", flexDirection: "column", boxSizing: "border-box" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                "div",
-                {
-                  style: { display: "flex", alignItems: "center", justifyContent: "space-between", cursor: "grab", userSelect: "none" },
-                  onPointerDown: (e) => {
-                    const startX = e.clientX;
-                    const startY = e.clientY;
-                    const start = pos;
-                    e.currentTarget.setPointerCapture(e.pointerId);
-                    const onMove = (ev) => {
-                      const dx = ev.clientX - startX;
-                      const dy = ev.clientY - startY;
-                      setPos({
-                        right: Math.max(8, start.right - dx),
-                        bottom: Math.max(8, start.bottom - dy)
-                      });
-                    };
-                    const onUp = () => {
-                      window.removeEventListener("pointermove", onMove);
-                      window.removeEventListener("pointerup", onUp);
-                    };
-                    window.addEventListener("pointermove", onMove);
-                    window.addEventListener("pointerup", onUp);
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { style: { margin: 0 }, children: "Components" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: 12, opacity: 0.7 }, children: filtered.length })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: 10, display: "grid", gap: 8, overflow: "auto", flex: 1 }, children: filtered.map((c) => {
-                const active = c.id === selectedId;
-                return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                  "button",
-                  {
-                    onClick: () => setSelectedId(c.id),
-                    style: {
-                      textAlign: "left",
-                      background: active ? "#2a2a2a" : "transparent",
-                      border: "1px solid #333",
-                      borderRadius: 10,
-                      padding: 10,
-                      color: "#fff",
-                      cursor: "pointer"
-                    },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 700 }, children: c.label }),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { fontSize: 12, opacity: 0.7 }, children: [
-                        "states: ",
-                        c.stateKeys.length ? c.stateKeys.length : 0
-                      ] })
-                    ]
-                  },
-                  c.id
-                );
-              }) })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { padding: 12, overflow: "auto", display: "flex", flexDirection: "column", boxSizing: "border-box" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { style: { margin: 0 }, children: "State" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 12, opacity: 0.7 }, children: selected ? selected.label : "No selection" })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "button",
-                  {
-                    onClick: () => setOpen(false),
-                    style: {
-                      background: "transparent",
-                      color: "#fff",
-                      border: "1px solid #333",
-                      borderRadius: 10,
-                      padding: "6px 10px",
-                      cursor: "pointer",
-                      fontSize: 12
-                    },
-                    children: "Close"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                "input",
-                {
-                  value: query,
-                  onChange: (e) => setQuery(e.target.value),
-                  placeholder: "Search components / state keys\u2026",
-                  ref: searchRef,
-                  style: {
-                    marginTop: 10,
-                    padding: "8px 10px",
-                    borderRadius: 10,
-                    border: "1px solid #333",
-                    background: "#111",
-                    color: "#fff",
-                    outline: "none"
-                  }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginTop: 12, display: "grid", gap: 10 }, children: [
-                selected && selected.states.size === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 13, opacity: 0.7 }, children: "This component has no inspectable state." }),
-                !selected && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { opacity: 0.7, fontSize: 13 }, children: "No component selected." }),
-                selected && Array.from(selected.states.values()).map((s) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                  "div",
-                  {
-                    style: {
-                      border: "1px solid #333",
-                      borderRadius: 12,
-                      padding: 10,
-                      display: "flex",
-                      flexDirection: "column",
-                      gap: 8
-                    },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", gap: 12 }, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 700 }, children: s.key }),
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 12, opacity: 0.6 }, children: s.meta?.type ?? "auto" })
-                      ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                        StateEditor,
-                        {
-                          value: s.value,
-                          meta: s.meta,
-                          onChange: (next) => s.setValue(next)
-                        }
-                      )
-                    ]
-                  },
-                  s.key
-                ))
-              ] })
-            ] })
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              SidebarResizer,
+              {
+                leftWidth,
+                onWidthChange: setLeftWidth,
+                hidden: leftCollapsed
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              StateEditorPanel,
+              {
+                selected,
+                query,
+                onQueryChange: setQuery,
+                searchRef,
+                leftCollapsed,
+                onToggleCollapse: () => setLeftCollapsed((v) => !v),
+                onClose: () => setOpen(false),
+                onDragStart: handleDragStart,
+                onDragEnd: handleDragEnd
+              }
+            )
           ]
         }
       )
@@ -558,133 +996,6 @@ function StateInspectorUI() {
     document.body
   );
 }
-function StateEditor({
-  value,
-  meta,
-  onChange
-}) {
-  if (meta?.type === "boolean" || typeof value === "boolean") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "input",
-        {
-          type: "checkbox",
-          checked: Boolean(value),
-          onChange: (e) => onChange(e.target.checked)
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(
-      "select",
-      {
-        value: current,
-        onChange: (e) => onChange(e.target.value),
-        style: {
-          padding: "8px 10px",
-          borderRadius: 10,
-          border: "1px solid #333",
-          background: "#111",
-          color: "#fff"
-        },
-        children: meta.options.map((opt) => {
-          const o = isOptionObject(opt) ? opt : { label: String(opt), value: String(opt) };
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: o.value, children: o.label }, o.value);
-        })
-      }
-    );
-  }
-  if (meta?.type === "number") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "input",
-      {
-        type: "number",
-        value: typeof value === "number" ? value : Number(value ?? 0),
-        min: meta?.min,
-        max: meta?.max,
-        step: meta?.step,
-        onChange: (e) => onChange(e.target.value === "" ? 0 : Number(e.target.value)),
-        style: {
-          padding: "8px 10px",
-          borderRadius: 10,
-          border: "1px solid #333",
-          background: "#111",
-          color: "#fff"
-        }
-      }
-    );
-  }
-  if (meta?.type === "json" || value && typeof value === "object") {
-    const text = safeStringify(value);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(JsonEditor, { initial: text, onValidJson: (obj) => onChange(obj) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "input",
-    {
-      type: "text",
-      value: typeof value === "string" ? value : String(value ?? ""),
-      placeholder: meta?.type === "text" ? meta.placeholder : void 0,
-      onChange: (e) => onChange(e.target.value),
-      style: {
-        padding: "8px 10px",
-        borderRadius: 10,
-        border: "1px solid #333",
-        background: "#111",
-        color: "#fff"
-      }
-    }
-  );
-}
-function safeStringify(v) {
-  try {
-    return JSON.stringify(v, null, 2);
-  } catch {
-    return String(v);
-  }
-}
-function JsonEditor({
-  initial,
-  onValidJson
-}) {
-  const [raw, setRaw] = (0, import_react3.useState)(initial);
-  const [error, setError] = (0, import_react3.useState)(null);
-  (0, import_react3.useEffect)(() => {
-    setRaw(initial);
-  }, [initial]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "grid", gap: 6 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "textarea",
-      {
-        value: raw,
-        onChange: (e) => {
-          const next = e.target.value;
-          setRaw(next);
-          try {
-            const parsed = JSON.parse(next);
-            setError(null);
-            onValidJson(parsed);
-          } catch {
-            setError("Invalid JSON");
-          }
-        },
-        rows: 6,
-        style: {
-          padding: "8px 10px",
-          borderRadius: 10,
-          border: "1px solid #333",
-          background: "#111",
-          color: "#fff",
-          fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-          fontSize: 12
-        }
-      }
-    ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 12, color: "#ff6b6b" }, children: error })
-  ] });
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   StateInspectorProvider,