@yakocloud/state-vocab 4.0.1 → 4.0.3

package/README.md

@@ -117,7 +117,7 @@ npm install @yakocloud/state-vocab react react-dom
 
 ## Quick Start
 
-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.
+Define your storage tree once (`setupStorage`/`defineState`), call `clientify` to attach React hooks. If you use react server components (RSC) wrap your app with `StateVocabProvider` at the root and call `serverify` to attach RSC-methods. Use state anywhere in the tree
 
 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.
@@ -125,11 +125,11 @@ Library SSR-requirements:
 
 ```tsx
 import { setupStorage, defineState } from '@yakocloud/state-vocab'
-import { clientify, StateVocabProvider } from '@yakocloud/state-vocab/client'
+import { clientify } from '@yakocloud/state-vocab/client'
 
 type Theme = 'Dark' | 'White' | 'System'
 
-const storage = clientify(setupStorage({
+const storage = setupStorage({
   path: {
     to: {
       theme: defineState<Theme>({
@@ -138,18 +138,14 @@ const storage = clientify(setupStorage({
       }),
     },
   },
-}))
+}, {
+  ssr: false // by default true
+})
 
-function App() {
-  return (
-    <StateVocabProvider>
-      <Settings />
-    </StateVocabProvider>
-  )
-}
+const clientStorage = clientify(storage)
 
 function Settings() {
-  const [theme, setTheme] = storage.path.to.theme.useState()
+  const [theme, setTheme] = clientStorage.path.to.theme.useState()
 
   return (
     <select value={theme} onChange={(e) => setTheme(e.target.value as Theme)}>
@@ -161,37 +157,6 @@ function Settings() {
 }
 ```
 
-## Setup
-
-### `StateVocabProvider`
-
-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 { StateVocabProvider } from '@yakocloud/state-vocab/client'
-
-createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <StateVocabProvider>
-      <App />
-    </StateVocabProvider>
-  </React.StrictMode>
-)
-```
-
-You can mount multiple independent providers — each gets its own store:
-
-```tsx
-// Two isolated state trees — state does not bleed between them
-<StateVocabProvider>
-  <WidgetA />
-</StateVocabProvider>
-
-<StateVocabProvider>
-  <WidgetB />
-</StateVocabProvider>
-```
-
 ## Core Concepts
 
 ### `defineState(options?)`
@@ -237,7 +202,7 @@ Wraps a nested object of `defineState()` nodes and injects dot-separated paths i
 |---|---|---|---|
 | `verbose` | `boolean \| undefined` | Log current state to the browser console on every change | `false` |
 | `verbosePath` | `string \| undefined` | Narrow verbose logging to a specific subtree (dot-separated path). When set, only that subtree is logged instead of the entire state. TypeScript will autocomplete valid paths based on your tree. | `undefined` |
-| `ssr` | `boolean \| undefined` | Defer storage reads until after hydration (Next.js / SSR) | `false` |
+| `ssr` | `boolean \| undefined` | Defer storage reads until after hydration (Next.js / SSR) | `true` |
 
 ```ts
 const storage = setupStorage({
@@ -286,15 +251,90 @@ const storage = setupStorage({
   preference: {
     theme: defineState<Theme>({ storage: localStorage, defaultValue: 'Dark' }),
   },
-}, { ssr: true })
+})
 ```
 
-With `ssr: true`:
+By default `ssr: true`:
 - **Server & first client render** — always use `defaultValue`, storage is not read
 - **After hydration** — `useLayoutEffect` fires synchronously before paint, reads storage and updates state
 
 This guarantees the server and client produce identical markup, and the value from storage is applied without a visible flash.
 
+### Next.js Pages Router (SSR without RSC)
+
+If you use Next.js with the **Pages Router** (or any SSR setup without React Server Components), you still need `ssr: true` to prevent hydration mismatches — but you don't have server components to wrap with `StateVocabProvider` from `serverify`.
+
+In this case, wrap your app with `StateVocabClientProvider` from `@yakocloud/state-vocab/client`. It creates an isolated `VocabStore` per render, preventing state from leaking between concurrent SSR requests.
+
+```tsx
+// pages/_app.tsx
+import type { AppProps } from 'next/app'
+import { StateVocabClientProvider } from '@yakocloud/state-vocab/client'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <StateVocabClientProvider>
+      <Component {...pageProps} />
+    </StateVocabClientProvider>
+  )
+}
+```
+
+Storage is still configured with `ssr: true` (the default):
+
+```ts
+// lib/storage.ts
+import { setupStorage, defineState } from '@yakocloud/state-vocab'
+import { clientify } from '@yakocloud/state-vocab/client'
+
+const storage = setupStorage({
+  preference: {
+    theme: defineState<'Dark' | 'White' | 'System'>({
+      storage: localStorage,
+      defaultValue: 'Dark',
+    }),
+  },
+  // ssr: true is the default — storage reads are deferred until after hydration
+})
+
+export const clientStorage = clientify(storage)
+```
+
+Use `clientStorage` directly in any page or component — no additional wiring needed:
+
+```tsx
+// pages/settings.tsx
+import { clientStorage } from '@/lib/storage'
+
+export default function Settings() {
+  const [theme, setTheme] = clientStorage.preference.theme.useState()
+
+  return (
+    <select value={theme} onChange={(e) => setTheme(e.target.value as 'Dark' | 'White' | 'System')}>
+      <option value="Dark">Dark</option>
+      <option value="White">White</option>
+      <option value="System">System</option>
+    </select>
+  )
+}
+```
+
+`StateVocabClientProvider` also accepts an optional `value` prop to pre-seed the store with server-fetched data (e.g., from `getServerSideProps`):
+
+```tsx
+// pages/_app.tsx
+import type { AppProps } from 'next/app'
+import { StateVocabClientProvider } from '@yakocloud/state-vocab/client'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <StateVocabClientProvider value={pageProps.initialVocab}>
+      <Component {...pageProps} />
+    </StateVocabClientProvider>
+  )
+}
+```
+
 ### 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`.
@@ -304,8 +344,8 @@ For Next.js apps using the App Router, state-vocab provides dedicated server and
 | 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` |
+| `@yakocloud/state-vocab/server` | Server Components — `serverify` |
+| `@yakocloud/state-vocab/client` | Client Components — `clientify`, `StateVocabClientProvider` |
 
 **1. Define the shared storage schema** (used on both server and client):
 
@@ -323,7 +363,7 @@ export const storage = setupStorage({
       city: defineState<string>(),
     },
   },
-}, { ssr: true })
+})
 ```
 
 **2. Create server and client storage handles:**
@@ -351,7 +391,8 @@ export const clientStorage = clientify(storage)
 ```tsx
 // app/page.tsx (Server Component)
 import { serverStorage } from '@/storage.server'
-import { StateVocabProvider } from '@yakocloud/state-vocab/server'
+
+const { StateVocabProvider } = serverStorage
 
 export default async function Page() {
   // Fetch data from DB / API
@@ -359,10 +400,10 @@ export default async function Page() {
 
   return (
     <StateVocabProvider
-      value={serverStorage.set({
+      value={{
         user: { name: user.name, role: user.role },
         person: { address: { city: user.city } },
-      })}
+      }}
     >
       <UserInfo />
     </StateVocabProvider>
@@ -398,35 +439,24 @@ export default function UserInfoClient() {
 
 #### `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`. Each namespace node (including the root) gains a `.set()` method that returns the input wrapped under its full ancestor path, ready for `StateVocabProvider`'s `value` prop.
+Converts a storage tree into its server-side counterpart. Each leaf gains a `.getState()` method that reads the value seeded into the nearest `StateVocabProvider`. Each namespace node (including the root) gains a `.seed()` method that returns the input wrapped under its full ancestor path. This method is optional for using. The result also exposes `StateVocabProvider` — a server-aware provider that accepts a plain object `value` prop to pre-seed the store.
 
-**`.set()` syntax:**
+**`.seed()` syntax:**
 
 ```ts
-// Full tree at once — root .set() returns input as-is
-serverStorage.set({ user: { name: 'Alice', role: 'Admin' } })
+// Full tree at once — root .seed() returns input as-is
+serverStorage.seed({ user: { name: 'Alice', role: 'Admin' } })
 // → { user: { name: 'Alice', role: 'Admin' } }
 
 // Single namespace — wraps input under its key
-serverStorage.user.set({ name: 'Alice', role: 'Admin' })
+serverStorage.user.seed({ name: 'Alice', role: 'Admin' })
 // → { user: { name: 'Alice', role: 'Admin' } }
 
 // Nested namespace — wraps up to the root
-serverStorage.person.address.set({ city: 'NY' })
+serverStorage.person.address.seed({ 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.set({ name: 'Alice', role: 'Admin' }),
-    ...serverStorage.person.address.set({ city: 'NY' }),
-  }}
->
-```
-
 **`node.getState()`** reads the value for that leaf from the surrounding `StateVocabProvider`. Throws if called outside one.
 
 #### `clientify(storage)`
@@ -521,11 +551,11 @@ const storage = setupStorage({
 import React from 'react'
 import { createRoot } from 'react-dom/client'
 import { setupStorage, defineState } from '@yakocloud/state-vocab'
-import { clientify, StateVocabProvider } from '@yakocloud/state-vocab/client'
+import { clientify } from '@yakocloud/state-vocab/client'
 
 type Theme = 'Dark' | 'White' | 'System'
 
-const storage = clientify(setupStorage({
+const storage = setupStorage({
   preference: {
     theme: defineState<Theme>({ storage: localStorage, defaultValue: 'Dark' }),
     nightMode: defineState({ storage: sessionStorage, defaultValue: false }),
@@ -547,11 +577,15 @@ const storage = clientify(setupStorage({
       storage: localStorage,
     }),
   },
-}))
+}, {
+  ssr: false // by default true
+})
+
+const clientStorage = clientify(storage)
 
 // Root — initializes shared state for the whole subtree
 function Page() {
-  storage.demo.pageProps.useState({
+  clientStorage.demo.pageProps.useState({
     defaultValue: { title: 'Hello', count: 42 },
   })
 
@@ -560,15 +594,15 @@ function Page() {
 
 // Deep child — reads without re-specifying defaults
 function PageHeader() {
-  const [pageProps] = storage.demo.pageProps.useState()
+  const [pageProps] = clientStorage.demo.pageProps.useState()
   return <h1>{pageProps.title} ({pageProps.count})</h1>
 }
 
 function Dashboard() {
-  const [theme, setTheme] = storage.preference.theme.useState()
-  const [nightMode, setNightMode] = storage.preference.nightMode.useState()
-  const [counter, setCounter, resetCounter] = storage.stats.counter.useState()
-  const [note, setNote] = storage.personal.note.useState({
+  const [theme, setTheme] = clientStorage.preference.theme.useState()
+  const [nightMode, setNightMode] = clientStorage.preference.nightMode.useState()
+  const [counter, setCounter, resetCounter] = clientStorage.stats.counter.useState()
+  const [note, setNote] = clientStorage.personal.note.useState({
     delayedSet: 500,
     onSet: (v) => console.log('Saving note:', v),
   })
@@ -607,9 +641,7 @@ function Dashboard() {
 
 createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <StateVocabProvider>
-      <Page />
-    </StateVocabProvider>
+    <Page />
   </React.StrictMode>
 )
 ```
@@ -632,42 +664,52 @@ createRoot(document.getElementById('root')!).render(
 |---|---|---|
 | `verbose` | `boolean \| undefined` | `false` |
 | `verbosePath` | `Path<T> \| undefined` | `undefined` |
-| `ssr` | `boolean \| undefined` | `false` |
+| `ssr` | `boolean \| undefined` | `true` |
 
 Returns a proxied copy of `tree` with paths injected into all leaf nodes.
 
 ### `StateVocabProvider`
 
-A React context provider that initializes a `VocabStore` for its subtree. Required — all components calling `.useState()` must be descendants of this provider.
+A React context provider that initializes a `VocabStore` for its subtree. Only required in RSC / Next.js App Router contexts (where `ssr: true`). For standard SPAs without SSR, no provider is needed — hooks use a module-level store automatically.
+
+In RSC contexts, `StateVocabProvider` is available on the `serverify()` result — it accepts an optional `value` prop to pre-seed the store with server-fetched data:
 
 ```tsx
-<StateVocabProvider>
+const { StateVocabProvider } = serverStorage
+
+<StateVocabProvider value={{ user: { name: 'Alice' } }}>
   <App />
 </StateVocabProvider>
 ```
 
-Accepts an optional `value` prop (imported from `@yakocloud/state-vocab/server` in RSC contexts) to pre-seed the store with server-fetched data:
+### `StateVocabClientProvider`
+
+A client-only provider for SSR setups **without** React Server Components (e.g. Next.js Pages Router). Import from `@yakocloud/state-vocab/client` and place it at your app root to ensure per-request store isolation. Accepts an optional `value` prop to pre-seed the store.
 
 ```tsx
-<StateVocabProvider value={serverStorage.set({ user: { name: 'Alice' } })}>
+import { StateVocabClientProvider } from '@yakocloud/state-vocab/client'
+
+<StateVocabClientProvider value={initialVocab}>
   <App />
-</StateVocabProvider>
+</StateVocabClientProvider>
 ```
 
 ### `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 gains `.set()`, which returns the input wrapped under its full ancestor path (ready for `StateVocabProvider`'s `value` prop).
+Each leaf gains `.getState()` — reads the value from the nearest `StateVocabProvider`. Each namespace node gains `.seed()`, which returns the input wrapped under its full ancestor path. The result also includes `StateVocabProvider` — use it instead of importing from `@yakocloud/state-vocab/server`.
 
 ```ts
 import { serverify } from '@yakocloud/state-vocab/server'
 const serverStorage = serverify(storage)
 
+const { StateVocabProvider } = serverStorage        // server-aware provider
+
 serverStorage.user.name.getState()                  // reads "user.name" from context
-serverStorage.user.set({ name: 'Alice' })           // → { user: { name: 'Alice' } }
-serverStorage.person.address.set({ city: 'NY' })    // → { person: { address: { city: 'NY' } } }
-serverStorage.set({ user: { name: 'Alice' } })      // → { user: { name: 'Alice' } } (identity)
+serverStorage.user.seed({ name: 'Alice' })          // → { user: { name: 'Alice' } }
+serverStorage.person.address.seed({ city: 'NY' })   // → { person: { address: { city: 'NY' } } }
+serverStorage.seed({ user: { name: 'Alice' } })     // → { user: { name: 'Alice' } } (identity)
 ```
 
 ### `clientify<T>(storage: T)`

package/dist/client.cjs.js

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

package/dist/client.es.js

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

package/dist/constants-BB1YAX6c.mjs

@@ -0,0 +1,8 @@
+const s = /* @__PURE__ */ Symbol("state-def"), t = /* @__PURE__ */ Symbol("state-path"), S = /* @__PURE__ */ Symbol("state-verbose"), a = /* @__PURE__ */ Symbol("state-verbose-path"), o = /* @__PURE__ */ Symbol("state-ssr");
+export {
+  t as S,
+  S as a,
+  o as b,
+  a as c,
+  s as d
+};

package/dist/constants-CbsduCZ7.js

@@ -0,0 +1 @@
+"use strict";const T=Symbol("state-def"),S=Symbol("state-path"),E=Symbol("state-verbose"),t=Symbol("state-verbose-path"),s=Symbol("state-ssr");exports.STATE_DEFINITION=T;exports.STATE_PATH=S;exports.STATE_SSR=s;exports.STATE_VERBOSE=E;exports.STATE_VERBOSE_PATH=t;

package/dist/index.cjs.js

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

package/dist/index.es.js

@@ -1,5 +1,6 @@
-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 = {}) {
+import { S as d, b as T, c as E, a as P, d as v } from "./constants-BB1YAX6c.mjs";
+import { v as b } from "./utils-xV3x3fTc.mjs";
+function M(t = {}) {
   return {
     [v]: !0,
     // marks this object as a leaf in the router tree
@@ -62,10 +63,10 @@ function z(t, a) {
   } = 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, {
+  const o = s.get(e);
+  if (o)
+    return o;
+  const h = 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) {
@@ -77,10 +78,10 @@ function z(t, a) {
           return g;
         const j = Reflect.ownKeys(l).filter(
           (f) => typeof l[f] == "function"
-        ), w = Object.fromEntries(
+        ), m = Object.fromEntries(
           j.map((f) => [
             f,
-            (..._) => l[f].call(
+            (...w) => l[f].call(
               {
                 ...l,
                 [d]: c,
@@ -88,10 +89,10 @@ function z(t, a) {
                 [E]: x,
                 [T]: A
               },
-              ..._
+              ...w
             )
           ])
-        ), y = { ...l, ...w };
+        ), y = { ...l, ...m };
         return i.set(c, y), y;
       }
       return r && typeof r == "object" ? z(r, {
@@ -100,9 +101,9 @@ function z(t, a) {
       }) : r;
     }
   });
-  return s.set(e, o), o;
+  return s.set(e, h), h;
 }
-function M(t, a) {
+function N(t, a) {
   return z(t, {
     ...a,
     ssr: a?.ssr ?? !0,
@@ -114,6 +115,6 @@ function M(t, a) {
   });
 }
 export {
-  m as defineState,
-  M as setupStorage
+  M as defineState,
+  N as setupStorage
 };

package/dist/provider-client-B4XQ24JB.js

@@ -0,0 +1 @@
+"use client";"use strict";const h=require("react/jsx-runtime"),r=require("react"),s=require("./utils-0CTNJ4ZE.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 → provider-client-C2Aw0Lmi.mjs}

@@ -1,9 +1,9 @@
 "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";
+import { g as n, i as d, s as b } from "./utils-xV3x3fTc.mjs";
 const i = h({});
-function V(s = {}) {
+function V(s) {
   const t = l(i);
   return s.verbose && console.log(`[Store uid]: ${t.uid}`), t;
 }

package/dist/server.cjs.js

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

package/dist/server.es.js

@@ -1,50 +1,52 @@
-import { jsxs as u, Fragment as v, jsx as s } from "react/jsx-runtime";
+import { jsxs as u, Fragment as v, jsx as c } from "react/jsx-runtime";
+import { S as d } from "./constants-BB1YAX6c.mjs";
 import f from "react";
-import * as d from "node:async_hooks";
-import { S as p } from "./provider.client-CtAC9tPr.mjs";
-import { S as h, g as m } from "./utils-t8tYdd6B.mjs";
+import * as p from "node:async_hooks";
+import { S as m } from "./provider-client-C2Aw0Lmi.mjs";
+import { g as b } from "./utils-xV3x3fTc.mjs";
 const i = (e) => {
   if (f.useState)
     throw new Error(`${e} only intended for Server Components`);
 };
-let c = null;
+let s = null;
 try {
-  i("StateVocabServerContext"), c = new d.AsyncLocalStorage();
+  i("StateVocabServerContext"), s = new p.AsyncLocalStorage();
 } catch {
-  c = null;
+  s = null;
 }
-const y = ({ value: e }) => (c?.enterWith({ value: e }), null), b = ({ children: e }) => e, P = async (e) => {
+const h = ({ value: e }) => (s?.enterWith({ value: e }), null), y = ({ children: e }) => e, P = async (e) => {
   i("StateVocabServerContext.Provider");
   const { value: t, children: r } = e;
   return /* @__PURE__ */ u(v, { children: [
-    /* @__PURE__ */ s(y, { value: t }),
+    /* @__PURE__ */ c(h, { value: t }),
     r
   ] });
-}, g = () => (i("getStateVocab"), c?.getStore()?.value), V = {
-  Provider: c ? P : b
-}, x = ({ value: e, children: t }) => /* @__PURE__ */ s(V.Provider, { value: e, children: t });
-function T(e) {
+}, g = () => (i("getStateVocab"), s?.getStore()?.value), V = {
+  Provider: s ? P : y
+}, E = ({ value: e, children: t }) => /* @__PURE__ */ c(V.Provider, { value: e, children: t });
+function x(e) {
   const { children: t, value: r = {} } = e;
-  return /* @__PURE__ */ s(x, { value: r, children: /* @__PURE__ */ s(p, { value: r, children: t }) });
+  return /* @__PURE__ */ c(E, { value: r, children: /* @__PURE__ */ c(m, { value: r, children: t }) });
 }
-function C() {
-  const e = this[h], t = g();
+const C = "Make sure your component is wrapped in StateVocabProvider";
+function w() {
+  const e = this[d], t = g();
   if (!t)
-    throw new Error("Make sure your component is wrapped in StateVocabProvider");
-  return m(t, e);
+    throw new Error(C);
+  return b(t, e);
 }
-function w(e) {
+function R(e) {
   return typeof e == "object" && e !== null && "serverSlot" in e;
 }
 function l(e, t) {
   const r = {};
   for (const o in e) {
     const n = e[o];
-    if (w(n))
+    if (R(n))
       r[o] = n.serverSlot({
         // Slot definition
         getState(...a) {
-          return C.apply(this, a);
+          return w.apply(this, a);
         }
       }), delete r[o].serverSlot, delete r[o].clientSlot;
     else if (n !== null && typeof n == "object") {
@@ -53,12 +55,16 @@ function l(e, t) {
     } else
       r[o] = n;
   }
-  return r.set = (o) => t(o), r;
+  return r.seed = (o) => t(o), r;
 }
-function H(e) {
-  return l(e, (t) => t);
+function M(e) {
+  return {
+    ...l(e, (t) => t),
+    StateVocabProvider({ children: t, value: r }) {
+      return /* @__PURE__ */ c(x, { value: r, children: t });
+    }
+  };
 }
 export {
-  T as StateVocabProvider,
-  H as serverify
+  M as serverify
 };

package/dist/types/client.d.ts

@@ -1,2 +1,2 @@
 export { clientify } from "./setup.client";
-export { StateVocabClientProvider as StateVocabProvider } from "./provider.client";
+export { StateVocabClientProvider } from "./provider.client";

package/dist/types/context.client.d.ts

@@ -3,6 +3,6 @@ export declare const StateVocabClientContext: import("react").Context<VocabStore
 /**
  * @see method from from https://zustand.docs.pmnd.rs/learn/guides/nextjs
  */
-export declare function useStateVocabClientContext(options?: {
-    verbose?: boolean;
+export declare function useStateVocabClientContext(options: {
+    verbose: boolean;
 }): VocabStore;

package/dist/types/server.d.ts

@@ -1,2 +1 @@
-export { StateVocabProvider } from "./provider";
 export { serverify } from "./setup.server";

package/dist/types/setup.client.utils.d.ts

@@ -0,0 +1,12 @@
+import { type DependencyList } from "react";
+import VocabStore from "./store";
+import type { Deserialize, Serialize } from "./state.types";
+export declare function useDebounce<T extends (...args: never[]) => unknown>(effect: T, wait: number | undefined, deps?: DependencyList): (...args: Parameters<T>) => void;
+export declare const sync: <V>(options: {
+    vocabStore: VocabStore;
+    statePath: string;
+    storage: Storage;
+    serialize: Serialize<V>;
+    deserialize: Deserialize<V>;
+    value: V | undefined;
+}) => void;

package/dist/types/setup.server.d.ts

@@ -1,3 +1,4 @@
+import type { PropsWithChildren, ReactNode } from "react";
 import type { Vocab } from "./state.types";
 type Placeholder<V> = {
     getState(): V;
@@ -9,12 +10,15 @@ type ServerifiedValue<R> = {
     [K in keyof R]?: R[K] extends Slot<infer V> ? V : R[K] extends object ? ServerifiedValue<R[K]> : R[K];
 };
 type Serverified<R> = R extends Slot<infer TValue> ? Placeholder<TValue> : R extends object ? {
-    set(input: ServerifiedValue<R>): Vocab;
+    seed(input: ServerifiedValue<R>): Vocab;
 } & {
     [K in keyof R]: Serverified<R[K]>;
 } : R;
 type ServerifyResult<R extends object> = {
-    set(input: ServerifiedValue<R>): Vocab;
+    seed(input: ServerifiedValue<R>): Vocab;
+    StateVocabProvider(props: PropsWithChildren<{
+        value?: ServerifiedValue<R>;
+    }>): Promise<ReactNode>;
 } & {
     [K in keyof R]: Serverified<R[K]>;
 };

package/dist/utils-0CTNJ4ZE.js

@@ -0,0 +1,3 @@
+"use strict";function f(e,s,n){if(!s)return e;const o=s.split(".");let t=e;for(const c of o)if(t!==null&&typeof t=="object"&&c in t)t=t[c];else return n;return t===void 0?n:t}function y(e,s,n){const o=s.replace(/\[(\d+)\]/g,".$1").split(".");let t=e;for(let c=0;c<o.length-1;c++){const r=o[c],i=o[c+1];(t[r]===void 0||t[r]===null)&&(t[r]=/^\d+$/.test(i)?[]:{}),t=t[r]}return t[o[o.length-1]]=n,e}function d(e,s=0){let n;return function(...o){n!==void 0&&clearTimeout(n),n=setTimeout(()=>{n=void 0,e.apply(this,o)},s)}}function a(e){const s=JSON.stringify(e,null,2).split(`
+`),n=[],o=[];for(const t of s){const c=t.match(/^(\s*)"([^"]+)"(\s*:\s*)(.+)$/);if(c){const[,r,i,l,u]=c;n.push(`${r}%c"${i}"%c${l}%c${u}`),o.push("color: #9cdcfe; font-weight: bold","color: #cccccc","color: #ce9178")}else n.push(`%c${t}`),o.push("color: #cccccc")}console.log(n.join(`
+`),...o,e)}const p=e=>typeof e=="function",g=e=>typeof e=="function",h=e=>typeof e<"u",$=e=>g(e)?e():e;exports.debounce=d;exports.get=f;exports.isTransformer=p;exports.isValueDefined=h;exports.logStyled=a;exports.set=y;exports.valueOrFactory=$;

package/dist/utils-xV3x3fTc.mjs

@@ -0,0 +1,57 @@
+function a(t, s, n) {
+  if (!s)
+    return t;
+  const o = s.split(".");
+  let e = t;
+  for (const c of o)
+    if (e !== null && typeof e == "object" && c in e)
+      e = e[c];
+    else
+      return n;
+  return e === void 0 ? n : e;
+}
+function y(t, s, n) {
+  const o = s.replace(/\[(\d+)\]/g, ".$1").split(".");
+  let e = t;
+  for (let c = 0; c < o.length - 1; c++) {
+    const r = o[c], i = o[c + 1];
+    (e[r] === void 0 || e[r] === null) && (e[r] = /^\d+$/.test(i) ? [] : {}), e = e[r];
+  }
+  return e[o[o.length - 1]] = n, t;
+}
+function d(t, s = 0) {
+  let n;
+  return function(...o) {
+    n !== void 0 && clearTimeout(n), n = setTimeout(() => {
+      n = void 0, t.apply(this, o);
+    }, s);
+  };
+}
+function p(t) {
+  const s = JSON.stringify(t, null, 2).split(`
+`), n = [], o = [];
+  for (const e of s) {
+    const c = e.match(/^(\s*)"([^"]+)"(\s*:\s*)(.+)$/);
+    if (c) {
+      const [, r, i, l, u] = c;
+      n.push(`${r}%c"${i}"%c${l}%c${u}`), o.push(
+        "color: #9cdcfe; font-weight: bold",
+        "color: #cccccc",
+        "color: #ce9178"
+      );
+    } else
+      n.push(`%c${e}`), o.push("color: #cccccc");
+  }
+  console.log(n.join(`
+`), ...o, t);
+}
+const g = (t) => typeof t == "function", f = (t) => typeof t == "function", h = (t) => typeof t < "u", $ = (t) => f(t) ? t() : t;
+export {
+  h as a,
+  d,
+  a as g,
+  g as i,
+  p as l,
+  y as s,
+  $ as v
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yakocloud/state-vocab",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "types": "dist/types/index.d.ts",

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

@@ -1 +0,0 @@
-"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/types/state.client.utils.d.ts

@@ -1,2 +0,0 @@
-import { type DependencyList } from "react";
-export declare function useDebounce<T extends (...args: never[]) => unknown>(effect: T, wait: number | undefined, deps?: DependencyList): (...args: Parameters<T>) => void;

package/dist/utils-33NqsZoR.js

@@ -1,3 +0,0 @@
-"use strict";const T=Symbol("state-def"),f=Symbol("state-path"),S=Symbol("state-verbose"),y=Symbol("state-verbose-path"),a=Symbol("state-ssr");function E(t,s,o){if(!s)return t;const n=s.split(".");let e=t;for(const c of n)if(e!==null&&typeof e=="object"&&c in e)e=e[c];else return o;return e===void 0?o:e}function d(t,s,o){const n=s.replace(/\[(\d+)\]/g,".$1").split(".");let e=t;for(let c=0;c<n.length-1;c++){const r=n[c],l=n[c+1];(e[r]===void 0||e[r]===null)&&(e[r]=/^\d+$/.test(l)?[]:{}),e=e[r]}return e[n[n.length-1]]=o,t}function p(t,s=0){let o;return function(...n){o!==void 0&&clearTimeout(o),o=setTimeout(()=>{o=void 0,t.apply(this,n)},s)}}function A(t){const s=JSON.stringify(t,null,2).split(`
-`),o=[],n=[];for(const e of s){const c=e.match(/^(\s*)"([^"]+)"(\s*:\s*)(.+)$/);if(c){const[,r,l,i,u]=c;o.push(`${r}%c"${l}"%c${i}%c${u}`),n.push("color: #9cdcfe; font-weight: bold","color: #cccccc","color: #ce9178")}else o.push(`%c${e}`),n.push("color: #cccccc")}console.log(o.join(`
-`),...n,t)}const m=t=>typeof t=="function",_=t=>typeof t=="function",h=t=>typeof t<"u",g=t=>_(t)?t():t;exports.STATE_DEFINITION=T;exports.STATE_PATH=f;exports.STATE_SSR=a;exports.STATE_VERBOSE=S;exports.STATE_VERBOSE_PATH=y;exports.debounce=p;exports.get=E;exports.isTransformer=m;exports.isValueDefined=h;exports.logStyled=A;exports.set=d;exports.valueOrFactory=g;

package/dist/utils-t8tYdd6B.mjs

@@ -1,63 +0,0 @@
-const u = /* @__PURE__ */ Symbol("state-def"), y = /* @__PURE__ */ Symbol("state-path"), S = /* @__PURE__ */ Symbol("state-verbose"), d = /* @__PURE__ */ Symbol("state-verbose-path"), T = /* @__PURE__ */ Symbol("state-ssr");
-function p(t, c, s) {
-  if (!c)
-    return t;
-  const o = c.split(".");
-  let e = t;
-  for (const n of o)
-    if (e !== null && typeof e == "object" && n in e)
-      e = e[n];
-    else
-      return s;
-  return e === void 0 ? s : e;
-}
-function h(t, c, s) {
-  const o = c.replace(/\[(\d+)\]/g, ".$1").split(".");
-  let e = t;
-  for (let n = 0; n < o.length - 1; n++) {
-    const r = o[n], l = o[n + 1];
-    (e[r] === void 0 || e[r] === null) && (e[r] = /^\d+$/.test(l) ? [] : {}), e = e[r];
-  }
-  return e[o[o.length - 1]] = s, t;
-}
-function m(t, c = 0) {
-  let s;
-  return function(...o) {
-    s !== void 0 && clearTimeout(s), s = setTimeout(() => {
-      s = void 0, t.apply(this, o);
-    }, c);
-  };
-}
-function E(t) {
-  const c = JSON.stringify(t, null, 2).split(`
-`), s = [], o = [];
-  for (const e of c) {
-    const n = e.match(/^(\s*)"([^"]+)"(\s*:\s*)(.+)$/);
-    if (n) {
-      const [, r, l, i, a] = n;
-      s.push(`${r}%c"${l}"%c${i}%c${a}`), o.push(
-        "color: #9cdcfe; font-weight: bold",
-        "color: #cccccc",
-        "color: #ce9178"
-      );
-    } else
-      s.push(`%c${e}`), o.push("color: #cccccc");
-  }
-  console.log(s.join(`
-`), ...o, t);
-}
-const g = (t) => typeof t == "function", f = (t) => typeof t == "function", v = (t) => typeof t < "u", b = (t) => f(t) ? t() : t;
-export {
-  y as S,
-  S as a,
-  T as b,
-  d as c,
-  m as d,
-  g as e,
-  u as f,
-  p as g,
-  v as i,
-  E as l,
-  h as s,
-  b as v
-};