elit 3.6.6 → 3.6.7

package/dist/style.js

@@ -1,249 +1,573 @@
 "use strict";
 (() => {
-  // 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();
+  // 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;
     }
-    return globalScope[ELIT_SHARED_STYLE_STORE_KEY];
+    const trailing = token.trim();
+    if (trailing) {
+      clauses.push(trailing);
+    }
+    return clauses;
   }
-  var CreateStyle = class {
-    constructor(store) {
-      this.variables = [];
-      this.rules = [];
-      this.mediaRules = [];
-      this.keyframes = [];
-      this.fontFaces = [];
-      this.imports = [];
-      this.containerRules = [];
-      this.supportsRules = [];
-      this.layerRules = [];
-      this._layerOrder = [];
-      this.parsedSelectorChainCache = /* @__PURE__ */ new Map();
-      if (!store) {
-        return;
-      }
-      this.variables = store.variables;
-      this.rules = store.rules;
-      this.mediaRules = store.mediaRules;
-      this.keyframes = store.keyframes;
-      this.fontFaces = store.fontFaces;
-      this.imports = store.imports;
-      this.containerRules = store.containerRules;
-      this.supportsRules = store.supportsRules;
-      this.layerRules = store.layerRules;
-      this._layerOrder = store.layerOrder;
+  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;
     }
-    // CSS Variables
-    addVar(name, value) {
-      const cssVar = {
-        name: name.startsWith("--") ? name : `--${name}`,
-        value,
-        toString() {
-          return `var(${this.name})`;
-        }
-      };
-      this.variables.push(cssVar);
-      return cssVar;
+    if (normalizedProperty === "display") {
+      return (/* @__PURE__ */ new Set(["block", "flex", "grid", "inline", "inline-block", "inline-flex", "inline-grid"])).has(normalizedValue);
     }
-    var(variable, fallback) {
-      const varName = typeof variable === "string" ? variable.startsWith("--") ? variable : `--${variable}` : variable.name;
-      return fallback ? `var(${varName}, ${fallback})` : `var(${varName})`;
+    if (normalizedProperty === "backdrop-filter") {
+      return /blur\(/.test(normalizedValue);
     }
-    // Basic Selectors
-    addTag(tag, styles2) {
-      const rule = { selector: tag, styles: styles2, type: "tag" };
-      this.rules.push(rule);
-      return rule;
+    if (normalizedProperty === "container-type") {
+      return (/* @__PURE__ */ new Set(["inline-size", "size"])).has(normalizedValue);
     }
-    addClass(name, styles2) {
-      const selector = name.startsWith(".") ? name : `.${name}`;
-      const rule = { selector, styles: styles2, type: "class" };
-      this.rules.push(rule);
-      return rule;
+    return true;
+  }
+  function matchesSupportsCondition(condition) {
+    const normalized = condition.trim().replace(/^\(+|\)+$/g, "").trim();
+    if (!normalized) {
+      return true;
     }
-    addId(name, styles2) {
-      const selector = name.startsWith("#") ? name : `#${name}`;
-      const rule = { selector, styles: styles2, type: "id" };
-      this.rules.push(rule);
-      return rule;
+    if (normalized.toLowerCase().startsWith("not ")) {
+      return !matchesSupportsCondition(normalized.slice(4));
     }
-    // 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;
+    const orClauses = splitConditionalClauses(normalized, "or");
+    if (orClauses.length > 1) {
+      return orClauses.some((clause) => matchesSupportsCondition(clause));
     }
-    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;
+    const andClauses = splitConditionalClauses(normalized, "and");
+    if (andClauses.length > 1) {
+      return andClauses.every((clause) => matchesSupportsCondition(clause));
     }
-    // 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;
+    const declarationMatch = normalized.match(/^([a-z-]+)\s*:\s*(.+)$/i);
+    if (!declarationMatch) {
+      return false;
     }
-    attrEquals(attr, value, styles2, baseSelector) {
-      return this.addAttribute(`${attr}="${value}"`, styles2, baseSelector);
+    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;
+      }
     }
-    attrContainsWord(attr, value, styles2, baseSelector) {
-      return this.addAttribute(`${attr}~="${value}"`, styles2, baseSelector);
+    return void 0;
+  }
+  function matchesContainerCondition(condition, containerWidth) {
+    const normalized = condition.trim().replace(/^\(+|\)+$/g, "").trim().toLowerCase();
+    if (!normalized) {
+      return true;
     }
-    attrStartsWith(attr, value, styles2, baseSelector) {
-      return this.addAttribute(`${attr}^="${value}"`, styles2, baseSelector);
+    if (normalized.startsWith("not ")) {
+      return !matchesContainerCondition(normalized.slice(4), containerWidth);
     }
-    attrEndsWith(attr, value, styles2, baseSelector) {
-      return this.addAttribute(`${attr}$="${value}"`, styles2, baseSelector);
+    const orClauses = splitConditionalClauses(normalized, "or");
+    if (orClauses.length > 1) {
+      return orClauses.some((clause) => matchesContainerCondition(clause, containerWidth));
     }
-    attrContains(attr, value, styles2, baseSelector) {
-      return this.addAttribute(`${attr}*="${value}"`, styles2, baseSelector);
+    const andClauses = splitConditionalClauses(normalized, "and");
+    if (andClauses.length > 1) {
+      return andClauses.every((clause) => matchesContainerCondition(clause, containerWidth));
     }
-    // Combinator Selectors
-    descendant(ancestor, descendant2, styles2) {
-      return this.createAndAddRule(`${ancestor} ${descendant2}`, styles2);
+    if (normalized.startsWith("min-width:")) {
+      const minWidth = parseMediaLength(normalized.slice("min-width:".length));
+      return minWidth !== void 0 && containerWidth >= minWidth;
     }
-    child(parent, childSel, styles2) {
-      return this.createAndAddRule(`${parent} > ${childSel}`, styles2);
+    if (normalized.startsWith("max-width:")) {
+      const maxWidth = parseMediaLength(normalized.slice("max-width:".length));
+      return maxWidth !== void 0 && containerWidth <= maxWidth;
     }
-    adjacentSibling(element, sibling, styles2) {
-      return this.createAndAddRule(`${element} + ${sibling}`, styles2);
+    return false;
+  }
+  function parseMediaLength(value) {
+    const match = value.trim().match(/^(-?\d+(?:\.\d+)?)(px|rem|em)?$/i);
+    if (!match) {
+      return void 0;
     }
-    generalSibling(element, sibling, styles2) {
-      return this.createAndAddRule(`${element} ~ ${sibling}`, styles2);
+    const numericValue = Number(match[1]);
+    const unit = (match[2] ?? "px").toLowerCase();
+    if (unit === "rem" || unit === "em") {
+      return numericValue * 16;
     }
-    multiple(selectors, styles2) {
-      return this.createAndAddRule(selectors.join(", "), styles2);
+    return numericValue;
+  }
+  function matchesMediaCondition(condition, options) {
+    const normalized = condition.trim().replace(/^\(+|\)+$/g, "").trim().toLowerCase();
+    if (!normalized) {
+      return true;
     }
-    // Nesting (BEM-style)
-    addName(name, styles2) {
-      const selector = name.startsWith("--") ? `&${name}` : `&--${name}`;
-      const rule = { selector, styles: styles2, type: "name" };
-      return rule;
+    if (normalized.startsWith("min-width:")) {
+      const minWidth = parseMediaLength(normalized.slice("min-width:".length));
+      return minWidth !== void 0 && options.viewportWidth !== void 0 && options.viewportWidth >= minWidth;
     }
-    nesting(parentRule, ...childRules) {
-      parentRule.nested = childRules;
-      return parentRule;
+    if (normalized.startsWith("max-width:")) {
+      const maxWidth = parseMediaLength(normalized.slice("max-width:".length));
+      return maxWidth !== void 0 && options.viewportWidth !== void 0 && options.viewportWidth <= maxWidth;
     }
-    // @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;
+    if (normalized === "prefers-color-scheme: dark") {
+      return options.colorScheme === "dark";
     }
-    keyframeFromTo(name, from, to) {
-      return this.keyframe(name, { from, to });
+    if (normalized === "prefers-color-scheme: light") {
+      return (options.colorScheme ?? "light") === "light";
     }
-    // @font-face - Custom Fonts
-    fontFace(options) {
-      this.fontFaces.push(options);
-      return options;
+    if (normalized === "prefers-reduced-motion: reduce") {
+      return options.reducedMotion === true;
     }
-    // @import - Import Stylesheets
-    import(url, mediaQuery) {
-      const importRule = mediaQuery ? `@import url("${url}") ${mediaQuery};` : `@import url("${url}");`;
-      this.imports.push(importRule);
-      return importRule;
+    return false;
+  }
+  function matchesMediaRule(rule, options) {
+    const mediaType = options.mediaType ?? "screen";
+    if (rule.type && rule.type !== mediaType && rule.type !== "all") {
+      return false;
     }
-    // @media - Media Queries
-    media(type, condition, rules) {
-      const mediaRule = { type, condition, rules: this.rulesToCSSRules(rules) };
-      this.mediaRules.push(mediaRule);
-      return mediaRule;
+    if (!rule.condition.trim()) {
+      return true;
     }
-    mediaScreen(condition, rules) {
-      return this.media("screen", condition, rules);
+    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);
+      }
     }
-    mediaPrint(rules) {
-      return this.media("print", "", rules);
+    for (const layerRule of layerRules) {
+      const normalizedName = layerRule.name.trim();
+      if (normalizedName && !orderedLayerNames.includes(normalizedName)) {
+        orderedLayerNames.push(normalizedName);
+      }
     }
-    mediaMinWidth(minWidth, rules) {
-      return this.media("screen", `min-width: ${minWidth}`, rules);
+    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;
+      }
+      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;
     }
-    mediaMaxWidth(maxWidth, rules) {
-      return this.media("screen", `max-width: ${maxWidth}`, rules);
+    const trailing = token.trim();
+    if (trailing) {
+      selectors.push(trailing);
     }
-    mediaDark(rules) {
-      const mediaRule = { type: "", condition: "prefers-color-scheme: dark", rules: this.rulesToCSSRules(rules) };
-      this.mediaRules.push(mediaRule);
-      return mediaRule;
+    return selectors;
+  }
+  function parsePseudoSelectorToken(token, startIndex) {
+    if (token[startIndex] !== ":" || token[startIndex + 1] === ":") {
+      return void 0;
     }
-    mediaLight(rules) {
-      const mediaRule = { type: "", condition: "prefers-color-scheme: light", rules: this.rulesToCSSRules(rules) };
-      this.mediaRules.push(mediaRule);
-      return mediaRule;
+    let cursor = startIndex + 1;
+    const nameMatch = token.slice(cursor).match(/^([_a-zA-Z][-_a-zA-Z0-9]*)/);
+    if (!nameMatch) {
+      return void 0;
     }
-    mediaReducedMotion(rules) {
-      const mediaRule = { type: "", condition: "prefers-reduced-motion: reduce", rules: this.rulesToCSSRules(rules) };
-      this.mediaRules.push(mediaRule);
-      return mediaRule;
+    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;
     }
-    // @container - Container Queries
-    container(condition, rules, name) {
-      const containerRule = { name, condition, rules: this.rulesToCSSRules(rules) };
-      this.containerRules.push(containerRule);
-      return containerRule;
+    return void 0;
+  }
+  function parseSimpleSelectorToken(token) {
+    const trimmed = token.trim();
+    if (!trimmed || /[*&]/.test(trimmed)) {
+      return void 0;
     }
-    addContainer(name, styles2) {
-      const containerStyles = { ...styles2, containerName: name };
-      return this.addClass(name, containerStyles);
+    let cursor = 0;
+    let tagName;
+    let idName;
+    const classNames = [];
+    const attributes = [];
+    const pseudoClasses = [];
+    const tagMatch = trimmed.slice(cursor).match(/^([_a-zA-Z][-_a-zA-Z0-9]*)/);
+    if (tagMatch) {
+      tagName = tagMatch[1].toLowerCase();
+      cursor += tagMatch[0].length;
+    }
+    while (cursor < trimmed.length) {
+      const char = trimmed[cursor];
+      if (char === ".") {
+        const classMatch = trimmed.slice(cursor).match(/^\.([_a-zA-Z][-_a-zA-Z0-9]*)/);
+        if (!classMatch) {
+          return void 0;
+        }
+        classNames.push(classMatch[1]);
+        cursor += classMatch[0].length;
+        continue;
+      }
+      if (char === "#") {
+        const idMatch = trimmed.slice(cursor).match(/^#([_a-zA-Z][-_a-zA-Z0-9]*)/);
+        if (!idMatch || idName) {
+          return void 0;
+        }
+        idName = idMatch[1];
+        cursor += idMatch[0].length;
+        continue;
+      }
+      if (char === "[") {
+        const endIndex = trimmed.indexOf("]", cursor + 1);
+        if (endIndex === -1) {
+          return void 0;
+        }
+        const rawAttribute = trimmed.slice(cursor + 1, endIndex).trim();
+        const attrMatch = rawAttribute.match(/^([_a-zA-Z][-_a-zA-Z0-9]*)(?:\s*(=|~=|\^=|\$=|\*=)\s*(?:"([^"]*)"|'([^']*)'|([^\s"']+)))?$/);
+        if (!attrMatch) {
+          return void 0;
+        }
+        attributes.push({
+          name: attrMatch[1].toLowerCase(),
+          operator: attrMatch[2],
+          value: attrMatch[3] ?? attrMatch[4] ?? attrMatch[5]
+        });
+        cursor = endIndex + 1;
+        continue;
+      }
+      if (char === ":") {
+        const pseudoToken = parsePseudoSelectorToken(trimmed, cursor);
+        if (!pseudoToken) {
+          return void 0;
+        }
+        pseudoClasses.push(pseudoToken.value);
+        cursor = pseudoToken.nextIndex;
+        continue;
+      }
+      return void 0;
     }
-    // @supports - Feature Queries
-    supports(condition, rules) {
-      const supportsRule = { condition, rules: this.rulesToCSSRules(rules) };
-      this.supportsRules.push(supportsRule);
-      return supportsRule;
+    if (!tagName && !idName && classNames.length === 0 && attributes.length === 0 && pseudoClasses.length === 0) {
+      return void 0;
     }
-    // @layer - Cascade Layers
-    layerOrder(...layers) {
-      this._layerOrder = layers;
+    return { tagName, idName, classNames, attributes, pseudoClasses };
+  }
+  function extractSupportedSelectorChains(selector, parsedSelectorChainCache) {
+    const cached = parsedSelectorChainCache.get(selector);
+    if (cached) {
+      return cached;
     }
-    layer(name, rules) {
-      const layerRule = { name, rules: this.rulesToCSSRules(rules) };
-      this.layerRules.push(layerRule);
-      return layerRule;
+    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;
+      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 && 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);
+    parsedSelectorChainCache.set(selector, parsedChains);
+    return parsedChains;
+  }
+
+  // src/client/style/native-resolver.ts
+  var NativeStyleResolver = class {
+    constructor() {
+      this.parsedSelectorChainCache = /* @__PURE__ */ new Map();
     }
-    // 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;
+    resolveNativeStyles(target, ancestors = [], options = {}, context) {
+      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 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);
+            }
+          }
+        }
+        applyRules(context.rules);
+        for (const supportsRule of context.supportsRules) {
+          if (matchesSupportsCondition(supportsRule.condition)) {
+            applyRules(supportsRule.rules);
+          }
+        }
+        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);
+          }
+        }
+        for (const mediaRule of context.mediaRules) {
+          if (matchesMediaRule(mediaRule, options)) {
+            applyRules(mediaRule.rules);
+          }
+        }
+        return resolved;
       });
-      return cssRules;
     }
-    important(value) {
-      return `${value} !important`;
+    resolveClassStyles(classNames, context) {
+      return this.resolveNativeStyles({ classNames }, [], {}, context);
     }
-    getVariables() {
-      return Object.fromEntries(this.variables.map((variable) => [variable.name, variable.value]));
+    hasContainerWidth(target) {
+      return typeof target.containerWidth === "number" && Number.isFinite(target.containerWidth);
     }
     resolveVariableReferences(value, variables) {
       let resolved = value;
@@ -307,447 +631,9 @@
       this.nativeTargetNormalizationCache = /* @__PURE__ */ new WeakMap();
       try {
         return callback();
-      } finally {
-        this.nativeTargetNormalizationCache = previousCache;
-      }
-    }
-    splitConditionalClauses(value, operator) {
-      const clauses = [];
-      let token = "";
-      let depth = 0;
-      for (let index = 0; index < value.length; index++) {
-        const char = value[index];
-        if (char === "(") {
-          depth += 1;
-        } else if (char === ")" && depth > 0) {
-          depth -= 1;
-        }
-        const operatorToken = ` ${operator} `;
-        if (depth === 0 && value.slice(index, index + operatorToken.length).toLowerCase() === operatorToken) {
-          const trimmed = token.trim();
-          if (trimmed) {
-            clauses.push(trimmed);
-          }
-          token = "";
-          index += operatorToken.length - 1;
-          continue;
-        }
-        token += char;
-      }
-      const trailing = token.trim();
-      if (trailing) {
-        clauses.push(trailing);
-      }
-      return clauses;
-    }
-    splitSelectorList(value) {
-      const selectors = [];
-      let token = "";
-      let attributeDepth = 0;
-      let parenthesisDepth = 0;
-      let quoted;
-      for (let index = 0; index < value.length; index++) {
-        const char = value[index];
-        if (quoted) {
-          token += char;
-          if (char === quoted && value[index - 1] !== "\\") {
-            quoted = void 0;
-          }
-          continue;
-        }
-        if (char === '"' || char === "'") {
-          quoted = char;
-          token += char;
-          continue;
-        }
-        if (char === "[") {
-          attributeDepth += 1;
-          token += char;
-          continue;
-        }
-        if (char === "]" && attributeDepth > 0) {
-          attributeDepth -= 1;
-          token += char;
-          continue;
-        }
-        if (attributeDepth === 0 && char === "(") {
-          parenthesisDepth += 1;
-          token += char;
-          continue;
-        }
-        if (attributeDepth === 0 && char === ")" && parenthesisDepth > 0) {
-          parenthesisDepth -= 1;
-          token += char;
-          continue;
-        }
-        if (attributeDepth === 0 && parenthesisDepth === 0 && char === ",") {
-          const trimmed = token.trim();
-          if (trimmed) {
-            selectors.push(trimmed);
-          }
-          token = "";
-          continue;
-        }
-        token += char;
-      }
-      const trailing = token.trim();
-      if (trailing) {
-        selectors.push(trailing);
-      }
-      return selectors;
-    }
-    parsePseudoSelectorToken(token, startIndex) {
-      if (token[startIndex] !== ":" || token[startIndex + 1] === ":") {
-        return void 0;
-      }
-      let cursor = startIndex + 1;
-      const nameMatch = token.slice(cursor).match(/^([_a-zA-Z][-_a-zA-Z0-9]*)/);
-      if (!nameMatch) {
-        return void 0;
-      }
-      const pseudoName = nameMatch[1].toLowerCase();
-      cursor += nameMatch[0].length;
-      if (token[cursor] !== "(") {
-        return { value: pseudoName, nextIndex: cursor };
-      }
-      const argumentStart = cursor + 1;
-      let attributeDepth = 0;
-      let parenthesisDepth = 1;
-      let quoted;
-      cursor += 1;
-      while (cursor < token.length) {
-        const char = token[cursor];
-        if (quoted) {
-          if (char === quoted && token[cursor - 1] !== "\\") {
-            quoted = void 0;
-          }
-          cursor += 1;
-          continue;
-        }
-        if (char === '"' || char === "'") {
-          quoted = char;
-          cursor += 1;
-          continue;
-        }
-        if (char === "[") {
-          attributeDepth += 1;
-          cursor += 1;
-          continue;
-        }
-        if (char === "]" && attributeDepth > 0) {
-          attributeDepth -= 1;
-          cursor += 1;
-          continue;
-        }
-        if (attributeDepth === 0 && char === "(") {
-          parenthesisDepth += 1;
-          cursor += 1;
-          continue;
-        }
-        if (attributeDepth === 0 && char === ")") {
-          parenthesisDepth -= 1;
-          if (parenthesisDepth === 0) {
-            const pseudoArgument = token.slice(argumentStart, cursor).trim();
-            return {
-              value: pseudoArgument.length > 0 ? `${pseudoName}(${pseudoArgument})` : `${pseudoName}()`,
-              nextIndex: cursor + 1
-            };
-          }
-          cursor += 1;
-          continue;
-        }
-        cursor += 1;
-      }
-      return void 0;
-    }
-    matchesSupportsDeclaration(property, value) {
-      const normalizedProperty = property.trim().toLowerCase();
-      const normalizedValue = value.trim().toLowerCase();
-      const supportedProperties = /* @__PURE__ */ new Set([
-        "align-items",
-        "background",
-        "background-color",
-        "backdrop-filter",
-        "border",
-        "border-radius",
-        "box-shadow",
-        "color",
-        "column-gap",
-        "container-name",
-        "container-type",
-        "display",
-        "flex",
-        "flex-direction",
-        "flex-grow",
-        "flex-wrap",
-        "font-family",
-        "font-size",
-        "font-weight",
-        "gap",
-        "grid-template-columns",
-        "height",
-        "justify-content",
-        "letter-spacing",
-        "line-height",
-        "margin",
-        "margin-bottom",
-        "margin-left",
-        "margin-right",
-        "margin-top",
-        "max-height",
-        "max-width",
-        "min-height",
-        "min-width",
-        "padding",
-        "padding-bottom",
-        "padding-end",
-        "padding-horizontal",
-        "padding-left",
-        "padding-right",
-        "padding-start",
-        "padding-top",
-        "padding-vertical",
-        "row-gap",
-        "text-align",
-        "text-decoration",
-        "text-transform",
-        "width"
-      ]);
-      if (!supportedProperties.has(normalizedProperty)) {
-        return false;
-      }
-      if (normalizedProperty === "display") {
-        return (/* @__PURE__ */ new Set(["block", "flex", "grid", "inline", "inline-block", "inline-flex", "inline-grid"])).has(normalizedValue);
-      }
-      if (normalizedProperty === "backdrop-filter") {
-        return /blur\(/.test(normalizedValue);
-      }
-      if (normalizedProperty === "container-type") {
-        return (/* @__PURE__ */ new Set(["inline-size", "size"])).has(normalizedValue);
-      }
-      return true;
-    }
-    matchesSupportsCondition(condition) {
-      const normalized = condition.trim().replace(/^\(+|\)+$/g, "").trim();
-      if (!normalized) {
-        return true;
-      }
-      if (normalized.toLowerCase().startsWith("not ")) {
-        return !this.matchesSupportsCondition(normalized.slice(4));
-      }
-      const orClauses = this.splitConditionalClauses(normalized, "or");
-      if (orClauses.length > 1) {
-        return orClauses.some((clause) => this.matchesSupportsCondition(clause));
-      }
-      const andClauses = this.splitConditionalClauses(normalized, "and");
-      if (andClauses.length > 1) {
-        return andClauses.every((clause) => this.matchesSupportsCondition(clause));
-      }
-      const declarationMatch = normalized.match(/^([a-z-]+)\s*:\s*(.+)$/i);
-      if (!declarationMatch) {
-        return false;
-      }
-      return this.matchesSupportsDeclaration(declarationMatch[1], declarationMatch[2]);
-    }
-    findMatchingContainerTarget(ancestors, name) {
-      const normalizedName = typeof name === "string" && name.trim() ? name.trim().toLowerCase() : void 0;
-      for (let index = ancestors.length - 1; index >= 0; index--) {
-        const ancestor = ancestors[index];
-        if (!ancestor?.isContainer || ancestor.containerWidth === void 0) {
-          continue;
-        }
-        if (!normalizedName) {
-          return ancestor;
-        }
-        if ((ancestor.containerNames ?? []).includes(normalizedName)) {
-          return ancestor;
-        }
-      }
-      return void 0;
-    }
-    matchesContainerCondition(condition, containerWidth) {
-      const normalized = condition.trim().replace(/^\(+|\)+$/g, "").trim().toLowerCase();
-      if (!normalized) {
-        return true;
-      }
-      if (normalized.startsWith("not ")) {
-        return !this.matchesContainerCondition(normalized.slice(4), containerWidth);
-      }
-      const orClauses = this.splitConditionalClauses(normalized, "or");
-      if (orClauses.length > 1) {
-        return orClauses.some((clause) => this.matchesContainerCondition(clause, containerWidth));
-      }
-      const andClauses = this.splitConditionalClauses(normalized, "and");
-      if (andClauses.length > 1) {
-        return andClauses.every((clause) => this.matchesContainerCondition(clause, containerWidth));
-      }
-      if (normalized.startsWith("min-width:")) {
-        const minWidth = this.parseMediaLength(normalized.slice("min-width:".length));
-        return minWidth !== void 0 && containerWidth >= minWidth;
-      }
-      if (normalized.startsWith("max-width:")) {
-        const maxWidth = this.parseMediaLength(normalized.slice("max-width:".length));
-        return maxWidth !== void 0 && containerWidth <= maxWidth;
-      }
-      return false;
-    }
-    parseSimpleSelectorToken(token) {
-      const trimmed = token.trim();
-      if (!trimmed || /[*&]/.test(trimmed)) {
-        return void 0;
-      }
-      let cursor = 0;
-      let tagName;
-      let idName;
-      const classNames = [];
-      const attributes = [];
-      const pseudoClasses = [];
-      const tagMatch = trimmed.slice(cursor).match(/^([_a-zA-Z][-_a-zA-Z0-9]*)/);
-      if (tagMatch) {
-        tagName = tagMatch[1].toLowerCase();
-        cursor += tagMatch[0].length;
-      }
-      while (cursor < trimmed.length) {
-        const char = trimmed[cursor];
-        if (char === ".") {
-          const classMatch = trimmed.slice(cursor).match(/^\.([_a-zA-Z][-_a-zA-Z0-9]*)/);
-          if (!classMatch) {
-            return void 0;
-          }
-          classNames.push(classMatch[1]);
-          cursor += classMatch[0].length;
-          continue;
-        }
-        if (char === "#") {
-          const idMatch = trimmed.slice(cursor).match(/^#([_a-zA-Z][-_a-zA-Z0-9]*)/);
-          if (!idMatch || idName) {
-            return void 0;
-          }
-          idName = idMatch[1];
-          cursor += idMatch[0].length;
-          continue;
-        }
-        if (char === "[") {
-          const endIndex = trimmed.indexOf("]", cursor + 1);
-          if (endIndex === -1) {
-            return void 0;
-          }
-          const rawAttribute = trimmed.slice(cursor + 1, endIndex).trim();
-          const attrMatch = rawAttribute.match(/^([_a-zA-Z][-_a-zA-Z0-9]*)(?:\s*(=|~=|\^=|\$=|\*=)\s*(?:"([^"]*)"|'([^']*)'|([^\s"']+)))?$/);
-          if (!attrMatch) {
-            return void 0;
-          }
-          attributes.push({
-            name: attrMatch[1].toLowerCase(),
-            operator: attrMatch[2],
-            value: attrMatch[3] ?? attrMatch[4] ?? attrMatch[5]
-          });
-          cursor = endIndex + 1;
-          continue;
-        }
-        if (char === ":") {
-          const pseudoToken = this.parsePseudoSelectorToken(trimmed, cursor);
-          if (!pseudoToken) {
-            return void 0;
-          }
-          pseudoClasses.push(pseudoToken.value);
-          cursor = pseudoToken.nextIndex;
-          continue;
-        }
-        return void 0;
-      }
-      if (!tagName && !idName && classNames.length === 0 && attributes.length === 0 && pseudoClasses.length === 0) {
-        return void 0;
-      }
-      return { tagName, idName, classNames, attributes, pseudoClasses };
-    }
-    extractSupportedSelectorChains(selector) {
-      const cached = this.parsedSelectorChainCache.get(selector);
-      if (cached) {
-        return cached;
-      }
-      const parsedChains = this.splitSelectorList(selector).map((segment) => segment.trim()).map((segment) => {
-        const chain = [];
-        let token = "";
-        let combinator = "descendant";
-        let invalid = false;
-        let attributeDepth = 0;
-        let parenthesisDepth = 0;
-        let quoted;
-        const flushToken = () => {
-          const trimmedToken = token.trim();
-          token = "";
-          if (!trimmedToken || invalid) {
-            return;
-          }
-          const parsed = this.parseSimpleSelectorToken(trimmedToken);
-          if (!parsed) {
-            invalid = true;
-            return;
-          }
-          if (chain.length > 0) {
-            parsed.combinator = combinator;
-          }
-          chain.push(parsed);
-          combinator = "descendant";
-        };
-        for (let index = 0; index < segment.length; index++) {
-          const char = segment[index];
-          if (quoted) {
-            token += char;
-            if (char === quoted && segment[index - 1] !== "\\") {
-              quoted = void 0;
-            }
-            continue;
-          }
-          if (char === '"' || char === "'") {
-            quoted = char;
-            token += char;
-            continue;
-          }
-          if (char === "[") {
-            attributeDepth += 1;
-            token += char;
-            continue;
-          }
-          if (char === "]") {
-            if (attributeDepth > 0) {
-              attributeDepth -= 1;
-            }
-            token += char;
-            continue;
-          }
-          if (attributeDepth === 0 && char === "(") {
-            parenthesisDepth += 1;
-            token += char;
-            continue;
-          }
-          if (attributeDepth === 0 && char === ")" && parenthesisDepth > 0) {
-            parenthesisDepth -= 1;
-            token += char;
-            continue;
-          }
-          if (attributeDepth === 0 && parenthesisDepth === 0 && (char === ">" || char === "+" || char === "~")) {
-            flushToken();
-            if (invalid) break;
-            combinator = char === ">" ? "child" : char === "+" ? "adjacent-sibling" : "general-sibling";
-            continue;
-          }
-          if (attributeDepth === 0 && parenthesisDepth === 0 && /\s/.test(char)) {
-            flushToken();
-            if (invalid) break;
-            continue;
-          }
-          token += char;
-        }
-        flushToken();
-        if (invalid || chain.length === 0) {
-          return void 0;
-        }
-        return chain.some((part) => Boolean(part.tagName) || Boolean(part.idName) || part.classNames.length > 0 || part.attributes.length > 0 || part.pseudoClasses.length > 0) ? chain : void 0;
-      }).filter((segment) => Array.isArray(segment) && segment.length > 0);
-      this.parsedSelectorChainCache.set(selector, parsedChains);
-      return parsedChains;
+      } finally {
+        this.nativeTargetNormalizationCache = previousCache;
+      }
     }
     matchesAttributeSelector(targetValue, selector) {
       if (selector.operator === void 0) {
@@ -834,13 +720,13 @@
           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;
             }
@@ -889,7 +775,7 @@
       return Number.isInteger(n) && n >= 0;
     }
     matchesHasPseudoClass(target, pseudoArgument) {
-      const selectorArguments = this.splitSelectorList(pseudoArgument);
+      const selectorArguments = splitSelectorList(pseudoArgument);
       if (selectorArguments.length === 0) {
         return false;
       }
@@ -904,7 +790,7 @@
       if (!scopeRelativeSelector) {
         return false;
       }
-      const selectorChains = this.extractSupportedSelectorChains(scopeRelativeSelector);
+      const selectorChains = extractSupportedSelectorChains(scopeRelativeSelector, this.parsedSelectorChainCache);
       if (selectorChains.length === 0) {
         return false;
       }
@@ -944,356 +830,471 @@
       const nextAncestors = [...ancestors, target];
       return (target.children ?? []).some((child) => this.matchesSelectorChainInSubtree(child, nextAncestors, chain));
     }
-    matchesSelectorChain(target, ancestors, chain) {
-      const initialCursor = {
-        target,
-        ancestorIndex: ancestors.length - 1,
-        previousSiblings: Array.isArray(target.previousSiblings) ? target.previousSiblings : []
-      };
-      return this.matchesSelectorChainFromCursor(chain, chain.length - 1, ancestors, initialCursor);
+    matchesSelectorChain(target, ancestors, chain) {
+      const initialCursor = {
+        target,
+        ancestorIndex: ancestors.length - 1,
+        previousSiblings: Array.isArray(target.previousSiblings) ? target.previousSiblings : []
+      };
+      return this.matchesSelectorChainFromCursor(chain, chain.length - 1, ancestors, initialCursor);
+    }
+    getAncestorCursor(ancestors, ancestorIndex) {
+      if (ancestorIndex < 0 || ancestorIndex >= ancestors.length) {
+        return void 0;
+      }
+      const ancestor = ancestors[ancestorIndex];
+      return {
+        target: ancestor,
+        ancestorIndex: ancestorIndex - 1,
+        previousSiblings: Array.isArray(ancestor.previousSiblings) ? ancestor.previousSiblings : []
+      };
+    }
+    matchesSelectorChainFromCursor(chain, chainIndex, ancestors, cursor) {
+      if (!this.matchesSelectorPart(cursor.target, chain[chainIndex])) {
+        return false;
+      }
+      if (chainIndex === 0) {
+        return true;
+      }
+      const combinator = chain[chainIndex].combinator ?? "descendant";
+      switch (combinator) {
+        case "child": {
+          const parentCursor = this.getAncestorCursor(ancestors, cursor.ancestorIndex);
+          return parentCursor ? this.matchesSelectorChainFromCursor(chain, chainIndex - 1, ancestors, parentCursor) : false;
+        }
+        case "adjacent-sibling": {
+          const siblingIndex = cursor.previousSiblings.length - 1;
+          if (siblingIndex < 0) {
+            return false;
+          }
+          return this.matchesSelectorChainFromCursor(chain, chainIndex - 1, ancestors, {
+            target: cursor.previousSiblings[siblingIndex],
+            ancestorIndex: cursor.ancestorIndex,
+            previousSiblings: cursor.previousSiblings.slice(0, siblingIndex)
+          });
+        }
+        case "general-sibling": {
+          for (let siblingIndex = cursor.previousSiblings.length - 1; siblingIndex >= 0; siblingIndex--) {
+            if (this.matchesSelectorChainFromCursor(chain, chainIndex - 1, ancestors, {
+              target: cursor.previousSiblings[siblingIndex],
+              ancestorIndex: cursor.ancestorIndex,
+              previousSiblings: cursor.previousSiblings.slice(0, siblingIndex)
+            })) {
+              return true;
+            }
+          }
+          return false;
+        }
+        case "descendant":
+        default: {
+          for (let ancestorIndex = cursor.ancestorIndex; ancestorIndex >= 0; ancestorIndex--) {
+            const ancestorCursor = this.getAncestorCursor(ancestors, ancestorIndex);
+            if (ancestorCursor && this.matchesSelectorChainFromCursor(chain, chainIndex - 1, ancestors, ancestorCursor)) {
+              return true;
+            }
+          }
+          return false;
+        }
+      }
+    }
+  };
+
+  // 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);
+    }
+    attrContains(attr, value, styles2, baseSelector) {
+      return this.addAttribute(`${attr}*="${value}"`, styles2, baseSelector);
+    }
+    descendant(ancestor, descendant2, styles2) {
+      return this.createAndAddRule(`${ancestor} ${descendant2}`, styles2);
+    }
+    child(parent, childSel, styles2) {
+      return this.createAndAddRule(`${parent} > ${childSel}`, styles2);
+    }
+    adjacentSibling(element, sibling, styles2) {
+      return this.createAndAddRule(`${element} + ${sibling}`, styles2);
+    }
+    generalSibling(element, sibling, styles2) {
+      return this.createAndAddRule(`${element} ~ ${sibling}`, styles2);
+    }
+    multiple(selectors, styles2) {
+      return this.createAndAddRule(selectors.join(", "), styles2);
+    }
+    addName(name, styles2) {
+      const selector = name.startsWith("--") ? `&${name}` : `&--${name}`;
+      return { selector, styles: styles2, type: "name" };
+    }
+    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;
+    }
+    keyframeFromTo(name, from, to) {
+      return this.keyframe(name, { from, to });
     }
-    getAncestorCursor(ancestors, ancestorIndex) {
-      if (ancestorIndex < 0 || ancestorIndex >= ancestors.length) {
-        return void 0;
-      }
-      const ancestor = ancestors[ancestorIndex];
-      return {
-        target: ancestor,
-        ancestorIndex: ancestorIndex - 1,
-        previousSiblings: Array.isArray(ancestor.previousSiblings) ? ancestor.previousSiblings : []
-      };
+    fontFace(options) {
+      this.fontFaces.push(options);
+      return options;
     }
-    matchesSelectorChainFromCursor(chain, chainIndex, ancestors, cursor) {
-      if (!this.matchesSelectorPart(cursor.target, chain[chainIndex])) {
-        return false;
-      }
-      if (chainIndex === 0) {
-        return true;
-      }
-      const combinator = chain[chainIndex].combinator ?? "descendant";
-      switch (combinator) {
-        case "child": {
-          const parentCursor = this.getAncestorCursor(ancestors, cursor.ancestorIndex);
-          return parentCursor ? this.matchesSelectorChainFromCursor(chain, chainIndex - 1, ancestors, parentCursor) : false;
-        }
-        case "adjacent-sibling": {
-          const siblingIndex = cursor.previousSiblings.length - 1;
-          if (siblingIndex < 0) {
-            return false;
-          }
-          return this.matchesSelectorChainFromCursor(chain, chainIndex - 1, ancestors, {
-            target: cursor.previousSiblings[siblingIndex],
-            ancestorIndex: cursor.ancestorIndex,
-            previousSiblings: cursor.previousSiblings.slice(0, siblingIndex)
-          });
-        }
-        case "general-sibling": {
-          for (let siblingIndex = cursor.previousSiblings.length - 1; siblingIndex >= 0; siblingIndex--) {
-            if (this.matchesSelectorChainFromCursor(chain, chainIndex - 1, ancestors, {
-              target: cursor.previousSiblings[siblingIndex],
-              ancestorIndex: cursor.ancestorIndex,
-              previousSiblings: cursor.previousSiblings.slice(0, siblingIndex)
-            })) {
-              return true;
-            }
-          }
-          return false;
-        }
-        case "descendant":
-        default: {
-          for (let ancestorIndex = cursor.ancestorIndex; ancestorIndex >= 0; ancestorIndex--) {
-            const ancestorCursor = this.getAncestorCursor(ancestors, ancestorIndex);
-            if (ancestorCursor && this.matchesSelectorChainFromCursor(chain, chainIndex - 1, ancestors, ancestorCursor)) {
-              return true;
-            }
-          }
-          return false;
-        }
-      }
+    import(url, mediaQuery) {
+      const importRule = mediaQuery ? `@import url("${url}") ${mediaQuery};` : `@import url("${url}");`;
+      this.imports.push(importRule);
+      return importRule;
     }
-    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;
+    media(type, condition, rules) {
+      const mediaRule = { type, condition, rules: this.rulesToCSSRules(rules) };
+      this.mediaRules.push(mediaRule);
+      return mediaRule;
     }
-    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;
+    mediaScreen(condition, rules) {
+      return this.media("screen", condition, rules);
     }
-    matchesMediaRule(rule, options) {
-      const mediaType = options.mediaType ?? "screen";
-      if (rule.type && rule.type !== mediaType && rule.type !== "all") {
-        return false;
-      }
-      if (!rule.condition.trim()) {
-        return true;
-      }
-      return rule.condition.split(/\band\b/i).map((part) => part.trim()).filter(Boolean).every((part) => this.matchesMediaCondition(part, options));
-    }
-    getOrderedLayerNames() {
-      const orderedLayerNames = [];
-      for (const layerName of this._layerOrder) {
-        const normalizedName = layerName.trim();
-        if (normalizedName && !orderedLayerNames.includes(normalizedName)) {
-          orderedLayerNames.push(normalizedName);
-        }
-      }
-      for (const layerRule of this.layerRules) {
-        const normalizedName = layerRule.name.trim();
-        if (normalizedName && !orderedLayerNames.includes(normalizedName)) {
-          orderedLayerNames.push(normalizedName);
-        }
-      }
-      return orderedLayerNames;
+    mediaPrint(rules) {
+      return this.media("print", "", rules);
     }
-    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;
-      });
+    mediaMinWidth(minWidth, rules) {
+      return this.media("screen", `min-width: ${minWidth}`, rules);
     }
-    resolveClassStyles(classNames) {
-      return this.resolveNativeStyles({ classNames });
+    mediaMaxWidth(maxWidth, rules) {
+      return this.media("screen", `max-width: ${maxWidth}`, rules);
     }
-    // Utility Methods
-    toKebabCase(str) {
-      return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+    mediaDark(rules) {
+      const mediaRule = { type: "", condition: "prefers-color-scheme: dark", rules: this.rulesToCSSRules(rules) };
+      this.mediaRules.push(mediaRule);
+      return mediaRule;
     }
-    // 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;
+    mediaLight(rules) {
+      const mediaRule = { type: "", condition: "prefers-color-scheme: light", rules: this.rulesToCSSRules(rules) };
+      this.mediaRules.push(mediaRule);
+      return mediaRule;
     }
-    // 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"
-      }));
+    mediaReducedMotion(rules) {
+      const mediaRule = { type: "", condition: "prefers-reduced-motion: reduce", rules: this.rulesToCSSRules(rules) };
+      this.mediaRules.push(mediaRule);
+      return mediaRule;
     }
-    // Helper: Render rules with indentation (eliminates duplication in render methods)
-    renderRulesWithIndent(rules, indent = "    ") {
-      return rules.map((rule) => this.renderRule(rule, indent)).join("\n");
+    container(condition, rules, name) {
+      const containerRule = { name, condition, rules: this.rulesToCSSRules(rules) };
+      this.containerRules.push(containerRule);
+      return containerRule;
     }
-    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");
+    addContainer(name, styles2) {
+      const containerStyles = { ...styles2, containerName: name };
+      return this.addClass(name, containerStyles);
     }
-    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;
+    supports(condition, rules) {
+      const supportsRule = { condition, rules: this.rulesToCSSRules(rules) };
+      this.supportsRules.push(supportsRule);
+      return supportsRule;
     }
-    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)}
-}`;
+    layerOrder(...layers) {
+      this._layerOrder = layers;
     }
-    renderKeyframes(kf) {
-      let css = `@keyframes ${kf.name} {
-`;
-      for (const step of kf.steps) {
-        css += `    ${step.step} {
-${this.stylesToString(step.styles, "        ")}
+    layer(name, rules) {
+      const layerRule = { name, rules: this.rulesToCSSRules(rules) };
+      this.layerRules.push(layerRule);
+      return layerRule;
     }
-`;
-      }
-      css += "}";
-      return css;
+    add(rules) {
+      return Object.entries(rules).map(([selector, styles2]) => {
+        const rule = { selector, styles: styles2, type: "custom" };
+        this.rules.push(rule);
+        return rule;
+      });
     }
-    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;
+    important(value) {
+      return `${value} !important`;
     }
-    renderContainerRule(container2) {
-      const nameStr = container2.name ? `${container2.name} ` : "";
-      return `@container ${nameStr}(${container2.condition}) {
-${this.renderRulesWithIndent(container2.rules)}
-}`;
+    getVariables() {
+      return Object.fromEntries(this.variables.map((variable) => [variable.name, variable.value]));
     }
-    renderSupportsRule(supports) {
-      return `@supports (${supports.condition}) {
-${this.renderRulesWithIndent(supports.rules)}
-}`;
+    resolveNativeStyles(target, ancestors = [], options = {}) {
+      return this.nativeStyleResolver.resolveNativeStyles(target, ancestors, options, this.getResolverContext());
     }
-    renderLayerRule(layer2) {
-      return `@layer ${layer2.name} {
-${this.renderRulesWithIndent(layer2.rules)}
-}`;
+    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;
@@ -1310,6 +1311,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 {
@@ -1353,6 +1391,7 @@ ${varDeclarations}
     add: addStyle,
     important,
     getVariables: getStyleVariables,
+    resolveNativeStyles,
     resolveClassStyles,
     render: renderStyle,
     inject: injectStyle,