@yakocloud/state-vocab 2.5.1 → 3.0.1

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,7 @@ 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` |
 
 ```ts
 const storage = setupStorage({
@@ -211,24 +201,10 @@ 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.
-
-```tsx
-createRoot(document.getElementById('root')!).render(
-  <StorageProvider>
-    <App />
-  </StorageProvider>
-)
-```
-
-Accepts an optional `verbose` prop that logs the current state vocab to the browser console on every change — useful during development.
+Enable verbose logging during development:
 
-```tsx
-<StorageProvider verbose>
-  <App />
-</StorageProvider>
+```ts
+const storage = setupStorage({ ... }, { verbose: true })
 ```
 
 ## `useState` Hook
@@ -309,7 +285,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 +369,7 @@ function Dashboard() {
   )
 }
 
-createRoot(document.getElementById('root')!).render(
-  <StorageProvider>
-    <Page />
-  </StorageProvider>
-)
+createRoot(document.getElementById('root')!).render(<Page />)
 ```
 
 ## API Reference
@@ -416,18 +388,10 @@ createRoot(document.getElementById('root')!).render(
 
 | Option | Type | Default |
 |---|---|---|
-| `ssr` | `boolean \| undefined` | `false` |
+| `verbose` | `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 S=require("react"),M=Symbol("state-def"),w=Symbol("state-path"),$=Symbol("state-verbose");function z(e,t,s){if(!t)return e;const r=t.split(".");let n=e;for(const o of r)if(n!==null&&typeof n=="object"&&o in n)n=n[o];else return s;return n===void 0?s:n}function N(e,t,s){const r=t.replace(/\[(\d+)\]/g,".$1").split(".");let n=e;for(let o=0;o<r.length-1;o++){const a=r[o],g=r[o+1];(n[a]===void 0||n[a]===null)&&(n[a]=/^\d+$/.test(g)?[]:{}),n=n[a]}return n[r[r.length-1]]=s,e}function j(e,t=0){let s;return function(...r){s!==void 0&&clearTimeout(s),s=setTimeout(()=>{s=void 0,e.apply(this,r)},t)}}function A(e,t,s=[]){return S.useMemo(()=>j(e,t),s)}function D(e){const t=JSON.stringify(e,null,2).split(`
+`),s=[],r=[];for(const n of t){const o=n.match(/^(\s*)"([^"]+)"(\s*:\s*)(.+)$/);if(o){const[,a,g,u,l]=o;s.push(`${a}%c"${g}"%c${u}%c${l}`),r.push("color: #9cdcfe; font-weight: bold","color: #cccccc","color: #ce9178")}else s.push(`%c${n}`),r.push("color: #cccccc")}console.log(s.join(`
+`),...r,e)}const P=e=>typeof e=="function",O=e=>typeof e=="function",p=e=>typeof e<"u",k=e=>O(e)?e():e;class F{#e;#t;constructor(){this.#e={},this.#t=new Set}subscribe(t){return this.#t.add(t),()=>this.#t.delete(t)}getClientSnapshot(){return this.#e}getServerSnapshot(){return this.#e}set(t,s){const r=z(this.#e,t),n=P(s)?s(r):s,o={...this.#e};N(o,t,n),this.#e=o,this.#t.forEach(a=>a())}}function J(e={}){const t=new F;return{[M]:!0,[w]:"",[$]:!1,useState(s){const r=k(e.storage),n=e.serialize??JSON.stringify,o=e.deserialize??JSON.parse,a=k(e.defaultValue),g=e.bidirectional;s??={};const u=k(s.defaultValue)??a,l=s.bidirectional??g,f=A(s.onSet??(()=>{}),s.delayedSet,[]),c=this[w],y=this[$],h=S.useRef(void 0),m=S.useRef(!1);if(!m.current){m.current=!0;let i=z(t.getServerSnapshot(),c);if(!p(i)){if(i=u,r){const d=r.getItem(c);d===null?p(i)&&r.setItem(c,n(i)):i=o(d)}p(i)&&t.set(c,i)}}const V=S.useSyncExternalStore(t.subscribe.bind(t),()=>t.getClientSnapshot(),()=>t.getServerSnapshot());y&&D(V);const v=z(V,c);h.current=v;const b=S.useEffectEvent(i=>{if(i.key!==c)return;const d=i.newValue,T=(d===null?null:o(d))??u;p(T)&&(t.set(c,T),f(T,h.current))});S.useEffect(()=>{if(l)return window.addEventListener("storage",b),()=>window.removeEventListener("storage",b)},[l]);const E=S.useCallback(i=>{const d=P(i)?i(h.current):i;t.set(c,d),f(d,h.current),r&&r.setItem(c,n(d))},[c,r,n,f]),x=S.useCallback(()=>{const i=u;if(!p(i)){r?.removeItem(c);return}t.set(c,i),f(i,h.current),r&&r.setItem(c,n(i))},[c,u,r,n,f]);return[v,E,x]},toString(){return this[w]}}}const C=new WeakMap,I=new WeakMap;function R(e,t){t??={};const{path:s="",verbose:r}=t;let n=C.get(e);n||(n=new Map,C.set(e,n));const o=n.get(s);if(o)return o;const a=new Proxy(e,{get(g,u){const l=g[u],f=s?`${s}.${String(u)}`:String(u);if(l&&typeof l=="object"&&M in l){const c=l;let y=I.get(c);y||(y=new Map,I.set(c,y));const h=y.get(f);if(h)return h;const m=Reflect.ownKeys(c).filter(b=>typeof c[b]=="function"),V=Object.fromEntries(m.map(b=>[b,(...E)=>c[b].call({...c,[w]:f,[$]:r},...E)])),v={...c,...V};return y.set(f,v),v}return l&&typeof l=="object"?R(l,{path:f,verbose:r}):l}});return n.set(s,a),a}function L(e,t){return R(e,t)}exports.defineState=J;exports.setupStorage=L;

package/dist/state-vocab.es.js

@@ -1,467 +1,212 @@
-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)
-    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];
+import { useMemo as A, useRef as z, useSyncExternalStore as D, useEffectEvent as j, useEffect as F, useCallback as I } from "react";
+const M = Symbol("state-def"), V = Symbol("state-path"), $ = Symbol("state-verbose");
+function k(e, t, s) {
+  if (!t)
+    return e;
+  const r = t.split(".");
+  let n = e;
+  for (const o of r)
+    if (n !== null && typeof n == "object" && o in n)
+      n = n[o];
     else
-      return r;
-  return n === void 0 ? r : n;
+      return s;
+  return n === void 0 ? s : n;
 }
-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 J(e, t, s) {
+  const r = t.replace(/\[(\d+)\]/g, ".$1").split(".");
+  let n = e;
+  for (let o = 0; o < r.length - 1; o++) {
+    const l = r[o], S = r[o + 1];
+    (n[l] === void 0 || n[l] === null) && (n[l] = /^\d+$/.test(S) ? [] : {}), n = n[l];
   }
-  return n[a[a.length - 1]] = r, t;
+  return n[r[r.length - 1]] = s, e;
 }
-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 L(e, t = 0) {
+  let s;
+  return function(...r) {
+    s !== void 0 && clearTimeout(s), s = setTimeout(() => {
+      s = void 0, e.apply(this, r);
+    }, t);
   };
 }
-function Se(t, s, r = []) {
-  return W(
-    () => pe(t, s),
+function O(e, t, s = []) {
+  return A(
+    () => L(e, t),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    r
+    s
   );
 }
-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 _(e) {
+  const t = JSON.stringify(e, null, 2).split(`
+`), s = [], r = [];
+  for (const n of t) {
+    const o = n.match(/^(\s*)"([^"]+)"(\s*:\s*)(.+)$/);
+    if (o) {
+      const [, l, S, u, a] = o;
+      s.push(`${l}%c"${S}"%c${u}%c${a}`), r.push(
         "color: #9cdcfe; font-weight: bold",
         "color: #cccccc",
         "color: #ce9178"
       );
     } else
-      r.push(`%c${n}`), a.push("color: #cccccc");
+      s.push(`%c${n}`), r.push("color: #cccccc");
   }
-  console.log(r.join(`
-`), ...a, t);
+  console.log(s.join(`
+`), ...r, e);
 }
-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 N = (e) => typeof e == "function", B = (e) => typeof e == "function", v = (e) => typeof e < "u", T = (e) => B(e) ? e() : e;
+class K {
+  #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(t) {
+    return this.#t.add(t), () => this.#t.delete(t);
+  }
+  getClientSnapshot() {
+    return this.#e;
+  }
+  getServerSnapshot() {
+    return this.#e;
+  }
+  set(t, s) {
+    const r = k(this.#e, t), n = N(s) ? s(r) : s, o = { ...this.#e };
+    J(o, t, n), this.#e = o, this.#t.forEach((l) => l());
   }
-});
-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 q(e = {}) {
+  const t = new K();
   return {
-    [oe]: !0,
+    [M]: !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()
+    [$]: !1,
+    // placeholder
     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;
+      const r = T(e.storage), n = e.serialize ?? JSON.stringify, o = e.deserialize ?? JSON.parse, l = T(e.defaultValue), S = e.bidirectional;
       s ??= {};
-      const v = L(s.defaultValue), p = Se(
+      const u = T(s.defaultValue) ?? l, a = s.bidirectional ?? S, f = O(
         s.onSet ?? (() => {
         }),
         s.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)
+      ), c = this[V], g = this[$], h = z(void 0), b = z(!1);
+      if (!b.current) {
+        b.current = !0;
+        let i = k(t.getServerSnapshot(), c);
+        if (!v(i)) {
+          if (i = u, r) {
+            const d = r.getItem(c);
+            d === null ? v(i) && r.setItem(c, n(i)) : i = o(d);
+          }
+          v(i) && t.set(c, i);
+        }
+      }
+      const m = D(
+        t.subscribe.bind(t),
+        () => t.getClientSnapshot(),
+        () => t.getServerSnapshot()
+      );
+      g && _(m);
+      const p = k(m, c);
+      h.current = p;
+      const y = j((i) => {
+        if (i.key !== c)
           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 d = i.newValue, E = (d === null ? null : o(d)) ?? u;
+        v(E) && (t.set(c, E), f(E, h.current));
+      });
+      F(() => {
+        if (a)
+          return window.addEventListener("storage", y), () => window.removeEventListener("storage", y);
+      }, [a]);
+      const w = I((i) => {
+        const d = N(i) ? i(h.current) : i;
+        t.set(c, d), f(d, h.current), r && r.setItem(c, n(d));
       }, [
-        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));
+        c,
+        r,
+        n,
+        f
+      ]), R = I(() => {
+        const i = u;
+        if (!v(i)) {
+          r?.removeItem(c);
+          return;
         }
+        t.set(c, i), f(i, h.current), r && r.setItem(c, n(i));
+      }, [
+        c,
+        u,
+        r,
+        n,
+        f
+      ]);
+      return [
+        p,
+        w,
+        R
       ];
     },
     /** 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 ??= {};
+const C = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap();
+function P(e, t) {
+  t ??= {};
   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) => [
-            g,
-            (...A) => _[g].call(
+    path: s = "",
+    verbose: r
+  } = t;
+  let n = C.get(e);
+  n || (n = /* @__PURE__ */ new Map(), C.set(e, n));
+  const o = n.get(s);
+  if (o)
+    return o;
+  const l = new Proxy(e, {
+    get(S, u) {
+      const a = S[u], f = s ? `${s}.${String(u)}` : String(u);
+      if (a && typeof a == "object" && M in a) {
+        const c = a;
+        let g = x.get(c);
+        g || (g = /* @__PURE__ */ new Map(), x.set(c, g));
+        const h = g.get(f);
+        if (h)
+          return h;
+        const b = Reflect.ownKeys(c).filter(
+          (y) => typeof c[y] == "function"
+        ), m = Object.fromEntries(
+          b.map((y) => [
+            y,
+            (...w) => c[y].call(
               {
-                ..._,
-                [C]: i,
-                [J]: a
+                ...c,
+                [V]: f,
+                [$]: r
               },
-              ...A
+              ...w
             )
           ])
-        ), E = { ..._, ...R };
-        return S.set(i, E), E;
+        ), p = { ...c, ...m };
+        return g.set(f, p), p;
       }
-      return l && typeof l == "object" ? se(l, {
-        path: i,
-        ssr: a
-      }) : l;
+      return a && typeof a == "object" ? P(a, {
+        path: f,
+        verbose: r
+      }) : a;
     }
   });
-  return n.set(r, m), m;
+  return n.set(s, l), l;
 }
-function Ne(t, s) {
-  return se(t, s);
+function G(e, t) {
+  return P(e, t);
 }
 export {
-  Oe as StorageProvider,
-  je as defineState,
-  Ne as setupStorage
+  q as defineState,
+  G as setupStorage
 };

package/dist/types/constants.d.ts

@@ -1,3 +1,3 @@
 export declare const STATE_DEFINITION: unique symbol;
 export declare const STATE_PATH: unique symbol;
-export declare const STATE_SSR: unique symbol;
+export declare const STATE_VERBOSE: 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/setup.d.ts

@@ -1,3 +1,6 @@
-export declare function setupStorage<T extends object>(native: T, options?: Partial<{
-    ssr: boolean;
-}>): T;
+type InjectPathsOptions = {
+    path: string;
+    verbose: boolean;
+};
+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_VERBOSE } from "./constants";
 import type { Deserialize, Serialize, ValueOrFactory, ValueOrTransformer } from "./state.types";
 export declare function defineState<D>(definitionOptions?: {
     storage?: ValueOrFactory<Storage>;
@@ -8,11 +8,11 @@ export declare function defineState<D>(definitionOptions?: {
     deserialize?: Deserialize<D>;
 }): {
     [STATE_DEFINITION]: boolean;
-    [STATE_SSR]: boolean;
     [STATE_PATH]: string;
+    [STATE_VERBOSE]: boolean;
     useState(this: {
         [STATE_PATH]: string;
-        [STATE_SSR]: boolean;
+        [STATE_VERBOSE]: boolean;
     }, options?: {
         defaultValue?: ValueOrFactory<D>;
         delayedSet?: number;

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.1",
   "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 {};