emily-css 1.2.7 → 1.2.9

package/src/init.js

@@ -1,812 +1,1011 @@
-const fs = require("fs");
-const path = require("path");
-const crossSpawn = require("cross-spawn");
-const { Select, Input, Confirm } = require("enquirer");
-const chalk = require("chalk");
-const ora = require("ora");
-const boxen = require("boxen");
-const { DEFAULT_PURGE_IGNORE, PURGE_EXTENSIONS } = require("./constants.js");
-
-// ============================================================================
-// CONSTANTS
-// ============================================================================
-
-const COLOUR_PRESETS = {
-  primary: [
-    { value: "custom", label: "Enter your own hex" },
-    { value: "#DB2777", label: "Emily Pink" },
-    { value: "#2563EB", label: "Blue" },
-    { value: "#028090", label: "Teal" },
-    { value: "#114B5F", label: "Deep Teal" },
-    { value: "#15803D", label: "Green" },
-    { value: "#7C3AED", label: "Purple" },
-    { value: "#E05C00", label: "Burnt Orange" },
-  ],
-  secondary: [
-    { value: "custom", label: "Enter your own hex" },
-    { value: "#2563EB", label: "Blue" },
-    { value: "#028090", label: "Teal" },
-    { value: "#7C3AED", label: "Purple" },
-    { value: "#DB2777", label: "Emily Pink" },
-    { value: "#F59E0B", label: "Amber" },
-    { value: "#57534E", label: "Warm Grey" },
-  ],
-  success: [
-    { value: "#017F65", label: "Accessible Green (recommended)" },
-    { value: "#15803D", label: "Forest Green" },
-    { value: "custom", label: "Enter your own hex" },
-  ],
-  warning: [
-    { value: "#FFC107", label: "Amber (recommended)" },
-    { value: "#F59E0B", label: "Orange Amber" },
-    { value: "custom", label: "Enter your own hex" },
-  ],
-  error: [
-    { value: "#B20000", label: "Accessible Red (recommended)" },
-    { value: "#DC2626", label: "Red" },
-    { value: "custom", label: "Enter your own hex" },
-  ],
-};
-
-const FONT_OPTIONS = [
-  { name: "lexend", message: "Lexend (clear, accessible - recommended)" },
-  { name: "inter", message: "Inter (clean, widely used)" },
-  { name: "dm-sans", message: "DM Sans (modern, geometric)" },
-  { name: "nunito", message: "Nunito (friendly, rounded)" },
-  { name: "atkinson", message: "Atkinson Hyperlegible (maximum legibility)" },
-  { name: "system", message: "System sans-serif (no download required)" },
-];
-
-// ============================================================================
-// HELPERS
-// ============================================================================
-
-function isValidHex(hex) {
-  return /^#[0-9A-F]{6}$/i.test(hex);
-}
-
-function colourSwatch(hex) {
-  return chalk.hex(hex)("■");
-}
-
-async function askHex(promptName, message, initial) {
-  const value = await new Input({
-    name: promptName,
-    message,
-    initial: initial || "#000000",
-    validate(value) {
-      return isValidHex(value)
-        ? true
-        : "Enter a valid hex colour, e.g. #0077B6";
-    },
-  }).run();
-
-  return value.toUpperCase();
-}
-
-async function askColourFromPresets(label, presets, defaultHex) {
-  const choices = presets.map(function (opt) {
-    if (opt.value === "custom") {
-      return { name: "custom", message: "Enter your own hex" };
-    }
-
-    return {
-      name: opt.value,
-      message:
-        colourSwatch(opt.value) + " " + opt.label + " " + chalk.gray(opt.value),
-    };
-  });
-
-  const selected = await new Select({
-    name: label,
-    message: label + " colour",
-    choices,
-  }).run();
-
-  if (selected !== "custom") return selected.toUpperCase();
-
-  return askHex(label + "Custom", "Enter " + label + " hex", defaultHex);
-}
-
-function hasFile(fileName) {
-  return fs.existsSync(path.join(process.cwd(), fileName));
-}
-
-function readPackageJson() {
-  const packagePath = path.join(process.cwd(), "package.json");
-
-  if (!fs.existsSync(packagePath)) return null;
-
-  try {
-    return JSON.parse(fs.readFileSync(packagePath, "utf8"));
-  } catch {
-    return null;
-  }
-}
-
-function hasDependency(packageJson, dependencyName) {
-  if (!packageJson) return false;
-
-  return Boolean(
-    packageJson.dependencies?.[dependencyName] ||
-    packageJson.devDependencies?.[dependencyName],
-  );
-}
-
-function titleCasePackageName(name) {
-  return name.replace(/-/g, " ").replace(/\b\w/g, function (c) {
-    return c.toUpperCase();
-  });
-}
-
-function addEmilyScriptsToPackageJson() {
-  const packagePath = path.join(process.cwd(), "package.json");
-
-  if (!fs.existsSync(packagePath)) return false;
-
-  try {
-    const packageJson = JSON.parse(fs.readFileSync(packagePath, "utf8"));
-
-    packageJson.scripts = packageJson.scripts || {};
-
-    let changed = false;
-
-    const scripts = {
-      "emily:build": "emily-css build",
-      "emily:watch": "emily-css watch",
-      "emily:doctor": "emily-css doctor",
-      "emily:migrate": "emily-css migrate",
-      "emily:info": "emily-css info",
-      "emily:manifest": "emily-css manifest",
-      "emily:version": "emily-css version",
-      "emily:help": "emily-css help",
-      "emily:showcase": "emily-css showcase",
-    };
-
-    for (const [key, value] of Object.entries(scripts)) {
-      if (!packageJson.scripts[key]) {
-        packageJson.scripts[key] = value;
-        changed = true;
-      }
-    }
-
-    if (changed) {
-      fs.writeFileSync(
-        packagePath,
-        JSON.stringify(packageJson, null, 2) + "\n",
-      );
-    }
-
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-// ============================================================================
-// PROJECT DETECTION
-// ============================================================================
-
-function detectProject() {
-  const packageJson = readPackageJson();
-
-  if (
-    hasFile("nuxt.config.ts") ||
-    hasFile("nuxt.config.js") ||
-    hasDependency(packageJson, "nuxt")
-  ) {
-    return {
-      name: "Nuxt",
-      sourceDir: ".",
-      outputPath: "public/emily.min.css",
-      sourceGlobs: [
-        "./components/**/*.{vue,js,ts}",
-        "./pages/**/*.vue",
-        "./layouts/**/*.vue",
-        "./app.vue",
-      ],
-      linkHint: '<link rel="stylesheet" href="/emily.min.css">',
-    };
-  }
-
-  if (hasDependency(packageJson, "next")) {
-    return {
-      name: "Next.js",
-      sourceDir: ".",
-      outputPath: "public/emily.min.css",
-      sourceGlobs: [
-        "./app/**/*.{js,jsx,ts,tsx}",
-        "./pages/**/*.{js,jsx,ts,tsx}",
-        "./components/**/*.{js,jsx,ts,tsx}",
-        "./src/**/*.{js,jsx,ts,tsx}",
-      ],
-      linkHint: '<link rel="stylesheet" href="/emily.min.css">',
-    };
-  }
-
-  if (hasDependency(packageJson, "react")) {
-    return {
-      name: "React",
-      sourceDir: "./src",
-      outputPath: hasFile("public")
-        ? "public/emily.min.css"
-        : "dist/emily.min.css",
-      sourceGlobs: [
-        "./src/**/*.{js,jsx,ts,tsx}",
-        "./components/**/*.{js,jsx,ts,tsx}",
-      ],
-      linkHint: hasFile("public")
-        ? '<link rel="stylesheet" href="/emily.min.css">'
-        : '<link rel="stylesheet" href="./dist/emily.min.css">',
-    };
-  }
-
-  if (
-    hasDependency(packageJson, "vue") ||
-    hasFile("vite.config.ts") ||
-    hasFile("vite.config.js")
-  ) {
-    return {
-      name: "Vue/Vite",
-      sourceDir: "./src",
-      outputPath: "public/emily.min.css",
-      sourceGlobs: ["./src/**/*.{vue,js,ts}"],
-      linkHint: '<link rel="stylesheet" href="/emily.min.css">',
-    };
-  }
-
-  if (hasDependency(packageJson, "astro") || hasFile("astro.config.mjs")) {
-    return {
-      name: "Astro",
-      sourceDir: "./src",
-      outputPath: "public/emily.min.css",
-      sourceGlobs: ["./src/**/*.{astro,html,js,ts,vue,jsx,tsx,svelte}"],
-      linkHint: '<link rel="stylesheet" href="/emily.min.css">',
-    };
-  }
-
-  const rootFiles = fs.readdirSync(process.cwd());
-  const hasDrupalInfoFile = rootFiles.some(function (file) {
-    return file.endsWith(".info.yml");
-  });
-
-  if (
-    hasDrupalInfoFile ||
-    fs.existsSync(path.join(process.cwd(), "web/core"))
-  ) {
-    return {
-      name: "Drupal",
-      sourceDir: ".",
-      outputPath: "dist/emily.min.css",
-      sourceGlobs: [
-        "./web/themes/custom/**/*.{twig,js,ts}",
-        "./templates/**/*.html.twig",
-        "./components/**/*.twig",
-        "./**/*.theme",
-      ],
-      linkHint: "Attach dist/emily.min.css through your theme library YAML.",
-    };
-  }
-
-  return {
-    name: "Static/Generic",
-    sourceDir: ".",
-    outputPath: "dist/emily.min.css",
-    sourceGlobs: [
-      "./**/*.{html,htm,twig,njk,liquid,hbs,php,astro,svelte,vue,blade.php,jinja,jinja2,j2}",
-    ],
-    linkHint: '<link rel="stylesheet" href="./dist/emily.min.css">',
-  };
-}
-
-// ============================================================================
-// CONFIG BUILDER
-// ============================================================================
-
-function createDefaultConfig({
-  name,
-  colours,
-  headingFont,
-  bodyFont,
-  baseUnit,
-  detectedProject,
-}) {
-  return {
-    name,
-    description: name + " design system",
-
-    baseUnit: baseUnit + "px",
-    baseFontSize: "16px",
-
-    fontFamily: {
-      heading: headingFont,
-      body: bodyFont,
-    },
-
-    customFonts: [],
-
-    output: {
-      css: detectedProject.outputPath,
-      fullCss: "dist/emily.css",
-    },
-
-    manifest: true,
-
-    colours,
-
-    semanticColours: {
-      dark: "#1A1A1A",
-      light: "#FAFAFA",
-    },
-
-    purge: {
-      projectType: detectedProject.name,
-      sourceDir: detectedProject.sourceDir,
-      sourceGlobs: detectedProject.sourceGlobs,
-      ignore: DEFAULT_PURGE_IGNORE,
-      extensions: PURGE_EXTENSIONS,
-    },
-
-    breakpoints: {
-      sm: "640px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1280px",
-      "2xl": "1536px",
-    },
-
-    spacing: {
-      scale: {
-        0: "0px",
-        px: "1px",
-        0.5: "0.125rem",
-        1: "0.25rem",
-        1.5: "0.375rem",
-        2: "0.5rem",
-        2.5: "0.625rem",
-        3: "0.75rem",
-        3.5: "0.875rem",
-        4: "1rem",
-        5: "1.25rem",
-        6: "1.5rem",
-        7: "1.75rem",
-        8: "2rem",
-        9: "2.25rem",
-        10: "2.5rem",
-        11: "2.75rem",
-        12: "3rem",
-        14: "3.5rem",
-        16: "4rem",
-        20: "5rem",
-        24: "6rem",
-        28: "7rem",
-        32: "8rem",
-        36: "9rem",
-        40: "10rem",
-        44: "11rem",
-        48: "12rem",
-        52: "13rem",
-        56: "14rem",
-        60: "15rem",
-        64: "16rem",
-        72: "18rem",
-        80: "20rem",
-        96: "24rem",
-      },
-
-      borderWidths: [0, 2, 4, 8],
-
-      borderRadius: {
-        none: "0",
-        sm: "4px",
-        base: "8px",
-        md: "12px",
-        lg: "16px",
-        xl: "20px",
-        "2xl": "24px",
-        "3xl": "32px",
-        full: "9999px",
-      },
-    },
-
-    typography: {
-      lineHeightRatio: 1.5,
-
-      fontWeights: {
-        light: 300,
-        normal: 400,
-        medium: 500,
-        semibold: 600,
-        bold: 700,
-      },
-
-      fontSizes: [
-        { name: "xs", value: "12px", lineHeight: 1.5 },
-        { name: "sm", value: "14px", lineHeight: 1.5 },
-        { name: "base", value: "16px", lineHeight: 1.6 },
-        { name: "lg", value: "18px", lineHeight: 1.6 },
-        { name: "xl", value: "20px", lineHeight: 1.6 },
-        { name: "2xl", value: "24px", lineHeight: 1.4 },
-        { name: "3xl", value: "30px", lineHeight: 1.4 },
-        { name: "4xl", value: "36px", lineHeight: 1.3 },
-        { name: "5xl", value: "48px", lineHeight: 1.15 },
-        { name: "6xl", value: "60px", lineHeight: 1.1 },
-        { name: "7xl", value: "72px", lineHeight: 1.05 },
-        { name: "8xl", value: "96px", lineHeight: 1 },
-        { name: "9xl", value: "128px", lineHeight: 1 },
-      ],
-    },
-
-    shadows: {
-      sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
-      base: "0 4px 6px rgba(0, 0, 0, 0.1)",
-      md: "0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)",
-      lg: "0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)",
-      xl: "0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)",
-      "2xl": "0 25px 50px rgba(0, 0, 0, 0.25)",
-      inner: "inset 0 2px 4px rgba(0, 0, 0, 0.06)",
-      none: "none",
-    },
-
-    transitions: {
-      fast: "100ms",
-      base: "200ms",
-      slow: "300ms",
-      timing: "cubic-bezier(0.4, 0, 0.2, 1)",
-    },
-
-    zIndex: {
-      auto: "auto",
-      0: "0",
-      10: "10",
-      20: "20",
-      30: "30",
-      40: "40",
-      50: "50",
-      dropdown: "1000",
-      sticky: "1020",
-      fixed: "1030",
-      modal: "1040",
-      popover: "1060",
-      tooltip: "1070",
-    },
-
-    opacity: [0, 5, 10, 25, 50, 75, 90, 95, 100],
-  };
-}
-
-// ============================================================================
-// INIT
-// ============================================================================
-
-async function init() {
-  console.log(
-    chalk.bold.magenta("\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"),
-  );
-  console.log(chalk.bold.magenta("  EmilyUI Setup"));
-  console.log(
-    chalk.bold.magenta("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n"),
-  );
-
-  try {
-    const spinner = ora("Analysing project structure...").start();
-    const detectedProject = detectProject();
-    spinner.succeed("Detected project: " + chalk.cyan(detectedProject.name));
-
-    const packageJsonData = readPackageJson();
-    const pkgName =
-      packageJsonData && packageJsonData.name
-        ? titleCasePackageName(packageJsonData.name)
-        : "My Design System";
-
-    const projectName = await new Input({
-      name: "projectName",
-      message: "Project name",
-      initial: pkgName,
-      validate: function (value) {
-        return value.trim() ? true : "Project name is required";
-      },
-    }).run();
-
-    if (!projectName || !projectName.trim()) {
-      console.log(chalk.red("\nProject name is required.\n"));
-      process.exit(1);
-    }
-
-    // =========================================================================
-    // COLOURS
-    // =========================================================================
-
-    console.log(chalk.bold("\n" + chalk.magenta("→") + " Brand colours"));
-
-    const brand = await askColourFromPresets(
-      "brand",
-      COLOUR_PRESETS.primary,
-      "#DB2777",
-    );
-    const accent = await askColourFromPresets(
-      "accent",
-      COLOUR_PRESETS.secondary,
-      "#2563EB",
-    );
-
-    console.log(
-      chalk.gray(
-        "\n  Button colour tokens will use your brand colours by default:",
-      ),
-    );
-    console.log(chalk.gray("  - btn-primary = brand"));
-    console.log(chalk.gray("  - btn-secondary = accent"));
-
-    console.log(chalk.bold("\n" + chalk.magenta("→") + " Utility colours"));
-    console.log(
-      chalk.gray(
-        "  Defaults shown. Press enter to accept or pick an alternative.\n",
-      ),
-    );
-
-    const success = await askColourFromPresets(
-      "success",
-      COLOUR_PRESETS.success,
-      "#017F65",
-    );
-    const warning = await askColourFromPresets(
-      "warning",
-      COLOUR_PRESETS.warning,
-      "#FFC107",
-    );
-    const error = await askColourFromPresets(
-      "error",
-      COLOUR_PRESETS.error,
-      "#B20000",
-    );
-
-    const colours = {
-      brand,
-      accent,
-      "btn-primary": brand,
-      "btn-secondary": accent,
-      success,
-      warning,
-      error,
-      neutral: "#57534E",
-    };
-
-    let addingMore = true;
-
-    while (addingMore) {
-      const wantsMore = await new Confirm({
-        name: "addMore",
-        message: "Add another utility colour?",
-        initial: false,
-      }).run();
-
-      if (!wantsMore) {
-        addingMore = false;
-        break;
-      }
-
-      const customName = await new Input({
-        name: "customName",
-        message: "Colour name (e.g. accent, highlight, brand-dark)",
-        validate: function (value) {
-          const trimmed = value.trim();
-
-          if (!trimmed) return "Name is required";
-          if (!/^[a-z][a-z0-9-]*$/.test(trimmed)) {
-            return "Use lowercase letters, numbers, and hyphens only";
-          }
-          if (colours[trimmed]) return '"' + trimmed + '" is already defined';
-
-          return true;
-        },
-      }).run();
-
-      colours[customName.trim()] = await askHex(
-        "hex-" + customName,
-        "Hex for " + customName,
-        "#000000",
-      );
-    }
-
-    // =========================================================================
-    // TYPOGRAPHY
-    // =========================================================================
-
-    console.log(chalk.bold("\n" + chalk.magenta("→") + " Typography"));
-
-    const headingFont = await new Select({
-      name: "headingFont",
-      message: "Heading font",
-      choices: FONT_OPTIONS,
-      initial: 0,
-    }).run();
-
-    const bodyFont = await new Select({
-      name: "bodyFont",
-      message: "Body font",
-      choices: FONT_OPTIONS,
-      initial: 1,
-    }).run();
-
-    // =========================================================================
-    // SPACING
-    // =========================================================================
-
-    const baseUnitRaw = await new Input({
-      name: "baseUnit",
-      message: "Base spacing unit in px (label/documentation only)",
-      initial: "18",
-      validate: function (value) {
-        const parsed = Number.parseInt(value, 10);
-
-        if (Number.isNaN(parsed) || parsed <= 0) {
-          return "Must be a positive number.";
-        }
-
-        return true;
-      },
-    }).run();
-
-    const baseUnit = Number.parseInt(baseUnitRaw, 10);
-
-    // =========================================================================
-    // PURGE / OUTPUT
-    // =========================================================================
-
-    console.log(chalk.bold("\n" + chalk.magenta("→") + " Project files"));
-
-    console.log(
-      chalk.gray(
-        "  Detected " +
-          detectedProject.name +
-          ". EmilyCSS will scan the recommended files automatically.",
-      ),
-    );
-
-    detectedProject.sourceGlobs.forEach(function (glob) {
-      console.log(chalk.gray("  - " + glob));
-    });
-
-    console.log(chalk.bold("\n" + chalk.magenta("→") + " CSS output"));
-    console.log(chalk.gray("  Output: " + detectedProject.outputPath));
-
-    // =========================================================================
-    // BUILD
-    // =========================================================================
-
-    const config = createDefaultConfig({
-      name: projectName.trim(),
-      colours,
-      headingFont,
-      bodyFont,
-      baseUnit,
-      detectedProject,
-    });
-
-    const configPath = path.join(process.cwd(), "emily.config.json");
-    fs.writeFileSync(configPath, JSON.stringify(config, null, 2) + "\n");
-
-    console.log("");
-
-    const buildSpinner = ora("Building EmilyUI CSS...").start();
-
-    const build = crossSpawn("npx", ["emily-css", "build"], {
-      cwd: process.cwd(),
-      stdio: "pipe",
-      shell: process.platform === "win32",
-    });
-
-    let stderr = "";
-
-    build.stderr.on("data", function (data) {
-      stderr += data.toString();
-    });
-
-    build.on("close", async function (code) {
-      if (code === 0) {
-        buildSpinner.succeed("EmilyUI CSS built successfully.");
-
-        const scriptsAdded = addEmilyScriptsToPackageJson();
-
-        console.log(
-          "\n" +
-            boxen(
-              chalk.green.bold("Setup complete") +
-                "\n\nConfig:   " +
-                chalk.cyan("emily.config.json") +
-                "\nOutput:   " +
-                chalk.cyan(config.output.css) +
-                "\nProject:  " +
-                chalk.cyan(detectedProject.name) +
-                "\nScan:\n  " +
-                chalk.cyan(config.purge.sourceGlobs.join("\n  ")) +
-                "\n\nNext: add this stylesheet to your project:" +
-                "\n" +
-                chalk.yellow("  " + detectedProject.linkHint) +
-                (scriptsAdded
-                  ? "\n\nScripts added:\n" +
-                    chalk.cyan("  npm run emily:build\n") +
-                    chalk.cyan("  npm run emily:watch\n") +
-                    chalk.cyan("  npm run emily:doctor\n") +
-                    chalk.cyan("  npm run emily:migrate\n") +
-                    chalk.cyan("  npm run emily:info\n") +
-                    chalk.cyan("  npm run emily:manifest\n") +
-                    chalk.cyan("  npm run emily:version\n") +
-                    chalk.cyan("  npm run emily:showcase\n") +
-                    chalk.cyan("  npm run emily:help")
-                  : ""),
-              {
-                padding: 1,
-                margin: 1,
-                borderStyle: "round",
-                borderColor: "magenta",
-              },
-            ),
-        );
-
-        const startWatch = await new Confirm({
-          name: "startWatch",
-          message: "Start the file watcher now?",
-          initial: true,
-        }).run();
-
-        if (startWatch) {
-          console.log(
-            chalk.cyan("\nStarting watcher. Press Ctrl+C to stop.\n"),
-          );
-
-          const watcher = crossSpawn("npx", ["emily-css", "watch"], {
-            cwd: process.cwd(),
-            stdio: "inherit",
-            shell: process.platform === "win32",
-          });
-
-          watcher.on("close", function (c) {
-            process.exit(c || 0);
-          });
-        } else {
-          console.log(
-            chalk.gray(
-              "\nRun the watcher any time with: npm run emily:watch\n",
-            ),
-          );
-          process.exit(0);
-        }
-
-        return;
-      }
-
-      buildSpinner.fail("Automatic build failed.");
-      console.log("\nYour config was created, but CSS was not built.");
-      console.log("\nRun manually:\n");
-      console.log(chalk.cyan("  npx emily-css build"));
-
-      if (stderr.trim()) {
-        console.log(chalk.gray("\nBuild error:\n"));
-        console.log(stderr.trim());
-      }
-
-      process.exit(1);
-    });
-
-    build.on("error", function (error) {
-      buildSpinner.fail("Automatic build failed.");
-      console.log("\nYour config was created, but CSS was not built.");
-      console.log("Reason: " + error.message);
-      console.log("\nRun manually:\n");
-      console.log(chalk.cyan("  npx emily-css build\n"));
-      process.exit(1);
-    });
-  } catch (error) {
-    console.log(chalk.red("\nSetup cancelled or failed."));
-
-    if (error && error.message) {
-      console.log(chalk.gray(error.message));
-    }
-
-    process.exit(1);
-  }
-}
-
-init();
+const fs = require("fs");
+const path = require("path");
+const crossSpawn = require("cross-spawn");
+const { Select, Input, Confirm } = require("enquirer");
+const chalk = require("chalk");
+const ora = require("ora");
+const boxen = require("boxen");
+const { DEFAULT_PURGE_IGNORE, PURGE_EXTENSIONS } = require("./constants.js");
+
+// ============================================================================
+// CONSTANTS
+// ============================================================================
+
+const COLOUR_PRESETS = {
+  primary: [
+    { value: "custom", label: "Enter your own hex" },
+    { value: "#DB2777", label: "Emily Pink" },
+    { value: "#2563EB", label: "Blue" },
+    { value: "#028090", label: "Teal" },
+    { value: "#114B5F", label: "Deep Teal" },
+    { value: "#15803D", label: "Green" },
+    { value: "#7C3AED", label: "Purple" },
+    { value: "#E05C00", label: "Burnt Orange" },
+  ],
+  secondary: [
+    { value: "custom", label: "Enter your own hex" },
+    { value: "#2563EB", label: "Blue" },
+    { value: "#028090", label: "Teal" },
+    { value: "#7C3AED", label: "Purple" },
+    { value: "#DB2777", label: "Emily Pink" },
+    { value: "#F59E0B", label: "Amber" },
+    { value: "#57534E", label: "Warm Grey" },
+  ],
+  success: [
+    { value: "#017F65", label: "Accessible Green (recommended)" },
+    { value: "#15803D", label: "Forest Green" },
+    { value: "custom", label: "Enter your own hex" },
+  ],
+  warning: [
+    { value: "#FFC107", label: "Amber (recommended)" },
+    { value: "#F59E0B", label: "Orange Amber" },
+    { value: "custom", label: "Enter your own hex" },
+  ],
+  error: [
+    { value: "#B20000", label: "Accessible Red (recommended)" },
+    { value: "#DC2626", label: "Red" },
+    { value: "custom", label: "Enter your own hex" },
+  ],
+};
+
+const FONT_OPTIONS = [
+  { name: "lexend", message: "Lexend (clear, accessible - recommended)" },
+  { name: "inter", message: "Inter (clean, widely used)" },
+  { name: "dm-sans", message: "DM Sans (modern, geometric)" },
+  { name: "nunito", message: "Nunito (friendly, rounded)" },
+  { name: "atkinson", message: "Atkinson Hyperlegible (maximum legibility)" },
+  { name: "system", message: "System sans-serif (no download required)" },
+];
+const CORE_COLOUR_KEYS = new Set([
+  "brand",
+  "accent",
+  "btn-primary",
+  "btn-secondary",
+  "success",
+  "warning",
+  "error",
+  "neutral",
+]);
+
+// ============================================================================
+// HELPERS
+// ============================================================================
+
+function isValidHex(hex) {
+  return /^#[0-9A-F]{6}$/i.test(hex);
+}
+
+function isPlainObject(value) {
+  return (
+    value !== null &&
+    typeof value === "object" &&
+    !Array.isArray(value)
+  );
+}
+
+function mergeWithDefaults(defaults, existing) {
+  if (!isPlainObject(defaults)) {
+    return existing === undefined ? defaults : existing;
+  }
+
+  const output = { ...defaults };
+
+  if (!isPlainObject(existing)) {
+    return output;
+  }
+
+  Object.keys(existing).forEach((key) => {
+    if (isPlainObject(defaults[key]) && isPlainObject(existing[key])) {
+      output[key] = mergeWithDefaults(defaults[key], existing[key]);
+      return;
+    }
+
+    output[key] = existing[key];
+  });
+
+  return output;
+}
+
+function colourSwatch(hex) {
+  return chalk.hex(hex)("■");
+}
+
+function normaliseHex(value) {
+  return typeof value === "string" && isValidHex(value)
+    ? value.toUpperCase()
+    : null;
+}
+
+async function askHex(promptName, message, initial) {
+  const value = await new Input({
+    name: promptName,
+    message,
+    initial: initial || "#000000",
+    validate(value) {
+      return isValidHex(value)
+        ? true
+        : "Enter a valid hex colour, e.g. #0077B6";
+    },
+  }).run();
+
+  return value.toUpperCase();
+}
+
+async function askColourFromPresets(label, presets, defaultHex, currentHex) {
+  const defaultHexValue = normaliseHex(defaultHex);
+  const currentHexValue = normaliseHex(currentHex);
+
+  const choices = presets.map(function (opt) {
+    if (opt.value === "custom") {
+      return { name: "custom", message: "Enter your own hex" };
+    }
+
+    const upperHex = String(opt.value).toUpperCase();
+    return {
+      name: upperHex,
+      message:
+        colourSwatch(upperHex) + " " + opt.label + " " + chalk.gray(upperHex),
+    };
+  });
+
+  let initial = Math.max(
+    0,
+    choices.findIndex((choice) => choice.name === "custom"),
+  );
+
+  if (currentHexValue) {
+    const currentIndex = choices.findIndex(
+      (choice) => choice.name === currentHexValue,
+    );
+
+    if (currentIndex !== -1) {
+      initial = currentIndex;
+    } else {
+      choices.unshift({
+        name: "__current__",
+        message:
+          "Keep current " +
+          label +
+          " " +
+          colourSwatch(currentHexValue) +
+          " " +
+          chalk.gray(currentHexValue),
+      });
+      initial = 0;
+    }
+  } else if (defaultHexValue) {
+    const defaultIndex = choices.findIndex(
+      (choice) => choice.name === defaultHexValue,
+    );
+    if (defaultIndex !== -1) {
+      initial = defaultIndex;
+    }
+  }
+
+  const selected = await new Select({
+    name: label,
+    message: label + " colour",
+    choices,
+    initial,
+  }).run();
+
+  if (selected === "__current__" && currentHexValue) return currentHexValue;
+  if (selected !== "custom") return selected.toUpperCase();
+
+  const fallbackHex = currentHexValue || defaultHexValue || "#000000";
+  return askHex(label + "Custom", "Enter " + label + " hex", fallbackHex);
+}
+
+function hasFile(fileName) {
+  return fs.existsSync(path.join(process.cwd(), fileName));
+}
+
+function readPackageJson() {
+  const packagePath = path.join(process.cwd(), "package.json");
+
+  if (!fs.existsSync(packagePath)) return null;
+
+  try {
+    return JSON.parse(fs.readFileSync(packagePath, "utf8"));
+  } catch {
+    return null;
+  }
+}
+
+function readExistingConfig() {
+  const configPath = path.join(process.cwd(), "emily.config.json");
+
+  if (!fs.existsSync(configPath)) return null;
+
+  try {
+    return JSON.parse(fs.readFileSync(configPath, "utf8"));
+  } catch {
+    return null;
+  }
+}
+
+function getFontInitialIndex(fontKey, fallbackIndex) {
+  if (!fontKey || typeof fontKey !== "string") return fallbackIndex;
+  const normalised = fontKey.toLowerCase();
+  const index = FONT_OPTIONS.findIndex((option) => option.name === normalised);
+  return index === -1 ? fallbackIndex : index;
+}
+
+function getExistingAdditionalColours(existingColours) {
+  if (!isPlainObject(existingColours)) return {};
+
+  const additional = {};
+  Object.entries(existingColours).forEach(([name, value]) => {
+    if (CORE_COLOUR_KEYS.has(name)) return;
+    if (!/^[a-z][a-z0-9-]*$/.test(name)) return;
+
+    const upperHex = normaliseHex(value);
+    if (!upperHex) return;
+    additional[name] = upperHex;
+  });
+
+  return additional;
+}
+
+function getBaseUnitInitial(config) {
+  const rawBaseUnit = config && typeof config.baseUnit === "string"
+    ? config.baseUnit
+    : "";
+  const parsed = Number.parseInt(rawBaseUnit, 10);
+  if (Number.isNaN(parsed) || parsed <= 0) return "18";
+  return String(parsed);
+}
+
+function hasDependency(packageJson, dependencyName) {
+  if (!packageJson) return false;
+
+  return Boolean(
+    packageJson.dependencies?.[dependencyName] ||
+    packageJson.devDependencies?.[dependencyName],
+  );
+}
+
+function titleCasePackageName(name) {
+  return name.replace(/-/g, " ").replace(/\b\w/g, function (c) {
+    return c.toUpperCase();
+  });
+}
+
+function addEmilyScriptsToPackageJson() {
+  const packagePath = path.join(process.cwd(), "package.json");
+
+  if (!fs.existsSync(packagePath)) return false;
+
+  try {
+    const packageJson = JSON.parse(fs.readFileSync(packagePath, "utf8"));
+
+    packageJson.scripts = packageJson.scripts || {};
+
+    let changed = false;
+
+    const scripts = {
+      "emily:build": "emily-css build",
+      "emily:watch": "emily-css watch",
+      "emily:doctor": "emily-css doctor",
+      "emily:migrate": "emily-css migrate",
+      "emily:info": "emily-css info",
+      "emily:manifest": "emily-css manifest",
+      "emily:version": "emily-css version",
+      "emily:help": "emily-css help",
+      "emily:showcase": "emily-css showcase",
+    };
+
+    for (const [key, value] of Object.entries(scripts)) {
+      if (!packageJson.scripts[key]) {
+        packageJson.scripts[key] = value;
+        changed = true;
+      }
+    }
+
+    if (changed) {
+      fs.writeFileSync(
+        packagePath,
+        JSON.stringify(packageJson, null, 2) + "\n",
+      );
+    }
+
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// ============================================================================
+// PROJECT DETECTION
+// ============================================================================
+
+function detectProject() {
+  const packageJson = readPackageJson();
+
+  if (
+    hasFile("nuxt.config.ts") ||
+    hasFile("nuxt.config.js") ||
+    hasDependency(packageJson, "nuxt")
+  ) {
+    return {
+      name: "Nuxt",
+      sourceDir: ".",
+      outputPath: "public/emily.min.css",
+      sourceGlobs: [
+        "./components/**/*.{vue,js,ts}",
+        "./pages/**/*.vue",
+        "./layouts/**/*.vue",
+        "./app.vue",
+      ],
+      linkHint: '<link rel="stylesheet" href="/emily.min.css">',
+    };
+  }
+
+  if (hasDependency(packageJson, "next")) {
+    return {
+      name: "Next.js",
+      sourceDir: ".",
+      outputPath: "public/emily.min.css",
+      sourceGlobs: [
+        "./app/**/*.{js,jsx,ts,tsx}",
+        "./pages/**/*.{js,jsx,ts,tsx}",
+        "./components/**/*.{js,jsx,ts,tsx}",
+        "./src/**/*.{js,jsx,ts,tsx}",
+      ],
+      linkHint: '<link rel="stylesheet" href="/emily.min.css">',
+    };
+  }
+
+  if (hasDependency(packageJson, "react")) {
+    return {
+      name: "React",
+      sourceDir: "./src",
+      outputPath: hasFile("public")
+        ? "public/emily.min.css"
+        : "dist/emily.min.css",
+      sourceGlobs: [
+        "./src/**/*.{js,jsx,ts,tsx}",
+        "./components/**/*.{js,jsx,ts,tsx}",
+      ],
+      linkHint: hasFile("public")
+        ? '<link rel="stylesheet" href="/emily.min.css">'
+        : '<link rel="stylesheet" href="./dist/emily.min.css">',
+    };
+  }
+
+  if (
+    hasDependency(packageJson, "vue") ||
+    hasFile("vite.config.ts") ||
+    hasFile("vite.config.js")
+  ) {
+    return {
+      name: "Vue/Vite",
+      sourceDir: "./src",
+      outputPath: "public/emily.min.css",
+      sourceGlobs: ["./src/**/*.{vue,js,ts}"],
+      linkHint: '<link rel="stylesheet" href="/emily.min.css">',
+    };
+  }
+
+  if (hasDependency(packageJson, "astro") || hasFile("astro.config.mjs")) {
+    return {
+      name: "Astro",
+      sourceDir: "./src",
+      outputPath: "public/emily.min.css",
+      sourceGlobs: ["./src/**/*.{astro,html,js,ts,vue,jsx,tsx,svelte}"],
+      linkHint: '<link rel="stylesheet" href="/emily.min.css">',
+    };
+  }
+
+  const rootFiles = fs.readdirSync(process.cwd());
+  const hasDrupalInfoFile = rootFiles.some(function (file) {
+    return file.endsWith(".info.yml");
+  });
+
+  if (
+    hasDrupalInfoFile ||
+    fs.existsSync(path.join(process.cwd(), "web/core"))
+  ) {
+    return {
+      name: "Drupal",
+      sourceDir: ".",
+      outputPath: "dist/emily.min.css",
+      sourceGlobs: [
+        "./web/themes/custom/**/*.{twig,js,ts}",
+        "./templates/**/*.html.twig",
+        "./components/**/*.twig",
+        "./**/*.theme",
+      ],
+      linkHint: "Attach dist/emily.min.css through your theme library YAML.",
+    };
+  }
+
+  return {
+    name: "Static/Generic",
+    sourceDir: ".",
+    outputPath: "dist/emily.min.css",
+    sourceGlobs: [
+      "./**/*.{html,htm,twig,njk,liquid,hbs,php,astro,svelte,vue,blade.php,jinja,jinja2,j2}",
+    ],
+    linkHint: '<link rel="stylesheet" href="./dist/emily.min.css">',
+  };
+}
+
+// ============================================================================
+// CONFIG BUILDER
+// ============================================================================
+
+function createDefaultConfig({
+  name,
+  colours,
+  headingFont,
+  bodyFont,
+  baseUnit,
+  baseFontSize,
+  detectedProject,
+}) {
+  return {
+    name,
+    description: name + " design system",
+
+    baseUnit: baseUnit + "px",
+    baseFontSize: baseFontSize || "16px",
+
+    fontFamily: {
+      heading: headingFont,
+      body: bodyFont,
+    },
+
+    customFonts: [],
+
+    output: {
+      css: detectedProject.outputPath,
+      fullCss: "dist/emily.css",
+    },
+
+    manifest: true,
+
+    colours,
+
+    semanticColours: {
+      dark: "#1A1A1A",
+      light: "#FAFAFA",
+    },
+
+    purge: {
+      projectType: detectedProject.name,
+      sourceDir: detectedProject.sourceDir,
+      sourceGlobs: detectedProject.sourceGlobs,
+      ignore: DEFAULT_PURGE_IGNORE,
+      safelist: [
+        "bg-dark",
+        "text-dark",
+        "border-dark",
+        "fill-dark",
+        "bg-light",
+        "text-light",
+        "border-light",
+        "fill-light",
+      ],
+      extensions: PURGE_EXTENSIONS,
+    },
+
+    breakpoints: {
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px",
+      "2xl": "1536px",
+    },
+
+    spacing: {
+      scale: {
+        0: "0px",
+        px: "1px",
+        0.5: "0.125rem",
+        1: "0.25rem",
+        1.5: "0.375rem",
+        2: "0.5rem",
+        2.5: "0.625rem",
+        3: "0.75rem",
+        3.5: "0.875rem",
+        4: "1rem",
+        5: "1.25rem",
+        6: "1.5rem",
+        7: "1.75rem",
+        8: "2rem",
+        9: "2.25rem",
+        10: "2.5rem",
+        11: "2.75rem",
+        12: "3rem",
+        14: "3.5rem",
+        16: "4rem",
+        20: "5rem",
+        24: "6rem",
+        28: "7rem",
+        32: "8rem",
+        36: "9rem",
+        40: "10rem",
+        44: "11rem",
+        48: "12rem",
+        52: "13rem",
+        56: "14rem",
+        60: "15rem",
+        64: "16rem",
+        72: "18rem",
+        80: "20rem",
+        96: "24rem",
+      },
+
+      borderWidths: [0, 2, 4, 8],
+
+      borderRadius: {
+        none: "0",
+        sm: "4px",
+        base: "8px",
+        md: "12px",
+        lg: "16px",
+        xl: "20px",
+        "2xl": "24px",
+        "3xl": "32px",
+        full: "9999px",
+      },
+    },
+
+    typography: {
+      lineHeightRatio: 1.5,
+
+      fontWeights: {
+        light: 300,
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+      },
+
+      fontSizes: [
+        { name: "xs", value: "12px", lineHeight: 1.5 },
+        { name: "sm", value: "14px", lineHeight: 1.5 },
+        { name: "base", value: "16px", lineHeight: 1.6 },
+        { name: "lg", value: "18px", lineHeight: 1.6 },
+        { name: "xl", value: "20px", lineHeight: 1.6 },
+        { name: "2xl", value: "24px", lineHeight: 1.4 },
+        { name: "3xl", value: "30px", lineHeight: 1.4 },
+        { name: "4xl", value: "36px", lineHeight: 1.3 },
+        { name: "5xl", value: "48px", lineHeight: 1.15 },
+        { name: "6xl", value: "60px", lineHeight: 1.1 },
+        { name: "7xl", value: "72px", lineHeight: 1.05 },
+        { name: "8xl", value: "96px", lineHeight: 1 },
+        { name: "9xl", value: "128px", lineHeight: 1 },
+      ],
+    },
+
+    shadows: {
+      sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
+      base: "0 4px 6px rgba(0, 0, 0, 0.1)",
+      md: "0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)",
+      lg: "0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)",
+      xl: "0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)",
+      "2xl": "0 25px 50px rgba(0, 0, 0, 0.25)",
+      inner: "inset 0 2px 4px rgba(0, 0, 0, 0.06)",
+      none: "none",
+    },
+
+    transitions: {
+      fast: "100ms",
+      base: "200ms",
+      slow: "300ms",
+      timing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    },
+
+    zIndex: {
+      auto: "auto",
+      0: "0",
+      10: "10",
+      20: "20",
+      30: "30",
+      40: "40",
+      50: "50",
+      dropdown: "1000",
+      sticky: "1020",
+      fixed: "1030",
+      modal: "1040",
+      popover: "1060",
+      tooltip: "1070",
+    },
+
+    opacity: [0, 5, 10, 25, 50, 75, 90, 95, 100],
+  };
+}
+
+// ============================================================================
+// INIT
+// ============================================================================
+
+async function init() {
+  console.log(
+    chalk.bold.magenta("\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"),
+  );
+  console.log(chalk.bold.magenta("  EmilyUI Setup"));
+  console.log(
+    chalk.bold.magenta("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n"),
+  );
+
+  try {
+    const spinner = ora("Analysing project structure...").start();
+    const detectedProject = detectProject();
+    spinner.succeed("Detected project: " + chalk.cyan(detectedProject.name));
+    const existingConfig = readExistingConfig();
+    const existingColours = isPlainObject(existingConfig && existingConfig.colours)
+      ? existingConfig.colours
+      : {};
+
+    if (existingConfig) {
+      console.log(
+        chalk.gray(
+          "  Found existing emily.config.json. Prompts are pre-filled from current settings.",
+        ),
+      );
+    }
+
+    const packageJsonData = readPackageJson();
+    const pkgName =
+      existingConfig && typeof existingConfig.name === "string" && existingConfig.name.trim()
+        ? existingConfig.name.trim()
+        : packageJsonData && packageJsonData.name
+        ? titleCasePackageName(packageJsonData.name)
+        : "My Design System";
+
+    const projectName = await new Input({
+      name: "projectName",
+      message: "Project name",
+      initial: pkgName,
+      validate: function (value) {
+        return value.trim() ? true : "Project name is required";
+      },
+    }).run();
+
+    if (!projectName || !projectName.trim()) {
+      console.log(chalk.red("\nProject name is required.\n"));
+      process.exit(1);
+    }
+
+    // =========================================================================
+    // COLOURS
+    // =========================================================================
+
+    console.log(chalk.bold("\n" + chalk.magenta("→") + " Brand colours"));
+
+    const brand = await askColourFromPresets(
+      "brand",
+      COLOUR_PRESETS.primary,
+      "#DB2777",
+      existingColours.brand,
+    );
+    const accent = await askColourFromPresets(
+      "accent",
+      COLOUR_PRESETS.secondary,
+      "#2563EB",
+      existingColours.accent,
+    );
+
+    console.log(
+      chalk.gray(
+        "\n  Button colour tokens will use your brand colours by default:",
+      ),
+    );
+    console.log(chalk.gray("  - btn-primary = brand"));
+    console.log(chalk.gray("  - btn-secondary = accent"));
+
+    console.log(chalk.bold("\n" + chalk.magenta("→") + " Utility colours"));
+    console.log(
+      chalk.gray(
+        "  Defaults shown. Press enter to accept or pick an alternative.\n",
+      ),
+    );
+
+    const success = await askColourFromPresets(
+      "success",
+      COLOUR_PRESETS.success,
+      "#017F65",
+      existingColours.success,
+    );
+    const warning = await askColourFromPresets(
+      "warning",
+      COLOUR_PRESETS.warning,
+      "#FFC107",
+      existingColours.warning,
+    );
+    const error = await askColourFromPresets(
+      "error",
+      COLOUR_PRESETS.error,
+      "#B20000",
+      existingColours.error,
+    );
+
+    const colours = {
+      brand,
+      accent,
+      "btn-primary": brand,
+      "btn-secondary": accent,
+      success,
+      warning,
+      error,
+      neutral: normaliseHex(existingColours.neutral) || "#57534E",
+      ...getExistingAdditionalColours(existingColours),
+    };
+
+    let addingMore = true;
+
+    while (addingMore) {
+      const wantsMore = await new Confirm({
+        name: "addMore",
+        message: "Add another utility colour?",
+        initial: false,
+      }).run();
+
+      if (!wantsMore) {
+        addingMore = false;
+        break;
+      }
+
+      const customName = await new Input({
+        name: "customName",
+        message: "Colour name (e.g. accent, highlight, brand-dark)",
+        validate: function (value) {
+          const trimmed = value.trim();
+
+          if (!trimmed) return "Name is required";
+          if (!/^[a-z][a-z0-9-]*$/.test(trimmed)) {
+            return "Use lowercase letters, numbers, and hyphens only";
+          }
+          if (colours[trimmed]) return '"' + trimmed + '" is already defined';
+
+          return true;
+        },
+      }).run();
+
+      colours[customName.trim()] = await askHex(
+        "hex-" + customName,
+        "Hex for " + customName,
+        "#000000",
+      );
+    }
+
+    // =========================================================================
+    // TYPOGRAPHY
+    // =========================================================================
+
+    console.log(chalk.bold("\n" + chalk.magenta("→") + " Typography"));
+
+    const headingFont = await new Select({
+      name: "headingFont",
+      message: "Heading font",
+      choices: FONT_OPTIONS,
+      initial: getFontInitialIndex(
+        isPlainObject(existingConfig && existingConfig.fontFamily)
+          ? existingConfig.fontFamily.heading
+          : existingConfig && existingConfig.fontFamily,
+        0,
+      ),
+    }).run();
+
+    const bodyFont = await new Select({
+      name: "bodyFont",
+      message: "Body font",
+      choices: FONT_OPTIONS,
+      initial: getFontInitialIndex(
+        isPlainObject(existingConfig && existingConfig.fontFamily)
+          ? existingConfig.fontFamily.body
+          : existingConfig && existingConfig.fontFamily,
+        1,
+      ),
+    }).run();
+
+    const baseFontSize = await new Select({
+      name: "baseFontSize",
+      message: "Base font size (sets html font-size, scales all rem values)",
+      choices: ["14px", "16px", "18px", "20px"],
+      initial: (function () {
+        const existing = existingConfig && existingConfig.baseFontSize;
+        const idx = ["14px", "16px", "18px", "20px"].indexOf(existing);
+        return idx >= 0 ? idx : 1;
+      })(),
+    }).run();
+
+    // =========================================================================
+    // SPACING
+    // =========================================================================
+
+    const baseUnitRaw = await new Input({
+      name: "baseUnit",
+      message: "Base spacing unit in px (label/documentation only)",
+      initial: getBaseUnitInitial(existingConfig),
+      validate: function (value) {
+        const parsed = Number.parseInt(value, 10);
+
+        if (Number.isNaN(parsed) || parsed <= 0) {
+          return "Must be a positive number.";
+        }
+
+        return true;
+      },
+    }).run();
+
+    const baseUnit = Number.parseInt(baseUnitRaw, 10);
+
+    // =========================================================================
+    // PURGE / OUTPUT
+    // =========================================================================
+
+    console.log(chalk.bold("\n" + chalk.magenta("→") + " Project files"));
+
+    console.log(
+      chalk.gray(
+        "  Detected " +
+          detectedProject.name +
+          ". EmilyCSS will scan the recommended files automatically.",
+      ),
+    );
+
+    detectedProject.sourceGlobs.forEach(function (glob) {
+      console.log(chalk.gray("  - " + glob));
+    });
+
+    console.log(chalk.bold("\n" + chalk.magenta("→") + " CSS output"));
+    console.log(chalk.gray("  Output: " + detectedProject.outputPath));
+
+    // =========================================================================
+    // BUILD
+    // =========================================================================
+
+    const generatedDefaults = createDefaultConfig({
+      name: projectName.trim(),
+      colours,
+      headingFont,
+      bodyFont,
+      baseUnit,
+      baseFontSize,
+      detectedProject,
+    });
+    const config = mergeWithDefaults(generatedDefaults, existingConfig);
+    config.name = projectName.trim();
+
+    if (!existingConfig || !existingConfig.description) {
+      config.description = config.name + " design system";
+    }
+
+    config.baseUnit = baseUnit + "px";
+    config.baseFontSize = baseFontSize || "16px";
+    config.fontFamily = {
+      heading: headingFont,
+      body: bodyFont,
+    };
+    config.colours = colours;
+
+    const configPath = path.join(process.cwd(), "emily.config.json");
+    fs.writeFileSync(configPath, JSON.stringify(config, null, 2) + "\n");
+
+    console.log("");
+
+    const buildSpinner = ora("Building EmilyUI CSS...").start();
+
+    const build = crossSpawn("npx", ["emily-css", "build"], {
+      cwd: process.cwd(),
+      stdio: "pipe",
+      shell: process.platform === "win32",
+    });
+
+    let stderr = "";
+
+    build.stderr.on("data", function (data) {
+      stderr += data.toString();
+    });
+
+    build.on("close", async function (code) {
+      if (code === 0) {
+        buildSpinner.succeed("EmilyUI CSS built successfully.");
+
+        const scriptsAdded = addEmilyScriptsToPackageJson();
+
+        console.log(
+          "\n" +
+            boxen(
+              chalk.green.bold("Setup complete") +
+                "\n\nConfig:   " +
+                chalk.cyan("emily.config.json") +
+                "\nOutput:   " +
+                chalk.cyan(config.output.css) +
+                "\nProject:  " +
+                chalk.cyan(detectedProject.name) +
+                "\nScan:\n  " +
+                chalk.cyan(config.purge.sourceGlobs.join("\n  ")) +
+                "\n\nNext: add this stylesheet to your project:" +
+                "\n" +
+                chalk.yellow("  " + detectedProject.linkHint) +
+                (scriptsAdded
+                  ? "\n\nScripts added:\n" +
+                    chalk.cyan("  npm run emily:build\n") +
+                    chalk.cyan("  npm run emily:watch\n") +
+                    chalk.cyan("  npm run emily:doctor\n") +
+                    chalk.cyan("  npm run emily:migrate\n") +
+                    chalk.cyan("  npm run emily:info\n") +
+                    chalk.cyan("  npm run emily:manifest\n") +
+                    chalk.cyan("  npm run emily:version\n") +
+                    chalk.cyan("  npm run emily:showcase\n") +
+                    chalk.cyan("  npm run emily:help")
+                  : ""),
+              {
+                padding: 1,
+                margin: 1,
+                borderStyle: "round",
+                borderColor: "magenta",
+              },
+            ),
+        );
+
+        const startWatch = await new Confirm({
+          name: "startWatch",
+          message: "Start the file watcher now?",
+          initial: true,
+        }).run();
+
+        if (startWatch) {
+          console.log(
+            chalk.cyan("\nStarting watcher. Press Ctrl+C to stop.\n"),
+          );
+
+          const watcher = crossSpawn("npx", ["emily-css", "watch"], {
+            cwd: process.cwd(),
+            stdio: "inherit",
+            shell: process.platform === "win32",
+          });
+
+          watcher.on("close", function (c) {
+            process.exit(c || 0);
+          });
+        } else {
+          console.log(
+            chalk.gray(
+              "\nRun the watcher any time with: npm run emily:watch\n",
+            ),
+          );
+          process.exit(0);
+        }
+
+        return;
+      }
+
+      buildSpinner.fail("Automatic build failed.");
+      console.log("\nYour config was created, but CSS was not built.");
+      console.log("\nRun manually:\n");
+      console.log(chalk.cyan("  npx emily-css build"));
+
+      if (stderr.trim()) {
+        console.log(chalk.gray("\nBuild error:\n"));
+        console.log(stderr.trim());
+      }
+
+      process.exit(1);
+    });
+
+    build.on("error", function (error) {
+      buildSpinner.fail("Automatic build failed.");
+      console.log("\nYour config was created, but CSS was not built.");
+      console.log("Reason: " + error.message);
+      console.log("\nRun manually:\n");
+      console.log(chalk.cyan("  npx emily-css build\n"));
+      process.exit(1);
+    });
+  } catch (error) {
+    console.log(chalk.red("\nSetup cancelled or failed."));
+
+    if (error && error.message) {
+      console.log(chalk.gray(error.message));
+    }
+
+    process.exit(1);
+  }
+}
+
+init();