tailwind-styled-v4 5.0.11 → 5.0.12

package/dist/turbopackLoader.mjs

@@ -1,13 +1,16 @@
 import { createRequire } from 'module';
-import * as fs3 from 'fs';
-import fs3__default from 'fs';
-import * as path3 from 'path';
-import path3__default from 'path';
+import * as fs4 from 'fs';
+import fs4__default from 'fs';
+import * as path4 from 'path';
+import path4__default from 'path';
 import 'crypto';
 import { fileURLToPath } from 'url';
 
 /* tailwind-styled-v4 v5.0.4 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 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) {
@@ -17,6 +20,19 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 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);
 function platformKey() {
   if (isBrowser) return "browser";
   return `${process.platform}-${process.arch}`;
@@ -27,12 +43,12 @@ function resolveNativeBinary(runtimeDir) {
   if (isBrowser) {
     return { path: null, source: "not-found", platform, tried: ["not available in browser"] };
   }
-  if (process.env.TWS_DISABLE_NATIVE === "1") {
+  if (process.env.TWS_NO_NATIVE === "1" || 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 (fs3.existsSync(envPath)) {
+    if (fs4.existsSync(envPath)) {
       return { path: envPath, source: "env", platform, tried };
     }
     tried.push(`env:${envPath} (not found)`);
@@ -41,7 +57,7 @@ function resolveNativeBinary(runtimeDir) {
   for (const pkg of prebuiltPkgs) {
     try {
       const candidate = _require.resolve(`${pkg}/tailwind_styled_parser.node`);
-      if (fs3.existsSync(candidate)) {
+      if (fs4.existsSync(candidate)) {
         return { path: candidate, source: "prebuilt", platform, tried };
       }
       tried.push(`prebuilt:${pkg} (resolved but missing)`);
@@ -52,13 +68,13 @@ function resolveNativeBinary(runtimeDir) {
   const napiPlatform = platform === "linux-x64" ? "linux-x64-gnu" : platform === "linux-arm64" ? "linux-arm64-gnu" : platform;
   const BINARY_NAMES_SELF = ["tailwind-styled-native", "tailwind_styled_parser"];
   if (runtimeDir) {
-    for (const depth of ["..", path3.join("..", ".."), path3.join("..", "..", "..")]) {
-      const pkgRoot = path3.resolve(runtimeDir, depth);
+    for (const depth of ["..", path4.join("..", ".."), path4.join("..", "..", "..")]) {
+      const pkgRoot = path4.resolve(runtimeDir, depth);
       for (const bin of BINARY_NAMES_SELF) {
         for (const suffix of ["", `.${platform}`, `.${napiPlatform}`]) {
-          const candidate = path3.resolve(pkgRoot, "native", `${bin}${suffix}.node`);
+          const candidate = path4.resolve(pkgRoot, "native", `${bin}${suffix}.node`);
           tried.push(`self-bundled:${candidate}`);
-          if (fs3.existsSync(candidate)) {
+          if (fs4.existsSync(candidate)) {
             return { path: candidate, source: "prebuilt", platform, tried };
           }
         }
@@ -70,29 +86,29 @@ function resolveNativeBinary(runtimeDir) {
   const BINARY_NAMES = ["tailwind-styled-native", "tailwind_styled_parser"];
   const localCandidates = [];
   for (const bin of BINARY_NAMES) {
-    localCandidates.push(path3.resolve(base, `${bin}.node`));
-    localCandidates.push(path3.resolve(base, "..", `${bin}.node`));
-    localCandidates.push(path3.resolve(base, `${bin}.${platform}.node`));
-    localCandidates.push(path3.resolve(base, `${bin}.${napiPlatform}.node`));
+    localCandidates.push(path4.resolve(base, `${bin}.node`));
+    localCandidates.push(path4.resolve(base, "..", `${bin}.node`));
+    localCandidates.push(path4.resolve(base, `${bin}.${platform}.node`));
+    localCandidates.push(path4.resolve(base, `${bin}.${napiPlatform}.node`));
   }
   for (const startDir of [cwd, base]) {
     let dir = startDir;
     for (let i = 0; i < 6; i++) {
-      const nativeDir = path3.resolve(dir, "native");
+      const nativeDir = path4.resolve(dir, "native");
       for (const bin of BINARY_NAMES) {
-        localCandidates.push(path3.resolve(nativeDir, `${bin}.node`));
-        localCandidates.push(path3.resolve(nativeDir, `${bin}.${platform}.node`));
-        localCandidates.push(path3.resolve(nativeDir, `${bin}.${napiPlatform}.node`));
-        localCandidates.push(path3.resolve(nativeDir, "target", "release", `${bin}.node`));
+        localCandidates.push(path4.resolve(nativeDir, `${bin}.node`));
+        localCandidates.push(path4.resolve(nativeDir, `${bin}.${platform}.node`));
+        localCandidates.push(path4.resolve(nativeDir, `${bin}.${napiPlatform}.node`));
+        localCandidates.push(path4.resolve(nativeDir, "target", "release", `${bin}.node`));
       }
-      const parent = path3.resolve(dir, "..");
+      const parent = path4.resolve(dir, "..");
       if (parent === dir) break;
       dir = parent;
     }
   }
   for (const candidate of localCandidates) {
     tried.push(`local:${candidate}`);
-    if (fs3.existsSync(candidate)) {
+    if (fs4.existsSync(candidate)) {
       return { path: candidate, source: "local", platform, tried };
     }
   }
@@ -115,7 +131,7 @@ var init_native_resolution = __esm({
 });
 function resolveRuntimeDir(dir, importMetaUrl) {
   try {
-    return path3__default.dirname(fileURLToPath(importMetaUrl));
+    return path4__default.dirname(fileURLToPath(importMetaUrl));
   } catch {
     return process.cwd();
   }
@@ -128,11 +144,11 @@ var init_src = __esm({
 });
 
 // packages/domain/compiler/src/nativeBridge.ts
-var _loadNative, log, NATIVE_UNAVAILABLE_MESSAGE, nativeBridge, bridgeLoadAttempted, bridgeLoadError, isValidNativeBridge, getNativeBridge;
+var _loadNative, log, NATIVE_UNAVAILABLE_MESSAGE, nativeBridge, bridgeLoadAttempted, bridgeLoadError, isValidNativeBridge, getNativeBridge, adaptNativeResult;
 var init_nativeBridge = __esm({
   "packages/domain/compiler/src/nativeBridge.ts"() {
     init_src();
-    _loadNative = (path4) => __require(path4);
+    _loadNative = (path5) => __require(path5);
     log = (...args) => {
       if (process.env.DEBUG?.includes("compiler:native")) {
         console.log("[compiler:native]", ...args);
@@ -181,6 +197,15 @@ Tried paths: ${result.tried.join("\n")}`);
         throw bridgeLoadError;
       }
     };
+    adaptNativeResult = (raw) => {
+      return {
+        code: raw.code ?? "",
+        classes: raw.classes ?? [],
+        changed: raw.changed ?? false,
+        rsc: raw.rscJson ? JSON.parse(raw.rscJson) : void 0,
+        metadata: raw.metadataJson ? JSON.parse(raw.metadataJson) : void 0
+      };
+    };
     if (typeof process !== "undefined" && !bridgeLoadAttempted) {
       try {
         getNativeBridge();
@@ -190,30 +215,852 @@ Tried paths: ${result.tried.join("\n")}`);
   }
 });
 
-// packages/domain/compiler/src/index.ts
-init_nativeBridge();
-var transformSource = (source, opts) => {
-  const native = getNativeBridge();
-  if (!native?.transformSource) {
-    throw new Error("FATAL: Native binding 'transformSource' is required but not available.");
+// packages/domain/compiler/src/tailwindEngine.ts
+var tailwindEngine_exports = {};
+__export(tailwindEngine_exports, {
+  clearCache: () => clearCache,
+  generateRawCss: () => generateRawCss,
+  getCacheStats: () => getCacheStats,
+  processTailwindCssWithTargets: () => processTailwindCssWithTargets,
+  runCssPipeline: () => runCssPipeline,
+  runCssPipelineSync: () => runCssPipelineSync
+});
+function _getCacheKey(classes, minify, cssEntry, root) {
+  const sorted = [...classes].sort().join(",");
+  const flags = `${minify ? "1" : "0"}${cssEntry ? "1" : "0"}${root ? "1" : "0"}`;
+  return `${sorted}|${flags}`;
+}
+function _evictOldestIfNeeded() {
+  if (_cssCache.size >= MAX_CACHE_SIZE) {
+    const firstKey = _cssCache.keys().next().value;
+    if (firstKey !== void 0) {
+      _cssCache.delete(firstKey);
+    }
   }
-  const result = native.transformSource(source, opts);
-  if (!result) {
-    throw new Error("FATAL: transformSource returned null");
+}
+function getCacheStats() {
+  const total = _cacheHits + _cacheMisses;
+  return {
+    hits: _cacheHits,
+    misses: _cacheMisses,
+    hitRate: total > 0 ? _cacheHits / total : 0,
+    size: _cssCache.size,
+    maxSize: MAX_CACHE_SIZE
+  };
+}
+function clearCache() {
+  _cssCache.clear();
+  _cacheHits = 0;
+  _cacheMisses = 0;
+}
+function loadTailwindEngine() {
+  if (_twEngine) return _twEngine;
+  if (_twEngineError) throw _twEngineError;
+  try {
+    const tw = require2("tailwindcss");
+    if (typeof tw.compile !== "function") {
+      throw new Error("tailwindcss v4 not found \u2014 compile() API missing. Check tailwindcss version >= 4.");
+    }
+    _twEngine = tw;
+    return _twEngine;
+  } catch (e) {
+    _twEngineError = e instanceof Error ? e : new Error(String(e));
+    throw _twEngineError;
   }
-  return result;
-};
-var runLoaderTransform = (ctx) => {
-  const { filepath, source, options } = ctx;
-  const result = transformSource(source, { filename: filepath, ...options });
+}
+async function generateRawCss(classes, cssEntryContent, root) {
+  if (classes.length === 0) return "";
+  const tw = loadTailwindEngine();
+  const input = cssEntryContent ?? "@import 'tailwindcss';";
+  const { readFileSync, existsSync: existsSync2 } = await import('fs');
+  const { dirname, resolve: resolve2 } = await import('path');
+  const projectRoot = root ?? process.cwd();
+  const req = createRequire(resolve2(projectRoot, "package.json"));
+  const loadStylesheet = async (id, base) => {
+    try {
+      const cssId = id === "tailwindcss" ? "tailwindcss/index.css" : id === "tailwindcss/preflight" ? "tailwindcss/preflight.css" : id === "tailwindcss/utilities" ? "tailwindcss/utilities.css" : id === "tailwindcss/theme" ? "tailwindcss/theme.css" : id;
+      const pkgPath = req.resolve(cssId);
+      return { content: readFileSync(pkgPath, "utf-8"), base: dirname(pkgPath) };
+    } catch {
+      try {
+        const absPath = resolve2(base, id);
+        if (existsSync2(absPath)) {
+          return { content: readFileSync(absPath, "utf-8"), base: dirname(absPath) };
+        }
+      } catch {
+      }
+      return { content: "", base };
+    }
+  };
+  const compiler = await Promise.resolve(tw.compile(input, { loadStylesheet }));
+  return compiler.build(classes);
+}
+function getThemeConfig() {
   return {
-    code: result?.code || "",
-    changed: result?.changed || false,
-    classes: result?.classes || []
+    colors: {
+      slate: {
+        "50": "#f8fafc",
+        "100": "#f1f5f9",
+        "200": "#e2e8f0",
+        "300": "#cbd5e1",
+        "400": "#94a3b8",
+        "500": "#64748b",
+        "600": "#475569",
+        "700": "#334155",
+        "800": "#1e293b",
+        "900": "#0f172a"
+      },
+      gray: {
+        "50": "#f9fafb",
+        "100": "#f3f4f6",
+        "200": "#e5e7eb",
+        "300": "#d1d5db",
+        "400": "#9ca3af",
+        "500": "#6b7280",
+        "600": "#4b5563",
+        "700": "#374151",
+        "800": "#1f2937",
+        "900": "#111827"
+      },
+      white: "#ffffff",
+      black: "#000000",
+      red: {
+        "500": "#ef4444",
+        "600": "#dc2626"
+      },
+      blue: {
+        "500": "#3b82f6",
+        "600": "#1e40af"
+      }
+    },
+    spacing: {
+      "0": "0px",
+      "1": "0.25rem",
+      "2": "0.5rem",
+      "3": "0.75rem",
+      "4": "1rem",
+      "5": "1.25rem",
+      "6": "1.5rem",
+      "8": "2rem",
+      "10": "2.5rem",
+      "12": "3rem",
+      "16": "4rem",
+      "20": "5rem",
+      "24": "6rem"
+    },
+    breakpoints: {
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px",
+      "xl": "1280px",
+      "2xl": "1536px"
+    }
   };
-};
-var registerFileClasses = (_filepath, _classes) => {
-};
+}
+function postProcessWithLightning(rawCss) {
+  if (!rawCss) return "";
+  const native = getNativeBridge();
+  if (!native?.processTailwindCssLightning) {
+    throw new Error("FATAL: Native binding 'processTailwindCssLightning' is required but not available.");
+  }
+  const result = native.processTailwindCssLightning(rawCss);
+  if (!result?.css) {
+    throw new Error("FATAL: processTailwindCssLightning returned null");
+  }
+  return result.css;
+}
+async function runCssPipeline(classes, cssEntryContent, root, minify = true) {
+  const filtered = classes.filter(Boolean);
+  const uniqueMap = /* @__PURE__ */ new Map();
+  filtered.forEach((cls) => uniqueMap.set(cls, cls));
+  const unique = Array.from(uniqueMap.values());
+  if (unique.length === 0) {
+    return { css: "", classes: [], sizeBytes: 0, optimized: false };
+  }
+  const cacheKey = _getCacheKey(unique, minify, cssEntryContent, root);
+  const cached = _cssCache.get(cacheKey);
+  if (cached) {
+    _cacheHits++;
+    if (process.env.DEBUG?.includes("compiler")) {
+      console.log(
+        `[Compiler] Cache HIT: ${unique.length} classes (hit rate: ${(getCacheStats().hitRate * 100).toFixed(1)}%)`
+      );
+    }
+    return cached;
+  }
+  _cacheMisses++;
+  let rawCss;
+  let usedRustCompiler = false;
+  try {
+    const theme = getThemeConfig();
+    rawCss = await generateCssNative(unique, {
+      theme,
+      fallbackToJs: true,
+      logFallback: process.env.DEBUG?.includes("compiler") === true
+    });
+    usedRustCompiler = true;
+  } catch (error) {
+    if (process.env.DEBUG?.includes("compiler")) {
+      console.warn("[Compiler] Rust compiler failed, using JavaScript Tailwind:", error);
+    }
+    rawCss = await generateRawCss(unique, cssEntryContent, root);
+  }
+  const finalCss = minify ? postProcessWithLightning(rawCss) : rawCss;
+  if (process.env.DEBUG?.includes("compiler")) {
+    console.log(
+      `[Compiler] Generated CSS from ${unique.length} classes (${usedRustCompiler ? "Rust" : "JavaScript"})`,
+      `Size: ${finalCss.length} bytes`
+    );
+  }
+  const result = {
+    css: finalCss,
+    classes: unique,
+    sizeBytes: finalCss.length,
+    optimized: minify
+  };
+  _evictOldestIfNeeded();
+  _cssCache.set(cacheKey, result);
+  return result;
+}
+function runCssPipelineSync(_classes) {
+  return { css: "", classes: [], sizeBytes: 0, optimized: false };
+}
+function processTailwindCssWithTargets(css, targets) {
+  const native = getNativeBridge();
+  if (!native?.processTailwindCssWithTargets) {
+    throw new Error("FATAL: Native binding 'processTailwindCssWithTargets' is required but not available.");
+  }
+  const result = native.processTailwindCssWithTargets(css, targets ?? null);
+  if (!result?.css) {
+    throw new Error("FATAL: processTailwindCssWithTargets returned null");
+  }
+  return result.css;
+}
+var require2, _cssCache, _cacheHits, _cacheMisses, MAX_CACHE_SIZE, _twEngine, _twEngineError;
+var init_tailwindEngine = __esm({
+  "packages/domain/compiler/src/tailwindEngine.ts"() {
+    init_nativeBridge();
+    init_cssGeneratorNative();
+    require2 = createRequire(import.meta.url);
+    _cssCache = /* @__PURE__ */ new Map();
+    _cacheHits = 0;
+    _cacheMisses = 0;
+    MAX_CACHE_SIZE = 100;
+    _twEngine = null;
+    _twEngineError = null;
+  }
+});
+
+// packages/domain/compiler/src/cssGeneratorNative.ts
+async function generateCssNative(classes, options) {
+  const {
+    theme,
+    fallbackToJs = true,
+    logFallback = false
+  } = options;
+  try {
+    const native = getNativeBridge();
+    if (!native?.generateCssNative) {
+      throw new Error("generateCssNative not available in native binding");
+    }
+    const themeJson = JSON.stringify(theme);
+    const css = native.generateCssNative(classes, themeJson);
+    return css;
+  } catch (error) {
+    if (!fallbackToJs) {
+      throw error;
+    }
+    if (logFallback) {
+      console.warn(
+        "[CSS Compiler] Rust CSS generator unavailable, falling back to JavaScript Tailwind",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+    return generateRawCss(classes);
+  }
+}
+var init_cssGeneratorNative = __esm({
+  "packages/domain/compiler/src/cssGeneratorNative.ts"() {
+    init_nativeBridge();
+    init_tailwindEngine();
+  }
+});
+function _layoutClassesToCss(classes) {
+  const native = getNativeBridge();
+  if (!native?.layoutClassesToCss) {
+    throw new Error("FATAL: Native binding 'layoutClassesToCss' is required but not available.");
+  }
+  return native.layoutClassesToCss(classes);
+}
+function _hashContainer(tag, containerJson, name) {
+  const sortedKey = tag + (name ?? "") + containerJson;
+  const native = getNativeBridge();
+  if (!native?.hashContent) {
+    throw new Error("FATAL: Native binding 'hashContent' is required but not available.");
+  }
+  return `tw-cq-${native.hashContent(sortedKey, "fnv", 6)}`;
+}
+function extractContainerCssFromSource(source) {
+  const native = getNativeBridge();
+  if (!native?.extractTwContainerConfigs) {
+    throw new Error("FATAL: Native binding 'extractTwContainerConfigs' is required but not available.");
+  }
+  const configs = native.extractTwContainerConfigs(source);
+  const rules = [];
+  for (const cfg of configs) {
+    const id = _hashContainer(cfg.tag, cfg.containerJson, cfg.containerName);
+    for (const { key, classes } of cfg.breakpoints) {
+      const minWidth = _CONTAINER_BREAKPOINTS[key] ?? key;
+      const css = _layoutClassesToCss(classes);
+      if (!css) continue;
+      const query = cfg.containerName ? `@container ${cfg.containerName} (min-width: ${minWidth})` : `@container (min-width: ${minWidth})`;
+      rules.push(`${query}{.${id}{${css}}}`);
+    }
+  }
+  return rules.join("\n");
+}
+var transformSource, hasTwUsage, isAlreadyTransformed, shouldProcess, compileCssFromClasses, buildStyleTag, compileCssNative, generateCssForClasses, extractAllClasses, extractClassesFromSource, astExtractClasses, parseClasses, normalizeClasses, mergeClassesStatic, normalizeAndDedupClasses, eliminateDeadCss, findDeadVariants, runElimination, optimizeCss, scanProjectUsage, extractComponentUsage, diffClassLists, batchExtractClasses, checkAgainstSafelist, hoistComponents, compileVariantTable, compileVariants, classifyAndSortClasses, mergeCssDeclarations, analyzeClassUsage, analyzeRsc, analyzeFile, analyzeVariantUsage, injectClientDirective, injectServerOnlyComment, analyzeClasses, generateSafelist, loadSafelist, loadTailwindConfig, getContentPaths, _CONTAINER_BREAKPOINTS, runLoaderTransform, shouldSkipFile, fileToRoute, getAllRoutes, getRouteClasses, registerFileClasses, registerGlobalClasses, _incrementalEngineInstance, getIncrementalEngine, resetIncrementalEngine, IncrementalEngine, getBucketEngine, resetBucketEngine, classifyNode, detectConflicts, bucketSort, extractTwStateConfigs, generateStaticStateCss, extractAndGenerateStateCss;
+var init_src2 = __esm({
+  "packages/domain/compiler/src/index.ts"() {
+    init_nativeBridge();
+    transformSource = (source, opts) => {
+      const native = getNativeBridge();
+      if (!native?.transformSource) {
+        throw new Error("FATAL: Native binding 'transformSource' is required but not available.");
+      }
+      const result = native.transformSource(source, opts);
+      if (!result) {
+        throw new Error("FATAL: transformSource returned null");
+      }
+      return result;
+    };
+    hasTwUsage = (source) => {
+      const native = getNativeBridge();
+      if (!native?.hasTwUsage) {
+        throw new Error("FATAL: Native binding 'hasTwUsage' is required but not available.");
+      }
+      return native.hasTwUsage(source);
+    };
+    isAlreadyTransformed = (source) => {
+      const native = getNativeBridge();
+      if (!native?.isAlreadyTransformed) {
+        throw new Error("FATAL: Native binding 'isAlreadyTransformed' is required but not available.");
+      }
+      return native.isAlreadyTransformed(source);
+    };
+    shouldProcess = (source) => {
+      return hasTwUsage(source) && !isAlreadyTransformed(source);
+    };
+    compileCssFromClasses = (classes, prefix) => {
+      const native = getNativeBridge();
+      if (!native?.transformSource) {
+        throw new Error("FATAL: Native binding 'transformSource' is required but not available.");
+      }
+      const result = native.transformSource(classes.join(" "), { prefix: prefix ?? "" });
+      if (!result) {
+        throw new Error("FATAL: transformSource returned null");
+      }
+      return result;
+    };
+    buildStyleTag = (classes) => {
+      const result = compileCssFromClasses(classes);
+      return result?.code ? `<style data-tailwind-styled>${result.code}</style>` : "";
+    };
+    compileCssNative = (classes, prefix = null) => {
+      return compileCssFromClasses(classes, prefix);
+    };
+    generateCssForClasses = async (classes, _tailwindConfig, root, cssEntryContent, minify = false) => {
+      const { runCssPipeline: runCssPipeline2 } = await Promise.resolve().then(() => (init_tailwindEngine(), tailwindEngine_exports));
+      const result = await runCssPipeline2(classes, cssEntryContent, root, minify);
+      return result.css;
+    };
+    extractAllClasses = (source) => {
+      const native = getNativeBridge();
+      if (!native?.extractAllClasses) {
+        throw new Error("FATAL: Native binding 'extractAllClasses' is required but not available.");
+      }
+      return native.extractAllClasses(source) || [];
+    };
+    extractClassesFromSource = (source) => {
+      const native = getNativeBridge();
+      if (!native?.extractClassesFromSource) {
+        throw new Error("FATAL: Native binding 'extractClassesFromSource' is required but not available.");
+      }
+      const result = native.extractClassesFromSource(source);
+      return Array.isArray(result) ? result.join(" ") : String(result || "");
+    };
+    astExtractClasses = (source, _filename) => {
+      const native = getNativeBridge();
+      if (!native?.extractClassesFromSource) {
+        throw new Error("FATAL: Native binding 'extractClassesFromSource' is required but not available.");
+      }
+      return native.extractClassesFromSource(source) || [];
+    };
+    parseClasses = (raw) => {
+      const native = getNativeBridge();
+      if (!native?.parseClasses) {
+        throw new Error("FATAL: Native binding 'parseClasses' is required but not available.");
+      }
+      return native.parseClasses(raw) || [];
+    };
+    normalizeClasses = (raw) => {
+      const result = normalizeAndDedupClasses(raw);
+      return result?.normalized || "";
+    };
+    mergeClassesStatic = (classes) => {
+      const result = normalizeAndDedupClasses(classes);
+      return result?.normalized || "";
+    };
+    normalizeAndDedupClasses = (raw) => {
+      const native = getNativeBridge();
+      if (!native?.normalizeAndDedupClasses) {
+        throw new Error("FATAL: Native binding 'normalizeAndDedupClasses' is required but not available.");
+      }
+      const result = native.normalizeAndDedupClasses(raw);
+      return result || { normalized: "", duplicatesRemoved: 0, uniqueCount: 0 };
+    };
+    eliminateDeadCss = (css, deadClasses) => {
+      const native = getNativeBridge();
+      if (!native?.eliminateDeadCss) {
+        throw new Error("FATAL: Native binding 'eliminateDeadCss' is required but not available.");
+      }
+      return native.eliminateDeadCss(css, Array.from(deadClasses));
+    };
+    findDeadVariants = (variantConfig, usage) => {
+      const unused = [];
+      const configs = Array.isArray(variantConfig) ? variantConfig : [{ name: "__root__", variants: variantConfig }];
+      for (const component of configs) {
+        const componentUsage = usage[component.name] ?? /* @__PURE__ */ new Set();
+        const variants = component.variants;
+        for (const [key, values] of Object.entries(variants)) {
+          for (const [value] of Object.entries(values)) {
+            if (!componentUsage.has(`${key}:${value}`)) {
+              unused.push(`${component.name !== "__root__" ? `${component.name}/` : ""}${key}:${value}`);
+            }
+          }
+        }
+      }
+      return { unusedCount: unused.length, unused };
+    };
+    runElimination = (css, scanResult) => {
+      const native = getNativeBridge();
+      if (!native?.detectDeadCode) {
+        throw new Error("FATAL: Native binding 'detectDeadCode' is required but not available.");
+      }
+      const dead = native.detectDeadCode(JSON.stringify(scanResult), css);
+      return eliminateDeadCss(css, new Set(dead.deadInCss ?? []));
+    };
+    optimizeCss = (css) => {
+      const native = getNativeBridge();
+      if (!native?.optimizeCss) {
+        throw new Error("FATAL: Native binding 'optimizeCss' is required but not available.");
+      }
+      return native.optimizeCss(css);
+    };
+    scanProjectUsage = (dirs, cwd) => {
+      const files = dirs.map((dir) => path4__default.resolve(cwd, dir));
+      const results = batchExtractClasses(files) || [];
+      const combined = {};
+      for (const result of results) {
+        if (result.ok && result.classes) {
+          for (const cls of result.classes) {
+            if (!combined[cls]) combined[cls] = {};
+            combined[cls][result.file] = /* @__PURE__ */ new Set([cls]);
+          }
+        }
+      }
+      return combined;
+    };
+    extractComponentUsage = (source) => {
+      const native = getNativeBridge();
+      if (!native?.extractComponentUsage) {
+        throw new Error("FATAL: Native binding 'extractComponentUsage' is required but not available.");
+      }
+      return native.extractComponentUsage(source) || [];
+    };
+    diffClassLists = (previous, current) => {
+      const native = getNativeBridge();
+      if (!native?.diffClassLists) {
+        throw new Error("FATAL: Native binding 'diffClassLists' is required but not available.");
+      }
+      return native.diffClassLists(previous, current) || { added: [], removed: [], unchanged: [], hasChanges: false };
+    };
+    batchExtractClasses = (filePaths) => {
+      const native = getNativeBridge();
+      if (!native?.batchExtractClasses) {
+        throw new Error("FATAL: Native binding 'batchExtractClasses' is required but not available.");
+      }
+      return native.batchExtractClasses(filePaths) || [];
+    };
+    checkAgainstSafelist = (classes, safelist) => {
+      const native = getNativeBridge();
+      if (!native?.checkAgainstSafelist) {
+        throw new Error("FATAL: Native binding 'checkAgainstSafelist' is required but not available.");
+      }
+      return native.checkAgainstSafelist(classes, safelist) || { matched: [], unmatched: [], safelistSize: 0 };
+    };
+    hoistComponents = (source) => {
+      const native = getNativeBridge();
+      if (!native?.hoistComponents) {
+        throw new Error("FATAL: Native binding 'hoistComponents' is required but not available.");
+      }
+      return native.hoistComponents(source) || { code: source, hoisted: [], warnings: [] };
+    };
+    compileVariantTable = (configJson) => {
+      const native = getNativeBridge();
+      if (!native?.compileVariantTable) {
+        throw new Error("FATAL: Native binding 'compileVariantTable' is required but not available.");
+      }
+      return native.compileVariantTable(configJson) || { id: "", tableJson: "{}", keys: [], defaultKey: "", combinations: 0 };
+    };
+    compileVariants = (componentId, config) => {
+      return compileVariantTable(JSON.stringify({ componentId, ...config }));
+    };
+    classifyAndSortClasses = (classes) => {
+      const native = getNativeBridge();
+      if (!native?.classifyAndSortClasses) {
+        throw new Error("FATAL: Native binding 'classifyAndSortClasses' is required but not available.");
+      }
+      return native.classifyAndSortClasses(classes) || [];
+    };
+    mergeCssDeclarations = (cssChunks) => {
+      const native = getNativeBridge();
+      if (!native?.mergeCssDeclarations) {
+        throw new Error("FATAL: Native binding 'mergeCssDeclarations' is required but not available.");
+      }
+      return native.mergeCssDeclarations(cssChunks) || { declarationsJson: "{}", declarationString: "", count: 0 };
+    };
+    analyzeClassUsage = (classes, scanResultJson, css) => {
+      const native = getNativeBridge();
+      if (!native?.analyzeClassUsage) {
+        throw new Error("FATAL: Native binding 'analyzeClassUsage' is required but not available.");
+      }
+      return native.analyzeClassUsage(classes, scanResultJson, css) || [];
+    };
+    analyzeRsc = (source, filename) => {
+      const native = getNativeBridge();
+      if (!native?.analyzeRsc) {
+        throw new Error("FATAL: Native binding 'analyzeRsc' is required but not available.");
+      }
+      return native.analyzeRsc(source, filename) || { isServer: true, needsClientDirective: false, clientReasons: [] };
+    };
+    analyzeFile = (source, filename) => {
+      const rsc = analyzeRsc(source, filename);
+      return {
+        isServer: rsc?.isServer ?? true,
+        needsClientDirective: rsc?.needsClientDirective ?? false,
+        clientReasons: rsc?.clientReasons ?? [],
+        interactiveClasses: [],
+        canStaticResolveVariants: true
+      };
+    };
+    analyzeVariantUsage = (_source, _componentName, _variantKeys) => {
+      return { resolved: {}, dynamic: [] };
+    };
+    injectClientDirective = (source) => {
+      if (!source.includes('"use client"') && !source.includes("'use client'")) {
+        return '"use client";\n' + source;
+      }
+      return source;
+    };
+    injectServerOnlyComment = (source) => {
+      return `/* @server-only */
+${source}`;
+    };
+    analyzeClasses = (filesJson, cwd, flags) => {
+      const native = getNativeBridge();
+      if (!native?.analyzeClasses) {
+        throw new Error("FATAL: Native binding 'analyzeClasses' is required but not available.");
+      }
+      return native.analyzeClasses(filesJson, cwd, flags);
+    };
+    generateSafelist = (scanDirs, outputPath, cwd) => {
+      const classes = scanProjectUsage(scanDirs, cwd || process.cwd());
+      const allClasses = Object.keys(classes).sort();
+      if (outputPath) {
+        fs4__default.writeFileSync(outputPath, JSON.stringify(allClasses, null, 2));
+      }
+      return allClasses;
+    };
+    loadSafelist = (safelistPath) => {
+      try {
+        const content = fs4__default.readFileSync(safelistPath, "utf-8");
+        return JSON.parse(content);
+      } catch {
+        return [];
+      }
+    };
+    loadTailwindConfig = (cwd = process.cwd()) => {
+      const configFiles = [
+        "tailwind.config.ts",
+        "tailwind.config.js",
+        "tailwind.config.mjs",
+        "tailwind.config.cjs"
+      ];
+      for (const file of configFiles) {
+        const fullPath = path4__default.join(cwd, file);
+        if (fs4__default.existsSync(fullPath)) {
+          const mod = __require(fullPath);
+          return mod.default || mod;
+        }
+      }
+      return {};
+    };
+    getContentPaths = (cwd = process.cwd()) => {
+      return {
+        content: [
+          path4__default.join(cwd, "src/**/*.{js,ts,jsx,tsx}"),
+          path4__default.join(cwd, "app/**/*.{js,ts,jsx,tsx}"),
+          path4__default.join(cwd, "pages/**/*.{js,ts,jsx,tsx}")
+        ]
+      };
+    };
+    _CONTAINER_BREAKPOINTS = {
+      xs: "240px",
+      sm: "320px",
+      md: "640px",
+      lg: "1024px",
+      xl: "1280px",
+      "2xl": "1536px"
+    };
+    runLoaderTransform = (ctx) => {
+      const { filepath, source, options } = ctx;
+      const result = transformSource(source, { filename: filepath, ...options });
+      let staticCss;
+      try {
+        const cssChunks = [];
+        const stateRules = extractAndGenerateStateCss(source, filepath);
+        if (stateRules.length > 0) {
+          cssChunks.push(stateRules.map((r) => r.cssRule).join("\n"));
+        }
+        const containerCss = extractContainerCssFromSource(source);
+        if (containerCss) cssChunks.push(containerCss);
+        const combined = cssChunks.join("\n").trim();
+        if (combined) staticCss = combined;
+      } catch {
+      }
+      return {
+        code: result?.code || "",
+        changed: result?.changed || false,
+        classes: result?.classes || [],
+        staticCss
+      };
+    };
+    shouldSkipFile = (filepath) => {
+      const SKIP_PATHS = ["node_modules", ".next", ".rspack-dist", ".turbo", "dist/", "out/"];
+      const skipExtensions = [".css", ".json", ".md", ".txt", ".yaml", ".yml"];
+      for (const p of SKIP_PATHS) {
+        if (filepath.includes(p)) return true;
+      }
+      for (const ext of skipExtensions) {
+        if (filepath.endsWith(ext)) return true;
+      }
+      return false;
+    };
+    fileToRoute = (filepath) => {
+      const normalized = filepath.replace(/\\/g, "/");
+      if (normalized.includes("/layout.") || normalized.includes("/loading.") || normalized.includes("/error.")) {
+        return "__global";
+      }
+      const pageMatch = normalized.match(/\/app\/(.+?)\/page\.[tj]sx?$/);
+      if (pageMatch) return `/${pageMatch[1]}`;
+      const rootPage = normalized.match(/\/app\/page\.[tj]sx?$/);
+      if (rootPage) return "/";
+      return null;
+    };
+    getAllRoutes = () => {
+      const native = getNativeBridge();
+      if (!native?.analyzeClasses) {
+        throw new Error("FATAL: Native binding 'analyzeClasses' is required but not available.");
+      }
+      return ["/", "__global"];
+    };
+    getRouteClasses = (_route) => /* @__PURE__ */ new Set();
+    registerFileClasses = (_filepath, _classes) => {
+    };
+    registerGlobalClasses = (_classes) => {
+    };
+    _incrementalEngineInstance = null;
+    getIncrementalEngine = () => {
+      if (!_incrementalEngineInstance) {
+        _incrementalEngineInstance = new IncrementalEngine();
+      }
+      return _incrementalEngineInstance;
+    };
+    resetIncrementalEngine = () => {
+      _incrementalEngineInstance = null;
+    };
+    IncrementalEngine = class {
+      compile(source) {
+        return transformSource(source);
+      }
+    };
+    getBucketEngine = () => {
+      const native = getNativeBridge();
+      if (!native?.classifyAndSortClasses) {
+        throw new Error("FATAL: Native binding 'classifyAndSortClasses' is required but not available.");
+      }
+      return {
+        add: (className) => className,
+        get: (_bucket) => []
+      };
+    };
+    resetBucketEngine = () => {
+    };
+    classifyNode = (_node) => {
+      const native = getNativeBridge();
+      if (!native?.classifyAndSortClasses) {
+        throw new Error("FATAL: Native binding 'classifyAndSortClasses' is required but not available.");
+      }
+      return "unknown";
+    };
+    detectConflicts = (_classes) => {
+      const native = getNativeBridge();
+      if (!native?.analyzeClassUsage) {
+        throw new Error("FATAL: Native binding 'analyzeClassUsage' is required but not available.");
+      }
+      return [];
+    };
+    bucketSort = (classes) => {
+      return classifyAndSortClasses(classes).map((c) => c.raw ?? c);
+    };
+    extractTwStateConfigs = (source, filename) => {
+      const native = getNativeBridge();
+      if (!native?.extractTwStateConfigs) {
+        throw new Error("FATAL: Native binding 'extractTwStateConfigs' is required but not available.");
+      }
+      return native.extractTwStateConfigs(source, filename);
+    };
+    generateStaticStateCss = (inputs, resolvedCss = null) => {
+      const native = getNativeBridge();
+      if (!native?.generateStaticStateCss) {
+        throw new Error("FATAL: Native binding 'generateStaticStateCss' is required but not available.");
+      }
+      return native.generateStaticStateCss(inputs, resolvedCss);
+    };
+    extractAndGenerateStateCss = (source, filename) => {
+      const native = getNativeBridge();
+      if (!native?.extractAndGenerateStateCss) {
+        const configs = extractTwStateConfigs(source, filename);
+        if (configs.length === 0) return [];
+        return generateStaticStateCss(
+          configs.map((c) => ({ tag: c.tag, componentName: c.componentName, statesJson: c.statesJson }))
+        );
+      }
+      return native.extractAndGenerateStateCss(source, filename);
+    };
+  }
+});
+
+// packages/domain/compiler/src/internal.ts
+var internal_exports = {};
+__export(internal_exports, {
+  adaptNativeResult: () => adaptNativeResult,
+  analyzeClassUsage: () => analyzeClassUsage,
+  analyzeClasses: () => analyzeClasses,
+  analyzeFile: () => analyzeFile,
+  analyzeRsc: () => analyzeRsc,
+  analyzeVariantUsage: () => analyzeVariantUsage,
+  astExtractClasses: () => astExtractClasses,
+  batchExtractClasses: () => batchExtractClasses,
+  bucketSort: () => bucketSort,
+  buildStyleTag: () => buildStyleTag,
+  checkAgainstSafelist: () => checkAgainstSafelist,
+  classifyAndSortClasses: () => classifyAndSortClasses,
+  classifyNode: () => classifyNode,
+  clearCache: () => clearCache,
+  compileCssFromClasses: () => compileCssFromClasses,
+  compileCssNative: () => compileCssNative,
+  compileVariantTable: () => compileVariantTable,
+  compileVariants: () => compileVariants,
+  detectConflicts: () => detectConflicts,
+  diffClassLists: () => diffClassLists,
+  eliminateDeadCss: () => eliminateDeadCss,
+  extractAllClasses: () => extractAllClasses,
+  extractAndGenerateStateCss: () => extractAndGenerateStateCss,
+  extractClassesFromSource: () => extractClassesFromSource,
+  extractComponentUsage: () => extractComponentUsage,
+  extractContainerCssFromSource: () => extractContainerCssFromSource,
+  extractTwStateConfigs: () => extractTwStateConfigs,
+  fileToRoute: () => fileToRoute,
+  findDeadVariants: () => findDeadVariants,
+  generateCssForClasses: () => generateCssForClasses,
+  generateRawCss: () => generateRawCss,
+  generateSafelist: () => generateSafelist,
+  generateStaticStateCss: () => generateStaticStateCss,
+  getAllRoutes: () => getAllRoutes,
+  getBucketEngine: () => getBucketEngine,
+  getCacheStats: () => getCacheStats,
+  getContentPaths: () => getContentPaths,
+  getIncrementalEngine: () => getIncrementalEngine,
+  getNativeBridge: () => getNativeBridge,
+  getRouteClasses: () => getRouteClasses,
+  hasTwUsage: () => hasTwUsage,
+  hoistComponents: () => hoistComponents,
+  injectClientDirective: () => injectClientDirective,
+  injectServerOnlyComment: () => injectServerOnlyComment,
+  isAlreadyTransformed: () => isAlreadyTransformed,
+  loadSafelist: () => loadSafelist,
+  loadTailwindConfig: () => loadTailwindConfig,
+  mergeClassesStatic: () => mergeClassesStatic,
+  mergeCssDeclarations: () => mergeCssDeclarations,
+  normalizeAndDedupClasses: () => normalizeAndDedupClasses,
+  normalizeClasses: () => normalizeClasses,
+  optimizeCss: () => optimizeCss,
+  parseClasses: () => parseClasses,
+  registerFileClasses: () => registerFileClasses,
+  registerGlobalClasses: () => registerGlobalClasses,
+  resetBucketEngine: () => resetBucketEngine,
+  resetIncrementalEngine: () => resetIncrementalEngine,
+  runCssPipeline: () => runCssPipeline,
+  runCssPipelineSync: () => runCssPipelineSync,
+  runElimination: () => runElimination,
+  runLoaderTransform: () => runLoaderTransform,
+  scanProjectUsage: () => scanProjectUsage,
+  shouldProcess: () => shouldProcess,
+  shouldSkipFile: () => shouldSkipFile,
+  transformSource: () => transformSource
+});
+var init_internal = __esm({
+  "packages/domain/compiler/src/internal.ts"() {
+    init_src2();
+    init_tailwindEngine();
+  }
+});
+
+// packages/presentation/next/src/turbopackLoader.ts
+init_internal();
+var _writtenRules = /* @__PURE__ */ new Set();
+function appendStaticCssToFile(staticCss, safelistPath) {
+  if (!staticCss.trim() || !safelistPath) return;
+  const stateFilePath = path4__default.join(path4__default.dirname(safelistPath), "_tw-state-static.css");
+  const newRules = [];
+  for (const chunk of staticCss.split(/(?<=\})\s*/)) {
+    const rule = chunk.trim();
+    if (rule && !_writtenRules.has(rule)) {
+      _writtenRules.add(rule);
+      newRules.push(rule);
+    }
+  }
+  if (newRules.length === 0) return;
+  try {
+    fs4__default.mkdirSync(path4__default.dirname(stateFilePath), { recursive: true });
+    if (!fs4__default.existsSync(stateFilePath)) {
+      fs4__default.writeFileSync(
+        stateFilePath,
+        `/* _tw-state-static.css \u2014 Auto-generated by tailwind-styled-v4. DO NOT EDIT.
+ * Import di globals.css: @import "./_tw-state-static.css";
+ * Berisi: state CSS (.tw-s-*[data-*="true"]) + container queries (@container .tw-cq-*).
+ */
+
+`,
+        "utf-8"
+      );
+    }
+    fs4__default.appendFileSync(stateFilePath, newRules.join("\n") + "\n", "utf-8");
+  } catch {
+  }
+}
 function parseBool(val, fallback = false) {
   if (typeof val === "boolean") return val;
   if (typeof val === "string") return val === "true" || val === "1";
@@ -249,11 +1096,11 @@ var CYCLE_SENTINEL = "_cycle.txt";
 var START_SENTINEL = "_start.txt";
 var _workerCache = /* @__PURE__ */ new Map();
 function getTwClassesDir(safelistPath) {
-  return path3__default.join(path3__default.dirname(safelistPath), "tw-classes");
+  return path4__default.join(path4__default.dirname(safelistPath), "tw-classes");
 }
 function readSentinel(filePath) {
   try {
-    return fs3__default.readFileSync(filePath, "utf-8").trim();
+    return fs4__default.readFileSync(filePath, "utf-8").trim();
   } catch {
     return "";
   }
@@ -263,36 +1110,36 @@ function clearAndMarkCycle(twClassesDir, startId) {
   if (_clearLock) return;
   _clearLock = true;
   try {
-    if (fs3__default.existsSync(twClassesDir)) {
+    if (fs4__default.existsSync(twClassesDir)) {
       const tempDir = `${twClassesDir}_clearing_${Date.now()}`;
       try {
-        fs3__default.renameSync(twClassesDir, tempDir);
-        fs3__default.mkdirSync(twClassesDir, { recursive: true });
-        const startFile = path3__default.join(tempDir, START_SENTINEL);
-        if (fs3__default.existsSync(startFile)) {
-          fs3__default.copyFileSync(startFile, path3__default.join(twClassesDir, START_SENTINEL));
+        fs4__default.renameSync(twClassesDir, tempDir);
+        fs4__default.mkdirSync(twClassesDir, { recursive: true });
+        const startFile = path4__default.join(tempDir, START_SENTINEL);
+        if (fs4__default.existsSync(startFile)) {
+          fs4__default.copyFileSync(startFile, path4__default.join(twClassesDir, START_SENTINEL));
         }
-        const mergedFile = path3__default.join(tempDir, "_webpack-merged.css");
-        if (fs3__default.existsSync(mergedFile)) {
-          fs3__default.copyFileSync(mergedFile, path3__default.join(twClassesDir, "_webpack-merged.css"));
+        const mergedFile = path4__default.join(tempDir, "_webpack-merged.css");
+        if (fs4__default.existsSync(mergedFile)) {
+          fs4__default.copyFileSync(mergedFile, path4__default.join(twClassesDir, "_webpack-merged.css"));
         }
-        fs3__default.writeFileSync(path3__default.join(twClassesDir, CYCLE_SENTINEL), startId, "utf-8");
+        fs4__default.writeFileSync(path4__default.join(twClassesDir, CYCLE_SENTINEL), startId, "utf-8");
         _workerCache.set(twClassesDir, startId);
-        fs3__default.rmSync(tempDir, { recursive: true, force: true });
+        fs4__default.rmSync(tempDir, { recursive: true, force: true });
       } catch {
-        for (const file of fs3__default.readdirSync(twClassesDir)) {
+        for (const file of fs4__default.readdirSync(twClassesDir)) {
           if (file === START_SENTINEL || file === "_webpack-merged.css") continue;
           try {
-            fs3__default.unlinkSync(path3__default.join(twClassesDir, file));
+            fs4__default.unlinkSync(path4__default.join(twClassesDir, file));
           } catch {
           }
         }
-        fs3__default.writeFileSync(path3__default.join(twClassesDir, CYCLE_SENTINEL), startId, "utf-8");
+        fs4__default.writeFileSync(path4__default.join(twClassesDir, CYCLE_SENTINEL), startId, "utf-8");
         _workerCache.set(twClassesDir, startId);
       }
     } else {
-      fs3__default.mkdirSync(twClassesDir, { recursive: true });
-      fs3__default.writeFileSync(path3__default.join(twClassesDir, CYCLE_SENTINEL), startId, "utf-8");
+      fs4__default.mkdirSync(twClassesDir, { recursive: true });
+      fs4__default.writeFileSync(path4__default.join(twClassesDir, CYCLE_SENTINEL), startId, "utf-8");
       _workerCache.set(twClassesDir, startId);
     }
   } catch {
@@ -303,41 +1150,41 @@ function clearAndMarkCycle(twClassesDir, startId) {
 function getPerFileSafelistPath(safelistDir, resourcePath) {
   const normalized = resourcePath.replace(/\\/g, "/");
   const slug = normalized.replace(/^.*\/src\//, "").replace(/\.[tj]sx?$/, "").replace(/[^a-zA-Z0-9]/g, "_").slice(0, 80);
-  return path3__default.join(safelistDir, `${slug}.css`);
+  return path4__default.join(safelistDir, `${slug}.css`);
 }
 function writePerFileSafelist(safelistPath, resourcePath, classes) {
   if (!safelistPath || classes.length === 0) return;
   try {
     const twClassesDir = getTwClassesDir(safelistPath);
-    const startId = readSentinel(path3__default.join(twClassesDir, START_SENTINEL));
-    const cachedCycle = _workerCache.get(twClassesDir) ?? readSentinel(path3__default.join(twClassesDir, CYCLE_SENTINEL));
+    const startId = readSentinel(path4__default.join(twClassesDir, START_SENTINEL));
+    const cachedCycle = _workerCache.get(twClassesDir) ?? readSentinel(path4__default.join(twClassesDir, CYCLE_SENTINEL));
     if (startId && cachedCycle !== startId) {
       clearAndMarkCycle(twClassesDir, startId);
-    } else if (!fs3__default.existsSync(twClassesDir)) {
-      fs3__default.mkdirSync(twClassesDir, { recursive: true });
+    } else if (!fs4__default.existsSync(twClassesDir)) {
+      fs4__default.mkdirSync(twClassesDir, { recursive: true });
     }
     const outPath = getPerFileSafelistPath(twClassesDir, resourcePath);
     const sorted = [...new Set(classes)].sort();
     const css = [
-      `/* tw-safelist: ${path3__default.basename(resourcePath)} \u2014 auto-generated */`,
+      `/* tw-safelist: ${path4__default.basename(resourcePath)} \u2014 auto-generated */`,
       "@layer utilities {",
       sorted.map((cls) => `.${cls.replace(/([^a-zA-Z0-9_-])/g, "\\$1")} {}`).join("\n"),
       "}"
     ].join("\n");
     try {
-      if (fs3__default.readFileSync(outPath, "utf-8") === css) return;
+      if (fs4__default.readFileSync(outPath, "utf-8") === css) return;
     } catch {
     }
     const tmpPath = `${outPath}.tmp`;
     try {
-      fs3__default.writeFileSync(tmpPath, css, "utf-8");
-      fs3__default.renameSync(tmpPath, outPath);
+      fs4__default.writeFileSync(tmpPath, css, "utf-8");
+      fs4__default.renameSync(tmpPath, outPath);
     } catch {
       try {
-        fs3__default.unlinkSync(tmpPath);
+        fs4__default.unlinkSync(tmpPath);
       } catch {
       }
-      fs3__default.writeFileSync(outPath, css, "utf-8");
+      fs4__default.writeFileSync(outPath, css, "utf-8");
     }
   } catch {
   }
@@ -347,7 +1194,7 @@ function turbopackLoader(source, options = {}) {
   const router = detectRouter(this.resourcePath);
   const nextMajor = parseNum(options.nextMajor);
   const debug = parseBool(options.debug);
-  const filename = path3__default.basename(this.resourcePath);
+  const filename = path4__default.basename(this.resourcePath);
   const effective = {
     addDataAttr: parseBool(options.addDataAttr),
     // App Router: selalu auto-detect client boundary
@@ -362,22 +1209,42 @@ function turbopackLoader(source, options = {}) {
     console.debug(`[tw-loader] ${filename}: router=${router} nextMajor=${nextMajor ?? "unknown"}`);
   }
   const { directive, stripped } = extractDirective(source);
+  let processedSource = stripped;
+  try {
+    const compilerMod = (init_internal(), __toCommonJS(internal_exports));
+    if (typeof compilerMod?.injectStateHash === "function" && stripped.includes("states:")) {
+      const hashResult = compilerMod.injectStateHash(stripped, this.resourcePath);
+      if (hashResult.changed) {
+        processedSource = hashResult.code;
+        if (debug) {
+          console.debug(`[tw-loader] ${filename}: injected __hash for ${hashResult.injectedCount} component(s)`);
+        }
+      }
+    }
+  } catch {
+  }
   try {
     const output = runLoaderTransform({
       filepath: this.resourcePath,
-      source: stripped,
+      source: processedSource,
       options: effective
     });
     if (!output.changed) {
       if (output.classes.length > 0) {
         writePerFileSafelist(options.safelistPath, this.resourcePath, output.classes);
       }
+      if (output.staticCss && options.safelistPath) {
+        appendStaticCssToFile(output.staticCss, options.safelistPath);
+      }
       return source;
     }
     if (output.classes.length > 0) {
       registerFileClasses(this.resourcePath, output.classes);
       writePerFileSafelist(options.safelistPath, this.resourcePath, output.classes);
     }
+    if (output.staticCss && options.safelistPath) {
+      appendStaticCssToFile(output.staticCss, options.safelistPath);
+    }
     if (!directive) return output.code;
     const clean = output.code.replace(/^\s*["'](use client|use server)["']\s*;?\s*\n?/, "");
     return directive + clean;