elit 1.0.0 → 2.0.0

package/dist/index.global.js

@@ -1,2064 +0,0 @@
-"use strict";
-var DomLib = (() => {
-  var __defProp = Object.defineProperty;
-  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-  var __getOwnPropNames = Object.getOwnPropertyNames;
-  var __hasOwnProp = Object.prototype.hasOwnProperty;
-  var __export = (target, all) => {
-    for (var name in all)
-      __defProp(target, name, { get: all[name], enumerable: true });
-  };
-  var __copyProps = (to, from, except, desc) => {
-    if (from && typeof from === "object" || typeof from === "function") {
-      for (let key of __getOwnPropNames(from))
-        if (!__hasOwnProp.call(to, key) && key !== except)
-          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-    }
-    return to;
-  };
-  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-  // src/index.ts
-  var index_exports = {};
-  __export(index_exports, {
-    CreateStyle: () => CreateStyle,
-    DomNode: () => DomNode,
-    a: () => a,
-    abbr: () => abbr,
-    addLink: () => addLink,
-    addMeta: () => addMeta,
-    addStyle: () => addStyle,
-    address: () => address,
-    area: () => area,
-    article: () => article,
-    aside: () => aside,
-    audio: () => audio,
-    b: () => b,
-    base: () => base,
-    batchRender: () => batchRender,
-    bdi: () => bdi,
-    bdo: () => bdo,
-    bindChecked: () => bindChecked,
-    bindValue: () => bindValue,
-    blockquote: () => blockquote,
-    body: () => body,
-    br: () => br,
-    button: () => button,
-    canvas: () => canvas,
-    caption: () => caption,
-    cite: () => cite,
-    cleanupUnused: () => cleanupUnused,
-    code: () => code,
-    col: () => col,
-    colgroup: () => colgroup,
-    computed: () => computed,
-    createElementFactory: () => createElementFactory,
-    createRouter: () => createRouter,
-    createRouterView: () => createRouterView,
-    createState: () => createState,
-    createVirtualList: () => createVirtualList,
-    data: () => data,
-    datalist: () => datalist,
-    dd: () => dd,
-    debounce: () => debounce,
-    del: () => del,
-    details: () => details,
-    dfn: () => dfn,
-    dialog: () => dialog,
-    div: () => div,
-    dl: () => dl,
-    domNode: () => domNode,
-    dt: () => dt,
-    effect: () => effect,
-    elements: () => elements,
-    em: () => em,
-    embed: () => embed,
-    fieldset: () => fieldset,
-    figcaption: () => figcaption,
-    figure: () => figure,
-    footer: () => footer,
-    form: () => form,
-    h1: () => h1,
-    h2: () => h2,
-    h3: () => h3,
-    h4: () => h4,
-    h5: () => h5,
-    h6: () => h6,
-    head: () => head,
-    header: () => header,
-    hr: () => hr,
-    html: () => html,
-    i: () => i,
-    iframe: () => iframe,
-    img: () => img,
-    input: () => input,
-    ins: () => ins,
-    jsonToVNode: () => jsonToVNode,
-    kbd: () => kbd,
-    label: () => label,
-    lazy: () => lazy,
-    legend: () => legend,
-    li: () => li,
-    link: () => link,
-    main: () => main,
-    map: () => map,
-    mark: () => mark,
-    mathMath: () => mathMath,
-    mathMfrac: () => mathMfrac,
-    mathMi: () => mathMi,
-    mathMn: () => mathMn,
-    mathMo: () => mathMo,
-    mathMroot: () => mathMroot,
-    mathMrow: () => mathMrow,
-    mathMs: () => mathMs,
-    mathMsqrt: () => mathMsqrt,
-    mathMsub: () => mathMsub,
-    mathMsup: () => mathMsup,
-    mathMtext: () => mathMtext,
-    menu: () => menu,
-    meta: () => meta,
-    meter: () => meter,
-    nav: () => nav,
-    noscript: () => noscript,
-    object: () => object,
-    ol: () => ol,
-    optgroup: () => optgroup,
-    option: () => option,
-    output: () => output,
-    p: () => p,
-    param: () => param,
-    picture: () => picture,
-    portal: () => portal,
-    pre: () => pre,
-    progress: () => progress,
-    q: () => q,
-    reactive: () => reactive,
-    reactiveAs: () => reactiveAs,
-    renderChunked: () => renderChunked,
-    renderJson: () => renderJson,
-    renderJsonToString: () => renderJsonToString,
-    renderToHead: () => renderToHead,
-    renderToString: () => renderToString,
-    renderVNode: () => renderVNode,
-    renderVNodeToString: () => renderVNodeToString,
-    routerLink: () => routerLink,
-    rp: () => rp,
-    rt: () => rt,
-    ruby: () => ruby,
-    s: () => s,
-    samp: () => samp,
-    script: () => script,
-    section: () => section,
-    select: () => select,
-    setTitle: () => setTitle,
-    slot: () => slot,
-    small: () => small,
-    source: () => source,
-    span: () => span,
-    strong: () => strong,
-    style: () => style,
-    sub: () => sub,
-    summary: () => summary,
-    sup: () => sup,
-    svgAnimate: () => svgAnimate,
-    svgAnimateMotion: () => svgAnimateMotion,
-    svgAnimateTransform: () => svgAnimateTransform,
-    svgCircle: () => svgCircle,
-    svgClipPath: () => svgClipPath,
-    svgDefs: () => svgDefs,
-    svgEllipse: () => svgEllipse,
-    svgFeBlend: () => svgFeBlend,
-    svgFeColorMatrix: () => svgFeColorMatrix,
-    svgFeComponentTransfer: () => svgFeComponentTransfer,
-    svgFeComposite: () => svgFeComposite,
-    svgFeConvolveMatrix: () => svgFeConvolveMatrix,
-    svgFeDiffuseLighting: () => svgFeDiffuseLighting,
-    svgFeDisplacementMap: () => svgFeDisplacementMap,
-    svgFeFlood: () => svgFeFlood,
-    svgFeGaussianBlur: () => svgFeGaussianBlur,
-    svgFeMorphology: () => svgFeMorphology,
-    svgFeOffset: () => svgFeOffset,
-    svgFeSpecularLighting: () => svgFeSpecularLighting,
-    svgFeTile: () => svgFeTile,
-    svgFeTurbulence: () => svgFeTurbulence,
-    svgFilter: () => svgFilter,
-    svgForeignObject: () => svgForeignObject,
-    svgG: () => svgG,
-    svgImage: () => svgImage,
-    svgLine: () => svgLine,
-    svgLinearGradient: () => svgLinearGradient,
-    svgMarker: () => svgMarker,
-    svgMask: () => svgMask,
-    svgPath: () => svgPath,
-    svgPattern: () => svgPattern,
-    svgPolygon: () => svgPolygon,
-    svgPolyline: () => svgPolyline,
-    svgRadialGradient: () => svgRadialGradient,
-    svgRect: () => svgRect,
-    svgSet: () => svgSet,
-    svgStop: () => svgStop,
-    svgSvg: () => svgSvg,
-    svgSymbol: () => svgSymbol,
-    svgText: () => svgText,
-    svgTspan: () => svgTspan,
-    svgUse: () => svgUse,
-    table: () => table,
-    tbody: () => tbody,
-    td: () => td,
-    template: () => template,
-    text: () => text,
-    textarea: () => textarea,
-    tfoot: () => tfoot,
-    th: () => th,
-    thead: () => thead,
-    throttle: () => throttle,
-    time: () => time,
-    title: () => title,
-    tr: () => tr,
-    track: () => track,
-    u: () => u,
-    ul: () => ul,
-    vNodeJsonToVNode: () => vNodeJsonToVNode,
-    varElement: () => varElement,
-    video: () => video,
-    wbr: () => wbr
-  });
-
-  // src/DomNode.ts
-  var DomNode = class {
-    constructor() {
-      this.elementCache = /* @__PURE__ */ new WeakMap();
-      this.reactiveNodes = /* @__PURE__ */ new Map();
-    }
-    createElement(tagName, props = {}, children = []) {
-      return { tagName, props, children };
-    }
-    renderToDOM(vNode, parent) {
-      if (vNode == null || vNode === false) {
-        return;
-      }
-      if (typeof vNode !== "object") {
-        parent.appendChild(document.createTextNode(String(vNode)));
-        return;
-      }
-      const tagName = vNode.tagName;
-      const isSVG = tagName === "svg" || tagName[0] === "s" && tagName[1] === "v" && tagName[2] === "g" || parent.namespaceURI === "http://www.w3.org/2000/svg";
-      const el = isSVG ? document.createElementNS("http://www.w3.org/2000/svg", tagName.replace("svg", "").toLowerCase() || tagName) : document.createElement(tagName);
-      const props = vNode.props;
-      for (const key in props) {
-        const value = props[key];
-        if (value == null || value === false) continue;
-        const c = key.charCodeAt(0);
-        if (c === 99) {
-          if (key.length < 6 || key[5] === "N") {
-            const classValue = Array.isArray(value) ? value.join(" ") : value;
-            if (isSVG) {
-              el.setAttribute("class", classValue);
-            } else {
-              el.className = classValue;
-            }
-            continue;
-          }
-        } else if (c === 115 && key.length === 5) {
-          if (typeof value === "string") {
-            el.style.cssText = value;
-          } else {
-            const s2 = el.style;
-            for (const k in value) s2[k] = value[k];
-          }
-          continue;
-        } else if (c === 111 && key.charCodeAt(1) === 110) {
-          el[key.toLowerCase()] = value;
-          continue;
-        } else if (c === 100 && key.length > 20) {
-          el.innerHTML = value.__html;
-          continue;
-        } else if (c === 114 && key.length === 3) {
-          setTimeout(() => {
-            if (typeof value === "function") {
-              value(el);
-            } else if (value && "current" in value) {
-              value.current = el;
-            }
-          }, 0);
-          continue;
-        }
-        isSVG ? el.setAttributeNS(null, key, value === true ? "" : String(value)) : el.setAttribute(key, value === true ? "" : String(value));
-      }
-      const children = vNode.children;
-      const len = children.length;
-      if (len === 0) {
-        parent.appendChild(el);
-        return;
-      }
-      if (len > 30) {
-        const fragment = document.createDocumentFragment();
-        for (let i2 = 0; i2 < len; i2++) {
-          const child = children[i2];
-          if (child == null || child === false) continue;
-          if (Array.isArray(child)) {
-            const childLen = child.length;
-            for (let j = 0; j < childLen; j++) {
-              const c = child[j];
-              if (c != null && c !== false) {
-                this.renderToDOM(c, fragment);
-              }
-            }
-          } else {
-            this.renderToDOM(child, fragment);
-          }
-        }
-        el.appendChild(fragment);
-      } else {
-        for (let i2 = 0; i2 < len; i2++) {
-          const child = children[i2];
-          if (child == null || child === false) continue;
-          if (Array.isArray(child)) {
-            const childLen = child.length;
-            for (let j = 0; j < childLen; j++) {
-              const c = child[j];
-              if (c != null && c !== false) {
-                this.renderToDOM(c, el);
-              }
-            }
-          } else {
-            this.renderToDOM(child, el);
-          }
-        }
-      }
-      parent.appendChild(el);
-    }
-    render(rootElement, vNode) {
-      const el = typeof rootElement === "string" ? document.getElementById(rootElement.replace("#", "")) : rootElement;
-      if (!el) {
-        throw new Error(`Element not found: ${rootElement}`);
-      }
-      if (vNode.children && vNode.children.length > 500) {
-        const fragment = document.createDocumentFragment();
-        this.renderToDOM(vNode, fragment);
-        el.appendChild(fragment);
-      } else {
-        this.renderToDOM(vNode, el);
-      }
-      return el;
-    }
-    batchRender(rootElement, vNodes) {
-      const el = typeof rootElement === "string" ? document.getElementById(rootElement.replace("#", "")) : rootElement;
-      if (!el) {
-        throw new Error(`Element not found: ${rootElement}`);
-      }
-      const len = vNodes.length;
-      if (len > 3e3) {
-        const fragment = document.createDocumentFragment();
-        let processed = 0;
-        const chunkSize = 1500;
-        const processChunk = () => {
-          const end = Math.min(processed + chunkSize, len);
-          for (let i2 = processed; i2 < end; i2++) {
-            this.renderToDOM(vNodes[i2], fragment);
-          }
-          processed = end;
-          if (processed >= len) {
-            el.appendChild(fragment);
-          } else {
-            requestAnimationFrame(processChunk);
-          }
-        };
-        processChunk();
-      } else {
-        const fragment = document.createDocumentFragment();
-        for (let i2 = 0; i2 < len; i2++) {
-          this.renderToDOM(vNodes[i2], fragment);
-        }
-        el.appendChild(fragment);
-      }
-      return el;
-    }
-    renderChunked(rootElement, vNodes, chunkSize = 5e3, onProgress) {
-      const el = typeof rootElement === "string" ? document.getElementById(rootElement.replace("#", "")) : rootElement;
-      if (!el) {
-        throw new Error(`Element not found: ${rootElement}`);
-      }
-      const len = vNodes.length;
-      let index = 0;
-      const renderChunk = () => {
-        const end = Math.min(index + chunkSize, len);
-        const fragment = document.createDocumentFragment();
-        for (let i2 = index; i2 < end; i2++) {
-          this.renderToDOM(vNodes[i2], fragment);
-        }
-        el.appendChild(fragment);
-        index = end;
-        if (onProgress) onProgress(index, len);
-        if (index < len) {
-          requestAnimationFrame(renderChunk);
-        }
-      };
-      requestAnimationFrame(renderChunk);
-      return el;
-    }
-    renderToHead(...vNodes) {
-      const head2 = document.head;
-      if (head2) {
-        for (const vNode of vNodes.flat()) {
-          vNode && this.renderToDOM(vNode, head2);
-        }
-      }
-      return head2;
-    }
-    addStyle(cssText) {
-      const el = document.createElement("style");
-      el.textContent = cssText;
-      return document.head.appendChild(el);
-    }
-    addMeta(attrs) {
-      const el = document.createElement("meta");
-      for (const k in attrs) el.setAttribute(k, attrs[k]);
-      return document.head.appendChild(el);
-    }
-    addLink(attrs) {
-      const el = document.createElement("link");
-      for (const k in attrs) el.setAttribute(k, attrs[k]);
-      return document.head.appendChild(el);
-    }
-    setTitle(text2) {
-      return document.title = text2;
-    }
-    // Reactive State Management
-    createState(initialValue, options = {}) {
-      let value = initialValue;
-      const listeners = /* @__PURE__ */ new Set();
-      let updateTimer = null;
-      const { throttle: throttle2 = 0, deep = false } = options;
-      const notify = () => {
-        listeners.forEach((fn) => fn(value));
-      };
-      const scheduleUpdate = () => {
-        if (throttle2 > 0) {
-          if (!updateTimer) {
-            updateTimer = setTimeout(() => {
-              updateTimer = null;
-              notify();
-            }, throttle2);
-          }
-        } else {
-          notify();
-        }
-      };
-      return {
-        get value() {
-          return value;
-        },
-        set value(newValue) {
-          const changed = deep ? JSON.stringify(value) !== JSON.stringify(newValue) : value !== newValue;
-          if (changed) {
-            value = newValue;
-            scheduleUpdate();
-          }
-        },
-        subscribe(fn) {
-          listeners.add(fn);
-          return () => {
-            listeners.delete(fn);
-          };
-        },
-        destroy() {
-          listeners.clear();
-          if (updateTimer) clearTimeout(updateTimer);
-        }
-      };
-    }
-    computed(states, computeFn) {
-      const values = states.map((s2) => s2.value);
-      const result = this.createState(computeFn(...values));
-      states.forEach((state, index) => {
-        state.subscribe((newValue) => {
-          values[index] = newValue;
-          result.value = computeFn(...values);
-        });
-      });
-      return result;
-    }
-    effect(stateFn) {
-      stateFn();
-    }
-    // Virtual scrolling helper for large lists
-    createVirtualList(container, items, renderItem, itemHeight = 50, bufferSize = 5) {
-      const viewportHeight = container.clientHeight;
-      const totalHeight = items.length * itemHeight;
-      let scrollTop = 0;
-      const getVisibleRange = () => {
-        const start = Math.max(0, Math.floor(scrollTop / itemHeight) - bufferSize);
-        const end = Math.min(items.length, Math.ceil((scrollTop + viewportHeight) / itemHeight) + bufferSize);
-        return { start, end };
-      };
-      const render = () => {
-        const { start, end } = getVisibleRange();
-        const wrapper = document.createElement("div");
-        wrapper.style.cssText = `height:${totalHeight}px;position:relative`;
-        for (let i2 = start; i2 < end; i2++) {
-          const itemEl = document.createElement("div");
-          itemEl.style.cssText = `position:absolute;top:${i2 * itemHeight}px;height:${itemHeight}px;width:100%`;
-          this.renderToDOM(renderItem(items[i2], i2), itemEl);
-          wrapper.appendChild(itemEl);
-        }
-        container.innerHTML = "";
-        container.appendChild(wrapper);
-      };
-      const scrollHandler = () => {
-        scrollTop = container.scrollTop;
-        requestAnimationFrame(render);
-      };
-      container.addEventListener("scroll", scrollHandler);
-      render();
-      return {
-        render,
-        destroy: () => {
-          container.removeEventListener("scroll", scrollHandler);
-          container.innerHTML = "";
-        }
-      };
-    }
-    // Lazy load components
-    lazy(loadFn) {
-      let component = null;
-      let loading = false;
-      return async (...args) => {
-        if (!component && !loading) {
-          loading = true;
-          component = await loadFn();
-          loading = false;
-        }
-        return component ? component(...args) : { tagName: "div", props: { class: "loading" }, children: ["Loading..."] };
-      };
-    }
-    // Memory management - cleanup unused elements
-    cleanupUnusedElements(root) {
-      const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
-      const toRemove = [];
-      while (walker.nextNode()) {
-        const node = walker.currentNode;
-        if (node.id && node.id.startsWith("r") && !this.elementCache.has(node)) {
-          toRemove.push(node);
-        }
-      }
-      toRemove.forEach((el) => el.remove());
-      return toRemove.length;
-    }
-    // Server-Side Rendering - convert VNode to HTML string
-    renderToString(vNode, options = {}) {
-      const { pretty = false, indent = 0 } = options;
-      const indentStr = pretty ? "  ".repeat(indent) : "";
-      const newLine = pretty ? "\n" : "";
-      let resolvedVNode = this.resolveStateValue(vNode);
-      resolvedVNode = this.unwrapReactive(resolvedVNode);
-      if (Array.isArray(resolvedVNode)) {
-        return resolvedVNode.map((child) => this.renderToString(child, options)).join("");
-      }
-      if (typeof resolvedVNode !== "object" || resolvedVNode === null) {
-        if (resolvedVNode === null || resolvedVNode === void 0 || resolvedVNode === false) {
-          return "";
-        }
-        return this.escapeHtml(String(resolvedVNode));
-      }
-      const { tagName, props, children } = resolvedVNode;
-      const isSelfClosing = this.isSelfClosingTag(tagName);
-      let html2 = `${indentStr}<${tagName}`;
-      const attrs = this.propsToAttributes(props);
-      if (attrs) {
-        html2 += ` ${attrs}`;
-      }
-      if (isSelfClosing) {
-        html2 += ` />${newLine}`;
-        return html2;
-      }
-      html2 += ">";
-      if (props.dangerouslySetInnerHTML) {
-        html2 += props.dangerouslySetInnerHTML.__html;
-        html2 += `</${tagName}>${newLine}`;
-        return html2;
-      }
-      if (children && children.length > 0) {
-        const resolvedChildren = children.map((c) => {
-          const resolved = this.resolveStateValue(c);
-          return this.unwrapReactive(resolved);
-        });
-        const hasComplexChildren = resolvedChildren.some(
-          (c) => typeof c === "object" && c !== null && !Array.isArray(c) && "tagName" in c
-        );
-        if (pretty && hasComplexChildren) {
-          html2 += newLine;
-          for (const child of resolvedChildren) {
-            if (child == null || child === false) continue;
-            if (Array.isArray(child)) {
-              for (const c of child) {
-                if (c != null && c !== false) {
-                  html2 += this.renderToString(c, { pretty, indent: indent + 1 });
-                }
-              }
-            } else {
-              html2 += this.renderToString(child, { pretty, indent: indent + 1 });
-            }
-          }
-          html2 += indentStr;
-        } else {
-          for (const child of resolvedChildren) {
-            if (child == null || child === false) continue;
-            if (Array.isArray(child)) {
-              for (const c of child) {
-                if (c != null && c !== false) {
-                  html2 += this.renderToString(c, { pretty: false, indent: 0 });
-                }
-              }
-            } else {
-              html2 += this.renderToString(child, { pretty: false, indent: 0 });
-            }
-          }
-        }
-      }
-      html2 += `</${tagName}>${newLine}`;
-      return html2;
-    }
-    resolveStateValue(value) {
-      if (value && typeof value === "object" && "value" in value && "subscribe" in value) {
-        return value.value;
-      }
-      return value;
-    }
-    isReactiveWrapper(vNode) {
-      if (!vNode || typeof vNode !== "object" || !vNode.tagName) {
-        return false;
-      }
-      return vNode.tagName === "span" && vNode.props?.id && typeof vNode.props.id === "string" && vNode.props.id.match(/^r[a-z0-9]{9}$/);
-    }
-    unwrapReactive(vNode) {
-      if (!this.isReactiveWrapper(vNode)) {
-        return vNode;
-      }
-      const children = vNode.children;
-      if (!children || children.length === 0) {
-        return "";
-      }
-      if (children.length === 1) {
-        const child = children[0];
-        if (child && typeof child === "object" && child.tagName === "span") {
-          const props = child.props;
-          const hasNoProps = !props || Object.keys(props).length === 0;
-          const hasSingleStringChild = child.children && child.children.length === 1 && typeof child.children[0] === "string";
-          if (hasNoProps && hasSingleStringChild) {
-            return child.children[0];
-          }
-        }
-        return this.unwrapReactive(child);
-      }
-      return children.map((c) => this.unwrapReactive(c));
-    }
-    escapeHtml(text2) {
-      const htmlEscapes = {
-        "&": "&amp;",
-        "<": "&lt;",
-        ">": "&gt;",
-        '"': "&quot;",
-        "'": "&#x27;"
-      };
-      return text2.replace(/[&<>"']/g, (char) => htmlEscapes[char]);
-    }
-    isSelfClosingTag(tagName) {
-      const selfClosingTags = /* @__PURE__ */ new Set([
-        "area",
-        "base",
-        "br",
-        "col",
-        "embed",
-        "hr",
-        "img",
-        "input",
-        "link",
-        "meta",
-        "param",
-        "source",
-        "track",
-        "wbr"
-      ]);
-      return selfClosingTags.has(tagName.toLowerCase());
-    }
-    propsToAttributes(props) {
-      const attrs = [];
-      for (const key in props) {
-        if (key === "children" || key === "dangerouslySetInnerHTML" || key === "ref") {
-          continue;
-        }
-        let value = props[key];
-        value = this.resolveStateValue(value);
-        if (value == null || value === false) continue;
-        if (key.startsWith("on") && typeof value === "function") {
-          continue;
-        }
-        if (key === "className" || key === "class") {
-          const className = Array.isArray(value) ? value.join(" ") : value;
-          if (className) {
-            attrs.push(`class="${this.escapeHtml(String(className))}"`);
-          }
-          continue;
-        }
-        if (key === "style") {
-          const styleStr = this.styleToString(value);
-          if (styleStr) {
-            attrs.push(`style="${this.escapeHtml(styleStr)}"`);
-          }
-          continue;
-        }
-        if (value === true) {
-          attrs.push(key);
-          continue;
-        }
-        attrs.push(`${key}="${this.escapeHtml(String(value))}"`);
-      }
-      return attrs.join(" ");
-    }
-    styleToString(style2) {
-      if (typeof style2 === "string") {
-        return style2;
-      }
-      if (typeof style2 === "object" && style2 !== null) {
-        const styles = [];
-        for (const key in style2) {
-          const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
-          styles.push(`${cssKey}:${style2[key]}`);
-        }
-        return styles.join(";");
-      }
-      return "";
-    }
-    isState(value) {
-      return value && typeof value === "object" && "value" in value && "subscribe" in value && typeof value.subscribe === "function";
-    }
-    createReactiveChild(state, renderFn) {
-      const currentValue = renderFn(state.value);
-      if (typeof window !== "undefined" && typeof document !== "undefined") {
-        const entry = { node: null, renderFn };
-        this.reactiveNodes.set(state, entry);
-        state.subscribe(() => {
-          if (entry.node && entry.node.parentNode) {
-            const newValue = renderFn(state.value);
-            entry.node.textContent = String(newValue ?? "");
-          }
-        });
-      }
-      return currentValue;
-    }
-    jsonToVNode(json) {
-      if (this.isState(json)) {
-        return this.createReactiveChild(json, (v) => v);
-      }
-      if (json == null || typeof json === "boolean") {
-        return json;
-      }
-      if (typeof json === "string" || typeof json === "number") {
-        return json;
-      }
-      const { tag, attributes = {}, children } = json;
-      const props = {};
-      for (const key in attributes) {
-        const value = attributes[key];
-        if (key === "class") {
-          props.className = this.isState(value) ? value.value : value;
-        } else {
-          props[key] = this.isState(value) ? value.value : value;
-        }
-      }
-      const childrenArray = [];
-      if (children != null) {
-        if (Array.isArray(children)) {
-          for (const child of children) {
-            if (this.isState(child)) {
-              childrenArray.push(this.createReactiveChild(child, (v) => v));
-            } else {
-              const converted = this.jsonToVNode(child);
-              if (converted != null && converted !== false) {
-                childrenArray.push(converted);
-              }
-            }
-          }
-        } else if (this.isState(children)) {
-          childrenArray.push(this.createReactiveChild(children, (v) => v));
-        } else if (typeof children === "object" && "tag" in children) {
-          const converted = this.jsonToVNode(children);
-          if (converted != null && converted !== false) {
-            childrenArray.push(converted);
-          }
-        } else {
-          childrenArray.push(children);
-        }
-      }
-      return { tagName: tag, props, children: childrenArray };
-    }
-    vNodeJsonToVNode(json) {
-      if (this.isState(json)) {
-        return this.createReactiveChild(json, (v) => v);
-      }
-      if (json == null || typeof json === "boolean") {
-        return json;
-      }
-      if (typeof json === "string" || typeof json === "number") {
-        return json;
-      }
-      const { tagName, props = {}, children = [] } = json;
-      const resolvedProps = {};
-      for (const key in props) {
-        const value = props[key];
-        resolvedProps[key] = this.isState(value) ? value.value : value;
-      }
-      const childrenArray = [];
-      for (const child of children) {
-        if (this.isState(child)) {
-          childrenArray.push(this.createReactiveChild(child, (v) => v));
-        } else {
-          const converted = this.vNodeJsonToVNode(child);
-          if (converted != null && converted !== false) {
-            childrenArray.push(converted);
-          }
-        }
-      }
-      return { tagName, props: resolvedProps, children: childrenArray };
-    }
-    renderJson(rootElement, json) {
-      const vNode = this.jsonToVNode(json);
-      if (!vNode || typeof vNode !== "object" || !("tagName" in vNode)) {
-        throw new Error("Invalid JSON structure");
-      }
-      return this.render(rootElement, vNode);
-    }
-    renderVNode(rootElement, json) {
-      const vNode = this.vNodeJsonToVNode(json);
-      if (!vNode || typeof vNode !== "object" || !("tagName" in vNode)) {
-        throw new Error("Invalid VNode JSON structure");
-      }
-      return this.render(rootElement, vNode);
-    }
-    renderJsonToString(json, options = {}) {
-      const vNode = this.jsonToVNode(json);
-      return this.renderToString(vNode, options);
-    }
-    renderVNodeToString(json, options = {}) {
-      const vNode = this.vNodeJsonToVNode(json);
-      return this.renderToString(vNode, options);
-    }
-    // Expose elementCache for reactive updates
-    getElementCache() {
-      return this.elementCache;
-    }
-  };
-  var domNode = new DomNode();
-
-  // src/state.ts
-  var createState = (initial, options) => domNode.createState(initial, options);
-  var computed = (states, fn) => domNode.computed(states, fn);
-  var effect = (fn) => domNode.effect(fn);
-  var batchRender = (container, vNodes) => domNode.batchRender(container, vNodes);
-  var renderChunked = (container, vNodes, chunkSize, onProgress) => domNode.renderChunked(container, vNodes, chunkSize, onProgress);
-  var createVirtualList = (container, items, renderItem, itemHeight, bufferSize) => domNode.createVirtualList(container, items, renderItem, itemHeight, bufferSize);
-  var lazy = (loadFn) => domNode.lazy(loadFn);
-  var cleanupUnused = (root) => domNode.cleanupUnusedElements(root);
-  var throttle = (fn, delay) => {
-    let timer = null;
-    return (...args) => {
-      if (!timer) {
-        timer = setTimeout(() => {
-          timer = null;
-          fn(...args);
-        }, delay);
-      }
-    };
-  };
-  var debounce = (fn, delay) => {
-    let timer = null;
-    return (...args) => {
-      if (timer) clearTimeout(timer);
-      timer = setTimeout(() => fn(...args), delay);
-    };
-  };
-
-  // src/reactive.ts
-  var reactive = (state, renderFn) => {
-    let rafId = null;
-    let elementRef = null;
-    let placeholder = null;
-    let isInDOM = true;
-    const initialResult = renderFn(state.value);
-    const isVNodeResult = initialResult && typeof initialResult === "object" && "tagName" in initialResult;
-    const initialIsNull = initialResult == null || initialResult === false;
-    state.subscribe(() => {
-      if (rafId) cancelAnimationFrame(rafId);
-      rafId = requestAnimationFrame(() => {
-        if (!elementRef && !placeholder) return;
-        const newResult = renderFn(state.value);
-        const resultIsNull = newResult == null || newResult === false;
-        if (resultIsNull) {
-          if (isInDOM && elementRef) {
-            placeholder = document.createComment("reactive");
-            elementRef.parentNode?.replaceChild(placeholder, elementRef);
-            isInDOM = false;
-          }
-        } else {
-          if (!isInDOM && placeholder && elementRef) {
-            placeholder.parentNode?.replaceChild(elementRef, placeholder);
-            placeholder = null;
-            isInDOM = true;
-          }
-          if (elementRef) {
-            const fragment = document.createDocumentFragment();
-            if (isVNodeResult && newResult && typeof newResult === "object" && "tagName" in newResult) {
-              const vnode = newResult;
-              const props = vnode.props;
-              for (const key in props) {
-                const value = props[key];
-                if (key === "ref") continue;
-                if (key === "class" || key === "className") {
-                  elementRef.className = Array.isArray(value) ? value.join(" ") : value || "";
-                } else if (key === "style" && typeof value === "object") {
-                  const s2 = elementRef.style;
-                  for (const k in value) s2[k] = value[k];
-                } else if (key.startsWith("on")) {
-                  elementRef[key.toLowerCase()] = value;
-                } else if (value != null && value !== false) {
-                  elementRef.setAttribute(key, String(value === true ? "" : value));
-                } else {
-                  elementRef.removeAttribute(key);
-                }
-              }
-              for (const child of vnode.children) {
-                domNode.renderToDOM(child, fragment);
-              }
-            } else {
-              domNode.renderToDOM(newResult, fragment);
-            }
-            elementRef.textContent = "";
-            elementRef.appendChild(fragment);
-            domNode.getElementCache().set(elementRef, true);
-          }
-        }
-        rafId = null;
-      });
-    });
-    const refCallback = (el) => {
-      elementRef = el;
-      if (initialIsNull && el.parentNode) {
-        placeholder = document.createComment("reactive");
-        el.parentNode.replaceChild(placeholder, el);
-        isInDOM = false;
-      }
-    };
-    if (isVNodeResult) {
-      const vnode = initialResult;
-      return {
-        tagName: vnode.tagName,
-        props: { ...vnode.props, ref: refCallback },
-        children: vnode.children
-      };
-    }
-    return { tagName: "span", props: { ref: refCallback }, children: [initialResult] };
-  };
-  var reactiveAs = (tagName, state, renderFn, props = {}) => {
-    let rafId = null;
-    let elementRef = null;
-    state.subscribe(() => {
-      if (rafId) cancelAnimationFrame(rafId);
-      rafId = requestAnimationFrame(() => {
-        if (elementRef) {
-          const fragment = document.createDocumentFragment();
-          const newResult = renderFn(state.value);
-          if (newResult == null || newResult === false) {
-            elementRef.style.display = "none";
-            elementRef.textContent = "";
-          } else {
-            elementRef.style.display = "";
-            domNode.renderToDOM(newResult, fragment);
-            elementRef.textContent = "";
-            elementRef.appendChild(fragment);
-          }
-          domNode.getElementCache().set(elementRef, true);
-        }
-        rafId = null;
-      });
-    });
-    const refCallback = (el) => {
-      elementRef = el;
-    };
-    return { tagName, props: { ...props, ref: refCallback }, children: [renderFn(state.value)] };
-  };
-  var text = (state) => state && state.value !== void 0 ? reactive(state, (v) => ({ tagName: "span", props: {}, children: [String(v)] })) : String(state);
-  var bindValue = (state) => ({
-    value: state.value,
-    oninput: (e) => {
-      state.value = e.target.value;
-    }
-  });
-  var bindChecked = (state) => ({
-    checked: state.value,
-    onchange: (e) => {
-      state.value = e.target.checked;
-    }
-  });
-
-  // src/CreateStyle.ts
-  var CreateStyle = class {
-    constructor() {
-      this.variables = [];
-      this.rules = [];
-      this.mediaRules = [];
-      this.keyframes = [];
-      this.fontFaces = [];
-      this.imports = [];
-      this.containerRules = [];
-      this.supportsRules = [];
-      this.layerRules = [];
-      this._layerOrder = [];
-    }
-    // CSS Variables
-    addVar(name, value) {
-      const cssVar = {
-        name: name.startsWith("--") ? name : `--${name}`,
-        value,
-        toString() {
-          return `var(${this.name})`;
-        }
-      };
-      this.variables.push(cssVar);
-      return cssVar;
-    }
-    var(variable, fallback) {
-      const varName = typeof variable === "string" ? variable.startsWith("--") ? variable : `--${variable}` : variable.name;
-      return fallback ? `var(${varName}, ${fallback})` : `var(${varName})`;
-    }
-    // Basic Selectors
-    addTag(tag, styles) {
-      const rule = { selector: tag, styles, type: "tag" };
-      this.rules.push(rule);
-      return rule;
-    }
-    addClass(name, styles) {
-      const selector = name.startsWith(".") ? name : `.${name}`;
-      const rule = { selector, styles, type: "class" };
-      this.rules.push(rule);
-      return rule;
-    }
-    addId(name, styles) {
-      const selector = name.startsWith("#") ? name : `#${name}`;
-      const rule = { selector, styles, type: "id" };
-      this.rules.push(rule);
-      return rule;
-    }
-    // Pseudo Selectors
-    addPseudoClass(pseudo, styles, baseSelector) {
-      const pseudoClass = pseudo.startsWith(":") ? pseudo : `:${pseudo}`;
-      const selector = baseSelector ? `${baseSelector}${pseudoClass}` : pseudoClass;
-      const rule = { selector, styles, type: "pseudo-class" };
-      this.rules.push(rule);
-      return rule;
-    }
-    addPseudoElement(pseudo, styles, baseSelector) {
-      const pseudoElement = pseudo.startsWith("::") ? pseudo : `::${pseudo}`;
-      const selector = baseSelector ? `${baseSelector}${pseudoElement}` : pseudoElement;
-      const rule = { selector, styles, type: "pseudo-element" };
-      this.rules.push(rule);
-      return rule;
-    }
-    // Attribute Selectors
-    addAttribute(attr, styles, baseSelector) {
-      const attrSelector = attr.startsWith("[") ? attr : `[${attr}]`;
-      const selector = baseSelector ? `${baseSelector}${attrSelector}` : attrSelector;
-      const rule = { selector, styles, type: "attribute" };
-      this.rules.push(rule);
-      return rule;
-    }
-    attrEquals(attr, value, styles, baseSelector) {
-      return this.addAttribute(`${attr}="${value}"`, styles, baseSelector);
-    }
-    attrContainsWord(attr, value, styles, baseSelector) {
-      return this.addAttribute(`${attr}~="${value}"`, styles, baseSelector);
-    }
-    attrStartsWith(attr, value, styles, baseSelector) {
-      return this.addAttribute(`${attr}^="${value}"`, styles, baseSelector);
-    }
-    attrEndsWith(attr, value, styles, baseSelector) {
-      return this.addAttribute(`${attr}$="${value}"`, styles, baseSelector);
-    }
-    attrContains(attr, value, styles, baseSelector) {
-      return this.addAttribute(`${attr}*="${value}"`, styles, baseSelector);
-    }
-    // Combinator Selectors
-    descendant(ancestor, descendant, styles) {
-      const selector = `${ancestor} ${descendant}`;
-      const rule = { selector, styles, type: "custom" };
-      this.rules.push(rule);
-      return rule;
-    }
-    child(parent, childSel, styles) {
-      const selector = `${parent} > ${childSel}`;
-      const rule = { selector, styles, type: "custom" };
-      this.rules.push(rule);
-      return rule;
-    }
-    adjacentSibling(element, sibling, styles) {
-      const selector = `${element} + ${sibling}`;
-      const rule = { selector, styles, type: "custom" };
-      this.rules.push(rule);
-      return rule;
-    }
-    generalSibling(element, sibling, styles) {
-      const selector = `${element} ~ ${sibling}`;
-      const rule = { selector, styles, type: "custom" };
-      this.rules.push(rule);
-      return rule;
-    }
-    multiple(selectors, styles) {
-      const selector = selectors.join(", ");
-      const rule = { selector, styles, type: "custom" };
-      this.rules.push(rule);
-      return rule;
-    }
-    // Nesting (BEM-style)
-    addName(name, styles) {
-      const selector = name.startsWith("--") ? `&${name}` : `&--${name}`;
-      const rule = { selector, styles, type: "name" };
-      return rule;
-    }
-    nesting(parentRule, ...childRules) {
-      parentRule.nested = childRules;
-      return parentRule;
-    }
-    // @keyframes - Animations
-    keyframe(name, steps) {
-      const keyframeSteps = Object.entries(steps).map(([step, styles]) => ({
-        step: step === "from" ? "from" : step === "to" ? "to" : `${step}%`,
-        styles
-      }));
-      const kf = { name, steps: keyframeSteps };
-      this.keyframes.push(kf);
-      return kf;
-    }
-    keyframeFromTo(name, from, to) {
-      return this.keyframe(name, { from, to });
-    }
-    // @font-face - Custom Fonts
-    fontFace(options) {
-      this.fontFaces.push(options);
-      return options;
-    }
-    // @import - Import Stylesheets
-    import(url, mediaQuery) {
-      const importRule = mediaQuery ? `@import url("${url}") ${mediaQuery};` : `@import url("${url}");`;
-      this.imports.push(importRule);
-      return importRule;
-    }
-    // @media - Media Queries
-    media(type, condition, rules) {
-      const cssRules = Object.entries(rules).map(([selector, styles]) => ({
-        selector,
-        styles,
-        type: "custom"
-      }));
-      const mediaRule = { type, condition, rules: cssRules };
-      this.mediaRules.push(mediaRule);
-      return mediaRule;
-    }
-    mediaScreen(condition, rules) {
-      return this.media("screen", condition, rules);
-    }
-    mediaPrint(rules) {
-      return this.media("print", "", rules);
-    }
-    mediaMinWidth(minWidth, rules) {
-      return this.media("screen", `min-width: ${minWidth}`, rules);
-    }
-    mediaMaxWidth(maxWidth, rules) {
-      return this.media("screen", `max-width: ${maxWidth}`, rules);
-    }
-    mediaDark(rules) {
-      const cssRules = Object.entries(rules).map(([selector, styles]) => ({
-        selector,
-        styles,
-        type: "custom"
-      }));
-      const mediaRule = { type: "", condition: "prefers-color-scheme: dark", rules: cssRules };
-      this.mediaRules.push(mediaRule);
-      return mediaRule;
-    }
-    mediaLight(rules) {
-      const cssRules = Object.entries(rules).map(([selector, styles]) => ({
-        selector,
-        styles,
-        type: "custom"
-      }));
-      const mediaRule = { type: "", condition: "prefers-color-scheme: light", rules: cssRules };
-      this.mediaRules.push(mediaRule);
-      return mediaRule;
-    }
-    mediaReducedMotion(rules) {
-      const cssRules = Object.entries(rules).map(([selector, styles]) => ({
-        selector,
-        styles,
-        type: "custom"
-      }));
-      const mediaRule = { type: "", condition: "prefers-reduced-motion: reduce", rules: cssRules };
-      this.mediaRules.push(mediaRule);
-      return mediaRule;
-    }
-    // @container - Container Queries
-    container(condition, rules, name) {
-      const cssRules = Object.entries(rules).map(([selector, styles]) => ({
-        selector,
-        styles,
-        type: "custom"
-      }));
-      const containerRule = { name, condition, rules: cssRules };
-      this.containerRules.push(containerRule);
-      return containerRule;
-    }
-    addContainer(name, styles) {
-      const containerStyles = { ...styles, containerName: name };
-      return this.addClass(name, containerStyles);
-    }
-    // @supports - Feature Queries
-    supports(condition, rules) {
-      const cssRules = Object.entries(rules).map(([selector, styles]) => ({
-        selector,
-        styles,
-        type: "custom"
-      }));
-      const supportsRule = { condition, rules: cssRules };
-      this.supportsRules.push(supportsRule);
-      return supportsRule;
-    }
-    // @layer - Cascade Layers
-    layerOrder(...layers) {
-      this._layerOrder = layers;
-    }
-    layer(name, rules) {
-      const cssRules = Object.entries(rules).map(([selector, styles]) => ({
-        selector,
-        styles,
-        type: "custom"
-      }));
-      const layerRule = { name, rules: cssRules };
-      this.layerRules.push(layerRule);
-      return layerRule;
-    }
-    // Custom Rules
-    add(rules) {
-      const cssRules = Object.entries(rules).map(([selector, styles]) => {
-        const rule = { selector, styles, type: "custom" };
-        this.rules.push(rule);
-        return rule;
-      });
-      return cssRules;
-    }
-    important(value) {
-      return `${value} !important`;
-    }
-    // Utility Methods
-    toKebabCase(str) {
-      return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-    }
-    stylesToString(styles, indent = "    ") {
-      return Object.entries(styles).map(([prop, value]) => {
-        const cssValue = typeof value === "object" && value !== null && "name" in value ? `var(${value.name})` : value;
-        return `${indent}${this.toKebabCase(prop)}: ${cssValue};`;
-      }).join("\n");
-    }
-    renderRule(rule, indent = "") {
-      let css = `${indent}${rule.selector} {
-${this.stylesToString(rule.styles, indent + "    ")}
-`;
-      if (rule.nested && rule.nested.length > 0) {
-        for (const nestedRule of rule.nested) {
-          const nestedSelector = nestedRule.selector.startsWith("&") ? nestedRule.selector.replace(/&/g, rule.selector) : `${rule.selector} ${nestedRule.selector}`;
-          css += `
-${indent}${nestedSelector} {
-${this.stylesToString(nestedRule.styles, indent + "    ")}
-${indent}}
-`;
-        }
-      }
-      css += `${indent}}`;
-      return css;
-    }
-    renderMediaRule(media) {
-      const condition = media.type && media.condition ? `${media.type} and (${media.condition})` : media.type ? media.type : `(${media.condition})`;
-      let css = `@media ${condition} {
-`;
-      for (const rule of media.rules) {
-        css += this.renderRule(rule, "    ") + "\n";
-      }
-      css += "}";
-      return css;
-    }
-    renderKeyframes(kf) {
-      let css = `@keyframes ${kf.name} {
-`;
-      for (const step of kf.steps) {
-        css += `    ${step.step} {
-${this.stylesToString(step.styles, "        ")}
-    }
-`;
-      }
-      css += "}";
-      return css;
-    }
-    renderFontFace(ff) {
-      let css = "@font-face {\n";
-      css += `    font-family: "${ff.fontFamily}";
-`;
-      css += `    src: ${ff.src};
-`;
-      if (ff.fontWeight) css += `    font-weight: ${ff.fontWeight};
-`;
-      if (ff.fontStyle) css += `    font-style: ${ff.fontStyle};
-`;
-      if (ff.fontDisplay) css += `    font-display: ${ff.fontDisplay};
-`;
-      if (ff.unicodeRange) css += `    unicode-range: ${ff.unicodeRange};
-`;
-      css += "}";
-      return css;
-    }
-    renderContainerRule(container) {
-      const nameStr = container.name ? `${container.name} ` : "";
-      let css = `@container ${nameStr}(${container.condition}) {
-`;
-      for (const rule of container.rules) {
-        css += this.renderRule(rule, "    ") + "\n";
-      }
-      css += "}";
-      return css;
-    }
-    renderSupportsRule(supports) {
-      let css = `@supports (${supports.condition}) {
-`;
-      for (const rule of supports.rules) {
-        css += this.renderRule(rule, "    ") + "\n";
-      }
-      css += "}";
-      return css;
-    }
-    renderLayerRule(layer) {
-      let css = `@layer ${layer.name} {
-`;
-      for (const rule of layer.rules) {
-        css += this.renderRule(rule, "    ") + "\n";
-      }
-      css += "}";
-      return css;
-    }
-    // Render Output
-    render(...additionalRules) {
-      const parts = [];
-      if (this.imports.length > 0) {
-        parts.push(this.imports.join("\n"));
-      }
-      if (this._layerOrder.length > 0) {
-        parts.push(`@layer ${this._layerOrder.join(", ")};`);
-      }
-      if (this.variables.length > 0) {
-        const varDeclarations = this.variables.map((v) => `    ${v.name}: ${v.value};`).join("\n");
-        parts.push(`:root {
-${varDeclarations}
-}`);
-      }
-      for (const ff of this.fontFaces) {
-        parts.push(this.renderFontFace(ff));
-      }
-      for (const kf of this.keyframes) {
-        parts.push(this.renderKeyframes(kf));
-      }
-      const allRules = [...this.rules];
-      const allMediaRules = [...this.mediaRules];
-      const allKeyframes = [];
-      const allContainerRules = [...this.containerRules];
-      const allSupportsRules = [...this.supportsRules];
-      const allLayerRules = [...this.layerRules];
-      for (const item of additionalRules) {
-        if (!item) continue;
-        if (Array.isArray(item)) {
-          allRules.push(...item);
-        } else if ("condition" in item && "rules" in item && !("name" in item && "steps" in item)) {
-          if ("type" in item) {
-            allMediaRules.push(item);
-          } else if ("name" in item && typeof item.name === "string") {
-            allContainerRules.push(item);
-          } else {
-            allSupportsRules.push(item);
-          }
-        } else if ("name" in item && "steps" in item) {
-          allKeyframes.push(item);
-        } else if ("name" in item && "rules" in item) {
-          allLayerRules.push(item);
-        } else {
-          allRules.push(item);
-        }
-      }
-      for (const kf of allKeyframes) {
-        parts.push(this.renderKeyframes(kf));
-      }
-      for (const layer of allLayerRules) {
-        parts.push(this.renderLayerRule(layer));
-      }
-      for (const rule of allRules) {
-        parts.push(this.renderRule(rule));
-      }
-      for (const supports of allSupportsRules) {
-        parts.push(this.renderSupportsRule(supports));
-      }
-      for (const container of allContainerRules) {
-        parts.push(this.renderContainerRule(container));
-      }
-      for (const media of allMediaRules) {
-        parts.push(this.renderMediaRule(media));
-      }
-      return parts.join("\n\n");
-    }
-    inject(styleId) {
-      const css = this.render();
-      const style2 = document.createElement("style");
-      if (styleId) style2.id = styleId;
-      style2.textContent = css;
-      document.head.appendChild(style2);
-      return style2;
-    }
-    clear() {
-      this.variables = [];
-      this.rules = [];
-      this.mediaRules = [];
-      this.keyframes = [];
-      this.fontFaces = [];
-      this.imports = [];
-      this.containerRules = [];
-      this.supportsRules = [];
-      this.layerRules = [];
-      this._layerOrder = [];
-    }
-  };
-
-  // src/router.ts
-  function matchRoute(pattern, path) {
-    const patternParts = pattern.split("/").filter(Boolean);
-    const pathParts = path.split("/").filter(Boolean);
-    if (pattern.endsWith("*")) {
-      const basePattern = pattern.slice(0, -1);
-      if (path.startsWith(basePattern) || basePattern === "/" || pattern === "*") {
-        return { "*": path.slice(basePattern.length) };
-      }
-    }
-    if (patternParts.length !== pathParts.length) return null;
-    const params = {};
-    for (let i2 = 0; i2 < patternParts.length; i2++) {
-      const patternPart = patternParts[i2];
-      const pathPart = pathParts[i2];
-      if (patternPart.startsWith(":")) {
-        params[patternPart.slice(1)] = decodeURIComponent(pathPart);
-      } else if (patternPart !== pathPart) {
-        return null;
-      }
-    }
-    return params;
-  }
-  function createRouter(options) {
-    const { mode = "history", base: base2 = "", routes } = options;
-    const globalGuards = [];
-    const parseQuery = (search) => {
-      const query = {};
-      const params = new URLSearchParams(search);
-      params.forEach((value, key) => {
-        query[key] = value;
-      });
-      return query;
-    };
-    const getCurrentPath = () => {
-      if (mode === "hash") {
-        return window.location.hash.slice(1) || "/";
-      }
-      return window.location.pathname.replace(base2, "") || "/";
-    };
-    const parseLocation = (path) => {
-      const [pathPart, queryPart = ""] = path.split("?");
-      const [cleanPath, hash = ""] = pathPart.split("#");
-      return {
-        path: cleanPath || "/",
-        params: {},
-        query: parseQuery(queryPart),
-        hash: hash ? "#" + hash : ""
-      };
-    };
-    const findRoute = (path) => {
-      for (const route of routes) {
-        const params = matchRoute(route.path, path);
-        if (params !== null) {
-          return { route, params };
-        }
-      }
-      return null;
-    };
-    const currentRoute = domNode.createState(parseLocation(getCurrentPath()));
-    const navigate = (path, replace = false) => {
-      const location = parseLocation(path);
-      const match = findRoute(location.path);
-      if (match) {
-        location.params = match.params;
-      }
-      for (const guard of globalGuards) {
-        const result = guard(location, currentRoute.value);
-        if (result === false) return;
-        if (typeof result === "string") {
-          navigate(result, replace);
-          return;
-        }
-      }
-      if (match?.route.beforeEnter) {
-        const result = match.route.beforeEnter(location, currentRoute.value);
-        if (result === false) return;
-        if (typeof result === "string") {
-          navigate(result, replace);
-          return;
-        }
-      }
-      const url = mode === "hash" ? "#" + path : base2 + path;
-      if (replace) {
-        window.history.replaceState({ path }, "", url);
-      } else {
-        window.history.pushState({ path }, "", url);
-      }
-      currentRoute.value = location;
-    };
-    const handlePopState = () => {
-      const path = getCurrentPath();
-      const location = parseLocation(path);
-      const match = findRoute(location.path);
-      if (match) {
-        location.params = match.params;
-      }
-      currentRoute.value = location;
-    };
-    if (typeof window !== "undefined") {
-      window.addEventListener("popstate", handlePopState);
-    }
-    return {
-      currentRoute,
-      push: (path) => navigate(path, false),
-      replace: (path) => navigate(path, true),
-      back: () => window.history.back(),
-      forward: () => window.history.forward(),
-      go: (delta) => window.history.go(delta),
-      beforeEach: (guard) => {
-        globalGuards.push(guard);
-      },
-      destroy: () => {
-        if (typeof window !== "undefined") {
-          window.removeEventListener("popstate", handlePopState);
-        }
-        currentRoute.destroy();
-      }
-    };
-  }
-  function createRouterView(router, options) {
-    const { routes, notFound } = options;
-    return () => {
-      const location = router.currentRoute.value;
-      const match = routes.find((r) => matchRoute(r.path, location.path) !== null);
-      if (match) {
-        const params = matchRoute(match.path, location.path) || {};
-        const component = match.component({ ...params, ...location.query });
-        if (typeof component === "object" && component !== null && "tagName" in component) {
-          return component;
-        }
-        return { tagName: "span", props: {}, children: [component] };
-      }
-      if (notFound) {
-        const component = notFound(location.params);
-        if (typeof component === "object" && component !== null && "tagName" in component) {
-          return component;
-        }
-        return { tagName: "span", props: {}, children: [component] };
-      }
-      return { tagName: "div", props: {}, children: ["404 - Not Found"] };
-    };
-  }
-  var routerLink = (router, props, ...children) => {
-    return {
-      tagName: "a",
-      props: {
-        ...props,
-        href: props.to,
-        onclick: (e) => {
-          e.preventDefault();
-          router.push(props.to);
-        }
-      },
-      children
-    };
-  };
-
-  // src/elements.ts
-  var createElementFactory = (tag) => {
-    return function(props, ...rest) {
-      if (arguments.length === 0) {
-        return { tagName: tag, props: {}, children: [] };
-      }
-      let actualProps = {};
-      let startIndex = 1;
-      const isState = props && typeof props === "object" && "value" in props && "subscribe" in props;
-      const isVNode = props && typeof props === "object" && "tagName" in props;
-      const isChild = typeof props !== "object" || Array.isArray(props) || props === null || isState || isVNode;
-      if (isChild) {
-        actualProps = {};
-        startIndex = 0;
-      } else {
-        actualProps = props;
-      }
-      const args = startIndex === 0 ? [props, ...rest] : rest;
-      if (args.length === 0) {
-        return { tagName: tag, props: actualProps, children: [] };
-      }
-      if (args.length === 1) {
-        const child = args[0];
-        if (child == null || child === false) {
-          return { tagName: tag, props: actualProps, children: [] };
-        }
-        if (Array.isArray(child)) {
-          const flatChildren2 = [];
-          const len = child.length;
-          for (let j = 0; j < len; j++) {
-            const c = child[j];
-            if (c != null && c !== false) {
-              flatChildren2.push(c);
-            }
-          }
-          return { tagName: tag, props: actualProps, children: flatChildren2 };
-        }
-        return { tagName: tag, props: actualProps, children: [child] };
-      }
-      const flatChildren = [];
-      for (let i2 = 0; i2 < args.length; i2++) {
-        const child = args[i2];
-        if (child == null || child === false) continue;
-        if (Array.isArray(child)) {
-          const len = child.length;
-          for (let j = 0; j < len; j++) {
-            const c = child[j];
-            if (c != null && c !== false) {
-              flatChildren.push(c);
-            }
-          }
-        } else {
-          flatChildren.push(child);
-        }
-      }
-      return { tagName: tag, props: actualProps, children: flatChildren };
-    };
-  };
-  var tags = [
-    "html",
-    "head",
-    "body",
-    "title",
-    "base",
-    "link",
-    "meta",
-    "style",
-    "address",
-    "article",
-    "aside",
-    "footer",
-    "header",
-    "h1",
-    "h2",
-    "h3",
-    "h4",
-    "h5",
-    "h6",
-    "main",
-    "nav",
-    "section",
-    "blockquote",
-    "dd",
-    "div",
-    "dl",
-    "dt",
-    "figcaption",
-    "figure",
-    "hr",
-    "li",
-    "ol",
-    "p",
-    "pre",
-    "ul",
-    "a",
-    "abbr",
-    "b",
-    "bdi",
-    "bdo",
-    "br",
-    "cite",
-    "code",
-    "data",
-    "dfn",
-    "em",
-    "i",
-    "kbd",
-    "mark",
-    "q",
-    "rp",
-    "rt",
-    "ruby",
-    "s",
-    "samp",
-    "small",
-    "span",
-    "strong",
-    "sub",
-    "sup",
-    "time",
-    "u",
-    "wbr",
-    "area",
-    "audio",
-    "img",
-    "map",
-    "track",
-    "video",
-    "embed",
-    "iframe",
-    "object",
-    "param",
-    "picture",
-    "portal",
-    "source",
-    "canvas",
-    "noscript",
-    "script",
-    "del",
-    "ins",
-    "caption",
-    "col",
-    "colgroup",
-    "table",
-    "tbody",
-    "td",
-    "tfoot",
-    "th",
-    "thead",
-    "tr",
-    "button",
-    "datalist",
-    "fieldset",
-    "form",
-    "input",
-    "label",
-    "legend",
-    "meter",
-    "optgroup",
-    "option",
-    "output",
-    "progress",
-    "select",
-    "textarea",
-    "details",
-    "dialog",
-    "menu",
-    "summary",
-    "slot",
-    "template"
-  ];
-  var svgTags = [
-    "svg",
-    "circle",
-    "rect",
-    "path",
-    "line",
-    "polyline",
-    "polygon",
-    "ellipse",
-    "g",
-    "text",
-    "tspan",
-    "defs",
-    "linearGradient",
-    "radialGradient",
-    "stop",
-    "pattern",
-    "mask",
-    "clipPath",
-    "use",
-    "symbol",
-    "marker",
-    "image",
-    "foreignObject",
-    "animate",
-    "animateTransform",
-    "animateMotion",
-    "set",
-    "filter",
-    "feBlend",
-    "feColorMatrix",
-    "feComponentTransfer",
-    "feComposite",
-    "feConvolveMatrix",
-    "feDiffuseLighting",
-    "feDisplacementMap",
-    "feFlood",
-    "feGaussianBlur",
-    "feMorphology",
-    "feOffset",
-    "feSpecularLighting",
-    "feTile",
-    "feTurbulence"
-  ];
-  var mathTags = [
-    "math",
-    "mi",
-    "mn",
-    "mo",
-    "ms",
-    "mtext",
-    "mrow",
-    "mfrac",
-    "msqrt",
-    "mroot",
-    "msub",
-    "msup"
-  ];
-  var elements = {};
-  tags.forEach((tag) => {
-    elements[tag] = createElementFactory(tag);
-  });
-  svgTags.forEach((tag) => {
-    const name = "svg" + tag.charAt(0).toUpperCase() + tag.slice(1);
-    elements[name] = createElementFactory(tag);
-  });
-  mathTags.forEach((tag) => {
-    const name = "math" + tag.charAt(0).toUpperCase() + tag.slice(1);
-    elements[name] = createElementFactory(tag);
-  });
-  elements.varElement = createElementFactory("var");
-  var {
-    html,
-    head,
-    body,
-    title,
-    base,
-    link,
-    meta,
-    style,
-    address,
-    article,
-    aside,
-    footer,
-    header,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    main,
-    nav,
-    section,
-    blockquote,
-    dd,
-    div,
-    dl,
-    dt,
-    figcaption,
-    figure,
-    hr,
-    li,
-    ol,
-    p,
-    pre,
-    ul,
-    a,
-    abbr,
-    b,
-    bdi,
-    bdo,
-    br,
-    cite,
-    code,
-    data,
-    dfn,
-    em,
-    i,
-    kbd,
-    mark,
-    q,
-    rp,
-    rt,
-    ruby,
-    s,
-    samp,
-    small,
-    span,
-    strong,
-    sub,
-    sup,
-    time,
-    u,
-    wbr,
-    area,
-    audio,
-    img,
-    map,
-    track,
-    video,
-    embed,
-    iframe,
-    object,
-    param,
-    picture,
-    portal,
-    source,
-    canvas,
-    noscript,
-    script,
-    del,
-    ins,
-    caption,
-    col,
-    colgroup,
-    table,
-    tbody,
-    td,
-    tfoot,
-    th,
-    thead,
-    tr,
-    button,
-    datalist,
-    fieldset,
-    form,
-    input,
-    label,
-    legend,
-    meter,
-    optgroup,
-    option,
-    output,
-    progress,
-    select,
-    textarea,
-    details,
-    dialog,
-    menu,
-    summary,
-    slot,
-    template,
-    svgSvg,
-    svgCircle,
-    svgRect,
-    svgPath,
-    svgLine,
-    svgPolyline,
-    svgPolygon,
-    svgEllipse,
-    svgG,
-    svgText,
-    svgTspan,
-    svgDefs,
-    svgLinearGradient,
-    svgRadialGradient,
-    svgStop,
-    svgPattern,
-    svgMask,
-    svgClipPath,
-    svgUse,
-    svgSymbol,
-    svgMarker,
-    svgImage,
-    svgForeignObject,
-    svgAnimate,
-    svgAnimateTransform,
-    svgAnimateMotion,
-    svgSet,
-    svgFilter,
-    svgFeBlend,
-    svgFeColorMatrix,
-    svgFeComponentTransfer,
-    svgFeComposite,
-    svgFeConvolveMatrix,
-    svgFeDiffuseLighting,
-    svgFeDisplacementMap,
-    svgFeFlood,
-    svgFeGaussianBlur,
-    svgFeMorphology,
-    svgFeOffset,
-    svgFeSpecularLighting,
-    svgFeTile,
-    svgFeTurbulence,
-    mathMath,
-    mathMi,
-    mathMn,
-    mathMo,
-    mathMs,
-    mathMtext,
-    mathMrow,
-    mathMfrac,
-    mathMsqrt,
-    mathMroot,
-    mathMsub,
-    mathMsup,
-    varElement
-  } = elements;
-
-  // src/index.ts
-  var renderToHead = (...vNodes) => domNode.renderToHead(...vNodes);
-  var addStyle = (css) => domNode.addStyle(css);
-  var addMeta = (attrs) => domNode.addMeta(attrs);
-  var addLink = (attrs) => domNode.addLink(attrs);
-  var setTitle = (text2) => domNode.setTitle(text2);
-  var renderToString = (vNode, options) => domNode.renderToString(vNode, options);
-  var jsonToVNode = (json) => domNode.jsonToVNode(json);
-  var renderJson = (container, json) => domNode.renderJson(container, json);
-  var renderJsonToString = (json, options) => domNode.renderJsonToString(json, options);
-  var vNodeJsonToVNode = (json) => domNode.vNodeJsonToVNode(json);
-  var renderVNode = (container, json) => domNode.renderVNode(container, json);
-  var renderVNodeToString = (json, options) => domNode.renderVNodeToString(json, options);
-  if (typeof window !== "undefined") {
-    Object.assign(window, {
-      domNode,
-      createElementFactory,
-      renderToHead,
-      addStyle,
-      addMeta,
-      addLink,
-      setTitle,
-      createState,
-      computed,
-      effect,
-      reactive,
-      reactiveAs,
-      text,
-      bindValue,
-      bindChecked,
-      batchRender,
-      renderChunked,
-      createVirtualList,
-      lazy,
-      cleanupUnused,
-      renderToString,
-      jsonToVNode,
-      renderJson,
-      renderJsonToString,
-      vNodeJsonToVNode,
-      renderVNode,
-      renderVNodeToString,
-      throttle,
-      debounce,
-      CreateStyle,
-      createRouter,
-      createRouterView,
-      routerLink,
-      ...elements
-    });
-  }
-  return __toCommonJS(index_exports);
-})();