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

package/lib/cjs/cli/index.js

@@ -234,6 +234,7 @@ var TokenType = {
   HOVER: "HOVER",
   ACTIVE: "ACTIVE",
   DISABLED: "DISABLED",
+  CONTAINER: "CONTAINER",
   // Domains
   LAYOUT: "LAYOUT",
   TYPOGRAPHY: "TYPOGRAPHY",
@@ -245,6 +246,8 @@ var TokenType = {
   RBRACE: "RBRACE",
   LBRACKET: "LBRACKET",
   RBRACKET: "RBRACKET",
+  LPAREN: "LPAREN",
+  RPAREN: "RPAREN",
   COLON: "COLON",
   SEMICOLON: "SEMICOLON",
   COMMA: "COMMA",
@@ -281,6 +284,7 @@ var ContractDSLTokenizer = class {
       ["hover", TokenType.HOVER],
       ["active", TokenType.ACTIVE],
       ["disabled", TokenType.DISABLED],
+      ["container", TokenType.CONTAINER],
       // Domains
       ["layout", TokenType.LAYOUT],
       ["typography", TokenType.TYPOGRAPHY],
@@ -333,6 +337,8 @@ var ContractDSLTokenizer = class {
     if (char === "}") return this.createToken(TokenType.RBRACE, char);
     if (char === "[") return this.createToken(TokenType.LBRACKET, char);
     if (char === "]") return this.createToken(TokenType.RBRACKET, char);
+    if (char === "(") return this.createToken(TokenType.LPAREN, char);
+    if (char === ")") return this.createToken(TokenType.RPAREN, char);
     if (char === ":") return this.createToken(TokenType.COLON, char);
     if (char === ";") return this.createToken(TokenType.SEMICOLON, char);
     if (char === ",") return this.createToken(TokenType.COMMA, char);
@@ -561,7 +567,7 @@ var ContractDSLParser = class {
     this.expect(TokenType.CONSTRAINTS);
     this.expect(TokenType.LBRACE);
     const constraints = [];
-    while (this.peek()?.type === TokenType.MOBILE || this.peek()?.type === TokenType.TABLET || this.peek()?.type === TokenType.DESKTOP || this.peek()?.type === TokenType.LIGHT || this.peek()?.type === TokenType.DARK || this.peek()?.type === TokenType.WEB || this.peek()?.type === TokenType.NATIVE || this.peek()?.type === TokenType.CANVAS || this.peek()?.type === TokenType.DEFAULT_CTX || this.peek()?.type === TokenType.HOVER || this.peek()?.type === TokenType.ACTIVE || this.peek()?.type === TokenType.DISABLED) {
+    while (this.peek()?.type === TokenType.MOBILE || this.peek()?.type === TokenType.TABLET || this.peek()?.type === TokenType.DESKTOP || this.peek()?.type === TokenType.LIGHT || this.peek()?.type === TokenType.DARK || this.peek()?.type === TokenType.WEB || this.peek()?.type === TokenType.NATIVE || this.peek()?.type === TokenType.CANVAS || this.peek()?.type === TokenType.DEFAULT_CTX || this.peek()?.type === TokenType.HOVER || this.peek()?.type === TokenType.ACTIVE || this.peek()?.type === TokenType.DISABLED || this.peek()?.type === TokenType.CONTAINER) {
       constraints.push(this.parseConstraint());
     }
     this.expect(TokenType.RBRACE);
@@ -572,7 +578,13 @@ var ContractDSLParser = class {
    * @returns Constraint AST
    */
   parseConstraint() {
-    const context = this.expectContext();
+    let context = this.expectContext();
+    if (context === "container" && this.peek()?.type === TokenType.LPAREN) {
+      this.expect(TokenType.LPAREN);
+      const name = this.expectIdentifier();
+      this.expect(TokenType.RPAREN);
+      context = `container(${name})`;
+    }
     this.expect(TokenType.COLON);
     this.expect(TokenType.LBRACKET);
     const tokens = [];
@@ -651,7 +663,7 @@ var ContractDSLParser = class {
    */
   expectContext() {
     const token = this.peek();
-    if (!token || token.type !== TokenType.MOBILE && token.type !== TokenType.TABLET && token.type !== TokenType.DESKTOP && token.type !== TokenType.LIGHT && token.type !== TokenType.DARK && token.type !== TokenType.WEB && token.type !== TokenType.NATIVE && token.type !== TokenType.CANVAS && token.type !== TokenType.DEFAULT_CTX && token.type !== TokenType.DEFAULT && token.type !== TokenType.HOVER && token.type !== TokenType.ACTIVE && token.type !== TokenType.DISABLED) {
+    if (!token || token.type !== TokenType.MOBILE && token.type !== TokenType.TABLET && token.type !== TokenType.DESKTOP && token.type !== TokenType.LIGHT && token.type !== TokenType.DARK && token.type !== TokenType.WEB && token.type !== TokenType.NATIVE && token.type !== TokenType.CANVAS && token.type !== TokenType.DEFAULT_CTX && token.type !== TokenType.DEFAULT && token.type !== TokenType.HOVER && token.type !== TokenType.ACTIVE && token.type !== TokenType.DISABLED && token.type !== TokenType.CONTAINER) {
       throw new ParserError(
         `Expected context, got ${token?.type || "EOF"}`,
         token?.line || 0,
@@ -901,9 +913,9 @@ var ContractDSLValidator = class {
    * @param errors - Array to collect errors
    */
   validateConstraint(constraint, allows, path3, errors) {
-    if (!this.validContexts.has(constraint.context)) {
+    if (!this.validContexts.has(constraint.context) && !constraint.context.startsWith("container")) {
       errors.push(new ValidationError(
-        `Invalid context: '${constraint.context}'. Must be one of: ${Array.from(this.validContexts).join(", ")}`,
+        `Invalid context: '${constraint.context}'. Must be one of: ${Array.from(this.validContexts).join(", ")} or start with 'container'`,
         `${path3}.context`
       ));
     }
@@ -1024,12 +1036,23 @@ var ContractDSLCompiler = class {
    * @returns StyleRule
    */
   compilePropertyToRule(property, errors) {
-    return {
+    const rule = {
       property: property.name,
       domain: this.inferDomain(property.name, errors),
       allowedTokens: property.allows,
       conflictsWith: property.conflicts
     };
+    if (property.constraints && property.constraints.length > 0) {
+      const constraints = {};
+      for (const constraint of property.constraints) {
+        constraints[constraint.context] = constraint.allows;
+      }
+      return {
+        ...rule,
+        constraints
+      };
+    }
+    return rule;
   }
   /**
    * Infer domain from property name
@@ -1461,6 +1484,118 @@ var CSSMaterializer = class {
   }
 };
 
+// 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/integration/atomic/reset.ts
 var CSS_RESET = `/* MASE Grounding (Reset) */
 *, ::before, ::after {
@@ -1792,6 +1927,72 @@ var ThemeGenerator = class {
   }
 };
 
+// src/integration/atomic/core/VariantGenerator.ts
+var VariantGenerator = class {
+  constructor() {
+    this.variants = /* @__PURE__ */ new Map();
+    this.registerStandardVariants();
+  }
+  registerStandardVariants() {
+    this.registerVariant("hover", { name: "hover", selector: ":hover" });
+    this.registerVariant("focus", { name: "focus", selector: ":focus" });
+    this.registerVariant("active", { name: "active", selector: ":active" });
+    this.registerVariant("disabled", { name: "disabled", selector: ":disabled" });
+    this.registerVariant("group-hover", { name: "group-hover", selector: ".group:hover &" });
+    this.registerVariant("sm", { name: "sm", media: "(min-width: 640px)" });
+    this.registerVariant("md", { name: "md", media: "(min-width: 768px)" });
+    this.registerVariant("lg", { name: "lg", media: "(min-width: 1024px)" });
+    this.registerVariant("xl", { name: "xl", media: "(min-width: 1280px)" });
+    this.registerVariant("2xl", { name: "2xl", media: "(min-width: 1536px)" });
+  }
+  registerVariant(name, definition) {
+    this.variants.set(name, definition);
+  }
+  /**
+   * Apply variant to a CSS utility string
+   * @param css - Original utility CSS (e.g. .w-full { width: 100%; })
+   * @param variantName - Name of variant to apply (e.g. 'hover', 'md', '@sidebar')
+   * @returns Transformed CSS
+   */
+  applyVariant(css, variantName) {
+    let variant = this.variants.get(variantName);
+    if (!variant && variantName.startsWith("@")) {
+      const containerName = variantName.substring(1);
+      variant = {
+        name: variantName,
+        container: `${containerName} (min-width: 0px)`
+        // Placeholder
+      };
+    }
+    if (!variant) return "";
+    const classMatch = css.match(/^\.([^{]+)/);
+    if (!classMatch) return "";
+    const originalClass = classMatch[1].trim();
+    const variantPrefix = variant.name.replace(/[^a-zA-Z0-9-_]/g, "\\$&");
+    const newClass = `.${variantPrefix}\\:${originalClass}`;
+    let newCss = css.replace(/^\.[^{]+/, newClass);
+    if (variant.selector) {
+      if (variant.selector.includes("&")) {
+        const complexSelector = variant.selector.replace("&", newClass);
+        newCss = newCss.replace(newClass, complexSelector);
+      } else {
+        newCss = newCss.replace(newClass, `${newClass}${variant.selector}`);
+      }
+    }
+    if (variant.media) {
+      newCss = `@media ${variant.media} {
+  ${newCss.replace(/\n/g, "\n  ")}
+}`;
+    }
+    if (variant.container) {
+      newCss = `@container ${variant.container} {
+  ${newCss.replace(/\n/g, "\n  ")}
+}`;
+    }
+    return newCss;
+  }
+};
+
 // src/integration/atomic/handlers/BaseHandler.ts
 var BaseHandler = class {
   /**
@@ -1857,11 +2058,6 @@ var BaseHandler = class {
   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;
@@ -2642,9 +2838,40 @@ var FilterHandler = class extends BaseHandler {
   }
 };
 
+// src/integration/atomic/handlers/ContainerHandler.ts
+var ContainerHandler = class extends BaseHandler {
+  canHandle(token) {
+    return this.validateToken(token) && (this.containsKeyword(token.id, "container.type") || this.containsKeyword(token.id, "container.name") || this.containsKeyword(token.id, "container-type") || this.containsKeyword(token.id, "container-name") || // Explicitly handle 'container' keyword if it's related to queries
+    this.containsKeyword(token.id, "container") && !this.containsKeyword(token.id, "width"));
+  }
+  generate(token, varName, suffix) {
+    if (!this.validateToken(token)) {
+      return "";
+    }
+    if (this.containsKeyword(token.id, "container.type") || this.containsKeyword(token.id, "container-type")) {
+      return this.generateUtilities(token, varName, suffix, {
+        "container.type": { property: "container-type", classPrefix: "container-type" },
+        "container-type": "container-type"
+      });
+    }
+    if (this.containsKeyword(token.id, "container.name") || this.containsKeyword(token.id, "container-name")) {
+      return this.generateUtilities(token, varName, suffix, {
+        "container.name": { property: "container-name", classPrefix: "container-name" },
+        "container-name": "container-name"
+      });
+    }
+    return this.generateUtilities(token, varName, suffix, {
+      "@container": { property: "container-type", classPrefix: "container-type", valueTransform: () => "inline-size" },
+      // Only match 'container' if it's not one of the above (already handled by if-blocks)
+      "container": { property: "container-type", valueTransform: (val) => val === "normal" ? "normal" : "inline-size" }
+    });
+  }
+};
+
 // src/integration/atomic/core/UtilityGenerator.ts
 var UtilityGenerator = class {
   constructor() {
+    this.variantGenerator = new VariantGenerator();
     this.handlers = [
       new FlexboxHandler(),
       new GridHandler(),
@@ -2661,7 +2888,8 @@ var UtilityGenerator = class {
       new TransformHandler(),
       new TransitionHandler(),
       new InteractivityHandler(),
-      new AccessibilityHandler()
+      new AccessibilityHandler(),
+      new ContainerHandler()
     ];
   }
   /**
@@ -2702,6 +2930,14 @@ var UtilityGenerator = class {
       const utility = this.processToken(token, context);
       if (utility) {
         utilities.push(utility);
+        if (context.variants && context.variants.length > 0) {
+          context.variants.forEach((variant) => {
+            const variantUtility = this.variantGenerator.applyVariant(utility, variant);
+            if (variantUtility) {
+              utilities.push(variantUtility);
+            }
+          });
+        }
       }
     });
     return utilities;
@@ -2733,7 +2969,8 @@ var AtomicCSSGenerator = class {
   createContext(options) {
     return {
       prefix: options.prefix || "mase-",
-      selector: options.selector || ":root"
+      selector: options.selector || ":root",
+      variants: options.variants
     };
   }
   /**
@@ -2749,118 +2986,6 @@ var AtomicCSSGenerator = class {
   }
 };
 
-// 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 fs4 = __toESM(require("fs"));
 var path2 = __toESM(require("path"));