tailwind-styled-v4 4.0.0 → 5.0.1

package/dist/index.js

@@ -1,46 +1,877 @@
-import React from 'react';
-import { twMerge } from 'tailwind-merge';
+'use strict';
 
-/* tailwind-styled-v4 v4 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
+var fs = require('fs');
+var module$1 = require('module');
+var os = require('os');
+var path = require('path');
+var url = require('url');
+var React = require('react');
+var tailwindMerge = require('tailwind-merge');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var fs__default = /*#__PURE__*/_interopDefault(fs);
+var os__default = /*#__PURE__*/_interopDefault(os);
+var path__default = /*#__PURE__*/_interopDefault(path);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/* tailwind-styled-v4 v5.0.1 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
 }) : x)(function(x) {
   if (typeof require !== "undefined") return require.apply(this, arguments);
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/shared/src/cache.ts
+var LRUCache;
+var init_cache = __esm({
+  "packages/shared/src/cache.ts"() {
+    LRUCache = class {
+      constructor(max = 256, ttlMs = null) {
+        this.map = /* @__PURE__ */ new Map();
+        this.max = max;
+        this.ttlMs = ttlMs;
+      }
+      get(key) {
+        const entry = this.map.get(key);
+        if (!entry) return void 0;
+        if (this.ttlMs !== null && Date.now() - entry.ts > this.ttlMs) {
+          this.map.delete(key);
+          return void 0;
+        }
+        this.map.delete(key);
+        this.map.set(key, entry);
+        return entry.value;
+      }
+      set(key, value) {
+        if (this.map.has(key)) this.map.delete(key);
+        else if (this.map.size >= this.max) {
+          this.map.delete(this.map.keys().next().value);
+        }
+        this.map.set(key, { value, ts: Date.now() });
+      }
+      has(key) {
+        return this.get(key) !== void 0;
+      }
+      delete(key) {
+        this.map.delete(key);
+      }
+      clear() {
+        this.map.clear();
+      }
+      get size() {
+        return this.map.size;
+      }
+      keys() {
+        return this.map.keys();
+      }
+      *values() {
+        for (const entry of this.map.values()) {
+          yield entry.value;
+        }
+      }
+      *entries() {
+        for (const [key, entry] of this.map.entries()) {
+          yield [key, entry.value];
+        }
+      }
+    };
+  }
+});
+function getPlatformExtension() {
+  const platform = os__default.default.platform();
+  switch (platform) {
+    case "win32":
+      return ".node";
+    case "darwin":
+      return ".dylib";
+    case "linux":
+      return ".so";
+    default:
+      return ".node";
+  }
+}
+function formatErrorMessage(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+function resolveRuntimeDir(dirnameValue, moduleImportUrl) {
+  if (typeof dirnameValue === "string" && dirnameValue.length > 0) return dirnameValue;
+  return path__default.default.dirname(url.fileURLToPath(moduleImportUrl));
+}
+function resolveNativeBindingCandidates(options) {
+  const out = [];
+  const envVarNames = options.envVarNames ?? ["TWS_NATIVE_PATH"];
+  for (const envVarName of envVarNames) {
+    const raw = process.env[envVarName]?.trim();
+    if (!raw) continue;
+    const resolved = path__default.default.resolve(raw);
+    if (options.enforceNodeExtensionForEnvPath) {
+      if (path__default.default.extname(resolved).toLowerCase() !== ".node") {
+        throw new Error(
+          `Invalid native binding path from ${envVarName}="${raw}". Expected a .node file.`
+        );
+      }
+    }
+    out.push(resolved);
+  }
+  if (options.includeDefaultCandidates !== false) {
+    const ext = options.platformExtension ?? getPlatformExtension();
+    const defaultBindingName = `tailwind_styled_parser${ext}`;
+    out.push(path__default.default.resolve(process.cwd(), "native", defaultBindingName));
+    out.push(path__default.default.resolve(options.runtimeDir, "..", "..", "..", "native", defaultBindingName));
+  }
+  return Array.from(new Set(out));
+}
+function parseDebugToken(namespace, token) {
+  if (token === "*" || token === namespace || token === "tailwind-styled:*") return true;
+  return token.endsWith("*") && namespace.startsWith(token.slice(0, -1));
+}
+function isDebugNamespaceEnabled(namespace) {
+  if (process.env.TWS_DEBUG === "1" || process.env.TAILWIND_STYLED_DEBUG === "1") return true;
+  const raw = process.env.DEBUG;
+  if (!raw) return false;
+  return raw.split(",").map((token) => token.trim()).some((token) => parseDebugToken(namespace, token));
+}
+function createDebugLogger(namespace, label = namespace) {
+  const debugEnabled = isDebugNamespaceEnabled(namespace);
+  return (message) => {
+    if (!debugEnabled) return;
+    console.debug(`[${label}] ${message}`);
+  };
+}
+function loadNativeBinding(options) {
+  const req = module$1.createRequire(path__default.default.join(options.runtimeDir, "noop.cjs"));
+  const loadErrors = [];
+  for (const candidate of options.candidates) {
+    if (!fs__default.default.existsSync(candidate)) continue;
+    try {
+      const mod = req(candidate);
+      if (options.isValid(mod)) {
+        return {
+          binding: mod,
+          loadedPath: candidate,
+          loadErrors
+        };
+      }
+      loadErrors.push({
+        path: candidate,
+        message: options.invalidExportMessage
+      });
+    } catch (error) {
+      loadErrors.push({
+        path: candidate,
+        message: formatErrorMessage(error)
+      });
+    }
+  }
+  return {
+    binding: null,
+    loadedPath: null,
+    loadErrors
+  };
+}
+var init_nativeBinding = __esm({
+  "packages/shared/src/nativeBinding.ts"() {
+  }
+});
+
+// packages/shared/src/index.ts
+var init_src = __esm({
+  "packages/shared/src/index.ts"() {
+    init_cache();
+    init_nativeBinding();
+  }
+});
+
+// packages/animate/src/binding.ts
+function isAnimateModule(module) {
+  const candidate = module;
+  return typeof candidate?.compileAnimation === "function" && typeof candidate?.compileKeyframes === "function";
+}
+function resolveBindingCandidates(runtimeDir) {
+  return resolveNativeBindingCandidates({
+    runtimeDir,
+    envVarNames: ["TWS_ANIMATE_NATIVE_PATH", "TWS_NATIVE_PATH"],
+    enforceNodeExtensionForEnvPath: true
+  });
+}
+function loadAnimateBinding() {
+  if (process.env.TWS_NO_NATIVE === "1" || process.env.TWS_NO_RUST === "1") {
+    throw new Error(
+      "Native animate backend is required in v5. TWS_NO_NATIVE/TWS_NO_RUST is not supported."
+    );
+  }
+  const runtimeDir = resolveRuntimeDir(
+    typeof __dirname === "string" ? __dirname : void 0,
+    (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.js', document.baseURI).href))
+  );
+  const candidates = resolveBindingCandidates(runtimeDir);
+  const { binding, loadErrors, loadedPath } = loadNativeBinding({
+    runtimeDir,
+    candidates,
+    isValid: isAnimateModule,
+    invalidExportMessage: "Module loaded but missing compileAnimation/compileKeyframes exports."
+  });
+  if (binding) {
+    debugLog(`native animate binding loaded from: ${loadedPath}`);
+    return binding;
+  }
+  if (loadErrors.length > 0) {
+    debugLog(
+      `native animate binding load failed for ${loadErrors.length} candidate(s): ${loadErrors.map((entry) => `${entry.path} (${entry.message})`).join("; ")}`
+    );
+  } else {
+    debugLog("native animate binding not found in any candidate path");
+  }
+  const lines = [
+    "Native animate backend not found. Ensure `tailwind_styled_parser.node` is built.",
+    "Checked paths:",
+    ...candidates.map((candidate) => `- ${candidate}`)
+  ];
+  if (loadErrors.length > 0) {
+    lines.push("Load errors:");
+    for (const error of loadErrors) lines.push(`- ${error.path}: ${error.message}`);
+  }
+  throw new Error(lines.join("\n"));
+}
+async function getAnimateBinding() {
+  if (!bindingPromise) {
+    bindingPromise = Promise.resolve().then(loadAnimateBinding);
+  }
+  return bindingPromise;
+}
+async function initAnimate() {
+  await getAnimateBinding();
+}
+var bindingPromise, DEBUG_NAMESPACE, debugLog;
+var init_binding = __esm({
+  "packages/animate/src/binding.ts"() {
+    init_src();
+    bindingPromise = null;
+    DEBUG_NAMESPACE = "tailwind-styled:animate";
+    debugLog = createDebugLogger(DEBUG_NAMESPACE, "tailwind-styled/animate");
+  }
+});
+
+// packages/animate/src/preset.ts
+function createAnimationPresets(registry) {
+  const cache2 = new LRUCache(DEFAULT_PRESET_CACHE_LIMIT);
+  const withCache = (cacheKey, factory) => async () => {
+    const cached = cache2.get(cacheKey);
+    if (cached) {
+      const className = await cached;
+      if (registry.has(className)) return className;
+      cache2.delete(cacheKey);
+    }
+    const pending = factory();
+    cache2.set(cacheKey, pending);
+    try {
+      return await pending;
+    } catch (error) {
+      cache2.delete(cacheKey);
+      throw error;
+    }
+  };
+  return {
+    fadeIn: withCache(
+      "fadeIn",
+      async () => (await registry.compileAnimation({ from: "opacity-0", to: "opacity-100", duration: 200 })).className
+    ),
+    fadeOut: withCache(
+      "fadeOut",
+      async () => (await registry.compileAnimation({ from: "opacity-100", to: "opacity-0", duration: 200 })).className
+    ),
+    slideUp: withCache(
+      "slideUp",
+      async () => (await registry.compileAnimation({
+        from: "opacity-0 translate-y-4",
+        to: "opacity-100 translate-y-0",
+        duration: 300
+      })).className
+    ),
+    slideDown: withCache(
+      "slideDown",
+      async () => (await registry.compileAnimation({
+        from: "opacity-0 -translate-y-4",
+        to: "opacity-100 translate-y-0",
+        duration: 300
+      })).className
+    ),
+    slideLeft: withCache(
+      "slideLeft",
+      async () => (await registry.compileAnimation({
+        from: "opacity-0 translate-x-4",
+        to: "opacity-100 translate-x-0",
+        duration: 300
+      })).className
+    ),
+    slideRight: withCache(
+      "slideRight",
+      async () => (await registry.compileAnimation({
+        from: "opacity-0 -translate-x-4",
+        to: "opacity-100 translate-x-0",
+        duration: 300
+      })).className
+    ),
+    scaleIn: withCache(
+      "scaleIn",
+      async () => (await registry.compileAnimation({
+        from: "opacity-0 scale-95",
+        to: "opacity-100 scale-100",
+        duration: 200,
+        easing: "cubic-bezier(0.16,1,0.3,1)"
+      })).className
+    ),
+    scaleOut: withCache(
+      "scaleOut",
+      async () => (await registry.compileAnimation({
+        from: "opacity-100 scale-100",
+        to: "opacity-0 scale-95",
+        duration: 150
+      })).className
+    ),
+    blurIn: withCache(
+      "blurIn",
+      async () => (await registry.compileAnimation({
+        from: "opacity-0 blur-sm",
+        to: "opacity-100 blur-none",
+        duration: 300
+      })).className
+    ),
+    bounceIn: withCache(
+      "bounceIn",
+      async () => (await registry.compileAnimation({
+        from: "opacity-0 scale-50",
+        to: "opacity-100 scale-100",
+        duration: 400,
+        easing: "cubic-bezier(0.34,1.56,0.64,1)"
+      })).className
+    ),
+    spinIn: withCache(
+      "spinIn",
+      async () => (await registry.compileAnimation({
+        from: "opacity-0 rotate-180 scale-50",
+        to: "opacity-100 rotate-0 scale-100",
+        duration: 400,
+        easing: "cubic-bezier(0.16,1,0.3,1)"
+      })).className
+    )
+  };
+}
+var DEFAULT_PRESET_CACHE_LIMIT;
+var init_preset = __esm({
+  "packages/animate/src/preset.ts"() {
+    init_src();
+    DEFAULT_PRESET_CACHE_LIMIT = 32;
+  }
+});
+function formatErrorMessage2(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+var DEBUG_NAMESPACE2, debugLog2;
+var init_utils = __esm({
+  "packages/analyzer/src/utils.ts"() {
+    init_src();
+    DEBUG_NAMESPACE2 = "tailwind-styled:analyzer";
+    debugLog2 = createDebugLogger(DEBUG_NAMESPACE2, "tailwind-styled/analyzer");
+  }
+});
+
+// packages/analyzer/src/binding.ts
+function isAnalyzerModule(module) {
+  const candidate = module;
+  return typeof candidate?.analyzeClasses === "function";
+}
+function getNativeBinding() {
+  if (bindingCache !== void 0) return bindingCache;
+  if (process.env.TWS_NO_NATIVE === "1" || process.env.TWS_NO_RUST === "1") {
+    bindingCandidateCache = [];
+    bindingLoadErrorsCache = [];
+    loadedBindingPathCache = null;
+    debugLog2("native binding disabled by TWS_NO_NATIVE/TWS_NO_RUST");
+    bindingCache = null;
+    return bindingCache;
+  }
+  const runtimeDir = resolveRuntimeDir(
+    typeof __dirname === "string" ? __dirname : void 0,
+    (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.js', document.baseURI).href))
+  );
+  const candidates = resolveNativeBindingCandidates({
+    runtimeDir,
+    envVarNames: ["TWS_NATIVE_PATH"]
+  });
+  const { binding, loadErrors, loadedPath } = loadNativeBinding({
+    runtimeDir,
+    candidates,
+    isValid: isAnalyzerModule,
+    invalidExportMessage: "Module loaded but missing `analyzeClasses` export."
+  });
+  bindingCandidateCache = candidates;
+  bindingLoadErrorsCache = loadErrors;
+  loadedBindingPathCache = loadedPath;
+  if (binding) {
+    debugLog2(`native binding loaded from: ${loadedPath}`);
+    bindingCache = binding;
+    return bindingCache;
+  }
+  if (bindingLoadErrorsCache.length > 0) {
+    debugLog2(
+      `native binding load failed for ${bindingLoadErrorsCache.length} candidate(s): ${bindingLoadErrorsCache.map((entry) => `${entry.path} (${entry.message})`).join("; ")}`
+    );
+  } else {
+    debugLog2("native binding not found in any candidate path");
+  }
+  bindingCache = null;
+  return bindingCache;
+}
+function requireNativeBinding() {
+  const binding = getNativeBinding();
+  if (binding?.analyzeClasses) return binding;
+  const lines = [
+    "Native analyzer binding not found. Ensure `tailwind_styled_parser.node` is built."
+  ];
+  if (process.env.TWS_NO_NATIVE === "1" || process.env.TWS_NO_RUST === "1") {
+    lines.push("Native loading is disabled by TWS_NO_NATIVE/TWS_NO_RUST.");
+  } else {
+    lines.push("Checked paths:");
+    for (const candidate of bindingCandidateCache) lines.push(`- ${candidate}`);
+    if (bindingLoadErrorsCache.length > 0) {
+      lines.push("Load errors:");
+      for (const failure of bindingLoadErrorsCache) {
+        lines.push(`- ${failure.path}: ${failure.message}`);
+      }
+    }
+  }
+  throw new Error(lines.join("\n"));
+}
+function requireNativeCssCompiler() {
+  const binding = requireNativeBinding();
+  if (typeof binding.compileCss === "function") return binding;
+  const loadedPathText = loadedBindingPathCache ? ` (${loadedBindingPathCache})` : "";
+  throw new Error(`Native analyzer compileCss binding is missing in v5${loadedPathText}.`);
+}
+var bindingCache, bindingCandidateCache, bindingLoadErrorsCache, loadedBindingPathCache;
+var init_binding2 = __esm({
+  "packages/analyzer/src/binding.ts"() {
+    init_src();
+    init_utils();
+    bindingCandidateCache = [];
+    bindingLoadErrorsCache = [];
+    loadedBindingPathCache = null;
+  }
+});
+
+// packages/analyzer/src/classToCss.ts
+function normalizeClassInput(input) {
+  if (typeof input === "string") {
+    return input.split(/\s+/).map((item) => item.trim()).filter((item) => item.length > 0);
+  }
+  if (!Array.isArray(input)) {
+    throw new TypeError("classToCss input must be a string or an array of strings.");
+  }
+  const out = [];
+  for (const item of input) {
+    if (typeof item !== "string") {
+      throw new TypeError("classToCss input array must contain only strings.");
+    }
+    const value = item.trim();
+    if (value.length > 0) out.push(value);
+  }
+  return out;
+}
+function normalizeClassToCssOptions(options) {
+  if (!options || typeof options !== "object" || Array.isArray(options)) {
+    throw new TypeError("classToCss options must be an object.");
+  }
+  const strict = options.strict ?? false;
+  if (typeof strict !== "boolean") {
+    throw new TypeError("classToCss options.strict must be a boolean when provided.");
+  }
+  const prefix = options.prefix ?? null;
+  if (prefix !== null && typeof prefix !== "string") {
+    throw new TypeError("classToCss options.prefix must be a string or null when provided.");
+  }
+  return { prefix, strict };
+}
+function mergeDeclarationMap(target, css) {
+  const ruleRegex = /\{([^}]*)\}/g;
+  let ruleMatch = ruleRegex.exec(css);
+  while (ruleMatch) {
+    const body = ruleMatch[1];
+    for (const raw of body.split(";")) {
+      const declaration = raw.trim();
+      if (declaration.length === 0) continue;
+      const colonIndex = declaration.indexOf(":");
+      if (colonIndex <= 0) continue;
+      const property = declaration.slice(0, colonIndex).trim();
+      const value = declaration.slice(colonIndex + 1).trim();
+      if (property.length === 0 || value.length === 0) continue;
+      if (target.has(property)) target.delete(property);
+      target.set(property, value);
+    }
+    ruleMatch = ruleRegex.exec(css);
+  }
+}
+function declarationMapToString(declarationMap) {
+  return Array.from(declarationMap.entries()).map(([property, value]) => `${property}: ${value}`).join("; ");
+}
+async function classToCss(input, options = {}) {
+  const inputClasses = normalizeClassInput(input);
+  const normalizedOptions = normalizeClassToCssOptions(options);
+  if (inputClasses.length === 0) {
+    return {
+      inputClasses: [],
+      css: "",
+      declarations: "",
+      resolvedClasses: [],
+      unknownClasses: [],
+      sizeBytes: 0
+    };
+  }
+  const binding = requireNativeCssCompiler();
+  const prefix = normalizedOptions.prefix;
+  const cssChunks = [];
+  const resolvedClasses = [];
+  const unknownClasses = [];
+  let sizeBytes = 0;
+  const declarationMap = /* @__PURE__ */ new Map();
+  for (const className of inputClasses) {
+    let compiled = null;
+    try {
+      compiled = binding.compileCss([className], prefix);
+    } catch (error) {
+      throw new Error(
+        `Native analyzer failed while compiling class "${className}": ${formatErrorMessage2(error)}`,
+        { cause: error }
+      );
+    }
+    if (!compiled) {
+      throw new Error(`Native analyzer returned no result for class "${className}".`);
+    }
+    cssChunks.push(compiled.css);
+    resolvedClasses.push(...compiled.resolvedClasses);
+    unknownClasses.push(...compiled.unknownClasses);
+    sizeBytes += compiled.sizeBytes;
+    mergeDeclarationMap(declarationMap, compiled.css);
+  }
+  const uniqueUnknown = Array.from(new Set(unknownClasses));
+  if (normalizedOptions.strict && uniqueUnknown.length > 0) {
+    throw new Error(`Unknown Tailwind classes: ${uniqueUnknown.join(", ")}`);
+  }
+  return {
+    inputClasses,
+    css: cssChunks.filter((chunk) => chunk.length > 0).join("\n"),
+    declarations: declarationMapToString(declarationMap),
+    resolvedClasses: Array.from(new Set(resolvedClasses)),
+    unknownClasses: uniqueUnknown,
+    sizeBytes
+  };
+}
+var init_classToCss = __esm({
+  "packages/analyzer/src/classToCss.ts"() {
+    init_binding2();
+    init_utils();
+  }
+});
+
+// packages/analyzer/src/index.ts
+var init_src2 = __esm({
+  "packages/analyzer/src/index.ts"() {
+    init_classToCss();
+  }
+});
+
+// packages/animate/src/registry.ts
+function normalizeNumber(value, fallback) {
+  if (!Number.isFinite(value)) return fallback;
+  return Math.max(0, Math.trunc(value));
+}
+function normalizeCacheLimit(value) {
+  if (!Number.isFinite(value)) return DEFAULT_CACHE_LIMIT;
+  return Math.max(1, Math.trunc(value));
+}
+function normalizeIterations(value) {
+  if (value === "infinite") return "infinite";
+  if (!Number.isFinite(value)) return String(DEFAULT_ITERATIONS);
+  return String(Math.max(0, Math.trunc(value)));
+}
+function stableKeyframesEntries(stops) {
+  return Object.entries(stops).map(([offset, classes]) => ({ offset, classes })).sort((left, right) => left.offset.localeCompare(right.offset));
+}
+function animationCacheKey(opts) {
+  const normalized = {
+    from: opts.from.trim(),
+    to: opts.to.trim(),
+    duration: normalizeNumber(opts.duration, DEFAULT_DURATION),
+    easing: (opts.easing ?? DEFAULT_EASING).trim(),
+    delay: normalizeNumber(opts.delay, DEFAULT_DELAY),
+    fill: opts.fill ?? DEFAULT_FILL,
+    iterations: normalizeIterations(opts.iterations),
+    direction: opts.direction ?? DEFAULT_DIRECTION,
+    name: opts.name ?? ""
+  };
+  return JSON.stringify(normalized);
+}
+function keyframesCacheKey(name, stops) {
+  return `${name}::${JSON.stringify(stableKeyframesEntries(stops))}`;
+}
+function splitClasses(classList) {
+  return classList.split(/\s+/).map((item) => item.trim()).filter((item) => item.length > 0);
+}
+async function validateTailwindClasses(entries) {
+  const binding = await getAnimateBinding();
+  const unknownByContext = /* @__PURE__ */ new Map();
+  const failures = [];
+  for (const entry of entries) {
+    const classes = splitClasses(entry.classList);
+    if (classes.length === 0) continue;
+    try {
+      if (typeof binding.compileCss === "function") {
+        const compiled = binding.compileCss(classes, null);
+        if (!compiled) {
+          failures.push(
+            `Animation ${entry.context} failed validation: native compileCss returned no result.`
+          );
+          continue;
+        }
+        if (compiled.unknownClasses.length > 0) {
+          const bucket = unknownByContext.get(entry.context) ?? /* @__PURE__ */ new Set();
+          for (const className of compiled.unknownClasses) bucket.add(className);
+          unknownByContext.set(entry.context, bucket);
+        }
+        continue;
+      }
+      const checked = await classToCss(classes, { strict: false });
+      if (checked.unknownClasses.length > 0) {
+        const bucket = unknownByContext.get(entry.context) ?? /* @__PURE__ */ new Set();
+        for (const className of checked.unknownClasses) bucket.add(className);
+        unknownByContext.set(entry.context, bucket);
+      }
+    } catch (error) {
+      failures.push(`Animation ${entry.context} failed validation: ${formatErrorMessage(error)}`);
+    }
+  }
+  const issues = [];
+  for (const [context, classes] of unknownByContext.entries()) {
+    issues.push(
+      `Animation ${context} contains unknown Tailwind classes: ${Array.from(classes).join(", ")}`
+    );
+  }
+  issues.push(...failures);
+  if (issues.length > 0) {
+    throw new Error(issues.join("\n"));
+  }
+}
+function createAnimationRegistry(options = {}) {
+  return new AnimationRegistry(options);
+}
+var DEFAULT_DURATION, DEFAULT_EASING, DEFAULT_DELAY, DEFAULT_FILL, DEFAULT_ITERATIONS, DEFAULT_DIRECTION, DEFAULT_CACHE_LIMIT, AnimationRegistry;
+var init_registry = __esm({
+  "packages/animate/src/registry.ts"() {
+    init_src2();
+    init_src();
+    init_binding();
+    DEFAULT_DURATION = 300;
+    DEFAULT_EASING = "ease-out";
+    DEFAULT_DELAY = 0;
+    DEFAULT_FILL = "both";
+    DEFAULT_ITERATIONS = 1;
+    DEFAULT_DIRECTION = "normal";
+    DEFAULT_CACHE_LIMIT = 512;
+    AnimationRegistry = class {
+      constructor(options = {}) {
+        const cacheLimit = normalizeCacheLimit(options.cacheLimit);
+        this.animations = new LRUCache(cacheLimit);
+        this.animationBySignature = new LRUCache(cacheLimit);
+        this.keyframesBySignature = new LRUCache(cacheLimit);
+      }
+      async compileAnimation(opts) {
+        const signature = animationCacheKey(opts);
+        const existingClassName = this.animationBySignature.get(signature);
+        if (existingClassName) {
+          const cached = this.animations.get(existingClassName);
+          if (cached) return cached;
+          this.animationBySignature.delete(signature);
+        }
+        await validateTailwindClasses([
+          { classList: opts.from, context: `"from" in ${opts.name ?? "anonymous animation"}` },
+          { classList: opts.to, context: `"to" in ${opts.name ?? "anonymous animation"}` }
+        ]);
+        const binding = await getAnimateBinding();
+        const duration = normalizeNumber(opts.duration, DEFAULT_DURATION);
+        const easing = opts.easing ?? DEFAULT_EASING;
+        const delay = normalizeNumber(opts.delay, DEFAULT_DELAY);
+        const fill = opts.fill ?? DEFAULT_FILL;
+        const iterations = normalizeIterations(opts.iterations);
+        const direction = opts.direction ?? DEFAULT_DIRECTION;
+        const compiled = binding.compileAnimation?.(
+          opts.from,
+          opts.to,
+          opts.name ?? null,
+          duration,
+          easing,
+          delay,
+          fill,
+          iterations,
+          direction
+        );
+        if (!compiled) {
+          throw new Error(
+            `Native animate backend failed to compile animation "${opts.name ?? "anonymous animation"}".`
+          );
+        }
+        const result = {
+          className: compiled.className,
+          keyframesCss: compiled.keyframesCss,
+          animationCss: compiled.animationCss
+        };
+        this.animations.set(result.className, result);
+        this.animationBySignature.set(signature, result.className);
+        return result;
+      }
+      async compileKeyframes(name, stops) {
+        const signature = keyframesCacheKey(name, stops);
+        const existingClassName = this.keyframesBySignature.get(signature);
+        if (existingClassName) {
+          const cached = this.animations.get(existingClassName);
+          if (cached) return cached;
+          this.keyframesBySignature.delete(signature);
+        }
+        await validateTailwindClasses(
+          Object.entries(stops).map(([offset, classes]) => ({
+            classList: classes,
+            context: `"${offset}" stop in keyframes "${name}"`
+          }))
+        );
+        const binding = await getAnimateBinding();
+        const stopsJson = JSON.stringify(stableKeyframesEntries(stops));
+        const compiled = binding.compileKeyframes?.(name, stopsJson);
+        if (!compiled) {
+          throw new Error(`Native animate backend failed to compile keyframes "${name}".`);
+        }
+        const result = {
+          className: compiled.className,
+          keyframesCss: compiled.keyframesCss,
+          animationCss: compiled.animationCss
+        };
+        this.animations.set(result.className, result);
+        this.keyframesBySignature.set(signature, result.className);
+        return result;
+      }
+      extractCss() {
+        const lines = [];
+        for (const [, compiled] of this.animations.entries()) {
+          lines.push(compiled.keyframesCss);
+          lines.push(`.${compiled.className} { ${compiled.animationCss} }`);
+        }
+        return lines.join("\n\n");
+      }
+      reset() {
+        this.animations.clear();
+        this.animationBySignature.clear();
+        this.keyframesBySignature.clear();
+      }
+      has(className) {
+        return this.animations.has(className);
+      }
+    };
+  }
+});
+
+// packages/animate/src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AnimationRegistry: () => AnimationRegistry,
+  animate: () => animate,
+  animations: () => animations,
+  compileAnimation: () => compileAnimation,
+  compileKeyframes: () => compileKeyframes,
+  createAnimationRegistry: () => createAnimationRegistry,
+  extractAnimationCss: () => extractAnimationCss,
+  getDefaultAnimationRegistry: () => getDefaultAnimationRegistry,
+  initAnimate: () => initAnimate2,
+  injectAnimationCss: () => injectAnimationCss,
+  keyframes: () => keyframes,
+  resetAnimationRegistry: () => resetAnimationRegistry
+});
+async function initAnimate2() {
+  await initAnimate();
+}
+function getDefaultAnimationRegistry() {
+  return defaultRegistry;
+}
+async function compileAnimation(opts, registry = defaultRegistry) {
+  return registry.compileAnimation(opts);
+}
+async function compileKeyframes(name, stops, registry = defaultRegistry) {
+  return registry.compileKeyframes(name, stops);
+}
+async function animate(opts, registry = defaultRegistry) {
+  return (await registry.compileAnimation(opts)).className;
+}
+async function keyframes(name, stops, registry = defaultRegistry) {
+  return (await registry.compileKeyframes(name, stops)).className;
+}
+function extractAnimationCss(registry = defaultRegistry) {
+  return registry.extractCss();
+}
+function resetAnimationRegistry(registry = defaultRegistry) {
+  registry.reset();
+}
+function injectAnimationCss(registry = defaultRegistry, options = {}) {
+  const targetDocument = options.document ?? (typeof document !== "undefined" ? document : void 0);
+  if (!targetDocument) {
+    if (options.silent) return;
+    throw new Error("injectAnimationCss requires a browser Document.");
+  }
+  const styleId = options.styleId ?? "__tw_animate_styles__";
+  let styleEl = targetDocument.getElementById(styleId);
+  if (!styleEl) {
+    if (!targetDocument.head) {
+      if (options.silent) return;
+      throw new Error("injectAnimationCss requires document.head to exist.");
+    }
+    styleEl = targetDocument.createElement("style");
+    styleEl.id = styleId;
+    targetDocument.head.appendChild(styleEl);
+  }
+  styleEl.textContent = registry.extractCss();
+}
+var defaultRegistry, animations;
+var init_src3 = __esm({
+  "packages/animate/src/index.ts"() {
+    init_binding();
+    init_preset();
+    init_registry();
+    init_registry();
+    defaultRegistry = createAnimationRegistry();
+    animations = createAnimationPresets(defaultRegistry);
+  }
+});
 
-// src/containerQuery.ts
+// packages/core/src/containerQuery.ts
 var CONTAINER_BREAKPOINTS = {
   xs: "240px",
   sm: "320px",
@@ -54,7 +885,7 @@ if (typeof window !== "undefined") {
   window.__TW_CONTAINER_REGISTRY__ = containerRegistry;
 }
 function hashContainer(tag, container, name) {
-  const key = tag + (name != null ? name : "") + JSON.stringify(Object.entries(container).sort());
+  const key = tag + (name ?? "") + JSON.stringify(Object.entries(container).sort());
   let hash = 5381;
   for (let i = 0; i < key.length; i++) {
     hash = (hash << 5) + hash ^ key.charCodeAt(i);
@@ -113,31 +944,29 @@ var LAYOUT_MAP = {
   "justify-end": "justify-content:flex-end"
 };
 function layoutClassesToCss(classes) {
-  var _a, _b;
   const decls = [];
   for (const cls of classes.trim().split(/\s+/)) {
     if (LAYOUT_MAP[cls]) decls.push(LAYOUT_MAP[cls]);
     else if (cls.startsWith("w-[")) {
-      const val = (_a = cls.match(/\[(.+)\]/)) == null ? void 0 : _a[1];
+      const val = cls.match(/\[(.+)\]/)?.[1];
       if (val) decls.push(`width:${val}`);
     } else if (cls.startsWith("max-w-[")) {
-      const val = (_b = cls.match(/\[(.+)\]/)) == null ? void 0 : _b[1];
+      const val = cls.match(/\[(.+)\]/)?.[1];
       if (val) decls.push(`max-width:${val}`);
     }
   }
   return decls.join(";");
 }
 function buildContainerRules(id, container, containerName) {
-  var _a, _b, _c;
   const rules = [];
   for (const [key, value] of Object.entries(container)) {
     let minWidth;
     let classes;
     if (typeof value === "string") {
-      minWidth = (_a = CONTAINER_BREAKPOINTS[key]) != null ? _a : key;
+      minWidth = CONTAINER_BREAKPOINTS[key] ?? key;
       classes = value;
     } else {
-      minWidth = (_c = (_b = value.minWidth) != null ? _b : CONTAINER_BREAKPOINTS[key]) != null ? _c : key;
+      minWidth = value.minWidth ?? CONTAINER_BREAKPOINTS[key] ?? key;
       classes = value.classes;
     }
     const css = layoutClassesToCss(classes);
@@ -157,7 +986,7 @@ function injectContainerStyles(id, container, containerName) {
     const { batchedInject } = __require("@tailwind-styled/runtime-css/batched");
     for (const rule of css.split("\n").filter(Boolean)) batchedInject(rule);
     return;
-  } catch (e) {
+  } catch {
   }
   const style = document.createElement("style");
   style.id = styleId;
@@ -168,13 +997,10 @@ function injectContainerStyles(id, container, containerName) {
 function processContainer(tag, container, containerName) {
   const id = hashContainer(tag, container, containerName);
   if (!containerRegistry.has(id)) {
-    const breakpoints = Object.entries(container).map(([key, value]) => {
-      var _a;
-      return {
-        minWidth: (_a = CONTAINER_BREAKPOINTS[key]) != null ? _a : key,
-        classes: typeof value === "string" ? value : value.classes
-      };
-    });
+    const breakpoints = Object.entries(container).map(([key, value]) => ({
+      minWidth: CONTAINER_BREAKPOINTS[key] ?? key,
+      classes: typeof value === "string" ? value : value.classes
+    }));
     containerRegistry.set(id, {
       id,
       tag,
@@ -195,7 +1021,7 @@ function getContainerRegistry() {
   return containerRegistry;
 }
 
-// src/stateEngine.ts
+// packages/core/src/stateEngine.ts
 var stateRegistry = /* @__PURE__ */ new Map();
 if (typeof window !== "undefined") {
   window.__TW_STATE_REGISTRY__ = stateRegistry;
@@ -301,12 +1127,11 @@ var TW_MAP = {
   "text-zinc-500": "color:rgb(113,113,122)"
 };
 function twClassesToCss(classes) {
-  var _a;
   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 = (_a = cls.match(/\[(.+)\]/)) == null ? void 0 : _a[1];
+      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}`);
@@ -333,7 +1158,7 @@ function injectStateStyles(id, state) {
     const { batchedInject } = __require("@tailwind-styled/runtime-css/batched");
     for (const rule of rules) batchedInject(rule);
     return;
-  } catch (e) {
+  } catch {
   }
   const style = document.createElement("style");
   style.id = styleId;
@@ -372,7 +1197,7 @@ function getStateRegistry() {
   return stateRegistry;
 }
 
-// src/createComponent.ts
+// packages/core/src/createComponent.ts
 var ALWAYS_BLOCKED = /* @__PURE__ */ new Set(["base", "_ref", "state", "container", "containerName"]);
 function makeFilterProps(variantKeys) {
   return function filterProps(props) {
@@ -387,10 +1212,9 @@ function makeFilterProps(variantKeys) {
   };
 }
 function resolveVariants(variants, props, defaults) {
-  var _a;
   const classes = [];
   for (const key in variants) {
-    const val = (_a = props[key]) != null ? _a : defaults[key];
+    const val = props[key] ?? defaults[key];
     if (val !== void 0 && variants[key][String(val)]) {
       classes.push(variants[key][String(val)]);
     }
@@ -400,50 +1224,49 @@ function resolveVariants(variants, props, defaults) {
 function resolveCompound(compounds, props) {
   const classes = [];
   for (const compound of compounds) {
-    const _a = compound, { class: cls } = _a, conditions = __objRest(_a, ["class"]);
+    const { class: cls, ...conditions } = compound;
     const match = Object.entries(conditions).every(([k, v]) => props[k] === v);
     if (match) classes.push(cls);
   }
   return classes.join(" ");
 }
 function createComponent(tag, config) {
-  var _a, _b, _c, _d, _e;
   const isStatic = typeof config === "string";
-  const base = isStatic ? config : (_a = config.base) != null ? _a : "";
-  const variants = isStatic ? {} : (_b = config.variants) != null ? _b : {};
-  const compoundVariants = isStatic ? [] : (_c = config.compoundVariants) != null ? _c : [];
-  const defaultVariants = isStatic ? {} : (_d = config.defaultVariants) != null ? _d : {};
+  const base = isStatic ? config : config.base ?? "";
+  const variants = isStatic ? {} : config.variants ?? {};
+  const compoundVariants = isStatic ? [] : config.compoundVariants ?? [];
+  const defaultVariants = isStatic ? {} : config.defaultVariants ?? {};
   const stateConfig = isStatic ? void 0 : config.state;
   const containerConfig = isStatic ? void 0 : config.container;
   const containerName = isStatic ? void 0 : config.containerName;
   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 == null ? void 0 : stateResult.stateClass, containerResult == null ? void 0 : containerResult.containerClass].filter(Boolean).join(" ");
+  const engineClasses = [stateResult?.stateClass, containerResult?.containerClass].filter(Boolean).join(" ");
   const variantKeySet = new Set(Object.keys(variants));
   const filterProps = makeFilterProps(variantKeySet);
-  const tagStr = typeof tag === "string" ? tag : (_e = tag.displayName) != null ? _e : "Component";
+  const tagStr = typeof tag === "string" ? tag : tag.displayName ?? "Component";
   if (isStatic || Object.keys(variants).length === 0) {
-    const Component2 = React.forwardRef((props, ref) => {
-      const _a2 = props, { className } = _a2, rest = __objRest(_a2, ["className"]);
-      return React.createElement(tag, __spreadProps(__spreadValues({
-        ref
-      }, filterProps(rest)), {
-        className: twMerge(base, engineClasses, className)
-      }));
+    const Component2 = React__default.default.forwardRef((props, ref) => {
+      const { className, ...rest } = props;
+      return React__default.default.createElement(tag, {
+        ref,
+        ...filterProps(rest),
+        className: tailwindMerge.twMerge(base, engineClasses, className)
+      });
     });
     Component2.displayName = `tw.${tagStr}`;
     attachExtend(Component2, tag, base, config);
     return Component2;
   }
-  const Component = React.forwardRef((props, ref) => {
+  const Component = React__default.default.forwardRef((props, ref) => {
     const { className } = props;
     const variantClasses = resolveVariants(variants, props, defaultVariants);
     const compoundClasses = resolveCompound(compoundVariants, props);
-    return React.createElement(tag, __spreadProps(__spreadValues({
-      ref
-    }, filterProps(props)), {
-      className: twMerge(base, variantClasses, compoundClasses, engineClasses, className)
-    }));
+    return React__default.default.createElement(tag, {
+      ref,
+      ...filterProps(props),
+      className: tailwindMerge.twMerge(base, variantClasses, compoundClasses, engineClasses, className)
+    });
   });
   Component.displayName = `tw.${tagStr}`;
   attachExtend(Component, tag, base, config);
@@ -452,35 +1275,38 @@ function createComponent(tag, config) {
 function attachExtend(Component, originalTag, base, config) {
   Component.extend = (strings, ..._exprs) => {
     const extra = strings.raw.join("").trim().replace(/\s+/g, " ");
-    const merged = twMerge(base, extra);
+    const merged = tailwindMerge.twMerge(base, extra);
     return createComponent(
       originalTag,
-      typeof config === "string" ? merged : __spreadProps(__spreadValues({}, config), { base: merged })
+      typeof config === "string" ? merged : { ...config, base: merged }
     );
   };
   Component.withVariants = (newConfig) => {
-    var _a, _b, _c, _d, _e, _f;
     const existing = typeof config === "object" ? config : {};
-    return createComponent(originalTag, __spreadProps(__spreadValues({}, existing), {
+    return createComponent(originalTag, {
+      ...existing,
       base,
-      variants: __spreadValues(__spreadValues({}, (_a = existing.variants) != null ? _a : {}), (_b = newConfig.variants) != null ? _b : {}),
+      variants: { ...existing.variants ?? void 0, ...newConfig.variants ?? void 0 },
       compoundVariants: [
-        ...(_c = existing.compoundVariants) != null ? _c : [],
-        ...(_d = newConfig.compoundVariants) != null ? _d : []
+        ...existing.compoundVariants ?? [],
+        ...newConfig.compoundVariants ?? []
       ],
-      defaultVariants: __spreadValues(__spreadValues({}, (_e = existing.defaultVariants) != null ? _e : {}), (_f = newConfig.defaultVariants) != null ? _f : {})
-    }));
+      defaultVariants: {
+        ...existing.defaultVariants ?? void 0,
+        ...newConfig.defaultVariants ?? void 0
+      }
+    });
   };
-  Component.animate = (opts) => {
+  Component.animate = async (opts) => {
     try {
-      const { animate: animateFn } = __require("@tailwind-styled/animate");
-      const animClass = animateFn(opts);
-      const merged = twMerge(base, animClass);
+      const { animate: animateFn } = (init_src3(), __toCommonJS(src_exports));
+      const animClass = await animateFn(opts);
+      const merged = tailwindMerge.twMerge(base, animClass);
       return createComponent(
         originalTag,
-        typeof config === "string" ? merged : __spreadProps(__spreadValues({}, config), { base: merged })
+        typeof config === "string" ? merged : { ...config, base: merged }
       );
-    } catch (e) {
+    } catch {
       console.warn("[tailwind-styled-v4] .animate() requires @tailwind-styled/animate");
       return Component;
     }
@@ -489,32 +1315,50 @@ function attachExtend(Component, originalTag, base, config) {
 function cv(config) {
   const { base = "", variants = {}, compoundVariants = [], defaultVariants = {} } = config;
   return (props = {}) => {
-    var _a;
     const classes = [base];
     for (const key in variants) {
-      const val = (_a = props[key]) != null ? _a : defaultVariants[key];
+      const val = props[key] ?? defaultVariants[key];
       if (val !== void 0 && variants[key][String(val)]) {
         classes.push(variants[key][String(val)]);
       }
     }
     for (const compound of compoundVariants) {
-      const _b = compound, { class: cls } = _b, conditions = __objRest(_b, ["class"]);
+      const { class: cls, ...conditions } = compound;
       const match = Object.entries(conditions).every(([k, v]) => props[k] === v);
       if (match) classes.push(cls);
     }
     if (props.className) classes.push(props.className);
-    return twMerge(...classes);
+    return tailwindMerge.twMerge(...classes);
   };
 }
 function cn(...inputs) {
   return inputs.filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
 }
 function cx(...inputs) {
-  return twMerge(...inputs.filter(Boolean));
+  return tailwindMerge.twMerge(...inputs.filter(Boolean));
 }
 var cxm = cx;
+function normalizeClassInput2(classLists) {
+  return classLists.filter(Boolean).map((v) => String(v).trim()).filter((v) => v.length > 0);
+}
+function createTwMerge(_options = {}) {
+  return function twMerge5(...classLists) {
+    const clean = normalizeClassInput2(classLists);
+    return tailwindMerge.twMerge(clean.join(" "));
+  };
+}
+var twMerge4 = createTwMerge();
+function mergeWithRules(rules, ...classLists) {
+  const base = twMerge4(...classLists);
+  let classes = base.split(/\s+/).filter(Boolean);
+  for (const rule of Object.values(rules)) {
+    const next = rule(classes);
+    classes = twMerge4(next).split(/\s+/).filter(Boolean);
+  }
+  return classes.join(" ");
+}
 
-// src/liveTokenEngine.ts
+// packages/core/src/liveTokenEngine.ts
 var _currentTokens = {};
 var _subscribers = /* @__PURE__ */ new Set();
 var _styleEl = null;
@@ -549,16 +1393,16 @@ function syncStyleEl() {
   _styleEl.textContent = buildRootCss(_currentTokens);
 }
 function notifySubscribers() {
-  const snapshot = __spreadValues({}, _currentTokens);
+  const snapshot = { ..._currentTokens };
   for (const sub of _subscribers) {
     try {
       sub(snapshot);
-    } catch (_e) {
+    } catch {
     }
   }
 }
 function liveToken(tokens) {
-  _currentTokens = __spreadValues(__spreadValues({}, _currentTokens), tokens);
+  _currentTokens = { ..._currentTokens, ...tokens };
   syncStyleEl();
   const vars = {};
   for (const name of Object.keys(tokens)) {
@@ -576,19 +1420,19 @@ function liveToken(tokens) {
       setTokens(newTokens);
     },
     snapshot() {
-      return __spreadValues({}, _currentTokens);
+      return { ..._currentTokens };
     }
   };
 }
 function setToken(name, value) {
-  _currentTokens = __spreadProps(__spreadValues({}, _currentTokens), { [name]: value });
+  _currentTokens = { ..._currentTokens, [name]: value };
   if (typeof document !== "undefined") {
     document.documentElement.style.setProperty(tokenVar(name), value);
   }
   notifySubscribers();
 }
 function setTokens(tokens) {
-  _currentTokens = __spreadValues(__spreadValues({}, _currentTokens), tokens);
+  _currentTokens = { ..._currentTokens, ...tokens };
   if (typeof document !== "undefined") {
     const root = document.documentElement;
     for (const [name, value] of Object.entries(tokens)) {
@@ -606,7 +1450,7 @@ function applyTokenSet(tokens) {
       }
     }
   }
-  _currentTokens = __spreadValues({}, tokens);
+  _currentTokens = { ...tokens };
   syncStyleEl();
   notifySubscribers();
 }
@@ -614,7 +1458,7 @@ function getToken(name) {
   return _currentTokens[name];
 }
 function getTokens() {
-  return __spreadValues({}, _currentTokens);
+  return { ..._currentTokens };
 }
 function subscribeTokens(fn) {
   _subscribers.add(fn);
@@ -631,21 +1475,23 @@ function createUseTokens() {
     const react = __require("react");
     useState = react.useState;
     useEffect = react.useEffect;
-  } catch (e) {
+  } catch {
     return null;
   }
   return function useTokens() {
-    const [tokens, setTokens_] = useState(__spreadValues({}, _currentTokens));
+    const [tokens, setTokens_] = useState({
+      ..._currentTokens
+    });
     useEffect(() => {
-      setTokens_(__spreadValues({}, _currentTokens));
-      const unsub = subscribeTokens((t2) => setTokens_(__spreadValues({}, t2)));
+      setTokens_({ ..._currentTokens });
+      const unsub = subscribeTokens((t2) => setTokens_({ ...t2 }));
       return unsub;
     }, []);
     return tokens;
   };
 }
 
-// src/styledSystem.ts
+// packages/core/src/styledSystem.ts
 function tokenVarName(prefix, group, name) {
   return `--${prefix}-${group}-${name}`;
 }
@@ -653,11 +1499,10 @@ function tokenVarRef(prefix, group, name) {
   return `var(${tokenVarName(prefix, group, name)})`;
 }
 function resolveTokenRef(tokens, prefix, value) {
-  var _a;
   if (value.startsWith("token:")) {
-    const path = value.slice(6);
-    const [group, name] = path.split(".");
-    if (group && name && ((_a = tokens[group]) == null ? void 0 : _a[name]) !== void 0) {
+    const path2 = value.slice(6);
+    const [group, name] = path2.split(".");
+    if (group && name && tokens[group]?.[name] !== void 0) {
       return tokenVarRef(prefix, group, name);
     }
   }
@@ -680,37 +1525,35 @@ function injectTokensToRoot(tokens, prefix) {
   document.head.appendChild(style);
 }
 function resolveComponentConfig(config, tokens, prefix) {
-  var _a, _b, _c, _d, _e;
   const resolveStr = (s) => resolveTokenRef(tokens, prefix, s);
-  const base = resolveStr((_a = config.base) != null ? _a : "");
-  const systemBase = resolveStr((_b = config.systemBase) != null ? _b : "");
+  const base = resolveStr(config.base ?? "");
+  const systemBase = resolveStr(config.systemBase ?? "");
   const mergedBase = [systemBase, base].filter(Boolean).join(" ");
   const variants = {};
-  for (const [variantKey, variantMap] of Object.entries((_c = config.variants) != null ? _c : {})) {
+  for (const [variantKey, variantMap] of Object.entries(config.variants ?? {})) {
     variants[variantKey] = {};
     for (const [optKey, classes] of Object.entries(variantMap)) {
       variants[variantKey][optKey] = classes.split(" ").map(resolveStr).join(" ");
     }
   }
-  const compoundVariants = ((_d = config.compoundVariants) != null ? _d : []).map((cv2) => {
-    const _a2 = cv2, { class: cls } = _a2, rest = __objRest(_a2, ["class"]);
-    return __spreadValues({ class: resolveStr(cls) }, rest);
+  const compoundVariants = (config.compoundVariants ?? []).map((cv2) => {
+    const { class: cls, ...rest } = cv2;
+    return { class: resolveStr(cls), ...rest };
   });
   return {
     base: mergedBase,
     variants,
     compoundVariants,
-    defaultVariants: (_e = config.defaultVariants) != null ? _e : {},
+    defaultVariants: config.defaultVariants ?? {},
     state: config.state,
     container: config.container,
     containerName: config.containerName
   };
 }
 function createStyledSystem(config) {
-  var _a, _b, _c, _d;
-  const prefix = (_a = config.prefix) != null ? _a : "sys";
-  const tokens = (_b = config.tokens) != null ? _b : {};
-  const componentDefs = (_c = config.components) != null ? _c : {};
+  const prefix = config.prefix ?? "sys";
+  const tokens = config.tokens ?? {};
+  const componentDefs = config.components ?? {};
   const shouldInject = config.injectTokens !== false;
   if (shouldInject && typeof window !== "undefined") {
     injectTokensToRoot(tokens, prefix);
@@ -724,9 +1567,8 @@ function createStyledSystem(config) {
   }
   const factories = {};
   for (const [name, compCfg] of Object.entries(componentDefs)) {
-    const tag = (_d = compCfg.tag) != null ? _d : "div";
+    const tag = compCfg.tag ?? "div";
     factories[name] = (overrides) => {
-      var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i;
       const baseResolved = resolvedConfigs.get(name);
       if (!overrides || Object.keys(overrides).length === 0) {
         return createComponent(tag, baseResolved);
@@ -738,29 +1580,34 @@ function createStyledSystem(config) {
       );
       const merged = {
         base: [baseResolved.base, overrideResolved.base].filter(Boolean).join(" "),
-        variants: __spreadValues(__spreadValues({}, (_a2 = baseResolved.variants) != null ? _a2 : {}), (_b2 = overrideResolved.variants) != null ? _b2 : {}),
+        variants: {
+          ...baseResolved.variants ?? void 0,
+          ...overrideResolved.variants ?? void 0
+        },
         compoundVariants: [
-          ...(_c2 = baseResolved.compoundVariants) != null ? _c2 : [],
-          ...(_d2 = overrideResolved.compoundVariants) != null ? _d2 : []
+          ...baseResolved.compoundVariants ?? [],
+          ...overrideResolved.compoundVariants ?? []
         ],
-        defaultVariants: __spreadValues(__spreadValues({}, (_e = baseResolved.defaultVariants) != null ? _e : {}), (_f = overrideResolved.defaultVariants) != null ? _f : {}),
-        state: (_g = overrideResolved.state) != null ? _g : baseResolved.state,
-        container: (_h = overrideResolved.container) != null ? _h : baseResolved.container,
-        containerName: (_i = overrideResolved.containerName) != null ? _i : baseResolved.containerName
+        defaultVariants: {
+          ...baseResolved.defaultVariants ?? void 0,
+          ...overrideResolved.defaultVariants ?? void 0
+        },
+        state: overrideResolved.state ?? baseResolved.state,
+        container: overrideResolved.container ?? baseResolved.container,
+        containerName: overrideResolved.containerName ?? baseResolved.containerName
       };
       return createComponent(tag, merged);
     };
   }
-  function token(path) {
-    const [group, name] = path.split(".");
-    if (!group || !name) return path;
+  function token(path2) {
+    const [group, name] = path2.split(".");
+    if (!group || !name) return path2;
     return tokenVarRef(prefix, group, name);
   }
-  function rawToken(path) {
-    var _a2;
-    const [group, name] = path.split(".");
+  function rawToken(path2) {
+    const [group, name] = path2.split(".");
     if (!group || !name) return void 0;
-    return (_a2 = tokens[group]) == null ? void 0 : _a2[name];
+    return tokens[group]?.[name];
   }
   function setTokens2(updates) {
     if (typeof document === "undefined") return;
@@ -798,11 +1645,42 @@ function createStyledSystem(config) {
   });
 }
 
-// src/twProxy.ts
+// packages/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 twMerge4(...parts);
+}
+function styled(options) {
+  return function getClassName(props = {}) {
+    return resolveStyledClassName(options, props);
+  };
+}
+
+// packages/core/src/twProxy.ts
 function parseTemplate(strings, exprs) {
   return strings.raw.reduce((acc, str, i) => {
     const expr = exprs[i];
-    const exprStr = typeof expr === "function" ? "" : expr != null ? expr : "";
+    const exprStr = typeof expr === "function" ? "" : expr ?? "";
     return acc + str + String(exprStr);
   }, "").split("\n").map((l) => l.trim()).filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
 }
@@ -925,8 +1803,7 @@ function makeServerTag(tag) {
   const baseFactory = makeTag(tag);
   if (typeof window !== "undefined" && process.env.NODE_ENV !== "production") {
     return ((...args) => {
-      var _a;
-      const tagName = typeof tag === "string" ? tag : (_a = tag.displayName) != null ? _a : "Component";
+      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.`
       );
@@ -951,7 +1828,7 @@ var tw = Object.assign(twCallable, tagFactories, {
   server
 });
 
-// src/twTheme.ts
+// packages/core/src/twTheme.ts
 function cssVar(varName, fallback) {
   const name = varName.startsWith("--") ? varName : `--${varName}`;
   return fallback ? `var(${name}, ${fallback})` : `var(${name})`;
@@ -996,7 +1873,6 @@ function createTheme(tokenMap) {
   return resolved;
 }
 function getGroupPrefix(group) {
-  var _a;
   const map = {
     colors: "bg",
     // default to bg; user can use t.text() for text colors
@@ -1004,7 +1880,7 @@ function getGroupPrefix(group) {
     spacing: "p",
     shadows: "shadow"
   };
-  return (_a = map[group]) != null ? _a : "";
+  return map[group] ?? "";
 }
 var v4Tokens = {
   /** bg-[var(--color-background)] */
@@ -1017,6 +1893,322 @@ var v4Tokens = {
   fontMono: twVar("font", "font-mono")
 };
 
-export { applyTokenSet, cn, tokenRef as containerRef, createComponent, createStyledSystem, createTheme, createUseTokens, cssVar, cv, cx, cxm, generateContainerCss, generateStateCss, generateTokenCssString, getContainerRegistry, getStateRegistry, getToken, getTokens, liveToken, processContainer, processState, server, setToken, setTokens, subscribeTokens, t, tokenRef, tokenVar, tw, twVar, v4Tokens };
+// packages/core/src/parser.ts
+var _getNodePath = () => typeof __require !== "undefined" ? __require("path") : null;
+var _getCreateRequire = () => {
+  if (typeof __require !== "undefined") {
+    try {
+      return __require("module").createRequire;
+    } catch {
+      return null;
+    }
+  }
+  return null;
+};
+var _binding;
+function getBinding() {
+  if (_binding !== void 0) return _binding;
+  if (process.env.TWS_NO_NATIVE === "1" || process.env.TWS_NO_RUST === "1") {
+    return _binding = null;
+  }
+  if (typeof process === "undefined" || typeof process.cwd !== "function") {
+    return _binding = null;
+  }
+  const runtimeDir = typeof __dirname === "string" ? __dirname : process.cwd();
+  const nodePath = _getNodePath();
+  const nodeCreateRequire = _getCreateRequire();
+  if (!nodePath) return _binding = null;
+  const req = typeof __require === "function" ? __require : nodeCreateRequire ? nodeCreateRequire(nodePath.join(runtimeDir, "noop.cjs")) : null;
+  if (!req) return _binding = null;
+  const candidates = [
+    nodePath.resolve(process.cwd(), "native", "tailwind_styled_parser.node"),
+    nodePath.resolve(runtimeDir, "..", "..", "..", "native", "tailwind_styled_parser.node"),
+    nodePath.resolve(runtimeDir, "..", "..", "..", "..", "native", "tailwind_styled_parser.node")
+  ];
+  for (const c of candidates) {
+    try {
+      const mod = req(c);
+      if (mod?.parseClasses) return _binding = mod;
+    } catch {
+    }
+  }
+  return _binding = null;
+}
+function splitClassListJS(input) {
+  const out = [];
+  let token = "";
+  let square = 0;
+  let round = 0;
+  let escaped = false;
+  for (const ch of input) {
+    if (escaped) {
+      token += ch;
+      escaped = false;
+      continue;
+    }
+    if (ch === "\\") {
+      token += ch;
+      escaped = true;
+      continue;
+    }
+    if (ch === "[") square++;
+    else if (ch === "]") square = Math.max(0, square - 1);
+    else if (ch === "(") round++;
+    else if (ch === ")") round = Math.max(0, round - 1);
+    const isSpace = /\s/.test(ch);
+    if (isSpace && square === 0 && round === 0) {
+      if (token.trim().length > 0) out.push(token.trim());
+      token = "";
+      continue;
+    }
+    token += ch;
+  }
+  if (token.trim().length > 0) out.push(token.trim());
+  return out;
+}
+function parseClassTokenJS(rawToken) {
+  const parts = [];
+  let current = "";
+  let square = 0;
+  let round = 0;
+  let escaped = false;
+  for (const ch of rawToken) {
+    if (escaped) {
+      current += ch;
+      escaped = false;
+      continue;
+    }
+    if (ch === "\\") {
+      current += ch;
+      escaped = true;
+      continue;
+    }
+    if (ch === "[") square++;
+    else if (ch === "]") square = Math.max(0, square - 1);
+    else if (ch === "(") round++;
+    else if (ch === ")") round = Math.max(0, round - 1);
+    if (ch === ":" && square === 0 && round === 0) {
+      parts.push(current);
+      current = "";
+      continue;
+    }
+    current += ch;
+  }
+  parts.push(current);
+  const variants = parts.slice(0, -1).filter(Boolean);
+  const baseToken = parts[parts.length - 1] ?? "";
+  const parsed = { raw: rawToken, base: baseToken, variants };
+  const opacityMatch = baseToken.match(/^(.*)\/(\d{1,3})$/);
+  if (opacityMatch && opacityMatch[1].length > 0) {
+    parsed.base = opacityMatch[1];
+    parsed.modifier = { type: "opacity", value: opacityMatch[2] };
+    return parsed;
+  }
+  const arbitraryMatch = baseToken.match(/\((--[a-zA-Z0-9_-]+)\)/);
+  if (arbitraryMatch) {
+    parsed.modifier = { type: "arbitrary", value: arbitraryMatch[1] };
+  }
+  return parsed;
+}
+function splitClassList(input) {
+  const binding = getBinding();
+  if (binding?.parseClasses) {
+    try {
+      return binding.parseClasses(input).map((p) => p.raw);
+    } catch {
+    }
+  }
+  return splitClassListJS(input);
+}
+function parseClassToken(rawToken) {
+  const binding = getBinding();
+  if (binding?.parseClasses) {
+    try {
+      const results = binding.parseClasses(rawToken);
+      if (results.length === 1) {
+        const r = results[0];
+        const parsed = {
+          raw: r.raw,
+          base: r.base,
+          variants: r.variants
+        };
+        if (r.modifierType && r.modifierValue) {
+          parsed.modifier = {
+            type: r.modifierType,
+            value: r.modifierValue
+          };
+        }
+        return parsed;
+      }
+    } catch {
+    }
+  }
+  return parseClassTokenJS(rawToken);
+}
+function parseTailwindClasses(input) {
+  const binding = getBinding();
+  if (binding?.parseClasses) {
+    try {
+      return binding.parseClasses(input).map((r) => {
+        const parsed = { raw: r.raw, base: r.base, variants: r.variants };
+        if (r.modifierType && r.modifierValue) {
+          parsed.modifier = {
+            type: r.modifierType,
+            value: r.modifierValue
+          };
+        }
+        return parsed;
+      });
+    } catch {
+    }
+  }
+  return splitClassListJS(input).map(parseClassTokenJS);
+}
+
+// packages/core/src/themeReader.ts
+var THEME_BLOCK_RE = /@theme\s*\{([\s\S]*?)\}/g;
+var CSS_VAR_RE = /--([a-zA-Z0-9_-]+)\s*:\s*([^;]+);/g;
+var cache = /* @__PURE__ */ new Map();
+function createEmptyTheme() {
+  return {
+    colors: {},
+    spacing: {},
+    fonts: {},
+    breakpoints: {},
+    animations: {},
+    raw: {}
+  };
+}
+function setToken2(theme, key, value) {
+  theme.raw[key] = value;
+  if (key.startsWith("color-")) {
+    theme.colors[key.slice("color-".length)] = value;
+    return;
+  }
+  if (key.startsWith("spacing-")) {
+    theme.spacing[key.slice("spacing-".length)] = value;
+    return;
+  }
+  if (key.startsWith("font-")) {
+    theme.fonts[key.slice("font-".length)] = value;
+    return;
+  }
+  if (key.startsWith("breakpoint-")) {
+    theme.breakpoints[key.slice("breakpoint-".length)] = value;
+    return;
+  }
+  if (key.startsWith("animate-")) {
+    theme.animations[key.slice("animate-".length)] = value;
+  }
+}
+function resolveThemeValue(key, theme, visited = /* @__PURE__ */ new Set()) {
+  const token = key.replace(/^--/, "");
+  const raw = theme.raw[token];
+  if (!raw) return "";
+  if (visited.has(token)) return raw;
+  const nested = raw.match(/^var\((--[a-zA-Z0-9_-]+)\)$/);
+  if (!nested) return raw;
+  visited.add(token);
+  return resolveThemeValue(nested[1], theme, visited);
+}
+function extractThemeFromCSS(cssContent) {
+  const hit = cache.get(cssContent);
+  if (hit) return hit;
+  const theme = createEmptyTheme();
+  let blockMatch;
+  while ((blockMatch = THEME_BLOCK_RE.exec(cssContent)) !== null) {
+    const block = blockMatch[1];
+    let varMatch;
+    while ((varMatch = CSS_VAR_RE.exec(block)) !== null) {
+      const key = varMatch[1];
+      const value = varMatch[2].trim();
+      setToken2(theme, key, value);
+    }
+  }
+  for (const key of Object.keys(theme.raw)) {
+    const resolved = resolveThemeValue(`--${key}`, theme);
+    theme.raw[key] = resolved;
+    if (key.startsWith("color-")) {
+      theme.colors[key.slice("color-".length)] = resolved;
+    } else if (key.startsWith("spacing-")) {
+      theme.spacing[key.slice("spacing-".length)] = resolved;
+    } else if (key.startsWith("font-")) {
+      theme.fonts[key.slice("font-".length)] = resolved;
+    } else if (key.startsWith("breakpoint-")) {
+      theme.breakpoints[key.slice("breakpoint-".length)] = resolved;
+    } else if (key.startsWith("animate-")) {
+      theme.animations[key.slice("animate-".length)] = resolved;
+    }
+  }
+  cache.set(cssContent, theme);
+  return theme;
+}
+function generateTypeDefinitions(theme) {
+  const toRecordType = (name, obj) => {
+    const keys = Object.keys(obj);
+    if (keys.length === 0) return `  ${name}: Record<string, string>`;
+    const mapped = keys.map((k) => `    "${k}": string`).join("\n");
+    return `  ${name}: {
+${mapped}
+  }`;
+  };
+  return [
+    "export interface TailwindStyledThemeTokens {",
+    toRecordType("colors", theme.colors),
+    toRecordType("spacing", theme.spacing),
+    toRecordType("fonts", theme.fonts),
+    toRecordType("breakpoints", theme.breakpoints),
+    toRecordType("animations", theme.animations),
+    "}",
+    ""
+  ].join("\n");
+}
+function clearThemeReaderCache() {
+  cache.clear();
+}
+
+exports.applyTokenSet = applyTokenSet;
+exports.clearThemeReaderCache = clearThemeReaderCache;
+exports.cn = cn;
+exports.containerRef = tokenRef;
+exports.createComponent = createComponent;
+exports.createStyledSystem = createStyledSystem;
+exports.createTheme = createTheme;
+exports.createTwMerge = createTwMerge;
+exports.createUseTokens = createUseTokens;
+exports.cssVar = cssVar;
+exports.cv = cv;
+exports.cx = cx;
+exports.cxm = cxm;
+exports.extractThemeFromCSS = extractThemeFromCSS;
+exports.generateContainerCss = generateContainerCss;
+exports.generateStateCss = generateStateCss;
+exports.generateTokenCssString = generateTokenCssString;
+exports.generateTypeDefinitions = generateTypeDefinitions;
+exports.getContainerRegistry = getContainerRegistry;
+exports.getStateRegistry = getStateRegistry;
+exports.getToken = getToken;
+exports.getTokens = getTokens;
+exports.liveToken = liveToken;
+exports.mergeWithRules = mergeWithRules;
+exports.parseClassToken = parseClassToken;
+exports.parseTailwindClasses = parseTailwindClasses;
+exports.processContainer = processContainer;
+exports.processState = processState;
+exports.resolveStyledClassName = resolveStyledClassName;
+exports.resolveThemeValue = resolveThemeValue;
+exports.server = server;
+exports.setToken = setToken;
+exports.setTokens = setTokens;
+exports.splitClassList = splitClassList;
+exports.styled = styled;
+exports.subscribeTokens = subscribeTokens;
+exports.t = t;
+exports.tokenRef = tokenRef;
+exports.tokenVar = tokenVar;
+exports.tw = tw;
+exports.twMerge = twMerge4;
+exports.twVar = twVar;
+exports.v4Tokens = v4Tokens;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map