shopify-accelerate-app 1.1.9 → 1.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shopify-accelerate-app",
-  "version": "1.1.9",
+  "version": "1.2.11",
   "description": "Shopify App development with full Typescript Support",
   "author": "Felix Tellmann",
   "license": "MIT",
@@ -34,7 +34,9 @@
   "dependencies": {
     "@swc/core": "^1.9.3",
     "@swc/helpers": "^0.5.15",
-    "@tailwindcss/cli": "^4.2.1",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "autoprefixer": "^10.4.20",
     "chalk": "4.1.2",
     "commander": "^12.1.0",
     "dotenv-mono": "^1.3.14",
@@ -48,16 +50,18 @@
     "json2toml": "^6.1.1",
     "node-watch": "^0.7.4",
     "postcss": "^8.4.49",
+    "postcss-import": "^16.1.0",
     "preact": "^10.25.0",
     "prompts": "^2.4.2",
     "regenerator-runtime": "^0.14.1",
     "shopify-typed-node-api": "^2.1.1",
-    "tailwindcss": "^4.0.0",
+    "tailwindcss": "0.0.0-insiders.6069a81",
+    "tailwindcss-container-queries-with-max-width": "^0.1.5",
     "toml": "^3.0.0",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
     "zustand": "^5.0.1",
-    "tw-animate-css": "^1.0.0"
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@types/inquirer": "^9.0.7",

package/src/esbuild/esbuild.ts

@@ -28,9 +28,6 @@ export const transformClassNameStrings = (stringContent, final = false, cssOutpu
   }
   const classNameString = special ? stringContent.split(" ") : stringContent.replace(/\s+/gi, " ").split(" ");
 
-  // v4 prefix uses colon separator (tw:flex) instead of dash (tw-flex)
-  const prefix_sep = `${prefix}:`;
-
   const prefixedClassNames = classNameString.map((className) => {
     if (!className.trim()) return className;
 
@@ -47,17 +44,17 @@ export const transformClassNameStrings = (stringContent, final = false, cssOutpu
           }
           if (
             final &&
-            (str.startsWith(prefix_sep) || str.startsWith(`!${prefix_sep}`)) &&
+            (str.startsWith(`${prefix}-`) || str.startsWith(`!${prefix}-`)) &&
             !cssOutput?.includes(str.replace(/([@()%,/.[\]])/gi, "\\$1"))
           ) {
             notCSSClasses.set(str, str.replace(/([@()%,/.[\]])/gi, "\\$1"));
-            return str.replace(prefix_sep, "").replace(`!${prefix_sep}`, "");
+            return str.replace(`${prefix}-`, "").replace(`!${prefix}-`, "");
           }
-          if (index === arr.length - 1 && !str.startsWith(prefix_sep) && !str.startsWith(`!${prefix_sep}`)) {
+          if (index === arr.length - 1 && !str.startsWith(`${prefix}-`) && !str.startsWith(`!${prefix}-`)) {
             if (/^!/gi.test(str)) {
-              return `!${prefix_sep}${str.replace(/^!/gi, "")}`;
+              return `!${prefix}-${str.replace(/^!/gi, "")}`;
             }
-            return `${prefix_sep}${str}`;
+            return `${prefix}-${str}`;
           }
           return str;
         })
@@ -65,21 +62,21 @@ export const transformClassNameStrings = (stringContent, final = false, cssOutpu
     }
     if (
       final &&
-      (className.startsWith(prefix_sep) || className.startsWith(`!${prefix_sep}`)) &&
+      (className.startsWith(`${prefix}-`) || className.startsWith(`!${prefix}-`)) &&
       !cssOutput?.includes(`${className.replace(/([@()%,/.[\]])/gi, "\\$1")} `) &&
       !cssOutput?.includes(`${className.replace(/([@()%,/.[\]])/gi, "\\$1")}:`)
     ) {
       notCSSClasses.set(className, className.replace(/([@()%,/.[\]])/gi, "\\$1"));
-      return className.replace(prefix_sep, "").replace(`!${prefix_sep}`, "");
+      return className.replace(`${prefix}-`, "").replace(`!${prefix}-`, "");
     }
 
-    if (className.startsWith(prefix_sep) || className.startsWith(`!${prefix_sep}`)) {
+    if (className.startsWith(`${prefix}-`) || className.startsWith(`!${prefix}-`)) {
       return className;
     } else {
       if (/^!/gi.test(className)) {
-        return `!${prefix_sep}${className.replace(/^!/gi, "")}`;
+        return `!${prefix}-${className.replace(/^!/gi, "")}`;
       }
-      return `${prefix_sep}${className}`;
+      return `${prefix}-${className}`;
     }
   });
 

package/src/scaffold-theme/generate-liquid-files.ts

@@ -295,7 +295,8 @@ export const generateLiquidFiles = (final?: boolean, cssOutput?: string) => {
   const mergedTranslations = mergeLocales(translations, defaultSourceTranslations);
 
   const translationsJs = `<script>
-  window._listify_translations = ${JSON.stringify(transformTranslations(mergedTranslations), undefined, 2)};
+  window.__listify = window.__listify || {};
+  window.__listify.translations = ${JSON.stringify(transformTranslations(mergedTranslations), undefined, 2)};
 </script>
   `;
 
@@ -306,11 +307,6 @@ export const generateLiquidFiles = (final?: boolean, cssOutput?: string) => {
     .replace(/`/gi, '"')
     .replace(/}\n/gi, "};\n")
     .replace(/\n\n/gi, "\n")};
-declare global {
-  interface Window {
-    _listify_translations?: Translations;
-  }
-}
 `;
 
   writeCompareFile(

package/src/tailwind/postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/src/tailwind/tailwind-watch.ts

@@ -1,5 +1,5 @@
+// import { require } from "../../require";
 import child_process from "child_process";
-import esbuild from "esbuild";
 import fs from "fs";
 import path from "path";
 import { config, root_dir } from "../../shopify-accelerate-app";
@@ -7,165 +7,49 @@ import { writeCompareFile } from "../utils/fs";
 
 const watch = require("node-watch");
 
-/**
- * Generates the Tailwind v4 input CSS dynamically.
- * Combines the base config with conditional prefix/important options
- * and the user's _tailwind.css file.
- */
-const generateInputCSS = (base_css_path: string, user_css_path: string): string => {
-  const { package_root } = config;
-
-  const prefix = process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX;
-  const important = process.env.SHOPIFY_ACCELERATE_TAILWIND_IMPORTANT;
-
-  // Build the @import "tailwindcss" line with options
-  // In v4, we import theme, preflight, and utilities as individual layers
-  const tailwind_import_options: string[] = [];
-  if (prefix) {
-    tailwind_import_options.push(`prefix(${prefix})`);
-  }
-
-  // Resolve tailwindcss paths to absolute so they work from the generated file's location
-  const tw_theme_path = path.join(package_root, "node_modules/tailwindcss/theme.css").replace(/\\/g, "/");
-  const tw_preflight_path = path.join(package_root, "node_modules/tailwindcss/preflight.css").replace(/\\/g, "/");
-  const tw_utilities_path = path.join(package_root, "node_modules/tailwindcss/utilities.css").replace(/\\/g, "/");
-
-  let tailwind_import: string;
-  if (important || tailwind_import_options.length > 0) {
-    // When using prefix/important, import layers individually with options
-    const theme_options = prefix ? ` prefix(${prefix})` : "";
-    const utilities_options_parts: string[] = [];
-    if (prefix) utilities_options_parts.push(`prefix(${prefix})`);
-    if (important) utilities_options_parts.push(`important(${important})`);
-    const utilities_options = utilities_options_parts.length > 0 ? ` ${utilities_options_parts.join(" ")}` : "";
-
-    tailwind_import = [
-      `@layer theme, base, components;`,
-      `@import "${tw_theme_path}" layer(theme)${theme_options} source(none);`,
-      `@import "${tw_preflight_path}" layer(base) source(none);`,
-      `/* Utilities are NOT in a @layer so they keep normal cascade priority (like v3) and can override other libraries */`,
-      `@import "${tw_utilities_path}"${utilities_options};`,
-    ].join("\n");
-  } else {
-    // No prefix or important — simple imports
-    tailwind_import = [
-      `@layer theme, base, components;`,
-      `@import "${tw_theme_path}" layer(theme) source(none);`,
-      `@import "${tw_preflight_path}" layer(base) source(none);`,
-      `/* Utilities are NOT in a @layer so they keep normal cascade priority (like v3) and can override other libraries */`,
-      `@import "${tw_utilities_path}";`,
-    ].join("\n");
-  }
-
-  // Source paths for content detection — resolve to absolute so they work from the generated file's location
-  const extension_path_raw = process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH ?? "";
-  const extension_path_abs = extension_path_raw ? path.resolve(root_dir, extension_path_raw).replace(/\\/g, "/") : "";
-  const source_directive = extension_path_abs ? `@source "${extension_path_abs}/**/*.{html,liquid,js}";` : "";
-
-  console.log({ source_directive });
-
-  // Safelist equivalent via @source inline()
-  const safelist_prefix = prefix ? `${prefix}:` : "";
-  // eslint-disable-next-line max-len
-  const safelist = `@source inline("${safelist_prefix}inset-0 ${safelist_prefix}pointer-events-none [&>*]:${safelist_prefix}pointer-events-auto");`;
-
-  // Read the base CSS config (theme, variants, utilities, plugins)
-  // Resolve bare package imports and relative paths to absolute so they work from the generated file's location
-  const tw_animate_path = path.join(package_root, "node_modules/tw-animate-css/dist/tw-animate.css").replace(/\\/g, "/");
-  const base_css_dir = path.dirname(base_css_path).replace(/\\/g, "/");
-  const base_css = fs
-    .readFileSync(base_css_path, { encoding: "utf-8" })
-    .replace('@import "tw-animate-css"', `@import "${tw_animate_path}"`)
-    .replace(/@plugin "\.\/([^"]+)"/g, `@plugin "${base_css_dir}/$1"`);
-
-  // Read the user's _tailwind.css
-  const user_css = fs.readFileSync(user_css_path, { encoding: "utf-8" });
-
-  return [
-    `/* Auto-generated Tailwind v4 input — do not edit */`,
-    tailwind_import,
-    ``,
-    base_css,
-    ``,
-    source_directive,
-    safelist,
-    ``,
-    `/* User styles */`,
-    user_css,
-  ].join("\n");
-};
-
-/**
- * Generates a `tailwind.config.css` at the consuming project root so that
- * IntelliJ / WebStorm's Tailwind Language Server can discover all custom
- * theme tokens, variants, and utilities for autocomplete.
- *
- * The file is NOT used by the build — it exists solely for IDE support.
- * Uses `writeCompareFile` to avoid unnecessary file-change events.
- */
-const generateIDEConfig = (base_css_import_path: string): void => {
-  const ide_config_path = path.join(process.cwd(), "tailwind.config.css");
-
-  const content = [
-    `/* Auto-generated by shopify-accelerate-app for IDE autocomplete.`,
-    `   This file is NOT used by the build — it exists solely so IntelliJ/WebStorm`,
-    `   can provide Tailwind CSS class autocomplete with all custom theme values,`,
-    `   variants, and utilities.`,
-    ``,
-    `   Do not edit — it will be regenerated on next \`dev\` start. */`,
-    `@import "tailwindcss";`,
-    `@import "${base_css_import_path}";`,
-  ].join("\n");
-
-  writeCompareFile(ide_config_path, content);
-};
-
 export const runTailwindCSSWatcher = () => {
   const { package_root } = config;
 
-  const user_css_path = path.join(root_dir, "assets", "_tailwind.css");
-  const input_exists = fs.existsSync(user_css_path);
+  const hasConfig = fs.existsSync(path.join(root_dir, "tailwind.config.js"));
+  const hasPostCss = fs.existsSync(path.join(root_dir, "postcss.config.js"));
+  const inputFile = fs.existsSync(path.join(root_dir, `assets`, `_tailwind.css`));
+  const resetInputFile = fs.existsSync(path.join(root_dir, `assets`, `_reset.css`));
 
-  if (!input_exists) {
+  if (!inputFile) {
     console.log("Tailwind Input file not found");
     return;
   }
 
-  const base_css_path = path.join(package_root, "src/tailwind/tailwind-base.css");
-
-  // Generate IDE config for Tailwind autocomplete in IntelliJ/WebStorm
-  generateIDEConfig("shopify-accelerate-app/src/tailwind/tailwind-base.css");
-  const generated_input_path = path.join(config.extension_path, "assets", "_tailwind_generated.css");
-  const pre_sort_path = path.join(config.extension_path, "assets", "tailwind_pre_sort.css");
-
-  // Generate the combined input CSS
-  const input_css = generateInputCSS(base_css_path, user_css_path);
-  fs.writeFileSync(generated_input_path, input_css);
+  const filePath = path.join(config.extension_path, `assets`, `tailwind_pre_sort.css`);
 
   /*= =============== Tailwind Watcher ================ */
-  console.log(`Tailwind v4 input: ${generated_input_path}`);
-  console.log(`Tailwind v4 output: ${pre_sort_path}`);
-  child_process.spawn("npx", ["@tailwindcss/cli", "-i", generated_input_path, "-o", pre_sort_path, "--watch"], {
-    shell: true,
-    stdio: "inherit",
-  });
-
-  // Regenerate input CSS when user's _tailwind.css changes
-  watch(path.join(root_dir, "assets"), { recursive: false }, (evt: string, name: string) => {
-    if (!name.match(/_tailwind\.css$/)) return;
-    try {
-      const updated_css = generateInputCSS(base_css_path, user_css_path);
-      fs.writeFileSync(generated_input_path, updated_css);
-    } catch (err) {
-      console.log(err);
+  console.log(path.join(root_dir, `assets`, `_tailwind.css`));
+  console.log(path.join(package_root, `src/tailwind/tailwind.config.js`));
+  child_process.spawn(
+    "npx",
+    [
+      "tailwindcss",
+      "--config",
+      /*hasConfig ? "tailwind.config.js" :*/ path.join(package_root, `src/tailwind/tailwind.config.js`),
+      "--postcss",
+      /*hasPostCss ? "postcss.config.js" : */ path.join(package_root, `src/tailwind/postcss.config.js`),
+      "-i",
+      path.join(root_dir, `assets`, `_tailwind.css`),
+      "-o",
+      filePath,
+      "--watch",
+    ],
+    {
+      shell: true,
+      stdio: "inherit",
     }
-  });
+  );
 
   /*= =============== Tailwind Plugin Order ================ */
-  watch(path.join(config.extension_path, "assets"), { recursive: false }, async (evt: string, name: string) => {
+  watch(path.join(config.extension_path, "assets"), { recursive: false }, async (evt, name) => {
     try {
-      if (!name.match(/tailwind_pre_sort.css$/) || !fs.existsSync(pre_sort_path)) return;
-      const file = fs.readFileSync(pre_sort_path, { encoding: "utf-8" });
+      if (!name.match(/tailwind_pre_sort.css$/) || !fs.existsSync(filePath)) return;
+      const file = fs.readFileSync(filePath, { encoding: "utf-8" });
 
       const top = file
         .split(/\n}/gi)
@@ -177,48 +61,44 @@ export const runTailwindCSSWatcher = () => {
         .join("\n}")}\n`;
       const content = top + bottom;
 
-      const classes_in_order: string[] = [];
-      const omit_compound_classes = [":not", ":where", ">", "*", ","];
+      const classesInOrder = [];
+      const omitCompoundClasses = [":not", ":where", ">", "*", ","];
 
       content.split("\n").forEach((line) => {
         if (!line.startsWith(".")) {
           return;
         }
 
-        let write_out = true;
+        let writeOut = true;
 
-        omit_compound_classes.forEach((class_to_omit) => {
-          if (line.includes(class_to_omit)) {
-            write_out = false;
+        omitCompoundClasses.forEach((classToOmit) => {
+          if (line.includes(classToOmit)) {
+            writeOut = false;
             return;
           }
         });
 
-        if (write_out) {
-          const final_class_name = line.replace(/\./g, "").replace(/{/g, "").replace(/}/g, "").replace(/\\/g, "").trim();
-          if (final_class_name !== "") {
-            classes_in_order.push(`${final_class_name}`);
+        if (writeOut) {
+          const finalClassName = line.replace(/\./g, "").replace(/{/g, "").replace(/}/g, "").replace(/\\/g, "").trim();
+          if (finalClassName !== "") {
+            classesInOrder.push(`${finalClassName}`);
           }
         }
       });
 
-      // Minify CSS after class extraction to reduce output size (~80KB → ~30KB)
-      const minified = (await esbuild.transform(content, { loader: "css", minify: true })).code;
-
-      writeCompareFile(path.join(config.extension_path, `assets/tailwind.css`), minified);
+      writeCompareFile(path.join(config.extension_path, `assets/tailwind.css`), content);
 
       if (process.env.SHOPIFY_ACCELERATE_THEME_OUTPUT_PATH) {
-        writeCompareFile(path.join(config.theme_output_path, `assets/listify-dev-tailwind.css`), minified);
+        writeCompareFile(path.join(config.theme_output_path, `assets/listify-dev-tailwind.css`), content);
       }
 
-      // v4 prefix uses colon separator (tw:flex) instead of dash (tw-flex)
       writeCompareFile(
         path.join(process.cwd(), ".tailwindorder"),
-        classes_in_order
+        classesInOrder
           .join("\n")
           .replace(
             new RegExp(
-              `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}:` : ""}`,
+              `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : ""}`,
               "gi"
             ),
             ""

package/src/tailwind/tailwind.config.js

@@ -0,0 +1,513 @@
+/** @type {import('tailwindcss').Config} */
+// eslint-disable-next-line node/no-unpublished-require
+// import { require } from "../../require";
+const { defaultExtractor: createDefaultExtractor } = require("tailwindcss/lib/lib/defaultExtractor");
+
+const { default: resolveConfig } = require("tailwindcss/lib/util/resolveConfig");
+const plugin = require("tailwindcss/plugin");
+import { dotenvLoad } from "dotenv-mono";
+
+const dotenv = dotenvLoad(); // Dotenv instance
+
+/** Generate a full shade scale (50–950 + DEFAULT) from a CSS variable name */
+function createColorScale(cssVar) {
+  const scale = { DEFAULT: `rgb(var(${cssVar}) / <alpha-value>)` };
+  for (const shade of [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]) {
+    scale[shade] = `rgb(var(${cssVar}-${shade}) / <alpha-value>)`;
+  }
+  return scale;
+}
+
+/*const defaultExtractor = createDefaultExtractor({
+  tailwindConfig: resolveConfig([
+    {
+      content: [
+        `${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/!**!/!*.{html,liquid,js,json}`,
+        `!${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/!**!/!*.css`,
+        `!${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/!**!/!*.css`,
+      ],
+    },
+  ]),
+});
+
+const extractor = (content) => {
+  return defaultExtractor(content).map((cls) => {
+    console.log({ class: cls });
+    return `tw-${cls}`;
+  });
+};*/
+
+module.exports = {
+  content: {
+    files: [
+      `${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/**/*.{html,liquid,js,json}`,
+      `!${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/!**!/!*.css`,
+      `!${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/!**/!*.css`,
+    ],
+    extract: {
+      // ts: extractor,
+      // tsx: extractor,
+      // html: extractor,
+      // liquid: (content) => {
+      //   console.log({ content });
+      //   return content;
+      // },
+      // js: extractor,
+      // json: extractor,
+    },
+  },
+  safelist: [
+    `!${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : ""}fixed`,
+    `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : ""}inset-0`,
+    `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : ""}pointer-events-none`,
+    `${
+      process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : ""
+    }[&>*]:pointer-events-auto`,
+  ],
+  darkMode: "class", // or 'media' or 'class'
+  // important: true,
+  important: process.env.SHOPIFY_ACCELERATE_TAILWIND_IMPORTANT,
+  prefix: process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : undefined,
+  corePlugins: {
+    preflight: false,
+  },
+  mode: "jit",
+  theme: {
+    borderRadius: {
+      none: "0px",
+      sm: "2px",
+      DEFAULT: "4px",
+      md: "6px",
+      lg: "8px",
+      xl: "12px",
+      "2xl": "16px",
+      "3xl": "24px",
+      full: "9999px",
+      0: "0px",
+      1: "1px",
+      2: "2px",
+      3: "3px",
+      4: "4px",
+      5: "5px",
+      6: "6px",
+      7: "7px",
+      8: "8px",
+      9: "9px",
+      10: "10px",
+      11: "11px",
+      12: "12px",
+      13: "13px",
+      14: "14px",
+      15: "15px",
+      16: "16px",
+      17: "17px",
+      18: "18px",
+      19: "19px",
+      20: "20px",
+      21: "21px",
+      22: "22px",
+      23: "23px",
+      24: "24px",
+      "theme-card": "var(--lx-card-radius)",
+      "theme-card-sm": "var(--lx-card-radius-sm)",
+      "theme-icon": "var(--lx-icon-radius)",
+      "theme-input": "var(--lx-input-radius, 6px)",
+    },
+    borderWidth: {
+      DEFAULT: "1px",
+      0: "0px",
+      2: "2px",
+      3: "3px",
+      4: "4px",
+      theme: "var(--lx-border-width)",
+      "theme-primary": "var(--lx-border-width-primary)",
+    },
+    columns: {
+      auto: "auto",
+      1: "1",
+      2: "2",
+      3: "3",
+      4: "4",
+      5: "5",
+      6: "6",
+      7: "7",
+      8: "8",
+      9: "9",
+      10: "10",
+      11: "11",
+      12: "12",
+      "3xs": "256px",
+      "2xs": "288px",
+      xs: "320px",
+      sm: "384px",
+      md: "448px",
+      lg: "512px",
+      xl: "576px",
+      "2xl": "672px",
+      "3xl": "768px",
+      "4xl": "896px",
+      "5xl": "1024px",
+      "6xl": "1152px",
+      "7xl": "1280px",
+      "8xl": "1440px",
+    },
+    fontSize: {
+      8: ["9px", "1.55"],
+      9: ["9px", "1.5"],
+      10: ["10px", "1.5"],
+      11: ["11px", "1.5"],
+      12: ["12px", "1.5"],
+      13: ["13px", "1.5"],
+      14: ["14px", "1.5"],
+      15: ["15px", "1.5"],
+      16: ["16px", "1.5"],
+      17: ["17px", "1.5"],
+      18: ["18px", "1.45"],
+      19: ["19px", "1.45"],
+      20: ["20px", "1.45"],
+      21: ["21px", "1.45"],
+      22: ["22px", "1.4"],
+      23: ["23px", "1.4"],
+      24: ["24px", "1.4"],
+      xs: ["12px", { lineHeight: "16px" }],
+      sm: ["14px", { lineHeight: "20px" }],
+      base: ["16px", { lineHeight: "24px" }],
+      lg: ["18px", { lineHeight: "28px" }],
+      xl: ["20px", { lineHeight: "28px" }],
+      "2xl": ["24px", { lineHeight: "32px" }],
+      "3xl": ["30px", { lineHeight: "36px" }],
+      "4xl": ["36px", { lineHeight: "36px" }],
+      "5xl": ["48px", { lineHeight: "1" }],
+      "6xl": ["60px", { lineHeight: "1" }],
+      "7xl": ["72px", { lineHeight: "1" }],
+      "8xl": ["96px", { lineHeight: "1" }],
+      "9xl": ["144px", { lineHeight: "1" }],
+    },
+    lineHeight: {
+      1: "1",
+      none: "1",
+      tight: "1.25",
+      snug: "1.375",
+      normal: "1.5",
+      relaxed: "1.625",
+      loose: "2",
+      3: "12px",
+      4: "16px",
+      5: "20px",
+      6: "24px",
+      7: "28px",
+      8: "32px",
+      9: "36px",
+      10: "40px",
+    },
+    maxWidth: ({ theme, breakpoints }) => ({
+      none: "none",
+      0: "0px",
+      xs: "320px",
+      sm: "384px",
+      md: "448px",
+      lg: "512px",
+      xl: "576px",
+      "2xl": "672px",
+      "3xl": "768px",
+      "4xl": "896px",
+      "5xl": "1024px",
+      "6xl": "1152px",
+      "7xl": "1280px",
+      full: "100%",
+      min: "min-content",
+      max: "max-content",
+      fit: "fit-content",
+      prose: "65ch",
+      ...breakpoints(theme("screens")),
+    }),
+    spacing: {
+      px: "1px",
+      0: "0",
+      0.5: "2px",
+      1: "4px",
+      1.5: "6px",
+      2: "8px",
+      2.5: "10px",
+      3: "12px",
+      3.5: "14px",
+      4: "16px",
+      4.5: "18px",
+      5: "20px",
+      5.5: "22px",
+      6: "24px",
+      6.5: "26px",
+      7: "28px",
+      8: "32px",
+      9: "36px",
+      10: "40px",
+      11: "44px",
+      12: "48px",
+      14: "56px",
+      16: "64px",
+      20: "80px",
+      24: "96px",
+      28: "112px",
+      32: "128px",
+      36: "144px",
+      40: "160px",
+      44: "176px",
+      48: "192px",
+      52: "208px",
+      56: "224px",
+      60: "240px",
+      64: "256px",
+      72: "288px",
+      80: "320px",
+      96: "384px",
+    },
+    extend: {
+      transitionTimingFunction: {
+        "slide-in": "cubic-bezier(0.32, 0.72, 0, 1)",
+      },
+      screens: {
+        xxs: "373px" /* tiny phone*/,
+        xs: "427px" /*smaller than iphone pro max*/,
+      },
+      containers: {
+        xxs: "373px" /* tiny phone*/,
+        xs: "427px" /*smaller than iphone pro max*/,
+        sm: "640px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1280px",
+        "2xl": "1536px",
+        "max-xxs": "-373px" /* tiny phone*/,
+        "max-xs": "-427px" /*smaller than iphone pro max*/,
+        "max-sm": "-640px",
+        "max-md": "-768px",
+        "max-lg": "-1024px",
+        "max-xl": "-1280px",
+        "max-2xl": "-1536px",
+      },
+      fontSize: {
+        8: ["9px", "1.55"],
+        9: ["9px", "1.5"],
+        10: ["10px", "1.5"],
+        11: ["11px", "1.5"],
+        12: ["12px", "1.5"],
+        13: ["13px", "1.5"],
+        14: ["14px", "1.5"],
+        15: ["15px", "1.5"],
+        16: ["16px", "1.5"],
+        17: ["17px", "1.5"],
+        18: ["18px", "1.45"],
+        19: ["19px", "1.45"],
+        20: ["20px", "1.45"],
+        21: ["21px", "1.45"],
+        22: ["22px", "1.4"],
+        23: ["23px", "1.4"],
+        24: ["24px", "1.4"],
+      },
+      maxWidth: {
+        "8xl": "90rem",
+      },
+      boxShadow: {
+        "invert-sm": "0 -1px 2px 0 rgb(0 0 0 / 0.05)",
+        invert: "0 -3px 5px 1px rgb(0 0 0 / 0.03), 0 -2px 4px 2px rgb(0 0 0 / 0.03)",
+        "invert-md": "0 -4px 6px 1px rgb(0 0 0 / 0.07), 0 -2px 4px 2px rgb(0 0 0 / 0.07)",
+        "invert-lg": "0 -10px 15px 3px rgb(0 0 0 / 0.1), 0 -4px 6px 4px rgb(0 0 0 / 0.1)",
+        "invert-xl": "0 -20px 25px 5px rgb(0 0 0 / 0.1), 0 -8px 10px 6px rgb(0 0 0 / 0.1)",
+        "invert-2xl": "0 -25px 50px 12px rgb(0 0 0 / 0.25)",
+      },
+      keyframes: {
+        slide: {
+          "0%, 100%": { transform: "translate3d(0,0,0)" },
+          "100%": { transform: "translate3d(-50%,0,0)" },
+        },
+        marquee1: {
+          "0%, 100%": { transform: "translate3d(0,0,0)" },
+          "100%": { transform: "translate3d(-100%,0,0)" },
+        },
+        marquee2: {
+          "0%, 100%": { transform: "translate3d(100%,0,0)" },
+          "100%": { transform: "translate3d(0,0,0)" },
+        },
+        circle: {
+          "0%": { strokeDashoffset: "90" },
+          "100%": { strokeDashoffset: "0" },
+        },
+        dot: {
+          "0%,95%": { fill: "transparent", stroke: "currentColor", strokeOpacity: "0.1" },
+          "100%": { fill: "currentColor", stroke: "transparent", strokeOpacity: "0" },
+        },
+        typewriter: {
+          "0%, 100%": { opacity: "1" },
+          "50%": { opacity: "0" },
+        },
+        "pulse-bg": {
+          "50%": { "--tw-bg-opacity": "0.5" },
+        },
+        shake: {
+          "0%, 100%": { transform: "translateX(0)" },
+          "20%, 60%": { transform: "translateX(-4px)" },
+          "40%, 80%": { transform: "translateX(4px)" },
+        },
+      },
+      animation: {
+        slide: "slide 30s linear infinite",
+        marquee1: "marquee1 30s linear infinite",
+        marquee2: "marquee2 30s linear infinite",
+        circle: "circle 8.1s linear",
+        dot: "dot 8.1s linear",
+        typewriter: "typewriter 0.5s linear infinite",
+        "pulse-bg": "pulse-bg 1s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+        shake: "shake 0.4s ease-in-out",
+      },
+      colors: {
+        theme: {
+          primary: { ...createColorScale("--lx-color-primary"), contrast: "rgb(var(--lx-color-primary-contrast) / <alpha-value>)" },
+          accent: createColorScale("--lx-color-accent"),
+          "trigger-bg": "rgb(var(--lx-color-trigger-bg) / <alpha-value>)",
+          "trigger-text": "rgb(var(--lx-color-trigger-text) / <alpha-value>)",
+          bg: "rgb(var(--lx-color-bg) / <alpha-value>)",
+          text: "rgb(var(--lx-color-text) / <alpha-value>)",
+          "button-bg": "rgb(var(--lx-color-button-bg) / <alpha-value>)",
+          "button-text": "rgb(var(--lx-color-button-text) / <alpha-value>)",
+        },
+      },
+    },
+    variants: {
+      extend: {},
+    },
+  },
+  plugins: [
+    require("autoprefixer"),
+    require("@tailwindcss/aspect-ratio"),
+    require("tailwindcss-container-queries-with-max-width"),
+    require("tailwindcss-animate"),
+    // require("@tailwindcss/forms"),
+    plugin(({ addVariant, addUtilities, matchUtilities, theme }) => {
+      addVariant("svg", ["& svg"]);
+      addVariant("hfa", ["&:hover", "&:focus", "&:active"]);
+      addVariant("hfw", ["&:hover", "&:focus-visible", "&:focus-within"]);
+      addVariant("hfwa", ["&:hover", "&:focus-visible", "&:focus-within", "&:active"]);
+      addVariant("hfwaa", ["&:hover", "&:focus-visible", "&:focus-within", "&:active", "&.active"]);
+      addVariant("hfva", ["&:hover", "&:focus", "&:focus-visible", "&:active"]);
+      addVariant("ha", ["&:hover", "&:active"]);
+      addVariant("hf", ["&:hover", "&:focus-visible"]);
+      addVariant("fa", ["&:focus", "&:active"]);
+      addVariant("f", ["&:focus"]);
+      addVariant("fw", ["&:focus-within"]);
+      addVariant("fv", ["&:focus-visible"]);
+      addVariant("h", ["&:hover"]);
+      addVariant("d", [".dark &"]);
+      addVariant("ac", ["&.active"]);
+      addVariant("b", ["&::before"]);
+      addVariant("a", ["&::after"]);
+      addVariant("not-prose", [":not(.prose &)&"]);
+      addVariant("hfaa", ["&:hover", "&:focus", "&:active", "&.active"]);
+      addVariant("hfvaa", ["&:hover", "&:focus", "&:focus-visible", "&:active", "&.active"]);
+      addVariant("group-hfa", [".group:hover &", ".group:focus &", ".group:active &"]);
+      addVariant("group-hf", [".group:hover &", ".group:focus &"]);
+      addVariant("group-ac", [".group.active &"]);
+
+      addVariant("group-hfva", [".group:hover &", ".group:focus-visible &", ".group:active &"]);
+      addVariant("group-hfwa", [".group:hover &", ".group:focus-visible &", ".group:focus-within &", ".group:active &"]);
+      addVariant("group-hfw", [".group:hover &", ".group:focus-visible &", ".group:focus-within &"]);
+      addVariant("peer-hfwa", [".peer:hover ~ &", ".peer:focus-visible ~ &", ".peer:focus-within ~ &", ".peer:active ~ &"]);
+      addVariant("peer-fw", [".peer:focus-within ~ &"]);
+      matchUtilities(
+        {
+          "top-spacing": (value) => ({
+            top: `calc(${theme("spacing.top-bar-spacing")} + ${value})`,
+          }),
+        },
+        { values: theme("spacing") }
+      );
+      matchUtilities({
+        bgi: (value) => ({
+          background: value,
+        }),
+      });
+      matchUtilities(
+        {
+          "auto-col-flow": (value) => {
+            if (value?.includes("/")) {
+              const [cols, gap] = value.split("/");
+              const calculatedGap = /^(\d|\.)*$/gi.test(gap?.trim()) ? `${+gap * 4}px` : gap;
+
+              return {
+                gridAutoFlow: "column",
+                gridAutoColumns: ` calc((100% - (${calculatedGap} * (${cols} - 1))) / ${cols})`,
+                columnGap: `${calculatedGap}`,
+              };
+            }
+            return {
+              gridAutoFlow: "column",
+              gridAutoColumns: `${value}`,
+            };
+          },
+        },
+        { values: theme("width") }
+      );
+      matchUtilities(
+        {
+          "border-w": (value) => ({ borderWidth: value }),
+        },
+        { values: theme("borderWidth") }
+      );
+      matchUtilities(
+        {
+          "border-x-w": (value) => ({ borderLeftWidth: value, borderRightWidth: value }),
+        },
+        { values: theme("borderWidth") }
+      );
+      matchUtilities(
+        {
+          "border-y-w": (value) => ({ borderTopWidth: value, borderBottomWidth: value }),
+        },
+        { values: theme("borderWidth") }
+      );
+      matchUtilities(
+        {
+          "border-t-w": (value) => ({ borderTopWidth: value }),
+        },
+        { values: theme("borderWidth") }
+      );
+      matchUtilities(
+        {
+          "border-r-w": (value) => ({ borderRightWidth: value }),
+        },
+        { values: theme("borderWidth") }
+      );
+      matchUtilities(
+        {
+          "border-b-w": (value) => ({ borderBottomWidth: value }),
+        },
+        { values: theme("borderWidth") }
+      );
+      matchUtilities(
+        {
+          "border-l-w": (value) => ({ borderLeftWidth: value }),
+        },
+        { values: theme("borderWidth") }
+      );
+      addUtilities({
+        ".shape-geometric-precision": {
+          "shape-rendering": "geometricPrecision",
+        },
+        ".open-quote": {
+          content: "open-quote",
+        },
+        ".close-quote": {
+          content: "close-quote",
+        },
+        ".leading-0": {
+          "line-height": "0",
+        },
+        ".animation-pause": {
+          "animation-play-state": "paused",
+        },
+        ".animation-play": {
+          "animation-play-state": "running",
+        },
+      });
+    }),
+  ],
+};

package/.claude/settings.local.json

@@ -1,12 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "mcp__claude_ai_Context7__resolve-library-id",
-      "WebSearch",
-      "WebFetch(domain:kitemetric.com)",
-      "WebFetch(domain:www.jetbrains.com)",
-      "WebFetch(domain:github.com)",
-      "Bash(cd:*)"
-    ]
-  }
-}

package/src/tailwind/plugins/auto-col-flow.js

@@ -1,25 +0,0 @@
-const plugin = require("tailwindcss/plugin");
-
-module.exports = plugin(({ matchUtilities, theme }) => {
-  matchUtilities(
-    {
-      "auto-col-flow": (value) => {
-        if (value?.includes("/")) {
-          const [cols, gap] = value.split("/");
-          const calculatedGap = /^(\d|\.)*$/gi.test(gap?.trim()) ? `${+gap * 4}px` : gap;
-
-          return {
-            gridAutoFlow: "column",
-            gridAutoColumns: `calc((100% - (${calculatedGap} * (${cols} - 1))) / ${cols})`,
-            columnGap: calculatedGap,
-          };
-        }
-        return {
-          gridAutoFlow: "column",
-          gridAutoColumns: value,
-        };
-      },
-    },
-    { values: theme("width") }
-  );
-});

package/src/tailwind/tailwind-base.css

@@ -1,330 +0,0 @@
-/* ============================================================
-   Tailwind CSS v4 — Base Configuration
-   This file is used as a template. At runtime, tailwind-watch.ts
-   generates the final input CSS by prepending prefix/important
-   options and appending the user's _tailwind.css via @import.
-   ============================================================ */
-
-/* The @import "tailwindcss" line is generated dynamically in tailwind-watch.ts
-   to support conditional prefix() and important() options. */
-
-/* --- Animations (replaces tailwindcss-animate) --- */
-@import "tw-animate-css";
-
-/* --- Theme Overrides --- */
-@theme {
-  /* ---- Spacing (4px base) ---- */
-  --spacing: 4px;
-  --spacing-px: 1px;
-  --spacing-0: 0;
-  --spacing-0_5: 2px;
-  --spacing-1: 4px;
-  --spacing-1_5: 6px;
-  --spacing-2: 8px;
-  --spacing-2_5: 10px;
-  --spacing-3: 12px;
-  --spacing-3_5: 14px;
-  --spacing-4: 16px;
-  --spacing-5: 20px;
-  --spacing-6: 24px;
-  --spacing-7: 28px;
-  --spacing-8: 32px;
-  --spacing-9: 36px;
-  --spacing-10: 40px;
-  --spacing-11: 44px;
-  --spacing-12: 48px;
-  --spacing-14: 56px;
-  --spacing-16: 64px;
-  --spacing-20: 80px;
-  --spacing-24: 96px;
-  --spacing-28: 112px;
-  --spacing-32: 128px;
-  --spacing-36: 144px;
-  --spacing-40: 160px;
-  --spacing-44: 176px;
-  --spacing-48: 192px;
-  --spacing-52: 208px;
-  --spacing-56: 224px;
-  --spacing-60: 240px;
-  --spacing-64: 256px;
-  --spacing-72: 288px;
-  --spacing-80: 320px;
-  --spacing-96: 384px;
-
-  /* ---- Border Radius ---- */
-  --radius-none: 0px;
-  --radius-xs: 2px;
-  --radius-sm: 2px;
-  --radius-DEFAULT: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
-  --radius-2xl: 16px;
-  --radius-3xl: 24px;
-  --radius-full: 9999px;
-
-  /* ---- Font Size ---- */
-  --text-8: 9px;
-  --text-8--line-height: 1.55;
-  --text-9: 9px;
-  --text-9--line-height: 1.5;
-  --text-10: 10px;
-  --text-10--line-height: 1.5;
-  --text-11: 11px;
-  --text-11--line-height: 1.5;
-  --text-12: 12px;
-  --text-12--line-height: 1.5;
-  --text-13: 13px;
-  --text-13--line-height: 1.5;
-  --text-14: 14px;
-  --text-14--line-height: 1.5;
-  --text-15: 15px;
-  --text-15--line-height: 1.5;
-  --text-16: 16px;
-  --text-16--line-height: 1.5;
-  --text-17: 17px;
-  --text-17--line-height: 1.5;
-  --text-18: 18px;
-  --text-18--line-height: 1.45;
-  --text-19: 19px;
-  --text-19--line-height: 1.45;
-  --text-20: 20px;
-  --text-20--line-height: 1.45;
-  --text-21: 21px;
-  --text-21--line-height: 1.45;
-  --text-22: 22px;
-  --text-22--line-height: 1.4;
-  --text-23: 23px;
-  --text-23--line-height: 1.4;
-  --text-24: 24px;
-  --text-24--line-height: 1.4;
-  --text-xs: 12px;
-  --text-xs--line-height: 16px;
-  --text-sm: 14px;
-  --text-sm--line-height: 20px;
-  --text-base: 16px;
-  --text-base--line-height: 24px;
-  --text-lg: 18px;
-  --text-lg--line-height: 28px;
-  --text-xl: 20px;
-  --text-xl--line-height: 28px;
-  --text-2xl: 24px;
-  --text-2xl--line-height: 32px;
-  --text-3xl: 30px;
-  --text-3xl--line-height: 36px;
-  --text-4xl: 36px;
-  --text-4xl--line-height: 36px;
-  --text-5xl: 48px;
-  --text-5xl--line-height: 1;
-  --text-6xl: 60px;
-  --text-6xl--line-height: 1;
-  --text-7xl: 72px;
-  --text-7xl--line-height: 1;
-  --text-8xl: 96px;
-  --text-8xl--line-height: 1;
-  --text-9xl: 144px;
-  --text-9xl--line-height: 1;
-
-  /* ---- Line Height ---- */
-  --leading-none: 1;
-  --leading-tight: 1.25;
-  --leading-snug: 1.375;
-  --leading-normal: 1.5;
-  --leading-relaxed: 1.625;
-  --leading-loose: 2;
-  --leading-3: 12px;
-  --leading-4: 16px;
-  --leading-5: 20px;
-  --leading-6: 24px;
-  --leading-7: 28px;
-  --leading-8: 32px;
-  --leading-9: 36px;
-  --leading-10: 40px;
-
-  /* ---- Columns ---- */
-  --columns-auto: auto;
-  --columns-1: 1;
-  --columns-2: 2;
-  --columns-3: 3;
-  --columns-4: 4;
-  --columns-5: 5;
-  --columns-6: 6;
-  --columns-7: 7;
-  --columns-8: 8;
-  --columns-9: 9;
-  --columns-10: 10;
-  --columns-11: 11;
-  --columns-12: 12;
-  --columns-3xs: 256px;
-  --columns-2xs: 288px;
-  --columns-xs: 320px;
-  --columns-sm: 384px;
-  --columns-md: 448px;
-  --columns-lg: 512px;
-  --columns-xl: 576px;
-  --columns-2xl: 672px;
-  --columns-3xl: 768px;
-  --columns-4xl: 896px;
-  --columns-5xl: 1024px;
-  --columns-6xl: 1152px;
-  --columns-7xl: 1280px;
-  --columns-8xl: 1440px;
-
-  /* ---- Max Width ---- */
-  --max-width-none: none;
-  --max-width-0: 0px;
-  --max-width-xs: 320px;
-  --max-width-sm: 384px;
-  --max-width-md: 448px;
-  --max-width-lg: 512px;
-  --max-width-xl: 576px;
-  --max-width-2xl: 672px;
-  --max-width-3xl: 768px;
-  --max-width-4xl: 896px;
-  --max-width-5xl: 1024px;
-  --max-width-6xl: 1152px;
-  --max-width-7xl: 1280px;
-  --max-width-8xl: 90rem;
-  --max-width-full: 100%;
-  --max-width-min: min-content;
-  --max-width-max: max-content;
-  --max-width-fit: fit-content;
-  --max-width-prose: 65ch;
-
-  /* ---- Screens ---- */
-  --breakpoint-xxs: 373px;
-  --breakpoint-xs: 427px;
-
-  /* ---- Containers ---- */
-  --container-xxs: 373px;
-  --container-xs: 427px;
-
-  /* ---- Box Shadow (custom) ---- */
-  --shadow-invert-sm: 0 -1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-invert: 0 -3px 5px 1px rgb(0 0 0 / 0.03), 0 -2px 4px 2px rgb(0 0 0 / 0.03);
-  --shadow-invert-md: 0 -4px 6px 1px rgb(0 0 0 / 0.07), 0 -2px 4px 2px rgb(0 0 0 / 0.07);
-  --shadow-invert-lg: 0 -10px 15px 3px rgb(0 0 0 / 0.1), 0 -4px 6px 4px rgb(0 0 0 / 0.1);
-  --shadow-invert-xl: 0 -20px 25px 5px rgb(0 0 0 / 0.1), 0 -8px 10px 6px rgb(0 0 0 / 0.1);
-  --shadow-invert-2xl: 0 -25px 50px 12px rgb(0 0 0 / 0.25);
-
-  /* ---- Keyframes ---- */
-  --animate-slide: slide 30s linear infinite;
-  --animate-marquee1: marquee1 30s linear infinite;
-  --animate-marquee2: marquee2 30s linear infinite;
-  --animate-circle: circle 8.1s linear;
-  --animate-dot: dot 8.1s linear;
-  --animate-typewriter: typewriter 0.5s linear infinite;
-  --animate-pulse-bg: pulse-bg 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-
-  /* ---- Colors ---- */
-  /* v4 uses CSS color-mix for opacity — define base colors as rgb() */
-  --color-theme-trigger-bg: rgb(var(--lx-color-trigger-bg));
-  --color-theme-trigger-text: rgb(var(--lx-color-trigger-text));
-  --color-theme-bg: rgb(var(--lx-color-bg));
-  --color-theme-text: rgb(var(--lx-color-text));
-  --color-theme-button-bg: rgb(var(--lx-color-button-bg));
-  --color-theme-button-text: rgb(var(--lx-color-button-text));
-}
-
-@keyframes slide {
-  0%, 100% { transform: translate3d(0, 0, 0); }
-  100% { transform: translate3d(-50%, 0, 0); }
-}
-
-@keyframes marquee1 {
-  0%, 100% { transform: translate3d(0, 0, 0); }
-  100% { transform: translate3d(-100%, 0, 0); }
-}
-
-@keyframes marquee2 {
-  0%, 100% { transform: translate3d(100%, 0, 0); }
-  100% { transform: translate3d(0, 0, 0); }
-}
-
-@keyframes circle {
-  0% { stroke-dashoffset: 90; }
-  100% { stroke-dashoffset: 0; }
-}
-
-@keyframes dot {
-  0%, 95% { fill: transparent; stroke: currentColor; stroke-opacity: 0.1; }
-  100% { fill: currentColor; stroke: transparent; stroke-opacity: 0; }
-}
-
-@keyframes typewriter {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0; }
-}
-
-@keyframes pulse-bg {
-  50% { --tw-bg-opacity: 0.5; }
-}
-
-/* --- Custom Variants (replaces addVariant calls) --- */
-@custom-variant svg (& svg);
-@custom-variant hfa (&:hover, &:focus, &:active);
-@custom-variant hfw (&:hover, &:focus-visible, &:focus-within);
-@custom-variant hfwa (&:hover, &:focus-visible, &:focus-within, &:active);
-@custom-variant hfwaa (&:hover, &:focus-visible, &:focus-within, &:active, &.active);
-@custom-variant hfva (&:hover, &:focus, &:focus-visible, &:active);
-@custom-variant ha (&:hover, &:active);
-@custom-variant hf (&:hover, &:focus-visible);
-@custom-variant fa (&:focus, &:active);
-@custom-variant f (&:focus);
-@custom-variant fw (&:focus-within);
-@custom-variant fv (&:focus-visible);
-@custom-variant h (&:hover);
-@custom-variant d (.dark &);
-@custom-variant ac (&.active);
-@custom-variant b (&::before);
-@custom-variant a (&::after);
-@custom-variant not-prose (:not(.prose &)&);
-@custom-variant hfaa (&:hover, &:focus, &:active, &.active);
-@custom-variant hfvaa (&:hover, &:focus, &:focus-visible, &:active, &.active);
-@custom-variant group-hfa (.group:hover &, .group:focus &, .group:active &);
-@custom-variant group-hf (.group:hover &, .group:focus &);
-@custom-variant group-ac (.group.active &);
-@custom-variant group-hfva (.group:hover &, .group:focus-visible &, .group:active &);
-@custom-variant group-hfwa (.group:hover &, .group:focus-visible &, .group:focus-within &, .group:active &);
-@custom-variant group-hfw (.group:hover &, .group:focus-visible &, .group:focus-within &);
-@custom-variant peer-hfwa (.peer:hover ~ &, .peer:focus-visible ~ &, .peer:focus-within ~ &, .peer:active ~ &);
-@custom-variant peer-fw (.peer:focus-within ~ &);
-
-/* --- Dark mode as class-based --- */
-@custom-variant dark (&:where(.dark *));
-
-/* --- Custom Utilities (replaces addUtilities calls) --- */
-@utility shape-geometric-precision {
-  shape-rendering: geometricPrecision;
-}
-
-@utility open-quote {
-  content: open-quote;
-}
-
-@utility close-quote {
-  content: close-quote;
-}
-
-@utility leading-0 {
-  line-height: 0;
-}
-
-@utility animation-pause {
-  animation-play-state: paused;
-}
-
-@utility animation-play {
-  animation-play-state: running;
-}
-
-/* --- Dynamic Utilities --- */
-
-/* top-spacing: top = var(--spacing-top-bar-spacing) + spacing value */
-@utility top-spacing-* {
-  top: calc(var(--spacing-top-bar) + --value(--spacing-*));
-  top: calc(var(--spacing-top-bar) + --value([length]));
-}
-
-/* auto-col-flow loaded via JS plugin for complex logic */
-@plugin "./plugins/auto-col-flow.js";