elit 3.6.6 → 3.6.7

package/dist/desktop-auto-render.mjs

@@ -1,13 +1,17 @@
 import {createRequire as __createRequire} from 'module';const require = __createRequire(import.meta.url);
 
-// src/render-context.ts
+// src/desktop/render-context/constants.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";
+
+// src/desktop/render-context/globals.ts
 function getGlobalRenderScope() {
   return globalThis;
 }
+
+// src/desktop/render-context/runtime-target.ts
 function isRenderRuntimeTarget(value) {
   return value === "web" || value === "desktop" || value === "mobile" || value === "unknown";
 }
@@ -23,7 +27,8 @@ function detectRenderRuntimeTarget() {
   if (typeof globalScope.createWindow === "function") {
     return "desktop";
   }
-  const argv = Array.isArray(globalScope.process?.argv) ? globalScope.process.argv.join(" ") : "";
+  const argvValues = globalScope.process?.argv;
+  const argv = Array.isArray(argvValues) ? argvValues.join(" ") : "";
   if (/\bdesktop\b/i.test(argv)) {
     return "desktop";
   }
@@ -32,6 +37,8 @@ function detectRenderRuntimeTarget() {
   }
   return "unknown";
 }
+
+// src/desktop/render-context/captured-render.ts
 function captureRenderedVNode(rootElement, vNode, target = detectRenderRuntimeTarget()) {
   const globalScope = getGlobalRenderScope();
   globalScope[RUNTIME_TARGET_KEY] = target;
@@ -47,11 +54,13 @@ function getCapturedRenderedVNode() {
 function clearCapturedRenderedVNode() {
   delete getGlobalRenderScope()[CAPTURED_RENDER_KEY];
 }
+
+// src/desktop/render-context/desktop-options.ts
 function getDesktopRenderOptions() {
   return getGlobalRenderScope()[DESKTOP_RENDER_OPTIONS_KEY];
 }
 
-// src/dom.ts
+// src/client/dom/helpers.ts
 function resolveElement(rootElement) {
   return typeof rootElement === "string" ? document.getElementById(rootElement.replace("#", "")) : rootElement;
 }
@@ -79,1030 +88,1248 @@ function resolveTextareaValue(tagName, props) {
 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;
+function isState(value) {
+  return value && typeof value === "object" && "value" in value && "subscribe" in value && typeof value.subscribe === "function";
+}
+
+// src/client/dom/dom-render.ts
+function isSvgElement(tagName, parent) {
+  return tagName === "svg" || tagName[0] === "s" && tagName[1] === "v" && tagName[2] === "g" || parent.namespaceURI === "http://www.w3.org/2000/svg";
+}
+function applyProps(el, props, textareaValue) {
+  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(" ") : String(value);
+      if (el instanceof SVGElement) {
+        el.setAttribute("class", classValue);
       } else {
-        el.setAttribute(key, value === true ? "" : String(value));
+        el.className = classValue;
       }
-    }
-    const renderableChildren = textareaValue === void 0 ? children : [];
-    const len = renderableChildren.length;
-    if (!len) {
-      if (textareaValue !== void 0) {
-        el.value = textareaValue;
+    } else if (c === 115 && key.length === 5) {
+      if (typeof value === "string") {
+        el.style.cssText = value;
+      } else {
+        const style = el.style;
+        for (const styleKey in value) {
+          style[styleKey] = value[styleKey];
+        }
       }
-      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 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(() => {
+        if (typeof value === "function") {
+          value(el);
         } else {
-          this.renderToDOM(child, target);
+          value.current = el;
         }
-      }
-    };
-    if (len > 30) {
-      const fragment = document.createDocumentFragment();
-      renderChildren(fragment);
-      el.appendChild(fragment);
+      }, 0);
+    } else if (textareaValue !== void 0 && key === "value") {
+      continue;
     } else {
-      renderChildren(el);
+      el.setAttribute(key, value === true ? "" : String(value));
     }
-    parent.appendChild(el);
   }
-  render(rootElement, vNode) {
-    if (!hasDocumentApi()) {
-      const runtimeTarget = detectRenderRuntimeTarget();
-      if (runtimeTarget === "desktop" || runtimeTarget === "mobile") {
-        captureRenderedVNode(rootElement, vNode, runtimeTarget);
-        return {};
+}
+function renderChildren(children, target) {
+  const len = children.length;
+  for (let i = 0; i < len; i++) {
+    const child = children[i];
+    if (shouldSkipChild(child)) continue;
+    if (Array.isArray(child)) {
+      for (let j = 0, childLen = child.length; j < childLen; j++) {
+        const nestedChild = child[j];
+        if (!shouldSkipChild(nestedChild)) {
+          renderToDOM(nestedChild, target);
+        }
       }
-      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);
+      renderToDOM(child, target);
     }
-    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;
+}
+function renderToDOM(vNode, parent) {
+  if (vNode == null || vNode === false) return;
+  if (typeof vNode !== "object") {
+    parent.appendChild(document.createTextNode(String(vNode)));
+    return;
   }
-  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;
+  if (isState(vNode)) {
+    const textNode = document.createTextNode(String(vNode.value ?? ""));
+    parent.appendChild(textNode);
+    vNode.subscribe((newValue) => {
+      textNode.textContent = String(newValue ?? "");
+    });
+    return;
   }
-  renderToHead(...vNodes) {
-    const head = document.head;
-    if (head) {
-      for (const vNode of vNodes.flat()) {
-        vNode && this.renderToDOM(vNode, head);
-      }
+  if (Array.isArray(vNode)) {
+    for (const child of vNode) {
+      renderToDOM(child, parent);
     }
-    return head;
+    return;
   }
-  addStyle(cssText) {
-    const el = document.createElement("style");
-    el.textContent = cssText;
-    return document.head.appendChild(el);
+  const { tagName, props, children } = vNode;
+  const textareaValue = resolveTextareaValue(tagName, props);
+  if (!tagName) {
+    renderChildren(children, parent);
+    return;
   }
-  addMeta(attrs) {
-    const el = document.createElement("meta");
-    for (const k in attrs) el.setAttribute(k, attrs[k]);
-    return document.head.appendChild(el);
+  const el = isSvgElement(tagName, parent) ? document.createElementNS("http://www.w3.org/2000/svg", tagName.replace("svg", "").toLowerCase() || tagName) : document.createElement(tagName);
+  applyProps(el, props, textareaValue);
+  const renderableChildren = textareaValue === void 0 ? children : [];
+  if (!renderableChildren.length) {
+    if (textareaValue !== void 0) {
+      el.value = textareaValue;
+    }
+    parent.appendChild(el);
+    return;
   }
-  addLink(attrs) {
-    const el = document.createElement("link");
-    for (const k in attrs) el.setAttribute(k, attrs[k]);
-    return document.head.appendChild(el);
+  if (renderableChildren.length > 30) {
+    const fragment = document.createDocumentFragment();
+    renderChildren(renderableChildren, fragment);
+    el.appendChild(fragment);
+  } else {
+    renderChildren(renderableChildren, el);
   }
-  setTitle(text) {
-    return document.title = text;
+  parent.appendChild(el);
+}
+function 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();
+    renderToDOM(vNode, fragment);
+    el.appendChild(fragment);
+  } else {
+    renderToDOM(vNode, el);
   }
-  // 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);
-        }
+  return el;
+}
+function 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++) {
+        renderToDOM(vNodes[i], fragment);
+      }
+      processed = end;
+      if (processed >= len) {
+        el.appendChild(fragment);
       } else {
-        notify();
+        requestAnimationFrame(processChunk);
       }
     };
-    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);
+    processChunk();
+  } else {
+    const fragment = document.createDocumentFragment();
+    for (let i = 0; i < len; i++) {
+      renderToDOM(vNodes[i], fragment);
+    }
+    el.appendChild(fragment);
+  }
+  return el;
+}
+function renderChunked(rootElement, vNodes, chunkSize = 5e3, onProgress) {
+  const el = ensureElement(resolveElement(rootElement), rootElement);
+  const len = vNodes.length;
+  let index = 0;
+  const renderChunkFrame = () => {
+    const end = Math.min(index + chunkSize, len);
+    const fragment = document.createDocumentFragment();
+    for (let i = index; i < end; i++) {
+      renderToDOM(vNodes[i], fragment);
+    }
+    el.appendChild(fragment);
+    index = end;
+    if (onProgress) {
+      onProgress(index, len);
+    }
+    if (index < len) {
+      requestAnimationFrame(renderChunkFrame);
+    }
+  };
+  requestAnimationFrame(renderChunkFrame);
+  return el;
+}
+function renderToHead(...vNodes) {
+  const head = document.head;
+  if (head) {
+    for (const vNode of vNodes.flat()) {
+      if (vNode) {
+        renderToDOM(vNode, head);
       }
-    };
+    }
   }
-  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;
+  return head;
+}
+function addStyle(cssText) {
+  const el = document.createElement("style");
+  el.textContent = cssText;
+  return document.head.appendChild(el);
+}
+function addMeta(attrs) {
+  const el = document.createElement("meta");
+  for (const key in attrs) {
+    el.setAttribute(key, attrs[key]);
   }
-  effect(stateFn) {
-    stateFn();
+  return document.head.appendChild(el);
+}
+function addLink(attrs) {
+  const el = document.createElement("link");
+  for (const key in attrs) {
+    el.setAttribute(key, attrs[key]);
   }
-  // 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 = "";
-      }
-    };
+  return document.head.appendChild(el);
+}
+function setTitle(text) {
+  return document.title = text;
+}
+function cleanupUnusedElements(root, elementCache) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  const toRemove = [];
+  while (walker.nextNode()) {
+    const node = walker.currentNode;
+    if (node.id && node.id.startsWith("r") && !elementCache.has(node)) {
+      toRemove.push(node);
+    }
   }
-  // Lazy load components
-  lazy(loadFn) {
-    let component = null;
-    let loading = false;
-    return async (...args) => {
-      if (!component && !loading) {
-        loading = true;
-        component = await loadFn();
-        loading = false;
+  toRemove.forEach((el) => el.remove());
+  return toRemove.length;
+}
+
+// src/client/dom/reactive.ts
+function createReactiveChild(state, reactiveNodes, renderFn) {
+  const currentValue = renderFn(state.value);
+  if (typeof window !== "undefined" && typeof document !== "undefined") {
+    const entry = { node: null, renderFn };
+    reactiveNodes.set(state, entry);
+    state.subscribe(() => {
+      if (entry.node && entry.node.parentNode) {
+        const newValue = renderFn(state.value);
+        entry.node.textContent = String(newValue ?? "");
       }
-      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);
+  return currentValue;
+}
+
+// src/client/dom/string-render.ts
+var SELF_CLOSING_TAGS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function resolveStateValue(value) {
+  return isState(value) ? value.value : value;
+}
+function isReactiveWrapper(vNode) {
+  if (!vNode || typeof vNode !== "object" || !vNode.tagName) {
+    return false;
+  }
+  return vNode.tagName === "span" && vNode.props?.id && typeof vNode.props.id === "string" && /^r[a-z0-9]{9}$/.test(vNode.props.id);
+}
+function unwrapReactive(vNode) {
+  if (!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];
       }
     }
-    toRemove.forEach((el) => el.remove());
-    return toRemove.length;
+    return unwrapReactive(child);
   }
-  // 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 children.map((child) => unwrapReactive(child));
+}
+function escapeHtml(text) {
+  const htmlEscapes = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#x27;"
+  };
+  return text.replace(/[&<>"']/g, (char) => htmlEscapes[char]);
+}
+function isSelfClosingTag(tagName) {
+  return SELF_CLOSING_TAGS.has(tagName.toLowerCase());
+}
+function 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 "";
+}
+function 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 = 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="${escapeHtml(String(className))}"`);
       }
-      return this.escapeHtml(String(resolvedVNode));
+      continue;
     }
-    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 (key === "style") {
+      const styleStr = styleToString(value);
+      if (styleStr) {
+        attrs.push(`style="${escapeHtml(styleStr)}"`);
+      }
+      continue;
     }
-    if (isSelfClosing) {
-      html += ` />${newLine}`;
-      return html;
+    if (value === true) {
+      attrs.push(key);
+      continue;
     }
-    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;
-    }
-    const isRawText = tagName === "script" || tagName === "style";
-    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 += isRawText && typeof c === "string" ? c : this.renderToString(c, { pretty, indent: indent + 1 });
-              }
+    attrs.push(`${key}="${escapeHtml(String(value))}"`);
+  }
+  return attrs.join(" ");
+}
+function renderToString(vNode, options = {}) {
+  const { pretty = false, indent = 0 } = options;
+  const indentStr = pretty ? "  ".repeat(indent) : "";
+  const newLine = pretty ? "\n" : "";
+  let resolvedVNode = resolveStateValue(vNode);
+  resolvedVNode = unwrapReactive(resolvedVNode);
+  if (Array.isArray(resolvedVNode)) {
+    return resolvedVNode.map((child) => renderToString(child, options)).join("");
+  }
+  if (typeof resolvedVNode !== "object" || resolvedVNode === null) {
+    if (resolvedVNode === null || resolvedVNode === void 0 || resolvedVNode === false) {
+      return "";
+    }
+    return escapeHtml(String(resolvedVNode));
+  }
+  const { tagName, props, children } = resolvedVNode;
+  const textareaValue = resolveTextareaValue(tagName, props);
+  const selfClosing = isSelfClosingTag(tagName);
+  let html = `${indentStr}<${tagName}`;
+  const attrs = propsToAttributes(props, tagName);
+  if (attrs) {
+    html += ` ${attrs}`;
+  }
+  if (selfClosing) {
+    html += ` />${newLine}`;
+    return html;
+  }
+  html += ">";
+  if (textareaValue !== void 0) {
+    html += escapeHtml(textareaValue);
+    html += `</${tagName}>${newLine}`;
+    return html;
+  }
+  if (props.dangerouslySetInnerHTML) {
+    html += props.dangerouslySetInnerHTML.__html;
+    html += `</${tagName}>${newLine}`;
+    return html;
+  }
+  const isRawText = tagName === "script" || tagName === "style";
+  if (children && children.length > 0) {
+    const resolvedChildren = children.map((child) => unwrapReactive(resolveStateValue(child)));
+    const hasComplexChildren = resolvedChildren.some(
+      (child) => typeof child === "object" && child !== null && !Array.isArray(child) && "tagName" in child
+    );
+    if (pretty && hasComplexChildren) {
+      html += newLine;
+      for (const child of resolvedChildren) {
+        if (shouldSkipChild(child)) continue;
+        if (Array.isArray(child)) {
+          for (const nestedChild of child) {
+            if (!shouldSkipChild(nestedChild)) {
+              html += isRawText && typeof nestedChild === "string" ? nestedChild : renderToString(nestedChild, { pretty, indent: indent + 1 });
             }
-          } else {
-            html += isRawText && typeof child === "string" ? child : this.renderToString(child, { pretty, indent: indent + 1 });
           }
+        } else {
+          html += isRawText && typeof child === "string" ? child : 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 += isRawText && typeof c === "string" ? c : this.renderToString(c, { pretty: false, indent: 0 });
-              }
+      }
+      html += indentStr;
+    } else {
+      for (const child of resolvedChildren) {
+        if (shouldSkipChild(child)) continue;
+        if (Array.isArray(child)) {
+          for (const nestedChild of child) {
+            if (!shouldSkipChild(nestedChild)) {
+              html += isRawText && typeof nestedChild === "string" ? nestedChild : renderToString(nestedChild, { pretty: false, indent: 0 });
             }
-          } else {
-            html += isRawText && typeof child === "string" ? child : this.renderToString(child, { pretty: false, indent: 0 });
           }
+        } else {
+          html += isRawText && typeof child === "string" ? child : 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;
+  html += `</${tagName}>${newLine}`;
+  return html;
+}
+function 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>${escapeHtml(title)}</title>${nl}`;
+  }
+  for (const metaAttrs of meta) {
+    html += `${indent2}<meta`;
+    for (const key in metaAttrs) {
+      html += ` ${key}="${escapeHtml(metaAttrs[key])}"`;
     }
-    return value;
+    html += `>${nl}`;
   }
-  isReactiveWrapper(vNode) {
-    if (!vNode || typeof vNode !== "object" || !vNode.tagName) {
-      return false;
+  for (const linkAttrs of links) {
+    html += `${indent2}<link`;
+    for (const key in linkAttrs) {
+      html += ` ${key}="${escapeHtml(linkAttrs[key])}"`;
     }
-    return vNode.tagName === "span" && vNode.props?.id && typeof vNode.props.id === "string" && vNode.props.id.match(/^r[a-z0-9]{9}$/);
+    html += `>${nl}`;
   }
-  unwrapReactive(vNode) {
-    if (!this.isReactiveWrapper(vNode)) {
-      return vNode;
-    }
-    const children = vNode.children;
-    if (!children || children.length === 0) {
-      return "";
+  for (const style of styles2) {
+    if (style.href) {
+      html += `${indent2}<link rel="stylesheet" href="${escapeHtml(style.href)}">${nl}`;
+    } else if (style.content) {
+      html += `${indent2}<style>${style.content}</style>${nl}`;
     }
-    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(" ");
+  if (head) {
+    html += head + nl;
+  }
+  html += `${indent}</head>${nl}${indent}<body`;
+  for (const key in bodyAttrs) {
+    html += ` ${key}="${escapeHtml(bodyAttrs[key])}"`;
   }
-  styleToString(style) {
-    if (typeof style === "string") {
-      return style;
+  html += `>${nl}`;
+  html += renderToString(vNode, { pretty, indent: 2 });
+  for (const script of scripts) {
+    html += `${indent2}<script`;
+    if (script.type) {
+      html += ` type="${escapeHtml(script.type)}"`;
     }
-    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(";");
+    if (script.async) {
+      html += " async";
     }
-    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 ?? "");
-        }
-      });
+    if (script.defer) {
+      html += " defer";
+    }
+    if (script.src) {
+      html += ` src="${escapeHtml(script.src)}"></script>${nl}`;
+    } else if (script.content) {
+      html += `>${script.content}</script>${nl}`;
+    } else {
+      html += `></script>${nl}`;
     }
-    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;
-      }
+  html += `${indent}</body>${nl}</html>`;
+  return html;
+}
+
+// src/client/dom/json.ts
+function jsonToVNode(json, reactiveNodes) {
+  if (isState(json)) {
+    return createReactiveChild(json, reactiveNodes, (value) => value);
+  }
+  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 = isState(value) ? value.value : value;
+    } else {
+      props[key] = 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);
-            }
+  }
+  const childrenArray = [];
+  if (children != null) {
+    if (Array.isArray(children)) {
+      for (const child of children) {
+        if (isState(child)) {
+          childrenArray.push(createReactiveChild(child, reactiveNodes, (value) => value));
+        } else {
+          const converted = jsonToVNode(child, reactiveNodes);
+          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);
-        }
+    } else if (isState(children)) {
+      childrenArray.push(createReactiveChild(children, reactiveNodes, (value) => value));
+    } else if (typeof children === "object" && children !== null && "tag" in children) {
+      const converted = jsonToVNode(children, reactiveNodes);
+      if (converted != null && converted !== false) {
+        childrenArray.push(converted);
       }
+    } else {
+      childrenArray.push(children);
     }
-    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 { tagName: tag, props, children: childrenArray };
+}
+function vNodeJsonToVNode(json, reactiveNodes) {
+  if (isState(json)) {
+    return createReactiveChild(json, reactiveNodes, (value) => value);
+  }
+  if (isPrimitiveJson(json)) {
+    return json;
+  }
+  const { tagName, props = {}, children = [] } = json;
+  const resolvedProps = {};
+  for (const key in props) {
+    const value = props[key];
+    resolvedProps[key] = isState(value) ? value.value : value;
+  }
+  const childrenArray = [];
+  for (const child of children) {
+    if (isState(child)) {
+      childrenArray.push(createReactiveChild(child, reactiveNodes, (value) => value));
+    } else {
+      const converted = vNodeJsonToVNode(child, reactiveNodes);
+      if (converted != null && converted !== false) {
+        childrenArray.push(converted);
+      }
     }
-    return this.render(rootElement, vNode);
   }
-  renderJsonToString(json, options = {}) {
-    const vNode = this.jsonToVNode(json);
-    return this.renderToString(vNode, options);
+  return { tagName, props: resolvedProps, children: childrenArray };
+}
+function renderJson(rootElement, json, reactiveNodes) {
+  const vNode = jsonToVNode(json, reactiveNodes);
+  if (!vNode || typeof vNode !== "object" || !("tagName" in vNode)) {
+    throw new Error("Invalid JSON structure");
   }
-  renderVNodeToString(json, options = {}) {
-    const vNode = this.vNodeJsonToVNode(json);
-    return this.renderToString(vNode, options);
+  return render(rootElement, vNode);
+}
+function renderVNode(rootElement, json, reactiveNodes) {
+  const vNode = vNodeJsonToVNode(json, reactiveNodes);
+  if (!vNode || typeof vNode !== "object" || !("tagName" in vNode)) {
+    throw new Error("Invalid VNode JSON structure");
   }
-  // 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}`;
+  return render(rootElement, vNode);
+}
+function renderJsonToString(json, reactiveNodes, options = {}) {
+  const vNode = jsonToVNode(json, reactiveNodes);
+  return renderToString(vNode, options);
+}
+function renderVNodeToString(json, reactiveNodes, options = {}) {
+  const vNode = vNodeJsonToVNode(json, reactiveNodes);
+  return renderToString(vNode, options);
+}
+
+// src/client/dom/state-utils.ts
+function createState(initialValue, options = {}) {
+  let value = initialValue;
+  const listeners = /* @__PURE__ */ new Set();
+  let updateTimer = null;
+  const { throttle = 0, deep = false } = options;
+  const notify = () => listeners.forEach((listener) => listener(value));
+  const scheduleUpdate = () => {
+    if (throttle > 0) {
+      if (!updateTimer) {
+        updateTimer = setTimeout(() => {
+          updateTimer = null;
+          notify();
+        }, throttle);
       }
+    } else {
+      notify();
     }
-    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}`;
+  };
+  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);
       }
     }
-    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];
+function computed(states, computeFn) {
+  const values = states.map((state) => state.value);
+  const result = createState(computeFn(...values));
+  states.forEach((state, index) => {
+    state.subscribe((newValue) => {
+      values[index] = newValue;
+      result.value = computeFn(...values);
+    });
+  });
+  return result;
 }
-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;
+function effect(stateFn) {
+  stateFn();
+}
+function 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 render3 = () => {
+    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%`;
+      renderToDOM(renderItem(items[i], i), itemEl);
+      wrapper.appendChild(itemEl);
+    }
+    container2.innerHTML = "";
+    container2.appendChild(wrapper);
+  };
+  const scrollHandler = () => {
+    scrollTop = container2.scrollTop;
+    requestAnimationFrame(render3);
+  };
+  container2.addEventListener("scroll", scrollHandler);
+  render3();
+  return {
+    render: render3,
+    destroy: () => {
+      container2.removeEventListener("scroll", scrollHandler);
+      container2.innerHTML = "";
     }
-    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;
+  };
+}
+function 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..."] };
+  };
+}
+
+// src/client/dom/index.ts
+var DomNode = class {
+  constructor() {
+    this.elementCache = /* @__PURE__ */ new WeakMap();
+    this.reactiveNodes = /* @__PURE__ */ new Map();
   }
-  // CSS Variables
-  addVar(name, value) {
-    const cssVar = {
-      name: name.startsWith("--") ? name : `--${name}`,
-      value,
-      toString() {
-        return `var(${this.name})`;
-      }
-    };
-    this.variables.push(cssVar);
-    return cssVar;
+  createElement(tagName, props = {}, children = []) {
+    return { tagName, props, children };
   }
-  var(variable, fallback) {
-    const varName = typeof variable === "string" ? variable.startsWith("--") ? variable : `--${variable}` : variable.name;
-    return fallback ? `var(${varName}, ${fallback})` : `var(${varName})`;
+  renderToDOM(vNode, parent) {
+    return renderToDOM(vNode, parent);
   }
-  // Basic Selectors
-  addTag(tag, styles2) {
-    const rule = { selector: tag, styles: styles2, type: "tag" };
-    this.rules.push(rule);
-    return rule;
+  render(rootElement, vNode) {
+    return render(rootElement, vNode);
   }
-  addClass(name, styles2) {
-    const selector = name.startsWith(".") ? name : `.${name}`;
-    const rule = { selector, styles: styles2, type: "class" };
-    this.rules.push(rule);
-    return rule;
+  batchRender(rootElement, vNodes) {
+    return batchRender(rootElement, vNodes);
   }
-  addId(name, styles2) {
-    const selector = name.startsWith("#") ? name : `#${name}`;
-    const rule = { selector, styles: styles2, type: "id" };
-    this.rules.push(rule);
-    return rule;
+  renderChunked(rootElement, vNodes, chunkSize = 5e3, onProgress) {
+    return renderChunked(rootElement, vNodes, chunkSize, onProgress);
   }
-  // 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;
+  renderToHead(...vNodes) {
+    return renderToHead(...vNodes);
   }
-  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;
+  addStyle(cssText) {
+    return addStyle(cssText);
   }
-  // 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;
+  addMeta(attrs) {
+    return addMeta(attrs);
   }
-  attrEquals(attr, value, styles2, baseSelector) {
-    return this.addAttribute(`${attr}="${value}"`, styles2, baseSelector);
+  addLink(attrs) {
+    return addLink(attrs);
   }
-  attrContainsWord(attr, value, styles2, baseSelector) {
-    return this.addAttribute(`${attr}~="${value}"`, styles2, baseSelector);
+  setTitle(text) {
+    return setTitle(text);
   }
-  attrStartsWith(attr, value, styles2, baseSelector) {
-    return this.addAttribute(`${attr}^="${value}"`, styles2, baseSelector);
+  // Reactive State Management
+  createState(initialValue, options = {}) {
+    return createState(initialValue, options);
   }
-  attrEndsWith(attr, value, styles2, baseSelector) {
-    return this.addAttribute(`${attr}$="${value}"`, styles2, baseSelector);
+  computed(states, computeFn) {
+    return computed(states, computeFn);
   }
-  attrContains(attr, value, styles2, baseSelector) {
-    return this.addAttribute(`${attr}*="${value}"`, styles2, baseSelector);
+  effect(stateFn) {
+    effect(stateFn);
   }
-  // Combinator Selectors
-  descendant(ancestor, descendant2, styles2) {
-    return this.createAndAddRule(`${ancestor} ${descendant2}`, styles2);
+  // Virtual scrolling helper for large lists
+  createVirtualList(container2, items, renderItem, itemHeight = 50, bufferSize = 5) {
+    return createVirtualList(container2, items, renderItem, itemHeight, bufferSize);
   }
-  child(parent, childSel, styles2) {
-    return this.createAndAddRule(`${parent} > ${childSel}`, styles2);
+  // Lazy load components
+  lazy(loadFn) {
+    return lazy(loadFn);
   }
-  adjacentSibling(element, sibling, styles2) {
-    return this.createAndAddRule(`${element} + ${sibling}`, styles2);
+  // Memory management - cleanup unused elements
+  cleanupUnusedElements(root) {
+    return cleanupUnusedElements(root, this.elementCache);
   }
-  generalSibling(element, sibling, styles2) {
-    return this.createAndAddRule(`${element} ~ ${sibling}`, styles2);
+  // Server-Side Rendering - convert VNode to HTML string
+  renderToString(vNode, options = {}) {
+    return renderToString(vNode, options);
   }
-  multiple(selectors, styles2) {
-    return this.createAndAddRule(selectors.join(", "), styles2);
+  jsonToVNode(json) {
+    return jsonToVNode(json, this.reactiveNodes);
   }
-  // Nesting (BEM-style)
-  addName(name, styles2) {
-    const selector = name.startsWith("--") ? `&${name}` : `&--${name}`;
-    const rule = { selector, styles: styles2, type: "name" };
-    return rule;
+  vNodeJsonToVNode(json) {
+    return vNodeJsonToVNode(json, this.reactiveNodes);
   }
-  nesting(parentRule, ...childRules) {
-    parentRule.nested = childRules;
-    return parentRule;
+  renderJson(rootElement, json) {
+    return renderJson(rootElement, json, this.reactiveNodes);
   }
-  // @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;
+  renderVNode(rootElement, json) {
+    return renderVNode(rootElement, json, this.reactiveNodes);
   }
-  keyframeFromTo(name, from, to) {
-    return this.keyframe(name, { from, to });
+  renderJsonToString(json, options = {}) {
+    return renderJsonToString(json, this.reactiveNodes, options);
   }
-  // @font-face - Custom Fonts
-  fontFace(options) {
-    this.fontFaces.push(options);
-    return options;
+  renderVNodeToString(json, options = {}) {
+    return renderVNodeToString(json, this.reactiveNodes, options);
   }
-  // @import - Import Stylesheets
-  import(url, mediaQuery) {
-    const importRule = mediaQuery ? `@import url("${url}") ${mediaQuery};` : `@import url("${url}");`;
-    this.imports.push(importRule);
-    return importRule;
+  // Generate complete HTML document as string (for SSR)
+  renderToHTMLDocument(vNode, options = {}) {
+    return renderToHTMLDocument(vNode, options);
   }
-  // @media - Media Queries
-  media(type, condition, rules) {
-    const mediaRule = { type, condition, rules: this.rulesToCSSRules(rules) };
-    this.mediaRules.push(mediaRule);
-    return mediaRule;
+  // Expose elementCache for reactive updates
+  getElementCache() {
+    return this.elementCache;
   }
-  mediaScreen(condition, rules) {
-    return this.media("screen", condition, rules);
+};
+var dom = new DomNode();
+var render2 = dom.render.bind(dom);
+var renderToString2 = dom.renderToString.bind(dom);
+
+// src/client/style/condition-utils.ts
+function 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;
+}
+function 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;
   }
-  mediaPrint(rules) {
-    return this.media("print", "", rules);
+  if (normalizedProperty === "display") {
+    return (/* @__PURE__ */ new Set(["block", "flex", "grid", "inline", "inline-block", "inline-flex", "inline-grid"])).has(normalizedValue);
   }
-  mediaMinWidth(minWidth, rules) {
-    return this.media("screen", `min-width: ${minWidth}`, rules);
+  if (normalizedProperty === "backdrop-filter") {
+    return /blur\(/.test(normalizedValue);
   }
-  mediaMaxWidth(maxWidth, rules) {
-    return this.media("screen", `max-width: ${maxWidth}`, rules);
+  if (normalizedProperty === "container-type") {
+    return (/* @__PURE__ */ new Set(["inline-size", "size"])).has(normalizedValue);
   }
-  mediaDark(rules) {
-    const mediaRule = { type: "", condition: "prefers-color-scheme: dark", rules: this.rulesToCSSRules(rules) };
-    this.mediaRules.push(mediaRule);
-    return mediaRule;
+  return true;
+}
+function matchesSupportsCondition(condition) {
+  const normalized = condition.trim().replace(/^\(+|\)+$/g, "").trim();
+  if (!normalized) {
+    return true;
   }
-  mediaLight(rules) {
-    const mediaRule = { type: "", condition: "prefers-color-scheme: light", rules: this.rulesToCSSRules(rules) };
-    this.mediaRules.push(mediaRule);
-    return mediaRule;
+  if (normalized.toLowerCase().startsWith("not ")) {
+    return !matchesSupportsCondition(normalized.slice(4));
   }
-  mediaReducedMotion(rules) {
-    const mediaRule = { type: "", condition: "prefers-reduced-motion: reduce", rules: this.rulesToCSSRules(rules) };
-    this.mediaRules.push(mediaRule);
-    return mediaRule;
+  const orClauses = splitConditionalClauses(normalized, "or");
+  if (orClauses.length > 1) {
+    return orClauses.some((clause) => matchesSupportsCondition(clause));
   }
-  // @container - Container Queries
-  container(condition, rules, name) {
-    const containerRule = { name, condition, rules: this.rulesToCSSRules(rules) };
-    this.containerRules.push(containerRule);
-    return containerRule;
+  const andClauses = splitConditionalClauses(normalized, "and");
+  if (andClauses.length > 1) {
+    return andClauses.every((clause) => matchesSupportsCondition(clause));
   }
-  addContainer(name, styles2) {
-    const containerStyles = { ...styles2, containerName: name };
-    return this.addClass(name, containerStyles);
+  const declarationMatch = normalized.match(/^([a-z-]+)\s*:\s*(.+)$/i);
+  if (!declarationMatch) {
+    return false;
   }
-  // @supports - Feature Queries
-  supports(condition, rules) {
-    const supportsRule = { condition, rules: this.rulesToCSSRules(rules) };
-    this.supportsRules.push(supportsRule);
-    return supportsRule;
+  return matchesSupportsDeclaration(declarationMatch[1], declarationMatch[2]);
+}
+function 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;
+    }
   }
-  // @layer - Cascade Layers
-  layerOrder(...layers) {
-    this._layerOrder = layers;
+  return void 0;
+}
+function matchesContainerCondition(condition, containerWidth) {
+  const normalized = condition.trim().replace(/^\(+|\)+$/g, "").trim().toLowerCase();
+  if (!normalized) {
+    return true;
   }
-  layer(name, rules) {
-    const layerRule = { name, rules: this.rulesToCSSRules(rules) };
-    this.layerRules.push(layerRule);
-    return layerRule;
+  if (normalized.startsWith("not ")) {
+    return !matchesContainerCondition(normalized.slice(4), containerWidth);
   }
-  // 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;
+  const orClauses = splitConditionalClauses(normalized, "or");
+  if (orClauses.length > 1) {
+    return orClauses.some((clause) => matchesContainerCondition(clause, containerWidth));
   }
-  important(value) {
-    return `${value} !important`;
+  const andClauses = splitConditionalClauses(normalized, "and");
+  if (andClauses.length > 1) {
+    return andClauses.every((clause) => matchesContainerCondition(clause, containerWidth));
   }
-  getVariables() {
-    return Object.fromEntries(this.variables.map((variable) => [variable.name, variable.value]));
+  if (normalized.startsWith("min-width:")) {
+    const minWidth = parseMediaLength(normalized.slice("min-width:".length));
+    return minWidth !== void 0 && containerWidth >= minWidth;
   }
-  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;
-      }
+  if (normalized.startsWith("max-width:")) {
+    const maxWidth = parseMediaLength(normalized.slice("max-width:".length));
+    return maxWidth !== void 0 && containerWidth <= maxWidth;
+  }
+  return false;
+}
+function 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;
+}
+function matchesMediaCondition(condition, options) {
+  const normalized = condition.trim().replace(/^\(+|\)+$/g, "").trim().toLowerCase();
+  if (!normalized) {
+    return true;
+  }
+  if (normalized.startsWith("min-width:")) {
+    const minWidth = parseMediaLength(normalized.slice("min-width:".length));
+    return minWidth !== void 0 && options.viewportWidth !== void 0 && options.viewportWidth >= minWidth;
+  }
+  if (normalized.startsWith("max-width:")) {
+    const maxWidth = 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;
+}
+function 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) => matchesMediaCondition(part, options));
+}
+function getOrderedLayerNames(layerOrder2, layerRules) {
+  const orderedLayerNames = [];
+  for (const layerName of layerOrder2) {
+    const normalizedName = layerName.trim();
+    if (normalizedName && !orderedLayerNames.includes(normalizedName)) {
+      orderedLayerNames.push(normalizedName);
     }
-    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
-    };
+  for (const layerRule of layerRules) {
+    const normalizedName = layerRule.name.trim();
+    if (normalizedName && !orderedLayerNames.includes(normalizedName)) {
+      orderedLayerNames.push(normalizedName);
+    }
   }
-  normalizeTarget(target) {
-    const cached = this.nativeTargetNormalizationCache?.get(target);
-    if (cached) {
-      return cached;
+  return orderedLayerNames;
+}
+
+// src/client/style/selector-parser.ts
+function 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;
     }
-    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;
+    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;
   }
-  withNativeTargetNormalizationCache(callback) {
-    const previousCache = this.nativeTargetNormalizationCache;
-    this.nativeTargetNormalizationCache = /* @__PURE__ */ new WeakMap();
-    try {
-      return callback();
-    } finally {
-      this.nativeTargetNormalizationCache = previousCache;
+  const trailing = token.trim();
+  if (trailing) {
+    selectors.push(trailing);
+  }
+  return selectors;
+}
+function 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;
   }
-  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;
+  return void 0;
+}
+function 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;
       }
-      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;
+      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;
       }
-      token += char;
+      idName = idMatch[1];
+      cursor += idMatch[0].length;
+      continue;
     }
-    const trailing = token.trim();
-    if (trailing) {
-      clauses.push(trailing);
+    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 = parsePseudoSelectorToken(trimmed, cursor);
+      if (!pseudoToken) {
+        return void 0;
+      }
+      pseudoClasses.push(pseudoToken.value);
+      cursor = pseudoToken.nextIndex;
+      continue;
     }
-    return clauses;
+    return void 0;
+  }
+  if (!tagName && !idName && classNames.length === 0 && attributes.length === 0 && pseudoClasses.length === 0) {
+    return void 0;
   }
-  splitSelectorList(value) {
-    const selectors = [];
+  return { tagName, idName, classNames, attributes, pseudoClasses };
+}
+function extractSupportedSelectorChains(selector, parsedSelectorChainCache) {
+  const cached = parsedSelectorChainCache.get(selector);
+  if (cached) {
+    return cached;
+  }
+  const parsedChains = 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;
-    for (let index = 0; index < value.length; index++) {
-      const char = value[index];
+    const flushToken = () => {
+      const trimmedToken = token.trim();
+      token = "";
+      if (!trimmedToken || invalid) {
+        return;
+      }
+      const parsed = 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 && value[index - 1] !== "\\") {
+        if (char === quoted && segment[index - 1] !== "\\") {
           quoted = void 0;
         }
         continue;
@@ -1117,8 +1344,10 @@ var CreateStyle = class {
         token += char;
         continue;
       }
-      if (char === "]" && attributeDepth > 0) {
-        attributeDepth -= 1;
+      if (char === "]") {
+        if (attributeDepth > 0) {
+          attributeDepth -= 1;
+        }
         token += char;
         continue;
       }
@@ -1132,374 +1361,159 @@ var CreateStyle = class {
         token += char;
         continue;
       }
-      if (attributeDepth === 0 && parenthesisDepth === 0 && char === ",") {
-        const trimmed = token.trim();
-        if (trimmed) {
-          selectors.push(trimmed);
+      if (attributeDepth === 0 && parenthesisDepth === 0 && (char === ">" || char === "+" || char === "~")) {
+        flushToken();
+        if (invalid) {
+          break;
         }
-        token = "";
+        combinator = char === ">" ? "child" : char === "+" ? "adjacent-sibling" : "general-sibling";
         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
-          };
+      if (attributeDepth === 0 && parenthesisDepth === 0 && /\s/.test(char)) {
+        flushToken();
+        if (invalid) {
+          break;
         }
-        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));
+      token += char;
     }
-    const declarationMatch = normalized.match(/^([a-z-]+)\s*:\s*(.+)$/i);
-    if (!declarationMatch) {
-      return false;
+    flushToken();
+    if (invalid || chain.length === 0) {
+      return void 0;
     }
-    return this.matchesSupportsDeclaration(declarationMatch[1], declarationMatch[2]);
+    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);
+  parsedSelectorChainCache.set(selector, parsedChains);
+  return parsedChains;
+}
+
+// src/client/style/native-resolver.ts
+var NativeStyleResolver = class {
+  constructor() {
+    this.parsedSelectorChainCache = /* @__PURE__ */ new Map();
   }
-  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;
+  resolveNativeStyles(target, ancestors = [], options = {}, context) {
+    return this.withNativeTargetNormalizationCache(() => {
+      const normalizedTarget = this.normalizeTarget(target);
+      if (!normalizedTarget.tagName && (!normalizedTarget.classNames || normalizedTarget.classNames.length === 0)) {
+        return {};
       }
-    }
-    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;
+      const normalizedAncestors = ancestors.map((ancestor) => this.normalizeTarget(ancestor));
+      const resolved = {};
+      const applyRules = (rules) => {
+        for (const rule of rules) {
+          const selectorChains = extractSupportedSelectorChains(rule.selector, this.parsedSelectorChainCache);
+          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, context.variables) : value;
+          }
+        }
+      };
+      for (const layerName of getOrderedLayerNames(context.layerOrder, context.layerRules)) {
+        for (const layerRule of context.layerRules) {
+          if (layerRule.name.trim() === layerName) {
+            applyRules(layerRule.rules);
+          }
         }
-        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;
+      applyRules(context.rules);
+      for (const supportsRule of context.supportsRules) {
+        if (matchesSupportsCondition(supportsRule.condition)) {
+          applyRules(supportsRule.rules);
         }
-        idName = idMatch[1];
-        cursor += idMatch[0].length;
-        continue;
       }
-      if (char === "[") {
-        const endIndex = trimmed.indexOf("]", cursor + 1);
-        if (endIndex === -1) {
-          return void 0;
+      for (const containerRule of context.containerRules) {
+        const matchingContainer = findMatchingContainerTarget(normalizedAncestors, containerRule.name);
+        if (matchingContainer && this.hasContainerWidth(matchingContainer) && matchesContainerCondition(containerRule.condition, matchingContainer.containerWidth)) {
+          applyRules(containerRule.rules);
         }
-        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;
+      }
+      for (const mediaRule of context.mediaRules) {
+        if (matchesMediaRule(mediaRule, options)) {
+          applyRules(mediaRule.rules);
         }
-        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;
+      return resolved;
+    });
+  }
+  resolveClassStyles(classNames, context) {
+    return this.resolveNativeStyles({ classNames }, [], {}, context);
+  }
+  hasContainerWidth(target) {
+    return typeof target.containerWidth === "number" && Number.isFinite(target.containerWidth);
+  }
+  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;
         }
-        pseudoClasses.push(pseudoToken.value);
-        cursor = pseudoToken.nextIndex;
-        continue;
+        if (fallback !== void 0) {
+          replaced = true;
+          return fallback.trim();
+        }
+        return match;
+      });
+      if (!replaced) {
+        break;
       }
-      return void 0;
-    }
-    if (!tagName && !idName && classNames.length === 0 && attributes.length === 0 && pseudoClasses.length === 0) {
-      return void 0;
     }
-    return { tagName, idName, classNames, attributes, pseudoClasses };
+    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
+    };
   }
-  extractSupportedSelectorChains(selector) {
-    const cached = this.parsedSelectorChainCache.get(selector);
+  normalizeTarget(target) {
+    const cached = this.nativeTargetNormalizationCache?.get(target);
     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;
+    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;
+    }
   }
   matchesAttributeSelector(targetValue, selector) {
     if (selector.operator === void 0) {
@@ -1586,13 +1600,13 @@ var CreateStyle = class {
         if (!pseudoArgument) {
           return false;
         }
-        const selectorArguments = this.splitSelectorList(pseudoArgument);
+        const selectorArguments = splitSelectorList(pseudoArgument);
         if (selectorArguments.length === 0) {
           return false;
         }
         const parsedSelectors = [];
         for (const selectorArgument of selectorArguments) {
-          const parsedSelector = this.parseSimpleSelectorToken(selectorArgument);
+          const parsedSelector = parseSimpleSelectorToken(selectorArgument);
           if (!parsedSelector) {
             return false;
           }
@@ -1641,7 +1655,7 @@ var CreateStyle = class {
     return Number.isInteger(n) && n >= 0;
   }
   matchesHasPseudoClass(target, pseudoArgument) {
-    const selectorArguments = this.splitSelectorList(pseudoArgument);
+    const selectorArguments = splitSelectorList(pseudoArgument);
     if (selectorArguments.length === 0) {
       return false;
     }
@@ -1656,7 +1670,7 @@ var CreateStyle = class {
     if (!scopeRelativeSelector) {
       return false;
     }
-    const selectorChains = this.extractSupportedSelectorChains(scopeRelativeSelector);
+    const selectorChains = extractSupportedSelectorChains(scopeRelativeSelector, this.parsedSelectorChainCache);
     if (selectorChains.length === 0) {
       return false;
     }
@@ -1763,289 +1777,404 @@ var CreateStyle = class {
       }
     }
   }
-  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;
+};
+
+// src/client/style/renderer.ts
+function toKebabCase(str) {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function 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}${toKebabCase(prop)}: ${cssValue};`;
+  }).join("\n");
+}
+function renderRule(rule, indent = "") {
+  let css = `${indent}${rule.selector} {
+${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} {
+${stylesToString(nestedRule.styles, indent + "    ")}
+${indent}}
+`;
+    }
+  }
+  css += `${indent}}`;
+  return css;
+}
+function renderRulesWithIndent(rules, indent = "    ") {
+  return rules.map((rule) => renderRule(rule, indent)).join("\n");
+}
+function renderMediaRule(media) {
+  const condition = media.type && media.condition ? `${media.type} and (${media.condition})` : media.type ? media.type : `(${media.condition})`;
+  return `@media ${condition} {
+${renderRulesWithIndent(media.rules)}
+}`;
+}
+function renderKeyframes(kf) {
+  let css = `@keyframes ${kf.name} {
+`;
+  for (const step of kf.steps) {
+    css += `    ${step.step} {
+${stylesToString(step.styles, "        ")}
+    }
+`;
+  }
+  css += "}";
+  return css;
+}
+function 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;
+}
+function renderContainerRule(container2) {
+  const nameStr = container2.name ? `${container2.name} ` : "";
+  return `@container ${nameStr}(${container2.condition}) {
+${renderRulesWithIndent(container2.rules)}
+}`;
+}
+function renderSupportsRule(supports) {
+  return `@supports (${supports.condition}) {
+${renderRulesWithIndent(supports.rules)}
+}`;
+}
+function renderLayerRule(layer2) {
+  return `@layer ${layer2.name} {
+${renderRulesWithIndent(layer2.rules)}
+}`;
+}
+function renderStyleSheet(context, ...additionalRules) {
+  const parts = [];
+  if (context.imports.length > 0) {
+    parts.push(context.imports.join("\n"));
+  }
+  if (context.layerOrder.length > 0) {
+    parts.push(`@layer ${context.layerOrder.join(", ")};`);
+  }
+  if (context.variables.length > 0) {
+    const varDeclarations = context.variables.map((variable) => `    ${variable.name}: ${variable.value};`).join("\n");
+    parts.push(`:root {
+${varDeclarations}
+}`);
+  }
+  for (const ff of context.fontFaces) {
+    parts.push(renderFontFace(ff));
+  }
+  for (const kf of context.keyframes) {
+    parts.push(renderKeyframes(kf));
+  }
+  const allRules = [...context.rules];
+  const allMediaRules = [...context.mediaRules];
+  const allKeyframes = [];
+  const allContainerRules = [...context.containerRules];
+  const allSupportsRules = [...context.supportsRules];
+  const allLayerRules = [...context.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(renderKeyframes(kf));
+  }
+  for (const layer2 of allLayerRules) {
+    parts.push(renderLayerRule(layer2));
+  }
+  for (const rule of allRules) {
+    parts.push(renderRule(rule));
+  }
+  for (const supports of allSupportsRules) {
+    parts.push(renderSupportsRule(supports));
+  }
+  for (const container2 of allContainerRules) {
+    parts.push(renderContainerRule(container2));
+  }
+  for (const media of allMediaRules) {
+    parts.push(renderMediaRule(media));
+  }
+  return parts.join("\n\n");
+}
+
+// src/client/style/store.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];
+}
+
+// src/client/style/index.ts
+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.nativeStyleResolver = new NativeStyleResolver();
+    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;
+  }
+  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})`;
+  }
+  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;
+  }
+  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;
+  }
+  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);
   }
-  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;
+  attrContains(attr, value, styles2, baseSelector) {
+    return this.addAttribute(`${attr}*="${value}"`, styles2, baseSelector);
   }
-  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));
+  descendant(ancestor, descendant2, styles2) {
+    return this.createAndAddRule(`${ancestor} ${descendant2}`, styles2);
   }
-  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;
+  child(parent, childSel, styles2) {
+    return this.createAndAddRule(`${parent} > ${childSel}`, styles2);
   }
-  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;
-    });
+  adjacentSibling(element, sibling, styles2) {
+    return this.createAndAddRule(`${element} + ${sibling}`, styles2);
   }
-  resolveClassStyles(classNames) {
-    return this.resolveNativeStyles({ classNames });
+  generalSibling(element, sibling, styles2) {
+    return this.createAndAddRule(`${element} ~ ${sibling}`, styles2);
   }
-  // Utility Methods
-  toKebabCase(str) {
-    return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+  multiple(selectors, styles2) {
+    return this.createAndAddRule(selectors.join(", "), styles2);
   }
-  // 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;
+  addName(name, styles2) {
+    const selector = name.startsWith("--") ? `&${name}` : `&--${name}`;
+    return { selector, styles: styles2, type: "name" };
   }
-  // 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"
+  nesting(parentRule, ...childRules) {
+    parentRule.nested = childRules;
+    return parentRule;
+  }
+  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;
   }
-  // Helper: Render rules with indentation (eliminates duplication in render methods)
-  renderRulesWithIndent(rules, indent = "    ") {
-    return rules.map((rule) => this.renderRule(rule, indent)).join("\n");
+  keyframeFromTo(name, from, to) {
+    return this.keyframe(name, { from, to });
   }
-  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");
+  fontFace(options) {
+    this.fontFaces.push(options);
+    return options;
   }
-  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;
+  import(url, mediaQuery) {
+    const importRule = mediaQuery ? `@import url("${url}") ${mediaQuery};` : `@import url("${url}");`;
+    this.imports.push(importRule);
+    return importRule;
   }
-  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)}
-}`;
+  media(type, condition, rules) {
+    const mediaRule = { type, condition, rules: this.rulesToCSSRules(rules) };
+    this.mediaRules.push(mediaRule);
+    return mediaRule;
   }
-  renderKeyframes(kf) {
-    let css = `@keyframes ${kf.name} {
-`;
-    for (const step of kf.steps) {
-      css += `    ${step.step} {
-${this.stylesToString(step.styles, "        ")}
-    }
-`;
-    }
-    css += "}";
-    return css;
+  mediaScreen(condition, rules) {
+    return this.media("screen", condition, rules);
   }
-  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;
+  mediaPrint(rules) {
+    return this.media("print", "", rules);
   }
-  renderContainerRule(container2) {
-    const nameStr = container2.name ? `${container2.name} ` : "";
-    return `@container ${nameStr}(${container2.condition}) {
-${this.renderRulesWithIndent(container2.rules)}
-}`;
+  mediaMinWidth(minWidth, rules) {
+    return this.media("screen", `min-width: ${minWidth}`, rules);
   }
-  renderSupportsRule(supports) {
-    return `@supports (${supports.condition}) {
-${this.renderRulesWithIndent(supports.rules)}
-}`;
+  mediaMaxWidth(maxWidth, rules) {
+    return this.media("screen", `max-width: ${maxWidth}`, rules);
   }
-  renderLayerRule(layer2) {
-    return `@layer ${layer2.name} {
-${this.renderRulesWithIndent(layer2.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(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(condition, rules) {
+    const supportsRule = { condition, rules: this.rulesToCSSRules(rules) };
+    this.supportsRules.push(supportsRule);
+    return supportsRule;
+  }
+  layerOrder(...layers) {
+    this._layerOrder = layers;
+  }
+  layer(name, rules) {
+    const layerRule = { name, rules: this.rulesToCSSRules(rules) };
+    this.layerRules.push(layerRule);
+    return layerRule;
+  }
+  add(rules) {
+    return Object.entries(rules).map(([selector, styles2]) => {
+      const rule = { selector, styles: styles2, type: "custom" };
+      this.rules.push(rule);
+      return rule;
+    });
+  }
+  important(value) {
+    return `${value} !important`;
+  }
+  getVariables() {
+    return Object.fromEntries(this.variables.map((variable) => [variable.name, variable.value]));
+  }
+  resolveNativeStyles(target, ancestors = [], options = {}) {
+    return this.nativeStyleResolver.resolveNativeStyles(target, ancestors, options, this.getResolverContext());
+  }
+  resolveClassStyles(classNames) {
+    return this.nativeStyleResolver.resolveClassStyles(classNames, this.getResolverContext());
   }
-  // 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");
+    return renderStyleSheet(this.getRenderContext(), ...additionalRules);
   }
   inject(styleId) {
     const css = this.render();
     const style = document.createElement("style");
-    if (styleId) style.id = styleId;
+    if (styleId) {
+      style.id = styleId;
+    }
     style.textContent = css;
     document.head.appendChild(style);
     return style;
@@ -2062,6 +2191,43 @@ ${varDeclarations}
     this.layerRules.length = 0;
     this._layerOrder.length = 0;
   }
+  getResolverContext() {
+    return {
+      variables: this.getVariables(),
+      rules: this.rules,
+      mediaRules: this.mediaRules,
+      containerRules: this.containerRules,
+      supportsRules: this.supportsRules,
+      layerRules: this.layerRules,
+      layerOrder: this._layerOrder
+    };
+  }
+  getRenderContext() {
+    return {
+      imports: this.imports,
+      layerOrder: this._layerOrder,
+      variables: this.variables,
+      fontFaces: this.fontFaces,
+      keyframes: this.keyframes,
+      rules: this.rules,
+      mediaRules: this.mediaRules,
+      containerRules: this.containerRules,
+      supportsRules: this.supportsRules,
+      layerRules: this.layerRules
+    };
+  }
+  createAndAddRule(selector, styles2, type = "custom") {
+    const rule = { selector, styles: styles2, type };
+    this.rules.push(rule);
+    return rule;
+  }
+  rulesToCSSRules(rules) {
+    return Object.entries(rules).map(([selector, styles2]) => ({
+      selector,
+      styles: styles2,
+      type: "custom"
+    }));
+  }
 };
 var styles = new CreateStyle(getSharedStyleStore());
 var {
@@ -2102,23 +2268,28 @@ var {
   supports: supportsStyle,
   layerOrder,
   layer,
-  add: addStyle,
+  add: addStyle2,
   important,
   getVariables: getStyleVariables,
+  resolveNativeStyles,
   resolveClassStyles,
   render: renderStyle,
   inject: injectStyle,
   clear: clearStyle
 } = styles;
 
-// src/desktop-auto-render.ts
+// src/desktop/auto-render/constants.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__";
+
+// src/desktop/auto-render/globals.ts
 function getDesktopAutoRenderGlobals() {
   return globalThis;
 }
-function escapeHtml(text) {
+
+// src/desktop/auto-render/html.ts
+function escapeHtml2(text) {
   return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
 }
 function escapeStyleText(css) {
@@ -2131,7 +2302,7 @@ function buildDesktopAutoHtml(options) {
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>${escapeHtml(options.title)}</title>
+  <title>${escapeHtml2(options.title)}</title>
 ${styleTag}
 </head>
 <body>
@@ -2166,6 +2337,8 @@ ${styleTag}
 </body>
 </html>`;
 }
+
+// src/desktop/auto-render/message-handler.ts
 function resolveDesktopBridgePayloadRoute(payload) {
   if (!payload) {
     return void 0;
@@ -2182,19 +2355,6 @@ function resolveDesktopBridgePayloadRoute(payload) {
   }
   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 = [];
@@ -2302,6 +2462,23 @@ function installDesktopMessageHandler(options) {
   });
   globalScope[DESKTOP_MESSAGE_HANDLER_KEY] = true;
 }
+
+// src/desktop/auto-render/tracking.ts
+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;
+}
+
+// src/desktop/auto-render/complete.ts
 function completeDesktopAutoRender(options = {}) {
   installDesktopRenderTracking();
   const globalScope = getDesktopAutoRenderGlobals();
@@ -2333,7 +2510,7 @@ function completeDesktopAutoRender(options = {}) {
     icon: resolvedOptions.icon,
     html: buildDesktopAutoHtml({
       css: styles.render(),
-      markup: renderToString(capturedRender.vNode),
+      markup: renderToString2(capturedRender.vNode),
       title: resolvedOptions.title
     })
   });