react-hooks-global-states 15.0.12 → 15.0.15

package/GlobalStore.js

@@ -1 +1 @@
-var t,e;t=this,e=(t,e,s,i,n,a)=>(()=>{"use strict";var o={78:e=>{e.exports=t},132:function(t,e,s){var i,n=this&&this.__createBinding||(Object.create?function(t,e,s,i){void 0===i&&(i=s);var n=Object.getOwnPropertyDescriptor(e,s);n&&!("get"in n?!e.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return e[s]}}),Object.defineProperty(t,i,n)}:function(t,e,s,i){void 0===i&&(i=s),t[i]=e[s]}),a=this&&this.__setModuleDefault||(Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e}),o=this&&this.__importStar||(i=function(t){return i=Object.getOwnPropertyNames||function(t){var e=[];for(var s in t)Object.prototype.hasOwnProperty.call(t,s)&&(e[e.length]=s);return e},i(t)},function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var s=i(t),o=0;o<s.length;o++)"default"!==s[o]&&n(e,t,s[o]);return a(e,t),e}),r=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.GlobalStore=void 0,e.createObservable=v,e.createSelectorHook=g;const l=s(155),c=r(s(506)),u=r(s(487)),d=o(s(673)),h=r(s(361)),b=r(s(78)),p=r(s(627));class f{constructor(t,e={metadata:{}}){var s,i;this.cleanupFunctions=[],this.actionsConfig=null,this.callbacks=null,this.actions=null,this.subscribers=new Set,this.createSelectorHook=g,this.createObservable=v;const{metadata:n,callbacks:a,actions:o,name:r}=e;if((0,c.default)(t)&&(this.stateCallback=t),(0,c.default)(n)&&(this.metadataCallback=n),this._name=null!=r?r:(0,b.default)("gs:"),this.state=this.stateCallback?this.stateCallback():t,this.metadata=this.metadataCallback?this.metadataCallback():null!=n?n:{},this.callbacks=null!=a?a:null,this.actionsConfig=null!=o?o:null,p.default.isDevToolsPresent){const t=null!==(s=(new Error).stack)&&void 0!==s?s:"";null===(i=p.default.REACT_GLOBAL_STATE_HOOK_DEBUG)||void 0===i||i.call(p.default,this,e,t)}this.constructor!==f||this.initialize()}async initialize(){var t,e,s,i,n,a,o,r;const l=null!==(e=null===(t=this.__devtools_initialize_getStoreActionsMapWrapped)||void 0===t?void 0:t.call(this))&&void 0!==e?e:this.getStoreActionsMap(),{actions:u,storeTools:d}=l;this.actions=u,this.storeTools=d,this.use=this.getMainHook();const h=null!==(i=null===(s=this.onInit)||void 0===s?void 0:s.call(this))&&void 0!==i?i:null;(0,c.default)(h)&&this.cleanupFunctions.push(h);const{onInit:b}=null!==(n=this.callbacks)&&void 0!==n?n:{};if(!b)return;const p=null!==(o=null===(a=this.__devtools_getLifeCycleStoreToolsWrapper)||void 0===a?void 0:a.call(this,"config/onInit/"))&&void 0!==o?o:d,f=null!==(r=null==b?void 0:b(p))&&void 0!==r?r:null;(0,c.default)(f)&&this.cleanupFunctions.push(f)}executeSetStateForSubscriber(t,e){const{selector:s,onStoreChange:i,currentState:n,isEqualRoot:a=(t,e)=>t===e,isEqual:o=(t,e)=>t===e}=t;if(!e.forceUpdate&&a(e.currentState,e.newState))return{didUpdate:!1};const r=s?s(e.newState):e.newState;return!e.forceUpdate&&o(n,r)?{didUpdate:!1}:(this.partialUpdateSubscription(t,{currentState:r}),i({state:r},{identifier:e.identifier}),{didUpdate:!0})}setActualStateWithoutValidations(t,{forceUpdate:e,identifier:s}){const i=this.state;if(!e&&i===t)return;this.state=t;const n=this.subscribers.values(),a={forceUpdate:e,newState:t,currentState:i,identifier:s};for(const t of n)this.executeSetStateForSubscriber(t,a)}setMetadata(t){const e=(0,c.default)(t)?t(this.metadata):t;this.metadata=e}getMetadata(){return this.metadata}getState(){return this.state}subscribe(...[t,e,s]){var i;const n=(0,c.default)(e),a=n?t:void 0,o=n?e:t,r=null!==(i=n?s:e)&&void 0!==i?i:void 0,l=a?a(this.state):this.state;(null==r?void 0:r.skipFirst)||o(l);const u=Object.assign({selector:a,currentState:l,onStoreChange:({state:t})=>o(t)},r);return this.subscribeCallback(u),()=>{this.subscribers.delete(u)}}subscribeCallback(t){var e,s;return null===(s=null===(e=this.callbacks)||void 0===e?void 0:e.onSubscribed)||void 0===s||s.call(e,this.storeTools,t),this.subscribers.add(t),()=>{this.subscribers.delete(t)}}partialUpdateSubscription(t,e){Object.assign(t,e)}getMainHook(){const t=`globalHook:${this._name}`,e=(e,s=[])=>{(0,l.useDebugValue)(t);const i=(0,d.isArray)(s)?{dependencies:s}:null!=s?s:{},n=(0,l.useRef)(null),a=t=>(0,c.default)(e)?e(t):t;n.current=(()=>n.current?n.current:Object.assign({selector:a,currentState:a(this.state),onStoreChange:()=>{throw new Error("Callback not set")}},i))();const o=n.current.dependencies,r=null==i?void 0:i.dependencies,u=Object.assign(Object.assign({},i),{selector:a,dependencies:r});this.partialUpdateSubscription(n.current,u);const{subscribe:h,getSnapshot:b,getServerSnapshot:p}=(0,l.useMemo)((()=>{const t=()=>n.current.currentState;return{subscribe:t=>(n.current.onStoreChange=t,this.subscribeCallback(n.current)),getSnapshot:t,getServerSnapshot:t}}),[]);return this.reselectIfDependenciesChanged({subscription:n.current,newDependencies:r,currentDependencies:o}),[(0,l.useSyncExternalStore)(h,b,p),this.getStateOrchestrator(),this.metadata]},s={actions:this.actions,createObservable:this.createObservable.bind(this),createSelectorHook:this.createSelectorHook.bind(this),dispose:this.dispose.bind(this),getMetadata:this.getMetadata.bind(this),getState:this.getState.bind(this),reset:this.reset.bind(this),setMetadata:this.setMetadata.bind(this),setState:this.setState.bind(this),subscribe:this.subscribe.bind(this),subscribers:this.subscribers,use:e,select:(...t)=>e(...t)[0]};return Object.assign(e,s),e}reselectIfDependenciesChanged({subscription:t,newDependencies:e,currentDependencies:s}){t.selector&&s!==e&&((null==s?void 0:s.length)===(null==e?void 0:e.length)&&(0,d.default)(s,e)||this.partialUpdateSubscription(t,{currentState:t.selector(this.state)}))}getStateOrchestrator(){return(()=>this.actions?this.actions:this.setState.bind(this))()}setState(t,{forceUpdate:e,identifier:s}={}){var i,n,a,o,r,l;const u=this.state,d=(0,c.default)(t)?t(u):t;if(!e&&this.state===d)return;const h=this.setActualStateWithoutValidations,b={previousState:u,state:d,identifier:s},p=Object.assign(Object.assign(Object.assign({},this.storeTools),b),{setState:h});(null===(i=this.callbacks)||void 0===i?void 0:i.computePreventStateChange)&&(null===(a=null===(n=this.callbacks)||void 0===n?void 0:n.computePreventStateChange)||void 0===a?void 0:a.call(n,p))||(this.setActualStateWithoutValidations(d,{forceUpdate:e,identifier:s}),null===(o=this.onStateChanged)||void 0===o||o.call(this,p),null===(l=null===(r=this.callbacks)||void 0===r?void 0:r.onStateChanged)||void 0===l||l.call(r,p))}getStoreActionsMap(){const t={setMetadata:this.setMetadata.bind(this),getMetadata:this.getMetadata.bind(this),getState:this.getState.bind(this),setState:this.setState.bind(this),subscribe:this.subscribe.bind(this),actions:null};if(!(0,u.default)(this.actionsConfig))return{actions:null,storeTools:t};const e=this.actionsConfig,s={};t.actions=s;const i=Object.keys(e);for(const n of i)Object.assign(s,{[n](...i){const a=e[n].apply(s,i);return"function"!=typeof a&&(0,h.default)(n),a.call(s,t)}});return{actions:s,storeTools:t}}removeSubscriptions(){this.subscribers.clear()}executeCleanupTasks(){this.cleanupFunctions.forEach((t=>{null==t||t()})),this.cleanupFunctions.length=0}dispose(){this.removeSubscriptions(),this.executeCleanupTasks()}reset(t,s){var i,n,a,o,r,l;this.executeCleanupTasks();const u=(()=>t===e.DEFAULT?this.state:this.stateCallback?this.stateCallback():t)(),d=(()=>s===e.DEFAULT?this.metadata:this.metadataCallback?this.metadataCallback():s)();this.setActualStateWithoutValidations(u,{forceUpdate:!0}),this.metadata=d;const h=null!==(n=null===(i=this.onInit)||void 0===i?void 0:i.call(this))&&void 0!==n?n:null;(0,c.default)(h)&&this.cleanupFunctions.push(h);const{onInit:b}=null!==(a=this.callbacks)&&void 0!==a?a:{};if(!b)return;const p=null!==(r=null===(o=this.__devtools_getLifeCycleStoreToolsWrapper)||void 0===o?void 0:o.call(this,"config/onInit/"))&&void 0!==r?r:this.storeTools,f=null!==(l=null==b?void 0:b(p))&&void 0!==l?l:null;(0,c.default)(f)&&this.cleanupFunctions.push(f)}}function v(t,e){const s=null==e?void 0:e.name,i=null==e?void 0:e.isEqualRoot,n=null==e?void 0:e.isEqual;let a=this.getState(),o=(null!=t?t:t=>t)(a);const r=new f(o,{name:null!=s?s:(0,b.default)("sh:")}),l=this.subscribe((e=>{if((null!=i?i:Object.is)(a,e))return;a=e;const s=t(e);(null!=n?n:Object.is)(o,s)||(o=s,r.setState(s))}),{skipFirst:!0}),c=r.subscribe.bind(r),u={getState:r.getState.bind(r),subscribe:r.subscribe.bind(r),createSelectorHook:g.bind(c),createObservable:v.bind(c),dispose:()=>{l(),r.dispose()},subscribers:r.subscribers};return Object.assign(c,u),c}function g(t,e){const s=null==e?void 0:e.name,i=null==e?void 0:e.isEqualRoot,n=null==e?void 0:e.isEqual;let a=this.getState(),o=(null!=t?t:t=>t)(a);const r=new f(o,{name:null!=s?s:(0,b.default)("sh:")}),l=this.subscribe((e=>{if((null!=i?i:Object.is)(a,e))return;a=e;const s=t(e);(null!=n?n:Object.is)(o,s)||(o=s,r.setState(s))}),{skipFirst:!0}),c=(...t)=>{const[e]=r.use(...t);return e},u={getState:()=>r.getState(),subscribe:r.subscribe.bind(r),createSelectorHook:g.bind(c),createObservable:v.bind(c),dispose:()=>{l(),r.dispose()},subscribers:r.subscribers};return Object.assign(c,u),c}e.GlobalStore=f,e.default=f},155:t=>{t.exports=e},361:t=>{t.exports=s},487:t=>{t.exports=i},506:t=>{t.exports=n},627:(t,e)=>{Object.defineProperty(e,"__esModule",{value:!0});const s=globalThis;s.isDevToolsPresent=Boolean(s.REACT_GLOBAL_STATE_HOOK_DEBUG),e.default=s},673:t=>{t.exports=a}},r={};return function t(e){var s=r[e];if(void 0!==s)return s.exports;var i=r[e]={exports:{}};return o[e].call(i.exports,i,i.exports,t),i.exports}(132)})(),"object"==typeof exports&&"object"==typeof module?module.exports=e(require("./uniqueId.js"),require("react"),require("./throwWrongKeyOnActionCollectionConfig.js"),require("./isRecord.js"),require("json-storage-formatter/isFunction"),require("./shallowCompare.js")):"function"==typeof define&&define.amd?define(["./uniqueId.js","react","./throwWrongKeyOnActionCollectionConfig.js","./isRecord.js","json-storage-formatter/isFunction","./shallowCompare.js"],e):"object"==typeof exports?exports["react-hooks-global-states"]=e(require("./uniqueId.js"),require("react"),require("./throwWrongKeyOnActionCollectionConfig.js"),require("./isRecord.js"),require("json-storage-formatter/isFunction"),require("./shallowCompare.js")):t["react-hooks-global-states"]=e(t["./uniqueId.js"],t.react,t["./throwWrongKeyOnActionCollectionConfig.js"],t["./isRecord.js"],t["json-storage-formatter/isFunction"],t["./shallowCompare.js"]);
+var t,e;t=this,e=(t,e,s,i,n,a)=>(()=>{"use strict";var o={12:e=>{e.exports=t},78:t=>{t.exports=e},132:function(t,e,s){var i,n=this&&this.__createBinding||(Object.create?function(t,e,s,i){void 0===i&&(i=s);var n=Object.getOwnPropertyDescriptor(e,s);n&&!("get"in n?!e.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return e[s]}}),Object.defineProperty(t,i,n)}:function(t,e,s,i){void 0===i&&(i=s),t[i]=e[s]}),a=this&&this.__setModuleDefault||(Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e}),o=this&&this.__importStar||(i=function(t){return i=Object.getOwnPropertyNames||function(t){var e=[];for(var s in t)Object.prototype.hasOwnProperty.call(t,s)&&(e[e.length]=s);return e},i(t)},function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var s=i(t),o=0;o<s.length;o++)"default"!==s[o]&&n(e,t,s[o]);return a(e,t),e}),r=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.GlobalStore=void 0,e.createObservable=v,e.createSelectorHook=g;const l=s(12),c=r(s(506)),u=r(s(487)),d=o(s(673)),h=r(s(361)),b=r(s(78)),p=r(s(627));class f{constructor(t,e={metadata:{}}){var s,i;this.cleanupFunctions=[],this.actionsConfig=null,this.callbacks=null,this.actions=null,this.subscribers=new Set,this.createSelectorHook=g,this.createObservable=v;const{metadata:n,callbacks:a,actions:o,name:r}=e;if((0,c.default)(t)&&(this.stateCallback=t),(0,c.default)(n)&&(this.metadataCallback=n),this._name=null!=r?r:(0,b.default)("gs:"),this.state=this.stateCallback?this.stateCallback():t,this.metadata=this.metadataCallback?this.metadataCallback():null!=n?n:{},this.callbacks=null!=a?a:null,this.actionsConfig=null!=o?o:null,p.default.isDevToolsPresent){const t=null!==(s=(new Error).stack)&&void 0!==s?s:"";null===(i=p.default.REACT_GLOBAL_STATE_HOOK_DEBUG)||void 0===i||i.call(p.default,this,e,t)}this.constructor!==f||this.initialize()}async initialize(){var t,e,s,i,n,a,o,r;const l=null!==(e=null===(t=this.__devtools_initialize_getStoreActionsMapWrapped)||void 0===t?void 0:t.call(this))&&void 0!==e?e:this.getStoreActionsMap(),{actions:u,storeTools:d}=l;this.actions=u,this.storeTools=d,this.use=this.getMainHook();const h=null!==(i=null===(s=this.onInit)||void 0===s?void 0:s.call(this))&&void 0!==i?i:null;(0,c.default)(h)&&this.cleanupFunctions.push(h);const{onInit:b}=null!==(n=this.callbacks)&&void 0!==n?n:{};if(!b)return;const p=null!==(o=null===(a=this.__devtools_getLifeCycleStoreToolsWrapper)||void 0===a?void 0:a.call(this,"config/onInit/"))&&void 0!==o?o:d,f=null!==(r=null==b?void 0:b(p))&&void 0!==r?r:null;(0,c.default)(f)&&this.cleanupFunctions.push(f)}executeSetStateForSubscriber(t,e){const{selector:s,onStoreChange:i,currentState:n,isEqualRoot:a=(t,e)=>t===e,isEqual:o=(t,e)=>t===e}=t;if(!e.forceUpdate&&a(e.currentState,e.newState))return{didUpdate:!1};const r=s?s(e.newState):e.newState;return!e.forceUpdate&&o(n,r)?{didUpdate:!1}:(this.partialUpdateSubscription(t,{currentState:r}),i({state:r},{identifier:e.identifier}),{didUpdate:!0})}setActualStateWithoutValidations(t,{forceUpdate:e,identifier:s}){const i=this.state;if(!e&&i===t)return;this.state=t;const n=this.subscribers.values(),a={forceUpdate:e,newState:t,currentState:i,identifier:s};for(const t of n)this.executeSetStateForSubscriber(t,a)}setMetadata(t){const e=(0,c.default)(t)?t(this.metadata):t;this.metadata=e}getMetadata(){return this.metadata}getState(){return this.state}subscribe(...[t,e,s]){var i;const n=(0,c.default)(e),a=n?t:void 0,o=n?e:t,r=null!==(i=n?s:e)&&void 0!==i?i:void 0,l=a?a(this.state):this.state;(null==r?void 0:r.skipFirst)||o(l);const u=Object.assign({selector:a,currentState:l,onStoreChange:({state:t})=>o(t)},r);return this.subscribeCallback(u),()=>{this.subscribers.delete(u)}}subscribeCallback(t){var e,s;return null===(s=null===(e=this.callbacks)||void 0===e?void 0:e.onSubscribed)||void 0===s||s.call(e,this.storeTools,t),this.subscribers.add(t),()=>{this.subscribers.delete(t)}}partialUpdateSubscription(t,e){Object.assign(t,e)}getMainHook(){const t=`globalHook:${this._name}`,e=(e,s=[])=>{(0,l.useDebugValue)(t);const i=(0,d.isArray)(s)?{dependencies:s}:null!=s?s:{},n=(0,l.useRef)(null),a=t=>(0,c.default)(e)?e(t):t;n.current=(()=>n.current?n.current:Object.assign({selector:a,currentState:a(this.state),onStoreChange:()=>{throw new Error("Callback not set")}},i))();const o=n.current.dependencies,r=null==i?void 0:i.dependencies,u=Object.assign(Object.assign({},i),{selector:a,dependencies:r});this.partialUpdateSubscription(n.current,u);const{subscribe:h,getSnapshot:b,getServerSnapshot:p}=(0,l.useMemo)((()=>{const t=()=>n.current.currentState;return{subscribe:t=>(n.current.onStoreChange=t,this.subscribeCallback(n.current)),getSnapshot:t,getServerSnapshot:t}}),[]);return this.reselectIfDependenciesChanged({subscription:n.current,newDependencies:r,currentDependencies:o}),[(0,l.useSyncExternalStore)(h,b,p),this.getStateOrchestrator(),this.metadata]},s={actions:this.actions,createObservable:this.createObservable.bind(this),createSelectorHook:this.createSelectorHook.bind(this),dispose:this.dispose.bind(this),getMetadata:this.getMetadata.bind(this),getState:this.getState.bind(this),reset:this.reset.bind(this),setMetadata:this.setMetadata.bind(this),setState:this.setState.bind(this),subscribe:this.subscribe.bind(this),subscribers:this.subscribers,use:e,select:(...t)=>e(...t)[0]};return Object.assign(e,s),e}reselectIfDependenciesChanged({subscription:t,newDependencies:e,currentDependencies:s}){t.selector&&s!==e&&((null==s?void 0:s.length)===(null==e?void 0:e.length)&&(0,d.default)(s,e)||this.partialUpdateSubscription(t,{currentState:t.selector(this.state)}))}getStateOrchestrator(){return(()=>this.actions?this.actions:this.setState.bind(this))()}setState(t,{forceUpdate:e,identifier:s}={}){var i,n,a,o,r,l;const u=this.state,d=(0,c.default)(t)?t(u):t;if(!e&&this.state===d)return;const h=this.setActualStateWithoutValidations,b={previousState:u,state:d,identifier:s},p=Object.assign(Object.assign(Object.assign({},this.storeTools),b),{setState:h});(null===(i=this.callbacks)||void 0===i?void 0:i.computePreventStateChange)&&(null===(a=null===(n=this.callbacks)||void 0===n?void 0:n.computePreventStateChange)||void 0===a?void 0:a.call(n,p))||(this.setActualStateWithoutValidations(d,{forceUpdate:e,identifier:s}),null===(o=this.onStateChanged)||void 0===o||o.call(this,p),null===(l=null===(r=this.callbacks)||void 0===r?void 0:r.onStateChanged)||void 0===l||l.call(r,p))}getStoreActionsMap(){const t={setMetadata:this.setMetadata.bind(this),getMetadata:this.getMetadata.bind(this),getState:this.getState.bind(this),setState:this.setState.bind(this),subscribe:this.subscribe.bind(this),actions:null};if(!(0,u.default)(this.actionsConfig))return{actions:null,storeTools:t};const e=this.actionsConfig,s={};t.actions=s;const i=Object.keys(e);for(const n of i)Object.assign(s,{[n](...i){const a=e[n].apply(s,i);return"function"!=typeof a&&(0,h.default)(n),a.call(s,t)}});return{actions:s,storeTools:t}}removeSubscriptions(){this.subscribers.clear()}executeCleanupTasks(){this.cleanupFunctions.forEach((t=>{null==t||t()})),this.cleanupFunctions.length=0}dispose(){this.removeSubscriptions(),this.executeCleanupTasks()}reset(t,s){var i,n,a,o,r,l;this.executeCleanupTasks();const u=(()=>t===e.DEFAULT?this.state:this.stateCallback?this.stateCallback():t)(),d=(()=>s===e.DEFAULT?this.metadata:this.metadataCallback?this.metadataCallback():s)();this.setActualStateWithoutValidations(u,{forceUpdate:!0}),this.metadata=d;const h=null!==(n=null===(i=this.onInit)||void 0===i?void 0:i.call(this))&&void 0!==n?n:null;(0,c.default)(h)&&this.cleanupFunctions.push(h);const{onInit:b}=null!==(a=this.callbacks)&&void 0!==a?a:{};if(!b)return;const p=null!==(r=null===(o=this.__devtools_getLifeCycleStoreToolsWrapper)||void 0===o?void 0:o.call(this,"config/onInit/"))&&void 0!==r?r:this.storeTools,f=null!==(l=null==b?void 0:b(p))&&void 0!==l?l:null;(0,c.default)(f)&&this.cleanupFunctions.push(f)}}function v(t,e){const s=null==e?void 0:e.name,i=null==e?void 0:e.isEqualRoot,n=null==e?void 0:e.isEqual;let a=this.getState(),o=(null!=t?t:t=>t)(a);const r=new f(o,{name:null!=s?s:(0,b.default)("sh:")}),l=this.subscribe((e=>{if((null!=i?i:Object.is)(a,e))return;a=e;const s=t(e);(null!=n?n:Object.is)(o,s)||(o=s,r.setState(s))}),{skipFirst:!0}),c=r.subscribe.bind(r),u={getState:r.getState.bind(r),subscribe:r.subscribe.bind(r),createSelectorHook:g.bind(c),createObservable:v.bind(c),dispose:()=>{l(),r.dispose()},subscribers:r.subscribers};return Object.assign(c,u),c}function g(t,e){const s=null==e?void 0:e.name,i=null==e?void 0:e.isEqualRoot,n=null==e?void 0:e.isEqual;let a=this.getState(),o=(null!=t?t:t=>t)(a);const r=new f(o,{name:null!=s?s:(0,b.default)("sh:")}),l=this.subscribe((e=>{if((null!=i?i:Object.is)(a,e))return;a=e;const s=t(e);(null!=n?n:Object.is)(o,s)||(o=s,r.setState(s))}),{skipFirst:!0}),c=(...t)=>{const[e]=r.use(...t);return e},u={getState:()=>r.getState(),subscribe:r.subscribe.bind(r),createSelectorHook:g.bind(c),createObservable:v.bind(c),dispose:()=>{l(),r.dispose()},subscribers:r.subscribers};return Object.assign(c,u),c}e.GlobalStore=f,e.default=f},361:t=>{t.exports=s},487:t=>{t.exports=i},506:t=>{t.exports=n},627:(t,e)=>{Object.defineProperty(e,"__esModule",{value:!0});const s=globalThis;s.isDevToolsPresent=Boolean(s.REACT_GLOBAL_STATE_HOOK_DEBUG),e.default=s},673:t=>{t.exports=a}},r={};return function t(e){var s=r[e];if(void 0!==s)return s.exports;var i=r[e]={exports:{}};return o[e].call(i.exports,i,i.exports,t),i.exports}(132)})(),"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("./uniqueId.js"),require("./throwWrongKeyOnActionCollectionConfig.js"),require("./isRecord.js"),require("json-storage-formatter/isFunction"),require("./shallowCompare.js")):"function"==typeof define&&define.amd?define(["react","./uniqueId.js","./throwWrongKeyOnActionCollectionConfig.js","./isRecord.js","json-storage-formatter/isFunction","./shallowCompare.js"],e):"object"==typeof exports?exports["react-hooks-global-states"]=e(require("react"),require("./uniqueId.js"),require("./throwWrongKeyOnActionCollectionConfig.js"),require("./isRecord.js"),require("json-storage-formatter/isFunction"),require("./shallowCompare.js")):t["react-hooks-global-states"]=e(t.React,t["./uniqueId.js"],t["./throwWrongKeyOnActionCollectionConfig.js"],t["./isRecord.js"],t["json-storage-formatter/isFunction"],t["./shallowCompare.js"]);

package/createContext.js

@@ -1 +1 @@
-var e,t;e=this,t=(e,t,r,o,a)=>(()=>{"use strict";var s={78:t=>{t.exports=e},155:e=>{e.exports=t},506:e=>{e.exports=r},695:function(e,t,r){var o=this&&this.__rest||function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(o=Object.getOwnPropertySymbols(e);a<o.length;a++)t.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(e,o[a])&&(r[o[a]]=e[o[a]])}return r},a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.createContext=void 0;const s=r(155),n=r(778),l=a(r(506)),u=a(r(773)),i=a(r(78));function c(e,t){var r;const o=null!==(r=null==t?void 0:t.name)&&void 0!==r?r:(0,i.default)("sh:"),a=(...r)=>{const a=this.api();return(0,s.useDebugValue)(`${this.displayName}:selector`),(0,s.useDebugValue)(`${o}:use`),(0,s.useMemo)((()=>a.createSelectorHook(e,t)),[a])(...r)},l={displayName:this.displayName,createSelectorHook:c.bind(a),api:()=>{(0,s.useDebugValue)(`${this.displayName}:selector`),(0,s.useDebugValue)(`${o}:api`);const r=this.api();return(0,s.useMemo)((()=>{const o=r.createObservable(e,t);return Object.assign(Object.assign({},r),{getState:()=>o.getState(),subscribe:o.subscribe.bind(o),createSelectorHook:n.createSelectorHook.bind(o),createObservable:n.createObservable.bind(o)})}),[r])}};return Object.assign(a,l),a}t.createContext=(e,t={})=>{var r;const a=(0,s.createContext)(null),d=null!==(r=t.name)&&void 0!==r?r:(0,i.default)("ctx:"),v=r=>{const i=(r=>{var{value:a}=r,i=o(r,["value"]);(0,s.useDebugValue)(`${d}:Provider`);const c=(0,s.useMemo)((()=>{var r,o,s,c;const d=()=>(0,l.default)(e)?e():e,v=(0,u.default)(a)?d():(0,l.default)(a)?a(d()):a,b=new n.GlobalStore(v,Object.assign(Object.assign({},t),{metadata:null!==(r=(0,l.default)(t.metadata)?t.metadata():t.metadata)&&void 0!==r?r:{}})),f={use:p};return Object.assign(b.storeTools,f),null===(s=null===(o=t.callbacks)||void 0===o?void 0:o.onCreated)||void 0===s||s.call(o,b.storeTools,b),null===(c=i.onCreated)||void 0===c||c.call(i,b.storeTools,b),b}),[]);return(0,s.useEffect)((()=>{var e,r,o;const a=[null===(r=null===(e=t.callbacks)||void 0===e?void 0:e.onMounted)||void 0===r?void 0:r.call(e,c.storeTools,c),null===(o=i.onMounted)||void 0===o?void 0:o.call(i,c.storeTools,c)].filter(Boolean);return()=>{var e,t,r,o;null===(t=null===(e=c.callbacks)||void 0===e?void 0:e.onUnMount)||void 0===t||t.call(e,c),a.forEach((e=>null==e?void 0:e())),null===(o=(r=c).__onUnMountContext)||void 0===o||o.call(r,c)}}),[c]),c})(r);return(0,s.createElement)(a.Provider,{value:i.use},r.children)};v.displayName=`${d}:Provider`,a.displayName=`${d}`;const b={makeProviderWrapper:e=>{const t={current:void 0,instance:void 0};return{wrapper:r=>{var{children:a}=r,n=o(r,["children"]);return(0,s.createElement)(v,Object.assign(Object.assign(Object.assign({},e),n),{onCreated:(r,o)=>{var a;t.current=r,t.instance=o,null===(a=null==e?void 0:e.onCreated)||void 0===a||a.call(e,r,o)}}),a)},context:t}}},p=(...e)=>{(0,s.useDebugValue)(`${d}:use`);const t=(0,s.useContext)(a);if(!t)throw new Error("use hook must be used within a ContextProvider");return t(...e)},f=()=>{(0,s.useDebugValue)(`${d}:api`);const e=(0,s.useContext)(a);if(!e)throw new Error("api hook must be used within a ContextProvider");return e},m={displayName:a.displayName,createSelectorHook:c.bind(p),api:f,select:(...e)=>p(...e)[0],observable:(...e)=>{(0,s.useDebugValue)(`${d}:observable`);const t=f(),r=(0,s.useRef)(e);return r.current=e,(0,s.useMemo)((()=>{var e,o,a;return t.createObservable((e=>(0,r.current[0])(e)),{isEqualRoot:(null===(e=r.current[1])||void 0===e?void 0:e.isEqualRoot)?(e,t)=>{const o=r.current[1].isEqualRoot;return Boolean(o(e,t))}:void 0,isEqual:(null===(o=r.current[1])||void 0===o?void 0:o.isEqual)?(e,t)=>{const o=r.current[1].isEqual;return Boolean(o(e,t))}:void 0,name:null===(a=r.current[1])||void 0===a?void 0:a.name})}),[t])},actions:()=>f().actions};return Object.assign(v,b),Object.assign(p,m),{use:p,Provider:v,Context:a}},t.default=t.createContext},773:e=>{e.exports=o},778:e=>{e.exports=a}},n={};return function e(t){var r=n[t];if(void 0!==r)return r.exports;var o=n[t]={exports:{}};return s[t].call(o.exports,o,o.exports,e),o.exports}(695)})(),"object"==typeof exports&&"object"==typeof module?module.exports=t(require("./uniqueId.js"),require("react"),require("json-storage-formatter/isFunction"),require("json-storage-formatter/isNil"),require("./GlobalStore.js")):"function"==typeof define&&define.amd?define(["./uniqueId.js","react","json-storage-formatter/isFunction","json-storage-formatter/isNil","./GlobalStore.js"],t):"object"==typeof exports?exports["react-hooks-global-states"]=t(require("./uniqueId.js"),require("react"),require("json-storage-formatter/isFunction"),require("json-storage-formatter/isNil"),require("./GlobalStore.js")):e["react-hooks-global-states"]=t(e["./uniqueId.js"],e.react,e["json-storage-formatter/isFunction"],e["json-storage-formatter/isNil"],e["./GlobalStore.js"]);
+var e,t;e=this,t=(e,t,r,o,a)=>(()=>{"use strict";var s={12:t=>{t.exports=e},78:e=>{e.exports=t},506:e=>{e.exports=r},695:function(e,t,r){var o=this&&this.__rest||function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(o=Object.getOwnPropertySymbols(e);a<o.length;a++)t.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(e,o[a])&&(r[o[a]]=e[o[a]])}return r},a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.createContext=void 0;const s=r(12),n=r(778),l=a(r(506)),u=a(r(773)),i=a(r(78));function c(e,t){var r;const o=null!==(r=null==t?void 0:t.name)&&void 0!==r?r:(0,i.default)("sh:"),a=(...r)=>{const a=this.api();return(0,s.useDebugValue)(`${this.displayName}:selector`),(0,s.useDebugValue)(`${o}:use`),(0,s.useMemo)((()=>a.createSelectorHook(e,t)),[a])(...r)},l={displayName:this.displayName,createSelectorHook:c.bind(a),api:()=>{(0,s.useDebugValue)(`${this.displayName}:selector`),(0,s.useDebugValue)(`${o}:api`);const r=this.api();return(0,s.useMemo)((()=>{const o=r.createObservable(e,t);return Object.assign(Object.assign({},r),{getState:()=>o.getState(),subscribe:o.subscribe.bind(o),createSelectorHook:n.createSelectorHook.bind(o),createObservable:n.createObservable.bind(o)})}),[r])}};return Object.assign(a,l),a}t.createContext=(e,t={})=>{var r;const a=(0,s.createContext)(null),d=null!==(r=t.name)&&void 0!==r?r:(0,i.default)("ctx:"),v=r=>{const i=(r=>{var{value:a}=r,i=o(r,["value"]);(0,s.useDebugValue)(`${d}:Provider`);const c=(0,s.useMemo)((()=>{var r,o,s,c;const d=()=>(0,l.default)(e)?e():e,v=(0,u.default)(a)?d():(0,l.default)(a)?a(d()):a,b=new n.GlobalStore(v,Object.assign(Object.assign({},t),{metadata:null!==(r=(0,l.default)(t.metadata)?t.metadata():t.metadata)&&void 0!==r?r:{}})),f={use:p};return Object.assign(b.storeTools,f),null===(s=null===(o=t.callbacks)||void 0===o?void 0:o.onCreated)||void 0===s||s.call(o,b.storeTools,b),null===(c=i.onCreated)||void 0===c||c.call(i,b.storeTools,b),b}),[]);return(0,s.useEffect)((()=>{var e,r,o;const a=[null===(r=null===(e=t.callbacks)||void 0===e?void 0:e.onMounted)||void 0===r?void 0:r.call(e,c.storeTools,c),null===(o=i.onMounted)||void 0===o?void 0:o.call(i,c.storeTools,c)].filter(Boolean);return()=>{var e,t,r,o;null===(t=null===(e=c.callbacks)||void 0===e?void 0:e.onUnMount)||void 0===t||t.call(e,c),a.forEach((e=>null==e?void 0:e())),null===(o=(r=c).__onUnMountContext)||void 0===o||o.call(r,c)}}),[c]),c})(r);return(0,s.createElement)(a.Provider,{value:i.use},r.children)};v.displayName=`${d}:Provider`,a.displayName=`${d}`;const b={makeProviderWrapper:e=>{const t={current:void 0,instance:void 0};return{wrapper:r=>{var{children:a}=r,n=o(r,["children"]);return(0,s.createElement)(v,Object.assign(Object.assign(Object.assign({},e),n),{onCreated:(r,o)=>{var a;t.current=r,t.instance=o,null===(a=null==e?void 0:e.onCreated)||void 0===a||a.call(e,r,o)}}),a)},context:t}}},p=(...e)=>{(0,s.useDebugValue)(`${d}:use`);const t=(0,s.useContext)(a);if(!t)throw new Error("use hook must be used within a ContextProvider");return t(...e)},f=()=>{(0,s.useDebugValue)(`${d}:api`);const e=(0,s.useContext)(a);if(!e)throw new Error("api hook must be used within a ContextProvider");return e},m={displayName:a.displayName,createSelectorHook:c.bind(p),api:f,select:(...e)=>p(...e)[0],observable:(...e)=>{(0,s.useDebugValue)(`${d}:observable`);const t=f(),r=(0,s.useRef)(e);return r.current=e,(0,s.useMemo)((()=>{var e,o,a;return t.createObservable((e=>(0,r.current[0])(e)),{isEqualRoot:(null===(e=r.current[1])||void 0===e?void 0:e.isEqualRoot)?(e,t)=>{const o=r.current[1].isEqualRoot;return Boolean(o(e,t))}:void 0,isEqual:(null===(o=r.current[1])||void 0===o?void 0:o.isEqual)?(e,t)=>{const o=r.current[1].isEqual;return Boolean(o(e,t))}:void 0,name:null===(a=r.current[1])||void 0===a?void 0:a.name})}),[t])},actions:()=>f().actions};return Object.assign(v,b),Object.assign(p,m),{use:p,Provider:v,Context:a}},t.default=t.createContext},773:e=>{e.exports=o},778:e=>{e.exports=a}},n={};return function e(t){var r=n[t];if(void 0!==r)return r.exports;var o=n[t]={exports:{}};return s[t].call(o.exports,o,o.exports,e),o.exports}(695)})(),"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("./uniqueId.js"),require("json-storage-formatter/isFunction"),require("json-storage-formatter/isNil"),require("./GlobalStore.js")):"function"==typeof define&&define.amd?define(["react","./uniqueId.js","json-storage-formatter/isFunction","json-storage-formatter/isNil","./GlobalStore.js"],t):"object"==typeof exports?exports["react-hooks-global-states"]=t(require("react"),require("./uniqueId.js"),require("json-storage-formatter/isFunction"),require("json-storage-formatter/isNil"),require("./GlobalStore.js")):e["react-hooks-global-states"]=t(e.React,e["./uniqueId.js"],e["json-storage-formatter/isFunction"],e["json-storage-formatter/isNil"],e["./GlobalStore.js"]);

package/createGlobalState.d.ts

@@ -4,3 +4,4 @@ import type { CreateGlobalState } from './types';
  */
 export declare const createGlobalState: CreateGlobalState;
 export default createGlobalState;
+export type { InferActionsType, InferStateApi, AnyActions } from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hooks-global-states",
-  "version": "15.0.12",
+  "version": "15.0.15",
   "description": "A package to easily handle global state across your React components using hooks.",
   "main": "./bundle.js",
   "types": "./index.d.ts",

package/webpack.config.js

@@ -29,7 +29,12 @@ module.exports = {
     ...individualEntries,
   },
   externals: {
-    react: 'react',
+    react: {
+      commonjs: 'react',
+      commonjs2: 'react',
+      amd: 'react',
+      root: 'React',
+    },
 
     'json-storage-formatter': 'json-storage-formatter',
     'json-storage-formatter/isNil': 'json-storage-formatter/isNil',

package/README.proposal.md

@@ -1,1191 +0,0 @@
-# react-hooks-global-states 🌟
-
-![Image John Avatar](https://raw.githubusercontent.com/johnny-quesada-developer/global-hooks-example/main/public/avatar2.jpeg)
-
-**Effortless global state management for React, React Native, and Preact!** 🚀
-
-Define **global state in just one line of code** and enjoy **lightweight, flexible, and scalable** state management with the familiarity of `useState`, but with the power of Redux and the simplicity of hooks. Zero configuration, fully typed, and framework-agnostic! ✨
-
-```tsx
-import { createGlobalState } from 'react-hooks-global-states/createGlobalState';
-
-export const useCounter = createGlobalState(0);
-
-// That's it! Use it anywhere in your app 🎉
-function Counter() {
-  const [count, setCount] = useCounter();
-  return <button onClick={() => setCount(count + 1)}>{count}</button>;
-}
-```
-
----
-
-## 🔗 Explore More
-
-- **[Live Example](https://johnny-quesada-developer.github.io/global-hooks-example/)** 📘
-- **[Video Overview](https://www.youtube.com/watch?v=1UBqXk2MH8I/)** 🎥
-- **[CodePen Demo](https://codepen.io/johnnynabetes/pen/WNmeGwb?editors=0010)** - Try it now!
-- **[react-hooks-global-states](https://www.npmjs.com/package/react-hooks-global-states)** - Compatible with React & React Native
-- **[react-global-state-hooks](https://www.npmjs.com/package/react-global-state-hooks)** - Web with **localStorage integration**
-- **[react-native-global-state-hooks](https://www.npmjs.com/package/react-native-global-state-hooks)** - React Native with **AsyncStorage integration**
-
----
-
-## 🚀 DevTools Extension
-
-React Hooks Global States includes a dedicated **DevTools extension** to streamline your development workflow! Easily visualize, inspect, debug, and modify your application's global state in real-time within your browser.
-
-### 🔗 [Install the DevTools Extension for Chrome](https://chromewebstore.google.com/detail/bafojplmkpejhglhjpibpdhoblickpee/preview?hl=en&authuser=0)
-
-### 📸 DevTools Highlights
-
-| **Track State Changes**                                                                                                               | **Modify the State**                                                                                                            |
-| ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| ![Track State Changes](https://github.com/johnny-quesada-developer/react-hooks-global-states/raw/main/public/track-state-changes.png) | ![Modify the State](https://github.com/johnny-quesada-developer/react-hooks-global-states/raw/main/public/modify-the-state.png) |
-| Effortlessly monitor state updates and history.                                                                                       | Instantly edit global states directly from the extension.                                                                       |
-
----
-
-| **Restore the State**                                                                                                             | **Custom Actions Granularity**                                                                                                                      |
-| --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ![Restore the State](https://github.com/johnny-quesada-developer/react-hooks-global-states/raw/main/public/restore-the-state.png) | ![Custom Actions Granularity](https://github.com/johnny-quesada-developer/react-hooks-global-states/raw/main/public/custom-actions-granularity.png) |
-| Quickly revert your application to a previous state.                                                                              | Precisely debug specific actions affecting state changes.                                                                                           |
-
----
-
-## 🎯 Why This Library?
-
-| Feature                    | react-hooks-global-states              | Redux                  | Zustand           | Jotai                   |
-| -------------------------- | -------------------------------------- | ---------------------- | ----------------- | ----------------------- |
-| **Setup complexity**       | ✅ One line                            | ❌ Boilerplate heavy   | ✅ Minimal        | ✅ Minimal              |
-| **TypeScript**             | ✅ Full inference                      | ⚠️ Manual typing       | ✅ Good           | ✅ Good                 |
-| **Selectors**              | ✅ Built-in + chainable                | ⚠️ Separate lib needed | ✅ Built-in       | ✅ Built-in             |
-| **Actions/Reducers**       | ✅ Optional, type-safe                 | ✅ Required            | ✅ Optional       | ❌ Not built-in         |
-| **DevTools**               | ✅ Dedicated extension                 | ✅ Redux DevTools      | ⚠️ Via middleware | ⚠️ Via additional setup |
-| **Scoped state (Context)** | ✅ Built-in API                        | ❌                     | ⚠️ Manual         | ✅ Via atoms            |
-| **Observable patterns**    | ✅ First-class                         | ❌                     | ⚠️ Via subscribe  | ⚠️ Custom               |
-| **Dependencies array**     | ✅ Selector deps                       | ❌                     | ❌                | ❌                      |
-| **Learning curve**         | ✅ If you know useState, you know this | ❌ High                | ✅ Low            | ✅ Low                  |
-
----
-
-## 📦 Installation
-
-```bash
-npm install react-hooks-global-states
-# or
-yarn add react-hooks-global-states
-# or
-pnpm add react-hooks-global-states
-```
-
-**Platform-specific packages with storage integration:**
-
-- **[react-global-state-hooks](https://www.npmjs.com/package/react-global-state-hooks)** - Web with localStorage
-- **[react-native-global-state-hooks](https://www.npmjs.com/package/react-native-global-state-hooks)** - React Native with AsyncStorage
-
----
-
-## 🚀 Quick Start
-
-### Basic Usage
-
-```tsx
-import { createGlobalState } from 'react-hooks-global-states/createGlobalState';
-
-// Create a global state
-const useAuth = createGlobalState<{ user: User | null }>({ user: null });
-
-// Use it in any component
-function UserProfile() {
-  const [auth, setAuth] = useAuth();
-
-  if (!auth.user) return <Login />;
-
-  return <div>Welcome {auth.user.name}</div>;
-}
-
-function LoginButton() {
-  const [, setAuth] = useAuth();
-
-  return <button onClick={() => setAuth({ user: { name: 'John' } })}>Login</button>;
-}
-```
-
----
-
-## 🎛️ Core Features
-
-### 1️⃣ Selectors - Subscribe to Specific State Changes
-
-For complex state objects, selectors allow components to subscribe only to the parts of state they care about, preventing unnecessary re-renders.
-
-```tsx
-import { createGlobalState } from 'react-hooks-global-states/createGlobalState';
-
-const useContacts = createGlobalState({
-  items: [] as Contact[],
-  filter: '',
-  selectedIds: new Set<number>(),
-});
-
-// Component only re-renders when items change
-function ContactList() {
-  const [contacts] = useContacts((state) => state.items);
-
-  return (
-    <ul>
-      {contacts.map((contact) => (
-        <li key={contact.id}>{contact.name}</li>
-      ))}
-    </ul>
-  );
-}
-
-// Component only re-renders when filter changes
-function SearchBar() {
-  const [filter, setContacts] = useContacts(
-    (state) => state.filter,
-    // Second parameter can customize equality checks
-    { isEqualRoot: (a, b) => a.filter === b.filter },
-  );
-
-  return (
-    <input value={filter} onChange={(e) => setContacts((prev) => ({ ...prev, filter: e.target.value }))} />
-  );
-}
-```
-
-### 2️⃣ Derived Selectors with Dependencies
-
-Unlike Redux, derived values automatically recompute when dependencies change while maintaining optimal performance.
-
-```tsx
-function FilteredContacts() {
-  const [filter] = useContacts((state) => state.filter);
-
-  // This selector recomputes when filter dependency changes
-  const [filtered] = useContacts(
-    (state) => state.items.filter((c) => c.name.includes(filter)),
-    [filter], // Dependencies array
-  );
-
-  return <ContactList contacts={filtered} />;
-}
-
-// Or use options object for more control
-function FilteredContactsAdvanced() {
-  const [filter] = useContacts((state) => state.filter);
-
-  const [filtered] = useContacts((state) => state.items.filter((c) => c.name.includes(filter)), {
-    dependencies: [filter],
-    isEqualRoot: (a, b) => a.items === b.items,
-    isEqual: (a, b) => a.length === b.length,
-  });
-
-  return <ContactList contacts={filtered} />;
-}
-```
-
-### 3️⃣ Reusable Selector Hooks
-
-Create derived hooks that can be reused across components and chained together.
-
-```tsx
-// Create reusable selectors
-const useContactsArray = useContacts.createSelectorHook((state) => state.items);
-
-const useContactsCount = useContactsArray.createSelectorHook((items) => items.length);
-
-const useFilteredContacts = useContactsArray.createSelectorHook((items, filter) =>
-  items.filter((c) => c.name.includes(filter)),
-);
-
-// Use them in components
-function Stats() {
-  const [count] = useContactsCount();
-  return <div>Total contacts: {count}</div>;
-}
-
-function ContactList() {
-  const [filter] = useContacts((state) => state.filter);
-
-  // Selector hooks still support inline selectors with dependencies!
-  const [filtered] = useContactsArray(
-    (contacts) => contacts.filter((c) => c.name.includes(filter)),
-    [filter],
-  );
-
-  return <ul>{/* ... */}</ul>;
-}
-```
-
-**✅ Important:** All selector hooks share the same state mutator, ensuring consistency:
-
-```tsx
-const [, setContactsArray] = useContactsArray();
-const [, setContactsOriginal] = useContacts();
-
-// These are the same function!
-console.log(setContactsArray === setContactsOriginal); // true
-console.log(setContactsArray === useContacts.setState); // true
-```
-
-### 4️⃣ Actions - Structured State Mutations
-
-Restrict state modifications to predefined actions for better architecture and type safety.
-
-```tsx
-import { createGlobalState } from 'react-hooks-global-states/createGlobalState';
-
-const useContacts = createGlobalState(
-  { items: [], filter: '', loading: false },
-  {
-    actions: {
-      // Async actions are fully supported
-      async fetch() {
-        return async ({ setState, getState }) => {
-          setState((prev) => ({ ...prev, loading: true }));
-
-          try {
-            const items = await fetchContacts();
-            setState((prev) => ({ ...prev, items, loading: false }));
-          } catch (error) {
-            setState((prev) => ({ ...prev, loading: false }));
-          }
-        };
-      },
-
-      // Parameterized actions
-      setFilter(filter: string) {
-        return ({ setState }) => {
-          setState((prev) => ({ ...prev, filter }));
-        };
-      },
-
-      // Actions can access other actions
-      addContact(contact: Contact) {
-        return ({ setState, actions }) => {
-          setState((prev) => ({
-            ...prev,
-            items: [...prev.items, contact],
-          }));
-
-          // Clear filter after adding
-          actions.setFilter('');
-        };
-      },
-    },
-  },
-);
-
-// When actions are defined, the second element is the actions object
-function ContactManager() {
-  const [state, actions] = useContacts();
-
-  useEffect(() => {
-    actions.fetch();
-  }, []);
-
-  return (
-    <div>
-      {state.loading && <Spinner />}
-      <input value={state.filter} onChange={(e) => actions.setFilter(e.target.value)} />
-      <button onClick={() => actions.addContact(newContact)}>Add Contact</button>
-    </div>
-  );
-}
-```
-
-**Note:** When actions are defined, direct `setState` is replaced by the actions object. However, `setState` is still available via the API for testing: `useContacts.setState()`
-
----
-
-## � Action Groups with `actionsFor`
-
-Need to **extend a store with additional actions** without modifying the original store definition? Use `actionsFor` to create action groups that can access both the store's state **and parent store actions**! Perfect for composition and code organization! 🎉
-
-### 📌 Direct Binding
-
-Bind actions directly to a store:
-
-```tsx
-import { createGlobalState } from 'react-hooks-global-states/createGlobalState';
-import { actionsFor } from 'react-hooks-global-states/actionsFor';
-
-const useCounter = createGlobalState(0);
-
-const counterActions = actionsFor(useCounter.api(), {
-  increment() {
-    return ({ setState, getState }) => {
-      setState(getState() + 1);
-    };
-  },
-  decrement() {
-    return ({ setState, getState }) => {
-      setState(getState() - 1);
-    };
-  },
-  reset() {
-    return ({ setState }) => {
-      setState(0);
-    };
-  },
-});
-
-// Use them anywhere in your app!
-counterActions.increment();
-counterActions.decrement();
-counterActions.reset();
-```
-
-### 📌 Builder Pattern (Reusable Templates!)
-
-Create **reusable action templates** that can be applied to multiple stores. This is incredibly powerful for code reuse! 💪
-
-```tsx
-import { actionsFor } from 'react-hooks-global-states/actionsFor';
-
-// Create a reusable template
-const withCounterActions = actionsFor().with({
-  increment() {
-    return ({ setState, getState }) => {
-      setState(getState() + 1);
-    };
-  },
-  decrement() {
-    return ({ setState, getState }) => {
-      setState(getState() - 1);
-    };
-  },
-  incrementBy(amount: number) {
-    return ({ setState, getState }) => {
-      setState(getState() + amount);
-    };
-  },
-});
-
-// Apply it to different stores! 🚀
-const counter1Actions = withCounterActions(useCounter1.api());
-const counter2Actions = withCounterActions(useCounter2.api());
-
-counter1Actions.increment(); // Updates counter1
-counter2Actions.incrementBy(5); // Updates counter2 by 5
-```
-
-### 📌 Accessing Parent Actions
-
-Actions created with `actionsFor` can call **parent store actions** via `this.actions`. This enables powerful composition patterns! 🔗
-
-```tsx
-import { createGlobalState } from 'react-hooks-global-states/createGlobalState';
-import { actionsFor } from 'react-hooks-global-states/actionsFor';
-
-const useCounter = createGlobalState(0, {
-  actions: {
-    reset() {
-      return ({ setState }) => setState(0);
-    },
-    setTo(value: number) {
-      return ({ setState }) => setState(value);
-    },
-  },
-});
-
-// Extend with additional actions that can use parent actions
-const extendedActions = actionsFor(useCounter.api(), {
-  incrementAndLog() {
-    return ({ setState, getState }) => {
-      const newValue = getState() + 1;
-      setState(newValue);
-      console.log(`Incremented to ${newValue}`);
-    };
-  },
-  resetWithMessage() {
-    return function () {
-      // Call parent action! ✨
-      this.actions.reset();
-      console.log('Counter has been reset!');
-    };
-  },
-  doubleIt() {
-    return function ({ getState }) {
-      // Access parent actions and use them
-      const current = getState();
-      this.actions.setTo(current * 2);
-    };
-  },
-});
-
-extendedActions.resetWithMessage(); // Calls parent reset() and logs message
-extendedActions.doubleIt(); // Doubles the counter using parent setTo()
-```
-
-### 📌 Complex Example: Async Actions with Dependencies
-
-```tsx
-import { createGlobalState } from 'react-hooks-global-states/createGlobalState';
-import { actionsFor } from 'react-hooks-global-states/actionsFor';
-
-const useTodos = createGlobalState(
-  { items: [], loading: false },
-  {
-    actions: {
-      setLoading(loading: boolean) {
-        return ({ setState, getState }) => {
-          setState({ ...getState(), loading });
-        };
-      },
-    },
-  },
-);
-
-const todoActions = actionsFor(useTodos.api(), {
-  async fetchTodos() {
-    return async function ({ setState, getState }) {
-      // Use parent action
-      this.actions.setLoading(true);
-
-      try {
-        const items = await fetch('/api/todos').then((r) => r.json());
-        setState({ ...getState(), items, loading: false });
-      } catch (error) {
-        this.actions.setLoading(false);
-        throw error;
-      }
-    };
-  },
-
-  addTodo(text: string) {
-    return ({ setState, getState }) => {
-      const newTodo = { id: Date.now(), text, completed: false };
-      const items = [...getState().items, newTodo];
-      setState({ ...getState(), items });
-    };
-  },
-
-  async addAndRefresh(text: string) {
-    return async function () {
-      // Compose multiple actions! 🎯
-      this.addTodo(text);
-      await this.fetchTodos();
-    };
-  },
-});
-
-// Use them!
-await todoActions.fetchTodos();
-todoActions.addTodo('Learn actionsFor');
-await todoActions.addAndRefresh('This is awesome!');
-```
-
-### ✨ Why Use `actionsFor`?
-
-- **🔄 Composability** – Mix and match action groups across stores without modifying original definitions
-- **📦 Reusability** – Define action templates once, use them everywhere
-- **🔗 Access Parent Actions** – New actions can leverage existing store logic via `this.actions`
-- **💪 Type Safety** – Full TypeScript inference for actions, parameters, and state
-- **🎯 Separation of Concerns** – Keep core store simple, extend with specialized action groups
-- **🚀 Progressive Enhancement** – Start simple, add complexity as needed
-
----
-
-## �🌐 Non-Component Usage
-
-Access and manipulate state outside React components - perfect for services, utilities, and event handlers.
-
-```tsx
-import { createGlobalState } from 'react-hooks-global-states/createGlobalState';
-
-const useAuth = createGlobalState({ user: null, token: null });
-
-// API service
-class AuthService {
-  async login(credentials: Credentials) {
-    const { user, token } = await api.login(credentials);
-
-    // Direct state access
-    useAuth.setState({ user, token });
-  }
-
-  async logout() {
-    await api.logout();
-    useAuth.setState({ user: null, token: null });
-  }
-
-  getToken() {
-    // Get current state synchronously
-    return useAuth.getState().token;
-  }
-}
-
-// Subscribe to changes outside components
-const unsubscribe = useAuth.subscribe((state) => {
-  console.log('Auth state changed:', state);
-
-  // Sync to external storage
-  if (state.token) {
-    localStorage.setItem('token', state.token);
-  }
-});
-
-// Later: cleanup
-unsubscribe();
-```
-
-### Subscriptions with Selectors
-
-Subscriptions support the same selector API as hooks:
-
-```tsx
-// Subscribe to a specific part of state
-const unsubscribe = useAuth.subscribe(
-  (state) => state.user,
-  (user) => {
-    console.log('User changed:', user);
-  },
-);
-
-// With options
-const unsubscribe2 = useAuth.subscribe(
-  (state) => state.user,
-  (user) => {
-    analytics.identify(user);
-  },
-  {
-    skipFirst: true, // Don't call on initial subscribe
-    isEqual: (a, b) => a?.id === b?.id,
-  },
-);
-```
-
-### Cross-State Dependencies
-
-One global state can react to changes in another:
-
-```tsx
-import { createGlobalState } from 'react-hooks-global-states/createGlobalState';
-
-const useSelectedContact = createGlobalState<Contact | null>(null, {
-  callbacks: {
-    onInit: ({ setState, getState }) => {
-      // When contacts change, clear selection if contact was deleted
-      return useContacts.subscribe(
-        (state) => state.items,
-        (contacts) => {
-          const selected = getState();
-          if (selected && !contacts.find((c) => c.id === selected.id)) {
-            setState(null);
-          }
-        },
-      );
-    },
-  },
-});
-```
-
----
-
-## 🎭 Context API - Scoped State
-
-When you need state scoped to a component tree instead of globally available. Same powerful API, different scope! 🎯
-
-```tsx
-import { createContext } from 'react-hooks-global-states/createContext';
-
-// Create a context with initial state
-const TodoListContext = createContext(
-  { todos: [], filter: 'all' },
-  {
-    actions: {
-      addTodo(text: string) {
-        return ({ setState }) => {
-          const newTodo = { id: Date.now(), text, completed: false };
-          setState((prev) => ({
-            ...prev,
-            todos: [...prev.todos, newTodo],
-          }));
-        };
-      },
-
-      toggleTodo(id: number) {
-        return ({ setState }) => {
-          setState((prev) => ({
-            ...prev,
-            todos: prev.todos.map((t) => (t.id === id ? { ...t, completed: !t.completed } : t)),
-          }));
-        };
-      },
-
-      setFilter(filter: 'all' | 'active' | 'completed') {
-        return ({ setState }) => {
-          setState((prev) => ({ ...prev, filter }));
-        };
-      },
-    },
-  },
-);
-
-// Wrap your component tree
-function App() {
-  return (
-    <TodoListContext.Provider>
-      <TodoList />
-      <TodoStats />
-    </TodoListContext.Provider>
-  );
-}
-
-// Use the context hook
-function TodoList() {
-  const [state, actions] = TodoListContext.use();
-
-  return (
-    <div>
-      <input
-        onKeyPress={(e) => {
-          if (e.key === 'Enter') {
-            actions.addTodo(e.currentTarget.value);
-          }
-        }}
-      />
-
-      {state.todos.map((todo) => (
-        <div key={todo.id} onClick={() => actions.toggleTodo(todo.id)}>
-          {todo.text}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-// Access context API without triggering re-renders
-function Logger() {
-  const api = TodoListContext.use.api();
-
-  useEffect(() => {
-    // This component won't re-render when state changes
-    const unsubscribe = api.subscribe((state) => {
-      console.log('State changed:', state);
-    });
-
-    return unsubscribe;
-  }, []);
-
-  return null;
-}
-```
-
-### Context Features
-
-All the same features as global state:
-
-```tsx
-// Selectors
-const [todos] = TodoListContext.use((state) => state.todos);
-
-// Selector hooks
-const useTodos = TodoListContext.use.createSelectorHook((state) => state.todos);
-const useTodoCount = useTodos.createSelectorHook((todos) => todos.length);
-
-// Observables
-const { context } = TodoListContext.Provider.makeProviderWrapper();
-const todoObservable = context.current.createObservable((state) => state.todos);
-
-// Access actions
-const actions = TodoListContext.use.actions();
-const [count, actions] = TodoListContext.use();
-
-// Non-reactive API access
-const api = TodoListContext.use.api();
-api.getState();
-api.setState({ todos: [], filter: 'all' });
-api.subscribe((state) => console.log(state));
-```
-
-### Multiple Providers
-
-Each provider creates an isolated state instance:
-
-```tsx
-function App() {
-  return (
-    <div>
-      <TodoListContext.Provider>
-        <TodoList title="Work Tasks" />
-      </TodoListContext.Provider>
-
-      <TodoListContext.Provider>
-        <TodoList title="Personal Tasks" />
-      </TodoListContext.Provider>
-    </div>
-  );
-}
-```
-
----
-
-## 🔭 Observables - Reactive State Fragments
-
-Observables provide a subscription-based API for watching specific state changes, useful for non-component code. Think of them as lightweight reactive streams! 🌊
-
-```tsx
-import { createGlobalState } from 'react-hooks-global-states/createGlobalState';
-
-const useCounter = createGlobalState(0);
-
-// Create an observable that transforms the state
-const counterLogs = useCounter.createObservable((count) => `Counter is at ${count}`);
-
-// Subscribe to changes
-const unsubscribe = counterLogs((message) => {
-  console.log(message); // "Counter is at 0", "Counter is at 1", etc.
-});
-
-// Observables can be chained
-const isEven = useCounter.createObservable((count) => count % 2 === 0);
-const evenMessage = isEven.createObservable((even) => (even ? 'Even number' : 'Odd number'));
-
-evenMessage((msg) => console.log(msg));
-
-// Cleanup
-unsubscribe();
-```
-
-### Observable API
-
-Observables expose the same readonly API as hooks:
-
-```tsx
-const observable = useCounter.createObservable((count) => count * 2);
-
-// Get current value
-observable.getState(); // returns doubled count
-
-// Subscribe to changes
-const unsub = observable.subscribe((doubled) => {
-  console.log('Doubled value:', doubled);
-});
-
-// Create derived observables
-const quadrupled = observable.createObservable((doubled) => doubled * 2);
-
-// Create selector hooks from observables
-const useDoubled = observable.createSelectorHook((state) => state);
-
-// Cleanup
-observable.dispose(); // Cleans up subscriptions
-```
-
----
-
-## 🔄 Lifecycle Callbacks
-
-Hook into state initialization and changes for setup, cleanup, and validation. Perfect for side effects! ⚡
-
-```tsx
-import { createGlobalState } from 'react-hooks-global-states/createGlobalState';
-
-const useData = createGlobalState(
-  { value: 0, lastUpdated: null },
-  {
-    callbacks: {
-      // Called once when store initializes
-      onInit: ({ setState, subscribe }) => {
-        console.log('Store initialized');
-
-        // Return cleanup function
-        return () => {
-          console.log('Store cleaned up');
-        };
-      },
-
-      // Called after every state change
-      onStateChanged: ({ state, previousState, identifier }) => {
-        console.log('State changed:', previousState, '→', state);
-
-        if (identifier) {
-          console.log('Change identifier:', identifier);
-        }
-
-        // Update timestamp
-        setState((prev) => ({ ...prev, lastUpdated: Date.now() }));
-      },
-
-      // Prevent specific state changes
-      computePreventStateChange: ({ state, previousState }) => {
-        // Prevent setting value to same number
-        return state.value === previousState.value;
-      },
-
-      // Called when a component subscribes
-      onSubscribed: (storeTools, subscription) => {
-        console.log('New subscriber added');
-      },
-    },
-  },
-);
-
-// Trigger with identifier for debugging
-useData.setState({ value: 5 }, { identifier: 'manual-update' });
-
-// Force update even if state is the same
-useData.setState((state) => state, { forceUpdate: true });
-```
-
----
-
-## 📊 Metadata - Non-Reactive Data
-
-Store non-reactive information alongside your state without triggering re-renders. Great for tracking stats, timestamps, and other auxiliary data! 📈
-
-```tsx
-import { createGlobalState } from 'react-hooks-global-states/createGlobalState';
-
-const useCounter = createGlobalState(0, {
-  metadata: {
-    createdAt: Date.now(),
-    updateCount: 0,
-  },
-});
-
-function Counter() {
-  const [count, setCount, metadata] = useCounter();
-
-  // Metadata doesn't cause re-renders when modified
-  metadata.updateCount += 1;
-
-  return (
-    <div>
-      <p>Count: {count}</p>
-      <p>Updates: {metadata.updateCount}</p>
-      <button onClick={() => setCount(count + 1)}>Increment</button>
-    </div>
-  );
-}
-
-// Access metadata externally
-const meta = useCounter.getMetadata();
-console.log(meta.createdAt);
-
-// Update metadata
-useCounter.setMetadata((prev) => ({
-  ...prev,
-  lastAccessed: Date.now(),
-}));
-```
-
----
-
-## 🧪 Testing & Debugging
-
-### Reset State for Tests
-
-```tsx
-import { createGlobalState } from 'react-hooks-global-states/createGlobalState';
-
-const useCounter = createGlobalState(0);
-
-afterEach(() => {
-  // Reset to initial state
-  useCounter.reset(0, {});
-});
-
-test('counter increments', () => {
-  const { result } = renderHook(() => useCounter());
-  const [, setCount] = result.current;
-
-  act(() => setCount(1));
-
-  expect(result.current[0]).toBe(1);
-});
-```
-
-### Dispose for Cleanup
-
-```tsx
-import { createGlobalState } from 'react-hooks-global-states/createGlobalState';
-
-const useTemp = createGlobalState({ data: [] });
-
-// When done with the store
-useTemp.dispose(); // Clears all subscriptions and executes cleanup
-```
-
-### DevTools Extension
-
-**[Install React Hooks Global States DevTools](https://chromewebstore.google.com/detail/bafojplmkpejhglhjpibpdhoblickpee)**
-
-Features:
-
-- 📊 Track all state changes in real-time
-- ✏️ Modify state directly from the extension
-- ⏮️ Time-travel debugging - restore previous states
-- 🎯 Action granularity - see individual action executions
-- 🔍 Inspect metadata and subscribers
-
-### Debug Identifiers
-
-```tsx
-import { createGlobalState } from 'react-hooks-global-states/createGlobalState';
-
-// Name your stores for easier debugging
-const useAuth = createGlobalState({ user: null }, { name: 'AuthStore' });
-
-// Use identifiers when updating state
-useAuth.setState(
-  { user: newUser },
-  {
-    identifier: 'login-success',
-  },
-);
-```
-
-### Type Inference Helpers
-
-```tsx
-import { createGlobalState } from 'react-hooks-global-states/createGlobalState';
-import type { InferAPI } from 'react-hooks-global-states/types';
-
-const useStore = createGlobalState(/* ... */);
-
-// Infer the complete API type
-type StoreAPI = InferAPI<typeof useStore>;
-
-// Use in functions that need the store tools
-function doSomething(store: StoreAPI) {
-  store.getState();
-  store.setState(/* ... */);
-  store.subscribe(/* ... */);
-}
-```
-
----
-
-## 📚 API Reference
-
-### `createGlobalState(initialState, options?)`
-
-Creates a global state hook.
-
-**Parameters:**
-
-- `initialState`: Initial state value
-- `options?`: Configuration object
-  - `name?`: Debug name
-  - `metadata?`: Non-reactive metadata
-  - `callbacks?`: Lifecycle callbacks
-    - `onInit?`: Called on initialization
-    - `onStateChanged?`: Called after state changes
-    - `computePreventStateChange?`: Validation function
-    - `onSubscribed?`: Called when component subscribes
-  - `actions?`: Action definitions
-
-**Returns:** State hook with extended API
-
-**Hook API:**
-
-- `use()` - Use in component (same as calling the hook directly)
-- `select(selector, deps?)` - Select a value without subscribing to state changes
-- `getState()` - Get current state
-- `setState(update, options?)` - Update state
-- `subscribe(callback)` / `subscribe(selector, callback, options?)` - Subscribe to changes
-- `getMetadata()` - Get metadata
-- `setMetadata(update)` - Update metadata
-- `createSelectorHook(selector, options?)` - Create derived hook
-- `createObservable(selector, options?)` - Create observable
-- `reset(state, metadata)` - Reset store
-- `dispose()` - Cleanup
-- `actions` - Action methods (when actions defined)
-- `subscribers` - Active subscriptions (debugging)
-
-### `createContext(initialState, options?)`
-
-Creates a context with the same API as global state, but scoped to a Provider.
-
-**Parameters:** Same as `createGlobalState`
-
-**Returns:** Context object
-
-- `Provider` - Context provider component
-  - `makeProviderWrapper()` - Get provider wrapper and context ref
-- `use` - Use the context (must be inside Provider)
-  - Same API as global state hook
-  - `use.api()` - Get non-reactive API access
-  - `use.actions()` - Get just the actions
-
----
-
-## 💡 Best Practices
-
-### 1. Organize State by Domain
-
-```tsx
-import { createGlobalState } from 'react-hooks-global-states/createGlobalState';
-
-// ✅ Good - domain-focused
-const useAuth = createGlobalState({ ... });
-const useCart = createGlobalState({ ... });
-const useProducts = createGlobalState({ ... });
-
-// ❌ Avoid - one giant state
-const useAppState = createGlobalState({
-  auth: { ... },
-  cart: { ... },
-  products: { ... },
-});
-```
-
-### 2. Use Actions for Complex Logic
-
-```tsx
-import { createGlobalState } from 'react-hooks-global-states/createGlobalState';
-
-// ✅ Good - encapsulated business logic
-const useCart = createGlobalState(initialCart, {
-  actions: {
-    addItem(product: Product, quantity: number) {
-      return ({ setState }) => {
-        // Validation, calculations, side effects
-        if (quantity <= 0) return;
-
-        setState((cart) => ({
-          ...cart,
-          items: [...cart.items, { product, quantity }],
-          total: calculateTotal(cart, product, quantity),
-        }));
-      };
-    },
-  },
-});
-
-// ❌ Avoid - business logic in components
-function Component() {
-  const [cart, setCart] = useCart();
-
-  const addItem = (product, quantity) => {
-    if (quantity <= 0) return;
-    setCart((cart) => ({
-      ...cart,
-      items: [...cart.items, { product, quantity }],
-      total: calculateTotal(cart, product, quantity),
-    }));
-  };
-}
-```
-
-### 3. Use Selectors for Performance
-
-```tsx
-// ✅ Good - only re-renders when relevant data changes
-const [userName] = useAuth((state) => state.user?.name);
-
-// ❌ Avoid - re-renders on any auth state change
-const [auth] = useAuth();
-const userName = auth.user?.name;
-```
-
-### 4. Leverage Selector Hooks for Reusability
-
-```tsx
-// ✅ Good - reusable, testable
-const useUserName = useAuth.createSelectorHook((state) => state.user?.name);
-
-// Use in multiple components
-function Header() {
-  const [name] = useUserName();
-  return <div>Hello {name}</div>;
-}
-
-function Profile() {
-  const [name] = useUserName();
-  return <h1>{name}'s Profile</h1>;
-}
-```
-
-### 5. Use Context for Isolated Features
-
-```tsx
-import { createContext } from 'react-hooks-global-states/createContext';
-
-// ✅ Good - wizard state isolated to flow
-const WizardContext = createContext({ step: 1, data: {} });
-
-function CheckoutWizard() {
-  return (
-    <WizardContext.Provider>
-      <WizardSteps />
-    </WizardContext.Provider>
-  );
-}
-
-// ❌ Avoid - global state for temporary UI state
-const useWizardState = createGlobalState({ step: 1, data: {} });
-```
-
-### 6. Use `actionsFor` for Extending Stores
-
-```tsx
-import { actionsFor } from 'react-hooks-global-states/actionsFor';
-
-// ✅ Good - extend stores with reusable action templates
-const withLogging = actionsFor().with({
-  logState() {
-    return ({ getState }) => {
-      console.log('Current state:', getState());
-    };
-  },
-});
-
-// Apply to any store!
-const counterWithLogging = withLogging(useCounter.api());
-const authWithLogging = withLogging(useAuth.api());
-
-// ❌ Avoid - repeating the same actions in multiple stores
-const useCounter = createGlobalState(0, {
-  actions: {
-    logState() {
-      /* duplicate code */
-    },
-  },
-});
-
-const useAuth = createGlobalState(null, {
-  actions: {
-    logState() {
-      /* duplicate code */
-    },
-  },
-});
-```
-
----
-
-## 🔗 Resources
-
-- **[Live Example](https://johnny-quesada-developer.github.io/global-hooks-example/)**
-- **[Video Overview](https://www.youtube.com/watch?v=1UBqXk2MH8I/)**
-- **[CodePen Demo](https://codepen.io/johnnynabetes/pen/WNmeGwb?editors=0010)**
-- **[DevTools Extension](https://chromewebstore.google.com/detail/bafojplmkpejhglhjpibpdhoblickpee)**
-- **[GitHub Repository](https://github.com/johnny-quesada-developer/react-hooks-global-states)**
-
-## 📦 Related Packages
-
-- **[react-global-state-hooks](https://www.npmjs.com/package/react-global-state-hooks)** - Web with localStorage integration
-- **[react-native-global-state-hooks](https://www.npmjs.com/package/react-native-global-state-hooks)** - React Native with AsyncStorage integration
-
----
-
-## 📄 License
-
-MIT © [Johnny Quesada](https://github.com/johnny-quesada-developer)
-
----
-
-## 🙏 Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request.
-
----
-
-**Made with ❤️ by developers, for developers**