@bookklik/senangstart-css 0.1.0

package/src/compiler/generators/typescript.js

@@ -0,0 +1,125 @@
+/**
+ * SenangStart CSS - TypeScript Definition Generator
+ * Generates type definitions for React/Vue/Svelte
+ */
+
+/**
+ * Generate TypeScript definitions
+ * @param {Object} config - Configuration object
+ * @returns {string} - TypeScript definition content
+ */
+export function generateTypeScript(config) {
+  const { theme } = config;
+  
+  // Generate spacing unions
+  const spacingKeys = Object.keys(theme.spacing);
+  const paddingUnions = spacingKeys.map(k => `'p:${k}'`).join(' | ');
+  const marginUnions = spacingKeys.map(k => `'m:${k}'`).join(' | ');
+  const gapUnions = spacingKeys.map(k => `'g:${k}'`).join(' | ');
+  
+  // Generate radius unions
+  const radiusKeys = Object.keys(theme.radius);
+  const roundedUnions = radiusKeys.map(k => `'rounded:${k}'`).join(' | ');
+  
+  // Generate shadow unions
+  const shadowKeys = Object.keys(theme.shadow);
+  const shadowUnions = shadowKeys.map(k => `'shadow:${k}'`).join(' | ');
+  
+  // Generate color unions
+  const colorKeys = Object.keys(theme.colors);
+  const bgUnions = colorKeys.map(k => `'bg:${k}'`).join(' | ');
+  const textColorUnions = colorKeys.map(k => `'text:${k}'`).join(' | ');
+  
+  // Generate font size unions
+  const fontSizeKeys = Object.keys(theme.fontSize);
+  const textSizeUnions = fontSizeKeys.map(k => `'text-size:${k}'`).join(' | ');
+  
+  // Generate font weight unions
+  const fontWeightKeys = Object.keys(theme.fontWeight);
+  const fontUnions = fontWeightKeys.map(k => `'font:${k}'`).join(' | ');
+
+  return `/**
+ * SenangStart CSS - TypeScript Definitions
+ * Auto-generated from configuration
+ */
+
+// Layout attribute values
+type LayoutDisplay = 'flex' | 'grid' | 'block' | 'inline' | 'hidden';
+type LayoutDirection = 'row' | 'col' | 'row-reverse' | 'col-reverse';
+type LayoutAlignment = 'center' | 'start' | 'end' | 'between' | 'around' | 'evenly';
+type LayoutWrap = 'wrap' | 'nowrap';
+type LayoutPosition = 'absolute' | 'relative' | 'fixed' | 'sticky';
+type LayoutZIndex = 'z:base' | 'z:low' | 'z:mid' | 'z:high' | 'z:top';
+
+type LayoutValue = 
+  | LayoutDisplay 
+  | LayoutDirection 
+  | LayoutAlignment 
+  | LayoutWrap 
+  | LayoutPosition 
+  | LayoutZIndex
+  | \`\${LayoutDisplay} \${LayoutDirection}\`
+  | \`\${LayoutDisplay} \${LayoutAlignment}\`
+  | \`\${LayoutDisplay} \${LayoutDirection} \${LayoutAlignment}\`
+  | string;
+
+// Space attribute values
+type SpacingScale = ${spacingKeys.map(k => `'${k}'`).join(' | ')};
+type Breakpoint = 'mob' | 'tab' | 'lap' | 'desk';
+
+type PaddingValue = ${paddingUnions} | \`p-t:\${SpacingScale}\` | \`p-r:\${SpacingScale}\` | \`p-b:\${SpacingScale}\` | \`p-l:\${SpacingScale}\` | \`p-x:\${SpacingScale}\` | \`p-y:\${SpacingScale}\`;
+type MarginValue = ${marginUnions} | \`m-t:\${SpacingScale}\` | \`m-r:\${SpacingScale}\` | \`m-b:\${SpacingScale}\` | \`m-l:\${SpacingScale}\` | \`m-x:\${SpacingScale}\` | \`m-y:\${SpacingScale}\` | 'm-x:auto';
+type GapValue = ${gapUnions} | \`g-x:\${SpacingScale}\` | \`g-y:\${SpacingScale}\`;
+type SizeValue = \`w:[\${string}]\` | \`h:[\${string}]\` | \`min-w:[\${string}]\` | \`max-w:[\${string}]\` | \`min-h:[\${string}]\` | \`max-h:[\${string}]\`;
+
+type SpaceValue = PaddingValue | MarginValue | GapValue | SizeValue | \`\${Breakpoint}:\${PaddingValue}\` | string;
+
+// Visual attribute values
+type ColorKey = ${colorKeys.map(k => `'${k}'`).join(' | ')};
+type RadiusKey = ${radiusKeys.map(k => `'${k}'`).join(' | ')};
+type ShadowKey = ${shadowKeys.map(k => `'${k}'`).join(' | ')};
+type FontSizeKey = ${fontSizeKeys.map(k => `'${k}'`).join(' | ')};
+type FontWeightKey = ${fontWeightKeys.map(k => `'${k}'`).join(' | ')};
+
+type BgValue = ${bgUnions} | \`bg:[\${string}]\`;
+type TextColorValue = ${textColorUnions};
+type TextSizeValue = ${textSizeUnions};
+type FontValue = ${fontUnions};
+type RoundedValue = ${roundedUnions};
+type ShadowValue = ${shadowUnions};
+type TextAlignValue = 'text:left' | 'text:center' | 'text:right';
+
+type VisualValue = BgValue | TextColorValue | TextSizeValue | FontValue | RoundedValue | ShadowValue | TextAlignValue | string;
+
+// React JSX attribute extensions
+declare module 'react' {
+  interface HTMLAttributes<T> {
+    layout?: LayoutValue;
+    space?: SpaceValue;
+    visual?: VisualValue;
+  }
+}
+
+// Vue attribute extensions
+declare module 'vue' {
+  interface HTMLAttributes {
+    layout?: string;
+    space?: string;
+    visual?: string;
+  }
+}
+
+// Svelte attribute extensions
+declare namespace svelteHTML {
+  interface HTMLAttributes<T> {
+    'layout'?: string;
+    'space'?: string;
+    'visual'?: string;
+  }
+}
+
+export {};
+`;
+}
+
+export default { generateTypeScript };

package/src/compiler/index.js

@@ -0,0 +1,50 @@
+/**
+ * SenangStart CSS - Main Compiler Orchestrator
+ * Coordinates parsing, tokenizing, and generating output
+ */
+
+import { parseSource, parseMultipleSources } from './parser.js';
+import { tokenizeAll } from './tokenizer.js';
+import { generateCSS, minifyCSS } from './generators/css.js';
+import { generateAIContext } from './generators/ai-context.js';
+import { generateTypeScript } from './generators/typescript.js';
+
+/**
+ * Compile a single source string
+ * @param {string} content - Source content
+ * @param {Object} config - Configuration
+ * @returns {Object} - Compilation results
+ */
+export function compileSource(content, config) {
+  const parsed = parseSource(content);
+  const tokens = tokenizeAll(parsed);
+  const css = generateCSS(tokens, config);
+  
+  return {
+    tokens,
+    css,
+    minifiedCSS: config.output?.minify ? minifyCSS(css) : null
+  };
+}
+
+/**
+ * Compile multiple source files
+ * @param {Array<{path: string, content: string}>} files - Source files
+ * @param {Object} config - Configuration
+ * @returns {Object} - Compilation results
+ */
+export function compileMultiple(files, config) {
+  const parsed = parseMultipleSources(files);
+  const tokens = tokenizeAll(parsed);
+  const css = generateCSS(tokens, config);
+  
+  return {
+    tokens,
+    css,
+    minifiedCSS: config.output?.minify ? minifyCSS(css) : null,
+    aiContext: generateAIContext(config),
+    typescript: generateTypeScript(config)
+  };
+}
+
+export default { compileSource, compileMultiple };

package/src/compiler/parser.js

@@ -0,0 +1,67 @@
+/**
+ * SenangStart CSS - HTML/JSX Parser
+ * Extracts layout, space, and visual attributes from source files
+ */
+
+// Regex patterns for attribute extraction
+const ATTRIBUTE_PATTERNS = {
+  layout: /layout\s*=\s*["']([^"']+)["']/g,
+  space:  /space\s*=\s*["']([^"']+)["']/g,
+  visual: /visual\s*=\s*["']([^"']+)["']/g
+};
+
+/**
+ * Parse a source file and extract all SenangStart attributes
+ * @param {string} content - File content to parse
+ * @returns {Object} - Extracted attributes by type
+ */
+export function parseSource(content) {
+  const results = {
+    layout: new Set(),
+    space: new Set(),
+    visual: new Set()
+  };
+
+  for (const [attr, pattern] of Object.entries(ATTRIBUTE_PATTERNS)) {
+    // Reset regex lastIndex for each new content
+    pattern.lastIndex = 0;
+    
+    let match;
+    while ((match = pattern.exec(content)) !== null) {
+      const value = match[1].trim();
+      // Split by whitespace to get individual tokens
+      value.split(/\s+/).forEach(token => {
+        if (token) {
+          results[attr].add(token);
+        }
+      });
+    }
+  }
+
+  return results;
+}
+
+/**
+ * Parse multiple source files
+ * @param {Array<{path: string, content: string}>} files - Array of file objects
+ * @returns {Object} - Combined extracted attributes
+ */
+export function parseMultipleSources(files) {
+  const combined = {
+    layout: new Set(),
+    space: new Set(),
+    visual: new Set()
+  };
+
+  for (const file of files) {
+    const parsed = parseSource(file.content);
+    
+    parsed.layout.forEach(token => combined.layout.add(token));
+    parsed.space.forEach(token => combined.space.add(token));
+    parsed.visual.forEach(token => combined.visual.add(token));
+  }
+
+  return combined;
+}
+
+export default { parseSource, parseMultipleSources };

package/src/compiler/tokenizer.js

@@ -0,0 +1,142 @@
+/**
+ * SenangStart CSS - Tokenizer
+ * Parses attribute values into structured tokens
+ * 
+ * Syntax: [breakpoint]:[property]:[value]
+ * Examples:
+ *   - p:medium         → { property: 'p', value: 'medium' }
+ *   - tab:p:big        → { breakpoint: 'tab', property: 'p', value: 'big' }
+ *   - w:[350px]        → { property: 'w', value: '350px', isArbitrary: true }
+ *   - hover:bg:primary → { state: 'hover', property: 'bg', value: 'primary' }
+ */
+
+// Breakpoint prefixes
+const BREAKPOINTS = ['mob', 'tab', 'lap', 'desk'];
+
+// State prefixes
+const STATES = ['hover', 'focus', 'active', 'disabled'];
+
+// Layout keywords (no colon syntax)
+const LAYOUT_KEYWORDS = [
+  'flex', 'grid', 'block', 'inline', 'hidden',
+  'row', 'col', 'row-reverse', 'col-reverse',
+  'center', 'start', 'end', 'between', 'around', 'evenly',
+  'wrap', 'nowrap',
+  'absolute', 'relative', 'fixed', 'sticky'
+];
+
+/**
+ * Tokenize a single attribute value string
+ * @param {string} raw - Raw token string (e.g., "tab:p:big")
+ * @param {string} attrType - Attribute type: 'layout', 'space', or 'visual'
+ * @returns {Object} - Parsed token object
+ */
+export function tokenize(raw, attrType) {
+  const token = {
+    raw,
+    breakpoint: null,
+    state: null,
+    property: null,
+    value: null,
+    isArbitrary: false,
+    attrType
+  };
+
+  // Handle layout keywords (simple words like 'flex', 'center')
+  if (attrType === 'layout') {
+    // Check for z-index syntax (z:top, z:base)
+    if (raw.startsWith('z:')) {
+      token.property = 'z';
+      token.value = raw.substring(2);
+      return token;
+    }
+    
+    // Check for overflow syntax
+    if (raw.startsWith('overflow:')) {
+      token.property = 'overflow';
+      token.value = raw.substring(9);
+      return token;
+    }
+    
+    // Simple layout keyword
+    if (LAYOUT_KEYWORDS.includes(raw)) {
+      token.property = raw;
+      token.value = raw;
+      return token;
+    }
+    
+    // Check for responsive layout (e.g., tab:row)
+    const parts = raw.split(':');
+    if (parts.length === 2 && BREAKPOINTS.includes(parts[0])) {
+      token.breakpoint = parts[0];
+      token.property = parts[1];
+      token.value = parts[1];
+      return token;
+    }
+  }
+
+  // Handle space and visual attributes with colon syntax
+  const parts = raw.split(':');
+  
+  if (parts.length === 1) {
+    // Single value (shouldn't happen for space/visual, but handle it)
+    token.property = raw;
+    token.value = raw;
+    return token;
+  }
+  
+  let idx = 0;
+  
+  // Check for breakpoint prefix
+  if (BREAKPOINTS.includes(parts[0])) {
+    token.breakpoint = parts[0];
+    idx++;
+  }
+  
+  // Check for state prefix
+  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(':');
+    
+    // Check for arbitrary value in brackets
+    const arbitraryMatch = value.match(/^\[(.+)\]$/);
+    if (arbitraryMatch) {
+      token.value = arbitraryMatch[1].replace(/_/g, ' ');
+      token.isArbitrary = true;
+    } else {
+      token.value = value;
+    }
+  }
+  
+  return token;
+}
+
+/**
+ * Tokenize all values from parsed attributes
+ * @param {Object} parsed - Output from parser { layout: Set, space: Set, visual: Set }
+ * @returns {Array} - Array of token objects
+ */
+export function tokenizeAll(parsed) {
+  const tokens = [];
+  
+  for (const [attrType, values] of Object.entries(parsed)) {
+    for (const raw of values) {
+      tokens.push(tokenize(raw, attrType));
+    }
+  }
+  
+  return tokens;
+}
+
+export default { tokenize, tokenizeAll };

package/src/config/defaults.js

@@ -0,0 +1,137 @@
+/**
+ * SenangStart CSS - Default Configuration
+ * The "Natural Object" Scale using intuitive adjectives
+ */
+
+export const defaultConfig = {
+  // Input files to scan for attributes
+  content: [
+    './**/*.html',
+    './src/**/*.{html,jsx,tsx,vue,svelte}',
+    './pages/**/*.{html,jsx,tsx}',
+    './components/**/*.{html,jsx,tsx}'
+  ],
+
+  // Output configuration
+  output: {
+    css: './public/senangstart.css',
+    minify: false,
+    aiContext: './.cursorrules',
+    typescript: './types/senang.d.ts'
+  },
+
+  theme: {
+    // 1. SPACING: The "Natural Object" Scale
+    // Logic: How big is the object/gap physically?
+    spacing: {
+      'none':   '0px',      // No space
+      'tiny':   '4px',      // Pebble (Borders, offsets)
+      'small':  '8px',      // Matchbox (Grouping inside components)
+      'medium': '16px',     // Smartphone (Standard default)
+      'big':    '32px',     // Laptop (Separation between groups)
+      'giant':  '64px',     // Door (Layout sections)
+      'vast':   '128px'     // House (Hero sections)
+    },
+
+    // 2. RADIUS: Tactile Feel
+    radius: {
+      'none':   '0px',      // Sharp corners
+      'small':  '4px',      // Subtle nudge
+      'medium': '8px',      // Soft corner
+      'big':    '16px',     // Distinct curve
+      'round':  '9999px'    // Pill/Circle
+    },
+
+    // 3. SHADOWS: Depth Perception
+    shadow: {
+      'none':   'none',
+      'small':  '0 1px 2px rgba(0,0,0,0.05)',
+      'medium': '0 4px 6px rgba(0,0,0,0.1)',
+      'big':    '0 10px 15px rgba(0,0,0,0.15)',
+      'giant':  '0 25px 50px rgba(0,0,0,0.25)'
+    },
+
+    // 4. FONT SIZES: Reading Scale
+    fontSize: {
+      'tiny':   '12px',
+      'small':  '14px',
+      'medium': '16px',
+      'big':    '20px',
+      'giant':  '32px',
+      'vast':   '48px'
+    },
+
+    // 5. FONT WEIGHTS
+    fontWeight: {
+      'normal': '400',
+      'medium': '500',
+      'bold':   '700'
+    },
+
+    // 6. BREAKPOINTS: Device Intent
+    screens: {
+      'mob':  '480px',      // Mobile
+      'tab':  '768px',      // Tablet
+      'lap':  '1024px',     // Laptop
+      'desk': '1280px'      // Desktop
+    },
+
+    // 7. COLORS: SenangStart Brand Palette
+    colors: {
+      'white':     '#FFFFFF',
+      'black':     '#000000',
+      'grey':      '#6B7280',
+      'dark':      '#3E4A5D',     // Brand dark
+      'light':     '#DBEAFE',     // Brand light/secondary
+      'primary':   '#2563EB',     // Brand primary
+      'secondary': '#DBEAFE',     // Brand secondary
+      'success':   '#10B981',
+      'warning':   '#F59E0B',
+      'danger':    '#EF4444'
+    },
+
+    // 8. Z-INDEX: Stacking Order
+    zIndex: {
+      'base':   '0',
+      'low':    '10',
+      'mid':    '50',
+      'high':   '100',
+      'top':    '9999'
+    }
+  },
+
+  // Extend or override defaults
+  extend: {}
+};
+
+/**
+ * Merge user config with defaults
+ */
+export function mergeConfig(userConfig = {}) {
+  const merged = { ...defaultConfig };
+  
+  if (userConfig.content) {
+    merged.content = userConfig.content;
+  }
+  
+  if (userConfig.output) {
+    merged.output = { ...merged.output, ...userConfig.output };
+  }
+  
+  if (userConfig.theme) {
+    merged.theme = {
+      spacing: { ...merged.theme.spacing, ...userConfig.theme?.spacing },
+      radius: { ...merged.theme.radius, ...userConfig.theme?.radius },
+      shadow: { ...merged.theme.shadow, ...userConfig.theme?.shadow },
+      fontSize: { ...merged.theme.fontSize, ...userConfig.theme?.fontSize },
+      fontWeight: { ...merged.theme.fontWeight, ...userConfig.theme?.fontWeight },
+      screens: { ...merged.theme.screens, ...userConfig.theme?.screens },
+      colors: { ...merged.theme.colors, ...userConfig.theme?.colors },
+      zIndex: { ...merged.theme.zIndex, ...userConfig.theme?.zIndex }
+    };
+  }
+  
+  return merged;
+}
+
+export default defaultConfig;

package/src/utils/logger.js

@@ -0,0 +1,48 @@
+/**
+ * SenangStart CSS - Console Logger with Colors
+ */
+
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  dim: '\x1b[2m',
+  
+  // Foreground colors
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  magenta: '\x1b[35m',
+  cyan: '\x1b[36m',
+  white: '\x1b[37m'
+};
+
+const prefix = `${colors.magenta}${colors.bright}[senang]${colors.reset}`;
+
+export const logger = {
+  info: (msg) => {
+    console.log(`${prefix} ${colors.blue}ℹ${colors.reset} ${msg}`);
+  },
+  
+  success: (msg) => {
+    console.log(`${prefix} ${colors.green}✓${colors.reset} ${msg}`);
+  },
+  
+  warn: (msg) => {
+    console.log(`${prefix} ${colors.yellow}⚠${colors.reset} ${msg}`);
+  },
+  
+  error: (msg) => {
+    console.log(`${prefix} ${colors.red}✗${colors.reset} ${msg}`);
+  },
+  
+  build: (msg) => {
+    console.log(`${prefix} ${colors.cyan}⚡${colors.reset} ${msg}`);
+  },
+  
+  watch: (msg) => {
+    console.log(`${prefix} ${colors.green}👁${colors.reset} ${msg}`);
+  }
+};
+
+export default logger;

package/templates/senangstart.config.js

@@ -0,0 +1,35 @@
+/**
+ * SenangStart CSS Configuration
+ * @see https://senangstart.dev/docs/configuration
+ */
+
+export default {
+  // Files to scan for SenangStart attributes
+  content: [
+    './**/*.html',
+    './src/**/*.{html,jsx,tsx,vue,svelte}',
+    './components/**/*.{html,jsx,tsx}'
+  ],
+
+  // Output configuration
+  output: {
+    css: './public/senangstart.css',
+    minify: true,
+    aiContext: './.cursorrules',
+    typescript: './types/senang.d.ts'
+  },
+
+  // Theme customization
+  theme: {
+    // Override or extend the default spacing scale
+    // spacing: {
+    //   'huge': '256px'  // Add custom scale
+    // },
+
+    // Add custom colors
+    // colors: {
+    //   'brand': '#8B5CF6',
+    //   'accent': '#EC4899'
+    // }
+  }
+}