@howssatoshi/quantumcss 1.0.1 → 1.1.0

package/src/defaults.js

@@ -2,164 +2,76 @@ const defaultTheme = {
   colors: {
     white: '#ffffff',
     black: '#000000',
-    gray: {
-      50: '#f9fafb',
-      100: '#f3f4f6',
-      200: '#e5e7eb',
-      300: '#d1d5db',
-      400: '#9ca3af',
-      500: '#6b7280',
-      600: '#4b5563',
-      700: '#374151',
-      800: '#1f2937',
-      900: '#111827',
+    slate: {
+      50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8',
+      500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617'
     },
     blue: {
-      50: '#eff6ff',
-      500: '#3b82f6',
-      600: '#2563eb',
+      50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb'
     },
-    red: {
-      500: '#ef4444',
+    orange: {
+      50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c'
     },
+    red: { 500: '#ef4444' },
     green: {
-      500: '#10b981',
+      100: '#d1fae5',
+      500: '#10b981'
     },
     starlight: {
-      blue: '#00d4ff',
-      peach: '#ffb38a',
-      orange: '#ff7e5f',
-      deep: '#08081a',
-    }
+      blue: '#00d4ff', peach: '#ffb38a', orange: '#ff7e5f', deep: '#08081a',
+    },
+    transparent: 'transparent',
   },
   spacing: {
-    0: '0px',
-    1: '0.25rem',
-    2: '0.5rem',
-    3: '0.75rem',
-    4: '1rem',
-    5: '1.25rem',
-    6: '1.5rem',
-    8: '2rem',
-    10: '2.5rem',
-    12: '3rem',
-    16: '4rem',
-    20: '5rem',
-    24: '6rem',
-    32: '8rem',
-    64: '16rem',
-    128: '32rem',
-    144: '36rem',
+    0: '0px', px: '1px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 
+    6: '1.5rem', 8: '2rem', 10: '2.5rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem', 
+    24: '6rem', 32: '8rem', 40: '10rem', 48: '12rem', 64: '16rem', 128: '32rem',
   },
   fontSize: {
-    xs: '0.75rem',
-    sm: '0.875rem',
-    base: '1rem',
-    lg: '1.125rem',
-    xl: '1.25rem',
-    '2xl': '1.5rem',
-    '3xl': '2rem',
-    '4xl': '2.5rem',
-    '5xl': '3.5rem',
-    '6xl': '4.5rem',
+    xs: '0.75rem', sm: '0.875rem', base: '1rem', lg: '1.125rem', xl: '1.25rem', 
+    '2xl': '1.5rem', '3xl': '2rem', '4xl': '2.5rem', '5xl': '3rem', '6xl': '4rem',
   },
   shadows: {
     sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
     md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
     lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
     xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
   }
 };
 
 const utilityMaps = {
-  // Layout
   flex: { property: 'display', value: 'flex' },
   grid: { property: 'display', value: 'grid' },
   hidden: { property: 'display', value: 'none' },
   block: { property: 'display', value: 'block' },
   'inline-block': { property: 'display', value: 'inline-block' },
-  
-  // Alignment
   'items-center': { property: 'align-items', value: 'center' },
   'items-start': { property: 'align-items', value: 'flex-start' },
   'items-end': { property: 'align-items', value: 'flex-end' },
   'justify-center': { property: 'justify-content', value: 'center' },
   'justify-between': { property: 'justify-content', value: 'space-between' },
-  'justify-start': { property: 'justify-content', value: 'flex-start' },
-  'justify-end': { property: 'justify-content', value: 'flex-end' },
-  
-  // Flex/Grid specific
   'flex-col': { property: 'flex-direction', value: 'column' },
-  'flex-grow': { property: 'flex-grow', value: '1' },
-  'flex-wrap': { property: 'flex-wrap', value: 'wrap' },
-  
-  // Sizing
-  w: 'width',
-  h: 'height',
+  'flex-row': { property: 'flex-direction', value: 'row' },
+  'flex-1': { property: 'flex', value: '1 1 0%' },
+  'flex-shrink-0': { property: 'flex-shrink', value: '0' },
   'w-full': { property: 'width', value: '100%' },
   'h-full': { property: 'height', value: '100%' },
-  'max-w-prose': { property: 'max-width', value: '65ch' },
-  'min-h-screen': { property: 'min-height', value: '100vh' },
-  
-  // Spacing
-  m: 'margin',
-  mt: 'margin-top',
-  mr: 'margin-right',
-  mb: 'margin-bottom',
-  ml: 'margin-left',
-  mx: ['margin-left', 'margin-right'],
-  my: ['margin-top', 'margin-bottom'],
-  p: 'padding',
-  pt: 'padding-top',
-  pr: 'padding-right',
-  pb: 'padding-bottom',
-  pl: 'padding-left',
-  px: ['padding-left', 'padding-right'],
-  py: ['padding-top', 'padding-bottom'],
-  gap: 'gap',
-  
-  // Typography
-  text: 'font-size',
-  'font-bold': { property: 'font-weight', value: '700' },
-  'font-medium': { property: 'font-weight', value: '500' },
-  'font-light': { property: 'font-weight', value: '300' },
-  'tracking-tighter': { property: 'letter-spacing', value: '-0.05em' },
-  'tracking-tight': { property: 'letter-spacing', value: '-0.025em' },
-  'text-center': { property: 'text-align', value: 'center' },
-  'text-left': { property: 'text-align', value: 'left' },
-  'text-right': { property: 'text-align', value: 'right' },
-  
-  // Visuals
-  bg: 'background-color',
-  rounded: 'border-radius',
-  'rounded-full': { property: 'border-radius', value: '9999px' },
-  'rounded-xl': { property: 'border-radius', value: '0.75rem' },
-  border: { property: 'border-width', value: '1px' },
-  'border-t': { property: 'border-top-width', value: '1px' },
-  'border-b': { property: 'border-bottom-width', value: '1px' },
-  shadow: 'box-shadow',
-  
-  // Interactivity & States
-  transition: { property: 'transition', value: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)' },
-  'scale-105': { property: 'transform', value: 'scale(1.05)' },
-  'active-scale': { property: 'transform', value: 'scale(0.96)' },
-  'cursor-pointer': { property: 'cursor', value: 'pointer' },
+  'min-w-0': { property: 'min-width', value: '0' },
   'overflow-hidden': { property: 'overflow', value: 'hidden' },
-
-  // Starlight Primitives
+  'overflow-visible': { property: 'overflow', value: 'visible' },
+  'border-none': { property: 'border-width', value: '0' },
+  'bg-transparent': { property: 'background-color', value: 'transparent' },
   'glass': {
-    property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border', 'box-shadow'], 
-    value: ['rgba(255, 255, 255, 0.03)', 'blur(16px)', 'blur(16px)', '1px solid rgba(255, 255, 255, 0.1)', '0 8px 32px 0 rgba(0, 0, 0, 0.37)'] 
+    property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border-width', 'border-color'], 
+    value: ['rgba(255, 255, 255, 0.03)', 'blur(16px)', 'blur(16px)', '1px', 'rgba(255, 255, 255, 0.1)'] 
   },
   'glow-blue': { property: 'box-shadow', value: '0 0 30px rgba(0, 212, 255, 0.25)' },
-  'glow-peach': { property: 'box-shadow', value: '0 0 30px rgba(255, 179, 138, 0.2)' },
   'bg-starlight': { property: 'background', value: 'linear-gradient(135deg, #ffb38a 0%, #00d4ff 100%)' },
   'text-gradient-starlight': {
     property: ['background', '-webkit-background-clip', '-webkit-text-fill-color', 'display'], 
     value: ['linear-gradient(to right, #ffb38a, #00d4ff)', 'text', 'transparent', 'inline-block'] 
   },
-
-  // Components
   'btn-starlight': {
     property: ['background', 'color', 'border', 'box-shadow', 'font-weight', 'transition', 'height', 'padding', 'display', 'align-items', 'justify-content', 'border-radius', 'cursor'],
     value: ['linear-gradient(135deg, #ffb38a 0%, #00d4ff 100%)', '#000', 'none', '0 0 20px rgba(0, 212, 255, 0.3)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.75rem', 'pointer']
@@ -169,59 +81,16 @@ const utilityMaps = {
     value: ['rgba(255, 255, 255, 0.05)', 'inherit', '1px solid rgba(255, 255, 255, 0.15)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.75rem', 'pointer']
   },
   'input-starlight': {
-    property: ['background-color', 'border', 'color', 'border-radius', 'padding', 'appearance', 'background-image', 'background-repeat', 'background-position', 'background-size', 'transition', 'height'],
-    value: [
-      'rgba(255, 255, 255, 0.04)', 
-      '1px solid rgba(255, 255, 255, 0.15)', 
-      'inherit', 
-      '0.75rem', 
-      '0 2.5rem 0 1rem',
-      'none',
-      'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'none\' viewBox=\'0 0 24 24\' stroke=\'rgba(255,255,255,0.4)\'%3E%3Cpath stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M8 9l4 4 4-4\' /%3E%3C/svg%3E")',
-      'no-repeat',
-      'right 1rem center',
-      '1rem',
-      'all 0.2s ease',
-      '3rem'
-    ]
+    property: ['background-color', 'border', 'color', 'border-radius', 'padding', 'appearance', 'transition', 'height'],
+    value: ['rgba(255, 255, 255, 0.04)', '1px solid rgba(255, 255, 255, 0.15)', 'inherit', '0.75rem', '0 1rem', 'none', 'all 0.2s ease', '3rem']
+  },
+  'textarea-starlight': {
+    property: ['background-color', 'border', 'color', 'border-radius', 'padding', 'appearance', 'transition', 'min-height', 'width', 'display'],
+    value: ['rgba(255, 255, 255, 0.04)', '1px solid rgba(255, 255, 255, 0.15)', 'inherit', '0.75rem', '1rem', 'none', 'all 0.2s ease', '8rem', '100%', 'block']
   },
   'checkbox-starlight': {
     property: ['appearance', 'width', 'height', 'background', 'border', 'border-radius', 'cursor', 'transition', 'position', 'display', 'align-items', 'justify-content'],
     value: ['none', '1.25rem', '1.25rem', 'rgba(255, 255, 255, 0.05)', '1px solid rgba(255, 255, 255, 0.2)', '0.375rem', 'pointer', 'all 0.2s ease', 'relative', 'inline-flex', 'center', 'center']
-  },
-  'radio-starlight': {
-    property: ['appearance', 'width', 'height', 'background', 'border', 'border-radius', 'cursor', 'transition', 'position', 'display', 'align-items', 'justify-content'],
-    value: ['none', '1.25rem', '1.25rem', 'rgba(255, 255, 255, 0.05)', '1px solid rgba(255, 255, 255, 0.2)', '50%', 'pointer', 'all 0.2s ease', 'relative', 'inline-flex', 'center', 'center']
-  },
-  
-  // Dialog & Menu
-  'dialog-overlay': {
-    property: ['position', 'top', 'left', 'width', 'height', 'background', 'backdrop-filter', 'display', 'align-items', 'justify-content', 'z-index'],
-    value: ['fixed', '0', '0', '100vw', '100vh', 'rgba(0, 0, 0, 0.6)', 'blur(12px)', 'flex', 'center', 'center', '400']
-  },
-  'dialog-content': {
-    property: ['background-color', 'backdrop-filter', 'border', 'border-radius', 'width', 'max-width', 'box-shadow', 'overflow', 'position'],
-    value: ['rgba(10, 10, 20, 0.98)', 'blur(20px)', '1px solid rgba(255, 255, 255, 0.1)', '1.5rem', '90%', '600px', '0 25px 50px -12px rgba(0, 0, 0, 0.5)', 'hidden', 'relative']
-  },
-  'dropdown-menu': {
-    property: ['background-color', 'backdrop-filter', 'border', 'border-radius', 'padding', 'box-shadow', 'min-width', 'z-index', 'margin-top'],
-    value: ['rgba(15, 15, 30, 0.98)', 'blur(20px)', '1px solid rgba(255, 255, 255, 0.1)', '1rem', '0.5rem', '0 20px 40px rgba(0,0,0,0.4)', '200px', '600', '0.5rem']
-  },
-  'dropdown-item': {
-    property: ['padding', 'color', 'border-radius', 'display', 'width', 'text-align', 'transition', 'cursor', 'font-size'],
-    value: ['0.625rem 1rem', 'rgba(255,255,255,0.7)', '0.625rem', 'block', '100%', 'left', 'all 0.2s', 'pointer', '0.875rem']
-  },
-
-  // Tooltip
-  'tooltip': {
-    property: ['position', 'bottom', 'left', 'transform', 'padding', 'background-color', 'backdrop-filter', 'border', 'border-radius', 'color', 'font-size', 'white-space', 'pointer-events', 'opacity', 'transition', 'z-index', 'box-shadow'],
-    value: ['absolute', '125%', '50%', 'translateX(-50%)', '0.5rem 0.75rem', 'rgba(10, 10, 30, 0.98)', 'blur(12px)', '1px solid rgba(0, 212, 255, 0.3)', '0.5rem', '#f1f5f9', '0.75rem', 'nowrap', 'none', '0', 'all 0.2s ease', '800', '0 4px 15px rgba(0, 0, 0, 0.4)']
-  },
-
-  // Skeleton
-  'skeleton': {
-    property: ['background-color', 'background-image', 'background-size', 'background-repeat', 'border-radius', 'width', 'height'],
-    value: ['rgba(255, 255, 255, 0.1)', 'linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent)', '200% 100%', 'no-repeat', '0.5rem', '100%', '1rem']
   }
 };
 

package/src/generator.js

@@ -3,181 +3,190 @@ const path = require('path');
 const { glob } = require('glob');
 const { defaultTheme, utilityMaps } = require('./defaults');
 
-const breakpoints = {
-  sm: '640px',
-  md: '768px',
-  lg: '1024px',
-  xl: '1280px',
-};
+const breakpoints = { sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px' };
 
 function generateCSS(configPath) {
-  delete require.cache[path.resolve(configPath)];
-  const config = require(path.resolve(configPath));
+  const resolvedPath = path.resolve(configPath);
+  if (fs.existsSync(resolvedPath)) delete require.cache[resolvedPath];
+  const config = fs.existsSync(resolvedPath) ? require(resolvedPath) : { content: [], theme: {} };
   
-  const contentPaths = config.content || [];
-  const theme = { ...defaultTheme };
-  if (config.theme) {
-    if (config.theme.extend) {
-      theme.colors = { ...theme.colors, ...config.theme.extend.colors };
-      theme.spacing = { ...theme.spacing, ...config.theme.extend.spacing };
-      theme.fontSize = { ...theme.fontSize, ...config.theme.extend.fontSize };
-      theme.shadows = { ...theme.shadows, ...config.theme.extend.shadows };
-    } else {
-      Object.assign(theme, config.theme);
-    }
+  const theme = JSON.parse(JSON.stringify(defaultTheme || {}));
+  theme.colors = theme.colors || {};
+  theme.spacing = theme.spacing || {};
+  theme.borderRadius = theme.borderRadius || {};
+  theme.fontSize = theme.fontSize || {};
+
+  if (config.theme && config.theme.extend) {
+    const ext = config.theme.extend;
+    if (ext.colors) Object.assign(theme.colors, ext.colors);
+    if (ext.spacing) Object.assign(theme.spacing, ext.spacing);
+    if (ext.borderRadius) Object.assign(theme.borderRadius, ext.borderRadius);
+    if (ext.fontSize) Object.assign(theme.fontSize, ext.fontSize);
   }
 
   const flattenedColors = {};
   Object.entries(theme.colors).forEach(([name, value]) => {
-    if (typeof value === 'string') {
-      flattenedColors[name] = value;
-    } else {
-      Object.entries(value).forEach(([shade, hex]) => {
-        flattenedColors[`${name}-${shade}`] = hex;
-      });
+    if (typeof value === 'string') flattenedColors[name] = value;
+    else {
+      Object.entries(value || {}).forEach(([shade, hex]) => { flattenedColors[`${name}-${shade}`] = hex; });
+      if (value && value['500']) flattenedColors[name] = value['500'];
     }
   });
 
-  const files = contentPaths.flatMap(p => glob.sync(p));
+  function resolveColor(key) {
+    if (!key) return null;
+    if (flattenedColors[key]) return flattenedColors[key];
+    if (key.includes('/')) {
+      const [base, opacity] = key.split('/');
+      const color = flattenedColors[base] || flattenedColors[`${base}-500`];
+      if (color && color.startsWith('#')) {
+        const r = parseInt(color.slice(1, 3), 16), g = parseInt(color.slice(3, 5), 16), b = parseInt(color.slice(5, 7), 16);
+        return `rgba(${r}, ${g}, ${b}, ${parseInt(opacity) / 100})`;
+      }
+    }
+    return null;
+  }
+
+  const files = (config.content || []).flatMap(p => glob.sync(p));
   const rawClasses = new Set();
+  const classAttrRegex = /class="([^"]+)"/g;
 
   files.forEach(file => {
-    const content = fs.readFileSync(file, 'utf8');
-    const matches = content.match(/[a-z0-9\-\/:]+/g);
-    if (matches) {
-      matches.forEach(cls => rawClasses.add(cls));
-    }
+    try {
+      const content = fs.readFileSync(file, 'utf8');
+      let match;
+      while ((match = classAttrRegex.exec(content)) !== null) {
+        match[1].split(/\s+/).forEach(cls => { if (cls) rawClasses.add(cls); });
+      }
+    } catch (e) {}
   });
 
-  let css = '/* Quantum CSS - High Performance Output */\n';
-  css += '*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }\n';
-  css += 'html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }\n';
-  css += 'body { margin: 0; line-height: inherit; }\n';
-  css += 'img { display: block; max-width: 100%; height: auto; }\n';
-  css += 'button { cursor: pointer; background: transparent; padding: 0; color: inherit; font: inherit; }\n\n';
-
   const utilities = new Set();
-  const responsiveUtils = { sm: new Set(), md: new Set(), lg: new Set(), xl: new Set() };
+  const responsiveUtils = { sm: new Set(), md: new Set(), lg: new Set(), xl: new Set(), '2xl': new Set() };
+
+  const sideMap = {
+    p: 'padding', pt: 'padding-top', pr: 'padding-right', pb: 'padding-bottom', pl: 'padding-left',
+    px: ['padding-left', 'padding-right'], py: ['padding-top', 'padding-bottom'],
+    m: 'margin', mt: 'margin-top', mr: 'margin-right', mb: 'margin-bottom', ml: 'margin-left',
+    mx: ['margin-left', 'margin-right'], my: ['margin-top', 'margin-bottom'],
+    w: 'width', h: 'height', top: 'top', right: 'right', bottom: 'bottom', left: 'left',
+    'max-w': 'max-width', 'max-h': 'max-height', 'min-w': 'min-width', 'min-h': 'min-height',
+    gap: 'gap', 'gap-x': 'column-gap', 'gap-y': 'row-gap'
+  };
 
   function processClass(fullCls) {
-    let cls = fullCls;
-    let variant = null;
-    let breakpoint = null;
-
+    let cls = fullCls, variant = null, breakpoint = null, isNeg = false;
+    if (cls.startsWith('-')) { isNeg = true; cls = cls.substring(1); }
     const parts = cls.split(':');
-    if (parts.length > 1) {
-      if (breakpoints[parts[0]]) {
-        breakpoint = parts[0];
-        cls = parts.slice(1).join(':');
-      }
-      const subParts = cls.split(':');
-      if (subParts.length > 1) {
-        variant = subParts[0];
-        cls = subParts[1];
-      } else if (!breakpoint) {
-        variant = parts[0];
-        cls = parts[1];
-      }
+    let currentPart = 0;
+    while (currentPart < parts.length) {
+      const p = parts[currentPart];
+      if (breakpoints[p]) { breakpoint = p; }
+      else if (['hover', 'focus', 'placeholder', 'group-hover'].includes(p)) { variant = p; }
+      else { cls = parts.slice(currentPart).join(':'); break; }
+      currentPart++;
     }
 
-    let property = null;
-    let value = null;
-
+    let property = null, value = null, customSelector = null;
     if (utilityMaps[cls]) {
-      if (typeof utilityMaps[cls] === 'object' && !Array.isArray(utilityMaps[cls])) {
-        property = utilityMaps[cls].property;
-        value = utilityMaps[cls].value;
-      } else {
-        property = utilityMaps[cls];
-      }
+      const entry = utilityMaps[cls];
+      if (typeof entry === 'object' && !Array.isArray(entry)) { property = entry.property; value = entry.value; }
+      else { property = entry; }
     }
 
     if (!property || !value) {
       const cParts = cls.split('-');
-      const prefix = cParts[0];
-      const valKey = cParts.slice(1).join('-');
+      let prefix = cParts[0], valKey = cParts.slice(1).join('-');
+      
+      if ((prefix === 'max' || prefix === 'min' || prefix === 'gap' || prefix === 'gap-x' || prefix === 'gap-y') && cParts[1]) {
+        if (['w', 'h', 'x', 'y'].includes(cParts[1])) {
+          prefix = `${cParts[0]}-${cParts[1]}`;
+          valKey = cParts.slice(2).join('-');
+        }
+      }
 
       if (prefix === 'text') {
-        if (theme.fontSize[valKey]) { property = 'font-size'; value = theme.fontSize[valKey]; } 
-        else if (flattenedColors[valKey]) { property = 'color'; value = flattenedColors[valKey]; }
-      } else if (prefix === 'bg') {
-        property = 'background-color'; value = flattenedColors[valKey];
-      } else if (prefix === 'shadow') {
-        property = 'box-shadow'; value = theme.shadows[valKey] || theme.shadows.md;
+        if (theme.fontSize[valKey]) { property = ['font-size', 'line-height']; value = [theme.fontSize[valKey], (valKey.includes('xl') || parseInt(valKey) >= 3) ? '1.2' : '1.5']; }
+        else { const color = resolveColor(valKey); if (color) { property = 'color'; value = color; } }
+      } else if (prefix === 'bg') { const color = resolveColor(valKey); if (color) { property = 'background-color'; value = color; } }
+      else if (prefix === 'z') { property = 'z-index'; value = isNeg ? `-${valKey}` : valKey; }
+      else if (prefix === 'aspect') {
+        property = ['aspect-ratio', 'width', 'height'];
+        let ratio = 'auto';
+        if (valKey.startsWith('[') && valKey.endsWith(']')) ratio = valKey.slice(1, -1).replace(/\//g, ' / ');
+        else if (valKey === 'video') ratio = '16 / 9';
+        else if (valKey === 'square') ratio = '1 / 1';
+        else ratio = valKey.replace(/\//g, ' / ');
+        value = [ratio, '100%', 'auto'];
+      } else if (prefix === 'grid' && cParts[1] === 'cols') {
+        property = 'grid-template-columns'; value = `repeat(${cParts[2]}, minmax(0, 1fr))`;
+      } else if (prefix === 'col' && cParts[1] === 'span') {
+        property = 'grid-column'; value = `span ${cParts[2]} / span ${cParts[2]}`;
+      } else if (prefix === 'space') {
+        const amount = theme.spacing[cParts[2]] || `${parseInt(cParts[2]) * 0.25}rem`;
+        const escaped = fullCls.replace(/([:[\/])/g, '\\$1');
+        customSelector = `.${escaped} > * + *`;
+        property = cParts[1] === 'y' ? 'margin-top' : 'margin-left';
+        value = isNeg ? `-${amount}` : amount;
       } else if (prefix === 'rounded') {
         property = 'border-radius';
-        if (valKey === 'lg') value = '0.5rem';
-        else if (valKey === 'full') value = '9999px';
-        else value = theme.spacing[valKey] || (valKey ? `${parseInt(valKey) * 0.125}rem` : '0.25rem');
-      } else if (prefix === 'border') {
-          if (flattenedColors[valKey]) {
-            property = 'border-color'; value = flattenedColors[valKey];
-          } else if (cParts[1] === 'l' || cParts[1] === 'r' || cParts[1] === 't' || cParts[1] === 'b') {
-             const sideMap = { l: 'left', r: 'right', t: 'top', b: 'bottom' };
-             property = `border-${sideMap[cParts[1]]}-width`;
-             value = `${cParts[2]}px`;
-          }
-      } else if (prefix === 'gap') {
-        property = 'gap'; value = theme.spacing[valKey] || (valKey ? (isNaN(valKey) ? valKey : `${valKey}rem`) : '0px');
-      } else if (prefix === 'grid' && cParts[1] === 'cols') {
-        property = 'grid-template-columns';
-        value = `repeat(${cParts[2]}, minmax(0, 1fr))`;
-      } else if (prefix === 'flex' && cParts[1] === 'row') {
-        property = 'flex-direction';
-        value = 'row';
-      } else if (prefix === 'w' || prefix === 'h') {
-        property = utilityMaps[prefix];
-        if (valKey.includes('/')) {
-            const [n, d] = valKey.split('/');
-            value = `${(parseInt(n)/parseInt(d)*100).toFixed(2)}%`;
-        } else {
-            value = theme.spacing[valKey] || valKey;
-        }
-      } else if (utilityMaps[prefix]) {
-        const mapEntry = utilityMaps[prefix];
-        if (typeof mapEntry === 'object' && !Array.isArray(mapEntry)) {
-          property = mapEntry.property;
-          value = mapEntry.value;
-        } else {
-          property = mapEntry;
-          value = theme.spacing[valKey] || valKey;
+        if (valKey.startsWith('[') && valKey.endsWith(']')) value = valKey.slice(1, -1);
+        else if (theme.borderRadius[valKey]) value = theme.borderRadius[valKey];
+        else {
+          const num = parseInt(valKey);
+          value = isNaN(num) ? '0.375rem' : `${num * 0.125}rem`;
         }
+      } else if (prefix === 'scale') {
+        property = 'transform';
+        value = `scale(${parseInt(valKey) / 100})`;
+      } else if (prefix === 'transition') {
+        property = 'transition-property';
+        if (valKey === 'all') value = 'all';
+        else if (valKey === 'colors') value = 'color, background-color, border-color, text-decoration-color, fill, stroke';
+        else if (valKey === 'transform') value = 'transform';
+        else value = valKey;
+      } else if (prefix === 'duration') {
+        property = 'transition-duration';
+        value = `${valKey}ms`;
+      } else if (sideMap[prefix]) {
+        property = sideMap[prefix];
+        let v = valKey;
+        if (v.startsWith('[') && v.endsWith(']')) v = v.slice(1, -1);
+        else if (v.includes('/')) v = `${(parseInt(v.split('/')[0])/parseInt(v.split('/')[1])*100).toFixed(2)}%`;
+        else v = theme.spacing[v] || v;
+        value = isNeg ? (Array.isArray(v) ? v.map(x => `-${x}`) : `-${v}`) : v;
+      } else if (prefix === 'border') {
+        const color = resolveColor(valKey);
+        if (color) { property = 'border-color'; value = color; }
+        else if (['l', 'r', 't', 'b'].includes(cParts[1])) {
+          const sideMapSide = { l: 'left', r: 'right', t: 'top', b: 'bottom' };
+          property = `border-${sideMapSide[cParts[1]]}-width`;
+          value = `${cParts[2]}px`;
+        } else if (!isNaN(parseInt(valKey))) { property = 'border-width'; value = `${parseInt(valKey)}px`; }
       }
     }
 
     if (property && value) {
-      let selector = `.${fullCls.replace(/:/g, '\\:').replace(/\//g, '\\/')}`;
-      if (variant === 'hover' || variant === 'focus') selector += `:${variant}`;
-      
-      let rules = '';
-      if (Array.isArray(property)) {
-        if (Array.isArray(value)) {
-          rules = property.map((p, i) => `  ${p}: ${value[i]};`).join('\n');
-        } else {
-          rules = property.map(p => `  ${p}: ${value};`).join('\n');
-        }
-      } else {
-        rules = `  ${property}: ${value};`;
-      }
-
-      const cssBlock = `${selector} {\n${rules}\n}\n`;
-      if (breakpoint) { responsiveUtils[breakpoint].add(cssBlock); } 
-      else { utilities.add(cssBlock); }
+      const escapedFull = fullCls.replace(/([:[\/])/g, '\\$1');
+      let selector = customSelector || `.${escapedFull}`;
+      if (variant) { if (variant === 'group-hover') selector = `.group:hover ${selector}`; else selector += `:${variant}`}
+      let rules = Array.isArray(property) ? property.map((p, i) => `  ${p}: ${Array.isArray(value) ? value[i] : value};`).join('\n') : `  ${property}: ${value};`;
+      const block = `${selector} {
+${rules}
+}
+`;
+      if (breakpoint) responsiveUtils[breakpoint].add(block); else utilities.add(block);
     }
   }
 
   rawClasses.forEach(processClass);
-
-  css += Array.from(utilities).join('\n');
+  let css = '/* Quantum CSS JIT Output */\n' + Array.from(utilities).join('\n');
   Object.entries(breakpoints).forEach(([name, width]) => {
     if (responsiveUtils[name].size > 0) {
-      css += `\n@media (min-width: ${width}) {\n`;
-      css += Array.from(responsiveUtils[name]).map(u => '  ' + u.replace(/\n/g, '\n  ')).join('\n').trimEnd();
-      css += '\n}\n';
+      css += `\n@media (min-width: ${width}) {\n${Array.from(responsiveUtils[name]).map(u => '  ' + u.replace(/\n/g, '\n  ')).join('\n').trimEnd()}\n}\n`;
     }
   });
-
   return css;
 }
 
-module.exports = { generateCSS };
+module.exports = { generateCSS };