@yakocloud/state-vocab 2.3.6 → 2.4.1

package/README.md

@@ -1,37 +1,38 @@
 # @yakocloud/state-vocab
 
-A lightweight React state management library that synchronizes component state with any `Storage`-compatible (localStorage, sessionStorage, custom).
+A lightweight React state management library that synchronizes component state with any `Storage`-compatible backend (localStorage, sessionStorage, custom).
 
 ## Why use state-vocab?
- 
+
 Most state managers treat persistence as an afterthought — you manage state first, then manually sync it to localStorage. **state-vocab flips this**: storage is defined upfront alongside the state itself, and synchronization is automatic.
- 
+
 **Storage-first by design.** Every state node declares its backend at definition time — localStorage, sessionStorage, or any custom adapter. No `useEffect(() => localStorage.setItem(...), [value])` scattered across components.
- 
+
 ```ts
-// declare once — works everywhere
 const storage = setupStorage({
   theme: defineState({ storage: localStorage, defaultValue: 'Dark' }),
   session: defineState({ storage: () => sessionStorage }),
   inMemory: defineState({ defaultValue: 0 }),
 })
 ```
- 
+
 **Bring your own backend.** The `storage` option accepts any object implementing the [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Storage). Point state directly at a server, IndexedDB wrapper, or encrypted store — no extra adapters needed.
- 
+
 ```ts
 defineState({
   storage: {
     getItem: (key) => api.get(key),
     setItem: (key, value) => api.set(key, value),
     removeItem: (key) => api.delete(key),
-    // ...
+    length: 0,
+    clear: () => {},
+    key: () => null,
   }
 })
 ```
- 
-**No prop drilling.** State lives in a shared `storage` object imported directly into any component. No need to pass values down through layers of props or lift state up to a common ancestor — any component in the tree can read and write the same node independently.
- 
+
+**No prop drilling.** State lives in a shared `storage` object imported directly into any component. No need to pass values down through layers of props or lift state up to a common ancestor.
+
 ```tsx
 // ❌ without state-vocab — thread props through every layer
 function Page({ theme, onThemeChange }) {
@@ -43,35 +44,67 @@ function Sidebar({ theme, onThemeChange }) {
 function ThemeToggle({ theme, onThemeChange }) {
   return <button onClick={() => onThemeChange('Dark')}>{theme}</button>
 }
- 
+
 // ✅ with state-vocab — import storage, use directly
 function ThemeToggle() {
   const [theme, setTheme] = storage.preference.theme.useState()
   return <button onClick={() => setTheme('Dark')}>{theme}</button>
 }
 ```
- 
+
+**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
+
+```tsx
+// Root component — initializes the state
+function Page() {
+  storage.demo.pageProps.useState({
+    defaultValue: {
+      a: 1,
+      b: 2,
+      c: ['one', 'two'],
+    },
+  })
+
+  return <DeepChild />
+}
+
+// Somewhere deep in the tree — reads the same state
+function DeepChild() {
+  const [pageProps] = storage.demo.pageProps.useState()
+
+  return (
+    <div>
+      <p>a: {pageProps.a}</p>
+      <p>b: {pageProps.b}</p>
+      <p>c: {pageProps.c.join(', ')}</p>
+    </div>
+  )
+}
+```
+
+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
 const [theme, setTheme] = storage.preference.theme.useState()
 //     ^? 'Dark' | 'White' | 'System'
- 
+
 const [birthday, setBirthday] = storage.personal.birthday.useState()
 //     ^? Date | null
 ```
- 
+
 If you rename or restructure a node in `setupStorage`, TypeScript immediately flags every broken reference across the codebase.
- 
+
 **Custom serialization per node.** Dates, Maps, class instances — define `serialize`/`deserialize` once and the hook handles the rest transparently.
- 
+
 ```ts
 defineState({
   storage: localStorage,
   deserialize: (raw) => new Date(JSON.parse(raw)),
 })
 ```
- 
+
 **Minimal API surface.** Three exports: `defineState`, `setupStorage`, `StorageProvider`. No actions, reducers, selectors, or stores to configure.
 
 ## Installation
@@ -85,15 +118,17 @@ npm install @yakocloud/state-vocab react react-dom
 ## Quick Start
 
 ```tsx
-import { setupStorage, defineState, StorageProvider } from 'state-vocab'
+import { setupStorage, defineState, StorageProvider } from '@yakocloud/state-vocab'
+
+type Theme = 'Dark' | 'White' | 'System'
 
 const storage = setupStorage({
   path: {
     to: {
-      theme: defineState<'Dark' | 'White' | 'System'>({
+      theme: defineState<Theme>({
         storage: localStorage,
         defaultValue: 'Dark',
-      })
+      }),
     },
   },
 })
@@ -110,7 +145,7 @@ function Settings() {
   const [theme, setTheme] = storage.path.to.theme.useState()
 
   return (
-    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
+    <select value={theme} onChange={(e) => setTheme(e.target.value as Theme)}>
       <option value="Dark">Dark</option>
       <option value="White">White</option>
       <option value="System">System</option>
@@ -128,7 +163,8 @@ Defines a state node. Options:
 | Option | Type | Description |
 |---|---|---|
 | `storage` | `Storage \| (() => Storage) \| undefined` | Where to persist the value. Omit for in-memory only. |
-| `defaultValue` | `T` | Value used when storage has no entry. |
+| `defaultValue` | `T \| (() => T)` | Value used when storage has no entry. Accepts a factory function. |
+| `bidirectional` | `true \| undefined` | Sync state across browser tabs via the `storage` event. |
 | `serialize` | `(v: T) => string` | Custom serializer. Default: `JSON.stringify`. |
 | `deserialize` | `(v: string) => T` | Custom deserializer. Default: `JSON.parse`. |
 
@@ -142,20 +178,26 @@ const theme = defineState<'Dark' | 'White'>({
   defaultValue: 'Dark',
 })
 
-// localStorage with custom serialization
+// localStorage with custom deserialization
 const birthday = defineState({
   storage: () => localStorage,
   deserialize: (raw) => new Date(JSON.parse(raw)),
 })
+
+// bidirectional — syncs value when changed in another tab
+const note = defineState({
+  storage: localStorage,
+  bidirectional: true,
+})
 ```
 
-### `setupStorage(tree, options)`
+### `setupStorage(tree, options?)`
 
 Wraps a nested object of `defineState()` nodes and injects dot-separated paths into each leaf. The returned object mirrors your tree structure.
 
-| Parameter | Type | Description | Default
-|---|---|---|
-| `ssr` | `boolean \| undefined` | SSR support | false
+| Option | Type | Description | Default |
+|---|---|---|---|
+| `ssr` | `boolean \| undefined` | Defer storage reads until after mount (SSR support) | `false` |
 
 ```ts
 const storage = setupStorage({
@@ -165,14 +207,13 @@ const storage = setupStorage({
   },
 })
 
-// Access paths:
 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.
+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(
@@ -182,44 +223,55 @@ createRoot(document.getElementById('root')!).render(
 )
 ```
 
+Accepts an optional `verbose` prop that logs the current state vocab to the browser console on every change — useful during development.
+
+```tsx
+<StorageProvider verbose>
+  <App />
+</StorageProvider>
+```
+
 ## `useState` Hook
 
 Each state node exposes a `.useState()` method that works like React's built-in `useState` but adds persistence and callbacks.
 
 ```ts
-const [value, setValue, resetValue] = storage.path.to.node.useState(
-  defaultValue?,
-  options?
-)
+const [value, setValue, resetValue] = storage.path.to.node.useState(options?)
 ```
 
-### Arguments
+### Options
 
-**`defaultValue`** — overrides the `defineState`-level default for this usage. Accepts a value or initializer function:
+**`defaultValue`** — overrides the `defineState`-level default for this usage. Accepts a value or factory function:
 
 ```ts
-const [alarm] = storage.alarm.useState(() => new Date())
+const [alarm] = storage.alarm.useState({ defaultValue: () => new Date() })
 ```
 
-**`options.delayedSet`** — debounce the `onSet` callback by N milliseconds:
+**`delayedSet`** — debounces the `onSet` callback by N milliseconds:
 
 ```ts
-const [note, setNote] = storage.note.useState('', {
+const [note, setNote] = storage.note.useState({
   delayedSet: 1000,
   onSet: (value) => saveToServer(value),
 })
 ```
 
-**`options.onSet`** — called after every state change with `(nextValue, prevValue)`:
+**`onSet`** — called after every state change with `(nextValue, prevValue)`:
 
 ```ts
-const [counter, setCounter] = storage.counter.useState(0, {
+const [counter, setCounter] = storage.counter.useState({
   onSet(next, prev) {
     console.log(`Changed from ${prev} to ${next}`)
   },
 })
 ```
 
+**`bidirectional`** — enables cross-tab sync via the `storage` event. Can be set here or in `defineState`:
+
+```ts
+const [note, setNote] = storage.note.useState({ bidirectional: true })
+```
+
 ### Return value
 
 ```ts
@@ -228,44 +280,49 @@ const [value, setValue, resetValue] = storage.node.useState()
 
 - **`value`** — current state
 - **`setValue(nextValue | updater)`** — set state; accepts a value or `(prev) => next` function
-- **`resetValue()`** — restores the default value
+- **`resetValue()`** — restores the default value (removes the storage entry if no default is defined)
 
 ## Custom Storage
 
-Any object implementing the [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Storage) works as a backend:
+Any object implementing the [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Storage) works as a backend. This makes it easy to add debouncing, encryption, or remote persistence:
 
 ```ts
+const db: Record<string, string> = {}
+
 const storage = setupStorage({
-  server: defineState({
-    storage: {
-      length: 0,
-      getItem: (key) => cache[key] ?? null,
-      setItem: (key, value) => api.save(key, value),
-      removeItem: (key) => { delete cache[key] },
-      clear: () => {},
-      key: () => null,
-    },
-  }),
+  server: {
+    data: defineState({
+      defaultValue: '',
+      storage: {
+        length: 0,
+        getItem: (key) => db[key] ?? null,
+        setItem: (key, value) => debouncedSave(key, value),
+        removeItem: (key) => { delete db[key] },
+        clear: () => {},
+        key: () => null,
+      },
+    }),
+  },
 })
 ```
 
 ## Full Example
 
 ```tsx
-import { setupStorage, defineState, StorageProvider } from 'state-vocab'
+import { setupStorage, defineState, StorageProvider } from '@yakocloud/state-vocab'
 
 type Theme = 'Dark' | 'White' | 'System'
 
 const storage = setupStorage({
   preference: {
     theme: defineState<Theme>({ storage: localStorage, defaultValue: 'Dark' }),
-    nightMode: defineState({ storage: sessionStorage }),
+    nightMode: defineState({ storage: sessionStorage, defaultValue: false }),
   },
   stats: {
-    counter: defineState({ defaultValue: 0 }),
+    counter: defineState({ defaultValue: 0, storage: sessionStorage }),
   },
   personal: {
-    note: defineState({ storage: localStorage }),
+    note: defineState({ storage: localStorage, defaultValue: '' }),
     birthday: defineState({
       storage: localStorage,
       deserialize: (raw) => {
@@ -273,20 +330,41 @@ const storage = setupStorage({
       },
     }),
   },
+  demo: {
+    pageProps: defineState<{ title: string; count: number }>({
+      storage: localStorage,
+    }),
+  },
 })
 
+// Root — initializes shared state for the whole subtree
+function Page() {
+  storage.demo.pageProps.useState({
+    defaultValue: { title: 'Hello', count: 42 },
+  })
+
+  return <Dashboard />
+}
+
+// Deep child — reads without re-specifying defaults
+function PageHeader() {
+  const [pageProps] = storage.demo.pageProps.useState()
+  return <h1>{pageProps.title} ({pageProps.count})</h1>
+}
+
 function Dashboard() {
   const [theme, setTheme] = storage.preference.theme.useState()
-  const [nightMode, setNightMode] = storage.preference.nightMode.useState(false)
-  const [counter, setCounter, resetCounter] = storage.stats.counter.useState(0)
-  const [note, setNote] = storage.personal.note.useState('', {
+  const [nightMode, setNightMode] = storage.preference.nightMode.useState()
+  const [counter, setCounter, resetCounter] = storage.stats.counter.useState()
+  const [note, setNote] = storage.personal.note.useState({
     delayedSet: 500,
-    bidirectional: true,
     onSet: (v) => console.log('Saving note:', v),
   })
 
   return (
     <div>
+      <PageHeader />
+
       <select value={theme ?? ''} onChange={(e) => setTheme(e.target.value as Theme)}>
         <option value="Dark">Dark</option>
         <option value="White">White</option>
@@ -317,7 +395,7 @@ function Dashboard() {
 
 createRoot(document.getElementById('root')!).render(
   <StorageProvider>
-    <Dashboard />
+    <Page />
   </StorageProvider>
 )
 ```
@@ -329,12 +407,16 @@ createRoot(document.getElementById('root')!).render(
 | Option | Type | Default |
 |---|---|---|
 | `storage` | `Storage \| (() => Storage) \| undefined` | `undefined` (in-memory) |
-| `defaultValue` | `T \| undefined` | `undefined` |
+| `defaultValue` | `T \| (() => T) \| undefined` | `undefined` |
 | `bidirectional` | `true \| undefined` | `undefined` |
 | `serialize` | `(v: T) => string` | `JSON.stringify` |
 | `deserialize` | `(v: string) => T` | `JSON.parse` |
 
-### `setupStorage<T>(tree: T): T`
+### `setupStorage<T>(tree: T, options?): T`
+
+| Option | Type | Default |
+|---|---|---|
+| `ssr` | `boolean \| undefined` | `false` |
 
 Returns a proxied copy of `tree` with paths injected into all leaf nodes.
 
@@ -342,13 +424,17 @@ Returns a proxied copy of `tree` with paths injected into all leaf nodes.
 
 React context provider. Must be an ancestor of any component using `.useState()`.
 
-### `node.useState<D>(defaultValue?, options?)`
+| Prop | Type | Description |
+|---|---|---|
+| `verbose` | `boolean \| undefined` | Log state vocab to console on every change |
+
+### `node.useState(options?)`
 
-| Parameter | Type | Description |
+| Option | Type | Description |
 |---|---|---|
-| `defaultValue` | `D \| (() => D) \| undefined` | Local default, overrides `defineState` default |
-| `options.delayedSet` | `number \| undefined` | Debounce delay for `onSet` in ms |
-| `options.onSet` | `(next: D, prev: D) => void \| undefined` | Callback after state change |
-| `options.bidirectional` | `true \| undefined` | bidirectional state update to sync tabs |
+| `defaultValue` | `T \| (() => T) \| undefined` | Local default, overrides `defineState` default |
+| `delayedSet` | `number \| undefined` | Debounce delay for `onSet` in ms |
+| `onSet` | `(next: T, prev: T) => void \| undefined` | Callback after state change |
+| `bidirectional` | `true \| undefined` | Sync state across browser tabs |
 
 Returns `[value, setValue, resetValue]`.

package/dist/state-vocab.cjs.js

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

package/dist/state-vocab.es.js

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

package/dist/types/main.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/types/state.d.ts

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

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

@@ -3,10 +3,6 @@ import type { ValueOrTransformer, Transformer, ValueOrFactory } from "./state.ty
 export declare const embed: <D>(statePath: string, value: D) => (vocab: Vocab<D>) => {
     [x: string]: D | null;
 };
-export declare const genStoredValue: <V>(options: {
-    serialized: string | null;
-    deserialize: (v: string) => V;
-}) => V | 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yakocloud/state-vocab",
-  "version": "2.3.6",
+  "version": "2.4.1",
   "main": "dist/state-vocab.cjs.js",
   "module": "dist/state-vocab.es.js",
   "types": "dist/types/index.d.ts",
@@ -8,6 +8,22 @@
   "files": [
     "dist"
   ],
+  "keywords": [
+    "react",
+    "state",
+    "state-management",
+    "storage",
+    "localStorage",
+    "sessionStorage",
+    "persist",
+    "persistent-state",
+    "hooks",
+    "useState",
+    "typescript",
+    "no-boilerplate",
+    "sync",
+    "cross-tab"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/yakovenkoroman1993/state-vocab"