@bookklik/senangstart-css 0.2.7 → 0.2.9

package/src/compiler/generators/css.js

@@ -4,22 +4,36 @@
  */
 
 import { generatePreflight } from './preflight.js';
+import { sanitizeValue } from '../../utils/common.js';
+import { buildAllMaps } from '../../definitions/index.js';
+
+// Initialize maps from definitions - Single Source of Truth
+const { layoutMap, typographyKeywords } = buildAllMaps();
+
+// Helper to sanitize arbitrary values using common utility
+function sanitizeArbitraryValue(value) {
+  return sanitizeValue(value);
+}
+
+// CSS color keywords that should be passed through directly without var() wrapping
+const CSS_COLOR_KEYWORDS = ['transparent', 'currentColor', 'inherit', 'initial', 'unset'];
 
 /**
- * Sanitize arbitrary value to prevent CSS injection
- * @param {string} value - Value to sanitize
- * @returns {string} - Sanitized value
+ * Resolve a color value to CSS
+ * @param {string} value - The color value
+ * @param {boolean} isArbitrary - Whether the value is arbitrary (wrapped in [])
+ * @returns {string} - The resolved CSS color value
  */
-function sanitizeArbitraryValue(value) {
-  if (typeof value !== 'string') {
-    return '';
+function resolveColorValue(value, isArbitrary) {
+  if (isArbitrary) {
+    return value;
   }
-  // Remove potentially dangerous characters that could break CSS syntax
-  const dangerousChars = /[;}{]/g;
-  if (dangerousChars.test(value)) {
-    return value.replace(dangerousChars, '_');
+  // Check if it's a CSS keyword that should pass through directly
+  if (CSS_COLOR_KEYWORDS.includes(value)) {
+    return value;
   }
-  return value;
+  // Otherwise wrap in CSS variable
+  return `var(--c-${value})`;
 }
 
 /**
@@ -88,8 +102,9 @@ export function generateCSSVariables(config) {
     '60': '15rem', '64': '16rem', '72': '18rem', '80': '20rem', '96': '24rem'
   };
   for (const [key, value] of Object.entries(twSpacing)) {
-    css += `  --tw-${key}: ${value};\n`;
+    css += `  --tw-${key.replace(/\./g, '\\\\.')}: ${value};\n`;
   }
+
   
   // Tailwind Border Radius Scale
   const twRadius = {
@@ -97,7 +112,7 @@ export function generateCSSVariables(config) {
     'lg': '0.5rem', 'xl': '0.75rem', '2xl': '1rem', '3xl': '1.5rem', 'full': '9999px'
   };
   for (const [key, value] of Object.entries(twRadius)) {
-    css += `  --tw-rounded-${key}: ${value};\n`;
+    css += `  --r-tw-${key}: ${value};\n`;
   }
   
   // Tailwind Shadow Scale
@@ -112,7 +127,7 @@ export function generateCSSVariables(config) {
     'none': '0 0 #0000'
   };
   for (const [key, value] of Object.entries(twShadow)) {
-    css += `  --tw-shadow-${key}: ${value};\n`;
+    css += `  --shadow-tw-${key}: ${value};\n`;
   }
   
   // Tailwind Font Size Scale
@@ -161,95 +176,8 @@ export function generateCSSVariables(config) {
 function generateLayoutRule(token, config) {
   const { property, value, isArbitrary } = token;
   
-  const layoutMap = {
-    // Display
-    'flex': 'display: flex;',
-    'grid': 'display: grid;',
-    'inline-flex': 'display: inline-flex;',
-    'inline-grid': 'display: inline-grid;',
-    'block': 'display: block;',
-    'inline': 'display: inline-block;',
-    'hidden': 'display: none;',
-    
-    // Flex Direction
-    'row': 'flex-direction: row;',
-    'col': 'flex-direction: column;',
-    'row-reverse': 'flex-direction: row-reverse;',
-    'col-reverse': 'flex-direction: column-reverse;',
-    
-    // Flex Wrap
-    'wrap': 'flex-wrap: wrap;',
-    'nowrap': 'flex-wrap: nowrap;',
-    'wrap-reverse': 'flex-wrap: wrap-reverse;',
-    
-    // Flex Item
-    'grow': 'flex-grow: 1;',
-    'grow-0': 'flex-grow: 0;',
-    'shrink': 'flex-shrink: 1;',
-    'shrink-0': 'flex-shrink: 0;',
-    
-    // Grid Auto Flow
-    'grid-flow-row': 'grid-auto-flow: row;',
-    'grid-flow-col': 'grid-auto-flow: column;',
-    'grid-flow-dense': 'grid-auto-flow: dense;',
-    'grid-flow-row-dense': 'grid-auto-flow: row dense;',
-    'grid-flow-col-dense': 'grid-auto-flow: column dense;',
-    
-    // Shorthand Alignment (backwards compat - simple keywords)
-    'center': 'justify-content: center; align-items: center;',
-    'start': 'justify-content: flex-start; align-items: flex-start;',
-    'end': 'justify-content: flex-end; align-items: flex-end;',
-    'between': 'justify-content: space-between;',
-    'around': 'justify-content: space-around;',
-    'evenly': 'justify-content: space-evenly;',
-    
-    // Position
-    'absolute': 'position: absolute;',
-    'relative': 'position: relative;',
-    'fixed': 'position: fixed;',
-    'sticky': 'position: sticky;',
-    'static': 'position: static;',
-    
-    // Visibility
-    'visible': 'visibility: visible;',
-    'invisible': 'visibility: hidden;',
-    
-    // Isolation
-    'isolate': 'isolation: isolate;',
-    'isolate-auto': 'isolation: auto;',
-    
-    // Box Sizing
-    'box-border': 'box-sizing: border-box;',
-    'box-content': 'box-sizing: content-box;',
-    
-    // Float
-    'float-left': 'float: left;',
-    'float-right': 'float: right;',
-    'float-none': 'float: none;',
-    
-    // Clear
-    'clear-left': 'clear: left;',
-    'clear-right': 'clear: right;',
-    'clear-both': 'clear: both;',
-    'clear-none': 'clear: none;',
-    
-    // Table - Border Collapse
-    'border-collapse': 'border-collapse: collapse;',
-    'border-separate': 'border-collapse: separate;',
-    
-    // Table - Table Layout
-    'table-auto': 'table-layout: auto;',
-    'table-fixed': 'table-layout: fixed;',
-    
-    // Table - Caption Side
-    'caption-top': 'caption-side: top;',
-    'caption-bottom': 'caption-side: bottom;',
-    
-    // Container
-    'container': 'width: 100%; margin-left: auto; margin-right: auto;'
-  };
-  
   // Check for simple layout keywords first (property === value means it's a keyword like 'flex', 'grid', etc.)
+  // layoutMap is now imported from definitions
   if (property === value && layoutMap[property]) {
     return layoutMap[property];
   }
@@ -381,27 +309,64 @@ function generateLayoutRule(token, config) {
     return `object-position: ${cssValue};`;
   }
   
+  // Percentage adjectives for positioning utilities
+  const positioningPercentages = {
+    'full': '100%',
+    'half': '50%',
+    'third': '33.333333%',
+    'third-2x': '66.666667%',
+    'quarter': '25%',
+    'quarter-2x': '50%',
+    'quarter-3x': '75%',
+    // Keep fractional values for backwards compatibility
+    '1/1': '100%',
+    '1/2': '50%',
+    '1/3': '33.333333%',
+    '2/3': '66.666667%',
+    '1/4': '25%',
+    '2/4': '50%',
+    '3/4': '75%'
+  };
+  
+  // Helper function to resolve positioning value
+  const resolvePositioningValue = (val, arb) => {
+    if (arb) return val;
+    if (val === '0') return '0';
+    // Check for negative percentage adjective
+    if (val.startsWith('-')) {
+      const positiveVal = val.substring(1);
+      if (positioningPercentages[positiveVal]) {
+        return `-${positioningPercentages[positiveVal]}`;
+      }
+    }
+    // Check for percentage adjective
+    if (positioningPercentages[val]) {
+      return positioningPercentages[val];
+    }
+    return `var(--s-${val})`;
+  };
+  
   // Inset (all sides)
   if (property === 'inset') {
-    const cssValue = isArbitrary ? value : (value === '0' ? '0' : `var(--s-${value})`);
+    const cssValue = resolvePositioningValue(value, isArbitrary);
     return `inset: ${cssValue};`;
   }
   
   // Individual positioning: top, right, bottom, left
   if (['top', 'right', 'bottom', 'left'].includes(property)) {
-    const cssValue = isArbitrary ? value : (value === '0' ? '0' : `var(--s-${value})`);
+    const cssValue = resolvePositioningValue(value, isArbitrary);
     return `${property}: ${cssValue};`;
   }
   
   // Inset X (left + right)
   if (property === 'inset-x') {
-    const cssValue = isArbitrary ? value : (value === '0' ? '0' : `var(--s-${value})`);
+    const cssValue = resolvePositioningValue(value, isArbitrary);
     return `left: ${cssValue}; right: ${cssValue};`;
   }
   
   // Inset Y (top + bottom)
   if (property === 'inset-y') {
-    const cssValue = isArbitrary ? value : (value === '0' ? '0' : `var(--s-${value})`);
+    const cssValue = resolvePositioningValue(value, isArbitrary);
     return `top: ${cssValue}; bottom: ${cssValue};`;
   }
   
@@ -586,6 +551,39 @@ function generateSpaceRule(token, config) {
     return propMap[property] || '';
   }
   
+  // Percentage adjectives for sizing utilities (human-readable alternatives to fractions)
+  const percentageAdjectives = {
+    'full': '100%',
+    'half': '50%',
+    'third': '33.333333%',
+    'third-2x': '66.666667%',
+    'quarter': '25%',
+    'quarter-2x': '50%',
+    'quarter-3x': '75%',
+    // Keep fractional values for backwards compatibility
+    '1/1': '100%',
+    '1/2': '50%',
+    '1/3': '33.333333%',
+    '2/3': '66.666667%',
+    '1/4': '25%',
+    '2/4': '50%',
+    '3/4': '75%'
+  };
+  
+  // Check if this is a sizing utility with a percentage adjective
+  if (sizingProps.includes(property) && percentageAdjectives[value]) {
+    const cssVal = percentageAdjectives[value];
+    const propMap = {
+      'w': `width: ${cssVal};`,
+      'h': `height: ${cssVal};`,
+      'min-w': `min-width: ${cssVal};`,
+      'max-w': `max-width: ${cssVal};`,
+      'min-h': `min-height: ${cssVal};`,
+      'max-h': `max-height: ${cssVal};`
+    };
+    return propMap[property] || '';
+  }
+  
   // Determine the CSS value
   let cssValue;
   if (isArbitrary) {
@@ -598,7 +596,7 @@ function generateSpaceRule(token, config) {
     let baseValue;
     if (cleanValue.startsWith('tw-')) {
       const twValue = cleanValue.slice(3); // Remove 'tw-' prefix
-      baseValue = `var(--tw-${twValue})`;
+      baseValue = `var(--tw-${twValue.replace(/\./g, '\\\\.')})`;
     } else {
       baseValue = `var(--s-${cleanValue})`;
     }
@@ -667,100 +665,7 @@ function generateVisualRule(token, config) {
   const { property, value, isArbitrary } = token;
   
   // Static typography keywords
-  const typographyKeywords = {
-    // Font Style
-    'italic': 'font-style: italic;',
-    'not-italic': 'font-style: normal;',
-    
-    // Font Stretch
-    'font-stretch-condensed': 'font-stretch: condensed;',
-    'font-stretch-expanded': 'font-stretch: expanded;',
-    'font-stretch-normal': 'font-stretch: normal;',
-    
-    // Font Smoothing
-    'antialiased': '-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;',
-    'subpixel-antialiased': '-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;',
-    
-    // Font Variant Numeric
-    'normal-nums': 'font-variant-numeric: normal;',
-    'ordinal': 'font-variant-numeric: ordinal;',
-    'slashed-zero': 'font-variant-numeric: slashed-zero;',
-    'lining-nums': 'font-variant-numeric: lining-nums;',
-    'oldstyle-nums': 'font-variant-numeric: oldstyle-nums;',
-    'proportional-nums': 'font-variant-numeric: proportional-nums;',
-    'tabular-nums': 'font-variant-numeric: tabular-nums;',
-    
-    // Text Transform
-    'uppercase': 'text-transform: uppercase;',
-    'lowercase': 'text-transform: lowercase;',
-    'capitalize': 'text-transform: capitalize;',
-    'normal-case': 'text-transform: none;',
-    
-    // Text Decoration Line
-    'underline': 'text-decoration-line: underline;',
-    'overline': 'text-decoration-line: overline;',
-    'line-through': 'text-decoration-line: line-through;',
-    'no-underline': 'text-decoration-line: none;',
-    
-    // Text Decoration Style
-    'decoration-solid': 'text-decoration-style: solid;',
-    'decoration-double': 'text-decoration-style: double;',
-    'decoration-dotted': 'text-decoration-style: dotted;',
-    'decoration-dashed': 'text-decoration-style: dashed;',
-    'decoration-wavy': 'text-decoration-style: wavy;',
-    
-    // Text Overflow
-    'truncate': 'overflow: hidden; text-overflow: ellipsis; white-space: nowrap;',
-    'text-ellipsis': 'text-overflow: ellipsis;',
-    'text-clip': 'text-overflow: clip;',
-    
-    // Text Wrap
-    'text-wrap': 'text-wrap: wrap;',
-    'text-nowrap': 'text-wrap: nowrap;',
-    'text-balance': 'text-wrap: balance;',
-    'text-pretty': 'text-wrap: pretty;',
-    
-    // Whitespace
-    'whitespace-normal': 'white-space: normal;',
-    'whitespace-nowrap': 'white-space: nowrap;',
-    'whitespace-pre': 'white-space: pre;',
-    'whitespace-pre-line': 'white-space: pre-line;',
-    'whitespace-pre-wrap': 'white-space: pre-wrap;',
-    'whitespace-break-spaces': 'white-space: break-spaces;',
-    
-    // Word Break
-    'break-normal': 'overflow-wrap: normal; word-break: normal;',
-    'break-words': 'overflow-wrap: break-word;',
-    'break-all': 'word-break: break-all;',
-    'break-keep': 'word-break: keep-all;',
-    
-    // Hyphens
-    'hyphens-none': 'hyphens: none;',
-    'hyphens-manual': 'hyphens: manual;',
-    'hyphens-auto': 'hyphens: auto;',
-    
-    // Vertical Align
-    'align-baseline': 'vertical-align: baseline;',
-    'align-top': 'vertical-align: top;',
-    'align-middle': 'vertical-align: middle;',
-    'align-bottom': 'vertical-align: bottom;',
-    'align-text-top': 'vertical-align: text-top;',
-    'align-text-bottom': 'vertical-align: text-bottom;',
-    'align-sub': 'vertical-align: sub;',
-    'align-super': 'vertical-align: super;',
-    
-    // List Style Type
-    'list-none': 'list-style-type: none;',
-    'list-disc': 'list-style-type: disc;',
-    'list-decimal': 'list-style-type: decimal;',
-    'list-square': 'list-style-type: square;',
-    
-    // List Style Position
-    'list-inside': 'list-style-position: inside;',
-    'list-outside': 'list-style-position: outside;'
-  };
-  
-  // Check static keywords first
+  // Check static keywords first (imported from definitions)
   if (typographyKeywords[property]) {
     return typographyKeywords[property];
   }
@@ -768,12 +673,34 @@ function generateVisualRule(token, config) {
   const rules = {
     // Background Color
     'bg': () => {
-      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      const cssValue = resolveColorValue(value, isArbitrary);
       return `background-color: ${cssValue};`;
     },
     
     // Background Image
     'bg-image': () => {
+      if (value === 'none') return 'background-image: none;';
+      
+      // Handle gradient definitions
+      if (value.startsWith('gradient-to-')) {
+        const directionMap = {
+          't': 'to top',
+          'tr': 'to top right',
+          'r': 'to right',
+          'br': 'to bottom right',
+          'b': 'to bottom',
+          'bl': 'to bottom left',
+          'l': 'to left',
+          'tl': 'to top left'
+        };
+        const directionCode = value.replace('gradient-to-', '');
+        const direction = directionMap[directionCode];
+        
+        if (direction) {
+          return `background-image: linear-gradient(${direction}, var(--ss-gradient-stops, transparent));`;
+        }
+      }
+      
       const cssValue = isArbitrary ? sanitizeArbitraryValue(`url(${value})`) : `url(${value})`;
       return `background-image: ${cssValue};`;
     },
@@ -852,13 +779,29 @@ function generateVisualRule(token, config) {
     'bg-blend': () => {
       return `background-blend-mode: ${value};`;
     },
+
+    // Gradient Color Stops
+    'from': () => {
+      const cssValue = resolveColorValue(value, isArbitrary);
+      return `--ss-gradient-from: ${cssValue}; --ss-gradient-to: rgb(255 255 255 / 0); --ss-gradient-stops: var(--ss-gradient-from), var(--ss-gradient-to);`;
+    },
+    
+    'via': () => {
+      const cssValue = resolveColorValue(value, isArbitrary);
+      return `--ss-gradient-to: rgb(255 255 255 / 0); --ss-gradient-stops: var(--ss-gradient-from), ${cssValue}, var(--ss-gradient-to);`;
+    },
+    
+    'to': () => {
+      const cssValue = resolveColorValue(value, isArbitrary);
+      return `--ss-gradient-to: ${cssValue};`;
+    },
     
     // Text color
     'text': () => {
       if (['left', 'center', 'right', 'justify'].includes(value)) {
         return `text-align: ${value};`;
       }
-      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      const cssValue = resolveColorValue(value, isArbitrary);
       return `color: ${cssValue};`;
     },
     
@@ -951,7 +894,7 @@ function generateVisualRule(token, config) {
     
     // Text decoration color
     'decoration': () => {
-      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      const cssValue = resolveColorValue(value, isArbitrary);
       return `text-decoration-color: ${cssValue};`;
     },
     
@@ -975,33 +918,33 @@ function generateVisualRule(token, config) {
     
     // Border color
     'border': () => {
-      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      const cssValue = resolveColorValue(value, isArbitrary);
       return `border-color: ${cssValue}; border-style: solid;`;
     },
     
     // Border color - directional
     'border-t': () => {
-      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      const cssValue = resolveColorValue(value, isArbitrary);
       return `border-top-color: ${cssValue}; border-top-style: solid;`;
     },
     'border-b': () => {
-      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      const cssValue = resolveColorValue(value, isArbitrary);
       return `border-bottom-color: ${cssValue}; border-bottom-style: solid;`;
     },
     'border-l': () => {
-      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      const cssValue = resolveColorValue(value, isArbitrary);
       return `border-left-color: ${cssValue}; border-left-style: solid;`;
     },
     'border-r': () => {
-      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      const cssValue = resolveColorValue(value, isArbitrary);
       return `border-right-color: ${cssValue}; border-right-style: solid;`;
     },
     'border-x': () => {
-      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      const cssValue = resolveColorValue(value, isArbitrary);
       return `border-left-color: ${cssValue}; border-right-color: ${cssValue}; border-left-style: solid; border-right-style: solid;`;
     },
     'border-y': () => {
-      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      const cssValue = resolveColorValue(value, isArbitrary);
       return `border-top-color: ${cssValue}; border-bottom-color: ${cssValue}; border-top-style: solid; border-bottom-style: solid;`;
     },
     
@@ -1053,7 +996,7 @@ function generateVisualRule(token, config) {
     
     // Divide color - all sides
     'divide': () => {
-      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      const cssValue = resolveColorValue(value, isArbitrary);
       return `border-color: ${cssValue}; border-style: solid;`;
     },
     
@@ -1063,7 +1006,7 @@ function generateVisualRule(token, config) {
       if (value === 'reverse') {
         return '--ss-divide-x-reverse: 1;';
       }
-      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      const cssValue = resolveColorValue(value, isArbitrary);
       return `border-left-color: ${cssValue}; border-right-color: ${cssValue}; border-left-style: solid; border-right-style: solid;`;
     },
     'divide-y': () => {
@@ -1071,7 +1014,7 @@ function generateVisualRule(token, config) {
       if (value === 'reverse') {
         return '--ss-divide-y-reverse: 1;';
       }
-      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      const cssValue = resolveColorValue(value, isArbitrary);
       return `border-top-color: ${cssValue}; border-bottom-color: ${cssValue}; border-top-style: solid; border-bottom-style: solid;`;
     },
     
@@ -1104,7 +1047,7 @@ function generateVisualRule(token, config) {
     
     // Outline Color
     'outline': () => {
-      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      const cssValue = resolveColorValue(value, isArbitrary);
       return `outline-color: ${cssValue};`;
     },
     
@@ -1119,6 +1062,51 @@ function generateVisualRule(token, config) {
       return `outline-offset: ${cssValue};`;
     },
     
+    // Ring Width
+    'ring-w': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `--ss-ring-width: ${cssValue};`;
+    },
+    
+    // Ring Color
+    'ring-color': () => {
+      const cssValue = resolveColorValue(value, isArbitrary);
+      return `--ss-ring-color: ${cssValue};`;
+    },
+    
+    // Ring Offset Width
+    'ring-offset': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `--ss-ring-offset-width: ${cssValue};`;
+    },
+    
+    // Ring Offset Color
+    'ring-offset-color': () => {
+      const cssValue = resolveColorValue(value, isArbitrary);
+      return `--ss-ring-offset-color: ${cssValue};`;
+    },
+    
+    // Ring (Main utility)
+    'ring': () => {
+      if (value === 'none') {
+        return 'box-shadow: 0 0 #0000;';
+      }
+      
+      const ringPresets = {
+        'thin': '1px',
+        'regular': '2px',
+        'small': '4px',
+        'medium': '6px',
+        'big': '8px'
+      };
+      
+      const width = isArbitrary ? value : (ringPresets[value] || (parseInt(value) ? `${value}px` : `var(--s-${value})`));
+      
+      // We set both the variable and the box-shadow that uses it
+      // This allows ring:[size] to work on its own or with ring-color:[color]
+      return `--ss-ring-width: ${width}; box-shadow: var(--ss-ring-inset) 0 0 0 calc(var(--ss-ring-width) + var(--ss-ring-offset-width, 0px)) var(--ss-ring-color, currentColor);`;
+    },
+    
     // Box shadow
     'shadow': () => {
       return `box-shadow: var(--shadow-${value});`;
@@ -1596,11 +1584,31 @@ function generateVisualRule(token, config) {
     'translate-x': () => {
       const translatePresets = {
         'full': '100%',
+        'half': '50%',
+        'third': '33.333333%',
+        'third-2x': '66.666667%',
+        'quarter': '25%',
+        'quarter-2x': '50%',
+        'quarter-3x': '75%',
+        // Legacy fraction format (for backward compatibility)
         '1/2': '50%',
         '1/3': '33.333333%',
         '2/3': '66.666667%',
         '1/4': '25%',
-        '3/4': '75%'
+        '3/4': '75%',
+        // Negatives (prefixed with -)
+        '-full': '-100%',
+        '-half': '-50%',
+        '-third': '-33.333333%',
+        '-third-2x': '-66.666667%',
+        '-quarter': '-25%',
+        '-quarter-2x': '-50%',
+        '-quarter-3x': '-75%',
+        '-1/2': '-50%',
+        '-1/3': '-33.333333%',
+        '-2/3': '-66.666667%',
+        '-1/4': '-25%',
+        '-3/4': '-75%'
       };
       const cssValue = isArbitrary ? value : (translatePresets[value] || `var(--s-${value})`);
       return `transform: translateX(${cssValue});`;
@@ -1609,42 +1617,36 @@ function generateVisualRule(token, config) {
     'translate-y': () => {
       const translatePresets = {
         'full': '100%',
+        'half': '50%',
+        'third': '33.333333%',
+        'third-2x': '66.666667%',
+        'quarter': '25%',
+        'quarter-2x': '50%',
+        'quarter-3x': '75%',
+        // Legacy fraction format (for backward compatibility)
         '1/2': '50%',
         '1/3': '33.333333%',
         '2/3': '66.666667%',
         '1/4': '25%',
-        '3/4': '75%'
+        '3/4': '75%',
+        // Negatives (prefixed with -)
+        '-full': '-100%',
+        '-half': '-50%',
+        '-third': '-33.333333%',
+        '-third-2x': '-66.666667%',
+        '-quarter': '-25%',
+        '-quarter-2x': '-50%',
+        '-quarter-3x': '-75%',
+        '-1/2': '-50%',
+        '-1/3': '-33.333333%',
+        '-2/3': '-66.666667%',
+        '-1/4': '-25%',
+        '-3/4': '-75%'
       };
       const cssValue = isArbitrary ? value : (translatePresets[value] || `var(--s-${value})`);
       return `transform: translateY(${cssValue});`;
     },
     
-    '-translate-x': () => {
-      const translatePresets = {
-        'full': '-100%',
-        '1/2': '-50%',
-        '1/3': '-33.333333%',
-        '2/3': '-66.666667%',
-        '1/4': '-25%',
-        '3/4': '-75%'
-      };
-      const cssValue = isArbitrary ? `-${value}` : (translatePresets[value] || `calc(var(--s-${value}) * -1)`);
-      return `transform: translateX(${cssValue});`;
-    },
-    
-    '-translate-y': () => {
-      const translatePresets = {
-        'full': '-100%',
-        '1/2': '-50%',
-        '1/3': '-33.333333%',
-        '2/3': '-66.666667%',
-        '1/4': '-25%',
-        '3/4': '-75%'
-      };
-      const cssValue = isArbitrary ? `-${value}` : (translatePresets[value] || `calc(var(--s-${value}) * -1)`);
-      return `transform: translateY(${cssValue});`;
-    },
-    
     // Skew
     'skew-x': () => {
       const cssValue = isArbitrary ? value : `${value}deg`;
@@ -1984,7 +1986,7 @@ function generateVisualRule(token, config) {
  * @param {Object} config - Configuration object
  * @param {boolean} skipDarkWrapper - If true, don't add dark mode wrapper (used when generating inside dark block)
  */
-export function generateRule(token, config, skipDarkWrapper = false) {
+export function generateRule(token, config, skipDarkWrapper = false, interactIds = new Set()) {
   const { raw, attrType, breakpoint, state } = token;
   
   let cssDeclaration = '';
@@ -2020,9 +2022,59 @@ export function generateRule(token, config, skipDarkWrapper = false) {
   if (state && state !== 'dark') {
     if (isDivide) {
       // For divide utilities, add state to the element after tilde
+      // Divide utilities don't support group/peer states yet to avoid complexity
       selector = `[${attrType}~="${raw}"] > :not([hidden]) ~ :not([hidden]):${state}`;
     } else {
-      selector += `:${state}`;
+      // Helper to map state to CSS selector
+      const getStateSelector = (s) => {
+        const map = {
+          'expanded': '[aria-expanded="true"]',
+          'selected': '[aria-selected="true"]',
+          'disabled': ':disabled'
+        };
+        return map[s] || `:${s}`;
+      };
+
+      const selectors = [];
+      
+      // 1. Standard State Selector
+      selectors.push(`${selector}${getStateSelector(state)}`);
+      
+      // 2. Group & Peer State Selectors
+      // Only for supported triggers
+      const groupTriggers = {
+        'hover': 'hoverable',
+        'focus': 'focusable',
+        'focus-visible': 'focusable',
+        'active': 'pressable',
+        'expanded': 'expandable',
+        'selected': 'selectable'
+      };
+      
+      if (groupTriggers[state]) {
+        const parentAttr = groupTriggers[state];
+        // For focus, we trigger on focus-within of the container
+        let triggerState = state;
+        if (state === 'focus' || state === 'focus-visible') triggerState = 'focus-within';
+        
+        const triggerSelector = getStateSelector(triggerState);
+        
+        // Group Selector
+        // [layout~="hoverable"]:not([layout~="disabled"]):hover [visual~="..."]
+        const groupSelector = `[layout~="${parentAttr}"]:not([layout~="disabled"])${triggerSelector} ${selector}`;
+        selectors.push(groupSelector);
+        
+        // Peer Selectors
+        // [interact~="id"]:not([layout~="disabled"]):hover ~ [listens~="id"][visual~="..."]
+        if (interactIds && interactIds.size > 0) {
+          for (const id of interactIds) {
+            const peerSelector = `[interact~="${id}"]:not([layout~="disabled"])${triggerSelector} ~ [listens~="${id}"]${selector}`;
+            selectors.push(peerSelector);
+          }
+        }
+      }
+      
+      selector = selectors.join(',\n');
     }
   }
   
@@ -2110,6 +2162,14 @@ export function generateCSS(tokens, config) {
     }
   }
 
+  // Collect interact IDs for Peer selector generation
+  const interactIds = new Set();
+  for (const token of tokens) {
+    if (token.attrType === 'interact') {
+      interactIds.add(token.raw);
+    }
+  }
+
   // Track display properties to handle conflicts like Tailwind
   // When responsive display property conflicts with base display property on the same element,
   // we need to add reset rules in the responsive media query
@@ -2131,7 +2191,7 @@ export function generateCSS(tokens, config) {
 
   // Generate base rules
   for (const token of baseTokens) {
-    css += generateRule(token, config);
+    css += generateRule(token, config, false, interactIds);
   }
 
   // Generate responsive rules
@@ -2169,7 +2229,7 @@ export function generateCSS(tokens, config) {
 
       // Generate responsive token rules
       for (const token of bpTokens) {
-        css += '  ' + generateRule(token, config);
+        css += '  ' + generateRule(token, config, false, interactIds);
       }
       css += '}\n';
     }
@@ -2185,14 +2245,14 @@ export function generateCSS(tokens, config) {
       css += `\n/* Dark Mode (prefers-color-scheme) */\n`;
       css += `@media (prefers-color-scheme: dark) {\n`;
       for (const token of darkTokens) {
-        css += '  ' + generateRule(token, config, true);
+        css += '  ' + generateRule(token, config, true, interactIds);
       }
       css += '}\n';
     } else {
       // Selector strategy (.dark class or custom selector)
       css += `\n/* Dark Mode (${darkSelector}) */\n`;
       for (const token of darkTokens) {
-        const baseRule = generateRule(token, config, true);
+        const baseRule = generateRule(token, config, true, interactIds);
         // Wrap selector with dark parent
         const wrappedRule = baseRule.replace(/^(\[[^\]]+\])/, `${darkSelector} $1`);
         css += wrappedRule;