juststore 0.4.3 → 1.0.0

package/dist/atom.d.ts

@@ -11,16 +11,13 @@ type Atom<T> = {
     /** Subscribe to the value. */
     use: () => T;
     /** Set the value. */
-    set: (value: T) => void;
+    set: AtomSetState<T>;
     /** Reset the value to the default value. */
     reset: () => void;
     /** Subscribe to the value.with a callback function. */
     subscribe: (listener: (value: T) => void) => () => void;
-    /** Render the value. */
-    Render: ({ children }: {
-        children: (value: T, setValue: (value: T) => void) => React.ReactNode;
-    }) => React.ReactNode;
 };
+type AtomSetState<T> = (value: T | ((prev: T) => T)) => void;
 /**
  * Creates an atom with a given id and default value.
  *
@@ -33,11 +30,11 @@ type Atom<T> = {
  *   <>
  *    <ComponentA/>
  *     <ComponentB/>
- *      <stateA.Render>
+ *      <Render state={stateA}>
  *        {(value, setValue) => (
  *          <button onClick={() => setValue(!value)}>{value ? 'Hide' : 'Show'}</button>
  *        )}
- *      </stateA.Render>
+ *      </Render>
  *    <ComponentC/>
  *    <ComponentD/>
  *   </>

package/dist/atom.js

@@ -13,11 +13,11 @@ export { createAtom };
  *   <>
  *    <ComponentA/>
  *     <ComponentB/>
- *      <stateA.Render>
+ *      <Render state={stateA}>
  *        {(value, setValue) => (
  *          <button onClick={() => setValue(!value)}>{value ? 'Hide' : 'Show'}</button>
  *        )}
- *      </stateA.Render>
+ *      </Render>
  *    <ComponentC/>
  *    <ComponentD/>
  *   </>
@@ -53,9 +53,6 @@ function createAtom(id, defaultValue, persistent = false) {
             if (prop === 'subscribe') {
                 return (target._subscribe ??= (listener) => subscribeAtom(key, memoryOnly, listener));
             }
-            if (prop === 'Render') {
-                return (target._Render ??= ({ children }) => children(useAtom(key, memoryOnly), (value) => setAtom(key, value, memoryOnly)));
-            }
             return undefined;
         }
     });
@@ -92,7 +89,12 @@ function getAtom(key, memoryOnly = true) {
  * @param memoryOnly - When true, skips localStorage persistence
  */
 function setAtom(key, value, memoryOnly = true) {
-    updateSnapshot(key, value, memoryOnly);
+    if (typeof value !== 'function') {
+        updateSnapshot(key, value, memoryOnly);
+    }
+    else {
+        updateSnapshot(key, value(getAtom(key, memoryOnly)), memoryOnly);
+    }
     notifyAtom(key);
 }
 const listeners = new Map();

package/dist/form.d.ts

@@ -1,5 +1,5 @@
 import type { FieldPath, FieldPathValue, FieldValues, IsEqual } from './path';
-import type { ArrayProxy, DerivedStateProps, IsNullable, MaybeNullable, ObjectMutationMethods, Prettify, ValueState } from './types';
+import type { ArrayProxy, DerivedStateProps, ObjectMutationMethods, Prettify, ValueState } from './types';
 export { createForm, useForm, type CreateFormOptions, type DeepNonNullable, type FormArrayState, type FormObjectState, type FormState, type FormStore, type FormValueState };
 /**
  * Common form field methods available on every form state node.
@@ -12,8 +12,8 @@ type FormCommon = {
     /** Manually set a validation error. */
     setError: (error: string | undefined) => void;
 };
-type FormState<T> = IsEqual<T, unknown> extends true ? never : [NonNullable<T>] extends [readonly (infer U)[]] ? FormArrayState<U, IsNullable<T>> : [NonNullable<T>] extends [FieldValues] ? FormObjectState<NonNullable<T>, IsNullable<T>> : FormValueState<T>;
-type FormReadOnlyState<T> = Prettify<Pick<FormValueState<Readonly<Required<T>>>, 'value' | 'use' | 'useCompute' | 'Render' | 'Show' | 'error' | 'setError'>>;
+type FormState<T> = IsEqual<T, unknown> extends true ? never : [NonNullable<T>] extends [readonly (infer U)[]] ? FormArrayState<U, T> : [NonNullable<T>] extends [FieldValues] ? FormObjectState<NonNullable<T>, T> : FormValueState<T>;
+type FormReadOnlyState<T> = Prettify<Pick<FormValueState<Readonly<Required<T>>>, 'value' | 'use' | 'useCompute' | 'error' | 'setError'>>;
 interface FormValueState<T> extends Omit<ValueState<T>, 'ensureArray' | 'ensureObject' | 'withDefault' | 'derived'>, FormCommon {
     /** Ensure the value is an array. */
     ensureArray(): NonNullable<T> extends (infer U)[] ? FormArrayState<U> : never;
@@ -44,8 +44,8 @@ type FormObjectProxy<T extends FieldValues> = {
 } & {
     [K in keyof T]-?: FormState<T[K]>;
 };
-type FormArrayState<T, Nullable extends boolean = false> = IsEqual<T, unknown> extends true ? never : FormValueState<MaybeNullable<T[], Nullable>> & ArrayProxy<T, FormState<T>>;
-type FormObjectState<T extends FieldValues, Nullable extends boolean = false> = FormObjectProxy<T> & FormValueState<MaybeNullable<T, Nullable>> & ObjectMutationMethods;
+type FormArrayState<TValue, TArray = TValue[]> = IsEqual<TValue, unknown> extends true ? never : FormValueState<TArray> & ArrayProxy<TValue, FormState<TValue>>;
+type FormObjectState<TNonNullable extends FieldValues, TObject = TNonNullable> = FormObjectProxy<TNonNullable> & FormValueState<TObject> & ObjectMutationMethods;
 /** Type for nested objects with proxy methods */
 type DeepNonNullable<T> = [NonNullable<T>] extends [readonly (infer U)[]] ? U[] : [NonNullable<T>] extends [FieldValues] ? {
     [K in keyof NonNullable<T>]-?: DeepNonNullable<NonNullable<T>[K]>;
@@ -57,7 +57,7 @@ type FormStore<T extends FieldValues> = FormState<T> & {
     /** Clears all validation errors from the form. */
     clearErrors(): void;
     /** Returns a form submit handler that validates and calls onSubmit with form values. */
-    handleSubmit(onSubmit: (values: T) => void): (e: React.FormEvent) => void;
+    handleSubmit(onSubmit: (values: T) => void): (e: React.SyntheticEvent) => void;
 };
 type NoEmptyValidator = 'not-empty';
 type RegexValidator = RegExp;

package/dist/form.js

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/** biome-ignore-all lint/suspicious/noExplicitAny: intended */
 'use client';
 import { pascalCase } from 'change-case';
 import { useEffect, useId, useMemo } from 'react';

package/dist/impl.js

@@ -84,7 +84,7 @@ function getNamespace(key) {
 function joinPath(namespace, path) {
     if (!path)
         return namespace;
-    return namespace + '.' + path;
+    return `${namespace}.${path}`;
 }
 function joinChildKey(parent, child) {
     return parent ? `${parent}.${child}` : child;
@@ -93,16 +93,16 @@ function getKeyPrefixes(key) {
     const dot = key.indexOf('.');
     if (dot === -1)
         return [];
-    const parts = key.split('.');
-    if (parts.length <= 1)
+    const [first, ...parts] = key.split('.');
+    if (parts.length === 0)
         return [];
     const prefixes = [];
-    let current = parts[0];
-    for (let i = 1; i < parts.length - 1; i++) {
-        current += '.' + parts[i];
+    let current = first;
+    for (let i = 0; i < parts.length - 1; i++) {
+        current += `.${parts[i]}`;
         prefixes.push(current);
     }
-    prefixes.unshift(parts[0]);
+    prefixes.unshift(first);
     return prefixes;
 }
 /** Snapshot getter used by React's useSyncExternalStore. */
@@ -260,7 +260,7 @@ function setNestedValue(obj, path, value) {
     }
     else if (typeof current === 'object' && current !== null) {
         const currentObj = current;
-        const hadKey = Object.prototype.hasOwnProperty.call(currentObj, lastSegment);
+        const hadKey = Object.hasOwn(currentObj, lastSegment);
         if (value === undefined) {
             delete currentObj[lastSegment];
             if (hadKey) {
@@ -316,21 +316,29 @@ function notifyListeners(key, oldValue, newValue, { skipRoot = false, skipChildr
         // exact match only
         const listenerSet = listeners.get(key);
         if (listenerSet) {
-            listenerSet.forEach(listener => listener());
+            listenerSet.forEach(listener => {
+                listener();
+            });
         }
         return;
     }
     // Exact key match
     const exactSet = listeners.get(key);
     if (exactSet) {
-        exactSet.forEach(listener => listener());
+        exactSet.forEach(listener => {
+            listener();
+        });
     }
     // Ancestor keys match (including namespace root)
     if (!skipRoot) {
         const namespace = getNamespace(key);
-        const rootSet = listeners.get(namespace);
-        if (rootSet) {
-            rootSet.forEach(listener => listener());
+        if (namespace !== key) {
+            const rootSet = listeners.get(namespace);
+            if (rootSet) {
+                rootSet.forEach(listener => {
+                    listener();
+                });
+            }
         }
         // Also notify intermediate ancestors
         const prefixes = getKeyPrefixes(key);
@@ -339,7 +347,9 @@ function notifyListeners(key, oldValue, newValue, { skipRoot = false, skipChildr
                 continue; // Already handled
             const prefixSet = listeners.get(prefix);
             if (prefixSet) {
-                prefixSet.forEach(listener => listener());
+                prefixSet.forEach(listener => {
+                    listener();
+                });
             }
         }
     }
@@ -369,7 +379,9 @@ function notifyListeners(key, oldValue, newValue, { skipRoot = false, skipChildr
                 if (forceNotify || !isEqual(oldChildValue, newChildValue)) {
                     const childSet = listeners.get(childKey);
                     if (childSet) {
-                        childSet.forEach(listener => listener());
+                        childSet.forEach(listener => {
+                            listener();
+                        });
                     }
                 }
             }
@@ -395,13 +407,13 @@ function subscribe(key, listener) {
     if (!listeners.has(key)) {
         listeners.set(key, new Set());
     }
-    listeners.get(key).add(listener);
+    listeners.get(key)?.add(listener);
     const prefixes = getKeyPrefixes(key);
     for (const prefix of prefixes) {
         if (!descendantListenerKeysByPrefix.has(prefix)) {
             descendantListenerKeysByPrefix.set(prefix, new Set());
         }
-        descendantListenerKeysByPrefix.get(prefix).add(key);
+        descendantListenerKeysByPrefix.get(prefix)?.add(key);
     }
     return () => {
         const keyListeners = listeners.get(key);
@@ -471,12 +483,12 @@ function rename(path, oldKey, newKey, memoryOnly) {
     const obj = current;
     if (oldKey === newKey)
         return;
-    if (!Object.prototype.hasOwnProperty.call(obj, oldKey))
+    if (!Object.hasOwn(obj, oldKey))
         return;
     const keyOrder = getStableKeys(obj);
     const entries = [];
     for (const key of keyOrder) {
-        if (!Object.prototype.hasOwnProperty.call(obj, key))
+        if (!Object.hasOwn(obj, key))
             continue;
         if (key === oldKey) {
             entries.push([newKey, obj[oldKey]]);

package/dist/index.d.ts

@@ -1,9 +1,10 @@
-export { createAtom, type Atom } from './atom';
+export { type Atom, createAtom } from './atom';
 export type * from './form';
 export { useForm } from './form';
 export { isEqual } from './impl';
-export { createMemoryStore, useMemoryStore, type MemoryStore } from './memory';
+export { createMemoryStore, type MemoryStore, useMemoryStore } from './memory';
 export { createMixedState } from './mixed_state';
 export type * from './path';
 export { createStore, type Store } from './store';
 export type * from './types';
+export * from './utils';

package/dist/index.js

@@ -4,3 +4,4 @@ export { isEqual } from './impl';
 export { createMemoryStore, useMemoryStore } from './memory';
 export { createMixedState } from './mixed_state';
 export { createStore } from './store';
+export * from './utils';

package/dist/mixed_state.d.ts

@@ -11,9 +11,9 @@ export { createMixedState };
  * @example
  * const mixedState = createMixedState(states.addLoading, states.copyLoading, state.agent)
  *
- * <mixedState.Render>
+ * <Render state={mixedState}>
  *   {[addLoading, copyLoading, agent] => <SomeComponent />}
- * </mixedState.Render>
+ * </Render>
  */
 declare function createMixedState<T extends readonly unknown[]>(...states: {
     [K in keyof T]-?: ValueState<T[K]>;

package/dist/mixed_state.js

@@ -12,9 +12,9 @@ export { createMixedState };
  * @example
  * const mixedState = createMixedState(states.addLoading, states.copyLoading, state.agent)
  *
- * <mixedState.Render>
+ * <Render state={mixedState}>
  *   {[addLoading, copyLoading, agent] => <SomeComponent />}
- * </mixedState.Render>
+ * </Render>
  */
 function createMixedState(...states) {
     const use = () => states.map(state => state.use());
@@ -33,18 +33,12 @@ function createMixedState(...states) {
             useEffect(() => {
                 const unsubscribeFns = states.map(state => state.subscribe(recompute));
                 return () => {
-                    unsubscribeFns.forEach(unsubscribe => unsubscribe());
+                    unsubscribeFns.forEach(unsubscribe => {
+                        unsubscribe();
+                    });
                 };
             });
             return value;
-        },
-        Render({ children }) {
-            const value = use();
-            return children(value);
-        },
-        Show({ children, on }) {
-            const value = use();
-            return on(value) ? children : null;
         }
     };
     return mixedState;

package/dist/node.js

@@ -1,4 +1,5 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/** biome-ignore-all lint/suspicious/noExplicitAny: <T is not known at this point> */
+/** biome-ignore-all lint/suspicious/noAssignInExpressions: <getter methods are cached> */
 import { getStableKeys } from './impl';
 export { createNode, createRootNode };
 /**
@@ -65,15 +66,6 @@ function createNode(storeApi, path, cache, extensions, from = unchanged, to = un
             if (prop === 'subscribe') {
                 return (_target._subscribe ??= (listener) => storeApi.subscribe(path, value => listener(to(value))));
             }
-            if (prop === 'Render') {
-                return (_target._Render ??= ({ children }) => storeApi.Render({
-                    path,
-                    children: (value, update) => children(from(value), value => update(to(value)))
-                }));
-            }
-            if (prop === 'Show') {
-                return (_target._Show ??= ({ children, on }) => storeApi.Show({ path, children, on: value => on(from(value)) }));
-            }
             if (prop === 'useCompute') {
                 return (_target._useCompute ??= (fn) => {
                     return storeApi.useCompute(path, value => fn(from(value)));
@@ -350,7 +342,6 @@ function createKeysNode(storeApi, path, getObjectValue) {
                 return (_target._Render ??= ({ children }) => children(storeApi.useCompute(signalPath, computeKeys), () => { }));
             }
             if (prop === 'Show') {
-                // eslint-disable-next-line react/display-name
                 return (_target._Show ??= ({ children, on }) => {
                     const show = storeApi.useCompute(signalPath, () => on(computeKeys()), [on]);
                     return show ? children : null;

package/dist/path.d.ts

@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/suspicious/noExplicitAny: <Intended> */
 export type Primitive = null | undefined | string | number | boolean | symbol | bigint;
 export type BrowserNativeObject = Date | FileList | File;
 /**

package/dist/root.js

@@ -15,6 +15,7 @@ export { createStoreRoot };
  * @returns A proxy object providing both path-based and dynamic property access to the store
  */
 function createStoreRoot(namespace, defaultValue, options = {}) {
+    'use memo';
     const memoryOnly = options?.memoryOnly ?? false;
     // merge with default value and save in memory only
     produce(namespace, { ...defaultValue, ...(getSnapshot(namespace, memoryOnly) ?? {}) }, true, true);
@@ -45,16 +46,21 @@ function createStoreRoot(namespace, defaultValue, options = {}) {
             const fnRef = useRef(fn);
             fnRef.current = fn;
             const cacheRef = useRef(null);
+            const depsRef = useRef(deps);
+            // Invalidate cached compute when hook inputs change.
+            if (!isEqual(depsRef.current, deps)) {
+                depsRef.current = deps;
+                cacheRef.current = null;
+            }
+            const pathRef = useRef(fullPath);
+            if (pathRef.current !== fullPath) {
+                pathRef.current = fullPath;
+                cacheRef.current = null;
+            }
             const subscribeToPath = useCallback((onStoreChange) => subscribe(fullPath, onStoreChange), [fullPath]);
             const getComputedSnapshot = useCallback(() => {
-                if (cacheRef.current && cacheRef.current.path !== fullPath) {
-                    cacheRef.current = null;
-                }
-                if (cacheRef.current && !isEqual(cacheRef.current.deps, deps)) {
-                    cacheRef.current = null;
-                }
                 const storeValue = getSnapshot(fullPath, memoryOnly);
-                if (cacheRef.current && isEqual(cacheRef.current.storeValue, storeValue)) {
+                if (cacheRef.current && Object.is(cacheRef.current.storeValue, storeValue)) {
                     // same store value, return the same computed value
                     return cacheRef.current.computed;
                 }
@@ -66,9 +72,9 @@ function createStoreRoot(namespace, defaultValue, options = {}) {
                     cacheRef.current.storeValue = storeValue;
                     return cacheRef.current.computed;
                 }
-                cacheRef.current = { path: fullPath, storeValue, computed: computedNext, deps };
+                cacheRef.current = { storeValue, computed: computedNext };
                 return computedNext;
-            }, [fullPath, deps]);
+            }, [fullPath]);
             return useSyncExternalStore(subscribeToPath, getComputedSnapshot, getComputedSnapshot);
         },
         notify: (path) => {
@@ -80,39 +86,13 @@ function createStoreRoot(namespace, defaultValue, options = {}) {
             });
         },
         useState: (path) => {
-            const fullPath = joinPath(namespace, path);
             const setValue = useCallback((value) => {
-                if (typeof value === 'function') {
-                    const currentValue = getSnapshot(fullPath, memoryOnly);
-                    const newValue = value(currentValue);
-                    return setLeaf(namespace, path, newValue, false, memoryOnly);
-                }
-                return setLeaf(namespace, path, value, false, memoryOnly);
-            }, [fullPath, path]);
+                storeApi.set(path, value, false);
+            }, [path]);
             return [
                 useObject(namespace, path, memoryOnly),
                 setValue
             ];
-        },
-        Render: ({ path, children }) => {
-            const fullPath = joinPath(namespace, path);
-            const value = useObject(namespace, path, memoryOnly);
-            const update = useCallback((value) => {
-                if (typeof value === 'function') {
-                    const currentValue = getSnapshot(fullPath, memoryOnly);
-                    const newValue = value(currentValue);
-                    return setLeaf(namespace, path, newValue, false, memoryOnly);
-                }
-                return setLeaf(namespace, path, value, false, memoryOnly);
-            }, [fullPath, path]);
-            return children(value, update);
-        },
-        Show: ({ path, children, on }) => {
-            const value = useObject(namespace, path, memoryOnly);
-            if (!on(value)) {
-                return null;
-            }
-            return children;
         }
     };
     return storeApi;

package/dist/stable_keys.js

@@ -13,7 +13,7 @@ function getStableKeys(value) {
     const target = value;
     const existing = externalKeyOrder.get(target);
     if (existing) {
-        const next = existing.filter(k => Object.prototype.hasOwnProperty.call(target, k));
+        const next = existing.filter(k => Object.hasOwn(target, k));
         const nextSet = new Set(next);
         for (const k of Object.keys(target)) {
             if (nextSet.has(k))

package/dist/types.d.ts

@@ -1,12 +1,12 @@
 import type { FieldPath, FieldPathValue, FieldValues, IsEqual } from './path';
-export type { AllowedKeys, ArrayProxy, ArrayState, DerivedStateProps, IsNullable, MaybeNullable, ObjectMutationMethods, ObjectState, Prettify, ReadOnlyState, State, StoreRenderProps, StoreRoot, StoreSetStateValue, StoreShowProps, StoreUseComputeFn, StoreUseState, ValueState };
+export type { AllowedKeys, ArrayProxy, ArrayState, DerivedStateProps, ObjectMutationMethods, ObjectState, Prettify, ReadOnlyState, State, StoreRoot, StoreSetStateValue, StoreUseComputeFn, StoreUseState, ValueState };
 type Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
 type AllowedKeys<T> = Exclude<keyof T, keyof ValueState<unknown> | keyof ObjectMutationMethods>;
 type ArrayMutationMethods<T> = Prettify<Pick<Array<T>, 'push' | 'pop' | 'shift' | 'unshift' | 'splice' | 'reverse' | 'sort' | 'fill' | 'copyWithin'>>;
 /** Type for array proxy with index access */
-type ArrayProxy<T, ElementState = State<T>> = ArrayMutationMethods<T> & {
+type ArrayProxy<T, ElementState = State<T>> = ArrayMutationMethods<NonNullable<T>> & {
     /** Read without subscribing. Returns array or undefined for missing paths. */
     readonly value: T[];
     /**
@@ -69,10 +69,6 @@ type StoreRoot<T extends FieldValues> = {
     useCompute: <P extends FieldPath<T>, R>(path: P, fn: StoreUseComputeFn<T, P, R>, deps?: readonly unknown[]) => R;
     /** Notify listeners at path. */
     notify: <P extends FieldPath<T>>(path: P) => void;
-    /** Render-prop helper for inline usage. */
-    Render: <P extends FieldPath<T>>(props: FieldPathValue<T, P> extends undefined ? never : StoreRenderProps<T, P>) => React.ReactNode;
-    /** Show or hide children based on the value at the path. */
-    Show: <P extends FieldPath<T>>(props: FieldPathValue<T, P> extends undefined ? never : StoreShowProps<T, P>) => React.ReactNode;
 };
 /** Common methods available on any deep proxy node */
 type ValueState<T> = {
@@ -80,6 +76,8 @@ type ValueState<T> = {
     readonly value: T;
     /** The field name for the proxy. */
     readonly field: string;
+    /** The path for the proxy. */
+    readonly path: string;
     /** Subscribe and read the value at path. Re-renders when the value changes. */
     use(): T;
     /** Subscribe and read the debounced value at path. Re-renders when the value changes. */
@@ -126,50 +124,16 @@ type ValueState<T> = {
     derived: <R>({ from, to }: DerivedStateProps<T, R>) => State<R>;
     /** Notify listener of current value. */
     notify(): void;
-    /** Render-prop helper for inline usage.
-     *
-     * @example
-     * <store.a.b.c.Render>
-     *   {(value, update) => <button onClick={() => update('new value')}>{value}</button>}
-     * </store.a.b.c.Render>
-     */
-    Render: (props: {
-        children: (value: T, update: (value: T) => void) => React.ReactNode;
-    }) => React.ReactNode;
-    /** Show or hide children based on the value at the path.
-     *
-     * @example
-     * <store.a.b.c.Show on={value => value === 'show'}>
-     *   <div>Show</div>
-     * </store.a.b.c.Show>
-     */
-    Show: (props: {
-        children: React.ReactNode;
-        on: (value: T) => boolean;
-    }) => React.ReactNode;
 };
 /**
  * A read-only state that provides access to the value, use, Render, and Show methods.
  */
-type ReadOnlyState<T> = Prettify<Pick<ValueState<Readonly<Required<T>>>, 'value' | 'use' | 'useCompute' | 'Render' | 'Show'>>;
-type MaybeNullable<T, Nullable extends boolean = false> = Nullable extends true ? T | undefined : T;
-type IsNullable<T> = T extends undefined | null ? true : false;
-type State<T> = IsEqual<T, unknown> extends true ? never : [NonNullable<T>] extends [readonly (infer U)[]] ? ArrayState<U, IsNullable<T>> : [NonNullable<T>] extends [FieldValues] ? ObjectState<NonNullable<T>, IsNullable<T>> : ValueState<T>;
-type ArrayState<T, Nullable extends boolean = false> = IsEqual<T, unknown> extends true ? never : ValueState<MaybeNullable<T[], Nullable>> & ArrayProxy<T>;
-type ObjectState<T extends FieldValues, Nullable extends boolean = false> = ObjectProxy<T> & ValueState<MaybeNullable<T, Nullable>> & ObjectMutationMethods;
+type ReadOnlyState<T> = Prettify<Pick<ValueState<Readonly<Required<T>>>, 'value' | 'use' | 'useCompute'>>;
+type State<T> = IsEqual<T, unknown> extends true ? never : [NonNullable<T>] extends [readonly (infer U)[]] ? ArrayState<U, T> : [NonNullable<T>] extends [FieldValues] ? ObjectState<NonNullable<T>, T> : ValueState<T>;
+type ArrayState<TValue, TArray = TValue[]> = IsEqual<TValue, unknown> extends true ? never : ValueState<TArray> & ArrayProxy<TValue>;
+type ObjectState<TNonNullable extends FieldValues, TObject = TNonNullable> = ObjectProxy<TNonNullable> & ValueState<TObject> & ObjectMutationMethods;
 /** Type for useCompute function. */
 type StoreUseComputeFn<T extends FieldValues, P extends FieldPath<T>, R> = (value: FieldPathValue<T, P>) => R;
-/** Props for Store.Render helper. */
-type StoreRenderProps<T extends FieldValues, P extends FieldPath<T>> = {
-    path: P;
-    children: (value: FieldPathValue<T, P>, update: (value: StoreSetStateValue<FieldPathValue<T, P>>) => void) => React.ReactNode;
-};
-/** Props for Store.Show helper. */
-type StoreShowProps<T extends FieldValues, P extends FieldPath<T>> = {
-    path: P;
-    children: React.ReactNode;
-    on: (value: FieldPathValue<T, P>) => boolean;
-};
 type DerivedStateProps<T, R> = {
     from?: (value: T) => R;
     to?: (value: R) => T;

package/dist/utils.d.ts

@@ -0,0 +1,51 @@
+import type { Atom } from './atom';
+import type { StoreSetStateValue, ValueState } from './types';
+export { Render, RenderWithUpdate, Conditional };
+type AtomLike<T> = Pick<Atom<T> | ValueState<T>, 'use' | 'set' | 'value'>;
+type ReadOnlyAtomLike<T> = Pick<Atom<T> | ValueState<T>, 'use' | 'value'>;
+type RenderProps<State extends ReadOnlyAtomLike<unknown>> = {
+    state: State;
+    children: (value: ReturnType<State['use']>) => React.ReactNode;
+};
+type RenderWithUpdateProps<State extends AtomLike<unknown>> = {
+    state: State;
+    children: (value: ReturnType<State['use']>, update: (value: StoreSetStateValue<ReturnType<State['use']>>) => void) => React.ReactNode;
+};
+/**
+ * Renders the provided children function with the current value from the state.
+ *
+ * @template T The type of the state value.
+ * @param props - The props object.
+ * @param props.state - The ValueState whose value will be passed to children.
+ * @param props.children - A render prop that receives the current value.
+ * @returns The result of calling children with the current value.
+ */
+declare function Render<State extends ReadOnlyAtomLike<unknown>>({ state, children }: RenderProps<State>): import("react").ReactNode;
+/**
+ * Renders the provided children function with the current value and an update function.
+ *
+ * The update function can set the value directly or with an updater function.
+ *
+ * @template T The type of the state value.
+ * @template U The type allowed for updating the state (value or updater).
+ * @param props - The props object.
+ * @param props.state - The ValueState whose value will be passed to children.
+ * @param props.children - A render prop that receives the current value and update function.
+ * @returns The result of calling children with the current value and update function.
+ */
+declare function RenderWithUpdate<State extends AtomLike<unknown>>({ state, children }: RenderWithUpdateProps<State>): import("react").ReactNode;
+/**
+ * Conditionally renders the children function based on the result of the `on` predicate.
+ *
+ * @template T The type of the state value.
+ * @param props - The props object.
+ * @param props.state - The ValueState whose value will be used.
+ * @param props.on - A predicate that receives the value and returns whether to show children.
+ * @param props.children - A render prop that receives the current value for rendering if visible.
+ * @returns The result of children if the predicate returns true, otherwise null.
+ */
+declare function Conditional<State extends ReadOnlyAtomLike<unknown>>({ state, on, children }: {
+    state: State;
+    on: (value: ReturnType<State['use']>) => boolean;
+    children: (value: ReturnType<State['use']>) => React.ReactNode;
+}): import("react").ReactNode;

package/dist/utils.js

@@ -0,0 +1,57 @@
+import { useCallback } from 'react';
+export { Render, RenderWithUpdate, Conditional };
+/**
+ * Renders the provided children function with the current value from the state.
+ *
+ * @template T The type of the state value.
+ * @param props - The props object.
+ * @param props.state - The ValueState whose value will be passed to children.
+ * @param props.children - A render prop that receives the current value.
+ * @returns The result of calling children with the current value.
+ */
+function Render({ state, children }) {
+    const value = state.use();
+    return children(value);
+}
+/**
+ * Renders the provided children function with the current value and an update function.
+ *
+ * The update function can set the value directly or with an updater function.
+ *
+ * @template T The type of the state value.
+ * @template U The type allowed for updating the state (value or updater).
+ * @param props - The props object.
+ * @param props.state - The ValueState whose value will be passed to children.
+ * @param props.children - A render prop that receives the current value and update function.
+ * @returns The result of calling children with the current value and update function.
+ */
+function RenderWithUpdate({ state, children }) {
+    const value = state.use();
+    const update = useCallback((value) => {
+        if (typeof value !== 'function') {
+            state.set(value);
+        }
+        else {
+            state.set(value(state.value));
+        }
+    }, [state]);
+    return children(value, update);
+}
+/**
+ * Conditionally renders the children function based on the result of the `on` predicate.
+ *
+ * @template T The type of the state value.
+ * @param props - The props object.
+ * @param props.state - The ValueState whose value will be used.
+ * @param props.on - A predicate that receives the value and returns whether to show children.
+ * @param props.children - A render prop that receives the current value for rendering if visible.
+ * @returns The result of children if the predicate returns true, otherwise null.
+ */
+function Conditional({ state, on, children }) {
+    const value = state.use();
+    const show = on(value); // on should not be expensive, memorizing just adds overhead
+    if (!show) {
+        return null;
+    }
+    return children(value);
+}