sibujs 1.0.0-beta.1

package/dist/index.d.ts

@@ -0,0 +1,869 @@
+import { T as TagProps, N as NodeChildren, a as NodeChild } from './tagFactory-DeAXq9ef.js';
+export { S as SVG_NS, t as tagFactory } from './tagFactory-DeAXq9ef.js';
+import { R as ReactiveSignal } from './signal-BnWpq6WB.js';
+
+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: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+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: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const img: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const map: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const track: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const video: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+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: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const datalist: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const fieldset: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const form: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const input: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const label: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+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: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const output: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const progress: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const select: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+declare const textarea: (first?: TagProps | NodeChildren, second?: NodeChildren) => Element;
+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;
+
+/**
+ * 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.
+ *
+ * Usage:
+ *   html`<div class="container">
+ *     <h1>${() => title()}</h1>
+ *     <button on:click=${handler}>Click me</button>
+ *     ${each(() => items(), item => html`<li>${item.name}</li>`)}
+ *   </div>`
+ *
+ * Supports:
+ *   - All HTML/SVG tags → Sibu elements via tagFactory
+ *   - Static attributes: class="foo"
+ *   - Dynamic attributes: class=${() => "active"}, id=${myId}
+ *   - Event handlers: on:click=${handler}
+ *   - Reactive children: ${() => count()}
+ *   - Sibu directives as children: ${each(...)}, ${when(...)}
+ *   - Self-closing tags: <br />, <img src="..." />
+ *   - Void elements: <br>, <input type="text">
+ */
+declare function html(strings: TemplateStringsArray, ...values: unknown[]): Element;
+
+/**
+ * Mounts a root component into a DOM element.
+ * Supports both function components and pre-created HTMLElements.
+ */
+declare function mount(component: (() => Element) | Element | Node, container: Element | null): {
+    node: Node;
+    unmount: () => void;
+};
+
+/**
+ * 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.
+ *
+ * @param getArray A reactive getter returning an array.
+ * @param render A function that returns a NodeChild for each item.
+ * @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({
+ *   nodes: [
+ *     Fragment([
+ *       p({ nodes: "First" }),
+ *       p({ nodes: "Second" }),
+ *     ])
+ *   ]
+ * });
+ * ```
+ *
+ * @param nodes Array of child nodes to include in the fragment
+ * @returns A DocumentFragment containing all nodes
+ */
+declare function Fragment(nodes: NodeChildren[]): DocumentFragment;
+
+/**
+ * Portal renders nodes into a DOM node outside the parent component hierarchy.
+ * Useful for modals, tooltips, dropdowns, and overlays.
+ *
+ * @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
+ * // Render modal at document.body
+ * Portal(() => div({ class: "modal", nodes: "Modal content" }));
+ *
+ * // Render into specific container
+ * const overlay = document.getElementById("overlay-root")!;
+ * Portal(() => div({ nodes: "Tooltip" }), overlay);
+ * ```
+ */
+declare function Portal(nodes: () => HTMLElement, target?: HTMLElement): Comment;
+
+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({ nodes: [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;
+
+type SlotFn = () => Element | string | number | null | undefined;
+type Slots = Record<string, SlotFn>;
+declare function getSlot(slots: Slots | undefined, name?: string): SlotFn | undefined;
+
+/**
+ * Conditional rendering directive. Shows or hides an element reactively.
+ * Unlike `when()`, the element is always created — it just toggles display.
+ *
+ * @param condition Reactive getter returning boolean
+ * @param element The element to show/hide
+ * @returns The element with reactive display binding
+ *
+ * @example
+ * ```ts
+ * const [visible, setVisible] = signal(true);
+ * div({ nodes: [show(() => visible(), span({ nodes: "I toggle!" }))] });
+ * ```
+ */
+declare function show(condition: () => boolean, element: HTMLElement): HTMLElement;
+/**
+ * Conditional rendering directive. Renders content only when condition is true.
+ * When false, renders nothing (comment placeholder). Re-evaluates reactively.
+ *
+ * @param condition Reactive getter returning boolean
+ * @param thenBranch Function returning element when true
+ * @param elseBranch Optional function returning element when false
+ * @returns A Comment anchor that manages the conditional content
+ *
+ * @example
+ * ```ts
+ * when(
+ *   () => isLoggedIn(),
+ *   () => div({ nodes: "Welcome!" }),
+ *   () => div({ nodes: "Please log in" })
+ * );
+ * ```
+ */
+declare function when(condition: () => boolean, thenBranch: () => NodeChild, elseBranch?: () => NodeChild): Comment;
+/**
+ * Pattern matching directive. Renders content based on matching a reactive value
+ * against multiple cases. Similar to a switch statement.
+ *
+ * @param value Reactive getter returning the value to match
+ * @param cases Object mapping values to render functions
+ * @param fallback Optional default case if no match found
+ * @returns A Comment anchor that manages the matched content
+ *
+ * @example
+ * ```ts
+ * match(
+ *   () => status(),
+ *   {
+ *     loading: () => Spinner(),
+ *     error: () => ErrorMessage(),
+ *     success: () => Content(),
+ *   },
+ *   () => div({ nodes: "Unknown status" })
+ * );
+ * ```
+ */
+declare function match<T extends string | number>(value: () => T, cases: Record<string, () => NodeChild>, fallback?: () => NodeChild): Comment;
+
+type ErrorHandler = (error: unknown, context?: string) => void;
+/**
+ * Wraps a function in a try/catch block with typed error handling.
+ * Supports both sync and async functions (catches Promise rejections).
+ *
+ * @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;
+
+/**
+ * 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.
+ */
+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 is unexpectedly high.
+ *
+ * Usage in tests or dev tools:
+ *   const before = checkLeaks();
+ *   // mount and unmount component
+ *   const after = checkLeaks();
+ *   assert(after === before); // no leaked bindings
+ */
+declare function checkLeaks(warnThreshold?: number): number;
+
+type SetState<T> = (next: T | ((prev: T) => T)) => void;
+type StateTuple<T> = [() => T, SetState<T>];
+/** Options for signal */
+interface SignalOptions {
+    /** Debug name for devtools inspection. Only used in development. */
+    name?: string;
+}
+/**
+ * signal creates a reactive signal that holds a value of type T.
+ * Returns a tuple: [getter, setter].
+ *
+ * @param initial Initial value
+ * @param options Optional config: `{ name: "count" }` for devtools labeling
+ *
+ * When __SIBU_DEVTOOLS_GLOBAL_HOOK__ is present on the window,
+ * signals are automatically registered and state changes are emitted.
+ * The hook check is a single property read — zero overhead when absent.
+ */
+declare function signal<T>(initial: T, options?: SignalOptions): StateTuple<T>;
+
+/**
+ * effect runs the provided effectFn immediately and re-runs it whenever
+ * any reactive dependency changes.
+ * Returns a cleanup function to stop further executions.
+ *
+ * In SSR mode, effect is a no-op — side effects should not run on the server.
+ */
+declare function effect(effectFn: () => void): () => void;
+
+/**
+ * derived creates a derived reactive signal whose value updates when dependencies change.
+ *
+ * Uses lazy pull-based evaluation with dirty flagging:
+ * - When a dependency changes, the computed is marked dirty (no re-evaluation).
+ * - Dirtiness propagates downstream via notifySubscribers.
+ * - The getter only re-evaluates when actually read (pull-based).
+ */
+declare function derived<T>(getter: () => T, options?: {
+    name?: string;
+}): () => T;
+
+/**
+ * Watches a reactive getter and calls callback with (newValue, oldValue) when it changes.
+ *
+ * In SSR mode, watch is a no-op — subscriptions should not run on the server.
+ *
+ * @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 watch<T>(getter: () => T, callback: (value: T, prev: T | undefined) => void): () => void;
+
+type StoreSubscriber<T> = (state: T) => void;
+interface StoreActions<T> {
+    /** Apply a partial patch or updater function */
+    setState: (patch: Partial<T> | ((state: T) => T)) => void;
+    /** Revert to initial state */
+    reset: () => void;
+    /** Subscribe to all state changes. Returns unsubscribe function. */
+    subscribe: (callback: StoreSubscriber<T>) => () => void;
+    /** Subscribe to changes on a specific key. Returns unsubscribe function. */
+    subscribeKey: <K extends keyof T>(key: K, callback: (value: T[K], prev: T[K]) => void) => () => void;
+    /** Get a snapshot of the current state (non-reactive) */
+    getSnapshot: () => T;
+}
+/**
+ * Creates a global store with reactive properties and subscription support.
+ *
+ * @param initialState Initial state object
+ * @returns A tuple [store, actions]
+ *
+ * @example
+ * ```ts
+ * const [store, { setState, subscribe, subscribeKey }] = store({
+ *   count: 0,
+ *   name: "Alice"
+ * });
+ *
+ * // Subscribe to all changes
+ * const unsub = subscribe((state) => console.log("Changed:", state));
+ *
+ * // Subscribe to specific key
+ * const unsub2 = subscribeKey("count", (val, prev) => {
+ *   console.log(`count: ${prev} → ${val}`);
+ * });
+ * ```
+ */
+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 that persists across renders.
+ * Unlike signal, updating a ref does NOT trigger re-renders.
+ *
+ * Common uses:
+ * - Storing DOM element references
+ * - Holding mutable values without causing reactivity
+ * - Imperative API handles (e.g., focus, scroll)
+ *
+ * @param initial Optional initial value for the ref
+ * @returns An object with a mutable `current` property
+ */
+interface Ref<T> {
+    current: T;
+}
+declare function ref<T>(initial: T): Ref<T>;
+declare function ref<T = undefined>(): Ref<T | undefined>;
+
+/**
+ * memo returns a memoized value that only recomputes when its
+ * reactive dependencies change. This is semantically identical to
+ * derived but named for convenience.
+ *
+ * Use this to avoid expensive computations on every render cycle.
+ *
+ * @param factory Function that computes the memoized value
+ * @returns Getter function that returns the memoized value
+ */
+declare function memo<T>(factory: () => T): () => T;
+
+/**
+ * memoFn returns a memoized callback function that only updates
+ * when its reactive dependencies change. This prevents unnecessary
+ * re-creations of callback functions passed to child components.
+ *
+ * @param callback The callback function to memoize
+ * @returns Getter that returns the current memoized callback
+ */
+declare function memoFn<T extends (...args: any[]) => any>(callback: () => T): () => T;
+
+/**
+ * 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[]): [() => 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[]): [() => readonly T[], ArrayActions<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.
+ *
+ * @param initial Initial value
+ * @returns Tuple [getter, setter]
+ *
+ * @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
+ * ```
+ */
+declare function deepSignal<T>(initial: T): [() => T, (next: T | ((prev: T) => T)) => void];
+
+/**
+ * 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({ nodes: "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.
+ *
+ * Optionally returns a cleanup function that will be called on unmount
+ * (if you also use onUnmount, prefer that for explicit 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.
+ */
+declare function onMount(callback: () => undefined | CleanupFn, element?: HTMLElement): void;
+/**
+ * Runs a callback when the given element is removed from the DOM.
+ * Uses MutationObserver to watch for disconnection.
+ *
+ * @param callback Function to run on unmount
+ * @param element The element to watch for removal
+ */
+declare function onUnmount(callback: CleanupFn, element: HTMLElement): void;
+
+/**
+ * Context API for SibuJS — provides dependency injection across
+ * component trees without prop drilling.
+ *
+ * Inspired by React's Context and Vue's provide/inject patterns.
+ *
+ * @example
+ * ```ts
+ * // Create a context with a default value
+ * const ThemeContext = context("light");
+ *
+ * // Provide a value at a parent level
+ * function App() {
+ *   ThemeContext.provide("dark");
+ *   return div({ nodes: [Child()] });
+ * }
+ *
+ * // Consume the value anywhere below
+ * function Child() {
+ *   const theme = ThemeContext.use(); // reactive getter
+ *   return div({ nodes: () => `Theme: ${theme()}` });
+ * }
+ * ```
+ */
+interface Context<T> {
+    /** Provide a value for this context. Overrides any parent provider. */
+    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;
+}
+/**
+ * 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 context<T>(defaultValue: T): Context<T>;
+
+/**
+ * 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.
+ *
+ * Usage:
+ *   enableSSR();        // Call before rendering on the server
+ *   renderToString(...);
+ *   disableSSR();       // Call after rendering (cleanup)
+ *
+ * Or use the scoped helper:
+ *   withSSR(() => renderToString(...));
+ */
+/** Returns true when running in SSR mode. */
+declare function isSSR(): boolean;
+/** 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;
+/**
+ * Run a function in SSR mode. Automatically enables/disables SSR around the callback.
+ * Returns whatever the callback returns.
+ */
+declare function withSSR<T>(fn: () => T): T;
+
+/**
+ * Batch multiple state updates into a single notification pass.
+ * Subscribers are only notified once after the batch completes,
+ * preventing excessive re-renders during bulk updates.
+ *
+ * Can be nested — only the outermost batch triggers notifications.
+ *
+ * @param fn Function containing state updates to batch
+ *
+ * @example
+ * ```ts
+ * const [name, setName] = signal("Alice");
+ * const [age, setAge] = signal(25);
+ *
+ * batch(() => {
+ *   setName("Bob");
+ *   setAge(30);
+ * }); // Only one notification pass
+ * ```
+ */
+declare function batch(fn: () => void): void;
+/**
+ * Queue a signal for deferred notification during a batch.
+ * If not batching, returns false so the caller can notify immediately.
+ */
+declare function enqueueBatchedSignal(signal: ReactiveSignal): boolean;
+/**
+ * Check if we're currently inside a batch.
+ */
+declare function isBatching(): boolean;
+
+/**
+ * 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;
+
+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({ nodes: "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({ nodes: "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 ErrorBoundaryProps {
+    /**
+     * Function that renders child content or throws.
+     */
+    nodes: () => Element;
+    /**
+     * 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;
+}
+/**
+ * ErrorBoundary component using SibuJS reactive pattern.
+ *
+ * Features:
+ * - Catches sync errors thrown by nodes
+ * - Catches async errors (Promise rejections) from nodes
+ * - Supports nested ErrorBoundaries (inner catches first, outer catches propagation)
+ * - Retry functionality to clear error and re-render nodes
+ * - Memoized fallback to avoid re-creating fallback UI on every render
+ * - onError callback for logging/telemetry
+ * - Improved CSS styling
+ */
+declare function ErrorBoundary({ nodes, fallback, onError }: ErrorBoundaryProps): 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 ArrayActions, type Context, DynamicComponent, ErrorBoundary, type ErrorBoundaryProps, Fragment, Loading, type LoadingProps, Portal, type Ref, type SignalOptions, type SlotFn, type Slots, type StoreActions, Suspense, type SuspenseProps, TagProps, a, abbr, address, area, array, article, aside, audio, b, base, batch, bdi, bdo, bindDynamic, blockquote, body, br, button, canvas, caption, catchError, catchErrorAsync, center, checkLeaks, circle, cite, clipPath, code, col, colgroup, context, customElement, data, datalist, dd, deepSignal, 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, 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, main, map, mark, marker, marquee, mask, match, math, memo, memoFn, menu, meta, meter, mount, nav, noscript, object, ol, onMount, onUnmount, optgroup, option, output, p, param, path, pattern, picture, polygon, polyline, portal, pre, progress, q, radialGradient, reactiveArray, rect, ref, registerComponent, registerDisposer, resolveComponent, rp, rt, ruby, s, samp, script, section, select, setGlobalErrorHandler, show, signal, slot, small, source, span, stop, store, strong, style, sub, summary, sup, svg, symbol, table, tbody, td, template, text, textarea, tfoot, th, thead, time, title, tr, track, tspan, u, ul, unregisterComponent, use, var_, video, watch, when, withSSR };