react-state-inspector-devtools 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,86 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default from 'react';
+
+type ComponentId = string;
+type InspectableMeta = {
+    type: "boolean";
+} | {
+    type: "text";
+    placeholder?: string;
+} | {
+    type: "number";
+    min?: number;
+    max?: number;
+    step?: number;
+} | {
+    type: "select";
+    options: Array<string | {
+        label: string;
+        value: string;
+    }>;
+} | {
+    type: "json";
+} | {
+    type: "custom";
+    renderId: string;
+};
+interface InspectableStateEntry {
+    key: string;
+    value: unknown;
+    setValue: (next: unknown) => void;
+    meta?: InspectableMeta;
+}
+interface ComponentEntry {
+    id: ComponentId;
+    label: string;
+    mounted: boolean;
+    states: Map<string, InspectableStateEntry>;
+}
+interface InspectorSnapshot {
+    enabled: boolean;
+    components: Array<{
+        id: ComponentId;
+        label: string;
+        mounted: boolean;
+        stateKeys: string[];
+    }>;
+}
+type Listener = () => void;
+interface InspectorComponentRef {
+    id: string;
+}
+interface InspectorStore {
+    enabled: boolean;
+    components: Map<ComponentId, ComponentEntry>;
+    subscribe: (listener: Listener) => () => void;
+    getSnapshot: () => InspectorSnapshot;
+    registerComponent: (id: ComponentId, label?: string) => void;
+    setComponentLabel: (id: ComponentId, label: string) => void;
+    unregisterComponent: (id: ComponentId) => void;
+    upsertState: (componentId: ComponentId, entry: InspectableStateEntry) => void;
+    updateStateValue: (componentId: ComponentId, key: string, value: unknown) => void;
+    removeState: (componentId: ComponentId, key: string) => void;
+}
+declare function createInspectorStore(): InspectorStore;
+
+declare function StateInspectorProvider({ enabled, children, }: {
+    enabled?: boolean;
+    children: React__default.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useInspectorStore(): InspectorStore;
+declare function useInspectorComponent(label?: string): InspectorComponentRef;
+
+/**
+ * Registers a piece of state to the inspector registry.
+ * Opt-in by replacing useState with useInspectableState.
+ */
+declare function useInspectableState<T>(component: InspectorComponentRef, key: string, initial: T | (() => T), meta?: InspectableMeta): [T, React__default.Dispatch<React__default.SetStateAction<T>>];
+/**
+ * Optional helper to give the current component instance a human label.
+ */
+declare function useComponentLabel(label: string): void;
+
+declare function StateInspectorUI(): React.ReactPortal | null;
+
+export { type ComponentEntry, type ComponentId, type InspectableMeta, type InspectableStateEntry, type InspectorComponentRef, type InspectorSnapshot, type InspectorStore, StateInspectorProvider, StateInspectorUI, createInspectorStore, useComponentLabel, useInspectableState, useInspectorComponent, useInspectorStore };

package/dist/index.d.ts

@@ -0,0 +1,86 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default from 'react';
+
+type ComponentId = string;
+type InspectableMeta = {
+    type: "boolean";
+} | {
+    type: "text";
+    placeholder?: string;
+} | {
+    type: "number";
+    min?: number;
+    max?: number;
+    step?: number;
+} | {
+    type: "select";
+    options: Array<string | {
+        label: string;
+        value: string;
+    }>;
+} | {
+    type: "json";
+} | {
+    type: "custom";
+    renderId: string;
+};
+interface InspectableStateEntry {
+    key: string;
+    value: unknown;
+    setValue: (next: unknown) => void;
+    meta?: InspectableMeta;
+}
+interface ComponentEntry {
+    id: ComponentId;
+    label: string;
+    mounted: boolean;
+    states: Map<string, InspectableStateEntry>;
+}
+interface InspectorSnapshot {
+    enabled: boolean;
+    components: Array<{
+        id: ComponentId;
+        label: string;
+        mounted: boolean;
+        stateKeys: string[];
+    }>;
+}
+type Listener = () => void;
+interface InspectorComponentRef {
+    id: string;
+}
+interface InspectorStore {
+    enabled: boolean;
+    components: Map<ComponentId, ComponentEntry>;
+    subscribe: (listener: Listener) => () => void;
+    getSnapshot: () => InspectorSnapshot;
+    registerComponent: (id: ComponentId, label?: string) => void;
+    setComponentLabel: (id: ComponentId, label: string) => void;
+    unregisterComponent: (id: ComponentId) => void;
+    upsertState: (componentId: ComponentId, entry: InspectableStateEntry) => void;
+    updateStateValue: (componentId: ComponentId, key: string, value: unknown) => void;
+    removeState: (componentId: ComponentId, key: string) => void;
+}
+declare function createInspectorStore(): InspectorStore;
+
+declare function StateInspectorProvider({ enabled, children, }: {
+    enabled?: boolean;
+    children: React__default.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useInspectorStore(): InspectorStore;
+declare function useInspectorComponent(label?: string): InspectorComponentRef;
+
+/**
+ * Registers a piece of state to the inspector registry.
+ * Opt-in by replacing useState with useInspectableState.
+ */
+declare function useInspectableState<T>(component: InspectorComponentRef, key: string, initial: T | (() => T), meta?: InspectableMeta): [T, React__default.Dispatch<React__default.SetStateAction<T>>];
+/**
+ * Optional helper to give the current component instance a human label.
+ */
+declare function useComponentLabel(label: string): void;
+
+declare function StateInspectorUI(): React.ReactPortal | null;
+
+export { type ComponentEntry, type ComponentId, type InspectableMeta, type InspectableStateEntry, type InspectorComponentRef, type InspectorSnapshot, type InspectorStore, StateInspectorProvider, StateInspectorUI, createInspectorStore, useComponentLabel, useInspectableState, useInspectorComponent, useInspectorStore };

package/dist/index.js

@@ -0,0 +1,533 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  StateInspectorProvider: () => StateInspectorProvider,
+  StateInspectorUI: () => StateInspectorUI,
+  createInspectorStore: () => createInspectorStore,
+  useComponentLabel: () => useComponentLabel,
+  useInspectableState: () => useInspectableState,
+  useInspectorComponent: () => useInspectorComponent,
+  useInspectorStore: () => useInspectorStore
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider.tsx
+var import_react = require("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
+var import_jsx_runtime = require("react/jsx-runtime");
+var InspectorContext = (0, import_react.createContext)(null);
+function StateInspectorProvider({
+  enabled = true,
+  children
+}) {
+  const storeRef = (0, import_react.useRef)(null);
+  if (!storeRef.current) {
+    storeRef.current = createInspectorStore();
+  }
+  storeRef.current.enabled = enabled;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InspectorContext.Provider, { value: storeRef.current, children });
+}
+function useInspectorStore() {
+  const ctx = (0, import_react.useContext)(InspectorContext);
+  if (!ctx) {
+    throw new Error("useInspectorStore must be used inside StateInspectorProvider");
+  }
+  return ctx;
+}
+function useInspectorComponent(label) {
+  const store = useInspectorStore();
+  const reactId = (0, import_react.useId)();
+  const componentId = (0, import_react.useMemo)(() => `c_${reactId}`, [reactId]);
+  (0, import_react.useEffect)(() => {
+    if (!store.enabled) return;
+    store.registerComponent(componentId, label?.trim());
+    return () => {
+      store.unregisterComponent(componentId);
+    };
+  }, [store, componentId, label]);
+  (0, import_react.useEffect)(() => {
+    if (!store.enabled) return;
+    const trimmed = label?.trim();
+    if (trimmed) store.setComponentLabel(componentId, trimmed);
+  }, [store, componentId, label]);
+  return (0, import_react.useMemo)(() => ({ id: componentId }), [componentId]);
+}
+
+// src/hooks.ts
+var import_react2 = require("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 = (0, import_react2.useMemo)(() => stableKey(key), [key]);
+  const [value, setValue] = (0, import_react2.useState)(initial);
+  const setValueRef = (0, import_react2.useRef)(() => {
+  });
+  setValueRef.current = (next) => {
+    setValue(next);
+  };
+  (0, import_react2.useEffect)(() => {
+    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]);
+  (0, import_react2.useEffect)(() => {
+    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 = (0, import_react2.useId)();
+  const componentId = (0, import_react2.useMemo)(() => `c_${reactId}`, [reactId]);
+  (0, import_react2.useEffect)(() => {
+    if (!store.enabled) return;
+    const trimmed = label.trim();
+    if (!trimmed) return;
+    store.setComponentLabel(componentId, trimmed);
+  }, [store, componentId, label]);
+}
+
+// src/StateInspectorUI.tsx
+var import_react3 = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function isOptionObject(opt) {
+  return typeof opt === "object" && opt !== null && "value" in opt;
+}
+function StateInspectorUI() {
+  const store = useInspectorStore();
+  const [open, setOpen] = (0, import_react3.useState)(false);
+  const [selectedId, setSelectedId] = (0, import_react3.useState)(null);
+  const [, force] = (0, import_react3.useState)(0);
+  (0, import_react3.useEffect)(() => store.subscribe(() => force((x) => x + 1)), [store]);
+  if (!store.enabled) return null;
+  const snapshot = store.getSnapshot();
+  const components = snapshot.components.filter((c) => c.mounted);
+  (0, import_react3.useEffect)(() => {
+    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]);
+  (0, import_react3.useEffect)(() => {
+    if (!open) return;
+    function onKey(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open]);
+  const selected = (0, import_react3.useMemo)(() => {
+    if (!selectedId) return null;
+    return store.components.get(selectedId) ?? null;
+  }, [store, selectedId, snapshot.components.length]);
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "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__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { borderRight: "1px solid #333", padding: 12, height: "420px", display: "flex", flexDirection: "column", boxSizing: "border-box" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { style: { margin: 0 }, children: "Components" }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: 12, opacity: 0.7 }, children: components.length })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: 10, display: "grid", gap: 8, overflow: "auto", flex: 1 }, children: components.map((c) => {
+                const active = c.id === selectedId;
+                return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "button",
+                  {
+                    onClick: () => setSelectedId(c.id),
+                    style: {
+                      textAlign: "left",
+                      background: active ? "#2a2a2a" : "transparent",
+                      border: "1px solid #333",
+                      borderRadius: 10,
+                      padding: 10,
+                      color: "#fff",
+                      cursor: "pointer"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 700 }, children: c.label }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { fontSize: 12, opacity: 0.7 }, children: [
+                        "states: ",
+                        c.stateKeys.length ? c.stateKeys.length : 0
+                      ] })
+                    ]
+                  },
+                  c.id
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { padding: 12, overflow: "auto" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { style: { margin: 0 }, children: "State" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 12, opacity: 0.7 }, children: selected ? selected.label : "No selection" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    onClick: () => setOpen(false),
+                    style: {
+                      background: "transparent",
+                      color: "#fff",
+                      border: "1px solid #333",
+                      borderRadius: 10,
+                      padding: "6px 10px",
+                      cursor: "pointer"
+                    },
+                    children: "Close"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginTop: 12, display: "grid", gap: 10 }, children: [
+                selected && selected.states.size === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 13, opacity: 0.7 }, children: "This component has no inspectable state." }),
+                !selected && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { opacity: 0.7, fontSize: 13 }, children: "No component selected." }),
+                selected && Array.from(selected.states.values()).map((s) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      border: "1px solid #333",
+                      borderRadius: 12,
+                      padding: 10,
+                      display: "grid",
+                      gap: 8
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", gap: 12 }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 700 }, children: s.key }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 12, opacity: 0.6 }, children: s.meta?.type ?? "auto" })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        StateEditor,
+                        {
+                          value: s.value,
+                          meta: s.meta,
+                          onChange: (next) => s.setValue(next)
+                        }
+                      )
+                    ]
+                  },
+                  s.key
+                ))
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function StateEditor({
+  value,
+  meta,
+  onChange
+}) {
+  if (meta?.type === "boolean" || typeof value === "boolean") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          checked: Boolean(value),
+          onChange: (e) => onChange(e.target.checked)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: 13, opacity: 0.8 }, children: String(Boolean(value)) })
+    ] });
+  }
+  if (meta?.type === "select" && Array.isArray(meta.options)) {
+    const current = typeof value === "string" ? value : String(value ?? "");
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "select",
+      {
+        value: current,
+        onChange: (e) => onChange(e.target.value),
+        style: {
+          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__ */ (0, import_jsx_runtime2.jsx)("option", { value: o.value, children: o.label }, o.value);
+        })
+      }
+    );
+  }
+  if (meta?.type === "number" || typeof value === "number") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "input",
+      {
+        type: "number",
+        value: typeof value === "number" ? value : Number(value ?? 0),
+        min: meta?.min,
+        max: meta?.max,
+        step: meta?.step,
+        onChange: (e) => onChange(e.target.value === "" ? 0 : Number(e.target.value)),
+        style: {
+          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__ */ (0, import_jsx_runtime2.jsx)(JsonEditor, { initial: text, onValidJson: (obj) => onChange(obj) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "input",
+    {
+      type: "text",
+      value: typeof value === "string" ? value : String(value ?? ""),
+      placeholder: meta?.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] = (0, import_react3.useState)(initial);
+  const [error, setError] = (0, import_react3.useState)(null);
+  (0, import_react3.useEffect)(() => {
+    setRaw(initial);
+  }, [initial]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "grid", gap: 6 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "textarea",
+      {
+        value: raw,
+        onChange: (e) => {
+          const next = e.target.value;
+          setRaw(next);
+          try {
+            const parsed = JSON.parse(next);
+            setError(null);
+            onValidJson(parsed);
+          } catch (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__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 12, color: "#ff6b6b" }, children: error })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StateInspectorProvider,
+  StateInspectorUI,
+  createInspectorStore,
+  useComponentLabel,
+  useInspectableState,
+  useInspectorComponent,
+  useInspectorStore
+});
+//# sourceMappingURL=index.js.map