@bookklik/senangstart-css 0.2.8 → 0.2.10

package/src/cdn/tw-conversion-engine.js

@@ -108,6 +108,57 @@ const fontSizeScale = {
   "9xl": "hero",       // 8rem → hero
 };
 
+// Line height scale mapping Tailwind values to SenangStart semantic values
+// Engine native values: none(1), tight(1.25), snug(1.375), normal(1.5), relaxed(1.625), loose(2)
+const lineHeightScale = {
+  none: "none",       // line-height: 1
+  tight: "tight",     // line-height: 1.25
+  snug: "snug",      // line-height: 1.375
+  normal: "normal",   // line-height: 1.5
+  relaxed: "relaxed", // line-height: 1.625
+  loose: "loose"      // line-height: 2
+};
+
+// Letter spacing scale mapping Tailwind values to SenangStart semantic values
+// Engine native values: tighter(-0.05em), tight(-0.025em), normal(0), wide(0.025em), wider(0.05em), widest(0.1em)
+const letterSpacingScale = {
+  tighter: "tighter",   // letter-spacing: -0.05em
+  tight: "tight",        // letter-spacing: -0.025em
+  normal: "normal",      // letter-spacing: 0
+  wide: "wide",         // letter-spacing: 0.025em
+  wider: "wider",       // letter-spacing: 0.05em
+  widest: "widest"      // letter-spacing: 0.1em
+};
+
+// Z-index scale mapping Tailwind values to SenangStart semantic values
+// Engine native values: base(0), low(10), mid(50), high(100), top(9999)
+const zIndexScale = {
+  0: "base",      // z-index: 0
+  10: "low",      // z-index: 10
+  20: "low",      // z-index: 20
+  30: "low",      // z-index: 30
+  40: "low",      // z-index: 40
+  50: "mid",      // z-index: 50
+  60: "high",     // z-index: 60
+  70: "high",     // z-index: 70
+  80: "high",     // z-index: 80
+  90: "high",     // z-index: 90
+  100: "high",    // z-index: 100
+  auto: "auto"     // z-index: auto
+};
+
+// Fraction scale mapping Tailwind fractions to SenangStart semantic values
+// Used for positioning (left-1/2) and transforms (translate-x-1/2)
+const fractionScale = {
+  '1/2': 'half',         // 50%
+  '1/3': 'third',        // 33.33%
+  '2/3': 'third-2x',     // 66.67%
+  '1/4': 'quarter',      // 25%
+  '2/4': 'half',         // 50% (alias)
+  '3/4': 'quarter-3x',   // 75%
+  'full': 'full',        // 100%
+};
+
 const layoutMappings = {
   container: "container",
   flex: "flex",
@@ -169,23 +220,108 @@ const layoutMappings = {
 };
 
 const visualKeywords = {
+  // Font style
   italic: "italic",
   "not-italic": "not-italic",
+  
+  // Font smoothing
   antialiased: "antialiased",
+  "subpixel-antialiased": "subpixel-antialiased",
+  
+  // Text transform
   uppercase: "uppercase",
   lowercase: "lowercase",
   capitalize: "capitalize",
   "normal-case": "normal-case",
+  
+  // Text decoration
   underline: "underline",
+  overline: "overline",
   "line-through": "line-through",
   "no-underline": "no-underline",
+  
+  // Text decoration style
+  "decoration-solid": "decoration-solid",
+  "decoration-double": "decoration-double",
+  "decoration-dotted": "decoration-dotted",
+  "decoration-dashed": "decoration-dashed",
+  "decoration-wavy": "decoration-wavy",
+  
+  // Text overflow
   truncate: "truncate",
-  "cursor-pointer": "cursor:pointer",
+  "text-ellipsis": "text-ellipsis",
+  "text-clip": "text-clip",
+  
+  // Text wrap
+  "text-wrap": "text-wrap",
+  "text-nowrap": "text-nowrap",
+  "text-balance": "text-balance",
+  "text-pretty": "text-pretty",
+  
+  // Whitespace
+  "whitespace-normal": "whitespace-normal",
+  "whitespace-nowrap": "whitespace-nowrap",
+  "whitespace-pre": "whitespace-pre",
+  "whitespace-pre-line": "whitespace-pre-line",
+  "whitespace-pre-wrap": "whitespace-pre-wrap",
+  "whitespace-break-spaces": "whitespace-break-spaces",
+  
+  // Word break
+  "break-normal": "break-normal",
+  "break-words": "break-words",
+  "break-all": "break-all",
+  "break-keep": "break-keep",
+  
+  // Hyphens
+  "hyphens-none": "hyphens-none",
+  "hyphens-manual": "hyphens-manual",
+  "hyphens-auto": "hyphens-auto",
+  
+  // List style
+  "list-none": "list-none",
+  "list-disc": "list-disc",
+  "list-decimal": "list-decimal",
+  "list-inside": "list-inside",
+  "list-outside": "list-outside",
+  
+  // Cursor
+  "cursor-auto": "cursor:auto",
   "cursor-default": "cursor:default",
+  "cursor-pointer": "cursor:pointer",
+  "cursor-wait": "cursor:wait",
+  "cursor-text": "cursor:text",
+  "cursor-move": "cursor:move",
   "cursor-not-allowed": "cursor:not-allowed",
+  "cursor-grab": "cursor:grab",
+  "cursor-grabbing": "cursor:grabbing",
+  
+  // User select
   "select-none": "select:none",
   "select-text": "select:text",
   "select-all": "select:all",
+  "select-auto": "select:auto",
+  
+  // Pointer events
+  "pointer-events-none": "pointer-events:none",
+  "pointer-events-auto": "pointer-events:auto",
+  
+  // Appearance
+  "appearance-none": "appearance:none",
+  "appearance-auto": "appearance:auto",
+  
+  // 3D Transforms
+  perspective: "perspective",
+  "perspective-origin": "perspective-origin",
+  "transform-style": "transform-style",
+  "backface-visibility": "backface",
+  mask: "mask",
+  "mask-image": "mask-image",
+  "mask-mode": "mask-mode",
+  "mask-origin": "mask-origin",
+  "mask-position": "mask-position",
+  "mask-repeat": "mask-repeat",
+  "mask-size": "mask-size",
+  "mask-type": "mask-type"
 };
 
 // ============================
@@ -229,35 +365,85 @@ function getBorderWidth(value, exact) {
 
 function convertClass(twClass, exact) {
   // Handle prefixes (hover:, sm:, md:, etc.)
+  // Added group-* and peer-* variant support
   const prefixMatch = twClass.match(
-    /^(sm:|md:|lg:|xl:|2xl:|hover:|focus:|focus-visible:|active:|disabled:|dark:)(.+)$/
+    /^(sm:|md:|lg:|xl:|2xl:|hover:|focus:|focus-visible:|active:|disabled:|dark:|group-hover:|peer-hover:|group-focus:|peer-focus:|group-active:|peer-active:|peer-check:|group-open:|peer-open:)(.+)$/
   );
   let prefix = "",
-    baseClass = twClass;
+    baseClass = twClass,
+    extraAttr = null;
+
   if (prefixMatch) {
     const rawPrefix = prefixMatch[1].slice(0, -1); // remove colon
+    
+    // Responsive prefixes
     if (['sm', 'md', 'lg', 'xl', '2xl'].includes(rawPrefix)) {
       prefix = `tw-${rawPrefix}:`;
-    } else {
+    } 
+    // Group/Peer prefixes (map to standard state prefixes)
+    else if (rawPrefix.startsWith('group-') || rawPrefix.startsWith('peer-')) {
+      const stateMap = {
+        'hover': 'hover',
+        'focus': 'focus', // or focus-within if we strictly follow group logic, but SenangStart group logic handles mapped state triggers
+        'active': 'active',
+        'open': 'expanded', // map open -> expanded
+        'check': 'checked'  // map check -> checked
+      };
+      
+      const variant = rawPrefix.split('-')[1]; // get 'hover' from 'group-hover'
+      const mappedState = stateMap[variant] || variant;
+      
+      prefix = `${mappedState}:`;
+      
+      // For peer variants, we must ensure the element listens to "peer"
+      if (rawPrefix.startsWith('peer-')) {
+        extraAttr = { cat: 'listens', val: 'peer' };
+      }
+    } 
+    // Standard prefixes
+    else {
       prefix = prefixMatch[1];
     }
+    
     baseClass = prefixMatch[2];
   }
 
+  // Handle 'group' class mapping
+  if (baseClass === 'group') {
+    return { cat: 'layout', val: 'hoverable focusable pressable expandable' };
+  }
+
+  // Handle 'peer' class mapping
+  if (baseClass === 'peer') {
+    return [
+      { cat: 'layout', val: 'hoverable focusable pressable expandable' },
+      { cat: 'interact', val: 'peer' }
+    ];
+  }
+
+  // Helper to attach extra attributes (like listens="peer")
+  const attachExtra = (result) => {
+    if (!result) return null;
+    if (extraAttr) {
+      return Array.isArray(result) ? [...result, extraAttr] : [result, extraAttr];
+    }
+    return result;
+  };
+
   // Layout mappings
   if (layoutMappings[baseClass])
-    return { cat: "layout", val: prefix + layoutMappings[baseClass] };
+    return attachExtra({ cat: "layout", val: prefix + layoutMappings[baseClass] });
 
   // Visual keywords
   if (visualKeywords[baseClass])
-    return { cat: "visual", val: prefix + visualKeywords[baseClass] };
+    return attachExtra({ cat: "visual", val: prefix + visualKeywords[baseClass] });
 
   // Text color
   const textColorMatch = baseClass.match(
     /^text-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/
   );
   if (textColorMatch)
-    return { cat: "visual", val: prefix + "text:" + textColorMatch[1] };
+    return attachExtra({ cat: "visual", val: prefix + "text:" + textColorMatch[1] });
 
   // Text alignment
   if (
@@ -265,10 +451,10 @@ function convertClass(twClass, exact) {
       baseClass
     )
   )
-    return {
+    return attachExtra({
       cat: "visual",
       val: prefix + "text:" + baseClass.replace("text-", ""),
-    };
+    });
 
   // Text size
   const textSizeMatch = baseClass.match(
@@ -278,7 +464,21 @@ function convertClass(twClass, exact) {
     const size = exact
       ? `tw-${textSizeMatch[1]}`
       : fontSizeScale[textSizeMatch[1]] || textSizeMatch[1];
-    return { cat: "visual", val: prefix + "text-size:" + size };
+    return attachExtra({ cat: "visual", val: prefix + "text-size:" + size });
+  }
+
+  // Line height
+  const leadingMatch = baseClass.match(/^leading-(\[.+\]|none|tight|snug|normal|relaxed|loose)$/);
+  if (leadingMatch) {
+    const val = leadingMatch[1];
+    return attachExtra({ cat: "visual", val: prefix + "leading:" + (lineHeightScale[val] || val) });
+  }
+
+  // Letter spacing
+  const trackingMatch = baseClass.match(/^tracking-(\[.+\]|tighter|tight|normal|wide|wider|widest)$/);
+  if (trackingMatch) {
+    const val = trackingMatch[1];
+    return attachExtra({ cat: "visual", val: prefix + "tracking:" + (letterSpacingScale[val] || val) });
   }
 
   // Background color
@@ -287,37 +487,56 @@ function convertClass(twClass, exact) {
   );
   if (bgMatch) {
     const colorVal = bgMatch[1];
-    // Handle special values
+    // Handle special CSS keyword values - these are now natively supported
     if (colorVal === 'transparent') {
-      return { cat: "visual", val: prefix + "bg:[transparent]" };
+      return attachExtra({ cat: "visual", val: prefix + "bg:transparent" });
     }
     if (colorVal === 'current') {
-      return { cat: "visual", val: prefix + "bg:[currentColor]" };
+      return attachExtra({ cat: "visual", val: prefix + "bg:currentColor" });
     }
     if (colorVal === 'inherit') {
-      return { cat: "visual", val: prefix + "bg:[inherit]" };
+      return attachExtra({ cat: "visual", val: prefix + "bg:inherit" });
     }
-    return { cat: "visual", val: prefix + "bg:" + colorVal };
+    return attachExtra({ cat: "visual", val: prefix + "bg:" + colorVal });
   }
 
   // Border color
   const borderColorMatch = baseClass.match(
-    /^border-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/
+    /^border-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black|transparent|current|inherit)(?:-\d+)?)$/
   );
-  if (borderColorMatch)
-    return {
+  if (borderColorMatch) {
+    let colorVal = borderColorMatch[1];
+    // Map 'current' to 'currentColor' for CSS compatibility
+    if (colorVal === 'current') colorVal = 'currentColor';
+    return attachExtra({
       cat: "visual",
-      val: prefix + "border:" + borderColorMatch[1],
-    };
+      val: prefix + "border:" + colorVal,
+    });
+  }
+
+  // Directional border colors (border-t-*, border-r-*, border-b-*, border-l-*)
+  const borderSideColorMatch = baseClass.match(
+    /^border-([trbl])-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black|transparent|current|inherit)(?:-\d+)?)$/
+  );
+  if (borderSideColorMatch) {
+    const side = borderSideColorMatch[1]; // t, r, b, or l
+    let colorVal = borderSideColorMatch[2];
+    // Map 'current' to 'currentColor' for CSS compatibility
+    if (colorVal === 'current') colorVal = 'currentColor';
+    return attachExtra({
+      cat: "visual",
+      val: prefix + `border-${side}:${colorVal}`,
+    });
+  }
 
   // Padding
   const paddingMatch = baseClass.match(/^p([trblxy])?-(.+)$/);
   if (paddingMatch) {
     const side = paddingMatch[1] ? "-" + paddingMatch[1] : "";
-    return {
+    return attachExtra({
       cat: "space",
       val: prefix + "p" + side + ":" + getSpacing(paddingMatch[2], exact),
-    };
+    });
   }
 
   // Margin
@@ -339,17 +558,17 @@ function convertClass(twClass, exact) {
         val = `-${val}`;
       }
     }
-    return { cat: "space", val: prefix + "m" + side + ":" + val };
+    return attachExtra({ cat: "space", val: prefix + "m" + side + ":" + val });
   }
 
   // Gap
   const gapMatch = baseClass.match(/^gap-([xy])?-?(.+)$/);
   if (gapMatch) {
     const axis = gapMatch[1] ? "-" + gapMatch[1] : "";
-    return {
+    return attachExtra({
       cat: "space",
       val: prefix + "g" + axis + ":" + getSpacing(gapMatch[2], exact),
-    };
+    });
   }
 
   // Width/Height with special values
@@ -360,7 +579,7 @@ function convertClass(twClass, exact) {
     // Special width values
     const specialWidthVals = { 'max': '[max-content]', 'min': '[min-content]', 'fit': '[fit-content]', 'prose': '[65ch]' };
     const val = specialWidthVals[rawVal] || getSpacing(rawVal, exact);
-    return { cat: "space", val: prefix + prop + ":" + val };
+    return attachExtra({ cat: "space", val: prefix + prop + ":" + val });
   }
   const heightMatch = baseClass.match(/^(min-h|max-h|h)-(.+)$/);
   if (heightMatch) {
@@ -368,7 +587,7 @@ function convertClass(twClass, exact) {
     const rawVal = heightMatch[2];
     const specialHeightVals = { 'screen': '[100vh]', 'svh': '[100svh]', 'lvh': '[100lvh]', 'dvh': '[100dvh]', 'max': '[max-content]', 'min': '[min-content]', 'fit': '[fit-content]' };
     const val = specialHeightVals[rawVal] || getSpacing(rawVal, exact);
-    return { cat: "space", val: prefix + prop + ":" + val };
+    return attachExtra({ cat: "space", val: prefix + prop + ":" + val });
   }
 
   // Border radius
@@ -380,7 +599,7 @@ function convertClass(twClass, exact) {
         ? "tw-DEFAULT"
         : `tw-${size}`
       : radiusScale[size] || "medium";
-    return { cat: "visual", val: prefix + "rounded:" + scale };
+    return attachExtra({ cat: "visual", val: prefix + "rounded:" + scale });
   }
 
   // Shadow
@@ -392,7 +611,7 @@ function convertClass(twClass, exact) {
         ? "tw-DEFAULT"
         : `tw-${size}`
       : shadowScale[size] || "medium";
-    return { cat: "visual", val: prefix + "shadow:" + scale };
+    return attachExtra({ cat: "visual", val: prefix + "shadow:" + scale });
   }
 
   // Font weight
@@ -400,7 +619,7 @@ function convertClass(twClass, exact) {
     /^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/
   );
   if (fontWeightMatch)
-    return { cat: "visual", val: prefix + "font:tw-" + fontWeightMatch[1] };
+    return attachExtra({ cat: "visual", val: prefix + "font:tw-" + fontWeightMatch[1] });
 
   // Border width
   const borderWidthMatch = baseClass.match(
@@ -415,98 +634,156 @@ function convertClass(twClass, exact) {
       ? "-" + borderWidthMatch[1] + "-w"
       : "-w";
     const width = borderWidthMatch[2] || "1";
-    return {
+    return attachExtra({
       cat: "visual",
       val: prefix + "border" + side + ":" + getBorderWidth(width, exact),
-    };
+    });
   }
 
   // Positional properties (top-0, right-0, bottom-0, left-0, inset-0, etc.)
-  const positionMatch = baseClass.match(/^(top|right|bottom|left|inset|inset-x|inset-y)-(\d+|px|auto|full|\[.+\])$/);
+  // Includes fraction support: left-1/2, top-1/3, etc.
+  const positionMatch = baseClass.match(/^(top|right|bottom|left|inset|inset-x|inset-y)-(\d+|px|auto|full|1\/2|1\/3|2\/3|1\/4|2\/4|3\/4|\[.+\])$/);
   if (positionMatch) {
     const prop = positionMatch[1];
     let val = positionMatch[2];
-    // Handle 0 specially
-    if (val === '0') {
-      val = 'none';
-    } else if (val.startsWith('[') && val.endsWith(']')) {
+    if (val.startsWith('[') && val.endsWith(']')) {
       // Keep arbitrary values as-is
+    } else if (fractionScale[val]) {
+      // Map fractions to semantic names (1/2 → half, etc.)
+      val = fractionScale[val];
+    } else if (val === '0') {
+      // Keep 0 as-is for positioning (CSS: top: 0, not top: none)
+      val = '0';
     } else {
       val = getSpacing(val, exact);
     }
-    return { cat: "layout", val: prefix + prop + ":" + val };
+    return attachExtra({ cat: "layout", val: prefix + prop + ":" + val });
+  }
+
+  // Translate transform utilities: translate-x-*, translate-y-*, -translate-x-*, -translate-y-*
+  const translateMatch = baseClass.match(/^(-?)translate-([xy])-(\d+|px|full|1\/2|1\/3|2\/3|1\/4|2\/4|3\/4|\[.+\])$/);
+  if (translateMatch) {
+    const isNeg = translateMatch[1] === '-';
+    const axis = translateMatch[2];
+    let val = translateMatch[3];
+    
+    // Map fractions and values
+    if (val.startsWith('[') && val.endsWith(']')) {
+      // Keep arbitrary values as-is, but handle negative
+      if (isNeg) {
+        const inner = val.slice(1, -1);
+        val = `[-${inner}]`;
+      }
+    } else if (fractionScale[val]) {
+      val = fractionScale[val];
+      if (isNeg) val = `-${val}`;
+    } else if (val === '0') {
+      val = '0';
+    } else {
+      val = getSpacing(val, exact);
+      if (isNeg) val = `-${val}`;
+    }
+    
+    return attachExtra({ cat: "visual", val: prefix + `translate-${axis}:${val}` });
   }
 
   // Outline none
   if (baseClass === 'outline-none') {
-    return { cat: "visual", val: prefix + "outline:none" };
+    return attachExtra({ cat: "visual", val: prefix + "outline:none" });
   }
 
   // Order
   const orderMatch = baseClass.match(/^order-(\d+|first|last|none)$/);
   if (orderMatch) {
-    return { cat: "layout", val: prefix + "order:" + orderMatch[1] };
+    return attachExtra({ cat: "layout", val: prefix + "order:" + orderMatch[1] });
+  }
+
+  // Z-index
+  const zIndexMatch = baseClass.match(/^-?z-(\d+|auto)$/);
+  if (zIndexMatch) {
+    const isNeg = baseClass.startsWith("-");
+    const val = zIndexMatch[1];
+    let zIndexVal = zIndexScale[val] || val;
+    if (isNeg) {
+      zIndexVal = `-${zIndexVal}`;
+    }
+    return attachExtra({ cat: "layout", val: prefix + "z:" + zIndexVal });
+  }
+
+  // Flex basis
+  const basisMatch = baseClass.match(/^basis-(\[.+\]|\d+\.?\d*|auto|full|1\/2|1\/3|2\/3|1\/4|2\/4|3\/4)$/);
+  if (basisMatch) {
+    let val = basisMatch[1];
+    if (val.startsWith('[') && val.endsWith(']')) {
+      // Keep arbitrary values as-is
+    } else if (fractionScale[val]) {
+      // Map fractions to semantic names (1/2 → half, etc.)
+      val = fractionScale[val];
+    } else if (val === '0') {
+      val = '0';
+    }
+    return attachExtra({ cat: "layout", val: prefix + "basis:" + val });
   }
 
   // Grid columns
   const gridColsMatch = baseClass.match(/^grid-cols-(\d+|none)$/);
   if (gridColsMatch) {
-    return { cat: "layout", val: prefix + "grid-cols:" + gridColsMatch[1] };
+    return attachExtra({ cat: "layout", val: prefix + "grid-cols:" + gridColsMatch[1] });
   }
 
   // Column span
   const colSpanMatch = baseClass.match(/^col-span-(\d+|full)$/);
   if (colSpanMatch) {
-    return { cat: "layout", val: prefix + "col-span:" + colSpanMatch[1] };
+    return attachExtra({ cat: "layout", val: prefix + "col-span:" + colSpanMatch[1] });
   }
 
   // Grid rows
   const gridRowsMatch = baseClass.match(/^grid-rows-(\d+|none)$/);
   if (gridRowsMatch) {
-    return { cat: "layout", val: prefix + "grid-rows:" + gridRowsMatch[1] };
+    return attachExtra({ cat: "layout", val: prefix + "grid-rows:" + gridRowsMatch[1] });
   }
 
   // Row span
   const rowSpanMatch = baseClass.match(/^row-span-(\d+|full)$/);
   if (rowSpanMatch) {
-    return { cat: "layout", val: prefix + "row-span:" + rowSpanMatch[1] };
+    return attachExtra({ cat: "layout", val: prefix + "row-span:" + rowSpanMatch[1] });
   }
 
   // Opacity
   const opacityMatch = baseClass.match(/^opacity-(\d+)$/);
   if (opacityMatch) {
-    return { cat: "visual", val: prefix + "opacity:" + opacityMatch[1] };
+    return attachExtra({ cat: "visual", val: prefix + "opacity:" + opacityMatch[1] });
   }
 
   // Gradient direction (bg-gradient-to-*)
   const bgGradientMatch = baseClass.match(/^bg-gradient-to-(t|tr|r|br|b|bl|l|tl)$/);
   if (bgGradientMatch) {
-    return { cat: "visual", val: prefix + "bg-image:gradient-to-" + bgGradientMatch[1] };
+    return attachExtra({ cat: "visual", val: prefix + "bg-image:gradient-to-" + bgGradientMatch[1] });
   }
 
   // Gradient from-* (starting color)
   const fromMatch = baseClass.match(/^from-(.+)$/);
   if (fromMatch) {
-    return { cat: "visual", val: prefix + "from:" + fromMatch[1] };
+    return attachExtra({ cat: "visual", val: prefix + "from:" + fromMatch[1] });
   }
 
   // Gradient via-* (middle color)
   const viaMatch = baseClass.match(/^via-(.+)$/);
   if (viaMatch) {
-    return { cat: "visual", val: prefix + "via:" + viaMatch[1] };
+    return attachExtra({ cat: "visual", val: prefix + "via:" + viaMatch[1] });
   }
 
   // Gradient to-* (ending color) - Note: must come after bg-gradient-to-*
   const toMatch = baseClass.match(/^to-(.+)$/);
   if (toMatch) {
-    return { cat: "visual", val: prefix + "to:" + toMatch[1] };
+    return attachExtra({ cat: "visual", val: prefix + "to:" + toMatch[1] });
   }
 
   // Transition utilities
   const transitionMatch = baseClass.match(/^transition(?:-(all|colors|opacity|shadow|transform|none))?$/);
   if (transitionMatch) {
     const type = transitionMatch[1] || 'all';
-    return { cat: "visual", val: prefix + "transition:" + type };
+    return attachExtra({ cat: "visual", val: prefix + "transition:" + type });
   }
 
   // Duration utilities
@@ -522,13 +799,13 @@ function convertClass(twClass, exact) {
     else if (ms <= 300) durationVal = 'slow';
     else if (ms <= 500) durationVal = 'slower';
     else durationVal = 'lazy';
-    return { cat: "visual", val: prefix + "duration:" + durationVal };
+    return attachExtra({ cat: "visual", val: prefix + "duration:" + durationVal });
   }
 
   // Ease utilities
   const easeMatch = baseClass.match(/^ease-(linear|in|out|in-out)$/);
   if (easeMatch) {
-    return { cat: "visual", val: prefix + "ease:" + easeMatch[1] };
+    return attachExtra({ cat: "visual", val: prefix + "ease:" + easeMatch[1] });
   }
 
   // Ring utilities - Convert to native ring utilities
@@ -537,105 +814,237 @@ function convertClass(twClass, exact) {
   if (ringMatch) {
     const width = ringMatch[1] || '3';
     if (width === '0') {
-      return { cat: "visual", val: prefix + "ring:none" };
+      return attachExtra({ cat: "visual", val: prefix + "ring:none" });
     }
     // Map Tailwind ring widths to SenangStart semantic values
     const ringScale = {
       '1': 'thin', '2': 'regular', '3': 'small', '4': 'medium', '8': 'big'
     };
     const scale = ringScale[width] || `[${width}px]`;
-    return { cat: "visual", val: prefix + "ring:" + scale };
+    return attachExtra({ cat: "visual", val: prefix + "ring:" + scale });
   }
 
   // Ring offset - converts to native ring-offset utility
   const ringOffsetMatch = baseClass.match(/^ring-offset-(\d+)$/);
   if (ringOffsetMatch) {
-    return { cat: "visual", val: prefix + "ring-offset:" + ringOffsetMatch[1] };
+    return attachExtra({ cat: "visual", val: prefix + "ring-offset:" + ringOffsetMatch[1] });
   }
 
   // Ring color - converts to native ring-color utility
   const ringColorMatch = baseClass.match(/^ring-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);
   if (ringColorMatch) {
-    return { cat: "visual", val: prefix + "ring-color:" + ringColorMatch[1] };
+    return attachExtra({ cat: "visual", val: prefix + "ring-color:" + ringColorMatch[1] });
   }
   
   // Divide color - directional (check divide-x and divide-y BEFORE generic divide)
   const divideXMatch = baseClass.match(/^divide-x-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);
   if (divideXMatch) {
-    return {
+    return attachExtra({
       cat: "visual",
       val: prefix + "divide-x:" + divideXMatch[1],
-    };
+    });
   }
   
   const divideYMatch = baseClass.match(/^divide-y-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);
   if (divideYMatch) {
-    return {
+    return attachExtra({
       cat: "visual",
       val: prefix + "divide-y:" + divideYMatch[1],
-    };
+    });
   }
   
   // Divide color - all directions (check divide-x and divide-y AFTER generic divide)
   const divideColorMatch = baseClass.match(/^divide-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);
   if (divideColorMatch) {
-    return {
+    return attachExtra({
       cat: "visual",
       val: prefix + "divide:" + divideColorMatch[1],
-    };
+    });
   }
   
   // Divide width - all directions
   const divideWidthMatch = baseClass.match(/^divide-(\d+)$/);
   if (divideWidthMatch) {
-    return {
+    return attachExtra({
       cat: "visual",
       val: prefix + "divide-w:" + getBorderWidth(divideWidthMatch[1], exact),
-    };
+    });
   }
   
   // Divide reverse (check these FIRST as they are specific)
   if (baseClass === 'divide-x-reverse') {
-    return { cat: "visual", val: prefix + "divide-x:reverse" };
+    return attachExtra({ cat: "visual", val: prefix + "divide-x:reverse" });
   }
   if (baseClass === 'divide-y-reverse') {
-    return { cat: "visual", val: prefix + "divide-y:reverse" };
+    return attachExtra({ cat: "visual", val: prefix + "divide-y:reverse" });
   }
   
   // Divide width - directional
   const divideXWidthMatch = baseClass.match(/^divide-x-(\d+)$/);
   if (divideXWidthMatch) {
-    return {
+    return attachExtra({
       cat: "visual",
       val: prefix + "divide-x-w:" + getBorderWidth(divideXWidthMatch[1], exact),
-    };
+    });
   }
   
   // Divide width (implicit x/y from Tailwind divide-x/y without number is usually 1px)
   // Tailwind: divide-x = border-right-width: 1px (or left if reverse).
   // SenangStart: divide-x-w:thin
   if (baseClass === 'divide-x') {
-    return { cat: "visual", val: prefix + "divide-x-w:thin" };
+    return attachExtra({ cat: "visual", val: prefix + "divide-x-w:thin" });
   }
   if (baseClass === 'divide-y') {
-    return { cat: "visual", val: prefix + "divide-y-w:thin" };
+    return attachExtra({ cat: "visual", val: prefix + "divide-y-w:thin" });
   }
   
   const divideYWidthMatch = baseClass.match(/^divide-y-(\d+)$/);
   if (divideYWidthMatch) {
-    return {
+    return attachExtra({
       cat: "visual",
       val: prefix + "divide-y-w:" + getBorderWidth(divideYWidthMatch[1], exact),
-    };
+    });
   }
   
   // Divide style
   const divideStyleMatch = baseClass.match(/^divide-(solid|dashed|dotted|double|none)$/);
   if (divideStyleMatch) {
-    return {
+    return attachExtra({
       cat: "visual",
       val: prefix + "divide-style:" + divideStyleMatch[1], // Fixed category from 'color' to 'visual'
+    });
+  }
+  
+  // Border style
+  const borderStyleMatch = baseClass.match(/^border-(solid|dashed|dotted|double|none)$/);
+  if (borderStyleMatch) {
+    return attachExtra({
+      cat: "visual",
+      val: prefix + "border-style:" + borderStyleMatch[1],
+    });
+  }
+  
+  // Filter utilities
+  // Blur
+  const blurMatch = baseClass.match(/^blur-(0|sm|md|lg|xl|2xl|3xl)$/);
+  if (blurMatch) {
+    const blurScale = {
+      '0': 'none',
+      'sm': 'tiny',
+      'md': 'small',
+      'lg': 'medium',
+      'xl': 'big',
+      '2xl': 'giant',
+      '3xl': 'vast'
+    };
+    return attachExtra({
+      cat: "visual",
+      val: prefix + "blur:" + blurScale[blurMatch[1]],
+    });
+  }
+  
+  // Brightness
+  const brightnessMatch = baseClass.match(/^brightness-(0|50|75|90|95|100|105|110|125|150|200)$/);
+  if (brightnessMatch) {
+    const brightnessScale = {
+      '0': 'dim',
+      '50': 'dim',
+      '75': 'dark',
+      '90': 'dark',
+      '95': 'dark',
+      '100': 'normal',
+      '105': 'bright',
+      '110': 'bright',
+      '125': 'vivid',
+      '150': 'vivid',
+      '200': 'vivid'
     };
+    return attachExtra({
+      cat: "visual",
+      val: prefix + "brightness:" + brightnessScale[brightnessMatch[1]],
+    });
+  }
+  
+  // Contrast
+  const contrastMatch = baseClass.match(/^contrast-(0|50|75|100|125|150|200)$/);
+  if (contrastMatch) {
+    const contrastScale = {
+      '0': 'low',
+      '50': 'low',
+      '75': 'reduced',
+      '100': 'normal',
+      '125': 'high',
+      '150': 'high',
+      '200': 'max'
+    };
+    return attachExtra({
+      cat: "visual",
+      val: prefix + "contrast:" + contrastScale[contrastMatch[1]],
+    });
+  }
+  
+  // Grayscale
+  const grayscaleMatch = baseClass.match(/^grayscale(0)?$/);
+  if (grayscaleMatch) {
+    const val = grayscaleMatch[1] === '0' ? 'none' : 'full';
+    return attachExtra({
+      cat: "visual",
+      val: prefix + "grayscale:" + val,
+    });
+  }
+  
+  // Hue rotate
+  const hueRotateMatch = baseClass.match(/^hue-rotate-(0|15|30|60|90|180)$/);
+  if (hueRotateMatch) {
+    return attachExtra({
+      cat: "visual",
+      val: prefix + "hue-rotate:" + hueRotateMatch[1],
+    });
+  }
+  
+  // Invert
+  const invertMatch = baseClass.match(/^invert(0)?$/);
+  if (invertMatch) {
+    const val = invertMatch[1] === '0' ? 'none' : 'full';
+    return attachExtra({
+      cat: "visual",
+      val: prefix + "invert:" + val,
+    });
+  }
+  
+  // Saturate
+  const saturateMatch = baseClass.match(/^saturate-(0|50|100|150|200)$/);
+  if (saturateMatch) {
+    const saturateScale = {
+      '0': 'none',
+      '50': 'low',
+      '100': 'normal',
+      '150': 'high',
+      '200': 'vivid'
+    };
+    return attachExtra({
+      cat: "visual",
+      val: prefix + "saturate:" + saturateScale[saturateMatch[1]],
+    });
+  }
+  
+  // Sepia
+  const sepiaMatch = baseClass.match(/^sepia(0)?$/);
+  if (sepiaMatch) {
+    const val = sepiaMatch[1] === '0' ? 'none' : 'full';
+    return attachExtra({
+      cat: "visual",
+      val: prefix + "sepia:" + val,
+    });
+  }
+  
+  // Animation utilities
+  const animateMatch = baseClass.match(/^animate-(none|spin|ping|pulse|bounce)$/);
+  if (animateMatch) {
+    return attachExtra({
+      cat: "visual",
+      val: prefix + "animate:" + animateMatch[1],
+    });
   }
   
   return null;
@@ -649,27 +1058,42 @@ function convertClasses(classString, exact) {
   const layout = [],
     space = [],
     visual = [],
+    interact = [],
+    listens = [],
     unknown = [];
 
+  // Helper to push unique
+  const pushUnique = (arr, val) => {
+    if (!arr.includes(val)) arr.push(val);
+  };
+
   for (const cls of classes) {
     const result = convertClass(cls, exact);
+    
     if (result) {
-      if (result.cat === "layout") layout.push(result.val);
-      else if (result.cat === "space") space.push(result.val);
-      else if (result.cat === "visual") visual.push(result.val);
+      // Normalize to array to support 1-to-many mapping
+      const results = Array.isArray(result) ? result : [result];
+      
+      for (const res of results) {
+        if (res.cat === "layout") pushUnique(layout, res.val);
+        else if (res.cat === "space") pushUnique(space, res.val);
+        else if (res.cat === "visual") pushUnique(visual, res.val);
+        else if (res.cat === "interact") pushUnique(interact, res.val);
+        else if (res.cat === "listens") pushUnique(listens, res.val);
+      }
     } else {
       unknown.push(cls);
     }
   }
 
-  return { layout, space, visual, unknown };
+  return { layout, space, visual, interact, listens, unknown };
 }
 
 function convertHTML(html, exact) {
   return html.replace(
     /class=(['"])([^"']+)\1/g,
     (match, quote, classValue) => {
-      const { layout, space, visual, unknown } = convertClasses(
+      const { layout, space, visual, interact, listens, unknown } = convertClasses(
         classValue,
         exact
       );
@@ -677,6 +1101,8 @@ function convertHTML(html, exact) {
       if (layout.length) attrs.push(`layout="${layout.join(" ")}"`);
       if (space.length) attrs.push(`space="${space.join(" ")}"`);
       if (visual.length) attrs.push(`visual="${visual.join(" ")}"`);
+      if (interact.length) attrs.push(`interact="${interact.join(" ")}"`);
+      if (listens.length) attrs.push(`listens="${listens.join(" ")}"`);
       if (unknown.length) attrs.push(`class="${unknown.join(" ")}"`);
       return attrs.join(" ") || 'class=""';
     }