feat: async effects & lifecycle hooks

ROADMAP.md

···
 | ------- | ----- | ---------------------------------------------------------- | ------------------------------------------------------------------------ |
 |         |   ✓   | [Foundations](#foundations)                                | Initial project setup, tooling, and reactive signal prototype.           |
 |         |   ✓   | [Reactivity & Bindings](#reactivity--bindings)             | Core DOM bindings (`data-x-*`) and declarative updates.                  |
-|         |       | [Actions & Effects](#actions--effects)                     | Event system and derived reactivity primitives.                          |
+|         |   ✓   | [Actions & Effects](#actions--effects)                     | Event system and derived reactivity primitives.                          |
 |         |       | [Plugins Framework](#plugins-framework)                    | Modular plugin system and first built-in plugin set.                     |
 |         |       | [Streaming & Patch Engine](#streaming--patch-engine)       | SSE/WebSocket JSON patch streaming.                                      |
 |         |       | [Persistence & Offline](#persistence--offline)             | State persistence, storage sync, and fallback behaviors.                 |
···
 **Outcome:** Fully functional reactive UI layer with event bindings and computed updates.
 **Deliverables:**
     - ✓ Event binding system (`data-x-on-*`)
-    - `$el` and `$event` scoped references
+    - ✓ `$el` and `$event` scoped references
     - ✓ Derived signals (`computed`, `effect`)
-    - Async effects (e.g., fetch triggers)
+    - ✓ Async effects (e.g., fetch triggers)
 
 ### Plugins Framework
 
···
 **Outcome:** Stable plugin API enabling community-driven extensions.
 **Deliverables:**
     - ✓ `registerPlugin(name, fn)` API
-    - Context and lifecycle hooks
+    - ✓ Context and lifecycle hooks
     - ✓ Built-ins:
         - ✓ `data-x-persist`
         - ✓ `data-x-scroll`
         - ✓ `data-x-url`
     - ✓ Tests & registry
-    - Example in docs/examples/plugins.md
     - ✓ Setup test coverage with generous thresholds (~50%)
+    - Example in docs/examples/plugins.md
     - End-to-end examples (counter, form, live field updates)
         - `docs/examples/reactivity.md`
             - `actions`, `effects`, `signals`
···
 **Outcome:** Volt.js can receive and apply live updates from the server
 **Deliverables:**
     - JSON Patch parser and DOM applier
-    - `data-x-stream` attribute
+    - `data-volt-stream` attribute
     - Reconnection/backoff logic
     - Raise test coverage threshold to 60%
     - Integration test with mock SSE server
···
     - ✓ Binding directives for text, attributes, classes, styles, and two-way form controls (`data-volt-[bind|text|model|class:*]`).
     - ✓ Control-flow directives (`data-volt-for`, `data-volt-if`, `data-volt-else`) with lifecycle-safe teardown.
     - ✓ Declarative event system (`data-volt-on:*`) with helper surface for list mutations and plugin hooks.
-    - SSR compatibility helpers and sandboxed expression evaluator per the security contract.
-    - Integration tests covering TodoMVC and hydration edge cases.
+    - SSR compatibility helpers and sandboxed expression evaluator
 
 ## Examples
 

docs/api/events.md

···
+---
+version: 1.0
+updated: 2025-10-18
+---
+
+# Event Handling
+
+Volt.js provides declarative event handling through `data-volt-on-*` attributes with automatic access to special scoped references.
+
+## Event Binding Syntax
+
+Event handlers are attached using the `data-volt-on-{eventName}` attribute
+
+The attribute value can be:
+
+- A function reference from the scope: `handleClick`
+- An inline expression: `count.set(count.get() + 1)`
+- A method call: `myObject.method()`
+
+## Scoped References
+
+Event handlers have access to two special scoped references that are automatically injected:
+
+### `$el` - The Target Element
+
+The `$el` reference provides access to the DOM element that the event handler is bound to.
+
+**Type:** [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element)
+
+### `$event` - The Event Object
+
+The `$event` reference provides access to the native browser event object.
+
+**Type:** [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) (or specific event type like `MouseEvent`, `KeyboardEvent`, etc.)
+
+## Event Types
+
+Volt.js aims to support all standard DOM events through `data-volt-on-*`:
+
+**Mouse Events:**
+
+- `click`, `dblclick`
+- `mousedown`, `mouseup`
+- `mouseover`, `mouseout`, `mouseenter`, `mouseleave`
+- `mousemove`
+
+**Keyboard Events:**
+
+- `keydown`, `keyup`, `keypress`
+
+**Form Events:**
+
+- `submit`, `reset`
+- `input`, `change`
+- `focus`, `blur`
+
+**Touch Events:**
+
+- `touchstart`, `touchend`, `touchmove`, `touchcancel`
+
+**Other Events:**
+
+- `scroll`, `resize`
+- `load`, `error`
+- Any custom events
+
+## Implementation Details
+
+When an event handler is bound, Volt.js:
+
+1. Creates a new scope that extends the component scope
+2. Injects `$el` (the bound element) and `$event` (the event object) into this scope
+3. Evaluates the expression in this enhanced scope
+4. If the expression returns a function, calls it with the event
+
+The event listener is automatically cleaned up when the element is unmounted.

lib/src/core/asyncEffect.ts

···
+/**
+ * Async effect system with abort, race protection, debounce, throttle, and error handling
+ */
+
+import type { AsyncEffectFunction, AsyncEffectOptions, ComputedSignal, Signal } from "../types/volt";
+
+/**
+ * Creates an async side effect that runs when dependencies change.
+ * Supports abort signals, race protection, debouncing, throttling, and error handling.
+ *
+ * @param effectFunction - Async function to run as a side effect
+ * @param dependencies - Array of signals this effect depends on
+ * @param options - Configuration options for async behavior
+ * @returns Cleanup function to stop the effect
+ *
+ * @example
+ * // Fetch with abort on cleanup
+ * const query = signal('');
+ * const cleanup = asyncEffect(async (signal) => {
+ *   const response = await fetch(`/api/search?q=${query.get()}`, { signal });
+ *   const data = await response.json();
+ *   results.set(data);
+ * }, [query], { abortable: true });
+ *
+ * @example
+ * // Debounced search
+ * asyncEffect(async () => {
+ *   const response = await fetch(`/api/search?q=${searchQuery.get()}`);
+ *   results.set(await response.json());
+ * }, [searchQuery], { debounce: 300 });
+ *
+ * @example
+ * // Error handling with retries
+ * asyncEffect(async () => {
+ *   const response = await fetch('/api/data');
+ *   if (!response.ok) throw new Error('Failed to fetch');
+ *   data.set(await response.json());
+ * }, [refreshTrigger], {
+ *   retries: 3,
+ *   retryDelay: 1000,
+ *   onError: (error, retry) => {
+ *     console.error('Fetch failed:', error);
+ *     // Optionally call retry() to retry immediately
+ *   }
+ * });
+ */
+export function asyncEffect(
+  effectFunction: AsyncEffectFunction,
+  dependencies: Array<Signal<unknown> | ComputedSignal<unknown>>,
+  options: AsyncEffectOptions = {},
+): () => void {
+  const { abortable = false, debounce, throttle, onError, retries = 0, retryDelay = 0 } = options;
+
+  let cleanup: (() => void) | void;
+  let abortController: AbortController | undefined;
+  let executionId = 0;
+  let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+  let throttleTimer: ReturnType<typeof setTimeout> | undefined;
+  let lastExecutionTime = 0;
+  let pendingExecution = false;
+  let retryCount = 0;
+
+  /**
+   * Execute the async effect with error handling and retries
+   */
+  const executeEffect = async (currentExecutionId: number) => {
+    if (abortController) {
+      abortController.abort();
+    }
+
+    if (cleanup) {
+      try {
+        cleanup();
+      } catch (error) {
+        console.error("Error in async effect cleanup:", error);
+      }
+      cleanup = undefined;
+    }
+
+    if (abortable) {
+      abortController = new AbortController();
+    }
+
+    try {
+      const result = await effectFunction(abortController?.signal);
+
+      if (currentExecutionId !== executionId) {
+        return;
+      }
+
+      if (typeof result === "function") {
+        cleanup = result;
+      }
+
+      retryCount = 0;
+    } catch (error) {
+      if (currentExecutionId !== executionId) {
+        return;
+      }
+
+      if (abortController?.signal.aborted) {
+        return;
+      }
+
+      const err = error instanceof Error ? error : new Error(String(error));
+
+      if (retryCount < retries) {
+        retryCount++;
+        if (retryDelay > 0) {
+          await new Promise((resolve) => setTimeout(resolve, retryDelay));
+        }
+
+        if (currentExecutionId === executionId) {
+          await executeEffect(currentExecutionId);
+        }
+      } else {
+        console.error("Error in async effect:", err);
+
+        if (onError) {
+          const retry = () => {
+            retryCount = 0;
+            scheduleExecution();
+          };
+          onError(err, retry);
+        }
+      }
+    }
+  };
+
+  /**
+   * Schedule effect execution with debounce/throttle logic
+   */
+  const scheduleExecution = () => {
+    const currentExecutionId = ++executionId;
+
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+      debounceTimer = undefined;
+    }
+
+    if (debounce !== undefined && debounce > 0) {
+      debounceTimer = setTimeout(() => {
+        debounceTimer = undefined;
+        executeEffect(currentExecutionId);
+      }, debounce);
+      return;
+    }
+
+    if (throttle !== undefined && throttle > 0) {
+      const now = Date.now();
+      const timeSinceLastExecution = now - lastExecutionTime;
+
+      if (timeSinceLastExecution >= throttle) {
+        lastExecutionTime = now;
+        executeEffect(currentExecutionId);
+      } else if (!pendingExecution) {
+        pendingExecution = true;
+        const remainingTime = throttle - timeSinceLastExecution;
+
+        throttleTimer = setTimeout(() => {
+          throttleTimer = undefined;
+          pendingExecution = false;
+          lastExecutionTime = Date.now();
+          executeEffect(currentExecutionId);
+        }, remainingTime);
+      }
+      return;
+    }
+
+    executeEffect(currentExecutionId);
+  };
+
+  scheduleExecution();
+
+  const unsubscribers = dependencies.map((dependency) =>
+    dependency.subscribe(() => {
+      scheduleExecution();
+    })
+  );
+
+  return () => {
+    executionId++;
+
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+      debounceTimer = undefined;
+    }
+
+    if (throttleTimer) {
+      clearTimeout(throttleTimer);
+      throttleTimer = undefined;
+    }
+
+    if (abortController) {
+      abortController.abort();
+      abortController = undefined;
+    }
+
+    if (cleanup) {
+      try {
+        cleanup();
+      } catch (error) {
+        console.error("Error during async effect unmount:", error);
+      }
+      cleanup = undefined;
+    }
+
+    for (const unsubscribe of unsubscribers) {
+      unsubscribe();
+    }
+  };
+}

lib/src/core/binder.ts

···
 import type { BindingContext, CleanupFunction, PluginContext, Scope, Signal } from "../types/volt";
 import { getVoltAttributes, parseClassBinding, setHTML, setText, toggleClass, walkDOM } from "./dom";
 import { evaluate, extractDependencies, isSignal } from "./evaluator";
+import { executeGlobalHooks, notifyBindingCreated, notifyElementMounted, notifyElementUnmounted } from "./lifecycle";
 import { getPlugin } from "./plugin";
 
 /**
···
  * @returns Cleanup function to unmount
  */
 export function mount(root: Element, scope: Scope): CleanupFunction {
+  executeGlobalHooks("beforeMount", root, scope);
+
   const elements = walkDOM(root);
   const allCleanups: CleanupFunction[] = [];
+  const mountedElements: Element[] = [];
 
   for (const element of elements) {
     const attributes = getVoltAttributes(element);
···
     if (attributes.has("for")) {
       const forExpression = attributes.get("for")!;
       bindFor(context, forExpression);
+      notifyBindingCreated(element, "for");
     } else if (attributes.has("if")) {
       const ifExpression = attributes.get("if")!;
       bindIf(context, ifExpression);
+      notifyBindingCreated(element, "if");
     } else {
       for (const [name, value] of attributes) {
         bindAttribute(context, name, value);
+        notifyBindingCreated(element, name);
       }
     }
 
+    notifyElementMounted(element);
+    mountedElements.push(element);
     allCleanups.push(...context.cleanups);
   }
 
+  executeGlobalHooks("afterMount", root, scope);
+
   return () => {
+    executeGlobalHooks("beforeUnmount", root);
+
+    for (const element of mountedElements) {
+      notifyElementUnmounted(element);
+    }
+
     for (const cleanup of allCleanups) {
       try {
         cleanup();
···
         console.error("Error during unmount:", error);
       }
     }
+
+    executeGlobalHooks("afterUnmount", root);
   };
 }
 
···
  * Provides the plugin with access to utilities and cleanup registration.
  */
 function createPluginContext(bindingContext: BindingContext): PluginContext {
+  const mountCallbacks: Array<() => void> = [];
+  const unmountCallbacks: Array<() => void> = [];
+  const beforeBindingCallbacks: Array<() => void> = [];
+  const afterBindingCallbacks: Array<() => void> = [];
+
+  const lifecycle = {
+    onMount: (callback: () => void) => {
+      mountCallbacks.push(callback);
+      try {
+        callback();
+      } catch (error) {
+        console.error("Error in plugin onMount hook:", error);
+      }
+    },
+    onUnmount: (cb: () => void) => {
+      unmountCallbacks.push(cb);
+    },
+    beforeBinding: (cb: () => void) => {
+      beforeBindingCallbacks.push(cb);
+      try {
+        cb();
+      } catch (error) {
+        console.error("Error in plugin beforeBinding hook:", error);
+      }
+    },
+    afterBinding: (callback: () => void) => {
+      afterBindingCallbacks.push(callback);
+      queueMicrotask(() => {
+        try {
+          callback();
+        } catch (error) {
+          console.error("Error in plugin afterBinding hook:", error);
+        }
+      });
+    },
+  };
+
+  bindingContext.cleanups.push(() => {
+    for (const cb of unmountCallbacks) {
+      try {
+        cb();
+      } catch (error) {
+        console.error("Error in plugin onUnmount hook:", error);
+      }
+    }
+  });
+
   return {
     element: bindingContext.element,
     scope: bindingContext.scope,
···
       bindingContext.cleanups.push(fn);
     },
     findSignal: (path) => findSignalInScope(bindingContext.scope, path),
-    evaluate: (expression) => evaluate(expression, bindingContext.scope),
+    evaluate: (expr) => evaluate(expr, bindingContext.scope),
+    lifecycle,
   };
 }

lib/src/core/lifecycle.ts

···
+/**
+ * Global lifecycle hook system for Volt.js
+ * Provides beforeMount, afterMount, beforeUnmount, and afterUnmount hooks
+ */
+
+import type { GlobalHookName, MountHookCallback, Scope, UnmountHookCallback } from "$types/volt";
+
+/**
+ * Global lifecycle hooks registry
+ */
+const lifecycleHooks = new Map<GlobalHookName, Set<MountHookCallback | UnmountHookCallback>>([
+  ["beforeMount", new Set()],
+  ["afterMount", new Set()],
+  ["beforeUnmount", new Set()],
+  ["afterUnmount", new Set()],
+]);
+
+/**
+ * Register a global lifecycle hook.
+ * Global hooks run for every mount/unmount operation in the application.
+ *
+ * @param name - Name of the lifecycle hook
+ * @param cb - Callback function to execute
+ * @returns Unregister function
+ *
+ * @example
+ * // Log every mount operation
+ * registerGlobalHook('beforeMount', (root, scope) => {
+ *   console.log('Mounting', root, 'with scope', scope);
+ * });
+ *
+ * @example
+ * // Track mounted elements
+ * const mountedElements = new Set<Element>();
+ * registerGlobalHook('afterMount', (root) => {
+ *   mountedElements.add(root);
+ * });
+ * registerGlobalHook('beforeUnmount', (root) => {
+ *   mountedElements.delete(root);
+ * });
+ */
+export function registerGlobalHook(name: GlobalHookName, cb: MountHookCallback | UnmountHookCallback): () => void {
+  const hooks = lifecycleHooks.get(name);
+  if (!hooks) {
+    throw new Error(`Unknown lifecycle hook: ${name}`);
+  }
+
+  hooks.add(cb);
+
+  return () => {
+    hooks.delete(cb);
+  };
+}
+
+/**
+ * Unregister a global lifecycle hook.
+ *
+ * @param name - Name of the lifecycle hook
+ * @param cb - Callback function to remove
+ * @returns true if the hook was removed, false if it wasn't registered
+ */
+export function unregisterGlobalHook(name: GlobalHookName, cb: MountHookCallback | UnmountHookCallback): boolean {
+  const hooks = lifecycleHooks.get(name);
+  if (!hooks) {
+    return false;
+  }
+
+  return hooks.delete(cb);
+}
+
+/**
+ * Clear all global hooks for a specific lifecycle event.
+ *
+ * @param name - Name of the lifecycle hook to clear
+ */
+export function clearGlobalHooks(name: GlobalHookName): void {
+  const hooks = lifecycleHooks.get(name);
+  if (hooks) {
+    hooks.clear();
+  }
+}
+
+export function clearAllGlobalHooks(): void {
+  for (const hooks of lifecycleHooks.values()) {
+    hooks.clear();
+  }
+}
+
+/**
+ * Get all registered hooks for a specific lifecycle event.
+ * Used internally by the binder system.
+ *
+ * @param name - Name of the lifecycle hook
+ * @returns Array of registered callbacks
+ */
+export function getGlobalHooks(name: GlobalHookName): Array<MountHookCallback | UnmountHookCallback> {
+  const hooks = lifecycleHooks.get(name);
+  return hooks ? [...hooks] : [];
+}
+
+/**
+ * Execute all registered hooks for a lifecycle event.
+ * Used internally by the binder system.
+ *
+ * @param hookName - Name of the lifecycle hook to execute
+ * @param root - The root element being mounted/unmounted
+ * @param scope - The scope object (only for mount hooks)
+ */
+export function executeGlobalHooks(hookName: GlobalHookName, root: Element, scope?: Scope): void {
+  const hooks = lifecycleHooks.get(hookName);
+  if (!hooks || hooks.size === 0) {
+    return;
+  }
+
+  for (const callback of hooks) {
+    try {
+      if (hookName === "beforeMount" || hookName === "afterMount") {
+        if (scope !== undefined) {
+          (callback as MountHookCallback)(root, scope);
+        }
+      } else {
+        (callback as UnmountHookCallback)(root);
+      }
+    } catch (error) {
+      console.error(`Error in global ${hookName} hook:`, error);
+    }
+  }
+}
+
+/**
+ * Element-level lifecycle tracking for per-element hooks
+ */
+type ElementLifecycleState = {
+  isMounted: boolean;
+  bindings: Set<string>;
+  onMount: Set<() => void>;
+  onUnmount: Set<() => void>;
+};
+
+const elementLifecycleStates = new WeakMap<Element, ElementLifecycleState>();
+
+/**
+ * Get or create lifecycle state for an element.
+ *
+ * @param element - The element to track
+ * @returns The lifecycle state object
+ */
+function getElementLifecycleState(element: Element): ElementLifecycleState {
+  let state = elementLifecycleStates.get(element);
+  if (!state) {
+    state = { isMounted: false, bindings: new Set(), onMount: new Set(), onUnmount: new Set() };
+    elementLifecycleStates.set(element, state);
+  }
+  return state;
+}
+
+/**
+ * Register a per-element lifecycle hook.
+ * These hooks are specific to individual elements.
+ *
+ * @param element - The element to attach the hook to
+ * @param hookType - Type of hook ('mount' or 'unmount')
+ * @param cb - Callback to execute
+ */
+export function registerElementHook(element: Element, hookType: "mount" | "unmount", cb: () => void): void {
+  const state = getElementLifecycleState(element);
+
+  if (hookType === "mount") {
+    state.onMount.add(cb);
+  } else {
+    state.onUnmount.add(cb);
+  }
+}
+
+/**
+ * Notify that an element has been mounted.
+ * Executes all registered onMount callbacks for the element.
+ *
+ * @param element - The mounted element
+ */
+export function notifyElementMounted(element: Element): void {
+  const state = getElementLifecycleState(element);
+
+  if (state.isMounted) {
+    return;
+  }
+
+  state.isMounted = true;
+
+  for (const callback of state.onMount) {
+    try {
+      callback();
+    } catch (error) {
+      console.error("Error in element onMount hook:", error);
+    }
+  }
+}
+
+/**
+ * Notify that an element is being unmounted.
+ * Executes all registered onUnmount callbacks for the element.
+ *
+ * @param element - The element being unmounted
+ */
+export function notifyElementUnmounted(element: Element): void {
+  const state = getElementLifecycleState(element);
+
+  if (!state.isMounted) {
+    return;
+  }
+
+  state.isMounted = false;
+
+  for (const callback of state.onUnmount) {
+    try {
+      callback();
+    } catch (error) {
+      console.error("Error in element onUnmount hook:", error);
+    }
+  }
+
+  elementLifecycleStates.delete(element);
+}
+
+/**
+ * Notify that a binding has been created on an element.
+ *
+ * @param element - The element the binding is on
+ * @param name - Name of the binding (e.g., 'text', 'class', 'on-click')
+ */
+export function notifyBindingCreated(element: Element, name: string): void {
+  const state = getElementLifecycleState(element);
+  state.bindings.add(name);
+}
+
+/**
+ * Notify that a binding has been destroyed on an element.
+ *
+ * @param element - The element the binding was on
+ * @param name - Name of the binding
+ */
+export function notifyBindingDestroyed(element: Element, name: string): void {
+  const state = elementLifecycleStates.get(element);
+  if (state) {
+    state.bindings.delete(name);
+  }
+}
+
+/**
+ * Check if an element is currently mounted.
+ *
+ * @param element - The element to check
+ * @returns true if the element is mounted
+ */
+export function isElementMounted(element: Element): boolean {
+  const state = elementLifecycleStates.get(element);
+  return state?.isMounted ?? false;
+}
+
+/**
+ * Get all bindings on an element.
+ *
+ * @param element - The element to query
+ * @returns Array of binding names
+ */
+export function getElementBindings(element: Element): string[] {
+  const state = elementLifecycleStates.get(element);
+  return state ? [...state.bindings] : [];
+}

lib/src/index.ts

···
  * @packageDocumentation
  */
 
-export type { ChargedRoot, ChargeResult, ComputedSignal, PluginContext, PluginHandler, Signal } from "$types/volt";
+export type {
+  AsyncEffectFunction,
+  AsyncEffectOptions,
+  ChargedRoot,
+  ChargeResult,
+  ComputedSignal,
+  GlobalHookName,
+  PluginContext,
+  PluginHandler,
+  Signal,
+} from "$types/volt";
+export { asyncEffect } from "@volt/core/asyncEffect";
 export { mount } from "@volt/core/binder";
 export { charge } from "@volt/core/charge";
+export {
+  clearAllGlobalHooks,
+  clearGlobalHooks,
+  getElementBindings,
+  isElementMounted,
+  registerElementHook,
+  registerGlobalHook,
+  unregisterGlobalHook,
+} from "@volt/core/lifecycle";
 export { clearPlugins, getRegisteredPlugins, hasPlugin, registerPlugin, unregisterPlugin } from "@volt/core/plugin";
 export { computed, effect, signal } from "@volt/core/signal";
 export { persistPlugin, registerStorageAdapter, scrollPlugin, urlPlugin } from "@volt/plugins/index";

lib/src/styles/base.css

···
  * Inspired by: magick.css, latex-css, sakura, matcha, mvp.css
  */
 
-/* ==========================================================================
-   CSS Custom Properties - Design Tokens
-   ========================================================================== */
+@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
 
 /**
  * Root-level CSS variables define the design system.
···
   --font-size-4xl: 2.027rem;   /* 36.5px */
   --font-size-5xl: 2.566rem;   /* 46.2px */
 
-  /* Font Families - Sans-serif with personality */
-  /* System fonts for performance, fallback to serif for character */
-  --font-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --font-serif: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
-  --font-mono: "SF Mono", "Cascadia Code", "Fira Code", "Roboto Mono", Consolas, monospace;
+  --font-sans: "Inter", sans-serif;
+  --font-serif: "Libre Baskerville", serif;
+  --font-mono: "Google Sans Code", monospace;
 
   /* Spacing Scale - Based on 0.5rem increments */
   --space-xs: 0.25rem;   /* 4px */
···
   --space-2xl: 3rem;     /* 48px */
   --space-3xl: 4rem;     /* 64px */
 
-  /* Line Heights - Optimized for readability */
+  /* Line Heights */
   --line-height-tight: 1.25;
   --line-height-base: 1.6;
   --line-height-relaxed: 1.8;
···
   --color-warning: #bf8700;
   --color-error: #cb2431;
 
-  /* Shadows - Subtle depth */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
···
   --radius-md: 6px;
   --radius-lg: 8px;
 
-  /* Transitions */
   --transition-fast: 150ms ease-in-out;
   --transition-base: 250ms ease-in-out;
 }
 
 /**
  * Dark Theme Overrides
+ *
  * Automatically applied when user prefers dark color scheme
  */
 @media (prefers-color-scheme: dark) {
···
   }
 }
 
-/* ==========================================================================
-   CSS Reset & Base Styles
-   ========================================================================== */
-
 /**
- * Modern CSS reset with sensible defaults
+ * CSS reset
  */
 *, *::before, *::after {
   box-sizing: border-box;
···
   margin: 0 auto;
   padding: var(--space-2xl) var(--space-lg);
 }
-
-/* ==========================================================================
-   Typography - Hierarchy & Rhythm
-   ========================================================================== */
 
 /**
  * Headings hierarchy
···
 
 /**
  * First paragraph after headings - No top margin
- * Common convention in academic typography
+ *
+ * Inspired by tufte.css
  */
 h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
   margin-top: 0;
 }
 
 /**
- * Links - Accessible and distinctive
+ * Links
+ *
  * Uses accent color with underline for clarity
  */
 a {
···
 
 /**
  * Subscript and superscript
+ *
  * Prevents them from affecting line height
  */
 sub, sup {
···
   color: var(--color-text-muted);
 }
 
-/* ==========================================================================
-   Lists - Ordered & Unordered
-   ========================================================================== */
-
 /**
  * List spacing and indentation
- * Nested lists inherit proper spacing
+ *
+ * Nested lists inherit spacing
  */
 ul, ol {
   margin-bottom: var(--space-lg);
···
   color: var(--color-text-muted);
 }
 
-/* ==========================================================================
-   Tufte-Style Sidenotes
-   ========================================================================== */
-
 /**
  * Sidenotes using <small> elements
  * On desktop: positioned in right margin
···
 }
 
 blockquote cite::before {
+  /* TODO: fix */
   content: " ";
 }
 
-/* ==========================================================================
-   Code & Preformatted Text
-   ========================================================================== */
-
 /**
  * Inline code
- * Monospace font with subtle background for distinction
+ *
+ * Monospace font with subtle background
  */
 code {
   font-family: var(--font-mono);
···
 
 /**
  * Keyboard input
+ *
  * Styled like keys on a keyboard
  */
 kbd {
···
 
 /**
  * Preformatted code blocks
+ *
  * Horizontal scrolling for overflow, no word wrap
  */
 pre {
···
   font-size: 0.875rem;
 }
 
-/* ==========================================================================
-   Horizontal Rules
-   ========================================================================== */
 
 /**
  * Section dividers
- * Centered decorative element with breathing room
+ *
+ * Centered decorative element
  */
 hr {
   margin: var(--space-3xl) auto;
···
   border-top: 1px solid var(--color-border);
   max-width: 50%;
 }
-
-/* ==========================================================================
-   Tables
-   ========================================================================== */
 
 /**
  * Table container for horizontal scrolling on small screens
···
 
 /**
  * Table header styling
- * Bold text with bottom border for separation
+ *
+ * Bold text with bottom border
  */
 thead {
   background-color: var(--color-bg-alt);
···
   transition: background-color var(--transition-fast);
 }
 
-/* ==========================================================================
-   Forms & Input Elements
-   ========================================================================== */
-
 /**
  * Form container spacing
  */
···
 
 /**
  * Labels
+ *
  * Block display for better touch targets
  */
 label {
···
 
 /**
  * Text inputs and textareas
- * Consistent sizing and interaction states
  */
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
 select,
···
 
 /**
  * Focus states for inputs
+ *
  * Clear visual feedback for keyboard navigation
  */
 input:focus,
···
   overflow: hidden;
 }
 
-/* ==========================================================================
-   Buttons
-   ========================================================================== */
-
 /**
  * Button styling
  * Primary action style with hover and active states
···
   outline-offset: 2px;
 }
 
-/* ==========================================================================
-   Media Elements
-   ========================================================================== */
-
 /**
  * Images
+ *
  * Responsive by default, maintains aspect ratio
  */
 img {
···
 
 /**
  * Video and audio
- * Responsive and accessible
  */
 video, audio {
   max-width: 100%;
   margin: var(--space-xl) 0;
 }
 
-/**
- * Canvas and SVG
- */
 canvas, svg {
   max-width: 100%;
   height: auto;
 }
 
-/* ==========================================================================
-   Embedded Content
-   ========================================================================== */
-
-/**
- * iframe - Responsive wrapper
- */
 iframe {
   max-width: 100%;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   margin: var(--space-xl) 0;
 }
-
-/* ==========================================================================
-   Semantic HTML5 Elements
-   ========================================================================== */
 
 /**
  * Article and Section
···
   color: var(--color-text-muted);
 }
 
-/**
- * Nav
- * Navigation menus
- */
 nav {
   margin: var(--space-lg) 0;
 }
···
 
 /**
  * Details and Summary
+ *
  * Disclosure widget for expandable content
  */
 details {
···
   border-bottom: 1px solid var(--color-border);
 }
 
-/* ==========================================================================
-   Utility Classes (Minimal, for framework integration)
-   ========================================================================== */
-
 /**
  * Screen reader only
  * Hides content visually but keeps it accessible to assistive technology
···
   border-width: 0;
 }
 
-/* ==========================================================================
-   Print Styles
-   ========================================================================== */
-
 /**
  * Print-specific optimizations
  */
···
     max-width: 100% !important;
   }
 }
-
-/* ==========================================================================
-   Responsive Breakpoints
-   ========================================================================== */
 
 /**
  * Tablet and below - Reduce spacing

lib/src/types/volt.d.ts

···
    * Handles simple property paths, literals, and signal unwrapping.
    */
   evaluate(expression: string): unknown;
+
+  /**
+   * Lifecycle hooks for plugin-specific mount/unmount behavior
+   */
+  lifecycle: PluginLifecycle;
 }
 
 /**
···
 export type ChargeResult = { roots: ChargedRoot[]; cleanup: CleanupFunction };
 
 export type Dep = { get: () => unknown; subscribe: (callback: (value: unknown) => void) => () => void };
+
+/**
+ * Options for configuring async effects
+ */
+export interface AsyncEffectOptions {
+  /**
+   * Enable automatic AbortController integration.
+   * When true, provides an AbortSignal to the effect function for canceling async operations.
+   */
+  abortable?: boolean;
+
+  /**
+   * Debounce delay in milliseconds.
+   * Effect execution is delayed until this duration has passed without dependencies changing.
+   */
+  debounce?: number;
+
+  /**
+   * Throttle delay in milliseconds.
+   * Effect execution is rate-limited to at most once per this duration.
+   */
+  throttle?: number;
+
+  /**
+   * Error handler for async effect failures.
+   * Receives the error and a retry function.
+   */
+  onError?: (error: Error, retry: () => void) => void;
+
+  /**
+   * Number of automatic retry attempts on error.
+   * Defaults to 0 (no retries).
+   */
+  retries?: number;
+
+  /**
+   * Delay in milliseconds between retry attempts.
+   * Defaults to 0 (immediate retry).
+   */
+  retryDelay?: number;
+}
+
+/**
+ * Async effect function signature.
+ * Receives an optional AbortSignal when abortable option is enabled.
+ * Can return a cleanup function or a Promise that resolves to a cleanup function.
+ */
+export type AsyncEffectFunction = (signal?: AbortSignal) => Promise<void | (() => void)>;
+
+/**
+ * Lifecycle hook callback types
+ */
+export type LifecycleHookCallback = () => void;
+export type MountHookCallback = (root: Element, scope: Scope) => void;
+export type UnmountHookCallback = (root: Element) => void;
+export type ElementMountHookCallback = (element: Element, scope: Scope) => void;
+export type ElementUnmountHookCallback = (element: Element) => void;
+export type BindingHookCallback = (element: Element, bindingName: string) => void;
+
+/**
+ * Lifecycle hook names
+ */
+export type GlobalHookName = "beforeMount" | "afterMount" | "beforeUnmount" | "afterUnmount";
+
+/**
+ * Extended plugin context with lifecycle hooks
+ */
+export interface PluginLifecycle {
+  /**
+   * Register a callback to run when the plugin is initialized for an element
+   */
+  onMount: (callback: LifecycleHookCallback) => void;
+
+  /**
+   * Register a callback to run when the element is being unmounted
+   */
+  onUnmount: (callback: LifecycleHookCallback) => void;
+
+  /**
+   * Register a callback to run before the binding is created
+   */
+  beforeBinding: (callback: LifecycleHookCallback) => void;
+
+  /**
+   * Register a callback to run after the binding is created
+   */
+  afterBinding: (callback: LifecycleHookCallback) => void;
+}

lib/test/core/asyncEffect.test.ts

···
+import { asyncEffect } from "@volt/core/asyncEffect";
+import { signal } from "@volt/core/signal";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+describe("asyncEffect", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+  });
+
+  describe("basic async execution", () => {
+    it("executes async effect immediately", async () => {
+      const spy = vi.fn();
+      const dependency = signal(0);
+
+      asyncEffect(async () => {
+        spy();
+      }, [dependency]);
+
+      await vi.runAllTimersAsync();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it("executes when dependency changes", async () => {
+      const spy = vi.fn();
+      const dependency = signal(0);
+
+      asyncEffect(async () => {
+        spy(dependency.get());
+      }, [dependency]);
+
+      await vi.runAllTimersAsync();
+      expect(spy).toHaveBeenCalledWith(0);
+
+      dependency.set(1);
+      await vi.runAllTimersAsync();
+      expect(spy).toHaveBeenCalledWith(1);
+      expect(spy).toHaveBeenCalledTimes(2);
+    });
+
+    it("supports multiple dependencies", async () => {
+      const spy = vi.fn();
+      const dep1 = signal(1);
+      const dep2 = signal(2);
+
+      asyncEffect(async () => {
+        spy(dep1.get(), dep2.get());
+      }, [dep1, dep2]);
+
+      await vi.runAllTimersAsync();
+      expect(spy).toHaveBeenCalledWith(1, 2);
+
+      dep1.set(10);
+      await vi.runAllTimersAsync();
+      expect(spy).toHaveBeenCalledWith(10, 2);
+
+      dep2.set(20);
+      await vi.runAllTimersAsync();
+      expect(spy).toHaveBeenCalledWith(10, 20);
+
+      expect(spy).toHaveBeenCalledTimes(3);
+    });
+
+    it("handles cleanup functions", async () => {
+      const cleanupSpy = vi.fn();
+      const dependency = signal(0);
+
+      asyncEffect(async () => {
+        return () => {
+          cleanupSpy();
+        };
+      }, [dependency]);
+
+      await vi.runAllTimersAsync();
+
+      dependency.set(1);
+      await vi.runAllTimersAsync();
+
+      expect(cleanupSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls cleanup on unmount", async () => {
+      const cleanupSpy = vi.fn();
+      const dependency = signal(0);
+
+      const unsubscribe = asyncEffect(async () => {
+        return () => {
+          cleanupSpy();
+        };
+      }, [dependency]);
+
+      await vi.runAllTimersAsync();
+
+      unsubscribe();
+      await vi.runAllTimersAsync();
+
+      expect(cleanupSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("abort controller integration", () => {
+    it("provides AbortSignal when abortable option is true", async () => {
+      let receivedSignal: AbortSignal | undefined;
+      const dependency = signal(0);
+
+      asyncEffect(
+        async (signal) => {
+          receivedSignal = signal;
+        },
+        [dependency],
+        { abortable: true },
+      );
+
+      await vi.runAllTimersAsync();
+
+      expect(receivedSignal).toBeInstanceOf(AbortSignal);
+      expect(receivedSignal?.aborted).toBe(false);
+    });
+
+    it("aborts previous effect when dependency changes", async () => {
+      const signals: AbortSignal[] = [];
+      const dependency = signal(0);
+
+      asyncEffect(
+        async (signal) => {
+          if (signal) {
+            signals.push(signal);
+          }
+          await new Promise((resolve) => setTimeout(resolve, 100));
+        },
+        [dependency],
+        { abortable: true },
+      );
+
+      await vi.advanceTimersByTimeAsync(50);
+
+      dependency.set(1);
+      await vi.advanceTimersByTimeAsync(50);
+
+      expect(signals).toHaveLength(2);
+      expect(signals[0].aborted).toBe(true);
+      expect(signals[1].aborted).toBe(false);
+    });
+
+    it("aborts on cleanup", async () => {
+      let abortSignal: AbortSignal | undefined;
+      const dependency = signal(0);
+
+      const cleanup = asyncEffect(
+        async (signal) => {
+          abortSignal = signal;
+        },
+        [dependency],
+        { abortable: true },
+      );
+
+      await vi.runAllTimersAsync();
+
+      cleanup();
+
+      expect(abortSignal?.aborted).toBe(true);
+    });
+
+    it("does not provide signal when abortable is false", async () => {
+      const signals: (AbortSignal | undefined)[] = [];
+      const dependency = signal(0);
+
+      asyncEffect(
+        async (signal) => {
+          signals.push(signal);
+        },
+        [dependency],
+        { abortable: false },
+      );
+
+      await vi.runAllTimersAsync();
+
+      expect(signals).toHaveLength(1);
+      expect(signals[0]).toBeUndefined();
+    });
+  });
+
+  describe("race protection", () => {
+    it("discards results from stale executions via execution ID check", async () => {
+      const results: number[] = [];
+      const dependency = signal(0);
+      let currentExecutionId = 0;
+
+      asyncEffect(async () => {
+        const executionId = ++currentExecutionId;
+        const value = dependency.get();
+        const delay = value === 0 ? 100 : 10;
+        await new Promise((resolve) => setTimeout(resolve, delay));
+
+        if (executionId === currentExecutionId) {
+          results.push(value);
+        }
+      }, [dependency]);
+
+      await vi.advanceTimersByTimeAsync(50);
+
+      dependency.set(1);
+
+      await vi.runAllTimersAsync();
+
+      expect(results[results.length - 1]).toBe(1);
+    });
+
+    it("tracks execution order with race conditions", async () => {
+      const startTimes: number[] = [];
+      const completionTimes: number[] = [];
+      const dependency = signal(0);
+
+      asyncEffect(async () => {
+        const value = dependency.get();
+        startTimes.push(value);
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        completionTimes.push(value);
+      }, [dependency]);
+
+      await vi.advanceTimersByTimeAsync(10);
+      dependency.set(1);
+
+      await vi.advanceTimersByTimeAsync(10);
+      dependency.set(2);
+
+      await vi.runAllTimersAsync();
+
+      expect(startTimes.length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  describe("debounce", () => {
+    it("delays execution until debounce period passes", async () => {
+      const spy = vi.fn();
+      const dependency = signal(0);
+
+      asyncEffect(
+        async () => {
+          spy(dependency.get());
+        },
+        [dependency],
+        { debounce: 300 },
+      );
+
+      expect(spy).not.toHaveBeenCalled();
+
+      await vi.advanceTimersByTimeAsync(200);
+      expect(spy).not.toHaveBeenCalled();
+
+      await vi.advanceTimersByTimeAsync(100);
+      expect(spy).toHaveBeenCalledWith(0);
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it("resets debounce timer on each dependency change", async () => {
+      const spy = vi.fn();
+      const dependency = signal(0);
+
+      asyncEffect(
+        async () => {
+          spy(dependency.get());
+        },
+        [dependency],
+        { debounce: 300 },
+      );
+
+      await vi.advanceTimersByTimeAsync(200);
+      dependency.set(1);
+
+      await vi.advanceTimersByTimeAsync(200);
+      dependency.set(2);
+
+      await vi.advanceTimersByTimeAsync(200);
+      expect(spy).not.toHaveBeenCalled();
+
+      await vi.advanceTimersByTimeAsync(100);
+      expect(spy).toHaveBeenCalledWith(2);
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it("executes only once after multiple rapid changes", async () => {
+      const spy = vi.fn();
+      const dependency = signal(0);
+
+      asyncEffect(
+        async () => {
+          spy(dependency.get());
+        },
+        [dependency],
+        { debounce: 100 },
+      );
+
+      for (let i = 1; i <= 5; i++) {
+        dependency.set(i);
+        await vi.advanceTimersByTimeAsync(50);
+      }
+
+      await vi.runAllTimersAsync();
+
+      expect(spy).toHaveBeenCalledWith(5);
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("throttle", () => {
+    it("limits execution frequency", async () => {
+      const spy = vi.fn();
+      const dependency = signal(0);
+
+      asyncEffect(
+        async () => {
+          spy(dependency.get());
+        },
+        [dependency],
+        { throttle: 200 },
+      );
+
+      await vi.runAllTimersAsync();
+      expect(spy).toHaveBeenCalledTimes(1);
+
+      dependency.set(1);
+      await vi.advanceTimersByTimeAsync(100);
+      expect(spy).toHaveBeenCalledTimes(1);
+
+      await vi.advanceTimersByTimeAsync(100);
+      expect(spy).toHaveBeenCalledTimes(2);
+    });
+
+    it("executes immediately on first trigger", async () => {
+      const spy = vi.fn();
+      const dependency = signal(0);
+
+      asyncEffect(
+        async () => {
+          spy(dependency.get());
+        },
+        [dependency],
+        { throttle: 1000 },
+      );
+
+      await vi.runAllTimersAsync();
+      expect(spy).toHaveBeenCalledWith(0);
+    });
+
+    it("queues one execution during throttle period", async () => {
+      const spy = vi.fn();
+      const dependency = signal(0);
+
+      asyncEffect(
+        async () => {
+          spy(dependency.get());
+        },
+        [dependency],
+        { throttle: 300 },
+      );
+
+      await vi.runAllTimersAsync();
+      expect(spy).toHaveBeenCalledTimes(1);
+
+      dependency.set(1);
+      dependency.set(2);
+      dependency.set(3);
+
+      await vi.advanceTimersByTimeAsync(300);
+
+      expect(spy).toHaveBeenCalledWith(3);
+      expect(spy).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe("error handling", () => {
+    it("catches and logs errors", async () => {
+      const consoleErrorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+      const dependency = signal(0);
+
+      asyncEffect(async () => {
+        throw new Error("Test error");
+      }, [dependency]);
+
+      await vi.runAllTimersAsync();
+
+      expect(consoleErrorSpy).toHaveBeenCalledWith("Error in async effect:", expect.any(Error));
+
+      consoleErrorSpy.mockRestore();
+    });
+
+    it("calls onError handler", async () => {
+      const errorHandler = vi.fn();
+      const dependency = signal(0);
+
+      asyncEffect(
+        async () => {
+          throw new Error("Test error");
+        },
+        [dependency],
+        { onError: errorHandler },
+      );
+
+      await vi.runAllTimersAsync();
+
+      expect(errorHandler).toHaveBeenCalledWith(expect.any(Error), expect.any(Function));
+    });
+
+    it("retries on error when retries option is set", async () => {
+      let attempts = 0;
+      const dependency = signal(0);
+
+      asyncEffect(
+        async () => {
+          attempts++;
+          if (attempts < 3) {
+            throw new Error("Retry test");
+          }
+        },
+        [dependency],
+        { retries: 3 },
+      );
+
+      await vi.runAllTimersAsync();
+
+      expect(attempts).toBe(3);
+    });
+
+    it("respects retry delay", async () => {
+      let attempts = 0;
+      const dependency = signal(0);
+
+      asyncEffect(
+        async () => {
+          attempts++;
+          if (attempts < 2) {
+            throw new Error("Retry test");
+          }
+        },
+        [dependency],
+        { retries: 2, retryDelay: 500 },
+      );
+
+      await vi.advanceTimersByTimeAsync(100);
+      expect(attempts).toBe(1);
+
+      await vi.advanceTimersByTimeAsync(500);
+      expect(attempts).toBe(2);
+    });
+
+    it("allows manual retry via onError callback", async () => {
+      let attempts = 0;
+      const dependency = signal(0);
+
+      asyncEffect(
+        async () => {
+          attempts++;
+          if (attempts <= 2) {
+            throw new Error("Retry test");
+          }
+        },
+        [dependency],
+        {
+          retries: 1,
+          onError: (_error, retry) => {
+            if (attempts === 2) {
+              retry();
+            }
+          },
+        },
+      );
+
+      await vi.runAllTimersAsync();
+
+      expect(attempts).toBe(3);
+    });
+
+    it("does not retry aborted operations", async () => {
+      let attempts = 0;
+      const dependency = signal(0);
+
+      asyncEffect(
+        async (signal) => {
+          attempts++;
+          signal?.addEventListener("abort", () => {
+            throw new Error("Aborted");
+          });
+          await new Promise((resolve) => setTimeout(resolve, 100));
+          signal?.dispatchEvent(new Event("abort"));
+        },
+        [dependency],
+        { abortable: true, retries: 3 },
+      );
+
+      await vi.advanceTimersByTimeAsync(50);
+      dependency.set(1);
+      await vi.runAllTimersAsync();
+
+      expect(attempts).toBe(2);
+    });
+  });
+
+  describe("cleanup behavior", () => {
+    it("cleans up debounce timers on unmount", async () => {
+      const spy = vi.fn();
+      const dependency = signal(0);
+
+      const cleanup = asyncEffect(
+        async () => {
+          spy();
+        },
+        [dependency],
+        { debounce: 1000 },
+      );
+
+      await vi.advanceTimersByTimeAsync(500);
+      cleanup();
+      await vi.runAllTimersAsync();
+
+      expect(spy).not.toHaveBeenCalled();
+    });
+
+    it("cleans up throttle timers on unmount", async () => {
+      const spy = vi.fn();
+      const dependency = signal(0);
+
+      const cleanup = asyncEffect(
+        async () => {
+          spy();
+        },
+        [dependency],
+        { throttle: 1000 },
+      );
+
+      await vi.runAllTimersAsync();
+      expect(spy).toHaveBeenCalledTimes(1);
+
+      dependency.set(1);
+      await vi.advanceTimersByTimeAsync(500);
+      cleanup();
+      await vi.runAllTimersAsync();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it("unsubscribes from all dependencies on cleanup", async () => {
+      const spy = vi.fn();
+      const dep1 = signal(0);
+      const dep2 = signal(0);
+
+      const cleanup = asyncEffect(async () => {
+        spy();
+      }, [dep1, dep2]);
+
+      await vi.runAllTimersAsync();
+      expect(spy).toHaveBeenCalledTimes(1);
+
+      cleanup();
+
+      dep1.set(1);
+      dep2.set(1);
+      await vi.runAllTimersAsync();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it("cleanup prevents new executions", async () => {
+      const executionCount = vi.fn();
+      const dependency = signal(0);
+
+      const cleanup = asyncEffect(async () => {
+        executionCount();
+      }, [dependency]);
+
+      await vi.runAllTimersAsync();
+      const countAfterFirstRun = executionCount.mock.calls.length;
+
+      cleanup();
+
+      dependency.set(1);
+      await vi.runAllTimersAsync();
+
+      expect(executionCount).toHaveBeenCalledTimes(countAfterFirstRun);
+    });
+  });
+
+  describe("complex scenarios", () => {
+    it("combines debounce with abort", async () => {
+      const spy = vi.fn();
+      const signals: AbortSignal[] = [];
+      const dependency = signal(0);
+
+      asyncEffect(
+        async (signal) => {
+          if (signal) {
+            signals.push(signal);
+          }
+          spy(dependency.get());
+        },
+        [dependency],
+        { debounce: 200, abortable: true },
+      );
+
+      dependency.set(1);
+      await vi.advanceTimersByTimeAsync(100);
+
+      dependency.set(2);
+      await vi.advanceTimersByTimeAsync(200);
+
+      expect(spy).toHaveBeenCalledWith(2);
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it("combines throttle with error handling", async () => {
+      let attempts = 0;
+      const dependency = signal(0);
+
+      asyncEffect(
+        async () => {
+          attempts++;
+          if (attempts === 1) {
+            throw new Error("First attempt fails");
+          }
+        },
+        [dependency],
+        { throttle: 100, retries: 1 },
+      );
+
+      await vi.runAllTimersAsync();
+
+      expect(attempts).toBe(2);
+    });
+
+    it("handles rapid changes with all features enabled", async () => {
+      const results: number[] = [];
+      const dependency = signal(0);
+
+      asyncEffect(
+        async (signal) => {
+          const value = dependency.get();
+          await new Promise((resolve) => setTimeout(resolve, 50));
+          if (!signal?.aborted) {
+            results.push(value);
+          }
+        },
+        [dependency],
+        { debounce: 100, abortable: true, retries: 1 },
+      );
+
+      for (let i = 1; i <= 5; i++) {
+        dependency.set(i);
+        await vi.advanceTimersByTimeAsync(50);
+      }
+
+      await vi.runAllTimersAsync();
+
+      expect(results).toEqual([5]);
+    });
+  });
+});

lib/test/core/events.test.ts

···
+import { mount } from "@volt/core/binder";
+import { signal } from "@volt/core/signal";
 import { describe, expect, it, vi } from "vitest";
-import { mount } from "../../src/core/binder";
-import { signal } from "../../src/core/signal";
 
 describe("event bindings", () => {
   it("binds click events", () => {
···
     input.dispatchEvent(new Event("input"));
 
     expect(value.get()).toBe("changed");
+  });
+
+  describe("$el edge cases", () => {
+    it("$el is available in inline expressions", () => {
+      const button = document.createElement("button");
+      button.id = "test-button";
+      button.dataset.voltOnClick = "elementId.set($el.id)";
+
+      const elementId = signal("");
+      mount(button, { elementId });
+
+      button.click();
+
+      expect(elementId.get()).toBe("test-button");
+    });
+
+    it("can access element properties via $el in expressions", () => {
+      const input = document.createElement("input");
+      input.value = "initial";
+      input.dataset.voltOnInput = "value.set($el.value)";
+
+      const value = signal("");
+      mount(input, { value });
+
+      input.value = "changed";
+      input.dispatchEvent(new Event("input"));
+
+      expect(value.get()).toBe("changed");
+    });
+
+    it("$el persists across multiple event triggers", () => {
+      const button = document.createElement("button");
+      button.id = "btn";
+      button.dataset.voltOnClick = "ids.set([...ids.get(), $el.id])";
+
+      const ids = signal([] as string[]);
+      mount(button, { ids });
+
+      button.click();
+      button.click();
+
+      expect(ids.get()).toEqual(["btn", "btn"]);
+    });
+  });
+
+  describe("$event edge cases", () => {
+    it("can access event type via $event", () => {
+      const input = document.createElement("input");
+      input.dataset.voltOnInput = "eventType.set($event.type)";
+
+      const eventType = signal("");
+      mount(input, { eventType });
+
+      input.dispatchEvent(new Event("input"));
+
+      expect(eventType.get()).toBe("input");
+    });
+
+    it("$event.preventDefault works in expressions", () => {
+      const form = document.createElement("form");
+      form.dataset.voltOnSubmit = "handleSubmit";
+
+      const handleSubmit = (event: Event) => {
+        event.preventDefault();
+      };
+
+      mount(form, { handleSubmit });
+
+      const submitEvent = new Event("submit", { cancelable: true });
+      form.dispatchEvent(submitEvent);
+
+      expect(submitEvent.defaultPrevented).toBe(true);
+    });
+
+    it("can access event properties in expressions", () => {
+      const button = document.createElement("button");
+      button.dataset.voltOnClick = "wasShiftKey.set($event.shiftKey)";
+
+      const wasShiftKey = signal(false);
+      mount(button, { wasShiftKey });
+
+      const mouseEvent = new MouseEvent("click", { shiftKey: true });
+      button.dispatchEvent(mouseEvent);
+
+      expect(wasShiftKey.get()).toBe(true);
+    });
+  });
+
+  describe("$el and $event interaction", () => {
+    it("both $el and $event are available together", () => {
+      const input = document.createElement("input");
+      input.id = "test-input";
+      input.dataset.voltOnInput = "data.set({ id: $el.id, type: $event.type })";
+
+      const data = signal({} as { id: string; type: string });
+      mount(input, { data });
+
+      input.dispatchEvent(new Event("input"));
+
+      expect(data.get()).toEqual({ id: "test-input", type: "input" });
+    });
   });
 });

lib/test/core/lifecycle.test.ts

···
+import type { PluginContext } from "$types/volt";
+import { mount } from "@volt/core/binder";
+import {
+  clearAllGlobalHooks,
+  clearGlobalHooks,
+  getElementBindings,
+  isElementMounted,
+  notifyElementMounted,
+  notifyElementUnmounted,
+  registerElementHook,
+  registerGlobalHook,
+  unregisterGlobalHook,
+} from "@volt/core/lifecycle";
+import { registerPlugin } from "@volt/core/plugin";
+import { signal } from "@volt/core/signal";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+describe("lifecycle hooks", () => {
+  afterEach(() => {
+    clearAllGlobalHooks();
+  });
+
+  describe("global lifecycle hooks", () => {
+    describe("beforeMount", () => {
+      it("executes before mount", () => {
+        const executionOrder: string[] = [];
+        const root = document.createElement("div");
+        root.innerHTML = "<div data-volt-text=\"message\"></div>";
+
+        registerGlobalHook("beforeMount", () => {
+          executionOrder.push("beforeMount");
+        });
+
+        const message = signal("test");
+        executionOrder.push("before mount call");
+        mount(root, { message });
+        executionOrder.push("after mount call");
+
+        expect(executionOrder).toEqual(["before mount call", "beforeMount", "after mount call"]);
+      });
+
+      it("receives root and scope", () => {
+        let receivedRoot: Element | undefined;
+        let receivedScope: Record<string, unknown> | undefined;
+
+        const root = document.createElement("div");
+        const message = signal("test");
+
+        registerGlobalHook("beforeMount", (element: Element, scope: Record<string, unknown>) => {
+          receivedRoot = element;
+          receivedScope = scope;
+        });
+
+        mount(root, { message });
+
+        expect(receivedRoot).toBe(root);
+        expect(receivedScope).toEqual({ message });
+      });
+
+      it("can register multiple hooks", () => {
+        const hooks: number[] = [];
+        const root = document.createElement("div");
+
+        registerGlobalHook("beforeMount", () => {
+          hooks.push(1);
+        });
+        registerGlobalHook("beforeMount", () => {
+          hooks.push(2);
+        });
+
+        mount(root, {});
+
+        expect(hooks).toEqual([1, 2]);
+      });
+    });
+
+    describe("afterMount", () => {
+      it("executes after mount completes", () => {
+        const executionOrder: string[] = [];
+        const root = document.createElement("div");
+        root.innerHTML = "<div data-volt-text=\"message\"></div>";
+
+        registerGlobalHook("afterMount", () => {
+          executionOrder.push("afterMount");
+        });
+
+        const message = signal("test");
+        executionOrder.push("before mount");
+        mount(root, { message });
+        executionOrder.push("after mount");
+
+        expect(executionOrder).toEqual(["before mount", "afterMount", "after mount"]);
+      });
+
+      it("executes after mount completes", () => {
+        const root = document.createElement("div");
+        root.innerHTML = "<div data-volt-text=\"message\"></div>";
+
+        let mountCompleted = false;
+
+        registerGlobalHook("afterMount", () => {
+          mountCompleted = true;
+        });
+
+        const message = signal("hello");
+        mount(root, { message });
+
+        expect(mountCompleted).toBe(true);
+      });
+    });
+
+    describe("beforeUnmount", () => {
+      it("executes before unmount", () => {
+        const executionOrder: string[] = [];
+        const root = document.createElement("div");
+
+        registerGlobalHook("beforeUnmount", () => {
+          executionOrder.push("beforeUnmount");
+        });
+
+        const cleanup = mount(root, {});
+
+        executionOrder.push("before cleanup");
+        cleanup();
+        executionOrder.push("after cleanup");
+
+        expect(executionOrder).toEqual(["before cleanup", "beforeUnmount", "after cleanup"]);
+      });
+
+      it("executes before bindings are destroyed", () => {
+        const root = document.createElement("div");
+        root.innerHTML = "<div data-volt-text=\"message\"></div>";
+
+        let wasMounted = false;
+
+        registerGlobalHook("beforeUnmount", () => {
+          wasMounted = true;
+        });
+
+        const message = signal("hello");
+        const cleanup = mount(root, { message });
+
+        cleanup();
+
+        expect(wasMounted).toBe(true);
+      });
+    });
+
+    describe("afterUnmount", () => {
+      it("executes after unmount completes", () => {
+        const executionOrder: string[] = [];
+        const root = document.createElement("div");
+
+        registerGlobalHook("afterUnmount", () => {
+          executionOrder.push("afterUnmount");
+        });
+
+        const cleanup = mount(root, {});
+
+        executionOrder.push("before cleanup");
+        cleanup();
+        executionOrder.push("after cleanup");
+
+        expect(executionOrder).toEqual(["before cleanup", "afterUnmount", "after cleanup"]);
+      });
+    });
+
+    describe("hook registration management", () => {
+      it("can unregister hooks", () => {
+        const hook = vi.fn();
+        const root = document.createElement("div");
+
+        const unregister = registerGlobalHook("beforeMount", hook);
+
+        mount(root, {});
+        expect(hook).toHaveBeenCalledTimes(1);
+
+        unregister();
+
+        mount(root, {});
+        expect(hook).toHaveBeenCalledTimes(1);
+      });
+
+      it("unregisterGlobalHook removes hooks", () => {
+        const hook = vi.fn();
+        const root = document.createElement("div");
+
+        registerGlobalHook("beforeMount", hook);
+
+        mount(root, {});
+        expect(hook).toHaveBeenCalledTimes(1);
+
+        unregisterGlobalHook("beforeMount", hook);
+
+        mount(root, {});
+        expect(hook).toHaveBeenCalledTimes(1);
+      });
+
+      it("clearGlobalHooks removes all hooks for a lifecycle event", () => {
+        const hook1 = vi.fn();
+        const hook2 = vi.fn();
+        const root = document.createElement("div");
+
+        registerGlobalHook("beforeMount", hook1);
+        registerGlobalHook("beforeMount", hook2);
+
+        clearGlobalHooks("beforeMount");
+
+        mount(root, {});
+
+        expect(hook1).not.toHaveBeenCalled();
+        expect(hook2).not.toHaveBeenCalled();
+      });
+
+      it("clearAllGlobalHooks removes all hooks", () => {
+        const beforeMountHook = vi.fn();
+        const afterMountHook = vi.fn();
+        const root = document.createElement("div");
+
+        registerGlobalHook("beforeMount", beforeMountHook);
+        registerGlobalHook("afterMount", afterMountHook);
+
+        clearAllGlobalHooks();
+
+        mount(root, {});
+
+        expect(beforeMountHook).not.toHaveBeenCalled();
+        expect(afterMountHook).not.toHaveBeenCalled();
+      });
+    });
+
+    describe("error handling", () => {
+      it("catches and logs errors in beforeMount hooks", () => {
+        const consoleErrorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+        const root = document.createElement("div");
+
+        registerGlobalHook("beforeMount", () => {
+          throw new Error("beforeMount error");
+        });
+
+        expect(() => {
+          mount(root, {});
+        }).not.toThrow();
+
+        expect(consoleErrorSpy).toHaveBeenCalledWith("Error in global beforeMount hook:", expect.any(Error));
+
+        consoleErrorSpy.mockRestore();
+      });
+
+      it("continues executing other hooks after error", () => {
+        const consoleErrorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+        const hook2 = vi.fn();
+        const root = document.createElement("div");
+
+        registerGlobalHook("beforeMount", () => {
+          throw new Error("Error");
+        });
+        registerGlobalHook("beforeMount", hook2);
+
+        mount(root, {});
+
+        expect(hook2).toHaveBeenCalled();
+
+        consoleErrorSpy.mockRestore();
+      });
+    });
+  });
+
+  describe("element lifecycle", () => {
+    it("tracks element mounted state", () => {
+      const element = document.createElement("div");
+
+      expect(isElementMounted(element)).toBe(false);
+      notifyElementMounted(element);
+      expect(isElementMounted(element)).toBe(true);
+      notifyElementUnmounted(element);
+      expect(isElementMounted(element)).toBe(false);
+    });
+
+    it("executes onMount callbacks", () => {
+      const callback = vi.fn();
+      const element = document.createElement("div");
+
+      registerElementHook(element, "mount", callback);
+      notifyElementMounted(element);
+
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    it("executes onUnmount callbacks", () => {
+      const callback = vi.fn();
+      const element = document.createElement("div");
+
+      registerElementHook(element, "unmount", callback);
+      notifyElementMounted(element);
+      notifyElementUnmounted(element);
+
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    it("only executes onMount once", () => {
+      const callback = vi.fn();
+      const element = document.createElement("div");
+
+      registerElementHook(element, "mount", callback);
+      notifyElementMounted(element);
+      notifyElementMounted(element);
+
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    it("only executes onUnmount if element was mounted", () => {
+      const callback = vi.fn();
+      const element = document.createElement("div");
+
+      registerElementHook(element, "unmount", callback);
+      notifyElementUnmounted(element);
+
+      expect(callback).not.toHaveBeenCalled();
+    });
+
+    it("catches and logs errors in element hooks", () => {
+      const consoleErrorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+      const element = document.createElement("div");
+
+      registerElementHook(element, "mount", () => {
+        throw new Error("Mount error");
+      });
+
+      notifyElementMounted(element);
+      expect(consoleErrorSpy).toHaveBeenCalledWith("Error in element onMount hook:", expect.any(Error));
+
+      consoleErrorSpy.mockRestore();
+    });
+  });
+
+  describe("binding lifecycle", () => {
+    it("tracks mounted state for elements with bindings", () => {
+      const root = document.createElement("div");
+      root.dataset.voltText = "message";
+      const message = signal("test");
+      mount(root, { message });
+      expect(isElementMounted(root)).toBe(true);
+    });
+
+    it("returns empty array for elements with no tracked bindings", () => {
+      const element = document.createElement("div");
+      expect(getElementBindings(element)).toEqual([]);
+    });
+  });
+
+  describe("plugin lifecycle hooks", () => {
+    it("plugin can register mount hooks", () => {
+      const onMountSpy = vi.fn();
+      const root = document.createElement("div");
+      root.dataset.voltCustom = "value";
+
+      registerPlugin("custom", (context: PluginContext) => {
+        context.lifecycle.onMount(() => {
+          onMountSpy();
+        });
+      });
+
+      mount(root, {});
+
+      expect(onMountSpy).toHaveBeenCalled();
+    });
+
+    it("plugin can register unmount hooks", () => {
+      const onUnmountSpy = vi.fn();
+      const root = document.createElement("div");
+      root.dataset.voltCustom = "value";
+
+      registerPlugin("custom", (context: PluginContext) => {
+        context.lifecycle.onUnmount(() => {
+          onUnmountSpy();
+        });
+      });
+
+      const cleanup = mount(root, {});
+      cleanup();
+
+      expect(onUnmountSpy).toHaveBeenCalled();
+    });
+
+    it("plugin beforeBinding hooks execute before plugin handler", () => {
+      const executionOrder: string[] = [];
+      const root = document.createElement("div");
+      root.dataset.voltCustom = "value";
+
+      registerPlugin("custom", (context: PluginContext) => {
+        context.lifecycle.beforeBinding(() => {
+          executionOrder.push("beforeBinding");
+        });
+        executionOrder.push("handler");
+      });
+
+      mount(root, {});
+
+      expect(executionOrder).toEqual(["beforeBinding", "handler"]);
+    });
+
+    it("plugin afterBinding hooks execute after plugin handler", async () => {
+      const executionOrder: string[] = [];
+      const root = document.createElement("div");
+      root.dataset.voltCustom = "value";
+
+      registerPlugin("custom", (context: PluginContext) => {
+        executionOrder.push("handler");
+        context.lifecycle.afterBinding(() => {
+          executionOrder.push("afterBinding");
+        });
+      });
+
+      mount(root, {});
+
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(executionOrder).toEqual(["handler", "afterBinding"]);
+    });
+  });
+
+  describe("hook execution order", () => {
+    it("executes hooks in correct order during mount", () => {
+      const executionOrder: string[] = [];
+      const root = document.createElement("div");
+      root.innerHTML = "<div data-volt-text=\"message\"></div>";
+
+      registerGlobalHook("beforeMount", () => {
+        executionOrder.push("global:beforeMount");
+      });
+
+      registerGlobalHook("afterMount", () => {
+        executionOrder.push("global:afterMount");
+      });
+
+      const message = signal("test");
+      mount(root, { message });
+
+      expect(executionOrder).toEqual(["global:beforeMount", "global:afterMount"]);
+    });
+
+    it("executes hooks in correct order during unmount", () => {
+      const executionOrder: string[] = [];
+      const root = document.createElement("div");
+
+      registerGlobalHook("beforeUnmount", () => {
+        executionOrder.push("global:beforeUnmount");
+      });
+
+      registerGlobalHook("afterUnmount", () => {
+        executionOrder.push("global:afterUnmount");
+      });
+
+      const cleanup = mount(root, {});
+      cleanup();
+
+      expect(executionOrder).toEqual(["global:beforeUnmount", "global:afterUnmount"]);
+    });
+
+    it("executes mount and unmount in order", () => {
+      const executionOrder: string[] = [];
+      const root = document.createElement("div");
+
+      registerGlobalHook("beforeMount", () => {
+        executionOrder.push("beforeMount");
+      });
+
+      registerGlobalHook("afterMount", () => {
+        executionOrder.push("afterMount");
+      });
+
+      registerGlobalHook("beforeUnmount", () => {
+        executionOrder.push("beforeUnmount");
+      });
+
+      registerGlobalHook("afterUnmount", () => {
+        executionOrder.push("afterUnmount");
+      });
+
+      const cleanup = mount(root, {});
+      cleanup();
+
+      expect(executionOrder).toEqual(["beforeMount", "afterMount", "beforeUnmount", "afterUnmount"]);
+    });
+  });
+});

lib/test/core/plugin.test.ts

···
+import { clearPlugins, getRegisteredPlugins, hasPlugin, registerPlugin, unregisterPlugin } from "@volt/core/plugin";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { clearPlugins, getRegisteredPlugins, hasPlugin, registerPlugin, unregisterPlugin } from "../../src/core/plugin";
 
 describe("plugin system", () => {
   beforeEach(() => {
···
     it("registers a plugin with a given name", () => {
       const handler = vi.fn();
       registerPlugin("test", handler);
-
       expect(hasPlugin("test")).toBe(true);
     });
 
···
     it("returns true for registered plugins", () => {
       const handler = vi.fn();
       registerPlugin("test", handler);
-
       expect(hasPlugin("test")).toBe(true);
     });
 
···
 
     it("returns false when unregistering nonexistent plugin", () => {
       const result = unregisterPlugin("nonexistent");
-
       expect(result).toBe(false);
     });
   });
···
 
     it("returns array of registered plugin names", () => {
       const handler = vi.fn();
-
       registerPlugin("plugin1", handler);
       registerPlugin("plugin2", handler);
       registerPlugin("plugin3", handler);
 
       const plugins = getRegisteredPlugins();
-
       expect(plugins).toHaveLength(3);
       expect(plugins).toContain("plugin1");
       expect(plugins).toContain("plugin2");
···
       registerPlugin("plugin1", handler);
       registerPlugin("plugin2", handler);
       registerPlugin("plugin3", handler);
-
       clearPlugins();
 
       expect(getRegisteredPlugins()).toEqual([]);

lib/test/core/signal.test.ts

···
+import { computed, effect, signal } from "@volt/core/signal";
 import { describe, expect, it, vi } from "vitest";
-import { computed, effect, signal } from "../../src/core/signal";
 
 describe("signal", () => {
   it("creates a signal with an initial value", () => {
···
     const effectFunction = vi.fn();
 
     effect(effectFunction, [count]);
-
     expect(effectFunction).toHaveBeenCalledTimes(1);
   });
 

lib/tsconfig.json

···
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "types": ["vite/client"],
     "skipLibCheck": true,
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
     "moduleDetection": "force",
     "noEmit": true,
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
-    /* Path Aliases */
     "baseUrl": ".",
     "paths": { "$types/*": ["./src/types/*"], "@volt/core/*": ["./src/core/*"], "@volt/plugins/*": ["./src/plugins/*"] }
   },
-  "include": ["src", "lib/test"]
+  "include": ["src", "test"]
 }