@bookklik/senangstart-css 0.2.8 → 0.2.9

package/docs/public/llms.txt

@@ -73,6 +73,34 @@ Example: `space="p:small tab:p:medium lap:p:big"`
 - `active:`, `disabled:`, `group-hover:`
 - `dark:`: `visual="bg:white dark:bg:slate-900"`
 
+## State Capabilities & Interaction
+
+React to parent ("Group") or sibling ("Peer") states across all attributes.
+
+### 1. Group Capabilities
+Add these to the `layout` attribute of a parent element:
+- `hoverable`: Adds `:hover` support.
+- `focusable`: Adds `:focus-within` support.
+- `pressable`: Adds `:active` support.
+- `expandable`: Reacts to `[aria-expanded="true"]`.
+- `selectable`: Reacts to `[aria-selected="true"]`.
+
+**Example:**
+```html
+<div layout="flex hoverable" visual="bg:white">
+  <p visual="text:grey hover:text:primary">Hover parent to change me</p>
+</div>
+```
+
+### 2. Peer Interactions
+Use `interact="[id]"` on the trigger and `listens="[id]"` on the receiver.
+
+**Example:**
+```html
+<button layout="hoverable" interact="my-menu">Trigger</button>
+<div layout="hidden hover:block" listens="my-menu">Target</div>
+```
+
 ## Configuration
 Use `senangstart.config.js` to override defaults.
 ```js

package/docs/reference/colors.md

@@ -12,7 +12,7 @@ Complete reference for the color palette.
 | `dark` | #3E4A5D | **Brand dark** |
 | `light` | #DBEAFE | **Brand light** |
 | `primary` | #2563EB | **Brand primary** |
-| `secondary` | #DBEAFE | **Brand secondary** |
+| `secondary` | #1E40AF | **Brand secondary** |
 | `success` | #10B981 | Positive feedback |
 | `warning` | #F59E0B | Cautions |
 | `danger` | #EF4444 | Errors |
@@ -104,7 +104,7 @@ Add custom colors in `senangstart.config.js`:
 export default {
   theme: {
     colors: {
-      'brand': '#8B5CF6',
+      'brand': '#38BDF8',
       'accent': '#EC4899',
       'muted': '#9CA3AF',
       'surface': '#F9FAFB'

package/docs/reference/space/height.md

@@ -17,16 +17,16 @@ space="h:[value]"
 
 ## Scale Values
 
-`none`, `thin`, `regular`, `thick`, `tiny`, `tiny-2x`, `small`, `small-2x`, `small-3x`, `small-4x`, `medium`, `medium-2x`, `medium-3x`, `medium-4x`, `large`, `large-2x`, `large-3x`, `large-4x`, `big`, `big-2x`, `big-3x`, `big-4x`, `giant`, `giant-2x`, `giant-3x`, `giant-4x`, `vast`, `vast-2x`, `vast-3x`, `vast-4x`, `vast-5x`, `vast-6x`, `vast-7x`, `vast-8x`, `vast-9x`, `vast-10x`, `min`, `max`, `fit`
+`none`, `thin`, `regular`, `thick`, `tiny`, `tiny-2x`, `small`, `small-2x`, `small-3x`, `small-4x`, `medium`, `medium-2x`, `medium-3x`, `medium-4x`, `large`, `large-2x`, `large-3x`, `large-4x`, `big`, `big-2x`, `big-3x`, `big-4x`, `giant`, `giant-2x`, `giant-3x`, `giant-4x`, `vast`, `vast-2x`, `vast-3x`, `vast-4x`, `vast-5x`, `vast-6x`, `vast-7x`, `vast-8x`, `vast-9x`, `vast-10x`, `min`, `max`, `fit`, `full`, `half`, `third`, `third-2x`, `quarter`, `quarter-2x`, `quarter-3x`, `1/1`, `1/2`, `1/3`, `2/3`, `1/4`, `2/4`, `3/4`
 
 ## Examples
 
 ```html
+<div space="h:full">Full height</div>
+<div space="h:half">Half height</div>
 <div space="h:[100vh]">Full viewport height</div>
 <div space="min-h:[400px]">Min height</div>
 <div space="h:max">Content height</div>
-<div space="max-h:max">Max content height</div>
-<div space="min-h:min">Min content height</div>
 ```
 
 ## Preview
@@ -36,11 +36,11 @@ space="h:[value]"
 ### Height Control
 
 <div layout="flex col" space="g:medium">
-  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="h:[100%]"</code> - Set fixed heights</p>
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="h:full"</code> - Set fixed heights</p>
 <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 120px;">
-  <div space="h:[100%] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[100%]</div>
-  <div space="h:[80px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[80px]</div>
-  <div space="h:[60px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[60px]</div>
+  <div space="h:full p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:full</div>
+  <div space="h:third-2x p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:third-2x</div>
+  <div space="h:half p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:half</div>
 </div>
 </div>
 
@@ -49,9 +49,9 @@ space="h:[value]"
 
 ```html
 <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 120px;">
-  <div space="h:[100%] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[100%]</div>
-  <div space="h:[80px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[80px]</div>
-  <div space="h:[60px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[60px]</div>
+  <div space="h:full p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:full</div>
+  <div space="h:third-2x p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:third-2x</div>
+  <div space="h:half p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:half</div>
 </div>
 ```
 

package/docs/reference/space/width.md

@@ -17,17 +17,17 @@ space="w:[value]"
 
 ## Scale Values
 
-`none`, `thin`, `regular`, `thick`, `tiny`, `tiny-2x`, `small`, `small-2x`, `small-3x`, `small-4x`, `medium`, `medium-2x`, `medium-3x`, `medium-4x`, `large`, `large-2x`, `large-3x`, `large-4x`, `big`, `big-2x`, `big-3x`, `big-4x`, `giant`, `giant-2x`, `giant-3x`, `giant-4x`, `vast`, `vast-2x`, `vast-3x`, `vast-4x`, `vast-5x`, `vast-6x`, `vast-7x`, `vast-8x`, `vast-9x`, `vast-10x`, `min`, `max`, `fit`
+`none`, `thin`, `regular`, `thick`, `tiny`, `tiny-2x`, `small`, `small-2x`, `small-3x`, `small-4x`, `medium`, `medium-2x`, `medium-3x`, `medium-4x`, `large`, `large-2x`, `large-3x`, `large-4x`, `big`, `big-2x`, `big-3x`, `big-4x`, `giant`, `giant-2x`, `giant-3x`, `giant-4x`, `vast`, `vast-2x`, `vast-3x`, `vast-4x`, `vast-5x`, `vast-6x`, `vast-7x`, `vast-8x`, `vast-9x`, `vast-10x`, `min`, `max`, `fit`, `full`, `half`, `third`, `third-2x`, `quarter`, `quarter-2x`, `quarter-3x`, `1/1`, `1/2`, `1/3`, `2/3`, `1/4`, `2/4`, `3/4`
 
 ## Examples
 
 ```html
-<div space="w:[100%]">Full width</div>
+<div space="w:full">Full width</div>
+<div space="w:half">Half width</div>
+<div space="w:third">Third width</div>
+<div space="w:quarter-3x">Three quarters</div>
 <div space="max-w:[1200px]">Max width container</div>
-<div space="min-w:[300px]">Min width</div>
 <div space="w:max">Content width</div>
-<div space="max-w:max">Max content width</div>
-<div space="min-w:min">Min content width</div>
 ```
 
 ## Preview
@@ -37,11 +37,11 @@ space="w:[value]"
 ### Width Control
 
 <div layout="flex col" space="g:medium">
-  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="w:[100%]"</code> - Set fixed or percentage widths</p>
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="w:full"</code> - Set fixed or percentage widths</p>
 <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="w:[100%] p:small" visual="bg:primary text:white rounded:small">w:[100%]</div>
-  <div space="w:[75%] p:small" visual="bg:primary text:white rounded:small">w:[75%]</div>
-  <div space="w:[50%] p:small" visual="bg:primary text:white rounded:small">w:[50%]</div>
+  <div space="w:full p:small" visual="bg:primary text:white rounded:small">w:full</div>
+  <div space="w:quarter-3x p:small" visual="bg:primary text:white rounded:small">w:quarter-3x</div>
+  <div space="w:half p:small" visual="bg:primary text:white rounded:small">w:half</div>
 </div>
 </div>
 
@@ -50,9 +50,9 @@ space="w:[value]"
 
 ```html
 <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="w:[100%] p:small" visual="bg:primary text:white rounded:small">w:[100%]</div>
-  <div space="w:[75%] p:small" visual="bg:primary text:white rounded:small">w:[75%]</div>
-  <div space="w:[50%] p:small" visual="bg:primary text:white rounded:small">w:[50%]</div>
+  <div space="w:full p:small" visual="bg:primary text:white rounded:small">w:full</div>
+  <div space="w:quarter-3x p:small" visual="bg:primary text:white rounded:small">w:quarter-3x</div>
+  <div space="w:half p:small" visual="bg:primary text:white rounded:small">w:half</div>
 </div>
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bookklik/senangstart-css",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Fluent Style Utilities for Humans and AI",
   "type": "module",
   "main": "src/index.js",

package/public/senangstart.css

@@ -80,7 +80,7 @@
   --c-dark: #3E4A5D;
   --c-light: #DBEAFE;
   --c-primary: #2563EB;
-  --c-secondary: #DBEAFE;
+  --c-secondary: #1E40AF;
   --c-success: #10B981;
   --c-warning: #F59E0B;
   --c-danger: #EF4444;

package/scripts/convert-tailwind.js

@@ -13,54 +13,96 @@ import { readFileSync, writeFileSync } from 'fs';
 import { argv } from 'process';
 import { resolve, join, sep } from 'path';
 
+/**
+ * Basic path validation to ensure we're within the allowed directory
+ * @param {string} filePath - Path to validate
+ */
+function isValidFilePath(filePath) {
+  try {
+    const resolvedPath = resolve(filePath);
+    const rootPath = process.cwd();
+    // Case-insensitive comparison for Windows
+    if (process.platform === 'win32') {
+      return resolvedPath.toLowerCase().startsWith(rootPath.toLowerCase());
+    }
+    return resolvedPath.startsWith(rootPath);
+  } catch (e) {
+    return false;
+  }
+}
+
 // ======================
 // SPACING SCALE MAPPING
 // ======================
 // Maps Tailwind spacing numbers to SenangStart semantic scale
 const spacingScale = {
   '0': 'none',
-  'px': '[1px]',
-  '0.5': 'tiny',
+  'px': 'thin',
+  '0.5': 'regular',
   '1': 'tiny',
-  '1.5': 'tiny',
-  '2': 'tiny',
-  '2.5': 'small',
-  '3': 'small',
-  '3.5': 'small',
-  '4': 'small',
-  '5': 'medium',
-  '6': 'medium',
-  '7': 'medium',
-  '8': 'big',
-  '9': 'big',
-  '10': 'big',
-  '11': 'big',
-  '12': 'giant',
-  '14': 'giant',
-  '16': 'giant',
-  '20': 'vast',
-  '24': 'vast',
-  '28': 'vast',
-  '32': 'vast',
-  '36': 'vast',
+  '1.5': 'tiny-2x',
+  '2': 'small',
+  '2.5': 'small-2x',
+  '3': 'small-3x',
+  '3.5': 'small-4x',
+  '4': 'medium',
+  '5': 'medium-2x',
+  '6': 'medium-3x',
+  '7': 'medium-4x',
+  '8': 'large',
+  '9': 'large-2x',
+  '10': 'large-3x',
+  '11': 'large-4x',
+  '12': 'big',
+  '14': 'big-2x',
+  '16': 'big-3x',
+  '20': 'big-4x',
+  '24': 'giant',
+  '28': 'giant-2x',
+  '32': 'giant-3x',
+  '36': 'giant-4x',
   '40': 'vast',
-  '44': 'vast',
-  '48': 'vast',
-  '52': 'vast',
-  '56': 'vast',
-  '60': 'vast',
-  '64': 'vast',
-  '72': 'vast',
-  '80': 'vast',
-  '96': 'vast',
-  'full': '[100%]',
+  '44': 'vast-2x',
+  '48': 'vast-3x',
+  '52': 'vast-4x',
+  '56': 'vast-5x',
+  '60': 'vast-6x',
+  '64': 'vast-7x',
+  '72': 'vast-8x',
+  '80': 'vast-9x',
+  '96': 'vast-10x',
+  'full': 'full',
   'screen': '[100vw]',
-  'min': '[min-content]',
-  'max': '[max-content]',
-  'fit': '[fit-content]',
+  'min': 'min',
+  'max': 'max',
+  'fit': 'fit',
   'auto': 'auto'
 };
 
+// ======================
+// PERCENTAGE ADJECTIVES
+// ======================
+// Maps Tailwind fractional values to SenangStart percentage adjectives
+const percentageAdjectives = {
+  '1/2': 'half',
+  '1/3': 'third',
+  '2/3': 'third-2x',
+  '1/4': 'quarter',
+  '2/4': 'quarter-2x',
+  '3/4': 'quarter-3x',
+  // Less common fractions - keep as arbitrary for precision
+  '1/5': '[20%]',
+  '2/5': '[40%]',
+  '3/5': '[60%]',
+  '4/5': '[80%]',
+  '1/6': '[16.666667%]',
+  '5/6': '[83.333333%]',
+  '1/12': '[8.333333%]',
+  '5/12': '[41.666667%]',
+  '7/12': '[58.333333%]',
+  '11/12': '[91.666667%]'
+};
+
 // ======================
 // BORDER RADIUS MAPPING
 // ======================
@@ -352,24 +394,32 @@ function getSpacingScale(value, options = {}) {
     if (value.startsWith('[') && value.endsWith(']')) {
       return value;
     }
-    // Special keywords that don't map to tw- scale
+    // Special keywords that use semantic values
     const specialKeywords = ['full', 'screen', 'min', 'max', 'fit', 'auto'];
     if (specialKeywords.includes(value)) {
       const specialMap = {
-        'full': '[100%]',
+        'full': 'full',
         'screen': '[100vw]',
-        'min': '[min-content]',
-        'max': '[max-content]',
-        'fit': '[fit-content]',
+        'min': 'min',
+        'max': 'max',
+        'fit': 'fit',
         'auto': 'auto'
       };
       return specialMap[value];
     }
+    // Check for percentage adjectives
+    if (percentageAdjectives[value]) {
+      return percentageAdjectives[value];
+    }
     // Output tw- prefix for numeric scale
     return `tw-${value}`;
   }
   
   // Semantic mode (default)
+  // Check for percentage adjectives first
+  if (percentageAdjectives[value]) {
+    return percentageAdjectives[value];
+  }
   if (spacingScale[value]) {
     return spacingScale[value];
   }
@@ -386,11 +436,12 @@ function getSpacingScale(value, options = {}) {
 // ======================
 const borderWidthScale = {
   '0': 'none',
-  '1': 'thin',
+  'px': 'thin',
+  '1': 'tiny',
   '2': 'regular',
   '3': 'thick',
-  '4': 'tiny',
-  '8': 'small'
+  '4': 'medium',
+  '8': 'large'
 };
 
 function getBorderWidth(value, options = {}) {
@@ -480,6 +531,19 @@ function convertClass(twClass, options = {}) {
       value: prefix + "border:" + borderColorMatch[1],
     };
 
+  // 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
+    const colorVal = borderSideColorMatch[2];
+    return {
+      category: 'visual',
+      value: prefix + `border-${side}:${colorVal}`,
+    };
+  }
+
   // Padding
   const paddingMatch = baseClass.match(/^p([trblxy])?-(.+)$/);
   if (paddingMatch) {
@@ -528,7 +592,11 @@ function convertClass(twClass, options = {}) {
     const prop = widthMatch[1];
     const rawVal = widthMatch[2];
     // Special width values
-    const specialWidthVals = { 'max': '[max-content]', 'min': '[min-content]', 'fit': '[fit-content]', 'prose': '[65ch]' };
+    const specialWidthVals = { 'max': 'max', 'min': 'min', 'fit': 'fit', 'prose': '[65ch]' };
+    // Check for percentage adjective first (e.g., 1/2 → half)
+    if (percentageAdjectives[rawVal]) {
+      return { category: 'space', value: prefix + prop + ":" + percentageAdjectives[rawVal] };
+    }
     const val = specialWidthVals[rawVal] || getSpacingScale(rawVal, options);
     return { category: 'space', value: prefix + prop + ":" + val };
   }
@@ -536,7 +604,11 @@ function convertClass(twClass, options = {}) {
   if (heightMatch) {
     const prop = heightMatch[1];
     const rawVal = heightMatch[2];
-    const specialHeightVals = { 'screen': '[100vh]', 'svh': '[100svh]', 'lvh': '[100lvh]', 'dvh': '[100dvh]', 'max': '[max-content]', 'min': '[min-content]', 'fit': '[fit-content]' };
+    const specialHeightVals = { 'screen': '[100vh]', 'svh': '[100svh]', 'lvh': '[100lvh]', 'dvh': '[100dvh]', 'max': 'max', 'min': 'min', 'fit': 'fit' };
+    // Check for percentage adjective first (e.g., 1/2 → half)
+    if (percentageAdjectives[rawVal]) {
+      return { category: 'space', value: prefix + prop + ":" + percentageAdjectives[rawVal] };
+    }
     const val = specialHeightVals[rawVal] || getSpacingScale(rawVal, options);
     return { category: 'space', value: prefix + prop + ":" + val };
   }
@@ -587,7 +659,7 @@ function convertClass(twClass, options = {}) {
     const width = borderWidthMatch[2] || "1";
     return {
       category: 'visual',
-      value: prefix + "border" + side + ":[" + width + "px]",
+      value: prefix + "border" + side + ":" + getBorderWidth(width, options),
     };
   }
 
@@ -621,6 +693,26 @@ function convertClass(twClass, options = {}) {
     return { category: 'layout', value: prefix + "row-span:" + rowSpanMatch[1] };
   }
 
+  // Positional properties (top-0, right-0, bottom-0, left-0, inset-0, etc.)
+  // 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(']')) {
+      // Keep arbitrary values as-is
+    } else if (percentageAdjectives[val]) {
+      // Map fractions to semantic names (1/2 → half, etc.)
+      val = percentageAdjectives[val];
+    } else {
+      val = getSpacingScale(val, options);
+    }
+    return { category: "layout", value: prefix + prop + ":" + val };
+  }
+
   // Opacity
   const opacityMatch = baseClass.match(/^opacity-(\d+)$/);
   if (opacityMatch) {
@@ -655,19 +747,19 @@ function convertClass(twClass, options = {}) {
   // 3D TRANSFORMS
   // ======================
   
-  // Perspective
-  const perspectiveMatch = baseClass.match(/^perspective(?:-(.+))?$/);
-  if (perspectiveMatch) {
-    const val = perspectiveMatch[1] || 'normal';
-    return { category: 'visual', value: prefix + "perspective:" + val };
-  }
-  
   // Perspective origin
   const perspectiveOriginMatch = baseClass.match(/^perspective-origin(?:-(.+))?$/);
   if (perspectiveOriginMatch) {
     const val = perspectiveOriginMatch[1] || 'center';
     return { category: 'visual', value: prefix + "perspective-origin:" + val };
   }
+
+  // Perspective
+  const perspectiveMatch = baseClass.match(/^perspective(?:-(.+))?$/);
+  if (perspectiveMatch) {
+    const val = perspectiveMatch[1] || 'normal';
+    return { category: 'visual', value: prefix + "perspective:" + val };
+  }
   
   // Rotate X/Y/Z (3D rotation)
   const rotateAxisMatch = baseClass.match(/^rotate-([xyz])(?:-(.+))?$/);
@@ -707,11 +799,32 @@ function convertClass(twClass, options = {}) {
     return { category: 'visual', value: prefix + `skew-${axis}:${val}` };
   }
   
-  // Translate X/Y/Z
-  const translateAxisMatch = baseClass.match(/^translate-([xyz])(?:-(.+))?$/);
+  // Translate X/Y/Z - includes negative values and fractions
+  // Positive: translate-x-1/2 → translate-x:half
+  // Negative: -translate-x-1/2 → translate-x:-half
+  const translateAxisMatch = baseClass.match(/^(-?)translate-([xyz])(?:-(.+))?$/);
   if (translateAxisMatch) {
-    const axis = translateAxisMatch[1].toLowerCase();
-    const val = translateAxisMatch[2] || '0';
+    const isNeg = translateAxisMatch[1] === '-';
+    const axis = translateAxisMatch[2].toLowerCase();
+    let val = translateAxisMatch[3] || '0';
+    
+    // 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 (percentageAdjectives[val]) {
+      val = percentageAdjectives[val];
+      if (isNeg) val = `-${val}`;
+    } else if (val === '0') {
+      val = '0';
+    } else {
+      val = getSpacingScale(val, options);
+      if (isNeg) val = `-${val}`;
+    }
+    
     return { category: 'visual', value: prefix + `translate-${axis}:${val}` };
   }
   
@@ -737,11 +850,7 @@ function convertClass(twClass, options = {}) {
   }
   
   // Mask
-  const maskMatch = baseClass.match(/^mask(?:-(.+))?$/);
-  if (maskMatch) {
-    const val = maskMatch[1] || 'none';
-    return { category: 'visual', value: prefix + "mask:" + val };
-  }
+
   
   // Mask image
   const maskImageMatch = baseClass.match(/^mask-image(?:-(.+))?$/);
@@ -792,6 +901,13 @@ function convertClass(twClass, options = {}) {
     return { category: 'visual', value: prefix + "mask-type:" + val };
   }
   
+  // Mask (generic) - Check this LAST
+  const maskMatch = baseClass.match(/^mask(?:-(.+))?$/);
+  if (maskMatch) {
+    const val = maskMatch[1] || 'none';
+    return { category: 'visual', value: prefix + "mask:" + val };
+  }
+  
   // Divide utilities - check these BEFORE other visual checks to avoid conflicts
   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|transparent|current|inherit)(?:-\d+)?)$/);
   if (divideXMatch) {
@@ -871,7 +987,7 @@ function convertClass(twClass, options = {}) {
 /**
  * Convert HTML string with Tailwind classes to SenangStart syntax
  */
-export function convertHTML(html, options = {}) {
+function convertHTML(html, options = {}) {
   // Match elements with class attribute
   const classRegex = /class\s*=\s*["']([^"']+)["']/gi;
   
@@ -948,9 +1064,9 @@ export function convertClasses(classString, options = {}) {
 
 /**
  * CLI entry point
+ * @param {string[]} args - Command line arguments (defaults to process.argv.slice(2))
  */
-function main() {
-  const args = argv.slice(2);
+function main(args = argv.slice(2)) {
   
   // Parse --exact flag
   const exactMode = args.includes('--exact') || args.includes('-e');
@@ -994,7 +1110,14 @@ Examples:
   }
   
   // File mode
-  const inputFile = args.find(arg => !arg.startsWith('-') && args.indexOf(arg) !== args.indexOf('-o') + 1 && args.indexOf(arg) !== args.indexOf('--output') + 1);
+  const inputFile = args.find((arg, index) => {
+    if (arg.startsWith('-')) return false;
+    if (index > 0) {
+      const prevArg = args[index - 1];
+      if (prevArg === '-o' || prevArg === '--output' || prevArg === '--string') return false;
+    }
+    return true;
+  });
   
   if (!inputFile) {
     console.error('Error: Input file required');
@@ -1038,4 +1161,4 @@ if (import.meta.url === `file://${process.argv[1].replace(/\\/g, '/')}` ||
 }
 
 // Export for testing
-export { convertClass, spacingScale, layoutMappings, visualKeywordMappings };
+export { convertClass, spacingScale, percentageAdjectives, layoutMappings, visualKeywordMappings, main, convertHTML, isValidFilePath };

package/scripts/generate-llms-txt.js

@@ -173,6 +173,34 @@ Example: \`space="p:small tab:p:medium lap:p:big"\`
 - \`active:\`, \`disabled:\`, \`group-hover:\`
 - \`dark:\`: \`visual="bg:white dark:bg:slate-900"\`
 
+## State Capabilities & Interaction
+
+React to parent ("Group") or sibling ("Peer") states across all attributes.
+
+### 1. Group Capabilities
+Add these to the \`layout\` attribute of a parent element:
+- \`hoverable\`: Adds \`:hover\` support.
+- \`focusable\`: Adds \`:focus-within\` support.
+- \`pressable\`: Adds \`:active\` support.
+- \`expandable\`: Reacts to \`[aria-expanded="true"]\`.
+- \`selectable\`: Reacts to \`[aria-selected="true"]\`.
+
+**Example:**
+\`\`\`html
+<div layout="flex hoverable" visual="bg:white">
+  <p visual="text:grey hover:text:primary">Hover parent to change me</p>
+</div>
+\`\`\`
+
+### 2. Peer Interactions
+Use \`interact="[id]"\` on the trigger and \`listens="[id]"\` on the receiver.
+
+**Example:**
+\`\`\`html
+<button layout="hoverable" interact="my-menu">Trigger</button>
+<div layout="hidden hover:block" listens="my-menu">Target</div>
+\`\`\`
+
 ## Configuration
 Use \`senangstart.config.js\` to override defaults.
 \`\`\`js