@csszyx/cli 0.3.1 → 0.5.0

package/dist/index.js

@@ -80,25 +80,30 @@ async function audit(options = {}) {
   }
   printHeader("csszyx Audit Report");
   printSection("\u{1F4CA} Mangle Statistics");
-  console.log(`  Total Classes:       ${stats.totalClasses}`);
-  console.log(`  Mangled Classes:     ${stats.totalClasses} (100%)`);
-  console.log("  Unmangled Classes:   0");
-  console.log();
-  console.log("  Tier Distribution:");
-  const tierNames = [
-    "Tier 1 (a-Z)",
-    "Tier 2 (a0-Z9)",
-    "Tier 3 (aa-ZZ)",
-    "Tier 4 (a00-Z99)",
-    "Tier 5 (aaa+)"
-  ];
-  for (let i = 1; i <= 5; i++) {
-    const count = stats.tierDistribution[i] || 0;
-    const percent = stats.totalClasses ? Math.round(count / stats.totalClasses * 100) : 0;
-    const bar = printBar([count], stats.totalClasses, 20);
-    console.log(
-      `  \u2022 ${tierNames[i - 1].padEnd(18)} ${String(count).padStart(3)} (${String(percent).padStart(2)}%)  ${colors.dim(bar)}`
-    );
+  if (stats.totalClasses === 0) {
+    console.log("  Tier distribution not yet available.");
+    console.log("  Run a production build first, then re-run csszyx audit.");
+  } else {
+    console.log(`  Total Classes:       ${stats.totalClasses}`);
+    console.log(`  Mangled Classes:     ${stats.totalClasses} (100%)`);
+    console.log("  Unmangled Classes:   0");
+    console.log();
+    console.log("  Tier Distribution:");
+    const tierNames = [
+      "Tier 1 (a-Z)",
+      "Tier 2 (a0-Z9)",
+      "Tier 3 (aa-ZZ)",
+      "Tier 4 (a00-Z99)",
+      "Tier 5 (aaa+)"
+    ];
+    for (let i = 1; i <= 5; i++) {
+      const count = stats.tierDistribution[i] || 0;
+      const percent = stats.totalClasses ? Math.round(count / stats.totalClasses * 100) : 0;
+      const bar = printBar([count], stats.totalClasses, 20);
+      console.log(
+        `  \u2022 ${tierNames[i - 1].padEnd(18)} ${String(count).padStart(3)} (${String(percent).padStart(2)}%)  ${colors.dim(bar)}`
+      );
+    }
   }
   printSection("\u{1F4BE} Bundle Size Impact");
   if (stats.bundleSavings.originalHTML > 0) {
@@ -145,14 +150,6 @@ async function collectStats(cwd) {
     stats.bundleSavings.mangledCSS = Buffer.byteLength(cssContent);
     stats.bundleSavings.originalCSS = Math.round(stats.bundleSavings.mangledCSS * 1.71);
   }
-  stats.totalClasses = 247;
-  stats.tierDistribution = {
-    1: 52,
-    2: 87,
-    3: 64,
-    4: 32,
-    5: 12
-  };
   return stats;
 }
 function formatBytes(bytes) {
@@ -328,8 +325,6 @@ async function doctor(options = {}) {
     printSuccess("\u2728 No issues found! Your setup looks good.");
   } else {
     printWarn(`Found ${issueCount} issue(s)`);
-    console.log();
-    console.log("Run `csszyx doctor --fix` to auto-fix common issues");
   }
 }
 
@@ -1283,6 +1278,16 @@ import path4 from "path";
 import { execa } from "execa";
 import fs4 from "fs-extra";
 import prompts from "prompts";
+var VITE_FRAMEWORKS = /* @__PURE__ */ new Set(["vite-react", "vite-vue", "vite-svelte"]);
+var NEXTJS_FRAMEWORKS = /* @__PURE__ */ new Set(["nextjs-app", "nextjs-pages"]);
+var CSS_ENTRY_CANDIDATES = [
+  "src/index.css",
+  "src/app.css",
+  "src/globals.css",
+  "app/globals.css",
+  "src/styles/index.css",
+  "styles/globals.css"
+];
 async function init(options = {}) {
   const cwd = options.cwd || process.cwd();
   const projectInfo = getProjectInfo(cwd);
@@ -1294,14 +1299,16 @@ async function init(options = {}) {
   let config = {
     enableSSR: true,
     enableRecovery: true,
-    installTailwind: !projectInfo.hasTailwind
+    installTailwind: !projectInfo.hasTailwind,
+    setupGitignore: true,
+    setupTsconfig: !!projectInfo.hasTypeScript
   };
   if (!options.yes) {
     const answers = await prompts([
       {
         type: projectInfo.hasTailwind ? null : "confirm",
         name: "installTailwind",
-        message: "Install Tailwind CSS?",
+        message: "Install Tailwind CSS v4?",
         initial: true
       },
       {
@@ -1315,6 +1322,18 @@ async function init(options = {}) {
         name: "enableRecovery",
         message: "Enable development mode recovery?",
         initial: true
+      },
+      {
+        type: "confirm",
+        name: "setupGitignore",
+        message: "Add .csszyx to .gitignore?",
+        initial: true
+      },
+      {
+        type: projectInfo.hasTypeScript ? "confirm" : null,
+        name: "setupTsconfig",
+        message: "Add .csszyx/theme.d.ts to tsconfig.json (Theme Auto-Scan)?",
+        initial: true
       }
     ]);
     config = { ...config, ...answers };
@@ -1323,9 +1342,10 @@ async function init(options = {}) {
   try {
     await execa(projectInfo.packageManager, ["add", "csszyx"], { cwd });
     if (config.installTailwind) {
+      const twPackage = VITE_FRAMEWORKS.has(projectInfo.framework) ? "@tailwindcss/vite" : "@tailwindcss/postcss";
       await execa(
         projectInfo.packageManager,
-        ["add", "-D", "tailwindcss", "postcss", "autoprefixer"],
+        ["add", "-D", "tailwindcss", twPackage],
         { cwd }
       );
     }
@@ -1337,17 +1357,30 @@ async function init(options = {}) {
   }
   const spin2 = spinner.start("Creating config files...");
   try {
-    const configContent = generateConfigFile(config, projectInfo.framework);
+    const configContent = generateConfigFile(config);
     const configPath = path4.join(
       cwd,
       projectInfo.hasTypeScript ? "csszyx.config.ts" : "csszyx.config.js"
     );
     await fs4.writeFile(configPath, configContent);
     if (config.installTailwind) {
-      await fs4.writeFile(
-        path4.join(cwd, "tailwind.config.js"),
-        generateTailwindConfig()
-      );
+      await setupTailwindCss(cwd, projectInfo.framework);
+    }
+    await injectPlugin(cwd, projectInfo.framework);
+    if (config.setupGitignore) {
+      const gitignorePath = path4.join(cwd, ".gitignore");
+      const ignoreEntry = "\n# csszyx generated theme types\n.csszyx\n";
+      if (fs4.existsSync(gitignorePath)) {
+        const content = await fs4.readFile(gitignorePath, "utf8");
+        if (!content.includes(".csszyx")) {
+          await fs4.appendFile(gitignorePath, ignoreEntry);
+        }
+      } else {
+        await fs4.writeFile(gitignorePath, "node_modules\n.csszyx\n");
+      }
+    }
+    if (config.setupTsconfig) {
+      await setupTsconfig(cwd);
     }
     spinner.succeed(spin2, "Created configuration files");
   } catch (error) {
@@ -1360,10 +1393,150 @@ async function init(options = {}) {
   console.log();
   printInfo("Next steps:");
   console.log(`  \u2022 Run '${projectInfo.packageManager} run dev' to start`);
-  console.log("  \u2022 Open http://localhost:5174 for the dashboard");
-  console.log("  \u2022 Check the docs at https://github.com/nguyennhutien/csszyx");
+  console.log("  \u2022 Check the docs at https://csszyx.dev");
 }
-function generateConfigFile(config, framework) {
+async function setupTailwindCss(cwd, framework) {
+  let cssPath;
+  for (const candidate of CSS_ENTRY_CANDIDATES) {
+    const full = path4.join(cwd, candidate);
+    if (fs4.existsSync(full)) {
+      cssPath = full;
+      break;
+    }
+  }
+  if (!cssPath) {
+    cssPath = path4.join(cwd, "src/index.css");
+    await fs4.ensureDir(path4.dirname(cssPath));
+    await fs4.writeFile(cssPath, '@import "tailwindcss";\n');
+    printInfo(`Created ${path4.relative(cwd, cssPath)} with Tailwind v4 import`);
+    return;
+  }
+  const content = await fs4.readFile(cssPath, "utf8");
+  if (!content.includes('@import "tailwindcss"') && !content.includes("@import 'tailwindcss'")) {
+    await fs4.writeFile(cssPath, `@import "tailwindcss";
+
+${content}`);
+    printInfo(`Added Tailwind v4 import to ${path4.relative(cwd, cssPath)}`);
+  }
+  if (NEXTJS_FRAMEWORKS.has(framework)) {
+    const postcssMjs = path4.join(cwd, "postcss.config.mjs");
+    const postcssJs = path4.join(cwd, "postcss.config.js");
+    const postcssTs = path4.join(cwd, "postcss.config.ts");
+    if (!fs4.existsSync(postcssMjs) && !fs4.existsSync(postcssJs) && !fs4.existsSync(postcssTs)) {
+      await fs4.writeFile(postcssMjs, generatePostcssConfig());
+      printInfo("Created postcss.config.mjs for Tailwind v4");
+    }
+  }
+}
+async function injectPlugin(cwd, framework) {
+  if (VITE_FRAMEWORKS.has(framework)) {
+    const injected = await injectVitePlugin(cwd);
+    if (!injected) {
+      printWarn("Could not auto-inject csszyx plugin. Add manually to vite.config.ts:");
+      console.log(generateVitePluginInstructions());
+    }
+  } else if (NEXTJS_FRAMEWORKS.has(framework)) {
+    const injected = await injectNextPlugin(cwd);
+    if (!injected) {
+      printWarn("Could not auto-inject csszyx plugin. Add manually to next.config.js:");
+      console.log(generateNextPluginInstructions());
+    }
+  } else {
+    printInfo("Add csszyx plugin to your bundler config:");
+    console.log(generateVitePluginInstructions());
+  }
+}
+async function injectVitePlugin(cwd) {
+  const candidates = [
+    path4.join(cwd, "vite.config.ts"),
+    path4.join(cwd, "vite.config.js"),
+    path4.join(cwd, "vite.config.mts"),
+    path4.join(cwd, "vite.config.mjs")
+  ];
+  let configPath;
+  for (const c of candidates) {
+    if (fs4.existsSync(c)) {
+      configPath = c;
+      break;
+    }
+  }
+  if (!configPath) {
+    return false;
+  }
+  let content = await fs4.readFile(configPath, "utf8");
+  if (content.includes("csszyx")) {
+    return true;
+  }
+  const importBlock = [
+    "import csszyx from 'csszyx/vite';",
+    content.includes("@tailwindcss/vite") ? null : "import tailwindcss from '@tailwindcss/vite';"
+  ].filter(Boolean).join("\n");
+  const lastImportMatch = [...content.matchAll(/^import .+$/gm)].pop();
+  if (!lastImportMatch || lastImportMatch.index === void 0) {
+    return false;
+  }
+  const insertAt = lastImportMatch.index + lastImportMatch[0].length;
+  content = content.slice(0, insertAt) + "\n" + importBlock + content.slice(insertAt);
+  const pluginsMatch = content.match(/plugins\s*:\s*\[/);
+  if (!pluginsMatch || pluginsMatch.index === void 0) {
+    return false;
+  }
+  const pluginsInsertAt = pluginsMatch.index + pluginsMatch[0].length;
+  const twEntry = content.includes("tailwindcss()") ? "" : "\n    tailwindcss(),";
+  content = content.slice(0, pluginsInsertAt) + `
+    ...csszyx(),      // csszyx MUST come before tailwindcss${twEntry}` + content.slice(pluginsInsertAt);
+  await fs4.writeFile(configPath, content);
+  printInfo(`Injected csszyx plugin into ${path4.basename(configPath)}`);
+  return true;
+}
+async function injectNextPlugin(cwd) {
+  const candidates = [
+    path4.join(cwd, "next.config.ts"),
+    path4.join(cwd, "next.config.mjs"),
+    path4.join(cwd, "next.config.js")
+  ];
+  let configPath;
+  for (const c of candidates) {
+    if (fs4.existsSync(c)) {
+      configPath = c;
+      break;
+    }
+  }
+  if (!configPath) {
+    configPath = path4.join(cwd, "next.config.js");
+    await fs4.writeFile(configPath, generateNextConfig());
+    printInfo("Created next.config.js with csszyx plugin");
+    return true;
+  }
+  const content = await fs4.readFile(configPath, "utf8");
+  if (content.includes("csszyx")) {
+    return true;
+  }
+  return false;
+}
+async function setupTsconfig(cwd) {
+  let tsconfigPath = path4.join(cwd, "tsconfig.json");
+  if (!fs4.existsSync(tsconfigPath)) {
+    const viteTsConfig = path4.join(cwd, "tsconfig.app.json");
+    if (fs4.existsSync(viteTsConfig)) {
+      tsconfigPath = viteTsConfig;
+    }
+  }
+  if (!fs4.existsSync(tsconfigPath)) {
+    return;
+  }
+  let content = await fs4.readFile(tsconfigPath, "utf8");
+  if (content.includes(".csszyx")) {
+    return;
+  }
+  const includeMatch = content.match(/"include"\s*:\s*\[/);
+  if (includeMatch && includeMatch.index !== void 0) {
+    const insertPos = includeMatch.index + includeMatch[0].length;
+    content = content.slice(0, insertPos) + '\n    "./.csszyx/theme.d.ts",\n    "./.csszyx",' + content.slice(insertPos);
+    await fs4.writeFile(tsconfigPath, content);
+  }
+}
+function generateConfigFile(config) {
   return `import type { CsszyxConfig } from 'csszyx';
 
 const config: CsszyxConfig = {
@@ -1380,27 +1553,86 @@ const config: CsszyxConfig = {
 export default config;
 `;
 }
-function generateTailwindConfig() {
-  return `/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue,svelte}'],
-  theme: {
-    extend: {},
+function generatePostcssConfig() {
+  return `export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
   },
-  plugins: [],
 };
 `;
 }
+function generateNextConfig() {
+  return `const csszyxWebpack = require('@csszyx/unplugin/webpack').default;
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack(config) {
+    config.plugins.unshift(...csszyxWebpack());
+    return config;
+  },
+};
+
+module.exports = nextConfig;
+`;
+}
+function generateVitePluginInstructions() {
+  return `
+  import csszyx from 'csszyx/vite';
+  import tailwindcss from '@tailwindcss/vite';
+
+  export default defineConfig({
+    plugins: [
+      ...csszyx(),      // csszyx MUST come before tailwindcss
+      tailwindcss(),
+      // ...your other plugins
+    ],
+  });
+`;
+}
+function generateNextPluginInstructions() {
+  return `
+  const csszyxWebpack = require('@csszyx/unplugin/webpack').default;
+
+  module.exports = {
+    webpack(config) {
+      config.plugins.unshift(...csszyxWebpack());
+      return config;
+    },
+  };
+`;
+}
 
 // src/commands/migrate.ts
 import fs5 from "fs";
 import path5 from "path";
+import readline from "readline";
 import fg from "fast-glob";
 
+// src/migrate/ast-transformer.ts
+import { parse } from "@babel/parser";
+import _traverse from "@babel/traverse";
+import * as t from "@babel/types";
+
 // src/migrate/sz-codegen.ts
 function generateSzExpression(obj) {
   return `{${objectToString(obj)}}`;
 }
+function generateSzHtmlValue(obj, braces = false) {
+  const s = objectToString(obj);
+  if (braces) {
+    return s;
+  }
+  if (s.startsWith("{ ") && s.endsWith(" }")) {
+    return s.slice(2, -2);
+  }
+  if (s.startsWith("{") && s.endsWith("}")) {
+    return s.slice(1, -1).trim();
+  }
+  return s;
+}
+function generateSzObjectLiteral(obj) {
+  return objectToString(obj);
+}
 function objectToString(obj, indent = 0) {
   const entries = Object.entries(obj);
   if (entries.length === 0) {
@@ -1526,9 +1758,10 @@ var REVERSE_PROPERTY_MAP = {
   // Outline (ambiguous)
   "outline": "outline",
   "outline-offset": "outlineOffset",
-  // Ring
+  // Ring (v4: outset ring + inset ring)
   "ring": "ring",
   "ring-offset": "ringOffset",
+  "inset-ring": "insetRing",
   // Spacing
   "p": "p",
   "pt": "pt",
@@ -1586,8 +1819,9 @@ var REVERSE_PROPERTY_MAP = {
   "right": "right",
   "bottom": "bottom",
   "left": "left",
-  "start": "start",
-  "end": "end",
+  // TW v4.2: start/end are deprecated — migrate to inset-s/inset-e
+  "start": "insetS",
+  "end": "insetE",
   // Typography (ambiguous — text-*, font-* disambiguated)
   "text": "color",
   // default for text- prefix
@@ -1643,6 +1877,7 @@ var REVERSE_PROPERTY_MAP = {
   // Effects
   "shadow": "shadow",
   // ambiguous (shadow vs shadowColor)
+  "inset-shadow": "insetShadow",
   "opacity": "opacity",
   "mix-blend": "mixBlend",
   "bg-blend": "bgBlend",
@@ -1801,16 +2036,15 @@ var REVERSE_BOOLEAN_MAP = {
   "divide-y-reverse": "divideYReverse",
   "space-x-reverse": "spaceXReverse",
   "space-y-reverse": "spaceYReverse",
-  // Ring/Outline (boolean defaults)
+  // Ring/Outline/Border-radius (boolean defaults)
   "ring": "ring",
+  "inset-ring": "insetRing",
   "outline": "outline",
+  "rounded": "rounded",
   // Transforms
-  "scale-3d": "scale3d",
-  "rotate-3d": "rotate3d",
-  "translate-3d": "translate3d",
-  "transform-gpu": "transformGpu",
-  "transform-cpu": "transformCpu",
-  "transform-none": "transformNone",
+  "scale-3d": "scale",
+  "translate-3d": "translate",
+  // transform-gpu/cpu/none use BOOLEAN_VALUE_MAP → { transform: 'gpu'/'cpu'/'none' }
   // Font numeric
   "normal-nums": "fontVariant",
   "lining-nums": "fontVariant",
@@ -1872,7 +2106,11 @@ var BOOLEAN_VALUE_MAP = {
   "stacked-fractions": { prop: "fontVariant", value: "stacked-fractions" },
   // Appearance
   "appearance-none": { prop: "appearance", value: "none" },
-  "appearance-auto": { prop: "appearance", value: "auto" }
+  "appearance-auto": { prop: "appearance", value: "auto" },
+  // Transform
+  "transform-none": { prop: "transform", value: "none" },
+  "transform-gpu": { prop: "transform", value: "gpu" },
+  "transform-cpu": { prop: "transform", value: "cpu" }
 };
 var SORTED_PREFIXES = Object.keys(REVERSE_PROPERTY_MAP).sort((a, b) => {
   if (b.length !== a.length) {
@@ -2259,6 +2497,9 @@ function parseClass(cls) {
       if (prefix === "border") {
         return applyImportant({ prop: "border", value: true }, important);
       }
+      if (["border-t", "border-r", "border-b", "border-l", "border-x", "border-y", "border-s", "border-e"].includes(prefix)) {
+        return applyImportant({ prop, value: true }, important);
+      }
       continue;
     }
     if (source.startsWith(prefix + "-")) {
@@ -2406,6 +2647,12 @@ function disambiguateAndParse(prefix, rawValue, negative) {
       value = rawValue.slice(0, slashIdx);
       if (opacity.startsWith("[") && opacity.endsWith("]")) {
         opacity = opacity.slice(1, -1);
+        if (!String(opacity).includes("%")) {
+          const opNum = Number(opacity);
+          if (!isNaN(opNum)) {
+            opacity = opNum;
+          }
+        }
       } else if (opacity.startsWith("(") && opacity.endsWith(")")) {
         opacity = opacity.slice(1, -1);
       } else {
@@ -2455,6 +2702,10 @@ function disambiguate(prefix, value, negative) {
       return disambiguateRing(value, negative);
     case "ring-offset":
       return disambiguateRingOffset(value);
+    case "inset-ring":
+      return disambiguateInsetRing(value, negative);
+    case "inset-shadow":
+      return disambiguateInsetShadow(value);
     case "stroke":
       return disambiguateStroke(value);
     case "list":
@@ -2496,6 +2747,9 @@ function disambiguateText(value) {
   if (TEXT_OVERFLOW_KEYWORDS.has(value)) {
     return { prop: "textOverflow", value };
   }
+  if (isArbitraryDimension(value)) {
+    return { prop: "text", value: parseStringValue(value) };
+  }
   return { prop: "color", value: parseStringValue(value) };
 }
 function disambiguateFont(value) {
@@ -2524,6 +2778,9 @@ function disambiguateBorder(value) {
   if (BORDER_STYLE_KEYWORDS.has(value)) {
     return { prop: "borderStyle", value };
   }
+  if (isArbitraryDimension(value)) {
+    return { prop: "border", value: parseStringValue(value) };
+  }
   return { prop: "borderColor", value: parseStringValue(value) };
 }
 function disambiguateBg(value) {
@@ -2567,6 +2824,9 @@ function disambiguateOutline(value) {
   if (!isNaN(num) && Number.isInteger(num)) {
     return { prop: "outline", value: num };
   }
+  if (isArbitraryDimension(value)) {
+    return { prop: "outline", value: parseStringValue(value) };
+  }
   return { prop: "outlineColor", value: parseStringValue(value) };
 }
 function disambiguateDecoration(value) {
@@ -2587,8 +2847,8 @@ function disambiguateRing(value, negative) {
   if (!isNaN(num) && Number.isInteger(num)) {
     return { prop: "ring", value: negative ? -num : num };
   }
-  if (value === "inset") {
-    return { prop: "ring", value: "inset" };
+  if (isArbitraryDimension(value)) {
+    return { prop: "ring", value: parseStringValue(value) };
   }
   return { prop: "ringColor", value: parseStringValue(value) };
 }
@@ -2599,6 +2859,26 @@ function disambiguateRingOffset(value) {
   }
   return { prop: "ringOffsetColor", value: parseStringValue(value) };
 }
+function disambiguateInsetRing(value, negative) {
+  const num = Number(value);
+  if (!isNaN(num) && Number.isInteger(num)) {
+    return { prop: "insetRing", value: negative ? -num : num };
+  }
+  if (isArbitraryDimension(value)) {
+    return { prop: "insetRing", value: parseStringValue(value) };
+  }
+  return { prop: "insetRingColor", value: parseStringValue(value) };
+}
+function disambiguateInsetShadow(value) {
+  const INSET_SHADOW_SIZE_KEYWORDS = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl", "none", "inner"]);
+  if (INSET_SHADOW_SIZE_KEYWORDS.has(value)) {
+    return { prop: "insetShadow", value };
+  }
+  if (isArbitraryDimension(value)) {
+    return { prop: "insetShadow", value: parseStringValue(value) };
+  }
+  return { prop: "insetShadowColor", value: parseStringValue(value) };
+}
 function disambiguateStroke(value) {
   const num = Number(value);
   if (!isNaN(num) && Number.isInteger(num)) {
@@ -2644,6 +2924,13 @@ function disambiguateTable(value) {
 function disambiguateDivide(value) {
   return { prop: "divideColor", value: parseStringValue(value) };
 }
+var CSS_DIMENSION_RE = /^-?[\d.]+(?:px|r?em|ex|ch|vw|vh|vmin|vmax|svh|svw|dvh|dvw|lvh|lvw|cqw|cqh|cqi|cqb|%|fr|deg|rad|turn|grad|ms|s|pt|pc|cm|mm|in)$/;
+function isArbitraryDimension(value) {
+  if (!value.startsWith("[") || !value.endsWith("]")) {
+    return false;
+  }
+  return CSS_DIMENSION_RE.test(value.slice(1, -1));
+}
 function isValidSpacingValue(value) {
   if (value.startsWith("[") && value.endsWith("]")) {
     return true;
@@ -2706,6 +2993,12 @@ function parseValue(prefix, value, negative) {
     if (negative) {
       return "-" + inner;
     }
+    if (prefix === "content") {
+      const isQuoted = inner.startsWith("'") && inner.endsWith("'") || inner.startsWith('"') && inner.endsWith('"');
+      if (isQuoted) {
+        return `"${inner.slice(1, -1)}"`;
+      }
+    }
     return inner;
   }
   if (value.startsWith("(") && value.endsWith(")")) {
@@ -2719,7 +3012,7 @@ function parseValue(prefix, value, negative) {
     return value;
   }
   if (value === "px") {
-    return "px";
+    return negative ? "-px" : "px";
   }
   if (value === "auto") {
     return "auto";
@@ -2888,6 +3181,24 @@ function parseGroupPeerVariant(variant) {
       keys.push("has");
       keys.push(hasRest);
     }
+  } else if (rest.startsWith("data-")) {
+    const dataRest = rest.slice(5);
+    keys.push("data");
+    if (dataRest.startsWith("[") && dataRest.endsWith("]")) {
+      keys.push(dataRest.slice(1, -1));
+    } else if (dataRest.startsWith("(") && dataRest.endsWith(")")) {
+      keys.push(dataRest.slice(1, -1));
+    } else {
+      keys.push(dataRest);
+    }
+  } else if (rest.startsWith("aria-")) {
+    const ariaRest = rest.slice(5);
+    keys.push("aria");
+    if (ariaRest.startsWith("[") && ariaRest.endsWith("]")) {
+      keys.push(ariaRest.slice(1, -1));
+    } else {
+      keys.push(ariaRest);
+    }
   } else {
     keys.push(normalizeVariantKey(rest));
   }
@@ -2915,11 +3226,77 @@ function normalizeVariantKey(variant) {
   }
   return variant;
 }
-function classNameToSzObject(className) {
+var TODO_KEEP = "sz:keep";
+var TODO_REMOVE = "sz:remove";
+var TODO_PENDING = "sz:todo";
+function resolveCustomMapEntry(token, customMap, resolveString) {
+  if (!(token in customMap)) {
+    return null;
+  }
+  const val = customMap[token];
+  if (val && typeof val === "object" && !Array.isArray(val)) {
+    return { action: "sz", value: val };
+  }
+  if (typeof val === "string") {
+    if (val === TODO_KEEP) {
+      return { action: "keep" };
+    }
+    if (val === TODO_REMOVE) {
+      return { action: "remove" };
+    }
+    if (val === TODO_PENDING) {
+      return { action: "unresolved" };
+    }
+    const result = resolveString(val);
+    if (result && Object.keys(result.sz).length > 0) {
+      return { action: "sz", value: result.sz, cascade: result.cascade };
+    }
+    return { action: "unresolved" };
+  }
+  return { action: "unresolved" };
+}
+function classNameToSzObject(className, customMap) {
   const tokens = tokenize(className);
   const szObject = {};
   const unrecognized = [];
+  const keepInClassName = [];
   for (const token of tokens) {
+    if (customMap && token in customMap) {
+      const entry = resolveCustomMapEntry(
+        token,
+        customMap,
+        // Inline resolver: parse Tailwind string recursively (no customMap to avoid infinite loop).
+        // Returns both the sz object and any unrecognized tokens from the string value,
+        // so partially-valid strings cascade their unknowns back to the unrecognized list.
+        (twStr) => {
+          const inner = classNameToSzObject(twStr);
+          if (Object.keys(inner.szObject).length === 0) {
+            return null;
+          }
+          return { sz: inner.szObject, cascade: inner.unrecognized };
+        }
+      );
+      if (entry) {
+        if (entry.action === "sz") {
+          Object.assign(szObject, entry.value);
+          if (entry.cascade && entry.cascade.length > 0) {
+            unrecognized.push(...entry.cascade);
+          }
+          continue;
+        }
+        if (entry.action === "keep") {
+          keepInClassName.push(token);
+          continue;
+        }
+        if (entry.action === "remove") {
+          continue;
+        }
+        if (entry.action === "unresolved") {
+          unrecognized.push(token);
+          continue;
+        }
+      }
+    }
     const { variantParts, baseClass } = extractVariants(token);
     const parsed = parseClass(baseClass);
     if (!parsed) {
@@ -2933,7 +3310,7 @@ function classNameToSzObject(className) {
     }
     setNestedValue(szObject, keyPath, parsed.prop, parsed.value);
   }
-  return { szObject, unrecognized };
+  return { szObject, unrecognized, keepInClassName };
 }
 function setNestedValue(obj, keyPath, prop, value) {
   let current = obj;
@@ -2946,21 +3323,593 @@ function setNestedValue(obj, keyPath, prop, value) {
   current[prop] = value;
 }
 
+// src/migrate/dynamic-patterns.ts
+var CLSX_LIKE_NAMES = /* @__PURE__ */ new Set([
+  "clsx",
+  "cn",
+  "cx",
+  "twMerge",
+  "classNames",
+  "classnames"
+]);
+function isClsxLikeName(name) {
+  return CLSX_LIKE_NAMES.has(name);
+}
+function handleClsxCall(node, source, t2, customMap) {
+  const warnings = [];
+  const allUnrecognized = [];
+  const elements = [];
+  let converted = 0;
+  for (const arg of node.arguments) {
+    if (t2.isSpreadElement(arg)) {
+      const argSrc2 = safeSlice(source, arg.start, arg.end);
+      warnings.push(`Cannot migrate spread argument: ${argSrc2}`);
+      return skip(allUnrecognized, warnings);
+    }
+    if (t2.isStringLiteral(arg)) {
+      const result = migrateString(arg.value, customMap);
+      if (!result) {
+        return skip(allUnrecognized, warnings);
+      }
+      elements.push(result.objectStr);
+      allUnrecognized.push(...result.unrecognized);
+      converted++;
+      continue;
+    }
+    if (t2.isLogicalExpression(arg) && arg.operator === "&&") {
+      const result = handleLogicalAndInner(arg, source, t2, customMap);
+      if (!result) {
+        const argSrc2 = safeSlice(source, arg.start, arg.end);
+        warnings.push(`Cannot migrate logical expression: ${argSrc2}`);
+        return skip(allUnrecognized, warnings);
+      }
+      elements.push(result.exprStr);
+      allUnrecognized.push(...result.unrecognized);
+      converted++;
+      continue;
+    }
+    if (t2.isConditionalExpression(arg)) {
+      const result = handleTernaryInner(arg, source, t2, customMap);
+      if (!result) {
+        const argSrc2 = safeSlice(source, arg.start, arg.end);
+        warnings.push(`Cannot migrate ternary: ${argSrc2}`);
+        return skip(allUnrecognized, warnings);
+      }
+      elements.push(result.exprStr);
+      allUnrecognized.push(...result.unrecognized);
+      converted++;
+      continue;
+    }
+    const argSrc = safeSlice(source, arg.start, arg.end);
+    warnings.push(`Cannot migrate argument: ${argSrc}`);
+    return skip(allUnrecognized, warnings);
+  }
+  if (elements.length === 0) {
+    return skip(allUnrecognized, warnings);
+  }
+  if (elements.length === 1 && !elements[0].includes("&&") && !elements[0].includes("?")) {
+    return {
+      replacement: `sz={${elements[0]}}`,
+      unrecognized: allUnrecognized,
+      warnings,
+      converted,
+      migrated: true
+    };
+  }
+  return {
+    replacement: `sz={[${elements.join(", ")}]}`,
+    unrecognized: allUnrecognized,
+    warnings,
+    converted,
+    migrated: true
+  };
+}
+function handleTernary(node, source, t2, customMap) {
+  const result = handleTernaryInner(node, source, t2, customMap);
+  if (!result) {
+    return {
+      replacement: "",
+      unrecognized: [],
+      warnings: ["Ternary branches must be string literals"],
+      converted: 0,
+      migrated: false
+    };
+  }
+  return {
+    replacement: `sz={${result.exprStr}}`,
+    unrecognized: result.unrecognized,
+    warnings: [],
+    converted: 1,
+    migrated: true
+  };
+}
+function handleLogicalAnd(node, source, t2, customMap) {
+  if (node.operator !== "&&") {
+    return {
+      replacement: "",
+      unrecognized: [],
+      warnings: [`Unsupported logical operator: ${node.operator}`],
+      converted: 0,
+      migrated: false
+    };
+  }
+  const result = handleLogicalAndInner(node, source, t2, customMap);
+  if (!result) {
+    return {
+      replacement: "",
+      unrecognized: [],
+      warnings: ["Right side of && must be a string literal"],
+      converted: 0,
+      migrated: false
+    };
+  }
+  return {
+    replacement: `sz={${result.exprStr}}`,
+    unrecognized: result.unrecognized,
+    warnings: [],
+    converted: 1,
+    migrated: true
+  };
+}
+function handleTemplateLiteral(node, source, t2, customMap) {
+  const warnings = [];
+  const allUnrecognized = [];
+  const staticText = node.quasis.map((q) => q.value.cooked ?? q.value.raw).join(" ");
+  const trimmedStatic = staticText.replace(/\s+/g, " ").trim();
+  let baseObject = {};
+  if (trimmedStatic) {
+    const { szObject, unrecognized } = classNameToSzObject(trimmedStatic, customMap);
+    baseObject = szObject;
+    allUnrecognized.push(...unrecognized);
+  }
+  const dynamicElements = [];
+  let converted = 0;
+  for (const expr of node.expressions) {
+    if (!isExpression(expr, t2)) {
+      const exprSrc2 = safeSlice(source, expr.start, expr.end);
+      warnings.push(`Cannot migrate template expression: ${exprSrc2}`);
+      return skip(allUnrecognized, warnings);
+    }
+    if (t2.isStringLiteral(expr)) {
+      const result = migrateString(expr.value, customMap);
+      if (result) {
+        const { szObject } = classNameToSzObject(expr.value, customMap);
+        baseObject = { ...baseObject, ...szObject };
+        allUnrecognized.push(...result.unrecognized);
+        converted++;
+      }
+      continue;
+    }
+    if (t2.isConditionalExpression(expr)) {
+      const result = handleTernaryInner(expr, source, t2, customMap);
+      if (!result) {
+        const exprSrc2 = safeSlice(source, expr.start, expr.end);
+        warnings.push(`Cannot migrate template ternary: ${exprSrc2}`);
+        return skip(allUnrecognized, warnings);
+      }
+      dynamicElements.push(result.exprStr);
+      allUnrecognized.push(...result.unrecognized);
+      converted++;
+      continue;
+    }
+    if (t2.isLogicalExpression(expr) && expr.operator === "&&") {
+      const result = handleLogicalAndInner(expr, source, t2, customMap);
+      if (!result) {
+        const exprSrc2 = safeSlice(source, expr.start, expr.end);
+        warnings.push(`Cannot migrate template logical expr: ${exprSrc2}`);
+        return skip(allUnrecognized, warnings);
+      }
+      dynamicElements.push(result.exprStr);
+      allUnrecognized.push(...result.unrecognized);
+      converted++;
+      continue;
+    }
+    const exprSrc = safeSlice(source, expr.start, expr.end);
+    warnings.push(`Cannot migrate template expression: ${exprSrc}`);
+    return skip(allUnrecognized, warnings);
+  }
+  const hasBase = Object.keys(baseObject).length > 0;
+  const hasDynamic = dynamicElements.length > 0;
+  if (!hasBase && !hasDynamic) {
+    return skip(allUnrecognized, warnings);
+  }
+  if (hasBase && !hasDynamic) {
+    return {
+      replacement: `sz=${generateSzExpression(baseObject)}`,
+      unrecognized: allUnrecognized,
+      warnings,
+      converted: converted + 1,
+      migrated: true
+    };
+  }
+  const parts = [];
+  if (hasBase) {
+    parts.push(generateSzObjectLiteral(baseObject));
+  }
+  parts.push(...dynamicElements);
+  return {
+    replacement: `sz={[${parts.join(", ")}]}`,
+    unrecognized: allUnrecognized,
+    warnings,
+    converted: converted + (hasBase ? 1 : 0),
+    migrated: true
+  };
+}
+function handleTernaryInner(node, source, t2, customMap) {
+  if (!t2.isStringLiteral(node.consequent) || !t2.isStringLiteral(node.alternate)) {
+    return null;
+  }
+  const condSource = safeSlice(source, node.test.start, node.test.end);
+  const conValue = node.consequent.value.trim();
+  const altValue = node.alternate.value.trim();
+  if (altValue === "") {
+    if (!conValue) {
+      return null;
+    }
+    const conResult2 = migrateString(conValue, customMap);
+    if (!conResult2 || conResult2.unrecognized.length > 0) {
+      return null;
+    }
+    return {
+      exprStr: `${condSource} && ${conResult2.objectStr}`,
+      unrecognized: []
+    };
+  }
+  if (conValue === "") {
+    const altResult2 = migrateString(altValue, customMap);
+    if (!altResult2 || altResult2.unrecognized.length > 0) {
+      return null;
+    }
+    return {
+      exprStr: `!${wrapCondition(condSource)} && ${altResult2.objectStr}`,
+      unrecognized: []
+    };
+  }
+  const conResult = migrateString(conValue, customMap);
+  const altResult = migrateString(altValue, customMap);
+  if (!conResult || !altResult) {
+    return null;
+  }
+  const unrecognized = [...conResult.unrecognized, ...altResult.unrecognized];
+  if (unrecognized.length > 0) {
+    return null;
+  }
+  return {
+    exprStr: `${condSource} ? ${conResult.objectStr} : ${altResult.objectStr}`,
+    unrecognized: []
+  };
+}
+function handleLogicalAndInner(node, source, t2, customMap) {
+  if (!t2.isStringLiteral(node.right)) {
+    return null;
+  }
+  const result = migrateString(node.right.value, customMap);
+  if (!result || result.unrecognized.length > 0) {
+    return null;
+  }
+  const condSource = safeSlice(source, node.left.start, node.left.end);
+  return {
+    exprStr: `${condSource} && ${result.objectStr}`,
+    unrecognized: []
+  };
+}
+function migrateString(className, customMap) {
+  const trimmed = className.trim();
+  if (!trimmed) {
+    return null;
+  }
+  const { szObject, unrecognized } = classNameToSzObject(trimmed, customMap);
+  if (Object.keys(szObject).length === 0) {
+    return null;
+  }
+  return {
+    objectStr: generateSzObjectLiteral(szObject),
+    unrecognized
+  };
+}
+function skip(unrecognized, warnings) {
+  return {
+    replacement: "",
+    unrecognized,
+    warnings,
+    converted: 0,
+    migrated: false
+  };
+}
+function safeSlice(source, start, end) {
+  if (start === null || start === void 0 || end === null || end === void 0) {
+    return "<unknown>";
+  }
+  return source.slice(start, end);
+}
+function wrapCondition(cond) {
+  if (cond.includes(" ") || cond.includes("||") || cond.includes("&&")) {
+    return `(${cond})`;
+  }
+  return cond;
+}
+function isExpression(node, t2) {
+  return t2.isExpression(node);
+}
+
 // src/migrate/ast-transformer.ts
-function transformSourceSimple(source, filePath) {
+var traverse = typeof _traverse === "function" ? _traverse : _traverse.default;
+function injectTodoComment(unrecognized, parent, options, replacements) {
+  if (!options.injectTodos || unrecognized.length === 0) {
+    return;
+  }
+  if (!t.isJSXOpeningElement(parent) || parent.start === null || parent.start === void 0) {
+    return;
+  }
+  replacements.push({
+    start: parent.start,
+    end: parent.start,
+    text: `
+{/* @sz-todo: ${unrecognized.join(", ")} */}
+`
+  });
+}
+function transformSource(source, filePath, options = {}) {
+  const warnings = [];
+  let classNamesTransformed = 0;
+  let classNamesSkipped = 0;
+  const classesUnrecognized = [];
+  const replacements = [];
+  const clsxImportNames = /* @__PURE__ */ new Set();
+  let clsxUsedOutsideClassName = false;
+  const clsxCallsitesMigrated = /* @__PURE__ */ new Set();
+  let hasCvaImport = false;
+  let ast;
+  try {
+    ast = parse(source, {
+      sourceType: "module",
+      plugins: ["jsx", "typescript", "decorators-legacy"],
+      ranges: true
+    });
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err);
+    return {
+      code: source,
+      changed: false,
+      warnings: [`Parse error in ${filePath}: ${msg}`],
+      stats: { classNamesTransformed: 0, classNamesSkipped: 0, classesUnrecognized: [] },
+      potentiallyUnusedImports: []
+    };
+  }
+  traverse(ast, {
+    // Track clsx-like and CVA imports
+    ImportDeclaration(path6) {
+      const src = path6.node.source.value;
+      const clsxPackages = ["clsx", "clsx/lite", "classnames", "tailwind-merge"];
+      const isClsxPkg = clsxPackages.some((p) => src === p || src.startsWith(p + "/"));
+      const cvaPkgs = ["cva", "class-variance-authority"];
+      if (cvaPkgs.some((p) => src === p || src.startsWith(p + "/"))) {
+        hasCvaImport = true;
+      }
+      for (const spec of path6.node.specifiers) {
+        const localName = spec.local.name;
+        if (isClsxPkg || isClsxLikeName(localName)) {
+          clsxImportNames.add(localName);
+        }
+      }
+    },
+    // Track clsx usage outside className
+    CallExpression(path6) {
+      if (t.isIdentifier(path6.node.callee) && clsxImportNames.has(path6.node.callee.name)) {
+        const inClassName = path6.findParent(
+          (p) => t.isJSXAttribute(p.node) && t.isJSXIdentifier(p.node.name) && p.node.name.name === "className"
+        );
+        if (!inClassName) {
+          clsxUsedOutsideClassName = true;
+        }
+      }
+    },
+    // Main transformation: className → sz
+    JSXAttribute(path6) {
+      const attrName = path6.node.name;
+      if (!t.isJSXIdentifier(attrName) || attrName.name !== "className") {
+        return;
+      }
+      const parent = path6.parent;
+      if (t.isJSXOpeningElement(parent)) {
+        const elementName = parent.name;
+        const isCapitalized = t.isJSXIdentifier(elementName) && /^[A-Z]/.test(elementName.name) || t.isJSXMemberExpression(elementName);
+        if (isCapitalized) {
+          classNamesSkipped++;
+          return;
+        }
+      }
+      if (t.isJSXOpeningElement(parent)) {
+        const hasSz = parent.attributes.some(
+          (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === "sz"
+        );
+        if (hasSz) {
+          classNamesSkipped++;
+          return;
+        }
+      }
+      const value = path6.node.value;
+      const attrStart = path6.node.start;
+      const attrEnd = path6.node.end;
+      if (attrStart === null || attrStart === void 0 || attrEnd === null || attrEnd === void 0) {
+        return;
+      }
+      if (t.isStringLiteral(value)) {
+        const result = processStaticString(value.value, options.customMap);
+        if (result) {
+          replacements.push({ start: attrStart, end: attrEnd, text: result.replacement });
+          classNamesTransformed++;
+          classesUnrecognized.push(...result.unrecognized);
+          injectTodoComment(result.unrecognized, path6.parent, options, replacements);
+        } else {
+          classNamesSkipped++;
+        }
+        return;
+      }
+      if (t.isJSXExpressionContainer(value)) {
+        const expr = value.expression;
+        if (t.isStringLiteral(expr)) {
+          const result = processStaticString(expr.value, options.customMap);
+          if (result) {
+            replacements.push({ start: attrStart, end: attrEnd, text: result.replacement });
+            classNamesTransformed++;
+            classesUnrecognized.push(...result.unrecognized);
+            injectTodoComment(result.unrecognized, path6.parent, options, replacements);
+          } else {
+            classNamesSkipped++;
+          }
+          return;
+        }
+        if (t.isTemplateLiteral(expr)) {
+          const result = handleTemplateLiteral(expr, source, t, options.customMap);
+          if (result.migrated) {
+            replacements.push({ start: attrStart, end: attrEnd, text: result.replacement });
+            classNamesTransformed += result.converted;
+            classesUnrecognized.push(...result.unrecognized);
+          } else {
+            classNamesSkipped++;
+            warnings.push(...result.warnings.map((w) => `[${filePath}] ${w}`));
+          }
+          injectTodoComment(result.unrecognized, path6.parent, options, replacements);
+          return;
+        }
+        if (t.isCallExpression(expr) && t.isIdentifier(expr.callee) && isClsxLikeName(expr.callee.name)) {
+          const result = handleClsxCall(expr, source, t, options.customMap);
+          if (result.migrated) {
+            replacements.push({ start: attrStart, end: attrEnd, text: result.replacement });
+            classNamesTransformed += result.converted;
+            classesUnrecognized.push(...result.unrecognized);
+            if (expr.start !== null && expr.start !== void 0) {
+              clsxCallsitesMigrated.add(expr.start);
+            }
+          } else {
+            classNamesSkipped++;
+            warnings.push(...result.warnings.map((w) => `[${filePath}] ${w}`));
+          }
+          injectTodoComment(result.unrecognized, path6.parent, options, replacements);
+          return;
+        }
+        if (t.isConditionalExpression(expr)) {
+          const result = handleTernary(expr, source, t, options.customMap);
+          if (result.migrated) {
+            replacements.push({ start: attrStart, end: attrEnd, text: result.replacement });
+            classNamesTransformed += result.converted;
+            classesUnrecognized.push(...result.unrecognized);
+          } else {
+            classNamesSkipped++;
+            warnings.push(...result.warnings.map((w) => `[${filePath}] ${w}`));
+          }
+          injectTodoComment(result.unrecognized, path6.parent, options, replacements);
+          return;
+        }
+        if (t.isLogicalExpression(expr) && expr.operator === "&&") {
+          const result = handleLogicalAnd(expr, source, t, options.customMap);
+          if (result.migrated) {
+            replacements.push({ start: attrStart, end: attrEnd, text: result.replacement });
+            classNamesTransformed += result.converted;
+            classesUnrecognized.push(...result.unrecognized);
+          } else {
+            classNamesSkipped++;
+            warnings.push(...result.warnings.map((w) => `[${filePath}] ${w}`));
+          }
+          injectTodoComment(result.unrecognized, path6.parent, options, replacements);
+          return;
+        }
+        classNamesSkipped++;
+        return;
+      }
+      classNamesSkipped++;
+    }
+  });
+  if (hasCvaImport) {
+    warnings.push(
+      `[${filePath}] File uses cva() \u2014 consider migrating to szv() from @csszyx/runtime for type-safe variant-based styling.`
+    );
+  }
+  let output = source;
+  const sorted = replacements.sort((a, b) => b.start - a.start);
+  for (const r of sorted) {
+    output = output.slice(0, r.start) + r.text + output.slice(r.end);
+  }
+  const potentiallyUnusedImports = [];
+  if (clsxImportNames.size > 0 && !clsxUsedOutsideClassName && replacements.length > 0) {
+    for (const name of clsxImportNames) {
+      const callPattern = new RegExp(`\\b${name}\\s*\\(`, "g");
+      if (!callPattern.test(output)) {
+        potentiallyUnusedImports.push(name);
+      }
+    }
+  }
+  return {
+    code: output,
+    changed: replacements.length > 0,
+    warnings,
+    stats: { classNamesTransformed, classNamesSkipped, classesUnrecognized },
+    potentiallyUnusedImports
+  };
+}
+function processStaticString(classNameStr, customMap) {
+  const trimmed = classNameStr.trim();
+  if (!trimmed) {
+    return null;
+  }
+  const { szObject, unrecognized, keepInClassName } = classNameToSzObject(trimmed, customMap);
+  if (Object.keys(szObject).length === 0) {
+    return null;
+  }
+  const szExpr = generateSzExpression(szObject);
+  const remainingClassName = [...keepInClassName, ...unrecognized];
+  if (remainingClassName.length > 0) {
+    return {
+      replacement: `className="${remainingClassName.join(" ")}" sz=${szExpr}`,
+      unrecognized
+    };
+  }
+  return {
+    replacement: `sz=${szExpr}`,
+    unrecognized: []
+  };
+}
+var FOUC_CSS = `<style>
+  /* csszyx: hide [sz] elements until runtime processes them */
+  [sz] { visibility: hidden; }
+  body.sz-ready [sz] { visibility: visible; }
+</style>`;
+function transformHtmlSourceSimple(source, filePath, options = {}) {
+  const {
+    braces = false,
+    injectFouc = true,
+    injectRuntime = false,
+    cdnUrl = "https://cdn.csszyx.com/runtime.js",
+    localPath = "csszyx-runtime.js"
+  } = options;
   const warnings = [];
   let classNamesTransformed = 0;
   let classNamesSkipped = 0;
   const classesUnrecognized = [];
   let changed = false;
-  const output = source.replace(/className="([^"]*)"/g, (match, classNameStr) => {
-    return processClassNameMatch(match, classNameStr, '"');
+  let output = source.replace(/\bclass="([^"]*)"/g, (match, classStr) => {
+    return processClassAttr(match, classStr, '"');
   });
-  const output2 = output.replace(/className='([^']*)'/g, (match, classNameStr) => {
-    return processClassNameMatch(match, classNameStr, "'");
+  output = output.replace(/\bclass='([^']*)'/g, (match, classStr) => {
+    return processClassAttr(match, classStr, "'");
   });
-  function processClassNameMatch(match, classNameStr, quote) {
-    const trimmed = classNameStr.trim();
+  if (injectFouc && output.includes("</head>") && !output.includes("csszyx: hide [sz]")) {
+    output = output.replace("</head>", `${FOUC_CSS}
+</head>`);
+    changed = true;
+  }
+  if (injectRuntime && output.includes("</body>")) {
+    const scriptSrc = injectRuntime === "cdn" ? cdnUrl : localPath;
+    const scriptTag = `<script src="${scriptSrc}"></script>`;
+    if (!output.includes(scriptSrc)) {
+      output = output.replace("</body>", `${scriptTag}
+</body>`);
+      changed = true;
+    }
+  }
+  function processClassAttr(match, classStr, quote) {
+    const trimmed = classStr.trim();
     if (!trimmed) {
       classNamesSkipped++;
       return match;
@@ -2971,33 +3920,105 @@ function transformSourceSimple(source, filePath) {
       classesUnrecognized.push(...unrecognized);
       return match;
     }
-    const szExpr = generateSzExpression(szObject);
+    const szVal = generateSzHtmlValue(szObject, braces);
     changed = true;
     classNamesTransformed++;
     if (unrecognized.length > 0) {
       classesUnrecognized.push(...unrecognized);
-      return `className=${quote}${unrecognized.join(" ")}${quote} sz=${szExpr}`;
+      return `class=${quote}${unrecognized.join(" ")}${quote} sz="${szVal}"`;
     }
-    return `sz=${szExpr}`;
+    return `sz="${szVal}"`;
   }
   return {
-    code: output2,
+    code: output,
     changed,
     warnings,
-    stats: { classNamesTransformed, classNamesSkipped, classesUnrecognized }
+    stats: { classNamesTransformed, classNamesSkipped, classesUnrecognized },
+    potentiallyUnusedImports: []
   };
 }
 
 // src/commands/migrate.ts
+function createLogFile(cwd) {
+  const now = /* @__PURE__ */ new Date();
+  const ts = now.toISOString().slice(0, 19).replace("T", "_").replace(/:/g, "-");
+  const logDir = path5.join(cwd, ".csszyx", "logs");
+  fs5.mkdirSync(logDir, { recursive: true });
+  const filePath = path5.join(logDir, `migrate-${ts}.log`);
+  const lines = [`csszyx migrate \u2014 ${now.toISOString()}`, ""];
+  return {
+    filePath,
+    writeLine: (line) => lines.push(line),
+    flush: () => fs5.writeFileSync(filePath, lines.join("\n") + "\n", "utf-8")
+  };
+}
+function isGitignored(cwd, pattern) {
+  try {
+    const content = fs5.readFileSync(path5.join(cwd, ".gitignore"), "utf-8");
+    return content.split("\n").some((l) => {
+      const t2 = l.trim();
+      return t2 === pattern || t2 === pattern + "/" || t2 === "/" + pattern;
+    });
+  } catch {
+    return false;
+  }
+}
+async function askYesNo(question) {
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise((resolve4) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve4(answer.trim().toLowerCase() === "y");
+    });
+  });
+}
 async function migrate(options = {}) {
   const cwd = options.cwd || process.cwd();
-  const dryRun = options.dryRun || false;
+  let dryRun = options.dryRun || false;
   const ignorePatterns = options.ignore || [];
+  const audit2 = options.audit || false;
+  const resolveTodosPath = options.resolveTodos;
+  let customMap, files;
+  if (audit2) {
+    dryRun = true;
+  }
+  let injectTodos = options.injectTodos || false;
+  if (resolveTodosPath && !injectTodos) {
+    injectTodos = true;
+  }
   printHeader("csszyx Migration Tool");
-  if (dryRun) {
+  if (process.stdout.isTTY && !injectTodos && !audit2 && !resolveTodosPath) {
+    const answer = await askYesNo(
+      "Add {/* @sz-todo */} comments above elements with unrecognized classes? [y/N] "
+    );
+    if (answer) {
+      injectTodos = true;
+    }
+  }
+  if (resolveTodosPath) {
+    try {
+      const absolutePath = path5.resolve(cwd, resolveTodosPath);
+      const content = fs5.readFileSync(absolutePath, "utf-8");
+      customMap = JSON.parse(content);
+      printInfo(`Loaded resolution map from ${resolveTodosPath}`);
+    } catch {
+      printWarn(`Could not load resolve map from ${resolveTodosPath}. Ensure the file exists and is valid JSON.`);
+      return;
+    }
+  }
+  if (audit2) {
+    printInfo("Audit mode \u2014 scanning for unrecognized classes to generate a mapping file...");
+  } else if (dryRun) {
     printInfo("Dry run mode \u2014 no files will be modified");
   }
-  const patterns = options.pattern ? [options.pattern] : ["**/*.{jsx,tsx}"];
+  const log = createLogFile(cwd);
+  log.writeLine(`Mode: ${audit2 ? "audit" : dryRun ? "dry-run" : "migrate"}${resolveTodosPath ? ` (resolve-todos: ${resolveTodosPath})` : ""}`);
+  log.writeLine(`injectTodos: ${injectTodos}`);
+  log.writeLine("");
+  if (!isGitignored(cwd, ".csszyx")) {
+    printWarn("Tip: add .csszyx/ to your .gitignore to exclude migration logs from version control.");
+  }
+  const patterns = options.pattern ? [options.pattern] : ["**/*.{jsx,tsx,html}"];
   const ignore = [
     "**/node_modules/**",
     "**/dist/**",
@@ -3007,10 +4028,19 @@ async function migrate(options = {}) {
     ...ignorePatterns
   ];
   const s = spinner.start("Scanning for files...");
-  const files = await fg(patterns, { cwd, ignore, absolute: true });
+  try {
+    files = await fg(patterns, { cwd, ignore, absolute: true });
+  } catch (err) {
+    s.fail("File scan failed");
+    printWarn(`Could not scan files: ${err instanceof Error ? err.message : String(err)}`);
+    log.flush();
+    return;
+  }
   s.succeed(`Found ${files.length} files`);
   if (files.length === 0) {
-    printWarn("No JSX/TSX files found");
+    printWarn(options.pattern ? `No files found matching pattern: ${options.pattern}` : "No JSX/TSX/HTML files found");
+    log.writeLine("No files found.");
+    log.flush();
     return;
   }
   let totalTransformed = 0;
@@ -3018,25 +4048,52 @@ async function migrate(options = {}) {
   let totalFiles = 0;
   const allUnrecognized = [];
   const allWarnings = [];
+  const unusedImportFiles = [];
   const s2 = spinner.start("Migrating...");
   for (const filePath of files) {
     const source = fs5.readFileSync(filePath, "utf-8");
-    if (!source.includes("className=")) {
+    const isHtml = filePath.endsWith(".html");
+    const hasRelevantAttr = isHtml ? source.includes("class=") : source.includes("className=");
+    if (!hasRelevantAttr) {
       continue;
     }
-    const result = transformSourceSimple(source, filePath);
+    let processSource = source;
+    if (resolveTodosPath && !isHtml) {
+      processSource = processSource.replace(/\{\/\*\s*@sz-todo:\s*(.*?)\s*\*\/\}\n?/g, "");
+    }
+    const result = isHtml ? transformHtmlSourceSimple(processSource, filePath, {
+      braces: options.braces,
+      injectFouc: options.injectFouc,
+      injectRuntime: options.injectRuntime,
+      cdnUrl: options.cdnUrl,
+      localPath: options.localPath
+    }) : transformSource(processSource, filePath, { injectTodos, customMap });
+    allWarnings.push(...result.warnings);
     if (result.changed) {
       totalFiles++;
       totalTransformed += result.stats.classNamesTransformed;
       totalSkipped += result.stats.classNamesSkipped;
       allUnrecognized.push(...result.stats.classesUnrecognized);
-      allWarnings.push(...result.warnings);
+      if (result.potentiallyUnusedImports.length > 0) {
+        const rel2 = path5.relative(cwd, filePath);
+        unusedImportFiles.push({ file: rel2, imports: result.potentiallyUnusedImports });
+      }
       if (!dryRun) {
-        fs5.writeFileSync(filePath, result.code, "utf-8");
+        try {
+          fs5.writeFileSync(filePath, result.code, "utf-8");
+        } catch (err) {
+          const rel2 = path5.relative(cwd, filePath);
+          printWarn(`Could not write ${rel2}: ${err instanceof Error ? err.message : String(err)}`);
+          log.writeLine(`  Write error: ${rel2}`);
+          continue;
+        }
       }
       const rel = path5.relative(cwd, filePath);
       if (dryRun) {
         printInfo(`  ${rel}: ${result.stats.classNamesTransformed} className(s) \u2192 sz`);
+        log.writeLine(`  ${rel}: ${result.stats.classNamesTransformed} className(s) \u2192 sz`);
+      } else {
+        log.writeLine(`  ${rel}: ${result.stats.classNamesTransformed} className(s) \u2192 sz`);
       }
     }
   }
@@ -3044,12 +4101,16 @@ async function migrate(options = {}) {
   console.info();
   printSuccess(`Files modified: ${totalFiles}`);
   printSuccess(`classNames converted: ${totalTransformed}`);
+  log.writeLine(`Files modified: ${totalFiles}`);
+  log.writeLine(`classNames converted: ${totalTransformed}`);
   if (totalSkipped > 0) {
     printWarn(`classNames skipped (dynamic): ${totalSkipped}`);
+    log.writeLine(`classNames skipped (dynamic): ${totalSkipped}`);
   }
   if (allUnrecognized.length > 0) {
     const unique = [...new Set(allUnrecognized)];
     printWarn(`Unrecognized classes (${unique.length}): ${unique.slice(0, 10).join(", ")}${unique.length > 10 ? "..." : ""}`);
+    log.writeLine(`Unrecognized classes (${unique.length}): ${unique.join(", ")}`);
   }
   if (allWarnings.length > 0) {
     console.info();
@@ -3059,6 +4120,57 @@ async function migrate(options = {}) {
     if (allWarnings.length > 5) {
       printWarn(`... and ${allWarnings.length - 5} more warnings`);
     }
+    log.writeLine("");
+    log.writeLine("Warnings:");
+    for (const w of allWarnings) {
+      log.writeLine(`  ${w}`);
+    }
+  }
+  if (audit2) {
+    const todoPath = path5.join(cwd, ".csszyx-todo.json");
+    const unique = [...new Set(allUnrecognized)];
+    console.info();
+    if (unique.length === 0) {
+      printSuccess("Audit complete. 100% of your classes are perfectly recognized by csszyx!");
+      log.writeLine("Audit: 100% recognized.");
+    } else {
+      const todoObj = {};
+      for (const u of unique) {
+        todoObj[u] = "sz:todo";
+      }
+      try {
+        fs5.writeFileSync(todoPath, JSON.stringify(todoObj, null, 2));
+      } catch (err) {
+        printWarn(`Could not write ${path5.relative(cwd, todoPath)}: ${err instanceof Error ? err.message : String(err)}`);
+        log.flush();
+        return;
+      }
+      printSuccess(`Audit complete. Exported ${unique.length} unrecognized classes to ${path5.relative(cwd, todoPath)}.`);
+      printInfo("Edit this file to map custom classes, then run: npx @csszyx/cli migrate --resolve-todos .csszyx-todo.json");
+      log.writeLine(`Audit: ${unique.length} unrecognized classes written to ${path5.relative(cwd, todoPath)}`);
+    }
+  }
+  if (resolveTodosPath) {
+    const unique = [...new Set(allUnrecognized)];
+    if (unique.length > 0) {
+      console.info();
+      printWarn(`Still unresolved after this pass (${unique.length}): ${unique.slice(0, 10).join(", ")}${unique.length > 10 ? "..." : ""}`);
+      printInfo("Re-run --audit to generate a fresh snapshot when ready.");
+      log.writeLine(`Still unresolved (${unique.length}): ${unique.join(", ")}`);
+    }
+  }
+  if (unusedImportFiles.length > 0) {
+    console.info();
+    printWarn("Potentially unused imports (run ESLint to clean up):");
+    for (const { file, imports } of unusedImportFiles) {
+      printInfo(`  ${file}: ${imports.map((i) => `import { ${i} }`).join(", ")}`);
+      log.writeLine(`  Unused import in ${file}: ${imports.join(", ")}`);
+    }
+  }
+  try {
+    log.flush();
+    printInfo(`Migration log saved to ${path5.relative(cwd, log.filePath)}`);
+  } catch {
   }
 }
 
@@ -3072,9 +4184,8 @@ cli.command("init", "Setup csszyx in your project").option("--framework <name>",
     cwd: options.cwd
   });
 });
-cli.command("doctor", "Diagnose mangling issues").option("--fix", "Auto-fix common issues").option("--verbose", "Show detailed output").option("--cwd <dir>", "Current working directory").action(async (options) => {
+cli.command("doctor", "Diagnose mangling issues").option("--verbose", "Show detailed output").option("--cwd <dir>", "Current working directory").action(async (options) => {
   await doctor({
-    fix: options.fix,
     verbose: options.verbose,
     cwd: options.cwd
   });
@@ -3098,12 +4209,20 @@ cli.command(
     silent: options.silent
   });
 });
-cli.command("migrate [dir]", "Convert Tailwind className to sz prop").option("--dry-run", "Show changes without modifying files").option("--ignore <patterns>", "Glob patterns to ignore (comma-separated)").option("--pattern <glob>", "Custom glob pattern for file discovery").option("--cwd <dir>", "Current working directory").action(async (dir, options) => {
+cli.command("migrate [dir]", "Convert Tailwind className to sz prop").option("--dry-run", "Show changes without modifying files").option("--ignore <patterns>", "Glob patterns to ignore (comma-separated)").option("--pattern <glob>", "Custom glob pattern for file discovery").option("--cwd <dir>", "Current working directory").option("--braces", "Wrap HTML sz values in outer { } braces (default: bare)").option("--no-fouc", "Skip FOUC-prevention CSS injection into HTML files").option("--inject-runtime <mode>", "Inject runtime script into HTML: local | cdn").option("--cdn-url <url>", "Custom CDN URL for --inject-runtime cdn").option("--local-path <path>", "Local script path for --inject-runtime local (default: csszyx-runtime.js)").option("--audit", "Scan without modifying files and output .csszyx-todo.json").option("--inject-todos", "Inject {/* @sz-todo */} comments above unrecognized classes").option("--resolve-todos <file>", "Path to a JSON file mapping custom classes to sz properties").action(async (dir, options) => {
   await migrate({
     dryRun: options.dryRun,
     ignore: options.ignore ? options.ignore.split(",") : void 0,
     pattern: options.pattern,
-    cwd: dir || options.cwd
+    cwd: dir || options.cwd,
+    braces: options.braces,
+    injectFouc: options.fouc !== false,
+    injectRuntime: options.injectRuntime === "local" ? "local" : options.injectRuntime === "cdn" ? "cdn" : false,
+    cdnUrl: options.cdnUrl,
+    localPath: options.localPath,
+    audit: options.audit,
+    injectTodos: options.injectTodos,
+    resolveTodos: options.resolveTodos
   });
 });
 cli.command("").action(() => {
@@ -3113,6 +4232,7 @@ cli.help();
 cli.version(VERSION);
 cli.parse();
 export {
+  classNameToSzObject,
   extractScreenKeys,
   extractSpacingKeys,
   findConfigFile,
@@ -3120,6 +4240,7 @@ export {
   generateAndWriteTypes,
   generateTypeDeclarations,
   generateTypes,
+  transformSource as migrateSource,
   scanTailwindConfig,
   writeDeclarationFile
 };