diff --git a/docs/404.html b/docs/404.html index c4bdb55..86400bb 100644 --- a/docs/404.html +++ b/docs/404.html @@ -16,7 +16,7 @@
- + \ No newline at end of file diff --git a/docs/api/components.html b/docs/api/components.html index 8387cd0..fef27c7 100644 --- a/docs/api/components.html +++ b/docs/api/components.html @@ -18,7 +18,7 @@ -
SigPro

Appearance

Components API 🧩 ​

Components in SigPro are native Web Components built on the Custom Elements standard. They provide a way to create reusable, encapsulated pieces of UI with reactive properties and automatic cleanup.

$.component(tagName, setupFunction, observedAttributes, useShadowDOM) ​

Creates a custom element with reactive properties and automatic dependency tracking.

javascript
import { $, html } from 'sigpro';
+    
SigPro
Appearance
Components API 🧩 ​
Components in SigPro are native Web Components built on the Custom Elements standard. They provide a way to create reusable, encapsulated pieces of UI with reactive properties and automatic cleanup.
$.component(tagName, setupFunction, observedAttributes, useShadowDOM) ​
Creates a custom element with reactive properties and automatic dependency tracking.
javascript
import { $, html } from 'sigpro';
 
 $.component('my-button', (props, { slot, emit }) => {
   return html`
@@ -589,7 +589,7 @@
     </Card>
   </div>
 `;
🎯 Decision Guide: Light DOM vs Shadow DOM ​
Use Light DOM (false) when...Use Shadow DOM (true) when...
Component is part of your main appBuilding a UI library for others
Using global CSS (Tailwind, Bootstrap)Creating embeddable widgets
Need to inherit theme variablesStyles must be pixel-perfect everywhere
Working with existing design systemComponent has complex, specific styles
Quick prototypingDistributing to different projects
Form elements that should match siteNeed style isolation/encapsulation
πŸ“Š Summary ​
FeatureDescription
Native Web ComponentsBuilt on Custom Elements standard
Reactive PropsObserved attributes become signals
Two Rendering ModesLight DOM (default) or Shadow DOM
Automatic CleanupEffects and listeners cleaned up on disconnect
Event SystemCustom events with emit()
Slot SupportFull slot API for content projection
Zero DependenciesPure vanilla JavaScript
Pro Tip: Start with Light DOM components for app-specific UI, and use Shadow DOM when building components that need to work identically across different projects or websites.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/api/effects.html b/docs/api/effects.html
index 123ae0c..50d7b2f 100644
--- a/docs/api/effects.html
+++ b/docs/api/effects.html
@@ -18,7 +18,7 @@
     
   
   
-    
SigPro
Appearance
Effects API πŸ”„ ​
Effects are the bridge between reactive signals and side effects in your application. They automatically track signal dependencies and re-run whenever those signals change, enabling everything from DOM updates to data fetching and localStorage synchronization.
Core Concepts ​
What is an Effect? ​
An effect is a function that:
  • Runs immediately when created
  • Tracks all signals read during its execution
  • Re-runs automatically when any tracked signal changes
  • Can return a cleanup function that runs before the next execution or when the effect is stopped
How Effects Work ​
  1. When an effect runs, it sets itself as the activeEffect
  2. Any signal read during execution adds the effect to its subscribers
  3. When a signal changes, it queues all its subscribers
  4. Effects are batched and run in the next microtask
  5. If an effect returns a function, it's stored as a cleanup handler
$.effect(effectFn) ​
Creates a reactive effect that automatically tracks dependencies and re-runs when they change.
javascript
import { $ } from 'sigpro';
+    
SigPro
Appearance
Effects API πŸ”„ ​
Effects are the bridge between reactive signals and side effects in your application. They automatically track signal dependencies and re-run whenever those signals change, enabling everything from DOM updates to data fetching and localStorage synchronization.
Core Concepts ​
What is an Effect? ​
An effect is a function that:
  • Runs immediately when created
  • Tracks all signals read during its execution
  • Re-runs automatically when any tracked signal changes
  • Can return a cleanup function that runs before the next execution or when the effect is stopped
How Effects Work ​
  1. When an effect runs, it sets itself as the activeEffect
  2. Any signal read during execution adds the effect to its subscribers
  3. When a signal changes, it queues all its subscribers
  4. Effects are batched and run in the next microtask
  5. If an effect returns a function, it's stored as a cleanup handler
$.effect(effectFn) ​
Creates a reactive effect that automatically tracks dependencies and re-runs when they change.
javascript
import { $ } from 'sigpro';
 
 const count = $(0);
 
@@ -781,7 +781,7 @@
 inspector.trackedEffect(() => {
   console.log('Count:', count());
 }, 'counter-effect');
πŸ“Š Summary ​
FeatureDescription
Automatic TrackingDependencies tracked automatically
Cleanup FunctionsReturn function to clean up resources
Batch UpdatesMultiple changes batched in microtask
Manual StopCan stop effects with returned function
Nested EffectsEffects can contain other effects
Auto-cleanupEffects in pages/components auto-cleaned
Pro Tip: Effects are the perfect place for side effects like DOM updates, data fetching, and subscriptions. Keep them focused and always clean up resources!

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/api/fetch.html b/docs/api/fetch.html
index 082619d..5436a6c 100644
--- a/docs/api/fetch.html
+++ b/docs/api/fetch.html
@@ -18,7 +18,7 @@
     
   
   
-    
SigPro
Appearance
Fetch API 🌐 ​
SigPro provides a simple, lightweight wrapper around the native Fetch API that integrates seamlessly with signals for loading state management. It's designed for common use cases with sensible defaults.
Core Concepts ​
What is $.fetch? ​
A ultra-simple fetch wrapper that:
  • Automatically handles JSON serialization and parsing
  • Integrates with signals for loading state
  • Returns null on error (no try/catch needed for basic usage)
  • Works great with effects for reactive data fetching
$.fetch(url, data, [loading]) ​
Makes a POST request with JSON data and optional loading signal.
javascript
import { $ } from 'sigpro';
+    
SigPro
Appearance
Fetch API 🌐 ​
SigPro provides a simple, lightweight wrapper around the native Fetch API that integrates seamlessly with signals for loading state management. It's designed for common use cases with sensible defaults.
Core Concepts ​
What is $.fetch? ​
A ultra-simple fetch wrapper that:
  • Automatically handles JSON serialization and parsing
  • Integrates with signals for loading state
  • Returns null on error (no try/catch needed for basic usage)
  • Works great with effects for reactive data fetching
$.fetch(url, data, [loading]) ​
Makes a POST request with JSON data and optional loading signal.
javascript
import { $ } from 'sigpro';
 
 const loading = $(false);
 
@@ -867,7 +867,7 @@
     error('Failed to load data');
   }
 }
Pro Tip: Combine $.fetch with $.effect and loading signals for a complete reactive data fetching solution. The loading signal integration makes it trivial to show loading states in your UI.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/api/pages.html b/docs/api/pages.html
index 1bf0f1e..8f95432 100644
--- a/docs/api/pages.html
+++ b/docs/api/pages.html
@@ -18,7 +18,7 @@
     
   
   
-    
SigPro
Appearance
Pages API πŸ“„ ​
Pages in SigPro are special components designed for route-based navigation with automatic cleanup. When you navigate away from a page, all signals, effects, and event listeners created within that page are automatically cleaned up - no memory leaks, no manual cleanup needed.
$.page(setupFunction) ​
Creates a page with automatic cleanup of all signals and effects when navigated away.
javascript
import { $, html } from 'sigpro';
+    
SigPro
Appearance
Pages API πŸ“„ ​
Pages in SigPro are special components designed for route-based navigation with automatic cleanup. When you navigate away from a page, all signals, effects, and event listeners created within that page are automatically cleaned up - no memory leaks, no manual cleanup needed.
$.page(setupFunction) ​
Creates a page with automatic cleanup of all signals and effects when navigated away.
javascript
import { $, html } from 'sigpro';
 
 export default $.page(() => {
   // All signals and effects created here
@@ -399,7 +399,7 @@
     </div>
   `;
 });
πŸ“Š Summary ​
FeatureDescription
Automatic CleanupAll signals, effects, and resources auto-cleaned on navigation
Memory SafeNo memory leaks, even with complex nested effects
Router IntegrationDesigned to work perfectly with $.router
ParametersAccess route parameters via params object
Manual CleanuponUnmount for custom cleanup needs
Zero ConfigurationJust wrap your page in $.page() and it works
Pro Tip: Always wrap route-based views in $.page() to ensure proper cleanup. This prevents memory leaks and ensures your app stays performant even after many navigation changes.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/api/quick.html b/docs/api/quick.html
index 05e2a79..bd4880f 100644
--- a/docs/api/quick.html
+++ b/docs/api/quick.html
@@ -18,7 +18,7 @@
     
   
   
-    
SigPro
Appearance
Quick API Reference ⚑ ​
A comprehensive reference for all SigPro APIs. Everything you need to build reactive web applications with signals and web components.
πŸ“‹ API Functions Reference ​
FunctionDescriptionExample
$(initialValue)Creates a reactive signal (getter/setter)const count = $(0)
$(computedFn)Creates a computed signalconst full = $(() => first() + last())
$.effect(fn)Runs effect when dependencies change$.effect(() => console.log(count()))
$.page(setupFn)Creates a page with automatic cleanup$.page(() => html
Page
)
$.component(tagName, setupFn, attrs, useShadow)Creates reactive Web Component$.component('my-menu', setup, ['items'])
$.router(routes)Creates a hash-based router$.router([{path:'/', component:Home}])
$.router.go(path)Navigates to a route$.router.go('/user/42')
$.fetch(url, data, loadingSignal)Fetch wrapper with loading stateconst data = await $.fetch('/api', data, loading)
$.storage(key, initialValue, storageType)Persistent signal (local/sessionStorage)const theme = $.storage('theme', 'light')
html`...`Template literal for reactive HTMLhtml`<div>${count}</div>`
Signal Methods ​
MethodDescriptionExample
signal()Gets current valuecount()
signal(newValue)Sets new valuecount(5)
signal(prev => new)Updates using previous valuecount(c => c + 1)
Component Context Properties ​
PropertyDescriptionExample
propsReactive component propertiesprops.title()
slot(name)Accesses slot contentslot() or slot('footer')
emit(event, data)Dispatches custom eventemit('update', value)
onUnmount(cb)Registers cleanup callbackonUnmount(() => clearInterval(timer))
Page Context Properties ​
PropertyDescriptionExample
paramsRoute parametersparams.id, params.slug
onUnmount(cb)Registers cleanup callbackonUnmount(() => clearInterval(timer))
HTML Directives ​
DirectiveDescriptionExample
@eventEvent listener@click=${handler}
:propertyTwo-way binding:value=${signal}
?attributeBoolean attribute?disabled=${signal}
.propertyDOM property binding.scrollTop=${value}
class:nameConditional classclass:active=${isActive}
πŸ“‘ Signals - $(initialValue) ​
Creates a reactive value that notifies dependents when changed.
PatternExampleDescription
Basic Signalconst count = $(0)Create signal with initial value
Gettercount()Read current value
Settercount(5)Set new value directly
Updatercount(prev => prev + 1)Update based on previous value
Computedconst full = $(() => first() + last())Auto-updating derived signal
Examples ​
javascript
// Basic signal
+    
SigPro
Appearance
Quick API Reference ⚑ ​
A comprehensive reference for all SigPro APIs. Everything you need to build reactive web applications with signals and web components.
πŸ“‹ API Functions Reference ​
FunctionDescriptionExample
$(initialValue)Creates a reactive signal (getter/setter)const count = $(0)
$(computedFn)Creates a computed signalconst full = $(() => first() + last())
$.effect(fn)Runs effect when dependencies change$.effect(() => console.log(count()))
$.page(setupFn)Creates a page with automatic cleanup$.page(() => html
Page
)
$.component(tagName, setupFn, attrs, useShadow)Creates reactive Web Component$.component('my-menu', setup, ['items'])
$.router(routes)Creates a hash-based router$.router([{path:'/', component:Home}])
$.router.go(path)Navigates to a route$.router.go('/user/42')
$.fetch(url, data, loadingSignal)Fetch wrapper with loading stateconst data = await $.fetch('/api', data, loading)
$.storage(key, initialValue, storageType)Persistent signal (local/sessionStorage)const theme = $.storage('theme', 'light')
html`...`Template literal for reactive HTMLhtml`<div>${count}</div>`
Signal Methods ​
MethodDescriptionExample
signal()Gets current valuecount()
signal(newValue)Sets new valuecount(5)
signal(prev => new)Updates using previous valuecount(c => c + 1)
Component Context Properties ​
PropertyDescriptionExample
propsReactive component propertiesprops.title()
slot(name)Accesses slot contentslot() or slot('footer')
emit(event, data)Dispatches custom eventemit('update', value)
onUnmount(cb)Registers cleanup callbackonUnmount(() => clearInterval(timer))
Page Context Properties ​
PropertyDescriptionExample
paramsRoute parametersparams.id, params.slug
onUnmount(cb)Registers cleanup callbackonUnmount(() => clearInterval(timer))
HTML Directives ​
DirectiveDescriptionExample
@eventEvent listener@click=${handler}
:propertyTwo-way binding:value=${signal}
?attributeBoolean attribute?disabled=${signal}
.propertyDOM property binding.scrollTop=${value}
class:nameConditional classclass:active=${isActive}
πŸ“‘ Signals - $(initialValue) ​
Creates a reactive value that notifies dependents when changed.
PatternExampleDescription
Basic Signalconst count = $(0)Create signal with initial value
Gettercount()Read current value
Settercount(5)Set new value directly
Updatercount(prev => prev + 1)Update based on previous value
Computedconst full = $(() => first() + last())Auto-updating derived signal
Examples ​
javascript
// Basic signal
 const count = $(0);
 console.log(count()); // 0
 count(5);
@@ -211,7 +211,7 @@
     </div>
   `;
 }, ['user-id']); // Observe userId attribute

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/api/routing.html b/docs/api/routing.html
index 7344730..5fce056 100644
--- a/docs/api/routing.html
+++ b/docs/api/routing.html
@@ -18,7 +18,7 @@
     
   
   
-    
SigPro
Appearance
Routing API 🌐 ​
SigPro includes a simple yet powerful hash-based router designed for Single Page Applications (SPAs). It works everywhere with zero server configuration and integrates seamlessly with $.page for automatic cleanup.
Why Hash-Based Routing? ​
Hash routing (#/about) works everywhere - no server configuration needed. Perfect for:
  • Static sites and SPAs
  • GitHub Pages, Netlify, any static hosting
  • Local development without a server
  • Projects that need to work immediately
$.router(routes) ​
Creates a hash-based router that renders the matching component and handles navigation.
javascript
import { $, html } from 'sigpro';
+    
SigPro
Appearance
Routing API 🌐 ​
SigPro includes a simple yet powerful hash-based router designed for Single Page Applications (SPAs). It works everywhere with zero server configuration and integrates seamlessly with $.page for automatic cleanup.
Why Hash-Based Routing? ​
Hash routing (#/about) works everywhere - no server configuration needed. Perfect for:
  • Static sites and SPAs
  • GitHub Pages, Netlify, any static hosting
  • Local development without a server
  • Projects that need to work immediately
$.router(routes) ​
Creates a hash-based router that renders the matching component and handles navigation.
javascript
import { $, html } from 'sigpro';
 import HomePage from './pages/Home.js';
 import AboutPage from './pages/About.js';
 import UserPage from './pages/User.js';
@@ -621,8 +621,8 @@
 document.body.appendChild(router);
 
 // Navigation helper (available globally)
-window.navigate = $.router.go;
πŸ“Š Summary ​
FeatureDescription
Hash-basedWorks everywhere, no server config
Route Parameters:param syntax for dynamic segments
RegExp SupportAdvanced pattern matching
Query ParametersSupport for ?key=value in URLs
Programmatic Navigation$.router.go(path)
Auto-cleanupWorks with $.page for memory management
Zero DependenciesPure vanilla JavaScript
Lazy Loading ReadyEasy code splitting
Pro Tip: Order matters in route definitions - put more specific routes (with parameters) before static ones, and always include a catch-all route (404) at the end.

-    
+window.navigate = $.router.go;
πŸ“Š Summary ​
FeatureDescription
Hash-basedWorks everywhere, no server config
Route Parameters:param syntax for dynamic segments
RegExp SupportAdvanced pattern matching
Query ParametersSupport for ?key=value in URLs
Programmatic Navigation$.router.go(path)
Auto-cleanupWorks with $.page for memory management
Zero DependenciesPure vanilla JavaScript
Lazy Loading ReadyEasy code splitting
Pro Tip: Order matters in route definitions - put more specific routes (with parameters) before static ones, and always include a catch-all route (404) at the end.

+    
     
   
 
\ No newline at end of file
diff --git a/docs/api/signals.html b/docs/api/signals.html
index ba4bb95..c0f7e32 100644
--- a/docs/api/signals.html
+++ b/docs/api/signals.html
@@ -18,7 +18,7 @@
     
   
   
-    
SigPro
Appearance
Signals API πŸ“‘ ​
Signals are the heart of SigPro's reactivity system. They are reactive values that automatically track dependencies and notify subscribers when they change. This enables fine-grained updates without virtual DOM diffing.
Core Concepts ​
What is a Signal? ​
A signal is a function that holds a value and notifies dependents when that value changes. Signals can be:
  • Basic signals - Hold simple values (numbers, strings, objects)
  • Computed signals - Derive values from other signals
  • Persistent signals - Automatically sync with localStorage/sessionStorage
How Reactivity Works ​
SigPro uses automatic dependency tracking:
  1. When you read a signal inside an effect, the effect becomes a subscriber
  2. When the signal's value changes, all subscribers are notified
  3. Updates are batched using microtasks for optimal performance
  4. Only the exact nodes that depend on changed values are updated
$(initialValue) ​
Creates a reactive signal. The behavior changes based on the type of initialValue:
  • If initialValue is a function, creates a computed signal
  • Otherwise, creates a basic signal
javascript
import { $ } from 'sigpro';
+    
SigPro
Appearance
Signals API πŸ“‘ ​
Signals are the heart of SigPro's reactivity system. They are reactive values that automatically track dependencies and notify subscribers when they change. This enables fine-grained updates without virtual DOM diffing.
Core Concepts ​
What is a Signal? ​
A signal is a function that holds a value and notifies dependents when that value changes. Signals can be:
  • Basic signals - Hold simple values (numbers, strings, objects)
  • Computed signals - Derive values from other signals
  • Persistent signals - Automatically sync with localStorage/sessionStorage
How Reactivity Works ​
SigPro uses automatic dependency tracking:
  1. When you read a signal inside an effect, the effect becomes a subscriber
  2. When the signal's value changes, all subscribers are notified
  3. Updates are batched using microtasks for optimal performance
  4. Only the exact nodes that depend on changed values are updated
$(initialValue) ​
Creates a reactive signal. The behavior changes based on the type of initialValue:
  • If initialValue is a function, creates a computed signal
  • Otherwise, creates a basic signal
javascript
import { $ } from 'sigpro';
 
 // Basic signal
 const count = $(0);
@@ -677,7 +677,7 @@
 
 console.log(inspector.getInfo());
 // { count: { subscribers: 0, value: 0 }, doubled: { subscribers: 0, value: 0 } }
πŸ“Š Summary ​
FeatureDescription
Basic SignalsHold values and notify on change
Computed SignalsAuto-updating derived values
Automatic TrackingDependencies tracked automatically
Batch UpdatesMultiple updates batched in microtask
Infinite Loop ProtectionPrevents reactive cycles
Zero DependenciesPure vanilla JavaScript
Pro Tip: Signals are the foundation of reactivity in SigPro. Master them, and you've mastered 80% of the library!

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/api/storage.html b/docs/api/storage.html
index 642b0d9..44df3fe 100644
--- a/docs/api/storage.html
+++ b/docs/api/storage.html
@@ -18,7 +18,7 @@
     
   
   
-    
SigPro
Appearance
Storage API πŸ’Ύ ​
SigPro provides persistent signals that automatically synchronize with browser storage APIs. This allows you to create reactive state that survives page reloads and browser sessions with zero additional code.
Core Concepts ​
What is Persistent Storage? ​
Persistent signals are special signals that:
  • Initialize from storage (localStorage/sessionStorage) if a saved value exists
  • Auto-save whenever the signal value changes
  • Handle JSON serialization automatically
  • Clean up when set to null or undefined
Storage Types ​
StoragePersistenceUse Case
localStorageForever (until cleared)User preferences, themes, saved data
sessionStorageUntil tab/window closesForm drafts, temporary state
$.storage(key, initialValue, [storage]) ​
Creates a persistent signal that syncs with browser storage.
javascript
import { $ } from 'sigpro';
+    
SigPro
Appearance
Storage API πŸ’Ύ ​
SigPro provides persistent signals that automatically synchronize with browser storage APIs. This allows you to create reactive state that survives page reloads and browser sessions with zero additional code.
Core Concepts ​
What is Persistent Storage? ​
Persistent signals are special signals that:
  • Initialize from storage (localStorage/sessionStorage) if a saved value exists
  • Auto-save whenever the signal value changes
  • Handle JSON serialization automatically
  • Clean up when set to null or undefined
Storage Types ​
StoragePersistenceUse Case
localStorageForever (until cleared)User preferences, themes, saved data
sessionStorageUntil tab/window closesForm drafts, temporary state
$.storage(key, initialValue, [storage]) ​
Creates a persistent signal that syncs with browser storage.
javascript
import { $ } from 'sigpro';
 
 // localStorage (default)
 const theme = $.storage('theme', 'light');
@@ -814,7 +814,7 @@
 // Usage
 const secureToken = createSecureStorage('auth-token', null);
 secureToken('sensitive-data-123'); // Stored encrypted
πŸ“ˆ Performance Considerations ​
OperationCostNotes
Initial readO(1)Single storage read
WriteO(1) + JSON.stringifyAuto-save on change
Large objectsO(n)Stringify/parse overhead
Multiple keysO(k)k = number of keys
Pro Tip: Use sessionStorage for temporary data like form drafts, and localStorage for persistent user preferences. Always validate data when reading from storage to handle corrupted values gracefully.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/assets/ui_intro.md.gZ21GFqo.js b/docs/assets/ui_intro.md.gZ21GFqo.js
deleted file mode 100644
index d7216a8..0000000
--- a/docs/assets/ui_intro.md.gZ21GFqo.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,o as i,c as o,ae as r}from"./chunks/framework.C8AWLET_.js";const p=JSON.parse('{"title":"SigPro UI","description":"","frontmatter":{},"headers":[],"relativePath":"ui/intro.md","filePath":"ui/intro.md"}'),a={name:"ui/intro.md"};function n(s,e,l,g,d,h){return i(),o("div",null,[...e[0]||(e[0]=[r('
SigPro UI ​
SigPro UI is a collection of high-performance Web Components built on top of the SigPro reactive library and styled with DaisyUI.
Why SigPro UI? ​
Designed to streamline modern web development, SigPro UI combines the lightweight reactivity of SigPro with the beautiful, accessible design system of DaisyUI.
  • Native Web Components: Use them in any framework or plain HTML.
  • Reactive by Design: Powered by SigPro signals ($) for seamless state management.
  • Utility-First Styling: Leveraging Tailwind CSS and DaisyUI for a polished look without the bloat.
  • Developer Experience: Focus on building features, not reinventing UI patterns.
Getting Started ​
SigPro UI allows you to build modular, reactive interfaces with minimal overhead, making web development faster, cleaner, and more efficient.
',7)])])}const m=t(a,[["render",n]]);export{p as __pageData,m as default};
diff --git a/docs/assets/ui_intro.md.gZ21GFqo.lean.js b/docs/assets/ui_intro.md.gZ21GFqo.lean.js
deleted file mode 100644
index 71ee387..0000000
--- a/docs/assets/ui_intro.md.gZ21GFqo.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,o as i,c as o,ae as r}from"./chunks/framework.C8AWLET_.js";const p=JSON.parse('{"title":"SigPro UI","description":"","frontmatter":{},"headers":[],"relativePath":"ui/intro.md","filePath":"ui/intro.md"}'),a={name:"ui/intro.md"};function n(s,e,l,g,d,h){return i(),o("div",null,[...e[0]||(e[0]=[r("",7)])])}const m=t(a,[["render",n]]);export{p as __pageData,m as default};
diff --git a/docs/guide/getting-started.html b/docs/guide/getting-started.html
index 9c00301..dae75ec 100644
--- a/docs/guide/getting-started.html
+++ b/docs/guide/getting-started.html
@@ -18,7 +18,7 @@
     
   
   
-    
SigPro
Appearance
Getting Started with SigPro πŸš€ ​
Welcome to SigPro! This guide will help you get up and running with the library in minutes. SigPro is a minimalist reactive library that embraces the web platform - no compilation, no virtual DOM, just pure JavaScript and intelligent reactivity.
πŸ“¦ Installation ​
Choose your preferred installation method:
bash
# Using npm
+    
SigPro
Appearance
Getting Started with SigPro πŸš€ ​
Welcome to SigPro! This guide will help you get up and running with the library in minutes. SigPro is a minimalist reactive library that embraces the web platform - no compilation, no virtual DOM, just pure JavaScript and intelligent reactivity.
πŸ“¦ Installation ​
Choose your preferred installation method:
bash
# Using npm
 npm install sigpro
 
 # Using bun
@@ -190,7 +190,7 @@
 
 // Mount your app
 document.body.appendChild(HomePage());
πŸŽ“ Summary ​
You've learned:
  • βœ… How to install SigPro
  • βœ… Core concepts: signals, effects, and reactive rendering
  • βœ… Built a complete todo app
  • βœ… Key patterns and best practices
  • βœ… How to structure larger applications
Remember: SigPro embraces the web platform. You're writing vanilla JavaScript with superpowersβ€”no compilation, no lock-in, just clean, maintainable code that will work for years to come.
"Stop fighting the platform. Start building with it."
Happy coding! πŸŽ‰

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/guide/why.html b/docs/guide/why.html
index 270a53f..ce4e0bf 100644
--- a/docs/guide/why.html
+++ b/docs/guide/why.html
@@ -18,7 +18,7 @@
     
   
   
-    
SigPro
Appearance
Why SigPro? ❓ ​
After years of building applications with React, Vue, and Svelteβ€”investing countless hours mastering their unique mental models, build tools, and update cyclesβ€”I kept circling back to the same realization: no matter how sophisticated the framework, it all eventually compiles down to HTML, CSS, and vanilla JavaScript. The web platform has evolved tremendously, yet many libraries continue to reinvent the wheel, creating parallel universes with their own rules, their own syntaxes, and their own steep learning curves.
SigPro is my answer to a simple question: Why fight the platform when we can embrace it?
🌐 The Web Platform Is Finally Ready ​
Modern browsers now offer powerful primitives that make true reactivity possible without virtual DOM diffing, without compilers, and without lock-in:
Browser PrimitiveWhat It Enables
Custom ElementsCreate reusable components with native browser APIs
Shadow DOMEncapsulate styles and markup without preprocessors
CSS Custom PropertiesDynamic theming without CSS-in-JS
Microtask QueuesEfficient update batching without complex scheduling
🎯 The SigPro Philosophy ​
SigPro strips away the complexity, delivering a reactive programming model that feels familiar but stays remarkably close to vanilla JS:
  • No JSX transformations - Just template literals
  • No template compilers - The browser parses your HTML
  • No proprietary syntax to learn - Just functions and signals
  • No build step required - Works directly in the browser
javascript
// Just vanilla JavaScript with signals
+    
SigPro
Appearance
Why SigPro? ❓ ​
After years of building applications with React, Vue, and Svelteβ€”investing countless hours mastering their unique mental models, build tools, and update cyclesβ€”I kept circling back to the same realization: no matter how sophisticated the framework, it all eventually compiles down to HTML, CSS, and vanilla JavaScript. The web platform has evolved tremendously, yet many libraries continue to reinvent the wheel, creating parallel universes with their own rules, their own syntaxes, and their own steep learning curves.
SigPro is my answer to a simple question: Why fight the platform when we can embrace it?
🌐 The Web Platform Is Finally Ready ​
Modern browsers now offer powerful primitives that make true reactivity possible without virtual DOM diffing, without compilers, and without lock-in:
Browser PrimitiveWhat It Enables
Custom ElementsCreate reusable components with native browser APIs
Shadow DOMEncapsulate styles and markup without preprocessors
CSS Custom PropertiesDynamic theming without CSS-in-JS
Microtask QueuesEfficient update batching without complex scheduling
🎯 The SigPro Philosophy ​
SigPro strips away the complexity, delivering a reactive programming model that feels familiar but stays remarkably close to vanilla JS:
  • No JSX transformations - Just template literals
  • No template compilers - The browser parses your HTML
  • No proprietary syntax to learn - Just functions and signals
  • No build step required - Works directly in the browser
javascript
// Just vanilla JavaScript with signals
 import { $, html } from 'sigpro';
 
 const count = $(0);
@@ -41,7 +41,7 @@
     <h1>Beautiful highlighted template</h1>
   </div>
 `
⏱️ Built for the Long Term ​
What emerged is a library that proves we've reached a turning point: the web is finally mature enough that we don't need to abstract it anymore. We can build reactive, component-based applications using virtually pure JavaScript, leveraging the platform's latest advances instead of working against them.
The result isn't just smaller bundles or faster renderingβ€”it's code that will still run 10 years from now, in any browser, without maintenance.
πŸ“ˆ The Verdict ​
While other frameworks build parallel universes with proprietary syntax and compilation steps, SigPro embraces the web platform. SigPro isn't just another frameworkβ€”it's a return to fundamentals, showing that the dream of simple, powerful reactivity is now achievable with the tools browsers give us out of the box.
"Stop fighting the platform. Start building with it."
πŸš€ Ready to Start? ​
Get Started with SigPro β€’ View on GitHub β€’ npm Package

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/hashmap.json b/docs/hashmap.json
index c7a9cda..ce62046 100644
--- a/docs/hashmap.json
+++ b/docs/hashmap.json
@@ -1 +1 @@
-{"api_components.md":"BlFwj17l","api_effects.md":"Br_yStBS","api_fetch.md":"DQLBJSoq","api_pages.md":"BP19nHXw","api_quick.md":"BDS3ttnt","api_routing.md":"7SNAZXtp","api_signals.md":"CrW68-BA","api_storage.md":"COEWBXHk","guide_getting-started.md":"BeQpK3vd","guide_why.md":"DXchYMN-","index.md":"uvMJmU4o","ui_intro.md":"gZ21GFqo","vite_plugin.md":"gDWEi8f0"}
+{"api_components.md":"BlFwj17l","api_effects.md":"Br_yStBS","api_fetch.md":"DQLBJSoq","api_pages.md":"BP19nHXw","api_quick.md":"BDS3ttnt","api_routing.md":"7SNAZXtp","api_signals.md":"CrW68-BA","api_storage.md":"COEWBXHk","guide_getting-started.md":"BeQpK3vd","guide_why.md":"DXchYMN-","index.md":"uvMJmU4o","vite_plugin.md":"gDWEi8f0"}
diff --git a/docs/index.html b/docs/index.html
index bbf917d..75cf30e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -18,8 +18,8 @@
     
   
   
-    
SigPro
Appearance
SigProReactivity for the Web Platform
A minimalist reactive library for building web interfaces with signals, effects, and native web components. No compilation, no virtual DOM, just pure JavaScript and intelligent reactivity.
Get Started
SigPro
⚑ 3KB gzipped
Minimal footprint with maximum impact. No heavy dependencies, just pure reactivity.
🎯 Native Web Components
Built on Custom Elements and Shadow DOM. Leverage the platform, don't fight it.
πŸ”„ Signal-based Reactivity
Fine-grained updates without virtual DOM diffing. Just intelligent, automatic reactivity.
npm versionbundle sizelicense
"Stop fighting the platform. Start building with it."

-    
+    
SigPro
Appearance
SigProReactivity for the Web Platform
A minimalist reactive library for building web interfaces with signals, effects, and native web components. No compilation, no virtual DOM, just pure JavaScript and intelligent reactivity.
Get Started
SigPro
⚑ 3KB gzipped
Minimal footprint with maximum impact. No heavy dependencies, just pure reactivity.
🎯 Native Web Components
Built on Custom Elements and Shadow DOM. Leverage the platform, don't fight it.
πŸ”„ Signal-based Reactivity
Fine-grained updates without virtual DOM diffing. Just intelligent, automatic reactivity.
npm versionbundle sizelicense
"Stop fighting the platform. Start building with it."

+    
     
   
 
\ No newline at end of file
diff --git a/docs/ui/intro.html b/docs/ui/intro.html
deleted file mode 100644
index 767aafe..0000000
--- a/docs/ui/intro.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-  
-    
-    
-    SigPro UI | SigPro
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-  
-  
-    
SigPro
Appearance
SigPro UI ​
SigPro UI is a collection of high-performance Web Components built on top of the SigPro reactive library and styled with DaisyUI.
Why SigPro UI? ​
Designed to streamline modern web development, SigPro UI combines the lightweight reactivity of SigPro with the beautiful, accessible design system of DaisyUI.
  • Native Web Components: Use them in any framework or plain HTML.
  • Reactive by Design: Powered by SigPro signals ($) for seamless state management.
  • Utility-First Styling: Leveraging Tailwind CSS and DaisyUI for a polished look without the bloat.
  • Developer Experience: Focus on building features, not reinventing UI patterns.
Getting Started ​
SigPro UI allows you to build modular, reactive interfaces with minimal overhead, making web development faster, cleaner, and more efficient.

-    
-    
-  
-
\ No newline at end of file
diff --git a/docs/vite/plugin.html b/docs/vite/plugin.html
index ab94f17..e3e9c4e 100644
--- a/docs/vite/plugin.html
+++ b/docs/vite/plugin.html
@@ -18,7 +18,7 @@
     
   
   
-    
SigPro
Appearance
Vite Plugin: Automatic File-based Routing 🚦 ​
SigPro provides an optional Vite plugin that automatically generates routes based on your file structure. No configuration needed - just create pages and they're instantly available with the correct paths.
Why Use This Plugin? ​
While SigPro's router works perfectly with manually defined routes, this plugin:
  • Eliminates boilerplate - No need to write route configurations
  • Enforces conventions - Consistent URL structure across your app
  • Supports dynamic routes - Use [param] syntax for parameters
  • Automatic code-splitting - Each page becomes a separate chunk
  • Type-safe (with JSDoc) - Routes follow your file structure
Installation ​
The plugin is included with SigPro, but you need to add it to your Vite config:
javascript
// vite.config.js
+    
SigPro
Appearance
Vite Plugin: Automatic File-based Routing 🚦 ​
SigPro provides an optional Vite plugin that automatically generates routes based on your file structure. No configuration needed - just create pages and they're instantly available with the correct paths.
Why Use This Plugin? ​
While SigPro's router works perfectly with manually defined routes, this plugin:
  • Eliminates boilerplate - No need to write route configurations
  • Enforces conventions - Consistent URL structure across your app
  • Supports dynamic routes - Use [param] syntax for parameters
  • Automatic code-splitting - Each page becomes a separate chunk
  • Type-safe (with JSDoc) - Routes follow your file structure
Installation ​
The plugin is included with SigPro, but you need to add it to your Vite config:
javascript
// vite.config.js
 import { defineConfig } from 'vite';
 import { sigproRouter } from 'sigpro';
 
@@ -242,8 +242,8 @@
 }));
 
 const router = $.router(routesWithLayout);
-document.body.appendChild(router);
Note: This plugin is completely optional. You can always define routes manually if you prefer. The plugin just saves you from writing boilerplate route configurations.
Pro Tip: The plugin works great with hot module replacement (HMR) - add a new page and it's instantly available in your dev server without restarting!

-    
+document.body.appendChild(router);
Note: This plugin is completely optional. You can always define routes manually if you prefer. The plugin just saves you from writing boilerplate route configurations.
Pro Tip: The plugin works great with hot module replacement (HMR) - add a new page and it's instantly available in your dev server without restarting!

+    
     
   
 
\ No newline at end of file
diff --git a/packages/docs/.vitepress/config.js b/packages/docs/.vitepress/config.js
index bb36cfd..0baab27 100644
--- a/packages/docs/.vitepress/config.js
+++ b/packages/docs/.vitepress/config.js
@@ -24,7 +24,6 @@ export default defineConfig({
       { text: 'Home', link: '/' },
       { text: 'Guide', link: '/guide/getting-started' },
       { text: 'Api', link: '/api/quick' },
-      { text: 'UI', link: '/ui/intro' },
     ],
     sidebar: [
       {
@@ -48,12 +47,6 @@ export default defineConfig({
           { text: 'Routing', link: '/api/routing' },
         ]
       },
-      {
-        text: 'SigPro UI',
-        items: [
-          { text: 'Intro', link: '/ui/intro' },
-        ]
-      },
       {
         text: 'Vite Router Plugin',
         items: [
diff --git a/packages/docs/ui/intro.md b/packages/docs/ui/intro.md
deleted file mode 100644
index df72be6..0000000
--- a/packages/docs/ui/intro.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# SigPro UI
-
-**SigPro UI** is a collection of high-performance **Web Components** built on top of the **SigPro** reactive library and styled with **DaisyUI**.
-
-## Why SigPro UI?
-
-Designed to streamline modern web development, SigPro UI combines the lightweight reactivity of SigPro with the beautiful, accessible design system of DaisyUI. 
-
-* **Native Web Components:** Use them in any framework or plain HTML.
-* **Reactive by Design:** Powered by SigPro signals ($) for seamless state management.
-* **Utility-First Styling:** Leveraging Tailwind CSS and DaisyUI for a polished look without the bloat.
-* **Developer Experience:** Focus on building features, not reinventing UI patterns.
-
-## Getting Started
-
-SigPro UI allows you to build modular, reactive interfaces with minimal overhead, making web development faster, cleaner, and more efficient.
\ No newline at end of file