@uistate/core 1.0.0 → 2.0.1

package/README.md

@@ -1,119 +1,105 @@
 # @uistate/core
 
-High-performance UI state management using CSS custom properties. 44% faster than traditional state management solutions with 12.5% lower memory usage.
+**author**: Ajdin Imsirovic <ajdika@live.com> (GitHub)  
+**maintainer**: uistate <ajdika.i@gmail.com> (npm)
+
+High-performance UI state management using CSS custom properties and ADSI (Attribute-Driven State Inheritance). Focused heavily on DX and performance.
 
 ## Features
 
-- 🚀 44% faster state updates than Redux
-- 📉 12.5% lower memory usage
+- 🚀 Potentially O(1) state updates using CSS custom properties
+- 📉 Significant memory savings compared to virtual DOM approaches
 - 🎯 Zero configuration
-- 🔄 Automatic reactivity
+- 🔄 Automatic reactivity through CSS cascade
 - 🎨 Framework agnostic
-- 📦 Tiny bundle size (~1KB)
-- 💪 Full TypeScript support
-- 📊 Optional performance monitoring
+- 📦 Tiny bundle size (~2KB)
+- 🧩 Modular architecture with dedicated modules for CSS state and events
 
 ## Installation
 
 ```bash
 # Install the core package
 npm install @uistate/core
-
-# Optional: Install performance monitoring
-npm install @uistate/performance
 ```
 
 ## Quick Start
 
-```typescript
-import { UIState } from '@uistate/core';
+```javascript
+import { cssState, eventState } from '@uistate/core';
 
 // Initialize state
-UIState.init();
+cssState.init();
 
-// Set state
-UIState.setState('count', 0);
+// Set state via CSS variables
+cssState.set('--counter-value', '0');
 
 // Get state
-const count = UIState.getState('count');
+const count = parseInt(cssState.get('--counter-value'));
 
 // Subscribe to changes
-const unsubscribe = UIState.observe('count', (newValue) => {
-  console.log('Count changed:', newValue);
+const unsubscribe = eventState.on('counter:change', (newValue) => {
+  console.log('Counter changed:', newValue);
 });
 
-// React Hook
-import { useUIState } from '@uistate/core/react';
+// Set state with an attribute
+document.documentElement.dataset.counterValue = count + 1;
+```
+
+### HTML Usage Example
+
+```html
+<button data-counter-value="0" id="counter-btn">Count: 0</button>
+```
 
-function Counter() {
-  const [count, setCount] = useUIState('count', 0);
-  return (
-    <button onClick={() => setCount(count + 1)}>
-      Count: {count}
-    </button>
-  );
+```css
+[data-counter-value] {
+  /* Style based on state */
 }
 ```
 
+```javascript
+document.getElementById('counter-btn').addEventListener('click', () => {
+  const btn = document.getElementById('counter-btn');
+  const currentValue = parseInt(btn.dataset.counterValue);
+  btn.dataset.counterValue = currentValue + 1;
+  btn.textContent = `Count: ${currentValue + 1}`;
+  eventState.emit('counter:change', currentValue + 1);
+});
+```
+
 ## Why @uistate/core?
 
 ### Performance
 
-- **44% Faster Updates**: Leverages browser's CSS engine for optimal performance
-- **12.5% Lower Memory**: Efficient state storage using CSS custom properties
-- **Minimal Overhead**: No virtual DOM diffing for state updates
+- **CSS-Driven Updates**: Leverages browser's CSS engine for optimal performance with O(1) complexity
+- **DOM as Source of Truth**: Efficient state storage using CSS custom properties and data attributes
+- **Minimal Overhead**: No virtual DOM diffing or shadow DOM needed
 
 ### Developer Experience
 
-- **Simple API**: Just `setState`, `getState`, and `observe`
-- **TypeScript Support**: Full type safety and autocompletion
-- **Framework Agnostic**: Works with any framework
+- **Simple API**: Modular `cssState` and `eventState` for clear separation of concerns
+- **Framework Agnostic**: Works with any framework or vanilla JavaScript
 - **Zero Config**: No store setup, no reducers, no actions
+- **CSS-Native**: Leverages the power of CSS selectors and the cascade
 
-## Performance Monitoring
-
-The `@uistate/performance` package provides detailed performance metrics for your application:
+### Core Concepts
 
-```typescript
-import { PerformanceTracker } from '@uistate/performance';
-import { PerformanceDisplay } from '@uistate/performance';
-
-// Start tracking performance
-const tracker = PerformanceTracker.getInstance();
-tracker.start();
-
-// Optional: Add the performance display component to your React app
-function App() {
-  return (
-    <div>
-      <YourApp />
-      <PerformanceDisplay />
-    </div>
-  );
-}
-```
-
-The performance tracker monitors:
-- State update duration
-- Component render time
-- FPS (Frames Per Second)
-- Memory usage
-- Long task duration
+- **Attribute-Driven State Inheritance (ADSI)**: State represented both as CSS variables and data attributes
+- **Hierarchical State Machines**: Model complex UI states with nested state machines
+- **CSS-Driven State Derivation**: Derive complex states using CSS without JavaScript
 
 ## Project Structure
 
 ```
 @uistate/core/
 ├── src/                  # Core library
-│   ├── index.ts         # Main entry
-│   ├── UIState.ts       # Core implementation
-│   └── react/           # React bindings
-│       └── index.ts     # React hooks
-├── packages/
-│   └── performance/     # Performance monitoring package
+│   ├── index.js         # Main entry 
+│   ├── cssState.js      # CSS variables management
+│   ├── eventState.js    # Event-based state transitions
+│   └── templateManager.js # Component management
 └── examples/            # Example applications
-    ├── traditional/     # Traditional Redux app
-    └── uistate/        # UIState implementation
+    ├── basic/          # Simple examples (range sliders, toggles, etc)
+    └── advanced/       # Advanced patterns and techniques
 ```
 
 ## Browser Support
@@ -123,6 +109,66 @@ The performance tracker monitors:
 - Safari 10.1+
 - Edge 79+
 
+# Core Ideas Behind UIstate
+
+UIstate is a JavaScript-based UI state management system that leverages CSS custom properties and data attributes as the storage mechanism, paired with event-based state transitions.
+
+## Key Components
+
+### cssState
+
+The `cssState` module provides methods to manage state through CSS custom properties:
+
+```javascript
+// Initialize CSS state management
+cssState.init();
+
+// Set a CSS custom property
+cssState.set('--theme-mode', 'dark');
+
+// Get a CSS custom property value
+const theme = cssState.get('--theme-mode');
+```
+
+### eventState
+
+The `eventState` module provides an event system for state transitions:
+
+```javascript
+// Listen for state changes
+eventState.on('theme:change', (newTheme) => {
+  console.log('Theme changed to:', newTheme);
+});
+
+// Trigger state changes
+eventState.emit('theme:change', 'light');
+
+// Clean up listeners
+eventState.off('theme:change');
+```
+
+### templateManager
+
+The `templateManager` module helps with component initialization and templating:
+
+```javascript
+// Initialize components from templates
+templateManager.init();
+
+// Create a component from a template
+const button = templateManager.createFromTemplate('button-template');
+document.body.appendChild(button);
+```
+
+## Key Features
+
+1. Uses CSS custom properties as a storage mechanism, making state changes automatically trigger UI updates
+2. Provides a clear separation between state storage (CSS) and behavior (JavaScript)
+3. Implements a pub/sub pattern for reactive updates
+4. Leverages the CSS cascade for hierarchical state inheritance
+
+This implementation is particularly useful for building UI components with clean separation of concerns and optimal performance.
+
 ## Contributing
 
 We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

package/package.json

@@ -1,20 +1,15 @@
 {
   "name": "@uistate/core",
-  "version": "1.0.0",
-  "description": "High-performance UI state management using CSS custom properties",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "version": "2.0.1",
+  "description": "High-performance UI state management using CSS custom properties and ADSI (Attribute-Driven State Inheritance)",
+  "main": "src/index.js",
+  "module": "src/index.js",
   "files": [
-    "dist",
     "src"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts",
     "test": "jest",
-    "lint": "eslint src",
-    "typecheck": "tsc --noEmit",
-    "prepare": "npm run build"
+    "lint": "eslint src"
   },
   "keywords": [
     "state-management",
@@ -23,7 +18,10 @@
     "css",
     "performance"
   ],
-  "author": "Imsirovic Ajdin",
+  "author": "Ajdin Imsirovic <ajdika@live.com> (GitHub)",
+  "contributors": [
+    "uistate <ajdika.i@gmail.com> (npm)"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -37,18 +35,9 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@types/node": "^20.0.0",
-    "@types/react": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
     "eslint": "^8.0.0",
     "jest": "^29.0.0",
-    "jest-environment-jsdom": "^29.0.0",
-    "@types/jest": "^29.0.0",
-    "ts-jest": "^29.0.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.0.0",
-    "react": "^18.0.0"
+    "jest-environment-jsdom": "^29.0.0"
   },
   "sideEffects": false
 }

package/src/cssState.js

@@ -0,0 +1,87 @@
+/**
+ * UIstate - CSS-based state management module
+ * Part of the UIstate declarative state management system
+ * Uses CSS custom properties and data attributes for state representation
+ */
+const createCssState = (initialState = {}) => {
+    const state = {
+        _sheet: null,
+        _observers: new Map(),
+        
+        init() {
+            if (!this._sheet) {
+                const style = document.createElement('style');
+                document.head.appendChild(style);
+                this._sheet = style.sheet;
+                this._addRule(':root {}');
+            }
+            
+            // Initialize with any provided state
+            if (initialState && typeof initialState === 'object') {
+                Object.entries(initialState).forEach(([key, value]) => {
+                    this.setState(key, value);
+                });
+            }
+            
+            return this;
+        },
+        
+        setState(key, value) {
+            const cssValue = typeof value === 'string' ? value : JSON.stringify(value);
+            document.documentElement.style.setProperty(`--${key}`, cssValue);
+            document.documentElement.setAttribute(`data-${key}`, value);
+            this._notifyObservers(key, value);
+            return value;
+        },
+        
+        getState(key) {
+            const value = getComputedStyle(document.documentElement).getPropertyValue(`--${key}`).trim();
+            try {
+                return JSON.parse(value);
+            } catch (e) {
+                return value;
+            }
+        },
+        
+        observe(key, callback) {
+            if (!this._observers.has(key)) {
+                this._observers.set(key, new Set());
+            }
+            this._observers.get(key).add(callback);
+            return () => {
+                const observers = this._observers.get(key);
+                if (observers) {
+                    observers.delete(callback);
+                }
+            };
+        },
+        
+        _notifyObservers(key, value) {
+            const observers = this._observers.get(key);
+            if (observers) {
+                observers.forEach(cb => cb(value));
+            }
+        },
+        
+        _addRule(rule) {
+            if (this._sheet) {
+                this._sheet.insertRule(rule, this._sheet.cssRules.length);
+            }
+        },
+        
+        // Clean up resources
+        destroy() {
+            this._observers.clear();
+            // The style element will remain in the DOM
+            // as removing it would affect the UI state
+        }
+    };
+    
+    return state.init();
+};
+
+// Legacy singleton for backward compatibility
+const CssState = createCssState();
+
+export default createCssState;
+export { createCssState, CssState };

package/src/eventState.js

@@ -0,0 +1,98 @@
+/**
+ * UIstate - Event-based hierarchical state management module
+ * Part of the UIstate declarative state management system
+ * Uses DOM events for pub/sub with hierarchical path support
+ */
+
+const createEventState = (initial = {}) => {
+    // Clone the initial state to avoid direct mutations to the passed object
+    const store = JSON.parse(JSON.stringify(initial));
+
+    // Create a dedicated DOM element to use as an event bus
+    const bus = document.createElement("x-store");
+
+    // Optional: Keep the bus element off the actual DOM for better encapsulation
+    // but this isn't strictly necessary for functionality
+    bus.style.display = "none";
+    document.documentElement.appendChild(bus);
+
+    return {
+        // get a value from the store by path
+        get: (path) => {
+            if (!path) return store;
+            return path
+                .split(".")
+                .reduce(
+                    (obj, prop) => 
+                        obj && obj[prop] !== undefined ? obj[prop] : undefined,
+                    store
+                );
+        },
+        
+        // set a value in the store by path
+        set: (path, value) => {
+            if(!path) return;
+
+            // Update the store
+            let target = store;
+            const parts = path.split(".");
+            const last = parts.pop();
+
+            // Create the path if it doesn't exist
+            parts.forEach((part) => {
+                if (!target[part] || typeof target[part] !== "object") {
+                    target[part] = {};
+                }
+                target = target[part];
+            });
+
+            // Set the value
+            target[last] = value;
+
+            // Notify subscribers with a DOM event
+            bus.dispatchEvent(new CustomEvent(path, { detail: value }));
+
+            // Also dispatch events for parent paths to support wildcards
+            if (parts.length > 0) {
+                let parentPath = "";
+                for (const part of parts) {
+                    parentPath = parentPath ? `${parentPath}.${part}` : part;
+                    bus.dispatchEvent(
+                        new CustomEvent(`${parentPath}.*`, {
+                            detail: { path, value },
+                        })
+                    );
+                }
+
+                // Dispatch root wildcard for any state change
+                bus.dispatchEvent(
+                    new CustomEvent("*", {
+                        detail: { path, value},
+                    })
+                );
+            }
+
+            return value;
+        },
+
+        // Subscribe to changes on a path
+        subscribe: (path, callback) => {
+            if (!path || typeof callback !== "function") return () => {};
+
+            const handler = (e) => callback(e.detail, path);
+            bus.addEventListener(path, handler);
+
+            return () => bus.removeEventListener(path, handler);
+        },
+        
+        // Optional method to clean up resources
+        destroy: () => {
+            if (bus.parentNode) { 
+                bus.parentNode.removeChild(bus);
+            }
+        },
+    };
+};
+
+export default createEventState;
+export { createEventState };

package/src/index.js

@@ -0,0 +1,111 @@
+/**
+ * UIstate - Declarative state management for the web
+ * 
+ * A unified system that combines CSS and Event-based state management with templating
+ * Integrates CSS variables, event-based state, and template management for optimal performance
+ */
+import { createCssState } from './cssState.js';
+import { createEventState } from './eventState.js';
+import { createTemplateManager } from './templateManager.js';
+
+const createUnifiedState = (initialState = {}) => {
+    // Initialize state store
+    const store = JSON.parse(JSON.stringify(initialState));
+    
+    // Create the CSS state manager
+    const cssState = createCssState(initialState);
+    
+    // Create the event state manager with the same initial state
+    const eventState = createEventState(initialState);
+    
+    // Create a unified API
+    const unifiedState = {
+        _isNotifying: false, // Flag to prevent recursive notifications
+        
+        // Get state with hierarchical path support
+        getState(path) {
+            if (!path) return store;
+            
+            // Try to get from event state first (faster)
+            const value = eventState.get(path);
+            
+            if (value !== undefined) return value;
+            
+            // Fall back to CSS variable (for values set outside this API)
+            const cssPath = path.replace(/\./g, "-");
+            return cssState.getState(cssPath);
+        },
+        
+        // Set state with hierarchical path support
+        setState(path, value) {
+            // Prevent recursive notifications
+            if (this._isNotifying) return value;
+            
+            this._isNotifying = true;
+            
+            try {
+                // Update event state
+                eventState.set(path, value);
+                
+                // Update CSS state (convert dots to dashes for CSS variables)
+                const cssPath = path.replace(/\./g, "-");
+                cssState.setState(cssPath, value);
+                
+                return value;
+            } finally {
+                this._isNotifying = false;
+            }
+        },
+        
+        // Subscribe to state changes with support for wildcards
+        subscribe(path, callback) {
+            return eventState.subscribe(path, callback);
+        },
+        
+        // Observe CSS state changes (simpler API, no wildcards)
+        observe(key, callback) {
+            return cssState.observe(key, callback);
+        },
+        
+        // Clean up resources
+        destroy() {
+            cssState.destroy();
+            eventState.destroy();
+        }
+    };
+    
+    return unifiedState;
+};
+
+// Create a singleton instance of the unified state
+const UnifiedState = createUnifiedState();
+
+// Create a template manager connected to the unified state
+const TemplateManager = createTemplateManager(UnifiedState);
+
+// Create a combined API for backward compatibility
+const UIstate = {
+    ...UnifiedState,
+    
+    // Add template manager methods
+    handlers: TemplateManager.handlers,
+    onAction: TemplateManager.onAction.bind(TemplateManager),
+    attachDelegation: TemplateManager.attachDelegation.bind(TemplateManager),
+    mount: TemplateManager.mount.bind(TemplateManager),
+    
+    // Initialize both systems
+    init() {
+        // Attach event delegation to document body
+        this.attachDelegation(document.body);
+        return this;
+    }
+};
+
+export default UIstate;
+export { 
+    createUnifiedState, 
+    UnifiedState,
+    createTemplateManager,
+    TemplateManager,
+    UIstate 
+};

package/src/templateManager.js

@@ -0,0 +1,97 @@
+/**
+ * TemplateManager - Component mounting and event delegation
+ * Handles HTML templating, component mounting, and event delegation
+ */
+
+const createTemplateManager = (stateManager) => {
+    const manager = {
+        handlers: {},
+        
+        onAction(action, handler) {
+            this.handlers[action] = handler;
+            return this;
+        },
+        
+        attachDelegation(root = document.body) {
+            root.addEventListener('click', e => {
+                const target = e.target.closest('[data-action]');
+                if (!target) return;
+                
+                const action = target.dataset.action;
+                if (!action) return;
+                
+                const handler = this.handlers[action];
+                if (typeof handler === 'function') {
+                    handler(e);
+                } else if (target.dataset.value !== undefined && stateManager) {
+                    // If we have a state manager, use it to update state
+                    stateManager.setState(action, target.dataset.value);
+                }
+            });
+            return this;
+        },
+        
+        mount(componentName, container) {
+            const tpl = document.getElementById(`${componentName}-template`);
+            if (!tpl) throw new Error(`Template not found: ${componentName}-template`);
+            const clone = tpl.content.cloneNode(true);
+            
+            function resolvePlaceholders(fragment) {
+                Array.from(fragment.querySelectorAll('*')).forEach(el => {
+                    const tag = el.tagName.toLowerCase();
+                    if (tag.endsWith('-placeholder')) {
+                        const name = tag.replace('-placeholder','');
+                        const childTpl = document.getElementById(`${name}-template`);
+                        if (!childTpl) throw new Error(`Template not found: ${name}-template`);
+                        const childClone = childTpl.content.cloneNode(true);
+                        resolvePlaceholders(childClone);
+                        el.replaceWith(childClone);
+                    }
+                });
+            }
+            
+            resolvePlaceholders(clone);
+            container.appendChild(clone);
+            return clone.firstElementChild;
+        },
+        
+        // Helper to create a reactive component with automatic updates
+        createComponent(name, renderFn, stateKeys = []) {
+            if (!stateManager) {
+                throw new Error('State manager is required for reactive components');
+            }
+            
+            // Create template element if it doesn't exist
+            let tpl = document.getElementById(`${name}-template`);
+            if (!tpl) {
+                tpl = document.createElement('template');
+                tpl.id = `${name}-template`;
+                document.body.appendChild(tpl);
+            }
+            
+            // Initial render
+            tpl.innerHTML = renderFn(stateManager);
+            
+            // Set up observers for reactive updates
+            if (stateKeys.length > 0) {
+                stateKeys.forEach(key => {
+                    stateManager.observe(key, () => {
+                        tpl.innerHTML = renderFn(stateManager);
+                    });
+                });
+            }
+            
+            return {
+                mount: (container) => this.mount(name, container)
+            };
+        }
+    };
+    
+    return manager;
+};
+
+// Create a standalone instance that doesn't depend on any state manager
+const TemplateManager = createTemplateManager();
+
+export default createTemplateManager;
+export { createTemplateManager, TemplateManager };

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Imsirovic Ajdin
-
-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/index.d.mts

@@ -1,16 +0,0 @@
-type StateObserver<T = any> = (value: T) => void;
-interface UIStateType {
-    _sheet: CSSStyleSheet | null;
-    _observers: Map<string, Set<StateObserver>>;
-    init(): UIStateType;
-    setState<T>(key: string, value: T): void;
-    getState<T>(key: string): T;
-    observe<T>(key: string, callback: StateObserver<T>): () => void;
-    _notifyObservers<T>(key: string, value: T): void;
-    _addRule(rule: string): void;
-}
-declare const UIState: UIStateType;
-
-declare function useUIState<T>(key: string, initialValue: T): [T, (value: T) => void];
-
-export { UIState, useUIState };

package/dist/index.d.ts

@@ -1,16 +0,0 @@
-type StateObserver<T = any> = (value: T) => void;
-interface UIStateType {
-    _sheet: CSSStyleSheet | null;
-    _observers: Map<string, Set<StateObserver>>;
-    init(): UIStateType;
-    setState<T>(key: string, value: T): void;
-    getState<T>(key: string): T;
-    observe<T>(key: string, callback: StateObserver<T>): () => void;
-    _notifyObservers<T>(key: string, value: T): void;
-    _addRule(rule: string): void;
-}
-declare const UIState: UIStateType;
-
-declare function useUIState<T>(key: string, initialValue: T): [T, (value: T) => void];
-
-export { UIState, useUIState };

package/dist/index.js

@@ -1,107 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  UIState: () => UIState_default,
-  useUIState: () => useUIState
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/UIState.ts
-var UIState = {
-  _sheet: null,
-  _observers: /* @__PURE__ */ new Map(),
-  init() {
-    if (!this._sheet) {
-      const style = document.createElement("style");
-      document.head.appendChild(style);
-      this._sheet = style.sheet;
-      this._addRule(":root {}");
-    }
-    return this;
-  },
-  setState(key, value) {
-    const cssValue = typeof value === "string" ? value : JSON.stringify(value);
-    document.documentElement.style.setProperty(`--${key}`, cssValue);
-    this._notifyObservers(key, value);
-  },
-  getState(key) {
-    const value = getComputedStyle(document.documentElement).getPropertyValue(`--${key}`).trim();
-    try {
-      return JSON.parse(value);
-    } catch (e) {
-      return value;
-    }
-  },
-  observe(key, callback) {
-    var _a;
-    if (!this._observers.has(key)) {
-      this._observers.set(key, /* @__PURE__ */ new Set());
-    }
-    (_a = this._observers.get(key)) == null ? void 0 : _a.add(callback);
-    return () => {
-      var _a2;
-      (_a2 = this._observers.get(key)) == null ? void 0 : _a2.delete(callback);
-    };
-  },
-  _notifyObservers(key, value) {
-    var _a;
-    (_a = this._observers.get(key)) == null ? void 0 : _a.forEach(
-      (callback) => callback(value)
-    );
-  },
-  _addRule(rule) {
-    if (this._sheet) {
-      this._sheet.insertRule(rule, this._sheet.cssRules.length);
-    }
-  }
-};
-var UIState_default = UIState;
-
-// src/react/index.ts
-var import_react = require("react");
-function useUIState(key, initialValue) {
-  (0, import_react.useEffect)(() => {
-    UIState_default.init();
-  }, []);
-  const [state, setState] = (0, import_react.useState)(() => {
-    try {
-      const value = UIState_default.getState(key);
-      return value !== void 0 ? value : initialValue;
-    } catch (e) {
-      return initialValue;
-    }
-  });
-  (0, import_react.useEffect)(() => {
-    return UIState_default.observe(key, (value) => {
-      setState(value);
-    });
-  }, [key]);
-  const setUIState = (value) => {
-    UIState_default.setState(key, value);
-  };
-  return [state, setUIState];
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  UIState,
-  useUIState
-});

package/dist/index.mjs

@@ -1,79 +0,0 @@
-// src/UIState.ts
-var UIState = {
-  _sheet: null,
-  _observers: /* @__PURE__ */ new Map(),
-  init() {
-    if (!this._sheet) {
-      const style = document.createElement("style");
-      document.head.appendChild(style);
-      this._sheet = style.sheet;
-      this._addRule(":root {}");
-    }
-    return this;
-  },
-  setState(key, value) {
-    const cssValue = typeof value === "string" ? value : JSON.stringify(value);
-    document.documentElement.style.setProperty(`--${key}`, cssValue);
-    this._notifyObservers(key, value);
-  },
-  getState(key) {
-    const value = getComputedStyle(document.documentElement).getPropertyValue(`--${key}`).trim();
-    try {
-      return JSON.parse(value);
-    } catch (e) {
-      return value;
-    }
-  },
-  observe(key, callback) {
-    var _a;
-    if (!this._observers.has(key)) {
-      this._observers.set(key, /* @__PURE__ */ new Set());
-    }
-    (_a = this._observers.get(key)) == null ? void 0 : _a.add(callback);
-    return () => {
-      var _a2;
-      (_a2 = this._observers.get(key)) == null ? void 0 : _a2.delete(callback);
-    };
-  },
-  _notifyObservers(key, value) {
-    var _a;
-    (_a = this._observers.get(key)) == null ? void 0 : _a.forEach(
-      (callback) => callback(value)
-    );
-  },
-  _addRule(rule) {
-    if (this._sheet) {
-      this._sheet.insertRule(rule, this._sheet.cssRules.length);
-    }
-  }
-};
-var UIState_default = UIState;
-
-// src/react/index.ts
-import { useState, useEffect } from "react";
-function useUIState(key, initialValue) {
-  useEffect(() => {
-    UIState_default.init();
-  }, []);
-  const [state, setState] = useState(() => {
-    try {
-      const value = UIState_default.getState(key);
-      return value !== void 0 ? value : initialValue;
-    } catch (e) {
-      return initialValue;
-    }
-  });
-  useEffect(() => {
-    return UIState_default.observe(key, (value) => {
-      setState(value);
-    });
-  }, [key]);
-  const setUIState = (value) => {
-    UIState_default.setState(key, value);
-  };
-  return [state, setUIState];
-}
-export {
-  UIState_default as UIState,
-  useUIState
-};

package/src/UIState.ts

@@ -1,68 +0,0 @@
-type StateObserver<T = any> = (value: T) => void;
-
-interface UIStateType {
-    _sheet: CSSStyleSheet | null;
-    _observers: Map<string, Set<StateObserver>>;
-    init(): UIStateType;
-    setState<T>(key: string, value: T): void;
-    getState<T>(key: string): T;
-    observe<T>(key: string, callback: StateObserver<T>): () => void;
-    _notifyObservers<T>(key: string, value: T): void;
-    _addRule(rule: string): void;
-}
-
-const UIState: UIStateType = {
-    _sheet: null,
-    _observers: new Map(),
-
-    init() {
-        if (!this._sheet) {
-            const style = document.createElement('style');
-            document.head.appendChild(style);
-            this._sheet = style.sheet;
-            this._addRule(':root {}');
-        }
-        return this;
-    },
-
-    setState<T>(key: string, value: T): void {
-        const cssValue = typeof value === 'string' ? value : JSON.stringify(value);
-        document.documentElement.style.setProperty(`--${key}`, cssValue);
-        this._notifyObservers(key, value);
-    },
-
-    getState<T>(key: string): T {
-        const value = getComputedStyle(document.documentElement)
-            .getPropertyValue(`--${key}`).trim();
-        try {
-            return JSON.parse(value) as T;
-        } catch {
-            return value as unknown as T;
-        }
-    },
-
-    observe<T>(key: string, callback: StateObserver<T>): () => void {
-        if (!this._observers.has(key)) {
-            this._observers.set(key, new Set());
-        }
-        this._observers.get(key)?.add(callback as StateObserver);
-
-        return () => {
-            this._observers.get(key)?.delete(callback as StateObserver);
-        };
-    },
-
-    _notifyObservers<T>(key: string, value: T): void {
-        this._observers.get(key)?.forEach(callback => 
-            (callback as StateObserver<T>)(value)
-        );
-    },
-
-    _addRule(rule: string): void {
-        if (this._sheet) {
-            this._sheet.insertRule(rule, this._sheet.cssRules.length);
-        }
-    }
-};
-
-export default UIState;

package/src/index.ts

@@ -1,2 +0,0 @@
-export { default as UIState } from './UIState';
-export * from './react';

package/src/react/index.ts

@@ -1,33 +0,0 @@
-import { useState, useEffect } from 'react';
-import UIState from '../UIState';
-
-export function useUIState<T>(key: string, initialValue: T): [T, (value: T) => void] {
-    // Initialize UIState if needed
-    useEffect(() => {
-        UIState.init();
-    }, []);
-
-    // Get initial state
-    const [state, setState] = useState<T>(() => {
-        try {
-            const value = UIState.getState<T>(key);
-            return value !== undefined ? value : initialValue;
-        } catch {
-            return initialValue;
-        }
-    });
-
-    // Set up observer
-    useEffect(() => {
-        return UIState.observe<T>(key, (value) => {
-            setState(value);
-        });
-    }, [key]);
-
-    // Return state and setter
-    const setUIState = (value: T) => {
-        UIState.setState(key, value);
-    };
-
-    return [state, setUIState];
-}