@bookklik/senangstart-css 0.2.10 → 0.2.12

package/docs/public/llms.txt

@@ -1247,28 +1247,28 @@ export default {
 **Syntax:** `visual="ring:[size]"`
 
 * `none`: No ring (`box-shadow: 0 0 0 0 transparent;`)
-* `thin`: Thin ring (1px) (`box-shadow: 0 0 0 1px var(--ring-color);`)
-* `regular`: Regular ring (2px) (`box-shadow: 0 0 0 2px var(--ring-color);`)
-* `small`: Small ring (4px) (`box-shadow: 0 0 0 4px var(--ring-color);`)
-* `medium`: Medium ring (6px) (`box-shadow: 0 0 0 6px var(--ring-color);`)
-* `big`: Big ring (8px) (`box-shadow: 0 0 0 8px var(--ring-color);`)
+* `thin`: Thin ring (1px)
+* `regular`: Regular ring (2px)
+* `small`: Small ring (4px)
+* `medium`: Medium ring (6px)
+* `big`: Big ring (8px)
 
 ## ring-color
 > Set ring color
 
 **Syntax:** `visual="ring-color:[color]"`
 
-* `primary`: Primary ring color (`--ring-color: var(--c-primary);`)
-* `blue-500`: Blue ring color (`--ring-color: var(--c-blue-500);`)
+* `primary`: Primary ring color (`--ss-ring-color: var(--c-primary);`)
+* `blue-500`: Blue ring color (`--ss-ring-color: var(--c-blue-500);`)
 
 ## ring-offset
 > Add gap between ring and element
 
 **Syntax:** `visual="ring-offset:[size]"`
 
-* `0`: No offset (`--ring-offset: 0px;`)
-* `2`: 2px offset (`--ring-offset: 2px;`)
-* `4`: 4px offset (`--ring-offset: 4px;`)
+* `0`: No offset (`--ss-ring-offset-width: 0px;`)
+* `2`: 2px offset (`--ss-ring-offset-width: 2px;`)
+* `4`: 4px offset (`--ss-ring-offset-width: 4px;`)
 
 ## scroll-behavior
 > Set scroll behavior

package/docs/reference/visual/ring-color.md

@@ -11,8 +11,8 @@ visual="ring-color:[color]"
 
 | Value | CSS Output | Description |
 |-------|------------|-------------|
-| `primary` | `--ring-color: var(--c-primary)` | Primary ring color |
-| `blue-500` | `--ring-color: var(--c-blue-500)` | Blue ring color |
+| `primary` | `--ss-ring-color: var(--c-primary)` | Primary ring color |
+| `blue-500` | `--ss-ring-color: var(--c-blue-500)` | Blue ring color |
 
 ## Examples
 

package/docs/reference/visual/ring-offset.md

@@ -11,9 +11,9 @@ visual="ring-offset:[size]"
 
 | Value | CSS Output | Description |
 |-------|------------|-------------|
-| `0` | `--ring-offset: 0px` | No offset |
-| `2` | `--ring-offset: 2px` | 2px offset |
-| `4` | `--ring-offset: 4px` | 4px offset |
+| `0` | `--ss-ring-offset-width: 0px` | No offset |
+| `2` | `--ss-ring-offset-width: 2px` | 2px offset |
+| `4` | `--ss-ring-offset-width: 4px` | 4px offset |
 
 ## Examples
 

package/docs/reference/visual/ring.md

@@ -12,11 +12,11 @@ visual="ring:[size]"
 | Value | CSS Output | Description |
 |-------|------------|-------------|
 | `none` | `box-shadow: 0 0 0 0 transparent` | No ring |
-| `thin` | `box-shadow: 0 0 0 1px var(--ring-color)` | Thin ring (1px) |
-| `regular` | `box-shadow: 0 0 0 2px var(--ring-color)` | Regular ring (2px) |
-| `small` | `box-shadow: 0 0 0 4px var(--ring-color)` | Small ring (4px) |
-| `medium` | `box-shadow: 0 0 0 6px var(--ring-color)` | Medium ring (6px) |
-| `big` | `box-shadow: 0 0 0 8px var(--ring-color)` | Big ring (8px) |
+| `thin` | `box-shadow: var(--ring-inset) 0 0 0 1px var(--ss-ring-color)` | Thin ring (1px) |
+| `regular` | `box-shadow: var(--ring-inset) 0 0 0 2px var(--ss-ring-color)` | Regular ring (2px) |
+| `small` | `box-shadow: var(--ring-inset) 0 0 0 4px var(--ss-ring-color)` | Small ring (4px) |
+| `medium` | `box-shadow: var(--ring-inset) 0 0 0 6px var(--ss-ring-color)` | Medium ring (6px) |
+| `big` | `box-shadow: var(--ring-inset) 0 0 0 8px var(--ss-ring-color)` | Big ring (8px) |
 
 ## Examples
 

package/package.json

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

package/src/cdn/tw-conversion-engine.js

@@ -330,7 +330,7 @@ const visualKeywords = {
 
 function getSpacing(value, exact) {
   // Check if it's already an arbitrary value with brackets
-  if (value.startsWith('[') && value.endsWith(']')) {
+  if (value && value.startsWith('[') && value.endsWith(']')) {
     return value; // Return as-is, don't double-wrap
   }
   if (exact) {
@@ -548,7 +548,7 @@ function convertClass(twClass, exact) {
     const side = marginMatch[1] ? "-" + marginMatch[1] : "";
     let val = getSpacing(marginMatch[2], exact);
     
-    if (isNeg) {
+    if (isNeg && val) {
       if (val.startsWith('[') && val.endsWith(']')) {
         // Handle arbitrary value: [10px] -> [-10px]
         const inner = val.slice(1, -1);
@@ -646,7 +646,7 @@ function convertClass(twClass, exact) {
   if (positionMatch) {
     const prop = positionMatch[1];
     let val = positionMatch[2];
-    if (val.startsWith('[') && val.endsWith(']')) {
+    if (val && val.startsWith('[') && val.endsWith(']')) {
       // Keep arbitrary values as-is
     } else if (fractionScale[val]) {
       // Map fractions to semantic names (1/2 → half, etc.)
@@ -668,7 +668,7 @@ function convertClass(twClass, exact) {
     let val = translateMatch[3];
     
     // Map fractions and values
-    if (val.startsWith('[') && val.endsWith(']')) {
+    if (val && val.startsWith('[') && val.endsWith(']')) {
       // Keep arbitrary values as-is, but handle negative
       if (isNeg) {
         const inner = val.slice(1, -1);

package/src/cli/commands/build.js

@@ -3,16 +3,17 @@
  * One-time compilation of CSS from source files
  */
 
-import { readFileSync, writeFileSync, mkdirSync, existsSync, readdirSync, statSync } from 'fs';
+import { writeFileSync, mkdirSync, existsSync, readdirSync, statSync } from 'fs';
 import { join, dirname, resolve } from 'path';
 import { defaultConfig, mergeConfig } from '../../config/defaults.js';
 import { parseSource } from '../../compiler/parser.js';
-import { tokenizeAll } from '../../compiler/tokenizer.js';
+import { tokenizeAll, tokenizeAllWithBatching } from '../../compiler/tokenizer.js';
 import { generateCSS, minifyCSS } from '../../compiler/generators/css.js';
 import { generateAIContext } from '../../compiler/generators/ai-context.js';
 import { generateTypeScript } from '../../compiler/generators/typescript.js';
 import logger from '../../utils/logger.js';
-import { validateThemeValue } from '../../utils/common.js';
+import { validateThemeValue, getMemoryUsage } from '../../utils/common.js';
+import { readMultipleFilesWithTimeout } from '../../utils/node-io.js';
 
 /**
  * Find files matching content patterns
@@ -119,31 +120,58 @@ export async function build(options = {}) {
   }
   
   logger.info(`Found ${files.length} source files`);
-  
-  // Parse all files
+
+  // Parse all files with timeout protection
   const allTokens = {
     layout: new Set(),
     space: new Set(),
     visual: new Set()
   };
-  
-  for (const filePath of files) {
+
+  let failedFiles = 0;
+  const fileReadResults = await readMultipleFilesWithTimeout(files, 5000);
+
+  for (const { path: filePath, content, error } of fileReadResults) {
+    if (error) {
+      logger.warn(`Skipping ${filePath}: ${error.message}`);
+      failedFiles++;
+      continue;
+    }
+
     try {
-      const content = readFileSync(filePath, 'utf-8');
       const parsed = parseSource(content);
-      
+
       parsed.layout.forEach(t => allTokens.layout.add(t));
       parsed.space.forEach(t => allTokens.space.add(t));
       parsed.visual.forEach(t => allTokens.visual.add(t));
     } catch (e) {
-      logger.warn(`Could not parse ${filePath}`);
+      logger.warn(`Could not parse ${filePath}: ${e.message}`);
+      failedFiles++;
     }
   }
-  
+
+  if (failedFiles > 0) {
+    logger.warn(`${failedFiles} file(s) failed to process`);
+  }
+
+  // Calculate total token count
+  const totalTokens = allTokens.layout.size + allTokens.space.size + allTokens.visual.size;
+  logger.info(`Found ${totalTokens} unique token values`);
+
+  // Check memory usage and decide whether to use batch processing
+  const currentMemory = getMemoryUsage();
+  const useBatching = totalTokens > 10000 || currentMemory > 200;
+
   // Tokenize
-  const tokens = tokenizeAll(allTokens);
-  
-  logger.info(`Extracted ${tokens.length} unique tokens`);
+  let tokens;
+  if (useBatching) {
+    logger.info('Using batch processing for memory protection');
+    tokens = await tokenizeAllWithBatching(allTokens, 1000);
+  } else {
+    tokens = tokenizeAll(allTokens);
+  }
+
+  logger.info(`Generated ${tokens.length} tokens`);
   
   // Check for invalid tokens
   const invalidTokens = tokens.filter(token => token.error);

package/src/cli/commands/dev.js

@@ -1,93 +1,157 @@
-/**
- * SenangStart CSS - Dev Command
- * Watch mode with live compilation
- */
-
-import chokidar from 'chokidar';
-import { build } from './build.js';
-import logger from '../../utils/logger.js';
-
-/**
- * Dev command handler - watches files and rebuilds on changes
- */
-export async function dev(options = {}) {
-  logger.watch('Starting development mode...');
-
-  // Build lock to prevent overlapping builds
-  let buildInProgress = false;
-  let pendingBuild = false;
-
-  // Initial build
-  await build(options);
-
-  // Watch patterns
-  const watchPatterns = [
-    './**/*.html',
-    './**/*.htm',
-    './src/**/*.{html,jsx,tsx,vue,svelte}',
-    './pages/**/*.{html,jsx,tsx}',
-    './components/**/*.{html,jsx,tsx,vue,svelte}'
-  ];
-
-  // Ignore patterns
-  const ignorePatterns = [
-    '**/node_modules/**',
-    '**/dist/**',
-    '**/.git/**',
-    '**/public/**'
-  ];
-
-  // Create watcher
-  const watcher = chokidar.watch(watchPatterns, {
-    ignored: ignorePatterns,
-    persistent: true,
-    ignoreInitial: true
-  });
-
-  // Debounce timer
-  let debounceTimer = null;
-
-  async function debouncedBuild() {
-    if (buildInProgress) {
-      pendingBuild = true;
-      return;
-    }
-
-    buildInProgress = true;
-
-    if (debounceTimer) {
-      clearTimeout(debounceTimer);
-    }
-
-    debounceTimer = setTimeout(async () => {
-      logger.watch('Change detected, rebuilding...');
-      await build(options);
-      buildInProgress = false;
-
-      // Handle pending build
-      if (pendingBuild) {
-        pendingBuild = false;
-        debouncedBuild();
-      }
-    }, 100);
-  }
-
-  // Watch events
-  watcher
-    .on('change', (path) => {
-      logger.info(`Changed: ${path}`);
-      debouncedBuild();
-    })
-    .on('add', (path) => {
-      logger.info(`Added: ${path}`);
-      debouncedBuild();
-    })
-    .on('unlink', (path) => {
-      logger.info(`Removed: ${path}`);
-      debouncedBuild();
-    });
-
-  logger.watch('Watching for changes... (Ctrl+C to stop)');
-}
-
-export default dev;
+/**
+ * SenangStart CSS - Dev Command
+ * Watch mode with live compilation
+ */
+
+import chokidar from 'chokidar';
+import { build } from './build.js';
+import logger from '../../utils/logger.js';
+
+/**
+ * Dev command handler - watches files and rebuilds on changes
+ */
+export async function dev(options = {}) {
+  logger.watch('Starting development mode...');
+
+  // Error tracking for cooldown mechanism
+  let consecutiveErrors = 0;
+  let lastErrorTime = 0;
+  const MAX_CONSECUTIVE_ERRORS = 5;
+  const COOLDOWN_DURATION = 30000; // 30 seconds
+
+  // Build lock to prevent overlapping builds
+  let buildInProgress = false;
+  let pendingBuild = false;
+
+  async function runBuild() {
+    // Check if we're in cooldown
+    if (consecutiveErrors >= MAX_CONSECUTIVE_ERRORS) {
+      const timeSinceLastError = Date.now() - lastErrorTime;
+      if (timeSinceLastError < COOLDOWN_DURATION) {
+        const cooldownRemaining = Math.ceil((COOLDOWN_DURATION - timeSinceLastError) / 1000);
+        logger.warn(`Cooldown active: ${cooldownRemaining}s remaining. Skipping build.`);
+        return;
+      }
+      // Cooldown expired, reset error count
+      consecutiveErrors = 0;
+    }
+
+    try {
+      await build(options);
+      // Reset error count on successful build
+      consecutiveErrors = 0;
+    } catch (error) {
+      consecutiveErrors++;
+      lastErrorTime = Date.now();
+      logger.error(`Build failed (${consecutiveErrors}/${MAX_CONSECUTIVE_ERRORS}): ${error.message}`);
+
+      // Enter cooldown if max errors reached
+      if (consecutiveErrors >= MAX_CONSECUTIVE_ERRORS) {
+        logger.warn(`Maximum consecutive errors (${MAX_CONSECUTIVE_ERRORS}) reached.`);
+        logger.warn(`Entering ${COOLDOWN_DURATION / 1000}s cooldown to prevent resource exhaustion.`);
+      }
+    }
+  }
+
+  // Initial build
+  await runBuild();
+
+  function createWatcher() {
+    // Watch patterns
+    const watchPatterns = [
+      './**/*.html',
+      './**/*.htm',
+      './src/**/*.{html,jsx,tsx,vue,svelte}',
+      './pages/**/*.{html,jsx,tsx}',
+      './components/**/*.{html,jsx,tsx,vue,svelte}'
+    ];
+
+    // Ignore patterns
+    const ignorePatterns = [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/.git/**',
+      '**/public/**'
+    ];
+
+    // Create watcher
+    const watcher = chokidar.watch(watchPatterns, {
+      ignored: ignorePatterns,
+      persistent: true,
+      ignoreInitial: true
+    });
+
+    // Handle watcher errors
+    watcher.on('error', (error) => {
+      logger.error(`Watcher error: ${error.message}`);
+      consecutiveErrors++;
+      lastErrorTime = Date.now();
+
+      // Try to restart watcher after error
+      logger.info('Attempting to restart watcher...');
+      try {
+        watcher.close();
+        setTimeout(() => {
+          const newWatcher = createWatcher();
+          Object.assign(watcher, newWatcher);
+          logger.success('Watcher restarted successfully');
+        }, 1000);
+      } catch (restartError) {
+        logger.error(`Failed to restart watcher: ${restartError.message}`);
+      }
+    });
+
+    return watcher;
+  }
+
+  // Initialize watcher
+  const watcher = createWatcher();
+
+  // Debounce timer
+  let debounceTimer = null;
+
+  async function debouncedBuild() {
+    if (buildInProgress) {
+      pendingBuild = true;
+      return;
+    }
+
+    buildInProgress = true;
+
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+
+    debounceTimer = setTimeout(async () => {
+      logger.watch('Change detected, rebuilding...');
+      await runBuild();
+      buildInProgress = false;
+
+      // Handle pending build
+      if (pendingBuild) {
+        pendingBuild = false;
+        debouncedBuild();
+      }
+    }, 100);
+  }
+
+  // Watch events
+  watcher
+    .on('change', (path) => {
+      logger.info(`Changed: ${path}`);
+      debouncedBuild();
+    })
+    .on('add', (path) => {
+      logger.info(`Added: ${path}`);
+      debouncedBuild();
+    })
+    .on('unlink', (path) => {
+      logger.info(`Removed: ${path}`);
+      debouncedBuild();
+    });
+
+  logger.watch('Watching for changes... (Ctrl+C to stop)');
+}
+
+export default dev;
+