tailwind-styled-v4 5.0.8 → 5.0.10

package/dist/index.mjs

@@ -1,5 +1,10 @@
+import * as path from 'path';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import 'crypto';
+import * as fs from 'fs';
+import { createRequire } from 'module';
 import React3 from 'react';
-import { twMerge as twMerge$1 } from 'tailwind-merge';
 
 /* 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, {
@@ -8,6 +13,119 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   if (typeof require !== "undefined") return require.apply(this, arguments);
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
+var isBrowser = typeof window !== "undefined" || typeof document !== "undefined";
+var _require = typeof __require !== "undefined" ? __require : createRequire(import.meta.url);
+var PLATFORM_MAP = {
+  "linux-x64": ["@tailwind-styled/native-linux-x64"],
+  "linux-arm64": ["@tailwind-styled/native-linux-arm64"],
+  "darwin-x64": ["@tailwind-styled/native-darwin-x64"],
+  "darwin-arm64": ["@tailwind-styled/native-darwin-arm64"],
+  "win32-x64": ["@tailwind-styled/native-win32-x64"],
+  "win32-arm64": ["@tailwind-styled/native-win32-arm64"]
+};
+function platformKey() {
+  if (isBrowser) return "browser";
+  return `${process.platform}-${process.arch}`;
+}
+function resolveNativeBinary(runtimeDir) {
+  const platform = platformKey();
+  const tried = [];
+  if (isBrowser) {
+    return { path: null, source: "not-found", platform, tried: ["not available in browser"] };
+  }
+  if (process.env.TWS_DISABLE_NATIVE === "1") {
+    return { path: null, source: "not-found", platform, tried: [] };
+  }
+  const envPath = process.env.TW_NATIVE_PATH?.trim();
+  if (envPath) {
+    if (fs.existsSync(envPath)) {
+      return { path: envPath, source: "env", platform, tried };
+    }
+    tried.push(`env:${envPath} (not found)`);
+  }
+  const prebuiltPkgs = PLATFORM_MAP[platform] ?? [];
+  for (const pkg of prebuiltPkgs) {
+    try {
+      const candidate = _require.resolve(`${pkg}/tailwind_styled_parser.node`);
+      if (fs.existsSync(candidate)) {
+        return { path: candidate, source: "prebuilt", platform, tried };
+      }
+      tried.push(`prebuilt:${pkg} (resolved but missing)`);
+    } catch {
+      tried.push(`prebuilt:${pkg} (not installed)`);
+    }
+  }
+  const cwd = process.cwd();
+  const base = runtimeDir ?? cwd;
+  const napiPlatform = platform === "linux-x64" ? "linux-x64-gnu" : platform === "linux-arm64" ? "linux-arm64-gnu" : platform;
+  const BINARY_NAMES = ["tailwind-styled-native", "tailwind_styled_parser"];
+  const localCandidates = [];
+  for (const bin of BINARY_NAMES) {
+    localCandidates.push(path.resolve(base, `${bin}.node`));
+    localCandidates.push(path.resolve(base, "..", `${bin}.node`));
+    localCandidates.push(path.resolve(base, `${bin}.${platform}.node`));
+    localCandidates.push(path.resolve(base, `${bin}.${napiPlatform}.node`));
+  }
+  for (const startDir of [cwd, base]) {
+    let dir = startDir;
+    for (let i = 0; i < 6; i++) {
+      const nativeDir = path.resolve(dir, "native");
+      for (const bin of BINARY_NAMES) {
+        localCandidates.push(path.resolve(nativeDir, `${bin}.node`));
+        localCandidates.push(path.resolve(nativeDir, `${bin}.${platform}.node`));
+        localCandidates.push(path.resolve(nativeDir, `${bin}.${napiPlatform}.node`));
+        localCandidates.push(path.resolve(nativeDir, "target", "release", `${bin}.node`));
+      }
+      const parent = path.resolve(dir, "..");
+      if (parent === dir) break;
+      dir = parent;
+    }
+  }
+  for (const candidate of localCandidates) {
+    tried.push(`local:${candidate}`);
+    if (fs.existsSync(candidate)) {
+      return { path: candidate, source: "local", platform, tried };
+    }
+  }
+  return { path: null, source: "not-found", platform, tried };
+}
+
+// packages/domain/shared/src/index.ts
+createRequire(import.meta.url);
+
+// packages/domain/core/src/native.ts
+var isBrowser2 = typeof window !== "undefined" || typeof document !== "undefined";
+var NATIVE_UNAVAILABLE_MESSAGE = "[tailwind-styled/core] Native binding is required but not available.\nPlease ensure you have run: npm run build:rust";
+var _loadNative = (path3) => __require(path3);
+var nativeBinding = null;
+var bindingLoadAttempted = false;
+var getBinding = () => {
+  if (isBrowser2) {
+    throw new Error(NATIVE_UNAVAILABLE_MESSAGE + "\n\nNative bindings are not available in browser. Use the compiled CSS output instead.");
+  }
+  if (nativeBinding) return nativeBinding;
+  if (bindingLoadAttempted) {
+    throw new Error(NATIVE_UNAVAILABLE_MESSAGE);
+  }
+  bindingLoadAttempted = true;
+  try {
+    const runtimeDir = isBrowser2 ? "" : dirname(fileURLToPath(import.meta.url));
+    const result = isBrowser2 ? { path: null, source: "not-found", platform: "browser", tried: [] } : resolveNativeBinary(runtimeDir);
+    if (result.path && result.path.endsWith(".node")) {
+      const mod = _loadNative(result.path);
+      if (mod?.batchSplitClasses) {
+        nativeBinding = mod;
+        return nativeBinding;
+      }
+    }
+    throw new Error(`${NATIVE_UNAVAILABLE_MESSAGE}
+
+Tried: ${result.tried.join("\n")}`);
+  } catch (err) {
+    throw err instanceof Error ? err : new Error(String(err));
+  }
+};
+var getNativeBinding = getBinding;
 
 // packages/domain/core/src/containerQuery.ts
 var CONTAINER_BREAKPOINTS = {
@@ -79,6 +197,13 @@ var LAYOUT_MAP = {
   "justify-end": "justify-content:flex-end"
 };
 function layoutClassesToCss(classes) {
+  try {
+    const native = getNativeBinding();
+    if (native?.layoutClassesToCss) {
+      return native.layoutClassesToCss(classes);
+    }
+  } catch {
+  }
   const decls = [];
   for (const cls of classes.trim().split(/\s+/)) {
     if (LAYOUT_MAP[cls]) decls.push(LAYOUT_MAP[cls]);
@@ -142,18 +267,36 @@ function processContainer(tag, container, containerName) {
 }
 function generateContainerCss(tag, container, containerName) {
   const id = hashContainer(tag, container, containerName);
+  try {
+    const native = getNativeBinding();
+    if (native?.buildContainerRules) {
+      const breakpoints = Object.entries(container).map(([key, value]) => ({
+        key,
+        classes: typeof value === "string" ? value : value.classes
+      }));
+      return native.buildContainerRules(id, breakpoints, containerName ?? null);
+    }
+  } catch {
+  }
   return buildContainerRules(id, container, containerName);
 }
 function getContainerRegistry() {
   return containerRegistry;
 }
+
+// packages/domain/core/src/merge.ts
 function normalizeClassInput(classLists) {
   return classLists.filter(Boolean).map((v) => String(v).trim()).filter((v) => v.length > 0);
 }
 function createTwMerge(_options = {}) {
-  return function twMerge4(...classLists) {
+  return function twMerge2(...classLists) {
     const clean = normalizeClassInput(classLists);
-    return twMerge$1(clean.join(" "));
+    if (clean.length === 0) return "";
+    const native = getNativeBinding();
+    if (!native?.twMergeMany) {
+      throw new Error("FATAL: Native binding 'twMergeMany' is required but not available.");
+    }
+    return native.twMergeMany(clean);
   };
 }
 var twMerge = createTwMerge();
@@ -176,113 +319,12 @@ function hashState(tag, state) {
   const hash = key.split("").reduce((h, char) => (h << 5) + h ^ char.charCodeAt(0), 5381);
   return `tw-s-${Math.abs(hash).toString(36).slice(0, 6)}`;
 }
-var TW_MAP = {
-  // Display
-  hidden: "display:none",
-  block: "display:block",
-  flex: "display:flex",
-  inline: "display:inline",
-  "inline-flex": "display:inline-flex",
-  grid: "display:grid",
-  // Opacity
-  "opacity-0": "opacity:0",
-  "opacity-5": "opacity:0.05",
-  "opacity-10": "opacity:0.1",
-  "opacity-20": "opacity:0.2",
-  "opacity-25": "opacity:0.25",
-  "opacity-30": "opacity:0.3",
-  "opacity-40": "opacity:0.4",
-  "opacity-50": "opacity:0.5",
-  "opacity-60": "opacity:0.6",
-  "opacity-70": "opacity:0.7",
-  "opacity-75": "opacity:0.75",
-  "opacity-80": "opacity:0.8",
-  "opacity-90": "opacity:0.9",
-  "opacity-95": "opacity:0.95",
-  "opacity-100": "opacity:1",
-  // Cursor
-  "cursor-pointer": "cursor:pointer",
-  "cursor-not-allowed": "cursor:not-allowed",
-  "cursor-default": "cursor:default",
-  "cursor-wait": "cursor:wait",
-  "cursor-move": "cursor:move",
-  "cursor-grab": "cursor:grab",
-  "cursor-grabbing": "cursor:grabbing",
-  // Pointer events
-  "pointer-events-none": "pointer-events:none",
-  "pointer-events-auto": "pointer-events:auto",
-  // Scale
-  "scale-90": "transform:scale(0.9)",
-  "scale-95": "transform:scale(0.95)",
-  "scale-100": "transform:scale(1)",
-  "scale-105": "transform:scale(1.05)",
-  "scale-110": "transform:scale(1.1)",
-  // Translate
-  "translate-x-0": "transform:translateX(0)",
-  "translate-y-0": "transform:translateY(0)",
-  "-translate-x-1": "transform:translateX(-0.25rem)",
-  "-translate-y-1": "transform:translateY(-0.25rem)",
-  "translate-x-1": "transform:translateX(0.25rem)",
-  "translate-y-1": "transform:translateY(0.25rem)",
-  // Ring
-  ring: "box-shadow:0 0 0 3px rgba(59,130,246,0.5)",
-  "ring-2": "box-shadow:0 0 0 2px rgba(59,130,246,0.5)",
-  "ring-4": "box-shadow:0 0 0 4px rgba(59,130,246,0.5)",
-  "ring-inset": "box-shadow:inset 0 0 0 3px rgba(59,130,246,0.5)",
-  // Border
-  border: "border-width:1px",
-  "border-2": "border-width:2px",
-  "border-transparent": "border-color:transparent",
-  // Outline
-  "outline-none": "outline:2px solid transparent;outline-offset:2px",
-  outline: "outline:2px solid currentColor",
-  // Overflow
-  "overflow-hidden": "overflow:hidden",
-  "overflow-auto": "overflow:auto",
-  "overflow-scroll": "overflow:scroll",
-  // Text decoration
-  underline: "text-decoration-line:underline",
-  "no-underline": "text-decoration-line:none",
-  "line-through": "text-decoration-line:line-through",
-  // Font weight
-  "font-bold": "font-weight:700",
-  "font-semibold": "font-weight:600",
-  "font-medium": "font-weight:500",
-  "font-normal": "font-weight:400",
-  // Background colors (common)
-  "bg-transparent": "background-color:transparent",
-  "bg-white": "background-color:#fff",
-  "bg-black": "background-color:#000",
-  "bg-blue-500": "background-color:rgb(59,130,246)",
-  "bg-blue-600": "background-color:rgb(37,99,235)",
-  "bg-red-500": "background-color:rgb(239,68,68)",
-  "bg-green-500": "background-color:rgb(34,197,94)",
-  "bg-yellow-500": "background-color:rgb(234,179,8)",
-  "bg-zinc-900": "background-color:rgb(24,24,27)",
-  "bg-zinc-800": "background-color:rgb(39,39,42)",
-  // Text colors
-  "text-white": "color:#fff",
-  "text-black": "color:#000",
-  "text-blue-500": "color:rgb(59,130,246)",
-  "text-red-500": "color:rgb(239,68,68)",
-  "text-zinc-400": "color:rgb(161,161,170)",
-  "text-zinc-500": "color:rgb(113,113,122)"
-};
 function twClassesToCss(classes) {
-  const decls = [];
-  for (const cls of classes.trim().split(/\s+/)) {
-    if (TW_MAP[cls]) decls.push(TW_MAP[cls]);
-    else if (cls.includes("[") && cls.includes("]")) {
-      const val = cls.match(/\[(.+)\]/)?.[1];
-      if (!val) continue;
-      if (cls.startsWith("bg-[")) decls.push(`background-color:${val}`);
-      else if (cls.startsWith("text-[")) decls.push(`color:${val}`);
-      else if (cls.startsWith("w-[")) decls.push(`width:${val}`);
-      else if (cls.startsWith("h-[")) decls.push(`height:${val}`);
-      else if (cls.startsWith("opacity-[")) decls.push(`opacity:${val}`);
-    }
+  const native = getNativeBinding();
+  if (!native?.twClassesToCss) {
+    throw new Error("FATAL: Native binding 'twClassesToCss' is required but not available.");
   }
-  return decls.join(";");
+  return native.twClassesToCss(classes);
 }
 function injectStateStyles(id, state) {
   if (typeof document === "undefined") return;
@@ -335,28 +377,50 @@ function getStateRegistry() {
 
 // packages/domain/core/src/createComponent.ts
 var ALWAYS_BLOCKED = /* @__PURE__ */ new Set(["base", "_ref", "state", "container", "containerName"]);
-function parseSubComponentNames(template) {
-  const matches = [...template.matchAll(/\[(\w+)\]/g)];
-  return [...new Set(matches.map((m) => m[1]))];
+function parseSubComponentBlocks(template) {
+  const native = getNativeBinding();
+  if (!native?.parseSubcomponentBlocksNapi) {
+    throw new Error("FATAL: Native binding 'parseSubcomponentBlocksNapi' is required but not available.");
+  }
+  const result = native.parseSubcomponentBlocksNapi(template, "tw");
+  const raw = JSON.parse(result.subMapJson);
+  return new Map(Object.entries(raw));
 }
 function extractBaseClasses(template) {
-  return template.replace(/\[\w+\]\s*\{[^}]*\}/g, "").replace(/\s+/g, " ").trim();
+  try {
+    const native = getNativeBinding();
+    if (native?.parseSubcomponentBlocksNapi) {
+      const result = native.parseSubcomponentBlocksNapi(template, "tw");
+      return result.baseClasses;
+    }
+  } catch {
+  }
+  return template.replace(/(?:\[[a-zA-Z][a-zA-Z0-9_-]*\]|[a-zA-Z][a-zA-Z0-9_-]*)\s*\{[^}]*\}/g, "").replace(/\s+/g, " ").trim();
 }
-function createSubComponentAccessor(parentDisplayName, name) {
+function createSubComponentAccessor(parentDisplayName, name, classes) {
   const SubComponent = ({
     children,
     className
-  }) => React3.createElement(React3.Fragment, null, children);
+  }) => React3.createElement(
+    "span",
+    { className: className ? `${classes} ${className}` : classes },
+    children
+  );
   SubComponent.displayName = `${parentDisplayName}[${name}]`;
   return SubComponent;
 }
-function registerSubComponents(component, template) {
-  const names = parseSubComponentNames(template);
+function registerSubComponents(component, template, configSub) {
   const displayName = component.displayName ?? "tw";
   const map = component;
-  for (const name of names) {
+  if (configSub) {
+    for (const [name, classes] of Object.entries(configSub)) {
+      map[name] = createSubComponentAccessor(displayName, name, classes.trim().replace(/\s+/g, " "));
+    }
+  }
+  const blocks = parseSubComponentBlocks(template);
+  for (const [name, classes] of blocks) {
     if (!(name in map)) {
-      map[name] = createSubComponentAccessor(displayName, name);
+      map[name] = createSubComponentAccessor(displayName, name, classes);
     }
   }
 }
@@ -376,14 +440,15 @@ function makeFilterProps(variantKeys) {
   };
 }
 function resolveVariants(variants, props, defaults) {
-  const classes = [];
-  for (const key in variants) {
-    const value = props[key] ?? defaults[key];
-    if (value !== void 0 && variants[key][String(value)]) {
-      classes.push(variants[key][String(value)]);
-    }
+  const binding = getNativeBinding();
+  if (!binding?.resolveSimpleVariants) {
+    throw new Error("FATAL: Native binding 'resolveSimpleVariants' is required but not available.");
   }
-  return classes.join(" ");
+  const cleanProps = {};
+  for (const [k, v] of Object.entries(props)) {
+    if (v !== void 0 && v !== null) cleanProps[k] = String(v);
+  }
+  return binding.resolveSimpleVariants(null, variants, defaults, cleanProps);
 }
 function resolveCompound(compounds, props) {
   const classes = [];
@@ -407,13 +472,21 @@ function carryOverSubComponents(target, source) {
 function attachExtend(component, originalTag, base, config) {
   function extendWithClasses(stringsOrConfig) {
     if (Array.isArray(stringsOrConfig) && "raw" in stringsOrConfig) {
-      const extra = stringsOrConfig.raw.join("").trim().replace(/\s+/g, " ");
-      const merged2 = twMerge(extractBaseClasses(base), extra);
+      const rawExtra = stringsOrConfig.raw.join("").trim().replace(/\s+/g, " ");
+      const merged2 = twMerge(extractBaseClasses(base), extractBaseClasses(rawExtra));
       const extended2 = createComponent(
         originalTag,
         typeof config === "string" ? merged2 : { ...config, base: merged2 }
       );
       carryOverSubComponents(extended2, component);
+      const extendSubBlocks = parseSubComponentBlocks(rawExtra);
+      if (extendSubBlocks.size > 0) {
+        const extComp = extended2;
+        const displayName = extended2.displayName ?? "tw";
+        for (const [subName, subClasses] of extendSubBlocks) {
+          extComp[subName] = createSubComponentAccessor(displayName, subName, subClasses);
+        }
+      }
       return extended2;
     }
     const extCfg = stringsOrConfig;
@@ -471,6 +544,7 @@ function createComponent(tag, config) {
   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;
+  const configSub = typeof config === "string" ? void 0 : config.sub;
   const stateResult = stateConfig ? processState(typeof tag === "string" ? tag : "component", stateConfig) : null;
   const containerResult = containerConfig ? processContainer(typeof tag === "string" ? tag : "component", containerConfig, containerName) : null;
   const engineClasses = [stateResult?.stateClass, containerResult?.containerClass].filter(Boolean).join(" ");
@@ -489,8 +563,8 @@ function createComponent(tag, config) {
     const component2 = baseComponent2;
     component2.displayName = `tw.${tagLabel}`;
     const result2 = attachExtend(component2, tag, base, config);
-    registerSubComponents(result2, base);
-    return result2;
+    registerSubComponents(result2, base, configSub);
+    return wrapWithSubProxy(result2, tagLabel);
   }
   const baseComponent = React3.forwardRef((props, ref) => {
     const { className, ...rest } = props;
@@ -506,9 +580,39 @@ function createComponent(tag, config) {
   const component = baseComponent;
   component.displayName = `tw.${tagLabel}`;
   const result = attachExtend(component, tag, base, config);
-  registerSubComponents(result, base);
-  return result;
+  registerSubComponents(result, base, configSub);
+  return wrapWithSubProxy(result, tagLabel);
+}
+var SKIP_PROXY_KEYS = /* @__PURE__ */ new Set([
+  "extend",
+  "withVariants",
+  "animate",
+  "withSub",
+  "displayName",
+  "$$typeof",
+  "render",
+  "prototype",
+  "__esModule",
+  "then"
+]);
+function wrapWithSubProxy(component, tagLabel) {
+  return new Proxy(component, {
+    get(target, prop) {
+      const value = target[prop];
+      if (value !== void 0) return value;
+      if (typeof prop === "symbol") return value;
+      if (SKIP_PROXY_KEYS.has(prop)) return value;
+      const Fallback = ({
+        children,
+        className
+      }) => React3.createElement("span", { className }, children);
+      Fallback.displayName = `tw.${tagLabel}.${prop}(fallback)`;
+      return Fallback;
+    }
+  });
 }
+
+// packages/domain/core/src/cv.ts
 var __generatedRegistry = {};
 function lookupGenerated(componentId, props, defaultVariants) {
   const table = __generatedRegistry[componentId];
@@ -517,27 +621,40 @@ function lookupGenerated(componentId, props, defaultVariants) {
   const key = Object.keys(merged).sort().filter((k) => k !== "className").map((k) => `${k}:${String(merged[k])}`).join("|");
   return table[key];
 }
-function resolveVariantsJS(config, props) {
+function resolveVariantsNative(config, props) {
   const { base = "", variants = {}, compoundVariants = [], defaultVariants = {} } = config;
-  const classes = [];
-  if (base) classes.push(...base.split(" ").filter(Boolean));
-  const resolved = { ...defaultVariants, ...props };
-  for (const [key, variantMap] of Object.entries(variants)) {
-    const value = resolved[key];
-    if (value !== void 0 && value !== null) {
-      const variantClass = variantMap[String(value)];
-      if (variantClass) classes.push(...variantClass.split(" ").filter(Boolean));
+  const binding = getNativeBinding();
+  if (binding?.resolveSimpleVariants) {
+    const mergedProps = {};
+    for (const [k, v] of Object.entries(defaultVariants)) {
+      if (v !== void 0 && v !== null) mergedProps[k] = String(v);
     }
-  }
-  for (const compound of compoundVariants) {
-    const { class: compoundClass, className: compoundClassName, ...conditions } = compound;
-    const matches = Object.entries(conditions).every(([key, val]) => resolved[key] === val);
-    if (matches) {
-      if (compoundClass) classes.push(...String(compoundClass).split(" ").filter(Boolean));
-      if (compoundClassName) classes.push(...String(compoundClassName).split(" ").filter(Boolean));
+    for (const [k, v] of Object.entries(props)) {
+      if (v !== void 0 && v !== null && k !== "className") {
+        mergedProps[k] = String(v);
+      }
+    }
+    let result = binding.resolveSimpleVariants(
+      base || null,
+      variants,
+      {},
+      // already merged into mergedProps
+      mergedProps
+    );
+    const resolved = { ...defaultVariants, ...props };
+    const extra = [];
+    for (const compound of compoundVariants) {
+      const { class: compoundClass, className: compoundClassName, ...conditions } = compound;
+      const matches = Object.entries(conditions).every(([key, val]) => resolved[key] === val);
+      if (matches) {
+        if (compoundClass) extra.push(String(compoundClass));
+        if (compoundClassName) extra.push(String(compoundClassName));
+      }
     }
+    if (extra.length > 0) result = `${result} ${extra.join(" ")}`.trim();
+    return result;
   }
-  return [...new Set(classes)].join(" ");
+  throw new Error("FATAL: Native binding 'resolveSimpleVariants' is required but not available.");
 }
 function cv(config, componentId) {
   if (process.env.NODE_ENV !== "production") {
@@ -556,18 +673,34 @@ function cv(config, componentId) {
         props,
         config.defaultVariants
       );
-      result = generated ?? resolveVariantsJS(config, props);
+      result = generated ?? resolveVariantsNative(config, props);
     } else {
-      result = resolveVariantsJS(config, props);
+      result = resolveVariantsNative(config, props);
     }
-    return props.className ? twMerge$1(result, props.className) : result;
+    return props.className ? twMerge(result, props.className) : result;
   };
 }
+
+// packages/domain/core/src/cx.ts
 function cn(...inputs) {
-  return inputs.filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
+  const native = getNativeBinding();
+  if (!native?.resolveClassNames) {
+    throw new Error("FATAL: Native binding 'resolveClassNames' is required but not available.");
+  }
+  const strings = inputs.flat().filter(Boolean);
+  return native.resolveClassNames(strings);
 }
 function cx(...inputs) {
-  return twMerge$1(...inputs.filter(Boolean));
+  const filtered = inputs.flat().filter(Boolean);
+  if (filtered.length === 0) return "";
+  const native = getNativeBinding();
+  if (!native?.twMergeMany && !native?.twMerge) {
+    throw new Error("FATAL: Native binding 'twMerge' or 'twMergeMany' is required but not available.");
+  }
+  if (native.twMergeMany) {
+    return native.twMergeMany(filtered);
+  }
+  return native.twMerge(filtered.join(" "));
 }
 var cxm = cx;
 var TOKEN_ENGINE_KEY = "__TW_TOKEN_ENGINE__";
@@ -857,8 +990,8 @@ function tokenVarRef(prefix, group, name) {
 }
 function resolveTokenRef(tokens, prefix, value) {
   if (value.startsWith("token:")) {
-    const path = value.slice(6);
-    const [group, name] = path.split(".");
+    const path3 = value.slice(6);
+    const [group, name] = path3.split(".");
     if (group && name && tokens[group]?.[name] !== void 0) {
       return tokenVarRef(prefix, group, name);
     }
@@ -957,13 +1090,13 @@ function createStyledSystem(config) {
       return createComponent(runtimeTag, merged);
     };
   }
-  function token(path) {
-    const [group, name] = path.split(".");
-    if (!group || !name) return path;
+  function token(path3) {
+    const [group, name] = path3.split(".");
+    if (!group || !name) return path3;
     return tokenVarRef(prefix, group, name);
   }
-  function rawToken(path) {
-    const [group, name] = path.split(".");
+  function rawToken(path3) {
+    const [group, name] = path3.split(".");
     if (!group || !name) return void 0;
     return tokens[group]?.[name];
   }
@@ -1002,9 +1135,9 @@ function createStyledSystem(config) {
     tokens
   });
 }
-var SUB_RE = /\[([a-zA-Z][a-zA-Z0-9_-]*)\]\s*\{([^}]*)\}/g;
+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 parseTemplate(strings, exprs) {
+function parseTemplateFallback(strings, exprs) {
   const raw = strings.raw.reduce((acc, str, i) => {
     const expr = exprs[i];
     const exprStr = typeof expr === "function" ? "" : expr ?? "";
@@ -1015,17 +1148,30 @@ function parseTemplate(strings, exprs) {
   let match;
   SUB_RE.lastIndex = 0;
   while ((match = SUB_RE.exec(raw)) !== null) {
-    const name = match[1];
-    const inner = match[2].replace(COMMENT_RE, "").split("\n").map((l) => l.trim()).filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
+    const name = match[1] ?? match[2];
+    const inner = match[3].replace(COMMENT_RE, "").split("\n").map((l) => l.trim()).filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
     subs[name] = inner;
     base = base.replace(match[0], "");
   }
   const cleanBase = base.replace(COMMENT_RE, "").split("\n").map((l) => l.trim()).filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
-  return {
-    base: cleanBase,
-    subs,
-    hasSubs: Object.keys(subs).length > 0
-  };
+  return { base: cleanBase, subs, hasSubs: Object.keys(subs).length > 0 };
+}
+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);
+  }, "");
+  try {
+    const binding = getNativeBinding();
+    if (binding?.parseTemplate) {
+      const result = binding.parseTemplate(raw);
+      const subs = result.hasSubs ? JSON.parse(result.subsJson) : {};
+      return { base: result.base, subs, hasSubs: result.hasSubs };
+    }
+  } catch {
+  }
+  return parseTemplateFallback(strings, exprs);
 }
 function makeTag(tag) {
   return ((stringsOrConfig, ...exprs) => {