@yakocloud/state-vocab 3.1.2 → 3.1.4

package/README.md

@@ -103,7 +103,7 @@ defineState({
 })
 ```
 
-**Minimal API surface.** Two exports: `defineState`, `setupStorage`. No actions, reducers, selectors, or stores to configure.
+**Minimal API surface.** Three exports: `defineState`, `setupStorage`, `VocabStateProvider`. No actions, reducers, selectors, or stores to configure.
 
 ## Installation
 
@@ -115,8 +115,13 @@ 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.
+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 } from '@yakocloud/state-vocab'
+import { setupStorage, defineState, VocabStateProvider } from '@yakocloud/state-vocab'
 
 type Theme = 'Dark' | 'White' | 'System'
 
@@ -131,6 +136,14 @@ const storage = setupStorage({
   },
 })
 
+function App() {
+  return (
+    <VocabStateProvider>
+      <Settings />
+    </VocabStateProvider>
+  )
+}
+
 function Settings() {
   const [theme, setTheme] = storage.path.to.theme.useState()
 
@@ -144,6 +157,38 @@ function Settings() {
 }
 ```
 
+## Setup
+
+### `VocabStateProvider`
+
+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.
+
+```tsx
+import { VocabStateProvider } from '@yakocloud/state-vocab'
+
+// Wrap your app root
+createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <VocabStateProvider>
+      <App />
+    </VocabStateProvider>
+  </React.StrictMode>
+)
+```
+
+You can mount multiple independent providers — each gets its own store:
+
+```tsx
+// Two isolated state trees — state does not bleed between them
+<VocabStateProvider>
+  <WidgetA />
+</VocabStateProvider>
+
+<VocabStateProvider>
+  <WidgetB />
+</VocabStateProvider>
+```
+
 ## Core Concepts
 
 ### `defineState(options?)`
@@ -247,6 +292,8 @@ 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.
+
 ## `useState` Hook
 
 Each state node exposes a `.useState()` method that works like React's built-in `useState` but adds persistence and callbacks.
@@ -325,7 +372,9 @@ const storage = setupStorage({
 ## Full Example
 
 ```tsx
-import { setupStorage, defineState } from '@yakocloud/state-vocab'
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { setupStorage, defineState, VocabStateProvider } from '@yakocloud/state-vocab'
 
 type Theme = 'Dark' | 'White' | 'System'
 
@@ -409,7 +458,13 @@ function Dashboard() {
   )
 }
 
-createRoot(document.getElementById('root')!).render(<Page />)
+createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <VocabStateProvider>
+      <Page />
+    </VocabStateProvider>
+  </React.StrictMode>
+)
 ```
 
 ## API Reference
@@ -434,6 +489,16 @@ createRoot(document.getElementById('root')!).render(<Page />)
 
 Returns a proxied copy of `tree` with paths injected into all leaf nodes.
 
+### `VocabStateProvider`
+
+A React context provider that initializes a `VocabStore` for its subtree. Required — all components calling `.useState()` must be descendants of this provider.
+
+```tsx
+<VocabStateProvider>
+  <App />
+</VocabStateProvider>
+```
+
 ### `node.useState(options?)`
 
 | Option | Type | Description |

package/dist/state-vocab.cjs.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react");var Y={exports:{}},N={};var te;function be(){if(te)return N;te=1;var t=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function r(l,s,a){var i=null;if(a!==void 0&&(i=""+a),s.key!==void 0&&(i=""+s.key),"key"in s){a={};for(var c in s)c!=="key"&&(a[c]=s[c])}else a=s;return s=a.ref,{$$typeof:t,type:l,key:i,ref:s!==void 0?s:null,props:a}}return N.Fragment=o,N.jsx=r,N.jsxs=r,N}var V={};var re;function me(){return re||(re=1,process.env.NODE_ENV!=="production"&&(function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ie?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case _:return"Fragment";case x:return"Profiler";case O:return"StrictMode";case F:return"Suspense";case u:return"SuspenseList";case w:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case p:return"Portal";case T:return e.displayName||"Context";case k:return(e._context.displayName||"Context")+".Consumer";case C:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case y:return n=e.displayName||null,n!==null?n:t(e.type)||"Memo";case A:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function o(e){return""+e}function r(e){try{o(e);var n=!1}catch{n=!0}if(n){n=console;var f=n.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return f.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),o(e)}}function l(e){if(e===_)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===A)return"<...>";try{var n=t(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function s(){var e=z.A;return e===null?null:e.getOwner()}function a(){return Error("react-stack-top-frame")}function i(e){if(X.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function c(e,n){function f(){H||(H=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",n))}f.isReactWarning=!0,Object.defineProperty(e,"key",{get:f,configurable:!0})}function g(){var e=t(this.type);return Z[e]||(Z[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function R(e,n,f,b,I,W){var m=f.ref;return e={$$typeof:S,type:e,key:n,props:f,_owner:b},(m!==void 0?m:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:g}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:I}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:W}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function P(e,n,f,b,I,W){var m=n.children;if(m!==void 0)if(b)if(fe(m)){for(b=0;b<m.length;b++)d(m[b]);Object.freeze&&Object.freeze(m)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else d(m);if(X.call(n,"key")){m=t(e);var j=Object.keys(n).filter(function(de){return de!=="key"});b=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",ee[m+b]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react");var M={exports:{}},I={};var re;function ve(){if(re)return I;re=1;var t=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function r(u,s,a){var i=null;if(a!==void 0&&(i=""+a),s.key!==void 0&&(i=""+s.key),"key"in s){a={};for(var c in s)c!=="key"&&(a[c]=s[c])}else a=s;return s=a.ref,{$$typeof:t,type:u,key:i,ref:s!==void 0?s:null,props:a}}return I.Fragment=n,I.jsx=r,I.jsxs=r,I}var $={};var ne;function Ee(){return ne||(ne=1,process.env.NODE_ENV!=="production"&&(function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===de?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case p:return"Fragment";case O:return"Profiler";case k:return"StrictMode";case J:return"Suspense";case l:return"SuspenseList";case x:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case h:return"Portal";case w:return e.displayName||"Context";case P:return(e._context.displayName||"Context")+".Consumer";case V:var o=e.render;return e=e.displayName,e||(e=o.displayName||o.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case T:return o=e.displayName||null,o!==null?o:t(e.type)||"Memo";case j:o=e._payload,e=e._init;try{return t(e(o))}catch{}}return null}function n(e){return""+e}function r(e){try{n(e);var o=!1}catch{o=!0}if(o){o=console;var d=o.error,v=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return d.call(o,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",v),n(e)}}function u(e){if(e===p)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===j)return"<...>";try{var o=t(e);return o?"<"+o+">":"<...>"}catch{return"<...>"}}function s(){var e=W.A;return e===null?null:e.getOwner()}function a(){return Error("react-stack-top-frame")}function i(e){if(H.call(e,"key")){var o=Object.getOwnPropertyDescriptor(e,"key").get;if(o&&o.isReactWarning)return!1}return e.key!==void 0}function c(e,o){function d(){Z||(Z=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",o))}d.isReactWarning=!0,Object.defineProperty(e,"key",{get:d,configurable:!0})}function y(){var e=t(this.type);return Q[e]||(Q[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function R(e,o,d,v,Y,q){var E=d.ref;return e={$$typeof:S,type:e,key:o,props:d,_owner:v},(E!==void 0?E:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:y}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:Y}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:q}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function g(e,o,d,v,Y,q){var E=o.children;if(E!==void 0)if(v)if(be(E)){for(v=0;v<E.length;v++)f(E[v]);Object.freeze&&Object.freeze(E)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else f(E);if(H.call(o,"key")){E=t(e);var N=Object.keys(o).filter(function(me){return me!=="key"});v=0<N.length?"{key: someKey, "+N.join(": ..., ")+": ...}":"{key: someKey}",te[E+v]||(N=0<N.length?"{"+N.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,b,m,j,m),ee[m+b]=!0)}if(m=null,f!==void 0&&(r(f),m=""+f),i(n)&&(r(n.key),m=""+n.key),"key"in n){f={};for(var J in n)J!=="key"&&(f[J]=n[J])}else f=n;return m&&c(f,typeof e=="function"?e.displayName||e.name||"Unknown":e),R(e,m,f,s(),I,W)}function d(e){v(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===A&&(e._payload.status==="fulfilled"?v(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function v(e){return typeof e=="object"&&e!==null&&e.$$typeof===S}var h=E,S=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),_=Symbol.for("react.fragment"),O=Symbol.for("react.strict_mode"),x=Symbol.for("react.profiler"),k=Symbol.for("react.consumer"),T=Symbol.for("react.context"),C=Symbol.for("react.forward_ref"),F=Symbol.for("react.suspense"),u=Symbol.for("react.suspense_list"),y=Symbol.for("react.memo"),A=Symbol.for("react.lazy"),w=Symbol.for("react.activity"),ie=Symbol.for("react.client.reference"),z=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,X=Object.prototype.hasOwnProperty,fe=Array.isArray,L=console.createTask?console.createTask:function(){return null};h={react_stack_bottom_frame:function(e){return e()}};var H,Z={},Q=h.react_stack_bottom_frame.bind(h,a)(),K=L(l(a)),ee={};V.Fragment=_,V.jsx=function(e,n,f){var b=1e4>z.recentlyCreatedOwnerStacks++;return P(e,n,f,!1,b?Error("react-stack-top-frame"):Q,b?L(l(e)):K)},V.jsxs=function(e,n,f){var b=1e4>z.recentlyCreatedOwnerStacks++;return P(e,n,f,!0,b?Error("react-stack-top-frame"):Q,b?L(l(e)):K)}})()),V}var ne;function ve(){return ne||(ne=1,process.env.NODE_ENV==="production"?Y.exports=be():Y.exports=me()),Y.exports}var Ee=ve();function D(t,o,r){if(!o)return t;const l=o.split(".");let s=t;for(const a of l)if(s!==null&&typeof s=="object"&&a in s)s=s[a];else return r;return s===void 0?r:s}function Se(t,o,r){const l=o.replace(/\[(\d+)\]/g,".$1").split(".");let s=t;for(let a=0;a<l.length-1;a++){const i=l[a],c=l[a+1];(s[i]===void 0||s[i]===null)&&(s[i]=/^\d+$/.test(c)?[]:{}),s=s[i]}return s[l[l.length-1]]=r,t}function pe(t,o=0){let r;return function(...l){r!==void 0&&clearTimeout(r),r=setTimeout(()=>{r=void 0,t.apply(this,l)},o)}}function he(t,o,r=[]){return E.useMemo(()=>pe(t,o),r)}function oe(t){const o=JSON.stringify(t,null,2).split(`
-`),r=[],l=[];for(const s of o){const a=s.match(/^(\s*)"([^"]+)"(\s*:\s*)(.+)$/);if(a){const[,i,c,g,R]=a;r.push(`${i}%c"${c}"%c${g}%c${R}`),l.push("color: #9cdcfe; font-weight: bold","color: #cccccc","color: #ce9178")}else r.push(`%c${s}`),l.push("color: #cccccc")}console.log(r.join(`
-`),...l,t)}const se=t=>typeof t=="function",_e=t=>typeof t=="function",$=t=>typeof t<"u",U=t=>_e(t)?t():t;class ye{#e;#t;constructor(){this.uid=Math.random().toString(36).slice(2),this.#e={},this.#t=new Set}subscribe(o){return this.#t.add(o),()=>this.#t.delete(o)}getClientSnapshot(){return this.#e}getServerSnapshot(){return this.#e}get(o){return D(this.#e,o)}set(o,r){const l=D(this.#e,o),s=se(r)?r(l):r,a={...this.#e};Se(a,o,s),this.#e=a,this.#t.forEach(i=>i())}}const ae=E.createContext({});function Re(){return E.useContext(ae)}function Te({children:t}){const o=E.useMemo(()=>new ye,[]);return Ee.jsx(ae.Provider,{value:o,children:t})}const ce=Symbol("state-def"),M=Symbol("state-path"),q=Symbol("state-verbose"),G=Symbol("state-verbose-path"),B=Symbol("state-ssr"),ue=typeof window>"u",ge=ue?E.useEffect:E.useLayoutEffect;function ke(t={}){return{[ce]:!0,[M]:"",[q]:!1,[G]:"",[B]:!1,useState(o){const r=ue?void 0:U(t.storage),l=U(t.defaultValue),s=t.bidirectional;o??={};const a=U(o.defaultValue)??l,i=o.bidirectional??s,c=this[M],g=this[q],R=this[G],P=this[B],d=Re(),v=t.serialize??JSON.stringify,h=t.deserialize??JSON.parse,S=(u,y,A)=>{const w=y.getItem(u);w===null?$(A)&&y.setItem(u,v(A)):d.set(u,h(w))},p=he(o.onSet??(()=>{}),o.delayedSet,[]),_=E.useRef(void 0),O=E.useRef(!1);if(!O.current){O.current=!0;let u=d.get(c);$(u)||(u=a,$(u)&&d.set(c,u)),!P&&r&&S(c,r,u)}const x=E.useSyncExternalStore(d.subscribe.bind(d),d.getClientSnapshot.bind(d),d.getServerSnapshot.bind(d));if(g)if(R){const u=D(x,R);u&&oe(u)}else oe(x);const k=D(x,c,a);_.current=k,ge(()=>{!P||!r||S(c,r,k)},[]);const T=E.useEffectEvent(u=>{if(u.key!==c)return;const y=u.newValue,w=(y===null?null:h(y))??a;$(w)&&(d.set(c,w),p(w,_.current))});E.useEffect(()=>{if(i)return window.addEventListener("storage",T),()=>window.removeEventListener("storage",T)},[i]);const C=E.useCallback(u=>{const y=se(u)?u(_.current):u;d.set(c,y),p(y,_.current),r&&r.setItem(c,v(y))},[c,r,p]),F=E.useCallback(()=>{const u=a;if(!$(u)){r?.removeItem(c);return}d.set(c,u),p(u,_.current),r&&r.setItem(c,v(u))},[c,a,r,p]);return[k,C,F]},toString(){return this[M]}}}function le(t,o){const{path:r="",verbose:l,verbosePath:s,ssr:a,cache:i}=o;let c=i.proxy.get(t);c||(c=new Map,i.proxy.set(t,c));const g=c.get(r);if(g)return g;const R=new Proxy(t,{get(P,d){const v=P[d],h=r?`${r}.${String(d)}`:String(d);if(v&&typeof v=="object"&&ce in v){const S=v;let p=i.leaf.get(S);p||(p=new Map,i.leaf.set(S,p));const _=p.get(h);if(_)return _;const O=Reflect.ownKeys(S).filter(T=>typeof S[T]=="function"),x=Object.fromEntries(O.map(T=>[T,(...C)=>S[T].call({...S,[M]:h,[q]:l,[G]:s,[B]:a},...C)])),k={...S,...x};return p.set(h,k),k}return v&&typeof v=="object"?le(v,{...o,path:h}):v}});return c.set(r,R),R}function we(t,o){return le(t,{...o,verbosePath:o?.verbosePath??"",cache:{proxy:new WeakMap,leaf:new WeakMap}})}exports.VocabStateProvider=Te;exports.defineState=ke;exports.setupStorage=we;
+  <%s key={someKey} {...props} />`,v,E,N,E),te[E+v]=!0)}if(E=null,d!==void 0&&(r(d),E=""+d),i(o)&&(r(o.key),E=""+o.key),"key"in o){d={};for(var G in o)G!=="key"&&(d[G]=o[G])}else d=o;return E&&c(d,typeof e=="function"?e.displayName||e.name||"Unknown":e),R(e,E,d,s(),Y,q)}function f(e){b(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===j&&(e._payload.status==="fulfilled"?b(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function b(e){return typeof e=="object"&&e!==null&&e.$$typeof===S}var m=_,S=Symbol.for("react.transitional.element"),h=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),k=Symbol.for("react.strict_mode"),O=Symbol.for("react.profiler"),P=Symbol.for("react.consumer"),w=Symbol.for("react.context"),V=Symbol.for("react.forward_ref"),J=Symbol.for("react.suspense"),l=Symbol.for("react.suspense_list"),T=Symbol.for("react.memo"),j=Symbol.for("react.lazy"),x=Symbol.for("react.activity"),de=Symbol.for("react.client.reference"),W=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,H=Object.prototype.hasOwnProperty,be=Array.isArray,U=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var Z,Q={},K=m.react_stack_bottom_frame.bind(m,a)(),ee=U(u(a)),te={};$.Fragment=p,$.jsx=function(e,o,d){var v=1e4>W.recentlyCreatedOwnerStacks++;return g(e,o,d,!1,v?Error("react-stack-top-frame"):K,v?U(u(e)):ee)},$.jsxs=function(e,o,d){var v=1e4>W.recentlyCreatedOwnerStacks++;return g(e,o,d,!0,v?Error("react-stack-top-frame"):K,v?U(u(e)):ee)}})()),$}var oe;function Se(){return oe||(oe=1,process.env.NODE_ENV==="production"?M.exports=ve():M.exports=Ee()),M.exports}var he=Se();function L(t,n,r){if(!n)return t;const u=n.split(".");let s=t;for(const a of u)if(s!==null&&typeof s=="object"&&a in s)s=s[a];else return r;return s===void 0?r:s}function pe(t,n,r){const u=n.replace(/\[(\d+)\]/g,".$1").split(".");let s=t;for(let a=0;a<u.length-1;a++){const i=u[a],c=u[a+1];(s[i]===void 0||s[i]===null)&&(s[i]=/^\d+$/.test(c)?[]:{}),s=s[i]}return s[u[u.length-1]]=r,t}function _e(t,n=0){let r;return function(...u){r!==void 0&&clearTimeout(r),r=setTimeout(()=>{r=void 0,t.apply(this,u)},n)}}function ye(t,n,r=[]){return _.useMemo(()=>_e(t,n),r)}function se(t){const n=JSON.stringify(t,null,2).split(`
+`),r=[],u=[];for(const s of n){const a=s.match(/^(\s*)"([^"]+)"(\s*:\s*)(.+)$/);if(a){const[,i,c,y,R]=a;r.push(`${i}%c"${c}"%c${y}%c${R}`),u.push("color: #9cdcfe; font-weight: bold","color: #cccccc","color: #ce9178")}else r.push(`%c${s}`),u.push("color: #cccccc")}console.log(r.join(`
+`),...u,t)}const ue=t=>typeof t=="function",Re=t=>typeof t=="function",A=t=>typeof t<"u",C=t=>Re(t)?t():t;class Te{#e;#t;constructor(){this.uid=Math.random().toString(36).slice(2),this.#e={},this.#t=new Set}subscribe(n){return this.#t.add(n),()=>this.#t.delete(n)}getClientSnapshot(){return this.#e}getServerSnapshot(){return this.#e}get(n){return L(this.#e,n)}set(n,r){const u=L(this.#e,n),s=ue(r)?r(u):r,a={...this.#e};pe(a,n,s),this.#e=a,this.#t.forEach(i=>i())}}const le=_.createContext({});function ae(t={}){const n=_.useContext(le);return t.verbose&&console.log(`[Store uid]: ${n.uid}`),n}function ge({children:t}){const n=_.useMemo(()=>new Te,[]);return he.jsx(le.Provider,{value:n,children:t})}const ie=Symbol("state-def"),z=Symbol("state-path"),D=Symbol("state-verbose"),B=Symbol("state-verbose-path"),F=Symbol("state-ssr"),X=typeof window>"u",ce=X?_.useEffect:_.useLayoutEffect;function ke(t={}){return{[ie]:!0,[z]:"",[D]:!1,[B]:"",[F]:!1,useState(n){const r=X?void 0:C(t.storage),u=C(t.defaultValue),s=t.bidirectional;n??={};const a=C(n.defaultValue)??u,i=n.bidirectional??s,c=this[z],y=this[D],R=this[B],g=this[F],f=ae({verbose:y}),b=t.serialize??JSON.stringify,m=t.deserialize??JSON.parse,S=(l,T,j)=>{const x=T.getItem(l);x===null?A(j)&&T.setItem(l,b(j)):f.set(l,m(x))},h=ye(n.onSet??(()=>{}),n.delayedSet,[]),p=_.useRef(void 0),k=_.useRef(!1);if(!k.current){k.current=!0;let l=f.get(c);A(l)||(l=a,A(l)&&f.set(c,l)),!g&&r&&S(c,r,l)}const O=_.useSyncExternalStore(f.subscribe.bind(f),f.getClientSnapshot.bind(f),f.getServerSnapshot.bind(f));if(y)if(R){const l=L(O,R);l&&se(l)}else se(O);const P=L(O,c,a);p.current=P,ce(()=>{!g||!r||S(c,r,P)},[]);const w=_.useEffectEvent(l=>{if(l.key!==c)return;const T=l.newValue,x=(T===null?null:m(T))??a;A(x)&&(f.set(c,x),h(x,p.current))});_.useEffect(()=>{if(i)return window.addEventListener("storage",w),()=>window.removeEventListener("storage",w)},[i]);const V=_.useCallback(l=>{const T=ue(l)?l(p.current):l;f.set(c,T),h(T,p.current),r&&r.setItem(c,b(T))},[f,c,h,r,b]),J=_.useCallback(()=>{const l=a;if(!A(l)){r?.removeItem(c);return}f.set(c,l),h(l,p.current),r&&r.setItem(c,b(l))},[a,f,c,h,r,b]);return[P,V,J]},useInitialState(n){const r=X?void 0:C(t.storage),u=C(t.defaultValue);n??={};const s=C(n.defaultValue)??u,a=this[z],i=this[D],c=this[F],y=ae({verbose:i}),R=t.serialize??JSON.stringify,g=t.deserialize??JSON.parse,f=(S,h,p)=>{const k=h.getItem(S);k===null?A(p)&&h.setItem(S,R(p)):y.set(S,g(k))},b=_.useRef(!1);let m;b.current||(b.current=!0,m=y.get(a),A(m)||(m=s,A(m)&&y.set(a,m)),!c&&r&&f(a,r,m)),ce(()=>{!c||!r||f(a,r,m)},[])},toString(){return this[z]}}}function fe(t,n){const{path:r="",verbose:u,verbosePath:s,ssr:a,cache:i}=n;let c=i.proxy.get(t);c||(c=new Map,i.proxy.set(t,c));const y=c.get(r);if(y)return y;const R=new Proxy(t,{get(g,f){const b=g[f],m=r?`${r}.${String(f)}`:String(f);if(b&&typeof b=="object"&&ie in b){const S=b;let h=i.leaf.get(S);h||(h=new Map,i.leaf.set(S,h));const p=h.get(m);if(p)return p;const k=Reflect.ownKeys(S).filter(w=>typeof S[w]=="function"),O=Object.fromEntries(k.map(w=>[w,(...V)=>S[w].call({...S,[z]:m,[D]:u,[B]:s,[F]:a},...V)])),P={...S,...O};return h.set(m,P),P}return b&&typeof b=="object"?fe(b,{...n,path:m}):b}});return c.set(r,R),R}function we(t,n){return fe(t,{...n,verbosePath:n?.verbosePath??"",cache:{proxy:new WeakMap,leaf:new WeakMap}})}exports.VocabStateProvider=ge;exports.defineState=ke;exports.setupStorage=we;

package/dist/state-vocab.es.js

@@ -1,10 +1,10 @@
-import Ee, { useMemo as ae, createContext as pe, useContext as Se, useRef as ee, useSyncExternalStore as he, useEffect as ce, useLayoutEffect as _e, useEffectEvent as ye, useCallback as te } from "react";
-var I = { exports: {} }, C = {};
-var re;
-function Re() {
-  if (re) return C;
-  re = 1;
-  var t = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
+import he, { useMemo as ue, createContext as pe, useContext as _e, useRef as G, useEffect as ie, useLayoutEffect as ye, useSyncExternalStore as Re, useEffectEvent as Te, useCallback as re } from "react";
+var Y = { exports: {} }, V = {};
+var ne;
+function ge() {
+  if (ne) return V;
+  ne = 1;
+  var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
   function r(l, s, a) {
     var i = null;
     if (a !== void 0 && (i = "" + a), s.key !== void 0 && (i = "" + s.key), "key" in s) {
@@ -20,129 +20,129 @@ function Re() {
       props: a
     };
   }
-  return C.Fragment = o, C.jsx = r, C.jsxs = r, C;
+  return V.Fragment = n, V.jsx = r, V.jsxs = r, V;
 }
-var N = {};
-var ne;
-function Te() {
-  return ne || (ne = 1, process.env.NODE_ENV !== "production" && (function() {
+var I = {};
+var oe;
+function ke() {
+  return oe || (oe = 1, process.env.NODE_ENV !== "production" && (function() {
     function t(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === me ? null : e.displayName || e.name || null;
+        return e.$$typeof === ve ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case h:
+        case p:
           return "Fragment";
-        case P:
-          return "Profiler";
         case A:
+          return "Profiler";
+        case g:
           return "StrictMode";
-        case F:
+        case L:
           return "Suspense";
         case u:
           return "SuspenseList";
-        case k:
+        case x:
           return "Activity";
       }
       if (typeof e == "object")
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case p:
+          case h:
             return "Portal";
-          case R:
+          case k:
             return e.displayName || "Context";
-          case g:
+          case w:
             return (e._context.displayName || "Context") + ".Consumer";
-          case j:
-            var n = e.render;
-            return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case _:
-            return n = e.displayName || null, n !== null ? n : t(e.type) || "Memo";
-          case x:
-            n = e._payload, e = e._init;
+          case C:
+            var o = e.render;
+            return e = e.displayName, e || (e = o.displayName || o.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case R:
+            return o = e.displayName || null, o !== null ? o : t(e.type) || "Memo";
+          case O:
+            o = e._payload, e = e._init;
             try {
-              return t(e(n));
+              return t(e(o));
             } catch {
             }
         }
       return null;
     }
-    function o(e) {
+    function n(e) {
       return "" + e;
     }
     function r(e) {
       try {
-        o(e);
-        var n = !1;
+        n(e);
+        var o = !1;
       } catch {
-        n = !0;
+        o = !0;
       }
-      if (n) {
-        n = console;
-        var f = n.error, m = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return f.call(
-          n,
+      if (o) {
+        o = console;
+        var d = o.error, v = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return d.call(
+          o,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          m
-        ), o(e);
+          v
+        ), n(e);
       }
     }
     function l(e) {
-      if (e === h) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === x)
+      if (e === p) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === O)
         return "<...>";
       try {
-        var n = t(e);
-        return n ? "<" + n + ">" : "<...>";
+        var o = t(e);
+        return o ? "<" + o + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
     function s() {
-      var e = M.A;
+      var e = J.A;
       return e === null ? null : e.getOwner();
     }
     function a() {
       return Error("react-stack-top-frame");
     }
     function i(e) {
-      if (B.call(e, "key")) {
-        var n = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (n && n.isReactWarning) return !1;
+      if (H.call(e, "key")) {
+        var o = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (o && o.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function c(e, n) {
-      function f() {
-        X || (X = !0, console.error(
+    function c(e, o) {
+      function d() {
+        Z || (Z = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          n
+          o
         ));
       }
-      f.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: f,
+      d.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: d,
         configurable: !0
       });
     }
-    function T() {
+    function _() {
       var e = t(this.type);
-      return H[e] || (H[e] = !0, console.error(
+      return Q[e] || (Q[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function y(e, n, f, m, $, L) {
-      var b = f.ref;
+    function y(e, o, d, v, z, U) {
+      var E = d.ref;
       return e = {
-        $$typeof: E,
+        $$typeof: S,
         type: e,
-        key: n,
-        props: f,
-        _owner: m
-      }, (b !== void 0 ? b : null) !== null ? Object.defineProperty(e, "ref", {
+        key: o,
+        props: d,
+        _owner: v
+      }, (E !== void 0 ? E : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: T
+        get: _
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -157,112 +157,112 @@ function Te() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: $
+        value: z
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: L
+        value: U
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function w(e, n, f, m, $, L) {
-      var b = n.children;
-      if (b !== void 0)
-        if (m)
-          if (be(b)) {
-            for (m = 0; m < b.length; m++)
-              d(b[m]);
-            Object.freeze && Object.freeze(b);
+    function T(e, o, d, v, z, U) {
+      var E = o.children;
+      if (E !== void 0)
+        if (v)
+          if (Ee(E)) {
+            for (v = 0; v < E.length; v++)
+              f(E[v]);
+            Object.freeze && Object.freeze(E);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else d(b);
-      if (B.call(n, "key")) {
-        b = t(e);
-        var O = Object.keys(n).filter(function(ve) {
-          return ve !== "key";
+        else f(E);
+      if (H.call(o, "key")) {
+        E = t(e);
+        var j = Object.keys(o).filter(function(Se) {
+          return Se !== "key";
         });
-        m = 0 < O.length ? "{key: someKey, " + O.join(": ..., ") + ": ...}" : "{key: someKey}", K[b + m] || (O = 0 < O.length ? "{" + O.join(": ..., ") + ": ...}" : "{}", console.error(
+        v = 0 < j.length ? "{key: someKey, " + j.join(": ..., ") + ": ...}" : "{key: someKey}", te[E + v] || (j = 0 < j.length ? "{" + j.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          m,
-          b,
-          O,
-          b
-        ), K[b + m] = !0);
+          v,
+          E,
+          j,
+          E
+        ), te[E + v] = !0);
       }
-      if (b = null, f !== void 0 && (r(f), b = "" + f), i(n) && (r(n.key), b = "" + n.key), "key" in n) {
-        f = {};
-        for (var W in n)
-          W !== "key" && (f[W] = n[W]);
-      } else f = n;
-      return b && c(
-        f,
+      if (E = null, d !== void 0 && (r(d), E = "" + d), i(o) && (r(o.key), E = "" + o.key), "key" in o) {
+        d = {};
+        for (var q in o)
+          q !== "key" && (d[q] = o[q]);
+      } else d = o;
+      return E && c(
+        d,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
       ), y(
         e,
-        b,
-        f,
+        E,
+        d,
         s(),
-        $,
-        L
+        z,
+        U
       );
     }
-    function d(e) {
-      v(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === x && (e._payload.status === "fulfilled" ? v(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    function f(e) {
+      m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === O && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
-    function v(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === E;
+    function m(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === S;
     }
-    var S = Ee, E = Symbol.for("react.transitional.element"), p = Symbol.for("react.portal"), h = Symbol.for("react.fragment"), A = Symbol.for("react.strict_mode"), P = Symbol.for("react.profiler"), g = Symbol.for("react.consumer"), R = Symbol.for("react.context"), j = Symbol.for("react.forward_ref"), F = Symbol.for("react.suspense"), u = Symbol.for("react.suspense_list"), _ = Symbol.for("react.memo"), x = Symbol.for("react.lazy"), k = Symbol.for("react.activity"), me = Symbol.for("react.client.reference"), M = S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, B = Object.prototype.hasOwnProperty, be = Array.isArray, z = console.createTask ? console.createTask : function() {
+    var b = he, S = Symbol.for("react.transitional.element"), h = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), g = Symbol.for("react.strict_mode"), A = Symbol.for("react.profiler"), w = Symbol.for("react.consumer"), k = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), L = Symbol.for("react.suspense"), u = Symbol.for("react.suspense_list"), R = Symbol.for("react.memo"), O = Symbol.for("react.lazy"), x = Symbol.for("react.activity"), ve = Symbol.for("react.client.reference"), J = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, H = Object.prototype.hasOwnProperty, Ee = Array.isArray, W = console.createTask ? console.createTask : function() {
       return null;
     };
-    S = {
+    b = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var X, H = {}, Z = S.react_stack_bottom_frame.bind(
-      S,
+    var Z, Q = {}, K = b.react_stack_bottom_frame.bind(
+      b,
       a
-    )(), Q = z(l(a)), K = {};
-    N.Fragment = h, N.jsx = function(e, n, f) {
-      var m = 1e4 > M.recentlyCreatedOwnerStacks++;
-      return w(
+    )(), ee = W(l(a)), te = {};
+    I.Fragment = p, I.jsx = function(e, o, d) {
+      var v = 1e4 > J.recentlyCreatedOwnerStacks++;
+      return T(
         e,
-        n,
-        f,
+        o,
+        d,
         !1,
-        m ? Error("react-stack-top-frame") : Z,
-        m ? z(l(e)) : Q
+        v ? Error("react-stack-top-frame") : K,
+        v ? W(l(e)) : ee
       );
-    }, N.jsxs = function(e, n, f) {
-      var m = 1e4 > M.recentlyCreatedOwnerStacks++;
-      return w(
+    }, I.jsxs = function(e, o, d) {
+      var v = 1e4 > J.recentlyCreatedOwnerStacks++;
+      return T(
         e,
-        n,
-        f,
+        o,
+        d,
         !0,
-        m ? Error("react-stack-top-frame") : Z,
-        m ? z(l(e)) : Q
+        v ? Error("react-stack-top-frame") : K,
+        v ? W(l(e)) : ee
       );
     };
-  })()), N;
+  })()), I;
 }
-var oe;
-function ge() {
-  return oe || (oe = 1, process.env.NODE_ENV === "production" ? I.exports = Re() : I.exports = Te()), I.exports;
+var se;
+function we() {
+  return se || (se = 1, process.env.NODE_ENV === "production" ? Y.exports = ge() : Y.exports = ke()), Y.exports;
 }
-var ke = ge();
-function D(t, o, r) {
-  if (!o)
+var xe = we();
+function M(t, n, r) {
+  if (!n)
     return t;
-  const l = o.split(".");
+  const l = n.split(".");
   let s = t;
   for (const a of l)
     if (s !== null && typeof s == "object" && a in s)
@@ -271,8 +271,8 @@ function D(t, o, r) {
       return r;
   return s === void 0 ? r : s;
 }
-function we(t, o, r) {
-  const l = o.replace(/\[(\d+)\]/g, ".$1").split(".");
+function Pe(t, n, r) {
+  const l = n.replace(/\[(\d+)\]/g, ".$1").split(".");
   let s = t;
   for (let a = 0; a < l.length - 1; a++) {
     const i = l[a], c = l[a + 1];
@@ -280,29 +280,29 @@ function we(t, o, r) {
   }
   return s[l[l.length - 1]] = r, t;
 }
-function Pe(t, o = 0) {
+function Ae(t, n = 0) {
   let r;
   return function(...l) {
     r !== void 0 && clearTimeout(r), r = setTimeout(() => {
       r = void 0, t.apply(this, l);
-    }, o);
+    }, n);
   };
 }
-function xe(t, o, r = []) {
-  return ae(
-    () => Pe(t, o),
+function Oe(t, n, r = []) {
+  return ue(
+    () => Ae(t, n),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     r
   );
 }
-function se(t) {
-  const o = JSON.stringify(t, null, 2).split(`
+function ae(t) {
+  const n = JSON.stringify(t, null, 2).split(`
 `), r = [], l = [];
-  for (const s of o) {
+  for (const s of n) {
     const a = s.match(/^(\s*)"([^"]+)"(\s*:\s*)(.+)$/);
     if (a) {
-      const [, i, c, T, y] = a;
-      r.push(`${i}%c"${c}"%c${T}%c${y}`), l.push(
+      const [, i, c, _, y] = a;
+      r.push(`${i}%c"${c}"%c${_}%c${y}`), l.push(
         "color: #9cdcfe; font-weight: bold",
         "color: #cccccc",
         "color: #ce9178"
@@ -313,15 +313,15 @@ function se(t) {
   console.log(r.join(`
 `), ...l, t);
 }
-const ue = (t) => typeof t == "function", Ae = (t) => typeof t == "function", V = (t) => typeof t < "u", J = (t) => Ae(t) ? t() : t;
-class Oe {
+const fe = (t) => typeof t == "function", je = (t) => typeof t == "function", P = (t) => typeof t < "u", N = (t) => je(t) ? t() : t;
+class Ne {
   #e;
   #t;
   constructor() {
     this.uid = Math.random().toString(36).slice(2), this.#e = {}, this.#t = /* @__PURE__ */ new Set();
   }
-  subscribe(o) {
-    return this.#t.add(o), () => this.#t.delete(o);
+  subscribe(n) {
+    return this.#t.add(n), () => this.#t.delete(n);
   }
   getClientSnapshot() {
     return this.#e;
@@ -329,154 +329,167 @@ class Oe {
   getServerSnapshot() {
     return this.#e;
   }
-  get(o) {
-    return D(this.#e, o);
+  get(n) {
+    return M(this.#e, n);
   }
-  set(o, r) {
-    const l = D(this.#e, o), s = ue(r) ? r(l) : r, a = { ...this.#e };
-    we(a, o, s), this.#e = a, this.#t.forEach((i) => i());
+  set(n, r) {
+    const l = M(this.#e, n), s = fe(r) ? r(l) : r, a = { ...this.#e };
+    Pe(a, n, s), this.#e = a, this.#t.forEach((i) => i());
   }
 }
-const le = pe({});
-function je() {
-  return Se(le);
+const de = pe({});
+function ce(t = {}) {
+  const n = _e(de);
+  return t.verbose && console.log(`[Store uid]: ${n.uid}`), n;
 }
 function Ve({ children: t }) {
-  const o = ae(() => new Oe(), []);
-  return /* @__PURE__ */ ke.jsx(le.Provider, { value: o, children: t });
+  const n = ue(() => new Ne(), []);
+  return /* @__PURE__ */ xe.jsx(de.Provider, { value: n, children: t });
 }
-const ie = Symbol("state-def"), Y = Symbol("state-path"), U = Symbol("state-verbose"), q = Symbol("state-verbose-path"), G = Symbol("state-ssr"), fe = typeof window > "u", Ce = fe ? ce : _e;
-function $e(t = {}) {
+const me = Symbol("state-def"), $ = Symbol("state-path"), D = Symbol("state-verbose"), B = Symbol("state-verbose-path"), F = Symbol("state-ssr"), X = typeof window > "u", le = X ? ie : ye;
+function Ie(t = {}) {
   return {
-    [ie]: !0,
+    [me]: !0,
     // marks this object as a leaf in the router tree
-    [Y]: "",
+    [$]: "",
     // placeholder; injected at runtime by injectPaths()
-    [U]: !1,
+    [D]: !1,
     // placeholder
-    [q]: "",
+    [B]: "",
     // placeholder
-    [G]: !1,
+    [F]: !1,
     // placeholder
-    useState(o) {
-      const r = fe ? void 0 : J(t.storage), l = J(t.defaultValue), s = t.bidirectional;
-      o ??= {};
-      const a = J(o.defaultValue) ?? l, i = o.bidirectional ?? s, c = this[Y], T = this[U], y = this[q], w = this[G], d = je(), v = t.serialize ?? JSON.stringify, S = t.deserialize ?? JSON.parse, E = (u, _, x) => {
-        const k = _.getItem(u);
-        k === null ? V(x) && _.setItem(u, v(x)) : d.set(u, S(k));
-      }, p = xe(
-        o.onSet ?? (() => {
+    useState(n) {
+      const r = X ? void 0 : N(t.storage), l = N(t.defaultValue), s = t.bidirectional;
+      n ??= {};
+      const a = N(n.defaultValue) ?? l, i = n.bidirectional ?? s, c = this[$], _ = this[D], y = this[B], T = this[F], f = ce({ verbose: _ }), m = t.serialize ?? JSON.stringify, b = t.deserialize ?? JSON.parse, S = (u, R, O) => {
+        const x = R.getItem(u);
+        x === null ? P(O) && R.setItem(u, m(O)) : f.set(u, b(x));
+      }, h = Oe(
+        n.onSet ?? (() => {
         }),
-        o.delayedSet,
+        n.delayedSet,
         []
-      ), h = ee(void 0), A = ee(!1);
-      if (!A.current) {
-        A.current = !0;
-        let u = d.get(c);
-        V(u) || (u = a, V(u) && d.set(c, u)), !w && r && E(c, r, u);
+      ), p = G(void 0), g = G(!1);
+      if (!g.current) {
+        g.current = !0;
+        let u = f.get(c);
+        P(u) || (u = a, P(u) && f.set(c, u)), !T && r && S(c, r, u);
       }
-      const P = he(
-        d.subscribe.bind(d),
-        d.getClientSnapshot.bind(d),
-        d.getServerSnapshot.bind(d)
+      const A = Re(
+        f.subscribe.bind(f),
+        f.getClientSnapshot.bind(f),
+        f.getServerSnapshot.bind(f)
       );
-      if (T)
+      if (_)
         if (y) {
-          const u = D(P, y);
-          u && se(u);
+          const u = M(A, y);
+          u && ae(u);
         } else
-          se(P);
-      const g = D(P, c, a);
-      h.current = g, Ce(() => {
-        !w || !r || E(c, r, g);
+          ae(A);
+      const w = M(A, c, a);
+      p.current = w, le(() => {
+        !T || !r || S(c, r, w);
       }, []);
-      const R = ye((u) => {
+      const k = Te((u) => {
         if (u.key !== c)
           return;
-        const _ = u.newValue, k = (_ === null ? null : S(_)) ?? a;
-        V(k) && (d.set(c, k), p(k, h.current));
+        const R = u.newValue, x = (R === null ? null : b(R)) ?? a;
+        P(x) && (f.set(c, x), h(x, p.current));
       });
-      ce(() => {
+      ie(() => {
         if (i)
-          return window.addEventListener("storage", R), () => window.removeEventListener("storage", R);
+          return window.addEventListener("storage", k), () => window.removeEventListener("storage", k);
       }, [i]);
-      const j = te((u) => {
-        const _ = ue(u) ? u(h.current) : u;
-        d.set(c, _), p(_, h.current), r && r.setItem(c, v(_));
-      }, [c, r, p]), F = te(() => {
+      const C = re((u) => {
+        const R = fe(u) ? u(p.current) : u;
+        f.set(c, R), h(R, p.current), r && r.setItem(c, m(R));
+      }, [f, c, h, r, m]), L = re(() => {
         const u = a;
-        if (!V(u)) {
+        if (!P(u)) {
           r?.removeItem(c);
           return;
         }
-        d.set(c, u), p(u, h.current), r && r.setItem(c, v(u));
-      }, [c, a, r, p]);
+        f.set(c, u), h(u, p.current), r && r.setItem(c, m(u));
+      }, [a, f, c, h, r, m]);
       return [
-        g,
-        j,
-        F
+        w,
+        C,
+        L
       ];
     },
+    useInitialState(n) {
+      const r = X ? void 0 : N(t.storage), l = N(t.defaultValue);
+      n ??= {};
+      const s = N(n.defaultValue) ?? l, a = this[$], i = this[D], c = this[F], _ = ce({ verbose: i }), y = t.serialize ?? JSON.stringify, T = t.deserialize ?? JSON.parse, f = (S, h, p) => {
+        const g = h.getItem(S);
+        g === null ? P(p) && h.setItem(S, y(p)) : _.set(S, T(g));
+      }, m = G(!1);
+      let b;
+      m.current || (m.current = !0, b = _.get(a), P(b) || (b = s, P(b) && _.set(a, b)), !c && r && f(a, r, b)), le(() => {
+        !c || !r || f(a, r, b);
+      }, []);
+    },
     /** Returns the fully qualified job name (dot-separated path). */
     toString() {
-      return this[Y];
+      return this[$];
     }
   };
 }
-function de(t, o) {
+function be(t, n) {
   const {
     path: r = "",
     verbose: l,
     verbosePath: s,
     ssr: a,
     cache: i
-  } = o;
+  } = n;
   let c = i.proxy.get(t);
   c || (c = /* @__PURE__ */ new Map(), i.proxy.set(t, c));
-  const T = c.get(r);
-  if (T)
-    return T;
+  const _ = c.get(r);
+  if (_)
+    return _;
   const y = new Proxy(t, {
-    get(w, d) {
-      const v = w[d], S = r ? `${r}.${String(d)}` : String(d);
-      if (v && typeof v == "object" && ie in v) {
-        const E = v;
-        let p = i.leaf.get(E);
-        p || (p = /* @__PURE__ */ new Map(), i.leaf.set(E, p));
-        const h = p.get(S);
-        if (h)
-          return h;
-        const A = Reflect.ownKeys(E).filter(
-          (R) => typeof E[R] == "function"
-        ), P = Object.fromEntries(
-          A.map((R) => [
-            R,
-            (...j) => E[R].call(
+    get(T, f) {
+      const m = T[f], b = r ? `${r}.${String(f)}` : String(f);
+      if (m && typeof m == "object" && me in m) {
+        const S = m;
+        let h = i.leaf.get(S);
+        h || (h = /* @__PURE__ */ new Map(), i.leaf.set(S, h));
+        const p = h.get(b);
+        if (p)
+          return p;
+        const g = Reflect.ownKeys(S).filter(
+          (k) => typeof S[k] == "function"
+        ), A = Object.fromEntries(
+          g.map((k) => [
+            k,
+            (...C) => S[k].call(
               {
-                ...E,
-                [Y]: S,
-                [U]: l,
-                [q]: s,
-                [G]: a
+                ...S,
+                [$]: b,
+                [D]: l,
+                [B]: s,
+                [F]: a
               },
-              ...j
+              ...C
             )
           ])
-        ), g = { ...E, ...P };
-        return p.set(S, g), g;
+        ), w = { ...S, ...A };
+        return h.set(b, w), w;
       }
-      return v && typeof v == "object" ? de(v, {
-        ...o,
-        path: S
-      }) : v;
+      return m && typeof m == "object" ? be(m, {
+        ...n,
+        path: b
+      }) : m;
     }
   });
   return c.set(r, y), y;
 }
-function Ie(t, o) {
-  return de(t, {
-    ...o,
-    verbosePath: o?.verbosePath ?? "",
+function $e(t, n) {
+  return be(t, {
+    ...n,
+    verbosePath: n?.verbosePath ?? "",
     cache: {
       proxy: /* @__PURE__ */ new WeakMap(),
       leaf: /* @__PURE__ */ new WeakMap()
@@ -485,6 +498,6 @@ function Ie(t, o) {
 }
 export {
   Ve as VocabStateProvider,
-  $e as defineState,
-  Ie as setupStorage
+  Ie as defineState,
+  $e as setupStorage
 };

package/dist/types/context.d.ts

@@ -1,4 +1,9 @@
 import { type PropsWithChildren } from "react";
 import VocabStore from "./store";
-export declare function useVocabStoreContext(): VocabStore;
+/**
+ * @see method from from https://zustand.docs.pmnd.rs/learn/guides/nextjs
+ */
+export declare function useVocabStoreContext(options?: {
+    verbose?: boolean;
+}): VocabStore;
 export declare function VocabStoreContextProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/types/state.d.ts

@@ -23,6 +23,16 @@ export declare function defineState<D>(definitionOptions?: {
         bidirectional?: true;
         onSet?(nextValue: NoInfer<D>, prevValue: NoInfer<D>): void;
     }): readonly [D, (nextValue: ValueOrTransformer<D>) => void, () => void];
+    useInitialState(this: {
+        [STATE_PATH]: string;
+        [STATE_VERBOSE]: boolean;
+        [STATE_SSR]: boolean;
+    }, options?: {
+        defaultValue?: ValueOrFactory<D>;
+        delayedSet?: number;
+        bidirectional?: true;
+        onSet?(nextValue: NoInfer<D>, prevValue: NoInfer<D>): void;
+    }): void;
     /** Returns the fully qualified job name (dot-separated path). */
     toString(this: {
         [STATE_PATH]: string;

package/package.json

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