@bookklik/senangstart-css 0.2.4 → 0.2.5

package/scripts/convert-tailwind.js

@@ -318,7 +318,21 @@ const visualKeywordMappings = {
   
   // Appearance
   'appearance-none': 'appearance:none',
-  'appearance-auto': 'appearance:auto'
+  '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'
 };
 
 // ======================
@@ -606,7 +620,148 @@ function convertClass(twClass, options = {}) {
   if (toMatch) {
     return { category: 'visual', value: prefix + "to:" + toMatch[1] };
   }
-
+  
+  // ======================
+  // 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 };
+  }
+  
+  // Rotate X/Y/Z (3D rotation)
+  const rotateAxisMatch = baseClass.match(/^rotate-([xyz])(?:-(.+))?$/);
+  if (rotateAxisMatch) {
+    const axis = rotateAxisMatch[1].toLowerCase();
+    const val = rotateAxisMatch[2] || '0';
+    return { category: 'visual', value: prefix + `rotate-${axis}:${val}` };
+  }
+  
+  // Rotate (2D)
+  const rotateMatch = baseClass.match(/^rotate(?:-(.+))?$/);
+  if (rotateMatch && !rotateAxisMatch) {
+    const val = rotateMatch[1] || '0';
+    return { category: 'visual', value: prefix + `rotate:${val}` };
+  }
+  
+  // Scale X/Y
+  const scaleAxisMatch = baseClass.match(/^scale-([xy])(?:-(.+))?$/);
+  if (scaleAxisMatch) {
+    const axis = scaleAxisMatch[1].toLowerCase();
+    const val = scaleAxisMatch[2] || '100';
+    return { category: 'visual', value: prefix + `scale-${axis}:${val}` };
+  }
+  
+  // Scale (uniform)
+  const scaleMatch = baseClass.match(/^scale(?:-(.+))?$/);
+  if (scaleMatch && !scaleAxisMatch) {
+    const val = scaleMatch[1] || '100';
+    return { category: 'visual', value: prefix + `scale:${val}` };
+  }
+  
+  // Skew X/Y
+  const skewAxisMatch = baseClass.match(/^skew-([xy])(?:-(.+))?$/);
+  if (skewAxisMatch) {
+    const axis = skewAxisMatch[1].toLowerCase();
+    const val = skewAxisMatch[2] || '0';
+    return { category: 'visual', value: prefix + `skew-${axis}:${val}` };
+  }
+  
+  // Translate X/Y/Z
+  const translateAxisMatch = baseClass.match(/^translate-([xyz])(?:-(.+))?$/);
+  if (translateAxisMatch) {
+    const axis = translateAxisMatch[1].toLowerCase();
+    const val = translateAxisMatch[2] || '0';
+    return { category: 'visual', value: prefix + `translate-${axis}:${val}` };
+  }
+  
+  // Transform style
+  const transformStyleMatch = baseClass.match(/^transform-style(?:-(.+))?$/);
+  if (transformStyleMatch) {
+    const val = transformStyleMatch[1] || 'flat';
+    return { category: 'visual', value: prefix + "transform-style:" + val };
+  }
+  
+  // Backface visibility
+  const backfaceMatch = baseClass.match(/^backface(?:-(.+))?$/);
+  if (backfaceMatch) {
+    const val = backfaceMatch[1] || 'hidden';
+    return { category: 'visual', value: prefix + "backface:" + val };
+  }
+  
+  // Transform origin
+  const originMatch = baseClass.match(/^origin(?:-(.+))?$/);
+  if (originMatch) {
+    const val = originMatch[1] || 'center';
+    return { category: 'visual', value: prefix + "origin:" + val };
+  }
+  
+  // 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(?:-(.+))?$/);
+  if (maskImageMatch) {
+    const val = maskImageMatch[1] || 'none';
+    return { category: 'visual', value: prefix + "mask-image:" + val };
+  }
+  
+  // Mask mode
+  const maskModeMatch = baseClass.match(/^mask-mode(?:-(.+))?$/);
+  if (maskModeMatch) {
+    const val = maskModeMatch[1] || 'match';
+    return { category: 'visual', value: prefix + "mask-mode:" + val };
+  }
+  
+  // Mask origin
+  const maskOriginMatch = baseClass.match(/^mask-origin(?:-(.+))?$/);
+  if (maskOriginMatch) {
+    const val = maskOriginMatch[1] || 'center';
+    return { category: 'visual', value: prefix + "mask-origin:" + val };
+  }
+  
+  // Mask position
+  const maskPositionMatch = baseClass.match(/^mask-position(?:-(.+))?$/);
+  if (maskPositionMatch) {
+    const val = maskPositionMatch[1] || 'center';
+    return { category: 'visual', value: prefix + "mask-position:" + val };
+  }
+  
+  // Mask repeat
+  const maskRepeatMatch = baseClass.match(/^mask-repeat(?:-(.+))?$/);
+  if (maskRepeatMatch) {
+    const val = maskRepeatMatch[1] || 'repeat';
+    return { category: 'visual', value: prefix + "mask-repeat:" + val };
+  }
+  
+  // Mask size
+  const maskSizeMatch = baseClass.match(/^mask-size(?:-(.+))?$/);
+  if (maskSizeMatch) {
+    const val = maskSizeMatch[1] || 'auto';
+    return { category: 'visual', value: prefix + "mask-size:" + val };
+  }
+  
+  // Mask type
+  const maskTypeMatch = baseClass.match(/^mask-type(?:-(.+))?$/);
+  if (maskTypeMatch) {
+    const val = maskTypeMatch[1] || 'luminance';
+    return { category: 'visual', value: prefix + "mask-type:" + val };
+  }
+  
   return null;
 }
 

package/scripts/generate-llms-txt.js

@@ -0,0 +1,264 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { fileURLToPath } from 'node:url';
+import { pathToFileURL } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+
+
+const PACKAGE_JSON_PATH = path.resolve(__dirname, '../package.json');
+const DEFINITIONS_DIR = path.resolve(__dirname, '../src/definitions');
+const OUTPUT_PATH = path.resolve(__dirname, '../docs/public/llms.txt');
+
+// Load defaults from package.json
+let defaults = {
+    name: 'SenangStart CSS',
+    description: '',
+    license: 'MIT',
+    homepage: ''
+};
+
+try {
+    if (fs.existsSync(PACKAGE_JSON_PATH)) {
+        const pkg = JSON.parse(fs.readFileSync(PACKAGE_JSON_PATH, 'utf-8'));
+        if (pkg.name) defaults.name = pkg.name;
+        if (pkg.description) defaults.description = pkg.description;
+        if (pkg.license) defaults.license = pkg.license;
+        if (pkg.homepage) defaults.homepage = pkg.homepage;
+    }
+} catch (e) {
+    console.warn('Warning: Could not read package.json for defaults.');
+}
+
+
+
+function formatDefinition(key, def) {
+    let output = `## ${def.title || def.name || key}\n`;
+    if (def.description) {
+        output += `> ${def.description}\n`;
+    }
+    
+    // Add Syntax/Usage if available
+    if (def.syntax) {
+        output += `\n**Syntax:** \`${def.syntax}\`\n`;
+    }
+
+    if (def.values && Array.isArray(def.values)) {
+        output += `\n`;
+        def.values.forEach(val => {
+            let valDesc = val.description || '';
+            // If CSS is present, maybe show it, or keep it high level? 
+            // Tailwind example had: `bg-none`: Removes background image (`background-image: none;`).
+            // Our values are like { value: 'none', css: '...', description: '...' }
+            // The utility class is constructed via syntax, usually properties like `text:left` or `bg:primary`.
+            // The 'value' field is just the suffix/argument.
+            
+            // Let's try to infer the full utility format if possible, or just list the value.
+            // If syntax is visual="text:[alignment]", and value is 'left', then utility is text:left.
+            
+            let displayValue = val.value;
+            // Attempt to contextualize the value based on syntax
+            // e.g. syntax="visual="text:[alignment]"", value="left" -> text:left
+            // This might be complex to regex universally, but let's try a simple approach if possible.
+            // For now, just listing the value is safe.
+             
+            let line = `* \`${displayValue}\``;
+            if (valDesc) line += `: ${valDesc}`;
+            if (val.css && val.css.length < 50) line += ` (\`${val.css}\`)`; // only show if short
+            
+            output += `${line}\n`;
+        });
+    }
+    output += `\n`;
+    return output;
+}
+
+async function loadDefinitions() {
+    const definitions = new Map();
+    if (!fs.existsSync(DEFINITIONS_DIR)) return [];
+
+    const files = fs.readdirSync(DEFINITIONS_DIR).filter(f => f.endsWith('.js'));
+    
+    for (const file of files) {
+        try {
+            const filePath = path.join(DEFINITIONS_DIR, file);
+            const fileUrl = pathToFileURL(filePath).href;
+            const module = await import(fileUrl);
+            
+            // Iterate over exports, skipping default if it's just a collection of others
+            for (const [key, value] of Object.entries(module)) {
+                if (key === 'default') continue;
+                // Check if it looks like a definition (has name/property/values)
+                if (value && value.name && value.property && Array.isArray(value.values)) {
+                    // Use definition name as key to prevent duplicates from re-exports
+                    // e.g. layout.js re-exports definition from layout-flex.js
+                    const defName = value.name;
+                    if (!definitions.has(defName)) {
+                         definitions.set(defName, { key, ...value });
+                    }
+                }
+            }
+        } catch (e) {
+            console.error(`Error loading definition ${file}:`, e);
+        }
+    }
+    return Array.from(definitions.values());
+}
+
+function getGuideContent() {
+    return `
+# Framework Overview
+
+SenangStart CSS is a utility-first framework that uses **Natural Adjectives** instead of abstract numbers.
+
+## Core Philosophy
+- **Natural Scale**: Sizes map to physical mental models (e.g., \`tiny\` = pebble/4px, \`medium\` = smartphone/16px, \`giant\` = door/64px).
+- **Intent-First**: Describe *what* you want ("give it air" -> scale up), not pixels.
+- **Tri-Attribute Syntax**: Separation of concerns into three attributes:
+    1. \`layout\`: Structure & position (flex, grid, block, sticky).
+    2. \`space\`: Sizing, padding, margin, gap.
+    3. \`visual\`: Colors, typography, borders, shadows, effects.
+
+## Syntax Reference
+
+### 1. Layout Attribute
+Controls internal flow and external positioning.
+- **Flex**: \`layout="flex col center"\` (Flexbox, column direction, centered).
+- **Grid**: \`layout="grid"\`
+- **Position**: \`layout="absolute z:top"\`
+
+### 2. Space Attribute
+Controls dimensions and spacing using the Natural Scale.
+- **Syntax**: \`[breakpoint]:[property]:[scale]\`
+- **Properties**: \`p\` (padding), \`m\` (margin), \`g\` (gap), \`w\` (width), \`h\` (height).
+- **Values**: 
+    - \`none\` (0px)
+    - \`thin\` (1px), \`regular\` (2px), \`thick\` (3px)
+    - \`tiny\` (4px), \`tiny-2x\` (6px)
+    - \`small\` (8px), \`small-2x\` (10px), \`small-3x\` (12px), \`small-4x\` (14px)
+    - \`medium\` (16px), \`medium-2x\` (20px), \`medium-3x\` (24px), \`medium-4x\` (28px)
+    - \`large\` (32px), \`large-2x\` (36px), \`large-3x\` (40px), \`large-4x\` (44px)
+    - \`big\` (48px), \`big-2x\` (56px), \`big-3x\` (64px), \`big-4x\` (80px)
+    - \`giant\` (96px), \`giant-2x\` (112px), \`giant-3x\` (128px), \`giant-4x\` (144px)
+    - \`vast\` (160px), \`vast-2x\` (176px), \`vast-3x\` (192px), \`vast-4x\` (208px)
+    - \`vast-5x\` (224px), \`vast-6x\` (240px), \`vast-7x\` (256px), \`vast-8x\` (288px)
+    - \`vast-9x\` (320px), \`vast-10x\` (384px)
+- **Arbitrary**: \`space="w:[350px]"\`
+
+### 3. Visual Attribute
+Controls appearance.
+- **Colors**: \`bg:primary\`, \`text:white\`, \`border:grey\`.
+- **Typography**: \`font:bold\`, \`text-size:big\`.
+- **Effects**: \`rounded:medium\`, \`shadow:big\`, \`opacity:[0.5]\`.
+
+## Modifiers
+
+### Responsive Prefixes
+Mobile-first breakpoints:
+- (default): 0px+
+- \`mob:\`: 480px+ ("Large Mobile")
+- \`tab:\`: 768px+ ("Tablet")
+- \`lap:\`: 1024px+ ("Laptop")
+- \`desk:\`: 1280px+ ("Desktop")
+
+Example: \`space="p:small tab:p:medium lap:p:big"\`
+
+### State Prefixes
+- \`hover:\`: \`visual="bg:primary hover:bg:primary-dark"\`
+- \`focus:\`: \`visual="border:grey focus:border:brand"\`
+- \`active:\`, \`disabled:\`, \`group-hover:\`
+- \`dark:\`: \`visual="bg:white dark:bg:slate-900"\`
+
+## Configuration
+Use \`senangstart.config.js\` to override defaults.
+\`\`\`js
+export default {
+  theme: {
+    colors: { brand: '#8B5CF6' },
+    spacing: { huge: '256px' }
+  }
+}
+\`\`\`
+`.trim();
+}
+
+async function generate() {
+    console.log('Generating docs/public/llms.txt with references...\n');
+
+    const name = defaults.name;
+    const description = defaults.description;
+    const domain = defaults.homepage || 'https://bookklik-technologies.github.io/senangstart-css';
+    const docsUrls = `${domain}/guide`;
+    const apiEndpoints = '';
+    const repo = 'https://github.com/bookklik-technologies/senangstart-css';
+    const email = '';
+    const license = defaults.license;
+
+    let content = `# ${name}\n`;
+    content += `> ${description}\n\n`;
+
+    if (docsUrls) {
+        content += `## Docs\n`;
+        docsUrls.split(',').map(url => url.trim()).forEach(url => {
+            if (url) content += `- [Documentation](${url})\n`;
+        });
+        content += `\n`;
+    }
+
+    if (apiEndpoints) {
+        content += `## API\n`;
+        apiEndpoints.split(',').map(url => url.trim()).forEach(url => {
+            if (url) content += `- [API Endpoint](${url})\n`;
+        });
+        content += `\n`;
+    }
+
+    if (repo) {
+        content += `## Source\n`;
+        content += `- [Repository](${repo})\n\n`;
+    }
+
+    if (email) {
+        content += `## Contact\n`;
+        content += `- [Email](mailto:${email})\n`;
+    }
+
+    // Append Guide Content
+    console.log('Adding curated guide content...');
+    const guidesContent = getGuideContent();
+    if (guidesContent) {
+        content += `\n# Documentation Guides\n\n${guidesContent}\n`;
+    }
+
+    // Load and Append Definitions
+    const definitions = await loadDefinitions();
+    if (definitions.length > 0) {
+        content += `\n# Utility Definitions\n\n`;
+        // Sort by name or category?
+        definitions.sort((a, b) => (a.name || a.key).localeCompare(b.name || b.key));
+        
+        for (const def of definitions) {
+            content += formatDefinition(def.key, def);
+        }
+    }
+
+    // Ensure directory exists
+    const dir = path.dirname(OUTPUT_PATH);
+    if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+    }
+
+    fs.writeFileSync(OUTPUT_PATH, content, 'utf-8');
+    console.log(`\nSuccessfully generated ${OUTPUT_PATH}`);
+    console.log(`Included guide content and ${definitions.length} utility definitions.`);
+    // console.log('-----------------------------------');
+    // console.log(content.substring(0, 500) + '...');
+    // console.log('-----------------------------------');
+
+
+}
+
+generate();

package/src/cdn/{jit.js → senangstart-engine.js}

@@ -24,16 +24,42 @@ import { tokenize, parseToken } from '../core/tokenizer-core.js';
   const defaultConfig = {
     theme: {
       spacing: {
-        'none':   '0px',
-        'thin':   '1px', 
-        'regular': '2px',
-        'thick':  '3px', 
-        'tiny':   '4px',
-        'small':  '8px',
-        'medium': '16px',
-        'big':    '32px',
-        'giant':  '64px',
-        'vast':   '128px'
+      'none':      '0px',       // No space
+      'thin':      '1px',       // Hairline (for borders)
+      'regular':   '2px',       // Standard border
+      'thick':     '3px',       // Bold border
+      'tiny':      '4px',       // Small offsets
+      'tiny-2x':   '6px',       // Tiny multiplied
+        'small':     '8px',
+        'small-2x':  '10px',
+        'small-3x':  '12px',
+        'small-4x':  '14px',
+        'medium':    '16px',
+        'medium-2x': '20px',
+        'medium-3x': '24px',
+        'medium-4x': '28px',
+        'large':     '32px',
+        'large-2x':  '36px',
+        'large-3x':  '40px',
+        'large-4x':  '44px',
+        'big':       '48px',
+        'big-2x':    '56px',
+        'big-3x':    '64px',
+        'big-4x':    '80px',
+        'giant':     '96px',
+        'giant-2x':  '112px',
+        'giant-3x':  '128px',
+        'giant-4x':  '144px',
+        'vast':      '160px',
+        'vast-2x':   '176px',
+        'vast-3x':   '192px',
+        'vast-4x':   '208px',
+        'vast-5x':   '224px',
+        'vast-6x':   '240px',
+        'vast-7x':   '256px',
+        'vast-8x':   '288px',
+        'vast-9x':   '320px',
+        'vast-10x':  '384px'
       },
       radius: {
         'none':   '0px',
@@ -205,6 +231,15 @@ import { tokenize, parseToken } from '../core/tokenizer-core.js';
         'mid':    '50',
         'high':   '100',
         'top':    '9999'
+      },
+      ring: {
+        'none':    '0px',
+        'thin':    '1px',
+        'regular': '2px',
+        'thick':   '3px',
+        'small':   '4px',
+        'medium':  '6px',
+        'big':     '8px'
       }
     },
     // Dark mode configuration
@@ -232,7 +267,8 @@ import { tokenize, parseToken } from '../core/tokenizer-core.js';
         fontWeight: { type: 'object' },
         screens: { type: 'object' },
         colors: { type: 'object' },
-        zIndex: { type: 'object' }
+        zIndex: { type: 'object' },
+        ring: { type: 'object' }
       }
     },
     darkMode: { type: 'string', enum: ['media', 'selector'] },
@@ -358,6 +394,17 @@ import { tokenize, parseToken } from '../core/tokenizer-core.js';
       css += `  --z-${key}: ${value};\n`;
     }
     
+    // Ring (focus ring utilities)
+    if (theme.ring) {
+      for (const [key, value] of Object.entries(theme.ring)) {
+        css += `  --ring-${key}: ${value};\n`;
+      }
+    }
+    // Ring default values
+    css += `  --ring-color: var(--c-primary);\n`;
+    css += `  --ring-offset: 0px;\n`;
+    css += `  --ring-offset-color: #fff;\n`;
+    
     // ============================================
     // TAILWIND SCALE COMPATIBILITY (tw-* prefix)
     // ============================================
@@ -1894,6 +1941,29 @@ img, video {
         return `outline-offset: ${cssValue};`;
       },
       
+      // ============================================
+      // RING UTILITIES (Focus Ring)
+      // ============================================
+      'ring': () => {
+        if (value === 'none') {
+          return `box-shadow: 0 0 0 0 transparent;`;
+        }
+        const cssValue = isArbitrary ? value : `var(--ring-${value})`;
+        return `box-shadow: 0 0 0 var(--ring-offset) var(--ring-offset-color), 0 0 0 calc(${cssValue} + var(--ring-offset)) var(--ring-color);`;
+      },
+      'ring-color': () => {
+        const cssValue = isArbitrary ? value : `var(--c-${value})`;
+        return `--ring-color: ${cssValue};`;
+      },
+      'ring-offset': () => {
+        const cssValue = isArbitrary ? value : `${value}px`;
+        return `--ring-offset: ${cssValue};`;
+      },
+      'ring-offset-color': () => {
+        const cssValue = isArbitrary ? value : `var(--c-${value})`;
+        return `--ring-offset-color: ${cssValue};`;
+      },
+      
       // ============================================
       // SVG UTILITIES
       // ============================================