emily-css 1.0.8 → 1.0.9

package/bin/emilyui.js

@@ -6,16 +6,19 @@ if (command === "init") {
   require("../src/init.js");
 } else if (command === "build") {
   const { build } = require("../src/index.js");
-  build();
+  build({ keepFull: process.argv.includes("--keep-full") });
 } else if (command === "purge") {
   require("../src/purge-cmd.js");
+} else if (command === "watch") {
+  require("../src/watch.js");
 } else {
   console.log(`
 emily-css - Config-driven CSS framework generator
 
 Usage:
   emily-css init     Set up a new project
-  emily-css build    Generate emily.css from your config
-  emily-css purge    Remove unused utilities for production
+  emily-css build    Generate production CSS: dist/emily.min.css
+  emily-css watch    Dev mode: rebuild full CSS only when needed
+  emily-css purge    Advanced: manually purge unused utilities
 `);
 }

package/package.json

@@ -1,40 +1,49 @@
-{
-  "name": "emily-css",
-  "version": "1.0.8",
-  "description": "A config-driven utility CSS framework. Define your brand once, generate the CSS.",
-  "main": "src/index.js",
-  "bin": {
-    "emily-css": "./bin/emilyui.js"
-  },
-  "files": [
-    "bin/",
-    "src/",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "build": "node src/index.js",
-    "dev": "nodemon src/index.js",
-    "init": "node src/init.js",
-    "test": "node tests/test.js"
-  },
-  "keywords": [
-    "css",
-    "design-system",
-    "components",
-    "config-driven",
-    "utility-css",
-    "accessibility",
-    "drupal",
-    "legacy",
-    "no-build-step"
-  ],
-  "author": "Andy Terry",
-  "license": "MIT",
-  "engines": {
-    "node": ">=16.0.0"
-  },
-  "devDependencies": {
-    "nodemon": "^3.0.0"
-  }
-}
+{
+  "name": "emily-css",
+  "version": "1.0.9",
+  "description": "A config-driven utility CSS framework. Define your brand once, generate the CSS.",
+  "main": "src/index.js",
+  "bin": {
+    "emily-css": "bin/emilyui.js"
+  },
+  "files": [
+    "bin/",
+    "src/",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "node src/index.js",
+    "dev": "nodemon src/index.js",
+    "init": "node src/init.js",
+    "test": "node tests/test.js"
+  },
+  "keywords": [
+    "css",
+    "design-system",
+    "components",
+    "config-driven",
+    "utility-css",
+    "accessibility",
+    "drupal",
+    "legacy",
+    "no-build-step"
+  ],
+  "author": "Andy Terry",
+  "license": "MIT",
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.0"
+  },
+  "dependencies": {
+    "boxen": "^5.1.2",
+    "chalk": "^4.1.2",
+    "chokidar": "^5.0.0",
+    "cross-spawn": "^7.0.6",
+    "emily-css": "^1.0.8",
+    "enquirer": "^2.4.1",
+    "ora": "^5.4.1"
+  }
+}

package/src/index.js

@@ -779,7 +779,7 @@ function addStateVariants(css) {
 // BUILD FUNCTION
 // ============================================================================
 
-function build(options = {}) {
+function buildFullFramework() {
   const configPath = path.join(process.cwd(), 'emily.config.json');
   if (!fs.existsSync(configPath)) {
     console.error(`\n  emily-css: No config found.\n  Expected: ${configPath}\n  Run "emily-css init" to create one.\n`);
@@ -787,24 +787,7 @@ function build(options = {}) {
   }
   const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
 
-  if (options.purge) {
-    const { purgeCSS } = require('./purge.js');
-    const cssPath = path.join(process.cwd(), 'dist/emily.css');
-    if (!fs.existsSync(cssPath)) {
-      console.error('  emily-css: Run "emily-css build" first.');
-      process.exit(1);
-    }
-    console.log(`Purging unused utilities from ${options.purge}...`);
-    const css = fs.readFileSync(cssPath, 'utf8');
-    const purged = purgeCSS(css, options.purge);
-    const minified = purged.replace(/\/\*[\s\S]*?\*\//g, '').replace(/\s+/g, ' ').replace(/\s?\{/g, '{').replace(/\s?\}/g, '}').replace(/;\s/g, ';').trim();
-    fs.writeFileSync(path.join(process.cwd(), 'dist/emily.purged.css'), purged);
-    fs.writeFileSync(path.join(process.cwd(), 'dist/emily.purged.min.css'), minified);
-    console.log('✓ Purged CSS: dist/emily.purged.css');
-    return;
-  }
-
-  console.log('Building EmilyUI...');
+  console.log('Building EmilyCSS full framework...');
 
   // Generate colours
   const colours = generateAllColours(config.colours);
@@ -926,26 +909,103 @@ ${bodyFont}`;
   fs.writeFileSync(outputPath, css);
   console.log(`✓ Generated CSS: ${outputPath}`);
   console.log(`✓ File size: ${(css.length / 1024).toFixed(2)} KB (unminified)`);
+  console.log('Full framework build complete');
+}
+
+function minify(css) {
+  return css
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/\s+/g, ' ')
+    .replace(/\s?\{/g, '{')
+    .replace(/\s?\}/g, '}')
+    .replace(/;\s/g, ';')
+    .trim();
+}
+
+function getConfig() {
+  const configPath = path.join(process.cwd(), 'emily.config.json');
 
-  // Generate minified version
-  const minified = css.replace(/\/\*[\s\S]*?\*\//g, '').replace(/\s+/g, ' ').replace(/\s?\{/g, '{').replace(/\s?\}/g, '}').replace(/;\s/g, ';').trim();
+  if (!fs.existsSync(configPath)) {
+    console.error('\n  emily-css: No config found. Run "emily-css init" first.\n');
+    process.exit(1);
+  }
+
+  return JSON.parse(fs.readFileSync(configPath, 'utf8'));
+}
+
+function getSourceDir(config) {
+  return config.purge && config.purge.sourceDir ? config.purge.sourceDir : '.';
+}
+
+function buildProductionCss() {
+  const config = getConfig();
+  const sourceDir = getSourceDir(config);
+  const cssPath = path.join(process.cwd(), 'dist/emily.css');
   const minPath = path.join(process.cwd(), 'dist/emily.min.css');
+
+  if (!fs.existsSync(cssPath)) {
+    buildFullFramework();
+  }
+
+  const { purgeCSS } = require('./purge.js');
+  const css = fs.readFileSync(cssPath, 'utf8');
+  const purged = purgeCSS(css, sourceDir, config);
+  const minified = minify(purged);
+
   fs.writeFileSync(minPath, minified);
-  console.log('  -> Minified: ' + minPath);
-  console.log('  -> File size: ' + (minified.length / 1024).toFixed(2) + ' KB (minified)');
+
+  return {
+    css,
+    purged,
+    minified,
+    originalSize: Buffer.byteLength(css, 'utf8'),
+    outputSize: Buffer.byteLength(minified, 'utf8')
+  };
+}
+
+function isFrameworkStale() {
+  const configPath = path.join(process.cwd(), 'emily.config.json');
+  const cssPath = path.join(process.cwd(), 'dist/emily.css');
+
+  if (!fs.existsSync(cssPath)) return true;
+  if (!fs.existsSync(configPath)) return true;
+
+  return fs.statSync(configPath).mtimeMs > fs.statSync(cssPath).mtimeMs;
+}
+
+function ensureFullFramework() {
+  if (isFrameworkStale()) {
+    buildFullFramework();
+  }
+}
+
+function build(options = {}) {
+  ensureFullFramework();
+
+  const result = buildProductionCss();
+  const cssPath = path.join(process.cwd(), 'dist/emily.css');
+
+  console.log('✓ Generated production CSS: dist/emily.min.css');
+  console.log('✓ File size: ' + (result.outputSize / 1024).toFixed(2) + ' KB');
+
+  if (!options.keepFull && fs.existsSync(cssPath)) {
+    fs.unlinkSync(cssPath);
+    console.log('Removed dist/emily.css for production build.');
+  }
 
   console.log('Build complete');
 }
 
 if (require.main === module) {
   const args = process.argv.slice(2);
-  const purgeIndex = args.indexOf('--purge');
-  const purgeDir = purgeIndex !== -1 ? args[purgeIndex + 1] : null;
-  build(purgeDir ? { purge: purgeDir } : {});
+  build({ keepFull: args.includes('--keep-full') });
 }
 
 module.exports = {
   build,
+  buildFullFramework,
+  buildProductionCss,
+  ensureFullFramework,
   hexToOklch,
   oklchToHex,
   generateColourScale,

package/src/init.js

@@ -1,256 +1,667 @@
-const fs = require('fs');
-const path = require('path');
-const readline = require('readline');
-
-const rl = readline.createInterface({
-  input: process.stdin,
-  output: process.stdout
-});
-
-// Helper function for prompts
-function prompt(question) {
-  return new Promise(resolve => {
-    rl.question(question, answer => {
-      resolve(answer);
-    });
-  });
-}
+const fs = require("fs");
+const path = require("path");
+const crossSpawn = require("cross-spawn");
+const { Form, Select, Input } = require("enquirer");
+const chalk = require("chalk");
+const ora = require("ora");
+const boxen = require("boxen");
+
+// ============================================================================
+// CONSTANTS
+// ============================================================================
+
+const DEFAULT_PURGE_IGNORE = [
+  "node_modules",
+  ".git",
+  ".nuxt",
+  ".next",
+  ".output",
+  "dist",
+  "build",
+  "coverage",
+  ".cache",
+  ".vite",
+];
+
+const DEFAULT_COLOURS = {
+  primary: "#DB2777",
+  secondary: "#2563EB",
+  success: "#017F65",
+  warning: "#FFC107",
+  error: "#B20000",
+  neutral: "#57534E",
+};
+
+const COLOUR_PRESETS = {
+  primary: [
+    { value: "#DB2777", label: "Emily Pink" },
+    { value: "#114B5F", label: "Deep Teal" },
+    { value: "#2563EB", label: "Blue" },
+    { value: "#017F65", label: "Green" },
+    { value: "custom", label: "Custom hex" },
+  ],
+  secondary: [
+    { value: "#2563EB", label: "Blue" },
+    { value: "#028090", label: "Teal" },
+    { value: "#7C3AED", label: "Purple" },
+    { value: "#DB2777", label: "Emily Pink" },
+    { value: "custom", label: "Custom hex" },
+  ],
+  success: [
+    { value: "#017F65", label: "Accessible Green" },
+    { value: "#15803D", label: "Forest Green" },
+    { value: "#50C878", label: "Emerald" },
+    { value: "custom", label: "Custom hex" },
+  ],
+  warning: [
+    { value: "#FFC107", label: "Amber" },
+    { value: "#F59E0B", label: "Orange" },
+    { value: "#FFBF00", label: "Yellow" },
+    { value: "custom", label: "Custom hex" },
+  ],
+  error: [
+    { value: "#B20000", label: "Accessible Red" },
+    { value: "#DC2626", label: "Red" },
+    { value: "#F45B69", label: "Coral" },
+    { value: "custom", label: "Custom hex" },
+  ],
+  neutral: [
+    { value: "#57534E", label: "Warm Grey" },
+    { value: "#334155", label: "Slate" },
+    { value: "#111827", label: "Near Black" },
+    { value: "custom", label: "Custom hex" },
+  ],
+};
+
+const FONT_OPTIONS = [
+  { name: "lexend", message: "Lexend" },
+  { name: "inter", message: "Inter" },
+  { name: "system", message: "System sans" },
+  { name: "georgia", message: "Georgia" },
+  { name: "mono", message: "Monospace" },
+];
+
+const PURGE_EXTENSIONS = [
+  ".html",
+  ".htm",
+  ".twig",
+  ".njk",
+  ".liquid",
+  ".hbs",
+  ".jsx",
+  ".tsx",
+  ".vue",
+  ".php",
+  ".astro",
+  ".svelte",
+  ".blade.php",
+  ".jinja",
+  ".jinja2",
+  ".j2",
+  ".md",
+];
+
+// ============================================================================
+// HELPERS
+// ============================================================================
 
-// Validate hex colour
 function isValidHex(hex) {
   return /^#[0-9A-F]{6}$/i.test(hex);
 }
 
-// Default colours
-const defaultColours = {
-  primary: '#DB2777',
-  secondary: '#2563EB',
-  success: '#017F65',
-  warning: '#ffc107',
-  error: '#b20000',
-  neutral: '#57534E'
-};
+function colourChoice(hex, label) {
+  if (hex === "custom") {
+    return {
+      name: "custom",
+      message: "Custom hex",
+    };
+  }
+
+  return {
+    name: hex,
+    message: `${chalk.hex(hex)("■")} ${label} ${chalk.gray(hex)}`,
+  };
+}
+
+async function askColour(colourName) {
+  const choices = COLOUR_PRESETS[colourName].map((option) =>
+    colourChoice(option.value, option.label),
+  );
+
+  const selected = await new Select({
+    name: colourName,
+    message: `${colourName} colour`,
+    choices,
+  }).run();
+
+  if (selected !== "custom") {
+    return selected.toUpperCase();
+  }
+
+  const custom = await new Input({
+    name: `${colourName}Custom`,
+    message: `Enter custom ${colourName} hex`,
+    initial: DEFAULT_COLOURS[colourName],
+    validate(value) {
+      return isValidHex(value)
+        ? true
+        : "Enter a valid hex colour, for example #0077B6";
+    },
+  }).run();
+
+  return custom.toUpperCase();
+}
+
+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 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;
+
+    if (!packageJson.scripts["emily:build"]) {
+      packageJson.scripts["emily:build"] = "emily-css build";
+      changed = true;
+    }
+
+    if (!packageJson.scripts["emily:watch"]) {
+      packageJson.scripts["emily:watch"] = "emily-css watch";
+      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: ".",
+      sourceGlobs: [
+        "./components/**/*.{vue,js,ts}",
+        "./pages/**/*.vue",
+        "./layouts/**/*.vue",
+        "./app.vue",
+      ],
+    };
+  }
+
+  if (hasDependency(packageJson, "next")) {
+    return {
+      name: "Next.js",
+      sourceDir: ".",
+      sourceGlobs: [
+        "./app/**/*.{js,jsx,ts,tsx}",
+        "./pages/**/*.{js,jsx,ts,tsx}",
+        "./components/**/*.{js,jsx,ts,tsx}",
+        "./src/**/*.{js,jsx,ts,tsx}",
+      ],
+    };
+  }
+
+  if (hasDependency(packageJson, "react")) {
+    return {
+      name: "React",
+      sourceDir: "./src",
+      sourceGlobs: [
+        "./src/**/*.{js,jsx,ts,tsx}",
+        "./components/**/*.{js,jsx,ts,tsx}",
+      ],
+    };
+  }
+
+  if (
+    hasDependency(packageJson, "vue") ||
+    hasFile("vite.config.ts") ||
+    hasFile("vite.config.js")
+  ) {
+    return {
+      name: "Vue/Vite",
+      sourceDir: "./src",
+      sourceGlobs: ["./src/**/*.{vue,js,ts}"],
+    };
+  }
+
+  if (hasDependency(packageJson, "astro") || hasFile("astro.config.mjs")) {
+    return {
+      name: "Astro",
+      sourceDir: "./src",
+      sourceGlobs: ["./src/**/*.{astro,html,js,ts,vue,jsx,tsx,svelte}"],
+    };
+  }
+
+  const rootFiles = fs.readdirSync(process.cwd());
+  const hasDrupalInfoFile = rootFiles.some((file) =>
+    file.endsWith(".info.yml"),
+  );
+
+  if (
+    hasDrupalInfoFile ||
+    fs.existsSync(path.join(process.cwd(), "web/core"))
+  ) {
+    return {
+      name: "Drupal",
+      sourceDir: ".",
+      sourceGlobs: [
+        "./web/themes/custom/**/*.{twig,js,ts}",
+        "./templates/**/*.html.twig",
+        "./components/**/*.twig",
+        "./**/*.theme",
+      ],
+    };
+  }
 
-// Default config template - matches emily.config.json structure
-function createDefaultConfig(name, colours, fonts, baseUnit, sourceDir) {
+  return {
+    name: "Static/Generic",
+    sourceDir: ".",
+    sourceGlobs: [
+      "./**/*.{html,htm,twig,njk,liquid,hbs,php,astro,svelte,vue,js,ts}",
+    ],
+  };
+}
+
+// ============================================================================
+// CONFIG BUILDER
+// ============================================================================
+
+function createDefaultConfig({
+  name,
+  colours,
+  headingFont,
+  bodyFont,
+  monoFont,
+  baseUnit,
+  detectedProject,
+  sourceDir,
+}) {
   return {
     name,
     description: `${name} design system`,
+
     baseUnit: `${baseUnit}px`,
-    baseFontSize: '16px',
-    fontFamily: { heading: 'lexend', body: 'inter' },
+    baseFontSize: "16px",
+
+    fontFamily: {
+      heading: headingFont,
+      body: bodyFont,
+      mono: monoFont,
+    },
+
     customFonts: [],
+
     colours,
+
+    purge: {
+      projectType: detectedProject.name,
+      sourceDir,
+      sourceGlobs: detectedProject.sourceGlobs,
+      ignore: DEFAULT_PURGE_IGNORE,
+      extensions: PURGE_EXTENSIONS,
+    },
+
     breakpoints: {
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1280px',
-      '2xl': '1536px'
+      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'
+        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',
-        'full': '9999px'
-      }
+        none: "0",
+        sm: "4px",
+        base: "8px",
+        md: "12px",
+        lg: "16px",
+        full: "9999px",
+      },
     },
+
     typography: {
       lineHeightRatio: 1.5,
+
       fontWeights: {
         light: 300,
         normal: 400,
         medium: 500,
         semibold: 600,
-        bold: 700
+        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: "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 },
+      ],
     },
+
     shadows: {
-      sm: '0 1px 2px rgba(0, 0, 0, 0.05)',
-      base: '0 4px 6px rgba(0, 0, 0, 0.1)',
-      md: '0 10px 15px rgba(0, 0, 0, 0.1)',
-      lg: '0 20px 25px rgba(0, 0, 0, 0.15)',
-      none: 'none'
+      sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
+      base: "0 4px 6px rgba(0, 0, 0, 0.1)",
+      md: "0 10px 15px rgba(0, 0, 0, 0.1)",
+      lg: "0 20px 25px rgba(0, 0, 0, 0.15)",
+      none: "none",
     },
+
     transitions: {
-      fast: '100ms',
-      base: '200ms',
-      slow: '300ms',
-      timing: 'cubic-bezier(0.4, 0, 0.2, 1)'
+      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'
+      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]
+
+    opacity: [0, 5, 10, 25, 50, 75, 90, 95, 100],
   };
 }
 
+// ============================================================================
+// INIT
+// ============================================================================
+
 async function init() {
-  console.log('\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
-  console.log('  EmilyUI Setup');
-  console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');
+  console.log(
+    chalk.bold.magenta("\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"),
+  );
+  console.log(chalk.bold.magenta("  EmilyUI Setup"));
+  console.log(
+    chalk.bold.magenta("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n"),
+  );
 
   try {
-    // 1. Project name
-    const name = await prompt('Project name: ');
-    if (!name.trim()) {
-      console.log('❌ Project name is required');
-      rl.close();
-      return;
+    const spinner = ora("Analysing project structure...").start();
+    const detectedProject = detectProject();
+    spinner.succeed(`Detected project: ${chalk.cyan(detectedProject.name)}`);
+
+    const { projectName } = await new Form({
+      name: "project",
+      message: "Project details",
+      choices: [
+        {
+          name: "projectName",
+          message: "Project name",
+          initial: "My Design System",
+        },
+      ],
+    }).run();
+
+    if (!projectName || !projectName.trim()) {
+      console.log(chalk.red("\nProject name is required.\n"));
+      process.exit(1);
     }
 
-    // 2. Brand colours
-    console.log('\nBrand colours (hex format, e.g., #0077b6):');
+    console.log(chalk.bold(`\n${chalk.magenta("→")} Brand colours`));
+
+    const normalisedColours = {};
+
+    for (const colourName of Object.keys(DEFAULT_COLOURS)) {
+      normalisedColours[colourName] = await askColour(colourName);
+    }
+
+    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 colours = {};
-    const colourNames = ['primary', 'secondary', 'success', 'warning', 'error', 'neutral'];
+    const bodyFont = await new Select({
+      name: "bodyFont",
+      message: "Body font",
+      choices: FONT_OPTIONS,
+      initial: 1,
+    }).run();
 
-    for (const colourName of colourNames) {
-      let colour;
-      let valid = false;
+    const monoFont = await new Select({
+      name: "monoFont",
+      message: "Monospace font",
+      choices: FONT_OPTIONS,
+      initial: 4,
+    }).run();
 
-      while (!valid) {
-        colour = await prompt(`  ${colourName} [${defaultColours[colourName]}]: `);
-        colour = colour || defaultColours[colourName];
+    const { baseUnitInput } = await new Form({
+      name: "spacing",
+      message: "Spacing",
+      choices: [
+        {
+          name: "baseUnitInput",
+          message: "Base spacing unit in px",
+          initial: "8",
+        },
+      ],
+      validate(values) {
+        const parsed = Number.parseInt(values.baseUnitInput, 10);
 
-        if (isValidHex(colour)) {
-          colours[colourName] = colour;
-          valid = true;
-        } else {
-          console.log(`    ❌ Invalid hex colour. Use format: #0077b6`);
+        if (Number.isNaN(parsed) || parsed <= 0) {
+          return "Base spacing unit must be a positive number.";
         }
-      }
-    }
 
-    // 3. Fonts
-    console.log('\nFont families (optional, press Enter to skip):');
+        return true;
+      },
+    }).run();
 
-    const fonts = {
-      sans: await prompt('  Sans-serif font: ') || 'system-ui, -apple-system, sans-serif',
-      serif: await prompt('  Serif font: ') || 'Georgia, serif',
-      mono: await prompt('  Monospace font: ') || 'Menlo, Monaco, monospace'
-    };
+    const baseUnit = Number.parseInt(baseUnitInput, 10);
 
-    // 4. Base unit
-    let baseUnit = 8;
-    const baseUnitInput = await prompt('\nBase spacing unit (px) [8]: ');
-    if (baseUnitInput.trim()) {
-      const parsed = parseInt(baseUnitInput);
-      if (!isNaN(parsed) && parsed > 0) {
-        baseUnit = parsed;
-      } else {
-        console.log('  ⚠️  Invalid number, using default: 8px');
-      }
-    }
+    console.log(chalk.bold(`\n${chalk.magenta("→")} Purge settings`));
 
-    // 5. Source directory for purge
-    console.log('\nSource directory for purge (where your templates/HTML live):');
-    let sourceDir = await prompt('  Source directory [./src]: ');
-    sourceDir = sourceDir.trim() || './src';
+    const { sourceDir } = await new Form({
+      name: "paths",
+      message: `Detected ${detectedProject.name} project`,
+      choices: [
+        {
+          name: "sourceDir",
+          message: "Scan directory",
+          initial: detectedProject.sourceDir,
+        },
+      ],
+    }).run();
 
-    // 6. Create config
-    const config = createDefaultConfig(name, colours, fonts, baseUnit, sourceDir);
+    const config = createDefaultConfig({
+      name: projectName.trim(),
+      colours: normalisedColours,
+      headingFont,
+      bodyFont,
+      monoFont,
+      baseUnit,
+      detectedProject,
+      sourceDir: sourceDir.trim() || detectedProject.sourceDir,
+    });
 
-    // 7. Write config file to the user's project directory
-    const configPath = path.join(process.cwd(), 'emily.config.json');
+    const configPath = path.join(process.cwd(), "emily.config.json");
     fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
 
-    console.log('\n✅ Configuration created!');
-    console.log(`   Project: ${name}`);
-    console.log(`   Primary colour: ${colours.primary}`);
-    console.log(`   Base unit: ${baseUnit}px`);
-    console.log(`\n📝 Config saved: ${configPath}`);
+    console.log("");
+    const buildSpinner = ora("Building EmilyUI CSS...").start();
 
-    // 8. Run build
-    console.log('\n🔨 Building CSS...\n');
-    rl.close();
-
-    // Spawn build process
-    const { spawn } = require('child_process');
-    const build = spawn('npx', ['emily-css', 'build'], {
+    const build = crossSpawn("npx", ["emily-css", "build"], {
       cwd: process.cwd(),
-      stdio: 'inherit'
+      stdio: "pipe",
+      shell: process.platform === "win32",
+    });
+
+    let stderr = "";
+
+    build.stderr.on("data", (data) => {
+      stderr += data.toString();
     });
 
-    build.on('close', code => {
+    build.on("close", (code) => {
       if (code === 0) {
-        console.log('\n✅ Setup complete!');
-        console.log('\n💡 Next steps:');
-        console.log('   1. Open showcase.html in your browser to see components');
-        console.log('   2. Copy component code into your project');
-        console.log('   3. Update emily.config.json to customize colours/fonts');
-        console.log('   4. Run: emily-css purge (to remove unused CSS for production)');
+        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("dist/emily.min.css")}` +
+                `\nProject: ${chalk.cyan(detectedProject.name)}` +
+                `\nScan: ${chalk.cyan(config.purge.sourceDir)}` +
+                `\n\nNext: add ${chalk.yellow("dist/emily.min.css")} to your project.` +
+                (scriptsAdded
+                  ? `\n\nScripts:\n${chalk.cyan("npm run emily:build")}\n${chalk.cyan("npm run emily:watch")}`
+                  : ""),
+              {
+                padding: 1,
+                margin: 1,
+                borderStyle: "round",
+                borderColor: "magenta",
+              },
+            ),
+        );
       } else {
-        console.log('\n❌ Build failed');
+        buildSpinner.fail("Automatic build failed.");
+
+        console.log("\nYour config was created, but CSS was not built.");
+        console.log("\nRun this 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(code === 0 ? 0 : 1);
+    });
+
+    build.on("error", (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 this 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));
+    }
 
-  } catch (err) {
-    console.log(`\n❌ Error: ${err.message}`);
-    rl.close();
+    process.exit(1);
   }
 }
 

package/src/purge-cmd.js

@@ -30,7 +30,7 @@ function runPurge() {
   console.log('\nPurging unused utilities from ' + sourceDir + '...');
 
   const css = fs.readFileSync(cssPath, 'utf8');
-  const purged = purgeCSS(css, sourceDir);
+  const purged = purgeCSS(css, sourceDir, config);
   const minified = purged
     .replace(/\/\*[\s\S]*?\*\//g, '')
     .replace(/\s+/g, ' ')
@@ -52,4 +52,4 @@ function runPurge() {
   console.log('\n  ' + Math.round(original / 1024) + 'KB -> ' + Math.round(purgedSize / 1024) + 'KB (' + reduction + '% reduction)\n');
 }
 
-runPurge();
+runPurge();

package/src/watch.js

@@ -0,0 +1,193 @@
+const fs = require('fs');
+const path = require('path');
+const chokidar = require('chokidar');
+const chalk = require('chalk');
+const { buildFullFramework, buildProductionCss, ensureFullFramework } = require('./index.js');
+const { getAllFiles, extractClassNames } = require('./purge.js');
+
+let isRunning = false;
+let pendingRun = false;
+let previousClasses = new Set();
+let hasRunOnce = false;
+
+function readConfig() {
+  const configPath = path.join(process.cwd(), 'emily.config.json');
+
+  if (!fs.existsSync(configPath)) {
+    console.error('\n  emily-css: No config found. Run "emily-css init" first.\n');
+    process.exit(1);
+  }
+
+  return JSON.parse(fs.readFileSync(configPath, 'utf8'));
+}
+
+function shouldIgnore(filePath) {
+  const normalised = filePath.replace(/\\/g, '/');
+
+  return [
+    'node_modules/',
+    '.git/',
+    '.nuxt/',
+    '.next/',
+    '.output/',
+    'dist/',
+    'build/',
+    'coverage/',
+    '.cache/',
+    '.vite/'
+  ].some(part => normalised.includes('/' + part) || normalised.startsWith(part));
+}
+
+function runQuietly(fn) {
+  const originalLog = console.log;
+  const originalWarn = console.warn;
+
+  console.log = () => {};
+  console.warn = () => {};
+
+  try {
+    return fn();
+  } finally {
+    console.log = originalLog;
+    console.warn = originalWarn;
+  }
+}
+
+function collectUsedClasses(sourceDir, config) {
+  const files = getAllFiles(sourceDir, config.purge?.extensions);
+  const usedClasses = new Set();
+
+  for (const file of files) {
+    if (shouldIgnore(file)) continue;
+
+    try {
+      const content = fs.readFileSync(file, 'utf8');
+      extractClassNames(content).forEach(cls => usedClasses.add(cls));
+    } catch {}
+  }
+
+  return usedClasses;
+}
+
+function getClassDiff(currentClasses) {
+  const added = [...currentClasses].filter(cls => !previousClasses.has(cls));
+  const removed = [...previousClasses].filter(cls => !currentClasses.has(cls));
+
+  previousClasses = new Set(currentClasses);
+
+  return { added, removed };
+}
+
+function formatClassList(classes) {
+  if (classes.length === 0) return '';
+
+  const shown = classes.slice(0, 8).join(', ');
+  const extra = classes.length > 8 ? ' +' + (classes.length - 8) + ' more' : '';
+
+  return shown + extra;
+}
+
+function printSummary({ currentClasses, result, added, removed }) {
+  const reduction = (((result.originalSize - result.outputSize) / result.originalSize) * 100).toFixed(1);
+  const sizeKb = (result.outputSize / 1024).toFixed(1);
+  const time = new Date().toLocaleTimeString();
+
+  console.log(
+    chalk.green('✓ ' + time + ' updated') +
+    chalk.gray(' | ' + currentClasses.size + ' classes | ' + sizeKb + ' KB | ' + reduction + '% reduced')
+  );
+
+  if (!hasRunOnce) return;
+
+  if (removed.length > 0) {
+    console.log(chalk.red('− removed ' + removed.length + ' class' + (removed.length === 1 ? '' : 'es')) + chalk.gray(' (' + formatClassList(removed) + ')'));
+  }
+
+  if (added.length > 0) {
+    console.log(chalk.green('+ added ' + added.length + ' class' + (added.length === 1 ? '' : 'es')) + chalk.gray(' (' + formatClassList(added) + ')'));
+  }
+}
+
+function runProductionUpdate(filePath) {
+  if (isRunning) {
+    pendingRun = true;
+    return;
+  }
+
+  isRunning = true;
+
+  try {
+    const config = readConfig();
+    const sourceDir = config.purge?.sourceDir || '.';
+    const isConfigChange = filePath && filePath.replace(/\\/g, '/').endsWith('emily.config.json');
+    const cssPath = path.join(process.cwd(), 'dist/emily.css');
+
+ if (isConfigChange) {
+  runQuietly(() => buildFullFramework());
+} else {
+  runQuietly(() => ensureFullFramework());
+}
+
+    const result = runQuietly(() => buildProductionCss());
+    const currentClasses = collectUsedClasses(sourceDir, config);
+    const { added, removed } = getClassDiff(currentClasses);
+
+    printSummary({ currentClasses, result, added, removed });
+
+    hasRunOnce = true;
+  } catch (error) {
+    console.error('\n❌ EmilyUI watch failed');
+    console.error(error.message);
+  } finally {
+    isRunning = false;
+
+    if (pendingRun) {
+      pendingRun = false;
+      runProductionUpdate();
+    }
+  }
+}
+
+function getWatchPaths(config) {
+  return [
+    config.purge?.sourceDir || '.',
+    'emily.config.json'
+  ];
+}
+
+function queueUpdate(filePath) {
+  if (filePath && shouldIgnore(filePath)) return;
+  runProductionUpdate(filePath);
+}
+
+function runWatch() {
+  const config = readConfig();
+  const watchPaths = getWatchPaths(config);
+
+  console.log('\n👀 EmilyUI is watching...');
+  console.log(chalk.gray('   Watching:'));
+  watchPaths.forEach(item => console.log(chalk.gray('   - ' + item)));
+
+  runQuietly(() => ensureFullFramework());
+  runProductionUpdate();
+
+  const watcher = chokidar.watch(watchPaths, {
+    ignored: shouldIgnore,
+    ignoreInitial: true,
+    awaitWriteFinish: {
+      stabilityThreshold: 500,
+      pollInterval: 100
+    }
+  });
+
+  watcher.on('change', queueUpdate);
+  watcher.on('add', queueUpdate);
+  watcher.on('unlink', queueUpdate);
+
+  watcher.on('error', error => {
+    console.error('\n❌ EmilyUI watcher error');
+    console.error(error.message);
+  });
+}
+
+runWatch();