react-state-inspector-devtools 0.1.0

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/provider.tsx","../src/store.ts","../src/hooks.ts","../src/StateInspectorUI.tsx"],"sourcesContent":["export * from \"./provider\";\nexport * from \"./store\";\nexport * from \"./hooks\";\nexport * from \"./StateInspectorUI\";\n","import React, { createContext, useContext, useEffect, useId, useMemo, useRef } from \"react\";\nimport { createInspectorStore, InspectorComponentRef, InspectorStore } from \"./store\";\n\nconst InspectorContext = createContext<InspectorStore | null>(null);\n\nexport function StateInspectorProvider({\n  enabled = true,\n  children,\n}: {\n  enabled?: boolean;\n  children: React.ReactNode;\n}) {\n  const storeRef = useRef<InspectorStore>(null);\n\n  if (!storeRef.current) {\n    storeRef.current = createInspectorStore();\n  }\n\n  storeRef.current.enabled = enabled;\n\n  return (\n    <InspectorContext.Provider value={storeRef.current}>\n      {children}\n    </InspectorContext.Provider>\n  );\n}\n\nexport function useInspectorStore(): InspectorStore {\n  const ctx = useContext(InspectorContext);\n  if (!ctx) {\n    throw new Error(\"useInspectorStore must be used inside StateInspectorProvider\");\n  }\n  return ctx;\n}\n\nexport function useInspectorComponent(label?: string): InspectorComponentRef {\n  const store = useInspectorStore();\n  const reactId = useId();\n  const componentId = useMemo(() => `c_${reactId}`, [reactId]);\n\n  useEffect(() => {\n    if (!store.enabled) return;\n\n    store.registerComponent(componentId, label?.trim());\n    return () => {\n      store.unregisterComponent(componentId);\n    };\n  }, [store, componentId, label]);\n\n  useEffect(() => {\n    if (!store.enabled) return;\n    const trimmed = label?.trim();\n    if (trimmed) store.setComponentLabel(componentId, trimmed);\n  }, [store, componentId, label]);\n\n  return useMemo(() => ({ id: componentId }), [componentId]);\n}\n","export type ComponentId = string;\n\nexport type InspectableMeta =\n  | { type: \"boolean\" }\n  | { type: \"text\"; placeholder?: string }\n  | { type: \"number\"; min?: number; max?: number; step?: number }\n  | { type: \"select\"; options: Array<string | { label: string; value: string }> }\n  | { type: \"json\" }\n  | { type: \"custom\"; renderId: string };\n\nexport interface InspectableStateEntry {\n  key: string;\n  value: unknown;\n  setValue: (next: unknown) => void;\n  meta?: InspectableMeta;\n}\n\nexport interface ComponentEntry {\n  id: ComponentId;\n  label: string;\n  mounted: boolean;\n  states: Map<string, InspectableStateEntry>;\n}\n\nexport interface InspectorSnapshot {\n  enabled: boolean;\n  components: Array<{\n    id: ComponentId;\n    label: string;\n    mounted: boolean;\n    stateKeys: string[];\n  }>;\n}\n\ntype Listener = () => void;\n\nexport interface InspectorComponentRef {\n  id: string;\n}\n\nexport interface InspectorStore {\n  enabled: boolean;\n\n  // internal registry\n  components: Map<ComponentId, ComponentEntry>;\n\n  // subscriptions\n  subscribe: (listener: Listener) => () => void;\n  getSnapshot: () => InspectorSnapshot;\n\n  // component lifecycle\n  registerComponent: (id: ComponentId, label?: string) => void;\n  setComponentLabel: (id: ComponentId, label: string) => void;\n  unregisterComponent: (id: ComponentId) => void;\n\n  // state lifecycle\n  upsertState: (\n    componentId: ComponentId,\n    entry: InspectableStateEntry,\n  ) => void;\n\n  updateStateValue: (componentId: ComponentId, key: string, value: unknown) => void;\n  removeState: (componentId: ComponentId, key: string) => void;\n}\n\nexport function createInspectorStore(): InspectorStore {\n  const components = new Map<ComponentId, ComponentEntry>();\n  const listeners = new Set<Listener>();\n\n  function emit() {\n    for (const l of listeners) l();\n  }\n\n  function getOrCreateComponent(id: ComponentId): ComponentEntry {\n    const existing = components.get(id);\n    if (existing) return existing;\n\n    const created: ComponentEntry = {\n      id,\n      label: \"Unknown\",\n      mounted: true,\n      states: new Map(),\n    };\n    components.set(id, created);\n    return created;\n  }\n\n  const store: InspectorStore = {\n    enabled: true,\n    components,\n\n    subscribe(listener) {\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n\n    getSnapshot() {\n      return {\n        enabled: store.enabled,\n        components: Array.from(components.values()).map((c) => ({\n          id: c.id,\n          label: c.label,\n          mounted: c.mounted,\n          stateKeys: Array.from(c.states.keys()),\n        })),\n      };\n    },\n\n    registerComponent(id, label) {\n      const c = getOrCreateComponent(id);\n      c.mounted = true;\n      if (label && label.trim()) c.label = label.trim();\n      emit();\n    },\n\n    setComponentLabel(id, label) {\n      const c = getOrCreateComponent(id);\n      c.label = label.trim() || \"Unknown\";\n      emit();\n    },\n\n    unregisterComponent(id) {\n      const c = components.get(id);\n      if (!c) return;\n\n      // StrictMode double-unmount safe:\n      // we mark as unmounted; UI can choose to hide unmounted entries.\n      c.mounted = false;\n\n      // Optional: immediate cleanup if you prefer:\n      // components.delete(id);\n\n      emit();\n    },\n\n    upsertState(componentId, entry) {\n      const c = getOrCreateComponent(componentId);\n      c.states.set(entry.key, entry);\n      emit();\n    },\n\n    updateStateValue(componentId, key, value) {\n      const c = components.get(componentId);\n      if (!c) return;\n      const s = c.states.get(key);\n      if (!s) return;\n      s.value = value;\n      emit();\n    },\n\n    removeState(componentId, key) {\n      const c = components.get(componentId);\n      if (!c) return;\n      if (!c.states.has(key)) return;\n      c.states.delete(key);\n      emit();\n    },\n  };\n\n  return store;\n}\n","import React, { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { useInspectorStore } from \"./provider\";\nimport type { InspectableMeta, InspectorComponentRef } from \"./store\";\n\nfunction stableKey(input: string): string {\n  return input.trim();\n}\n\nfunction inferMeta(value: unknown): InspectableMeta | undefined {\n  const t = typeof value;\n  if (t === \"boolean\") return { type: \"boolean\" };\n  if (t === \"number\") return { type: \"number\" };\n  if (t === \"string\") return { type: \"text\" };\n  if (value && t === \"object\") return { type: \"json\" };\n  return undefined;\n}\n\n/**\n * Registers a piece of state to the inspector registry.\n * Opt-in by replacing useState with useInspectableState.\n */\nexport function useInspectableState<T>(\n  component: InspectorComponentRef,\n  key: string,\n  initial: T | (() => T),\n  meta?: InspectableMeta,\n): [T, React.Dispatch<React.SetStateAction<T>>] {\n  const store = useInspectorStore();\n  const componentId = component.id;\n\n  const stateKey = useMemo(() => stableKey(key), [key]);\n\n  const [value, setValue] = useState<T>(initial);\n\n  // Keep latest setter stable for registry consumers\n  const setValueRef = useRef<(next: unknown) => void>(() => {});\n  setValueRef.current = (next: unknown) => {\n    setValue(next as T);\n  };\n\n  // Register component + state entry\n  useEffect(() => {\n    if (!store.enabled) return;\n\n    const resolvedMeta = meta ?? inferMeta(value);\n    store.upsertState(componentId, {\n      key: stateKey,\n      value,\n      setValue: (next) => setValueRef.current(next),\n      ...(resolvedMeta !== undefined && { meta: resolvedMeta }),\n    });\n\n    return () => {\n      store.removeState(componentId, stateKey);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [store, componentId, stateKey]);\n\n  // Sync updates on each render when value/meta changes\n  useEffect(() => {\n    if (!store.enabled) return;\n\n    const resolvedMeta = meta ?? inferMeta(value);\n    store.upsertState(componentId, {\n      key: stateKey,\n      value,\n      setValue: (next) => setValueRef.current(next),\n      ...(resolvedMeta !== undefined && { meta: resolvedMeta }),\n    });\n  }, [store, componentId, stateKey, value, meta]);\n\n  return [value, setValue];\n}\n\n/**\n * Optional helper to give the current component instance a human label.\n */\nexport function useComponentLabel(label: string) {\n  const store = useInspectorStore();\n  const reactId = useId();\n  const componentId = useMemo(() => `c_${reactId}`, [reactId]);\n\n  useEffect(() => {\n    if (!store.enabled) return;\n    const trimmed = label.trim();\n    if (!trimmed) return;\n    store.setComponentLabel(componentId, trimmed);\n  }, [store, componentId, label]);\n}\n","import { useEffect, useMemo, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useInspectorStore } from \"./provider\";\nuseInspectorStore\n\nfunction isOptionObject(\n  opt: string | { label: string; value: string },\n): opt is { label: string; value: string } {\n  return typeof opt === \"object\" && opt !== null && \"value\" in opt;\n}\n\nexport function StateInspectorUI() {\n  const store = useInspectorStore();\n\n  const [open, setOpen] = useState(false);\n  const [selectedId, setSelectedId] = useState<string | null>(null);\n  const [, force] = useState(0);\n\n  useEffect(() => store.subscribe(() => force((x) => x + 1)), [store]);\n\n  if (!store.enabled) return null;\n\n  const snapshot = store.getSnapshot();\n  const components = snapshot.components.filter((c) => c.mounted);\n\n  // Keep a valid selection\n  useEffect(() => {\n    if (!open) return;\n\n    if (components.length === 0) {\n      setSelectedId(null);\n      return;\n    }\n\n    if (!selectedId || !components.some((c) => c.id === selectedId)) {\n      setSelectedId(components[0]!.id);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, components.length]);\n\n  useEffect(() => {\n    if (!open) return;\n\n    function onKey(e: KeyboardEvent) {\n      if (e.key === \"Escape\") setOpen(false);\n    }\n\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, [open]);\n\n  const selected = useMemo(() => {\n    if (!selectedId) return null;\n    return store.components.get(selectedId) ?? null;\n  }, [store, selectedId, snapshot.components.length]);\n\n  return createPortal(\n    <>\n      {/* Floating Button */}\n      <button\n        onClick={() => setOpen((o) => !o)}\n        style={{\n          position: \"fixed\",\n          right: 16,\n          bottom: 16,\n          width: 44,\n          height: 44,\n          borderRadius: 22,\n          border: \"none\",\n          background: \"#111\",\n          color: \"#fff\",\n          cursor: \"pointer\",\n          zIndex: 999999,\n        }}\n        aria-label=\"Toggle State Inspector\"\n        title=\"State Inspector\"\n      >\n        ◎\n      </button>\n\n      {/* Floating Card */}\n      {open && (\n        <div\n          style={{\n            position: \"fixed\",\n            right: 16,\n            bottom: 72,\n            width: 720,\n            maxWidth: \"calc(100vw - 32px)\",\n            height: 420,\n            maxHeight: \"calc(100vh - 120px)\",\n            background: \"#1c1c1c\",\n            color: \"#fff\",\n            borderRadius: 12,\n            border: \"1px solid #333\",\n            zIndex: 999999,\n            display: \"grid\",\n            gridTemplateColumns: \"280px 1fr\",\n            overflow: \"hidden\",\n          }}\n        >\n          {/* Left: component list */}\n          <div style={{ borderRight: \"1px solid #333\", padding: 12, height: \"420px\", display: \"flex\", flexDirection: \"column\", boxSizing: \"border-box\" }}>\n            <div style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\" }}>\n              <h4 style={{ margin: 0 }}>Components</h4>\n              <span style={{ fontSize: 12, opacity: 0.7 }}>{components.length}</span>\n            </div>\n\n            <div style={{ marginTop: 10, display: \"grid\", gap: 8, overflow: \"auto\", flex: 1 }}>\n              {components.map((c) => {\n                const active = c.id === selectedId;\n                return (\n                  <button\n                    key={c.id}\n                    onClick={() => setSelectedId(c.id)}\n                    style={{\n                      textAlign: \"left\",\n                      background: active ? \"#2a2a2a\" : \"transparent\",\n                      border: \"1px solid #333\",\n                      borderRadius: 10,\n                      padding: 10,\n                      color: \"#fff\",\n                      cursor: \"pointer\",\n                    }}\n                  >\n                    <div style={{ fontWeight: 700 }}>{c.label}</div>\n                    <div style={{ fontSize: 12, opacity: 0.7 }}>\n                      states: {c.stateKeys.length ? c.stateKeys.length : 0}\n                    </div>\n                  </button>\n                );\n              })}\n            </div>\n          </div>\n\n          {/* Right: state editors */}\n          <div style={{ padding: 12, overflow: \"auto\" }}>\n            <div style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\" }}>\n              <div>\n                <h4 style={{ margin: 0 }}>State</h4>\n                <div style={{ fontSize: 12, opacity: 0.7 }}>\n                  {selected ? selected.label : \"No selection\"}\n                </div>\n              </div>\n\n              <button\n                onClick={() => setOpen(false)}\n                style={{\n                  background: \"transparent\",\n                  color: \"#fff\",\n                  border: \"1px solid #333\",\n                  borderRadius: 10,\n                  padding: \"6px 10px\",\n                  cursor: \"pointer\",\n                }}\n              >\n                Close\n              </button>\n            </div>\n\n            <div style={{ marginTop: 12, display: \"grid\", gap: 10 }}>\n              {selected && selected.states.size === 0 && (\n                <div style={{ fontSize: 13, opacity: 0.7 }}>\n                  This component has no inspectable state.\n                </div>\n              )}\n\n              {!selected && (\n                <div style={{ opacity: 0.7, fontSize: 13 }}>\n                  No component selected.\n                </div>\n              )}\n\n              {selected &&\n                Array.from(selected.states.values()).map((s) => (\n                  <div\n                    key={s.key}\n                    style={{\n                      border: \"1px solid #333\",\n                      borderRadius: 12,\n                      padding: 10,\n                      display: \"grid\",\n                      gap: 8,\n                    }}\n                  >\n                    <div style={{ display: \"flex\", justifyContent: \"space-between\", gap: 12 }}>\n                      <div style={{ fontWeight: 700 }}>{s.key}</div>\n                      <div style={{ fontSize: 12, opacity: 0.6 }}>{s.meta?.type ?? \"auto\"}</div>\n                    </div>\n\n                    <StateEditor\n                      value={s.value}\n                      meta={s.meta}\n                      onChange={(next) => s.setValue(next)}\n                    />\n                  </div>\n                ))}\n            </div>\n          </div>\n        </div>\n      )}\n    </>,\n    document.body,\n  );\n}\n\nfunction StateEditor({\n  value,\n  meta,\n  onChange,\n}: {\n  value: unknown;\n  meta: any;\n  onChange: (next: unknown) => void;\n}) {\n  // boolean\n  if (meta?.type === \"boolean\" || typeof value === \"boolean\") {\n    return (\n      <label style={{ display: \"flex\", gap: 10, alignItems: \"center\" }}>\n        <input\n          type=\"checkbox\"\n          checked={Boolean(value)}\n          onChange={(e) => onChange(e.target.checked)}\n        />\n        <span style={{ fontSize: 13, opacity: 0.8 }}>{String(Boolean(value))}</span>\n      </label>\n    );\n  }\n\n  // select\n  if (meta?.type === \"select\" && Array.isArray(meta.options)) {\n    const current = typeof value === \"string\" ? value : String(value ?? \"\");\n    return (\n      <select\n        value={current}\n        onChange={(e) => onChange(e.target.value)}\n        style={{\n          width: \"100%\",\n          padding: \"8px 10px\",\n          borderRadius: 10,\n          border: \"1px solid #333\",\n          background: \"#111\",\n          color: \"#fff\",\n        }}\n      >\n        {meta.options.map((opt: any) => {\n          const o = isOptionObject(opt) ? opt : { label: String(opt), value: String(opt) };\n          return (\n            <option key={o.value} value={o.value}>\n              {o.label}\n            </option>\n          );\n        })}\n      </select>\n    );\n  }\n\n  // number\n  if (meta?.type === \"number\" || typeof value === \"number\") {\n    return (\n      <input\n        type=\"number\"\n        value={typeof value === \"number\" ? value : Number(value ?? 0)}\n        min={meta?.min}\n        max={meta?.max}\n        step={meta?.step}\n        onChange={(e) => onChange(e.target.value === \"\" ? 0 : Number(e.target.value))}\n        style={{\n          width: \"100%\",\n          padding: \"8px 10px\",\n          borderRadius: 10,\n          border: \"1px solid #333\",\n          background: \"#111\",\n          color: \"#fff\",\n        }}\n      />\n    );\n  }\n\n  // json\n  if (meta?.type === \"json\" || (value && typeof value === \"object\")) {\n    const text = safeStringify(value);\n    return (\n      <JsonEditor initial={text} onValidJson={(obj) => onChange(obj)} />\n    );\n  }\n\n  // text (default)\n  return (\n    <input\n      type=\"text\"\n      value={typeof value === \"string\" ? value : String(value ?? \"\")}\n      placeholder={meta?.placeholder}\n      onChange={(e) => onChange(e.target.value)}\n      style={{\n        width: \"100%\",\n        padding: \"8px 10px\",\n        borderRadius: 10,\n        border: \"1px solid #333\",\n        background: \"#111\",\n        color: \"#fff\",\n      }}\n    />\n  );\n}\n\nfunction safeStringify(v: unknown) {\n  try {\n    return JSON.stringify(v, null, 2);\n  } catch {\n    return String(v);\n  }\n}\n\nfunction JsonEditor({\n  initial,\n  onValidJson,\n}: {\n  initial: string;\n  onValidJson: (obj: unknown) => void;\n}) {\n  const [raw, setRaw] = useState(initial);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    setRaw(initial);\n  }, [initial]);\n\n  return (\n    <div style={{ display: \"grid\", gap: 6 }}>\n      <textarea\n        value={raw}\n        onChange={(e) => {\n          const next = e.target.value;\n          setRaw(next);\n\n          try {\n            const parsed = JSON.parse(next);\n            setError(null);\n            onValidJson(parsed);\n          } catch (err: any) {\n            setError(\"Invalid JSON\");\n          }\n        }}\n        rows={6}\n        style={{\n          width: \"100%\",\n          padding: \"8px 10px\",\n          borderRadius: 10,\n          border: \"1px solid #333\",\n          background: \"#111\",\n          color: \"#fff\",\n          fontFamily: \"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace\",\n          fontSize: 12,\n        }}\n      />\n      {error && <div style={{ fontSize: 12, color: \"#ff6b6b\" }}>{error}</div>}\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_react","import_react","import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,500 @@
+// src/provider.tsx
+import { createContext, useContext, useEffect, useId, useMemo, useRef } from "react";
+
+// src/store.ts
+function createInspectorStore() {
+  const components = /* @__PURE__ */ new Map();
+  const listeners = /* @__PURE__ */ new Set();
+  function emit() {
+    for (const l of listeners) l();
+  }
+  function getOrCreateComponent(id) {
+    const existing = components.get(id);
+    if (existing) return existing;
+    const created = {
+      id,
+      label: "Unknown",
+      mounted: true,
+      states: /* @__PURE__ */ new Map()
+    };
+    components.set(id, created);
+    return created;
+  }
+  const store = {
+    enabled: true,
+    components,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getSnapshot() {
+      return {
+        enabled: store.enabled,
+        components: Array.from(components.values()).map((c) => ({
+          id: c.id,
+          label: c.label,
+          mounted: c.mounted,
+          stateKeys: Array.from(c.states.keys())
+        }))
+      };
+    },
+    registerComponent(id, label) {
+      const c = getOrCreateComponent(id);
+      c.mounted = true;
+      if (label && label.trim()) c.label = label.trim();
+      emit();
+    },
+    setComponentLabel(id, label) {
+      const c = getOrCreateComponent(id);
+      c.label = label.trim() || "Unknown";
+      emit();
+    },
+    unregisterComponent(id) {
+      const c = components.get(id);
+      if (!c) return;
+      c.mounted = false;
+      emit();
+    },
+    upsertState(componentId, entry) {
+      const c = getOrCreateComponent(componentId);
+      c.states.set(entry.key, entry);
+      emit();
+    },
+    updateStateValue(componentId, key, value) {
+      const c = components.get(componentId);
+      if (!c) return;
+      const s = c.states.get(key);
+      if (!s) return;
+      s.value = value;
+      emit();
+    },
+    removeState(componentId, key) {
+      const c = components.get(componentId);
+      if (!c) return;
+      if (!c.states.has(key)) return;
+      c.states.delete(key);
+      emit();
+    }
+  };
+  return store;
+}
+
+// src/provider.tsx
+import { jsx } from "react/jsx-runtime";
+var InspectorContext = createContext(null);
+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 });
+}
+function useInspectorStore() {
+  const ctx = useContext(InspectorContext);
+  if (!ctx) {
+    throw new Error("useInspectorStore must be used inside StateInspectorProvider");
+  }
+  return ctx;
+}
+function useInspectorComponent(label) {
+  const store = useInspectorStore();
+  const reactId = useId();
+  const componentId = useMemo(() => `c_${reactId}`, [reactId]);
+  useEffect(() => {
+    if (!store.enabled) return;
+    store.registerComponent(componentId, label?.trim());
+    return () => {
+      store.unregisterComponent(componentId);
+    };
+  }, [store, componentId, label]);
+  useEffect(() => {
+    if (!store.enabled) return;
+    const trimmed = label?.trim();
+    if (trimmed) store.setComponentLabel(componentId, trimmed);
+  }, [store, componentId, label]);
+  return useMemo(() => ({ id: componentId }), [componentId]);
+}
+
+// src/hooks.ts
+import { useEffect as useEffect2, useId as useId2, useMemo as useMemo2, useRef as useRef2, useState } from "react";
+function stableKey(input) {
+  return input.trim();
+}
+function inferMeta(value) {
+  const t = typeof value;
+  if (t === "boolean") return { type: "boolean" };
+  if (t === "number") return { type: "number" };
+  if (t === "string") return { type: "text" };
+  if (value && t === "object") return { type: "json" };
+  return void 0;
+}
+function useInspectableState(component, key, initial, meta) {
+  const store = useInspectorStore();
+  const componentId = component.id;
+  const stateKey = useMemo2(() => stableKey(key), [key]);
+  const [value, setValue] = useState(initial);
+  const setValueRef = useRef2(() => {
+  });
+  setValueRef.current = (next) => {
+    setValue(next);
+  };
+  useEffect2(() => {
+    if (!store.enabled) return;
+    const resolvedMeta = meta ?? inferMeta(value);
+    store.upsertState(componentId, {
+      key: stateKey,
+      value,
+      setValue: (next) => setValueRef.current(next),
+      ...resolvedMeta !== void 0 && { meta: resolvedMeta }
+    });
+    return () => {
+      store.removeState(componentId, stateKey);
+    };
+  }, [store, componentId, stateKey]);
+  useEffect2(() => {
+    if (!store.enabled) return;
+    const resolvedMeta = meta ?? inferMeta(value);
+    store.upsertState(componentId, {
+      key: stateKey,
+      value,
+      setValue: (next) => setValueRef.current(next),
+      ...resolvedMeta !== void 0 && { meta: resolvedMeta }
+    });
+  }, [store, componentId, stateKey, value, meta]);
+  return [value, setValue];
+}
+function useComponentLabel(label) {
+  const store = useInspectorStore();
+  const reactId = useId2();
+  const componentId = useMemo2(() => `c_${reactId}`, [reactId]);
+  useEffect2(() => {
+    if (!store.enabled) return;
+    const trimmed = label.trim();
+    if (!trimmed) return;
+    store.setComponentLabel(componentId, trimmed);
+  }, [store, componentId, label]);
+}
+
+// src/StateInspectorUI.tsx
+import { useEffect as useEffect3, useMemo as useMemo3, useState as useState2 } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+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;
+    }
+    if (!selectedId || !components.some((c) => c.id === selectedId)) {
+      setSelectedId(components[0].id);
+    }
+  }, [open, components.length]);
+  useEffect3(() => {
+    if (!open) return;
+    function onKey(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    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(
+        "button",
+        {
+          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",
+          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"
+          },
+          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
+                ))
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+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(
+        "input",
+        {
+          type: "checkbox",
+          checked: Boolean(value),
+          onChange: (e) => onChange(e.target.checked)
+        }
+      ),
+      /* @__PURE__ */ jsx2("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(
+      "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"
+        },
+        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);
+        })
+      }
+    );
+  }
+  if (meta?.type === "number" || typeof value === "number") {
+    return /* @__PURE__ */ jsx2(
+      "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: {
+          width: "100%",
+          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__ */ jsx2(JsonEditor, { initial: text, onValidJson: (obj) => onChange(obj) });
+  }
+  return /* @__PURE__ */ jsx2(
+    "input",
+    {
+      type: "text",
+      value: typeof value === "string" ? value : String(value ?? ""),
+      placeholder: meta?.placeholder,
+      onChange: (e) => onChange(e.target.value),
+      style: {
+        width: "100%",
+        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] = useState2(initial);
+  const [error, setError] = useState2(null);
+  useEffect3(() => {
+    setRaw(initial);
+  }, [initial]);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 6 }, children: [
+    /* @__PURE__ */ jsx2(
+      "textarea",
+      {
+        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
+        }
+      }
+    ),
+    error && /* @__PURE__ */ jsx2("div", { style: { fontSize: 12, color: "#ff6b6b" }, children: error })
+  ] });
+}
+export {
+  StateInspectorProvider,
+  StateInspectorUI,
+  createInspectorStore,
+  useComponentLabel,
+  useInspectableState,
+  useInspectorComponent,
+  useInspectorStore
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider.tsx","../src/store.ts","../src/hooks.ts","../src/StateInspectorUI.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useId, useMemo, useRef } from \"react\";\nimport { createInspectorStore, InspectorComponentRef, InspectorStore } from \"./store\";\n\nconst InspectorContext = createContext<InspectorStore | null>(null);\n\nexport function StateInspectorProvider({\n  enabled = true,\n  children,\n}: {\n  enabled?: boolean;\n  children: React.ReactNode;\n}) {\n  const storeRef = useRef<InspectorStore>(null);\n\n  if (!storeRef.current) {\n    storeRef.current = createInspectorStore();\n  }\n\n  storeRef.current.enabled = enabled;\n\n  return (\n    <InspectorContext.Provider value={storeRef.current}>\n      {children}\n    </InspectorContext.Provider>\n  );\n}\n\nexport function useInspectorStore(): InspectorStore {\n  const ctx = useContext(InspectorContext);\n  if (!ctx) {\n    throw new Error(\"useInspectorStore must be used inside StateInspectorProvider\");\n  }\n  return ctx;\n}\n\nexport function useInspectorComponent(label?: string): InspectorComponentRef {\n  const store = useInspectorStore();\n  const reactId = useId();\n  const componentId = useMemo(() => `c_${reactId}`, [reactId]);\n\n  useEffect(() => {\n    if (!store.enabled) return;\n\n    store.registerComponent(componentId, label?.trim());\n    return () => {\n      store.unregisterComponent(componentId);\n    };\n  }, [store, componentId, label]);\n\n  useEffect(() => {\n    if (!store.enabled) return;\n    const trimmed = label?.trim();\n    if (trimmed) store.setComponentLabel(componentId, trimmed);\n  }, [store, componentId, label]);\n\n  return useMemo(() => ({ id: componentId }), [componentId]);\n}\n","export type ComponentId = string;\n\nexport type InspectableMeta =\n  | { type: \"boolean\" }\n  | { type: \"text\"; placeholder?: string }\n  | { type: \"number\"; min?: number; max?: number; step?: number }\n  | { type: \"select\"; options: Array<string | { label: string; value: string }> }\n  | { type: \"json\" }\n  | { type: \"custom\"; renderId: string };\n\nexport interface InspectableStateEntry {\n  key: string;\n  value: unknown;\n  setValue: (next: unknown) => void;\n  meta?: InspectableMeta;\n}\n\nexport interface ComponentEntry {\n  id: ComponentId;\n  label: string;\n  mounted: boolean;\n  states: Map<string, InspectableStateEntry>;\n}\n\nexport interface InspectorSnapshot {\n  enabled: boolean;\n  components: Array<{\n    id: ComponentId;\n    label: string;\n    mounted: boolean;\n    stateKeys: string[];\n  }>;\n}\n\ntype Listener = () => void;\n\nexport interface InspectorComponentRef {\n  id: string;\n}\n\nexport interface InspectorStore {\n  enabled: boolean;\n\n  // internal registry\n  components: Map<ComponentId, ComponentEntry>;\n\n  // subscriptions\n  subscribe: (listener: Listener) => () => void;\n  getSnapshot: () => InspectorSnapshot;\n\n  // component lifecycle\n  registerComponent: (id: ComponentId, label?: string) => void;\n  setComponentLabel: (id: ComponentId, label: string) => void;\n  unregisterComponent: (id: ComponentId) => void;\n\n  // state lifecycle\n  upsertState: (\n    componentId: ComponentId,\n    entry: InspectableStateEntry,\n  ) => void;\n\n  updateStateValue: (componentId: ComponentId, key: string, value: unknown) => void;\n  removeState: (componentId: ComponentId, key: string) => void;\n}\n\nexport function createInspectorStore(): InspectorStore {\n  const components = new Map<ComponentId, ComponentEntry>();\n  const listeners = new Set<Listener>();\n\n  function emit() {\n    for (const l of listeners) l();\n  }\n\n  function getOrCreateComponent(id: ComponentId): ComponentEntry {\n    const existing = components.get(id);\n    if (existing) return existing;\n\n    const created: ComponentEntry = {\n      id,\n      label: \"Unknown\",\n      mounted: true,\n      states: new Map(),\n    };\n    components.set(id, created);\n    return created;\n  }\n\n  const store: InspectorStore = {\n    enabled: true,\n    components,\n\n    subscribe(listener) {\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n\n    getSnapshot() {\n      return {\n        enabled: store.enabled,\n        components: Array.from(components.values()).map((c) => ({\n          id: c.id,\n          label: c.label,\n          mounted: c.mounted,\n          stateKeys: Array.from(c.states.keys()),\n        })),\n      };\n    },\n\n    registerComponent(id, label) {\n      const c = getOrCreateComponent(id);\n      c.mounted = true;\n      if (label && label.trim()) c.label = label.trim();\n      emit();\n    },\n\n    setComponentLabel(id, label) {\n      const c = getOrCreateComponent(id);\n      c.label = label.trim() || \"Unknown\";\n      emit();\n    },\n\n    unregisterComponent(id) {\n      const c = components.get(id);\n      if (!c) return;\n\n      // StrictMode double-unmount safe:\n      // we mark as unmounted; UI can choose to hide unmounted entries.\n      c.mounted = false;\n\n      // Optional: immediate cleanup if you prefer:\n      // components.delete(id);\n\n      emit();\n    },\n\n    upsertState(componentId, entry) {\n      const c = getOrCreateComponent(componentId);\n      c.states.set(entry.key, entry);\n      emit();\n    },\n\n    updateStateValue(componentId, key, value) {\n      const c = components.get(componentId);\n      if (!c) return;\n      const s = c.states.get(key);\n      if (!s) return;\n      s.value = value;\n      emit();\n    },\n\n    removeState(componentId, key) {\n      const c = components.get(componentId);\n      if (!c) return;\n      if (!c.states.has(key)) return;\n      c.states.delete(key);\n      emit();\n    },\n  };\n\n  return store;\n}\n","import React, { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { useInspectorStore } from \"./provider\";\nimport type { InspectableMeta, InspectorComponentRef } from \"./store\";\n\nfunction stableKey(input: string): string {\n  return input.trim();\n}\n\nfunction inferMeta(value: unknown): InspectableMeta | undefined {\n  const t = typeof value;\n  if (t === \"boolean\") return { type: \"boolean\" };\n  if (t === \"number\") return { type: \"number\" };\n  if (t === \"string\") return { type: \"text\" };\n  if (value && t === \"object\") return { type: \"json\" };\n  return undefined;\n}\n\n/**\n * Registers a piece of state to the inspector registry.\n * Opt-in by replacing useState with useInspectableState.\n */\nexport function useInspectableState<T>(\n  component: InspectorComponentRef,\n  key: string,\n  initial: T | (() => T),\n  meta?: InspectableMeta,\n): [T, React.Dispatch<React.SetStateAction<T>>] {\n  const store = useInspectorStore();\n  const componentId = component.id;\n\n  const stateKey = useMemo(() => stableKey(key), [key]);\n\n  const [value, setValue] = useState<T>(initial);\n\n  // Keep latest setter stable for registry consumers\n  const setValueRef = useRef<(next: unknown) => void>(() => {});\n  setValueRef.current = (next: unknown) => {\n    setValue(next as T);\n  };\n\n  // Register component + state entry\n  useEffect(() => {\n    if (!store.enabled) return;\n\n    const resolvedMeta = meta ?? inferMeta(value);\n    store.upsertState(componentId, {\n      key: stateKey,\n      value,\n      setValue: (next) => setValueRef.current(next),\n      ...(resolvedMeta !== undefined && { meta: resolvedMeta }),\n    });\n\n    return () => {\n      store.removeState(componentId, stateKey);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [store, componentId, stateKey]);\n\n  // Sync updates on each render when value/meta changes\n  useEffect(() => {\n    if (!store.enabled) return;\n\n    const resolvedMeta = meta ?? inferMeta(value);\n    store.upsertState(componentId, {\n      key: stateKey,\n      value,\n      setValue: (next) => setValueRef.current(next),\n      ...(resolvedMeta !== undefined && { meta: resolvedMeta }),\n    });\n  }, [store, componentId, stateKey, value, meta]);\n\n  return [value, setValue];\n}\n\n/**\n * Optional helper to give the current component instance a human label.\n */\nexport function useComponentLabel(label: string) {\n  const store = useInspectorStore();\n  const reactId = useId();\n  const componentId = useMemo(() => `c_${reactId}`, [reactId]);\n\n  useEffect(() => {\n    if (!store.enabled) return;\n    const trimmed = label.trim();\n    if (!trimmed) return;\n    store.setComponentLabel(componentId, trimmed);\n  }, [store, componentId, label]);\n}\n","import { useEffect, useMemo, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useInspectorStore } from \"./provider\";\nuseInspectorStore\n\nfunction isOptionObject(\n  opt: string | { label: string; value: string },\n): opt is { label: string; value: string } {\n  return typeof opt === \"object\" && opt !== null && \"value\" in opt;\n}\n\nexport function StateInspectorUI() {\n  const store = useInspectorStore();\n\n  const [open, setOpen] = useState(false);\n  const [selectedId, setSelectedId] = useState<string | null>(null);\n  const [, force] = useState(0);\n\n  useEffect(() => store.subscribe(() => force((x) => x + 1)), [store]);\n\n  if (!store.enabled) return null;\n\n  const snapshot = store.getSnapshot();\n  const components = snapshot.components.filter((c) => c.mounted);\n\n  // Keep a valid selection\n  useEffect(() => {\n    if (!open) return;\n\n    if (components.length === 0) {\n      setSelectedId(null);\n      return;\n    }\n\n    if (!selectedId || !components.some((c) => c.id === selectedId)) {\n      setSelectedId(components[0]!.id);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, components.length]);\n\n  useEffect(() => {\n    if (!open) return;\n\n    function onKey(e: KeyboardEvent) {\n      if (e.key === \"Escape\") setOpen(false);\n    }\n\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, [open]);\n\n  const selected = useMemo(() => {\n    if (!selectedId) return null;\n    return store.components.get(selectedId) ?? null;\n  }, [store, selectedId, snapshot.components.length]);\n\n  return createPortal(\n    <>\n      {/* Floating Button */}\n      <button\n        onClick={() => setOpen((o) => !o)}\n        style={{\n          position: \"fixed\",\n          right: 16,\n          bottom: 16,\n          width: 44,\n          height: 44,\n          borderRadius: 22,\n          border: \"none\",\n          background: \"#111\",\n          color: \"#fff\",\n          cursor: \"pointer\",\n          zIndex: 999999,\n        }}\n        aria-label=\"Toggle State Inspector\"\n        title=\"State Inspector\"\n      >\n        ◎\n      </button>\n\n      {/* Floating Card */}\n      {open && (\n        <div\n          style={{\n            position: \"fixed\",\n            right: 16,\n            bottom: 72,\n            width: 720,\n            maxWidth: \"calc(100vw - 32px)\",\n            height: 420,\n            maxHeight: \"calc(100vh - 120px)\",\n            background: \"#1c1c1c\",\n            color: \"#fff\",\n            borderRadius: 12,\n            border: \"1px solid #333\",\n            zIndex: 999999,\n            display: \"grid\",\n            gridTemplateColumns: \"280px 1fr\",\n            overflow: \"hidden\",\n          }}\n        >\n          {/* Left: component list */}\n          <div style={{ borderRight: \"1px solid #333\", padding: 12, height: \"420px\", display: \"flex\", flexDirection: \"column\", boxSizing: \"border-box\" }}>\n            <div style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\" }}>\n              <h4 style={{ margin: 0 }}>Components</h4>\n              <span style={{ fontSize: 12, opacity: 0.7 }}>{components.length}</span>\n            </div>\n\n            <div style={{ marginTop: 10, display: \"grid\", gap: 8, overflow: \"auto\", flex: 1 }}>\n              {components.map((c) => {\n                const active = c.id === selectedId;\n                return (\n                  <button\n                    key={c.id}\n                    onClick={() => setSelectedId(c.id)}\n                    style={{\n                      textAlign: \"left\",\n                      background: active ? \"#2a2a2a\" : \"transparent\",\n                      border: \"1px solid #333\",\n                      borderRadius: 10,\n                      padding: 10,\n                      color: \"#fff\",\n                      cursor: \"pointer\",\n                    }}\n                  >\n                    <div style={{ fontWeight: 700 }}>{c.label}</div>\n                    <div style={{ fontSize: 12, opacity: 0.7 }}>\n                      states: {c.stateKeys.length ? c.stateKeys.length : 0}\n                    </div>\n                  </button>\n                );\n              })}\n            </div>\n          </div>\n\n          {/* Right: state editors */}\n          <div style={{ padding: 12, overflow: \"auto\" }}>\n            <div style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\" }}>\n              <div>\n                <h4 style={{ margin: 0 }}>State</h4>\n                <div style={{ fontSize: 12, opacity: 0.7 }}>\n                  {selected ? selected.label : \"No selection\"}\n                </div>\n              </div>\n\n              <button\n                onClick={() => setOpen(false)}\n                style={{\n                  background: \"transparent\",\n                  color: \"#fff\",\n                  border: \"1px solid #333\",\n                  borderRadius: 10,\n                  padding: \"6px 10px\",\n                  cursor: \"pointer\",\n                }}\n              >\n                Close\n              </button>\n            </div>\n\n            <div style={{ marginTop: 12, display: \"grid\", gap: 10 }}>\n              {selected && selected.states.size === 0 && (\n                <div style={{ fontSize: 13, opacity: 0.7 }}>\n                  This component has no inspectable state.\n                </div>\n              )}\n\n              {!selected && (\n                <div style={{ opacity: 0.7, fontSize: 13 }}>\n                  No component selected.\n                </div>\n              )}\n\n              {selected &&\n                Array.from(selected.states.values()).map((s) => (\n                  <div\n                    key={s.key}\n                    style={{\n                      border: \"1px solid #333\",\n                      borderRadius: 12,\n                      padding: 10,\n                      display: \"grid\",\n                      gap: 8,\n                    }}\n                  >\n                    <div style={{ display: \"flex\", justifyContent: \"space-between\", gap: 12 }}>\n                      <div style={{ fontWeight: 700 }}>{s.key}</div>\n                      <div style={{ fontSize: 12, opacity: 0.6 }}>{s.meta?.type ?? \"auto\"}</div>\n                    </div>\n\n                    <StateEditor\n                      value={s.value}\n                      meta={s.meta}\n                      onChange={(next) => s.setValue(next)}\n                    />\n                  </div>\n                ))}\n            </div>\n          </div>\n        </div>\n      )}\n    </>,\n    document.body,\n  );\n}\n\nfunction StateEditor({\n  value,\n  meta,\n  onChange,\n}: {\n  value: unknown;\n  meta: any;\n  onChange: (next: unknown) => void;\n}) {\n  // boolean\n  if (meta?.type === \"boolean\" || typeof value === \"boolean\") {\n    return (\n      <label style={{ display: \"flex\", gap: 10, alignItems: \"center\" }}>\n        <input\n          type=\"checkbox\"\n          checked={Boolean(value)}\n          onChange={(e) => onChange(e.target.checked)}\n        />\n        <span style={{ fontSize: 13, opacity: 0.8 }}>{String(Boolean(value))}</span>\n      </label>\n    );\n  }\n\n  // select\n  if (meta?.type === \"select\" && Array.isArray(meta.options)) {\n    const current = typeof value === \"string\" ? value : String(value ?? \"\");\n    return (\n      <select\n        value={current}\n        onChange={(e) => onChange(e.target.value)}\n        style={{\n          width: \"100%\",\n          padding: \"8px 10px\",\n          borderRadius: 10,\n          border: \"1px solid #333\",\n          background: \"#111\",\n          color: \"#fff\",\n        }}\n      >\n        {meta.options.map((opt: any) => {\n          const o = isOptionObject(opt) ? opt : { label: String(opt), value: String(opt) };\n          return (\n            <option key={o.value} value={o.value}>\n              {o.label}\n            </option>\n          );\n        })}\n      </select>\n    );\n  }\n\n  // number\n  if (meta?.type === \"number\" || typeof value === \"number\") {\n    return (\n      <input\n        type=\"number\"\n        value={typeof value === \"number\" ? value : Number(value ?? 0)}\n        min={meta?.min}\n        max={meta?.max}\n        step={meta?.step}\n        onChange={(e) => onChange(e.target.value === \"\" ? 0 : Number(e.target.value))}\n        style={{\n          width: \"100%\",\n          padding: \"8px 10px\",\n          borderRadius: 10,\n          border: \"1px solid #333\",\n          background: \"#111\",\n          color: \"#fff\",\n        }}\n      />\n    );\n  }\n\n  // json\n  if (meta?.type === \"json\" || (value && typeof value === \"object\")) {\n    const text = safeStringify(value);\n    return (\n      <JsonEditor initial={text} onValidJson={(obj) => onChange(obj)} />\n    );\n  }\n\n  // text (default)\n  return (\n    <input\n      type=\"text\"\n      value={typeof value === \"string\" ? value : String(value ?? \"\")}\n      placeholder={meta?.placeholder}\n      onChange={(e) => onChange(e.target.value)}\n      style={{\n        width: \"100%\",\n        padding: \"8px 10px\",\n        borderRadius: 10,\n        border: \"1px solid #333\",\n        background: \"#111\",\n        color: \"#fff\",\n      }}\n    />\n  );\n}\n\nfunction safeStringify(v: unknown) {\n  try {\n    return JSON.stringify(v, null, 2);\n  } catch {\n    return String(v);\n  }\n}\n\nfunction JsonEditor({\n  initial,\n  onValidJson,\n}: {\n  initial: string;\n  onValidJson: (obj: unknown) => void;\n}) {\n  const [raw, setRaw] = useState(initial);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    setRaw(initial);\n  }, [initial]);\n\n  return (\n    <div style={{ display: \"grid\", gap: 6 }}>\n      <textarea\n        value={raw}\n        onChange={(e) => {\n          const next = e.target.value;\n          setRaw(next);\n\n          try {\n            const parsed = JSON.parse(next);\n            setError(null);\n            onValidJson(parsed);\n          } catch (err: any) {\n            setError(\"Invalid JSON\");\n          }\n        }}\n        rows={6}\n        style={{\n          width: \"100%\",\n          padding: \"8px 10px\",\n          borderRadius: 10,\n          border: \"1px solid #333\",\n          background: \"#111\",\n          color: \"#fff\",\n          fontFamily: \"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace\",\n          fontSize: 12,\n        }}\n      />\n      {error && <div style={{ fontSize: 12, color: \"#ff6b6b\" }}>{error}</div>}\n    </div>\n  );\n}\n"],"mappings":"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","names":["useEffect","useId","useMemo","useRef","useMemo","useRef","useEffect","useId","useEffect","useMemo","useState","jsx","useState","useEffect","useMemo","jsx"]}