@damarkuncoro/meta-architecture-style-engine 0.1.1 → 0.1.3

package/lib/cjs/cli/index.js

@@ -28,12 +28,175 @@ var import_commander6 = require("commander");
 
 // src/cli/commands/init.ts
 var import_commander = require("commander");
-var initCommand = new import_commander.Command("init").description("Initialize a new project with MASE").argument("[project-name]", "Project name").option("-t, --template <template>", "Template to use (default, minimal, full)", "default").option("--typescript", "Use TypeScript (default)", true).option("--javascript", "Use JavaScript").action((projectName, options) => {
-  console.log("Initializing MASE project...");
-  console.log(`Project name: ${projectName || "mase-project"}`);
-  console.log(`Template: ${options.template}`);
-  console.log(`TypeScript: ${options.typescript}`);
-  console.log("\u2705 Project initialized successfully!");
+var fs = __toESM(require("fs"));
+var path = __toESM(require("path"));
+var readline = __toESM(require("readline"));
+var POSTCSS_CONFIG = `module.exports = {
+  plugins: [
+    require('@damarkuncoro/meta-architecture-style-engine/postcss')({
+      prefix: '--mase-',
+      rootSelector: ':root',
+    })
+  ]
+};
+`;
+var TAILWIND_CONFIG = `const { createMasePreset } = require('@damarkuncoro/meta-architecture-style-engine/tailwind');
+const fs = require('fs');
+const path = require('path');
+
+// Try to load local mase.tokens.js if available
+let tokens;
+const localTokensPath = path.resolve(__dirname, 'mase.tokens.js');
+if (fs.existsSync(localTokensPath)) {
+  tokens = require(localTokensPath);
+}
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  presets: [
+    createMasePreset({
+      tokens: tokens, // Use local tokens if found, otherwise defaults to internal
+      useCssVariables: true,
+    })
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+`;
+var EXAMPLE_MASE = `contract DesignSystem {
+  domain color {
+    token primary: #007bff;
+    token secondary: #6c757d;
+    token success: #28a745;
+    token danger: #dc3545;
+  }
+  
+  domain typography {
+    token base: 16px;
+    token heading: 32px;
+  }
+  
+  domain space {
+    token small: 4px;
+    token medium: 8px;
+    token large: 16px;
+  }
+}
+`;
+var TOKENS_CONFIG = `/**
+ * MASE Tokens Configuration
+ * 
+ * Defines your design tokens for the Atomic Engine.
+ * Use 'mase generate-css --format atomic' to generate utility classes.
+ */
+module.exports = {
+  // Colors
+  'color.primary': { id: 'color.primary', domain: 'color', value: '#2563eb' },
+  'color.secondary': { id: 'color.secondary', domain: 'color', value: '#4b5563' },
+  'color.accent': { id: 'color.accent', domain: 'color', value: '#f59e0b' },
+  
+  // Theme Aware Colors
+  'surface.card': { 
+    id: 'surface.card', 
+    domain: 'color', 
+    value: { light: '#ffffff', dark: '#1e293b' } 
+  },
+  'text.base': { 
+    id: 'text.base', 
+    domain: 'color', 
+    value: { light: '#111827', dark: '#f9fafb' } 
+  },
+
+  // Spacing
+  'space.sm': { id: 'space.sm', domain: 'layout', value: '0.5rem' },
+  'space.md': { id: 'space.md', domain: 'layout', value: '1rem' },
+  'space.lg': { id: 'space.lg', domain: 'layout', value: '1.5rem' },
+  'space.xl': { id: 'space.xl', domain: 'layout', value: '2rem' },
+  
+  // Typography
+  'text.sm': { id: 'text.sm', domain: 'typography', value: '0.875rem' },
+  'text.lg': { id: 'text.lg', domain: 'typography', value: '1.125rem' },
+  'weight.bold': { id: 'weight.bold', domain: 'typography', value: '700' },
+  
+  // Radius
+  'radius.md': { id: 'radius.md', domain: 'effect', value: '0.375rem' },
+  'radius.full': { id: 'radius.full', domain: 'effect', value: '9999px' },
+};
+`;
+function askQuestion(query) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+  return new Promise((resolve2) => rl.question(query, (ans) => {
+    rl.close();
+    resolve2(ans);
+  }));
+}
+var initCommand = new import_commander.Command("init").description("Initialize a new MASE project configuration").option("-p, --postcss", "Generate postcss.config.js").option("-t, --tailwind", "Generate tailwind.config.js").option("-e, --example", "Generate example.mase file").option("-a, --atomic", "Generate mase.tokens.js for Atomic Engine").option("-y, --yes", "Skip prompts and generate all defaults").action(async (options) => {
+  const cwd = process.cwd();
+  console.log("\u{1F680} Initializing MASE project...\n");
+  let generatePostcss = options.postcss;
+  let generateTailwind = options.tailwind;
+  let generateExample = options.example;
+  let generateAtomic = options.atomic;
+  if (!options.yes && !options.postcss && !options.tailwind && !options.example && !options.atomic) {
+    const answerAtomic = await askQuestion("Generate mase.tokens.js for Atomic Engine? (Y/n) ");
+    generateAtomic = answerAtomic.toLowerCase() !== "n";
+    const answerPostcss = await askQuestion("Generate postcss.config.js? (Y/n) ");
+    generatePostcss = answerPostcss.toLowerCase() !== "n";
+    const answerTailwind = await askQuestion("Generate tailwind.config.js? (Y/n) ");
+    generateTailwind = answerTailwind.toLowerCase() !== "n";
+    const answerExample = await askQuestion("Generate example.mase? (Y/n) ");
+    generateExample = answerExample.toLowerCase() !== "n";
+  } else if (options.yes) {
+    generatePostcss = true;
+    generateTailwind = true;
+    generateExample = true;
+    generateAtomic = true;
+  }
+  if (generateAtomic) {
+    const filePath = path.join(cwd, "mase.tokens.js");
+    if (!fs.existsSync(filePath)) {
+      fs.writeFileSync(filePath, TOKENS_CONFIG);
+      console.log("\u2705 Created mase.tokens.js");
+    } else {
+      console.log("\u26A0\uFE0F  mase.tokens.js already exists, skipping.");
+    }
+  }
+  if (generatePostcss) {
+    const filePath = path.join(cwd, "postcss.config.js");
+    if (!fs.existsSync(filePath)) {
+      fs.writeFileSync(filePath, POSTCSS_CONFIG);
+      console.log("\u2705 Created postcss.config.js");
+    } else {
+      console.log("\u26A0\uFE0F  postcss.config.js already exists, skipping.");
+    }
+  }
+  if (generateTailwind) {
+    const filePath = path.join(cwd, "tailwind.config.js");
+    if (!fs.existsSync(filePath)) {
+      fs.writeFileSync(filePath, TAILWIND_CONFIG);
+      console.log("\u2705 Created tailwind.config.js");
+    } else {
+      console.log("\u26A0\uFE0F  tailwind.config.js already exists, skipping.");
+    }
+  }
+  if (generateExample) {
+    const filePath = path.join(cwd, "example.mase");
+    if (!fs.existsSync(filePath)) {
+      fs.writeFileSync(filePath, EXAMPLE_MASE);
+      console.log("\u2705 Created example.mase");
+    } else {
+      console.log("\u26A0\uFE0F  example.mase already exists, skipping.");
+    }
+  }
+  console.log("\n\u2728 Initialization complete!");
 });
 
 // src/cli/commands/compile.ts
@@ -530,10 +693,10 @@ var ContractDSLParser = class {
 
 // src/dsl/validator/ValidationError.ts
 var ValidationError = class extends Error {
-  constructor(message, path) {
+  constructor(message, path3) {
     super(message);
     this.name = "ValidationError";
-    this.path = path;
+    this.path = path3;
   }
 };
 
@@ -647,22 +810,22 @@ var ContractDSLValidator = class {
    * @param errors - Array to collect errors
    */
   validateProperty(property, errors) {
-    const path = `contract.properties.${property.name}`;
+    const path3 = `contract.properties.${property.name}`;
     if (!property.name || property.name.trim().length === 0) {
       errors.push(new ValidationError(
         "Property name cannot be empty",
-        `${path}.name`
+        `${path3}.name`
       ));
     }
-    this.validateAllows(property.allows, `${path}.allows`, errors);
+    this.validateAllows(property.allows, `${path3}.allows`, errors);
     if (property.default) {
-      this.validateDefault(property.default, property.allows, `${path}.default`, errors);
+      this.validateDefault(property.default, property.allows, `${path3}.default`, errors);
     }
     if (property.constraints) {
-      this.validateConstraints(property.constraints, property.allows, `${path}.constraints`, errors);
+      this.validateConstraints(property.constraints, property.allows, `${path3}.constraints`, errors);
     }
     if (property.conflicts) {
-      this.validateConflicts(property.conflicts, `${path}.conflicts`, errors);
+      this.validateConflicts(property.conflicts, `${path3}.conflicts`, errors);
     }
   }
   /**
@@ -671,11 +834,11 @@ var ContractDSLValidator = class {
    * @param path - Path for error reporting
    * @param errors - Array to collect errors
    */
-  validateAllows(allows, path, errors) {
+  validateAllows(allows, path3, errors) {
     if (!allows || allows.length === 0) {
       errors.push(new ValidationError(
         "Property must have at least one allowed token",
-        path
+        path3
       ));
       return;
     }
@@ -684,11 +847,11 @@ var ContractDSLValidator = class {
       if (tokenSet.has(token)) {
         errors.push(new ValidationError(
           `Duplicate allowed token: '${token}'`,
-          path
+          path3
         ));
       }
       tokenSet.add(token);
-      this.validateTokenFormat(token, path, errors);
+      this.validateTokenFormat(token, path3, errors);
     }
   }
   /**
@@ -698,12 +861,12 @@ var ContractDSLValidator = class {
    * @param path - Path for error reporting
    * @param errors - Array to collect errors
    */
-  validateDefault(defaultVal, allows, path, errors) {
-    this.validateTokenFormat(defaultVal, path, errors);
+  validateDefault(defaultVal, allows, path3, errors) {
+    this.validateTokenFormat(defaultVal, path3, errors);
     if (!allows.includes(defaultVal)) {
       errors.push(new ValidationError(
         `Default token '${defaultVal}' is not in allowed tokens`,
-        path
+        path3
       ));
     }
   }
@@ -714,7 +877,7 @@ var ContractDSLValidator = class {
    * @param path - Path for error reporting
    * @param errors - Array to collect errors
    */
-  validateConstraints(constraints, allows, path, errors) {
+  validateConstraints(constraints, allows, path3, errors) {
     if (!constraints || constraints.length === 0) {
       return;
     }
@@ -723,11 +886,11 @@ var ContractDSLValidator = class {
       if (contextSet.has(constraint.context)) {
         errors.push(new ValidationError(
           `Duplicate context: '${constraint.context}'`,
-          `${path}.${constraint.context}`
+          `${path3}.${constraint.context}`
         ));
       }
       contextSet.add(constraint.context);
-      this.validateConstraint(constraint, allows, `${path}.${constraint.context}`, errors);
+      this.validateConstraint(constraint, allows, `${path3}.${constraint.context}`, errors);
     }
   }
   /**
@@ -737,17 +900,17 @@ var ContractDSLValidator = class {
    * @param path - Path for error reporting
    * @param errors - Array to collect errors
    */
-  validateConstraint(constraint, allows, path, errors) {
+  validateConstraint(constraint, allows, path3, errors) {
     if (!this.validContexts.has(constraint.context)) {
       errors.push(new ValidationError(
         `Invalid context: '${constraint.context}'. Must be one of: ${Array.from(this.validContexts).join(", ")}`,
-        `${path}.context`
+        `${path3}.context`
       ));
     }
     if (!constraint.allows || constraint.allows.length === 0) {
       errors.push(new ValidationError(
         "Constraint must have at least one allowed token",
-        `${path}.allows`
+        `${path3}.allows`
       ));
       return;
     }
@@ -755,10 +918,10 @@ var ContractDSLValidator = class {
       if (!allows.includes(token)) {
         errors.push(new ValidationError(
           `Constraint token '${token}' is not in property allowed tokens`,
-          `${path}.allows`
+          `${path3}.allows`
         ));
       }
-      this.validateTokenFormat(token, `${path}.allows`, errors);
+      this.validateTokenFormat(token, `${path3}.allows`, errors);
     }
   }
   /**
@@ -767,7 +930,7 @@ var ContractDSLValidator = class {
    * @param path - Path for error reporting
    * @param errors - Array to collect errors
    */
-  validateConflicts(conflicts, path, errors) {
+  validateConflicts(conflicts, path3, errors) {
     if (!conflicts || conflicts.length === 0) {
       return;
     }
@@ -776,14 +939,14 @@ var ContractDSLValidator = class {
       if (propertySet.has(property)) {
         errors.push(new ValidationError(
           `Duplicate conflicting property: '${property}'`,
-          path
+          path3
         ));
       }
       propertySet.add(property);
       if (!property || property.trim().length === 0) {
         errors.push(new ValidationError(
           "Conflicting property name cannot be empty",
-          path
+          path3
         ));
       }
     }
@@ -794,11 +957,11 @@ var ContractDSLValidator = class {
    * @param path - Path for error reporting
    * @param errors - Array to collect errors
    */
-  validateTokenFormat(token, path, errors) {
+  validateTokenFormat(token, path3, errors) {
     if (!token || token.trim().length === 0) {
       errors.push(new ValidationError(
         "Token cannot be empty",
-        path
+        path3
       ));
       return;
     }
@@ -806,14 +969,14 @@ var ContractDSLValidator = class {
     if (parts.length < 2) {
       errors.push(new ValidationError(
         `Invalid token format: '${token}'. Must be in format: 'category.subcategory.value'`,
-        path
+        path3
       ));
     }
     for (const part of parts) {
       if (!/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(part)) {
         errors.push(new ValidationError(
           `Invalid token part: '${part}'. Must start with a letter and contain only letters, digits, underscores, and hyphens.`,
-          path
+          path3
         ));
       }
     }
@@ -975,12 +1138,84 @@ var ContractDSLCompiler = class {
   }
 };
 
+// src/cli/utils/ErrorHandler.ts
+var CLIError = class extends Error {
+  constructor(message, code, suggestions = [], exitCode = 1) {
+    super(message);
+    this.code = code;
+    this.suggestions = suggestions;
+    this.exitCode = exitCode;
+    this.name = "CLIError";
+  }
+};
+var ErrorHandler = class {
+  static handle(error) {
+    if (error instanceof CLIError) {
+      console.error(`\u274C ${error.message}`);
+      if (error.suggestions.length > 0) {
+        console.log("\n\u{1F4A1} Suggestions:");
+        error.suggestions.forEach((s) => {
+          console.log(`  - ${s.message}`);
+          if (s.command) console.log(`    Command: ${s.command}`);
+          if (s.example) console.log(`    Example: ${s.example}`);
+        });
+      }
+      process.exit(error.exitCode);
+    }
+    const code = error && typeof error === "object" ? error.code : void 0;
+    const suggestions = code ? this.ERROR_SUGGESTIONS[code] : void 0;
+    if (error instanceof Error) {
+      console.error(`\u274C ${error.message}`);
+    } else {
+      console.error(`\u274C An unexpected error occurred: ${String(error)}`);
+    }
+    if (suggestions) {
+      console.log("\n\u{1F4A1} Suggestions:");
+      suggestions.forEach((s) => {
+        console.log(`  - ${s.message}`);
+        if (s.example) console.log(`    Example: ${s.example}`);
+      });
+    }
+    process.exit(1);
+  }
+};
+ErrorHandler.ERROR_SUGGESTIONS = {
+  "ENOENT": [
+    {
+      message: "File not found. Check the file path and try again.",
+      example: "mase compile ./contracts/Button.contract"
+    },
+    {
+      message: "Make sure the file exists in the specified location.",
+      example: "ls -la ./contracts/"
+    }
+  ],
+  "EACCES": [
+    {
+      message: "Permission denied. Check file permissions.",
+      example: "chmod +x ./contracts/Button.contract"
+    }
+  ],
+  "SYNTAX_ERROR": [
+    {
+      message: "Syntax error in contract file. Check for typos and missing brackets.",
+      example: "contract Button {\n  domain: color;\n  padding {\n    allows: [space.sm, space.md];\n  }\n}"
+    }
+  ],
+  "VALIDATION_ERROR": [
+    {
+      message: "Contract validation failed. Check the constitution rules.",
+      example: "mase validate ./contracts/Button.contract"
+    }
+  ]
+};
+
 // src/cli/commands/compile.ts
-var fs = __toESM(require("fs"));
+var fs2 = __toESM(require("fs"));
 var compileCommand = new import_commander2.Command("compile").description("Compile a contract DSL file to TypeScript").argument("<contract-file>", "Contract DSL file to compile").option("-o, --output <file>", "Output file (default: stdout)").option("--format <format>", "Output format (ts, json, ast)", "ts").option("--watch", "Watch for changes", false).action((contractFile, options) => {
-  console.log(`Compiling ${contractFile}...`);
+  console.log(`\u2139\uFE0F Compiling ${contractFile}...`);
   try {
-    const source = fs.readFileSync(contractFile, "utf-8");
+    const source = fs2.readFileSync(contractFile, "utf-8");
     const tokenizer = new ContractDSLTokenizer();
     const tokens = tokenizer.tokenize(source);
     const parser = new ContractDSLParser();
@@ -988,20 +1223,20 @@ var compileCommand = new import_commander2.Command("compile").description("Compi
     const validator = new ContractDSLValidator();
     const validationResult = validator.validate(ast);
     if (!validationResult.isValid) {
-      console.error("\u274C Validation errors:");
-      validationResult.errors.forEach((error) => {
-        console.error(`  - ${error.path}: ${error.message}`);
-      });
-      process.exit(1);
+      const error = new CLIError(
+        "Contract validation failed",
+        "VALIDATION_ERROR"
+      );
+      ErrorHandler.handle(error);
     }
     const compiler = new ContractDSLCompiler();
     const result = compiler.compile(ast);
     if (result.errors.length > 0) {
-      console.error("\u274C Compilation errors:");
-      result.errors.forEach((error) => {
-        console.error(`  - ${error}`);
-      });
-      process.exit(1);
+      const error = new CLIError(
+        "Contract compilation failed",
+        "COMPILATION_ERROR"
+      );
+      ErrorHandler.handle(error);
     }
     let output;
     switch (options.format) {
@@ -1017,27 +1252,26 @@ var compileCommand = new import_commander2.Command("compile").description("Compi
         break;
     }
     if (options.output) {
-      fs.writeFileSync(options.output, output, "utf-8");
+      fs2.writeFileSync(options.output, output, "utf-8");
       console.log(`\u2705 Compiled to ${options.output}`);
     } else {
       console.log(output);
     }
     if (options.watch) {
-      console.log("\u{1F440} Watching for changes...");
+      console.log("\u2139\uFE0F Watching for changes...");
     }
   } catch (error) {
-    console.error("\u274C Error:", error);
-    process.exit(1);
+    ErrorHandler.handle(error);
   }
 });
 
 // src/cli/commands/validate.ts
 var import_commander3 = require("commander");
-var fs2 = __toESM(require("fs"));
+var fs3 = __toESM(require("fs"));
 var validateCommand = new import_commander3.Command("validate").description("Validate a contract DSL file").argument("<contract-file>", "Contract DSL file to validate").option("--strict", "Enable strict validation", false).option("--fix", "Auto-fix issues", false).option("--watch", "Watch for changes", false).action((contractFile, options) => {
   console.log(`Validating ${contractFile}...`);
   try {
-    const source = fs2.readFileSync(contractFile, "utf-8");
+    const source = fs3.readFileSync(contractFile, "utf-8");
     const tokenizer = new ContractDSLTokenizer();
     const tokens = tokenizer.tokenize(source);
     const parser = new ContractDSLParser();
@@ -1227,14 +1461,1466 @@ var CSSMaterializer = class {
   }
 };
 
+// src/integration/atomic/reset.ts
+var CSS_RESET = `/* MASE Grounding (Reset) */
+*, ::before, ::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: currentColor;
+}
+
+html, :host {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  margin: 0;
+  line-height: inherit;
+}
+
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+b, strong {
+  font-weight: bolder;
+}
+
+code, kbd, samp, pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+
+button, input, optgroup, select, textarea {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+button, select {
+  text-transform: none;
+}
+
+button, [type="button"], [type="reset"], [type="submit"] {
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+}
+
+:-moz-focusring {
+  outline: auto;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+summary {
+  display: list-item;
+}
+
+blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol, ul, menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+textarea {
+  resize: vertical;
+}
+
+input::placeholder, textarea::placeholder {
+  opacity: 1;
+  color: #9ca3af;
+}
+
+button, [role="button"] {
+  cursor: pointer;
+}
+
+:disabled {
+  cursor: default;
+}
+
+img, svg, video, canvas, audio, iframe, embed, object {
+  display: block;
+  vertical-align: middle;
+}
+
+img, video {
+  max-width: 100%;
+  height: auto;
+}
+
+[hidden] {
+  display: none;
+}
+`;
+
+// src/integration/atomic/core/BaseGenerator.ts
+var BaseGenerator = class {
+  generate(includeReset = true) {
+    if (!includeReset) return "";
+    let css = "@layer base {\n";
+    css += CSS_RESET;
+    css += "}\n\n";
+    return css;
+  }
+};
+
+// src/integration/shared/utils.ts
+function formatVarName(tokenId, prefix = "--") {
+  return `${prefix}${tokenId.replace(/\./g, "-")}`;
+}
+function formatSuffix(tokenId) {
+  const parts = tokenId.split(".");
+  return parts.length > 1 ? parts.slice(1).join("-") : parts[0];
+}
+function isThemeAware(value) {
+  return typeof value === "object" && value !== null;
+}
+function getLightValue(token) {
+  if (typeof token.value === "string") {
+    return token.value;
+  }
+  if (isThemeAware(token.value)) {
+    return token.value.light || Object.values(token.value)[0] || "";
+  }
+  return String(token.value);
+}
+function getDarkValue(token) {
+  if (typeof token.value === "string") {
+    return null;
+  }
+  if (isThemeAware(token.value)) {
+    return token.value.dark || null;
+  }
+  return null;
+}
+function createVarDeclaration(varName, value) {
+  return `${varName}: ${value}`;
+}
+function createVarReference(varName) {
+  return `var(${varName})`;
+}
+function isValidToken(token) {
+  return !!token && !!token.id && token.value !== void 0 && token.value !== null;
+}
+function filterValidTokens(tokens) {
+  return Object.values(tokens).filter(isValidToken);
+}
+function createCssRule(selector, properties, indent = 2) {
+  if (properties.length === 0) return "";
+  const spaces = " ".repeat(indent);
+  const props = properties.map((p) => `${spaces}${p}`).join("\n");
+  return `${selector} {
+${props}
+}`;
+}
+function createLayer(layerName, content) {
+  return `@layer ${layerName} {
+${content}
+}
+`;
+}
+function sanitizeCssValue(value) {
+  return value.replace(/[<>{}]/g, "");
+}
+
+// src/integration/atomic/core/ThemeGenerator.ts
+var ThemeGenerator = class {
+  /**
+   * Mini function: Get prefix with CSS variable prefix
+   */
+  getFullPrefix(context) {
+    return `--${context.prefix}`;
+  }
+  /**
+   * Mini function: Get dark mode selector
+   */
+  getDarkModeSelector() {
+    return '[data-theme="dark"]';
+  }
+  /**
+   * Mini function: Process a single token
+   */
+  processToken(token, fullPrefix) {
+    if (!isValidToken(token)) {
+      return { default: "" };
+    }
+    const varName = formatVarName(token.id, fullPrefix);
+    const lightValue = getLightValue(token);
+    const darkValue = getDarkValue(token);
+    const result = {
+      default: createVarDeclaration(varName, lightValue)
+    };
+    if (darkValue) {
+      result.dark = createVarDeclaration(varName, darkValue);
+    }
+    return result;
+  }
+  /**
+   * Mini function: Collect variable declarations from tokens
+   */
+  collectVariables(tokens, fullPrefix) {
+    const validTokens = filterValidTokens(tokens);
+    const defaultVars = [];
+    const darkVars = [];
+    validTokens.forEach((token) => {
+      const processed = this.processToken(token, fullPrefix);
+      if (processed.default) {
+        defaultVars.push(`  ${processed.default};`);
+      }
+      if (processed.dark) {
+        darkVars.push(`  ${processed.dark};`);
+      }
+    });
+    return { default: defaultVars, dark: darkVars };
+  }
+  /**
+   * Mini function: Generate default theme block
+   */
+  generateDefaultBlock(selector, vars) {
+    if (vars.length === 0) return "";
+    return createCssRule(selector, vars, 2);
+  }
+  /**
+   * Mini function: Generate dark mode block
+   */
+  generateDarkModeBlock(vars) {
+    if (vars.length === 0) return "";
+    return createCssRule(this.getDarkModeSelector(), vars, 2);
+  }
+  generate(tokens, context) {
+    const fullPrefix = this.getFullPrefix(context);
+    const { default: defaultVars, dark: darkVars } = this.collectVariables(tokens, fullPrefix);
+    let content = "";
+    content += this.generateDefaultBlock(context.selector, defaultVars);
+    content += "\n";
+    content += this.generateDarkModeBlock(darkVars);
+    return createLayer("theme", content);
+  }
+};
+
+// src/integration/atomic/handlers/BaseHandler.ts
+var BaseHandler = class {
+  /**
+   * Mini function: Validate token before processing
+   */
+  validateToken(token) {
+    return isValidToken(token);
+  }
+  /**
+   * Mini function: Sanitize CSS value
+   */
+  sanitize(value) {
+    return sanitizeCssValue(value);
+  }
+  /**
+   * Mini function: Create CSS rule
+   */
+  createRule(selector, property, value) {
+    const sanitizedValue = this.sanitize(value);
+    return `  .${selector} { ${property}: ${sanitizedValue}; }
+`;
+  }
+  /**
+   * Mini function: Create multiple CSS rules
+   */
+  createRules(rules) {
+    return rules.map((rule) => this.createRule(rule.selector, rule.property, rule.value)).join("");
+  }
+  /**
+   * Mini function: Extract suffix from token ID
+   */
+  extractSuffix(tokenId) {
+    const parts = tokenId.split(".");
+    return parts.length > 1 ? parts.slice(1).join("-") : parts[0];
+  }
+  /**
+   * Mini function: Check if token ID contains a keyword
+   */
+  containsKeyword(tokenId, keyword) {
+    return tokenId.toLowerCase().includes(keyword.toLowerCase());
+  }
+  /**
+   * Mini function: Generate directional rules (top, right, bottom, left, x, y, all)
+   * DRY implementation for properties that have directional variants
+   */
+  generateDirectionalRules(baseSelector, suffix, value, mappings) {
+    const rules = [];
+    for (const [dir, prop] of Object.entries(mappings)) {
+      const selectorPart = dir ? `${baseSelector}${dir}` : baseSelector;
+      const fullSelector = `${selectorPart}-${suffix}`;
+      if (Array.isArray(prop)) {
+        prop.forEach((p) => rules.push({ selector: fullSelector, property: p, value }));
+      } else {
+        rules.push({ selector: fullSelector, property: prop, value });
+      }
+    }
+    return this.createRules(rules);
+  }
+  /**
+   * Mini function: Generate rules by matching token ID against a prefix map (Scenario B)
+   * Use this when the token ID itself dictates the property (e.g. 'p-4' -> padding, 'mt-4' -> margin-top)
+   */
+  generateRulesFromPrefix(token, varName, suffix, prefixMap) {
+    const prefixes = Object.keys(prefixMap).sort((a, b) => b.length - a.length);
+    for (const prefix of prefixes) {
+      console.log("Checking prefix:", prefix);
+      console.log("Token ID:", token.id);
+      console.log("Suffix:", suffix);
+      console.log("Match ID:", token.id === prefix || token.id.startsWith(`${prefix}-`));
+      console.log("Match Suffix:", suffix === prefix || suffix.startsWith(`${prefix}-`));
+      if (token.id === prefix || token.id.startsWith(`${prefix}-`) || suffix === prefix || suffix.startsWith(`${prefix}-`)) {
+        const definition = prefixMap[prefix];
+        const selector = suffix;
+        if (typeof definition === "string") {
+          return this.createRule(selector, definition, varName);
+        } else if (Array.isArray(definition)) {
+          return this.createRules(definition.map((p) => ({ selector, property: p, value: varName })));
+        } else {
+          const val = definition.valueTransform ? definition.valueTransform(varName) : varName;
+          return this.createRule(selector, definition.property, val);
+        }
+      }
+    }
+    return "";
+  }
+  /**
+   * Mini function: Generate utilities based on a configuration map
+   * This implements DRY by allowing handlers to define mappings instead of writing repetitive if-blocks.
+   */
+  generateUtilities(token, varName, suffix, config) {
+    const rules = [];
+    for (const [match, definition] of Object.entries(config)) {
+      if (this.containsKeyword(token.id, match)) {
+        let property;
+        let classPrefix;
+        let valueMap;
+        let valueTransform;
+        if (typeof definition === "string") {
+          property = definition;
+          classPrefix = match;
+        } else {
+          property = definition.property;
+          classPrefix = definition.classPrefix !== void 0 ? definition.classPrefix : match;
+          valueMap = definition.valueMap;
+          valueTransform = definition.valueTransform;
+        }
+        let finalSuffix = suffix;
+        if (classPrefix === match && finalSuffix.startsWith(match)) {
+          finalSuffix = finalSuffix.substring(match.length);
+          if (finalSuffix.startsWith("-")) {
+            finalSuffix = finalSuffix.substring(1);
+          }
+        }
+        if (valueMap && valueMap[finalSuffix]) {
+          finalSuffix = valueMap[finalSuffix];
+        }
+        const selector = finalSuffix ? classPrefix ? `${classPrefix}-${finalSuffix}` : finalSuffix : classPrefix || match;
+        let finalValue = varName;
+        if (valueTransform) {
+          finalValue = valueTransform(varName);
+        }
+        rules.push({ selector, property, value: finalValue });
+      }
+    }
+    return this.createRules(rules);
+  }
+};
+
+// src/integration/atomic/handlers/ColorHandler.ts
+var ColorHandler = class extends BaseHandler {
+  canHandle(token) {
+    return this.validateToken(token) && token.domain === "color" && !this.containsKeyword(token.id, "border") && !this.containsKeyword(token.id, "outline") && !this.containsKeyword(token.id, "ring");
+  }
+  generate(token, varName, suffix) {
+    if (!this.validateToken(token)) {
+      return "";
+    }
+    const standardRules = this.createRules([
+      // Text Color
+      { selector: `text-${suffix}`, property: "color", value: varName },
+      // Background Color
+      { selector: `bg-${suffix}`, property: "background-color", value: varName },
+      // Outline Color
+      { selector: `outline-${suffix}`, property: "outline-color", value: varName },
+      // Ring Color (Simplified)
+      { selector: `ring-${suffix}`, property: "--tw-ring-color", value: varName },
+      { selector: `ring-offset-${suffix}`, property: "outline-color", value: varName },
+      // Decoration Color
+      { selector: `decoration-${suffix}`, property: "text-decoration-color", value: varName },
+      // Accent Color
+      { selector: `accent-${suffix}`, property: "accent-color", value: varName },
+      // Caret Color
+      { selector: `caret-${suffix}`, property: "caret-color", value: varName },
+      // Placeholder Color
+      { selector: `placeholder-${suffix}::placeholder`, property: "color", value: varName }
+    ]);
+    const borderRules = this.generateDirectionalRules("border", suffix, varName, {
+      "": "border-color",
+      "-t": "border-top-color",
+      "-r": "border-right-color",
+      "-b": "border-bottom-color",
+      "-l": "border-left-color",
+      "-x": ["border-left-color", "border-right-color"],
+      "-y": ["border-top-color", "border-bottom-color"]
+    });
+    return standardRules + borderRules;
+  }
+};
+
+// src/integration/atomic/handlers/SpaceHandler.ts
+var SpaceHandler = class extends BaseHandler {
+  canHandle(token) {
+    return this.validateToken(token) && (this.containsKeyword(token.id, "padding") || this.containsKeyword(token.id, "margin") || this.containsKeyword(token.id, "width") || this.containsKeyword(token.id, "height") || this.containsKeyword(token.id, "gap") || this.containsKeyword(token.id, "space") || // Shorthand prefixes (simplified check)
+    /^[pmwh]([xytrbl]|in|ax)?-?/.test(token.id) || /^gap-?/.test(token.id) || /^space-?/.test(token.id));
+  }
+  generate(token, varName, suffix) {
+    if (!this.validateToken(token)) return "";
+    if (token.id.startsWith("space-x")) {
+      return this.createRule(`space-x-${this.extractValueSuffix(token.id)}`, "margin-left", `calc(${varName} * var(--tw-space-x-reverse))`);
+    }
+    if (token.id.startsWith("space-y")) {
+      return this.createRule(`space-y-${this.extractValueSuffix(token.id)}`, "margin-top", `calc(${varName} * var(--tw-space-y-reverse))`);
+    }
+    return this.generateRulesFromPrefix(token, varName, suffix, {
+      // Padding
+      "pt": "padding-top",
+      "pr": "padding-right",
+      "pb": "padding-bottom",
+      "pl": "padding-left",
+      "px": ["padding-left", "padding-right"],
+      "py": ["padding-top", "padding-bottom"],
+      "p": "padding",
+      // Margin
+      "mt": "margin-top",
+      "mr": "margin-right",
+      "mb": "margin-bottom",
+      "ml": "margin-left",
+      "mx": ["margin-left", "margin-right"],
+      "my": ["margin-top", "margin-bottom"],
+      "m": "margin",
+      // Width/Height
+      "min-w": "min-width",
+      "max-w": "max-width",
+      "min-h": "min-height",
+      "max-h": "max-height",
+      "w": "width",
+      "h": "height",
+      // Gap
+      "gap-x": "column-gap",
+      "gap-y": "row-gap",
+      "gap": "gap"
+    });
+  }
+  /**
+   * Helper to extract the value part of the suffix for space-x/y
+   * e.g. space-x-4 -> 4
+   */
+  extractValueSuffix(id) {
+    const parts = id.split("-");
+    return parts.slice(2).join("-");
+  }
+};
+
+// src/integration/atomic/handlers/TypographyHandler.ts
+var TypographyHandler = class extends BaseHandler {
+  canHandle(token) {
+    return this.validateToken(token) && token.domain === "typography";
+  }
+  generate(token, varName, suffix) {
+    if (!this.validateToken(token)) {
+      return "";
+    }
+    const fullSuffix = token.id.replace(/\./g, "-");
+    const rules = this.generateRulesFromPrefix(token, varName, fullSuffix, {
+      // Font Weight
+      "font-thin": { property: "font-weight" },
+      "font-extralight": { property: "font-weight" },
+      "font-light": { property: "font-weight" },
+      "font-normal": { property: "font-weight" },
+      "font-medium": { property: "font-weight" },
+      "font-semibold": { property: "font-weight" },
+      "font-bold": { property: "font-weight" },
+      "font-extrabold": { property: "font-weight" },
+      "font-black": { property: "font-weight" },
+      // Font Family
+      "font-sans": { property: "font-family" },
+      "font-serif": { property: "font-family" },
+      "font-mono": { property: "font-family" },
+      // Font Size
+      "text": { property: "font-size" },
+      // Line Height
+      "leading": { property: "line-height" },
+      // Letter Spacing
+      "tracking": { property: "letter-spacing" },
+      // Font Style
+      "italic": { property: "font-style", valueTransform: () => "italic" },
+      "not-italic": { property: "font-style", valueTransform: () => "normal" },
+      // Text Decoration
+      "underline": { property: "text-decoration-line", valueTransform: () => "underline" },
+      "no-underline": { property: "text-decoration-line", valueTransform: () => "none" },
+      "line-through": { property: "text-decoration-line", valueTransform: () => "line-through" },
+      "decoration": { property: "text-decoration-line" },
+      // Text Transform
+      "uppercase": { property: "text-transform", valueTransform: () => "uppercase" },
+      "lowercase": { property: "text-transform", valueTransform: () => "lowercase" },
+      "capitalize": { property: "text-transform", valueTransform: () => "capitalize" },
+      "normal-case": { property: "text-transform", valueTransform: () => "none" }
+    });
+    if (rules) return rules;
+    return "";
+  }
+};
+
+// src/integration/atomic/handlers/EffectHandler.ts
+var EffectHandler = class extends BaseHandler {
+  canHandle(token) {
+    return this.validateToken(token) && (this.containsKeyword(token.id, "shadow") || this.containsKeyword(token.id, "opacity"));
+  }
+  generate(token, varName, suffix) {
+    if (!this.validateToken(token)) {
+      return "";
+    }
+    if (this.containsKeyword(token.id, "drop-shadow")) return "";
+    return this.generateRulesFromPrefix(token, varName, suffix, {
+      "shadow": "box-shadow",
+      "opacity": "opacity"
+    });
+  }
+};
+
+// src/integration/atomic/handlers/LayoutHandler.ts
+var LayoutHandler = class extends BaseHandler {
+  canHandle(token) {
+    if (this.containsKeyword(token.id, "background")) return false;
+    return this.validateToken(token) && (this.containsKeyword(token.id, "display") || this.containsKeyword(token.id, "position") || this.containsKeyword(token.id, "visibility") || this.containsKeyword(token.id, "z-index") || this.containsKeyword(token.id, "overflow") || this.containsKeyword(token.id, "isolation") || this.containsKeyword(token.id, "object") || // Positioning
+    this.containsKeyword(token.id, "inset") || this.containsKeyword(token.id, "top") || this.containsKeyword(token.id, "right") || this.containsKeyword(token.id, "bottom") || this.containsKeyword(token.id, "left") || // Specific values for display/position/visibility
+    this.containsKeyword(token.id, "block") || this.containsKeyword(token.id, "inline") || this.containsKeyword(token.id, "hidden") || this.containsKeyword(token.id, "static") || this.containsKeyword(token.id, "fixed") || this.containsKeyword(token.id, "absolute") || this.containsKeyword(token.id, "relative") || this.containsKeyword(token.id, "sticky") || this.containsKeyword(token.id, "visible") || this.containsKeyword(token.id, "invisible") || this.containsKeyword(token.id, "isolate") || this.containsKeyword(token.id, "z-"));
+  }
+  generate(token, varName, suffix) {
+    if (!this.validateToken(token)) {
+      return "";
+    }
+    return this.generateRulesFromPrefix(token, varName, suffix, {
+      // Positioning
+      "inset-x": ["left", "right"],
+      "inset-y": ["top", "bottom"],
+      "inset": ["top", "right", "bottom", "left"],
+      "top": "top",
+      "right": "right",
+      "bottom": "bottom",
+      "left": "left",
+      // Display
+      "block": { property: "display", valueTransform: () => "block" },
+      "inline-block": { property: "display", valueTransform: () => "inline-block" },
+      "inline-flex": { property: "display", valueTransform: () => "inline-flex" },
+      "flex": { property: "display", valueTransform: () => "flex" },
+      "inline-grid": { property: "display", valueTransform: () => "inline-grid" },
+      "grid": { property: "display", valueTransform: () => "grid" },
+      "hidden": { property: "display", valueTransform: () => "none" },
+      "display": { property: "display" },
+      // Position
+      "static": { property: "position", valueTransform: () => "static" },
+      "fixed": { property: "position", valueTransform: () => "fixed" },
+      "absolute": { property: "position", valueTransform: () => "absolute" },
+      "relative": { property: "position", valueTransform: () => "relative" },
+      "sticky": { property: "position", valueTransform: () => "sticky" },
+      "position": { property: "position" },
+      // Visibility
+      "visible": { property: "visibility", valueTransform: () => "visible" },
+      "invisible": { property: "visibility", valueTransform: () => "hidden" },
+      "visibility": { property: "visibility" },
+      // Z-Index
+      "z": "z-index",
+      "z-index": "z-index",
+      // Overflow
+      "overflow-x": "overflow-x",
+      "overflow-y": "overflow-y",
+      "overflow": "overflow",
+      // Isolation
+      "isolate": { property: "isolation", valueTransform: () => "isolate" },
+      "isolation-auto": { property: "isolation", valueTransform: () => "auto" },
+      "isolation": "isolation",
+      // Object Fit
+      "object-contain": { property: "object-fit", valueTransform: () => "contain" },
+      "object-cover": { property: "object-fit", valueTransform: () => "cover" },
+      "object-fill": { property: "object-fit", valueTransform: () => "fill" },
+      "object-none": { property: "object-fit", valueTransform: () => "none" },
+      "object-scale-down": { property: "object-fit", valueTransform: () => "scale-down" },
+      // Object Position (fallback for other object-*)
+      "object": { property: "object-position" }
+    });
+  }
+};
+
+// src/integration/atomic/handlers/FlexboxHandler.ts
+var FlexboxHandler = class extends BaseHandler {
+  canHandle(token) {
+    return this.validateToken(token) && (this.containsKeyword(token.id, "flex") || this.containsKeyword(token.id, "justify") || this.containsKeyword(token.id, "align") || this.containsKeyword(token.id, "place") || this.containsKeyword(token.id, "order") && !this.containsKeyword(token.id, "border"));
+  }
+  generate(token, varName, suffix) {
+    if (!this.validateToken(token)) {
+      return "";
+    }
+    if (token.id === "flex") {
+      return this.createRule(suffix, "display", "flex");
+    }
+    return this.generateRulesFromPrefix(token, varName, suffix, {
+      // Flex Direction
+      "flex-row": { property: "flex-direction", valueTransform: () => "row" },
+      "flex-row-reverse": { property: "flex-direction", valueTransform: () => "row-reverse" },
+      "flex-col": { property: "flex-direction", valueTransform: () => "column" },
+      "flex-col-reverse": { property: "flex-direction", valueTransform: () => "column-reverse" },
+      // Flex Wrap
+      "flex-wrap": { property: "flex-wrap", valueTransform: () => "wrap" },
+      "flex-wrap-reverse": { property: "flex-wrap", valueTransform: () => "wrap-reverse" },
+      "flex-nowrap": { property: "flex-wrap", valueTransform: () => "nowrap" },
+      // Flex Grow/Shrink/Basis
+      "flex-grow": "flex-grow",
+      "grow": "flex-grow",
+      // Alias
+      "flex-shrink": "flex-shrink",
+      "shrink": "flex-shrink",
+      // Alias
+      "flex-basis": "flex-basis",
+      "basis": "flex-basis",
+      // Alias
+      // Alignment
+      "justify-content": "justify-content",
+      "justify-items": "justify-items",
+      "justify-self": "justify-self",
+      "justify": "justify-content",
+      // Short alias
+      "align-content": "align-content",
+      "align-items": "align-items",
+      "align-self": "align-self",
+      "align": "align-items",
+      // Short alias
+      "items": "align-items",
+      // Tailwind alias
+      "content": "align-content",
+      // Tailwind alias
+      "self": "align-self",
+      // Tailwind alias
+      "place-content": "place-content",
+      "place-items": "place-items",
+      "place-self": "place-self",
+      "order": "order",
+      // Generic Flex (e.g. flex-1, flex-auto)
+      // Must be checked after specific flex-* properties (handled by length sort in generateRulesFromPrefix)
+      "flex": "flex"
+    });
+  }
+};
+
+// src/integration/atomic/handlers/GridHandler.ts
+var GridHandler = class extends BaseHandler {
+  canHandle(token) {
+    if (token.id.startsWith("flex-")) {
+      return false;
+    }
+    return this.validateToken(token) && (this.containsKeyword(token.id, "grid") || this.containsKeyword(token.id, "col") && !this.containsKeyword(token.id, "color") && !this.containsKeyword(token.id, "collapse") || this.containsKeyword(token.id, "row"));
+  }
+  generate(token, varName, suffix) {
+    if (!this.validateToken(token)) {
+      return "";
+    }
+    return this.generateRulesFromPrefix(token, varName, suffix, {
+      // Grid Template
+      "grid-cols": "grid-template-columns",
+      "grid-rows": "grid-template-rows",
+      "grid-template-columns": "grid-template-columns",
+      "grid-template-rows": "grid-template-rows",
+      // Auto Flow/Cols/Rows
+      "grid-flow": "grid-auto-flow",
+      "auto-cols": "grid-auto-columns",
+      "auto-rows": "grid-auto-rows",
+      "grid-auto-flow": "grid-auto-flow",
+      "grid-auto-columns": "grid-auto-columns",
+      "grid-auto-rows": "grid-auto-rows",
+      // Grid Column
+      "col-start": "grid-column-start",
+      "col-end": "grid-column-end",
+      "col": "grid-column",
+      // Fallback for col-span-* or generic col-*
+      // Grid Row
+      "row-start": "grid-row-start",
+      "row-end": "grid-row-end",
+      "row": "grid-row",
+      // Display Grid
+      "grid": { property: "display", valueTransform: () => "grid" }
+    });
+  }
+};
+
+// src/integration/atomic/handlers/BackgroundHandler.ts
+var BackgroundHandler = class extends BaseHandler {
+  canHandle(token) {
+    if (token.domain === "color") {
+      return false;
+    }
+    return this.validateToken(token) && (this.containsKeyword(token.id, "background") || this.containsKeyword(token.id, "bg") || this.containsKeyword(token.id, "gradient"));
+  }
+  generate(token, varName, suffix) {
+    if (!this.validateToken(token)) {
+      return "";
+    }
+    return this.generateRulesFromPrefix(token, varName, suffix, {
+      // Background Size
+      "bg-cover": { property: "background-size", valueTransform: () => "cover" },
+      "bg-contain": { property: "background-size", valueTransform: () => "contain" },
+      "background-size": { property: "background-size" },
+      // Background Position
+      "bg-top": { property: "background-position", valueTransform: () => "top" },
+      "bg-bottom": { property: "background-position", valueTransform: () => "bottom" },
+      "bg-center": { property: "background-position", valueTransform: () => "center" },
+      "bg-left": { property: "background-position", valueTransform: () => "left" },
+      "bg-right": { property: "background-position", valueTransform: () => "right" },
+      "background-position": { property: "background-position" },
+      // Background Repeat
+      "bg-no-repeat": { property: "background-repeat", valueTransform: () => "no-repeat" },
+      "bg-repeat-x": { property: "background-repeat", valueTransform: () => "repeat-x" },
+      "bg-repeat-y": { property: "background-repeat", valueTransform: () => "repeat-y" },
+      "bg-repeat": { property: "background-repeat", valueTransform: () => "repeat" },
+      "background-repeat": { property: "background-repeat" },
+      // Background Attachment
+      "bg-fixed": { property: "background-attachment", valueTransform: () => "fixed" },
+      "bg-local": { property: "background-attachment", valueTransform: () => "local" },
+      "bg-scroll": { property: "background-attachment", valueTransform: () => "scroll" },
+      "background-attachment": { property: "background-attachment" },
+      // Background Clip
+      "bg-clip": { property: "background-clip" },
+      "background-clip": { property: "background-clip" },
+      // Background Origin
+      "bg-origin": { property: "background-origin" },
+      "background-origin": { property: "background-origin" },
+      // Background Image / Gradient
+      "bg-gradient": { property: "background-image" },
+      "gradient": { property: "background-image" },
+      "background-image": { property: "background-image" },
+      // Generic fallback for other bg- properties (e.g. background-image)
+      // Note: background-color is handled by ColorHandler
+      "bg": { property: "background-image" },
+      "background-color": { property: "background-color" }
+    });
+  }
+};
+
+// src/integration/atomic/handlers/BorderHandler.ts
+var BorderHandler = class extends BaseHandler {
+  canHandle(token) {
+    if (!this.validateToken(token)) return false;
+    if (token.domain === "color") {
+      return this.containsKeyword(token.id, "border") || this.containsKeyword(token.id, "outline") || this.containsKeyword(token.id, "ring");
+    }
+    if (this.containsKeyword(token.id, "background") || this.containsKeyword(token.id, "bg")) {
+      return false;
+    }
+    return this.containsKeyword(token.id, "border") && !this.containsKeyword(token.id, "collapse") || this.containsKeyword(token.id, "radius") || this.containsKeyword(token.id, "outline") || this.containsKeyword(token.id, "ring");
+  }
+  generate(token, varName, suffix) {
+    if (!this.validateToken(token)) {
+      return "";
+    }
+    if (this.containsKeyword(token.id, "border-radius") || this.containsKeyword(token.id, "radius")) {
+      return this.generateDirectionalRules("rounded", suffix, varName, {
+        "": "border-radius",
+        "t": ["border-top-left-radius", "border-top-right-radius"],
+        "r": ["border-top-right-radius", "border-bottom-right-radius"],
+        "b": ["border-bottom-right-radius", "border-bottom-left-radius"],
+        "l": ["border-bottom-left-radius", "border-top-left-radius"],
+        "tl": "border-top-left-radius",
+        "tr": "border-top-right-radius",
+        "br": "border-bottom-right-radius",
+        "bl": "border-bottom-left-radius"
+      });
+    }
+    if (token.domain !== "color") {
+      const widthRules = this.generateRulesFromPrefix(token, varName, suffix, {
+        "border-t": "border-top-width",
+        "border-r": "border-right-width",
+        "border-b": "border-bottom-width",
+        "border-l": "border-left-width",
+        "border-x": ["border-left-width", "border-right-width"],
+        "border-y": ["border-top-width", "border-bottom-width"],
+        "border": "border-width"
+        // Generic border width
+      });
+      if (widthRules) return widthRules;
+    }
+    if (token.domain === "color" && this.containsKeyword(token.id, "border")) {
+      return this.generateRulesFromPrefix(token, varName, suffix, {
+        "border-t": "border-top-color",
+        "border-r": "border-right-color",
+        "border-b": "border-bottom-color",
+        "border-l": "border-left-color",
+        "border-x": ["border-left-color", "border-right-color"],
+        "border-y": ["border-top-color", "border-bottom-color"],
+        "border": "border-color"
+      });
+    }
+    if (this.containsKeyword(token.id, "border-style")) {
+      const value = this.extractSuffix(token.id);
+      return this.createRule(`border-${value}`, "border-style", value);
+    }
+    if (this.containsKeyword(token.id, "outline")) {
+      const value = this.extractSuffix(token.id);
+      if (this.containsKeyword(token.id, "width")) {
+        return this.createRule(`outline-${value}`, "outline-width", varName);
+      }
+      if (this.containsKeyword(token.id, "color")) {
+        return this.createRule(`outline-${value}`, "outline-color", varName);
+      }
+      if (this.containsKeyword(token.id, "style")) {
+        return this.createRule(`outline-${value}`, "outline-style", varName);
+      }
+      if (this.containsKeyword(token.id, "offset")) {
+        return this.createRule(`outline-offset-${value}`, "outline-offset", varName);
+      }
+    }
+    if (this.containsKeyword(token.id, "ring")) {
+      const fullSuffix = token.id.replace(/\./g, "-");
+      return this.generateRulesFromPrefix(token, varName, fullSuffix, {
+        "ring": { property: "box-shadow" }
+      });
+    }
+    return "";
+  }
+};
+
+// src/integration/atomic/handlers/TransformHandler.ts
+var TransformHandler = class extends BaseHandler {
+  canHandle(token) {
+    return this.validateToken(token) && (this.containsKeyword(token.id, "transform") || this.containsKeyword(token.id, "scale") || this.containsKeyword(token.id, "rotate") || this.containsKeyword(token.id, "translate") || this.containsKeyword(token.id, "skew") || this.containsKeyword(token.id, "perspective") || this.containsKeyword(token.id, "origin"));
+  }
+  generate(token, varName, suffix) {
+    if (!this.validateToken(token)) {
+      return "";
+    }
+    return this.generateRulesFromPrefix(token, varName, suffix, {
+      // Scale
+      "scale-x": { property: "transform", valueTransform: (v) => `scaleX(${v})` },
+      "scale-y": { property: "transform", valueTransform: (v) => `scaleY(${v})` },
+      "scale": { property: "transform", valueTransform: (v) => `scale(${v})` },
+      // Rotate
+      "rotate": { property: "transform", valueTransform: (v) => `rotate(${v})` },
+      // Translate
+      "translate-x": { property: "transform", valueTransform: (v) => `translateX(${v})` },
+      "translate-y": { property: "transform", valueTransform: (v) => `translateY(${v})` },
+      // Skew
+      "skew-x": { property: "transform", valueTransform: (v) => `skewX(${v})` },
+      "skew-y": { property: "transform", valueTransform: (v) => `skewY(${v})` },
+      // Origin
+      "origin-center": { property: "transform-origin", valueTransform: () => "center" },
+      "origin-top": { property: "transform-origin", valueTransform: () => "top" },
+      "origin-top-right": { property: "transform-origin", valueTransform: () => "top right" },
+      "origin-right": { property: "transform-origin", valueTransform: () => "right" },
+      "origin-bottom-right": { property: "transform-origin", valueTransform: () => "bottom right" },
+      "origin-bottom": { property: "transform-origin", valueTransform: () => "bottom" },
+      "origin-bottom-left": { property: "transform-origin", valueTransform: () => "bottom left" },
+      "origin-left": { property: "transform-origin", valueTransform: () => "left" },
+      "origin-top-left": { property: "transform-origin", valueTransform: () => "top left" },
+      // Generic Origin (for arbitrary values)
+      "origin": "transform-origin",
+      // Perspective
+      "perspective": "perspective"
+    });
+  }
+};
+
+// src/integration/atomic/handlers/TransitionHandler.ts
+var TransitionHandler = class extends BaseHandler {
+  canHandle(token) {
+    return this.validateToken(token) && (this.containsKeyword(token.id, "transition") || this.containsKeyword(token.id, "animation") || this.containsKeyword(token.id, "animate") || this.containsKeyword(token.id, "duration") || this.containsKeyword(token.id, "delay") || this.containsKeyword(token.id, "ease"));
+  }
+  generate(token, varName, suffix) {
+    if (!this.validateToken(token)) {
+      return "";
+    }
+    return this.generateRulesFromPrefix(token, varName, suffix, {
+      // Transition Property
+      "transition-none": { property: "transition-property", valueTransform: () => "none" },
+      "transition-all": { property: "transition-property", valueTransform: () => "all" },
+      "transition-colors": { property: "transition-property", valueTransform: () => "color, background-color, border-color, text-decoration-color, fill, stroke" },
+      "transition-opacity": { property: "transition-property", valueTransform: () => "opacity" },
+      "transition-shadow": { property: "transition-property", valueTransform: () => "box-shadow" },
+      "transition-transform": { property: "transition-property", valueTransform: () => "transform" },
+      "transition": { property: "transition-property" },
+      // Transition Behavior
+      "transition-normal": { property: "transition-behavior", valueTransform: () => "normal" },
+      "transition-allow-discrete": { property: "transition-behavior", valueTransform: () => "allow-discrete" },
+      // Duration
+      "duration": "transition-duration",
+      "transition-duration": "transition-duration",
+      // Timing Function (Ease)
+      "ease-linear": { property: "transition-timing-function", valueTransform: () => "linear" },
+      "ease-in": { property: "transition-timing-function", valueTransform: () => "cubic-bezier(0.4, 0, 1, 1)" },
+      "ease-out": { property: "transition-timing-function", valueTransform: () => "cubic-bezier(0, 0, 0.2, 1)" },
+      "ease-in-out": { property: "transition-timing-function", valueTransform: () => "cubic-bezier(0.4, 0, 0.2, 1)" },
+      "ease": "transition-timing-function",
+      // Delay
+      "delay": "transition-delay",
+      "transition-delay": "transition-delay",
+      // Animation
+      "animate-none": { property: "animation", valueTransform: () => "none" },
+      "animate-spin": { property: "animation", valueTransform: () => "spin 1s linear infinite" },
+      "animate-ping": { property: "animation", valueTransform: () => "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite" },
+      "animate-pulse": { property: "animation", valueTransform: () => "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" },
+      "animate-bounce": { property: "animation", valueTransform: () => "bounce 1s infinite" },
+      "animate": "animation",
+      "animation": "animation"
+    });
+  }
+};
+
+// src/integration/atomic/handlers/InteractivityHandler.ts
+var InteractivityHandler = class extends BaseHandler {
+  canHandle(token) {
+    return this.validateToken(token) && (this.containsKeyword(token.id, "cursor") || this.containsKeyword(token.id, "pointer") || this.containsKeyword(token.id, "select") || this.containsKeyword(token.id, "scroll") || this.containsKeyword(token.id, "touch") || this.containsKeyword(token.id, "accent") || this.containsKeyword(token.id, "appearance") || this.containsKeyword(token.id, "caret") || this.containsKeyword(token.id, "resize") || this.containsKeyword(token.id, "will-change"));
+  }
+  generate(token, varName, suffix) {
+    if (!this.validateToken(token)) {
+      return "";
+    }
+    return this.generateRulesFromPrefix(token, varName, suffix, {
+      // Scroll Margin
+      "scroll-m": "scroll-margin",
+      "scroll-mx": "scroll-margin-inline",
+      "scroll-my": "scroll-margin-block",
+      "scroll-mt": "scroll-margin-top",
+      "scroll-mr": "scroll-margin-right",
+      "scroll-mb": "scroll-margin-bottom",
+      "scroll-ml": "scroll-margin-left",
+      // Scroll Padding
+      "scroll-p": "scroll-padding",
+      "scroll-px": "scroll-padding-inline",
+      "scroll-py": "scroll-padding-block",
+      "scroll-pt": "scroll-padding-top",
+      "scroll-pr": "scroll-padding-right",
+      "scroll-pb": "scroll-padding-bottom",
+      "scroll-pl": "scroll-padding-left",
+      // Resize
+      "resize-none": { property: "resize", valueTransform: () => "none" },
+      "resize-y": { property: "resize", valueTransform: () => "vertical" },
+      "resize-x": { property: "resize", valueTransform: () => "horizontal" },
+      "resize": { property: "resize", valueTransform: () => "both" },
+      // Default resize
+      // Accent
+      "accent": "accent-color",
+      // Appearance
+      "appearance": "appearance",
+      // Caret
+      "caret": "caret-color",
+      // Cursor
+      "cursor": "cursor",
+      // Pointer Events
+      "pointer-events": "pointer-events",
+      // Scroll Behavior
+      "scroll-auto": { property: "scroll-behavior", valueTransform: () => "auto" },
+      "scroll-smooth": { property: "scroll-behavior", valueTransform: () => "smooth" },
+      // Scroll Snap
+      "snap-start": { property: "scroll-snap-align", valueTransform: () => "start" },
+      "snap-end": { property: "scroll-snap-align", valueTransform: () => "end" },
+      "snap-center": { property: "scroll-snap-align", valueTransform: () => "center" },
+      "snap-align-none": { property: "scroll-snap-align", valueTransform: () => "none" },
+      "snap-normal": { property: "scroll-snap-stop", valueTransform: () => "normal" },
+      "snap-always": { property: "scroll-snap-stop", valueTransform: () => "always" },
+      "snap-none": { property: "scroll-snap-type", valueTransform: () => "none" },
+      "snap-x": { property: "scroll-snap-type", valueTransform: () => "x var(--scroll-snap-strictness)" },
+      "snap-y": { property: "scroll-snap-type", valueTransform: () => "y var(--scroll-snap-strictness)" },
+      "snap-both": { property: "scroll-snap-type", valueTransform: () => "both var(--scroll-snap-strictness)" },
+      "snap-mandatory": { property: "--scroll-snap-strictness", valueTransform: () => "mandatory" },
+      "snap-proximity": { property: "--scroll-snap-strictness", valueTransform: () => "proximity" },
+      // Touch Action
+      "touch": "touch-action",
+      // User Select
+      "select": "user-select",
+      // Will Change
+      "will-change": "will-change"
+    });
+  }
+};
+
+// src/integration/atomic/handlers/TableHandler.ts
+var TableHandler = class extends BaseHandler {
+  canHandle(token) {
+    return this.validateToken(token) && (this.containsKeyword(token.id, "table") || this.containsKeyword(token.id, "border-collapse") || this.containsKeyword(token.id, "border-separate") || // Added explicit check
+    this.containsKeyword(token.id, "border-spacing") || this.containsKeyword(token.id, "caption"));
+  }
+  generate(token, varName, suffix) {
+    if (!this.validateToken(token)) {
+      return "";
+    }
+    return this.generateRulesFromPrefix(token, varName, suffix, {
+      // Border Collapse
+      "border-collapse": { property: "border-collapse", valueTransform: () => "collapse" },
+      "border-separate": { property: "border-collapse", valueTransform: () => "separate" },
+      // Border Spacing
+      "border-spacing-x": { property: "border-spacing" },
+      "border-spacing-y": { property: "border-spacing" },
+      "border-spacing": { property: "border-spacing" },
+      // Table Layout
+      "table-auto": { property: "table-layout", valueTransform: () => "auto" },
+      "table-fixed": { property: "table-layout", valueTransform: () => "fixed" },
+      // Caption Side
+      "caption-top": { property: "caption-side", valueTransform: () => "top" },
+      "caption-bottom": { property: "caption-side", valueTransform: () => "bottom" }
+    });
+  }
+};
+
+// src/integration/atomic/handlers/SVGHandler.ts
+var SVGHandler = class extends BaseHandler {
+  canHandle(token) {
+    return this.validateToken(token) && (this.containsKeyword(token.id, "fill") || this.containsKeyword(token.id, "stroke"));
+  }
+  generate(token, varName, suffix) {
+    if (!this.validateToken(token)) {
+      return "";
+    }
+    return this.generateRulesFromPrefix(token, varName, suffix, {
+      "stroke-width": { property: "stroke-width" },
+      "stroke": { property: "stroke" },
+      "fill": { property: "fill" }
+    });
+  }
+};
+
+// src/integration/atomic/handlers/AccessibilityHandler.ts
+var AccessibilityHandler = class extends BaseHandler {
+  canHandle(token) {
+    return this.validateToken(token) && (this.containsKeyword(token.id, "forced-color") || this.containsKeyword(token.id, "accessibility") || this.containsKeyword(token.id, "a11y") || this.containsKeyword(token.id, "sr-only") || this.containsKeyword(token.id, "focus-visible") || this.containsKeyword(token.id, "focus-within"));
+  }
+  generate(token, varName, suffix) {
+    if (!this.validateToken(token)) {
+      return "";
+    }
+    const fullSuffix = token.id.replace(/\./g, "-");
+    const standardOutput = this.generateRulesFromPrefix(token, varName, fullSuffix, {
+      "forced-color-adjust": { property: "forced-color-adjust" },
+      "focus-visible": { property: "outline", valueTransform: () => "2px solid var(--color-primary)" },
+      "focus-within": { property: "outline", valueTransform: () => "2px solid var(--color-primary)" }
+    });
+    if (standardOutput) return standardOutput;
+    if (this.containsKeyword(token.id, "sr-only")) {
+      if (token.id === "not-sr-only" || suffix === "not-sr-only") {
+        return this.createRule("not-sr-only", "position", "static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal");
+      }
+      return this.createRule("sr-only", "position", "absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0");
+    }
+    if (this.containsKeyword(token.id, "not-sr-only")) {
+      return this.createRule("not-sr-only", "position", "static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal");
+    }
+    return "";
+  }
+};
+
+// src/integration/atomic/handlers/FilterHandler.ts
+var FilterHandler = class extends BaseHandler {
+  canHandle(token) {
+    return this.validateToken(token) && (this.containsKeyword(token.id, "filter") || this.containsKeyword(token.id, "blur") || this.containsKeyword(token.id, "brightness") || this.containsKeyword(token.id, "contrast") || this.containsKeyword(token.id, "drop-shadow") || this.containsKeyword(token.id, "grayscale") || this.containsKeyword(token.id, "hue-rotate") || this.containsKeyword(token.id, "invert") || this.containsKeyword(token.id, "saturate") || this.containsKeyword(token.id, "sepia") || this.containsKeyword(token.id, "backdrop"));
+  }
+  generate(token, varName, suffix) {
+    if (!this.validateToken(token)) {
+      return "";
+    }
+    return this.generateRulesFromPrefix(token, varName, suffix, {
+      // Backdrop Filter
+      "backdrop-blur": { property: "backdrop-filter", valueTransform: (v) => `blur(${v})` },
+      "backdrop-brightness": { property: "backdrop-filter", valueTransform: (v) => `brightness(${v})` },
+      "backdrop-contrast": { property: "backdrop-filter", valueTransform: (v) => `contrast(${v})` },
+      "backdrop-grayscale": { property: "backdrop-filter", valueTransform: (v) => `grayscale(${v})` },
+      "backdrop-hue-rotate": { property: "backdrop-filter", valueTransform: (v) => `hue-rotate(${v})` },
+      "backdrop-invert": { property: "backdrop-filter", valueTransform: (v) => `invert(${v})` },
+      "backdrop-opacity": { property: "backdrop-filter", valueTransform: (v) => `opacity(${v})` },
+      "backdrop-saturate": { property: "backdrop-filter", valueTransform: (v) => `saturate(${v})` },
+      "backdrop-sepia": { property: "backdrop-filter", valueTransform: (v) => `sepia(${v})` },
+      // Filter
+      "blur": { property: "filter", valueTransform: (v) => `blur(${v})` },
+      "brightness": { property: "filter", valueTransform: (v) => `brightness(${v})` },
+      "contrast": { property: "filter", valueTransform: (v) => `contrast(${v})` },
+      "drop-shadow": { property: "filter", valueTransform: (v) => `drop-shadow(${v})` },
+      "grayscale": { property: "filter", valueTransform: (v) => `grayscale(${v})` },
+      "hue-rotate": { property: "filter", valueTransform: (v) => `hue-rotate(${v})` },
+      "invert": { property: "filter", valueTransform: (v) => `invert(${v})` },
+      "saturate": { property: "filter", valueTransform: (v) => `saturate(${v})` },
+      "sepia": { property: "filter", valueTransform: (v) => `sepia(${v})` }
+    });
+  }
+};
+
+// src/integration/atomic/core/UtilityGenerator.ts
+var UtilityGenerator = class {
+  constructor() {
+    this.handlers = [
+      new FlexboxHandler(),
+      new GridHandler(),
+      new LayoutHandler(),
+      new SVGHandler(),
+      new BorderHandler(),
+      new TypographyHandler(),
+      new BackgroundHandler(),
+      new ColorHandler(),
+      new SpaceHandler(),
+      new EffectHandler(),
+      new FilterHandler(),
+      new TableHandler(),
+      new TransformHandler(),
+      new TransitionHandler(),
+      new InteractivityHandler(),
+      new AccessibilityHandler()
+    ];
+  }
+  /**
+   * Mini function: Get full variable name with prefix
+   */
+  getFullVarName(tokenId, prefix) {
+    const varName = formatVarName(tokenId, `--${prefix}`);
+    return createVarReference(varName);
+  }
+  /**
+   * Mini function: Find appropriate handler for token
+   */
+  findHandler(token) {
+    return this.handlers.find((h) => h.canHandle(token));
+  }
+  /**
+   * Mini function: Process a single token
+   */
+  processToken(token, context) {
+    if (!isValidToken(token)) {
+      return "";
+    }
+    const handler = this.findHandler(token);
+    if (!handler) {
+      return "";
+    }
+    const varName = this.getFullVarName(token.id, context.prefix);
+    const suffix = formatSuffix(token.id);
+    return handler.generate(token, varName, suffix);
+  }
+  /**
+   * Mini function: Collect utility classes from tokens
+   */
+  collectUtilities(tokens, context) {
+    const validTokens = filterValidTokens(tokens);
+    const utilities = [];
+    validTokens.forEach((token) => {
+      const utility = this.processToken(token, context);
+      if (utility) {
+        utilities.push(utility);
+      }
+    });
+    return utilities;
+  }
+  /**
+   * Generate CSS for all tokens
+   */
+  generate(tokens, context = { prefix: "tw", selector: ":root" }) {
+    const utilities = this.collectUtilities(tokens, context);
+    return createLayer("utilities", utilities.join("\n"));
+  }
+};
+
+// src/integration/atomic/AtomicCSSGenerator.ts
+var AtomicCSSGenerator = class {
+  constructor() {
+    this.baseGenerator = new BaseGenerator();
+    this.themeGenerator = new ThemeGenerator();
+    this.utilityGenerator = new UtilityGenerator();
+  }
+  generate(tokens, options = {}) {
+    const context = this.createContext(options);
+    const includeReset = options.includeReset !== false;
+    return this.assembleCss(tokens, context, includeReset);
+  }
+  /**
+   * Mini function: Create generator context
+   */
+  createContext(options) {
+    return {
+      prefix: options.prefix || "mase-",
+      selector: options.selector || ":root"
+    };
+  }
+  /**
+   * Mini function: Assemble CSS parts
+   */
+  assembleCss(tokens, context, includeReset) {
+    let css = "/* Generated by MASE Atomic Engine */\n";
+    css += "@layer base, theme, utilities;\n\n";
+    css += this.baseGenerator.generate(includeReset);
+    css += this.themeGenerator.generate(tokens, context);
+    css += this.utilityGenerator.generate(tokens, context);
+    return css;
+  }
+};
+
+// src/data/tokens.ts
+var TOKENS = {
+  // Colors - Intent based
+  "color.primary": { id: "color.primary", domain: "color", value: "#2563eb" },
+  // blue-600
+  "color.secondary": { id: "color.secondary", domain: "color", value: "#4b5563" },
+  // gray-600
+  "color.danger": { id: "color.danger", domain: "color", value: "#dc2626" },
+  // red-600
+  // Spacing - Scale based
+  "space.sm": { id: "space.sm", domain: "layout", value: "0.5rem" },
+  // 8px
+  "space.md": { id: "space.md", domain: "layout", value: "1rem" },
+  // 16px
+  "space.lg": { id: "space.lg", domain: "layout", value: "1.5rem" },
+  // 24px
+  // Forbidden/Raw tokens (for demo)
+  "raw.hex": { id: "raw.hex", domain: "color", value: "#123456" },
+  // Illegal
+  // Surface (Theme Aware!)
+  "surface.card": {
+    id: "surface.card",
+    domain: "color",
+    value: {
+      light: "#ffffff",
+      // white
+      dark: "#1e293b"
+      // slate-800
+    }
+  },
+  "surface.ground": {
+    id: "surface.ground",
+    domain: "color",
+    value: {
+      light: "#f9fafb",
+      // gray-50
+      dark: "#0f172a"
+      // slate-900
+    }
+  },
+  "surface.paper": {
+    id: "surface.paper",
+    domain: "color",
+    value: {
+      light: "#ffffff",
+      // white
+      dark: "#334155"
+      // slate-700
+    }
+  },
+  // Text (Theme Aware!)
+  "text.light": {
+    id: "text.light",
+    domain: "color",
+    value: {
+      light: "#ffffff",
+      // white
+      dark: "#f3f4f6"
+      // gray-100
+    }
+  },
+  "text.dark": {
+    id: "text.dark",
+    domain: "color",
+    value: {
+      light: "#111827",
+      // gray-900
+      dark: "#ffffff"
+      // white
+    }
+  },
+  "text.primary": {
+    id: "text.primary",
+    domain: "color",
+    value: {
+      light: "#111827",
+      // gray-900
+      dark: "#f9fafb"
+      // gray-50
+    }
+  },
+  "text.secondary": {
+    id: "text.secondary",
+    domain: "color",
+    value: {
+      light: "#6b7280",
+      // gray-500
+      dark: "#9ca3af"
+      // gray-400
+    }
+  },
+  // Effects
+  "shadow.sm": { id: "shadow.sm", domain: "effect", value: "0 1px 2px 0 rgb(0 0 0 / 0.05)" },
+  "shadow.md": { id: "shadow.md", domain: "effect", value: "0 4px 6px -1px rgb(0 0 0 / 0.1)" },
+  "shadow.lg": { id: "shadow.lg", domain: "effect", value: "0 10px 15px -3px rgb(0 0 0 / 0.1)" },
+  // Radius (Moved to effect domain for consistency)
+  "radius.md": { id: "radius.md", domain: "effect", value: "0.375rem" },
+  // 6px
+  "radius.lg": { id: "radius.lg", domain: "effect", value: "0.5rem" },
+  // 8px
+  "radius.full": { id: "radius.full", domain: "effect", value: "9999px" },
+  // Typography - Font Sizes
+  "text.sm": { id: "text.sm", domain: "typography", value: "0.875rem" },
+  "text.base": { id: "text.base", domain: "typography", value: "1rem" },
+  "text.lg": { id: "text.lg", domain: "typography", value: "1.125rem" },
+  "text.xl": { id: "text.xl", domain: "typography", value: "1.25rem" },
+  // Typography - Font Weights
+  "weight.normal": { id: "weight.normal", domain: "typography", value: "400" },
+  "weight.medium": { id: "weight.medium", domain: "typography", value: "500" },
+  "weight.bold": { id: "weight.bold", domain: "typography", value: "700" }
+};
+
 // src/cli/commands/generate-css.ts
-var fs3 = __toESM(require("fs"));
-var generateCssCommand = new import_commander4.Command("generate-css").description("Generate CSS from a contract DSL file").argument("<contract-file>", "Contract DSL file to generate CSS from").option("-o, --output <file>", "Output file (default: stdout)").option("--format <format>", "Output format (class, variable, inline)", "class").option("--theme <theme>", "Theme (light, dark)", "light").option("--device <device>", "Device (mobile, tablet, desktop)", "desktop").action((contractFile, options) => {
-  console.log(`Generating CSS from ${contractFile}...`);
+var fs4 = __toESM(require("fs"));
+var path2 = __toESM(require("path"));
+var generateCssCommand = new import_commander4.Command("generate-css").description("Generate CSS from a contract DSL file or Token source").argument("[source]", "Contract DSL file or Tokens file (optional for atomic)").option("-o, --output <file>", "Output file (default: stdout)").option("--format <format>", "Output format (class, variable, inline, atomic)", "class").option("--theme <theme>", "Theme (light, dark)", "light").option("--device <device>", "Device (mobile, tablet, desktop)", "desktop").option("-w, --watch", "Watch for changes and regenerate", false).action(async (source, options) => {
+  if (options.format === "atomic") {
+    const runAtomicGeneration = () => {
+      console.log("\u269B\uFE0F  Generating Atomic CSS...");
+      let tokens = TOKENS;
+      if (source) {
+        try {
+          const fullPath = path2.resolve(process.cwd(), source);
+          delete require.cache[require.resolve(fullPath)];
+          if (fs4.existsSync(fullPath)) {
+            const loaded = require(fullPath);
+            tokens = loaded.default || loaded.TOKENS || loaded;
+            console.log(`Loaded tokens from ${source}`);
+          } else {
+            console.warn(`\u26A0\uFE0F  Source file ${source} not found. Using default tokens.`);
+          }
+        } catch (e) {
+          console.warn("\u26A0\uFE0F  Could not load tokens from file, using defaults:", e.message);
+        }
+      } else {
+        console.log("\u2139\uFE0F  No source provided, using default built-in tokens.");
+      }
+      const generator = new AtomicCSSGenerator();
+      const css = generator.generate(tokens);
+      if (options.output) {
+        fs4.writeFileSync(options.output, css, "utf-8");
+        console.log(`\u2705 Atomic CSS generated to ${options.output}`);
+      } else {
+        console.log(css);
+      }
+    };
+    runAtomicGeneration();
+    if (options.watch && source) {
+      console.log(`\u{1F440} Watching for changes in ${source}...`);
+      const fullPath = path2.resolve(process.cwd(), source);
+      fs4.watch(fullPath, (eventType) => {
+        if (eventType === "change") {
+          console.log("\u{1F504} File changed, regenerating...");
+          runAtomicGeneration();
+        }
+      });
+      await new Promise(() => {
+      });
+    } else if (options.watch && !source) {
+      console.warn("\u26A0\uFE0F  Watch mode requires a source file. Ignoring --watch.");
+    }
+    return;
+  }
+  if (!source) {
+    console.error("\u274C Error: Contract file argument is required for non-atomic format.");
+    process.exit(1);
+  }
+  console.log(`Generating CSS from ${source}...`);
   try {
-    const source = fs3.readFileSync(contractFile, "utf-8");
+    const contractContent = fs4.readFileSync(source, "utf-8");
     const tokenizer = new ContractDSLTokenizer();
-    const tokens = tokenizer.tokenize(source);
+    const tokens = tokenizer.tokenize(contractContent);
     const parser = new ContractDSLParser();
     const ast = parser.parse(tokens);
     const validator = new ContractDSLValidator();
@@ -1276,7 +2962,7 @@ var generateCssCommand = new import_commander4.Command("generate-css").descripti
         break;
     }
     if (options.output) {
-      fs3.writeFileSync(options.output, output, "utf-8");
+      fs4.writeFileSync(options.output, output, "utf-8");
       console.log(`\u2705 CSS generated to ${options.output}`);
     } else {
       console.log(output);