@bookklik/senangstart-css 0.2.7 → 0.2.9

package/src/compiler/parser.js

@@ -7,7 +7,9 @@
 const ATTRIBUTE_PATTERNS = {
   layout: /layout\s*=\s*["']([^"']*)["']/g,
   space:  /space\s*=\s*["']([^"']*)["']/g,
-  visual: /visual\s*=\s*["']([^"']*)["']/g
+  visual: /visual\s*=\s*["']([^"']*)["']/g,
+  interact: /interact\s*=\s*["']([^"']*)["']/g,
+  listens: /listens\s*=\s*["']([^"']*)["']/g
 };
 
 /**
@@ -18,7 +20,9 @@ function createAttributePatterns() {
   return {
     layout: /layout\s*=\s*["']([^"']*)["']/g,
     space:  /space\s*=\s*["']([^"']*)["']/g,
-    visual: /visual\s*=\s*["']([^"']*)["']/g
+    visual: /visual\s*=\s*["']([^"']*)["']/g,
+    interact: /interact\s*=\s*["']([^"']*)["']/g,
+    listens: /listens\s*=\s*["']([^"']*)["']/g
   };
 }
 
@@ -31,7 +35,9 @@ export function parseSource(content) {
   const results = {
     layout: new Set(),
     space: new Set(),
-    visual: new Set()
+    visual: new Set(),
+    interact: new Set(),
+    listens: new Set()
   };
 
   const patterns = createAttributePatterns();
@@ -63,7 +69,9 @@ export function parseMultipleSources(files) {
   const combined = {
     layout: new Set(),
     space: new Set(),
-    visual: new Set()
+    visual: new Set(),
+    interact: new Set(),
+    listens: new Set()
   };
 
   for (const file of files) {
@@ -72,6 +80,8 @@ export function parseMultipleSources(files) {
     parsed.layout.forEach(token => combined.layout.add(token));
     parsed.space.forEach(token => combined.space.add(token));
     parsed.visual.forEach(token => combined.visual.add(token));
+    parsed.interact.forEach(token => combined.interact.add(token));
+    parsed.listens.forEach(token => combined.listens.add(token));
   }
 
   return combined;

package/src/compiler/tokenizer.js

@@ -7,7 +7,6 @@
 export { 
   tokenize, 
   tokenizeAll, 
-  parseToken, 
   sanitizeValue, 
   isValidToken 
 } from '../core/tokenizer-core.js';

package/src/config/defaults.js

@@ -158,7 +158,7 @@ export const defaultConfig = {
       'dark':      '#3E4A5D',     // Brand dark
       'light':     '#DBEAFE',     // Brand light/secondary
       'primary':   '#2563EB',     // Brand primary
-      'secondary': '#DBEAFE',     // Brand secondary
+      'secondary': '#1E40AF',     // Brand secondary
       'success':   '#10B981',
       'warning':   '#F59E0B',
       'danger':    '#EF4444',

package/src/core/constants.js

@@ -7,7 +7,7 @@
 export const BREAKPOINTS = ['mob', 'tab', 'lap', 'desk', 'tw-sm', 'tw-md', 'tw-lg', 'tw-xl', 'tw-2xl'];
 
 // State prefixes
-export const STATES = ['hover', 'focus', 'focus-visible', 'active', 'disabled', 'dark'];
+export const STATES = ['hover', 'focus', 'focus-visible', 'active', 'disabled', 'dark', 'expanded', 'selected'];
 
 // Layout keywords (no colon syntax)
 export const LAYOUT_KEYWORDS = [
@@ -15,7 +15,9 @@ export const LAYOUT_KEYWORDS = [
   'row', 'col', 'row-reverse', 'col-reverse',
   'center', 'start', 'end', 'between', 'around', 'evenly',
   'wrap', 'nowrap',
-  'absolute', 'relative', 'fixed', 'sticky'
+  'absolute', 'relative', 'fixed', 'sticky',
+  // State Capabilities
+  'hoverable', 'focusable', 'pressable', 'expandable', 'selectable', 'disabled'
 ];
 
 // Layout CSS mappings
@@ -290,7 +292,7 @@ export const DEFAULT_THEME = {
     'dark':      '#3E4A5D',
     'light':     '#DBEAFE',
     'primary':   '#2563EB',
-    'secondary': '#DBEAFE',
+    'secondary': '#1E40AF',
     'success':   '#10B981',
     'warning':   '#F59E0B',
     'danger':    '#EF4444',

package/src/core/tokenizer-core.js

@@ -4,20 +4,14 @@
  */
 
 import { BREAKPOINTS, STATES, LAYOUT_KEYWORDS } from './constants.js';
+import { sanitizeValue } from '../utils/common.js';
 
 /**
  * Sanitize token value to prevent CSS injection
  * @param {string} value - Value to sanitize
  * @returns {string} - Sanitized value
  */
-export function sanitizeValue(value) {
-  if (typeof value !== 'string') {
-    return '';
-  }
-  // Only remove semicolons which can terminate CSS rules
-  // Allow braces for legitimate use cases like content:["{icon}"]
-  return value.replace(/;/g, '_');
-}
+export { sanitizeValue };
 
 /**
  * Validate token structure
@@ -46,56 +40,7 @@ export function isValidToken(token) {
   return true;
 }
 
-/**
- * Lightweight token parser (no validation, used for internal processing)
- * @param {string} raw - Raw token string
- * @returns {Object} - Parsed token object
- */
-export function parseToken(raw) {
-  const token = {
-    raw,
-    breakpoint: null,
-    state: null,
-    property: null,
-    value: null,
-    isArbitrary: false
-  };
-
-  const parts = raw.split(':');
-  let idx = 0;
 
-  // Check for breakpoint
-  if (BREAKPOINTS.includes(parts[0])) {
-    token.breakpoint = parts[0];
-    idx++;
-  }
-
-  // Check for state
-  if (STATES.includes(parts[idx])) {
-    token.state = parts[idx];
-    idx++;
-  }
-
-  // Property
-  if (idx < parts.length) {
-    token.property = parts[idx];
-    idx++;
-  }
-
-  // Value
-  if (idx < parts.length) {
-    let value = parts.slice(idx).join(':');
-    const arbitraryMatch = value.match(/^\[(.+)\]$/);
-    if (arbitraryMatch) {
-      token.value = arbitraryMatch[1].replace(/_/g, ' ');
-      token.isArbitrary = true;
-    } else {
-      token.value = value;
-    }
-  }
-
-  return token;
-}
 
 /**
  * Tokenize a single attribute value string
@@ -230,4 +175,4 @@ export function tokenizeAll(parsed) {
   return tokens;
 }
 
-export default { tokenize, tokenizeAll, parseToken, sanitizeValue, isValidToken };
+export default { tokenize, tokenizeAll, sanitizeValue, isValidToken };

package/src/definitions/index.js

@@ -108,12 +108,13 @@ export function getDefinition(name) {
 /**
  * Validate that all definitions have required fields
  * Used by tests to ensure definitions are complete
+ * @param {Array} definitions - Optional array of definitions to validate (defaults to all)
  */
-export function validateDefinitions() {
+export function validateDefinitions(definitions = getAllDefinitions()) {
   const requiredFields = ['name', 'property', 'description', 'descriptionMs', 'category'];
   const errors = [];
   
-  for (const def of getAllDefinitions()) {
+  for (const def of definitions) {
     for (const field of requiredFields) {
       if (!def[field]) {
         errors.push(`Missing '${field}' in definition '${def.name || 'unknown'}'`);

package/src/definitions/layout.js

@@ -174,13 +174,17 @@ export const layoutDefinitions = {
 };
 
 // Build flat value map for CSS generator
-export function buildLayoutMap() {
+export function buildLayoutMap(definitions = layoutDefinitions) {
   const map = {};
   
   // Add all simple keyword values from definitions
-  for (const def of Object.values(layoutDefinitions)) {
+  for (const def of Object.values(definitions)) {
     if (def.dynamic) continue; // Skip dynamic properties that need special handling
     
+    // Only include definitions that act as global keywords (no prefix in syntax)
+    // format: layout="[value]"
+    if (!def.syntax || !def.syntax.includes('layout="[')) continue;
+    
     for (const v of def.values) {
       // Skip range values like '1-12' that need special handling
       if (v.value.match(/^\d+-\d+$/)) continue;

package/src/definitions/space.js

@@ -244,16 +244,29 @@ export const width = {
     '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'
+    'min', 'max', 'fit',
+    // Percentage adjectives
+    'full', 'half', 'third', 'third-2x', 'quarter', 'quarter-2x', 'quarter-3x',
+    // Fractional values (backwards compatibility)
+    '1/1', '1/2', '1/3', '2/3', '1/4', '2/4', '3/4'
+  ],
+  percentageAdjectives: [
+    { name: 'full', value: '100%', description: 'Full width (100%)', descriptionMs: 'Lebar penuh (100%)' },
+    { name: 'half', value: '50%', description: 'Half width (50%)', descriptionMs: 'Separuh lebar (50%)' },
+    { name: 'third', value: '33.333333%', description: 'One third width (33%)', descriptionMs: 'Satu pertiga lebar (33%)' },
+    { name: 'third-2x', value: '66.666667%', description: 'Two thirds width (66%)', descriptionMs: 'Dua pertiga lebar (66%)' },
+    { name: 'quarter', value: '25%', description: 'One quarter width (25%)', descriptionMs: 'Satu perempat lebar (25%)' },
+    { name: 'quarter-2x', value: '50%', description: 'Two quarters width (50%)', descriptionMs: 'Dua perempat lebar (50%)' },
+    { name: 'quarter-3x', value: '75%', description: 'Three quarters width (75%)', descriptionMs: 'Tiga perempat lebar (75%)' }
   ],
   supportsArbitrary: true,
   examples: [
-    { code: '<div space="w:[100%]">Full width</div>', description: 'Full width' },
+    { code: '<div space="w:full">Full width</div>', description: 'Full width' },
+    { code: '<div space="w:half">Half width</div>', description: 'Half width (50%)' },
+    { code: '<div space="w:third">Third width</div>', description: 'One third width (33%)' },
+    { code: '<div space="w:quarter-3x">Three quarters</div>', description: 'Three quarters width (75%)' },
     { code: '<div space="max-w:[1200px]">Max width container</div>', description: 'Max width' },
-    { code: '<div space="min-w:[300px]">Min width</div>', description: 'Minimum width' },
-    { code: '<div space="w:max">Content width</div>', description: 'Width based on content (max-content)' },
-    { code: '<div space="max-w:max">Max content width</div>', description: 'Maximum content width' },
-    { code: '<div space="min-w:min">Min content width</div>', description: 'Minimum content width' }
+    { code: '<div space="w:max">Content width</div>', description: 'Width based on content (max-content)' }
   ],
   preview: [
     {
@@ -262,11 +275,11 @@ export const width = {
       description: 'Set fixed or percentage widths',
       descriptionMs: 'Tetapkan lebar tetap atau peratusan',
       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>`,
-      highlightValue: 'w:[100%]'
+      highlightValue: 'w:full'
     },
     {
       title: 'Content-Based Sizing',
@@ -329,15 +342,28 @@ export const height = {
     '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'
+    'min', 'max', 'fit',
+    // Percentage adjectives
+    'full', 'half', 'third', 'third-2x', 'quarter', 'quarter-2x', 'quarter-3x',
+    // Fractional values (backwards compatibility)
+    '1/1', '1/2', '1/3', '2/3', '1/4', '2/4', '3/4'
+  ],
+  percentageAdjectives: [
+    { name: 'full', value: '100%', description: 'Full height (100%)', descriptionMs: 'Tinggi penuh (100%)' },
+    { name: 'half', value: '50%', description: 'Half height (50%)', descriptionMs: 'Separuh tinggi (50%)' },
+    { name: 'third', value: '33.333333%', description: 'One third height (33%)', descriptionMs: 'Satu pertiga tinggi (33%)' },
+    { name: 'third-2x', value: '66.666667%', description: 'Two thirds height (66%)', descriptionMs: 'Dua pertiga tinggi (66%)' },
+    { name: 'quarter', value: '25%', description: 'One quarter height (25%)', descriptionMs: 'Satu perempat tinggi (25%)' },
+    { name: 'quarter-2x', value: '50%', description: 'Two quarters height (50%)', descriptionMs: 'Dua perempat tinggi (50%)' },
+    { name: 'quarter-3x', value: '75%', description: 'Three quarters height (75%)', descriptionMs: 'Tiga perempat tinggi (75%)' }
   ],
   supportsArbitrary: true,
   examples: [
-    { code: '<div space="h:[100vh]">Full viewport height</div>', description: 'Full height' },
+    { code: '<div space="h:full">Full height</div>', description: 'Full height' },
+    { code: '<div space="h:half">Half height</div>', description: 'Half height (50%)' },
+    { code: '<div space="h:[100vh]">Full viewport height</div>', description: 'Full viewport height' },
     { code: '<div space="min-h:[400px]">Min height</div>', description: 'Minimum height' },
-    { code: '<div space="h:max">Content height</div>', description: 'Height based on content (max-content)' },
-    { code: '<div space="max-h:max">Max content height</div>', description: 'Maximum content height' },
-    { code: '<div space="min-h:min">Min content height</div>', description: 'Minimum content height' }
+    { code: '<div space="h:max">Content height</div>', description: 'Height based on content (max-content)' }
   ],
   preview: [
     {
@@ -346,11 +372,11 @@ export const height = {
       description: 'Set fixed heights',
       descriptionMs: 'Tetapkan tinggi tetap',
       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>`,
-      highlightValue: 'h:[100%]'
+      highlightValue: 'h:full'
     },
     {
       title: 'Content-Based Height',

package/src/index.js

@@ -0,0 +1,47 @@
+/**
+ * SenangStart CSS - Core API
+ * Exporting the compiler engine for programmatic usage
+ */
+
+// Core Tokenizer
+import { tokenize, tokenizeAll } from './core/tokenizer-core.js';
+
+// Parsers
+import { parseSource, parseMultipleSources } from './compiler/parser.js';
+
+// Generators
+import { generateCSS, generateCSSVariables } from './compiler/generators/css.js';
+import { generatePreflight } from './compiler/generators/preflight.js';
+
+// Configuration
+import { defaultConfig, mergeConfig } from './config/defaults.js';
+
+// Constants
+import * as constants from './core/constants.js';
+
+// High-level Compiler
+import { compileSource, compileMultiple } from './compiler/index.js';
+
+export {
+  // Core
+  tokenize,
+  tokenizeAll,
+  parseSource,
+  parseMultipleSources,
+  
+  // Generators
+  generateCSS,
+  generateCSSVariables,
+  generatePreflight,
+  
+  // High-level
+  compileSource,
+  compileMultiple,
+  
+  // Configuration
+  defaultConfig,
+  mergeConfig,
+  
+  // Constants
+  constants
+};

package/src/utils/common.js

@@ -0,0 +1,27 @@
+/**
+ * SenangStart CSS - Common Utilities
+ * Shared helper functions for compiler and runtime
+ */
+
+/**
+ * Sanitize token value to prevent CSS injection
+ * Removes potentially dangerous characters/sequences
+ * @param {string} value - Value to sanitize
+ * @returns {string} - Sanitized value
+ */
+export function sanitizeValue(value) {
+  if (typeof value !== 'string') {
+    return '';
+  }
+  
+  // Remove potentially dangerous characters that could break CSS syntax
+  // Note: We used to filter {} but some tests expect them (e.g. content icons), so we only filter ; for now
+  const dangerousChars = /[;]/g;
+  if (dangerousChars.test(value)) {
+    return value.replace(dangerousChars, '_');
+  }
+  
+  return value;
+}
+
+export default { sanitizeValue };

package/templates/senangstart.config.js

@@ -28,7 +28,7 @@ export default {
 
     // Add custom colors
     // colors: {
-    //   'brand': '#8B5CF6',
+    //   'brand': '#38BDF8',
     //   'accent': '#EC4899'
     // }
   }

package/tests/helpers/test-utils.js

@@ -62,7 +62,7 @@ export function createTestConfig(overrides = {}) {
         'white': '#FFFFFF',
         'black': '#000000',
         'primary': '#2563EB',
-        'secondary': '#DBEAFE',
+        'secondary': '#1E40AF',
         'success': '#10B981',
         'warning': '#F59E0B',
         'danger': '#EF4444',

package/tests/integration/compiler.test.js

@@ -170,10 +170,21 @@ describe('Compiler Integration', () => {
       
       const result = compileMultiple(files, config);
       
-      assert.ok(result.css);
       assert.strictEqual(result.tokens.length, 0);
     });
 
+    it('minifies output when configured', () => {
+      const files = [
+        { path: 'test.html', content: '<div layout="flex">Test</div>' }
+      ];
+      const config = createTestConfig({ output: { minify: true } });
+      
+      const result = compileMultiple(files, config);
+      
+      assert.ok(result.minifiedCSS);
+      assert.ok(result.minifiedCSS.length <= result.css.length);
+    });
+
   });
 
   describe('Real-world Scenarios', () => {