chaincss 2.3.0 → 2.3.2

package/dist/browser.js

@@ -608,6 +608,10 @@ function findBestMatches(query, candidates, maxResults = 3, maxDistance = 3) {
   return matches.slice(0, maxResults);
 }
 function getTypeForCandidate(candidate) {
+  if (KNOWN_MACROS.includes(candidate)) return "macro";
+  if (KNOWN_SHORTHANDS.includes(candidate)) return "shorthand";
+  if (ANIMATION_PRESETS.includes(candidate)) return "animation";
+  if (BREAKPOINTS.includes(candidate)) return "breakpoint";
   if (KNOWN_SHORTHANDS.includes(candidate)) return "shorthand";
   if (COMMON_CSS_PROPERTIES.includes(candidate)) return "css-property";
   if (ANIMATION_PRESETS.includes(candidate)) return "animation";
@@ -622,6 +626,7 @@ function getSuggestion(prop, validProperties = [], type = "all") {
     candidates = [...COMMON_CSS_PROPERTIES, ...validProperties];
   } else {
     candidates = [
+      ...KNOWN_MACROS,
       ...KNOWN_SHORTHANDS,
       ...COMMON_CSS_PROPERTIES,
       ...validProperties,
@@ -636,10 +641,98 @@ function getSuggestion(prop, validProperties = [], type = "all") {
   }
   return null;
 }
-var KNOWN_SHORTHANDS, COMMON_CSS_PROPERTIES, ANIMATION_PRESETS, BREAKPOINTS;
+var KNOWN_MACROS, KNOWN_SHORTHANDS, COMMON_CSS_PROPERTIES, ANIMATION_PRESETS, BREAKPOINTS;
 var init_suggestions = __esm({
   "src/compiler/suggestions.ts"() {
     "use strict";
+    KNOWN_MACROS = [
+      // Intent Macros
+      "stickyHeader",
+      "card",
+      "hero",
+      "container",
+      "center",
+      "gridList",
+      "sidebar",
+      "pill",
+      "glass",
+      "truncate",
+      "srOnly",
+      "autoContrast",
+      // Chain.ts special methods
+      "flex",
+      "grid",
+      "inlineFlex",
+      "inlineGrid",
+      "flexCenter",
+      "gridCenter",
+      "stack",
+      "cols",
+      "rows",
+      "bento",
+      "gridTable",
+      "mx",
+      "my",
+      "px",
+      "py",
+      "size",
+      "gap",
+      "gapX",
+      "gapY",
+      "inset",
+      "insetX",
+      "insetY",
+      "borderX",
+      "borderY",
+      "absolute",
+      "fixed",
+      "sticky",
+      "relative",
+      "hide",
+      "show",
+      "unselectable",
+      "scrollable",
+      "safeArea",
+      "circle",
+      "square",
+      "truncate",
+      "fluidText",
+      "aspect",
+      "lineClamp",
+      "glass",
+      "glow",
+      "textGradient",
+      "meshGradient",
+      "noise",
+      "shimmer",
+      "clickScale",
+      "pressable",
+      "focusRing",
+      "skeleton",
+      "fullScreen",
+      "containerMacro",
+      "outlineDebug",
+      "parallax",
+      "frostedNav",
+      "fadeIn",
+      "slideInUp",
+      "zoomIn",
+      "bounce",
+      "pulse",
+      "spin",
+      "shake",
+      "float",
+      // Semantic macros
+      "surface",
+      "text",
+      "elevation",
+      "state",
+      "spacing",
+      // Intent API
+      "intent",
+      // Constraint
+      "constrain"
+    ];
     KNOWN_SHORTHANDS = [
       // Spacing
       "m",

package/dist/compiler/index.js

@@ -1105,6 +1105,94 @@ function getAvailableShorthands() {
 }
 
 // src/compiler/suggestions.ts
+var KNOWN_MACROS = [
+  // Intent Macros
+  "stickyHeader",
+  "card",
+  "hero",
+  "container",
+  "center",
+  "gridList",
+  "sidebar",
+  "pill",
+  "glass",
+  "truncate",
+  "srOnly",
+  "autoContrast",
+  // Chain.ts special methods
+  "flex",
+  "grid",
+  "inlineFlex",
+  "inlineGrid",
+  "flexCenter",
+  "gridCenter",
+  "stack",
+  "cols",
+  "rows",
+  "bento",
+  "gridTable",
+  "mx",
+  "my",
+  "px",
+  "py",
+  "size",
+  "gap",
+  "gapX",
+  "gapY",
+  "inset",
+  "insetX",
+  "insetY",
+  "borderX",
+  "borderY",
+  "absolute",
+  "fixed",
+  "sticky",
+  "relative",
+  "hide",
+  "show",
+  "unselectable",
+  "scrollable",
+  "safeArea",
+  "circle",
+  "square",
+  "truncate",
+  "fluidText",
+  "aspect",
+  "lineClamp",
+  "glass",
+  "glow",
+  "textGradient",
+  "meshGradient",
+  "noise",
+  "shimmer",
+  "clickScale",
+  "pressable",
+  "focusRing",
+  "skeleton",
+  "fullScreen",
+  "containerMacro",
+  "outlineDebug",
+  "parallax",
+  "frostedNav",
+  "fadeIn",
+  "slideInUp",
+  "zoomIn",
+  "bounce",
+  "pulse",
+  "spin",
+  "shake",
+  "float",
+  // Semantic macros
+  "surface",
+  "text",
+  "elevation",
+  "state",
+  "spacing",
+  // Intent API
+  "intent",
+  // Constraint
+  "constrain"
+];
 var KNOWN_SHORTHANDS = [
   // Spacing
   "m",
@@ -1411,6 +1499,10 @@ function findBestMatches(query, candidates, maxResults = 3, maxDistance = 3) {
   return matches.slice(0, maxResults);
 }
 function getTypeForCandidate(candidate) {
+  if (KNOWN_MACROS.includes(candidate)) return "macro";
+  if (KNOWN_SHORTHANDS.includes(candidate)) return "shorthand";
+  if (ANIMATION_PRESETS.includes(candidate)) return "animation";
+  if (BREAKPOINTS.includes(candidate)) return "breakpoint";
   if (KNOWN_SHORTHANDS.includes(candidate)) return "shorthand";
   if (COMMON_CSS_PROPERTIES2.includes(candidate)) return "css-property";
   if (ANIMATION_PRESETS.includes(candidate)) return "animation";
@@ -1425,6 +1517,7 @@ function getSuggestion(prop, validProperties = [], type = "all") {
     candidates = [...COMMON_CSS_PROPERTIES2, ...validProperties];
   } else {
     candidates = [
+      ...KNOWN_MACROS,
       ...KNOWN_SHORTHANDS,
       ...COMMON_CSS_PROPERTIES2,
       ...validProperties,

package/dist/compiler/intent-engine.d.ts

@@ -27,6 +27,11 @@ export declare const intent: {
     getKnownProperties(): string[];
     macro(name: string): Record<string, any> | null;
     getMacros(): string[];
+    /**
+     * Auto-set text color for accessible contrast against the background.
+     * Uses WCAG AA contrast ratio to pick black or white.
+     */
+    autoContrast(bgColor: string): string;
     getMacroDescription(name: string): string | null;
     hasMacro(name: string): boolean;
     /**

package/dist/compiler/suggestions.d.ts

@@ -3,6 +3,7 @@ export interface SuggestionMatch {
     distance: number;
     type: 'shorthand' | 'css-property' | 'macro' | 'animation' | 'breakpoint';
 }
+export declare const KNOWN_MACROS: string[];
 export declare const KNOWN_SHORTHANDS: string[];
 export declare const COMMON_CSS_PROPERTIES: string[];
 export declare const ANIMATION_PRESETS: string[];
@@ -27,6 +28,7 @@ export declare function getDetailedSuggestion(prop: string, validProperties?: st
     confidence: number;
 } | null;
 declare const _default: {
+    KNOWN_MACROS: string[];
     getSuggestion: typeof getSuggestion;
     getSuggestions: typeof getSuggestions;
     getPropertySuggestion: typeof getPropertySuggestion;

package/dist/core/types.d.ts

@@ -139,6 +139,7 @@ export interface ChainCSSConfig {
     profiling?: boolean;
     classNameGenerator?: (name: string, options?: any) => string;
     plugins?: ChainCSSPlugin[];
+    macros?: Record<string, (value: any) => Record<string, any>>;
     minifySelectors?: boolean;
     extractCritical?: boolean;
 }

package/dist/index.d.ts

@@ -27,6 +27,7 @@ export { createThemeContract, validateTheme, createTheme, Theme } from './compil
 export { CacheManager } from './compiler/cache-manager.js';
 export { PersistentCache } from './compiler/content-addressable-cache.js';
 export { shorthandMap, macros, handleShorthand, isShorthand, expandShorthand, getAvailableShorthands } from './compiler/shorthands.js';
+export { KNOWN_MACROS } from './compiler/suggestions.js';
 export { helpers } from './compiler/helpers.js';
 export { animationPresets, createAnimation, getAnimationPreset, hasAnimationPreset, getAnimationPresetNames } from './compiler/animations.js';
 export { getSuggestion, getSuggestions, getPropertySuggestion, getShorthandSuggestion } from './compiler/suggestions.js';

package/dist/index.js

@@ -614,6 +614,10 @@ function findBestMatches(query, candidates, maxResults = 3, maxDistance = 3) {
   return matches.slice(0, maxResults);
 }
 function getTypeForCandidate(candidate) {
+  if (KNOWN_MACROS.includes(candidate)) return "macro";
+  if (KNOWN_SHORTHANDS.includes(candidate)) return "shorthand";
+  if (ANIMATION_PRESETS.includes(candidate)) return "animation";
+  if (BREAKPOINTS.includes(candidate)) return "breakpoint";
   if (KNOWN_SHORTHANDS.includes(candidate)) return "shorthand";
   if (COMMON_CSS_PROPERTIES.includes(candidate)) return "css-property";
   if (ANIMATION_PRESETS.includes(candidate)) return "animation";
@@ -628,6 +632,7 @@ function getSuggestion(prop, validProperties = [], type = "all") {
     candidates = [...COMMON_CSS_PROPERTIES, ...validProperties];
   } else {
     candidates = [
+      ...KNOWN_MACROS,
       ...KNOWN_SHORTHANDS,
       ...COMMON_CSS_PROPERTIES,
       ...validProperties,
@@ -767,10 +772,98 @@ function getShorthandSuggestion(shorthand) {
   }
   return null;
 }
-var KNOWN_SHORTHANDS, COMMON_CSS_PROPERTIES, ANIMATION_PRESETS, BREAKPOINTS;
+var KNOWN_MACROS, KNOWN_SHORTHANDS, COMMON_CSS_PROPERTIES, ANIMATION_PRESETS, BREAKPOINTS;
 var init_suggestions = __esm({
   "src/compiler/suggestions.ts"() {
     "use strict";
+    KNOWN_MACROS = [
+      // Intent Macros
+      "stickyHeader",
+      "card",
+      "hero",
+      "container",
+      "center",
+      "gridList",
+      "sidebar",
+      "pill",
+      "glass",
+      "truncate",
+      "srOnly",
+      "autoContrast",
+      // Chain.ts special methods
+      "flex",
+      "grid",
+      "inlineFlex",
+      "inlineGrid",
+      "flexCenter",
+      "gridCenter",
+      "stack",
+      "cols",
+      "rows",
+      "bento",
+      "gridTable",
+      "mx",
+      "my",
+      "px",
+      "py",
+      "size",
+      "gap",
+      "gapX",
+      "gapY",
+      "inset",
+      "insetX",
+      "insetY",
+      "borderX",
+      "borderY",
+      "absolute",
+      "fixed",
+      "sticky",
+      "relative",
+      "hide",
+      "show",
+      "unselectable",
+      "scrollable",
+      "safeArea",
+      "circle",
+      "square",
+      "truncate",
+      "fluidText",
+      "aspect",
+      "lineClamp",
+      "glass",
+      "glow",
+      "textGradient",
+      "meshGradient",
+      "noise",
+      "shimmer",
+      "clickScale",
+      "pressable",
+      "focusRing",
+      "skeleton",
+      "fullScreen",
+      "containerMacro",
+      "outlineDebug",
+      "parallax",
+      "frostedNav",
+      "fadeIn",
+      "slideInUp",
+      "zoomIn",
+      "bounce",
+      "pulse",
+      "spin",
+      "shake",
+      "float",
+      // Semantic macros
+      "surface",
+      "text",
+      "elevation",
+      "state",
+      "spacing",
+      // Intent API
+      "intent",
+      // Constraint
+      "constrain"
+    ];
     KNOWN_SHORTHANDS = [
       // Spacing
       "m",
@@ -7327,6 +7420,7 @@ function createTheme(contract, themeValues) {
 
 // src/index.ts
 init_shorthands();
+init_suggestions();
 init_helpers();
 init_animations();
 init_suggestions();
@@ -11715,6 +11809,12 @@ var LAYOUT_MACROS = {
     },
     defaults: {}
   },
+  autoContrast: {
+    name: "autoContrast",
+    description: "Automatically sets text color (black/white) for WCAG AA contrast against the background",
+    properties: {},
+    defaults: {}
+  },
   glass: {
     name: "glass",
     description: "Frosted glass morphism effect",
@@ -11911,6 +12011,25 @@ var intent = {
   getMacros() {
     return getAvailableMacros();
   },
+  /**
+   * Auto-set text color for accessible contrast against the background.
+   * Uses WCAG AA contrast ratio to pick black or white.
+   */
+  autoContrast(bgColor) {
+    let r = 128, g = 128, b = 128;
+    const hex = bgColor.replace("#", "");
+    if (hex.length === 3) {
+      r = parseInt(hex[0] + hex[0], 16);
+      g = parseInt(hex[1] + hex[1], 16);
+      b = parseInt(hex[2] + hex[2], 16);
+    } else if (hex.length === 6) {
+      r = parseInt(hex.slice(0, 2), 16);
+      g = parseInt(hex.slice(2, 4), 16);
+      b = parseInt(hex.slice(4, 6), 16);
+    }
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance > 0.5 ? "#000000" : "#ffffff";
+  },
   getMacroDescription(name) {
     return getMacroDescription(name);
   },
@@ -12030,6 +12149,7 @@ export {
   ChainCSSPrefixer,
   DEFAULT_PIPELINE,
   DesignTokens,
+  KNOWN_MACROS,
   PassManager,
   PersistentCache,
   SCROLL_PRESETS,

package/dist/runtime/index.js

@@ -64,6 +64,10 @@ function findBestMatches(query, candidates, maxResults = 3, maxDistance = 3) {
   return matches.slice(0, maxResults);
 }
 function getTypeForCandidate(candidate) {
+  if (KNOWN_MACROS.includes(candidate)) return "macro";
+  if (KNOWN_SHORTHANDS.includes(candidate)) return "shorthand";
+  if (ANIMATION_PRESETS.includes(candidate)) return "animation";
+  if (BREAKPOINTS.includes(candidate)) return "breakpoint";
   if (KNOWN_SHORTHANDS.includes(candidate)) return "shorthand";
   if (COMMON_CSS_PROPERTIES.includes(candidate)) return "css-property";
   if (ANIMATION_PRESETS.includes(candidate)) return "animation";
@@ -78,6 +82,7 @@ function getSuggestion(prop, validProperties = [], type = "all") {
     candidates = [...COMMON_CSS_PROPERTIES, ...validProperties];
   } else {
     candidates = [
+      ...KNOWN_MACROS,
       ...KNOWN_SHORTHANDS,
       ...COMMON_CSS_PROPERTIES,
       ...validProperties,
@@ -92,10 +97,98 @@ function getSuggestion(prop, validProperties = [], type = "all") {
   }
   return null;
 }
-var KNOWN_SHORTHANDS, COMMON_CSS_PROPERTIES, ANIMATION_PRESETS, BREAKPOINTS;
+var KNOWN_MACROS, KNOWN_SHORTHANDS, COMMON_CSS_PROPERTIES, ANIMATION_PRESETS, BREAKPOINTS;
 var init_suggestions = __esm({
   "src/compiler/suggestions.ts"() {
     "use strict";
+    KNOWN_MACROS = [
+      // Intent Macros
+      "stickyHeader",
+      "card",
+      "hero",
+      "container",
+      "center",
+      "gridList",
+      "sidebar",
+      "pill",
+      "glass",
+      "truncate",
+      "srOnly",
+      "autoContrast",
+      // Chain.ts special methods
+      "flex",
+      "grid",
+      "inlineFlex",
+      "inlineGrid",
+      "flexCenter",
+      "gridCenter",
+      "stack",
+      "cols",
+      "rows",
+      "bento",
+      "gridTable",
+      "mx",
+      "my",
+      "px",
+      "py",
+      "size",
+      "gap",
+      "gapX",
+      "gapY",
+      "inset",
+      "insetX",
+      "insetY",
+      "borderX",
+      "borderY",
+      "absolute",
+      "fixed",
+      "sticky",
+      "relative",
+      "hide",
+      "show",
+      "unselectable",
+      "scrollable",
+      "safeArea",
+      "circle",
+      "square",
+      "truncate",
+      "fluidText",
+      "aspect",
+      "lineClamp",
+      "glass",
+      "glow",
+      "textGradient",
+      "meshGradient",
+      "noise",
+      "shimmer",
+      "clickScale",
+      "pressable",
+      "focusRing",
+      "skeleton",
+      "fullScreen",
+      "containerMacro",
+      "outlineDebug",
+      "parallax",
+      "frostedNav",
+      "fadeIn",
+      "slideInUp",
+      "zoomIn",
+      "bounce",
+      "pulse",
+      "spin",
+      "shake",
+      "float",
+      // Semantic macros
+      "surface",
+      "text",
+      "elevation",
+      "state",
+      "spacing",
+      // Intent API
+      "intent",
+      // Constraint
+      "constrain"
+    ];
     KNOWN_SHORTHANDS = [
       // Spacing
       "m",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chaincss",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "ChainCSS - The first CSS-in-JS library with true auto-detection mixed mode. Zero runtime by default, dynamic when you need it.",
   "type": "module",
   "main": "./dist/index.js",

package/src/compiler/intent-engine.ts

@@ -186,6 +186,13 @@ const LAYOUT_MACROS: Record<string, LayoutMacro> = {
     defaults: {},
   },
 
+
+  autoContrast: {
+    name: 'autoContrast',
+    description: 'Automatically sets text color (black/white) for WCAG AA contrast against the background',
+    properties: {},
+    defaults: {},
+  },
   glass: {
     name: 'glass',
     description: 'Frosted glass morphism effect',
@@ -366,6 +373,27 @@ export const intent = {
   // Layout Macros
   macro(name: string): Record<string, any> | null { return expandLayoutMacro(name); },
   getMacros(): string[] { return getAvailableMacros(); },
+  /**
+   * Auto-set text color for accessible contrast against the background.
+   * Uses WCAG AA contrast ratio to pick black or white.
+   */
+  autoContrast(bgColor: string): string {
+    // Parse the background color and determine luminance
+    let r = 128, g = 128, b = 128;
+    const hex = bgColor.replace('#', '');
+    if (hex.length === 3) {
+      r = parseInt(hex[0] + hex[0], 16);
+      g = parseInt(hex[1] + hex[1], 16);
+      b = parseInt(hex[2] + hex[2], 16);
+    } else if (hex.length === 6) {
+      r = parseInt(hex.slice(0, 2), 16);
+      g = parseInt(hex.slice(2, 4), 16);
+      b = parseInt(hex.slice(4, 6), 16);
+    }
+    // Relative luminance
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance > 0.5 ? '#000000' : '#ffffff';
+  },
   getMacroDescription(name: string): string | null { return getMacroDescription(name); },
   hasMacro(name: string): boolean { return name in LAYOUT_MACROS; },
   /**

package/src/compiler/suggestions.ts

@@ -7,6 +7,31 @@ export interface SuggestionMatch {
 }
 
 // Known shorthands (from shorthandMap)
+
+// Known macros (from intent-engine and Chain.ts)
+export const KNOWN_MACROS: string[] = [
+  // Intent Macros
+  'stickyHeader', 'card', 'hero', 'container', 'center', 'gridList',
+  'sidebar', 'pill', 'glass', 'truncate', 'srOnly', 'autoContrast',
+  // Chain.ts special methods
+  'flex', 'grid', 'inlineFlex', 'inlineGrid', 'flexCenter', 'gridCenter',
+  'stack', 'cols', 'rows', 'bento', 'gridTable',
+  'mx', 'my', 'px', 'py', 'size', 'gap', 'gapX', 'gapY', 'inset', 'insetX', 'insetY',
+  'borderX', 'borderY',
+  'absolute', 'fixed', 'sticky', 'relative',
+  'hide', 'show', 'unselectable', 'scrollable', 'safeArea',
+  'circle', 'square', 'truncate', 'fluidText', 'aspect', 'lineClamp',
+  'glass', 'glow', 'textGradient', 'meshGradient', 'noise', 'shimmer',
+  'clickScale', 'pressable', 'focusRing', 'skeleton',
+  'fullScreen', 'containerMacro', 'outlineDebug', 'parallax', 'frostedNav',
+  'fadeIn', 'slideInUp', 'zoomIn', 'bounce', 'pulse', 'spin', 'shake', 'float',
+  // Semantic macros
+  'surface', 'text', 'elevation', 'state', 'spacing',
+  // Intent API
+  'intent',
+  // Constraint
+  'constrain',
+];
 export const KNOWN_SHORTHANDS: string[] = [
   // Spacing
   'm', 'mt', 'mr', 'mb', 'ml', 
@@ -155,6 +180,10 @@ function findBestMatches(
 
 // Get type for a candidate
 function getTypeForCandidate(candidate: string): 'shorthand' | 'css-property' | 'macro' | 'animation' | 'breakpoint' {
+  if (KNOWN_MACROS.includes(candidate)) return 'macro';
+  if (KNOWN_SHORTHANDS.includes(candidate)) return 'shorthand';
+  if (ANIMATION_PRESETS.includes(candidate)) return 'animation';
+  if (BREAKPOINTS.includes(candidate)) return 'breakpoint';
   if (KNOWN_SHORTHANDS.includes(candidate)) return 'shorthand';
   if (COMMON_CSS_PROPERTIES.includes(candidate)) return 'css-property';
   if (ANIMATION_PRESETS.includes(candidate)) return 'animation';
@@ -177,6 +206,7 @@ export function getSuggestion(
     candidates = [...COMMON_CSS_PROPERTIES, ...validProperties];
   } else {
     candidates = [
+      ...KNOWN_MACROS,
       ...KNOWN_SHORTHANDS,
       ...COMMON_CSS_PROPERTIES,
       ...validProperties,
@@ -354,6 +384,7 @@ export function getValueSuggestion(
 export function getAutocompleteSuggestions(prefix: string = '', limit: number = 10): SuggestionMatch[] {
   const allSuggestions = [
     ...KNOWN_SHORTHANDS.map(s => ({ name: s, type: 'shorthand' as const, distance: 0 })),
+    ...KNOWN_MACROS.map(s => ({ name: s, type: 'macro' as const, distance: 0 })),
     ...COMMON_CSS_PROPERTIES.map(s => ({ name: s, type: 'css-property' as const, distance: 0 })),
     ...ANIMATION_PRESETS.map(s => ({ name: s, type: 'animation' as const, distance: 0 })),
     ...BREAKPOINTS.map(s => ({ name: s, type: 'breakpoint' as const, distance: 0 }))
@@ -421,6 +452,7 @@ export function getDetailedSuggestion(prop: string, validProperties: string[] =
 
 // Export default
 export default {
+  KNOWN_MACROS,
   getSuggestion,
   getSuggestions,
   getPropertySuggestion,

package/src/core/types.ts

@@ -160,6 +160,7 @@ export interface ChainCSSConfig {
   classNameGenerator?: (name: string, options?: any) => string;
   
   plugins?: ChainCSSPlugin[];
+  macros?: Record<string, (value: any) => Record<string, any>>;
   
   minifySelectors?: boolean;
   extractCritical?: boolean;