refactor: Vite demo application (#7)

* docs: milestone planning
* fix: expression eval with unwrapped signals
* refactor: new demo structure
* fix: css text wrapping
* fix: nested model property binding & eval
* feat: create css showcase

README.md

···
 | Streams  | `data-volt-stream="/events"` listens for SSE or WebSocket updates and applies JSON patches.       |
 | Plugins  | Modular extensions (`data-volt-persist`, `data-volt-surge`, `data-volt-shift`, etc.) to enhance the core. |
 
+## VoltX.css
+
+VoltX ships with an optional classless CSS framework inspired by Pico CSS and Tufte CSS. It provides beautiful, semantic styling for HTML elements without requiring any CSS classes—just write semantic markup and it looks great out of the box.
+
+Features include typography with modular scale, Tufte-style sidenotes, styled form elements, dialogs, accordions, tooltips, tables, and more. See the framework's [README](./lib/README.md#voltxcss) for installation and usage details.
+
+Here are some highlights
+
+![VoltX Typography](./docs/images/voltx-css_typography.png)
+
+![VoltX Structured Content](./docs/images/voltx-css_structured-content.png)
+
+![VoltX Components](./docs/images/voltx-css_components.png)
+
 ## Packages
 
 ```sh
···
 - Local development: `pnpm install` then `pnpm --filter lib dev` run package-specific scripts (`build`, `test`, etc.).
     - Review [contribution](./CONTRIBUTING.md) guidelines
 - Documentation: `pnpm --filter docs docs:dev` launches the VitePress site.
+
+### Working on New Features
+
+The `lib/` package includes a comprehensive demo Vite app showcasing all VoltX.js features:
+
+```sh
+# Start the demo development server
+pnpm --filter voltx.js dev
+```
+
+The demo app essentially provides an interactive sandbox to develop and catch bugs in new implementations.
+
+#### Pages
+
+- **Home**: Framework overview and quick start examples
+- **CSS**: VoltX.css typography, layout, and component features
+- **Interactivity**: Dialogs, buttons, event handling
+- **Forms**: Two-way binding and form validation patterns
+- **Reactivity**: Signals, computed values, conditional/list rendering
+- **Plugins**: Persistence, scroll management, URL sync
+- **Animations**: Transitions and keyframe animations
+
+Docs are the source of truth but take advantage of this environment. When developing new features, add examples to the appropriate demo section or create a new page to showcase the functionality.
 
 ## License
 

ROADMAP.md

···
     - Announcement post and release notes
     - Community contribution guide & governance doc
 
+### Better Demo
+
+**Goal:** Transform the current programmatic demo into a declarative multi-page SPA showcasing all framework and CSS features.
+**Outcome:** Production-quality reference application demonstrating VoltX.js best practices and real-world patterns.
+**Deliverables:**
+    - Convert demo from programmatic to declarative mode (charge() + data-volt attributes)
+    - Implement multi-page routing using Navigation & History API plugin
+    - Add tooltips to VoltX css using data attributes
+        - Example: data-vx-tooltip="Right" data-placement="right"
+    - Page: Home - Framework overview and feature highlights
+    - Page: Getting Started - Installation and first examples
+    - Page: Reactivity - Signals, computed, effects, bindings, conditional/list rendering
+    - Page: HTTP - Backend integration with all methods, swap strategies, retry logic
+    - Page: State - Global stores and scope helpers ($store, $scope, $pulse, $uid, $probe, $pins, $arc)
+    - Page: Persistence - localStorage/sessionStorage/IndexedDB, persist plugin, URL sync
+    - Page: Animations - Surge directive, shift plugin, View Transitions
+    - Page: Forms - Model binding, validation, event modifiers, multi-step forms
+    - Page: CSS - Complete Volt CSS showcase (typography, layout, Tufte sidenotes, tables)
+    - Page: Patterns - Real-world components (tabs, accordion, modal, autocomplete)
+    - View-source friendly code with clear examples
+    - Copy-paste ready patterns for common use cases
+
 ## Parking Lot
 
 ### Evaluator & Binder Hardening

TODO.md

···
+# Better Demo Implementation TODO
+
+This document tracks the implementation of the Better Demo deliverables from ROADMAP.md.
+
+## Existing Issues
+
+- [x] **FIXME** (lib/src/demo/sections/plugins.ts:68): Sidenotes need stylesheet constraints - RESOLVED
+- [x] **FIXME** (lib/src/demo/sections/interactivity.ts:46): Dialog footer structure needs correction - RESOLVED
+
+## Phase 1: Foundation (First 4 Deliverables)
+
+### 1. Convert to Declarative Mode
+
+**Approach:** Use DOM utilities (lib/src/demo/utils.ts) to programmatically build HTML markup that uses declarative VoltX attributes (data-volt-state, data-volt-computed, data-volt-*), then mount with charge() instead of programmatic mount() + signals.
+
+- [x] Add window.$helpers for DOM operations (openDialog, closeDialog, scrollTo, etc.)
+- [x] Update buildDemoStructure() to add data-volt attribute to root element
+- [x] Add data-volt-state with all initial state as JSON on root element
+- [x] Add data-volt-computed attributes for derived values (doubled, activeTodos, completedTodos)
+- [x] Convert all sections to produce markup with declarative bindings:
+    - [x] Interactivity section - use $helpers.openDialog(), button expressions
+    - [x] Reactivity section - reference state directly in expressions (count.get(), etc.)
+    - [x] Forms section - use $helpers.handleFormSubmit(), data-volt-model on inputs
+    - [x] Plugins section - declarative persist/scroll/url attributes (already mostly done)
+    - [x] Animations section - declarative surge/shift attributes (already done)
+    - [x] Typography section - no changes needed (static content)
+- [x] Remove demoScope export (replaced by declarative state on element)
+- [x] Update setupDemo() to use charge() instead of mount()
+- [x] Update lib/src/main.ts to just call setupDemo() (no other code)
+
+### 2. Implement Multi-Page Routing
+
+- [x] Register navigate plugin in main.ts
+- [x] Initialize navigation listener with initNavigationListener()
+- [x] Create route-based content structure (added currentPage signal)
+- [x] Add navigation menu with declarative page switching
+- [x] Implement content swapping mechanism (conditional rendering with data-volt-if)
+- [x] Ensure browser back/forward buttons work correctly (initNavigationListener)
+- [x] Add View Transition API integration (built into navigate plugin)
+
+### 3. Add Tooltip CSS Feature
+
+- [x] Design tooltip data attribute API (data-vx-tooltip, data-placement)
+- [x] Add tooltip CSS to lib/src/styles/components.css
+- [x] Support placements: top, right, bottom, left
+- [x] Implement tooltip positioning logic (CSS-only with pseudo-elements)
+- [x] Add hover/focus interactions
+- [x] Ensure accessibility (uses native attributes)
+- [x] Test tooltips across different viewport sizes (responsive: hidden on mobile)
+- [x] Add tooltip examples to home page
+
+### 4. Create Home Page
+
+- [x] Design home page layout
+- [x] Add framework overview section
+- [x] Create feature highlights grid/list
+    - Bundle size < 15KB
+    - No virtual DOM
+    - Signal-based reactivity
+    - Zero dependencies
+    - Declarative-first approach
+- [x] Add quick navigation to demo pages
+- [x] Include getting started code snippet
+- [x] Add links to documentation and GitHub
+- [x] Ensure home page uses Volt CSS classless styling
+
+## PHASE 1 COMPLETE ✓
+
+## Phase 2: Core Feature Pages
+
+### 5. Page: Getting Started
+
+- [ ] Installation instructions (npm, JSR, CDN)
+- [ ] First example with charge()
+- [ ] Declarative vs programmatic comparison
+- [ ] Basic signal usage example
+- [ ] Link to full documentation
+
+### 6. Page: Reactivity
+
+- [ ] Migrate existing reactivity section
+- [ ] Signals demo (get/set/subscribe)
+- [ ] Computed values demo
+- [ ] Effects demo
+- [ ] Conditional rendering (data-volt-if/else)
+- [ ] List rendering (data-volt-for)
+- [ ] Class bindings (data-volt-class)
+- [ ] Two-way binding (data-volt-model)
+
+### 7. Page: HTTP
+
+- [ ] Demonstrate all HTTP methods (GET, POST, PUT, PATCH, DELETE)
+- [ ] Show swap strategies (innerHTML, outerHTML, beforebegin, afterbegin, beforeend, afterend, delete, none)
+- [ ] Loading indicators with data-volt-indicator
+- [ ] Error handling patterns
+- [ ] Retry logic demonstration
+- [ ] Form serialization for POST/PUT/PATCH
+- [ ] Target selector usage
+
+### 8. Page: State
+
+- [ ] Global store demonstration
+- [ ] Scope helpers overview
+    - $store - access global state
+    - $scope - current scope reference
+    - $pulse - microtask scheduling
+    - $uid - deterministic IDs
+    - $probe - element refs
+    - $pins - custom helpers
+    - $arc - custom event dispatch
+- [ ] Cross-component communication patterns
+- [ ] Store registration and updates
+
+## Phase 3: Plugin & Advanced Pages
+
+### 9. Page: Persistence
+
+- [ ] Migrate existing persist plugin demo
+- [ ] localStorage persistence demo
+- [ ] sessionStorage persistence demo
+- [ ] IndexedDB persistence demo
+- [ ] URL sync with url plugin
+- [ ] Demonstrate storage modifiers (.local, .session, .ifmissing)
+- [ ] Cross-tab synchronization example
+
+### 10. Page: Animations
+
+- [ ] Migrate existing animations section
+- [ ] Surge plugin demos (fade, slide, scale, blur)
+- [ ] Custom timing (duration, delay)
+- [ ] Different enter/leave transitions
+- [ ] Shift plugin demos (bounce, shake, pulse, flash, spin)
+- [ ] Custom animation settings
+- [ ] Combined effects (surge + shift)
+- [ ] View Transition API integration
+
+### 11. Page: Forms
+
+- [ ] Migrate existing forms section
+- [ ] Complete form example with all input types
+- [ ] Two-way binding demonstration
+- [ ] Validation patterns
+- [ ] Event modifiers (.prevent, .stop, etc.)
+- [ ] Multi-step form example
+- [ ] Form submission handling
+
+## Phase 4: Reference & Patterns
+
+### 12. Page: CSS
+
+- [ ] Migrate existing typography section
+- [ ] Expand with additional Volt CSS features
+- [ ] Typography showcase (headings, paragraphs, lists)
+- [ ] Tufte-style sidenotes
+- [ ] Tables with zebra striping
+- [ ] Code blocks and inline code
+- [ ] Blockquotes and citations
+- [ ] Semantic HTML elements
+- [ ] Layout examples
+- [ ] Responsive behavior
+
+### 13. Page: Patterns
+
+- [ ] Tabs component pattern
+- [ ] Accordion component pattern
+- [ ] Modal dialog pattern (expand existing)
+- [ ] Autocomplete/search pattern
+- [ ] Dropdown menu pattern
+- [ ] Toast/notification pattern
+- [ ] Pagination pattern
+- [ ] Infinite scroll pattern
+
+## Phase 5: Polish & Documentation
+
+### 14. View-Source Friendly Code
+
+- [ ] Ensure all HTML is readable and well-commented
+- [ ] Add explanatory comments to complex bindings
+- [ ] Include inline documentation where helpful
+- [ ] Make examples copy-paste ready
+
+### 15. Copy-Paste Ready Patterns
+
+- [ ] Extract reusable patterns into clearly marked sections
+- [ ] Provide minimal examples for each feature
+- [ ] Include both inline and external script examples
+- [ ] Document common pitfalls and solutions
+
+## File Structure
+
+```sh
+lib/
+  index.html              # Main entry with routing and global state
+  src/
+    main.ts              # Minimal bootstrap (charge + navigate init)
+    demo/
+      index.ts           # Removed or minimal utilities only
+      sections/          # Keep or convert to HTML partials
+      utils.ts           # DOM utilities (may still be useful)
+    pages/               # New directory for page templates
+      home.html
+      getting-started.html
+      reactivity.html
+      http.html
+      state.html
+      persistence.html
+      animations.html
+      forms.html
+      css.html
+      patterns.html
+    styles/
+      components.css     # Add tooltip styles here
+      ...
+```

docs/internals/reactivity.md

···
 
 While this document focuses on signals, most application code interacts with `reactive()` objects.
 These are proxies backed by signals; property reads call `signal.get()`, writes call `signal.set()`.
-See [Proxy Objects](./proxies.md) for a detailed discussion.
+See [Proxy Objects](./proxies) for a detailed discussion.
+
+## Expression Evaluation and Signal Unwrapping
+
+The expression evaluator bridges declarative markup with the reactive core. It compiles attribute expressions into functions that run in a sandboxed scope proxy.
+
+### Auto-Unwrapping Behavior
+
+By default, the evaluator automatically unwraps signals in read contexts (bindings like `data-volt-text`, `data-volt-if`, etc.). This enables natural comparisons and operations:
+
+```html
+<div data-volt data-volt-state='{"page": "home"}'>
+  <!-- page signal is auto-unwrapped, so === comparison works -->
+  <div data-volt-if="page === 'home'">Home Content</div>
+</div>
+```
+
+Without auto-unwrapping, strict equality (`===`) would compare the signal wrapper object to the string `'home'`, always returning false. Auto-unwrapping ensures the comparison uses the signal's value.
+
+### Event Handlers
+
+In event handlers (`data-volt-on-*`) and initialization code (`data-volt-init`), signals are **not** auto-unwrapped. This preserves access to signal methods like `.set()` and `.subscribe()`:
+
+```html
+<button data-volt-on-click="count.set(count.get() + 1)">Increment</button>
+```
+
+### Implementation
+
+The evaluator uses a scope proxy that wraps signal objects differently based on context:
+
+- **Read mode** (`unwrapSignals: true`): Returns the signal's value for transparent comparisons
+- **Write mode** (`unwrapSignals: false`): Returns a wrapped signal with `.get()`, `.set()`, and `.subscribe()` methods
+
+This dual behavior is controlled by the `opts.unwrapSignals` parameter passed to `evaluate()`.
 
 ## Scope Helpers
 
 When a scope is mounted, VoltX injects several helpers that lean on the reactive core:
 
 - `$pulse(cb)` queues `cb` on the microtask queue.
-    It’s often used to observe the DOM after reactive updates settle.
+    It's often used to observe the DOM after reactive updates settle.
 - `$probe(expr, cb)` bridges the evaluator and the tracker.
     It uses `extractDeps()` to pre-compute dependencies for the expression, subscribes to them, and re-evaluates via `evaluate()` on change.
 - `$arc`, `$uid`, `$pins`, `$store`, and `$probe` all use the same subscription mechanics.

docs/usage/global-state.md

···
 - `$store.get(key)` - Get signal value
 - `$store.set(key, value)` - Update signal value
 - `$store.has(key)` - Check if key exists
-- `$store[key]` - Direct signal access
+- `$store[key]` - Direct signal access (auto-unwrapped in read contexts)
+
+**Note on Signal Unwrapping:**
+
+When accessing store values via `$store[key]` in read contexts (like `data-volt-text` or `data-volt-if`), the signal is automatically unwrapped. In event handlers, use `.get()` and `.set()` methods for explicit control:
+
+```html
+<!-- Read context: signal auto-unwrapped -->
+<p data-volt-if="$store.theme === 'dark'">Dark mode active</p>
+
+<!-- Event handler: use methods -->
+<button data-volt-on-click="$store.theme.set('light')">Switch to Light</button>
+
+<!-- Or use the store's convenience methods -->
+<button data-volt-on-click="$store.set('theme', 'light')">Switch to Light</button>
+```
 
 ### `$origin`
 

docs/usage/state.md

···
 Bindings can access nested properties, and the evaluator automatically unwraps signal values.
 Event handlers receive special scope additions: `$el` for the element and `$event` for the event object.
 
-## Signal Methods in Expressions
+## Signal Auto-Unwrapping
+
+VoltX automatically unwraps signals in read contexts, making expressions simpler and more natural:
+
+```html
+<div data-volt data-volt-state='{"count": 5, "name": "Alice"}'>
+  <!-- Signals are automatically unwrapped in bindings -->
+  <p data-volt-text="count"></p>
+  <p data-volt-if="count > 0">Count is positive</p>
+  <p data-volt-if="name === 'Alice'">Hello Alice!</p>
 
-While signal values are automatically unwrapped in most expressions, explicit signal methods are available when needed:
+  <!-- In event handlers, use .get() to read and .set() to write -->
+  <button data-volt-on-click="count.set(count.get() + 1)">Increment</button>
+</div>
+```
+
+**Read Contexts** (signals auto-unwrapped):
+- `data-volt-text`, `data-volt-html`
+- `data-volt-if`, `data-volt-else`
+- `data-volt-for`
+- `data-volt-class`, `data-volt-style`
+- `data-volt-bind:*`
+- `data-volt-computed:*` expressions
 
-- Use `signal.get()` to read the current value
-- Use `signal.set(newValue)` to update state from event handlers
-- Use `signal.subscribe(fn)` in custom JavaScript (not typical in templates)
+**Write Contexts** (signals not auto-unwrapped):
+- `data-volt-on-*` event handlers
+- `data-volt-init` initialization code
+- `data-volt-model` (handles both read and write automatically)
 
-The `.set()` method is commonly used in `data-volt-on-*` event bindings to update state in response to user actions.
+This design allows strict equality comparisons (`===`) to work naturally in conditional rendering while preserving access to signal methods like `.set()` in event handlers.
 
 ## State Persistence
 

lib/README.md

···
 
 Plugins are opt-in and can be combined declaratively or registered programmatically via `charge({ plugins: [...] })`.
 
-## Using CSS
+## VoltX.css
 
-Import the optional CSS framework:
+VoltX ships with an optional classless CSS framework inspired by Pico CSS and Tufte CSS. It provides beautiful, semantic styling without requiring any CSS classes—just write semantic HTML and it looks great. It's perfect for prototyping.
+
+### Features
+
+- **Typography**: Modular scale (1.25 ratio), harmonious spacing, and responsive sizing
+- **Tufte-style sidenotes**: Margin notes using `<small>` that float on desktop, inline on mobile
+- **Components**: Styled dialogs, accordions (details/summary), and pure-CSS tooltips
+- **Forms**: Consistent, accessible input styling with validation states
+- **Tables**: Zebra striping and responsive behavior
+- **Code blocks**: Syntax-appropriate styling for inline and block code
+- **Dark mode**: Automatic theme switching based on system preferences
+
+### Installation
+
+Import the CSS in your application:
 
 ```typescript
 import 'voltx.js/css';
···
 ```html
 <link rel="stylesheet" href="https://unpkg.com/voltx.js/dist/voltx.css">
 ```
+
+### Usage
+
+No classes needed—just write semantic HTML:
+
+```html
+<article>
+  <h2>Beautiful Typography</h2>
+  <p>
+    This paragraph has proper spacing.
+    <small>This sidenote appears in the margin on wide screens.</small>
+    All elements are styled automatically.
+  </p>
+
+  <details>
+    <summary>Accordion Example</summary>
+    <p>Content revealed when opened.</p>
+  </details>
+</article>
+```
+
+See the demo app's CSS section for comprehensive examples of all features.
 
 ## Documentation
 

lib/src/core/binder.ts

···
 /**
- * Binder system for mounting and managing Volt.js bindings
+ * Binder system for mounting and managing VoltX.js bindings
  */
 
 import { executeSurgeEnter, executeSurgeLeave, hasSurge } from "$plugins/surge";
···
 }
 
 /**
- * Mount Volt.js on a root element and its descendants and binds all data-volt-* attributes to the provided scope.
+ * Mount VoltX.js on a root element and its descendants and binds all data-volt-* attributes to the provided scope.
  *
  * @param root - Root element to mount on
  * @param scope - Scope object containing signals and data
···
 }
 
 /**
+ * Get a nested property value from an object using a path array
+ *
+ * @example
+ * getNestedProperty({ user: { name: "Alice" } }, ["user", "name"]) // "Alice"
+ */
+function getNestedProperty(obj: unknown, path: string[]): unknown {
+  let current = obj;
+  for (const key of path) {
+    if (current == null || typeof current !== "object") {
+      return undefined;
+    }
+    current = (current as Record<string, unknown>)[key];
+  }
+  return current;
+}
+
+/**
+ * Set a nested property value in an object immutably using a path array
+ *
+ * @example
+ * setNestedProperty({ user: { name: "Alice" } }, ["user", "name"], "Bob")
+ * // Returns: { user: { name: "Bob" } }
+ */
+function setNestedProperty(obj: unknown, path: string[], value: unknown): unknown {
+  if (path.length === 0) {
+    return value;
+  }
+
+  if (obj == null || typeof obj !== "object") {
+    return obj;
+  }
+
+  const clone = Array.isArray(obj) ? [...obj] : { ...obj };
+  const [head, ...tail] = path;
+
+  if (tail.length === 0) {
+    (clone as Record<string, unknown>)[head] = value;
+  } else {
+    (clone as Record<string, unknown>)[head] = setNestedProperty((clone as Record<string, unknown>)[head], tail, value);
+  }
+
+  return clone;
+}
+
+/**
+ * Find a signal and optional nested property path for data-volt-model binding
+ *
+ * Supports two patterns:
+ * 1. Nested signals: { formData: { name: signal("") } } with path "formData.name"
+ * 2. Signal with object value: { formData: signal({ name: "" }) } with path "formData.name"
+ *
+ * @returns Object with signal and propertyPath, or null if not found
+ */
+function findModelSignal(scope: Scope, path: string): Nullable<{ signal: Signal<unknown>; propertyPath: string[] }> {
+  const signal = findScopedSignal(scope, path);
+  if (signal) {
+    return { signal, propertyPath: [] };
+  }
+
+  const parts = path.split(".");
+  for (let i = parts.length - 1; i > 0; i--) {
+    const prefix = parts.slice(0, i).join(".");
+    const testSignal = findScopedSignal(scope, prefix);
+
+    if (testSignal) {
+      const propertyPath = parts.slice(i);
+      return { signal: testSignal, propertyPath };
+    }
+  }
+
+  return null;
+}
+
+/**
  * Bind data-volt-model for two-way data binding on form elements with support for modifiers.
  * Syncs the signal value with the input value bidirectionally.
  *
···
  * - .debounce[.ms] - debounces signal updates (default 300ms)
  */
 function bindModel(context: BindingContext, signalPath: string, modifiers: Modifier[] = []): void {
-  const signal = findScopedSignal(context.scope, signalPath);
-  if (!signal) {
+  const result = findModelSignal(context.scope, signalPath);
+  if (!result) {
     console.error(`Signal "${signalPath}" not found for data-volt-model`);
     return;
   }
+
+  const { signal, propertyPath } = result;
 
   const element = context.element as FormControlElement;
   const type = element instanceof HTMLInputElement ? element.type : null;
-  const initialValue = signal.get();
+
+  const getValue = (): unknown => {
+    const signalValue = signal.get();
+    return propertyPath.length > 0 ? getNestedProperty(signalValue, propertyPath) : signalValue;
+  };
+
+  const initialValue = getValue();
   setElementValue(element, initialValue, type);
 
   const unsubscribe = signal.subscribe(() => {
-    const value = signal.get();
+    const value = getValue();
     setElementValue(element, value, type);
   });
   context.cleanups.push(unsubscribe);
···
       }
     }
 
-    (signal as Signal<unknown>).set(value);
+    if (propertyPath.length > 0) {
+      const currentObj = signal.get();
+      const updatedObj = setNestedProperty(currentObj, propertyPath, value);
+      (signal as Signal<unknown>).set(updatedObj);
+    } else {
+      (signal as Signal<unknown>).set(value);
+    }
   };
 
   let handler = baseHandler;

lib/src/core/evaluator.ts

···
  *
  * @param expr - The expression string to evaluate
  * @param scope - The scope object containing values
+ * @param opts - Evaluation options. By default, signals are unwrapped for read operations.
+ *               Pass { unwrapSignals: false } to keep signals wrapped (needed for event handlers that call .set())
  * @returns The evaluated result
  * @throws EvaluationError if expression is invalid or evaluation fails
  */
 export function evaluate(expr: string, scope: Scope, opts?: EvaluateOpts): unknown {
   try {
     const fn = compileExpr(expr, false);
-    const wrapOptions = opts && opts.unwrapSignals ? readWrapOptions : defaultWrapOptions;
+    const wrapOptions = opts?.unwrapSignals === false ? defaultWrapOptions : readWrapOptions;
     const proxiedScope = createScopeProxy(scope, wrapOptions);
     const result = fn(proxiedScope, unwrapMaybeSignal);
     return unwrapSignal(result);
···
  *
  * Used for event handlers that may contain multiple semicolon-separated statements.
  * Statements are executed in order but no return value is captured.
+ * Signals are NOT unwrapped by default to allow calling .set() and other signal methods.
  *
  * @param expr - The statement(s) to evaluate
  * @param scope - The scope object containing values
···
 export function evaluateStatements(expr: string, scope: Scope): void {
   try {
     const fn = compileExpr(expr, true);
-    const proxiedScope = createScopeProxy(scope);
+    const proxiedScope = createScopeProxy(scope, defaultWrapOptions);
     fn(proxiedScope, unwrapMaybeSignal);
   } catch (error) {
     if (error instanceof EvaluationError) {

lib/src/demo/index.ts

···
 /**
- * Demo module for showcasing Volt.js features and volt.css styling
+ * Demo module for showcasing VoltX.js features and volt.css styling
  *
  * This module creates the entire demo structure programmatically using DOM APIs,
- * demonstrating how to build complex UIs with Volt.js.
+ * then uses charge() to mount it declaratively.
  */
 
+import { charge } from "$core/charge";
+import { isSignal } from "$core/shared";
+import { initNavigationListener } from "$plugins/navigate";
 import { persistPlugin } from "$plugins/persist";
 import { scrollPlugin } from "$plugins/scroll";
 import { shiftPlugin } from "$plugins/shift";
 import { surgePlugin } from "$plugins/surge";
 import { urlPlugin } from "$plugins/url";
-import { computed, effect, mount, registerPlugin, signal } from "$volt";
+import type { Signal } from "$types/volt";
+import { registerPlugin } from "$volt";
 import { createAnimationsSection } from "./sections/animations";
+import { createCssSection } from "./sections/css";
 import { createFormsSection } from "./sections/forms";
+import { createHomeSection } from "./sections/home";
 import { createInteractivitySection } from "./sections/interactivity";
 import { createPluginsSection } from "./sections/plugins";
 import { createReactivitySection } from "./sections/reactivity";
-import { createTypographySection } from "./sections/typography";
 import * as dom from "./utils";
 
 registerPlugin("persist", persistPlugin);
···
 registerPlugin("surge", surgePlugin);
 registerPlugin("shift", shiftPlugin);
 
-const message = signal("Welcome to the Volt.js Demo");
-const count = signal(0);
-const doubled = computed(() => count.get() * 2);
-
-const formData = signal({ name: "", email: "", bio: "", country: "us", newsletter: false, plan: "free" });
-
-const todos = signal([{ id: 1, text: "Learn Volt.js", done: false }, { id: 2, text: "Build an app", done: false }, {
-  id: 3,
-  text: "Ship to production",
-  done: false,
-}]);
-
-const newTodoText = signal("");
-let todoIdCounter = 4;
-
-const showAdvanced = signal(false);
-
-const isActive = signal(true);
-const isHighlighted = signal(false);
-
-const dialogMessage = signal("");
-const dialogInput = signal("");
-
-const persistedCount = signal(0);
-const scrollPosition = signal(0);
-const urlParam = signal("");
-
-const showFade = signal(false);
-const showSlideDown = signal(false);
-const showScale = signal(false);
-const showBlur = signal(false);
-const showSlowFade = signal(false);
-const showDelayedSlide = signal(false);
-const showGranular = signal(false);
-const showCombined = signal(false);
-const triggerBounce = signal(0);
-const triggerShake = signal(0);
-const triggerFlash = signal(0);
-const triggerTripleBounce = signal(0);
-const triggerLongShake = signal(0);
-
-const activeTodos = computed(() => todos.get().filter((todo) => !todo.done));
-const completedTodos = computed(() => todos.get().filter((todo) => todo.done));
-
-effect(() => {
-  console.log("Count changed:", count.get());
-});
-
-const increment = () => {
-  count.set(count.get() + 1);
-};
-
-const decrement = () => {
-  count.set(count.get() - 1);
-};
-
-const reset = () => {
-  count.set(0);
-};
-
-const updateMessage = () => {
-  message.set(`Count is now ${count.get()}`);
-};
-
-const openDialog = () => {
-  const dialog = document.querySelector("#demo-dialog") as HTMLDialogElement;
-  if (dialog) {
-    dialogMessage.set("");
-    dialogInput.set("");
-    dialog.showModal();
-  }
-};
-
-const closeDialog = () => {
-  const dialog = document.querySelector("#demo-dialog") as HTMLDialogElement;
-  if (dialog) {
-    dialog.close();
-  }
-};
-
-const submitDialog = (event: Event) => {
-  event.preventDefault();
-  dialogMessage.set(`You entered: ${dialogInput.get()}`);
-  setTimeout(closeDialog, 2000);
-};
-
-const addTodo = () => {
-  const text = newTodoText.get().trim();
-  if (text) {
-    todos.set([...todos.get(), { id: todoIdCounter++, text, done: false }]);
-    newTodoText.set("");
-  }
-};
-
-const toggleTodo = (id: number) => {
-  todos.set(todos.get().map((todo) => todo.id === id ? { ...todo, done: !todo.done } : todo));
-};
-
-const removeTodo = (id: number) => {
-  todos.set(todos.get().filter((todo) => todo.id !== id));
-};
-
-const handleFormSubmit = (event: Event) => {
-  event.preventDefault();
-  console.log("Form submitted:", formData.get());
-  alert(`Form submitted! Check console for data.`);
-};
-
-const toggleAdvanced = () => {
-  showAdvanced.set(!showAdvanced.get());
-};
+/**
+ * Helper functions for DOM operations that can't be expressed declaratively
+ * These are added to the scope so they can be called from data-volt-on-* attributes
+ */
+const helpers = {
+  openDialog(id: string) {
+    const dialog = document.querySelector(`#${id}`) as HTMLDialogElement;
+    if (dialog) {
+      dialog.showModal();
+    }
+  },
 
-const toggleActive = () => {
-  isActive.set(!isActive.get());
-};
+  closeDialog(id: string) {
+    const dialog = document.querySelector(`#${id}`) as HTMLDialogElement;
+    if (dialog) {
+      dialog.close();
+    }
+  },
 
-const toggleHighlight = () => {
-  isHighlighted.set(!isHighlighted.get());
-};
+  scrollToTop() {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  },
 
-const scrollToTop = () => {
-  window.scrollTo({ top: 0, behavior: "smooth" });
-};
+  scrollToSection(id: string) {
+    const element = document.querySelector(`#${id}`);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth" });
+    }
+  },
 
-const scrollToSection = (id: string) => {
-  const element = document.querySelector(`#${id}`);
-  if (element) {
-    element.scrollIntoView({ behavior: "smooth" });
-  }
-};
-
-export const demoScope = {
-  message,
-  count,
-  doubled,
-  formData,
-  todos,
-  newTodoText,
-  activeTodos,
-  completedTodos,
-  showAdvanced,
-  isActive,
-  isHighlighted,
-  dialogMessage,
-  dialogInput,
-  persistedCount,
-  scrollPosition,
-  urlParam,
-  showFade,
-  showSlideDown,
-  showScale,
-  showBlur,
-  showSlowFade,
-  showDelayedSlide,
-  showGranular,
-  showCombined,
-  triggerBounce,
-  triggerShake,
-  triggerFlash,
-  triggerTripleBounce,
-  triggerLongShake,
-  increment,
-  decrement,
-  reset,
-  updateMessage,
-  openDialog,
-  closeDialog,
-  submitDialog,
-  addTodo,
-  toggleTodo,
-  removeTodo,
-  handleFormSubmit,
-  toggleAdvanced,
-  toggleActive,
-  toggleHighlight,
-  scrollToTop,
-  scrollToSection,
+  handleFormSubmit(event: Event) {
+    event.preventDefault();
+    const form = event.target as HTMLFormElement;
+    const formData = new FormData(form);
+    const data = Object.fromEntries(formData.entries());
+    console.log("Form submitted:", data);
+    alert("Form submitted! Check console for data.");
+  },
 };
 
 const buildNav = () =>
   dom.nav(
     null,
-    dom.a({ href: "#typography" }, "Typography"),
+    dom.a({ "data-volt-navigate": "", href: "/" }, "Home"),
     " | ",
-    dom.a({ href: "#interactivity" }, "Interactivity"),
+    dom.a({ "data-volt-navigate": "", href: "/css" }, "CSS"),
     " | ",
-    dom.a({ href: "#forms" }, "Forms"),
+    dom.a({ "data-volt-navigate": "", href: "/interactivity" }, "Interactivity"),
     " | ",
-    dom.a({ href: "#reactivity" }, "Reactivity"),
+    dom.a({ "data-volt-navigate": "", href: "/forms" }, "Forms"),
     " | ",
-    dom.a({ href: "#plugins" }, "Plugins"),
+    dom.a({ "data-volt-navigate": "", href: "/reactivity" }, "Reactivity"),
     " | ",
-    dom.a({ href: "#animations" }, "Animations"),
+    dom.a({ "data-volt-navigate": "", href: "/plugins" }, "Plugins"),
+    " | ",
+    dom.a({ "data-volt-navigate": "", href: "/animations" }, "Animations"),
   );
 
+/**
+ * Get the current page from the URL pathname
+ */
+function getCurrentPageFromPath(): string {
+  const path = globalThis.location.pathname;
+  if (path === "/" || path === "") return "home";
+  return path.slice(1); // Remove leading slash
+}
+
 function buildDemoStructure(): HTMLElement {
+  const initialState = {
+    currentPage: getCurrentPageFromPath(),
+    message: "Welcome to the VoltX.js Demo",
+    count: 0,
+    formData: { name: "", email: "", bio: "", country: "us", newsletter: false, plan: "free" },
+    todos: [{ id: 1, text: "Learn VoltX.js", done: false }, { id: 2, text: "Build an app", done: false }, {
+      id: 3,
+      text: "Ship to production",
+      done: false,
+    }],
+    newTodoText: "",
+    todoIdCounter: 4,
+    showAdvanced: false,
+    isActive: true,
+    isHighlighted: false,
+    dialogMessage: "",
+    dialogInput: "",
+    persistedCount: 0,
+    scrollPosition: 0,
+    urlParam: "",
+    showFade: false,
+    showSlideDown: false,
+    showScale: false,
+    showBlur: false,
+    showSlowFade: false,
+    showDelayedSlide: false,
+    showGranular: false,
+    showCombined: false,
+    triggerBounce: 0,
+    triggerShake: 0,
+    triggerFlash: 0,
+    triggerTripleBounce: 0,
+    triggerLongShake: 0,
+  };
+
   return dom.div(
-    null,
+    {
+      "data-volt": "",
+      "data-volt-state": JSON.stringify(initialState),
+      "data-volt-computed:doubled": "count * 2",
+      "data-volt-computed:activeTodos": "todos.filter(t => !t.done)",
+      "data-volt-computed:completedTodos": "todos.filter(t => t.done)",
+    },
     dom.header(
       null,
       dom.h1({ "data-volt-text": "message" }, "Loading..."),
       dom.p(
         null,
-        "A comprehensive demo showcasing Volt.js reactive framework and Volt CSS classless styling.",
+        "A comprehensive demo showcasing VoltX.js reactive framework and Volt CSS classless styling.",
         dom.small(
           null,
           "This demo demonstrates both the framework's reactive capabilities and the elegant, semantic styling of Volt CSS. No CSS classes needed!",
···
     dom.el(
       "main",
       null,
-      createTypographySection(),
-      createInteractivitySection(),
-      createFormsSection(),
-      createReactivitySection(),
-      createPluginsSection(),
-      createAnimationsSection(),
+      dom.div({ "data-volt-if": "currentPage === 'home'" }, createHomeSection()),
+      dom.div({ "data-volt-if": "currentPage === 'css'" }, createCssSection()),
+      dom.div({ "data-volt-if": "currentPage === 'interactivity'" }, createInteractivitySection()),
+      dom.div({ "data-volt-if": "currentPage === 'forms'" }, createFormsSection()),
+      dom.div({ "data-volt-if": "currentPage === 'reactivity'" }, createReactivitySection()),
+      dom.div({ "data-volt-if": "currentPage === 'plugins'" }, createPluginsSection()),
+      dom.div({ "data-volt-if": "currentPage === 'animations'" }, createAnimationsSection()),
     ),
     dom.footer(
       null,
       dom.p(
         null,
         "Built with ",
-        dom.a({ href: "https://github.com/stormlightlabs/volt" }, "Volt.js"),
+        dom.a({ href: "https://github.com/stormlightlabs/volt" }, "VoltX.js"),
         " - A lightweight, reactive hypermedia framework",
       ),
       dom.p(
         null,
-        "This demo showcases both Volt.js reactive features and Volt CSS classless styling. View source to see how everything works!",
+        "This demo showcases both VoltX.js reactive features and Volt CSS classless styling. View source to see how everything works!",
       ),
     ),
   );
···
   const demoStructure = buildDemoStructure();
   app.append(demoStructure);
 
-  mount(app, demoScope);
+  const chargeResult = charge();
+  const cleanupNav = initNavigationListener();
+
+  const rootScope = chargeResult.roots[0]?.scope;
+  if (!rootScope) {
+    console.error("Failed to get root scope from charge result");
+    return;
+  }
+
+  // Add helper functions to scope (not serializable, so added after charge)
+  rootScope.$helpers = helpers;
+
+  const handleNavigate = (event: Event) => {
+    const customEvent = event as CustomEvent;
+    const url = customEvent.detail?.url || globalThis.location.pathname;
+    const page = url === "/" || url === "" ? "home" : url.slice(1);
 
-  window.addEventListener("scroll", () => {
-    scrollPosition.set(window.scrollY);
-  });
+    const currentPageSignal = rootScope.currentPage as Signal<string>;
+    if (currentPageSignal && isSignal(currentPageSignal)) {
+      currentPageSignal.set(page);
+    }
+
+    window.scrollTo({ top: 0, behavior: "instant" });
+  };
+
+  const handlePopstate = () => {
+    const page = getCurrentPageFromPath();
+    const currentPageSignal = rootScope.currentPage as Signal<string>;
+    if (currentPageSignal && isSignal(currentPageSignal)) {
+      currentPageSignal.set(page);
+    }
+  };
+
+  const handleScroll = () => {
+    const scrollPositionSignal = rootScope.scrollPosition as Signal<number>;
+    if (scrollPositionSignal && isSignal(scrollPositionSignal)) {
+      scrollPositionSignal.set(window.scrollY);
+    }
+  };
+
+  globalThis.addEventListener("volt:navigate", handleNavigate);
+  globalThis.addEventListener("volt:popstate", handlePopstate);
+  window.addEventListener("scroll", handleScroll);
+
+  return () => {
+    chargeResult.cleanup();
+    cleanupNav();
+    globalThis.removeEventListener("volt:navigate", handleNavigate);
+    globalThis.removeEventListener("volt:popstate", handlePopstate);
+    window.removeEventListener("scroll", handleScroll);
+  };
 }

lib/src/demo/sections/animations.ts

···
       dom.details(
         null,
         dom.summary(null, "Fade"),
-        dom.button({ "data-volt-on-click": "showFade.set(!showFade.get())" }, "Toggle Fade"),
+        dom.button({ "data-volt-on-click": "showFade.set(!showFade)" }, "Toggle Fade"),
         dom.blockquote({ "data-volt-if": "showFade", "data-volt-surge": "fade" }, "Fades in and out smoothly"),
       ),
       dom.details(
         null,
         dom.summary(null, "Slide Down"),
-        dom.button({ "data-volt-on-click": "showSlideDown.set(!showSlideDown.get())" }, "Toggle Slide"),
+        dom.button({ "data-volt-on-click": "showSlideDown.set(!showSlideDown)" }, "Toggle Slide"),
         dom.blockquote({ "data-volt-if": "showSlideDown", "data-volt-surge": "slide-down" }, "Slides down from above"),
       ),
       dom.details(
         null,
         dom.summary(null, "Scale"),
-        dom.button({ "data-volt-on-click": "showScale.set(!showScale.get())" }, "Toggle Scale"),
+        dom.button({ "data-volt-on-click": "showScale.set(!showScale)" }, "Toggle Scale"),
         dom.blockquote({ "data-volt-if": "showScale", "data-volt-surge": "scale" }, "Scales up smoothly"),
       ),
       dom.details(
         null,
         dom.summary(null, "Blur"),
-        dom.button({ "data-volt-on-click": "showBlur.set(!showBlur.get())" }, "Toggle Blur"),
+        dom.button({ "data-volt-on-click": "showBlur.set(!showBlur)" }, "Toggle Blur"),
         dom.blockquote({ "data-volt-if": "showBlur", "data-volt-surge": "blur" }, "Blur effect transition"),
       ),
     ),
···
       dom.details(
         null,
         dom.summary(null, "Slow Fade (1000ms)"),
-        dom.button({ "data-volt-on-click": "showSlowFade.set(!showSlowFade.get())" }, "Toggle"),
+        dom.button({ "data-volt-on-click": "showSlowFade.set(!showSlowFade)" }, "Toggle"),
         dom.blockquote({ "data-volt-if": "showSlowFade", "data-volt-surge": "fade.1000" }, "Very slow fade"),
       ),
       dom.details(
         null,
         dom.summary(null, "Delayed Slide (500ms + 200ms delay)"),
-        dom.button({ "data-volt-on-click": "showDelayedSlide.set(!showDelayedSlide.get())" }, "Toggle"),
+        dom.button({ "data-volt-on-click": "showDelayedSlide.set(!showDelayedSlide)" }, "Toggle"),
         dom.blockquote(
           { "data-volt-if": "showDelayedSlide", "data-volt-surge": "slide-down.500.200" },
           "Slides with delay",
···
         "Specify different transitions for entering and leaving.",
         dom.small(null, "Use data-volt-surge:enter and data-volt-surge:leave for granular control"),
       ),
-      dom.button({ "data-volt-on-click": "showGranular.set(!showGranular.get())" }, "Toggle Mixed Transition"),
+      dom.button({ "data-volt-on-click": "showGranular.set(!showGranular)" }, "Toggle Mixed Transition"),
       dom.blockquote({
         "data-volt-if": "showGranular",
         "data-volt-surge:enter": "slide-down.400",
···
       dom.div(
         { style: "display: flex; gap: 0.5rem; flex-wrap: wrap;" },
         dom.button({
-          "data-volt-on-click": "triggerBounce.set(triggerBounce.get() + 1)",
+          "data-volt-on-click": "triggerBounce.set(triggerBounce + 1)",
           "data-volt-shift": "triggerBounce:bounce",
         }, "Bounce"),
         dom.button({
-          "data-volt-on-click": "triggerShake.set(triggerShake.get() + 1)",
+          "data-volt-on-click": "triggerShake.set(triggerShake + 1)",
           "data-volt-shift": "triggerShake:shake",
         }, "Shake"),
         dom.button({ "data-volt-shift": "pulse" }, "Pulse (Continuous)"),
         dom.button({
-          "data-volt-on-click": "triggerFlash.set(triggerFlash.get() + 1)",
+          "data-volt-on-click": "triggerFlash.set(triggerFlash + 1)",
           "data-volt-shift": "triggerFlash:flash",
         }, "Flash"),
       ),
···
       dom.div(
         { style: "display: flex; gap: 0.5rem; flex-wrap: wrap;" },
         dom.button({
-          "data-volt-on-click": "triggerTripleBounce.set(triggerTripleBounce.get() + 1)",
+          "data-volt-on-click": "triggerTripleBounce.set(triggerTripleBounce + 1)",
           "data-volt-shift": "triggerTripleBounce:bounce.800.3",
         }, "Triple Bounce (800ms each)"),
         dom.button({
-          "data-volt-on-click": "triggerLongShake.set(triggerLongShake.get() + 1)",
+          "data-volt-on-click": "triggerLongShake.set(triggerLongShake + 1)",
           "data-volt-shift": "triggerLongShake:shake.1000.2",
         }, "Long Shake (1000ms, 2x)"),
       ),
···
         "Surge and shift can be combined for complex animation choreography.",
         dom.small(null, "Toggle to see content that fades in, then bounces on mount"),
       ),
-      dom.button({ "data-volt-on-click": "showCombined.set(!showCombined.get())" }, "Toggle Combined Animation"),
+      dom.button({ "data-volt-on-click": "showCombined.set(!showCombined)" }, "Toggle Combined Animation"),
       dom.aside(
         { "data-volt-if": "showCombined", "data-volt-surge": "fade.400", "data-volt-shift": "bounce" },
         dom.p(

lib/src/demo/sections/css.ts

···
+/**
+ * CSS & Typography Section
+ * Showcases VoltX CSS styling capabilities, typography, and component features
+ */
+
+import * as dom from "../utils";
+
+export function createCssSection(): HTMLElement {
+  return dom.article(
+    { id: "css" },
+    dom.h2(null, "VoltX.css"),
+    dom.section(
+      null,
+      dom.h3(null, "Headings & Hierarchy"),
+      dom.p(
+        null,
+        "Volt CSS provides a harmonious type scale based on a 1.25 ratio (major third).",
+        dom.small(
+          null,
+          "The modular scale creates visual hierarchy without requiring any CSS classes. Font sizes range from 0.889rem to 2.566rem.",
+        ),
+        " All headings automatically receive appropriate sizing, spacing, and weight.",
+      ),
+      dom.h4(null, "Level 4 Heading"),
+      dom.p(null, "Demonstrates the fourth level of hierarchy."),
+      dom.h5(null, "Level 5 Heading"),
+      dom.p(null, "Even smaller, but still distinct and readable."),
+      dom.h6(null, "Level 6 Heading"),
+      dom.p(null, "The smallest heading level in the hierarchy."),
+    ),
+    dom.section(
+      null,
+      dom.h3(null, "Tufte-Style Sidenotes"),
+      dom.p(
+        null,
+        "One of the signature features of Volt CSS is Tufte-style sidenotes.",
+        dom.small(
+          null,
+          "Edward Tufte is renowned for his work on information design and data visualization. His books feature extensive use of margin notes that provide context without interrupting the main narrative flow.",
+        ),
+        " These appear in the margin on desktop and inline on mobile devices.",
+      ),
+      dom.p(
+        null,
+        "Sidenotes are created using the semantic ",
+        dom.code(null, "<small>"),
+        " element.",
+        dom.small(
+          null,
+          "The <small> element represents side comments and fine print, making it semantically appropriate for sidenotes. No custom attributes needed!",
+        ),
+        " This keeps markup clean and portable while maintaining semantic meaning.",
+      ),
+      dom.p(
+        null,
+        "The responsive behavior ensures readability across all devices.",
+        dom.small(
+          null,
+          "On narrow screens, sidenotes appear inline with subtle styling. On wider screens (≥1200px), they float into the right margin.",
+        ),
+        " Try resizing your browser to see the effect.",
+      ),
+    ),
+    dom.section(
+      null,
+      dom.h3(null, "Lists"),
+      dom.p(null, "Both ordered and unordered lists are styled with appropriate spacing:"),
+      dom.h4(null, "Unordered List"),
+      dom.ul(
+        null,
+        ...dom.repeat(dom.li, [
+          "Reactive signals for state management",
+          "Computed values derived from signals",
+          "Effect system for side effects",
+          "Declarative data binding via attributes",
+        ]),
+      ),
+      dom.h4(null, "Ordered List"),
+      dom.ol(
+        null,
+        ...dom.repeat(dom.li, [
+          "Define your signals and computed values",
+          "Write semantic HTML markup",
+          "Add data-volt-* attributes for reactivity",
+          "Mount the scope and watch the magic happen",
+        ]),
+      ),
+      dom.h4(null, "Description List"),
+      dom.dl(
+        null,
+        ...dom.kv([["Signal", "A reactive primitive that holds a value and notifies subscribers of changes."], [
+          "Computed",
+          "A derived value that automatically updates when its dependencies change.",
+        ], ["Effect", "A side effect that runs when its reactive dependencies change."]]),
+      ),
+    ),
+    dom.section(
+      null,
+      dom.h3(null, "Blockquotes & Citations"),
+      dom.blockquote(
+        null,
+        dom.p(
+          null,
+          "Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.",
+        ),
+        dom.cite(null, "Antoine de Saint-Exupéry"),
+      ),
+      dom.blockquote(
+        null,
+        dom.p(
+          null,
+          "The best programs are written so that computing machines can perform them quickly and so that human beings can understand them clearly.",
+        ),
+        dom.cite(null, "Donald Knuth"),
+      ),
+    ),
+    dom.section(
+      null,
+      dom.h3(null, "Code & Preformatted Text"),
+      dom.p(null, "Inline code uses ", dom.code(null, "monospace font"), " for clarity."),
+      dom.p(null, "Code blocks preserve formatting and provide syntax-appropriate styling:"),
+      dom.pre(
+        null,
+        dom.code(
+          null,
+          `import { signal, computed, mount } from 'volt';
+
+const count = signal(0);
+const doubled = computed(() => count.get() * 2);
+
+mount(document.querySelector('#app'), {
+  count,
+  doubled,
+  increment: () => count.set(count.get() + 1)
+});`,
+        ),
+      ),
+    ),
+    dom.section(
+      null,
+      dom.h3(null, "Tables"),
+      dom.p(
+        null,
+        "Tables receive zebra striping and responsive styling automatically.",
+        dom.small(
+          null,
+          "Tables use alternating row colors for improved scannability. On mobile, they remain scrollable horizontally if needed.",
+        ),
+      ),
+      dom.table(
+        null,
+        dom.thead(null, dom.tr(null, ...dom.repeat(dom.th, ["Feature", "Volt.js", "Framework X", "Framework Y"]))),
+        dom.tbody(
+          null,
+          dom.tr(null, ...dom.repeat(dom.td, ["Bundle Size", "< 15KB gzipped", "~40KB", "~30KB"])),
+          dom.tr(null, dom.td(null, "Virtual DOM"), dom.td(null, "No"), dom.td(null, "Yes"), dom.td(null, "Yes")),
+          dom.tr(null, ...dom.repeat(dom.td, ["Reactive System", "Signals", "Proxy-based", "Observable"])),
+          dom.tr(null, ...dom.repeat(dom.td, ["Learning Curve", "Gentle", "Moderate", "Steep"])),
+        ),
+      ),
+    ),
+    dom.section(
+      null,
+      dom.h3(null, "Tooltips"),
+      dom.p(null, "VoltX CSS includes pure-CSS tooltips with zero JavaScript. Try hovering over these examples:"),
+      dom.p(
+        null,
+        dom.abbr({ "data-vx-tooltip": "Tooltips appear on top by default", "data-placement": "top" }, "Top"),
+        " · ",
+        dom.abbr({ "data-vx-tooltip": "Tooltips can appear on the right", "data-placement": "right" }, "Right"),
+        " · ",
+        dom.abbr({ "data-vx-tooltip": "Tooltips can appear on the bottom", "data-placement": "bottom" }, "Bottom"),
+        " · ",
+        dom.abbr({ "data-vx-tooltip": "Tooltips can appear on the left", "data-placement": "left" }, "Left"),
+      ),
+      dom.p(
+        null,
+        dom.small(
+          null,
+          "Tooltips use the data-vx-tooltip attribute and are styled with pure CSS. They automatically hide on mobile devices for better touch interaction.",
+        ),
+      ),
+      dom.h4(null, "Implementation"),
+      dom.p(
+        null,
+        "Add the ",
+        dom.code(null, "data-vx-tooltip"),
+        " attribute with your tooltip text, and optionally specify ",
+        dom.code(null, "data-placement"),
+        " (top, right, bottom, left) for positioning.",
+      ),
+      dom.pre(
+        null,
+        dom.code(
+          null,
+          `<abbr data-vx-tooltip="Helpful tooltip text"
+      data-placement="top">
+  Hover me
+</abbr>`,
+        ),
+      ),
+    ),
+    dom.section(
+      null,
+      dom.h3(null, "Accordions"),
+      dom.p(
+        null,
+        "Native HTML ",
+        dom.code(null, "<details>"),
+        " and ",
+        dom.code(null, "<summary>"),
+        " elements provide semantic accordion functionality.",
+        dom.small(
+          null,
+          "The details element is fully accessible by default, with keyboard navigation built in. VoltX CSS styles it beautifully without requiring any JavaScript.",
+        ),
+      ),
+      dom.details(
+        null,
+        dom.summary(null, "What is VoltX.js?"),
+        dom.p(
+          null,
+          "VoltX.js is a lightweight reactive framework for building declarative user interfaces. It uses signals for reactivity and provides HTML-driven behavior through data-volt-* attributes.",
+        ),
+      ),
+      dom.details(
+        null,
+        dom.summary(null, "How does reactivity work?"),
+        dom.p(
+          null,
+          "VoltX uses a signal-based reactive system. When a signal changes, all computed values and effects that depend on it automatically update. The DOM bindings subscribe to these signals and update the UI accordingly.",
+        ),
+      ),
+      dom.details(
+        null,
+        dom.summary(null, "What about styling?"),
+        dom.p(
+          null,
+          "VoltX CSS is a classless CSS framework inspired by Pico CSS and Tufte CSS. It provides beautiful, semantic styling without requiring any CSS classes. Just write semantic HTML and it looks great!",
+        ),
+      ),
+    ),
+    dom.section(
+      null,
+      dom.h3(null, "Dialogs"),
+      dom.p(
+        null,
+        "Native ",
+        dom.code(null, "<dialog>"),
+        " elements provide semantic modal functionality with built-in accessibility.",
+        dom.small(
+          null,
+          "The dialog element includes keyboard handling (ESC to close), focus trapping, and backdrop support. Modern browsers support it natively.",
+        ),
+        " VoltX CSS styles dialogs elegantly with proper backdrop blur and animations.",
+      ),
+      dom.p(
+        null,
+        "Dialogs require JavaScript to open and close (using ",
+        dom.code(null, "showModal()"),
+        " and ",
+        dom.code(null, "close()"),
+        " methods). ",
+        "See the ",
+        dom.a({ href: "/interactivity" }, "Interactivity section"),
+        " for a working dialog demo.",
+      ),
+      dom.h4(null, "Structure"),
+      dom.p(null, "Dialogs should follow this semantic structure for proper styling:"),
+      dom.pre(
+        null,
+        dom.code(
+          null,
+          `<dialog id="my-dialog">
+  <article>
+    <header>
+      <h3>Dialog Title</h3>
+      <button aria-label="Close">×</button>
+    </header>
+    <!-- Dialog content -->
+    <footer>
+      <button>Cancel</button>
+      <button>Confirm</button>
+    </footer>
+  </article>
+</dialog>`,
+        ),
+      ),
+    ),
+    dom.section(
+      null,
+      dom.h3(null, "Additional Features"),
+      dom.p(null, "VoltX CSS includes comprehensive styling for all semantic HTML elements:"),
+      dom.ul(
+        null,
+        ...dom.repeat(dom.li, [
+          "Typography with modular scale and Tufte-style sidenotes",
+          "Form elements with consistent, accessible styling",
+          "Tables with zebra striping and responsive behavior",
+          "Code blocks with syntax-appropriate styling",
+          "Blockquotes and citations",
+          "Responsive images and media",
+          "And much more, all without CSS classes!",
+        ]),
+      ),
+      dom.p(null, "Explore the other sections of this demo to see these features in action."),
+    ),
+  );
+}

lib/src/demo/sections/forms.ts

···
         ),
       ),
       dom.form(
-        { "data-volt-on-submit": "handleFormSubmit" },
+        { "data-volt-on-submit": "$helpers.handleFormSubmit($event)" },
         dom.fieldset(
           null,
           dom.legend(null, "User Information"),
···
       dom.details(
         null,
         dom.summary(null, "Current Form Data (Live)"),
-        dom.pre(null, dom.code({ "data-volt-text": "JSON.stringify(formData.get(), null, 2)" }, "Loading...")),
+        dom.pre(null, dom.code({ "data-volt-text": "JSON.stringify(formData, null, 2)" }, "Loading...")),
       ),
     ),
   );

lib/src/demo/sections/home.ts

···
+/**
+ * Home Section
+ * Landing page with framework overview and feature highlights
+ */
+
+import * as dom from "../utils";
+
+export function createHomeSection(): HTMLElement {
+  return dom.article(
+    { id: "home" },
+    dom.section(
+      null,
+      dom.h2(null, "VoltX.js: Declarative Reactivity for the Modern Web"),
+      dom.p(
+        null,
+        "VoltX.js is a lightweight reactive framework that brings signal-based reactivity to HTML.",
+        dom.small(
+          null,
+          "Build rich, interactive applications using declarative markup without writing JavaScript. No virtual DOM, no build step, no dependencies—just pure reactive primitives and HTML attributes.",
+        ),
+      ),
+    ),
+    dom.section(
+      null,
+      dom.h3(null, "Why VoltX.js?"),
+      dom.dl(
+        null,
+        ...dom.kv([
+          ["< 15KB Gzipped", "Smaller than most icon libraries. Ships only what you need with zero dependencies."],
+          [
+            "Declarative-First",
+            "Build entire applications using only HTML attributes. JavaScript is optional for complex logic.",
+          ],
+          [
+            "Signal-Based Reactivity",
+            "Fine-grained reactivity that updates only what changed. No virtual DOM diffing.",
+          ],
+          ["Zero Build Step", "Import from npm or CDN and start building. No webpack, no rollup, no configuration."],
+          ["Progressive Enhancement", "Works with server-rendered HTML. Add reactivity incrementally where needed."],
+          ["Standards-Based", "Built on standard DOM APIs. No proprietary JSX or template syntax."],
+        ]),
+      ),
+    ),
+    dom.section(
+      null,
+      dom.h3(null, "Quick Start"),
+      dom.p(null, "Get started with VoltX.js in seconds:"),
+      dom.pre(
+        null,
+        dom.code(
+          null,
+          `<!-- Include VoltX.js from CDN -->
+<script type="module">
+  import { charge } from 'https://esm.sh/voltx.js';
+  charge();
+</script>
+
+<!-- Declare reactive state in HTML -->
+<div data-volt data-volt-state='{"count": 0}'
+     data-volt-computed:doubled="count * 2">
+  <p>Count: <span data-volt-text="count"></span></p>
+  <p>Doubled: <span data-volt-text="doubled"></span></p>
+  <button data-volt-on-click="count.set(count + 1)">
+    Increment
+  </button>
+</div>`,
+        ),
+      ),
+      dom.p(
+        null,
+        "That's it! No build step, no configuration, no JavaScript beyond the import. ",
+        dom.strong(null, "The state, reactivity, and interactions are all declared in HTML."),
+      ),
+    ),
+    dom.section(
+      null,
+      dom.h3(null, "Explore the Features"),
+      dom.p(null, "Navigate through the demo to see VoltX.js in action:"),
+      dom.ul(
+        null,
+        dom.li(
+          null,
+          dom.strong(null, "Typography & CSS"),
+          " - Explore Volt CSS, our classless CSS framework with Tufte-style sidenotes",
+        ),
+        dom.li(
+          null,
+          dom.strong(null, "Interactivity"),
+          " - See dialogs, buttons, and event handling with declarative bindings",
+        ),
+        dom.li(null, dom.strong(null, "Forms"), " - Two-way data binding with all standard form elements"),
+        dom.li(null, dom.strong(null, "Reactivity"), " - Conditional rendering, list rendering, and computed values"),
+        dom.li(null, dom.strong(null, "Plugins"), " - Persistence, scroll management, URL synchronization, and more"),
+        dom.li(
+          null,
+          dom.strong(null, "Animations"),
+          " - Built-in transitions and keyframe animations with zero configuration",
+        ),
+      ),
+      dom.p(null, "Use the navigation above to explore each section."),
+    ),
+    dom.section(
+      null,
+      dom.h3(null, "Learn More"),
+      dom.p(
+        null,
+        dom.a({ href: "https://github.com/stormlightlabs/volt" }, "GitHub Repository"),
+        " | ",
+        dom.a({ href: "https://stormlightlabs.github.io/volt" }, "Documentation"),
+        " | ",
+        dom.a({ href: "https://www.npmjs.com/package/voltx.js" }, "npm Package"),
+        " | ",
+        dom.a({ href: "https://jsr.io/@voltx/core" }, "JSR Package"),
+      ),
+    ),
+  );
+}

lib/src/demo/sections/interactivity.ts

···
         ),
         " VoltX CSS styles it elegantly, and VoltX.js handles the interaction.",
       ),
-      dom.button({ "data-volt-on-click": "openDialog" }, "Open Dialog"),
-      dom.p({ "data-volt-if": "dialogMessage.get()", "data-volt-text": "dialogMessage" }),
+      dom.button({
+        "data-volt-on-click": "$helpers.openDialog('demo-dialog'); dialogMessage.set(''); dialogInput.set('')",
+      }, "Open Dialog"),
+      dom.p({ "data-volt-if": "dialogMessage", "data-volt-text": "dialogMessage" }),
       dom.dialog(
         { id: "demo-dialog" },
         dom.article(
···
           dom.header(
             null,
             dom.h3(null, "Dialog Demo"),
-            dom.button({ "data-volt-on-click": "closeDialog", "aria-label": "Close" }, "×"),
+            dom.button({ "data-volt-on-click": "$helpers.closeDialog('demo-dialog')", "aria-label": "Close" }, "×"),
           ),
           dom.form(
-            { "data-volt-on-submit": "submitDialog" },
+            {
+              id: "demo-dialog-form",
+              "data-volt-on-submit":
+                "$event.preventDefault(); dialogMessage.set('You entered: ' + dialogInput); setTimeout(() => $helpers.closeDialog('demo-dialog'), 2000)",
+            },
             ...dom.labelFor("Enter something:", {
               type: "text",
               id: "dialog-input",
···
               placeholder: "Type here...",
               required: true,
             }),
-            // FIXME: this needs to be the modal footer
-            dom.footer(
-              null,
-              dom.button({ type: "button", "data-volt-on-click": "closeDialog" }, "Cancel"),
-              dom.button({ type: "submit" }, "Submit"),
-            ),
+          ),
+          dom.footer(
+            null,
+            dom.button({ type: "button", "data-volt-on-click": "$helpers.closeDialog('demo-dialog')" }, "Cancel"),
+            dom.button({ type: "submit", form: "demo-dialog-form" }, "Submit"),
           ),
         ),
       ),
···
       ),
       dom.div(
         { style: "display: flex; gap: 0.5rem; flex-wrap: wrap;" },
-        ...dom.buttons([["Increment", "increment"], ["Decrement", "decrement"], ["Reset", "reset"], [
-          "Update Header",
-          "updateMessage",
-        ]]),
+        ...dom.buttons([["Increment", "count.set(count + 1)"], ["Decrement", "count.set(count - 1)"], [
+          "Reset",
+          "count.set(0)",
+        ], ["Update Header", "message.set('Count is now ' + count)"]]),
       ),
     ),
   );

lib/src/demo/sections/plugins.ts

···
       dom.p(null, "Persisted Count: ", dom.strong({ "data-volt-text": "persistedCount" }, "0")),
       dom.div(
         { "data-volt-persist:persistedCount": "localStorage" },
-        dom.button({ "data-volt-on-click": "persistedCount.set(persistedCount.get() + 1)" }, "Increment Persisted"),
+        dom.button({ "data-volt-on-click": "persistedCount.set(persistedCount + 1)" }, "Increment Persisted"),
         " ",
         dom.button({ "data-volt-on-click": "persistedCount.set(0)" }, "Reset Persisted"),
       ),
···
       dom.p(
         null,
         "Current Scroll Position: ",
-        dom.strong({ "data-volt-text": "Math.round(scrollPosition.get())" }, "0"),
+        dom.strong({ "data-volt-text": "Math.round(scrollPosition)" }, "0"),
         "px",
       ),
       dom.div(
         { style: "display: flex; gap: 0.5rem; flex-wrap: wrap;" },
-        dom.button({ "data-volt-on-click": "scrollToTop" }, "Scroll to Top"),
-        dom.button({ "data-volt-on-click": "scrollToSection('typography')" }, "Go to Typography"),
-        dom.button({ "data-volt-on-click": "scrollToSection('forms')" }, "Go to Forms"),
-        dom.button({ "data-volt-on-click": "scrollToSection('plugins')" }, "Go to Plugins"),
+        dom.button({ "data-volt-on-click": "$helpers.scrollToTop()" }, "Scroll to Top"),
+        dom.button({ "data-volt-on-click": "$helpers.scrollToSection('typography')" }, "Go to Typography"),
+        dom.button({ "data-volt-on-click": "$helpers.scrollToSection('forms')" }, "Go to Forms"),
+        dom.button({ "data-volt-on-click": "$helpers.scrollToSection('plugins')" }, "Go to Plugins"),
       ),
     ),
     dom.section(
···
         ),
       ),
       dom.div(
-        // FIXME: this needs to be constrained in the stylesheet to allow for the sidenotes
         { "data-volt-url:urlParam": "query", "style": "max-width: var(--content-width);" },
         ...dom.labelFor("URL Parameter (synced with ?urlParam=...)", {
           type: "text",
···
           "data-volt-model": "urlParam",
           placeholder: "Type to update URL...",
         }),
-        dom.p(null, "Current value: ", dom.strong({ "data-volt-text": "urlParam.get() || '(empty)'" }, "Loading...")),
+        dom.p(null, "Current value: ", dom.strong({ "data-volt-text": "urlParam || '(empty)'" }, "Loading...")),
       ),
     ),
   );

lib/src/demo/sections/reactivity.ts

···
         " for conditional display:",
       ),
       dom.button(
-        { "data-volt-on-click": "toggleAdvanced" },
-        dom.span({ "data-volt-text": "showAdvanced.get() ? 'Hide' : 'Show'" }, "Show"),
+        { "data-volt-on-click": "showAdvanced.set(!showAdvanced)" },
+        dom.span({ "data-volt-text": "showAdvanced ? 'Hide' : 'Show'" }, "Show"),
         " Advanced Options",
       ),
       dom.div(
-        { "data-volt-if": "showAdvanced.get()" },
+        { "data-volt-if": "showAdvanced" },
         dom.h4(null, "Advanced Configuration"),
         dom.p(null, "These options are only visible when advanced mode is enabled."),
         dom.labelWith("Enable debug mode", { type: "checkbox" }),
···
           type: "text",
           "data-volt-model": "newTodoText",
           placeholder: "New todo...",
-          "data-volt-on-keydown": "$event.key === 'Enter' ? addTodo() : null",
+          "data-volt-on-keydown": "$event.key === 'Enter' && newTodoText.trim() ? (todos.set([...todos, {id: todoIdCounter, text: newTodoText.trim(), done: false}]), todoIdCounter.set(todoIdCounter + 1), newTodoText.set('')) : null",
         }),
-        dom.button({ "data-volt-on-click": "addTodo" }, "Add Todo"),
+        dom.button({
+          "data-volt-on-click": "newTodoText.trim() ? (todos.set([...todos, {id: todoIdCounter, text: newTodoText.trim(), done: false}]), todoIdCounter.set(todoIdCounter + 1), newTodoText.set('')) : null",
+        }, "Add Todo"),
       ),
-      dom.h4(null, "Active Todos (", dom.span({ "data-volt-text": "activeTodos.get().length" }, "0"), ")"),
+      dom.h4(null, "Active Todos (", dom.span({ "data-volt-text": "activeTodos.length" }, "0"), ")"),
       dom.ul(
         null,
         dom.li(
-          { "data-volt-for": "todo in todos.get().filter(t => !t.done)" },
-          dom.input({ type: "checkbox", "data-volt-on-change": "toggleTodo(todo.id)" }),
+          { "data-volt-for": "todo in activeTodos" },
+          dom.input({
+            type: "checkbox",
+            "data-volt-on-change": "todos.set(todos.map(t => t.id === todo.id ? {...t, done: !t.done} : t))",
+          }),
           " ",
           dom.span({ "data-volt-text": "todo.text" }, "Todo item"),
           " ",
-          dom.button({ "data-volt-on-click": "removeTodo(todo.id)" }, "Remove"),
+          dom.button({ "data-volt-on-click": "todos.set(todos.filter(t => t.id !== todo.id))" }, "Remove"),
         ),
       ),
-      dom.h4(null, "Completed Todos (", dom.span({ "data-volt-text": "completedTodos.get().length" }, "0"), ")"),
+      dom.h4(null, "Completed Todos (", dom.span({ "data-volt-text": "completedTodos.length" }, "0"), ")"),
       dom.ul(
         null,
         dom.li(
-          { "data-volt-for": "todo in todos.get().filter(t => t.done)" },
-          dom.input({ type: "checkbox", checked: true, "data-volt-on-change": "toggleTodo(todo.id)" }),
+          { "data-volt-for": "todo in completedTodos" },
+          dom.input({
+            type: "checkbox",
+            checked: true,
+            "data-volt-on-change": "todos.set(todos.map(t => t.id === todo.id ? {...t, done: !t.done} : t))",
+          }),
           " ",
           dom.del({ "data-volt-text": "todo.text" }, "Todo item"),
           " ",
-          dom.button({ "data-volt-on-click": "removeTodo(todo.id)" }, "Remove"),
+          dom.button({ "data-volt-on-click": "todos.set(todos.filter(t => t.id !== todo.id))" }, "Remove"),
         ),
       ),
     ),
···
       dom.h3(null, "Class Bindings"),
       dom.p(null, "Toggle CSS classes reactively using ", dom.code(null, "data-volt-class"), ":"),
       dom.p(
-        { "data-volt-class": "{ active: isActive.get(), highlight: isHighlighted.get() }" },
+        { "data-volt-class": "{ active: isActive, highlight: isHighlighted }" },
         "This paragraph has dynamic classes. Try the buttons below!",
       ),
       dom.button(
-        { "data-volt-on-click": "toggleActive" },
+        { "data-volt-on-click": "isActive.set(!isActive)" },
         "Toggle Active (currently: ",
-        dom.span({ "data-volt-text": "isActive.get() ? 'ON' : 'OFF'" }, "OFF"),
+        dom.span({ "data-volt-text": "isActive ? 'ON' : 'OFF'" }, "OFF"),
         ")",
       ),
       " ",
       dom.button(
-        { "data-volt-on-click": "toggleHighlight" },
+        { "data-volt-on-click": "isHighlighted.set(!isHighlighted)" },
         "Toggle Highlight (currently: ",
-        dom.span({ "data-volt-text": "isHighlighted.get() ? 'ON' : 'OFF'" }, "OFF"),
+        dom.span({ "data-volt-text": "isHighlighted ? 'ON' : 'OFF'" }, "OFF"),
         ")",
       ),
       style,

lib/src/demo/sections/typography.ts

···
-/**
- * Typography & Layout Section
- * Demonstrates Volt CSS typography features including Tufte-style sidenotes
- */
-
-import * as dom from "../utils";
-
-export function createTypographySection(): HTMLElement {
-  return dom.article(
-    { id: "typography" },
-    dom.h2(null, "Typography & Layout"),
-    dom.section(
-      null,
-      dom.h3(null, "Headings & Hierarchy"),
-      dom.p(
-        null,
-        "Volt CSS provides a harmonious type scale based on a 1.25 ratio (major third).",
-        dom.small(
-          null,
-          "The modular scale creates visual hierarchy without requiring any CSS classes. Font sizes range from 0.889rem to 2.566rem.",
-        ),
-        " All headings automatically receive appropriate sizing, spacing, and weight.",
-      ),
-      dom.h4(null, "Level 4 Heading"),
-      dom.p(null, "Demonstrates the fourth level of hierarchy."),
-      dom.h5(null, "Level 5 Heading"),
-      dom.p(null, "Even smaller, but still distinct and readable."),
-      dom.h6(null, "Level 6 Heading"),
-      dom.p(null, "The smallest heading level in the hierarchy."),
-    ),
-    dom.section(
-      null,
-      dom.h3(null, "Tufte-Style Sidenotes"),
-      dom.p(
-        null,
-        "One of the signature features of Volt CSS is Tufte-style sidenotes.",
-        dom.small(
-          null,
-          "Edward Tufte is renowned for his work on information design and data visualization. His books feature extensive use of margin notes that provide context without interrupting the main narrative flow.",
-        ),
-        " These appear in the margin on desktop and inline on mobile devices.",
-      ),
-      dom.p(
-        null,
-        "Sidenotes are created using the semantic ",
-        dom.code(null, "<small>"),
-        " element.",
-        dom.small(
-          null,
-          "The <small> element represents side comments and fine print, making it semantically appropriate for sidenotes. No custom attributes needed!",
-        ),
-        " This keeps markup clean and portable while maintaining semantic meaning.",
-      ),
-      dom.p(
-        null,
-        "The responsive behavior ensures readability across all devices.",
-        dom.small(
-          null,
-          "On narrow screens, sidenotes appear inline with subtle styling. On wider screens (≥1200px), they float into the right margin.",
-        ),
-        " Try resizing your browser to see the effect.",
-      ),
-    ),
-    dom.section(
-      null,
-      dom.h3(null, "Lists"),
-      dom.p(null, "Both ordered and unordered lists are styled with appropriate spacing:"),
-      dom.h4(null, "Unordered List"),
-      dom.ul(
-        null,
-        ...dom.repeat(dom.li, [
-          "Reactive signals for state management",
-          "Computed values derived from signals",
-          "Effect system for side effects",
-          "Declarative data binding via attributes",
-        ]),
-      ),
-      dom.h4(null, "Ordered List"),
-      dom.ol(
-        null,
-        ...dom.repeat(dom.li, [
-          "Define your signals and computed values",
-          "Write semantic HTML markup",
-          "Add data-volt-* attributes for reactivity",
-          "Mount the scope and watch the magic happen",
-        ]),
-      ),
-      dom.h4(null, "Description List"),
-      dom.dl(
-        null,
-        ...dom.kv([["Signal", "A reactive primitive that holds a value and notifies subscribers of changes."], [
-          "Computed",
-          "A derived value that automatically updates when its dependencies change.",
-        ], ["Effect", "A side effect that runs when its reactive dependencies change."]]),
-      ),
-    ),
-    dom.section(
-      null,
-      dom.h3(null, "Blockquotes & Citations"),
-      dom.blockquote(
-        null,
-        dom.p(
-          null,
-          "Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.",
-        ),
-        dom.cite(null, "Antoine de Saint-Exupéry"),
-      ),
-      dom.blockquote(
-        null,
-        dom.p(
-          null,
-          "The best programs are written so that computing machines can perform them quickly and so that human beings can understand them clearly.",
-        ),
-        dom.cite(null, "Donald Knuth"),
-      ),
-    ),
-    dom.section(
-      null,
-      dom.h3(null, "Code & Preformatted Text"),
-      dom.p(null, "Inline code uses ", dom.code(null, "monospace font"), " for clarity."),
-      dom.p(null, "Code blocks preserve formatting and provide syntax-appropriate styling:"),
-      dom.pre(
-        null,
-        dom.code(
-          null,
-          `import { signal, computed, mount } from 'volt';
-
-const count = signal(0);
-const doubled = computed(() => count.get() * 2);
-
-mount(document.querySelector('#app'), {
-  count,
-  doubled,
-  increment: () => count.set(count.get() + 1)
-});`,
-        ),
-      ),
-    ),
-    dom.section(
-      null,
-      dom.h3(null, "Tables"),
-      dom.p(
-        null,
-        "Tables receive zebra striping and responsive styling automatically.",
-        dom.small(
-          null,
-          "Tables use alternating row colors for improved scannability. On mobile, they remain scrollable horizontally if needed.",
-        ),
-      ),
-      dom.table(
-        null,
-        dom.thead(null, dom.tr(null, ...dom.repeat(dom.th, ["Feature", "Volt.js", "Framework X", "Framework Y"]))),
-        dom.tbody(
-          null,
-          dom.tr(null, ...dom.repeat(dom.td, ["Bundle Size", "< 15KB gzipped", "~40KB", "~30KB"])),
-          dom.tr(null, dom.td(null, "Virtual DOM"), dom.td(null, "No"), dom.td(null, "Yes"), dom.td(null, "Yes")),
-          dom.tr(null, ...dom.repeat(dom.td, ["Reactive System", "Signals", "Proxy-based", "Observable"])),
-          dom.tr(null, ...dom.repeat(dom.td, ["Learning Curve", "Gentle", "Moderate", "Steep"])),
-        ),
-      ),
-    ),
-  );
-}

lib/src/demo/utils.ts

···
 export const strong: CreateFn<"strong"> = (attrs?, ...children) => el("strong", attrs, ...children);
 export const em: CreateFn<"em"> = (attrs?, ...children) => el("em", attrs, ...children);
 export const del: CreateFn<"del"> = (attrs?, ...children) => el("del", attrs, ...children);
+export const abbr: CreateFn<"abbr"> = (attrs?, ...children) => el("abbr", attrs, ...children);
 export const hr: CreateFn<"hr"> = (attrs?) => el("hr", attrs);

lib/src/index.ts

···
   supportsViewTransitions,
   withViewTransition,
 } from "$core/view-transitions";
-export { goBack, goForward, initNavigationListener, navigate, navigatePlugin, redirect } from "$plugins/navigate";
+export { goBack, goForward, initNavigationListener, navigate, redirect } from "$plugins/navigate";
 export { persistPlugin, registerStorageAdapter } from "$plugins/persist";
 export { scrollPlugin } from "$plugins/scroll";
 export {

lib/src/main.ts

···
 /**
- * Entry point for Volt.js development demo
+ * Entry point for VoltX.js development demo
  *
  * This file initializes the comprehensive demo showcasing:
- * - Volt.js reactive features (signals, computed, effects, bindings)
+ * - VoltX.js declarative reactivity (charge, data-volt-state, data-volt-computed)
  * - Volt CSS classless styling (typography, layout, Tufte sidenotes)
- * - Plugin system (persist, scroll, url)
+ * - Plugin system (persist, scroll, url, surge, shift)
+ *
+ * The demo is built programmatically but uses declarative VoltX attributes, demonstrating how to create apps with minimal JavaScript.
  */
 
 import { setupDemo } from "./demo";

lib/src/plugins/navigate.ts

···
  */
 
 import { registerDirective } from "$core/binder";
-import { hasModifier, parseModifiers } from "$core/modifiers";
+import { hasModifier } from "$core/modifiers";
 import { startViewTransition } from "$core/view-transitions";
 import type { Optional } from "$types/helpers";
-import type { BindingContext, Modifier, PluginContext } from "$types/volt";
+import type { BindingContext, Modifier } from "$types/volt";
 
 type NavigationState = { scrollPosition?: { x: number; y: number }; focusSelector?: string; timestamp: number };
 
···
     handleFormNavigation(ctx, value, modifiers);
   } else {
     console.warn("data-volt-navigate only works on <a> and <form> elements");
-  }
-}
-
-/**
- * Plugin-compatible wrapper for navigate directive
- * @deprecated Use bindNavigate directly or register as a directive
- */
-export function navigatePlugin(ctx: PluginContext, value: string): void {
-  const { baseName, modifiers } = parseModifiers(value || "");
-  const bindingCtx: BindingContext = { element: ctx.element, scope: ctx.scope, cleanups: [] };
-
-  bindNavigate(bindingCtx, baseName, modifiers);
-
-  for (const cleanup of bindingCtx.cleanups) {
-    ctx.addCleanup(cleanup);
   }
 }
 

lib/src/styles/components.css

···
   margin-bottom: var(--space-md);
   border-bottom: 1px solid var(--color-border);
 }
+
+/**
+ * Tooltips
+ *
+ * Declarative tooltips using data-vx-tooltip attribute.
+ * Placements: top (default), right, bottom, left
+ * Structure: <element data-vx-tooltip="Tooltip text" data-placement="top">
+ */
+[data-vx-tooltip] {
+  position: relative;
+  cursor: help;
+}
+
+[data-vx-tooltip]::before,
+[data-vx-tooltip]::after {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-fast), transform var(--transition-fast);
+  z-index: 1000;
+}
+
+[data-vx-tooltip]::before {
+  content: attr(data-vx-tooltip);
+  background: var(--color-text);
+  color: var(--color-bg);
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  white-space: normal;
+  min-width: 200px;
+  max-width: 300px;
+  width: max-content;
+  text-align: center;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  line-clamp: 4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.4;
+}
+
+[data-vx-tooltip]::after {
+  content: '';
+  border: 6px solid transparent;
+}
+
+[data-vx-tooltip]:hover::before,
+[data-vx-tooltip]:hover::after,
+[data-vx-tooltip]:focus::before,
+[data-vx-tooltip]:focus::after,
+[data-vx-tooltip]:focus-visible::before,
+[data-vx-tooltip]:focus-visible::after {
+  opacity: 1;
+}
+
+/* Placement: Top (default) */
+[data-vx-tooltip]:not([data-placement])::before,
+[data-vx-tooltip][data-placement="top"]::before {
+  bottom: calc(100% + 12px);
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+}
+
+[data-vx-tooltip]:not([data-placement])::after,
+[data-vx-tooltip][data-placement="top"]::after {
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--color-text);
+}
+
+[data-vx-tooltip]:not([data-placement]):hover::before,
+[data-vx-tooltip][data-placement="top"]:hover::before,
+[data-vx-tooltip]:not([data-placement]):focus::before,
+[data-vx-tooltip][data-placement="top"]:focus::before {
+  transform: translateX(-50%) translateY(0);
+}
+
+/* Placement: Bottom */
+[data-vx-tooltip][data-placement="bottom"]::before {
+  top: calc(100% + 12px);
+  left: 50%;
+  transform: translateX(-50%) translateY(-4px);
+}
+
+[data-vx-tooltip][data-placement="bottom"]::after {
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: var(--color-text);
+}
+
+[data-vx-tooltip][data-placement="bottom"]:hover::before,
+[data-vx-tooltip][data-placement="bottom"]:focus::before {
+  transform: translateX(-50%) translateY(0);
+}
+
+[data-vx-tooltip][data-placement="right"]::before {
+  left: calc(100% + 12px);
+  top: 50%;
+  transform: translateY(-50%) translateX(-4px);
+}
+
+[data-vx-tooltip][data-placement="right"]::after {
+  left: calc(100% + 6px);
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: var(--color-text);
+}
+
+[data-vx-tooltip][data-placement="right"]:hover::before,
+[data-vx-tooltip][data-placement="right"]:focus::before {
+  transform: translateY(-50%) translateX(0);
+}
+
+[data-vx-tooltip][data-placement="left"]::before {
+  right: calc(100% + 12px);
+  top: 50%;
+  transform: translateY(-50%) translateX(4px);
+}
+
+[data-vx-tooltip][data-placement="left"]::after {
+  right: calc(100% + 6px);
+  top: 50%;
+  transform: translateY(-50%);
+  border-left-color: var(--color-text);
+}
+
+[data-vx-tooltip][data-placement="left"]:hover::before,
+[data-vx-tooltip][data-placement="left"]:focus::before {
+  transform: translateY(-50%) translateX(0);
+}
+
+@media (max-width: 768px) {
+  [data-vx-tooltip]::before,
+  [data-vx-tooltip]::after {
+    display: none;
+  }
+}

lib/test/core/evaluator.test.ts

···
       evaluateStatements("count.set(20)", scope);
       expect((scope.count as Signal<number>).get()).toBe(20);
     });
+
+    it("should support strict equality comparisons with signals", () => {
+      scope.status = signal("active");
+      scope.page = signal("home");
+      expect(evaluate("status === 'active'", scope)).toBe(true);
+      expect(evaluate("status === 'inactive'", scope)).toBe(false);
+      expect(evaluate("page === 'home'", scope)).toBe(true);
+      expect(evaluate("page === 'about'", scope)).toBe(false);
+    });
+
+    it("should support loose equality comparisons with signals", () => {
+      scope.status = signal("active");
+      expect(evaluate("status == 'active'", scope)).toBe(true);
+      expect(evaluate("status == 'inactive'", scope)).toBe(false);
+    });
   });
 
   describe("Expression Caching", () => {

lib/test/core/model-binding.test.ts

···
     expect(container.querySelector("span")?.textContent).toBe("Updated");
   });
 });
+
+describe("nested property binding in data-volt-model", () => {
+  describe("single-level nesting", () => {
+    it("binds to nested property in signal with object value", () => {
+      const container = document.createElement("div");
+      container.innerHTML = `<input type="text" data-volt-model="user.name" />`;
+
+      const user = signal({ name: "Alice", age: 30 });
+      mount(container, { user });
+
+      const input = container.querySelector("input")!;
+      expect(input.value).toBe("Alice");
+    });
+
+    it("updates input when nested property in signal changes", () => {
+      const container = document.createElement("div");
+      container.innerHTML = `<input type="text" data-volt-model="person.email" />`;
+
+      const person = signal({ email: "[e-mail]", verified: false });
+      mount(container, { person });
+
+      const input = container.querySelector("input")!;
+      expect(input.value).toBe("[e-mail]");
+
+      person.set({ email: "[e-mail]", verified: true });
+      expect(input.value).toBe("[e-mail]");
+    });
+
+    it("updates nested property when input changes", () => {
+      const container = document.createElement("div");
+      container.innerHTML = `<input type="text" data-volt-model="profile.username" />`;
+
+      const profile = signal({ username: "alice123", bio: "Developer" });
+      mount(container, { profile });
+
+      const input = container.querySelector("input")!;
+      input.value = "alice456";
+      input.dispatchEvent(new Event("input"));
+
+      expect(profile.get().username).toBe("alice456");
+      expect(profile.get().bio).toBe("Developer");
+    });
+
+    it("maintains immutability when updating nested properties", () => {
+      const container = document.createElement("div");
+      container.innerHTML = `<input type="text" data-volt-model="data.value" />`;
+
+      const data = signal({ value: "original", other: "unchanged" });
+      const originalObject = data.get();
+      mount(container, { data });
+
+      const input = container.querySelector("input")!;
+      input.value = "modified";
+      input.dispatchEvent(new Event("input"));
+
+      const updatedObject = data.get();
+      expect(updatedObject).not.toBe(originalObject);
+      expect(updatedObject.value).toBe("modified");
+      expect(updatedObject.other).toBe("unchanged");
+      expect(originalObject.value).toBe("original");
+    });
+
+    it("handles bidirectional updates with nested properties", () => {
+      const container = document.createElement("div");
+      container.innerHTML = `
+        <input data-volt-model="form.email" />
+        <span data-volt-text="form.email"></span>
+      `;
+
+      const form = signal({ email: "[e-mail]", name: "Test" });
+      mount(container, { form });
+
+      const input = container.querySelector("input")!;
+      const span = container.querySelector("span")!;
+
+      expect(input.value).toBe("[e-mail]");
+      expect(span.textContent).toBe("[e-mail]");
+
+      input.value = "[e-mail]";
+      input.dispatchEvent(new Event("input"));
+
+      expect(form.get().email).toBe("[e-mail]");
+      expect(span.textContent).toBe("[e-mail]");
+    });
+  });
+
+  describe("multiple nested properties", () => {
+    it("binds multiple inputs to different nested properties", () => {
+      const container = document.createElement("div");
+      container.innerHTML = `
+        <input id="name" type="text" data-volt-model="formData.name" />
+        <input id="email" type="email" data-volt-model="formData.email" />
+      `;
+
+      const formData = signal({ name: "Alice", email: "[e-mail]" });
+      mount(container, { formData });
+
+      const nameInput = container.querySelector("#name")! as HTMLInputElement;
+      const emailInput = container.querySelector("#email")! as HTMLInputElement;
+
+      expect(nameInput.value).toBe("Alice");
+      expect(emailInput.value).toBe("[e-mail]");
+
+      nameInput.value = "Bob";
+      nameInput.dispatchEvent(new Event("input"));
+
+      expect(formData.get().name).toBe("Bob");
+      expect(formData.get().email).toBe("[e-mail]");
+
+      emailInput.value = "[e-mail]";
+      emailInput.dispatchEvent(new Event("input"));
+
+      expect(formData.get().name).toBe("Bob");
+      expect(formData.get().email).toBe("[e-mail]");
+    });
+  });
+
+  describe("different form element types", () => {
+    it("binds checkbox to nested boolean property", () => {
+      const container = document.createElement("div");
+      container.innerHTML = `<input type="checkbox" data-volt-model="settings.enabled" />`;
+
+      const settings = signal({ enabled: true, theme: "dark" });
+      mount(container, { settings });
+
+      const checkbox = container.querySelector("input")!;
+      expect(checkbox.checked).toBe(true);
+
+      checkbox.checked = false;
+      checkbox.dispatchEvent(new Event("change"));
+
+      expect(settings.get().enabled).toBe(false);
+      expect(settings.get().theme).toBe("dark");
+    });
+
+    it("binds select to nested property", () => {
+      const container = document.createElement("div");
+      container.innerHTML = `
+        <select data-volt-model="preferences.color">
+          <option value="red">Red</option>
+          <option value="blue">Blue</option>
+          <option value="green">Green</option>
+        </select>
+      `;
+
+      const preferences = signal({ color: "blue", size: "medium" });
+      mount(container, { preferences });
+
+      const select = container.querySelector("select")!;
+      expect(select.value).toBe("blue");
+
+      select.value = "green";
+      select.dispatchEvent(new Event("input"));
+
+      expect(preferences.get().color).toBe("green");
+      expect(preferences.get().size).toBe("medium");
+    });
+
+    it("binds textarea to nested property", () => {
+      const container = document.createElement("div");
+      container.innerHTML = `<textarea data-volt-model="post.content"></textarea>`;
+
+      const post = signal({ content: "Hello world", published: false });
+      mount(container, { post });
+
+      const textarea = container.querySelector("textarea")!;
+      expect(textarea.value).toBe("Hello world");
+
+      textarea.value = "Updated content";
+      textarea.dispatchEvent(new Event("input"));
+
+      expect(post.get().content).toBe("Updated content");
+      expect(post.get().published).toBe(false);
+    });
+
+    it("binds radio buttons to nested property", () => {
+      const container = document.createElement("div");
+      container.innerHTML = `
+        <input type="radio" name="plan" value="free" data-volt-model="subscription.plan" />
+        <input type="radio" name="plan" value="pro" data-volt-model="subscription.plan" />
+        <input type="radio" name="plan" value="enterprise" data-volt-model="subscription.plan" />
+      `;
+
+      const subscription = signal({ plan: "pro", active: true });
+      mount(container, { subscription });
+
+      const radios = container.querySelectorAll("input");
+      expect(radios[0].checked).toBe(false);
+      expect(radios[1].checked).toBe(true);
+      expect(radios[2].checked).toBe(false);
+
+      radios[2].checked = true;
+      radios[2].dispatchEvent(new Event("change"));
+
+      expect(subscription.get().plan).toBe("enterprise");
+      expect(subscription.get().active).toBe(true);
+    });
+  });
+
+  describe("deep nesting", () => {
+    it("binds to deeply nested properties", () => {
+      const container = document.createElement("div");
+      container.innerHTML = `<input type="text" data-volt-model="app.user.profile.displayName" />`;
+
+      const app = signal({
+        user: { profile: { displayName: "Alice", avatar: "/avatar.png" }, settings: { theme: "dark" } },
+      });
+      mount(container, { app });
+
+      const input = container.querySelector("input")!;
+      expect(input.value).toBe("Alice");
+
+      input.value = "Bob";
+      input.dispatchEvent(new Event("input"));
+
+      expect(app.get().user.profile.displayName).toBe("Bob");
+      expect(app.get().user.profile.avatar).toBe("/avatar.png");
+      expect(app.get().user.settings.theme).toBe("dark");
+    });
+
+    it("maintains immutability with deeply nested updates", () => {
+      const container = document.createElement("div");
+      container.innerHTML = `<input type="text" data-volt-model="state.form.fields.email" />`;
+
+      const state = signal({
+        form: { fields: { email: "[e-mail]", name: "Test" }, meta: { submitted: false } },
+      });
+
+      const originalState = state.get();
+      const originalForm = originalState.form;
+      const originalFields = originalState.form.fields;
+
+      mount(container, { state });
+
+      const input = container.querySelector("input")!;
+      input.value = "[e-mail]";
+      input.dispatchEvent(new Event("input"));
+
+      const newState = state.get();
+      const newForm = newState.form;
+      const newFields = newState.form.fields;
+
+      expect(newState).not.toBe(originalState);
+      expect(newForm).not.toBe(originalForm);
+      expect(newFields).not.toBe(originalFields);
+
+      expect(newFields.email).toBe("[e-mail]");
+      expect(newFields.name).toBe("Test");
+      expect(newForm.meta.submitted).toBe(false);
+
+      expect(originalFields.email).toBe("[e-mail]");
+    });
+  });
+
+  describe("edge cases", () => {
+    it("handles undefined nested property gracefully", () => {
+      const container = document.createElement("div");
+      container.innerHTML = `<input type="text" data-volt-model="obj.missing" />`;
+
+      const obj = signal({ present: "value" });
+      mount(container, { obj });
+
+      const input = container.querySelector("input")!;
+      expect(input.value).toBe("");
+    });
+
+    it("creates nested property path when updating undefined property", () => {
+      const container = document.createElement("div");
+      container.innerHTML = `<input type="text" data-volt-model="data.newProp" />`;
+
+      const data = signal({ existingProp: "exists" });
+      mount(container, { data });
+
+      const input = container.querySelector("input")!;
+      input.value = "new value";
+      input.dispatchEvent(new Event("input"));
+
+      // @ts-expect-error updating shape of data
+      expect(data.get().newProp).toBe("new value");
+      expect(data.get().existingProp).toBe("exists");
+    });
+
+    it("works with modifiers on nested properties", () => {
+      const container = document.createElement("div");
+      container.innerHTML = `<input type="text" data-volt-model-trim="form.username" />`;
+
+      const form = signal({ username: "", email: "" });
+      mount(container, { form });
+
+      const input = container.querySelector("input")!;
+      input.value = "  alice  ";
+      input.dispatchEvent(new Event("input"));
+
+      expect(form.get().username).toBe("alice");
+    });
+
+    it("works with number modifier on nested properties", () => {
+      const container = document.createElement("div");
+      container.innerHTML = `<input type="text" data-volt-model-number="config.port" />`;
+
+      const config = signal({ port: 8080, host: "localhost" });
+      mount(container, { config });
+
+      const input = container.querySelector("input")!;
+      input.value = "3000";
+      input.dispatchEvent(new Event("input"));
+
+      expect(config.get().port).toBe(3000);
+      expect(typeof config.get().port).toBe("number");
+    });
+  });
+});

lib/test/integration/global-state.test.ts

···
       document.body.innerHTML = `
         <div data-volt data-volt-state='{"log": []}'>
           <button data-volt-on-click="log.set([...log.get(), 'sync']); $pulse(() => log.set([...log.get(), 'async']))">Click</button>
-          <p data-volt-text="log.get().join(', ')"></p>
+          <p data-volt-text="log.join(', ')"></p>
         </div>
       `;
 
···
       document.body.innerHTML = `
         <div data-volt data-volt-state='{"count": 0, "log": []}' data-volt-init="$probe('count', v => log.set([...log.get(), v]))">
           <button data-volt-on-click="count.set(count.get() + 1)">Increment</button>
-          <p data-volt-text="log.get().join(', ')"></p>
+          <p data-volt-text="log.join(', ')"></p>
         </div>
       `;