elit 3.5.7 → 3.5.8

package/dist/desktop-auto-render.js

@@ -0,0 +1,2341 @@
+"use strict";
+(() => {
+  // src/render-context.ts
+  var RUNTIME_TARGET_KEY = "__ELIT_RUNTIME_TARGET__";
+  var CAPTURED_RENDER_KEY = "__ELIT_CAPTURED_RENDER__";
+  var DESKTOP_RENDER_OPTIONS_KEY = "__ELIT_DESKTOP_RENDER_OPTIONS__";
+  var RUNTIME_TARGET_ENV = "ELIT_RUNTIME_TARGET";
+  function getGlobalRenderScope() {
+    return globalThis;
+  }
+  function isRenderRuntimeTarget(value) {
+    return value === "web" || value === "desktop" || value === "mobile" || value === "unknown";
+  }
+  function detectRenderRuntimeTarget() {
+    const globalScope = getGlobalRenderScope();
+    const explicitTarget = globalScope[RUNTIME_TARGET_KEY] ?? globalScope.process?.env?.[RUNTIME_TARGET_ENV];
+    if (isRenderRuntimeTarget(explicitTarget)) {
+      return explicitTarget;
+    }
+    if (typeof globalScope.document !== "undefined" && typeof globalScope.window !== "undefined") {
+      return "web";
+    }
+    if (typeof globalScope.createWindow === "function") {
+      return "desktop";
+    }
+    const argv = Array.isArray(globalScope.process?.argv) ? globalScope.process.argv.join(" ") : "";
+    if (/\bdesktop\b/i.test(argv)) {
+      return "desktop";
+    }
+    if (/\b(mobile|native)\b/i.test(argv)) {
+      return "mobile";
+    }
+    return "unknown";
+  }
+  function captureRenderedVNode(rootElement, vNode, target = detectRenderRuntimeTarget()) {
+    const globalScope = getGlobalRenderScope();
+    globalScope[RUNTIME_TARGET_KEY] = target;
+    globalScope[CAPTURED_RENDER_KEY] = {
+      rootElement,
+      target,
+      vNode
+    };
+  }
+  function getCapturedRenderedVNode() {
+    return getGlobalRenderScope()[CAPTURED_RENDER_KEY];
+  }
+  function clearCapturedRenderedVNode() {
+    delete getGlobalRenderScope()[CAPTURED_RENDER_KEY];
+  }
+  function getDesktopRenderOptions() {
+    return getGlobalRenderScope()[DESKTOP_RENDER_OPTIONS_KEY];
+  }
+
+  // src/dom.ts
+  function resolveElement(rootElement) {
+    return typeof rootElement === "string" ? document.getElementById(rootElement.replace("#", "")) : rootElement;
+  }
+  function ensureElement(el, rootElement) {
+    if (!el) {
+      throw new Error(`Element not found: ${rootElement}`);
+    }
+    return el;
+  }
+  function shouldSkipChild(child) {
+    return child == null || child === false;
+  }
+  function isPrimitiveJson(json) {
+    return json == null || typeof json === "boolean" || typeof json === "string" || typeof json === "number";
+  }
+  function normalizeFormControlValue(value) {
+    if (Array.isArray(value)) {
+      return value.map((entry) => String(entry)).join(",");
+    }
+    return value == null ? "" : String(value);
+  }
+  function resolveTextareaValue(tagName, props) {
+    return tagName === "textarea" && props.value != null ? normalizeFormControlValue(props.value) : void 0;
+  }
+  function hasDocumentApi() {
+    return typeof document !== "undefined";
+  }
+  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;
+      }
+      if (this.isState(vNode)) {
+        const textNode = document.createTextNode(String(vNode.value ?? ""));
+        parent.appendChild(textNode);
+        vNode.subscribe((newValue) => {
+          textNode.textContent = String(newValue ?? "");
+        });
+        return;
+      }
+      if (Array.isArray(vNode)) {
+        for (const child of vNode) {
+          this.renderToDOM(child, parent);
+        }
+        return;
+      }
+      const { tagName, props, children } = vNode;
+      const textareaValue = resolveTextareaValue(tagName, props);
+      if (!tagName) {
+        for (const child of children) {
+          if (shouldSkipChild(child)) continue;
+          if (Array.isArray(child)) {
+            for (const c of child) {
+              !shouldSkipChild(c) && this.renderToDOM(c, parent);
+            }
+          } else {
+            this.renderToDOM(child, parent);
+          }
+        }
+        return;
+      }
+      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);
+      for (const key in props) {
+        const value = props[key];
+        if (value == null || value === false) continue;
+        const c = key.charCodeAt(0);
+        if (c === 99 && (key.length < 6 || key[5] === "N")) {
+          const classValue = Array.isArray(value) ? value.join(" ") : value;
+          isSVG ? el.setAttribute("class", classValue) : el.className = classValue;
+        } else if (c === 115 && key.length === 5) {
+          if (typeof value === "string") {
+            el.style.cssText = value;
+          } else {
+            const s = el.style;
+            for (const k in value) s[k] = value[k];
+          }
+        } else if (c === 111 && key.charCodeAt(1) === 110) {
+          el[key.toLowerCase()] = value;
+        } else if (c === 100 && key.length > 20) {
+          el.innerHTML = value.__html;
+        } else if (c === 114 && key === "ref") {
+          setTimeout(() => {
+            typeof value === "function" ? value(el) : value.current = el;
+          }, 0);
+        } else if (textareaValue !== void 0 && key === "value") {
+          continue;
+        } else {
+          el.setAttribute(key, value === true ? "" : String(value));
+        }
+      }
+      const renderableChildren = textareaValue === void 0 ? children : [];
+      const len = renderableChildren.length;
+      if (!len) {
+        if (textareaValue !== void 0) {
+          el.value = textareaValue;
+        }
+        parent.appendChild(el);
+        return;
+      }
+      const renderChildren = (target) => {
+        for (let i = 0; i < len; i++) {
+          const child = renderableChildren[i];
+          if (shouldSkipChild(child)) continue;
+          if (Array.isArray(child)) {
+            for (let j = 0, cLen = child.length; j < cLen; j++) {
+              const c = child[j];
+              !shouldSkipChild(c) && this.renderToDOM(c, target);
+            }
+          } else {
+            this.renderToDOM(child, target);
+          }
+        }
+      };
+      if (len > 30) {
+        const fragment = document.createDocumentFragment();
+        renderChildren(fragment);
+        el.appendChild(fragment);
+      } else {
+        renderChildren(el);
+      }
+      parent.appendChild(el);
+    }
+    render(rootElement, vNode) {
+      if (!hasDocumentApi()) {
+        const runtimeTarget = detectRenderRuntimeTarget();
+        if (runtimeTarget === "desktop" || runtimeTarget === "mobile") {
+          captureRenderedVNode(rootElement, vNode, runtimeTarget);
+          return {};
+        }
+        throw new Error("render() requires a DOM or an Elit desktop/mobile runtime target.");
+      }
+      const el = ensureElement(resolveElement(rootElement), rootElement);
+      el.innerHTML = "";
+      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 = ensureElement(resolveElement(rootElement), 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 i = processed; i < end; i++) {
+            this.renderToDOM(vNodes[i], fragment);
+          }
+          processed = end;
+          if (processed >= len) {
+            el.appendChild(fragment);
+          } else {
+            requestAnimationFrame(processChunk);
+          }
+        };
+        processChunk();
+      } else {
+        const fragment = document.createDocumentFragment();
+        for (let i = 0; i < len; i++) {
+          this.renderToDOM(vNodes[i], fragment);
+        }
+        el.appendChild(fragment);
+      }
+      return el;
+    }
+    renderChunked(rootElement, vNodes, chunkSize = 5e3, onProgress) {
+      const el = ensureElement(resolveElement(rootElement), rootElement);
+      const len = vNodes.length;
+      let index = 0;
+      const renderChunk = () => {
+        const end = Math.min(index + chunkSize, len);
+        const fragment = document.createDocumentFragment();
+        for (let i = index; i < end; i++) {
+          this.renderToDOM(vNodes[i], fragment);
+        }
+        el.appendChild(fragment);
+        index = end;
+        if (onProgress) onProgress(index, len);
+        if (index < len) {
+          requestAnimationFrame(renderChunk);
+        }
+      };
+      requestAnimationFrame(renderChunk);
+      return el;
+    }
+    renderToHead(...vNodes) {
+      const head = document.head;
+      if (head) {
+        for (const vNode of vNodes.flat()) {
+          vNode && this.renderToDOM(vNode, head);
+        }
+      }
+      return head;
+    }
+    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(text) {
+      return document.title = text;
+    }
+    // Reactive State Management
+    createState(initialValue, options = {}) {
+      let value = initialValue;
+      const listeners = /* @__PURE__ */ new Set();
+      let updateTimer = null;
+      const { throttle = 0, deep = false } = options;
+      const notify = () => listeners.forEach((fn) => fn(value));
+      const scheduleUpdate = () => {
+        if (throttle > 0) {
+          if (!updateTimer) {
+            updateTimer = setTimeout(() => {
+              updateTimer = null;
+              notify();
+            }, throttle);
+          }
+        } 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();
+          updateTimer && clearTimeout(updateTimer);
+        }
+      };
+    }
+    computed(states, computeFn) {
+      const values = states.map((s) => s.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(container2, items, renderItem, itemHeight = 50, bufferSize = 5) {
+      const viewportHeight = container2.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 render2 = () => {
+        const { start, end } = getVisibleRange();
+        const wrapper = document.createElement("div");
+        wrapper.style.cssText = `height:${totalHeight}px;position:relative`;
+        for (let i = start; i < end; i++) {
+          const itemEl = document.createElement("div");
+          itemEl.style.cssText = `position:absolute;top:${i * itemHeight}px;height:${itemHeight}px;width:100%`;
+          this.renderToDOM(renderItem(items[i], i), itemEl);
+          wrapper.appendChild(itemEl);
+        }
+        container2.innerHTML = "";
+        container2.appendChild(wrapper);
+      };
+      const scrollHandler = () => {
+        scrollTop = container2.scrollTop;
+        requestAnimationFrame(render2);
+      };
+      container2.addEventListener("scroll", scrollHandler);
+      render2();
+      return {
+        render: render2,
+        destroy: () => {
+          container2.removeEventListener("scroll", scrollHandler);
+          container2.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 textareaValue = resolveTextareaValue(tagName, props);
+      const isSelfClosing = this.isSelfClosingTag(tagName);
+      let html = `${indentStr}<${tagName}`;
+      const attrs = this.propsToAttributes(props, tagName);
+      if (attrs) {
+        html += ` ${attrs}`;
+      }
+      if (isSelfClosing) {
+        html += ` />${newLine}`;
+        return html;
+      }
+      html += ">";
+      if (textareaValue !== void 0) {
+        html += this.escapeHtml(textareaValue);
+        html += `</${tagName}>${newLine}`;
+        return html;
+      }
+      if (props.dangerouslySetInnerHTML) {
+        html += props.dangerouslySetInnerHTML.__html;
+        html += `</${tagName}>${newLine}`;
+        return html;
+      }
+      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) {
+          html += newLine;
+          for (const child of resolvedChildren) {
+            if (shouldSkipChild(child)) continue;
+            if (Array.isArray(child)) {
+              for (const c of child) {
+                if (!shouldSkipChild(c)) {
+                  html += this.renderToString(c, { pretty, indent: indent + 1 });
+                }
+              }
+            } else {
+              html += this.renderToString(child, { pretty, indent: indent + 1 });
+            }
+          }
+          html += indentStr;
+        } else {
+          for (const child of resolvedChildren) {
+            if (shouldSkipChild(child)) continue;
+            if (Array.isArray(child)) {
+              for (const c of child) {
+                if (!shouldSkipChild(c)) {
+                  html += this.renderToString(c, { pretty: false, indent: 0 });
+                }
+              }
+            } else {
+              html += this.renderToString(child, { pretty: false, indent: 0 });
+            }
+          }
+        }
+      }
+      html += `</${tagName}>${newLine}`;
+      return html;
+    }
+    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(text) {
+      const htmlEscapes = {
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#x27;"
+      };
+      return text.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, tagName) {
+      const attrs = [];
+      for (const key in props) {
+        if (key === "children" || key === "dangerouslySetInnerHTML" || key === "ref" || tagName === "textarea" && key === "value") {
+          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(style) {
+      if (typeof style === "string") {
+        return style;
+      }
+      if (typeof style === "object" && style !== null) {
+        const styles2 = [];
+        for (const key in style) {
+          const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+          styles2.push(`${cssKey}:${style[key]}`);
+        }
+        return styles2.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 (isPrimitiveJson(json)) {
+        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 (isPrimitiveJson(json)) {
+        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);
+    }
+    // Generate complete HTML document as string (for SSR)
+    renderToHTMLDocument(vNode, options = {}) {
+      const { title = "", meta = [], links = [], scripts = [], styles: styles2 = [], lang = "en", head = "", bodyAttrs = {}, pretty = false } = options;
+      const nl = pretty ? "\n" : "";
+      const indent = pretty ? "  " : "";
+      const indent2 = pretty ? "    " : "";
+      let html = `<!DOCTYPE html>${nl}<html lang="${lang}">${nl}${indent}<head>${nl}${indent2}<meta charset="UTF-8">${nl}${indent2}<meta name="viewport" content="width=device-width, initial-scale=1.0">${nl}`;
+      if (title) html += `${indent2}<title>${this.escapeHtml(title)}</title>${nl}`;
+      for (const m of meta) {
+        html += `${indent2}<meta`;
+        for (const k in m) html += ` ${k}="${this.escapeHtml(m[k])}"`;
+        html += `>${nl}`;
+      }
+      for (const l of links) {
+        html += `${indent2}<link`;
+        for (const k in l) html += ` ${k}="${this.escapeHtml(l[k])}"`;
+        html += `>${nl}`;
+      }
+      for (const s of styles2) {
+        if (s.href) {
+          html += `${indent2}<link rel="stylesheet" href="${this.escapeHtml(s.href)}">${nl}`;
+        } else if (s.content) {
+          html += `${indent2}<style>${s.content}</style>${nl}`;
+        }
+      }
+      if (head) html += head + nl;
+      html += `${indent}</head>${nl}${indent}<body`;
+      for (const k in bodyAttrs) html += ` ${k}="${this.escapeHtml(bodyAttrs[k])}"`;
+      html += `>${nl}`;
+      html += this.renderToString(vNode, { pretty, indent: 2 });
+      for (const script of scripts) {
+        html += `${indent2}<script`;
+        if (script.type) html += ` type="${this.escapeHtml(script.type)}"`;
+        if (script.async) html += ` async`;
+        if (script.defer) html += ` defer`;
+        if (script.src) {
+          html += ` src="${this.escapeHtml(script.src)}"></script>${nl}`;
+        } else if (script.content) {
+          html += `>${script.content}</script>${nl}`;
+        } else {
+          html += `></script>${nl}`;
+        }
+      }
+      html += `${indent}</body>${nl}</html>`;
+      return html;
+    }
+    // Expose elementCache for reactive updates
+    getElementCache() {
+      return this.elementCache;
+    }
+  };
+  var dom = new DomNode();
+  var render = dom.render.bind(dom);
+  var renderToString = dom.renderToString.bind(dom);
+
+  // src/style.ts
+  var ELIT_SHARED_STYLE_STORE_KEY = "__elitSharedStyleStore__";
+  function createStyleStore() {
+    return {
+      variables: [],
+      rules: [],
+      mediaRules: [],
+      keyframes: [],
+      fontFaces: [],
+      imports: [],
+      containerRules: [],
+      supportsRules: [],
+      layerRules: [],
+      layerOrder: []
+    };
+  }
+  function getSharedStyleStore() {
+    const globalScope = globalThis;
+    if (!globalScope[ELIT_SHARED_STYLE_STORE_KEY]) {
+      globalScope[ELIT_SHARED_STYLE_STORE_KEY] = createStyleStore();
+    }
+    return globalScope[ELIT_SHARED_STYLE_STORE_KEY];
+  }
+  var CreateStyle = class {
+    constructor(store) {
+      this.variables = [];
+      this.rules = [];
+      this.mediaRules = [];
+      this.keyframes = [];
+      this.fontFaces = [];
+      this.imports = [];
+      this.containerRules = [];
+      this.supportsRules = [];
+      this.layerRules = [];
+      this._layerOrder = [];
+      this.parsedSelectorChainCache = /* @__PURE__ */ new Map();
+      if (!store) {
+        return;
+      }
+      this.variables = store.variables;
+      this.rules = store.rules;
+      this.mediaRules = store.mediaRules;
+      this.keyframes = store.keyframes;
+      this.fontFaces = store.fontFaces;
+      this.imports = store.imports;
+      this.containerRules = store.containerRules;
+      this.supportsRules = store.supportsRules;
+      this.layerRules = store.layerRules;
+      this._layerOrder = store.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, styles2) {
+      const rule = { selector: tag, styles: styles2, type: "tag" };
+      this.rules.push(rule);
+      return rule;
+    }
+    addClass(name, styles2) {
+      const selector = name.startsWith(".") ? name : `.${name}`;
+      const rule = { selector, styles: styles2, type: "class" };
+      this.rules.push(rule);
+      return rule;
+    }
+    addId(name, styles2) {
+      const selector = name.startsWith("#") ? name : `#${name}`;
+      const rule = { selector, styles: styles2, type: "id" };
+      this.rules.push(rule);
+      return rule;
+    }
+    // Pseudo Selectors
+    addPseudoClass(pseudo, styles2, baseSelector) {
+      const pseudoClass = pseudo.startsWith(":") ? pseudo : `:${pseudo}`;
+      const selector = baseSelector ? `${baseSelector}${pseudoClass}` : pseudoClass;
+      const rule = { selector, styles: styles2, type: "pseudo-class" };
+      this.rules.push(rule);
+      return rule;
+    }
+    addPseudoElement(pseudo, styles2, baseSelector) {
+      const pseudoElement = pseudo.startsWith("::") ? pseudo : `::${pseudo}`;
+      const selector = baseSelector ? `${baseSelector}${pseudoElement}` : pseudoElement;
+      const rule = { selector, styles: styles2, type: "pseudo-element" };
+      this.rules.push(rule);
+      return rule;
+    }
+    // Attribute Selectors
+    addAttribute(attr, styles2, baseSelector) {
+      const attrSelector = attr.startsWith("[") ? attr : `[${attr}]`;
+      const selector = baseSelector ? `${baseSelector}${attrSelector}` : attrSelector;
+      const rule = { selector, styles: styles2, type: "attribute" };
+      this.rules.push(rule);
+      return rule;
+    }
+    attrEquals(attr, value, styles2, baseSelector) {
+      return this.addAttribute(`${attr}="${value}"`, styles2, baseSelector);
+    }
+    attrContainsWord(attr, value, styles2, baseSelector) {
+      return this.addAttribute(`${attr}~="${value}"`, styles2, baseSelector);
+    }
+    attrStartsWith(attr, value, styles2, baseSelector) {
+      return this.addAttribute(`${attr}^="${value}"`, styles2, baseSelector);
+    }
+    attrEndsWith(attr, value, styles2, baseSelector) {
+      return this.addAttribute(`${attr}$="${value}"`, styles2, baseSelector);
+    }
+    attrContains(attr, value, styles2, baseSelector) {
+      return this.addAttribute(`${attr}*="${value}"`, styles2, baseSelector);
+    }
+    // Combinator Selectors
+    descendant(ancestor, descendant2, styles2) {
+      return this.createAndAddRule(`${ancestor} ${descendant2}`, styles2);
+    }
+    child(parent, childSel, styles2) {
+      return this.createAndAddRule(`${parent} > ${childSel}`, styles2);
+    }
+    adjacentSibling(element, sibling, styles2) {
+      return this.createAndAddRule(`${element} + ${sibling}`, styles2);
+    }
+    generalSibling(element, sibling, styles2) {
+      return this.createAndAddRule(`${element} ~ ${sibling}`, styles2);
+    }
+    multiple(selectors, styles2) {
+      return this.createAndAddRule(selectors.join(", "), styles2);
+    }
+    // Nesting (BEM-style)
+    addName(name, styles2) {
+      const selector = name.startsWith("--") ? `&${name}` : `&--${name}`;
+      const rule = { selector, styles: styles2, type: "name" };
+      return rule;
+    }
+    nesting(parentRule, ...childRules) {
+      parentRule.nested = childRules;
+      return parentRule;
+    }
+    // @keyframes - Animations
+    keyframe(name, steps) {
+      const keyframeSteps = Object.entries(steps).map(([step, styles2]) => ({
+        step: step === "from" ? "from" : step === "to" ? "to" : `${step}%`,
+        styles: styles2
+      }));
+      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 mediaRule = { type, condition, rules: this.rulesToCSSRules(rules) };
+      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 mediaRule = { type: "", condition: "prefers-color-scheme: dark", rules: this.rulesToCSSRules(rules) };
+      this.mediaRules.push(mediaRule);
+      return mediaRule;
+    }
+    mediaLight(rules) {
+      const mediaRule = { type: "", condition: "prefers-color-scheme: light", rules: this.rulesToCSSRules(rules) };
+      this.mediaRules.push(mediaRule);
+      return mediaRule;
+    }
+    mediaReducedMotion(rules) {
+      const mediaRule = { type: "", condition: "prefers-reduced-motion: reduce", rules: this.rulesToCSSRules(rules) };
+      this.mediaRules.push(mediaRule);
+      return mediaRule;
+    }
+    // @container - Container Queries
+    container(condition, rules, name) {
+      const containerRule = { name, condition, rules: this.rulesToCSSRules(rules) };
+      this.containerRules.push(containerRule);
+      return containerRule;
+    }
+    addContainer(name, styles2) {
+      const containerStyles = { ...styles2, containerName: name };
+      return this.addClass(name, containerStyles);
+    }
+    // @supports - Feature Queries
+    supports(condition, rules) {
+      const supportsRule = { condition, rules: this.rulesToCSSRules(rules) };
+      this.supportsRules.push(supportsRule);
+      return supportsRule;
+    }
+    // @layer - Cascade Layers
+    layerOrder(...layers) {
+      this._layerOrder = layers;
+    }
+    layer(name, rules) {
+      const layerRule = { name, rules: this.rulesToCSSRules(rules) };
+      this.layerRules.push(layerRule);
+      return layerRule;
+    }
+    // Custom Rules
+    add(rules) {
+      const cssRules = Object.entries(rules).map(([selector, styles2]) => {
+        const rule = { selector, styles: styles2, type: "custom" };
+        this.rules.push(rule);
+        return rule;
+      });
+      return cssRules;
+    }
+    important(value) {
+      return `${value} !important`;
+    }
+    getVariables() {
+      return Object.fromEntries(this.variables.map((variable) => [variable.name, variable.value]));
+    }
+    resolveVariableReferences(value, variables) {
+      let resolved = value;
+      for (let index = 0; index < 8; index++) {
+        let replaced = false;
+        resolved = resolved.replace(/var\(\s*(--[\w-]+)\s*(?:,\s*([^\)]+))?\)/g, (match, name, fallback) => {
+          const variableValue = variables[name];
+          if (variableValue !== void 0) {
+            replaced = true;
+            return variableValue;
+          }
+          if (fallback !== void 0) {
+            replaced = true;
+            return fallback.trim();
+          }
+          return match;
+        });
+        if (!replaced) {
+          break;
+        }
+      }
+      return resolved.replace(/\s*!important\s*$/i, "").trim();
+    }
+    normalizeTargetIdentity(target) {
+      return {
+        tagName: typeof target.tagName === "string" && target.tagName.trim() ? target.tagName.trim().toLowerCase() : void 0,
+        classNames: Array.isArray(target.classNames) ? target.classNames.map((className) => className.trim()).filter(Boolean) : [],
+        attributes: target.attributes ? Object.fromEntries(
+          Object.entries(target.attributes).filter(([, value]) => value !== void 0 && value !== null && value !== false).map(([name, value]) => [name.toLowerCase(), String(value)])
+        ) : {},
+        pseudoStates: Array.isArray(target.pseudoStates) ? [...new Set(target.pseudoStates.map((pseudoState) => pseudoState.trim().toLowerCase()).filter(Boolean))] : [],
+        childIndex: typeof target.childIndex === "number" && Number.isFinite(target.childIndex) ? target.childIndex : void 0,
+        siblingCount: typeof target.siblingCount === "number" && Number.isFinite(target.siblingCount) ? target.siblingCount : void 0,
+        sameTypeIndex: typeof target.sameTypeIndex === "number" && Number.isFinite(target.sameTypeIndex) ? target.sameTypeIndex : void 0,
+        sameTypeCount: typeof target.sameTypeCount === "number" && Number.isFinite(target.sameTypeCount) ? target.sameTypeCount : void 0,
+        containerNames: Array.isArray(target.containerNames) ? [...new Set(target.containerNames.map((containerName) => containerName.trim().toLowerCase()).filter(Boolean))] : [],
+        containerWidth: typeof target.containerWidth === "number" && Number.isFinite(target.containerWidth) ? target.containerWidth : void 0,
+        isContainer: target.isContainer === true,
+        isScopeReference: target.isScopeReference === true
+      };
+    }
+    normalizeTarget(target) {
+      const cached = this.nativeTargetNormalizationCache?.get(target);
+      if (cached) {
+        return cached;
+      }
+      const normalized = {
+        ...this.normalizeTargetIdentity(target),
+        previousSiblings: [],
+        nextSiblings: [],
+        children: []
+      };
+      this.nativeTargetNormalizationCache?.set(target, normalized);
+      normalized.previousSiblings = Array.isArray(target.previousSiblings) ? target.previousSiblings.map((sibling) => this.normalizeTarget(sibling)) : [];
+      normalized.nextSiblings = Array.isArray(target.nextSiblings) ? target.nextSiblings.map((sibling) => this.normalizeTarget(sibling)) : [];
+      normalized.children = Array.isArray(target.children) ? target.children.map((child) => this.normalizeTarget(child)) : [];
+      return normalized;
+    }
+    withNativeTargetNormalizationCache(callback) {
+      const previousCache = this.nativeTargetNormalizationCache;
+      this.nativeTargetNormalizationCache = /* @__PURE__ */ new WeakMap();
+      try {
+        return callback();
+      } finally {
+        this.nativeTargetNormalizationCache = previousCache;
+      }
+    }
+    splitConditionalClauses(value, operator) {
+      const clauses = [];
+      let token = "";
+      let depth = 0;
+      for (let index = 0; index < value.length; index++) {
+        const char = value[index];
+        if (char === "(") {
+          depth += 1;
+        } else if (char === ")" && depth > 0) {
+          depth -= 1;
+        }
+        const operatorToken = ` ${operator} `;
+        if (depth === 0 && value.slice(index, index + operatorToken.length).toLowerCase() === operatorToken) {
+          const trimmed = token.trim();
+          if (trimmed) {
+            clauses.push(trimmed);
+          }
+          token = "";
+          index += operatorToken.length - 1;
+          continue;
+        }
+        token += char;
+      }
+      const trailing = token.trim();
+      if (trailing) {
+        clauses.push(trailing);
+      }
+      return clauses;
+    }
+    splitSelectorList(value) {
+      const selectors = [];
+      let token = "";
+      let attributeDepth = 0;
+      let parenthesisDepth = 0;
+      let quoted;
+      for (let index = 0; index < value.length; index++) {
+        const char = value[index];
+        if (quoted) {
+          token += char;
+          if (char === quoted && value[index - 1] !== "\\") {
+            quoted = void 0;
+          }
+          continue;
+        }
+        if (char === '"' || char === "'") {
+          quoted = char;
+          token += char;
+          continue;
+        }
+        if (char === "[") {
+          attributeDepth += 1;
+          token += char;
+          continue;
+        }
+        if (char === "]" && attributeDepth > 0) {
+          attributeDepth -= 1;
+          token += char;
+          continue;
+        }
+        if (attributeDepth === 0 && char === "(") {
+          parenthesisDepth += 1;
+          token += char;
+          continue;
+        }
+        if (attributeDepth === 0 && char === ")" && parenthesisDepth > 0) {
+          parenthesisDepth -= 1;
+          token += char;
+          continue;
+        }
+        if (attributeDepth === 0 && parenthesisDepth === 0 && char === ",") {
+          const trimmed = token.trim();
+          if (trimmed) {
+            selectors.push(trimmed);
+          }
+          token = "";
+          continue;
+        }
+        token += char;
+      }
+      const trailing = token.trim();
+      if (trailing) {
+        selectors.push(trailing);
+      }
+      return selectors;
+    }
+    parsePseudoSelectorToken(token, startIndex) {
+      if (token[startIndex] !== ":" || token[startIndex + 1] === ":") {
+        return void 0;
+      }
+      let cursor = startIndex + 1;
+      const nameMatch = token.slice(cursor).match(/^([_a-zA-Z][-_a-zA-Z0-9]*)/);
+      if (!nameMatch) {
+        return void 0;
+      }
+      const pseudoName = nameMatch[1].toLowerCase();
+      cursor += nameMatch[0].length;
+      if (token[cursor] !== "(") {
+        return { value: pseudoName, nextIndex: cursor };
+      }
+      const argumentStart = cursor + 1;
+      let attributeDepth = 0;
+      let parenthesisDepth = 1;
+      let quoted;
+      cursor += 1;
+      while (cursor < token.length) {
+        const char = token[cursor];
+        if (quoted) {
+          if (char === quoted && token[cursor - 1] !== "\\") {
+            quoted = void 0;
+          }
+          cursor += 1;
+          continue;
+        }
+        if (char === '"' || char === "'") {
+          quoted = char;
+          cursor += 1;
+          continue;
+        }
+        if (char === "[") {
+          attributeDepth += 1;
+          cursor += 1;
+          continue;
+        }
+        if (char === "]" && attributeDepth > 0) {
+          attributeDepth -= 1;
+          cursor += 1;
+          continue;
+        }
+        if (attributeDepth === 0 && char === "(") {
+          parenthesisDepth += 1;
+          cursor += 1;
+          continue;
+        }
+        if (attributeDepth === 0 && char === ")") {
+          parenthesisDepth -= 1;
+          if (parenthesisDepth === 0) {
+            const pseudoArgument = token.slice(argumentStart, cursor).trim();
+            return {
+              value: pseudoArgument.length > 0 ? `${pseudoName}(${pseudoArgument})` : `${pseudoName}()`,
+              nextIndex: cursor + 1
+            };
+          }
+          cursor += 1;
+          continue;
+        }
+        cursor += 1;
+      }
+      return void 0;
+    }
+    matchesSupportsDeclaration(property, value) {
+      const normalizedProperty = property.trim().toLowerCase();
+      const normalizedValue = value.trim().toLowerCase();
+      const supportedProperties = /* @__PURE__ */ new Set([
+        "align-items",
+        "background",
+        "background-color",
+        "backdrop-filter",
+        "border",
+        "border-radius",
+        "box-shadow",
+        "color",
+        "column-gap",
+        "container-name",
+        "container-type",
+        "display",
+        "flex",
+        "flex-direction",
+        "flex-grow",
+        "flex-wrap",
+        "font-family",
+        "font-size",
+        "font-weight",
+        "gap",
+        "grid-template-columns",
+        "height",
+        "justify-content",
+        "letter-spacing",
+        "line-height",
+        "margin",
+        "margin-bottom",
+        "margin-left",
+        "margin-right",
+        "margin-top",
+        "max-height",
+        "max-width",
+        "min-height",
+        "min-width",
+        "padding",
+        "padding-bottom",
+        "padding-end",
+        "padding-horizontal",
+        "padding-left",
+        "padding-right",
+        "padding-start",
+        "padding-top",
+        "padding-vertical",
+        "row-gap",
+        "text-align",
+        "text-decoration",
+        "text-transform",
+        "width"
+      ]);
+      if (!supportedProperties.has(normalizedProperty)) {
+        return false;
+      }
+      if (normalizedProperty === "display") {
+        return (/* @__PURE__ */ new Set(["block", "flex", "grid", "inline", "inline-block", "inline-flex", "inline-grid"])).has(normalizedValue);
+      }
+      if (normalizedProperty === "backdrop-filter") {
+        return /blur\(/.test(normalizedValue);
+      }
+      if (normalizedProperty === "container-type") {
+        return (/* @__PURE__ */ new Set(["inline-size", "size"])).has(normalizedValue);
+      }
+      return true;
+    }
+    matchesSupportsCondition(condition) {
+      const normalized = condition.trim().replace(/^\(+|\)+$/g, "").trim();
+      if (!normalized) {
+        return true;
+      }
+      if (normalized.toLowerCase().startsWith("not ")) {
+        return !this.matchesSupportsCondition(normalized.slice(4));
+      }
+      const orClauses = this.splitConditionalClauses(normalized, "or");
+      if (orClauses.length > 1) {
+        return orClauses.some((clause) => this.matchesSupportsCondition(clause));
+      }
+      const andClauses = this.splitConditionalClauses(normalized, "and");
+      if (andClauses.length > 1) {
+        return andClauses.every((clause) => this.matchesSupportsCondition(clause));
+      }
+      const declarationMatch = normalized.match(/^([a-z-]+)\s*:\s*(.+)$/i);
+      if (!declarationMatch) {
+        return false;
+      }
+      return this.matchesSupportsDeclaration(declarationMatch[1], declarationMatch[2]);
+    }
+    findMatchingContainerTarget(ancestors, name) {
+      const normalizedName = typeof name === "string" && name.trim() ? name.trim().toLowerCase() : void 0;
+      for (let index = ancestors.length - 1; index >= 0; index--) {
+        const ancestor = ancestors[index];
+        if (!ancestor?.isContainer || ancestor.containerWidth === void 0) {
+          continue;
+        }
+        if (!normalizedName) {
+          return ancestor;
+        }
+        if ((ancestor.containerNames ?? []).includes(normalizedName)) {
+          return ancestor;
+        }
+      }
+      return void 0;
+    }
+    matchesContainerCondition(condition, containerWidth) {
+      const normalized = condition.trim().replace(/^\(+|\)+$/g, "").trim().toLowerCase();
+      if (!normalized) {
+        return true;
+      }
+      if (normalized.startsWith("not ")) {
+        return !this.matchesContainerCondition(normalized.slice(4), containerWidth);
+      }
+      const orClauses = this.splitConditionalClauses(normalized, "or");
+      if (orClauses.length > 1) {
+        return orClauses.some((clause) => this.matchesContainerCondition(clause, containerWidth));
+      }
+      const andClauses = this.splitConditionalClauses(normalized, "and");
+      if (andClauses.length > 1) {
+        return andClauses.every((clause) => this.matchesContainerCondition(clause, containerWidth));
+      }
+      if (normalized.startsWith("min-width:")) {
+        const minWidth = this.parseMediaLength(normalized.slice("min-width:".length));
+        return minWidth !== void 0 && containerWidth >= minWidth;
+      }
+      if (normalized.startsWith("max-width:")) {
+        const maxWidth = this.parseMediaLength(normalized.slice("max-width:".length));
+        return maxWidth !== void 0 && containerWidth <= maxWidth;
+      }
+      return false;
+    }
+    parseSimpleSelectorToken(token) {
+      const trimmed = token.trim();
+      if (!trimmed || /[*&]/.test(trimmed)) {
+        return void 0;
+      }
+      let cursor = 0;
+      let tagName;
+      let idName;
+      const classNames = [];
+      const attributes = [];
+      const pseudoClasses = [];
+      const tagMatch = trimmed.slice(cursor).match(/^([_a-zA-Z][-_a-zA-Z0-9]*)/);
+      if (tagMatch) {
+        tagName = tagMatch[1].toLowerCase();
+        cursor += tagMatch[0].length;
+      }
+      while (cursor < trimmed.length) {
+        const char = trimmed[cursor];
+        if (char === ".") {
+          const classMatch = trimmed.slice(cursor).match(/^\.([_a-zA-Z][-_a-zA-Z0-9]*)/);
+          if (!classMatch) {
+            return void 0;
+          }
+          classNames.push(classMatch[1]);
+          cursor += classMatch[0].length;
+          continue;
+        }
+        if (char === "#") {
+          const idMatch = trimmed.slice(cursor).match(/^#([_a-zA-Z][-_a-zA-Z0-9]*)/);
+          if (!idMatch || idName) {
+            return void 0;
+          }
+          idName = idMatch[1];
+          cursor += idMatch[0].length;
+          continue;
+        }
+        if (char === "[") {
+          const endIndex = trimmed.indexOf("]", cursor + 1);
+          if (endIndex === -1) {
+            return void 0;
+          }
+          const rawAttribute = trimmed.slice(cursor + 1, endIndex).trim();
+          const attrMatch = rawAttribute.match(/^([_a-zA-Z][-_a-zA-Z0-9]*)(?:\s*(=|~=|\^=|\$=|\*=)\s*(?:"([^"]*)"|'([^']*)'|([^\s"']+)))?$/);
+          if (!attrMatch) {
+            return void 0;
+          }
+          attributes.push({
+            name: attrMatch[1].toLowerCase(),
+            operator: attrMatch[2],
+            value: attrMatch[3] ?? attrMatch[4] ?? attrMatch[5]
+          });
+          cursor = endIndex + 1;
+          continue;
+        }
+        if (char === ":") {
+          const pseudoToken = this.parsePseudoSelectorToken(trimmed, cursor);
+          if (!pseudoToken) {
+            return void 0;
+          }
+          pseudoClasses.push(pseudoToken.value);
+          cursor = pseudoToken.nextIndex;
+          continue;
+        }
+        return void 0;
+      }
+      if (!tagName && !idName && classNames.length === 0 && attributes.length === 0 && pseudoClasses.length === 0) {
+        return void 0;
+      }
+      return { tagName, idName, classNames, attributes, pseudoClasses };
+    }
+    extractSupportedSelectorChains(selector) {
+      const cached = this.parsedSelectorChainCache.get(selector);
+      if (cached) {
+        return cached;
+      }
+      const parsedChains = this.splitSelectorList(selector).map((segment) => segment.trim()).map((segment) => {
+        const chain = [];
+        let token = "";
+        let combinator = "descendant";
+        let invalid = false;
+        let attributeDepth = 0;
+        let parenthesisDepth = 0;
+        let quoted;
+        const flushToken = () => {
+          const trimmedToken = token.trim();
+          token = "";
+          if (!trimmedToken || invalid) {
+            return;
+          }
+          const parsed = this.parseSimpleSelectorToken(trimmedToken);
+          if (!parsed) {
+            invalid = true;
+            return;
+          }
+          if (chain.length > 0) {
+            parsed.combinator = combinator;
+          }
+          chain.push(parsed);
+          combinator = "descendant";
+        };
+        for (let index = 0; index < segment.length; index++) {
+          const char = segment[index];
+          if (quoted) {
+            token += char;
+            if (char === quoted && segment[index - 1] !== "\\") {
+              quoted = void 0;
+            }
+            continue;
+          }
+          if (char === '"' || char === "'") {
+            quoted = char;
+            token += char;
+            continue;
+          }
+          if (char === "[") {
+            attributeDepth += 1;
+            token += char;
+            continue;
+          }
+          if (char === "]") {
+            if (attributeDepth > 0) {
+              attributeDepth -= 1;
+            }
+            token += char;
+            continue;
+          }
+          if (attributeDepth === 0 && char === "(") {
+            parenthesisDepth += 1;
+            token += char;
+            continue;
+          }
+          if (attributeDepth === 0 && char === ")" && parenthesisDepth > 0) {
+            parenthesisDepth -= 1;
+            token += char;
+            continue;
+          }
+          if (attributeDepth === 0 && parenthesisDepth === 0 && (char === ">" || char === "+" || char === "~")) {
+            flushToken();
+            if (invalid) break;
+            combinator = char === ">" ? "child" : char === "+" ? "adjacent-sibling" : "general-sibling";
+            continue;
+          }
+          if (attributeDepth === 0 && parenthesisDepth === 0 && /\s/.test(char)) {
+            flushToken();
+            if (invalid) break;
+            continue;
+          }
+          token += char;
+        }
+        flushToken();
+        if (invalid || chain.length === 0) {
+          return void 0;
+        }
+        return chain.some((part) => Boolean(part.tagName) || Boolean(part.idName) || part.classNames.length > 0 || part.attributes.length > 0 || part.pseudoClasses.length > 0) ? chain : void 0;
+      }).filter((segment) => Array.isArray(segment) && segment.length > 0);
+      this.parsedSelectorChainCache.set(selector, parsedChains);
+      return parsedChains;
+    }
+    matchesAttributeSelector(targetValue, selector) {
+      if (selector.operator === void 0) {
+        return targetValue !== void 0;
+      }
+      if (targetValue === void 0 || selector.value === void 0) {
+        return false;
+      }
+      switch (selector.operator) {
+        case "=":
+          return targetValue === selector.value;
+        case "~=":
+          return targetValue.split(/\s+/).includes(selector.value);
+        case "^=":
+          return targetValue.startsWith(selector.value);
+        case "$=":
+          return targetValue.endsWith(selector.value);
+        case "*=":
+          return targetValue.includes(selector.value);
+        default:
+          return false;
+      }
+    }
+    matchesSelectorPart(target, selector) {
+      if (selector.tagName && target.tagName !== selector.tagName) {
+        return false;
+      }
+      const attributes = target.attributes;
+      if (selector.idName && attributes?.id !== selector.idName) {
+        return false;
+      }
+      const classSet = new Set(target.classNames ?? []);
+      if (!selector.classNames.every((className) => classSet.has(className))) {
+        return false;
+      }
+      if (!selector.attributes.every((attribute) => this.matchesAttributeSelector(attributes?.[attribute.name], attribute))) {
+        return false;
+      }
+      return selector.pseudoClasses.every((pseudoClass) => this.matchesPseudoClass(target, pseudoClass));
+    }
+    matchesPseudoClass(target, pseudoClass) {
+      const rawPseudoClass = pseudoClass.trim();
+      const normalized = rawPseudoClass.toLowerCase();
+      const pseudoStates = new Set((target.pseudoStates ?? []).map((state) => state.trim().toLowerCase()));
+      if (pseudoStates.has(normalized)) {
+        return true;
+      }
+      const functionalMatch = rawPseudoClass.match(/^([_a-zA-Z][-_a-zA-Z0-9]*)(?:\((.*)\))?$/);
+      const pseudoName = functionalMatch?.[1] ?? normalized;
+      const pseudoArgument = functionalMatch?.[2]?.trim();
+      const attributes = target.attributes;
+      switch (pseudoName) {
+        case "scope":
+          return target.isScopeReference === true;
+        case "checked":
+          return attributes?.checked !== void 0 && attributes.checked !== "false";
+        case "disabled":
+          return attributes?.disabled !== void 0 && attributes.disabled !== "false";
+        case "selected":
+          return attributes?.selected !== void 0 && attributes.selected !== "false" || attributes?.["aria-current"] !== void 0;
+        case "first-child":
+          return target.childIndex === 1;
+        case "last-child":
+          return target.childIndex !== void 0 && target.siblingCount !== void 0 && target.childIndex === target.siblingCount;
+        case "only-child":
+          return target.childIndex !== void 0 && target.siblingCount !== void 0 && target.siblingCount === 1;
+        case "first-of-type":
+          return target.sameTypeIndex === 1;
+        case "last-of-type":
+          return target.sameTypeIndex !== void 0 && target.sameTypeCount !== void 0 && target.sameTypeIndex === target.sameTypeCount;
+        case "only-of-type":
+          return target.sameTypeIndex !== void 0 && target.sameTypeCount !== void 0 && target.sameTypeCount === 1;
+        case "nth-child":
+          return target.childIndex !== void 0 && typeof pseudoArgument === "string" && this.matchesNthChildExpression(pseudoArgument, target.childIndex);
+        case "nth-last-child":
+          return target.childIndex !== void 0 && target.siblingCount !== void 0 && typeof pseudoArgument === "string" && this.matchesNthChildExpression(pseudoArgument, target.siblingCount - target.childIndex + 1);
+        case "nth-of-type":
+          return target.sameTypeIndex !== void 0 && typeof pseudoArgument === "string" && this.matchesNthChildExpression(pseudoArgument, target.sameTypeIndex);
+        case "nth-last-of-type":
+          return target.sameTypeIndex !== void 0 && target.sameTypeCount !== void 0 && typeof pseudoArgument === "string" && this.matchesNthChildExpression(pseudoArgument, target.sameTypeCount - target.sameTypeIndex + 1);
+        case "has":
+          return typeof pseudoArgument === "string" && this.matchesHasPseudoClass(target, pseudoArgument);
+        case "not": {
+          if (!pseudoArgument) {
+            return false;
+          }
+          const selectorArguments = this.splitSelectorList(pseudoArgument);
+          if (selectorArguments.length === 0) {
+            return false;
+          }
+          const parsedSelectors = [];
+          for (const selectorArgument of selectorArguments) {
+            const parsedSelector = this.parseSimpleSelectorToken(selectorArgument);
+            if (!parsedSelector) {
+              return false;
+            }
+            parsedSelectors.push(parsedSelector);
+          }
+          return parsedSelectors.every((selectorPart) => !this.matchesSelectorPart(target, selectorPart));
+        }
+        default:
+          return false;
+      }
+    }
+    matchesNthChildExpression(expression, childIndex) {
+      const normalized = expression.trim().toLowerCase().replace(/\s+/g, "");
+      if (!normalized) {
+        return false;
+      }
+      if (normalized === "odd") {
+        return childIndex % 2 === 1;
+      }
+      if (normalized === "even") {
+        return childIndex % 2 === 0;
+      }
+      if (/^[+-]?\d+$/.test(normalized)) {
+        return childIndex === Number(normalized);
+      }
+      const patternMatch = normalized.match(/^([+-]?\d*)n(?:([+-]?\d+))?$/);
+      if (!patternMatch) {
+        return false;
+      }
+      const coefficientToken = patternMatch[1];
+      const offsetToken = patternMatch[2];
+      const coefficient = coefficientToken === "" || coefficientToken === "+" ? 1 : coefficientToken === "-" ? -1 : Number(coefficientToken);
+      const offset = offsetToken !== void 0 ? Number(offsetToken) : 0;
+      if (!Number.isFinite(coefficient) || !Number.isFinite(offset)) {
+        return false;
+      }
+      if (coefficient === 0) {
+        return childIndex === offset;
+      }
+      const delta = childIndex - offset;
+      const step = Math.abs(coefficient);
+      if (delta % step !== 0) {
+        return false;
+      }
+      const n = delta / coefficient;
+      return Number.isInteger(n) && n >= 0;
+    }
+    matchesHasPseudoClass(target, pseudoArgument) {
+      const selectorArguments = this.splitSelectorList(pseudoArgument);
+      if (selectorArguments.length === 0) {
+        return false;
+      }
+      return selectorArguments.some((selectorArgument) => this.matchesRelativeHasSelector(target, selectorArgument));
+    }
+    matchesRelativeHasSelector(target, selectorArgument) {
+      const trimmedSelector = selectorArgument.trim();
+      if (!trimmedSelector) {
+        return false;
+      }
+      const scopeRelativeSelector = this.toHasScopeRelativeSelector(trimmedSelector);
+      if (!scopeRelativeSelector) {
+        return false;
+      }
+      const selectorChains = this.extractSupportedSelectorChains(scopeRelativeSelector);
+      if (selectorChains.length === 0) {
+        return false;
+      }
+      const scopeTarget = this.normalizeTarget({ ...target, isScopeReference: true });
+      if (trimmedSelector.startsWith("+") || trimmedSelector.startsWith("~")) {
+        const scopedSiblings = this.buildScopedFollowingSiblingTargets(scopeTarget, target.nextSiblings ?? []);
+        return selectorChains.some(
+          (selectorChain) => scopedSiblings.some((sibling) => this.matchesSelectorChainInSubtree(sibling, [], selectorChain))
+        );
+      }
+      return selectorChains.some(
+        (selectorChain) => (target.children ?? []).some((child) => this.matchesSelectorChainInSubtree(child, [scopeTarget], selectorChain))
+      );
+    }
+    toHasScopeRelativeSelector(selectorArgument) {
+      const trimmedSelector = selectorArgument.trim();
+      if (!trimmedSelector) {
+        return void 0;
+      }
+      return trimmedSelector.startsWith(">") || trimmedSelector.startsWith("+") || trimmedSelector.startsWith("~") ? `:scope${trimmedSelector}` : `:scope ${trimmedSelector}`;
+    }
+    buildScopedFollowingSiblingTargets(scopeTarget, nextSiblings) {
+      const scopedSiblings = [];
+      for (const sibling of nextSiblings) {
+        const scopedSibling = this.normalizeTarget({
+          ...sibling,
+          previousSiblings: [scopeTarget, ...scopedSiblings]
+        });
+        scopedSiblings.push(scopedSibling);
+      }
+      return scopedSiblings;
+    }
+    matchesSelectorChainInSubtree(target, ancestors, chain) {
+      if (this.matchesSelectorChain(target, ancestors, chain)) {
+        return true;
+      }
+      const nextAncestors = [...ancestors, target];
+      return (target.children ?? []).some((child) => this.matchesSelectorChainInSubtree(child, nextAncestors, chain));
+    }
+    matchesSelectorChain(target, ancestors, chain) {
+      const initialCursor = {
+        target,
+        ancestorIndex: ancestors.length - 1,
+        previousSiblings: Array.isArray(target.previousSiblings) ? target.previousSiblings : []
+      };
+      return this.matchesSelectorChainFromCursor(chain, chain.length - 1, ancestors, initialCursor);
+    }
+    getAncestorCursor(ancestors, ancestorIndex) {
+      if (ancestorIndex < 0 || ancestorIndex >= ancestors.length) {
+        return void 0;
+      }
+      const ancestor = ancestors[ancestorIndex];
+      return {
+        target: ancestor,
+        ancestorIndex: ancestorIndex - 1,
+        previousSiblings: Array.isArray(ancestor.previousSiblings) ? ancestor.previousSiblings : []
+      };
+    }
+    matchesSelectorChainFromCursor(chain, chainIndex, ancestors, cursor) {
+      if (!this.matchesSelectorPart(cursor.target, chain[chainIndex])) {
+        return false;
+      }
+      if (chainIndex === 0) {
+        return true;
+      }
+      const combinator = chain[chainIndex].combinator ?? "descendant";
+      switch (combinator) {
+        case "child": {
+          const parentCursor = this.getAncestorCursor(ancestors, cursor.ancestorIndex);
+          return parentCursor ? this.matchesSelectorChainFromCursor(chain, chainIndex - 1, ancestors, parentCursor) : false;
+        }
+        case "adjacent-sibling": {
+          const siblingIndex = cursor.previousSiblings.length - 1;
+          if (siblingIndex < 0) {
+            return false;
+          }
+          return this.matchesSelectorChainFromCursor(chain, chainIndex - 1, ancestors, {
+            target: cursor.previousSiblings[siblingIndex],
+            ancestorIndex: cursor.ancestorIndex,
+            previousSiblings: cursor.previousSiblings.slice(0, siblingIndex)
+          });
+        }
+        case "general-sibling": {
+          for (let siblingIndex = cursor.previousSiblings.length - 1; siblingIndex >= 0; siblingIndex--) {
+            if (this.matchesSelectorChainFromCursor(chain, chainIndex - 1, ancestors, {
+              target: cursor.previousSiblings[siblingIndex],
+              ancestorIndex: cursor.ancestorIndex,
+              previousSiblings: cursor.previousSiblings.slice(0, siblingIndex)
+            })) {
+              return true;
+            }
+          }
+          return false;
+        }
+        case "descendant":
+        default: {
+          for (let ancestorIndex = cursor.ancestorIndex; ancestorIndex >= 0; ancestorIndex--) {
+            const ancestorCursor = this.getAncestorCursor(ancestors, ancestorIndex);
+            if (ancestorCursor && this.matchesSelectorChainFromCursor(chain, chainIndex - 1, ancestors, ancestorCursor)) {
+              return true;
+            }
+          }
+          return false;
+        }
+      }
+    }
+    parseMediaLength(value) {
+      const match = value.trim().match(/^(-?\d+(?:\.\d+)?)(px|rem|em)?$/i);
+      if (!match) {
+        return void 0;
+      }
+      const numericValue = Number(match[1]);
+      const unit = (match[2] ?? "px").toLowerCase();
+      if (unit === "rem" || unit === "em") {
+        return numericValue * 16;
+      }
+      return numericValue;
+    }
+    matchesMediaCondition(condition, options) {
+      const normalized = condition.trim().replace(/^\(+|\)+$/g, "").trim().toLowerCase();
+      if (!normalized) {
+        return true;
+      }
+      if (normalized.startsWith("min-width:")) {
+        const minWidth = this.parseMediaLength(normalized.slice("min-width:".length));
+        return minWidth !== void 0 && options.viewportWidth !== void 0 && options.viewportWidth >= minWidth;
+      }
+      if (normalized.startsWith("max-width:")) {
+        const maxWidth = this.parseMediaLength(normalized.slice("max-width:".length));
+        return maxWidth !== void 0 && options.viewportWidth !== void 0 && options.viewportWidth <= maxWidth;
+      }
+      if (normalized === "prefers-color-scheme: dark") {
+        return options.colorScheme === "dark";
+      }
+      if (normalized === "prefers-color-scheme: light") {
+        return (options.colorScheme ?? "light") === "light";
+      }
+      if (normalized === "prefers-reduced-motion: reduce") {
+        return options.reducedMotion === true;
+      }
+      return false;
+    }
+    matchesMediaRule(rule, options) {
+      const mediaType = options.mediaType ?? "screen";
+      if (rule.type && rule.type !== mediaType && rule.type !== "all") {
+        return false;
+      }
+      if (!rule.condition.trim()) {
+        return true;
+      }
+      return rule.condition.split(/\band\b/i).map((part) => part.trim()).filter(Boolean).every((part) => this.matchesMediaCondition(part, options));
+    }
+    getOrderedLayerNames() {
+      const orderedLayerNames = [];
+      for (const layerName of this._layerOrder) {
+        const normalizedName = layerName.trim();
+        if (normalizedName && !orderedLayerNames.includes(normalizedName)) {
+          orderedLayerNames.push(normalizedName);
+        }
+      }
+      for (const layerRule of this.layerRules) {
+        const normalizedName = layerRule.name.trim();
+        if (normalizedName && !orderedLayerNames.includes(normalizedName)) {
+          orderedLayerNames.push(normalizedName);
+        }
+      }
+      return orderedLayerNames;
+    }
+    resolveNativeStyles(target, ancestors = [], options = {}) {
+      return this.withNativeTargetNormalizationCache(() => {
+        const normalizedTarget = this.normalizeTarget(target);
+        if (!normalizedTarget.tagName && (!normalizedTarget.classNames || normalizedTarget.classNames.length === 0)) {
+          return {};
+        }
+        const normalizedAncestors = ancestors.map((ancestor) => this.normalizeTarget(ancestor));
+        const variables = this.getVariables();
+        const resolved = {};
+        const applyRules = (rules) => {
+          for (const rule of rules) {
+            const selectorChains = this.extractSupportedSelectorChains(rule.selector);
+            if (selectorChains.length === 0) {
+              continue;
+            }
+            const matches = selectorChains.some((selectorChain) => this.matchesSelectorChain(normalizedTarget, normalizedAncestors, selectorChain));
+            if (!matches) {
+              continue;
+            }
+            for (const [property, value] of Object.entries(rule.styles)) {
+              resolved[property] = typeof value === "string" ? this.resolveVariableReferences(value, variables) : value;
+            }
+          }
+        };
+        for (const layerName of this.getOrderedLayerNames()) {
+          for (const layerRule of this.layerRules) {
+            if (layerRule.name.trim() === layerName) {
+              applyRules(layerRule.rules);
+            }
+          }
+        }
+        applyRules(this.rules);
+        for (const supportsRule of this.supportsRules) {
+          if (this.matchesSupportsCondition(supportsRule.condition)) {
+            applyRules(supportsRule.rules);
+          }
+        }
+        for (const containerRule of this.containerRules) {
+          const matchingContainer = this.findMatchingContainerTarget(normalizedAncestors, containerRule.name);
+          if (matchingContainer && this.matchesContainerCondition(containerRule.condition, matchingContainer.containerWidth)) {
+            applyRules(containerRule.rules);
+          }
+        }
+        for (const mediaRule of this.mediaRules) {
+          if (this.matchesMediaRule(mediaRule, options)) {
+            applyRules(mediaRule.rules);
+          }
+        }
+        return resolved;
+      });
+    }
+    resolveClassStyles(classNames) {
+      return this.resolveNativeStyles({ classNames });
+    }
+    // Utility Methods
+    toKebabCase(str) {
+      return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+    }
+    // Helper: Create and add rule (eliminates duplication in combinator selectors)
+    createAndAddRule(selector, styles2, type = "custom") {
+      const rule = { selector, styles: styles2, type };
+      this.rules.push(rule);
+      return rule;
+    }
+    // Helper: Convert rules object to CSSRule array (eliminates duplication in media/container/supports/layer)
+    rulesToCSSRules(rules) {
+      return Object.entries(rules).map(([selector, styles2]) => ({
+        selector,
+        styles: styles2,
+        type: "custom"
+      }));
+    }
+    // Helper: Render rules with indentation (eliminates duplication in render methods)
+    renderRulesWithIndent(rules, indent = "    ") {
+      return rules.map((rule) => this.renderRule(rule, indent)).join("\n");
+    }
+    stylesToString(styles2, indent = "    ") {
+      return Object.entries(styles2).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})`;
+      return `@media ${condition} {
+${this.renderRulesWithIndent(media.rules)}
+}`;
+    }
+    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(container2) {
+      const nameStr = container2.name ? `${container2.name} ` : "";
+      return `@container ${nameStr}(${container2.condition}) {
+${this.renderRulesWithIndent(container2.rules)}
+}`;
+    }
+    renderSupportsRule(supports) {
+      return `@supports (${supports.condition}) {
+${this.renderRulesWithIndent(supports.rules)}
+}`;
+    }
+    renderLayerRule(layer2) {
+      return `@layer ${layer2.name} {
+${this.renderRulesWithIndent(layer2.rules)}
+}`;
+    }
+    // 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 layer2 of allLayerRules) {
+        parts.push(this.renderLayerRule(layer2));
+      }
+      for (const rule of allRules) {
+        parts.push(this.renderRule(rule));
+      }
+      for (const supports of allSupportsRules) {
+        parts.push(this.renderSupportsRule(supports));
+      }
+      for (const container2 of allContainerRules) {
+        parts.push(this.renderContainerRule(container2));
+      }
+      for (const media of allMediaRules) {
+        parts.push(this.renderMediaRule(media));
+      }
+      return parts.join("\n\n");
+    }
+    inject(styleId) {
+      const css = this.render();
+      const style = document.createElement("style");
+      if (styleId) style.id = styleId;
+      style.textContent = css;
+      document.head.appendChild(style);
+      return style;
+    }
+    clear() {
+      this.variables.length = 0;
+      this.rules.length = 0;
+      this.mediaRules.length = 0;
+      this.keyframes.length = 0;
+      this.fontFaces.length = 0;
+      this.imports.length = 0;
+      this.containerRules.length = 0;
+      this.supportsRules.length = 0;
+      this.layerRules.length = 0;
+      this._layerOrder.length = 0;
+    }
+  };
+  var styles = new CreateStyle(getSharedStyleStore());
+  var {
+    addVar,
+    var: getVar,
+    addTag,
+    addClass,
+    addId,
+    addPseudoClass,
+    addPseudoElement,
+    addAttribute,
+    attrEquals,
+    attrContainsWord,
+    attrStartsWith,
+    attrEndsWith,
+    attrContains,
+    descendant,
+    child: childStyle,
+    adjacentSibling,
+    generalSibling,
+    multiple: multipleStyle,
+    addName,
+    nesting,
+    keyframe,
+    keyframeFromTo,
+    fontFace,
+    import: importStyle,
+    media: mediaStyle,
+    mediaScreen,
+    mediaPrint,
+    mediaMinWidth,
+    mediaMaxWidth,
+    mediaDark,
+    mediaLight,
+    mediaReducedMotion,
+    container,
+    addContainer,
+    supports: supportsStyle,
+    layerOrder,
+    layer,
+    add: addStyle,
+    important,
+    getVariables: getStyleVariables,
+    resolveClassStyles,
+    render: renderStyle,
+    inject: injectStyle,
+    clear: clearStyle
+  } = styles;
+
+  // src/desktop-auto-render.ts
+  var DESKTOP_RENDER_TRACKED_KEY = "__ELIT_DESKTOP_RENDER_TRACKED__";
+  var DESKTOP_WINDOW_CREATED_KEY = "__ELIT_DESKTOP_WINDOW_CREATED__";
+  var DESKTOP_MESSAGE_HANDLER_KEY = "__ELIT_DESKTOP_MESSAGE_HANDLER__";
+  function getDesktopAutoRenderGlobals() {
+    return globalThis;
+  }
+  function escapeHtml(text) {
+    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
+  }
+  function escapeStyleText(css) {
+    return css.replace(/<\/style/gi, "<\\/style");
+  }
+  function buildDesktopAutoHtml(options) {
+    const styleTag = options.css ? `  <style>${escapeStyleText(options.css)}</style>` : "";
+    return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>${escapeHtml(options.title)}</title>
+${styleTag}
+</head>
+<body>
+  ${options.markup}
+  <script>
+    window.addEventListener('DOMContentLoaded', () => {
+      document.querySelectorAll('[data-desktop-message], [data-elit-action], [data-elit-route]').forEach((element) => {
+        element.addEventListener('click', (event) => {
+          const action = element.getAttribute('data-elit-action');
+          const route = element.getAttribute('data-elit-route');
+          const payload = element.getAttribute('data-elit-payload');
+          const desktopMessage = element.getAttribute('data-desktop-message');
+
+          if (action || route || payload || desktopMessage) {
+            event.preventDefault();
+          }
+
+          if (action || route || payload) {
+            window.ipc?.postMessage(JSON.stringify({ type: 'bridge', action, route, payload }));
+            return;
+          }
+
+          if (desktopMessage) {
+            window.ipc?.postMessage(desktopMessage);
+          }
+        });
+      });
+
+      window.ipc?.postMessage('desktop:ready');
+    });
+  </script>
+</body>
+</html>`;
+  }
+  function resolveDesktopBridgePayloadRoute(payload) {
+    if (!payload) {
+      return void 0;
+    }
+    try {
+      const parsed = JSON.parse(payload);
+      if (typeof parsed === "string" && parsed.trim()) {
+        return parsed.trim();
+      }
+      if (parsed && typeof parsed === "object" && "route" in parsed && typeof parsed.route === "string" && parsed.route.trim()) {
+        return parsed.route.trim();
+      }
+    } catch {
+    }
+    return void 0;
+  }
+  function installDesktopRenderTracking() {
+    const globalScope = getDesktopAutoRenderGlobals();
+    globalScope[DESKTOP_WINDOW_CREATED_KEY] = false;
+    if (globalScope[DESKTOP_RENDER_TRACKED_KEY] || typeof globalScope.createWindow !== "function") {
+      return;
+    }
+    const originalCreateWindow = globalScope.createWindow.bind(globalScope);
+    globalScope.createWindow = (options) => {
+      globalScope[DESKTOP_WINDOW_CREATED_KEY] = true;
+      return originalCreateWindow(options);
+    };
+    globalScope[DESKTOP_RENDER_TRACKED_KEY] = true;
+  }
+  function installDesktopMessageHandler(options) {
+    const globalScope = getDesktopAutoRenderGlobals();
+    let routeHistory = [];
+    let routeIndex = -1;
+    const applyResolvedTitle = (suffix) => {
+      if (suffix) {
+        globalScope.windowSetTitle?.(`${options.title} - ${suffix}`);
+        return;
+      }
+      const activeRoute = routeIndex >= 0 ? routeHistory[routeIndex] : void 0;
+      globalScope.windowSetTitle?.(activeRoute ? `${options.title} - ${activeRoute}` : options.title);
+    };
+    const navigateToRoute = (route) => {
+      const normalizedRoute = route.trim();
+      if (!normalizedRoute) {
+        return;
+      }
+      if (routeIndex < routeHistory.length - 1) {
+        routeHistory = routeHistory.slice(0, routeIndex + 1);
+      }
+      routeHistory.push(normalizedRoute);
+      routeIndex = routeHistory.length - 1;
+      applyResolvedTitle();
+    };
+    const navigateBack = () => {
+      if (routeIndex > 0) {
+        routeIndex -= 1;
+      } else {
+        routeIndex = -1;
+      }
+      applyResolvedTitle();
+    };
+    const navigateForward = () => {
+      if (routeIndex + 1 >= routeHistory.length) {
+        return;
+      }
+      routeIndex += 1;
+      applyResolvedTitle();
+    };
+    const clearRoute = () => {
+      routeIndex = -1;
+      applyResolvedTitle();
+    };
+    if (globalScope[DESKTOP_MESSAGE_HANDLER_KEY] || typeof globalScope.onMessage !== "function") {
+      return;
+    }
+    globalScope.onMessage((message) => {
+      try {
+        const bridgeMessage = JSON.parse(message);
+        if (bridgeMessage.type === "bridge") {
+          if (bridgeMessage.action === "desktop:ping") {
+            applyResolvedTitle("IPC OK");
+            return;
+          }
+          if (bridgeMessage.action === "desktop:quit") {
+            globalScope.windowQuit?.();
+            return;
+          }
+          if (bridgeMessage.action === "desktop:back") {
+            navigateBack();
+            return;
+          }
+          if (bridgeMessage.action === "desktop:forward") {
+            navigateForward();
+            return;
+          }
+          if (bridgeMessage.action === "desktop:clear-route") {
+            clearRoute();
+            return;
+          }
+          const nextRoute = typeof bridgeMessage.route === "string" && bridgeMessage.route.trim() ? bridgeMessage.route.trim() : bridgeMessage.action === "desktop:navigate" ? resolveDesktopBridgePayloadRoute(bridgeMessage.payload) : void 0;
+          if (nextRoute) {
+            navigateToRoute(nextRoute);
+            return;
+          }
+        }
+      } catch {
+      }
+      if (message === "desktop:ready") {
+        applyResolvedTitle();
+        if (options.autoClose) {
+          globalScope.windowQuit?.();
+        }
+        return;
+      }
+      if (message === "desktop:ping") {
+        applyResolvedTitle("IPC OK");
+        return;
+      }
+      if (message === "desktop:quit") {
+        globalScope.windowQuit?.();
+        return;
+      }
+      if (message === "desktop:back") {
+        navigateBack();
+        return;
+      }
+      if (message === "desktop:forward") {
+        navigateForward();
+        return;
+      }
+      if (message === "desktop:clear-route") {
+        clearRoute();
+      }
+    });
+    globalScope[DESKTOP_MESSAGE_HANDLER_KEY] = true;
+  }
+  function completeDesktopAutoRender(options = {}) {
+    installDesktopRenderTracking();
+    const globalScope = getDesktopAutoRenderGlobals();
+    const capturedRender = getCapturedRenderedVNode();
+    if (!capturedRender || capturedRender.target !== "desktop") {
+      return;
+    }
+    if (globalScope[DESKTOP_WINDOW_CREATED_KEY] || typeof globalScope.createWindow !== "function") {
+      return;
+    }
+    const resolvedOptions = {
+      title: "Elit Desktop",
+      width: 1080,
+      height: 720,
+      center: true,
+      autoClose: false,
+      ...options,
+      ...getDesktopRenderOptions()
+    };
+    installDesktopMessageHandler({
+      title: resolvedOptions.title,
+      autoClose: resolvedOptions.autoClose
+    });
+    globalScope.createWindow({
+      title: resolvedOptions.title,
+      width: resolvedOptions.width,
+      height: resolvedOptions.height,
+      center: resolvedOptions.center,
+      icon: resolvedOptions.icon,
+      html: buildDesktopAutoHtml({
+        css: styles.render(),
+        markup: renderToString(capturedRender.vNode),
+        title: resolvedOptions.title
+      })
+    });
+    clearCapturedRenderedVNode();
+  }
+})();