sibujs 3.3.2 → 3.4.0

package/dist/index.d.cts

@@ -1,414 +1,347 @@
-import { T as TagProps, N as NodeChildren, a as NodeChild } from './tagFactory-S17H2qxu.cjs';
-export { D as Dispose, S as SVG_NS, t as tagFactory } from './tagFactory-S17H2qxu.cjs';
-import { R as ReactiveSignal } from './signal-BnWpq6WB.cjs';
+import { N as NodeChild, a as NodeChildren, T as TagProps } from './tagFactory-Bzupt4Pj.cjs';
+export { D as Dispose, S as SVG_NS, t as tagFactory } from './tagFactory-Bzupt4Pj.cjs';
 export { T as TrustedHTML, t as trustHTML } from './ssr-D62yFwuw.cjs';
+import { R as ReactiveSignal } from './signal-BnWpq6WB.cjs';
 
-type reactive<T> = T | (() => T);
-interface AnchorProps extends TagProps {
-    href?: reactive<string>;
-    target?: "_self" | "_blank" | "_parent" | "_top" | (string & {});
-    rel?: reactive<string>;
-    download?: reactive<string | boolean>;
-    hreflang?: reactive<string>;
-    referrerpolicy?: reactive<"" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url">;
-    ping?: reactive<string>;
-}
-type InputType = "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week";
-interface InputProps extends TagProps {
-    type?: InputType | (string & {});
-    name?: reactive<string>;
-    value?: reactive<string | number>;
-    placeholder?: reactive<string>;
-    required?: reactive<boolean>;
-    disabled?: reactive<boolean>;
-    readonly?: reactive<boolean>;
-    checked?: reactive<boolean>;
-    min?: reactive<string | number>;
-    max?: reactive<string | number>;
-    step?: reactive<string | number>;
-    minlength?: reactive<number>;
-    maxlength?: reactive<number>;
-    pattern?: reactive<string>;
-    autocomplete?: reactive<string>;
-    autofocus?: reactive<boolean>;
-    multiple?: reactive<boolean>;
-    accept?: reactive<string>;
-    size?: reactive<number>;
-    form?: reactive<string>;
-    list?: reactive<string>;
-    inputmode?: reactive<"none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url">;
-}
-interface ImgProps extends TagProps {
-    src?: reactive<string>;
-    alt?: reactive<string>;
-    width?: reactive<number | string>;
-    height?: reactive<number | string>;
-    loading?: reactive<"lazy" | "eager">;
-    decoding?: reactive<"sync" | "async" | "auto">;
-    srcset?: reactive<string>;
-    sizes?: reactive<string>;
-    crossorigin?: reactive<"anonymous" | "use-credentials">;
-    referrerpolicy?: reactive<string>;
-}
-interface ButtonProps extends TagProps {
-    type?: reactive<"button" | "submit" | "reset">;
-    name?: reactive<string>;
-    value?: reactive<string>;
-    disabled?: reactive<boolean>;
-    form?: reactive<string>;
-    formaction?: reactive<string>;
-    formenctype?: reactive<string>;
-    formmethod?: reactive<"get" | "post" | "dialog">;
-    formnovalidate?: reactive<boolean>;
-    formtarget?: reactive<string>;
-    autofocus?: reactive<boolean>;
-}
-interface FormProps extends TagProps {
-    action?: reactive<string>;
-    method?: reactive<"get" | "post" | "dialog">;
-    enctype?: reactive<"application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain">;
-    name?: reactive<string>;
-    novalidate?: reactive<boolean>;
-    target?: reactive<string>;
-    autocomplete?: reactive<"on" | "off">;
-    acceptcharset?: reactive<string>;
-}
-interface SelectProps extends TagProps {
-    name?: reactive<string>;
-    value?: reactive<string>;
-    disabled?: reactive<boolean>;
-    multiple?: reactive<boolean>;
-    required?: reactive<boolean>;
-    size?: reactive<number>;
-    autocomplete?: reactive<string>;
-    autofocus?: reactive<boolean>;
-    form?: reactive<string>;
-}
-interface TextareaProps extends TagProps {
-    name?: reactive<string>;
-    value?: reactive<string>;
-    placeholder?: reactive<string>;
-    disabled?: reactive<boolean>;
-    readonly?: reactive<boolean>;
-    required?: reactive<boolean>;
-    rows?: reactive<number>;
-    cols?: reactive<number>;
-    minlength?: reactive<number>;
-    maxlength?: reactive<number>;
-    wrap?: reactive<"hard" | "soft" | "off">;
-    autocomplete?: reactive<string>;
-    autofocus?: reactive<boolean>;
-    form?: reactive<string>;
-    spellcheck?: reactive<boolean>;
-}
-interface LabelProps extends TagProps {
-    for?: reactive<string>;
-    form?: reactive<string>;
-}
-interface OptionProps extends TagProps {
-    value?: reactive<string | number>;
-    selected?: reactive<boolean>;
-    disabled?: reactive<boolean>;
-    label?: reactive<string>;
-}
-interface MediaProps extends TagProps {
-    src?: reactive<string>;
-    autoplay?: reactive<boolean>;
-    controls?: reactive<boolean>;
-    loop?: reactive<boolean>;
-    muted?: reactive<boolean>;
-    preload?: reactive<"none" | "metadata" | "auto">;
-    crossorigin?: reactive<"anonymous" | "use-credentials">;
-}
-interface VideoProps extends MediaProps {
-    poster?: reactive<string>;
-    width?: reactive<number | string>;
-    height?: reactive<number | string>;
-    playsinline?: reactive<boolean>;
+interface ErrorBoundaryOptions {
+    /**
+     * Fallback renderer given an Error and retry callback.
+     * Memoized internally — only re-created when the error changes.
+     */
+    fallback?: (error: Error, retry: () => void) => Element;
+    /**
+     * Called when an error is caught (sync or async).
+     */
+    onError?: (error: Error) => void;
+    /**
+     * A list of reactive getters. Whenever any of these values change
+     * after an error has been caught, the boundary automatically resets
+     * (clears the error and re-renders). Useful for recovering from a
+     * failed render after the user navigates, changes filters, or
+     * otherwise picks a new input that might not fail this time.
+     *
+     * @example
+     * ```ts
+     * const [route, setRoute] = signal("/");
+     * ErrorBoundary(
+     *   { resetKeys: [route] },
+     *   () => div(riskyPageFor(route())),
+     * );
+     * ```
+     */
+    resetKeys?: Array<() => unknown>;
 }
-type AudioProps = MediaProps;
-
-type TypedTagFunction<Props extends TagProps, El extends Element> = (first?: Props | NodeChildren, second?: NodeChildren) => El;
+/** @deprecated Renamed to `ErrorBoundaryOptions`; kept for typing compatibility. */
+type ErrorBoundaryProps = ErrorBoundaryOptions;
+/**
+ * ErrorBoundary component using SibuJS reactive pattern.
+ *
+ * Features:
+ * - Catches sync errors thrown by children
+ * - Catches the rejection of a Promise *returned* by children (async components)
+ *   — it does NOT observe fire-and-forget async errors (rejections from timers,
+ *   event handlers, or detached/unawaited promises), which surface as global
+ *   `unhandledrejection` events instead.
+ * - Supports nested ErrorBoundaries (inner catches first, outer catches propagation)
+ * - Retry functionality to clear error and re-render children
+ * - Memoized fallback to avoid re-creating fallback UI on every render
+ * - onError callback for logging/telemetry
+ * - Improved CSS styling
+ */
+declare function ErrorBoundary(children: () => Element): Element;
+declare function ErrorBoundary(options: ErrorBoundaryOptions, children: () => Element): Element;
 
-declare const head: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const body: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const title: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const div: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const span: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const section: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const article: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const header: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const footer: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const nav: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const main: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const aside: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const address: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const p: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const h1: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const h2: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const h3: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const h4: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const h5: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const h6: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const blockquote: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const dd: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const dl: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const dt: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const figcaption: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const figure: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const hr: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const li: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const ol: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const ul: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const pre: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const a: TypedTagFunction<AnchorProps, HTMLAnchorElement>;
-declare const abbr: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const b: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const bdi: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const bdo: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const br: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const cite: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const code: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const data: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const dfn: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const em: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const i: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const kbd: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const mark: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const q: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const rp: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const rt: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const ruby: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const s: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const samp: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const small: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const strong: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const sub: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const sup: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const time: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const u: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const var_: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const area: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const audio: TypedTagFunction<AudioProps, HTMLAudioElement>;
-declare const img: TypedTagFunction<ImgProps, HTMLImageElement>;
-declare const map: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const track$1: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const video: TypedTagFunction<VideoProps, HTMLVideoElement>;
-declare const embed: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const iframe: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const object: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const param: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const picture: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const portal: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const source: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const svg: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const math: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const canvas: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const noscript: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const script: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const del: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const ins: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const caption: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const col: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const colgroup: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const table: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const tbody: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const td: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const tfoot: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const th: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const thead: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const tr: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const button: TypedTagFunction<ButtonProps, HTMLButtonElement>;
-declare const datalist: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const fieldset: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const form: TypedTagFunction<FormProps, HTMLFormElement>;
-declare const input: TypedTagFunction<InputProps, HTMLInputElement>;
-declare const label: TypedTagFunction<LabelProps, HTMLLabelElement>;
-declare const legend: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const meter: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const optgroup: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const option: TypedTagFunction<OptionProps, HTMLOptionElement>;
-declare const output: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const progress: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const select: TypedTagFunction<SelectProps, HTMLSelectElement>;
-declare const textarea: TypedTagFunction<TextareaProps, HTMLTextAreaElement>;
-declare const details: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const dialog: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const menu: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const summary: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const slot: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const template: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const base: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const link: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const meta: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const style: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const circle: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const ellipse: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const g: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const line: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const path: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const polygon: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const polyline: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const rect: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const text: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const tspan: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const defs: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const clipPath: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const mask: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const pattern: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const linearGradient: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const radialGradient: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const stop: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const use: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const symbol: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const marker: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const center: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const font: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const marquee: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
-declare const customElement: (tagName: string) => (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+type ErrorSeverity = "error" | "warning" | "info";
+interface ErrorDisplayProps {
+    /** The Error (or error-like value) to show. */
+    error: unknown;
+    /** Severity colour. Default `"error"`. */
+    severity?: ErrorSeverity;
+    /** Optional headline override. By default `error.message` is used. */
+    title?: string;
+    /**
+     * Label for the primary action. Shown next to a Reload button.
+     * Leave unset to hide the retry action.
+     */
+    retryLabel?: string;
+    /** Callback for the retry button. */
+    onRetry?: () => void;
+    /**
+     * If `true`, the Reload button is hidden. Useful for embedded
+     * error panels where a full page reload is inappropriate.
+     */
+    hideReload?: boolean;
+    /**
+     * If `true`, the stack trace and metadata are always shown even in
+     * production builds. Default: only shown in dev.
+     */
+    alwaysShowDetails?: boolean;
+    /**
+     * Extra metadata rendered as a key/value list under the message.
+     * Useful for attaching request IDs, user IDs, etc.
+     */
+    metadata?: Record<string, string | number | boolean | null | undefined>;
+}
+/**
+ * Rich error display component. Wire an error-like value in and get
+ * a colored panel back with copy, retry, reload, stack, cause chain,
+ * and metadata — all built from tag factories. Reusable anywhere
+ * (inside `ErrorBoundary`, from a fetch failure, from a form submit).
+ *
+ * @example
+ * ```ts
+ * button(
+ *   { on: { click: async () => {
+ *     try { await save(); }
+ *     catch (err) { mount(ErrorDisplay({ error: err, onRetry: save }), errorHost); }
+ *   }}},
+ *   "Save",
+ * );
+ * ```
+ */
+declare function ErrorDisplay(props: ErrorDisplayProps): Element;
 
+interface LoadingProps {
+    /** Text to show alongside the spinner */
+    text?: string;
+    /** Visual variant: "spinner" (default) or "dots" */
+    variant?: "spinner" | "dots";
+    /** Size: "sm", "md" (default), "lg" */
+    size?: "sm" | "md" | "lg";
+}
 /**
- * Tagged template literal for building Sibu elements with HTML-like syntax.
- * Runtime-only — no compiler or build step required.
+ * Built-in loading indicator component.
  *
- * Templates are parsed once per call site and cached. Subsequent calls at the
- * same source location skip parsing entirely and only replay the cached
- * structure with fresh expression values.
+ * @example
+ * ```ts
+ * Loading();                             // Default spinner
+ * Loading({ text: "Loading data..." });  // With text
+ * Loading({ variant: "dots" });          // Dots animation
+ * Loading({ size: "lg" });               // Large spinner
+ * ```
  */
-declare function html(strings: TemplateStringsArray, ...values: unknown[]): Element;
+declare function Loading(props?: LoadingProps): HTMLElement;
 
 /**
- * Mounts a root component into a DOM element.
- * Supports both function components and pre-created HTMLElements.
+ * An action is a reusable element-level behavior.
+ * It receives the element and an optional parameter, and may return
+ * a cleanup function that runs when the element is disposed.
  */
-declare function mount(component: (() => Element) | Element | Node, container: Element | null): {
-    node: Node;
-    unmount: () => void;
-};
-
+type ActionFn<T = void> = (element: HTMLElement, param: T) => (() => void) | undefined;
 /**
- * Renders a list of nodes efficiently with key-based diffing and
- * LIS-based move minimization.
+ * Register a reusable action under a name so it can be applied by string —
+ * `action(el, "name", param)` — or looked up via {@link getAction}.
  *
- * The reconciliation algorithm works as follows:
- * 1. Build or reuse nodes by key (create new, keep existing).
- * 2. Remove nodes whose keys no longer exist.
- * 3. For nodes that existed in both old and new lists, compute their
- *    old indices and find the Longest Increasing Subsequence (LIS).
- *    Nodes in the LIS are already in the correct relative order and
- *    do NOT need to be moved. Only nodes outside the LIS are moved.
- * 4. Walk the new key list in reverse and insert/position each node,
- *    skipping DOM operations for nodes that are part of the LIS.
+ * Re-registering the same name overwrites the previous action. The built-in
+ * actions (`clickOutside`, `longPress`, `copyOnClick`, `autoResize`,
+ * `trapFocus`) are auto-registered under their export names.
+ */
+declare function registerAction<T>(name: string, fn: ActionFn<T>): void;
+/** Look up a registered action by name, or `undefined` if none is registered. */
+declare function getAction<T = unknown>(name: string): ActionFn<T> | undefined;
+/**
+ * Attach a reusable action (element-level behavior) to an element.
+ * The action's cleanup function (if returned) is automatically registered
+ * via `registerDisposer`, so it runs when the element is disposed.
  *
- * The render callback receives reactive getters `() => T` and `() => number`
- * instead of plain values. This ensures the callback always reads fresh data
- * when a keyed item's data changes but its key stays the same, since the DOM
- * is reused without re-calling render.
+ * The action may be passed directly, or by the name it was registered under
+ * (see {@link registerAction}). Actions are composable — multiple can be
+ * applied to the same element.
  *
- * @param getArray A reactive getter returning an array.
- * @param render A function that receives reactive item and index getters and returns a NodeChild.
- * @param options A key function for unique identity of items.
- * @returns A Comment node serving as the anchor for the list.
+ * @param element The target element
+ * @param action The action function, or the name of a registered action
+ * @param param Optional parameter passed to the action
+ *
+ * @example
+ * ```ts
+ * div({
+ *   onElement: (el) => {
+ *     action(el, clickOutside, () => setOpen(false));     // by reference
+ *     action(el, "longPress", { duration: 500, callback: onLongPress }); // by name
+ *   },
+ * }, "Content");
+ * ```
  */
-declare function each<T>(getArray: () => T[], render: (item: () => T, index: () => number) => NodeChild, options: {
-    key: (item: T) => string | number;
-}): Comment;
-
+declare function action<T>(element: HTMLElement, action: ActionFn<T> | string, param: T): void;
+declare function action(element: HTMLElement, action: ActionFn<void> | string): void;
 /**
- * Fragment groups multiple nodes without adding a wrapper DOM element.
- * Returns a DocumentFragment that can be appended to any parent.
+ * Fires a callback when the user clicks outside the element.
+ * Useful for closing dropdowns, modals, and popovers.
  *
  * @example
  * ```ts
- * div([
- *   Fragment([
- *     p("First"),
- *     p("Second"),
- *   ])
- * ]);
+ * action(el, clickOutside, () => setOpen(false));
  * ```
+ */
+declare const clickOutside: ActionFn<() => void>;
+/**
+ * Options for the longPress action.
+ */
+interface LongPressOptions {
+    /** Duration in milliseconds before the press is considered "long". Default: 500 */
+    duration?: number;
+    /** Callback fired when the long press is detected. */
+    callback: () => void;
+}
+/**
+ * Fires a callback after a sustained press on the element.
  *
- * @param nodes Array of child nodes to include in the fragment
- * @returns A DocumentFragment containing all nodes
+ * @example
+ * ```ts
+ * action(el, longPress, { duration: 800, callback: onLongPress });
+ * ```
  */
-declare function Fragment(nodes: NodeChildren[]): DocumentFragment;
-
+declare const longPress: ActionFn<LongPressOptions>;
 /**
- * Portal renders nodes into a DOM node outside the parent component hierarchy.
- * Useful for modals, tooltips, dropdowns, and overlays.
+ * Copies the element's textContent to the clipboard on click.
+ * Optionally accepts a custom getter for the text to copy.
  *
- * Cleanup integrates with `dispose()` / `registerDisposer()` so portals
- * are properly torn down when the anchor is disposed by `when()`, `match()`,
- * `each()`, or manual `dispose(anchor)`.
+ * @example
+ * ```ts
+ * // Copy element text
+ * action(el, copyOnClick);
  *
- * @param nodes Function that returns the content to render
- * @param target Target DOM element (defaults to document.body)
- * @returns A Comment anchor node in the original position
+ * // Copy custom value
+ * action(el, copyOnClick, () => secretToken());
+ * ```
+ */
+declare const copyOnClick: ActionFn<(() => string) | undefined>;
+/**
+ * Auto-resizes a textarea to fit its content.
+ * Adjusts height on input and on initial attach.
  *
  * @example
  * ```ts
- * // Render modal at document.body
- * Portal(() => div("modal", "Modal content"));
+ * const ta = textarea({ placeholder: "Type here..." });
+ * action(ta, autoResize);
+ * ```
+ */
+declare const autoResize: ActionFn<void>;
+/**
+ * Traps keyboard focus within the element (Tab and Shift+Tab cycle).
+ * Essential for accessible modals and dialogs.
  *
- * // Render into specific container
- * const overlay = document.getElementById("overlay-root")!;
- * Portal(() => div("Tooltip"), overlay);
+ * @example
+ * ```ts
+ * action(el, trapFocus);
  * ```
  */
-declare function Portal(nodes: () => HTMLElement, target?: HTMLElement): Comment;
+declare const trapFocus: ActionFn<void>;
 
-type Component$1 = () => HTMLElement;
+type ErrorHandler = (error: unknown, context?: string) => void;
 /**
- * Register a component by name for dynamic resolution.
+ * Wraps a function in a try/catch block with typed error handling.
+ * Supports both sync and async functions (catches Promise rejections).
  *
- * @param name Unique component identifier
- * @param component The component function
+ * @param fn Function to execute safely
+ * @param onError Optional error handler (receives error and optional context)
+ * @returns The function's return value, or null on error
+ */
+declare function catchError<T>(fn: () => T, onError?: ErrorHandler): T | null;
+/**
+ * Async version of catchError for explicit async/await usage.
+ *
+ * @param fn Async function to execute safely
+ * @param onError Optional error handler
+ * @returns Promise resolving to the result or null on error
+ */
+declare function catchErrorAsync<T>(fn: () => Promise<T>, onError?: ErrorHandler): Promise<T | null>;
+/**
+ * Sets a global error handler used by default if no onError is provided.
+ */
+declare function setGlobalErrorHandler(handler: ErrorHandler): void;
+
+/**
+ * Context API for SibuJS — a reactive global value that any component
+ * can read without prop drilling.
+ *
+ * Note: this is a **global reactive store**, not a subtree-scoped DI
+ * system. Calling `provide()` sets the value for ALL consumers, not
+ * just descendants of the provider. For most apps this is sufficient
+ * — use separate `context()` instances for independent scopes.
  *
  * @example
  * ```ts
- * registerComponent("UserCard", UserCard);
- * registerComponent("AdminPanel", AdminPanel);
+ * // Create a context with a default value
+ * const ThemeContext = context("light");
+ *
+ * // Set the value (global — affects all consumers)
+ * ThemeContext.provide("dark");
+ *
+ * // Read reactively from any component
+ * function Child() {
+ *   const theme = ThemeContext.use(); // reactive getter
+ *   return div(() => `Theme: ${theme()}`);
+ * }
  * ```
  */
-declare function registerComponent(name: string, component: Component$1): void;
+interface Context<T> {
+    /**
+     * Set the context value globally. Affects all consumers.
+     *
+     * Returns a `restore` function that re-sets the context to the value it
+     * had *before* this `provide` call. Useful for scoped overrides:
+     *
+     * ```ts
+     * const restore = Theme.provide("dark");
+     * try { renderChild(); } finally { restore(); }
+     * ```
+     *
+     * Callers that don't need scoping can ignore the return value — existing
+     * semantics are preserved.
+     */
+    provide(value: T): () => void;
+    /** Get a reactive getter for the current context value. */
+    use(): () => T;
+    /** Get the current value directly (non-reactive). */
+    get(): T;
+    /** Update the provided value reactively. */
+    set(value: T): void;
+    /**
+     * Run `fn` with the context temporarily set to `value`, then restore the
+     * previous value (even if `fn` throws). Returns the result of `fn`.
+     */
+    withContext<R>(value: T, fn: () => R): R;
+}
 /**
- * Unregister a previously registered component.
+ * Creates a new context with an optional default value.
+ *
+ * @param defaultValue The fallback value when no provider is found
+ * @returns A Context object with provide, use, get, and set methods
  */
-declare function unregisterComponent(name: string): void;
+declare function context<T>(defaultValue: T): Context<T>;
+
 /**
- * Resolve and render a dynamically registered component by name.
- * Returns a placeholder if the component is not found.
+ * Generate a stable, framework-unique ID string suitable for a11y pairing
+ * (`aria-labelledby`, `htmlFor` + `id`, etc.).
  *
- * @param name Component name to resolve
- * @returns The rendered HTMLElement or a fallback
+ * Each call returns a fresh incrementing id. Optionally accepts a prefix.
+ *
+ * IDs are plain strings (not reactive) — call once per component instance
+ * and reuse the returned value for both sides of the association.
+ *
+ * @param prefix Optional prefix, default "sibu"
+ * @returns A unique id like `"sibu-1"` or `"my-input-2"`
  *
  * @example
  * ```ts
- * registerComponent("Widget", MyWidget);
- * div([resolveComponent("Widget")]);
+ * function Field(labelText: string) {
+ *   const id = createId("field");
+ *   return div([
+ *     label({ for: id }, labelText),
+ *     input({ id }),
+ *   ]);
+ * }
  * ```
  */
-declare function resolveComponent(name: string): HTMLElement;
+declare function createId(prefix?: string): string;
 /**
- * Dynamic component that reactively switches between components
- * based on a reactive getter returning a component name or function.
- *
- * @param is Reactive getter returning component name (string) or component function
- * @param props Optional props to pass
- * @returns Container element that swaps content reactively
+ * Reset the id counter. Intended for tests and SSR setups that want
+ * deterministic ids across runs.
  *
- * @example
- * ```ts
- * const [view, setView] = signal("list");
- * DynamicComponent(() => view()); // Renders registered "list" component
- * setView("grid"); // Swaps to registered "grid" component
- * ```
+ * @internal
  */
-declare function DynamicComponent(is: () => string | Component$1): HTMLElement;
-
-type SlotFn = () => Element | string | number | null | undefined;
-type Slots = Record<string, SlotFn>;
-declare function getSlot(slots: Slots | undefined, name?: string): SlotFn | undefined;
+declare function __resetIdCounter(): void;
 
 /**
  * Conditional rendering directive. Shows or hides an element reactively.
@@ -481,6 +414,397 @@ declare function when<T>(condition: () => T, thenBranch: () => NodeChild, elseBr
  */
 declare function match<T extends string | number>(value: () => T, cases: Record<string, () => NodeChild>, fallback?: () => NodeChild): Comment;
 
+/**
+ * Register a teardown function for a DOM node.
+ * When dispose(node) is called, all registered teardowns run.
+ */
+declare function registerDisposer(node: Node, teardown: () => void): void;
+/**
+ * Run all registered teardowns for a node and its descendants,
+ * cleaning up reactive subscriptions to prevent memory leaks.
+ * Call this when removing elements from the DOM.
+ *
+ * Uses an iterative depth-first traversal to avoid stack overflow
+ * on deeply nested DOM trees.
+ */
+declare function dispose(node: Node): void;
+/**
+ * Check for potential binding leaks. Returns the number of active DOM bindings.
+ * In dev mode, logs a warning if the count exceeds the threshold.
+ * In production, _isDev is false so the counter is always 0.
+ */
+declare function checkLeaks(warnThreshold?: number): number;
+
+type Component$1 = () => HTMLElement;
+/**
+ * Register a component by name for dynamic resolution.
+ *
+ * @param name Unique component identifier
+ * @param component The component function
+ *
+ * @example
+ * ```ts
+ * registerComponent("UserCard", UserCard);
+ * registerComponent("AdminPanel", AdminPanel);
+ * ```
+ */
+declare function registerComponent(name: string, component: Component$1): void;
+/**
+ * Unregister a previously registered component.
+ */
+declare function unregisterComponent(name: string): void;
+/**
+ * Resolve and render a dynamically registered component by name.
+ * Returns a placeholder if the component is not found.
+ *
+ * @param name Component name to resolve
+ * @returns The rendered HTMLElement or a fallback
+ *
+ * @example
+ * ```ts
+ * registerComponent("Widget", MyWidget);
+ * div([resolveComponent("Widget")]);
+ * ```
+ */
+declare function resolveComponent(name: string): HTMLElement;
+/**
+ * Dynamic component that reactively switches between components
+ * based on a reactive getter returning a component name or function.
+ *
+ * @param is Reactive getter returning component name (string) or component function
+ * @param props Optional props to pass
+ * @returns Container element that swaps content reactively
+ *
+ * @example
+ * ```ts
+ * const [view, setView] = signal("list");
+ * DynamicComponent(() => view()); // Renders registered "list" component
+ * setView("grid"); // Swaps to registered "grid" component
+ * ```
+ */
+declare function DynamicComponent(is: () => string | Component$1): HTMLElement;
+
+/**
+ * Renders a list of nodes efficiently with key-based diffing and
+ * LIS-based move minimization.
+ *
+ * The reconciliation algorithm works as follows:
+ * 1. Build or reuse nodes by key (create new, keep existing).
+ * 2. Remove nodes whose keys no longer exist.
+ * 3. For nodes that existed in both old and new lists, compute their
+ *    old indices and find the Longest Increasing Subsequence (LIS).
+ *    Nodes in the LIS are already in the correct relative order and
+ *    do NOT need to be moved. Only nodes outside the LIS are moved.
+ * 4. Walk the new key list in reverse and insert/position each node,
+ *    skipping DOM operations for nodes that are part of the LIS.
+ *
+ * The render callback receives reactive getters `() => T` and `() => number`
+ * instead of plain values. This ensures the callback always reads fresh data
+ * when a keyed item's data changes but its key stays the same, since the DOM
+ * is reused without re-calling render.
+ *
+ * @param getArray A reactive getter returning an array.
+ * @param render A function that receives reactive item and index getters and returns a NodeChild.
+ * @param options A key function for unique identity of items.
+ * @returns A Comment node serving as the anchor for the list.
+ */
+declare function each<T>(getArray: () => T[], render: (item: () => T, index: () => number) => NodeChild, options: {
+    key: (item: T) => string | number;
+}): Comment;
+
+/**
+ * Fragment groups multiple nodes without adding a wrapper DOM element.
+ * Returns a DocumentFragment that can be appended to any parent.
+ *
+ * @example
+ * ```ts
+ * div([
+ *   Fragment([
+ *     p("First"),
+ *     p("Second"),
+ *   ])
+ * ]);
+ * ```
+ *
+ * @param nodes Array of child nodes to include in the fragment
+ * @returns A DocumentFragment containing all nodes
+ */
+declare function Fragment(nodes: NodeChildren[]): DocumentFragment;
+
+/**
+ * Tagged template literal for building Sibu elements with HTML-like syntax.
+ * Runtime-only — no compiler or build step required.
+ *
+ * Templates are parsed once per call site and cached. Subsequent calls at the
+ * same source location skip parsing entirely and only replay the cached
+ * structure with fresh expression values.
+ */
+declare function html(strings: TemplateStringsArray, ...values: unknown[]): Element;
+
+type reactive<T> = T | (() => T);
+interface AnchorProps extends TagProps {
+    href?: reactive<string>;
+    target?: "_self" | "_blank" | "_parent" | "_top" | (string & {});
+    rel?: reactive<string>;
+    download?: reactive<string | boolean>;
+    hreflang?: reactive<string>;
+    referrerpolicy?: reactive<"" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url">;
+    ping?: reactive<string>;
+}
+type InputType = "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week";
+interface InputProps extends TagProps {
+    type?: InputType | (string & {});
+    name?: reactive<string>;
+    value?: reactive<string | number>;
+    placeholder?: reactive<string>;
+    required?: reactive<boolean>;
+    disabled?: reactive<boolean>;
+    readonly?: reactive<boolean>;
+    checked?: reactive<boolean>;
+    min?: reactive<string | number>;
+    max?: reactive<string | number>;
+    step?: reactive<string | number>;
+    minlength?: reactive<number>;
+    maxlength?: reactive<number>;
+    pattern?: reactive<string>;
+    autocomplete?: reactive<string>;
+    autofocus?: reactive<boolean>;
+    multiple?: reactive<boolean>;
+    accept?: reactive<string>;
+    size?: reactive<number>;
+    form?: reactive<string>;
+    list?: reactive<string>;
+    inputmode?: reactive<"none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url">;
+}
+interface ImgProps extends TagProps {
+    src?: reactive<string>;
+    alt?: reactive<string>;
+    width?: reactive<number | string>;
+    height?: reactive<number | string>;
+    loading?: reactive<"lazy" | "eager">;
+    decoding?: reactive<"sync" | "async" | "auto">;
+    srcset?: reactive<string>;
+    sizes?: reactive<string>;
+    crossorigin?: reactive<"anonymous" | "use-credentials">;
+    referrerpolicy?: reactive<string>;
+}
+interface ButtonProps extends TagProps {
+    type?: reactive<"button" | "submit" | "reset">;
+    name?: reactive<string>;
+    value?: reactive<string>;
+    disabled?: reactive<boolean>;
+    form?: reactive<string>;
+    formaction?: reactive<string>;
+    formenctype?: reactive<string>;
+    formmethod?: reactive<"get" | "post" | "dialog">;
+    formnovalidate?: reactive<boolean>;
+    formtarget?: reactive<string>;
+    autofocus?: reactive<boolean>;
+}
+interface FormProps extends TagProps {
+    action?: reactive<string>;
+    method?: reactive<"get" | "post" | "dialog">;
+    enctype?: reactive<"application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain">;
+    name?: reactive<string>;
+    novalidate?: reactive<boolean>;
+    target?: reactive<string>;
+    autocomplete?: reactive<"on" | "off">;
+    acceptcharset?: reactive<string>;
+}
+interface SelectProps extends TagProps {
+    name?: reactive<string>;
+    value?: reactive<string>;
+    disabled?: reactive<boolean>;
+    multiple?: reactive<boolean>;
+    required?: reactive<boolean>;
+    size?: reactive<number>;
+    autocomplete?: reactive<string>;
+    autofocus?: reactive<boolean>;
+    form?: reactive<string>;
+}
+interface TextareaProps extends TagProps {
+    name?: reactive<string>;
+    value?: reactive<string>;
+    placeholder?: reactive<string>;
+    disabled?: reactive<boolean>;
+    readonly?: reactive<boolean>;
+    required?: reactive<boolean>;
+    rows?: reactive<number>;
+    cols?: reactive<number>;
+    minlength?: reactive<number>;
+    maxlength?: reactive<number>;
+    wrap?: reactive<"hard" | "soft" | "off">;
+    autocomplete?: reactive<string>;
+    autofocus?: reactive<boolean>;
+    form?: reactive<string>;
+    spellcheck?: reactive<boolean>;
+}
+interface LabelProps extends TagProps {
+    for?: reactive<string>;
+    form?: reactive<string>;
+}
+interface OptionProps extends TagProps {
+    value?: reactive<string | number>;
+    selected?: reactive<boolean>;
+    disabled?: reactive<boolean>;
+    label?: reactive<string>;
+}
+interface MediaProps extends TagProps {
+    src?: reactive<string>;
+    autoplay?: reactive<boolean>;
+    controls?: reactive<boolean>;
+    loop?: reactive<boolean>;
+    muted?: reactive<boolean>;
+    preload?: reactive<"none" | "metadata" | "auto">;
+    crossorigin?: reactive<"anonymous" | "use-credentials">;
+}
+interface VideoProps extends MediaProps {
+    poster?: reactive<string>;
+    width?: reactive<number | string>;
+    height?: reactive<number | string>;
+    playsinline?: reactive<boolean>;
+}
+type AudioProps = MediaProps;
+
+type TypedTagFunction<Props extends TagProps, El extends Element> = (first?: Props | NodeChildren, second?: NodeChildren) => El;
+
+declare const head: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const body: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const title: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const div: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const span: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const section: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const article: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const header: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const footer: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const nav: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const main: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const aside: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const address: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const p: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const h1: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const h2: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const h3: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const h4: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const h5: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const h6: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const blockquote: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const dd: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const dl: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const dt: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const figcaption: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const figure: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const hr: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const li: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const ol: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const ul: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const pre: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const a: TypedTagFunction<AnchorProps, HTMLAnchorElement>;
+declare const abbr: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const b: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const bdi: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const bdo: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const br: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const cite: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const code: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const data: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const dfn: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const em: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const i: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const kbd: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const mark: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const q: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const rp: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const rt: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const ruby: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const s: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const samp: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const small: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const strong: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const sub: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const sup: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const time: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const u: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const var_: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const area: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const audio: TypedTagFunction<AudioProps, HTMLAudioElement>;
+declare const img: TypedTagFunction<ImgProps, HTMLImageElement>;
+declare const map: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const track$1: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const video: TypedTagFunction<VideoProps, HTMLVideoElement>;
+declare const embed: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const iframe: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const object: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const param: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const picture: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const portal: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const source: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const svg: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const math: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const canvas: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const noscript: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const script: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const del: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const ins: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const caption: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const col: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const colgroup: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const table: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const tbody: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const td: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const tfoot: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const th: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const thead: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const tr: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const button: TypedTagFunction<ButtonProps, HTMLButtonElement>;
+declare const datalist: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const fieldset: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const form: TypedTagFunction<FormProps, HTMLFormElement>;
+declare const input: TypedTagFunction<InputProps, HTMLInputElement>;
+declare const label: TypedTagFunction<LabelProps, HTMLLabelElement>;
+declare const legend: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const meter: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const optgroup: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const option: TypedTagFunction<OptionProps, HTMLOptionElement>;
+declare const output: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const progress: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const select: TypedTagFunction<SelectProps, HTMLSelectElement>;
+declare const textarea: TypedTagFunction<TextareaProps, HTMLTextAreaElement>;
+declare const details: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const dialog: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const menu: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const summary: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const slot: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const template: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const base: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const link: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const meta: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const style: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const circle: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const ellipse: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const g: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const line: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const path: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const polygon: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const polyline: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const rect: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const text: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const tspan: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const defs: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const clipPath: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const mask: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const pattern: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const linearGradient: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const radialGradient: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const stop: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const use: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const symbol: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const marker: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const center: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const font: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const marquee: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const customElement: (tagName: string) => (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+
 /**
  * Options for KeepAlive.
  */
@@ -519,221 +843,356 @@ interface KeepAliveOptions {
  */
 declare function KeepAlive(activeKey: () => string, cases: Record<string, () => Node>, options?: KeepAliveOptions): Comment;
 
+declare function takePendingError(node: Element): Error | undefined;
+type Component = () => HTMLElement;
+type LazyImport = () => Promise<{
+    default: Component;
+}>;
 /**
- * An action is a reusable element-level behavior.
- * It receives the element and an optional parameter, and may return
- * a cleanup function that runs when the element is disposed.
+ * lazy() enables code-splitting by deferring the import of a component
+ * until it is first rendered. Returns a wrapper component that shows a
+ * loading state while the import resolves.
+ *
+ * @example
+ * ```ts
+ * const LazyDashboard = lazy(() => import("./Dashboard"));
+ *
+ * // Use inside Suspense for custom loading UI
+ * Suspense({
+ *   nodes: () => LazyDashboard(),
+ *   fallback: () => div("Loading dashboard..."),
+ * });
+ *
+ * // Or use standalone — shows default "Loading..." text
+ * LazyDashboard();
+ * ```
+ *
+ * @param importFn Dynamic import function returning `{ default: Component }`
+ * @returns A component function that lazy-loads on first call
  */
-type ActionFn<T = void> = (element: HTMLElement, param: T) => (() => void) | undefined;
+declare function lazy(importFn: LazyImport): Component;
 /**
- * Register a reusable action under a name so it can be applied by string —
- * `action(el, "name", param)` — or looked up via {@link getAction}.
+ * Suspense provides a fallback UI while lazy or async nodes are loading.
  *
- * Re-registering the same name overwrites the previous action. The built-in
- * actions (`clickOutside`, `longPress`, `copyOnClick`, `autoResize`,
- * `trapFocus`) are auto-registered under their export names.
+ * @example
+ * ```ts
+ * Suspense({
+ *   nodes: () => LazyChart(),
+ *   fallback: () => div("Loading chart..."),
+ * });
+ * ```
+ *
+ * @param props.nodes Function that returns the async/lazy component
+ * @param props.fallback Function that returns the loading UI
+ * @returns An HTMLElement that swaps from fallback to content when ready
  */
-declare function registerAction<T>(name: string, fn: ActionFn<T>): void;
-/** Look up a registered action by name, or `undefined` if none is registered. */
-declare function getAction<T = unknown>(name: string): ActionFn<T> | undefined;
+interface SuspenseProps {
+    nodes: () => HTMLElement;
+    fallback: () => HTMLElement;
+}
+declare function Suspense({ nodes, fallback }: SuspenseProps): HTMLElement;
+
 /**
- * Attach a reusable action (element-level behavior) to an element.
- * The action's cleanup function (if returned) is automatically registered
- * via `registerDisposer`, so it runs when the element is disposed.
+ * Lifecycle hooks for SibuJS components.
+ *
+ * These hooks schedule callbacks to run after the component's DOM
+ * has been mounted or when it is removed from the document.
+ *
+ * @example
+ * ```ts
+ * function MyComponent() {
+ *   onMount(() => {
+ *     console.log("Component is in the DOM");
+ *   });
+ *
+ *   onUnmount(() => {
+ *     console.log("Component was removed");
+ *   });
+ *
+ *   return div("Hello");
+ * }
+ * ```
+ */
+type CleanupFn = () => void;
+/**
+ * Runs a callback once the component's element has been inserted into the DOM.
+ * Uses queueMicrotask to defer execution until after the current synchronous
+ * rendering pass completes.
  *
- * The action may be passed directly, or by the name it was registered under
- * (see {@link registerAction}). Actions are composable — multiple can be
- * applied to the same element.
+ * Optionally returns a cleanup function that will be called on unmount
+ * (if you also use onUnmount, prefer that for explicit cleanup).
  *
- * @param element The target element
- * @param action The action function, or the name of a registered action
- * @param param Optional parameter passed to the action
+ * @param callback Function to run after mount. May return a cleanup function.
+ * @param element Optional element to observe; if provided, waits until it's connected.
+ */
+declare function onMount(callback: () => undefined | CleanupFn, element?: HTMLElement): void;
+/**
+ * Runs a callback when the given element is removed from the DOM.
+ * Uses a shared MutationObserver to watch for disconnection, plus
+ * `registerDisposer` so explicit dispose() paths also trigger the callback.
  *
- * @example
- * ```ts
- * div({
- *   onElement: (el) => {
- *     action(el, clickOutside, () => setOpen(false));     // by reference
- *     action(el, "longPress", { duration: 500, callback: onLongPress }); // by name
- *   },
- * }, "Content");
- * ```
+ * @param callback Function to run on unmount
+ * @param element The element to watch for removal
  */
-declare function action<T>(element: HTMLElement, action: ActionFn<T> | string, param: T): void;
-declare function action(element: HTMLElement, action: ActionFn<void> | string): void;
+declare function onUnmount(callback: CleanupFn, element: HTMLElement): void;
 /**
- * Fires a callback when the user clicks outside the element.
- * Useful for closing dropdowns, modals, and popovers.
+ * Register a cleanup callback that runs when the given element is disposed.
+ * Integrates with `when()`, `match()`, and `each()` which call `dispose()`
+ * on removed nodes, triggering all registered cleanup functions.
+ *
+ * @param callback Cleanup function (close sockets, clear intervals, etc.)
+ * @param element The component's root node to attach cleanup to
  *
  * @example
  * ```ts
- * action(el, clickOutside, () => setOpen(false));
+ * function RealtimeBar(siteId: string) {
+ *   const ws = new WebSocket(`/ws/sites/${siteId}/realtime`);
+ *   const root = div("Realtime data...");
+ *   onCleanup(() => ws.close(), root);
+ *   return root;
+ * }
  * ```
  */
-declare const clickOutside: ActionFn<() => void>;
+declare function onCleanup(callback: CleanupFn, element: Node): void;
+
 /**
- * Options for the longPress action.
+ * Mounts a root component into a DOM element.
+ * Supports both function components and pre-created HTMLElements.
  */
-interface LongPressOptions {
-    /** Duration in milliseconds before the press is considered "long". Default: 500 */
-    duration?: number;
-    /** Callback fired when the long press is detected. */
-    callback: () => void;
-}
+declare function mount(component: (() => Element) | Element | Node, container: Element | null): {
+    node: Node;
+    unmount: () => void;
+};
+
 /**
- * Fires a callback after a sustained press on the element.
+ * Portal renders nodes into a DOM node outside the parent component hierarchy.
+ * Useful for modals, tooltips, dropdowns, and overlays.
+ *
+ * Cleanup integrates with `dispose()` / `registerDisposer()` so portals
+ * are properly torn down when the anchor is disposed by `when()`, `match()`,
+ * `each()`, or manual `dispose(anchor)`.
+ *
+ * @param nodes Function that returns the content to render
+ * @param target Target DOM element (defaults to document.body)
+ * @returns A Comment anchor node in the original position
  *
  * @example
  * ```ts
- * action(el, longPress, { duration: 800, callback: onLongPress });
+ * // Render modal at document.body
+ * Portal(() => div("modal", "Modal content"));
+ *
+ * // Render into specific container
+ * const overlay = document.getElementById("overlay-root")!;
+ * Portal(() => div("Tooltip"), overlay);
  * ```
  */
-declare const longPress: ActionFn<LongPressOptions>;
+declare function Portal(nodes: () => HTMLElement, target?: HTMLElement): Comment;
+
+type SlotFn = () => Element | string | number | null | undefined;
+type Slots = Record<string, SlotFn>;
+declare function getSlot(slots: Slots | undefined, name?: string): SlotFn | undefined;
+
+declare const __accessor: unique symbol;
 /**
- * Copies the element's textContent to the clipboard on click.
- * Optionally accepts a custom getter for the text to copy.
+ * A reactive signal getter returned by signal(), derived(), and similar primitives.
  *
- * @example
+ * Pass an Accessor directly into reactive prop positions — never call it there:
  * ```ts
- * // Copy element text
- * action(el, copyOnClick);
+ * const [count, setCount] = signal(0);
  *
- * // Copy custom value
- * action(el, copyOnClick, () => secretToken());
+ * div(count)                       // ✓ reactive — Accessor passed directly
+ * div(() => count())               // ✓ reactive — explicit arrow wrapper
+ * div(count())                     // ✗ static  — evaluated once, not reactive
  * ```
  */
-declare const copyOnClick: ActionFn<(() => string) | undefined>;
+type Accessor<T> = (() => T) & {
+    readonly [__accessor]?: never;
+};
+type SetState<T> = (next: T | ((prev: T) => T)) => void;
+type StateTuple<T> = [Accessor<T>, SetState<T>];
+/** Options for signal */
+interface SignalOptions<T = unknown> {
+    /** Debug name for devtools inspection. Only used in development. */
+    name?: string;
+    /** Custom equality function. Defaults to Object.is(). */
+    equals?: (prev: T, next: T) => boolean;
+}
 /**
- * Auto-resizes a textarea to fit its content.
- * Adjusts height on input and on initial attach.
+ * signal creates a reactive signal that holds a value of type T.
+ * Returns a tuple: [getter, setter].
  *
- * @example
- * ```ts
- * const ta = textarea({ placeholder: "Type here..." });
- * action(ta, autoResize);
- * ```
+ * @param initial Initial value
+ * @param options Optional config: `{ name: "count" }` for devtools labeling
  */
-declare const autoResize: ActionFn<void>;
+declare function signal<T>(initial: T, options?: SignalOptions<T>): StateTuple<T>;
+
 /**
- * Traps keyboard focus within the element (Tab and Shift+Tab cycle).
- * Essential for accessible modals and dialogs.
+ * Reactive array hook. Provides common array operations that
+ * automatically trigger reactive updates.
+ *
+ * @param initial Initial array value
+ * @returns Tuple [getter, actions]
  *
  * @example
  * ```ts
- * action(el, trapFocus);
+ * const [items, { push, remove, clear }] = array([1, 2, 3]);
+ * push(4);          // [1, 2, 3, 4]
+ * remove(1);        // [1, 3, 4]  (removes index 1)
+ * clear();          // []
  * ```
  */
-declare const trapFocus: ActionFn<void>;
-
-type ErrorHandler = (error: unknown, context?: string) => void;
+interface ArrayActions<T> {
+    /** Add one or more items to the end */
+    push(...items: T[]): void;
+    /** Remove and return the last item */
+    pop(): T | undefined;
+    /** Remove and return the first item */
+    shift(): T | undefined;
+    /** Add one or more items to the beginning */
+    unshift(...items: T[]): void;
+    /** Remove/replace elements at a position */
+    splice(start: number, deleteCount?: number, ...items: T[]): T[];
+    /** Remove item at index */
+    remove(index: number): void;
+    /** Remove first item matching predicate */
+    removeWhere(predicate: (item: T) => boolean): void;
+    /** Replace the entire array */
+    set(items: T[]): void;
+    /** Update item at a specific index */
+    update(index: number, value: T): void;
+    /** Update item at a specific index via updater function */
+    updateWhere(predicate: (item: T) => boolean, updater: (item: T) => T): void;
+    /** Sort the array in place */
+    sort(compareFn?: (a: T, b: T) => number): void;
+    /** Reverse the array in place */
+    reverse(): void;
+    /** Filter the array (returns new reactive array) */
+    filter(predicate: (item: T, index: number) => boolean): void;
+    /** Map and replace (transforms all items) */
+    map(transform: (item: T, index: number) => T): void;
+    /** Clear all items */
+    clear(): void;
+}
+declare function array<T>(initial?: T[]): [Accessor<T[]>, ArrayActions<T>];
 /**
- * Wraps a function in a try/catch block with typed error handling.
- * Supports both sync and async functions (catches Promise rejections).
+ * Optimized reactive array hook. Uses in-place mutations with a version
+ * counter to avoid full array copies on every operation.
  *
- * @param fn Function to execute safely
- * @param onError Optional error handler (receives error and optional context)
- * @returns The function's return value, or null on error
- */
-declare function catchError<T>(fn: () => T, onError?: ErrorHandler): T | null;
-/**
- * Async version of catchError for explicit async/await usage.
+ * Internally maintains a mutable array and only creates a frozen snapshot
+ * when the getter is called after a mutation. Operations like push, pop,
+ * splice, sort, and reverse mutate in-place (O(1) or O(n) as appropriate)
+ * instead of copying the entire array.
  *
- * @param fn Async function to execute safely
- * @param onError Optional error handler
- * @returns Promise resolving to the result or null on error
- */
-declare function catchErrorAsync<T>(fn: () => Promise<T>, onError?: ErrorHandler): Promise<T | null>;
-/**
- * Sets a global error handler used by default if no onError is provided.
+ * The public API is identical to `array`.
+ *
+ * @param initial Initial array value
+ * @returns Tuple [getter, actions]
+ *
+ * @example
+ * ```ts
+ * const [items, { push, remove, clear }] = reactiveArray([1, 2, 3]);
+ * push(4);          // [1, 2, 3, 4]  — mutates in-place, no copy
+ * remove(1);        // [1, 3, 4]
+ * clear();          // []
+ * ```
  */
-declare function setGlobalErrorHandler(handler: ErrorHandler): void;
+declare function reactiveArray<T>(initial?: T[]): [Accessor<readonly T[]>, ArrayActions<T>];
 
+interface AsyncDerivedState<T> {
+    /** Resolved value, or `initial` while loading. */
+    value: () => T;
+    /** True while the underlying promise is in-flight. */
+    loading: () => boolean;
+    /** The last caught error, or `null`. */
+    error: () => unknown | null;
+    /** Manually re-run the async computation. */
+    refresh: () => void;
+}
 /**
- * Generate a stable, framework-unique ID string suitable for a11y pairing
- * (`aria-labelledby`, `htmlFor` + `id`, etc.).
+ * `asyncDerived` is the async counterpart of `derived`: it takes a factory
+ * that returns a Promise and re-runs whenever its reactive dependencies
+ * change. The returned object exposes reactive `value`, `loading`, and
+ * `error` getters, plus a `refresh()` trigger.
  *
- * Each call returns a fresh incrementing id. Optionally accepts a prefix.
+ * Stale responses are dropped: if a new run starts before an older one
+ * resolves, the older one's result is ignored. This prevents flicker when
+ * dependencies change rapidly (e.g. typing in a search box).
  *
- * IDs are plain strings (not reactive) — call once per component instance
- * and reuse the returned value for both sides of the association.
+ * Unlike `query()` or `resource()`, `asyncDerived` has no caching or retry
+ * logic — it's a minimal async-reactivity primitive suited for ad-hoc
+ * derivations (parsing, formatting, validation against a server).
  *
- * @param prefix Optional prefix, default "sibu"
- * @returns A unique id like `"sibu-1"` or `"my-input-2"`
+ * @param factory Async function returning the derived value
+ * @param initial Value used while the first computation is pending
  *
  * @example
  * ```ts
- * function Field(labelText: string) {
- *   const id = createId("field");
- *   return div([
- *     label({ for: id }, labelText),
- *     input({ id }),
- *   ]);
- * }
+ * const [query, setQuery] = signal("");
+ * const results = asyncDerived(async () => {
+ *   const q = query();
+ *   if (!q) return [];
+ *   const r = await fetch(`/api/search?q=${encodeURIComponent(q)}`);
+ *   return r.json();
+ * }, []);
  * ```
  */
-declare function createId(prefix?: string): string;
-/**
- * Reset the id counter. Intended for tests and SSR setups that want
- * deterministic ids across runs.
- *
- * @internal
- */
-declare function __resetIdCounter(): void;
+declare function asyncDerived<T>(factory: () => Promise<T>, initial: T): AsyncDerivedState<T>;
 
 /**
- * Register a teardown function for a DOM node.
- * When dispose(node) is called, all registered teardowns run.
- */
-declare function registerDisposer(node: Node, teardown: () => void): void;
-/**
- * Run all registered teardowns for a node and its descendants,
- * cleaning up reactive subscriptions to prevent memory leaks.
- * Call this when removing elements from the DOM.
+ * Deep equality comparison for objects and arrays.
+ * Falls back to Object.is for primitives.
+ * Handles circular references, shared sub-references, and common
+ * built-in types (Date, RegExp, Map, Set, ArrayBuffer, TypedArrays).
  *
- * Uses an iterative depth-first traversal to avoid stack overflow
- * on deeply nested DOM trees.
- */
-declare function dispose(node: Node): void;
-/**
- * Check for potential binding leaks. Returns the number of active DOM bindings.
- * In dev mode, logs a warning if the count exceeds the threshold.
- * In production, _isDev is false so the counter is always 0.
+ * The `seen` parameter tracks `(a, b)` pairs — not just `a` — so that
+ * a shared sub-object compared against two different partners is always
+ * fully checked, while genuine cycles (same a-with-same-b revisited)
+ * still terminate.
  */
-declare function checkLeaks(warnThreshold?: number): number;
-
-declare const __accessor: unique symbol;
+declare function deepEqual(a: unknown, b: unknown, seen?: Map<object, Set<object>>): boolean;
 /**
- * A reactive signal getter returned by signal(), derived(), and similar primitives.
+ * Like signal but uses deep equality comparison instead of Object.is.
+ * This prevents unnecessary re-renders when setting an object/array
+ * to a structurally identical value.
  *
- * Pass an Accessor directly into reactive prop positions — never call it there:
- * ```ts
- * const [count, setCount] = signal(0);
+ * @param initial Initial value
+ * @returns Tuple [getter, setter] — same shape as `signal()`, preserving
+ *          the `Accessor<T>` brand on the getter.
  *
- * div(count)                       // ✓ reactive — Accessor passed directly
- * div(() => count())               // ✓ reactive — explicit arrow wrapper
- * div(count())                     // ✗ static  — evaluated once, not reactive
+ * @example
+ * ```ts
+ * const [user, setUser] = deepSignal({ name: "Alice", age: 25 });
+ * setUser({ name: "Alice", age: 25 }); // No notification — same structure
+ * setUser({ name: "Bob", age: 25 });   // Notifies — different value
  * ```
  */
-type Accessor<T> = (() => T) & {
-    readonly [__accessor]?: never;
-};
-type SetState<T> = (next: T | ((prev: T) => T)) => void;
-type StateTuple<T> = [Accessor<T>, SetState<T>];
-/** Options for signal */
-interface SignalOptions<T = unknown> {
-    /** Debug name for devtools inspection. Only used in development. */
-    name?: string;
-    /** Custom equality function. Defaults to Object.is(). */
-    equals?: (prev: T, next: T) => boolean;
-}
+declare function deepSignal<T>(initial: T): [Accessor<T>, (next: T | ((prev: T) => T)) => void];
+
 /**
- * signal creates a reactive signal that holds a value of type T.
- * Returns a tuple: [getter, setter].
+ * derived creates a derived reactive signal whose value updates when dependencies change.
  *
- * @param initial Initial value
- * @param options Optional config: `{ name: "count" }` for devtools labeling
+ * Uses lazy pull-based evaluation with a single dirty flag:
+ * - When a dependency changes, the computed is marked dirty (no re-evaluation).
+ * - Dirtiness propagates downstream via propagateDirty.
+ * - The getter only re-evaluates when actually read (pull-based).
+ * - On re-evaluation, dependencies are re-tracked via retrack() so that
+ *   derived-of-derived chains propagate correctly without paying the full
+ *   Set-delete + re-add cost of track()'s cleanup phase.
+ *
+ * NOTE: a previous revision experimented with three-color (CLEAN/CHECK/DIRTY)
+ * state for read-side value-change short-circuiting. It regressed every
+ * benchmark except Memory (Deep Chain +122%, Component Tree +20%) because
+ * the workloads always produce a new downstream value and CHECK had no
+ * work to skip — only overhead to add. Keeping the simpler boolean flag
+ * here; revisit CHECK propagation when we have benchmarks that exercise
+ * stabilisation on diamond / conditional-branch patterns.
  */
-declare function signal<T>(initial: T, options?: SignalOptions<T>): StateTuple<T>;
+declare function derived<T>(getter: () => T, options?: {
+    name?: string;
+    /** Custom equality — when the recomputed value equals the previous,
+     *  downstream subscribers are not notified. Defaults to `Object.is`. */
+    equals?: (a: T, b: T) => boolean;
+}): Accessor<T>;
 
 /** Options for effect */
 interface EffectOptions {
@@ -786,41 +1245,26 @@ type EffectBody = (onCleanup: OnCleanup) => void;
 declare function effect(effectFn: EffectBody | (() => void), options?: EffectOptions): () => void;
 
 /**
- * derived creates a derived reactive signal whose value updates when dependencies change.
- *
- * Uses lazy pull-based evaluation with a single dirty flag:
- * - When a dependency changes, the computed is marked dirty (no re-evaluation).
- * - Dirtiness propagates downstream via propagateDirty.
- * - The getter only re-evaluates when actually read (pull-based).
- * - On re-evaluation, dependencies are re-tracked via retrack() so that
- *   derived-of-derived chains propagate correctly without paying the full
- *   Set-delete + re-add cost of track()'s cleanup phase.
+ * ref creates a mutable reference object with a reactive `current` property.
  *
- * NOTE: a previous revision experimented with three-color (CLEAN/CHECK/DIRTY)
- * state for read-side value-change short-circuiting. It regressed every
- * benchmark except Memory (Deep Chain +122%, Component Tree +20%) because
- * the workloads always produce a new downstream value and CHECK had no
- * work to skip — only overhead to add. Keeping the simpler boolean flag
- * here; revisit CHECK propagation when we have benchmarks that exercise
- * stabilisation on diamond / conditional-branch patterns.
- */
-declare function derived<T>(getter: () => T, options?: {
-    name?: string;
-    /** Custom equality — when the recomputed value equals the previous,
-     *  downstream subscribers are not notified. Defaults to `Object.is`. */
-    equals?: (a: T, b: T) => boolean;
-}): Accessor<T>;
-
-/**
- * Watches a reactive getter and calls callback with (newValue, oldValue) when it changes.
+ * Reading `.current` tracks the dependency (like a signal getter).
+ * Writing `.current` notifies subscribers (like a signal setter).
+ * This makes ref compatible with APIs that take reactive getters,
+ * such as resize(), draggable(), and dropZone().
  *
- * In SSR mode, watch is a no-op — subscriptions should not run on the server.
+ * Common uses:
+ * - Storing DOM element references (works with tagFactory's ref prop)
+ * - Holding mutable values with optional reactivity
+ * - Imperative API handles (e.g., focus, scroll)
  *
- * @param getter Function that returns the value to watch (reads reactive signals).
- * @param callback Function called when the watched value changes.
- * @returns Teardown function to cancel the watcher.
+ * @param initial Optional initial value for the ref
+ * @returns An object with a reactive `current` property
  */
-declare function watch<T>(getter: () => T, callback: (value: T, prev: T | undefined) => void): () => void;
+interface Ref<T> {
+    current: T;
+}
+declare function ref<T>(initial: T): Ref<T>;
+declare function ref<T = undefined>(): Ref<T | undefined>;
 
 type StoreSubscriber<T> = (state: T) => void;
 interface StoreActions<T> {
@@ -857,133 +1301,20 @@ interface StoreActions<T> {
  * });
  * ```
  */
-declare function store<T extends object>(initialState: T): [store: {
-    readonly [K in keyof T]: T[K];
-}, actions: StoreActions<T>];
-
-/**
- * ref creates a mutable reference object with a reactive `current` property.
- *
- * Reading `.current` tracks the dependency (like a signal getter).
- * Writing `.current` notifies subscribers (like a signal setter).
- * This makes ref compatible with APIs that take reactive getters,
- * such as resize(), draggable(), and dropZone().
- *
- * Common uses:
- * - Storing DOM element references (works with tagFactory's ref prop)
- * - Holding mutable values with optional reactivity
- * - Imperative API handles (e.g., focus, scroll)
- *
- * @param initial Optional initial value for the ref
- * @returns An object with a reactive `current` property
- */
-interface Ref<T> {
-    current: T;
-}
-declare function ref<T>(initial: T): Ref<T>;
-declare function ref<T = undefined>(): Ref<T | undefined>;
-
-/**
- * Reactive array hook. Provides common array operations that
- * automatically trigger reactive updates.
- *
- * @param initial Initial array value
- * @returns Tuple [getter, actions]
- *
- * @example
- * ```ts
- * const [items, { push, remove, clear }] = array([1, 2, 3]);
- * push(4);          // [1, 2, 3, 4]
- * remove(1);        // [1, 3, 4]  (removes index 1)
- * clear();          // []
- * ```
- */
-interface ArrayActions<T> {
-    /** Add one or more items to the end */
-    push(...items: T[]): void;
-    /** Remove and return the last item */
-    pop(): T | undefined;
-    /** Remove and return the first item */
-    shift(): T | undefined;
-    /** Add one or more items to the beginning */
-    unshift(...items: T[]): void;
-    /** Remove/replace elements at a position */
-    splice(start: number, deleteCount?: number, ...items: T[]): T[];
-    /** Remove item at index */
-    remove(index: number): void;
-    /** Remove first item matching predicate */
-    removeWhere(predicate: (item: T) => boolean): void;
-    /** Replace the entire array */
-    set(items: T[]): void;
-    /** Update item at a specific index */
-    update(index: number, value: T): void;
-    /** Update item at a specific index via updater function */
-    updateWhere(predicate: (item: T) => boolean, updater: (item: T) => T): void;
-    /** Sort the array in place */
-    sort(compareFn?: (a: T, b: T) => number): void;
-    /** Reverse the array in place */
-    reverse(): void;
-    /** Filter the array (returns new reactive array) */
-    filter(predicate: (item: T, index: number) => boolean): void;
-    /** Map and replace (transforms all items) */
-    map(transform: (item: T, index: number) => T): void;
-    /** Clear all items */
-    clear(): void;
-}
-declare function array<T>(initial?: T[]): [Accessor<T[]>, ArrayActions<T>];
-/**
- * Optimized reactive array hook. Uses in-place mutations with a version
- * counter to avoid full array copies on every operation.
- *
- * Internally maintains a mutable array and only creates a frozen snapshot
- * when the getter is called after a mutation. Operations like push, pop,
- * splice, sort, and reverse mutate in-place (O(1) or O(n) as appropriate)
- * instead of copying the entire array.
- *
- * The public API is identical to `array`.
- *
- * @param initial Initial array value
- * @returns Tuple [getter, actions]
- *
- * @example
- * ```ts
- * const [items, { push, remove, clear }] = reactiveArray([1, 2, 3]);
- * push(4);          // [1, 2, 3, 4]  — mutates in-place, no copy
- * remove(1);        // [1, 3, 4]
- * clear();          // []
- * ```
- */
-declare function reactiveArray<T>(initial?: T[]): [Accessor<readonly T[]>, ArrayActions<T>];
-
-/**
- * Deep equality comparison for objects and arrays.
- * Falls back to Object.is for primitives.
- * Handles circular references, shared sub-references, and common
- * built-in types (Date, RegExp, Map, Set, ArrayBuffer, TypedArrays).
- *
- * The `seen` parameter tracks `(a, b)` pairs — not just `a` — so that
- * a shared sub-object compared against two different partners is always
- * fully checked, while genuine cycles (same a-with-same-b revisited)
- * still terminate.
- */
-declare function deepEqual(a: unknown, b: unknown, seen?: Map<object, Set<object>>): boolean;
+declare function store<T extends object>(initialState: T): [store: {
+    readonly [K in keyof T]: T[K];
+}, actions: StoreActions<T>];
+
 /**
- * Like signal but uses deep equality comparison instead of Object.is.
- * This prevents unnecessary re-renders when setting an object/array
- * to a structurally identical value.
+ * Watches a reactive getter and calls callback with (newValue, oldValue) when it changes.
  *
- * @param initial Initial value
- * @returns Tuple [getter, setter] — same shape as `signal()`, preserving
- *          the `Accessor<T>` brand on the getter.
+ * In SSR mode, watch is a no-op — subscriptions should not run on the server.
  *
- * @example
- * ```ts
- * const [user, setUser] = deepSignal({ name: "Alice", age: 25 });
- * setUser({ name: "Alice", age: 25 }); // No notification — same structure
- * setUser({ name: "Bob", age: 25 });   // Notifies — different value
- * ```
+ * @param getter Function that returns the value to watch (reads reactive signals).
+ * @param callback Function called when the watched value changes.
+ * @returns Teardown function to cancel the watcher.
  */
-declare function deepSignal<T>(initial: T): [Accessor<T>, (next: T | ((prev: T) => T)) => void];
+declare function watch<T>(getter: () => T, callback: (value: T, prev: T | undefined) => void): () => void;
 
 /**
  * Creates a writable computed value — a derived getter paired with
@@ -1022,168 +1353,71 @@ declare function writable<T>(get: () => T, set: (value: T) => void, options?: {
     name?: string;
 }): [Accessor<T>, (value: T) => void];
 
-interface AsyncDerivedState<T> {
-    /** Resolved value, or `initial` while loading. */
-    value: () => T;
-    /** True while the underlying promise is in-flight. */
-    loading: () => boolean;
-    /** The last caught error, or `null`. */
-    error: () => unknown | null;
-    /** Manually re-run the async computation. */
-    refresh: () => void;
-}
-/**
- * `asyncDerived` is the async counterpart of `derived`: it takes a factory
- * that returns a Promise and re-runs whenever its reactive dependencies
- * change. The returned object exposes reactive `value`, `loading`, and
- * `error` getters, plus a `refresh()` trigger.
- *
- * Stale responses are dropped: if a new run starts before an older one
- * resolves, the older one's result is ignored. This prevents flicker when
- * dependencies change rapidly (e.g. typing in a search box).
- *
- * Unlike `query()` or `resource()`, `asyncDerived` has no caching or retry
- * logic — it's a minimal async-reactivity primitive suited for ad-hoc
- * derivations (parsing, formatting, validation against a server).
- *
- * @param factory Async function returning the derived value
- * @param initial Value used while the first computation is pending
- *
- * @example
- * ```ts
- * const [query, setQuery] = signal("");
- * const results = asyncDerived(async () => {
- *   const q = query();
- *   if (!q) return [];
- *   const r = await fetch(`/api/search?q=${encodeURIComponent(q)}`);
- *   return r.json();
- * }, []);
- * ```
- */
-declare function asyncDerived<T>(factory: () => Promise<T>, initial: T): AsyncDerivedState<T>;
-
 /**
- * Lifecycle hooks for SibuJS components.
- *
- * These hooks schedule callbacks to run after the component's DOM
- * has been mounted or when it is removed from the document.
- *
- * @example
- * ```ts
- * function MyComponent() {
- *   onMount(() => {
- *     console.log("Component is in the DOM");
- *   });
+ * SSR context for SibuJS.
  *
- *   onUnmount(() => {
- *     console.log("Component was removed");
- *   });
+ * During server-side rendering, side effects (effect, watch, onMount)
+ * should not run. This module provides a flag to enable/disable SSR mode.
  *
- *   return div("Hello");
- * }
- * ```
- */
-type CleanupFn = () => void;
-/**
- * Runs a callback once the component's element has been inserted into the DOM.
- * Uses queueMicrotask to defer execution until after the current synchronous
- * rendering pass completes.
+ * Concurrency: on Node we back the flag with AsyncLocalStorage so
+ * simultaneous requests get independent SSR scopes. On runtimes without
+ * AsyncLocalStorage (browser, some edge runtimes) we fall back to a
+ * module-global boolean.
  *
- * Optionally returns a cleanup function that will be called on unmount
- * (if you also use onUnmount, prefer that for explicit cleanup).
+ * Usage:
+ *   enableSSR();        // Call before rendering on the server
+ *   renderToString(...);
+ *   disableSSR();       // Call after rendering (cleanup)
  *
- * @param callback Function to run after mount. May return a cleanup function.
- * @param element Optional element to observe; if provided, waits until it's connected.
+ * Or use the scoped helper:
+ *   withSSR(() => renderToString(...));
+ *   runInSSRContext(() => renderToString(...));
  */
-declare function onMount(callback: () => undefined | CleanupFn, element?: HTMLElement): void;
 /**
- * Runs a callback when the given element is removed from the DOM.
- * Uses a shared MutationObserver to watch for disconnection, plus
- * `registerDisposer` so explicit dispose() paths also trigger the callback.
- *
- * @param callback Function to run on unmount
- * @param element The element to watch for removal
+ * Per-request SSR store. Currently holds the SSR flag plus a
+ * suspense-id counter so concurrent streaming renders never collide.
  */
-declare function onUnmount(callback: CleanupFn, element: HTMLElement): void;
+interface SSRStore {
+    ssr: boolean;
+    suspenseIdCounter: number;
+    /**
+     * Per-request data caches (e.g. the query cache). Lazily created and keyed
+     * by subsystem so request-scoped data never bleeds between concurrent
+     * server renders. Typed loosely to avoid a dependency cycle with data/.
+     */
+    caches?: Map<string, Map<string, unknown>>;
+}
+/** Returns the active store (ALS or fallback). */
+declare function getSSRStore(): SSRStore;
+/** Returns true when running in SSR mode. */
+declare function isSSR(): boolean;
 /**
- * Register a cleanup callback that runs when the given element is disposed.
- * Integrates with `when()`, `match()`, and `each()` which call `dispose()`
- * on removed nodes, triggering all registered cleanup functions.
- *
- * @param callback Cleanup function (close sockets, clear intervals, etc.)
- * @param element The component's root node to attach cleanup to
- *
- * @example
- * ```ts
- * function RealtimeBar(siteId: string) {
- *   const ws = new WebSocket(`/ws/sites/${siteId}/realtime`);
- *   const root = div("Realtime data...");
- *   onCleanup(() => ws.close(), root);
- *   return root;
- * }
- * ```
+ * Returns a request-scoped cache map for the given subsystem when running
+ * under SSR (so concurrent requests never share it), or `null` on the client
+ * where a process-global cache is correct. On Node the store is backed by
+ * AsyncLocalStorage, giving each request its own caches.
  */
-declare function onCleanup(callback: CleanupFn, element: Node): void;
-
+declare function getRequestScopedCache<V>(name: string): Map<string, V> | null;
+/** Enable SSR mode. Side effects (effect, watch, onMount) become no-ops. */
+declare function enableSSR(): void;
+/** Disable SSR mode. Side effects resume normal behavior. */
+declare function disableSSR(): void;
 /**
- * Context API for SibuJS — a reactive global value that any component
- * can read without prop drilling.
- *
- * Note: this is a **global reactive store**, not a subtree-scoped DI
- * system. Calling `provide()` sets the value for ALL consumers, not
- * just descendants of the provider. For most apps this is sufficient
- * — use separate `context()` instances for independent scopes.
- *
- * @example
- * ```ts
- * // Create a context with a default value
- * const ThemeContext = context("light");
- *
- * // Set the value (global — affects all consumers)
- * ThemeContext.provide("dark");
- *
- * // Read reactively from any component
- * function Child() {
- *   const theme = ThemeContext.use(); // reactive getter
- *   return div(() => `Theme: ${theme()}`);
- * }
- * ```
+ * Run `fn` inside a fresh request-scoped SSR context. On Node this uses
+ * AsyncLocalStorage so concurrent requests never share state; elsewhere
+ * it falls back to mutating the module-global store.
  */
-interface Context<T> {
-    /**
-     * Set the context value globally. Affects all consumers.
-     *
-     * Returns a `restore` function that re-sets the context to the value it
-     * had *before* this `provide` call. Useful for scoped overrides:
-     *
-     * ```ts
-     * const restore = Theme.provide("dark");
-     * try { renderChild(); } finally { restore(); }
-     * ```
-     *
-     * Callers that don't need scoping can ignore the return value — existing
-     * semantics are preserved.
-     */
-    provide(value: T): () => void;
-    /** Get a reactive getter for the current context value. */
-    use(): () => T;
-    /** Get the current value directly (non-reactive). */
-    get(): T;
-    /** Update the provided value reactively. */
-    set(value: T): void;
-    /**
-     * Run `fn` with the context temporarily set to `value`, then restore the
-     * previous value (even if `fn` throws). Returns the result of `fn`.
-     */
-    withContext<R>(value: T, fn: () => R): R;
-}
+declare function runInSSRContext<T>(fn: () => T): T;
 /**
- * Creates a new context with an optional default value.
+ * Run a function in SSR mode. Automatically enables/disables SSR around the callback.
+ * Returns whatever the callback returns.
  *
- * @param defaultValue The fallback value when no provider is found
- * @returns A Context object with provide, use, get, and set methods
+ * Nesting-safe: saves the prior SSR flag and restores it in the `finally`
+ * block. A nested `withSSR(...)` call cannot prematurely flip the outer
+ * scope's SSR flag back to `false`, and an exception thrown inside `fn`
+ * still leaves the flag in its original state.
  */
-declare function context<T>(defaultValue: T): Context<T>;
+declare function withSSR<T>(fn: () => T): T;
 
 /**
  * Dev-only wrapper that runs `fn` twice — once now, once on the next
@@ -1226,70 +1460,123 @@ declare function strict<T>(fn: () => T): T;
 declare function strictEffect(fn: () => void): () => void;
 
 /**
- * SSR context for SibuJS.
- *
- * During server-side rendering, side effects (effect, watch, onMount)
- * should not run. This module provides a flag to enable/disable SSR mode.
- *
- * Concurrency: on Node we back the flag with AsyncLocalStorage so
- * simultaneous requests get independent SSR scopes. On runtimes without
- * AsyncLocalStorage (browser, some edge runtimes) we fall back to a
- * module-global boolean.
- *
- * Usage:
- *   enableSSR();        // Call before rendering on the server
- *   renderToString(...);
- *   disableSSR();       // Call after rendering (cleanup)
- *
- * Or use the scoped helper:
- *   withSSR(() => renderToString(...));
- *   runInSSRContext(() => renderToString(...));
- */
-/**
- * Per-request SSR store. Currently holds the SSR flag plus a
- * suspense-id counter so concurrent streaming renders never collide.
- */
-interface SSRStore {
-    ssr: boolean;
-    suspenseIdCounter: number;
-    /**
-     * Per-request data caches (e.g. the query cache). Lazily created and keyed
-     * by subsystem so request-scoped data never bleeds between concurrent
-     * server renders. Typed loosely to avoid a dependency cycle with data/.
-     */
-    caches?: Map<string, Map<string, unknown>>;
+ * Helpers handed to an `enhance` setup. Every binding is fine-grained (its own
+ * effect) and auto-disposed when the root element (or the returned dispose) is
+ * torn down.
+ *
+ * Target resolution for every helper:
+ *   - `"@name"`  → a descendant marked `data-ref="name"` (the ergonomic form).
+ *   - any other string → a raw CSS selector, queried within the root.
+ *   - an `Element` → used as-is.
+ *   - `null` / omitted (where allowed) → the root element itself.
+ */
+interface EnhanceContext {
+    /** The enhanced root element (the server-rendered node). */
+    root: HTMLElement;
+    /** First descendant matching a `@ref`/selector (or the root for `null`). */
+    ref<T extends Element = HTMLElement>(target: string | null): T | null;
+    /** All descendants matching a `@ref`/selector. */
+    refs<T extends Element = HTMLElement>(target: string): T[];
+    /** Attach an auto-removed event listener to a target (root if `null`). */
+    on<K extends keyof HTMLElementEventMap>(target: string | Element | null, event: K, handler: (event: HTMLElementEventMap[K], el: HTMLElement) => void, options?: AddEventListenerOptions): void;
+    /** Reactively drive `textContent` of an existing node. */
+    text(target: string | Element | null, value: () => unknown): void;
+    /** Reactively drive an attribute; a `null`/`false`/`undefined` value removes it. */
+    attr(target: string | Element | null, name: string, value: () => unknown): void;
+    /** Reactively toggle a class on a node. */
+    classed(target: string | Element | null, name: string, on: () => boolean): void;
+    /** Reactively toggle visibility (sets `display:none` when `false`). */
+    show(target: string | Element | null, when: () => boolean): void;
+    /** Two-way bind a form control to a `[get, set]` signal tuple. */
+    model<T>(target: string | Element, state: readonly [() => T, (value: T) => void], options?: {
+        event?: string;
+    }): void;
+    /** Register arbitrary teardown to run on disposal. */
+    cleanup(fn: () => void): void;
 }
-/** Returns the active store (ALS or fallback). */
-declare function getSSRStore(): SSRStore;
-/** Returns true when running in SSR mode. */
-declare function isSSR(): boolean;
+/** A setup function for `enhance` — wire reactivity, optionally return cleanup.
+ *  The `void | (() => void)` shape mirrors `useEffect`'s "return a teardown, or
+ *  nothing". */
+type EnhanceSetup = (ctx: EnhanceContext) => void | (() => void);
 /**
- * Returns a request-scoped cache map for the given subsystem when running
- * under SSR (so concurrent requests never share it), or `null` on the client
- * where a process-global cache is correct. On Node the store is backed by
- * AsyncLocalStorage, giving each request its own caches.
+ * Attach reactivity to an existing element (typically server-rendered) without
+ * replacing it. Returns a dispose function; disposal is also wired to the
+ * element, so removing its subtree cleans everything up.
+ *
+ * @param target An `Element` or a CSS selector resolved against `document`
+ *   (the first match is used; see {@link enhanceAll} for many).
+ * @param setup  Wires reactivity via the {@link EnhanceContext}.
+ *
+ * @example
+ * ```ts
+ * // server HTML: <div data-counter><b data-ref="n">0</b><button data-ref="inc">+1</button></div>
+ * const [n, setN] = signal(0);
+ * enhance("[data-counter]", (ctx) => {
+ *   ctx.text("@n", () => n());
+ *   ctx.on("@inc", "click", () => setN((v) => v + 1));
+ * });
+ * ```
  */
-declare function getRequestScopedCache<V>(name: string): Map<string, V> | null;
-/** Enable SSR mode. Side effects (effect, watch, onMount) become no-ops. */
-declare function enableSSR(): void;
-/** Disable SSR mode. Side effects resume normal behavior. */
-declare function disableSSR(): void;
+declare function enhance(target: Element | string, setup: EnhanceSetup): () => void;
 /**
- * Run `fn` inside a fresh request-scoped SSR context. On Node this uses
- * AsyncLocalStorage so concurrent requests never share state; elsewhere
- * it falls back to mutating the module-global store.
+ * Enhance every element matching a selector. Returns a single dispose that
+ * tears down all of them.
  */
-declare function runInSSRContext<T>(fn: () => T): T;
+declare function enhanceAll(selector: string, setup: EnhanceSetup): () => void;
+
+/** When an island activates. Declared per-element via `data-sibu-load`. */
+type IslandStrategy = "load" | "idle" | "visible" | "interaction" | "media";
+/** A lazy code loader: resolves to an island setup (or a module whose `default`
+ *  is one). Only fetched when the island activates. Wrap with {@link lazyIsland}. */
+type IslandLoader = () => Promise<EnhanceSetup | {
+    default: EnhanceSetup;
+}>;
+/** Either an inline setup, or a {@link lazyIsland}-branded loader. */
+type IslandRegistration = EnhanceSetup | IslandLoader;
 /**
- * Run a function in SSR mode. Automatically enables/disables SSR around the callback.
- * Returns whatever the callback returns.
+ * Mark a loader as lazy island code — its module is fetched only when the island
+ * activates, so a page ships ~0 JS for islands that never trigger.
  *
- * Nesting-safe: saves the prior SSR flag and restores it in the `finally`
- * block. A nested `withSSR(...)` call cannot prematurely flip the outer
- * scope's SSR flag back to `false`, and an exception thrown inside `fn`
- * still leaves the flag in its original state.
+ * @example
+ * ```ts
+ * registerIsland("chart", lazyIsland(() => import("./islands/chart.js")));
+ * ```
  */
-declare function withSSR<T>(fn: () => T): T;
+declare function lazyIsland(loader: IslandLoader): IslandLoader;
+/**
+ * Register an island by name. The setup is applied via `enhance()` when a
+ * matching `[data-sibu-island="name"]` element activates.
+ *
+ * @example
+ * ```ts
+ * registerIsland("counter", (ctx) => {
+ *   const [n, setN] = signal(0);
+ *   ctx.text("@n", () => n());
+ *   ctx.on("@inc", "click", () => setN((v) => v + 1));
+ * });
+ * ```
+ */
+declare function registerIsland(name: string, setup: IslandRegistration): void;
+/** Remove a registration (mainly for tests / HMR). */
+declare function unregisterIsland(name: string): void;
+interface MountIslandsOptions {
+    /** IntersectionObserver options for the `visible` strategy. */
+    rootMargin?: string;
+    threshold?: number | number[];
+}
+/**
+ * Scan a root for `[data-sibu-island]` elements and activate each according to
+ * its `data-sibu-load` strategy (default `load`). Returns a cleanup function
+ * that cancels pending schedulers and disposes every mounted island.
+ *
+ * Strategies (`data-sibu-load`):
+ *   - `load`        — activate immediately (next microtask).
+ *   - `idle`        — `requestIdleCallback` (falls back to a timeout).
+ *   - `visible`     — when the element scrolls into view (IntersectionObserver).
+ *   - `interaction` — on first pointer/focus/key/touch interaction.
+ *   - `media`       — when `data-sibu-media` (a media query) matches.
+ */
+declare function mountIslands(root?: ParentNode | null, options?: MountIslandsOptions): () => void;
 
 /**
  * Batch multiple state updates into a single notification pass.
@@ -1333,23 +1620,14 @@ declare const enqueueBatchedSignal: BatchApi["enqueueBatchedSignal"];
 declare const isBatching: BatchApi["isBatching"];
 
 /**
- * Wait for the next microtask — after any currently-pending reactive updates
- * have been flushed. Useful in imperative code that needs to read DOM state
- * right after changing a signal.
- *
- * Under the hood this resolves on a microtask and again on an animation frame
- * so both synchronous reactive passes and layout side-effects have settled.
- *
- * @returns Promise that resolves after the next DOM flush
+ * Bind a dynamic attribute where both name and value can change reactively.
+ * Useful for `:attr.name` style dynamic keys.
  *
- * @example
- * ```ts
- * setMenuOpen(true);
- * await nextTick();
- * menuRef.current?.focus(); // DOM has the new menu rendered
- * ```
+ * When the attribute name changes, the old attribute is removed and the
+ * new one is set. Returns a teardown function that stops reactive tracking
+ * and removes the current attribute from the element.
  */
-declare function nextTick(): Promise<void>;
+declare function bindDynamic(el: HTMLElement, nameGetter: string | (() => string), valueGetter: string | (() => unknown)): () => void;
 
 /**
  * Create a deferred mirror of a reactive getter. The returned accessor
@@ -1405,6 +1683,25 @@ interface TransitionState {
  */
 declare function transition(): TransitionState;
 
+/**
+ * Wait for the next microtask — after any currently-pending reactive updates
+ * have been flushed. Useful in imperative code that needs to read DOM state
+ * right after changing a signal.
+ *
+ * Under the hood this resolves on a microtask and again on an animation frame
+ * so both synchronous reactive passes and layout side-effects have settled.
+ *
+ * @returns Promise that resolves after the next DOM flush
+ *
+ * @example
+ * ```ts
+ * setMenuOpen(true);
+ * await nextTick();
+ * menuRef.current?.focus(); // DOM has the new menu rendered
+ * ```
+ */
+declare function nextTick(): Promise<void>;
+
 type Subscriber = () => void;
 declare function suspendTracking(): void;
 declare function resumeTracking(): void;
@@ -1453,179 +1750,4 @@ declare const untracked: ReactiveApi["untracked"];
 declare const retrack: ReactiveApi["retrack"];
 declare const setMaxDrainIterations: ReactiveApi["setMaxDrainIterations"];
 
-/**
- * Bind a dynamic attribute where both name and value can change reactively.
- * Useful for `:attr.name` style dynamic keys.
- *
- * When the attribute name changes, the old attribute is removed and the
- * new one is set. Returns a teardown function that stops reactive tracking
- * and removes the current attribute from the element.
- */
-declare function bindDynamic(el: HTMLElement, nameGetter: string | (() => string), valueGetter: string | (() => unknown)): () => void;
-
-declare function takePendingError(node: Element): Error | undefined;
-type Component = () => HTMLElement;
-type LazyImport = () => Promise<{
-    default: Component;
-}>;
-/**
- * lazy() enables code-splitting by deferring the import of a component
- * until it is first rendered. Returns a wrapper component that shows a
- * loading state while the import resolves.
- *
- * @example
- * ```ts
- * const LazyDashboard = lazy(() => import("./Dashboard"));
- *
- * // Use inside Suspense for custom loading UI
- * Suspense({
- *   nodes: () => LazyDashboard(),
- *   fallback: () => div("Loading dashboard..."),
- * });
- *
- * // Or use standalone — shows default "Loading..." text
- * LazyDashboard();
- * ```
- *
- * @param importFn Dynamic import function returning `{ default: Component }`
- * @returns A component function that lazy-loads on first call
- */
-declare function lazy(importFn: LazyImport): Component;
-/**
- * Suspense provides a fallback UI while lazy or async nodes are loading.
- *
- * @example
- * ```ts
- * Suspense({
- *   nodes: () => LazyChart(),
- *   fallback: () => div("Loading chart..."),
- * });
- * ```
- *
- * @param props.nodes Function that returns the async/lazy component
- * @param props.fallback Function that returns the loading UI
- * @returns An HTMLElement that swaps from fallback to content when ready
- */
-interface SuspenseProps {
-    nodes: () => HTMLElement;
-    fallback: () => HTMLElement;
-}
-declare function Suspense({ nodes, fallback }: SuspenseProps): HTMLElement;
-
-interface ErrorBoundaryOptions {
-    /**
-     * Fallback renderer given an Error and retry callback.
-     * Memoized internally — only re-created when the error changes.
-     */
-    fallback?: (error: Error, retry: () => void) => Element;
-    /**
-     * Called when an error is caught (sync or async).
-     */
-    onError?: (error: Error) => void;
-    /**
-     * A list of reactive getters. Whenever any of these values change
-     * after an error has been caught, the boundary automatically resets
-     * (clears the error and re-renders). Useful for recovering from a
-     * failed render after the user navigates, changes filters, or
-     * otherwise picks a new input that might not fail this time.
-     *
-     * @example
-     * ```ts
-     * const [route, setRoute] = signal("/");
-     * ErrorBoundary(
-     *   { resetKeys: [route] },
-     *   () => div(riskyPageFor(route())),
-     * );
-     * ```
-     */
-    resetKeys?: Array<() => unknown>;
-}
-/** @deprecated Renamed to `ErrorBoundaryOptions`; kept for typing compatibility. */
-type ErrorBoundaryProps = ErrorBoundaryOptions;
-/**
- * ErrorBoundary component using SibuJS reactive pattern.
- *
- * Features:
- * - Catches sync errors thrown by children
- * - Catches async errors (Promise rejections) from children
- * - Supports nested ErrorBoundaries (inner catches first, outer catches propagation)
- * - Retry functionality to clear error and re-render children
- * - Memoized fallback to avoid re-creating fallback UI on every render
- * - onError callback for logging/telemetry
- * - Improved CSS styling
- */
-declare function ErrorBoundary(children: () => Element): Element;
-declare function ErrorBoundary(options: ErrorBoundaryOptions, children: () => Element): Element;
-
-type ErrorSeverity = "error" | "warning" | "info";
-interface ErrorDisplayProps {
-    /** The Error (or error-like value) to show. */
-    error: unknown;
-    /** Severity colour. Default `"error"`. */
-    severity?: ErrorSeverity;
-    /** Optional headline override. By default `error.message` is used. */
-    title?: string;
-    /**
-     * Label for the primary action. Shown next to a Reload button.
-     * Leave unset to hide the retry action.
-     */
-    retryLabel?: string;
-    /** Callback for the retry button. */
-    onRetry?: () => void;
-    /**
-     * If `true`, the Reload button is hidden. Useful for embedded
-     * error panels where a full page reload is inappropriate.
-     */
-    hideReload?: boolean;
-    /**
-     * If `true`, the stack trace and metadata are always shown even in
-     * production builds. Default: only shown in dev.
-     */
-    alwaysShowDetails?: boolean;
-    /**
-     * Extra metadata rendered as a key/value list under the message.
-     * Useful for attaching request IDs, user IDs, etc.
-     */
-    metadata?: Record<string, string | number | boolean | null | undefined>;
-}
-/**
- * Rich error display component. Wire an error-like value in and get
- * a colored panel back with copy, retry, reload, stack, cause chain,
- * and metadata — all built from tag factories. Reusable anywhere
- * (inside `ErrorBoundary`, from a fetch failure, from a form submit).
- *
- * @example
- * ```ts
- * button(
- *   { on: { click: async () => {
- *     try { await save(); }
- *     catch (err) { mount(ErrorDisplay({ error: err, onRetry: save }), errorHost); }
- *   }}},
- *   "Save",
- * );
- * ```
- */
-declare function ErrorDisplay(props: ErrorDisplayProps): Element;
-
-interface LoadingProps {
-    /** Text to show alongside the spinner */
-    text?: string;
-    /** Visual variant: "spinner" (default) or "dots" */
-    variant?: "spinner" | "dots";
-    /** Size: "sm", "md" (default), "lg" */
-    size?: "sm" | "md" | "lg";
-}
-/**
- * Built-in loading indicator component.
- *
- * @example
- * ```ts
- * Loading();                             // Default spinner
- * Loading({ text: "Loading data..." });  // With text
- * Loading({ variant: "dots" });          // Dots animation
- * Loading({ size: "lg" });               // Large spinner
- * ```
- */
-declare function Loading(props?: LoadingProps): HTMLElement;
-
-export { type Accessor, type ActionFn, type AnchorProps, type ArrayActions, type AsyncDerivedState, type AudioProps, type ButtonProps, type Context, DynamicComponent, type EffectBody, type EffectOptions, ErrorBoundary, type ErrorBoundaryOptions, type ErrorBoundaryProps, ErrorDisplay, type ErrorDisplayProps, type ErrorSeverity, type FormProps, Fragment, type ImgProps, type InputProps, type InputType, KeepAlive, type KeepAliveOptions, type LabelProps, Loading, type LoadingProps, type LongPressOptions, type MediaProps, NodeChild, NodeChildren, type OnCleanup, type OptionProps, Portal, type Ref, type SSRStore, type SelectProps, type SignalOptions, type SlotFn, type Slots, type StoreActions, Suspense, type SuspenseProps, TagProps, type TextareaProps, type TypedTagFunction, type VideoProps, __resetIdCounter, a, abbr, action, address, area, array, article, aside, asyncDerived, audio, autoResize, b, base, batch, bdi, bdo, bindDynamic, blockquote, body, br, button, canvas, caption, catchError, catchErrorAsync, center, checkLeaks, circle, cite, clickOutside, clipPath, code, col, colgroup, context, copyOnClick, createId, customElement, data, datalist, dd, deepEqual, deepSignal, defer, defs, del, derived, details, dfn, dialog, disableSSR, dispose, div, dl, dt, each, effect, ellipse, em, embed, enableSSR, enqueueBatchedSignal, fieldset, figcaption, figure, font, footer, form, g, getAction, getRequestScopedCache, getSSRStore, getSlot, h1, h2, h3, h4, h5, h6, head, header, hr, html, i, iframe, img, input, ins, isBatching, isSSR, kbd, label, lazy, legend, li, line, linearGradient, link, longPress, main, map, mark, marker, marquee, mask, match, math, menu, meta, meter, mount, nav, nextTick, noscript, object, ol, on, onCleanup, onMount, onUnmount, optgroup, option, output, p, param, path, pattern, picture, polygon, polyline, portal, pre, progress, q, radialGradient, reactiveArray, rect, ref, registerAction, registerComponent, registerDisposer, resolveComponent, retrack, rp, rt, ruby, runInSSRContext, s, samp, script, section, select, setGlobalErrorHandler, setMaxDrainIterations, show, signal, slot, small, source, span, stop, store, strict, strictEffect, strong, style, sub, summary, sup, svg, symbol, table, takePendingError, tbody, td, template, text, textarea, tfoot, th, thead, time, title, tr, track$1 as track, transition, trapFocus, tspan, u, ul, unregisterComponent, untracked, use, var_, video, watch, when, withSSR, writable };
+export { type Accessor, type ActionFn, type AnchorProps, type ArrayActions, type AsyncDerivedState, type AudioProps, type ButtonProps, type Context, DynamicComponent, type EffectBody, type EffectOptions, type EnhanceContext, type EnhanceSetup, ErrorBoundary, type ErrorBoundaryOptions, type ErrorBoundaryProps, ErrorDisplay, type ErrorDisplayProps, type ErrorSeverity, type FormProps, Fragment, type ImgProps, type InputProps, type InputType, type IslandLoader, type IslandRegistration, type IslandStrategy, KeepAlive, type KeepAliveOptions, type LabelProps, Loading, type LoadingProps, type LongPressOptions, type MediaProps, type MountIslandsOptions, NodeChild, NodeChildren, type OnCleanup, type OptionProps, Portal, type Ref, type SSRStore, type SelectProps, type SignalOptions, type SlotFn, type Slots, type StoreActions, Suspense, type SuspenseProps, TagProps, type TextareaProps, type TypedTagFunction, type VideoProps, __resetIdCounter, a, abbr, action, address, area, array, article, aside, asyncDerived, audio, autoResize, b, base, batch, bdi, bdo, bindDynamic, blockquote, body, br, button, canvas, caption, catchError, catchErrorAsync, center, checkLeaks, circle, cite, clickOutside, clipPath, code, col, colgroup, context, copyOnClick, createId, customElement, data, datalist, dd, deepEqual, deepSignal, defer, defs, del, derived, details, dfn, dialog, disableSSR, dispose, div, dl, dt, each, effect, ellipse, em, embed, enableSSR, enhance, enhanceAll, enqueueBatchedSignal, fieldset, figcaption, figure, font, footer, form, g, getAction, getRequestScopedCache, getSSRStore, getSlot, h1, h2, h3, h4, h5, h6, head, header, hr, html, i, iframe, img, input, ins, isBatching, isSSR, kbd, label, lazy, lazyIsland, legend, li, line, linearGradient, link, longPress, main, map, mark, marker, marquee, mask, match, math, menu, meta, meter, mount, mountIslands, nav, nextTick, noscript, object, ol, on, onCleanup, onMount, onUnmount, optgroup, option, output, p, param, path, pattern, picture, polygon, polyline, portal, pre, progress, q, radialGradient, reactiveArray, rect, ref, registerAction, registerComponent, registerDisposer, registerIsland, resolveComponent, retrack, rp, rt, ruby, runInSSRContext, s, samp, script, section, select, setGlobalErrorHandler, setMaxDrainIterations, show, signal, slot, small, source, span, stop, store, strict, strictEffect, strong, style, sub, summary, sup, svg, symbol, table, takePendingError, tbody, td, template, text, textarea, tfoot, th, thead, time, title, tr, track$1 as track, transition, trapFocus, tspan, u, ul, unregisterComponent, unregisterIsland, untracked, use, var_, video, watch, when, withSSR, writable };