@yakocloud/state-vocab 2.5.1 → 3.0.2

package/README.md

@@ -52,7 +52,7 @@ function ThemeToggle() {
 }
 ```
 
-**Initialize once at the root, read anywhere in the tree.** Call `.useState()` with a `defaultValue` at a parent component to seed the state — then call `.useState()` without arguments in any descendant to consume it. No context wiring, no prop passing. Convenient in NextJs
+**Initialize once at the root, read anywhere in the tree.** Call `.useState()` with a `defaultValue` at a parent component to seed the state — then call `.useState()` without arguments in any descendant to consume it. No context wiring, no prop passing.
 
 ```tsx
 // Root component — initializes the state
@@ -82,8 +82,6 @@ function DeepChild() {
 }
 ```
 
-The `defaultValue` at the root acts as the initializer — subsequent `.useState()` calls in children pick up the shared value automatically without re-specifying defaults.
-
 **Dot-notation access with full TypeScript inference.** The state tree is navigated like a plain object — autocomplete guides you to the right node, and types flow from `defineState<T>` all the way to the hook return value without any manual annotations.
 
 ```ts
@@ -105,7 +103,7 @@ defineState({
 })
 ```
 
-**Minimal API surface.** Three exports: `defineState`, `setupStorage`, `StorageProvider`. No actions, reducers, selectors, or stores to configure.
+**Minimal API surface.** Two exports: `defineState`, `setupStorage`. No actions, reducers, selectors, or stores to configure.
 
 ## Installation
 
@@ -118,7 +116,7 @@ npm install @yakocloud/state-vocab react react-dom
 ## Quick Start
 
 ```tsx
-import { setupStorage, defineState, StorageProvider } from '@yakocloud/state-vocab'
+import { setupStorage, defineState } from '@yakocloud/state-vocab'
 
 type Theme = 'Dark' | 'White' | 'System'
 
@@ -133,14 +131,6 @@ const storage = setupStorage({
   },
 })
 
-function App() {
-  return (
-    <StorageProvider>
-      <Settings />
-    </StorageProvider>
-  )
-}
-
 function Settings() {
   const [theme, setTheme] = storage.path.to.theme.useState()
 
@@ -197,7 +187,8 @@ Wraps a nested object of `defineState()` nodes and injects dot-separated paths i
 
 | Option | Type | Description | Default |
 |---|---|---|---|
-| `ssr` | `boolean \| undefined` | Defer storage reads until after mount (SSR support) | `false` |
+| `verbose` | `boolean \| undefined` | Log current state to the browser console on every change | `false` |
+| `ssr` | `boolean \| undefined` | Defer storage reads until after hydration (Next.js / SSR) | `false` |
 
 ```ts
 const storage = setupStorage({
@@ -211,26 +202,31 @@ storage.user.name  // → path: "user.name"
 storage.user.age   // → path: "user.age"
 ```
 
-### `StorageProvider`
-
-A React context provider that must wrap all components using `.useState()` from any state node. Place it once near the top of your tree.
+Enable verbose logging during development:
 
-```tsx
-createRoot(document.getElementById('root')!).render(
-  <StorageProvider>
-    <App />
-  </StorageProvider>
-)
+```ts
+const storage = setupStorage({ ... }, { verbose: true })
 ```
 
-Accepts an optional `verbose` prop that logs the current state vocab to the browser console on every change — useful during development.
+### SSR / Next.js
 
-```tsx
-<StorageProvider verbose>
-  <App />
-</StorageProvider>
+When using localStorage or sessionStorage in a Next.js app, the server renders with `defaultValue` while the client reads the persisted value — causing a hydration mismatch. Pass `ssr: true` to fix this:
+
+```ts
+// lib/storage.ts
+const storage = setupStorage({
+  preference: {
+    theme: defineState<Theme>({ storage: localStorage, defaultValue: 'Dark' }),
+  },
+}, { ssr: true })
 ```
 
+With `ssr: true`:
+- **Server & first client render** — always use `defaultValue`, storage is not read
+- **After hydration** — `useLayoutEffect` fires synchronously before paint, reads storage and updates state
+
+This guarantees the server and client produce identical markup, and the value from storage is applied without a visible flash.
+
 ## `useState` Hook
 
 Each state node exposes a `.useState()` method that works like React's built-in `useState` but adds persistence and callbacks.
@@ -309,7 +305,7 @@ const storage = setupStorage({
 ## Full Example
 
 ```tsx
-import { setupStorage, defineState, StorageProvider } from '@yakocloud/state-vocab'
+import { setupStorage, defineState } from '@yakocloud/state-vocab'
 
 type Theme = 'Dark' | 'White' | 'System'
 
@@ -393,11 +389,7 @@ function Dashboard() {
   )
 }
 
-createRoot(document.getElementById('root')!).render(
-  <StorageProvider>
-    <Page />
-  </StorageProvider>
-)
+createRoot(document.getElementById('root')!).render(<Page />)
 ```
 
 ## API Reference
@@ -416,18 +408,11 @@ createRoot(document.getElementById('root')!).render(
 
 | Option | Type | Default |
 |---|---|---|
+| `verbose` | `boolean \| undefined` | `false` |
 | `ssr` | `boolean \| undefined` | `false` |
 
 Returns a proxied copy of `tree` with paths injected into all leaf nodes.
 
-### `StorageProvider`
-
-React context provider. Must be an ancestor of any component using `.useState()`.
-
-| Prop | Type | Description |
-|---|---|---|
-| `verbose` | `boolean \| undefined` | Log state vocab to console on every change |
-
 ### `node.useState(options?)`
 
 | Option | Type | Description |

package/dist/state-vocab.cjs.js

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

package/dist/state-vocab.es.js

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

package/dist/types/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const STATE_DEFINITION: unique symbol;
 export declare const STATE_PATH: unique symbol;
+export declare const STATE_VERBOSE: unique symbol;
 export declare const STATE_SSR: unique symbol;

package/dist/types/index.d.ts

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

package/dist/types/main.utils.d.ts

@@ -1,2 +1,2 @@
 export declare const toLocalDatetimeString: (date: Date | null) => string;
-export declare const toDateString: (date: Date | null) => string | undefined;
+export declare const toDateString: (date: Date | null) => string;

package/dist/types/setup.d.ts

@@ -1,3 +1,7 @@
-export declare function setupStorage<T extends object>(native: T, options?: Partial<{
+type InjectPathsOptions = {
+    path: string;
+    verbose: boolean;
     ssr: boolean;
-}>): T;
+};
+export declare function setupStorage<T extends object>(native: T, options?: Partial<Omit<InjectPathsOptions, "path">>): T;
+export {};

package/dist/types/state.d.ts

@@ -1,4 +1,4 @@
-import { STATE_DEFINITION, STATE_PATH, STATE_SSR } from "./constants";
+import { STATE_DEFINITION, STATE_PATH, STATE_SSR, STATE_VERBOSE } from "./constants";
 import type { Deserialize, Serialize, ValueOrFactory, ValueOrTransformer } from "./state.types";
 export declare function defineState<D>(definitionOptions?: {
     storage?: ValueOrFactory<Storage>;
@@ -8,10 +8,12 @@ export declare function defineState<D>(definitionOptions?: {
     deserialize?: Deserialize<D>;
 }): {
     [STATE_DEFINITION]: boolean;
-    [STATE_SSR]: boolean;
     [STATE_PATH]: string;
+    [STATE_VERBOSE]: boolean;
+    [STATE_SSR]: boolean;
     useState(this: {
         [STATE_PATH]: string;
+        [STATE_VERBOSE]: boolean;
         [STATE_SSR]: boolean;
     }, options?: {
         defaultValue?: ValueOrFactory<D>;

package/dist/types/state.utils.d.ts

@@ -1,8 +1,4 @@
-import type { Vocab } from "./context";
 import type { ValueOrTransformer, Transformer, ValueOrFactory } from "./state.types";
-export declare const embed: <D>(statePath: string, value: D) => (vocab: Vocab<D>) => {
-    [x: string]: D | null;
-};
 export declare const isTransformer: <V>(v: ValueOrTransformer<V>) => v is Transformer<V>;
 export declare const isValueDefined: <V>(v: V | undefined) => v is V;
 export declare const valueOrFactory: <V>(input: ValueOrFactory<V>) => V;

package/dist/types/utils.d.ts

@@ -4,4 +4,4 @@ export declare function set(obj: Record<string, unknown>, path: string, value: u
 export declare function debounce<T extends (...args: never[]) => unknown>(func: T, wait?: number): (...args: Parameters<T>) => void;
 export declare function useDebounce<T extends (...args: never[]) => unknown>(effect: T, wait: number | undefined, deps?: DependencyList): (...args: Parameters<T>) => void;
 export declare const isJsonValid: (input: string) => boolean;
-export declare function logStyled(obj: object): void;
+export declare function logStyled(obj: unknown): void;

package/package.json

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

package/dist/types/context.d.ts

@@ -1,11 +0,0 @@
-import { type SetStateAction, type PropsWithChildren, type Dispatch } from "react";
-export type Vocab<T = unknown> = Record<string, T | null>;
-type Context<V extends Vocab = Vocab> = {
-    stateVocab: V;
-    setStateVocab: Dispatch<SetStateAction<V>>;
-};
-export declare function useStateVocabContext<T>(): Context<Vocab<T>>;
-export declare const StateVocabContextProvider: (props: PropsWithChildren<{
-    verbose?: boolean;
-}>) => import("react/jsx-runtime").JSX.Element;
-export {};