react-state-inspector-devtools 1.1.22 → 1.2.0

package/dist/index.js

@@ -23,6 +23,7 @@ __export(index_exports, {
   StateInspectorProvider: () => StateInspectorProvider,
   StateInspectorUI: () => StateInspectorUI,
   createInspectorStore: () => createInspectorStore,
+  inferMeta: () => inferMeta,
   useComponentLabel: () => useComponentLabel,
   useInspectableState: () => useInspectableState,
   useInspectorComponent: () => useInspectorComponent,
@@ -53,33 +54,37 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/index.css
-styleInject('@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";\n[data-rsi-root],\n[data-rsi-root] *,\n[data-rsi-root] *::before,\n[data-rsi-root] *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-family:\n    "Inter",\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    "Helvetica Neue",\n    sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  text-align: left;\n  text-decoration: none;\n  text-indent: 0;\n  text-shadow: none;\n  text-transform: none;\n  word-spacing: normal;\n  white-space: normal;\n  background: transparent;\n  color: inherit;\n  outline: none;\n  vertical-align: baseline;\n  visibility: visible;\n  opacity: 1;\n  transform: none;\n  transform-origin: 50% 50% 0;\n  animation: none;\n  transition: none;\n  list-style: none;\n  border-collapse: collapse;\n  border-spacing: 0;\n  float: none;\n  clear: none;\n  cursor: auto;\n}\n[data-rsi-root] {\n  all: initial;\n  font-family:\n    "Inter",\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    "Helvetica Neue",\n    sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #fff;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n}\n[data-rsi-floating-button] {\n  all: initial;\n  font-family:\n    "Inter",\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    "Helvetica Neue",\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n[data-rsi-root] button {\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  padding: 0;\n  margin: 0;\n}\n[data-rsi-root] input,\n[data-rsi-root] textarea {\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  background: transparent;\n  border: none;\n  outline: none;\n  padding: 0;\n  margin: 0;\n  resize: none;\n}\n[data-rsi-root] input::placeholder,\n[data-rsi-root] textarea::placeholder {\n  color: inherit;\n  opacity: 0.5;\n}\n[data-rsi-root] a {\n  color: inherit;\n  text-decoration: none;\n}\n[data-rsi-root] img,\n[data-rsi-root] svg {\n  display: block;\n  max-width: 100%;\n}\n[data-rsi-root] h1,\n[data-rsi-root] h2,\n[data-rsi-root] h3,\n[data-rsi-root] h4,\n[data-rsi-root] h5,\n[data-rsi-root] h6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n[data-rsi-root] ::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n[data-rsi-root] ::-webkit-scrollbar-track {\n  background: transparent;\n}\n[data-rsi-root] ::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: 3px;\n}\n[data-rsi-root] ::-webkit-scrollbar-thumb:hover {\n  background: rgba(255, 255, 255, 0.3);\n}\n[data-rsi-root] ::selection {\n  background: rgba(99, 102, 241, 0.4);\n  color: #fff;\n}\n[data-rsi-root] :focus-visible {\n  outline: 2px solid rgba(99, 102, 241, 0.6);\n  outline-offset: 2px;\n}\n');
+styleInject('@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";\n[data-rsi-root],\n[data-rsi-root] *,\n[data-rsi-root] *::before,\n[data-rsi-root] *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-family:\n    "Inter",\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    "Helvetica Neue",\n    sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  font-style: normal;\n  font-variant: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  text-align: left;\n  text-decoration: none;\n  text-indent: 0;\n  text-shadow: none;\n  text-transform: none;\n  word-spacing: normal;\n  white-space: normal;\n  background: transparent;\n  color: inherit;\n  outline: none;\n  vertical-align: baseline;\n  visibility: visible;\n  opacity: 1;\n  transform: none;\n  transform-origin: 50% 50% 0;\n  animation: none;\n  transition: none;\n  list-style: none;\n  border-collapse: collapse;\n  border-spacing: 0;\n  float: none;\n  clear: none;\n  cursor: auto;\n}\n[data-rsi-root] {\n  all: initial;\n  font-family:\n    "Inter",\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    "Helvetica Neue",\n    sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #fff;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n}\n[data-rsi-floating-button] {\n  all: initial;\n  font-family:\n    "Inter",\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    "Helvetica Neue",\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n[data-rsi-root] button {\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  padding: 0;\n  margin: 0;\n  border-radius: 8px;\n}\n[data-rsi-root] input,\n[data-rsi-root] textarea {\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  background: transparent;\n  border: none;\n  outline: none;\n  padding: 0;\n  margin: 0;\n  resize: none;\n}\n[data-rsi-root] input::placeholder,\n[data-rsi-root] textarea::placeholder {\n  color: inherit;\n  opacity: 0.5;\n}\n[data-rsi-root] a {\n  color: inherit;\n  text-decoration: none;\n}\n[data-rsi-root] img,\n[data-rsi-root] svg {\n  display: block;\n  max-width: 100%;\n}\n[data-rsi-root] h1,\n[data-rsi-root] h2,\n[data-rsi-root] h3,\n[data-rsi-root] h4,\n[data-rsi-root] h5,\n[data-rsi-root] h6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n[data-rsi-root] ::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n[data-rsi-root] ::-webkit-scrollbar-track {\n  background: transparent;\n}\n[data-rsi-root] ::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: 3px;\n}\n[data-rsi-root] ::-webkit-scrollbar-thumb:hover {\n  background: rgba(255, 255, 255, 0.3);\n}\n[data-rsi-root] ::selection {\n  background: rgba(99, 102, 241, 0.4);\n  color: #fff;\n}\n[data-rsi-root] :focus-visible {\n  outline: 2px solid rgba(99, 102, 241, 0.6);\n  outline-offset: 2px;\n}\n');
 
 // src/provider.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/store.ts
 function createInspectorStore() {
-  const components = /* @__PURE__ */ new Map();
+  const dataSources = /* @__PURE__ */ new Map();
   const listeners = /* @__PURE__ */ new Set();
   function emit() {
     for (const l of listeners) l();
   }
-  function getOrCreateComponent(id) {
-    const existing = components.get(id);
+  function getOrCreateDataSource(id, type, slices) {
+    const existing = dataSources.get(id);
     if (existing) return existing;
     const created = {
       id,
       label: "Unknown",
+      type,
       mounted: true,
-      states: /* @__PURE__ */ new Map()
+      states: /* @__PURE__ */ new Map(),
+      slices: new Map(
+        slices?.map((sliceId) => [sliceId, { id: sliceId, label: sliceId, states: /* @__PURE__ */ new Map() }]) ?? []
+      )
     };
-    components.set(id, created);
+    dataSources.set(id, created);
     return created;
   }
   const store = {
     enabled: true,
-    components,
+    dataSources,
     subscribe(listener) {
       listeners.add(listener);
       return () => {
@@ -89,104 +94,120 @@ function createInspectorStore() {
     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())
+        dataSources: Array.from(dataSources.values()).map((ds) => ({
+          id: ds.id,
+          label: ds.label,
+          type: ds.type,
+          mounted: ds.mounted,
+          stateKeys: Array.from(ds.states.keys()),
+          slices: Array.from(ds.slices.values()).map((slice) => ({
+            id: slice.id,
+            label: slice.label,
+            stateKeys: Array.from(slice.states.keys())
+          }))
         }))
       };
     },
-    registerComponent(id, label) {
-      const c = getOrCreateComponent(id);
-      c.mounted = true;
-      if (label && label.trim()) c.label = label.trim();
+    // Data source lifecycle
+    registerDataSource(id, type, label, slices) {
+      const ds = getOrCreateDataSource(id, type, slices);
+      ds.mounted = true;
+      if (label?.trim()) ds.label = label.trim();
       emit();
     },
-    setComponentLabel(id, label) {
-      const c = getOrCreateComponent(id);
-      c.label = label.trim() || "Unknown";
+    setDataSourceLabel(id, label) {
+      const ds = dataSources.get(id);
+      if (!ds) return;
+      ds.label = label.trim() || "Unknown";
       emit();
     },
-    unregisterComponent(id) {
-      const c = components.get(id);
-      if (!c) return;
-      c.mounted = false;
+    unregisterDataSource(id) {
+      const ds = dataSources.get(id);
+      if (!ds) return;
+      ds.mounted = false;
+      emit();
+    },
+    // State lifecycle (for component type)
+    upsertState(dataSourceId, entry) {
+      const ds = getOrCreateDataSource(dataSourceId, "component");
+      ds.states.set(entry.key, entry);
       emit();
     },
-    upsertState(componentId, entry) {
-      const c = getOrCreateComponent(componentId);
-      c.states.set(entry.key, entry);
+    updateStateValue(dataSourceId, key, value) {
+      const ds = dataSources.get(dataSourceId);
+      if (!ds) return;
+      const s = ds.states.get(key);
+      if (!s) return;
+      s.value = value;
+      emit();
+    },
+    removeState(dataSourceId, key) {
+      const ds = dataSources.get(dataSourceId);
+      if (!ds) return;
+      if (!ds.states.has(key)) return;
+      ds.states.delete(key);
       emit();
     },
-    updateStateValue(componentId, key, value) {
-      const c = components.get(componentId);
-      if (!c) return;
-      const s = c.states.get(key);
+    // Slice state lifecycle (for context type)
+    upsertSliceState(dataSourceId, sliceId, entry) {
+      const ds = dataSources.get(dataSourceId);
+      if (!ds) return;
+      let slice = ds.slices.get(sliceId);
+      if (!slice) {
+        slice = { id: sliceId, label: sliceId, states: /* @__PURE__ */ new Map() };
+        ds.slices.set(sliceId, slice);
+      }
+      slice.states.set(entry.key, entry);
+      emit();
+    },
+    updateSliceStateValue(dataSourceId, sliceId, key, value) {
+      const ds = dataSources.get(dataSourceId);
+      if (!ds) return;
+      const slice = ds.slices.get(sliceId);
+      if (!slice) return;
+      const s = slice.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);
+    removeSliceState(dataSourceId, sliceId, key) {
+      const ds = dataSources.get(dataSourceId);
+      if (!ds) return;
+      const slice = ds.slices.get(sliceId);
+      if (!slice) return;
+      slice.states.delete(key);
       emit();
+    },
+    // Get state entries
+    getStateEntry(dataSourceId, key) {
+      const ds = dataSources.get(dataSourceId);
+      return ds?.states.get(key);
+    },
+    getSliceStateEntry(dataSourceId, sliceId, key) {
+      const ds = dataSources.get(dataSourceId);
+      if (!ds) return void 0;
+      const slice = ds.slices.get(sliceId);
+      return slice?.states.get(key);
+    },
+    // Legacy aliases
+    registerComponent(id, label) {
+      store.registerDataSource(id, "component", label);
+    },
+    setComponentLabel(id, label) {
+      store.setDataSourceLabel(id, label);
+    },
+    unregisterComponent(id) {
+      store.unregisterDataSource(id);
+    },
+    upsertDataSourceState(dataSourceId, sliceId, entry) {
+      store.upsertSliceState(dataSourceId, sliceId, entry);
     }
   };
   return store;
 }
 
-// src/provider.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var InspectorContext = (0, import_react.createContext)(null);
-var storeRef = { current: null };
-function getStore() {
-  if (!storeRef.current) {
-    storeRef.current = createInspectorStore();
-  }
-  return storeRef.current;
-}
-function StateInspectorProvider({
-  enabled = true,
-  children
-}) {
-  const store = (0, import_react.useMemo)(() => getStore(), []);
-  (0, import_react.useEffect)(() => {
-    storeRef.current.enabled = enabled;
-  }, [enabled]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InspectorContext.Provider, { value: store, 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]);
-  console.log({ id: componentId });
-  return (0, import_react.useMemo)(() => ({ id: componentId }), [componentId]);
-}
-
 // src/hooks.ts
-var import_react2 = require("react");
+var import_react = require("react");
 function stableKey(input) {
   return input.trim();
 }
@@ -201,14 +222,14 @@ function inferMeta(value) {
 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)(() => {
+  const stateKey = (0, import_react.useMemo)(() => stableKey(key), [key]);
+  const [value, setValue] = (0, import_react.useState)(initial);
+  const setValueRef = (0, import_react.useRef)(() => {
   });
   setValueRef.current = (next) => {
     setValue(next);
   };
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (!store.enabled) return;
     const resolvedMeta = meta ?? inferMeta(value);
     store.upsertState(componentId, {
@@ -221,7 +242,7 @@ function useInspectableState(component, key, initial, meta) {
       store.removeState(componentId, stateKey);
     };
   }, [store, componentId, stateKey]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (!store.enabled) return;
     const resolvedMeta = meta ?? inferMeta(value);
     store.upsertState(componentId, {
@@ -235,9 +256,9 @@ function useInspectableState(component, key, initial, meta) {
 }
 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)(() => {
+  const reactId = (0, import_react.useId)();
+  const componentId = (0, import_react.useMemo)(() => `c_${reactId}`, [reactId]);
+  (0, import_react.useEffect)(() => {
     if (!store.enabled) return;
     const trimmed = label.trim();
     if (!trimmed) return;
@@ -245,8 +266,108 @@ function useComponentLabel(label) {
   }, [store, componentId, label]);
 }
 
+// src/provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var InspectorContext = (0, import_react2.createContext)(null);
+var storeRef = { current: null };
+function getStore() {
+  if (!storeRef.current) {
+    storeRef.current = createInspectorStore();
+  }
+  return storeRef.current;
+}
+function StateInspectorProvider({
+  enabled = true,
+  store,
+  children
+}) {
+  const mainStore = (0, import_react2.useMemo)(() => getStore(), []);
+  (0, import_react2.useEffect)(() => {
+    if (!store) return;
+    const initialState = store.getState();
+    const slices = Object.keys(initialState);
+    mainStore.registerDataSource("redux_context", "context", "ReduxContext", slices);
+    syncSliceStates(initialState);
+    function syncSliceStates(state) {
+      slices.forEach((sliceName) => {
+        const sliceState = state[sliceName];
+        if (sliceState && typeof sliceState === "object" && !Array.isArray(sliceState)) {
+          Object.entries(sliceState).forEach(
+            ([stateKey, stateValue]) => {
+              const meta = inferMeta(stateValue);
+              mainStore.upsertSliceState("redux_context", sliceName, {
+                key: stateKey,
+                value: stateValue,
+                ...meta !== void 0 && { meta },
+                setValue: (newValue) => {
+                  store.dispatch({
+                    type: `${sliceName}/updateField`,
+                    payload: { field: stateKey, value: newValue }
+                  });
+                }
+              });
+            }
+          );
+        } else {
+          const meta = inferMeta(sliceState);
+          mainStore.upsertSliceState("redux_context", sliceName, {
+            key: "value",
+            value: sliceState,
+            ...meta !== void 0 && { meta },
+            setValue: (newValue) => {
+              store.dispatch({
+                type: `${sliceName}/setValue`,
+                payload: newValue
+              });
+            }
+          });
+        }
+      });
+    }
+    function handleChange() {
+      const nextState = store.getState();
+      syncSliceStates(nextState);
+    }
+    const unsubscribe = store.subscribe(handleChange);
+    return () => {
+      unsubscribe();
+      mainStore.unregisterDataSource("redux_context");
+    };
+  }, [store, mainStore]);
+  (0, import_react2.useEffect)(() => {
+    storeRef.current.enabled = enabled;
+  }, [enabled]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InspectorContext.Provider, { value: mainStore, children });
+}
+function useInspectorStore() {
+  const ctx = (0, import_react2.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_react2.useId)();
+  const componentId = (0, import_react2.useMemo)(() => `c_${reactId}`, [reactId]);
+  (0, import_react2.useEffect)(() => {
+    if (!store.enabled) return;
+    store.registerComponent(componentId, label?.trim());
+    return () => {
+      store.unregisterComponent(componentId);
+    };
+  }, [store, componentId, label]);
+  (0, import_react2.useEffect)(() => {
+    if (!store.enabled) return;
+    const trimmed = label?.trim();
+    if (trimmed) store.setComponentLabel(componentId, trimmed);
+  }, [store, componentId, label]);
+  console.log({ id: componentId });
+  return (0, import_react2.useMemo)(() => ({ id: componentId }), [componentId]);
+}
+
 // src/StateInspectorUI.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/ui/constants.ts
@@ -545,6 +666,9 @@ function DragHandle({ children, onDragStart, onDragEnd, style }) {
   );
 }
 
+// src/ui/components/ComponentList.tsx
+var import_react4 = require("react");
+
 // src/ui/styles.ts
 var inputStyle = {
   padding: "8px 10px",
@@ -580,48 +704,128 @@ function SearchInput({ value, onChange, inputRef }) {
 
 // src/ui/components/ComponentList.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-function ComponentList({
-  components,
-  selectedId,
-  onSelect,
-  hidden,
-  query,
-  onQueryChange,
-  searchRef
-}) {
-  if (hidden) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { padding: 4, boxSizing: "border-box", backgroundColor: "#09090B" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      "div",
+var ComponentListItem = ({ dataSource, active, onSelect }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "button",
+    {
+      id: `rsi-comp-${dataSource.id}`,
+      onClick: () => onSelect(dataSource.id),
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: 8,
+        backgroundColor: active ? "#27272A" : "transparent",
+        border: "none",
+        cursor: "pointer"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontWeight: 500, fontSize: 12, color: active ? "#fff" : "#9F9FA9" }, children: dataSource.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            style: {
+              fontSize: 9,
+              height: 16,
+              width: 16,
+              color: "#D4D4D8",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: 8,
+              backgroundColor: "#3F3F47"
+            },
+            children: dataSource.stateKeys.length
+          }
+        )
+      ]
+    },
+    dataSource.id
+  );
+};
+var ContextListItem = ({ dataSource, activeSliceId, onSelectSlice }) => {
+  const [expanded, setExpanded] = (0, import_react4.useState)(true);
+  const isActive = dataSource.slices.some(
+    (slice) => `${dataSource.id}:${slice.id}` === activeSliceId
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "button",
       {
+        onClick: () => setExpanded(!expanded),
         style: {
           display: "flex",
-          flexDirection: "column",
-          paddingTop: 4,
-          paddingBottom: 8,
-          paddingLeft: 4,
-          paddingRight: 4
+          justifyContent: "space-between",
+          alignItems: "center",
+          padding: 8,
+          backgroundColor: isActive ? "#27272A" : "transparent",
+          border: "none",
+          cursor: "pointer"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SearchInput, { value: query, onChange: onQueryChange, inputRef: searchRef })
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontWeight: 500, fontSize: 12, color: isActive ? "#fff" : "#9F9FA9" }, children: dataSource.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "div",
+              {
+                style: {
+                  fontSize: 9,
+                  height: 16,
+                  width: 16,
+                  color: "#D4D4D8",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: 8,
+                  backgroundColor: "#3F3F47"
+                },
+                children: dataSource.slices.length
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "svg",
+              {
+                width: "10",
+                height: "10",
+                viewBox: "0 0 10 10",
+                fill: "none",
+                style: {
+                  transform: expanded ? "rotate(180deg)" : "rotate(90deg)",
+                  transition: "transform 0.15s ease"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "path",
+                  {
+                    d: "M3 2L7 5L3 8",
+                    stroke: "#9F9FA9",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            )
+          ] })
+        ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 2, overflow: "auto", flex: 1 }, children: components.map((c) => {
-      const active = c.id === selectedId;
+    expanded && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", flexDirection: "column", paddingLeft: 16 }, children: dataSource.slices.map((slice) => {
+      const active = activeSliceId === `${dataSource.id}:${slice.id}`;
       return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
         "button",
         {
-          id: `rsi-comp-${c.id}`,
-          onClick: () => onSelect(c.id),
+          onClick: () => onSelectSlice(dataSource.id, slice.id),
           style: {
             display: "flex",
             justifyContent: "space-between",
             alignItems: "center",
             padding: 8,
             backgroundColor: active ? "#27272A" : "transparent",
-            border: "none"
+            border: "none",
+            cursor: "pointer"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontWeight: 500, fontSize: 12, color: active ? "#fff" : "#9F9FA9" }, children: c.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontWeight: 500, fontSize: 12, color: active ? "#fff" : "#9F9FA9" }, children: slice.label }),
             /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "div",
               {
@@ -636,15 +840,59 @@ function ComponentList({
                   borderRadius: 8,
                   backgroundColor: "#3F3F47"
                 },
-                children: c.stateKeys.length
+                children: slice.stateKeys.length
               }
             )
           ]
         },
-        c.id
+        slice.id
       );
     }) })
   ] });
+};
+function DataSourceList({
+  dataSources,
+  selectedId,
+  onSelect,
+  onSelectSlice,
+  hidden,
+  query,
+  onQueryChange,
+  searchRef
+}) {
+  if (hidden) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { padding: 4, boxSizing: "border-box", backgroundColor: "#09090B" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          paddingTop: 4,
+          paddingBottom: 8,
+          paddingLeft: 4,
+          paddingRight: 4
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SearchInput, { value: query, onChange: onQueryChange, inputRef: searchRef })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 2, overflow: "auto", flex: 1 }, children: dataSources.map((ds) => {
+      if (ds.type === "context") {
+        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          ContextListItem,
+          {
+            dataSource: ds,
+            activeSliceId: selectedId,
+            onSelectSlice: onSelectSlice ?? (() => {
+            })
+          },
+          ds.id
+        );
+      }
+      const active = ds.id === selectedId;
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComponentListItem, { dataSource: ds, active, onSelect }, ds.id);
+    }) })
+  ] });
 }
 
 // src/ui/components/StatePanelHeader.tsx
@@ -682,12 +930,12 @@ function StatePanelHeader({
 }
 
 // src/ui/components/JsonEditor.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function JsonEditor({ initial, onValidJson }) {
-  const [raw, setRaw] = (0, import_react4.useState)(initial);
-  const [error, setError] = (0, import_react4.useState)(null);
-  (0, import_react4.useEffect)(() => {
+  const [raw, setRaw] = (0, import_react5.useState)(initial);
+  const [error, setError] = (0, import_react5.useState)(null);
+  (0, import_react5.useEffect)(() => {
     setRaw(initial);
   }, [initial]);
   const handleChange = (e) => {
@@ -817,7 +1065,7 @@ function StateCard({ state }) {
           {
             value: state.value,
             meta: state.meta,
-            onChange: (next) => state.setValue(next)
+            onChange: (next) => state.setValue?.(next)
           }
         )
       ]
@@ -1068,16 +1316,18 @@ var DockHeader_default = DockHeader;
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function StateInspectorUI() {
   const store = useInspectorStore();
-  const [query, setQuery] = (0, import_react5.useState)("");
-  const [leftCollapsed, setLeftCollapsed] = (0, import_react5.useState)(false);
-  const [layout, setLayout] = (0, import_react5.useState)("floating");
-  const [preview, setPreview] = (0, import_react5.useState)(null);
-  const [isTransitioning, setIsTransitioning] = (0, import_react5.useState)(false);
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const [selectedId, setSelectedId] = (0, import_react5.useState)(null);
-  const [tick, force] = (0, import_react5.useState)(0);
-  const searchRef = (0, import_react5.useRef)(null);
-  const [pos, setPos] = (0, import_react5.useState)(() => {
+  const [query, setQuery] = (0, import_react6.useState)("");
+  const [leftCollapsed, setLeftCollapsed] = (0, import_react6.useState)(false);
+  const [layout, setLayout] = (0, import_react6.useState)("floating");
+  const [preview, setPreview] = (0, import_react6.useState)(null);
+  const [isTransitioning, setIsTransitioning] = (0, import_react6.useState)(false);
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const [selectedId, setSelectedId] = (0, import_react6.useState)(null);
+  const [selectedSlice, setSelectedSlice] = (0, import_react6.useState)(null);
+  const [tick, force] = (0, import_react6.useState)(0);
+  console.log(store);
+  const searchRef = (0, import_react6.useRef)(null);
+  const [pos, setPos] = (0, import_react6.useState)(() => {
     try {
       const raw = localStorage.getItem(LS_KEY);
       return raw ? JSON.parse(raw) : { right: 16, bottom: 72 };
@@ -1085,7 +1335,7 @@ function StateInspectorUI() {
       return { right: 16, bottom: 72 };
     }
   });
-  const [leftWidth, setLeftWidth] = (0, import_react5.useState)(() => {
+  const [leftWidth, setLeftWidth] = (0, import_react6.useState)(() => {
     try {
       const raw = localStorage.getItem(LS_LEFT_W);
       return raw ? Number(raw) : 280;
@@ -1093,7 +1343,7 @@ function StateInspectorUI() {
       return 280;
     }
   });
-  const [size, setSize] = (0, import_react5.useState)(() => {
+  const [size, setSize] = (0, import_react6.useState)(() => {
     try {
       const raw = localStorage.getItem(LS_SIZE);
       return raw ? JSON.parse(raw) : { width: 720, height: 420 };
@@ -1101,64 +1351,83 @@ function StateInspectorUI() {
       return { width: 720, height: 420 };
     }
   });
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     try {
       localStorage.setItem(LS_LAYOUT, layout);
     } catch (e) {
       console.error(e);
     }
   }, [layout]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     try {
       localStorage.setItem(LS_KEY, JSON.stringify(pos));
     } catch (e) {
       console.error(e);
     }
   }, [pos]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     try {
       localStorage.setItem(LS_LEFT_W, String(leftWidth));
     } catch (e) {
       console.error(e);
     }
   }, [leftWidth]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     try {
       localStorage.setItem(LS_SIZE, JSON.stringify(size));
     } catch (e) {
       console.error(e);
     }
   }, [size]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const shouldCollapse = leftWidth <= 200 || (size.width ?? 720) - leftWidth < 320;
     setLeftCollapsed(shouldCollapse);
   }, [leftWidth, size.width]);
-  (0, import_react5.useEffect)(() => store.subscribe(() => force((x) => x + 1)), [store]);
-  const snapshot = (0, import_react5.useMemo)(() => store.getSnapshot(), [store, tick]);
-  const components = (0, import_react5.useMemo)(
-    () => snapshot.components.filter((c) => c.mounted),
-    [snapshot.components]
+  (0, import_react6.useEffect)(() => store.subscribe(() => force((x) => x + 1)), [store]);
+  const snapshot = (0, import_react6.useMemo)(() => store.getSnapshot(), [store, tick]);
+  const dataSources = (0, import_react6.useMemo)(
+    () => snapshot.dataSources.filter((ds) => ds.mounted),
+    [snapshot.dataSources]
   );
   const q = query.trim().toLowerCase();
-  const filtered = (0, import_react5.useMemo)(
-    () => 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]
+  const filtered = (0, import_react6.useMemo)(
+    () => q ? dataSources.filter((ds) => {
+      const labelHit = ds.label.toLowerCase().includes(q);
+      const stateKeyHit = ds.stateKeys.some((k) => k.toLowerCase().includes(q));
+      const sliceKeyHit = ds.slices.some(
+        (slice) => slice.stateKeys.some((k) => k.toLowerCase().includes(q))
+      );
+      return labelHit || stateKeyHit || sliceKeyHit;
+    }) : dataSources,
+    [q, dataSources]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!open) return;
-    if (components.length === 0) {
+    if (dataSources.length === 0) {
       setSelectedId(null);
       return;
     }
-    if (!selectedId || !components.some((c) => c.id === selectedId)) {
-      setSelectedId(components[0].id);
+    const isValidSelection = selectedId && dataSources.some((ds) => {
+      if (ds.id === selectedId) return true;
+      if (selectedId.includes(":")) {
+        const [dsId, sliceId] = selectedId.split(":");
+        return ds.id === dsId && ds.slices.some((s) => s.id === sliceId);
+      }
+      return false;
+    });
+    if (!isValidSelection) {
+      const firstDs = dataSources[0];
+      if (firstDs?.type === "context" && firstDs.slices.length > 0) {
+        const firstSlice = firstDs.slices[0];
+        setSelectedId(`${firstDs.id}:${firstSlice.id}`);
+        setSelectedSlice({ dataSourceId: firstDs.id, sliceId: firstSlice.id });
+      } else if (firstDs) {
+        setSelectedId(firstDs.id);
+        setSelectedSlice(null);
+      }
     }
-  }, [open, components.length]);
-  (0, import_react5.useEffect)(() => {
+  }, [open, dataSources.length]);
+  (0, import_react6.useEffect)(() => {
     function onKey(e) {
       const mod = isMac ? e.metaKey : e.ctrlKey;
       if (mod && e.shiftKey && e.key.toLowerCase() === "i") {
@@ -1191,10 +1460,40 @@ function StateInspectorUI() {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [open, filtered, selectedId]);
-  const selected = (0, import_react5.useMemo)(() => {
+  const selected = (0, import_react6.useMemo)(() => {
+    if (selectedSlice) {
+      const ds2 = store.dataSources.get(selectedSlice.dataSourceId);
+      if (ds2 && ds2.type === "context") {
+        const slice = ds2.slices.get(selectedSlice.sliceId);
+        if (slice) {
+          return {
+            id: `${selectedSlice.dataSourceId}:${selectedSlice.sliceId}`,
+            label: slice.label,
+            mounted: ds2.mounted,
+            states: slice.states
+          };
+        }
+      }
+      return null;
+    }
     if (!selectedId) return null;
-    return store.components.get(selectedId) ?? null;
-  }, [store, selectedId]);
+    const ds = store.dataSources.get(selectedId);
+    if (!ds) return null;
+    return {
+      id: ds.id,
+      label: ds.label,
+      mounted: ds.mounted,
+      states: ds.states
+    };
+  }, [store, selectedId, selectedSlice, tick]);
+  const handleSelectSlice = (dataSourceId, sliceId) => {
+    setSelectedId(`${dataSourceId}:${sliceId}`);
+    setSelectedSlice({ dataSourceId, sliceId });
+  };
+  const handleSelectComponent = (id) => {
+    setSelectedId(id);
+    setSelectedSlice(null);
+  };
   const handleDragEnd = () => {
     if (preview) {
       setLayout(preview);
@@ -1337,14 +1636,15 @@ function StateInspectorUI() {
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ResizeHandle, { onResize: handlePanelResize(size, pos) }),
                   /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                    ComponentList,
+                    DataSourceList,
                     {
                       query,
                       onQueryChange: setQuery,
                       searchRef,
-                      components: filtered,
+                      dataSources: filtered,
                       selectedId,
-                      onSelect: setSelectedId,
+                      onSelect: handleSelectComponent,
+                      onSelectSlice: handleSelectSlice,
                       hidden: leftCollapsed
                     }
                   ),
@@ -1379,6 +1679,7 @@ function StateInspectorUI() {
   StateInspectorProvider,
   StateInspectorUI,
   createInspectorStore,
+  inferMeta,
   useComponentLabel,
   useInspectableState,
   useInspectorComponent,