react-state-inspector-devtools 0.1.2 → 1.0.1

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/provider.tsx
-import { createContext, useContext, useEffect, useId, useMemo, useRef } from "react";
+import { createContext, useContext, useEffect, useId, useMemo } from "react";
 
 // src/store.ts
 function createInspectorStore() {
@@ -84,16 +84,22 @@ function createInspectorStore() {
 // src/provider.tsx
 import { jsx } from "react/jsx-runtime";
 var InspectorContext = createContext(null);
+var storeRef = { current: null };
+function getStore() {
+  if (!storeRef.current) {
+    storeRef.current = createInspectorStore();
+  }
+  return storeRef.current;
+}
 function StateInspectorProvider({
   enabled = true,
   children
 }) {
-  const storeRef = useRef(null);
-  if (!storeRef.current) {
-    storeRef.current = createInspectorStore();
-  }
-  storeRef.current.enabled = enabled;
-  return /* @__PURE__ */ jsx(InspectorContext.Provider, { value: storeRef.current, children });
+  const store = useMemo(() => getStore(), []);
+  useEffect(() => {
+    storeRef.current.enabled = enabled;
+  }, [enabled]);
+  return /* @__PURE__ */ jsx(InspectorContext.Provider, { value: store, children });
 }
 function useInspectorStore() {
   const ctx = useContext(InspectorContext);
@@ -122,7 +128,7 @@ function useInspectorComponent(label) {
 }
 
 // src/hooks.ts
-import { useEffect as useEffect2, useId as useId2, useMemo as useMemo2, useRef as useRef2, useState } from "react";
+import { useEffect as useEffect2, useId as useId2, useMemo as useMemo2, useRef, useState } from "react";
 function stableKey(input) {
   return input.trim();
 }
@@ -139,7 +145,7 @@ function useInspectableState(component, key, initial, meta) {
   const componentId = component.id;
   const stateKey = useMemo2(() => stableKey(key), [key]);
   const [value, setValue] = useState(initial);
-  const setValueRef = useRef2(() => {
+  const setValueRef = useRef(() => {
   });
   setValueRef.current = (next) => {
     setValue(next);
@@ -182,189 +188,397 @@ function useComponentLabel(label) {
 }
 
 // src/StateInspectorUI.tsx
-import { useEffect as useEffect3, useMemo as useMemo3, useState as useState2 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+
+// 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 StateInspectorUI() {
-  const store = useInspectorStore();
-  const [open, setOpen] = useState2(false);
-  const [selectedId, setSelectedId] = useState2(null);
-  const [, force] = useState2(0);
-  useEffect3(() => store.subscribe(() => force((x) => x + 1)), [store]);
-  if (!store.enabled) return null;
-  const snapshot = store.getSnapshot();
-  const components = snapshot.components.filter((c) => c.mounted);
-  useEffect3(() => {
-    if (!open) return;
-    if (components.length === 0) {
-      setSelectedId(null);
-      return;
+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
+import { jsx as jsx2 } from "react/jsx-runtime";
+function FloatingButton({ onClick }) {
+  return /* @__PURE__ */ jsx2(
+    "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"
     }
-    if (!selectedId || !components.some((c) => c.id === selectedId)) {
-      setSelectedId(components[0].id);
+  );
+}
+
+// src/ui/components/DockPreviewOverlay.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function DockPreviewOverlay({ preview }) {
+  if (!preview) return null;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        pointerEvents: "none",
+        zIndex: 999998
+      },
+      children: /* @__PURE__ */ jsx3("div", { style: previewRectStyle(preview) })
     }
-  }, [open, components.length]);
-  useEffect3(() => {
-    if (!open) return;
-    function onKey(e) {
-      if (e.key === "Escape") setOpen(false);
+  );
+}
+
+// src/ui/components/ResizeHandle.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ResizeHandle({ onResize }) {
+  return /* @__PURE__ */ jsx4(
+    "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"
+      }
     }
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [open]);
-  const selected = useMemo3(() => {
-    if (!selectedId) return null;
-    return store.components.get(selectedId) ?? null;
-  }, [store, selectedId, snapshot.components.length]);
-  return createPortal(
-    /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx2(
+  );
+}
+
+// src/ui/components/SidebarResizer.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function SidebarResizer({ leftWidth, onWidthChange, hidden }) {
+  if (hidden) return null;
+  return /* @__PURE__ */ jsx5(
+    "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
+import { jsx as jsx6 } from "react/jsx-runtime";
+function DragHandle({ children, onDragStart, onDragEnd, style }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      style: { cursor: "grab", userSelect: "none", ...style },
+      onPointerDown: onDragStart,
+      onPointerUp: onDragEnd,
+      children
+    }
+  );
+}
+
+// src/ui/components/ComponentList.tsx
+import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+function ComponentList({
+  components,
+  selectedId,
+  onSelect,
+  onDragStart,
+  onDragEnd,
+  height,
+  hidden
+}) {
+  if (hidden) return null;
+  return /* @__PURE__ */ jsxs("div", { style: { padding: 12, height, flexDirection: "column", boxSizing: "border-box", display: "flex" }, children: [
+    /* @__PURE__ */ jsxs(
+      DragHandle,
+      {
+        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 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx7("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__ */ jsxs(
         "button",
         {
-          onClick: () => setOpen((o) => !o),
+          id: `rsi-comp-${c.id}`,
+          onClick: () => onSelect(c.id),
           style: {
-            position: "fixed",
-            right: 16,
-            bottom: 16,
-            width: 44,
-            height: 44,
-            borderRadius: 22,
-            border: "none",
-            background: "#111",
+            textAlign: "left",
+            background: active ? "#2a2a2a" : "transparent",
+            border: "1px solid #333",
+            borderRadius: 10,
+            padding: 10,
             color: "#fff",
             cursor: "pointer",
-            zIndex: 999999
-          },
-          "aria-label": "Toggle State Inspector",
-          title: "State Inspector",
-          children: "\u25CE"
-        }
-      ),
-      open && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            position: "fixed",
-            right: 16,
-            bottom: 72,
-            width: 720,
-            maxWidth: "calc(100vw - 32px)",
-            height: 420,
-            maxHeight: "calc(100vh - 120px)",
-            background: "#1c1c1c",
-            color: "#fff",
-            borderRadius: 12,
-            border: "1px solid #333",
-            zIndex: 999999,
-            display: "grid",
-            gridTemplateColumns: "280px 1fr",
-            overflow: "hidden"
+            flex: "none"
           },
           children: [
-            /* @__PURE__ */ jsxs("div", { style: { borderRight: "1px solid #333", padding: 12, height: "420px", display: "flex", flexDirection: "column", boxSizing: "border-box" }, children: [
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-                /* @__PURE__ */ jsx2("h4", { style: { margin: 0 }, children: "Components" }),
-                /* @__PURE__ */ jsx2("span", { style: { fontSize: 12, opacity: 0.7 }, children: components.length })
-              ] }),
-              /* @__PURE__ */ jsx2("div", { style: { marginTop: 10, display: "grid", gap: 8, overflow: "auto", flex: 1 }, children: components.map((c) => {
-                const active = c.id === selectedId;
-                return /* @__PURE__ */ 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__ */ jsx2("div", { style: { fontWeight: 700 }, children: c.label }),
-                      /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, opacity: 0.7 }, children: [
-                        "states: ",
-                        c.stateKeys.length ? c.stateKeys.length : 0
-                      ] })
-                    ]
-                  },
-                  c.id
-                );
-              }) })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { style: { padding: 12, overflow: "auto" }, children: [
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx2("h4", { style: { margin: 0 }, children: "State" }),
-                  /* @__PURE__ */ jsx2("div", { style: { fontSize: 12, opacity: 0.7 }, children: selected ? selected.label : "No selection" })
-                ] }),
-                /* @__PURE__ */ jsx2(
-                  "button",
-                  {
-                    onClick: () => setOpen(false),
-                    style: {
-                      background: "transparent",
-                      color: "#fff",
-                      border: "1px solid #333",
-                      borderRadius: 10,
-                      padding: "6px 10px",
-                      cursor: "pointer"
-                    },
-                    children: "Close"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { style: { marginTop: 12, display: "grid", gap: 10 }, children: [
-                selected && selected.states.size === 0 && /* @__PURE__ */ jsx2("div", { style: { fontSize: 13, opacity: 0.7 }, children: "This component has no inspectable state." }),
-                !selected && /* @__PURE__ */ jsx2("div", { style: { opacity: 0.7, fontSize: 13 }, children: "No component selected." }),
-                selected && Array.from(selected.states.values()).map((s) => /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      border: "1px solid #333",
-                      borderRadius: 12,
-                      padding: 10,
-                      display: "grid",
-                      gap: 8
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", gap: 12 }, children: [
-                        /* @__PURE__ */ jsx2("div", { style: { fontWeight: 700 }, children: s.key }),
-                        /* @__PURE__ */ jsx2("div", { style: { fontSize: 12, opacity: 0.6 }, children: s.meta?.type ?? "auto" })
-                      ] }),
-                      /* @__PURE__ */ jsx2(
-                        StateEditor,
-                        {
-                          value: s.value,
-                          meta: s.meta,
-                          onChange: (next) => s.setValue(next)
-                        }
-                      )
-                    ]
-                  },
-                  s.key
-                ))
-              ] })
+            /* @__PURE__ */ jsx7("div", { style: { fontWeight: 700 }, children: c.label }),
+            /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, opacity: 0.7 }, children: [
+              "states: ",
+              c.stateKeys.length || 0
             ] })
           ]
-        }
-      )
-    ] }),
-    document.body
-  );
+        },
+        c.id
+      );
+    }) })
+  ] });
 }
-function StateEditor({
-  value,
-  meta,
-  onChange
+
+// src/ui/components/StatePanelHeader.tsx
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+function StatePanelHeader({
+  selectedLabel,
+  leftCollapsed,
+  onToggleCollapse,
+  onClose,
+  onDragStart,
+  onDragEnd
 }) {
+  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx8(
+      "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__ */ 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"
+      }
+    )
+  ] });
+}
+
+// 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";
+function JsonEditor({ initial, onValidJson }) {
+  const [raw, setRaw] = useState2(initial);
+  const [error, setError] = useState2(null);
+  useEffect3(() => {
+    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__ */ jsxs3("div", { style: { display: "grid", gap: 6 }, children: [
+    /* @__PURE__ */ jsx10(
+      "textarea",
+      {
+        value: raw,
+        onChange: handleChange,
+        rows: 6,
+        style: {
+          ...inputStyle,
+          fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+          fontSize: 12,
+          resize: "vertical"
+        }
+      }
+    ),
+    error && /* @__PURE__ */ jsx10("div", { style: { fontSize: 12, color: "#ff6b6b" }, children: error })
+  ] });
+}
+
+// src/ui/components/StateEditor.tsx
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+function StateEditor({ value, meta, onChange }) {
   if (meta?.type === "boolean" || typeof value === "boolean") {
-    return /* @__PURE__ */ jsxs("label", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsxs4("label", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx11(
         "input",
         {
           type: "checkbox",
@@ -372,33 +586,26 @@ function StateEditor({
           onChange: (e) => onChange(e.target.checked)
         }
       ),
-      /* @__PURE__ */ jsx2("span", { style: { fontSize: 13, opacity: 0.8 }, children: String(Boolean(value)) })
+      /* @__PURE__ */ jsx11("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__ */ jsx2(
+    return /* @__PURE__ */ jsx11(
       "select",
       {
         value: current,
         onChange: (e) => onChange(e.target.value),
-        style: {
-          width: "100%",
-          padding: "8px 10px",
-          borderRadius: 10,
-          border: "1px solid #333",
-          background: "#111",
-          color: "#fff"
-        },
+        style: inputStyle,
         children: meta.options.map((opt) => {
           const o = isOptionObject(opt) ? opt : { label: String(opt), value: String(opt) };
-          return /* @__PURE__ */ jsx2("option", { value: o.value, children: o.label }, o.value);
+          return /* @__PURE__ */ jsx11("option", { value: o.value, children: o.label }, o.value);
         })
       }
     );
   }
-  if (meta?.type === "number" || typeof value === "number") {
-    return /* @__PURE__ */ jsx2(
+  if (meta?.type === "number") {
+    return /* @__PURE__ */ jsx11(
       "input",
       {
         type: "number",
@@ -407,87 +614,356 @@ function StateEditor({
         max: meta?.max,
         step: meta?.step,
         onChange: (e) => onChange(e.target.value === "" ? 0 : Number(e.target.value)),
-        style: {
-          width: "100%",
-          padding: "8px 10px",
-          borderRadius: 10,
-          border: "1px solid #333",
-          background: "#111",
-          color: "#fff"
-        }
+        style: inputStyle
       }
     );
   }
   if (meta?.type === "json" || value && typeof value === "object") {
-    const text = safeStringify(value);
-    return /* @__PURE__ */ jsx2(JsonEditor, { initial: text, onValidJson: (obj) => onChange(obj) });
+    return /* @__PURE__ */ jsx11(JsonEditor, { initial: safeStringify(value), onValidJson: onChange });
   }
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx11(
     "input",
     {
       type: "text",
       value: typeof value === "string" ? value : String(value ?? ""),
-      placeholder: meta?.placeholder,
+      placeholder: meta?.type === "text" ? meta.placeholder : void 0,
       onChange: (e) => onChange(e.target.value),
-      style: {
-        width: "100%",
-        padding: "8px 10px",
-        borderRadius: 10,
-        border: "1px solid #333",
-        background: "#111",
-        color: "#fff"
-      }
+      style: inputStyle
     }
   );
 }
-function safeStringify(v) {
-  try {
-    return JSON.stringify(v, null, 2);
-  } catch {
-    return String(v);
-  }
+
+// src/ui/components/StateCard.tsx
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+function StateCard({ state }) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      style: {
+        ...cardStyle,
+        display: "flex",
+        flexDirection: "column",
+        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(
+          StateEditor,
+          {
+            value: state.value,
+            meta: state.meta,
+            onChange: (next) => state.setValue(next)
+          }
+        )
+      ]
+    }
+  );
 }
-function JsonEditor({
-  initial,
-  onValidJson
+
+// src/ui/components/StateEditorPanel.tsx
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+function StateEditorPanel({
+  selected,
+  query,
+  onQueryChange,
+  searchRef,
+  leftCollapsed,
+  onToggleCollapse,
+  onClose,
+  onDragStart,
+  onDragEnd
 }) {
-  const [raw, setRaw] = useState2(initial);
-  const [error, setError] = useState2(null);
-  useEffect3(() => {
-    setRaw(initial);
-  }, [initial]);
-  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 6 }, children: [
-    /* @__PURE__ */ jsx2(
-      "textarea",
+  return /* @__PURE__ */ jsxs6("div", { style: { padding: 12, overflow: "auto", display: "flex", flexDirection: "column", boxSizing: "border-box" }, children: [
+    /* @__PURE__ */ jsx13(
+      StatePanelHeader,
       {
-        value: raw,
-        onChange: (e) => {
-          const next = e.target.value;
-          setRaw(next);
-          try {
-            const parsed = JSON.parse(next);
-            setError(null);
-            onValidJson(parsed);
-          } catch (err) {
-            setError("Invalid JSON");
-          }
-        },
-        rows: 6,
-        style: {
-          width: "100%",
-          padding: "8px 10px",
-          borderRadius: 10,
-          border: "1px solid #333",
-          background: "#111",
-          color: "#fff",
-          fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-          fontSize: 12
-        }
+        selectedLabel: selected?.label ?? null,
+        leftCollapsed,
+        onToggleCollapse,
+        onClose,
+        onDragStart,
+        onDragEnd
       }
     ),
-    error && /* @__PURE__ */ jsx2("div", { style: { fontSize: 12, color: "#ff6b6b" }, children: error })
+    /* @__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))
+    ] })
   ] });
 }
+
+// src/StateInspectorUI.tsx
+import { Fragment, jsx as jsx14, jsxs as jsxs7 } 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 [, force] = useState3(0);
+  const searchRef = useRef2(null);
+  const [pos, setPos] = useState3(() => {
+    try {
+      const raw = localStorage.getItem(LS_KEY);
+      return raw ? JSON.parse(raw) : { right: 16, bottom: 72 };
+    } catch {
+      return { right: 16, bottom: 72 };
+    }
+  });
+  const [leftWidth, setLeftWidth] = useState3(() => {
+    try {
+      const raw = localStorage.getItem(LS_LEFT_W);
+      return raw ? Number(raw) : 280;
+    } catch {
+      return 280;
+    }
+  });
+  const [size, setSize] = useState3(() => {
+    try {
+      const raw = localStorage.getItem(LS_SIZE);
+      return raw ? JSON.parse(raw) : { width: 720, height: 420 };
+    } catch {
+      return { width: 720, height: 420 };
+    }
+  });
+  useEffect4(() => {
+    try {
+      localStorage.setItem(LS_LAYOUT, layout);
+    } catch (e) {
+      console.error(e);
+    }
+  }, [layout]);
+  useEffect4(() => {
+    try {
+      localStorage.setItem(LS_KEY, JSON.stringify(pos));
+    } catch (e) {
+      console.error(e);
+    }
+  }, [pos]);
+  useEffect4(() => {
+    try {
+      localStorage.setItem(LS_LEFT_W, String(leftWidth));
+    } catch (e) {
+      console.error(e);
+    }
+  }, [leftWidth]);
+  useEffect4(() => {
+    try {
+      localStorage.setItem(LS_SIZE, JSON.stringify(size));
+    } catch (e) {
+      console.error(e);
+    }
+  }, [size]);
+  useEffect4(() => {
+    const shouldCollapse = leftWidth <= 200 || (size.width ?? 720) - leftWidth < 320;
+    setLeftCollapsed(shouldCollapse);
+  }, [leftWidth, size.width]);
+  useEffect4(() => store.subscribe(() => force((x) => x + 1)), [store]);
+  const snapshot = useMemo3(() => store.getSnapshot(), [store]);
+  const components = useMemo3(
+    () => snapshot.components.filter((c) => c.mounted),
+    [snapshot.components]
+  );
+  const q = query.trim().toLowerCase();
+  const filtered = useMemo3(
+    () => q ? components.filter((c) => {
+      const labelHit = c.label.toLowerCase().includes(q);
+      const keyHit = c.stateKeys.some((k) => k.toLowerCase().includes(q));
+      return labelHit || keyHit;
+    }) : components,
+    [q, components]
+  );
+  useEffect4(() => {
+    if (!open) return;
+    if (components.length === 0) {
+      setSelectedId(null);
+      return;
+    }
+    if (!selectedId || !components.some((c) => c.id === selectedId)) {
+      setSelectedId(components[0].id);
+    }
+  }, [open, components.length]);
+  useEffect4(() => {
+    function onKey(e) {
+      const mod = isMac ? e.metaKey : e.ctrlKey;
+      if (mod && e.shiftKey && e.key.toLowerCase() === "i") {
+        e.preventDefault();
+        setOpen((o) => !o);
+        return;
+      }
+      if (!open) return;
+      if (e.key === "Escape") {
+        setOpen(false);
+        return;
+      }
+      if (e.key === "/") {
+        e.preventDefault();
+        searchRef.current?.focus();
+        return;
+      }
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        const list = filtered;
+        if (!list.length) return;
+        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 = useMemo3(() => {
+    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 createPortal(
+    /* @__PURE__ */ jsxs7(Fragment, { children: [
+      /* @__PURE__ */ jsx14(FloatingButton, { onClick: () => setOpen((o) => !o) }),
+      /* @__PURE__ */ jsx14(DockPreviewOverlay, { preview }),
+      open && /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            left: pos.left,
+            right: pos.right,
+            top: pos.top,
+            bottom: pos.bottom,
+            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: leftCollapsed ? "auto" : `${leftWidth}px 14px auto`,
+            overflow: "hidden",
+            transition: isTransitioning ? "all 0.3s ease" : "none"
+          },
+          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,
+              {
+                leftWidth,
+                onWidthChange: setLeftWidth,
+                hidden: leftCollapsed
+              }
+            ),
+            /* @__PURE__ */ jsx14(
+              StateEditorPanel,
+              {
+                selected,
+                query,
+                onQueryChange: setQuery,
+                searchRef,
+                leftCollapsed,
+                onToggleCollapse: () => setLeftCollapsed((v) => !v),
+                onClose: () => setOpen(false),
+                onDragStart: handleDragStart,
+                onDragEnd: handleDragEnd
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
 export {
   StateInspectorProvider,
   StateInspectorUI,