@yakocloud/state-vocab 3.1.5 → 4.0.0

package/README.md

@@ -1,6 +1,6 @@
 # @yakocloud/state-vocab
 
-A lightweight React state management library that synchronizes component state with any `Storage`-compatible backend (localStorage, sessionStorage, custom).
+A lightweight React state management library that synchronizes component state with any `Storage`-compatible backend (localStorage, sessionStorage, custom). Supports React Server Components and Next.js SSR out of the box.
 
 ## Why use state-vocab?
 
@@ -82,6 +82,8 @@ function DeepChild() {
 }
 ```
 
+**React Server Components support.** Read state in async server components and seed it into client components — no extra API routes or serialization boilerplate.
+
 **Dot-notation access with full TypeScript inference.** The state tree is navigated like a plain object — autocomplete guides you to the right node, and types flow from `defineState<T>` all the way to the hook return value without any manual annotations.
 
 ```ts
@@ -103,7 +105,7 @@ defineState({
 })
 ```
 
-**Minimal API surface.** Three exports: `defineState`, `setupStorage`, `VocabStateProvider`. No actions, reducers, selectors, or stores to configure.
+**Minimal API surface.** `defineState` and `setupStorage` define the state tree; `clientify` from `@yakocloud/state-vocab/client` wires up React hooks. No actions, reducers, selectors, or stores to configure.
 
 ## Installation
 
@@ -115,17 +117,19 @@ npm install @yakocloud/state-vocab react react-dom
 
 ## Quick Start
 
-Wrap your app with `VocabStateProvider` at the root — this initializes an isolated store for the component tree. Then define and use state anywhere inside it.
+Wrap your app with `StateVocabProvider` at the root — this initializes an isolated store for the component tree. Then define and use state anywhere inside it.
+
 Library SSR-requirements:
 - `Per-request store`: A Next.js server can handle multiple requests simultaneously. This means that the store should be created per request and should not be shared across requests.
 - `SSR friendly`: Next.js applications are rendered twice, first on the server and again on the client. Having different outputs on both the client and the server will result in "hydration errors." The store will have to be initialized on the server and then re-initialized on the client with the same data in order to avoid that.
 
 ```tsx
-import { setupStorage, defineState, VocabStateProvider } from '@yakocloud/state-vocab'
+import { setupStorage, defineState } from '@yakocloud/state-vocab'
+import { clientify, StateVocabProvider } from '@yakocloud/state-vocab/client'
 
 type Theme = 'Dark' | 'White' | 'System'
 
-const storage = setupStorage({
+const storage = clientify(setupStorage({
   path: {
     to: {
       theme: defineState<Theme>({
@@ -134,13 +138,13 @@ const storage = setupStorage({
       }),
     },
   },
-})
+}))
 
 function App() {
   return (
-    <VocabStateProvider>
+    <StateVocabProvider>
       <Settings />
-    </VocabStateProvider>
+    </StateVocabProvider>
   )
 }
 
@@ -159,19 +163,18 @@ function Settings() {
 
 ## Setup
 
-### `VocabStateProvider`
+### `StateVocabProvider`
 
-All components that call `.useState()` must be descendants of `VocabStateProvider`. It creates an isolated `VocabStore` instance for its subtree — multiple providers can coexist in the same app without sharing state.
+All components that call `.useState()` must be descendants of `StateVocabProvider`. It creates an isolated `VocabStore` instance for its subtree — multiple providers can coexist in the same app without sharing state.
 
 ```tsx
-import { VocabStateProvider } from '@yakocloud/state-vocab'
+import { StateVocabProvider } from '@yakocloud/state-vocab/client'
 
-// Wrap your app root
 createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <VocabStateProvider>
+    <StateVocabProvider>
       <App />
-    </VocabStateProvider>
+    </StateVocabProvider>
   </React.StrictMode>
 )
 ```
@@ -180,13 +183,13 @@ You can mount multiple independent providers — each gets its own store:
 
 ```tsx
 // Two isolated state trees — state does not bleed between them
-<VocabStateProvider>
+<StateVocabProvider>
   <WidgetA />
-</VocabStateProvider>
+</StateVocabProvider>
 
-<VocabStateProvider>
+<StateVocabProvider>
   <WidgetB />
-</VocabStateProvider>
+</StateVocabProvider>
 ```
 
 ## Core Concepts
@@ -273,7 +276,7 @@ const storage = setupStorage({
 
 TypeScript will only accept paths that exist in your tree — `"user"`, `"user.profile"`, `"cart.items"`, etc. Invalid paths are caught at compile time.
 
-### SSR / Next.js
+### SSR / Next.js (client components)
 
 When using localStorage or sessionStorage in a Next.js app, the server renders with `defaultValue` while the client reads the persisted value — causing a hydration mismatch. Pass `ssr: true` to fix this:
 
@@ -292,7 +295,150 @@ With `ssr: true`:
 
 This guarantees the server and client produce identical markup, and the value from storage is applied without a visible flash.
 
-Wrap your page or app root with `VocabStateProvider` as usual — it works correctly in both SSR and client environments.
+### React Server Components (RSC)
+
+For Next.js apps using the App Router, state-vocab provides dedicated server and client entry points that let you read state in async server components and pass it down to client components via `StateVocabProvider`.
+
+**Package entry points:**
+
+| Import path | Use in |
+|---|---|
+| `@yakocloud/state-vocab` | Shared files — `defineState`, `setupStorage` |
+| `@yakocloud/state-vocab/server` | Server Components — `serverify`, `StateVocabProvider` |
+| `@yakocloud/state-vocab/client` | Client Components — `clientify` |
+
+**1. Define the shared storage schema** (used on both server and client):
+
+```ts
+// storage.ts
+import { setupStorage, defineState } from '@yakocloud/state-vocab'
+
+export const storage = setupStorage({
+  user: {
+    name: defineState<string>(),
+    role: defineState<string>(),
+  },
+  person: {
+    address: {
+      city: defineState<string>(),
+    },
+  },
+}, { ssr: true })
+```
+
+**2. Create server and client storage handles:**
+
+```ts
+// storage.server.ts
+import { storage } from '@/storage'
+import { serverify } from '@yakocloud/state-vocab/server'
+
+export const serverStorage = serverify(storage)
+```
+
+```ts
+// storage.client.ts  ("use client")
+"use client"
+
+import { storage } from '@/storage'
+import { clientify } from '@yakocloud/state-vocab/client'
+
+export const clientStorage = clientify(storage)
+```
+
+**3. Seed initial state in the server component and read it in Server and Client children:**
+
+```tsx
+// app/page.tsx (Server Component)
+import { serverStorage } from '@/storage.server'
+import { StateVocabProvider } from '@yakocloud/state-vocab/server'
+
+export default async function Page() {
+  // Fetch data from DB / API
+  const user = await db.getUser()
+
+  return (
+    <StateVocabProvider
+      value={serverStorage({
+        user: { name: user.name, role: user.role },
+        person: { address: { city: user.city } },
+      })}
+    >
+      <UserInfo />
+    </StateVocabProvider>
+  )
+}
+```
+
+```tsx
+// app/user-info.server.tsx (Server Component)
+import { serverStorage } from '@/storage.server'
+
+export default async function UserInfo() {
+  const name = serverStorage.user.name.getState()
+  const role = serverStorage.user.role.getState()
+
+  return <p>{name} — {role}</p>
+}
+```
+
+```tsx
+// app/user-info.tsx ("use client")
+"use client"
+
+import { clientStorage } from '@/storage.client'
+
+export default function UserInfoClient() {
+  const [name] = clientStorage.user.name.useState()
+  const [role] = clientStorage.user.role.useState()
+
+  return <p>{name} — {role}</p>
+}
+```
+
+#### `serverify(storage)`
+
+Converts a storage tree into its server-side counterpart. Each leaf gains a `.getState()` method that reads the value seeded into the nearest `StateVocabProvider`. All namespace nodes become callable functions that build the `value` shape expected by `StateVocabProvider`.
+
+**Namespace callable syntax:**
+
+```ts
+// Full tree at once — root call is identity (returns input as-is)
+serverStorage({ user: { name: 'Alice', role: 'Admin' } })
+// → { user: { name: 'Alice', role: 'Admin' } }
+
+// Single namespace — wraps input under its key
+serverStorage.user({ name: 'Alice', role: 'Admin' })
+// → { user: { name: 'Alice', role: 'Admin' } }
+
+// Nested namespace — wraps up to the root
+serverStorage.person.address({ city: 'NY' })
+// → { person: { address: { city: 'NY' } } }
+```
+
+All three forms return a value ready to pass as `StateVocabProvider`'s `value` prop. They can be combined by spreading:
+
+```tsx
+<StateVocabProvider
+  value={{
+    ...serverStorage.user({ name: 'Alice', role: 'Admin' }),
+    ...serverStorage.person.address({ city: 'NY' }),
+  }}
+>
+```
+
+**`node.getState()`** reads the value for that leaf from the surrounding `StateVocabProvider`. Throws if called outside one.
+
+#### `clientify(storage)`
+
+Converts a storage tree into its client-side counterpart. Each leaf gains `.useState()` and `.useInitialState()` hooks. The tree structure is identical to the original — same dot-notation access.
+
+```ts
+const clientStorage = clientify(storage)
+
+// In a client component:
+const [name] = clientStorage.user.name.useState()
+```
 
 ## `useState` Hook
 
@@ -374,11 +520,12 @@ const storage = setupStorage({
 ```tsx
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { setupStorage, defineState, VocabStateProvider } from '@yakocloud/state-vocab'
+import { setupStorage, defineState } from '@yakocloud/state-vocab'
+import { clientify, StateVocabProvider } from '@yakocloud/state-vocab/client'
 
 type Theme = 'Dark' | 'White' | 'System'
 
-const storage = setupStorage({
+const storage = clientify(setupStorage({
   preference: {
     theme: defineState<Theme>({ storage: localStorage, defaultValue: 'Dark' }),
     nightMode: defineState({ storage: sessionStorage, defaultValue: false }),
@@ -400,7 +547,7 @@ const storage = setupStorage({
       storage: localStorage,
     }),
   },
-})
+}))
 
 // Root — initializes shared state for the whole subtree
 function Page() {
@@ -460,9 +607,9 @@ function Dashboard() {
 
 createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <VocabStateProvider>
+    <StateVocabProvider>
       <Page />
-    </VocabStateProvider>
+    </StateVocabProvider>
   </React.StrictMode>
 )
 ```
@@ -489,14 +636,52 @@ createRoot(document.getElementById('root')!).render(
 
 Returns a proxied copy of `tree` with paths injected into all leaf nodes.
 
-### `VocabStateProvider`
+### `StateVocabProvider`
 
 A React context provider that initializes a `VocabStore` for its subtree. Required — all components calling `.useState()` must be descendants of this provider.
 
 ```tsx
-<VocabStateProvider>
+<StateVocabProvider>
   <App />
-</VocabStateProvider>
+</StateVocabProvider>
+```
+
+Accepts an optional `value` prop (imported from `@yakocloud/state-vocab/server` in RSC contexts) to pre-seed the store with server-fetched data:
+
+```tsx
+<StateVocabProvider value={serverStorage({ user: { name: 'Alice' } })}>
+  <App />
+</StateVocabProvider>
+```
+
+### `serverify<T>(storage: T)`
+
+Converts a storage tree to its server-side counterpart. Available from `@yakocloud/state-vocab/server`.
+
+Each leaf gains `.getState()` — reads the value from the nearest `StateVocabProvider`. Each namespace node becomes callable, returning the input wrapped under its full ancestor path (ready for `StateVocabProvider`'s `value` prop).
+
+```ts
+import { serverify } from '@yakocloud/state-vocab/server'
+const serverStorage = serverify(storage)
+
+serverStorage.user.name.getState()           // reads "user.name" from context
+serverStorage.user({ name: 'Alice' })        // → { user: { name: 'Alice' } }
+serverStorage.person.address({ city: 'NY' }) // → { person: { address: { city: 'NY' } } }
+serverStorage({ user: { name: 'Alice' } })   // → { user: { name: 'Alice' } } (identity)
+```
+
+### `clientify<T>(storage: T)`
+
+Converts a storage tree to its client-side counterpart. Available from `@yakocloud/state-vocab/client`.
+
+Each leaf gains `.useState()` and `.useInitialState()`. The tree structure mirrors the original.
+
+```ts
+import { clientify } from '@yakocloud/state-vocab/client'
+const clientStorage = clientify(storage)
+
+// In a "use client" component:
+const [name] = clientStorage.user.name.useState()
 ```
 
 ### `node.useState(options?)`
@@ -527,4 +712,4 @@ function Page() {
 
   return <Dashboard />
 }
-```
+```

package/dist/client.cjs.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),t=require("./utils-33NqsZoR.js"),z=require("./provider.client--OPImdtY.js");function D(s,e,o=[]){return c.useMemo(()=>t.debounce(s,e),o)}const O=typeof window>"u",w=O?c.useEffect:c.useLayoutEffect;function _(s){s??={};const e=O?void 0:t.valueOrFactory(s.storage),o=t.valueOrFactory(s.defaultValue),l=s.bidirectional,n=this[t.STATE_PATH],y=this[t.STATE_VERBOSE],V=this[t.STATE_VERBOSE_PATH],T=this[t.STATE_SSR],r=z.useStateVocabClientContext({verbose:y});if(!(r instanceof z.VocabStore))throw new Error("Make sure your component is wrapped in StateVocabProvider");const d=s.serialize??JSON.stringify,E=s.deserialize??JSON.parse,a=(i,f,m)=>{const v=f.getItem(i);v===null?t.isValueDefined(m)&&f.setItem(i,d(m)):r.set(i,E(v))},u=D(s.onSet??(()=>{}),s.delayedSet,[]),S=c.useRef(void 0),g=c.useRef(!1);if(!g.current){g.current=!0;let i=r.get(n);t.isValueDefined(i)||(i=o,t.isValueDefined(i)&&r.set(n,i)),!T&&e&&a(n,e,i)}const b=c.useSyncExternalStore(r.subscribe.bind(r),r.getClientSnapshot.bind(r),r.getServerSnapshot.bind(r));if(y)if(V){const i=t.get(b,V);i&&t.logStyled(i)}else t.logStyled(b);const h=t.get(b,n,o);S.current=h,w(()=>{!T||!e||a(n,e,h)},[]);const R=c.useEffectEvent(i=>{if(i.key!==n)return;const f=i.newValue,v=(f===null?null:E(f))??o;t.isValueDefined(v)&&(r.set(n,v),u(v,S.current))});c.useEffect(()=>{if(l)return window.addEventListener("storage",R),()=>window.removeEventListener("storage",R)},[l]);const I=c.useCallback(i=>{const f=t.isTransformer(i)?i(S.current):i;r.set(n,f),u(f,S.current),e&&e.setItem(n,d(f))},[r,n,u,e,d]),C=c.useCallback(()=>{const i=o;if(!t.isValueDefined(i)){e?.removeItem(n);return}r.set(n,i),u(i,S.current),e&&e.setItem(n,d(i))},[o,r,n,u,e,d]);return[h,I,C]}function p(s){s??={};const e=O?void 0:t.valueOrFactory(s.storage),o=t.valueOrFactory(s.defaultValue),l=this[t.STATE_PATH],n=this[t.STATE_VERBOSE],y=this[t.STATE_SSR],V=z.useStateVocabClientContext({verbose:n}),T=s.serialize??JSON.stringify,r=s.deserialize??JSON.parse,d=(u,S,g)=>{const b=S.getItem(u);b===null?t.isValueDefined(g)&&S.setItem(u,T(g)):V.set(u,r(b))},E=c.useRef(!1);let a;E.current||(E.current=!0,a=V.get(l),t.isValueDefined(a)||(a=o,t.isValueDefined(a)&&V.set(l,a)),!y&&e&&d(l,e,a)),w(()=>{!y||!e||d(l,e,a)},[])}function P(s){return typeof s=="object"&&s!==null&&"clientSlot"in s}function A(s){const e={};for(const o in s){const l=s[o];P(l)?(e[o]=l.clientSlot({useState(...n){return _.apply(this,n)},useInitialState(...n){p.apply(this,n)}}),delete e[o].serverSlot,delete e[o].clientSlot):l!==null&&typeof l=="object"?e[o]=A(l):e[o]=l}return e}exports.StateVocabProvider=z.StateVocabClientProvider;exports.clientify=A;

package/dist/client.es.js

@@ -0,0 +1,107 @@
+"use client";
+import { useMemo as j, useRef as T, useSyncExternalStore as x, useEffectEvent as B, useEffect as A, useCallback as I, useLayoutEffect as D } from "react";
+import { d as H, v as E, S as C, a as _, b as k, i as d, c as M, g as O, l as R, e as F } from "./utils-t8tYdd6B.mjs";
+import { u as J, V as q } from "./provider.client-CtAC9tPr.mjs";
+import { S as te } from "./provider.client-CtAC9tPr.mjs";
+function G(s, e, n = []) {
+  return j(
+    () => H(s, e),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    n
+  );
+}
+const p = typeof window > "u", L = p ? A : D;
+function K(s) {
+  s ??= {};
+  const e = p ? void 0 : E(s.storage), n = E(s.defaultValue), o = s.bidirectional, r = this[C], m = this[_], S = this[M], g = this[k], i = J({ verbose: m });
+  if (!(i instanceof q))
+    throw new Error("Make sure your component is wrapped in StateVocabProvider");
+  const u = s.serialize ?? JSON.stringify, y = s.deserialize ?? JSON.parse, a = (t, l, h) => {
+    const v = l.getItem(t);
+    v === null ? d(h) && l.setItem(t, u(h)) : i.set(t, y(v));
+  }, c = G(
+    s.onSet ?? (() => {
+    }),
+    s.delayedSet,
+    []
+  ), f = T(void 0), V = T(!1);
+  if (!V.current) {
+    V.current = !0;
+    let t = i.get(r);
+    d(t) || (t = n, d(t) && i.set(r, t)), !g && e && a(r, e, t);
+  }
+  const b = x(
+    i.subscribe.bind(i),
+    i.getClientSnapshot.bind(i),
+    i.getServerSnapshot.bind(i)
+  );
+  if (m)
+    if (S) {
+      const t = O(b, S);
+      t && R(t);
+    } else
+      R(b);
+  const z = O(b, r, n);
+  f.current = z, L(() => {
+    !g || !e || a(r, e, z);
+  }, []);
+  const w = B((t) => {
+    if (t.key !== r)
+      return;
+    const l = t.newValue, v = (l === null ? null : y(l)) ?? n;
+    d(v) && (i.set(r, v), c(v, f.current));
+  });
+  A(() => {
+    if (o)
+      return window.addEventListener("storage", w), () => window.removeEventListener("storage", w);
+  }, [o]);
+  const N = I((t) => {
+    const l = F(t) ? t(f.current) : t;
+    i.set(r, l), c(l, f.current), e && e.setItem(r, u(l));
+  }, [i, r, c, e, u]), P = I(() => {
+    const t = n;
+    if (!d(t)) {
+      e?.removeItem(r);
+      return;
+    }
+    i.set(r, t), c(t, f.current), e && e.setItem(r, u(t));
+  }, [n, i, r, c, e, u]);
+  return [
+    z,
+    N,
+    P
+  ];
+}
+function Q(s) {
+  s ??= {};
+  const e = p ? void 0 : E(s.storage), n = E(s.defaultValue), o = this[C], r = this[_], m = this[k], S = J({ verbose: r }), g = s.serialize ?? JSON.stringify, i = s.deserialize ?? JSON.parse, u = (c, f, V) => {
+    const b = f.getItem(c);
+    b === null ? d(V) && f.setItem(c, g(V)) : S.set(c, i(b));
+  }, y = T(!1);
+  let a;
+  y.current || (y.current = !0, a = S.get(o), d(a) || (a = n, d(a) && S.set(o, a)), !m && e && u(o, e, a)), L(() => {
+    !m || !e || u(o, e, a);
+  }, []);
+}
+function U(s) {
+  return typeof s == "object" && s !== null && "clientSlot" in s;
+}
+function W(s) {
+  const e = {};
+  for (const n in s) {
+    const o = s[n];
+    U(o) ? (e[n] = o.clientSlot({
+      useState(...r) {
+        return K.apply(this, r);
+      },
+      useInitialState(...r) {
+        Q.apply(this, r);
+      }
+    }), delete e[n].serverSlot, delete e[n].clientSlot) : o !== null && typeof o == "object" ? e[n] = W(o) : e[n] = o;
+  }
+  return e;
+}
+export {
+  te as StateVocabProvider,
+  W as clientify
+};

package/dist/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./utils-33NqsZoR.js");function V(t={}){return{[a.STATE_DEFINITION]:!0,[a.STATE_PATH]:"",[a.STATE_VERBOSE]:!1,[a.STATE_VERBOSE_PATH]:"",[a.STATE_SSR]:!1,serverSlot(r){return Object.assign(this,{getState(...e){return r.getState.apply(this,e)}})},clientSlot(r){return Object.assign(this,{useState(e){return e??={},r.useState.apply(this,[{defaultValue:a.valueOrFactory(e.defaultValue)??a.valueOrFactory(t.defaultValue),bidirectional:e.bidirectional??t.bidirectional,storage:e.storage??t.storage,serialize:t.serialize??JSON.stringify,deserialize:t.deserialize??JSON.parse,delayedSet:e.delayedSet,onSet(...u){e.onSet&&e.onSet(...u)}}])},useInitialState(e){r.useInitialState.apply(this,[{defaultValue:e.defaultValue,storage:t.storage,serialize:t.serialize,deserialize:t.deserialize}])}})},toString(){return this[a.STATE_PATH]}}}function h(t,r){const{path:e="",verbose:u,verbosePath:y,ssr:A,cache:S}=r;let s=S.proxy.get(t);s||(s=new Map,S.proxy.set(t,s));const d=s.get(e);if(d)return d;const o=new Proxy(t,{get(b,T){const l=b[T],c=e?`${e}.${String(T)}`:String(T);if(l&&typeof l=="object"&&a.STATE_DEFINITION in l){const i=l;let n=S.leaf.get(i);n||(n=new Map,S.leaf.set(i,n));const g=n.get(c);if(g)return g;const P=Reflect.ownKeys(i).filter(f=>typeof i[f]=="function"),_=Object.fromEntries(P.map(f=>[f,(...v)=>i[f].call({...i,[a.STATE_PATH]:c,[a.STATE_VERBOSE]:u,[a.STATE_VERBOSE_PATH]:y,[a.STATE_SSR]:A},...v)])),E={...i,..._};return n.set(c,E),E}return l&&typeof l=="object"?h(l,{...r,path:c}):l}});return s.set(e,o),o}function z(t,r){return h(t,{...r,ssr:r?.ssr??!0,verbosePath:r?.verbosePath??"",cache:{proxy:new WeakMap,leaf:new WeakMap}})}exports.defineState=V;exports.setupStorage=z;

package/dist/index.es.js

@@ -0,0 +1,119 @@
+import { S as d, v as b, b as T, c as E, a as P, f as v } from "./utils-t8tYdd6B.mjs";
+function m(t = {}) {
+  return {
+    [v]: !0,
+    // marks this object as a leaf in the router tree
+    [d]: "",
+    // placeholder; injected at runtime by injectPaths()
+    [P]: !1,
+    // placeholder
+    [E]: "",
+    // placeholder
+    [T]: !1,
+    // placeholder
+    serverSlot(a) {
+      return Object.assign(this, {
+        // Impl|RSC
+        getState(...e) {
+          return a.getState.apply(this, e);
+        }
+      });
+    },
+    clientSlot(a) {
+      return Object.assign(this, {
+        // Impl|RCC
+        useState(e) {
+          return e ??= {}, a.useState.apply(this, [{
+            defaultValue: b(e.defaultValue) ?? b(t.defaultValue),
+            bidirectional: e.bidirectional ?? t.bidirectional,
+            storage: e.storage ?? t.storage,
+            serialize: t.serialize ?? JSON.stringify,
+            deserialize: t.deserialize ?? JSON.parse,
+            delayedSet: e.delayedSet,
+            onSet(...S) {
+              e.onSet && e.onSet(...S);
+            }
+          }]);
+        },
+        // Impl|RCC
+        useInitialState(e) {
+          a.useInitialState.apply(this, [{
+            defaultValue: e.defaultValue,
+            storage: t.storage,
+            serialize: t.serialize,
+            deserialize: t.deserialize
+          }]);
+        }
+      });
+    },
+    /** Returns the fully qualified state name (dot-separated path). */
+    toString() {
+      return this[d];
+    }
+  };
+}
+function z(t, a) {
+  const {
+    path: e = "",
+    verbose: S,
+    verbosePath: x,
+    ssr: A,
+    cache: n
+  } = a;
+  let s = n.proxy.get(t);
+  s || (s = /* @__PURE__ */ new Map(), n.proxy.set(t, s));
+  const h = s.get(e);
+  if (h)
+    return h;
+  const o = new Proxy(t, {
+    get(V, u) {
+      const r = V[u], c = e ? `${e}.${String(u)}` : String(u);
+      if (r && typeof r == "object" && v in r) {
+        const l = r;
+        let i = n.leaf.get(l);
+        i || (i = /* @__PURE__ */ new Map(), n.leaf.set(l, i));
+        const g = i.get(c);
+        if (g)
+          return g;
+        const j = Reflect.ownKeys(l).filter(
+          (f) => typeof l[f] == "function"
+        ), w = Object.fromEntries(
+          j.map((f) => [
+            f,
+            (..._) => l[f].call(
+              {
+                ...l,
+                [d]: c,
+                [P]: S,
+                [E]: x,
+                [T]: A
+              },
+              ..._
+            )
+          ])
+        ), y = { ...l, ...w };
+        return i.set(c, y), y;
+      }
+      return r && typeof r == "object" ? z(r, {
+        ...a,
+        path: c
+      }) : r;
+    }
+  });
+  return s.set(e, o), o;
+}
+function M(t, a) {
+  return z(t, {
+    ...a,
+    ssr: a?.ssr ?? !0,
+    verbosePath: a?.verbosePath ?? "",
+    cache: {
+      proxy: /* @__PURE__ */ new WeakMap(),
+      leaf: /* @__PURE__ */ new WeakMap()
+    }
+  });
+}
+export {
+  m as defineState,
+  M as setupStorage
+};

package/dist/provider.client--OPImdtY.js

@@ -0,0 +1 @@
+"use client";"use strict";const h=require("react/jsx-runtime"),r=require("react"),s=require("./utils-33NqsZoR.js"),c=r.createContext({});function S(o={}){const t=r.useContext(c);return o.verbose&&console.log(`[Store uid]: ${t.uid}`),t}class u{#t;#e;constructor(t){this.uid=Math.random().toString(36).slice(2),this.#t=t??{},this.#e=new Set}subscribe(t){return this.#e.add(t),()=>this.#e.delete(t)}getClientSnapshot(){return this.#t}getServerSnapshot(){return this.#t}get(t){return s.get(this.#t,t)}set(t,e){const n=s.get(this.#t,t),a=s.isTransformer(e)?e(n):e,i={...this.#t};s.set(i,t,a),this.#t=i,this.#e.forEach(l=>l())}}function b(o){const{children:t,value:e}=o,[n]=r.useState(()=>new u(e));return h.jsx(c.Provider,{value:n,children:t})}exports.StateVocabClientProvider=b;exports.VocabStore=u;exports.useStateVocabClientContext=S;

package/dist/provider.client-CtAC9tPr.mjs

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as u } from "react/jsx-runtime";
+import { createContext as h, useContext as l, useState as S } from "react";
+import { g as n, e as d, s as b } from "./utils-t8tYdd6B.mjs";
+const i = h({});
+function V(s = {}) {
+  const t = l(i);
+  return s.verbose && console.log(`[Store uid]: ${t.uid}`), t;
+}
+class f {
+  #t;
+  #e;
+  constructor(t) {
+    this.uid = Math.random().toString(36).slice(2), this.#t = t ?? {}, this.#e = /* @__PURE__ */ new Set();
+  }
+  subscribe(t) {
+    return this.#e.add(t), () => this.#e.delete(t);
+  }
+  getClientSnapshot() {
+    return this.#t;
+  }
+  getServerSnapshot() {
+    return this.#t;
+  }
+  get(t) {
+    return n(this.#t, t);
+  }
+  set(t, e) {
+    const o = n(this.#t, t), c = d(e) ? e(o) : e, r = { ...this.#t };
+    b(r, t, c), this.#t = r, this.#e.forEach((a) => a());
+  }
+}
+function g(s) {
+  const { children: t, value: e } = s, [o] = S(() => new f(e));
+  return /* @__PURE__ */ u(i.Provider, { value: o, children: t });
+}
+export {
+  g as S,
+  f as V,
+  V as u
+};

package/dist/server.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),v=require("react"),b=require("node:async_hooks"),y=require("./provider.client--OPImdtY.js"),u=require("./utils-33NqsZoR.js");function g(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const P=g(b),l=e=>{if(v.useState)throw new Error(`${e} only intended for Server Components`)};let i=null;try{l("StateVocabServerContext"),i=new P.AsyncLocalStorage}catch{i=null}const h=({value:e})=>(i?.enterWith({value:e}),null),j=({children:e})=>e,x=async e=>{l("StateVocabServerContext.Provider");const{value:t,children:r}=e;return c.jsxs(c.Fragment,{children:[c.jsx(h,{value:t}),r]})},V=()=>(l("getStateVocab"),i?.getStore()?.value),m={Provider:i?x:j},p=({value:e,children:t})=>c.jsx(m.Provider,{value:e,children:t});function w(e){const{children:t,value:r={}}=e;return c.jsx(p,{value:r,children:c.jsx(y.StateVocabClientProvider,{value:r,children:t})})}function O(){const e=this[u.STATE_PATH],t=V();if(!t)throw new Error("Make sure your component is wrapped in StateVocabProvider");return u.get(t,e)}function f(e,t){return new Proxy(e,{get(r,n,o){return n in t?Reflect.get(t,n,o):Reflect.get(r,n,o)},has(r,n){return n in t||n in r}})}function k(e){return typeof e=="object"&&e!==null&&"serverSlot"in e}function S(e,t){const r={};for(const n in e){const o=e[n];if(k(o))r[n]=o.serverSlot({getState(...s){return O.apply(this,s)}}),delete r[n].serverSlot,delete r[n].clientSlot;else if(o!==null&&typeof o=="object"){const s=a=>t({[n]:a}),d=S(o,s);r[n]=f(a=>s(a),d)}else r[n]=o}return f(n=>t(n),r)}function C(e){return S(e,t=>t)}exports.StateVocabProvider=w;exports.serverify=C;