tailwind-styled-v4 5.1.12 → 5.1.13

package/dist/index.mjs

@@ -224,22 +224,27 @@ if (typeof window !== "undefined") {
   window.__TW_CONTAINER_REGISTRY__ = containerRegistry;
 }
 var _hashContainerCache = /* @__PURE__ */ new Map();
+function _fnvHash6(s) {
+  let h = 2166136261;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619) >>> 0;
+  }
+  return (h >>> 0).toString(16).padStart(8, "0").slice(0, 6);
+}
 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)}`;
+  const id = native?.hashContent ? `tw-cq-${native.hashContent(sortedKey, "fnv", 6)}` : `tw-cq-${_fnvHash6(sortedKey)}`;
   _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 "";
   }
   return native.layoutClassesToCss(classes);
 }
@@ -400,96 +405,97 @@ var FONT_WEIGHT_NAMES = /* @__PURE__ */ new Set([
 var TEXT_ALIGN_VALUES = /* @__PURE__ */ new Set(["left", "center", "right", "justify", "start", "end"]);
 var BORDER_SIDE_PREFIXES = ["t-", "r-", "b-", "l-", "x-", "y-", "s-", "e-"];
 var BORDER_STYLE_VALUES = /* @__PURE__ */ new Set(["solid", "dashed", "dotted", "double", "hidden", "none"]);
-function conflictGroup(base) {
-  const bracket = base.indexOf("[");
+function conflictGroup(base, prefix = "") {
+  const b = prefix && base.startsWith(prefix) ? base.slice(prefix.length) : base;
+  const bracket = b.indexOf("[");
   if (bracket !== -1) {
-    const prefix = base.slice(0, bracket).replace(/-+$/, "");
-    return prefix.length > 0 ? prefix : "arbitrary";
-  }
-  if (DISPLAY_VALUES.has(base)) return "display";
-  if (POSITION_VALUES.has(base)) return "position";
-  if (base.startsWith("overflow-x-")) return "overflow-x";
-  if (base.startsWith("overflow-y-")) return "overflow-y";
-  if (base.startsWith("overflow-")) return "overflow";
-  if (base.startsWith("flex-")) return "flex";
-  if (base.startsWith("grid-cols-")) return "grid-cols";
-  if (base.startsWith("grid-rows-")) return "grid-rows";
-  if (base.startsWith("grid-flow-")) return "grid-flow";
-  if (base.startsWith("col-")) return "col";
-  if (base.startsWith("row-")) return "row";
-  if (base === "grow" || base.startsWith("grow-")) return "grow";
-  if (base === "shrink" || base.startsWith("shrink-")) return "shrink";
-  if (base.startsWith("gap-x-")) return "gap-x";
-  if (base.startsWith("gap-y-")) return "gap-y";
-  if (base.startsWith("gap-")) return "gap";
-  if (base.startsWith("justify-items-")) return "justify-items";
-  if (base.startsWith("justify-self-")) return "justify-self";
-  if (base.startsWith("justify-")) return "justify";
-  if (base.startsWith("items-")) return "items";
-  if (base.startsWith("self-")) return "self";
-  if (base.startsWith("place-content-")) return "place-content";
-  if (base.startsWith("place-items-")) return "place-items";
-  if (base.startsWith("place-self-")) return "place-self";
-  if (base.startsWith("content-")) return "content";
-  if (base.startsWith("px-")) return "px";
-  if (base.startsWith("py-")) return "py";
-  if (base.startsWith("pt-")) return "pt";
-  if (base.startsWith("pr-")) return "pr";
-  if (base.startsWith("pb-")) return "pb";
-  if (base.startsWith("pl-")) return "pl";
-  if (base.startsWith("ps-")) return "ps";
-  if (base.startsWith("pe-")) return "pe";
-  if (base.startsWith("p-")) return "p";
-  if (base.startsWith("mx-")) return "mx";
-  if (base.startsWith("my-")) return "my";
-  if (base.startsWith("mt-")) return "mt";
-  if (base.startsWith("mr-")) return "mr";
-  if (base.startsWith("mb-")) return "mb";
-  if (base.startsWith("ml-")) return "ml";
-  if (base.startsWith("ms-")) return "ms";
-  if (base.startsWith("me-")) return "me";
-  if (base === "-m" || base.startsWith("m-") || base.startsWith("-m-")) return "m";
-  if (base.startsWith("space-x-")) return "space-x";
-  if (base.startsWith("space-y-")) return "space-y";
-  if (base.startsWith("size-")) return "size";
-  if (base.startsWith("min-w-")) return "min-w";
-  if (base.startsWith("max-w-")) return "max-w";
-  if (base.startsWith("w-")) return "w";
-  if (base.startsWith("min-h-")) return "min-h";
-  if (base.startsWith("max-h-")) return "max-h";
-  if (base.startsWith("h-")) return "h";
-  if (base.startsWith("inset-x-")) return "inset-x";
-  if (base.startsWith("inset-y-")) return "inset-y";
-  if (base.startsWith("inset-")) return "inset";
-  if (base.startsWith("top-")) return "top";
-  if (base.startsWith("right-") || base.startsWith("end-")) return "right";
-  if (base.startsWith("bottom-")) return "bottom";
-  if (base.startsWith("left-") || base.startsWith("start-")) return "left";
-  if (base.startsWith("z-")) return "z";
-  if (base.startsWith("opacity-")) return "opacity";
-  if (base.startsWith("bg-")) {
-    if (base.startsWith("bg-opacity-")) return "bg-opacity";
+    const grp = b.slice(0, bracket).replace(/-+$/, "");
+    return grp.length > 0 ? grp : "arbitrary";
+  }
+  if (DISPLAY_VALUES.has(b)) return "display";
+  if (POSITION_VALUES.has(b)) return "position";
+  if (b.startsWith("overflow-x-")) return "overflow-x";
+  if (b.startsWith("overflow-y-")) return "overflow-y";
+  if (b.startsWith("overflow-")) return "overflow";
+  if (b.startsWith("flex-")) return "flex";
+  if (b.startsWith("grid-cols-")) return "grid-cols";
+  if (b.startsWith("grid-rows-")) return "grid-rows";
+  if (b.startsWith("grid-flow-")) return "grid-flow";
+  if (b.startsWith("col-")) return "col";
+  if (b.startsWith("row-")) return "row";
+  if (b === "grow" || b.startsWith("grow-")) return "grow";
+  if (b === "shrink" || b.startsWith("shrink-")) return "shrink";
+  if (b.startsWith("gap-x-")) return "gap-x";
+  if (b.startsWith("gap-y-")) return "gap-y";
+  if (b.startsWith("gap-")) return "gap";
+  if (b.startsWith("justify-items-")) return "justify-items";
+  if (b.startsWith("justify-self-")) return "justify-self";
+  if (b.startsWith("justify-")) return "justify";
+  if (b.startsWith("items-")) return "items";
+  if (b.startsWith("self-")) return "self";
+  if (b.startsWith("place-content-")) return "place-content";
+  if (b.startsWith("place-items-")) return "place-items";
+  if (b.startsWith("place-self-")) return "place-self";
+  if (b.startsWith("content-")) return "content";
+  if (b.startsWith("px-")) return "px";
+  if (b.startsWith("py-")) return "py";
+  if (b.startsWith("pt-")) return "pt";
+  if (b.startsWith("pr-")) return "pr";
+  if (b.startsWith("pb-")) return "pb";
+  if (b.startsWith("pl-")) return "pl";
+  if (b.startsWith("ps-")) return "ps";
+  if (b.startsWith("pe-")) return "pe";
+  if (b.startsWith("p-")) return "p";
+  if (b.startsWith("mx-")) return "mx";
+  if (b.startsWith("my-")) return "my";
+  if (b.startsWith("mt-")) return "mt";
+  if (b.startsWith("mr-")) return "mr";
+  if (b.startsWith("mb-")) return "mb";
+  if (b.startsWith("ml-")) return "ml";
+  if (b.startsWith("ms-")) return "ms";
+  if (b.startsWith("me-")) return "me";
+  if (b === "-m" || b.startsWith("m-") || b.startsWith("-m-")) return "m";
+  if (b.startsWith("space-x-")) return "space-x";
+  if (b.startsWith("space-y-")) return "space-y";
+  if (b.startsWith("size-")) return "size";
+  if (b.startsWith("min-w-")) return "min-w";
+  if (b.startsWith("max-w-")) return "max-w";
+  if (b.startsWith("w-")) return "w";
+  if (b.startsWith("min-h-")) return "min-h";
+  if (b.startsWith("max-h-")) return "max-h";
+  if (b.startsWith("h-")) return "h";
+  if (b.startsWith("inset-x-")) return "inset-x";
+  if (b.startsWith("inset-y-")) return "inset-y";
+  if (b.startsWith("inset-")) return "inset";
+  if (b.startsWith("top-")) return "top";
+  if (b.startsWith("right-") || b.startsWith("end-")) return "right";
+  if (b.startsWith("bottom-")) return "bottom";
+  if (b.startsWith("left-") || b.startsWith("start-")) return "left";
+  if (b.startsWith("z-")) return "z";
+  if (b.startsWith("opacity-")) return "opacity";
+  if (b.startsWith("bg-")) {
+    if (b.startsWith("bg-opacity-")) return "bg-opacity";
     return "bg";
   }
-  if (base.startsWith("from-")) return "from";
-  if (base.startsWith("via-")) return "via";
-  if (base.startsWith("to-")) return "to";
-  if (base.startsWith("text-")) {
-    const suffix = base.slice("text-".length);
+  if (b.startsWith("from-")) return "from";
+  if (b.startsWith("via-")) return "via";
+  if (b.startsWith("to-")) return "to";
+  if (b.startsWith("text-")) {
+    const suffix = b.slice("text-".length);
     if (isTextSize(suffix)) return "text-size";
     if (suffix.startsWith("opacity-")) return "text-opacity";
     if (TEXT_ALIGN_VALUES.has(suffix)) return "text-align";
     return "text-color";
   }
-  if (base.startsWith("font-")) {
-    const suffix = base.slice("font-".length);
+  if (b.startsWith("font-")) {
+    const suffix = b.slice("font-".length);
     if (FONT_WEIGHT_NAMES.has(suffix) || isAsciiDigits(suffix)) return "font-weight";
     return "font-family";
   }
-  if (base.startsWith("leading-")) return "leading";
-  if (base.startsWith("tracking-")) return "tracking";
-  if (base.startsWith("border-")) {
-    const suffix = base.slice("border-".length);
+  if (b.startsWith("leading-")) return "leading";
+  if (b.startsWith("tracking-")) return "tracking";
+  if (b.startsWith("border-")) {
+    const suffix = b.slice("border-".length);
     const sidePrefix = BORDER_SIDE_PREFIXES.find((p) => suffix.startsWith(p));
     if (sidePrefix) {
       const side = suffix.slice(0, 1);
@@ -503,67 +509,67 @@ function conflictGroup(base) {
     if (BORDER_STYLE_VALUES.has(suffix)) return "border-style";
     return "border-color";
   }
-  if (base === "border") return "border-width";
-  if (base.startsWith("outline-")) return "outline";
-  if (base === "outline") return "outline";
-  if (base.startsWith("rounded-t") || base.startsWith("rounded-r") || base.startsWith("rounded-b") || base.startsWith("rounded-l") || base.startsWith("rounded-s") || base.startsWith("rounded-e")) {
-    const firstChar = base.slice("rounded-".length).charAt(0) || "x";
+  if (b === "border") return "border-width";
+  if (b.startsWith("outline-")) return "outline";
+  if (b === "outline") return "outline";
+  if (b.startsWith("rounded-t") || b.startsWith("rounded-r") || b.startsWith("rounded-b") || b.startsWith("rounded-l") || b.startsWith("rounded-s") || b.startsWith("rounded-e")) {
+    const firstChar = b.slice("rounded-".length).charAt(0) || "x";
     return `rounded-${firstChar}`;
   }
-  if (base === "rounded" || base.startsWith("rounded-")) return "rounded";
-  if (base === "shadow" || base.startsWith("shadow-")) return "shadow";
-  if (base.startsWith("ring-offset-")) return "ring-offset";
-  if (base === "ring") return "ring-width";
-  if (base.startsWith("ring-")) {
-    const rest = base.slice("ring-".length);
+  if (b === "rounded" || b.startsWith("rounded-")) return "rounded";
+  if (b === "shadow" || b.startsWith("shadow-")) return "shadow";
+  if (b.startsWith("ring-offset-")) return "ring-offset";
+  if (b === "ring") return "ring-width";
+  if (b.startsWith("ring-")) {
+    const rest = b.slice("ring-".length);
     const isWidth = rest === "0" || rest === "1" || rest === "2" || rest === "4" || rest === "8" || /^-?\d+(\.\d+)?$/.test(rest) || rest.startsWith("[") && rest.endsWith("]");
     if (isWidth) return "ring-width";
     if (rest === "inset") return "ring-inset";
     return "ring-color";
   }
-  if (base.startsWith("rotate-")) return "rotate";
-  if (base.startsWith("scale-x-")) return "scale-x";
-  if (base.startsWith("scale-y-")) return "scale-y";
-  if (base.startsWith("scale-")) return "scale";
-  if (base.startsWith("translate-x-")) return "translate-x";
-  if (base.startsWith("translate-y-")) return "translate-y";
-  if (base.startsWith("skew-x-")) return "skew-x";
-  if (base.startsWith("skew-y-")) return "skew-y";
-  if (base === "transition" || base.startsWith("transition-")) return "transition";
-  if (base.startsWith("duration-")) return "duration";
-  if (base.startsWith("ease-")) return "ease";
-  if (base.startsWith("delay-")) return "delay";
-  if (base === "animate" || base.startsWith("animate-")) return "animate";
-  if (base.startsWith("cursor-")) return "cursor";
-  if (base.startsWith("pointer-events-")) return "pointer-events";
-  if (base.startsWith("select-")) return "select";
-  if (base === "visible" || base === "invisible" || base === "collapse") return "visibility";
-  if (base.startsWith("object-")) return "object";
-  if (base.startsWith("aspect-")) return "aspect";
-  if (base.startsWith("order-")) return "order";
-  if (base.startsWith("whitespace-")) return "whitespace";
-  if (base.startsWith("list-")) return "list";
-  if (base.startsWith("fill-")) return "fill";
-  if (base.startsWith("stroke-")) return "stroke";
-  if (base.startsWith("backdrop-")) {
-    const rest = base.slice("backdrop-".length);
+  if (b.startsWith("rotate-")) return "rotate";
+  if (b.startsWith("scale-x-")) return "scale-x";
+  if (b.startsWith("scale-y-")) return "scale-y";
+  if (b.startsWith("scale-")) return "scale";
+  if (b.startsWith("translate-x-")) return "translate-x";
+  if (b.startsWith("translate-y-")) return "translate-y";
+  if (b.startsWith("skew-x-")) return "skew-x";
+  if (b.startsWith("skew-y-")) return "skew-y";
+  if (b === "transition" || b.startsWith("transition-")) return "transition";
+  if (b.startsWith("duration-")) return "duration";
+  if (b.startsWith("ease-")) return "ease";
+  if (b.startsWith("delay-")) return "delay";
+  if (b === "animate" || b.startsWith("animate-")) return "animate";
+  if (b.startsWith("cursor-")) return "cursor";
+  if (b.startsWith("pointer-events-")) return "pointer-events";
+  if (b.startsWith("select-")) return "select";
+  if (b === "visible" || b === "invisible" || b === "collapse") return "visibility";
+  if (b.startsWith("object-")) return "object";
+  if (b.startsWith("aspect-")) return "aspect";
+  if (b.startsWith("order-")) return "order";
+  if (b.startsWith("whitespace-")) return "whitespace";
+  if (b.startsWith("list-")) return "list";
+  if (b.startsWith("fill-")) return "fill";
+  if (b.startsWith("stroke-")) return "stroke";
+  if (b.startsWith("backdrop-")) {
+    const rest = b.slice("backdrop-".length);
     const seg = rest.split("-")[0] || "x";
     return `backdrop-${seg}`;
   }
-  if (base.startsWith("scroll-")) return "scroll";
-  if (base.startsWith("snap-")) return "snap";
-  if (base.startsWith("touch-")) return "touch";
-  if (base.startsWith("decoration-")) return "text-decoration";
-  if (base.startsWith("caret-")) return "caret";
-  if (base.startsWith("accent-")) return "accent";
-  if (base.startsWith("appearance-")) return "appearance";
-  if (base === "isolate" || base === "isolation-auto") return "isolation";
-  if (base.startsWith("mix-blend-")) return "mix-blend";
-  if (base.startsWith("bg-blend-")) return "bg-blend";
-  if (base.startsWith("float-")) return "float";
-  if (base.startsWith("clear-")) return "clear";
-  if (base.startsWith("break-")) return "break";
-  if (base.startsWith("columns-")) return "columns";
+  if (b.startsWith("scroll-")) return "scroll";
+  if (b.startsWith("snap-")) return "snap";
+  if (b.startsWith("touch-")) return "touch";
+  if (b.startsWith("decoration-")) return "text-decoration";
+  if (b.startsWith("caret-")) return "caret";
+  if (b.startsWith("accent-")) return "accent";
+  if (b.startsWith("appearance-")) return "appearance";
+  if (b === "isolate" || b === "isolation-auto") return "isolation";
+  if (b.startsWith("mix-blend-")) return "mix-blend";
+  if (b.startsWith("bg-blend-")) return "bg-blend";
+  if (b.startsWith("float-")) return "float";
+  if (b.startsWith("clear-")) return "clear";
+  if (b.startsWith("break-")) return "break";
+  if (b.startsWith("columns-")) return "columns";
   return null;
 }
 function splitVariants(klass) {
@@ -578,7 +584,7 @@ function splitVariants(klass) {
   if (lastColon === 0) return ["", klass];
   return [klass.slice(0, lastColon), klass.slice(lastColon)];
 }
-function mergeClassStringJs(input) {
+function mergeClassStringJs(input, prefix = "") {
   const tokens = input.split(/\s+/).filter(Boolean);
   if (tokens.length === 0) return "";
   if (tokens.length === 1) return tokens[0];
@@ -586,7 +592,7 @@ function mergeClassStringJs(input) {
   const slots = [];
   for (const token of tokens) {
     const [variants, base] = splitVariants(token);
-    const group = conflictGroup(base);
+    const group = conflictGroup(base, prefix);
     if (group !== null) {
       const key = `${variants}::${group}`;
       const prevIdx = groupOwner.get(key);
@@ -599,10 +605,10 @@ function mergeClassStringJs(input) {
   }
   return slots.filter((s) => s !== null).join(" ");
 }
-function twMergeRawJs(classLists) {
+function twMergeRawJs(classLists, prefix = "") {
   const joined = classLists.map((s) => s.trim()).filter((s) => s.length > 0).join(" ");
   if (joined.length === 0) return "";
-  return mergeClassStringJs(joined);
+  return mergeClassStringJs(joined, prefix);
 }
 
 // packages/domain/core/src/merge.ts
@@ -617,6 +623,7 @@ function warnFallbackOnce() {
   }
 }
 function createTwMerge(options = {}) {
+  const prefix = options.prefix ?? "";
   return function twMerge2(...classLists) {
     const inputs = [];
     for (let i = 0; i < classLists.length; i++) {
@@ -625,11 +632,16 @@ function createTwMerge(options = {}) {
     }
     if (inputs.length === 0) return "";
     const native = getNativeBinding();
-    if (native?.twMergeRaw) {
-      return native.twMergeRaw(inputs);
+    if (native) {
+      if (prefix && native.twMergeRawWithOptions) {
+        return native.twMergeRawWithOptions(inputs, { prefix });
+      }
+      if (native.twMergeRaw) {
+        return native.twMergeRaw(inputs);
+      }
     }
     warnFallbackOnce();
-    return twMergeRawJs(inputs);
+    return twMergeRawJs(inputs, prefix);
   };
 }
 var twMerge = createTwMerge();
@@ -642,6 +654,37 @@ function mergeWithRules(rules, ...classLists) {
   return classes.join(" ");
 }
 
+// packages/domain/core/src/parseTemplateFallback.ts
+init_esm_shims();
+var SUB_RE = /(?:\[([a-zA-Z][a-zA-Z0-9_-]*)\]|([a-zA-Z][a-zA-Z0-9_-]*))\s*\{([^}]*)\}/g;
+var COMMENT_RE = /\/\/[^\n]*/g;
+function collapseSpaces(s) {
+  return s.replace(/\s+/g, " ").trim();
+}
+function cleanBlock(raw) {
+  const noComments = raw.replace(COMMENT_RE, "");
+  const lines = noComments.split("\n").map((l) => l.trim()).filter((l) => l.length > 0);
+  return collapseSpaces(lines.join(" "));
+}
+function parseTemplateJs(raw) {
+  const subs = {};
+  let base = raw;
+  for (const match of raw.matchAll(SUB_RE)) {
+    const fullMatch = match[0];
+    const name = match[1] ?? match[2] ?? "";
+    const innerRaw = match[3] ?? "";
+    if (name) {
+      subs[name] = cleanBlock(innerRaw);
+    }
+    base = base.replace(fullMatch, "");
+  }
+  return {
+    base: collapseSpaces(base),
+    subs,
+    hasSubs: Object.keys(subs).length > 0
+  };
+}
+
 // packages/domain/core/src/stateEngine.ts
 init_esm_shims();
 var stateRegistry = /* @__PURE__ */ new Map();
@@ -649,22 +692,27 @@ if (typeof window !== "undefined") {
   window.__TW_STATE_REGISTRY__ = stateRegistry;
 }
 var _hashStateCache = /* @__PURE__ */ new Map();
+function _fnvHash62(s) {
+  let h = 2166136261;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619) >>> 0;
+  }
+  return (h >>> 0).toString(16).padStart(8, "0").slice(0, 6);
+}
 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.");
-  }
-  const id = `tw-s-${native.hashContent(sortedKey, "fnv", 6)}`;
+  const id = native?.hashContent ? `tw-s-${native.hashContent(sortedKey, "fnv", 6)}` : `tw-s-${_fnvHash62(sortedKey)}`;
   _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 [];
   }
   return native.generateRuntimeStateCss(id, JSON.stringify(state), null).map((rule) => rule.cssRule);
 }
@@ -752,7 +800,13 @@ function _getParsedTemplate(template) {
   }
   const native = getNativeBinding();
   if (!native?.parseSubcomponentBlocksNapi) {
-    throw new Error("FATAL: Native binding 'parseSubcomponentBlocksNapi' is required but not available.");
+    const fb = parseTemplateJs(template);
+    const result2 = {
+      baseClasses: fb.base,
+      subMap: new Map(Object.entries(fb.subs))
+    };
+    _templateParseCache.set(template, result2);
+    return result2;
   }
   const r = native.parseSubcomponentBlocksNapi(template, "tw");
   const raw = JSON.parse(r.subMapJson);
@@ -904,10 +958,16 @@ function resolveVariants(variants, props, defaults) {
   }
   const binding = getNativeBinding();
   if (!binding?.resolveSimpleVariants) {
-    throw new Error("FATAL: Native binding 'resolveSimpleVariants' is required but not available.");
+    const classes = [];
+    for (const key of Object.keys(variants)) {
+      const propValue = cleanProps[key] ?? defaults[key];
+      if (propValue !== void 0 && variants[key]?.[propValue]) {
+        classes.push(variants[key][propValue]);
+      }
+    }
+    return classes.join(" ").trim().replace(/\s+/g, " ");
   }
-  const result = binding.resolveSimpleVariants(null, variants, defaults, cleanProps);
-  return result.trim().replace(/\s+/g, " ");
+  return binding.resolveSimpleVariants(null, variants, defaults, cleanProps).trim().replace(/\s+/g, " ");
 }
 function resolveStates(statesConfig, stateKeys, statesLookup, props) {
   if (statesLookup && stateKeys.length > 0) {
@@ -1119,49 +1179,8 @@ function wrapWithSubProxy(component, tagLabel) {
   });
 }
 
-// packages/domain/core/src/parseTemplateFallback.ts
-init_esm_shims();
-var SUB_RE = /(?:\[([a-zA-Z][a-zA-Z0-9_-]*)\]|([a-zA-Z][a-zA-Z0-9_-]*))\s*\{([^}]*)\}/g;
-var COMMENT_RE = /\/\/[^\n]*/g;
-function collapseSpaces(s) {
-  return s.replace(/\s+/g, " ").trim();
-}
-function cleanBlock(raw) {
-  const noComments = raw.replace(COMMENT_RE, "");
-  const lines = noComments.split("\n").map((l) => l.trim()).filter((l) => l.length > 0);
-  return collapseSpaces(lines.join(" "));
-}
-function parseTemplateJs(raw) {
-  const subs = {};
-  let base = raw;
-  for (const match of raw.matchAll(SUB_RE)) {
-    const fullMatch = match[0];
-    const name = match[1] ?? match[2] ?? "";
-    const innerRaw = match[3] ?? "";
-    if (name) {
-      subs[name] = cleanBlock(innerRaw);
-    }
-    base = base.replace(fullMatch, "");
-  }
-  return {
-    base: cleanBlock(base),
-    subs,
-    hasSubs: Object.keys(subs).length > 0
-  };
-}
-
 // packages/domain/core/src/twProxy.ts
 var _parsedTemplateCache = /* @__PURE__ */ new Map();
-var warnedParseTemplateFallback = false;
-function warnParseTemplateFallbackOnce() {
-  if (warnedParseTemplateFallback) return;
-  warnedParseTemplateFallback = true;
-  if (typeof console !== "undefined") {
-    console.warn(
-      "[tailwind-styled-v4] Native binding 'parseTemplate' tidak tersedia (normal di browser, untuk komponen yang di-chain dengan .extend/.withVariants/.animate/.withSub) \u2014 pakai pure-TS port dari algoritma Rust-nya. Hasil tetap benar; ini cuma informasi, bukan error."
-    );
-  }
-}
 function parseTemplate(strings, exprs) {
   const raw = strings.raw.reduce((acc, str, i) => {
     const expr = exprs[i];
@@ -1171,15 +1190,15 @@ function parseTemplate(strings, exprs) {
   const cached = _parsedTemplateCache.get(raw);
   if (cached) return cached;
   const binding = getNativeBinding();
-  let result;
-  if (binding?.parseTemplate) {
-    const r = binding.parseTemplate(raw);
-    const subs = r.hasSubs ? JSON.parse(r.subsJson) : {};
-    result = { base: r.base, subs, hasSubs: r.hasSubs };
-  } else {
-    warnParseTemplateFallbackOnce();
-    result = parseTemplateJs(raw);
+  if (!binding?.parseTemplate) {
+    const fb = parseTemplateJs(raw);
+    const result2 = { base: fb.base, subs: fb.subs, hasSubs: fb.hasSubs };
+    _parsedTemplateCache.set(raw, result2);
+    return result2;
   }
+  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;
 }
@@ -1492,19 +1511,25 @@ function cn(...inputs) {
   }
   if (strings.length === 0) return "";
   const native = getNativeBinding();
-  if (!native?.resolveClassNames) {
+  if (native?.resolveClassNames) {
+    return native.resolveClassNames(strings);
+  }
+  if (native !== null) {
     throw new Error("Native binding 'resolveClassNames' is required but not available.");
   }
-  return native.resolveClassNames(strings);
+  return strings.filter(Boolean).join(" ");
 }
 function cx(...inputs) {
   const filtered = inputs.flat().filter(Boolean);
   if (filtered.length === 0) return "";
   const native = getNativeBinding();
-  if (!native?.twMergeMany) {
+  if (native?.twMergeMany) {
+    return native.twMergeMany(filtered);
+  }
+  if (native !== null) {
     throw new Error("Native binding 'twMergeMany' is required but not available.");
   }
-  return native.twMergeMany(filtered);
+  return twMergeRawJs(filtered);
 }
 var cxm = cx;