tailwind-styled-v4 5.0.35 → 5.0.36

package/dist/index.browser.mjs

@@ -1,5 +1,3 @@
-import React3 from 'react';
-
 /* tailwind-styled-v4 v5.0.4 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
@@ -8,6 +6,12 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 
+// packages/domain/core/src/twProxy.ts
+import React2 from "react";
+
+// packages/domain/core/src/createComponent.ts
+import React from "react";
+
 // packages/domain/core/src/native.browser.ts
 var getNativeBinding = () => null;
 
@@ -29,20 +33,26 @@ function hashContainer(tag, container, name) {
   const sortedKey = tag + (name ?? "") + JSON.stringify(Object.entries(container).sort());
   const cached = _hashContainerCache.get(sortedKey);
   if (cached) return cached;
-  {
+  const native = getNativeBinding();
+  if (!native?.hashContent) {
     throw new Error("FATAL: Native binding 'hashContent' is required but not available.");
   }
+  const id = `tw-cq-${native.hashContent(sortedKey, "fnv", 6)}`;
+  _hashContainerCache.set(sortedKey, id);
+  return id;
 }
 function layoutClassesToCss(classes) {
-  {
+  const native = getNativeBinding();
+  if (!native?.layoutClassesToCss) {
     throw new Error("FATAL: Native binding 'layoutClassesToCss' is required but not available.");
   }
+  return native.layoutClassesToCss(classes);
 }
 function buildContainerRules(id, container, containerName) {
   const rules = Object.entries(container).map(([key, value]) => {
     const minWidth = typeof value === "string" ? CONTAINER_BREAKPOINTS[key] ?? key : value.minWidth ?? CONTAINER_BREAKPOINTS[key] ?? key;
-    typeof value === "string" ? value : value.classes;
-    const css = layoutClassesToCss();
+    const classes = typeof value === "string" ? value : value.classes;
+    const css = layoutClassesToCss(classes);
     if (!css) return null;
     const query = containerName ? `@container ${containerName} (min-width: ${minWidth})` : `@container (min-width: ${minWidth})`;
     return `${query}{.${id}{${css}}}`;
@@ -110,10 +120,16 @@ function processContainer(tag, container, containerName) {
   return { containerClass: id, hasContainer: true };
 }
 function generateContainerCss(tag, container, containerName) {
-  hashContainer(tag, container, containerName);
-  {
+  const id = hashContainer(tag, container, containerName);
+  const native = getNativeBinding();
+  if (!native?.buildContainerRules) {
     throw new Error("FATAL: Native binding 'buildContainerRules' is required but not available.");
   }
+  const breakpoints = Object.entries(container).map(([key, value]) => ({
+    key,
+    classes: typeof value === "string" ? value : value.classes
+  }));
+  return native.buildContainerRules(id, breakpoints, containerName ?? null);
 }
 function getContainerRegistry() {
   return containerRegistry;
@@ -128,9 +144,11 @@ function createTwMerge(_options = {}) {
       if (v) inputs.push(String(v));
     }
     if (inputs.length === 0) return "";
-    {
+    const native = getNativeBinding();
+    if (!native?.twMergeRaw) {
       throw new Error("Native binding 'twMergeRaw' is required but not available.");
     }
+    return native.twMergeRaw(inputs);
   };
 }
 var twMerge = createTwMerge();
@@ -153,17 +171,20 @@ function hashState(tag, state) {
   const sortedKey = tag + JSON.stringify(Object.entries(state).sort());
   const cached = _hashStateCache.get(sortedKey);
   if (cached) return cached;
-  {
+  const native = getNativeBinding();
+  if (!native?.hashContent) {
     throw new Error("FATAL: Native binding 'hashContent' is required but not available.");
   }
-}
-var _twClassesToCssCache = /* @__PURE__ */ new Map();
-function twClassesToCss(classes) {
-  const cached = _twClassesToCssCache.get(classes);
-  if (cached !== void 0) return cached;
-  {
-    throw new Error("FATAL: Native binding 'twClassesToCss' is required but not available.");
+  const id = `tw-s-${native.hashContent(sortedKey, "fnv", 6)}`;
+  _hashStateCache.set(sortedKey, id);
+  return id;
+}
+function generateStateRules(id, state) {
+  const native = getNativeBinding();
+  if (!native?.generateRuntimeStateCss) {
+    throw new Error("FATAL: Native binding 'generateRuntimeStateCss' is required but not available.");
   }
+  return native.generateRuntimeStateCss(id, JSON.stringify(state), null).map((rule) => rule.cssRule);
 }
 var _staticCssDetected = /* @__PURE__ */ new Set();
 var _batchedInjectFn = null;
@@ -195,10 +216,7 @@ function injectStateStyles(id, state) {
       }
     }
   }
-  const rules = Object.entries(state).map(([stateName, classes]) => {
-    const css = twClassesToCss(classes);
-    return css ? `.${id}[data-${stateName}="true"]{${css}}` : null;
-  }).filter(Boolean);
+  const rules = generateStateRules(id, state);
   if (rules.length === 0) return;
   if (_batchedInjectFn) {
     for (const rule of rules) _batchedInjectFn(rule);
@@ -228,11 +246,7 @@ function processState(tag, state, precomputedHash) {
 }
 function generateStateCss(tag, state) {
   const id = hashState(tag, state);
-  const rules = Object.entries(state).map(([stateName, classes]) => {
-    const css = twClassesToCss(classes);
-    return css ? `.${id}[data-${stateName}="true"]{${css}}` : null;
-  }).filter(Boolean);
-  return rules.join("\n");
+  return generateStateRules(id, state).join("\n");
 }
 function getStateRegistry() {
   return stateRegistry;
@@ -254,9 +268,18 @@ function _getParsedTemplate(template) {
     _templateParseCache.set(template, result2);
     return result2;
   }
-  {
+  const native = getNativeBinding();
+  if (!native?.parseSubcomponentBlocksNapi) {
     throw new Error("FATAL: Native binding 'parseSubcomponentBlocksNapi' is required but not available.");
   }
+  const r = native.parseSubcomponentBlocksNapi(template, "tw");
+  const raw = JSON.parse(r.subMapJson);
+  const result = {
+    baseClasses: r.baseClasses.trim().replace(/\s+/g, " "),
+    subMap: new Map(Object.entries(raw))
+  };
+  _templateParseCache.set(template, result);
+  return result;
 }
 function parseSubComponentBlocks(template) {
   return _getParsedTemplate(template).subMap;
@@ -330,13 +353,13 @@ function createSubComponentAccessor(parentDisplayName, name, classes, tag = "spa
     className
   }) => {
     const mergedClass = className ? `${classes} ${className}` : classes;
-    if (asChild && React3.isValidElement(children)) {
-      const child = React3.Children.only(children);
-      return React3.cloneElement(child, {
+    if (asChild && React.isValidElement(children)) {
+      const child = React.Children.only(children);
+      return React.cloneElement(child, {
         className: child.props.className ? `${mergedClass} ${child.props.className}` : mergedClass
       });
     }
-    return React3.createElement(tag, { className: mergedClass }, children);
+    return React.createElement(tag, { className: mergedClass }, children);
   };
   SubComponent.displayName = `${parentDisplayName}[${name}]`;
   return SubComponent;
@@ -392,12 +415,17 @@ function makeFilterProps(variantKeys, stateKeys = /* @__PURE__ */ new Set()) {
 }
 function resolveVariants(variants, props, defaults) {
   const variantKeys = Object.keys(variants);
+  const cleanProps = {};
   for (const k of variantKeys) {
-    props[k];
+    const v = props[k];
+    if (v !== void 0 && v !== null) cleanProps[k] = String(v);
   }
-  {
+  const binding = getNativeBinding();
+  if (!binding?.resolveSimpleVariants) {
     throw new Error("FATAL: Native binding 'resolveSimpleVariants' is required but not available.");
   }
+  const result = binding.resolveSimpleVariants(null, variants, defaults, cleanProps);
+  return result.trim().replace(/\s+/g, " ");
 }
 function resolveStates(statesConfig, stateKeys, statesLookup, props) {
   if (statesLookup && stateKeys.length > 0) {
@@ -425,6 +453,7 @@ function carryOverSubComponents(target, source) {
   const INTERNAL_KEYS = /* @__PURE__ */ new Set(["extend", "withVariants", "animate", "withSub", "displayName"]);
   for (const key of Object.keys(source)) {
     if (!INTERNAL_KEYS.has(key)) {
+      ;
       target[key] = source[key];
     }
   }
@@ -500,7 +529,7 @@ function createComponent(tag, config) {
   const base = typeof config === "string" ? config : config.base ?? "";
   const variants = typeof config === "string" ? {} : config.variants ?? {};
   const compoundVariants = typeof config === "string" ? [] : config.compoundVariants ?? [];
-  typeof config === "string" ? {} : config.defaultVariants ?? {};
+  const defaultVariants = typeof config === "string" ? {} : config.defaultVariants ?? {};
   const stateConfig = typeof config === "string" ? void 0 : config.state;
   const containerConfig = typeof config === "string" ? void 0 : config.container;
   const containerName = typeof config === "string" ? void 0 : config.containerName;
@@ -518,7 +547,12 @@ function createComponent(tag, config) {
     } else {
       try {
         const native = getNativeBinding();
-        if (native?.pregenerateStatesNapi) ;
+        if (native?.pregenerateStatesNapi) {
+          const result2 = native.pregenerateStatesNapi(statesConfig);
+          statesLookup = JSON.parse(result2.lookupJson);
+          stateKeys = result2.stateKeys;
+          _statesLookupCache.set(statesCacheKey, { lookup: statesLookup, keys: stateKeys });
+        }
       } catch (e) {
         console.warn("[tailwind-styled-v4] states pre-generation failed, falling back to runtime cx()", e);
       }
@@ -536,13 +570,13 @@ function createComponent(tag, config) {
   const filterProps = makeFilterProps(new Set(Object.keys(variants)), new Set(stateKeys));
   const tagLabel = typeof tag === "string" ? tag : tag.displayName ?? "Component";
   if (isStatic || Object.keys(variants).length === 0) {
-    const baseComponent2 = React3.forwardRef((props, ref) => {
+    const baseComponent2 = React.forwardRef((props, ref) => {
       const { className, ...rest } = props;
       const runtimeClassName = normalizeClassName(className);
       const statesClasses = statesConfig ? resolveStates(statesConfig, stateKeys, statesLookup, props) : "";
       const mergedBase = twMerge(extractBaseClasses(base), engineClasses, runtimeClassName);
       const className2 = statesClasses ? `${mergedBase} ${statesClasses}`.trim() : mergedBase;
-      return React3.createElement(tag, {
+      return React.createElement(tag, {
         ref,
         ...filterProps(rest),
         className: className2
@@ -554,15 +588,15 @@ function createComponent(tag, config) {
     registerSubComponents(result2, base, configSub);
     return wrapWithSubProxy(result2, tagLabel);
   }
-  const baseComponent = React3.forwardRef((props, ref) => {
+  const baseComponent = React.forwardRef((props, ref) => {
     const { className, ...rest } = props;
     const runtimeClassName = normalizeClassName(className);
-    const variantClasses = resolveVariants(variants, props);
+    const variantClasses = resolveVariants(variants, props, defaultVariants);
     const compoundClasses = resolveCompound(compoundVariants, props);
     const statesClasses = statesConfig ? resolveStates(statesConfig, stateKeys, statesLookup, props) : "";
     const mergedBase = twMerge(extractBaseClasses(base), variantClasses, compoundClasses, engineClasses, runtimeClassName);
     const className2 = statesClasses ? `${mergedBase} ${statesClasses}`.trim() : mergedBase;
-    return React3.createElement(tag, {
+    return React.createElement(tag, {
       ref,
       ...filterProps(rest),
       className: className2
@@ -596,15 +630,196 @@ function wrapWithSubProxy(component, tagLabel) {
       const Fallback = ({
         children,
         className
-      }) => React3.createElement("span", { className }, children);
+      }) => React.createElement("span", { className }, children);
       Fallback.displayName = `tw.${tagLabel}.${prop}(fallback)`;
       return Fallback;
     }
   });
 }
 
+// packages/domain/core/src/twProxy.ts
+var _parsedTemplateCache = /* @__PURE__ */ new Map();
+function parseTemplate(strings, exprs) {
+  const raw = strings.raw.reduce((acc, str, i) => {
+    const expr = exprs[i];
+    const exprStr = typeof expr === "function" ? "" : expr ?? "";
+    return acc + str + String(exprStr);
+  }, "");
+  const cached = _parsedTemplateCache.get(raw);
+  if (cached) return cached;
+  const binding = getNativeBinding();
+  if (!binding?.parseTemplate) {
+    throw new Error("FATAL: Native binding 'parseTemplate' is required but not available.");
+  }
+  const r = binding.parseTemplate(raw);
+  const subs = r.hasSubs ? JSON.parse(r.subsJson) : {};
+  const result = { base: r.base, subs, hasSubs: r.hasSubs };
+  _parsedTemplateCache.set(raw, result);
+  return result;
+}
+function makeTag(tag) {
+  return ((stringsOrConfig, ...exprs) => {
+    if (!Array.isArray(stringsOrConfig) && typeof stringsOrConfig === "object" && stringsOrConfig !== null && !("raw" in stringsOrConfig)) {
+      return createComponent(tag, stringsOrConfig);
+    }
+    const parsed = parseTemplate(stringsOrConfig, exprs);
+    const component = createComponent(tag, parsed.base);
+    if (parsed.hasSubs) {
+      for (const [name, classes] of Object.entries(parsed.subs)) {
+        const SubComp = React2.forwardRef(
+          ({ children, className }, ref) => React2.createElement("span", {
+            ref,
+            className: className ? `${classes} ${className}` : classes
+          }, children)
+        );
+        SubComp.displayName = `tw.${typeof tag === "string" ? tag : "component"}.${name}`;
+        ;
+        component[name] = SubComp;
+      }
+    }
+    return component;
+  });
+}
+var HTML_TAGS = [
+  "div",
+  "section",
+  "article",
+  "aside",
+  "header",
+  "footer",
+  "main",
+  "nav",
+  "figure",
+  "figcaption",
+  "details",
+  "summary",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "span",
+  "strong",
+  "em",
+  "b",
+  "i",
+  "s",
+  "u",
+  "small",
+  "mark",
+  "abbr",
+  "cite",
+  "code",
+  "kbd",
+  "samp",
+  "var",
+  "time",
+  "address",
+  "blockquote",
+  "q",
+  "del",
+  "ins",
+  "sub",
+  "sup",
+  "ul",
+  "ol",
+  "li",
+  "dl",
+  "dt",
+  "dd",
+  "table",
+  "thead",
+  "tbody",
+  "tfoot",
+  "tr",
+  "th",
+  "td",
+  "caption",
+  "colgroup",
+  "col",
+  "img",
+  "picture",
+  "video",
+  "audio",
+  "source",
+  "track",
+  "canvas",
+  "svg",
+  "path",
+  "circle",
+  "rect",
+  "line",
+  "polyline",
+  "polygon",
+  "g",
+  "defs",
+  "use",
+  "symbol",
+  "form",
+  "input",
+  "textarea",
+  "select",
+  "option",
+  "optgroup",
+  "button",
+  "label",
+  "fieldset",
+  "legend",
+  "output",
+  "progress",
+  "meter",
+  "datalist",
+  "a",
+  "area",
+  "map",
+  "iframe",
+  "embed",
+  "object",
+  "pre",
+  "hr",
+  "br",
+  "wbr",
+  "dialog",
+  "menu",
+  "template",
+  "slot"
+];
+function makeServerTag(tag) {
+  const baseFactory = makeTag(tag);
+  if (typeof window !== "undefined" && true) {
+    return ((stringsOrConfig, ...exprs) => {
+      const tagName = typeof tag === "string" ? tag : tag.displayName ?? "Component";
+      console.warn(
+        `[tailwind-styled-v4] tw.server.${tagName} rendered in browser. Ensure withTailwindStyled or Vite plugin is configured.`
+      );
+      return baseFactory(stringsOrConfig, ...exprs);
+    });
+  }
+  return baseFactory;
+}
+var serverFactories = {};
+for (const tag of HTML_TAGS) {
+  serverFactories[tag] = makeServerTag(tag);
+}
+var server = serverFactories;
+var tagFactories = {};
+for (const tag of HTML_TAGS) {
+  tagFactories[tag] = makeTag(tag);
+}
+function twCallable(component) {
+  return makeTag(component);
+}
+var tw = Object.assign(twCallable, tagFactories, {
+  server
+});
+
 // packages/domain/core/src/cv.ts
 var __generatedRegistry = {};
+function registerVariantTable(componentId, table) {
+  __generatedRegistry[componentId] = table;
+}
 var _sortedVariantKeysCache = /* @__PURE__ */ new Map();
 function lookupGenerated(componentId, props, defaultVariants, variantKeys) {
   const table = __generatedRegistry[componentId];
@@ -616,18 +831,100 @@ function lookupGenerated(componentId, props, defaultVariants, variantKeys) {
     sortedKeys = [...keysToUse].sort();
     _sortedVariantKeysCache.set(componentId, sortedKeys);
   }
-  {
-    throw new Error("FATAL: Native binding 'buildVariantLookupKey' is required but not available.");
+  const binding = getNativeBinding();
+  if (!binding?.buildVariantLookupKey) {
+    const parts = [];
+    for (const k of sortedKeys) {
+      const v = props[k] ?? defaultVariants?.[k];
+      if (v != null) parts.push(`${k}:${String(v)}`);
+    }
+    const key2 = parts.join("|");
+    return table[key2];
+  }
+  const relevantDefaults = {};
+  const relevantProps = {};
+  for (const k of sortedKeys) {
+    const dv = defaultVariants?.[k];
+    if (dv !== void 0) relevantDefaults[k] = String(dv);
+    const pv = props[k];
+    if (pv !== void 0 && pv !== null) relevantProps[k] = String(pv);
   }
+  const key = binding.buildVariantLookupKey(
+    JSON.stringify(relevantDefaults),
+    JSON.stringify(relevantProps)
+  );
+  return table[key];
+}
+var _configJsonCache = /* @__PURE__ */ new WeakMap();
+function _getConfigJson(config) {
+  let json = _configJsonCache.get(config);
+  if (!json) {
+    const cfgObj = config;
+    const cfgStr = JSON.stringify(cfgObj);
+    const parsed = JSON.parse(cfgStr);
+    if ("defaultVariants" in parsed && !("default_variants" in parsed)) {
+      parsed.default_variants = parsed.defaultVariants;
+      delete parsed.defaultVariants;
+    }
+    if ("compoundVariants" in parsed && !("compound_variants" in parsed)) {
+      parsed.compound_variants = parsed.compoundVariants;
+      delete parsed.compoundVariants;
+    }
+    if (!("variants" in parsed) || parsed.variants == null) {
+      parsed.variants = {};
+    }
+    json = JSON.stringify(parsed);
+    _configJsonCache.set(config, json);
+  }
+  return json;
 }
 function resolveVariantsNative(config, props) {
   const { variants = {}, defaultVariants = {} } = config;
-  {
-    throw new Error("FATAL: Native binding 'resolveVariants' is required but not available. Build cannot continue.");
+  const binding = getNativeBinding();
+  if (!binding?.resolveVariants) {
+    const variantKeys2 = Object.keys(variants);
+    const classes = [];
+    for (const key of variantKeys2) {
+      const value = props[key] ?? defaultVariants[key];
+      if (value != null) {
+        const variantClass = variants[key]?.[String(value)];
+        if (variantClass) classes.push(variantClass);
+      }
+    }
+    if (config.compoundVariants) {
+      for (const compound of config.compoundVariants) {
+        const { class: compoundClass, ...conditions } = compound;
+        const resolved = {};
+        for (const key of variantKeys2) {
+          resolved[key] = String(
+            props[key] ?? defaultVariants[key] ?? ""
+          );
+        }
+        const matches = Object.entries(conditions).every(
+          ([k, v]) => resolved[k] === v
+        );
+        if (matches) classes.push(compoundClass);
+      }
+    }
+    return classes.join(" ");
+  }
+  const variantKeys = Object.keys(variants);
+  const configJson = _getConfigJson(config);
+  const cleanProps = {};
+  for (const k of variantKeys) {
+    const dv = defaultVariants[k];
+    if (dv !== void 0 && dv !== null) cleanProps[k] = String(dv);
+  }
+  for (const k of variantKeys) {
+    const v = props[k];
+    if (v !== void 0 && v !== null) cleanProps[k] = String(v);
   }
+  const propsJson = JSON.stringify(cleanProps);
+  const result = binding.resolveVariants(configJson, propsJson);
+  return result.classes;
 }
 function cv(config, componentId) {
-  {
+  if (true) {
     const { variants = {}, defaultVariants = {} } = config;
     for (const dk of Object.keys(defaultVariants)) {
       if (!(dk in variants)) {
@@ -645,9 +942,9 @@ function cv(config, componentId) {
         config.defaultVariants,
         variantKeys
       );
-      result = generated ?? resolveVariantsNative(config);
+      result = generated ?? resolveVariantsNative(config, props);
     } else {
-      result = resolveVariantsNative(config);
+      result = resolveVariantsNative(config, props);
     }
     return props.className ? twMerge(result, props.className) : result;
   };
@@ -666,309 +963,36 @@ function cn(...inputs) {
     }
   }
   if (strings.length === 0) return "";
-  {
+  const native = getNativeBinding();
+  if (!native?.resolveClassNames) {
     throw new Error("Native binding 'resolveClassNames' is required but not available.");
   }
+  return native.resolveClassNames(strings);
 }
 function cx(...inputs) {
   const filtered = inputs.flat().filter(Boolean);
   if (filtered.length === 0) return "";
-  {
+  const native = getNativeBinding();
+  if (!native?.twMergeMany) {
     throw new Error("Native binding 'twMergeMany' is required but not available.");
   }
+  return native.twMergeMany(filtered);
 }
 var cxm = cx;
-var TOKEN_ENGINE_KEY = "__TW_TOKEN_ENGINE__";
-function tokenVar(name) {
-  const normalized = name.replace(/[^a-zA-Z0-9-]/g, "-").toLowerCase();
-  return `--tw-token-${normalized}`;
+
+// packages/domain/core/src/styledSystem.ts
+function tokenVarName(prefix, group, name) {
+  return `--${prefix}-${group}-${name}`;
 }
-function tokenRef(name) {
-  return `var(${tokenVar(name)})`;
+function tokenVarRef(prefix, group, name) {
+  return `var(${tokenVarName(prefix, group, name)})`;
 }
-var buildRootCss = (tokens) => {
-  const vars = Object.entries(tokens).map(([name, value]) => `  ${tokenVar(name)}: ${value};`).join("\n");
-  return `:root {
-${vars}
-}`;
-};
-var createLiveTokenEngine = () => {
-  const state = {
-    currentTokens: {},
-    styleEl: null
-  };
-  const subscribers = /* @__PURE__ */ new Set();
-  const syncStyleEl = () => {
-    if (typeof document === "undefined") return;
-    if (!state.styleEl) {
-      const styleEl = document.createElement("style");
-      styleEl.id = "tw-live-tokens";
-      styleEl.setAttribute("data-tw-tokens", "true");
-      document.head.appendChild(styleEl);
-      state.styleEl = styleEl;
-    }
-    state.styleEl.textContent = buildRootCss(state.currentTokens);
-  };
-  const notifySubscribers = () => {
-    const snapshot = { ...state.currentTokens };
-    for (const subscriber of subscribers) {
-      try {
-        subscriber(snapshot);
-      } catch {
-      }
-    }
-  };
-  const setToken2 = (name, value) => {
-    state.currentTokens = { ...state.currentTokens, [name]: value };
-    if (typeof document !== "undefined") {
-      document.documentElement.style.setProperty(tokenVar(name), value);
-    }
-    syncStyleEl();
-    notifySubscribers();
-  };
-  const setTokens2 = (tokens) => {
-    state.currentTokens = { ...state.currentTokens, ...tokens };
-    if (typeof document !== "undefined") {
-      const root = document.documentElement;
-      for (const [name, value] of Object.entries(tokens)) {
-        root.style.setProperty(tokenVar(name), value);
-      }
-    }
-    syncStyleEl();
-    notifySubscribers();
-  };
-  const applyTokenSet2 = (tokens) => {
-    if (typeof document !== "undefined") {
-      const root = document.documentElement;
-      for (const name of Object.keys(state.currentTokens)) {
-        if (!(name in tokens)) {
-          root.style.removeProperty(tokenVar(name));
-        }
-      }
-      for (const [name, value] of Object.entries(tokens)) {
-        root.style.setProperty(tokenVar(name), value);
-      }
-    }
-    state.currentTokens = { ...tokens };
-    syncStyleEl();
-    notifySubscribers();
-  };
-  return {
-    liveToken(tokens) {
-      setTokens2(tokens);
-      const vars = {};
-      for (const name of Object.keys(tokens)) {
-        vars[name] = tokenRef(name);
-      }
-      return {
-        vars,
-        get(name) {
-          return state.currentTokens[name];
-        },
-        set(name, value) {
-          setToken2(name, value);
-        },
-        setAll(nextTokens) {
-          setTokens2(nextTokens);
-        },
-        snapshot() {
-          return { ...state.currentTokens };
-        }
-      };
-    },
-    getToken(name) {
-      return state.currentTokens[name];
-    },
-    getTokens() {
-      return { ...state.currentTokens };
-    },
-    setToken: setToken2,
-    setTokens: setTokens2,
-    applyTokenSet: applyTokenSet2,
-    generateTokenCssString() {
-      return buildRootCss(state.currentTokens);
-    },
-    subscribe(fn) {
-      subscribers.add(fn);
-      return () => {
-        subscribers.delete(fn);
-      };
-    }
-  };
-};
-var engine = createLiveTokenEngine();
-function liveToken(tokens) {
-  return engine.liveToken(tokens);
-}
-function setToken(name, value) {
-  engine.setToken(name, value);
-}
-function setTokens(tokens) {
-  engine.setTokens(tokens);
-}
-function applyTokenSet(tokens) {
-  engine.applyTokenSet(tokens);
-}
-function getToken(name) {
-  return engine.getToken(name);
-}
-function getTokens() {
-  return engine.getTokens();
-}
-function subscribeTokens(fn) {
-  return engine.subscribe(fn);
-}
-function generateTokenCssString() {
-  return engine.generateTokenCssString();
-}
-function createUseTokens() {
-  return function useTokens() {
-    const [tokens, setTokensState] = React3.useState(engine.getTokens());
-    React3.useEffect(() => {
-      setTokensState(engine.getTokens());
-      return engine.subscribe((nextTokens) => setTokensState(nextTokens));
-    }, []);
-    return tokens;
-  };
-}
-var liveTokenEngine = {
-  getToken: engine.getToken,
-  getTokens: engine.getTokens,
-  setToken: engine.setToken,
-  setTokens: engine.setTokens,
-  applyTokenSet: engine.applyTokenSet,
-  subscribeTokens: engine.subscribe,
-  subscribe: engine.subscribe
-};
-var globalTokenEngine = globalThis;
-globalTokenEngine[TOKEN_ENGINE_KEY] = liveTokenEngine;
-if (typeof window !== "undefined") {
-  window.__TW_TOKEN_ENGINE__ = liveTokenEngine;
-}
-var subComponentRegistry = /* @__PURE__ */ new Map();
-function registerSubComponent(entry) {
-  subComponentRegistry.set(entry.name, entry);
-}
-function getSubComponent(name) {
-  return subComponentRegistry.get(name);
-}
-function getAllSubComponents() {
-  return Array.from(subComponentRegistry.values());
-}
-function withSubComponents(Component, subComponentNames) {
-  const result = { ...Component };
-  for (const name of subComponentNames) {
-    const entry = getSubComponent(name);
-    if (entry) result[name] = entry.component;
-  }
-  return result;
-}
-registerSubComponent({
-  name: "icon",
-  component: ({ children, className }) => React3.createElement("span", { className }, children),
-  defaultClasses: ""
-});
-registerSubComponent({
-  name: "text",
-  component: ({ children, className }) => React3.createElement("span", { className }, children),
-  defaultClasses: ""
-});
-registerSubComponent({
-  name: "badge",
-  component: ({ children, className }) => React3.createElement(
-    "span",
-    {
-      className: `ml-2 px-2 py-0.5 text-xs rounded-full bg-red-500 text-white ${className || ""}`
-    },
-    children
-  ),
-  defaultClasses: "ml-2 px-2 py-0.5 text-xs rounded-full bg-red-500 text-white"
-});
-registerSubComponent({
-  name: "header",
-  component: ({ children, className }) => React3.createElement("header", { className: `font-bold text-lg ${className || ""}` }, children),
-  defaultClasses: "font-bold text-lg"
-});
-registerSubComponent({
-  name: "body",
-  component: ({ children, className }) => React3.createElement("div", { className: `flex-1 ${className || ""}` }, children),
-  defaultClasses: "flex-1"
-});
-registerSubComponent({
-  name: "footer",
-  component: ({ children, className }) => React3.createElement("footer", { className: `border-t pt-4 ${className || ""}` }, children),
-  defaultClasses: "border-t pt-4"
-});
-registerSubComponent({
-  name: "content",
-  component: ({ children, className }) => React3.createElement("div", { className }, children),
-  defaultClasses: ""
-});
-registerSubComponent({
-  name: "title",
-  component: ({ children, className }) => React3.createElement("div", { className: `font-semibold ${className || ""}` }, children),
-  defaultClasses: "font-semibold"
-});
-registerSubComponent({
-  name: "message",
-  component: ({ children, className }) => React3.createElement("div", { className: `text-sm ${className || ""}` }, children),
-  defaultClasses: "text-sm"
-});
-registerSubComponent({
-  name: "close",
-  component: ({ children, className }) => React3.createElement("span", { className: `cursor-pointer ${className || ""}` }, children),
-  defaultClasses: "cursor-pointer"
-});
-registerSubComponent({
-  name: "image",
-  component: ({ className }) => React3.createElement("img", { className }),
-  defaultClasses: ""
-});
-
-// packages/domain/core/src/styled.ts
-function resolveVariantClass(options, props) {
-  const out = [];
-  const variants = options.variants ?? {};
-  const defaults = options.defaultVariants ?? {};
-  for (const [variantName, valueMap] of Object.entries(variants)) {
-    const value = props[variantName] ?? defaults[variantName];
-    if (value === void 0) continue;
-    const key = String(value);
-    const cls = valueMap[key];
-    if (cls) out.push(cls);
-  }
-  for (const compound of options.compoundVariants ?? []) {
-    const matches = Object.entries(compound.variants).every(([k, expected]) => {
-      const current = props[k] ?? defaults[k];
-      return String(current) === expected;
-    });
-    if (matches) out.push(compound.className);
-  }
-  return out;
-}
-function resolveStyledClassName(options, props = {}) {
-  const parts = [options.base ?? "", ...resolveVariantClass(options, props), props.className ?? ""];
-  return twMerge(...parts);
-}
-function styled(options) {
-  return function getClassName(props = {}) {
-    return resolveStyledClassName(options, props);
-  };
-}
-
-// packages/domain/core/src/styledSystem.ts
-function tokenVarName(prefix, group, name) {
-  return `--${prefix}-${group}-${name}`;
-}
-function tokenVarRef(prefix, group, name) {
-  return `var(${tokenVarName(prefix, group, name)})`;
-}
-function resolveTokenRef(tokens, prefix, value) {
-  if (value.startsWith("token:")) {
-    const path = value.slice(6);
-    const [group, name] = path.split(".");
-    if (group && name && tokens[group]?.[name] !== void 0) {
-      return tokenVarRef(prefix, group, name);
+function resolveTokenRef(tokens, prefix, value) {
+  if (value.startsWith("token:")) {
+    const path = value.slice(6);
+    const [group, name] = path.split(".");
+    if (group && name && tokens[group]?.[name] !== void 0) {
+      return tokenVarRef(prefix, group, name);
     }
   }
   return value;
@@ -979,13 +1003,15 @@ function injectTokensToRoot(tokens, prefix) {
   if (document.getElementById(styleId)) return;
   const style = document.createElement("style");
   style.id = styleId;
-  style.textContent = _buildTokenCss();
+  style.textContent = _buildTokenCss(tokens, prefix);
   document.head.appendChild(style);
 }
 function _buildTokenCss(tokens, prefix) {
-  {
+  const binding = getNativeBinding();
+  if (!binding?.generateSystemTokenCss) {
     throw new Error("FATAL: Native binding 'generateSystemTokenCss' is required but not available.");
   }
+  return binding.generateSystemTokenCss(JSON.stringify(tokens), prefix);
 }
 function resolveComponentConfig(config, tokens, prefix) {
   const resolveStr = (s) => resolveTokenRef(tokens, prefix, s);
@@ -1085,10 +1111,11 @@ function createStyledSystem(config) {
     for (const [group, map] of Object.entries(updates)) {
       if (!tokens[group]) continue;
       for (const [name, value] of Object.entries(map)) {
+        ;
         tokens[group][name] = value;
       }
     }
-    style.textContent = _buildTokenCss();
+    style.textContent = _buildTokenCss(tokens, prefix);
   }
   function getConfig(name) {
     return resolvedConfigs.get(name);
@@ -1101,175 +1128,37 @@ function createStyledSystem(config) {
     tokens
   });
 }
-var _parsedTemplateCache = /* @__PURE__ */ new Map();
-function parseTemplate(strings, exprs) {
-  const raw = strings.raw.reduce((acc, str, i) => {
-    const expr = exprs[i];
-    const exprStr = typeof expr === "function" ? "" : expr ?? "";
-    return acc + str + String(exprStr);
-  }, "");
-  const cached = _parsedTemplateCache.get(raw);
-  if (cached) return cached;
-  {
-    throw new Error("FATAL: Native binding 'parseTemplate' is required but not available.");
-  }
-}
-function makeTag(tag) {
-  return ((stringsOrConfig, ...exprs) => {
-    if (!Array.isArray(stringsOrConfig) && typeof stringsOrConfig === "object" && stringsOrConfig !== null && !("raw" in stringsOrConfig)) {
-      return createComponent(tag, stringsOrConfig);
-    }
-    const parsed = parseTemplate(stringsOrConfig, exprs);
-    const component = createComponent(tag, parsed.base);
-    if (parsed.hasSubs) {
-      for (const [name, classes] of Object.entries(parsed.subs)) {
-        const SubComp = React3.forwardRef(
-          ({ children, className }, ref) => React3.createElement("span", {
-            ref,
-            className: className ? `${classes} ${className}` : classes
-          }, children)
-        );
-        SubComp.displayName = `tw.${typeof tag === "string" ? tag : "component"}.${name}`;
-        component[name] = SubComp;
-      }
-    }
-    return component;
-  });
-}
-var HTML_TAGS = [
-  "div",
-  "section",
-  "article",
-  "aside",
-  "header",
-  "footer",
-  "main",
-  "nav",
-  "figure",
-  "figcaption",
-  "details",
-  "summary",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "p",
-  "span",
-  "strong",
-  "em",
-  "b",
-  "i",
-  "s",
-  "u",
-  "small",
-  "mark",
-  "abbr",
-  "cite",
-  "code",
-  "kbd",
-  "samp",
-  "var",
-  "time",
-  "address",
-  "blockquote",
-  "q",
-  "del",
-  "ins",
-  "sub",
-  "sup",
-  "ul",
-  "ol",
-  "li",
-  "dl",
-  "dt",
-  "dd",
-  "table",
-  "thead",
-  "tbody",
-  "tfoot",
-  "tr",
-  "th",
-  "td",
-  "caption",
-  "colgroup",
-  "col",
-  "img",
-  "picture",
-  "video",
-  "audio",
-  "source",
-  "track",
-  "canvas",
-  "svg",
-  "path",
-  "circle",
-  "rect",
-  "line",
-  "polyline",
-  "polygon",
-  "g",
-  "defs",
-  "use",
-  "symbol",
-  "form",
-  "input",
-  "textarea",
-  "select",
-  "option",
-  "optgroup",
-  "button",
-  "label",
-  "fieldset",
-  "legend",
-  "output",
-  "progress",
-  "meter",
-  "datalist",
-  "a",
-  "area",
-  "map",
-  "iframe",
-  "embed",
-  "object",
-  "pre",
-  "hr",
-  "br",
-  "wbr",
-  "dialog",
-  "menu",
-  "template",
-  "slot"
-];
-function makeServerTag(tag) {
-  const baseFactory = makeTag(tag);
-  if (typeof window !== "undefined" && true) {
-    return ((stringsOrConfig, ...exprs) => {
-      const tagName = typeof tag === "string" ? tag : tag.displayName ?? "Component";
-      console.warn(
-        `[tailwind-styled-v4] tw.server.${tagName} rendered in browser. Ensure withTailwindStyled or Vite plugin is configured.`
-      );
-      return baseFactory(stringsOrConfig, ...exprs);
+
+// packages/domain/core/src/styled.ts
+function resolveVariantClass(options, props) {
+  const out = [];
+  const variants = options.variants ?? {};
+  const defaults = options.defaultVariants ?? {};
+  for (const [variantName, valueMap] of Object.entries(variants)) {
+    const value = props[variantName] ?? defaults[variantName];
+    if (value === void 0) continue;
+    const key = String(value);
+    const cls = valueMap[key];
+    if (cls) out.push(cls);
+  }
+  for (const compound of options.compoundVariants ?? []) {
+    const matches = Object.entries(compound.variants).every(([k, expected]) => {
+      const current = props[k] ?? defaults[k];
+      return String(current) === expected;
     });
+    if (matches) out.push(compound.className);
   }
-  return baseFactory;
-}
-var serverFactories = {};
-for (const tag of HTML_TAGS) {
-  serverFactories[tag] = makeServerTag(tag);
+  return out;
 }
-var server = serverFactories;
-var tagFactories = {};
-for (const tag of HTML_TAGS) {
-  tagFactories[tag] = makeTag(tag);
+function resolveStyledClassName(options, props = {}) {
+  const parts = [options.base ?? "", ...resolveVariantClass(options, props), props.className ?? ""];
+  return twMerge(...parts);
 }
-function twCallable(component) {
-  return makeTag(component);
+function styled(options) {
+  return function getClassName(props = {}) {
+    return resolveStyledClassName(options, props);
+  };
 }
-var tw = Object.assign(twCallable, tagFactories, {
-  server
-});
 
 // packages/domain/core/src/twTheme.ts
 function cssVar(varName, fallback) {
@@ -1336,6 +1225,298 @@ var v4Tokens = {
   fontMono: twVar("font", "font-mono")
 };
 
-export { applyTokenSet, cn, tokenRef as containerRef, createComponent, createStyledSystem, createTheme, createTwMerge, createUseTokens, cssVar, cv, cx, cxm, generateContainerCss, generateStateCss, generateTokenCssString, getAllSubComponents, getContainerRegistry, getStateRegistry, getSubComponent, getToken, getTokens, liveToken, mergeWithRules, processContainer, processState, registerSubComponent, resolveStyledClassName, server, setToken, setTokens, styled, subscribeTokens, t, tokenRef, tokenVar, tw, twMerge, twVar, v4Tokens, withSubComponents };
-//# sourceMappingURL=index.browser.mjs.map
+// packages/domain/theme/src/liveTokenEngine.ts
+import React3 from "react";
+var TOKEN_ENGINE_KEY = "__TW_TOKEN_ENGINE__";
+function tokenVar(name) {
+  const normalized = name.replace(/[^a-zA-Z0-9-]/g, "-").toLowerCase();
+  return `--tw-token-${normalized}`;
+}
+function tokenRef(name) {
+  return `var(${tokenVar(name)})`;
+}
+var buildRootCss = (tokens) => {
+  const vars = Object.entries(tokens).map(([name, value]) => `  ${tokenVar(name)}: ${value};`).join("\n");
+  return `:root {
+${vars}
+}`;
+};
+var createLiveTokenEngine = () => {
+  const state = {
+    currentTokens: {},
+    styleEl: null
+  };
+  const subscribers = /* @__PURE__ */ new Set();
+  const syncStyleEl = () => {
+    if (typeof document === "undefined") return;
+    if (!state.styleEl) {
+      const styleEl = document.createElement("style");
+      styleEl.id = "tw-live-tokens";
+      styleEl.setAttribute("data-tw-tokens", "true");
+      document.head.appendChild(styleEl);
+      state.styleEl = styleEl;
+    }
+    state.styleEl.textContent = buildRootCss(state.currentTokens);
+  };
+  const notifySubscribers = () => {
+    const snapshot = { ...state.currentTokens };
+    for (const subscriber of subscribers) {
+      try {
+        subscriber(snapshot);
+      } catch {
+      }
+    }
+  };
+  const setToken2 = (name, value) => {
+    state.currentTokens = { ...state.currentTokens, [name]: value };
+    if (typeof document !== "undefined") {
+      document.documentElement.style.setProperty(tokenVar(name), value);
+    }
+    syncStyleEl();
+    notifySubscribers();
+  };
+  const setTokens2 = (tokens) => {
+    state.currentTokens = { ...state.currentTokens, ...tokens };
+    if (typeof document !== "undefined") {
+      const root = document.documentElement;
+      for (const [name, value] of Object.entries(tokens)) {
+        root.style.setProperty(tokenVar(name), value);
+      }
+    }
+    syncStyleEl();
+    notifySubscribers();
+  };
+  const applyTokenSet2 = (tokens) => {
+    if (typeof document !== "undefined") {
+      const root = document.documentElement;
+      for (const name of Object.keys(state.currentTokens)) {
+        if (!(name in tokens)) {
+          root.style.removeProperty(tokenVar(name));
+        }
+      }
+      for (const [name, value] of Object.entries(tokens)) {
+        root.style.setProperty(tokenVar(name), value);
+      }
+    }
+    state.currentTokens = { ...tokens };
+    syncStyleEl();
+    notifySubscribers();
+  };
+  return {
+    liveToken(tokens) {
+      setTokens2(tokens);
+      const vars = {};
+      for (const name of Object.keys(tokens)) {
+        vars[name] = tokenRef(name);
+      }
+      return {
+        vars,
+        get(name) {
+          return state.currentTokens[name];
+        },
+        set(name, value) {
+          setToken2(name, value);
+        },
+        setAll(nextTokens) {
+          setTokens2(nextTokens);
+        },
+        snapshot() {
+          return { ...state.currentTokens };
+        }
+      };
+    },
+    getToken(name) {
+      return state.currentTokens[name];
+    },
+    getTokens() {
+      return { ...state.currentTokens };
+    },
+    setToken: setToken2,
+    setTokens: setTokens2,
+    applyTokenSet: applyTokenSet2,
+    generateTokenCssString() {
+      return buildRootCss(state.currentTokens);
+    },
+    subscribe(fn) {
+      subscribers.add(fn);
+      return () => {
+        subscribers.delete(fn);
+      };
+    }
+  };
+};
+var engine = createLiveTokenEngine();
+function liveToken(tokens) {
+  return engine.liveToken(tokens);
+}
+function setToken(name, value) {
+  engine.setToken(name, value);
+}
+function setTokens(tokens) {
+  engine.setTokens(tokens);
+}
+function applyTokenSet(tokens) {
+  engine.applyTokenSet(tokens);
+}
+function getToken(name) {
+  return engine.getToken(name);
+}
+function getTokens() {
+  return engine.getTokens();
+}
+function subscribeTokens(fn) {
+  return engine.subscribe(fn);
+}
+function generateTokenCssString() {
+  return engine.generateTokenCssString();
+}
+function createUseTokens() {
+  return function useTokens() {
+    const [tokens, setTokensState] = React3.useState(engine.getTokens());
+    React3.useEffect(() => {
+      setTokensState(engine.getTokens());
+      return engine.subscribe((nextTokens) => setTokensState(nextTokens));
+    }, []);
+    return tokens;
+  };
+}
+var liveTokenEngine = {
+  getToken: engine.getToken,
+  getTokens: engine.getTokens,
+  setToken: engine.setToken,
+  setTokens: engine.setTokens,
+  applyTokenSet: engine.applyTokenSet,
+  subscribeTokens: engine.subscribe,
+  subscribe: engine.subscribe
+};
+var globalTokenEngine = globalThis;
+globalTokenEngine[TOKEN_ENGINE_KEY] = liveTokenEngine;
+if (typeof window !== "undefined") {
+  window.__TW_TOKEN_ENGINE__ = liveTokenEngine;
+}
+
+// packages/domain/core/src/registry.ts
+import React4 from "react";
+var subComponentRegistry = /* @__PURE__ */ new Map();
+function registerSubComponent(entry) {
+  subComponentRegistry.set(entry.name, entry);
+}
+function getSubComponent(name) {
+  return subComponentRegistry.get(name);
+}
+function getAllSubComponents() {
+  return Array.from(subComponentRegistry.values());
+}
+function withSubComponents(Component, subComponentNames) {
+  const result = { ...Component };
+  for (const name of subComponentNames) {
+    const entry = getSubComponent(name);
+    if (entry) result[name] = entry.component;
+  }
+  return result;
+}
+registerSubComponent({
+  name: "icon",
+  component: ({ children, className }) => React4.createElement("span", { className }, children),
+  defaultClasses: ""
+});
+registerSubComponent({
+  name: "text",
+  component: ({ children, className }) => React4.createElement("span", { className }, children),
+  defaultClasses: ""
+});
+registerSubComponent({
+  name: "badge",
+  component: ({ children, className }) => React4.createElement(
+    "span",
+    {
+      className: `ml-2 px-2 py-0.5 text-xs rounded-full bg-red-500 text-white ${className || ""}`
+    },
+    children
+  ),
+  defaultClasses: "ml-2 px-2 py-0.5 text-xs rounded-full bg-red-500 text-white"
+});
+registerSubComponent({
+  name: "header",
+  component: ({ children, className }) => React4.createElement("header", { className: `font-bold text-lg ${className || ""}` }, children),
+  defaultClasses: "font-bold text-lg"
+});
+registerSubComponent({
+  name: "body",
+  component: ({ children, className }) => React4.createElement("div", { className: `flex-1 ${className || ""}` }, children),
+  defaultClasses: "flex-1"
+});
+registerSubComponent({
+  name: "footer",
+  component: ({ children, className }) => React4.createElement("footer", { className: `border-t pt-4 ${className || ""}` }, children),
+  defaultClasses: "border-t pt-4"
+});
+registerSubComponent({
+  name: "content",
+  component: ({ children, className }) => React4.createElement("div", { className }, children),
+  defaultClasses: ""
+});
+registerSubComponent({
+  name: "title",
+  component: ({ children, className }) => React4.createElement("div", { className: `font-semibold ${className || ""}` }, children),
+  defaultClasses: "font-semibold"
+});
+registerSubComponent({
+  name: "message",
+  component: ({ children, className }) => React4.createElement("div", { className: `text-sm ${className || ""}` }, children),
+  defaultClasses: "text-sm"
+});
+registerSubComponent({
+  name: "close",
+  component: ({ children, className }) => React4.createElement("span", { className: `cursor-pointer ${className || ""}` }, children),
+  defaultClasses: "cursor-pointer"
+});
+registerSubComponent({
+  name: "image",
+  component: ({ className }) => React4.createElement("img", { className }),
+  defaultClasses: ""
+});
+export {
+  applyTokenSet,
+  cn,
+  tokenRef as containerRef,
+  createComponent,
+  createStyledSystem,
+  createTheme,
+  createTwMerge,
+  createUseTokens,
+  cssVar,
+  cv,
+  cx,
+  cxm,
+  generateContainerCss,
+  generateStateCss,
+  generateTokenCssString,
+  getAllSubComponents,
+  getContainerRegistry,
+  getStateRegistry,
+  getSubComponent,
+  getToken,
+  getTokens,
+  liveToken,
+  mergeWithRules,
+  processContainer,
+  processState,
+  registerSubComponent,
+  registerVariantTable,
+  resolveStyledClassName,
+  server,
+  setToken,
+  setTokens,
+  styled,
+  subscribeTokens,
+  t,
+  tokenRef,
+  tokenVar,
+  tw,
+  twMerge,
+  twVar,
+  v4Tokens,
+  withSubComponents
+};
 //# sourceMappingURL=index.browser.mjs.map