@yakocloud/state-vocab 3.1.1 → 3.1.3

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 p=require("react"),se=Symbol("state-def"),D=Symbol("state-path"),U=Symbol("state-verbose"),q=Symbol("state-verbose-path"),G=Symbol("state-ssr");function ee(t,c,n){if(!c)return t;const m=c.split(".");let s=t;for(const u of m)if(s!==null&&typeof s=="object"&&u in s)s=s[u];else return n;return s===void 0?n:s}function fe(t,c=0){let n;return function(...m){n!==void 0&&clearTimeout(n),n=setTimeout(()=>{n=void 0,t.apply(this,m)},c)}}function de(t,c,n=[]){return p.useMemo(()=>fe(t,c),n)}function te(t){const c=JSON.stringify(t,null,2).split(`
-`),n=[],m=[];for(const s of c){const u=s.match(/^(\s*)"([^"]+)"(\s*:\s*)(.+)$/);if(u){const[,b,o,g,y]=u;n.push(`${b}%c"${o}"%c${g}%c${y}`),m.push("color: #9cdcfe; font-weight: bold","color: #cccccc","color: #ce9178")}else n.push(`%c${s}`),m.push("color: #cccccc")}console.log(n.join(`
-`),...m,t)}const me=t=>typeof t=="function",be=t=>typeof t=="function",C=t=>typeof t<"u",J=t=>be(t)?t():t;var Y={exports:{}},I={};var re;function Ee(){if(re)return I;re=1;var t=Symbol.for("react.transitional.element"),c=Symbol.for("react.fragment");function n(m,s,u){var b=null;if(u!==void 0&&(b=""+u),s.key!==void 0&&(b=""+s.key),"key"in s){u={};for(var o in s)o!=="key"&&(u[o]=s[o])}else u=s;return s=u.ref,{$$typeof:t,type:m,key:b,ref:s!==void 0?s:null,props:u}}return I.Fragment=c,I.jsx=n,I.jsxs=n,I}var $={};var ne;function ve(){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===ue?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case T:return"Fragment";case A:return"Profiler";case x:return"StrictMode";case F:return"Suspense";case a: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 _:return"Portal";case h:return e.displayName||"Context";case k:return(e._context.displayName||"Context")+".Consumer";case N:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case R:return r=e.displayName||null,r!==null?r:t(e.type)||"Memo";case O:r=e._payload,e=e._init;try{return t(e(r))}catch{}}return null}function c(e){return""+e}function n(e){try{c(e);var r=!1}catch{r=!0}if(r){r=console;var l=r.error,f=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return l.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",f),c(e)}}function m(e){if(e===T)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===O)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function s(){var e=M.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function b(e){if(B.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function o(e,r){function l(){X||(X=!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)",r))}l.isReactWarning=!0,Object.defineProperty(e,"key",{get:l,configurable:!0})}function g(){var e=t(this.type);return H[e]||(H[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,r,l,f,V,L){var d=l.ref;return e={$$typeof:v,type:e,key:r,props:l,_owner:f},(d!==void 0?d: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:V}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:L}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function P(e,r,l,f,V,L){var d=r.children;if(d!==void 0)if(f)if(le(d)){for(f=0;f<d.length;f++)i(d[f]);Object.freeze&&Object.freeze(d)}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 i(d);if(B.call(r,"key")){d=t(e);var j=Object.keys(r).filter(function(ie){return ie!=="key"});f=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",K[d+f]||(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 E=require("react");var Y={exports:{}},N={};var te;function me(){if(te)return N;te=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){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=n,N.jsx=r,N.jsxs=r,N}var V={};var re;function ve(){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===fe?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 g:return e.displayName||"Context";case k:return(e._context.displayName||"Context")+".Consumer";case C:var o=e.render;return e=e.displayName,e||(e=o.displayName||o.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case y:return o=e.displayName||null,o!==null?o:t(e.type)||"Memo";case A: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 f=o.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return f.call(o,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),n(e)}}function l(e){if(e===_)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===A)return"<...>";try{var o=t(e);return o?"<"+o+">":"<...>"}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 o=Object.getOwnPropertyDescriptor(e,"key").get;if(o&&o.isReactWarning)return!1}return e.key!==void 0}function c(e,o){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)",o))}f.isReactWarning=!0,Object.defineProperty(e,"key",{get:f,configurable:!0})}function R(){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 T(e,o,f,b,I,W){var m=f.ref;return e={$$typeof:S,type:e,key:o,props:f,_owner:b},(m!==void 0?m:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:R}):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,o,f,b,I,W){var m=o.children;if(m!==void 0)if(b)if(de(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(o,"key")){m=t(e);var j=Object.keys(o).filter(function(be){return be!=="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:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,f,d,j,d),K[d+f]=!0)}if(d=null,l!==void 0&&(n(l),d=""+l),b(r)&&(n(r.key),d=""+r.key),"key"in r){l={};for(var W in r)W!=="key"&&(l[W]=r[W])}else l=r;return d&&o(l,typeof e=="function"?e.displayName||e.name||"Unknown":e),y(e,d,l,s(),V,L)}function i(e){E(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===O&&(e._payload.status==="fulfilled"?E(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function E(e){return typeof e=="object"&&e!==null&&e.$$typeof===v}var S=p,v=Symbol.for("react.transitional.element"),_=Symbol.for("react.portal"),T=Symbol.for("react.fragment"),x=Symbol.for("react.strict_mode"),A=Symbol.for("react.profiler"),k=Symbol.for("react.consumer"),h=Symbol.for("react.context"),N=Symbol.for("react.forward_ref"),F=Symbol.for("react.suspense"),a=Symbol.for("react.suspense_list"),R=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),w=Symbol.for("react.activity"),ue=Symbol.for("react.client.reference"),M=S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,B=Object.prototype.hasOwnProperty,le=Array.isArray,z=console.createTask?console.createTask:function(){return null};S={react_stack_bottom_frame:function(e){return e()}};var X,H={},Z=S.react_stack_bottom_frame.bind(S,u)(),Q=z(m(u)),K={};$.Fragment=T,$.jsx=function(e,r,l){var f=1e4>M.recentlyCreatedOwnerStacks++;return P(e,r,l,!1,f?Error("react-stack-top-frame"):Z,f?z(m(e)):Q)},$.jsxs=function(e,r,l){var f=1e4>M.recentlyCreatedOwnerStacks++;return P(e,r,l,!0,f?Error("react-stack-top-frame"):Z,f?z(m(e)):Q)}})()),$}var oe;function _e(){return oe||(oe=1,process.env.NODE_ENV==="production"?Y.exports=Ee():Y.exports=ve()),Y.exports}_e();const pe=p.createContext({});function Se(){return p.useContext(pe)}const ae=typeof window>"u",Te=ae?p.useEffect:p.useLayoutEffect;function Re(t={}){return{[se]:!0,[D]:"",[U]:!1,[q]:"",[G]:!1,useState(c){const n=ae?void 0:J(t.storage),m=J(t.defaultValue),s=t.bidirectional;c??={};const u=J(c.defaultValue)??m,b=c.bidirectional??s,o=this[D],g=this[U],y=this[q],P=this[G],i=Se(),E=t.serialize??JSON.stringify,S=t.deserialize??JSON.parse,v=(a,R,O)=>{const w=R.getItem(a);w===null?C(O)&&R.setItem(a,E(O)):i.set(a,S(w))},_=de(c.onSet??(()=>{}),c.delayedSet,[]),T=p.useRef(void 0),x=p.useRef(!1);if(!x.current){x.current=!0;let a=i.get(o);C(a)||(a=u,C(a)&&i.set(o,a)),!P&&n&&v(o,n,a)}const A=p.useSyncExternalStore(i.subscribe.bind(i),i.getClientSnapshot.bind(i),i.getServerSnapshot.bind(i));if(g)if(y){const a=ee(A,y);a&&te(a)}else te(A);const k=ee(A,o,u);T.current=k,Te(()=>{!P||!n||v(o,n,k)},[]);const h=p.useEffectEvent(a=>{if(a.key!==o)return;const R=a.newValue,w=(R===null?null:S(R))??u;C(w)&&(i.set(o,w),_(w,T.current))});p.useEffect(()=>{if(b)return window.addEventListener("storage",h),()=>window.removeEventListener("storage",h)},[b]);const N=p.useCallback(a=>{const R=me(a)?a(T.current):a;i.set(o,R),_(R,T.current),n&&n.setItem(o,E(R))},[o,n,_]),F=p.useCallback(()=>{const a=u;if(!C(a)){n?.removeItem(o);return}i.set(o,a),_(a,T.current),n&&n.setItem(o,E(a))},[o,u,n,_]);return[k,N,F]},toString(){return this[D]}}}function ce(t,c){const{path:n="",verbose:m,verbosePath:s,ssr:u,cache:b}=c;let o=b.proxy.get(t);o||(o=new Map,b.proxy.set(t,o));const g=o.get(n);if(g)return g;const y=new Proxy(t,{get(P,i){const E=P[i],S=n?`${n}.${String(i)}`:String(i);if(E&&typeof E=="object"&&se in E){const v=E;let _=b.leaf.get(v);_||(_=new Map,b.leaf.set(v,_));const T=_.get(S);if(T)return T;const x=Reflect.ownKeys(v).filter(h=>typeof v[h]=="function"),A=Object.fromEntries(x.map(h=>[h,(...N)=>v[h].call({...v,[D]:S,[U]:m,[q]:s,[G]:u},...N)])),k={...v,...A};return _.set(S,k),k}return E&&typeof E=="object"?ce(E,{...c,path:S}):E}});return o.set(n,y),y}function ye(t,c){return ce(t,{...c,verbosePath:c?.verbosePath??"",cache:{proxy:new WeakMap,leaf:new WeakMap}})}exports.defineState=Re;exports.setupStorage=ye;
+  <%s key={someKey} {...props} />`,b,m,j,m),ee[m+b]=!0)}if(m=null,f!==void 0&&(r(f),m=""+f),i(o)&&(r(o.key),m=""+o.key),"key"in o){f={};for(var J in o)J!=="key"&&(f[J]=o[J])}else f=o;return m&&c(f,typeof e=="function"?e.displayName||e.name||"Unknown":e),T(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"),g=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"),fe=Symbol.for("react.client.reference"),z=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,X=Object.prototype.hasOwnProperty,de=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,o,f){var b=1e4>z.recentlyCreatedOwnerStacks++;return P(e,o,f,!1,b?Error("react-stack-top-frame"):Q,b?L(l(e)):K)},V.jsxs=function(e,o,f){var b=1e4>z.recentlyCreatedOwnerStacks++;return P(e,o,f,!0,b?Error("react-stack-top-frame"):Q,b?L(l(e)):K)}})()),V}var ne;function Ee(){return ne||(ne=1,process.env.NODE_ENV==="production"?Y.exports=me():Y.exports=ve()),Y.exports}var Se=Ee();function D(t,n,r){if(!n)return t;const l=n.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 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];(s[i]===void 0||s[i]===null)&&(s[i]=/^\d+$/.test(c)?[]:{}),s=s[i]}return s[l[l.length-1]]=r,t}function he(t,n=0){let r;return function(...l){r!==void 0&&clearTimeout(r),r=setTimeout(()=>{r=void 0,t.apply(this,l)},n)}}function _e(t,n,r=[]){return E.useMemo(()=>he(t,n),r)}function oe(t){const n=JSON.stringify(t,null,2).split(`
+`),r=[],l=[];for(const s of n){const a=s.match(/^(\s*)"([^"]+)"(\s*:\s*)(.+)$/);if(a){const[,i,c,R,T]=a;r.push(`${i}%c"${c}"%c${R}%c${T}`),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",ye=t=>typeof t=="function",$=t=>typeof t<"u",U=t=>ye(t)?t():t;class Re{#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 D(this.#e,n)}set(n,r){const l=D(this.#e,n),s=se(r)?r(l):r,a={...this.#e};pe(a,n,s),this.#e=a,this.#t.forEach(i=>i())}}const ae=E.createContext({});function ce(t={}){const n=E.useContext(ae);return t.verbose&&console.log(`[${ce.name}]: `,n.uid),n}function Te({children:t}){const n=E.useMemo(()=>new Re,[]);return Se.jsx(ae.Provider,{value:n,children:t})}const ue=Symbol("state-def"),M=Symbol("state-path"),q=Symbol("state-verbose"),G=Symbol("state-verbose-path"),B=Symbol("state-ssr"),le=typeof window>"u",ge=le?E.useEffect:E.useLayoutEffect;function ke(t={}){return{[ue]:!0,[M]:"",[q]:!1,[G]:"",[B]:!1,useState(n){const r=le?void 0:U(t.storage),l=U(t.defaultValue),s=t.bidirectional;n??={};const a=U(n.defaultValue)??l,i=n.bidirectional??s,c=this[M],R=this[q],T=this[G],P=this[B],d=ce({verbose:R}),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=_e(n.onSet??(()=>{}),n.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(R)if(T){const u=D(x,T);u&&oe(u)}else oe(x);const k=D(x,c,a);_.current=k,ge(()=>{!P||!r||S(c,r,k)},[]);const g=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",g),()=>window.removeEventListener("storage",g)},[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 ie(t,n){const{path:r="",verbose:l,verbosePath:s,ssr:a,cache:i}=n;let c=i.proxy.get(t);c||(c=new Map,i.proxy.set(t,c));const R=c.get(r);if(R)return R;const T=new Proxy(t,{get(P,d){const v=P[d],h=r?`${r}.${String(d)}`:String(d);if(v&&typeof v=="object"&&ue 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(g=>typeof S[g]=="function"),x=Object.fromEntries(O.map(g=>[g,(...C)=>S[g].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"?ie(v,{...n,path:h}):v}});return c.set(r,T),T}function we(t,n){return ie(t,{...n,verbosePath:n?.verbosePath??"",cache:{proxy:new WeakMap,leaf:new WeakMap}})}exports.VocabStateProvider=Te;exports.defineState=ke;exports.setupStorage=we;

package/dist/state-vocab.es.js

@@ -1,93 +1,46 @@
-import me, { useMemo as Ee, createContext as be, useContext as ve, useRef as K, useSyncExternalStore as _e, useEffect as se, useLayoutEffect as pe, useEffectEvent as Se, useCallback as ee } from "react";
-const ce = Symbol("state-def"), Y = Symbol("state-path"), J = Symbol("state-verbose"), U = Symbol("state-verbose-path"), q = Symbol("state-ssr");
-function te(t, c, n) {
-  if (!c)
-    return t;
-  const m = c.split(".");
-  let a = t;
-  for (const l of m)
-    if (a !== null && typeof a == "object" && l in a)
-      a = a[l];
-    else
-      return n;
-  return a === void 0 ? n : a;
-}
-function Te(t, c = 0) {
-  let n;
-  return function(...m) {
-    n !== void 0 && clearTimeout(n), n = setTimeout(() => {
-      n = void 0, t.apply(this, m);
-    }, c);
-  };
-}
-function Re(t, c, n = []) {
-  return Ee(
-    () => Te(t, c),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    n
-  );
-}
-function re(t) {
-  const c = JSON.stringify(t, null, 2).split(`
-`), n = [], m = [];
-  for (const a of c) {
-    const l = a.match(/^(\s*)"([^"]+)"(\s*:\s*)(.+)$/);
-    if (l) {
-      const [, E, o, h, R] = l;
-      n.push(`${E}%c"${o}"%c${h}%c${R}`), m.push(
-        "color: #9cdcfe; font-weight: bold",
-        "color: #cccccc",
-        "color: #ce9178"
-      );
-    } else
-      n.push(`%c${a}`), m.push("color: #cccccc");
-  }
-  console.log(n.join(`
-`), ...m, t);
-}
-const ye = (t) => typeof t == "function", he = (t) => typeof t == "function", N = (t) => typeof t < "u", W = (t) => he(t) ? t() : t;
-var V = { exports: {} }, C = {};
-var ne;
-function ge() {
-  if (ne) return C;
-  ne = 1;
-  var t = Symbol.for("react.transitional.element"), c = Symbol.for("react.fragment");
-  function n(m, a, l) {
-    var E = null;
-    if (l !== void 0 && (E = "" + l), a.key !== void 0 && (E = "" + a.key), "key" in a) {
-      l = {};
-      for (var o in a)
-        o !== "key" && (l[o] = a[o]);
-    } else l = a;
-    return a = l.ref, {
+import pe, { useMemo as ae, createContext as Se, useContext as he, useRef as ee, useSyncExternalStore as _e, useEffect as ce, useLayoutEffect as ye, useEffectEvent as Re, useCallback as te } from "react";
+var I = { exports: {} }, C = {};
+var re;
+function Te() {
+  if (re) return C;
+  re = 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) {
+      a = {};
+      for (var c in s)
+        c !== "key" && (a[c] = s[c]);
+    } else a = s;
+    return s = a.ref, {
       $$typeof: t,
-      type: m,
-      key: E,
-      ref: a !== void 0 ? a : null,
-      props: l
+      type: l,
+      key: i,
+      ref: s !== void 0 ? s : null,
+      props: a
     };
   }
-  return C.Fragment = c, C.jsx = n, C.jsxs = n, C;
+  return C.Fragment = n, C.jsx = r, C.jsxs = r, C;
 }
-var I = {};
-var oe;
-function ke() {
-  return oe || (oe = 1, process.env.NODE_ENV !== "production" && (function() {
+var N = {};
+var ne;
+function ge() {
+  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 === ie ? null : e.displayName || e.name || null;
+        return e.$$typeof === be ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case S:
+        case h:
           return "Fragment";
-        case A:
+        case x:
           return "Profiler";
-        case O:
+        case A:
           return "StrictMode";
-        case D:
+        case F:
           return "Suspense";
-        case s:
+        case u:
           return "SuspenseList";
         case k:
           return "Activity";
@@ -96,100 +49,100 @@ function ke() {
         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 _:
+          case p:
             return "Portal";
-          case y:
+          case T:
             return e.displayName || "Context";
           case g:
             return (e._context.displayName || "Context") + ".Consumer";
           case j:
-            var r = e.render;
-            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case T:
-            return r = e.displayName || null, r !== null ? r : t(e.type) || "Memo";
+            var o = e.render;
+            return e = e.displayName, e || (e = o.displayName || o.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case _:
+            return o = e.displayName || null, o !== null ? o : t(e.type) || "Memo";
           case P:
-            r = e._payload, e = e._init;
+            o = e._payload, e = e._init;
             try {
-              return t(e(r));
+              return t(e(o));
             } catch {
             }
         }
       return null;
     }
-    function c(e) {
+    function n(e) {
       return "" + e;
     }
-    function n(e) {
+    function r(e) {
       try {
-        c(e);
-        var r = !1;
+        n(e);
+        var o = !1;
       } catch {
-        r = !0;
+        o = !0;
       }
-      if (r) {
-        r = console;
-        var u = r.error, f = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return u.call(
-          r,
+      if (o) {
+        o = console;
+        var f = o.error, m = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return f.call(
+          o,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          f
-        ), c(e);
+          m
+        ), n(e);
       }
     }
-    function m(e) {
-      if (e === S) return "<>";
+    function l(e) {
+      if (e === h) return "<>";
       if (typeof e == "object" && e !== null && e.$$typeof === P)
         return "<...>";
       try {
-        var r = t(e);
-        return r ? "<" + r + ">" : "<...>";
+        var o = t(e);
+        return o ? "<" + o + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function a() {
-      var e = F.A;
+    function s() {
+      var e = M.A;
       return e === null ? null : e.getOwner();
     }
-    function l() {
+    function a() {
       return Error("react-stack-top-frame");
     }
-    function E(e) {
-      if (G.call(e, "key")) {
-        var r = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (r && r.isReactWarning) return !1;
+    function i(e) {
+      if (B.call(e, "key")) {
+        var o = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (o && o.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function o(e, r) {
-      function u() {
-        B || (B = !0, console.error(
+    function c(e, o) {
+      function f() {
+        X || (X = !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)",
-          r
+          o
         ));
       }
-      u.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: u,
+      f.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: f,
         configurable: !0
       });
     }
-    function h() {
+    function y() {
       var e = t(this.type);
-      return X[e] || (X[e] = !0, console.error(
+      return H[e] || (H[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, r, u, f, $, L) {
-      var d = u.ref;
+    function R(e, o, f, m, $, L) {
+      var b = f.ref;
       return e = {
-        $$typeof: v,
+        $$typeof: E,
         type: e,
-        key: r,
-        props: u,
-        _owner: f
-      }, (d !== void 0 ? d : null) !== null ? Object.defineProperty(e, "ref", {
+        key: o,
+        props: f,
+        _owner: m
+      }, (b !== void 0 ? b : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: h
+        get: y
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -212,174 +165,257 @@ function ke() {
         value: L
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function w(e, r, u, f, $, L) {
-      var d = r.children;
-      if (d !== void 0)
-        if (f)
-          if (fe(d)) {
-            for (f = 0; f < d.length; f++)
-              i(d[f]);
-            Object.freeze && Object.freeze(d);
+    function w(e, o, f, m, $, L) {
+      var b = o.children;
+      if (b !== void 0)
+        if (m)
+          if (ve(b)) {
+            for (m = 0; m < b.length; m++)
+              d(b[m]);
+            Object.freeze && Object.freeze(b);
           } 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 i(d);
-      if (G.call(r, "key")) {
-        d = t(e);
-        var x = Object.keys(r).filter(function(de) {
-          return de !== "key";
+        else d(b);
+      if (B.call(o, "key")) {
+        b = t(e);
+        var O = Object.keys(o).filter(function(Ee) {
+          return Ee !== "key";
         });
-        f = 0 < x.length ? "{key: someKey, " + x.join(": ..., ") + ": ...}" : "{key: someKey}", Q[d + f] || (x = 0 < x.length ? "{" + x.join(": ..., ") + ": ...}" : "{}", console.error(
+        m = 0 < O.length ? "{key: someKey, " + O.join(": ..., ") + ": ...}" : "{key: someKey}", K[b + m] || (O = 0 < O.length ? "{" + O.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} />`,
-          f,
-          d,
-          x,
-          d
-        ), Q[d + f] = !0);
+          m,
+          b,
+          O,
+          b
+        ), K[b + m] = !0);
       }
-      if (d = null, u !== void 0 && (n(u), d = "" + u), E(r) && (n(r.key), d = "" + r.key), "key" in r) {
-        u = {};
-        for (var M in r)
-          M !== "key" && (u[M] = r[M]);
-      } else u = r;
-      return d && o(
-        u,
+      if (b = null, f !== void 0 && (r(f), b = "" + f), i(o) && (r(o.key), b = "" + o.key), "key" in o) {
+        f = {};
+        for (var W in o)
+          W !== "key" && (f[W] = o[W]);
+      } else f = o;
+      return b && c(
+        f,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
       ), R(
         e,
-        d,
-        u,
-        a(),
+        b,
+        f,
+        s(),
         $,
         L
       );
     }
-    function i(e) {
-      b(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === P && (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 d(e) {
+      v(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === P && (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 b(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === v;
+    function v(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === E;
     }
-    var p = me, v = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), S = Symbol.for("react.fragment"), O = Symbol.for("react.strict_mode"), A = Symbol.for("react.profiler"), g = Symbol.for("react.consumer"), y = Symbol.for("react.context"), j = Symbol.for("react.forward_ref"), D = Symbol.for("react.suspense"), s = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), k = Symbol.for("react.activity"), ie = Symbol.for("react.client.reference"), F = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, G = Object.prototype.hasOwnProperty, fe = Array.isArray, z = console.createTask ? console.createTask : function() {
+    var S = pe, E = Symbol.for("react.transitional.element"), p = Symbol.for("react.portal"), h = Symbol.for("react.fragment"), A = Symbol.for("react.strict_mode"), x = Symbol.for("react.profiler"), g = Symbol.for("react.consumer"), T = 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"), P = Symbol.for("react.lazy"), k = Symbol.for("react.activity"), be = Symbol.for("react.client.reference"), M = S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, B = Object.prototype.hasOwnProperty, ve = Array.isArray, z = console.createTask ? console.createTask : function() {
       return null;
     };
-    p = {
+    S = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var B, X = {}, H = p.react_stack_bottom_frame.bind(
-      p,
-      l
-    )(), Z = z(m(l)), Q = {};
-    I.Fragment = S, I.jsx = function(e, r, u) {
-      var f = 1e4 > F.recentlyCreatedOwnerStacks++;
+    var X, H = {}, Z = S.react_stack_bottom_frame.bind(
+      S,
+      a
+    )(), Q = z(l(a)), K = {};
+    N.Fragment = h, N.jsx = function(e, o, f) {
+      var m = 1e4 > M.recentlyCreatedOwnerStacks++;
       return w(
         e,
-        r,
-        u,
+        o,
+        f,
         !1,
-        f ? Error("react-stack-top-frame") : H,
-        f ? z(m(e)) : Z
+        m ? Error("react-stack-top-frame") : Z,
+        m ? z(l(e)) : Q
       );
-    }, I.jsxs = function(e, r, u) {
-      var f = 1e4 > F.recentlyCreatedOwnerStacks++;
+    }, N.jsxs = function(e, o, f) {
+      var m = 1e4 > M.recentlyCreatedOwnerStacks++;
       return w(
         e,
-        r,
-        u,
+        o,
+        f,
         !0,
-        f ? Error("react-stack-top-frame") : H,
-        f ? z(m(e)) : Z
+        m ? Error("react-stack-top-frame") : Z,
+        m ? z(l(e)) : Q
       );
     };
-  })()), I;
+  })()), N;
+}
+var oe;
+function ke() {
+  return oe || (oe = 1, process.env.NODE_ENV === "production" ? I.exports = Te() : I.exports = ge()), I.exports;
+}
+var we = ke();
+function D(t, n, r) {
+  if (!n)
+    return t;
+  const l = n.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 xe(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];
+    (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, n = 0) {
+  let r;
+  return function(...l) {
+    r !== void 0 && clearTimeout(r), r = setTimeout(() => {
+      r = void 0, t.apply(this, l);
+    }, n);
+  };
+}
+function Ae(t, n, r = []) {
+  return ae(
+    () => Pe(t, n),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    r
+  );
+}
+function se(t) {
+  const n = JSON.stringify(t, null, 2).split(`
+`), r = [], l = [];
+  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}`), 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 ue = (t) => typeof t == "function", Oe = (t) => typeof t == "function", V = (t) => typeof t < "u", J = (t) => Oe(t) ? t() : t;
+class je {
+  #e;
+  #t;
+  constructor() {
+    this.uid = Math.random().toString(36).slice(2), this.#e = {}, this.#t = /* @__PURE__ */ new Set();
+  }
+  subscribe(n) {
+    return this.#t.add(n), () => this.#t.delete(n);
+  }
+  getClientSnapshot() {
+    return this.#e;
+  }
+  getServerSnapshot() {
+    return this.#e;
+  }
+  get(n) {
+    return D(this.#e, n);
+  }
+  set(n, r) {
+    const l = D(this.#e, n), s = ue(r) ? r(l) : r, a = { ...this.#e };
+    xe(a, n, s), this.#e = a, this.#t.forEach((i) => i());
+  }
 }
-var ae;
-function we() {
-  return ae || (ae = 1, process.env.NODE_ENV === "production" ? V.exports = ge() : V.exports = ke()), V.exports;
+const le = Se({});
+function ie(t = {}) {
+  const n = he(le);
+  return t.verbose && console.log(`[${ie.name}]: `, n.uid), n;
 }
-we();
-const Ae = be({});
-function Pe() {
-  return ve(Ae);
+function Ve({ children: t }) {
+  const n = ae(() => new je(), []);
+  return /* @__PURE__ */ we.jsx(le.Provider, { value: n, children: t });
 }
-const le = typeof window > "u", Oe = le ? se : pe;
-function je(t = {}) {
+const fe = Symbol("state-def"), Y = Symbol("state-path"), U = Symbol("state-verbose"), q = Symbol("state-verbose-path"), G = Symbol("state-ssr"), de = typeof window > "u", Ce = de ? ce : ye;
+function $e(t = {}) {
   return {
-    [ce]: !0,
+    [fe]: !0,
     // marks this object as a leaf in the router tree
     [Y]: "",
     // placeholder; injected at runtime by injectPaths()
-    [J]: !1,
+    [U]: !1,
     // placeholder
-    [U]: "",
+    [q]: "",
     // placeholder
-    [q]: !1,
+    [G]: !1,
     // placeholder
-    useState(c) {
-      const n = le ? void 0 : W(t.storage), m = W(t.defaultValue), a = t.bidirectional;
-      c ??= {};
-      const l = W(c.defaultValue) ?? m, E = c.bidirectional ?? a, o = this[Y], h = this[J], R = this[U], w = this[q], i = Pe(), b = t.serialize ?? JSON.stringify, p = t.deserialize ?? JSON.parse, v = (s, T, P) => {
-        const k = T.getItem(s);
-        k === null ? N(P) && T.setItem(s, b(P)) : i.set(s, p(k));
-      }, _ = Re(
-        c.onSet ?? (() => {
+    useState(n) {
+      const r = de ? void 0 : J(t.storage), l = J(t.defaultValue), s = t.bidirectional;
+      n ??= {};
+      const a = J(n.defaultValue) ?? l, i = n.bidirectional ?? s, c = this[Y], y = this[U], R = this[q], w = this[G], d = ie({ verbose: y }), v = t.serialize ?? JSON.stringify, S = t.deserialize ?? JSON.parse, E = (u, _, P) => {
+        const k = _.getItem(u);
+        k === null ? V(P) && _.setItem(u, v(P)) : d.set(u, S(k));
+      }, p = Ae(
+        n.onSet ?? (() => {
         }),
-        c.delayedSet,
+        n.delayedSet,
         []
-      ), S = K(void 0), O = K(!1);
-      if (!O.current) {
-        O.current = !0;
-        let s = i.get(o);
-        N(s) || (s = l, N(s) && i.set(o, s)), !w && n && v(o, n, s);
+      ), 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);
       }
-      const A = _e(
-        i.subscribe.bind(i),
-        i.getClientSnapshot.bind(i),
-        i.getServerSnapshot.bind(i)
+      const x = _e(
+        d.subscribe.bind(d),
+        d.getClientSnapshot.bind(d),
+        d.getServerSnapshot.bind(d)
       );
-      if (h)
+      if (y)
         if (R) {
-          const s = te(A, R);
-          s && re(s);
+          const u = D(x, R);
+          u && se(u);
         } else
-          re(A);
-      const g = te(A, o, l);
-      S.current = g, Oe(() => {
-        !w || !n || v(o, n, g);
+          se(x);
+      const g = D(x, c, a);
+      h.current = g, Ce(() => {
+        !w || !r || E(c, r, g);
       }, []);
-      const y = Se((s) => {
-        if (s.key !== o)
+      const T = Re((u) => {
+        if (u.key !== c)
           return;
-        const T = s.newValue, k = (T === null ? null : p(T)) ?? l;
-        N(k) && (i.set(o, k), _(k, S.current));
+        const _ = u.newValue, k = (_ === null ? null : S(_)) ?? a;
+        V(k) && (d.set(c, k), p(k, h.current));
       });
-      se(() => {
-        if (E)
-          return window.addEventListener("storage", y), () => window.removeEventListener("storage", y);
-      }, [E]);
-      const j = ee((s) => {
-        const T = ye(s) ? s(S.current) : s;
-        i.set(o, T), _(T, S.current), n && n.setItem(o, b(T));
-      }, [o, n, _]), D = ee(() => {
-        const s = l;
-        if (!N(s)) {
-          n?.removeItem(o);
+      ce(() => {
+        if (i)
+          return window.addEventListener("storage", T), () => window.removeEventListener("storage", T);
+      }, [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 u = a;
+        if (!V(u)) {
+          r?.removeItem(c);
           return;
         }
-        i.set(o, s), _(s, S.current), n && n.setItem(o, b(s));
-      }, [o, l, n, _]);
+        d.set(c, u), p(u, h.current), r && r.setItem(c, v(u));
+      }, [c, a, r, p]);
       return [
         g,
         j,
-        D
+        F
       ];
     },
     /** Returns the fully qualified job name (dot-separated path). */
@@ -388,60 +424,60 @@ function je(t = {}) {
     }
   };
 }
-function ue(t, c) {
+function me(t, n) {
   const {
-    path: n = "",
-    verbose: m,
-    verbosePath: a,
-    ssr: l,
-    cache: E
-  } = c;
-  let o = E.proxy.get(t);
-  o || (o = /* @__PURE__ */ new Map(), E.proxy.set(t, o));
-  const h = o.get(n);
-  if (h)
-    return h;
+    path: r = "",
+    verbose: l,
+    verbosePath: s,
+    ssr: a,
+    cache: i
+  } = n;
+  let c = i.proxy.get(t);
+  c || (c = /* @__PURE__ */ new Map(), i.proxy.set(t, c));
+  const y = c.get(r);
+  if (y)
+    return y;
   const R = new Proxy(t, {
-    get(w, i) {
-      const b = w[i], p = n ? `${n}.${String(i)}` : String(i);
-      if (b && typeof b == "object" && ce in b) {
-        const v = b;
-        let _ = E.leaf.get(v);
-        _ || (_ = /* @__PURE__ */ new Map(), E.leaf.set(v, _));
-        const S = _.get(p);
-        if (S)
-          return S;
-        const O = Reflect.ownKeys(v).filter(
-          (y) => typeof v[y] == "function"
-        ), A = Object.fromEntries(
-          O.map((y) => [
-            y,
-            (...j) => v[y].call(
+    get(w, d) {
+      const v = w[d], S = r ? `${r}.${String(d)}` : String(d);
+      if (v && typeof v == "object" && fe 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(
+          (T) => typeof E[T] == "function"
+        ), x = Object.fromEntries(
+          A.map((T) => [
+            T,
+            (...j) => E[T].call(
               {
-                ...v,
-                [Y]: p,
-                [J]: m,
-                [U]: a,
-                [q]: l
+                ...E,
+                [Y]: S,
+                [U]: l,
+                [q]: s,
+                [G]: a
               },
               ...j
             )
           ])
-        ), g = { ...v, ...A };
-        return _.set(p, g), g;
+        ), g = { ...E, ...x };
+        return p.set(S, g), g;
       }
-      return b && typeof b == "object" ? ue(b, {
-        ...c,
-        path: p
-      }) : b;
+      return v && typeof v == "object" ? me(v, {
+        ...n,
+        path: S
+      }) : v;
     }
   });
-  return o.set(n, R), R;
+  return c.set(r, R), R;
 }
-function Ne(t, c) {
-  return ue(t, {
-    ...c,
-    verbosePath: c?.verbosePath ?? "",
+function Ie(t, n) {
+  return me(t, {
+    ...n,
+    verbosePath: n?.verbosePath ?? "",
     cache: {
       proxy: /* @__PURE__ */ new WeakMap(),
       leaf: /* @__PURE__ */ new WeakMap()
@@ -449,6 +485,7 @@ function Ne(t, c) {
   });
 }
 export {
-  je as defineState,
-  Ne as setupStorage
+  Ve as VocabStateProvider,
+  $e as defineState,
+  Ie as setupStorage
 };

package/dist/types/context.d.ts

@@ -1,4 +1,6 @@
 import { type PropsWithChildren } from "react";
 import VocabStore from "./store";
-export declare function useStoreContext(): VocabStore;
-export declare function StoreContextProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function useVocabStoreContext(options?: {
+    verbose?: boolean;
+}): VocabStore;
+export declare function VocabStoreContextProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
+export { VocabStoreContextProvider as VocabStateProvider } from "./context";
 export { defineState } from "./state";
 export { setupStorage } from "./setup";

package/package.json

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