sibujs 1.0.0-beta.1

package/dist/signal-BnWpq6WB.d.cts

@@ -0,0 +1,5 @@
+interface ReactiveSignal {
+    _subscribe?: (subscriber: () => void) => () => void;
+}
+
+export type { ReactiveSignal as R };

package/dist/signal-BnWpq6WB.d.ts

@@ -0,0 +1,5 @@
+interface ReactiveSignal {
+    _subscribe?: (subscriber: () => void) => () => void;
+}
+
+export type { ReactiveSignal as R };

package/dist/src/components/ErrorBoundary.d.ts

@@ -0,0 +1,15 @@
+export interface ErrorBoundaryProps {
+    /**
+     * Function that renders child content or throws.
+     */
+    children: () => HTMLElement;
+    /**
+     * Fallback renderer given an Error and optional retry callback.
+     */
+    fallback?: (error: Error, retry?: () => void) => HTMLElement;
+}
+/**
+ * ErrorBoundary component using SibuJS reactive pattern.
+ * Catches errors from children and displays fallback UI with retry functionality.
+ */
+export declare function ErrorBoundary({ children, fallback }: ErrorBoundaryProps): HTMLElement;

package/dist/src/components/ErrorBoundary.js

@@ -0,0 +1,119 @@
+import { useState } from "../core/useState";
+import { div, h3, p, button, style } from "../core/html";
+// CSS styles for ErrorBoundary
+const errorBoundaryStyles = `
+  .error-fallback {
+    border: 2px solid #dc3545;
+    border-radius: 8px;
+    padding: 20px;
+    margin: 10px 0;
+    background-color: #ffebee;
+    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
+  }
+
+  .error-fallback .section-title {
+    margin: 0 0 15px 0;
+    color: #dc3545;
+    font-size: 1.2em;
+    font-weight: bold;
+  }
+
+  .error-fallback .text-mono {
+    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
+    background-color: #f8f9fa;
+    padding: 8px 12px;
+    border-radius: 4px;
+    border: 1px solid #e9ecef;
+    margin: 10px 0;
+    color: #495057;
+    word-break: break-word;
+  }
+
+  .error-fallback .btn {
+    display: inline-block;
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    text-decoration: none;
+    transition: all 0.2s ease;
+    margin: 4px 0;
+  }
+
+  .error-fallback .btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  .error-fallback .btn:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+
+  .error-fallback .btn-danger {
+    background-color: #dc3545;
+    color: white;
+  }
+
+  .error-fallback .btn-danger:hover {
+    background-color: #c82333;
+  }
+`;
+// Inject styles only once
+let stylesInjected = false;
+function injectStyles() {
+    if (!stylesInjected) {
+        const styleElement = style({ children: errorBoundaryStyles });
+        document.head.appendChild(styleElement);
+        stylesInjected = true;
+    }
+}
+/**
+ * ErrorBoundary component using SibuJS reactive pattern.
+ * Catches errors from children and displays fallback UI with retry functionality.
+ */
+export function ErrorBoundary({ children, fallback }) {
+    // Inject styles when component is used
+    injectStyles();
+    const [error, setError] = useState(null);
+    const retry = () => setError(null);
+    // Default fallback with built-in styling
+    const defaultFallback = (error, retry) => div({
+        class: "error-fallback",
+        children: [
+            h3({
+                children: "🚨 Something went wrong!",
+                class: "section-title"
+            }),
+            p({
+                children: `Error: ${error.message}`,
+                class: "text-mono"
+            }),
+            retry ? button({
+                children: "🔄 Try Again",
+                class: "btn btn-danger",
+                on: { click: retry }
+            }) : null
+        ].filter(Boolean)
+    });
+    return div({
+        children: () => {
+            const currentError = error();
+            if (currentError) {
+                return fallback ? fallback(currentError, retry) : defaultFallback(currentError, retry);
+            }
+            try {
+                return children();
+            }
+            catch (e) {
+                const errorObj = e instanceof Error ? e : new Error(String(e));
+                // Set error state and let next render cycle show the fallback
+                setError(errorObj);
+                // Return fallback immediately instead of temporary message
+                return fallback ? fallback(errorObj, retry) : defaultFallback(errorObj, retry);
+            }
+        }
+    });
+}

package/dist/src/core/catch.d.ts

@@ -0,0 +1,11 @@
+type ErrorHandler = (error: unknown, context?: any) => void;
+/**
+ * Wraps any function in a try/catch block and optionally passes error to a handler.
+ * This is used internally by components or boundaries.
+ */
+export declare function catchError(fn: () => any, onError?: ErrorHandler): any;
+/**
+ * Sets a global error handler used by default if no onError is provided.
+ */
+export declare function setGlobalErrorHandler(handler: ErrorHandler): void;
+export {};

package/dist/src/core/catch.js

@@ -0,0 +1,28 @@
+let globalErrorHandler = null;
+/**
+ * Wraps any function in a try/catch block and optionally passes error to a handler.
+ * This is used internally by components or boundaries.
+ */
+export function catchError(fn, onError) {
+    try {
+        return fn();
+    }
+    catch (err) {
+        if (onError) {
+            onError(err);
+        }
+        else if (globalErrorHandler) {
+            globalErrorHandler(err);
+        }
+        else {
+            console.error("Unhandled error in Sibu.catch:", err);
+        }
+        return null;
+    }
+}
+/**
+ * Sets a global error handler used by default if no onError is provided.
+ */
+export function setGlobalErrorHandler(handler) {
+    globalErrorHandler = handler;
+}

package/dist/src/core/each.d.ts

@@ -0,0 +1,13 @@
+import { NodeChild } from "./types";
+/**
+ * Renders a list of nodes efficiently with key-based diffing.
+ * Only removes nodes whose keys are absent, reuses existing nodes, and orders them.
+ *
+ * @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.
+ */
+export declare function each<T>(getArray: () => T[], render: (item: T, index: number) => NodeChild, options: {
+    key: (item: T) => string | number;
+}): Comment;

package/dist/src/core/each.js

@@ -0,0 +1,68 @@
+import { track } from "../reactivity/track";
+/**
+ * Resolves a NodeChild to a real Node.
+ * - If it's a function, calls recursively.
+ * - If it's already a Node, returns it.
+ * - Otherwise (string/number), wraps in Text node.
+ */
+function resolveNodeChild(child) {
+    if (typeof child === "function") {
+        return resolveNodeChild(child());
+    }
+    if (child instanceof Node) {
+        return child;
+    }
+    return document.createTextNode(String(child));
+}
+/**
+ * Renders a list of nodes efficiently with key-based diffing.
+ * Only removes nodes whose keys are absent, reuses existing nodes, and orders them.
+ *
+ * @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.
+ */
+export function each(getArray, render, options) {
+    const anchor = document.createComment("each:anchor");
+    let nodeMap = new Map();
+    const update = () => {
+        const parent = anchor.parentNode;
+        if (!parent)
+            return;
+        const arr = getArray();
+        const newKeys = arr.map(options.key);
+        const newNodeMap = new Map();
+        // Build or reuse nodes
+        newKeys.forEach((key, i) => {
+            if (nodeMap.has(key)) {
+                newNodeMap.set(key, nodeMap.get(key));
+            }
+            else {
+                const raw = render(arr[i], i);
+                const node = resolveNodeChild(raw);
+                newNodeMap.set(key, node);
+            }
+        });
+        // Remove old nodes not in new keys
+        for (const [key, node] of nodeMap) {
+            if (!newNodeMap.has(key) && node.parentNode) {
+                parent.removeChild(node);
+            }
+        }
+        // Insert or reorder nodes
+        let next = anchor.nextSibling;
+        for (const key of newKeys) {
+            const node = newNodeMap.get(key);
+            if (node !== next) {
+                parent.insertBefore(node, next);
+            }
+            else {
+                next = next.nextSibling;
+            }
+        }
+        nodeMap = newNodeMap;
+    };
+    queueMicrotask(() => track(update, update));
+    return anchor;
+}

package/dist/src/core/for.d.ts

@@ -0,0 +1,12 @@
+/**
+ * For - Smart array rendering with automatic reactivity and fallbacks
+ *
+ * @param array Reactive array or getter function returning array
+ * @param renderFn Function to render each item
+ * @param options Configuration options
+ * @returns Comment node (anchor) for the list or fallback element
+ */
+export declare function For<T>(array: T[] | (() => T[]), renderFn: (item: T, index: number) => HTMLElement, options?: {
+    key?: (item: T) => string | number;
+    fallback?: HTMLElement | string;
+}): Comment | HTMLElement;

package/dist/src/core/for.js

@@ -0,0 +1,67 @@
+import { each } from "./each";
+import { div } from "./html";
+import { track } from "../reactivity/track";
+/**
+ * For - Smart array rendering with automatic reactivity and fallbacks
+ *
+ * @param array Reactive array or getter function returning array
+ * @param renderFn Function to render each item
+ * @param options Configuration options
+ * @returns Comment node (anchor) for the list or fallback element
+ */
+export function For(array, renderFn, options) {
+    const arrayGetter = typeof array === 'function' ? array : () => array;
+    // If fallback is provided, create reactive container
+    if (options?.fallback) {
+        const container = div({ style: { display: 'contents' } });
+        let currentElement = null;
+        const update = () => {
+            const items = arrayGetter();
+            const isEmpty = !items || items.length === 0;
+            // Remove current element
+            if (currentElement?.parentNode) {
+                currentElement.parentNode.removeChild(currentElement);
+            }
+            if (isEmpty) {
+                // Show fallback
+                const fallbackEl = typeof options.fallback === 'string'
+                    ? div({ children: options.fallback })
+                    : options.fallback;
+                container.appendChild(fallbackEl);
+                currentElement = fallbackEl;
+            }
+            else {
+                // Show list
+                const listAnchor = each(arrayGetter, renderFn, {
+                    key: options?.key || autoKey
+                });
+                container.appendChild(listAnchor);
+                currentElement = listAnchor;
+            }
+        };
+        // Initial render and reactive updates
+        queueMicrotask(() => track(update, update));
+        return container;
+    }
+    // Simple case: just return the each() anchor
+    return each(arrayGetter, renderFn, {
+        key: options?.key || autoKey
+    });
+}
+/**
+ * Auto-generate keys for items
+ */
+function autoKey(item) {
+    // Try common id fields
+    if (item && typeof item === 'object') {
+        const obj = item;
+        if ('id' in obj)
+            return obj.id;
+        if ('key' in obj)
+            return obj.key;
+        if ('_id' in obj)
+            return obj._id;
+    }
+    // Fallback to JSON stringify (not ideal for performance but works)
+    return JSON.stringify(item);
+}

package/dist/src/core/html.d.ts

@@ -0,0 +1,137 @@
+export declare const html: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const head: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const body: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const title: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const div: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const span: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const section: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const article: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const header: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const footer: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const nav: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const main: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const aside: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const address: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const p: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const h1: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const h2: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const h3: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const h4: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const h5: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const h6: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const blockquote: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const dd: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const dl: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const dt: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const figcaption: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const figure: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const hr: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const li: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const ol: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const ul: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const pre: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const a: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const abbr: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const b: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const bdi: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const bdo: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const br: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const cite: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const code: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const data: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const dfn: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const em: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const i: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const kbd: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const mark: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const q: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const rp: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const rt: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const ruby: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const s: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const samp: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const small: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const strong: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const sub: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const sup: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const time: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const u: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const var_: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const area: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const audio: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const img: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const map: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const track: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const video: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const embed: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const iframe: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const object: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const param: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const picture: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const portal: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const source: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const svg: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const math: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const canvas: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const noscript: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const script: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const del: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const ins: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const caption: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const col: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const colgroup: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const table: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const tbody: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const td: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const tfoot: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const th: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const thead: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const tr: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const button: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const datalist: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const fieldset: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const form: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const input: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const label: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const legend: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const meter: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const optgroup: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const option: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const output: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const progress: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const select: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const textarea: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const details: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const dialog: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const menu: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const summary: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const slot: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const template: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const base: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const link: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const meta: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const style: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const circle: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const ellipse: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const g: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const line: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const path: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const polygon: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const polyline: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const rect: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const text: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const tspan: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const defs: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const clipPath: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const mask: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const pattern: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const linearGradient: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const radialGradient: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const stop: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const use: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const symbol: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const marker: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const center: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const font: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const marquee: (props?: import("./tagFactory").TagProps) => HTMLElement;
+export declare const customElement: (tagName: string) => (props?: import("./tagFactory").TagProps) => HTMLElement;

package/dist/src/core/html.js

@@ -0,0 +1,155 @@
+import { tagFactory } from "./tagFactory";
+// Document structure
+export const html = tagFactory("html");
+export const head = tagFactory("head");
+export const body = tagFactory("body");
+export const title = tagFactory("title");
+// Content sectioning
+export const div = tagFactory("div");
+export const span = tagFactory("span");
+export const section = tagFactory("section");
+export const article = tagFactory("article");
+export const header = tagFactory("header");
+export const footer = tagFactory("footer");
+export const nav = tagFactory("nav");
+export const main = tagFactory("main");
+export const aside = tagFactory("aside");
+export const address = tagFactory("address");
+// Text content
+export const p = tagFactory("p");
+export const h1 = tagFactory("h1");
+export const h2 = tagFactory("h2");
+export const h3 = tagFactory("h3");
+export const h4 = tagFactory("h4");
+export const h5 = tagFactory("h5");
+export const h6 = tagFactory("h6");
+export const blockquote = tagFactory("blockquote");
+export const dd = tagFactory("dd");
+export const dl = tagFactory("dl");
+export const dt = tagFactory("dt");
+export const figcaption = tagFactory("figcaption");
+export const figure = tagFactory("figure");
+export const hr = tagFactory("hr");
+export const li = tagFactory("li");
+export const ol = tagFactory("ol");
+export const ul = tagFactory("ul");
+export const pre = tagFactory("pre");
+// Inline text semantics
+export const a = tagFactory("a");
+export const abbr = tagFactory("abbr");
+export const b = tagFactory("b");
+export const bdi = tagFactory("bdi");
+export const bdo = tagFactory("bdo");
+export const br = tagFactory("br");
+export const cite = tagFactory("cite");
+export const code = tagFactory("code");
+export const data = tagFactory("data");
+export const dfn = tagFactory("dfn");
+export const em = tagFactory("em");
+export const i = tagFactory("i");
+export const kbd = tagFactory("kbd");
+export const mark = tagFactory("mark");
+export const q = tagFactory("q");
+export const rp = tagFactory("rp");
+export const rt = tagFactory("rt");
+export const ruby = tagFactory("ruby");
+export const s = tagFactory("s");
+export const samp = tagFactory("samp");
+export const small = tagFactory("small");
+export const strong = tagFactory("strong");
+export const sub = tagFactory("sub");
+export const sup = tagFactory("sup");
+export const time = tagFactory("time");
+export const u = tagFactory("u");
+export const var_ = tagFactory("var"); // 'var' is a reserved keyword
+// Image and multimedia
+export const area = tagFactory("area");
+export const audio = tagFactory("audio");
+export const img = tagFactory("img");
+export const map = tagFactory("map");
+export const track = tagFactory("track");
+export const video = tagFactory("video");
+// Embedded content
+export const embed = tagFactory("embed");
+export const iframe = tagFactory("iframe");
+export const object = tagFactory("object");
+export const param = tagFactory("param");
+export const picture = tagFactory("picture");
+export const portal = tagFactory("portal");
+export const source = tagFactory("source");
+// SVG and MathML
+export const svg = tagFactory("svg");
+export const math = tagFactory("math");
+// Scripting
+export const canvas = tagFactory("canvas");
+export const noscript = tagFactory("noscript");
+export const script = tagFactory("script");
+// Demarcating edits
+export const del = tagFactory("del");
+export const ins = tagFactory("ins");
+// Table content
+export const caption = tagFactory("caption");
+export const col = tagFactory("col");
+export const colgroup = tagFactory("colgroup");
+export const table = tagFactory("table");
+export const tbody = tagFactory("tbody");
+export const td = tagFactory("td");
+export const tfoot = tagFactory("tfoot");
+export const th = tagFactory("th");
+export const thead = tagFactory("thead");
+export const tr = tagFactory("tr");
+// Forms
+export const button = tagFactory("button");
+export const datalist = tagFactory("datalist");
+export const fieldset = tagFactory("fieldset");
+export const form = tagFactory("form");
+export const input = tagFactory("input");
+export const label = tagFactory("label");
+export const legend = tagFactory("legend");
+export const meter = tagFactory("meter");
+export const optgroup = tagFactory("optgroup");
+export const option = tagFactory("option");
+export const output = tagFactory("output");
+export const progress = tagFactory("progress");
+export const select = tagFactory("select");
+export const textarea = tagFactory("textarea");
+// Interactive elements
+export const details = tagFactory("details");
+export const dialog = tagFactory("dialog");
+export const menu = tagFactory("menu");
+export const summary = tagFactory("summary");
+// Web Components
+export const slot = tagFactory("slot");
+export const template = tagFactory("template");
+// Document metadata
+export const base = tagFactory("base");
+export const link = tagFactory("link");
+export const meta = tagFactory("meta");
+export const style = tagFactory("style");
+// Common SVG elements
+export const circle = tagFactory("circle");
+export const ellipse = tagFactory("ellipse");
+export const g = tagFactory("g");
+export const line = tagFactory("line");
+export const path = tagFactory("path");
+export const polygon = tagFactory("polygon");
+export const polyline = tagFactory("polyline");
+export const rect = tagFactory("rect");
+export const text = tagFactory("text");
+export const tspan = tagFactory("tspan");
+export const defs = tagFactory("defs");
+export const clipPath = tagFactory("clipPath");
+export const mask = tagFactory("mask");
+export const pattern = tagFactory("pattern");
+export const linearGradient = tagFactory("linearGradient");
+export const radialGradient = tagFactory("radialGradient");
+export const stop = tagFactory("stop");
+export const use = tagFactory("use");
+export const symbol = tagFactory("symbol");
+export const marker = tagFactory("marker");
+// Obsolete/deprecated elements (for legacy support)
+export const center = tagFactory("center");
+export const font = tagFactory("font");
+export const marquee = tagFactory("marquee");
+// Custom elements placeholder
+export const customElement = (tagName) => tagFactory(tagName);

package/dist/src/core/htmlIf.d.ts

@@ -0,0 +1,11 @@
+import type { NodeChild } from "./types";
+/**
+ * Conditionally mounts a node subtree based on a reactive predicate.
+ * When the condition is true, the render function is invoked and its result is displayed.
+ * When false, the subtree is removed.
+ *
+ * @param condition - Reactive predicate that returns a boolean.
+ * @param render - Function that returns the NodeChild to mount.
+ * @returns A Comment node serving as the anchor point.
+ */
+export declare function htmlIf(condition: () => boolean, render: () => NodeChild): Comment;