@bookklik/senangstart-css 0.2.3 → 0.2.5

package/scripts/build-dist.js

@@ -6,7 +6,7 @@
  */
 
 import * as esbuild from 'esbuild';
-import { mkdirSync, statSync } from 'fs';
+import { mkdirSync, statSync, copyFileSync } from 'fs';
 import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
 
@@ -21,7 +21,7 @@ console.log('📦 Building SenangStart CSS...\n');
 
 // Build unminified version
 await esbuild.build({
-  entryPoints: [join(root, 'src', 'cdn', 'jit.js')],
+  entryPoints: [join(root, 'src', 'cdn', 'senangstart-engine.js')],
   bundle: true,
   format: 'iife',
   outfile: join(distDir, 'senangstart-css.js'),
@@ -36,7 +36,7 @@ console.log(`✓ Created senangstart-css.js (${(unminSize / 1024).toFixed(1)} KB
 
 // Build minified version
 await esbuild.build({
-  entryPoints: [join(root, 'src', 'cdn', 'jit.js')],
+  entryPoints: [join(root, 'src', 'cdn', 'senangstart-engine.js')],
   bundle: true,
   format: 'iife',
   outfile: join(distDir, 'senangstart-css.min.js'),
@@ -49,6 +49,48 @@ await esbuild.build({
 const minSize = statSync(join(distDir, 'senangstart-css.min.js')).size;
 console.log(`✓ Created senangstart-css.min.js (${(minSize / 1024).toFixed(1)} KB)`);
 
+// Build Tailwind converter - unminified
+await esbuild.build({
+  entryPoints: [join(root, 'src', 'cdn', 'tw-conversion-engine.js')],
+  bundle: true,
+  format: 'iife',
+  outfile: join(distDir, 'senangstart-tw.js'),
+  minify: false,
+  banner: {
+    js: '/* SenangStart CSS - Tailwind Converter v0.2.0 | MIT License */'
+  }
+});
+
+const twUnminSize = statSync(join(distDir, 'senangstart-tw.js')).size;
+console.log(`✓ Created senangstart-tw.js (${(twUnminSize / 1024).toFixed(1)} KB)`);
+
+// Build Tailwind converter - minified
+await esbuild.build({
+  entryPoints: [join(root, 'src', 'cdn', 'tw-conversion-engine.js')],
+  bundle: true,
+  format: 'iife',
+  outfile: join(distDir, 'senangstart-tw.min.js'),
+  minify: true,
+  banner: {
+    js: '/* SenangStart TW v0.2.0 | MIT */'
+  }
+});
+
+const twMinSize = statSync(join(distDir, 'senangstart-tw.min.js')).size;
+console.log(`✓ Created senangstart-tw.min.js (${(twMinSize / 1024).toFixed(1)} KB)`);
+
+// Copy to docs/public/assets for VitePress
+const docsAssetsDir = join(root, 'docs', 'public', 'assets');
+mkdirSync(docsAssetsDir, { recursive: true });
+copyFileSync(
+  join(distDir, 'senangstart-css.min.js'),
+  join(docsAssetsDir, 'senangstart-css.min.js')
+);
+console.log(`✓ Copied to docs/public/assets/senangstart-css.min.js`);
+
 console.log('\n📦 Dist build complete!');
 console.log('   dist/senangstart-css.js');
 console.log('   dist/senangstart-css.min.js');
+console.log('   dist/senangstart-tw.js');
+console.log('   dist/senangstart-tw.min.js');
+

package/scripts/bundle-jit.js

@@ -2,7 +2,7 @@
 
 /**
  * Bundle JIT Runtime with esbuild
- * Bundles src/cdn/jit.js into a self-contained IIFE for browser use
+ * Bundles src/cdn/senangstart-engine.js into a self-contained IIFE for browser use
  */
 
 import * as esbuild from 'esbuild';
@@ -16,7 +16,7 @@ console.log('📦 Bundling JIT runtime...');
 
 // Build unminified version
 await esbuild.build({
-  entryPoints: [join(root, 'src', 'cdn', 'jit.js')],
+  entryPoints: [join(root, 'src', 'cdn', 'senangstart-engine.js')],
   bundle: true,
   format: 'iife',
   outfile: join(root, 'dist', 'senangstart-css.js'),
@@ -30,7 +30,7 @@ console.log('✓ Created dist/senangstart-css.js');
 
 // Build minified version
 await esbuild.build({
-  entryPoints: [join(root, 'src', 'cdn', 'jit.js')],
+  entryPoints: [join(root, 'src', 'cdn', 'senangstart-engine.js')],
   bundle: true,
   format: 'iife',
   outfile: join(root, 'dist', 'senangstart-css.min.js'),

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'
 };
 
 // ======================
@@ -583,6 +597,171 @@ function convertClass(twClass, options = {}) {
     return { category: 'visual', value: 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 { category: 'visual', value: prefix + "bg-image:gradient-to-" + bgGradientMatch[1] };
+  }
+
+  // Gradient from-* (starting color)
+  const fromMatch = baseClass.match(/^from-(.+)$/);
+  if (fromMatch) {
+    return { category: 'visual', value: prefix + "from:" + fromMatch[1] };
+  }
+
+  // Gradient via-* (middle color)
+  const viaMatch = baseClass.match(/^via-(.+)$/);
+  if (viaMatch) {
+    return { category: 'visual', value: prefix + "via:" + viaMatch[1] };
+  }
+
+  // Gradient to-* (ending color) - Note: must come after bg-gradient-to-*
+  const toMatch = baseClass.match(/^to-(.+)$/);
+  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();