hank-zilla 1.2.1 → 1.2.2

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 phamdung2209
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 phamdung2209
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,209 +1,209 @@
-# 🦖 Hank-Zilla
-
-A lightweight React state management library that eliminates the need for Context, Redux, or Providers. Share state across components as easily as `useState` with global accessibility.
-
-[![npm version](https://badge.fury.io/js/hank-zilla.svg)](https://badge.fury.io/js/hank-zilla)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
-
-## ✨ Features
-
--   🚀 **No Provider Required**: Share state globally without wrapping components in Providers
--   🔄 **Drop-in Replacement**: Replace `useState` with `useAppState` for global state
--   🎯 **Access Anywhere**: Use the same state in any component, anywhere in your app
--   🪶 **Lightweight**: Zero dependencies, minimal bundle size (~2.1KB)
--   ⚡ **Fast**: Built on React's `useSyncExternalStore` for optimal performance
--   📦 **TypeScript**: Full TypeScript support with type inference
-
-## 📦 Installation
-
-```bash
-npm install hank-zilla
-```
-
-## 🚀 Quick Start
-
-```typescript
-import { useAppState, setAppState, getAppState } from 'hank-zilla'
-
-// Parent Component - Set state
-function ParentComponent() {
-    const user = useAppState('user', { name: '', email: '' })
-
-    return (
-        <div>
-            <button
-                onClick={() => setAppState('user', { name: 'John Doe', email: 'john@example.com' })}
-            >
-                Set User
-            </button>
-            <ChildComponent />
-        </div>
-    )
-}
-
-// Child Component - Access same state (no props needed!)
-function ChildComponent() {
-    const user = useAppState('user')
-
-    return <div>{user ? `Welcome, ${user.name}!` : 'No user logged in'}</div>
-}
-```
-
-## 📖 API Reference
-
-### `useAppState(key, defaultValue?, removeOnUnmount?)`
-
-React hook for managing global state - works exactly like `useState` but globally accessible.
-
-```typescript
-// Basic usage
-const count = useAppState('count', 0)
-
-// Auto-cleanup when component unmounts
-const tempData = useAppState('tempData', null, true)
-
-// TypeScript support
-interface User {
-    name: string
-    email: string
-}
-const user = useAppState<User>('user', null)
-```
-
-### `setAppState(key, value)`
-
-Update state from anywhere in your app - works with values or updater functions.
-
-```typescript
-// Set value directly
-setAppState('count', 42)
-
-// Update with function (like useState)
-setAppState('count', (prev) => prev + 1)
-
-// Update object (shallow merge)
-setAppState('user', { name: 'John' })
-
-// Update array
-setAppState('items', (prev) => [...prev, 'new item'])
-```
-
-### `getAppState(key?)`
-
-Get state value without subscribing to changes (no re-renders).
-
-```typescript
-// Get specific key
-const currentCount = getAppState('count')
-
-// Get all state
-const allState = getAppState()
-
-// ⚠️ Note: This doesn't trigger re-renders when state changes
-```
-
-### `$getAppState` (Console Helper)
-
-Debug helper available in browser console to inspect your app state.
-
-```javascript
-// In browser console
-$getAppState // Returns all state
-$getAppState('key') // Returns specific key
-```
-
-## 🎯 Advanced Usage
-
-### Auto-cleanup with `removeOnUnmount`
-
-```typescript
-function TemporaryComponent() {
-    // This state will be deleted when component unmounts
-    const [data, setData] = useAppState('tempData', [], true)
-
-    return <div>Temporary data: {data.length} items</div>
-}
-```
-
-### TypeScript Support
-
-```typescript
-interface CartItem {
-    id: string
-    name: string
-    price: number
-}
-
-// Type inference
-const [cart, setCart] = useAppState<CartItem[]>('cart', [])
-
-// Add item with type safety
-const addItem = (item: CartItem) => {
-    setCart((prev) => [...prev, item])
-}
-```
-
-### Performance: When to use `getAppState`
-
-```typescript
-// ✅ Good: Use useAppState for UI components
-function Counter() {
-    const [count, setCount] = useAppState('count', 0)
-    return <div>Count: {count}</div> // Re-renders when count changes
-}
-
-// ✅ Good: Use getAppState for utilities/callbacks
-function logCurrentState() {
-    const count = getAppState('count')
-    console.log('Current count:', count) // No re-renders
-}
-```
-
-## 📊 Comparison
-
-| Feature           | Hank-Zilla  | Context API       | Redux              | Zustand     |
-| ----------------- | ----------- | ----------------- | ------------------ | ----------- |
-| **Setup**         | ❌ None     | ✅ Provider       | ✅ Store + Actions | ✅ Store    |
-| **Bundle Size**   | 🟢 ~1.3KB   | 🟢 Built-in       | 🔴 ~45KB           | 🟡 ~8KB     |
-| **Global Access** | ✅ Anywhere | ❌ Provider scope | ✅ Anywhere        | ✅ Anywhere |
-| **TypeScript**    | 🟢 Full     | 🟡 Manual         | 🟢 Full            | 🟢 Full     |
-
-## 🔧 Migration
-
-### From `useState` to `useAppState`
-
-```typescript
-// Before: Local state
-const [count, setCount] = useState(0)
-
-// After: Global state
-const count = useAppState('count', 0)
-```
-
-### From Context API
-
-```typescript
-// Before: Complex setup
-const UserContext = createContext()
-const { user, setUser } = useContext(UserContext)
-
-// After: Direct usage
-const user = useAppState('user', null)
-```
-
-## 🤝 Contributing
-
-Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.
-
-## 📄 License
-
-MIT License - see the [LICENSE](LICENSE) file for details.
-
-## 🙏 Acknowledgments
-
-Built with ❤️ by [phamdung2209](https://github.com/phamdung2209) • Special thanks to the React team for `useSyncExternalStore`
-
----
-
-Made with 🦖 by the Hank-Zilla team
+# 🦖 Hank-Zilla
+
+A lightweight React state management library that eliminates the need for Context, Redux, or Providers. Share state across components as easily as `useState` with global accessibility.
+
+[![npm version](https://badge.fury.io/js/hank-zilla.svg)](https://badge.fury.io/js/hank-zilla)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+
+## ✨ Features
+
+-   🚀 **No Provider Required**: Share state globally without wrapping components in Providers
+-   🔄 **Drop-in Replacement**: Replace `useState` with `useAppState` for global state
+-   🎯 **Access Anywhere**: Use the same state in any component, anywhere in your app
+-   🪶 **Lightweight**: Zero dependencies, minimal bundle size (~2.1KB)
+-   ⚡ **Fast**: Built on React's `useSyncExternalStore` for optimal performance
+-   📦 **TypeScript**: Full TypeScript support with type inference
+
+## 📦 Installation
+
+```bash
+npm install hank-zilla
+```
+
+## 🚀 Quick Start
+
+```typescript
+import { useAppState, setAppState, getAppState } from 'hank-zilla'
+
+// Parent Component - Set state
+function ParentComponent() {
+    const user = useAppState('user', { name: '', email: '' })
+
+    return (
+        <div>
+            <button
+                onClick={() => setAppState('user', { name: 'John Doe', email: 'john@example.com' })}
+            >
+                Set User
+            </button>
+            <ChildComponent />
+        </div>
+    )
+}
+
+// Child Component - Access same state (no props needed!)
+function ChildComponent() {
+    const user = useAppState('user')
+
+    return <div>{user ? `Welcome, ${user.name}!` : 'No user logged in'}</div>
+}
+```
+
+## 📖 API Reference
+
+### `useAppState(key, defaultValue?, removeOnUnmount?)`
+
+React hook for managing global state - works exactly like `useState` but globally accessible.
+
+```typescript
+// Basic usage
+const count = useAppState('count', 0)
+
+// Auto-cleanup when component unmounts
+const tempData = useAppState('tempData', null, true)
+
+// TypeScript support
+interface User {
+    name: string
+    email: string
+}
+const user = useAppState<User>('user', null)
+```
+
+### `setAppState(key, value)`
+
+Update state from anywhere in your app - works with values or updater functions.
+
+```typescript
+// Set value directly
+setAppState('count', 42)
+
+// Update with function (like useState)
+setAppState('count', (prev) => prev + 1)
+
+// Update object (shallow merge)
+setAppState('user', { name: 'John' })
+
+// Update array
+setAppState('items', (prev) => [...prev, 'new item'])
+```
+
+### `getAppState(key?)`
+
+Get state value without subscribing to changes (no re-renders).
+
+```typescript
+// Get specific key
+const currentCount = getAppState('count')
+
+// Get all state
+const allState = getAppState()
+
+// ⚠️ Note: This doesn't trigger re-renders when state changes
+```
+
+### `$getAppState` (Console Helper)
+
+Debug helper available in browser console to inspect your app state.
+
+```javascript
+// In browser console
+$getAppState // Returns all state
+$getAppState('key') // Returns specific key
+```
+
+## 🎯 Advanced Usage
+
+### Auto-cleanup with `removeOnUnmount`
+
+```typescript
+function TemporaryComponent() {
+    // This state will be deleted when component unmounts
+    const [data, setData] = useAppState('tempData', [], true)
+
+    return <div>Temporary data: {data.length} items</div>
+}
+```
+
+### TypeScript Support
+
+```typescript
+interface CartItem {
+    id: string
+    name: string
+    price: number
+}
+
+// Type inference
+const [cart, setCart] = useAppState<CartItem[]>('cart', [])
+
+// Add item with type safety
+const addItem = (item: CartItem) => {
+    setCart((prev) => [...prev, item])
+}
+```
+
+### Performance: When to use `getAppState`
+
+```typescript
+// ✅ Good: Use useAppState for UI components
+function Counter() {
+    const [count, setCount] = useAppState('count', 0)
+    return <div>Count: {count}</div> // Re-renders when count changes
+}
+
+// ✅ Good: Use getAppState for utilities/callbacks
+function logCurrentState() {
+    const count = getAppState('count')
+    console.log('Current count:', count) // No re-renders
+}
+```
+
+## 📊 Comparison
+
+| Feature           | Hank-Zilla  | Context API       | Redux              | Zustand     |
+| ----------------- | ----------- | ----------------- | ------------------ | ----------- |
+| **Setup**         | ❌ None     | ✅ Provider       | ✅ Store + Actions | ✅ Store    |
+| **Bundle Size**   | 🟢 ~1.3KB   | 🟢 Built-in       | 🔴 ~45KB           | 🟡 ~8KB     |
+| **Global Access** | ✅ Anywhere | ❌ Provider scope | ✅ Anywhere        | ✅ Anywhere |
+| **TypeScript**    | 🟢 Full     | 🟡 Manual         | 🟢 Full            | 🟢 Full     |
+
+## 🔧 Migration
+
+### From `useState` to `useAppState`
+
+```typescript
+// Before: Local state
+const [count, setCount] = useState(0)
+
+// After: Global state
+const count = useAppState('count', 0)
+```
+
+### From Context API
+
+```typescript
+// Before: Complex setup
+const UserContext = createContext()
+const { user, setUser } = useContext(UserContext)
+
+// After: Direct usage
+const user = useAppState('user', null)
+```
+
+## 🤝 Contributing
+
+Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.
+
+## 📄 License
+
+MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🙏 Acknowledgments
+
+Built with ❤️ by [phamdung2209](https://github.com/phamdung2209) • Special thanks to the React team for `useSyncExternalStore`
+
+---
+
+Made with 🦖 by the Hank-Zilla team

package/dist/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 phamdung2209
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 phamdung2209
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/README.md

@@ -1,209 +1,209 @@
-# 🦖 Hank-Zilla
-
-A lightweight React state management library that eliminates the need for Context, Redux, or Providers. Share state across components as easily as `useState` with global accessibility.
-
-[![npm version](https://badge.fury.io/js/hank-zilla.svg)](https://badge.fury.io/js/hank-zilla)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
-
-## ✨ Features
-
--   🚀 **No Provider Required**: Share state globally without wrapping components in Providers
--   🔄 **Drop-in Replacement**: Replace `useState` with `useAppState` for global state
--   🎯 **Access Anywhere**: Use the same state in any component, anywhere in your app
--   🪶 **Lightweight**: Zero dependencies, minimal bundle size (~2.1KB)
--   ⚡ **Fast**: Built on React's `useSyncExternalStore` for optimal performance
--   📦 **TypeScript**: Full TypeScript support with type inference
-
-## 📦 Installation
-
-```bash
-npm install hank-zilla
-```
-
-## 🚀 Quick Start
-
-```typescript
-import { useAppState, setAppState, getAppState } from 'hank-zilla'
-
-// Parent Component - Set state
-function ParentComponent() {
-    const user = useAppState('user', { name: '', email: '' })
-
-    return (
-        <div>
-            <button
-                onClick={() => setAppState('user', { name: 'John Doe', email: 'john@example.com' })}
-            >
-                Set User
-            </button>
-            <ChildComponent />
-        </div>
-    )
-}
-
-// Child Component - Access same state (no props needed!)
-function ChildComponent() {
-    const user = useAppState('user')
-
-    return <div>{user ? `Welcome, ${user.name}!` : 'No user logged in'}</div>
-}
-```
-
-## 📖 API Reference
-
-### `useAppState(key, defaultValue?, removeOnUnmount?)`
-
-React hook for managing global state - works exactly like `useState` but globally accessible.
-
-```typescript
-// Basic usage
-const count = useAppState('count', 0)
-
-// Auto-cleanup when component unmounts
-const tempData = useAppState('tempData', null, true)
-
-// TypeScript support
-interface User {
-    name: string
-    email: string
-}
-const user = useAppState<User>('user', null)
-```
-
-### `setAppState(key, value)`
-
-Update state from anywhere in your app - works with values or updater functions.
-
-```typescript
-// Set value directly
-setAppState('count', 42)
-
-// Update with function (like useState)
-setAppState('count', (prev) => prev + 1)
-
-// Update object (shallow merge)
-setAppState('user', { name: 'John' })
-
-// Update array
-setAppState('items', (prev) => [...prev, 'new item'])
-```
-
-### `getAppState(key?)`
-
-Get state value without subscribing to changes (no re-renders).
-
-```typescript
-// Get specific key
-const currentCount = getAppState('count')
-
-// Get all state
-const allState = getAppState()
-
-// ⚠️ Note: This doesn't trigger re-renders when state changes
-```
-
-### `$getAppState` (Console Helper)
-
-Debug helper available in browser console to inspect your app state.
-
-```javascript
-// In browser console
-$getAppState // Returns all state
-$getAppState('key') // Returns specific key
-```
-
-## 🎯 Advanced Usage
-
-### Auto-cleanup with `removeOnUnmount`
-
-```typescript
-function TemporaryComponent() {
-    // This state will be deleted when component unmounts
-    const [data, setData] = useAppState('tempData', [], true)
-
-    return <div>Temporary data: {data.length} items</div>
-}
-```
-
-### TypeScript Support
-
-```typescript
-interface CartItem {
-    id: string
-    name: string
-    price: number
-}
-
-// Type inference
-const [cart, setCart] = useAppState<CartItem[]>('cart', [])
-
-// Add item with type safety
-const addItem = (item: CartItem) => {
-    setCart((prev) => [...prev, item])
-}
-```
-
-### Performance: When to use `getAppState`
-
-```typescript
-// ✅ Good: Use useAppState for UI components
-function Counter() {
-    const [count, setCount] = useAppState('count', 0)
-    return <div>Count: {count}</div> // Re-renders when count changes
-}
-
-// ✅ Good: Use getAppState for utilities/callbacks
-function logCurrentState() {
-    const count = getAppState('count')
-    console.log('Current count:', count) // No re-renders
-}
-```
-
-## 📊 Comparison
-
-| Feature           | Hank-Zilla  | Context API       | Redux              | Zustand     |
-| ----------------- | ----------- | ----------------- | ------------------ | ----------- |
-| **Setup**         | ❌ None     | ✅ Provider       | ✅ Store + Actions | ✅ Store    |
-| **Bundle Size**   | 🟢 ~1.3KB   | 🟢 Built-in       | 🔴 ~45KB           | 🟡 ~8KB     |
-| **Global Access** | ✅ Anywhere | ❌ Provider scope | ✅ Anywhere        | ✅ Anywhere |
-| **TypeScript**    | 🟢 Full     | 🟡 Manual         | 🟢 Full            | 🟢 Full     |
-
-## 🔧 Migration
-
-### From `useState` to `useAppState`
-
-```typescript
-// Before: Local state
-const [count, setCount] = useState(0)
-
-// After: Global state
-const count = useAppState('count', 0)
-```
-
-### From Context API
-
-```typescript
-// Before: Complex setup
-const UserContext = createContext()
-const { user, setUser } = useContext(UserContext)
-
-// After: Direct usage
-const user = useAppState('user', null)
-```
-
-## 🤝 Contributing
-
-Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.
-
-## 📄 License
-
-MIT License - see the [LICENSE](LICENSE) file for details.
-
-## 🙏 Acknowledgments
-
-Built with ❤️ by [phamdung2209](https://github.com/phamdung2209) • Special thanks to the React team for `useSyncExternalStore`
-
----
-
-Made with 🦖 by the Hank-Zilla team
+# 🦖 Hank-Zilla
+
+A lightweight React state management library that eliminates the need for Context, Redux, or Providers. Share state across components as easily as `useState` with global accessibility.
+
+[![npm version](https://badge.fury.io/js/hank-zilla.svg)](https://badge.fury.io/js/hank-zilla)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+
+## ✨ Features
+
+-   🚀 **No Provider Required**: Share state globally without wrapping components in Providers
+-   🔄 **Drop-in Replacement**: Replace `useState` with `useAppState` for global state
+-   🎯 **Access Anywhere**: Use the same state in any component, anywhere in your app
+-   🪶 **Lightweight**: Zero dependencies, minimal bundle size (~2.1KB)
+-   ⚡ **Fast**: Built on React's `useSyncExternalStore` for optimal performance
+-   📦 **TypeScript**: Full TypeScript support with type inference
+
+## 📦 Installation
+
+```bash
+npm install hank-zilla
+```
+
+## 🚀 Quick Start
+
+```typescript
+import { useAppState, setAppState, getAppState } from 'hank-zilla'
+
+// Parent Component - Set state
+function ParentComponent() {
+    const user = useAppState('user', { name: '', email: '' })
+
+    return (
+        <div>
+            <button
+                onClick={() => setAppState('user', { name: 'John Doe', email: 'john@example.com' })}
+            >
+                Set User
+            </button>
+            <ChildComponent />
+        </div>
+    )
+}
+
+// Child Component - Access same state (no props needed!)
+function ChildComponent() {
+    const user = useAppState('user')
+
+    return <div>{user ? `Welcome, ${user.name}!` : 'No user logged in'}</div>
+}
+```
+
+## 📖 API Reference
+
+### `useAppState(key, defaultValue?, removeOnUnmount?)`
+
+React hook for managing global state - works exactly like `useState` but globally accessible.
+
+```typescript
+// Basic usage
+const count = useAppState('count', 0)
+
+// Auto-cleanup when component unmounts
+const tempData = useAppState('tempData', null, true)
+
+// TypeScript support
+interface User {
+    name: string
+    email: string
+}
+const user = useAppState<User>('user', null)
+```
+
+### `setAppState(key, value)`
+
+Update state from anywhere in your app - works with values or updater functions.
+
+```typescript
+// Set value directly
+setAppState('count', 42)
+
+// Update with function (like useState)
+setAppState('count', (prev) => prev + 1)
+
+// Update object (shallow merge)
+setAppState('user', { name: 'John' })
+
+// Update array
+setAppState('items', (prev) => [...prev, 'new item'])
+```
+
+### `getAppState(key?)`
+
+Get state value without subscribing to changes (no re-renders).
+
+```typescript
+// Get specific key
+const currentCount = getAppState('count')
+
+// Get all state
+const allState = getAppState()
+
+// ⚠️ Note: This doesn't trigger re-renders when state changes
+```
+
+### `$getAppState` (Console Helper)
+
+Debug helper available in browser console to inspect your app state.
+
+```javascript
+// In browser console
+$getAppState // Returns all state
+$getAppState('key') // Returns specific key
+```
+
+## 🎯 Advanced Usage
+
+### Auto-cleanup with `removeOnUnmount`
+
+```typescript
+function TemporaryComponent() {
+    // This state will be deleted when component unmounts
+    const [data, setData] = useAppState('tempData', [], true)
+
+    return <div>Temporary data: {data.length} items</div>
+}
+```
+
+### TypeScript Support
+
+```typescript
+interface CartItem {
+    id: string
+    name: string
+    price: number
+}
+
+// Type inference
+const [cart, setCart] = useAppState<CartItem[]>('cart', [])
+
+// Add item with type safety
+const addItem = (item: CartItem) => {
+    setCart((prev) => [...prev, item])
+}
+```
+
+### Performance: When to use `getAppState`
+
+```typescript
+// ✅ Good: Use useAppState for UI components
+function Counter() {
+    const [count, setCount] = useAppState('count', 0)
+    return <div>Count: {count}</div> // Re-renders when count changes
+}
+
+// ✅ Good: Use getAppState for utilities/callbacks
+function logCurrentState() {
+    const count = getAppState('count')
+    console.log('Current count:', count) // No re-renders
+}
+```
+
+## 📊 Comparison
+
+| Feature           | Hank-Zilla  | Context API       | Redux              | Zustand     |
+| ----------------- | ----------- | ----------------- | ------------------ | ----------- |
+| **Setup**         | ❌ None     | ✅ Provider       | ✅ Store + Actions | ✅ Store    |
+| **Bundle Size**   | 🟢 ~1.3KB   | 🟢 Built-in       | 🔴 ~45KB           | 🟡 ~8KB     |
+| **Global Access** | ✅ Anywhere | ❌ Provider scope | ✅ Anywhere        | ✅ Anywhere |
+| **TypeScript**    | 🟢 Full     | 🟡 Manual         | 🟢 Full            | 🟢 Full     |
+
+## 🔧 Migration
+
+### From `useState` to `useAppState`
+
+```typescript
+// Before: Local state
+const [count, setCount] = useState(0)
+
+// After: Global state
+const count = useAppState('count', 0)
+```
+
+### From Context API
+
+```typescript
+// Before: Complex setup
+const UserContext = createContext()
+const { user, setUser } = useContext(UserContext)
+
+// After: Direct usage
+const user = useAppState('user', null)
+```
+
+## 🤝 Contributing
+
+Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.
+
+## 📄 License
+
+MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🙏 Acknowledgments
+
+Built with ❤️ by [phamdung2209](https://github.com/phamdung2209) • Special thanks to the React team for `useSyncExternalStore`
+
+---
+
+Made with 🦖 by the Hank-Zilla team

package/dist/useAppState/appState.js

@@ -1 +1 @@
-import{useEffect,useSyncExternalStore}from"react";import init$ from"./init$";const listeners=new Set,store={state:{},getState:()=>store.state,subscribe:t=>(listeners.add(t),()=>listeners.delete(t)),setState:(t,e)=>{store.state={...store.state,...Object.entries(t).reduce((t,[e,s])=>{const r=store.state[e];return t[e]="function"==typeof s?s(r):"object"==typeof s&&null!==s?Array.isArray(s)?Array.isArray(r)?[...r,...s]:[...s]:0===Object.keys(s).length?s:{...r||{},...s}:s,t},{})},e||listeners.forEach(t=>t())}};export const useAppState=(t,e,s=!1,r)=>(useEffect(()=>(t in store.state||void 0===e||store.setState({[t]:e},r),()=>{s&&deleteAppState(t)}),[t,s,e,r]),useSyncExternalStore(store.subscribe,()=>store.state[t]??e,()=>e));export const setAppState=(t,e,s)=>{store.setState({[t]:e},s)};export const getAppState=t=>void 0===t?store.getState():store.getState()[t];export const deleteAppState=t=>{t in store.state&&delete store.state[t]};init$({getAppState:getAppState});export default store;
+import{useEffect,useSyncExternalStore}from"react";import init$ from"./init$";const listeners=new Set,store={state:{},getState:()=>store.state,subscribe:t=>(listeners.add(t),()=>listeners.delete(t)),setState:(t,e)=>{store.state={...store.state,...Object.entries(t).reduce((t,[e,s])=>{const r=store.state[e];return t[e]="function"==typeof s?s(r):"object"==typeof s&&null!==s?Array.isArray(s)?Array.isArray(r)?[...r,...s]:[...s]:0===Object.keys(s).length?s:{...r||{},...s}:s,t},{})},e||listeners.forEach(t=>t())}};export const useAppState=(t,e,s=!1,r)=>(t in store.state||void 0===e||store.setState({[t]:e},r),useEffect(()=>()=>{s&&deleteAppState(t)},[t,s]),useSyncExternalStore(store.subscribe,()=>store.state[t]??e,()=>e));export const setAppState=(t,e,s)=>{store.setState({[t]:e},s)};export const getAppState=t=>void 0===t?store.getState():store.getState()[t];export const deleteAppState=t=>{t in store.state&&delete store.state[t]};init$({getAppState:getAppState});export default store;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hank-zilla",
-    "version": "1.2.1",
+    "version": "1.2.2",
     "description": "A lightweight React state management library with modular architecture",
     "main": "dist/index.js",
     "module": "dist/index.js",