@montra-interactive/deepstate-react 0.1.3 → 0.2.0

package/dist/hooks.d.ts

@@ -4,6 +4,12 @@ import type { Observable } from "rxjs";
  * Works with deepstate nodes since they extend Observable.
  */
 type ObservableValue<T> = T extends Observable<infer V> ? V : never;
+/**
+ * Type for object of observables -> object of their values
+ */
+type ObservableObjectValues<T extends Record<string, Observable<unknown>>> = {
+    [K in keyof T]: ObservableValue<T[K]>;
+};
 /**
  * Hook to subscribe to any Observable and get its current value.
  * Re-renders the component whenever the observable emits a new value.
@@ -29,99 +35,81 @@ type ObservableValue<T> = T extends Observable<infer V> ? V : never;
  */
 export declare function useObservable<T>(observable$: Observable<T>, getSnapshot: () => T): T;
 /**
- * Hook to get the current value of a deepstate node.
- * Re-renders the component whenever the node's value changes.
+ * Hook to get values from one or more deepstate nodes, optionally with a selector function.
+ * Re-renders the component whenever the selected value changes.
  *
  * This is the primary hook for using deepstate in React.
- * Works with any deepstate node: RxLeaf, RxObject, RxArray, or RxNullable.
- *
  * Uses React 18's useSyncExternalStore for concurrent-mode safety.
  *
- * @param node - A deepstate node (any reactive property from your state)
- * @returns The current value of the node (deeply readonly)
- *
- * @example
+ * @example Single node (get raw value)
  * ```tsx
  * import { state } from 'deepstate';
- * import { useStateValue } from 'deepstate-react';
+ * import { useSelect } from 'deepstate-react';
  *
  * const store = state({
  *   user: { name: 'Alice', age: 30 },
- *   items: [{ id: 1, name: 'Item 1' }],
  *   count: 0
  * });
  *
  * // Subscribe to a primitive
  * function Counter() {
- *   const count = useStateValue(store.count);
+ *   const count = useSelect(store.count);
  *   return <span>{count}</span>;
  * }
  *
  * // Subscribe to an object
  * function UserCard() {
- *   const user = useStateValue(store.user);
+ *   const user = useSelect(store.user);
  *   return <div>{user.name}, {user.age}</div>;
  * }
  *
  * // Subscribe to a nested property (fine-grained!)
  * function UserName() {
- *   const name = useStateValue(store.user.name);
+ *   const name = useSelect(store.user.name);
  *   return <span>{name}</span>;
  * }
- *
- * // Subscribe to an array
- * function ItemList() {
- *   const items = useStateValue(store.items);
- *   return <ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
- * }
  * ```
- */
-export declare function useStateValue<T extends Observable<unknown>>(node: T): ObservableValue<T>;
-/**
- * Hook to derive a value from a deepstate node with a selector function.
- * Only re-renders when the derived value changes (using reference equality by default).
  *
- * Use this when you need to compute/transform a value from state.
- * The selector runs on every emission but only triggers re-render if result changes.
- *
- * Uses React 18's useSyncExternalStore for concurrent-mode safety.
- *
- * @param node - A deepstate node to select from
- * @param selector - Function to derive a value from the node's value
- * @param equalityFn - Optional custom equality function (default: Object.is)
- * @returns The derived value
- *
- * @example
+ * @example Single node with selector (derive a value)
  * ```tsx
- * import { state } from 'deepstate';
- * import { useSelector } from 'deepstate-react';
- *
- * const store = state({
- *   user: { firstName: 'Alice', lastName: 'Smith', age: 30 },
- *   items: [{ id: 1, price: 10 }, { id: 2, price: 20 }]
- * });
- *
- * // Derive a computed value
+ * // Derive a computed value from a single node
  * function FullName() {
- *   const fullName = useSelector(
+ *   const fullName = useSelect(
  *     store.user,
  *     user => `${user.firstName} ${user.lastName}`
  *   );
  *   return <span>{fullName}</span>;
  * }
+ * ```
  *
- * // Derive from an array
- * function TotalPrice() {
- *   const total = useSelector(
- *     store.items,
- *     items => items.reduce((sum, item) => sum + item.price, 0)
+ * @example Multiple nodes (array form)
+ * ```tsx
+ * // Combine multiple nodes - receives values as tuple
+ * function Progress() {
+ *   const percentage = useSelect(
+ *     [store.completed, store.total],
+ *     ([completed, total]) => total > 0 ? (completed / total) * 100 : 0
+ *   );
+ *   return <span>{percentage}%</span>;
+ * }
+ * ```
+ *
+ * @example Multiple nodes (object form)
+ * ```tsx
+ * // Combine multiple nodes - receives values as object
+ * function Progress() {
+ *   const percentage = useSelect(
+ *     { completed: store.completed, total: store.total },
+ *     ({ completed, total }) => total > 0 ? (completed / total) * 100 : 0
  *   );
- *   return <span>Total: ${total}</span>;
+ *   return <span>{percentage}%</span>;
  * }
+ * ```
  *
- * // With custom equality (e.g., for arrays)
+ * @example With custom equality
+ * ```tsx
  * function ItemIds() {
- *   const ids = useSelector(
+ *   const ids = useSelect(
  *     store.items,
  *     items => items.map(i => i.id),
  *     (a, b) => a.length === b.length && a.every((v, i) => v === b[i])
@@ -130,6 +118,20 @@ export declare function useStateValue<T extends Observable<unknown>>(node: T): O
  * }
  * ```
  */
-export declare function useSelector<T extends Observable<unknown>, R>(node: T, selector: (value: ObservableValue<T>) => R, equalityFn?: (a: R, b: R) => boolean): R;
+export declare function useSelect<T extends Observable<unknown>>(node: T): ObservableValue<T>;
+export declare function useSelect<T extends Observable<unknown>, R>(node: T, selector: (value: ObservableValue<T>) => R, equalityFn?: (a: R, b: R) => boolean): R;
+export declare function useSelect<T1 extends Observable<unknown>, T2 extends Observable<unknown>, R>(nodes: [T1, T2], selector: (values: [ObservableValue<T1>, ObservableValue<T2>]) => R, equalityFn?: (a: R, b: R) => boolean): R;
+export declare function useSelect<T1 extends Observable<unknown>, T2 extends Observable<unknown>, T3 extends Observable<unknown>, R>(nodes: [T1, T2, T3], selector: (values: [ObservableValue<T1>, ObservableValue<T2>, ObservableValue<T3>]) => R, equalityFn?: (a: R, b: R) => boolean): R;
+export declare function useSelect<T1 extends Observable<unknown>, T2 extends Observable<unknown>, T3 extends Observable<unknown>, T4 extends Observable<unknown>, R>(nodes: [T1, T2, T3, T4], selector: (values: [ObservableValue<T1>, ObservableValue<T2>, ObservableValue<T3>, ObservableValue<T4>]) => R, equalityFn?: (a: R, b: R) => boolean): R;
+export declare function useSelect<T1 extends Observable<unknown>, T2 extends Observable<unknown>, T3 extends Observable<unknown>, T4 extends Observable<unknown>, T5 extends Observable<unknown>, R>(nodes: [T1, T2, T3, T4, T5], selector: (values: [ObservableValue<T1>, ObservableValue<T2>, ObservableValue<T3>, ObservableValue<T4>, ObservableValue<T5>]) => R, equalityFn?: (a: R, b: R) => boolean): R;
+export declare function useSelect<T extends Record<string, Observable<unknown>>, R>(nodes: T, selector: (values: ObservableObjectValues<T>) => R, equalityFn?: (a: R, b: R) => boolean): R;
+/**
+ * @deprecated Use `useSelect` instead. This is an alias for backwards compatibility.
+ */
+export declare const useStateValue: typeof useSelect;
+/**
+ * @deprecated Use `useSelect` instead. This is an alias for backwards compatibility.
+ */
+export declare const useSelector: typeof useSelect;
 export {};
 //# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAGvC;;;GAGG;AACH,KAAK,eAAe,CAAC,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAcpE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAC7B,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,EAC1B,WAAW,EAAE,MAAM,CAAC,GACnB,CAAC,CAkBH;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,UAAU,CAAC,OAAO,CAAC,EACzD,IAAI,EAAE,CAAC,GACN,eAAe,CAAC,CAAC,CAAC,CAuBpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EAC1D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,EAC1C,UAAU,GAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAmB,GAC9C,CAAC,CAuCH"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -6,21 +6,32 @@
  * @example
  * ```tsx
  * import { state } from 'deepstate';
- * import { useStateValue, useSelector } from 'deepstate-react';
+ * import { useSelect } from 'deepstate-react';
  *
  * const store = state({ user: { name: 'Alice', age: 30 }, count: 0 });
  *
+ * // Get raw value
  * function UserName() {
- *   const name = useStateValue(store.user.name);
+ *   const name = useSelect(store.user.name);
  *   return <span>{name}</span>;
  * }
  *
+ * // With selector
  * function UserSummary() {
- *   const summary = useSelector(store.user, user => `${user.name} (${user.age})`);
+ *   const summary = useSelect(store.user, user => `${user.name} (${user.age})`);
  *   return <span>{summary}</span>;
  * }
+ *
+ * // Combine multiple nodes
+ * function Progress() {
+ *   const pct = useSelect(
+ *     [store.completed, store.total],
+ *     ([completed, total]) => total > 0 ? (completed / total) * 100 : 0
+ *   );
+ *   return <span>{pct}%</span>;
+ * }
  * ```
  */
-export { useStateValue, useSelector, useObservable, } from "./hooks";
+export { useSelect, useObservable, useStateValue, useSelector, } from "./hooks";
 export type { Observable } from "rxjs";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EACL,aAAa,EACb,WAAW,EACX,aAAa,GACd,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EACL,SAAS,EACT,aAAa,EAEb,aAAa,EACb,WAAW,GACZ,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC"}

package/dist/index.js

@@ -1,9 +1,13 @@
 // src/hooks.ts
 import { useSyncExternalStore, useMemo, useCallback, useRef } from "react";
+import { combineLatest } from "rxjs";
 import { map, distinctUntilChanged } from "rxjs/operators";
 function hasGet(obj) {
   return obj !== null && typeof obj === "object" && "get" in obj && typeof obj.get === "function";
 }
+function isObservable(obj) {
+  return obj !== null && typeof obj === "object" && "subscribe" in obj && typeof obj.subscribe === "function";
+}
 function useObservable(observable$, getSnapshot) {
   const valueRef = useRef(getSnapshot());
   const subscribe = useCallback((onStoreChange) => {
@@ -16,39 +20,81 @@ function useObservable(observable$, getSnapshot) {
   const getSnapshotMemo = useCallback(() => valueRef.current, []);
   return useSyncExternalStore(subscribe, getSnapshotMemo, getSnapshotMemo);
 }
-function useStateValue(node) {
-  const valueRef = useRef(hasGet(node) ? node.get() : undefined);
-  const subscribe = useCallback((onStoreChange) => {
-    const subscription = node.subscribe((newValue) => {
-      valueRef.current = newValue;
-      onStoreChange();
-    });
-    return () => subscription.unsubscribe();
-  }, [node]);
-  const getSnapshot = useCallback(() => valueRef.current, []);
-  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-}
-function useSelector(node, selector, equalityFn = Object.is) {
-  const derived$ = useMemo(() => node.pipe(map((value) => selector(value)), distinctUntilChanged(equalityFn)), [node, selector, equalityFn]);
-  const getInitialValue = () => {
-    if (hasGet(node)) {
-      return selector(node.get());
+function useSelect(nodeOrNodes, selector, equalityFn = Object.is) {
+  const { combined$, getInitialValue } = useMemo(() => {
+    if (Array.isArray(nodeOrNodes)) {
+      const nodes = nodeOrNodes;
+      const sel = selector;
+      return {
+        combined$: combineLatest(nodes).pipe(map((values) => sel(values)), distinctUntilChanged(equalityFn)),
+        getInitialValue: () => {
+          const values = nodes.map((n) => hasGet(n) ? n.get() : undefined);
+          return sel(values);
+        }
+      };
+    }
+    if (!isObservable(nodeOrNodes)) {
+      const obj = nodeOrNodes;
+      const keys = Object.keys(obj);
+      const observables = keys.map((k) => obj[k]);
+      const sel = selector;
+      return {
+        combined$: combineLatest(observables).pipe(map((values) => {
+          const result = {};
+          keys.forEach((key, i) => {
+            result[key] = values[i];
+          });
+          return sel(result);
+        }), distinctUntilChanged(equalityFn)),
+        getInitialValue: () => {
+          const result = {};
+          keys.forEach((key) => {
+            const node2 = obj[key];
+            result[key] = hasGet(node2) ? node2.get() : undefined;
+          });
+          return sel(result);
+        }
+      };
+    }
+    const node = nodeOrNodes;
+    if (selector) {
+      return {
+        combined$: node.pipe(map((value) => selector(value)), distinctUntilChanged(equalityFn)),
+        getInitialValue: () => {
+          if (hasGet(node)) {
+            return selector(node.get());
+          }
+          return;
+        }
+      };
+    } else {
+      return {
+        combined$: node.pipe(distinctUntilChanged(equalityFn)),
+        getInitialValue: () => {
+          if (hasGet(node)) {
+            return node.get();
+          }
+          return;
+        }
+      };
     }
-    return;
-  };
+  }, [nodeOrNodes, selector, equalityFn]);
   const valueRef = useRef(getInitialValue());
   const subscribe = useCallback((onStoreChange) => {
-    const subscription = derived$.subscribe((newValue) => {
+    const subscription = combined$.subscribe((newValue) => {
       valueRef.current = newValue;
       onStoreChange();
     });
     return () => subscription.unsubscribe();
-  }, [derived$]);
+  }, [combined$]);
   const getSnapshot = useCallback(() => valueRef.current, []);
   return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
+var useStateValue = useSelect;
+var useSelector = useSelect;
 export {
   useStateValue,
   useSelector,
+  useSelect,
   useObservable
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@montra-interactive/deepstate-react",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "React bindings for deepstate - Proxy-based reactive state management with RxJS.",
   "keywords": [
     "react",

package/src/hooks.ts

@@ -1,5 +1,6 @@
 import { useSyncExternalStore, useMemo, useCallback, useRef } from "react";
 import type { Observable } from "rxjs";
+import { combineLatest } from "rxjs";
 import { map, distinctUntilChanged } from "rxjs/operators";
 
 /**
@@ -8,6 +9,20 @@ import { map, distinctUntilChanged } from "rxjs/operators";
  */
 type ObservableValue<T> = T extends Observable<infer V> ? V : never;
 
+/**
+ * Type for array of observables -> tuple of their values
+ */
+type ObservableValues<T extends readonly Observable<unknown>[]> = {
+  [K in keyof T]: ObservableValue<T[K]>;
+};
+
+/**
+ * Type for object of observables -> object of their values
+ */
+type ObservableObjectValues<T extends Record<string, Observable<unknown>>> = {
+  [K in keyof T]: ObservableValue<T[K]>;
+};
+
 /**
  * Interface for deepstate nodes that have a synchronous get() method.
  * This is used internally to detect deepstate nodes vs plain observables.
@@ -20,6 +35,15 @@ function hasGet<T>(obj: unknown): obj is NodeWithGet<T> {
   return obj !== null && typeof obj === "object" && "get" in obj && typeof (obj as NodeWithGet<T>).get === "function";
 }
 
+function isObservable(obj: unknown): obj is Observable<unknown> {
+  return (
+    obj !== null &&
+    typeof obj === "object" &&
+    "subscribe" in obj &&
+    typeof (obj as Record<string, unknown>).subscribe === "function"
+  );
+}
+
 /**
  * Hook to subscribe to any Observable and get its current value.
  * Re-renders the component whenever the observable emits a new value.
@@ -67,125 +91,81 @@ export function useObservable<T>(
 }
 
 /**
- * Hook to get the current value of a deepstate node.
- * Re-renders the component whenever the node's value changes.
+ * Hook to get values from one or more deepstate nodes, optionally with a selector function.
+ * Re-renders the component whenever the selected value changes.
  *
  * This is the primary hook for using deepstate in React.
- * Works with any deepstate node: RxLeaf, RxObject, RxArray, or RxNullable.
- *
  * Uses React 18's useSyncExternalStore for concurrent-mode safety.
  *
- * @param node - A deepstate node (any reactive property from your state)
- * @returns The current value of the node (deeply readonly)
- *
- * @example
+ * @example Single node (get raw value)
  * ```tsx
  * import { state } from 'deepstate';
- * import { useStateValue } from 'deepstate-react';
+ * import { useSelect } from 'deepstate-react';
  *
  * const store = state({
  *   user: { name: 'Alice', age: 30 },
- *   items: [{ id: 1, name: 'Item 1' }],
  *   count: 0
  * });
  *
  * // Subscribe to a primitive
  * function Counter() {
- *   const count = useStateValue(store.count);
+ *   const count = useSelect(store.count);
  *   return <span>{count}</span>;
  * }
  *
  * // Subscribe to an object
  * function UserCard() {
- *   const user = useStateValue(store.user);
+ *   const user = useSelect(store.user);
  *   return <div>{user.name}, {user.age}</div>;
  * }
  *
  * // Subscribe to a nested property (fine-grained!)
  * function UserName() {
- *   const name = useStateValue(store.user.name);
+ *   const name = useSelect(store.user.name);
  *   return <span>{name}</span>;
  * }
- *
- * // Subscribe to an array
- * function ItemList() {
- *   const items = useStateValue(store.items);
- *   return <ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
- * }
  * ```
- */
-export function useStateValue<T extends Observable<unknown>>(
-  node: T
-): ObservableValue<T> {
-  // Ref to hold the current value - updated by subscription
-  const valueRef = useRef<ObservableValue<T>>(
-    hasGet<ObservableValue<T>>(node) ? node.get() : (undefined as ObservableValue<T>)
-  );
-
-  // Subscribe callback for useSyncExternalStore
-  const subscribe = useCallback(
-    (onStoreChange: () => void) => {
-      const subscription = node.subscribe((newValue) => {
-        valueRef.current = newValue as ObservableValue<T>;
-        onStoreChange();
-      });
-
-      return () => subscription.unsubscribe();
-    },
-    [node]
-  );
-
-  // Get snapshot - just returns the ref value
-  const getSnapshot = useCallback(() => valueRef.current, []);
-
-  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-}
-
-/**
- * Hook to derive a value from a deepstate node with a selector function.
- * Only re-renders when the derived value changes (using reference equality by default).
- *
- * Use this when you need to compute/transform a value from state.
- * The selector runs on every emission but only triggers re-render if result changes.
- *
- * Uses React 18's useSyncExternalStore for concurrent-mode safety.
- *
- * @param node - A deepstate node to select from
- * @param selector - Function to derive a value from the node's value
- * @param equalityFn - Optional custom equality function (default: Object.is)
- * @returns The derived value
  *
- * @example
+ * @example Single node with selector (derive a value)
  * ```tsx
- * import { state } from 'deepstate';
- * import { useSelector } from 'deepstate-react';
- *
- * const store = state({
- *   user: { firstName: 'Alice', lastName: 'Smith', age: 30 },
- *   items: [{ id: 1, price: 10 }, { id: 2, price: 20 }]
- * });
- *
- * // Derive a computed value
+ * // Derive a computed value from a single node
  * function FullName() {
- *   const fullName = useSelector(
+ *   const fullName = useSelect(
  *     store.user,
  *     user => `${user.firstName} ${user.lastName}`
  *   );
  *   return <span>{fullName}</span>;
  * }
+ * ```
  *
- * // Derive from an array
- * function TotalPrice() {
- *   const total = useSelector(
- *     store.items,
- *     items => items.reduce((sum, item) => sum + item.price, 0)
+ * @example Multiple nodes (array form)
+ * ```tsx
+ * // Combine multiple nodes - receives values as tuple
+ * function Progress() {
+ *   const percentage = useSelect(
+ *     [store.completed, store.total],
+ *     ([completed, total]) => total > 0 ? (completed / total) * 100 : 0
  *   );
- *   return <span>Total: ${total}</span>;
+ *   return <span>{percentage}%</span>;
  * }
+ * ```
  *
- * // With custom equality (e.g., for arrays)
+ * @example Multiple nodes (object form)
+ * ```tsx
+ * // Combine multiple nodes - receives values as object
+ * function Progress() {
+ *   const percentage = useSelect(
+ *     { completed: store.completed, total: store.total },
+ *     ({ completed, total }) => total > 0 ? (completed / total) * 100 : 0
+ *   );
+ *   return <span>{percentage}%</span>;
+ * }
+ * ```
+ *
+ * @example With custom equality
+ * ```tsx
  * function ItemIds() {
- *   const ids = useSelector(
+ *   const ids = useSelect(
  *     store.items,
  *     items => items.map(i => i.id),
  *     (a, b) => a.length === b.length && a.every((v, i) => v === b[i])
@@ -194,43 +174,170 @@ export function useStateValue<T extends Observable<unknown>>(
  * }
  * ```
  */
-export function useSelector<T extends Observable<unknown>, R>(
+// Single node, no selector - return raw value
+export function useSelect<T extends Observable<unknown>>(
+  node: T
+): ObservableValue<T>;
+// Single node with selector
+export function useSelect<T extends Observable<unknown>, R>(
   node: T,
   selector: (value: ObservableValue<T>) => R,
-  equalityFn: (a: R, b: R) => boolean = Object.is
-): R {
-  // Create derived observable that applies selector and dedupes
-  const derived$ = useMemo(
-    () =>
-      node.pipe(
-        map((value) => selector(value as ObservableValue<T>)),
-        distinctUntilChanged(equalityFn)
-      ),
-    [node, selector, equalityFn]
-  );
+  equalityFn?: (a: R, b: R) => boolean
+): R;
+// Array of 2 nodes with selector
+export function useSelect<
+  T1 extends Observable<unknown>,
+  T2 extends Observable<unknown>,
+  R
+>(
+  nodes: [T1, T2],
+  selector: (values: [ObservableValue<T1>, ObservableValue<T2>]) => R,
+  equalityFn?: (a: R, b: R) => boolean
+): R;
+// Array of 3 nodes with selector
+export function useSelect<
+  T1 extends Observable<unknown>,
+  T2 extends Observable<unknown>,
+  T3 extends Observable<unknown>,
+  R
+>(
+  nodes: [T1, T2, T3],
+  selector: (values: [ObservableValue<T1>, ObservableValue<T2>, ObservableValue<T3>]) => R,
+  equalityFn?: (a: R, b: R) => boolean
+): R;
+// Array of 4 nodes with selector
+export function useSelect<
+  T1 extends Observable<unknown>,
+  T2 extends Observable<unknown>,
+  T3 extends Observable<unknown>,
+  T4 extends Observable<unknown>,
+  R
+>(
+  nodes: [T1, T2, T3, T4],
+  selector: (values: [ObservableValue<T1>, ObservableValue<T2>, ObservableValue<T3>, ObservableValue<T4>]) => R,
+  equalityFn?: (a: R, b: R) => boolean
+): R;
+// Array of 5 nodes with selector
+export function useSelect<
+  T1 extends Observable<unknown>,
+  T2 extends Observable<unknown>,
+  T3 extends Observable<unknown>,
+  T4 extends Observable<unknown>,
+  T5 extends Observable<unknown>,
+  R
+>(
+  nodes: [T1, T2, T3, T4, T5],
+  selector: (values: [ObservableValue<T1>, ObservableValue<T2>, ObservableValue<T3>, ObservableValue<T4>, ObservableValue<T5>]) => R,
+  equalityFn?: (a: R, b: R) => boolean
+): R;
+// Object of nodes with selector
+export function useSelect<T extends Record<string, Observable<unknown>>, R>(
+  nodes: T,
+  selector: (values: ObservableObjectValues<T>) => R,
+  equalityFn?: (a: R, b: R) => boolean
+): R;
+// Implementation
+export function useSelect(
+  nodeOrNodes: Observable<unknown> | Observable<unknown>[] | Record<string, Observable<unknown>>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  selector?: (value: any) => any,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  equalityFn: (a: any, b: any) => boolean = Object.is
+): unknown {
+  // Determine the form and create the combined observable
+  const { combined$, getInitialValue } = useMemo(() => {
+    // Array form: [node1, node2, ...] - always requires selector
+    if (Array.isArray(nodeOrNodes)) {
+      const nodes = nodeOrNodes as Observable<unknown>[];
+      const sel = selector!; // selector is required for array form
+      return {
+        combined$: combineLatest(nodes).pipe(
+          map((values) => sel(values)),
+          distinctUntilChanged(equalityFn)
+        ),
+        getInitialValue: (): unknown => {
+          const values = nodes.map((n) => (hasGet<unknown>(n) ? n.get() : undefined));
+          return sel(values);
+        },
+      };
+    }
+
+    // Object form: { a: node1, b: node2, ... } - always requires selector
+    if (!isObservable(nodeOrNodes)) {
+      const obj = nodeOrNodes as Record<string, Observable<unknown>>;
+      const keys = Object.keys(obj);
+      const observables = keys.map((k) => obj[k]);
+      const sel = selector!; // selector is required for object form
 
-  // Get initial derived value
-  const getInitialValue = (): R => {
-    if (hasGet<ObservableValue<T>>(node)) {
-      return selector(node.get());
+      return {
+        combined$: combineLatest(observables).pipe(
+          map((values) => {
+            const result: Record<string, unknown> = {};
+            keys.forEach((key, i) => {
+              result[key] = values[i];
+            });
+            return sel(result);
+          }),
+          distinctUntilChanged(equalityFn)
+        ),
+        getInitialValue: (): unknown => {
+          const result: Record<string, unknown> = {};
+          keys.forEach((key) => {
+            const node = obj[key];
+            result[key] = hasGet<unknown>(node) ? node.get() : undefined;
+          });
+          return sel(result);
+        },
+      };
     }
-    return undefined as R;
-  };
+
+    // Single node form - selector is optional
+    const node = nodeOrNodes as Observable<unknown>;
+    
+    if (selector) {
+      // With selector - apply transformation
+      return {
+        combined$: node.pipe(
+          map((value) => selector(value)),
+          distinctUntilChanged(equalityFn)
+        ),
+        getInitialValue: (): unknown => {
+          if (hasGet<unknown>(node)) {
+            return selector(node.get());
+          }
+          return undefined;
+        },
+      };
+    } else {
+      // No selector - return raw value
+      return {
+        combined$: node.pipe(
+          distinctUntilChanged(equalityFn)
+        ),
+        getInitialValue: (): unknown => {
+          if (hasGet<unknown>(node)) {
+            return node.get();
+          }
+          return undefined;
+        },
+      };
+    }
+  }, [nodeOrNodes, selector, equalityFn]);
 
   // Ref to hold the current derived value
-  const valueRef = useRef<R>(getInitialValue());
+  const valueRef = useRef<unknown>(getInitialValue());
 
   // Subscribe callback for useSyncExternalStore
   const subscribe = useCallback(
     (onStoreChange: () => void) => {
-      const subscription = derived$.subscribe((newValue) => {
+      const subscription = combined$.subscribe((newValue) => {
         valueRef.current = newValue;
         onStoreChange();
       });
 
       return () => subscription.unsubscribe();
     },
-    [derived$]
+    [combined$]
   );
 
   // Get snapshot - just returns the ref value
@@ -238,3 +345,13 @@ export function useSelector<T extends Observable<unknown>, R>(
 
   return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
+
+/**
+ * @deprecated Use `useSelect` instead. This is an alias for backwards compatibility.
+ */
+export const useStateValue = useSelect;
+
+/**
+ * @deprecated Use `useSelect` instead. This is an alias for backwards compatibility.
+ */
+export const useSelector = useSelect;

package/src/index.ts

@@ -6,26 +6,39 @@
  * @example
  * ```tsx
  * import { state } from 'deepstate';
- * import { useStateValue, useSelector } from 'deepstate-react';
+ * import { useSelect } from 'deepstate-react';
  *
  * const store = state({ user: { name: 'Alice', age: 30 }, count: 0 });
  *
+ * // Get raw value
  * function UserName() {
- *   const name = useStateValue(store.user.name);
+ *   const name = useSelect(store.user.name);
  *   return <span>{name}</span>;
  * }
  *
+ * // With selector
  * function UserSummary() {
- *   const summary = useSelector(store.user, user => `${user.name} (${user.age})`);
+ *   const summary = useSelect(store.user, user => `${user.name} (${user.age})`);
  *   return <span>{summary}</span>;
  * }
+ *
+ * // Combine multiple nodes
+ * function Progress() {
+ *   const pct = useSelect(
+ *     [store.completed, store.total],
+ *     ([completed, total]) => total > 0 ? (completed / total) * 100 : 0
+ *   );
+ *   return <span>{pct}%</span>;
+ * }
  * ```
  */
 
 export {
+  useSelect,
+  useObservable,
+  // Deprecated aliases for backwards compatibility
   useStateValue,
   useSelector,
-  useObservable,
 } from "./hooks";
 
 export type { Observable } from "rxjs";