pulse-js-framework 1.7.25 → 1.7.29

package/README.md

@@ -48,6 +48,27 @@ npm install
 npm run dev
 ```
 
+### Or from a template
+
+Create projects from built-in example apps:
+
+```bash
+# E-commerce app (products, cart, checkout)
+npx pulse-js-framework create my-shop --ecommerce
+
+# Todo app (filtering, local storage)
+npx pulse-js-framework create my-todos --todo
+
+# Blog (posts, sidebar, navigation)
+npx pulse-js-framework create my-blog --blog
+
+# Chat app (messages, users, emoji picker)
+npx pulse-js-framework create my-chat --chat
+
+# Dashboard (data visualization)
+npx pulse-js-framework create my-dashboard --dashboard
+```
+
 ### Or use directly
 
 ```javascript
@@ -139,6 +160,11 @@ See [Pulse DSL documentation](docs/pulse-dsl.md) for full syntax reference.
 # Project Creation
 pulse create <name>              # Create new project
 pulse create <name> --typescript # Create TypeScript project
+pulse create <name> --ecommerce  # Create from E-Commerce template
+pulse create <name> --todo       # Create from Todo App template
+pulse create <name> --blog       # Create from Blog template
+pulse create <name> --chat       # Create from Chat template
+pulse create <name> --dashboard  # Create from Dashboard template
 pulse init --typescript          # Initialize in current directory
 
 # Development

package/cli/help.js

@@ -29,18 +29,29 @@ Creates a new Pulse project with a complete starter template including:
 - Project structure (src/, public/)
 - Vite configuration for development and building
 - Sample App.pulse component with counter example
-- Package.json with all necessary scripts`,
+- Package.json with all necessary scripts
+
+You can also create projects from built-in example templates using
+the template flags (--ecommerce, --todo, --blog, --chat, --dashboard).`,
     arguments: [
       { name: '<name>', description: 'Name of the project directory to create' }
     ],
     options: [
       { flag: '--typescript, --ts', description: 'Create a TypeScript project with tsconfig.json' },
-      { flag: '--minimal', description: 'Create minimal project structure without extras' }
+      { flag: '--minimal', description: 'Create minimal project structure without extras' },
+      { flag: '--ecommerce', description: 'Use E-Commerce template (products, cart, checkout)' },
+      { flag: '--todo', description: 'Use Todo App template (filtering, local storage)' },
+      { flag: '--blog', description: 'Use Blog template (posts, sidebar, navigation)' },
+      { flag: '--chat', description: 'Use Chat template (messages, users, emoji picker)' },
+      { flag: '--dashboard', description: 'Use Dashboard template (data visualization)' }
     ],
     examples: [
       { cmd: 'pulse create my-app', desc: 'Create a new JavaScript project' },
       { cmd: 'pulse create my-app --typescript', desc: 'Create a new TypeScript project' },
-      { cmd: 'pulse create my-app --minimal', desc: 'Create a minimal project' }
+      { cmd: 'pulse create my-app --minimal', desc: 'Create a minimal project' },
+      { cmd: 'pulse create my-shop --ecommerce', desc: 'Create from E-Commerce template' },
+      { cmd: 'pulse create my-todos --todo', desc: 'Create from Todo App template' },
+      { cmd: 'pulse create my-blog --blog', desc: 'Create from Blog template' }
     ]
   },
 

package/cli/index.js

@@ -6,7 +6,7 @@
 
 import { fileURLToPath } from 'url';
 import { dirname, join, resolve, relative } from 'path';
-import { existsSync, mkdirSync, writeFileSync, readFileSync, readdirSync, watch } from 'fs';
+import { existsSync, mkdirSync, writeFileSync, readFileSync, readdirSync, watch, cpSync, statSync } from 'fs';
 import { log } from './logger.js';
 import { findPulseFiles, parseArgs } from './utils/file-utils.js';
 import { runHelp } from './help.js';
@@ -18,6 +18,15 @@ const __dirname = dirname(__filename);
 const pkg = JSON.parse(readFileSync(join(__dirname, '..', 'package.json'), 'utf-8'));
 const VERSION = pkg.version;
 
+// Available example templates
+const TEMPLATES = {
+  ecommerce: { name: 'E-Commerce', description: 'Shopping cart with products, checkout, and cart management' },
+  todo: { name: 'Todo App', description: 'Classic todo list with filtering and local storage' },
+  blog: { name: 'Blog', description: 'Blogging platform with posts, sidebar, and navigation' },
+  chat: { name: 'Chat', description: 'Real-time chat with messages, users, and emoji picker' },
+  dashboard: { name: 'Dashboard', description: 'Analytics dashboard with data visualization' }
+};
+
 // Command handlers
 const commands = {
   help: showHelp,
@@ -191,6 +200,87 @@ function showVersion() {
   log.info(`Pulse Framework v${VERSION}`);
 }
 
+/**
+ * Copy example template to project directory
+ * Transforms imports from /runtime/index.js to pulse-js-framework/runtime
+ * @param {string} templateName - Name of the template (ecommerce, todo, blog, chat, dashboard)
+ * @param {string} projectPath - Destination project path
+ * @param {string} projectName - Name of the project
+ */
+function copyExampleTemplate(templateName, projectPath, projectName) {
+  const examplesDir = join(__dirname, '..', 'examples');
+  const templateDir = join(examplesDir, templateName);
+
+  if (!existsSync(templateDir)) {
+    throw new Error(`Template "${templateName}" not found at ${templateDir}`);
+  }
+
+  /**
+   * Recursively copy directory, transforming JS files
+   */
+  function copyDir(src, dest) {
+    if (!existsSync(dest)) {
+      mkdirSync(dest, { recursive: true });
+    }
+
+    const entries = readdirSync(src, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const srcPath = join(src, entry.name);
+      const destPath = join(dest, entry.name);
+
+      // Skip node_modules and dist directories
+      if (entry.name === 'node_modules' || entry.name === 'dist') {
+        continue;
+      }
+
+      if (entry.isDirectory()) {
+        copyDir(srcPath, destPath);
+      } else {
+        // Read file content
+        let content = readFileSync(srcPath, 'utf-8');
+
+        // Transform imports in JS files
+        if (entry.name.endsWith('.js') || entry.name.endsWith('.ts')) {
+          // Transform /runtime/index.js imports to pulse-js-framework/runtime
+          content = content.replace(
+            /from\s+['"]\/runtime\/index\.js['"]/g,
+            "from 'pulse-js-framework/runtime'"
+          );
+          content = content.replace(
+            /from\s+['"]\/runtime['"]/g,
+            "from 'pulse-js-framework/runtime'"
+          );
+          // Transform other runtime submodule imports
+          content = content.replace(
+            /from\s+['"]\/runtime\/([^'"]+)['"]/g,
+            "from 'pulse-js-framework/runtime/$1'"
+          );
+        }
+
+        writeFileSync(destPath, content);
+      }
+    }
+  }
+
+  // Copy src directory
+  const srcDir = join(templateDir, 'src');
+  if (existsSync(srcDir)) {
+    copyDir(srcDir, join(projectPath, 'src'));
+  }
+
+  // Copy index.html if exists
+  const indexHtml = join(templateDir, 'index.html');
+  if (existsSync(indexHtml)) {
+    let content = readFileSync(indexHtml, 'utf-8');
+    // Update title to project name
+    content = content.replace(/<title>[^<]*<\/title>/, `<title>${projectName}</title>`);
+    writeFileSync(join(projectPath, 'index.html'), content);
+  }
+
+  return true;
+}
+
 /**
  * Create a new project
  */
@@ -200,7 +290,16 @@ async function createProject(args) {
 
   if (!projectName) {
     log.error('Please provide a project name.');
-    log.info('Usage: pulse create <project-name>');
+    log.info('Usage: pulse create <project-name> [options]');
+    log.info('');
+    log.info('Options:');
+    log.info('  --typescript, --ts    Create TypeScript project');
+    log.info('  --minimal             Create minimal project');
+    log.info('');
+    log.info('Templates (use existing example apps):');
+    for (const [key, info] of Object.entries(TEMPLATES)) {
+      log.info(`  --${key.padEnd(12)} ${info.description}`);
+    }
     process.exit(1);
   }
 
@@ -214,6 +313,93 @@ async function createProject(args) {
   const useTypescript = options.typescript || options.ts || false;
   const minimal = options.minimal || false;
 
+  // Check for template options
+  let selectedTemplate = null;
+  for (const templateName of Object.keys(TEMPLATES)) {
+    if (options[templateName]) {
+      selectedTemplate = templateName;
+      break;
+    }
+  }
+
+  // If a template is selected, use the template-based creation
+  if (selectedTemplate) {
+    const templateInfo = TEMPLATES[selectedTemplate];
+    log.info(`Creating new Pulse project: ${projectName} (${templateInfo.name} template)`);
+
+    // Create project directory
+    mkdirSync(projectPath);
+    mkdirSync(join(projectPath, 'public'));
+
+    // Copy template files
+    try {
+      copyExampleTemplate(selectedTemplate, projectPath, projectName);
+      log.info(`  ✓ Copied ${templateInfo.name} template files`);
+    } catch (err) {
+      log.error(`Failed to copy template: ${err.message}`);
+      process.exit(1);
+    }
+
+    // Create package.json for template project
+    const packageJson = {
+      name: projectName,
+      version: '0.1.0',
+      type: 'module',
+      scripts: {
+        dev: 'pulse dev',
+        build: 'pulse build',
+        preview: 'vite preview',
+        test: 'pulse test',
+        lint: 'pulse lint'
+      },
+      dependencies: {
+        'pulse-js-framework': '^1.0.0'
+      },
+      devDependencies: {
+        vite: '^5.0.0'
+      }
+    };
+
+    writeFileSync(
+      join(projectPath, 'package.json'),
+      JSON.stringify(packageJson, null, 2)
+    );
+
+    // Create vite.config.js
+    const viteConfig = `import { defineConfig } from 'vite';
+import pulse from 'pulse-js-framework/vite';
+
+export default defineConfig({
+  plugins: [pulse()]
+});
+`;
+    writeFileSync(join(projectPath, 'vite.config.js'), viteConfig);
+
+    // Create .gitignore
+    const gitignore = `node_modules
+dist
+.DS_Store
+*.local
+`;
+    writeFileSync(join(projectPath, '.gitignore'), gitignore);
+
+    log.info(`
+Project created successfully!
+
+Next steps:
+  cd ${projectName}
+  npm install
+  npm run dev
+
+Template: ${templateInfo.name}
+  ${templateInfo.description}
+
+Happy coding with Pulse!
+    `);
+    return;
+  }
+
+  // Standard project creation (no template)
   log.info(`Creating new Pulse project: ${projectName}${useTypescript ? ' (TypeScript)' : ''}`);
 
   // Create project structure

package/compiler/lexer.js

@@ -85,13 +85,24 @@ export const TokenType = {
   PLUSPLUS: 'PLUSPLUS', // ++
   MINUSMINUS: 'MINUSMINUS', // --
   QUESTION: 'QUESTION', // ?
+  NULLISH: 'NULLISH', // ??
+  OPTIONAL_CHAIN: 'OPTIONAL_CHAIN', // ?.
   ARROW: 'ARROW',     // =>
   SPREAD: 'SPREAD',   // ...
+  // Logical/Nullish Assignment Operators (ES2021)
+  OR_ASSIGN: 'OR_ASSIGN',       // ||=
+  AND_ASSIGN: 'AND_ASSIGN',     // &&=
+  NULLISH_ASSIGN: 'NULLISH_ASSIGN', // ??=
+  PLUS_ASSIGN: 'PLUS_ASSIGN',   // +=
+  MINUS_ASSIGN: 'MINUS_ASSIGN', // -=
+  STAR_ASSIGN: 'STAR_ASSIGN',   // *=
+  SLASH_ASSIGN: 'SLASH_ASSIGN', // /=
 
   // Literals
   STRING: 'STRING',
   TEMPLATE: 'TEMPLATE', // Template literal `...`
   NUMBER: 'NUMBER',
+  BIGINT: 'BIGINT',     // BigInt literal 123n
   TRUE: 'TRUE',
   FALSE: 'FALSE',
   NULL: 'NULL',
@@ -365,22 +376,96 @@ export class Lexer {
 
   /**
    * Read a number literal
+   * Supports:
+   * - Integers: 42
+   * - Decimals: 3.14
+   * - Scientific notation: 1e10, 1.5e-3
+   * - Numeric separators (ES2021): 1_000_000, 0xFF_FF_FF
+   * - BigInt literals (ES2020): 123n
+   * - Hex: 0xFF, Binary: 0b101, Octal: 0o777
    */
   readNumber() {
     const startLine = this.line;
     const startColumn = this.column;
     let value = '';
+    let rawValue = '';
+    let isBigInt = false;
+
+    // Check for hex, binary, or octal prefixes
+    if (this.current() === '0') {
+      rawValue += this.advance();
+      value += '0';
+
+      if (this.current() === 'x' || this.current() === 'X') {
+        // Hexadecimal
+        rawValue += this.advance();
+        value += 'x';
+        while (!this.isEOF() && /[0-9a-fA-F_]/.test(this.current())) {
+          const char = this.advance();
+          rawValue += char;
+          if (char !== '_') value += char; // Skip separators in actual value
+        }
+        // Check for BigInt suffix
+        if (this.current() === 'n') {
+          rawValue += this.advance();
+          isBigInt = true;
+        }
+        if (isBigInt) {
+          return new Token(TokenType.BIGINT, value + 'n', startLine, startColumn, rawValue);
+        }
+        return new Token(TokenType.NUMBER, parseInt(value, 16), startLine, startColumn, rawValue);
+      } else if (this.current() === 'b' || this.current() === 'B') {
+        // Binary
+        rawValue += this.advance();
+        value += 'b';
+        while (!this.isEOF() && /[01_]/.test(this.current())) {
+          const char = this.advance();
+          rawValue += char;
+          if (char !== '_') value += char;
+        }
+        if (this.current() === 'n') {
+          rawValue += this.advance();
+          isBigInt = true;
+        }
+        if (isBigInt) {
+          return new Token(TokenType.BIGINT, value + 'n', startLine, startColumn, rawValue);
+        }
+        return new Token(TokenType.NUMBER, parseInt(value.slice(2), 2), startLine, startColumn, rawValue);
+      } else if (this.current() === 'o' || this.current() === 'O') {
+        // Octal
+        rawValue += this.advance();
+        value += 'o';
+        while (!this.isEOF() && /[0-7_]/.test(this.current())) {
+          const char = this.advance();
+          rawValue += char;
+          if (char !== '_') value += char;
+        }
+        if (this.current() === 'n') {
+          rawValue += this.advance();
+          isBigInt = true;
+        }
+        if (isBigInt) {
+          return new Token(TokenType.BIGINT, value + 'n', startLine, startColumn, rawValue);
+        }
+        return new Token(TokenType.NUMBER, parseInt(value.slice(2), 8), startLine, startColumn, rawValue);
+      }
+    }
 
-    // Integer part
-    while (!this.isEOF() && /[0-9]/.test(this.current())) {
-      value += this.advance();
+    // Regular decimal number (or continuation of '0')
+    while (!this.isEOF() && /[0-9_]/.test(this.current())) {
+      const char = this.advance();
+      rawValue += char;
+      if (char !== '_') value += char;
     }
 
     // Decimal part
     if (this.current() === '.' && /[0-9]/.test(this.peek())) {
-      value += this.advance(); // .
-      while (!this.isEOF() && /[0-9]/.test(this.current())) {
-        value += this.advance();
+      rawValue += this.advance();
+      value += '.';
+      while (!this.isEOF() && /[0-9_]/.test(this.current())) {
+        const char = this.advance();
+        rawValue += char;
+        if (char !== '_') value += char;
       }
     }
 
@@ -394,18 +479,32 @@ export class Lexer {
                           ((nextChar === '+' || nextChar === '-') && /[0-9]/.test(nextNextChar));
 
       if (isScientific) {
-        value += this.advance(); // consume 'e' or 'E'
+        rawValue += this.advance();
+        value += 'e';
         if (this.current() === '+' || this.current() === '-') {
-          value += this.advance();
+          const sign = this.advance();
+          rawValue += sign;
+          value += sign;
         }
-        while (!this.isEOF() && /[0-9]/.test(this.current())) {
-          value += this.advance();
+        while (!this.isEOF() && /[0-9_]/.test(this.current())) {
+          const char = this.advance();
+          rawValue += char;
+          if (char !== '_') value += char;
         }
       }
       // If not scientific notation, leave 'e' for the next token (e.g., 'em' unit)
     }
 
-    return new Token(TokenType.NUMBER, parseFloat(value), startLine, startColumn, value);
+    // Check for BigInt suffix 'n'
+    if (this.current() === 'n') {
+      rawValue += this.advance();
+      isBigInt = true;
+    }
+
+    if (isBigInt) {
+      return new Token(TokenType.BIGINT, value + 'n', startLine, startColumn, rawValue);
+    }
+    return new Token(TokenType.NUMBER, parseFloat(value), startLine, startColumn, rawValue);
   }
 
   /**
@@ -586,6 +685,9 @@ export class Lexer {
           if (this.current() === '+') {
             this.advance();
             this.tokens.push(new Token(TokenType.PLUSPLUS, '++', startLine, startColumn));
+          } else if (this.current() === '=') {
+            this.advance();
+            this.tokens.push(new Token(TokenType.PLUS_ASSIGN, '+=', startLine, startColumn));
           } else {
             this.tokens.push(new Token(TokenType.PLUS, '+', startLine, startColumn));
           }
@@ -595,17 +697,30 @@ export class Lexer {
           if (this.current() === '-') {
             this.advance();
             this.tokens.push(new Token(TokenType.MINUSMINUS, '--', startLine, startColumn));
+          } else if (this.current() === '=') {
+            this.advance();
+            this.tokens.push(new Token(TokenType.MINUS_ASSIGN, '-=', startLine, startColumn));
           } else {
             this.tokens.push(new Token(TokenType.MINUS, '-', startLine, startColumn));
           }
           continue;
         case '*':
           this.advance();
-          this.tokens.push(new Token(TokenType.STAR, '*', startLine, startColumn));
+          if (this.current() === '=') {
+            this.advance();
+            this.tokens.push(new Token(TokenType.STAR_ASSIGN, '*=', startLine, startColumn));
+          } else {
+            this.tokens.push(new Token(TokenType.STAR, '*', startLine, startColumn));
+          }
           continue;
         case '/':
           this.advance();
-          this.tokens.push(new Token(TokenType.SLASH, '/', startLine, startColumn));
+          if (this.current() === '=') {
+            this.advance();
+            this.tokens.push(new Token(TokenType.SLASH_ASSIGN, '/=', startLine, startColumn));
+          } else {
+            this.tokens.push(new Token(TokenType.SLASH, '/', startLine, startColumn));
+          }
           continue;
         case '=':
           this.advance();
@@ -626,7 +741,25 @@ export class Lexer {
           continue;
         case '?':
           this.advance();
-          this.tokens.push(new Token(TokenType.QUESTION, '?', startLine, startColumn));
+          if (this.current() === '?') {
+            this.advance();
+            if (this.current() === '=') {
+              this.advance();
+              this.tokens.push(new Token(TokenType.NULLISH_ASSIGN, '??=', startLine, startColumn));
+            } else {
+              this.tokens.push(new Token(TokenType.NULLISH, '??', startLine, startColumn));
+            }
+          } else if (this.current() === '.') {
+            // Optional chaining ?. but only if not followed by a digit (to avoid ?.5)
+            if (!/[0-9]/.test(this.peek())) {
+              this.advance();
+              this.tokens.push(new Token(TokenType.OPTIONAL_CHAIN, '?.', startLine, startColumn));
+            } else {
+              this.tokens.push(new Token(TokenType.QUESTION, '?', startLine, startColumn));
+            }
+          } else {
+            this.tokens.push(new Token(TokenType.QUESTION, '?', startLine, startColumn));
+          }
           continue;
         case '%':
           this.advance();
@@ -668,7 +801,12 @@ export class Lexer {
           this.advance();
           if (this.current() === '&') {
             this.advance();
-            this.tokens.push(new Token(TokenType.AND, '&&', startLine, startColumn));
+            if (this.current() === '=') {
+              this.advance();
+              this.tokens.push(new Token(TokenType.AND_ASSIGN, '&&=', startLine, startColumn));
+            } else {
+              this.tokens.push(new Token(TokenType.AND, '&&', startLine, startColumn));
+            }
           } else {
             // Single & is the CSS parent selector
             this.tokens.push(new Token(TokenType.AMPERSAND, '&', startLine, startColumn));
@@ -678,7 +816,12 @@ export class Lexer {
           this.advance();
           if (this.current() === '|') {
             this.advance();
-            this.tokens.push(new Token(TokenType.OR, '||', startLine, startColumn));
+            if (this.current() === '=') {
+              this.advance();
+              this.tokens.push(new Token(TokenType.OR_ASSIGN, '||=', startLine, startColumn));
+            } else {
+              this.tokens.push(new Token(TokenType.OR, '||', startLine, startColumn));
+            }
           }
           continue;
       }

package/compiler/transformer/expressions.js

@@ -169,8 +169,13 @@ export function transformExpressionString(transformer, exprStr) {
       `${stateVar}.get()`
     );
   }
-  // Add optional chaining after function calls followed by property access
-  result = result.replace(/(\w+\([^)]*\))\.(\w)/g, '$1?.$2');
+
+  // NOTE: Removed aggressive optional chaining regex that was adding ?.
+  // after ALL function calls. This caused false positives like:
+  // "User.name" -> "User?.name" in string literals.
+  // Optional chaining should be explicitly written by developers, not auto-added.
+  // The lexer now properly tokenizes ?. as OPTIONAL_CHAIN for explicit usage.
+
   return result;
 }
 

package/compiler/transformer/style.js

@@ -63,6 +63,49 @@ function isKeyframesRule(selector) {
   return selector.trim().startsWith('@keyframes');
 }
 
+/**
+ * Check if selector is @layer (CSS Cascade Layers)
+ * @param {string} selector - CSS selector
+ * @returns {boolean}
+ */
+function isLayerRule(selector) {
+  return selector.trim().startsWith('@layer');
+}
+
+/**
+ * Check if selector is @supports (CSS Feature Queries)
+ * @param {string} selector - CSS selector
+ * @returns {boolean}
+ */
+function isSupportsRule(selector) {
+  return selector.trim().startsWith('@supports');
+}
+
+/**
+ * Check if selector is @container (CSS Container Queries)
+ * @param {string} selector - CSS selector
+ * @returns {boolean}
+ */
+function isContainerRule(selector) {
+  return selector.trim().startsWith('@container');
+}
+
+/**
+ * Check if selector is a conditional group at-rule that can contain nested rules
+ * These include @media, @supports, @container, @layer
+ * @param {string} selector - CSS selector
+ * @returns {boolean}
+ */
+function isConditionalGroupAtRule(selector) {
+  const trimmed = selector.trim();
+  return trimmed.startsWith('@media') ||
+         trimmed.startsWith('@supports') ||
+         trimmed.startsWith('@container') ||
+         trimmed.startsWith('@layer') ||
+         trimmed.startsWith('@scope') ||
+         trimmed.startsWith('@document');
+}
+
 /**
  * Check if a selector is a keyframe step (from, to, or percentage)
  * @param {string} selector - CSS selector
@@ -76,7 +119,7 @@ function isKeyframeStep(selector) {
 /**
  * Flatten nested CSS rules by combining selectors
  * Handles CSS nesting by prepending parent selector to nested rules
- * Special handling for @-rules (media queries, keyframes, etc.)
+ * Special handling for @-rules (media queries, keyframes, supports, container, layer, etc.)
  * @param {Object} transformer - Transformer instance
  * @param {Object} rule - CSS rule from AST
  * @param {string} parentSelector - Parent selector to prepend (empty for top-level)
@@ -90,27 +133,96 @@ export function flattenStyleRule(transformer, rule, parentSelector, output, atRu
   // Check if this is an @-rule
   if (isAtRule(selector)) {
     const isKeyframes = isKeyframesRule(selector);
+    const isLayer = isLayerRule(selector);
+    const isConditionalGroup = isConditionalGroupAtRule(selector);
 
     // @keyframes should be output as a complete block, not flattened
     if (isKeyframes) {
       const lines = [];
-      lines.push(`  ${selector} {`);
-
-      // Output all keyframe steps
-      for (const nested of rule.nestedRules) {
-        lines.push(`    ${nested.selector} {`);
-        for (const prop of nested.properties) {
-          lines.push(`      ${prop.name}: ${prop.value};`);
+      // Wrap in existing @-rule if present
+      if (atRuleWrapper) {
+        lines.push(`  ${atRuleWrapper} {`);
+        lines.push(`    ${selector} {`);
+        for (const nested of rule.nestedRules) {
+          lines.push(`      ${nested.selector} {`);
+          for (const prop of nested.properties) {
+            lines.push(`        ${prop.name}: ${prop.value};`);
+          }
+          lines.push('      }');
         }
         lines.push('    }');
+        lines.push('  }');
+      } else {
+        lines.push(`  ${selector} {`);
+        for (const nested of rule.nestedRules) {
+          lines.push(`    ${nested.selector} {`);
+          for (const prop of nested.properties) {
+            lines.push(`      ${prop.name}: ${prop.value};`);
+          }
+          lines.push('    }');
+        }
+        lines.push('  }');
+      }
+      output.push(lines.join('\n'));
+      return;
+    }
+
+    // @layer - output with its content, support both named layers and anonymous layer blocks
+    if (isLayer) {
+      // Check if it's just a layer statement (@layer name;) or a layer block (@layer name { ... })
+      if (rule.nestedRules.length === 0 && rule.properties.length === 0) {
+        // Layer order statement: @layer base, components, utilities;
+        output.push(`  ${selector};`);
+        return;
       }
 
-      lines.push('  }');
+      // Layer block with content
+      const lines = [];
+
+      if (atRuleWrapper) {
+        lines.push(`  ${atRuleWrapper} {`);
+        lines.push(`    ${selector} {`);
+      } else {
+        lines.push(`  ${selector} {`);
+      }
+
+      // Process nested rules within the layer
+      const nestedOutput = [];
+      for (const nested of rule.nestedRules) {
+        flattenStyleRule(transformer, nested, '', nestedOutput, '', false);
+      }
+
+      // Add nested output with proper indentation
+      const baseIndent = atRuleWrapper ? '    ' : '  ';
+      for (const nestedRule of nestedOutput) {
+        // Adjust indentation for nested rules
+        const reindented = nestedRule.split('\n').map(line => baseIndent + line.trim()).join('\n');
+        lines.push(reindented);
+      }
+
+      if (atRuleWrapper) {
+        lines.push('    }');
+        lines.push('  }');
+      } else {
+        lines.push('  }');
+      }
       output.push(lines.join('\n'));
       return;
     }
 
-    // Other @-rules (@media, @supports) wrap their nested rules
+    // Conditional group @-rules (@media, @supports, @container) wrap their nested rules
+    // They can be nested inside each other
+    if (isConditionalGroup) {
+      // Combine with existing wrapper if present
+      const combinedWrapper = atRuleWrapper ? `${atRuleWrapper} { ${selector}` : selector;
+
+      for (const nested of rule.nestedRules) {
+        flattenStyleRule(transformer, nested, parentSelector, output, combinedWrapper, false);
+      }
+      return;
+    }
+
+    // Other @-rules (unknown) - output as-is with nested content
     for (const nested of rule.nestedRules) {
       flattenStyleRule(transformer, nested, '', output, selector, false);
     }
@@ -172,6 +284,9 @@ export function flattenStyleRule(transformer, rule, parentSelector, output, atRu
  * .container -> .container.p123abc
  * div -> div.p123abc
  * .a .b -> .a.p123abc .b.p123abc
+ * .a > .b -> .a.p123abc > .b.p123abc (preserves combinators)
+ * .a + .b -> .a.p123abc + .b.p123abc
+ * .a ~ .b -> .a.p123abc ~ .b.p123abc
  * @media (max-width: 900px) -> @media (max-width: 900px) (unchanged)
  * :root, body, *, html -> unchanged (global selectors)
  * @param {Object} transformer - Transformer instance
@@ -196,31 +311,81 @@ export function scopeStyleSelector(transformer, selector) {
     return selector;
   }
 
+  // CSS combinators that should be preserved
+  const combinators = new Set(['>', '+', '~']);
+
   // Split by comma for multiple selectors
   return selector.split(',').map(part => {
     part = part.trim();
 
-    // Split by space for descendant selectors
-    return part.split(/\s+/).map(segment => {
+    // Split by whitespace but preserve combinators
+    // This regex splits on whitespace but keeps combinators as separate tokens
+    const tokens = part.split(/(\s*[>+~]\s*|\s+)/).filter(t => t.trim());
+    const result = [];
+
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i].trim();
+
+      // Check if this is a combinator
+      if (combinators.has(token)) {
+        result.push(` ${token} `);
+        continue;
+      }
+
+      // Skip empty tokens
+      if (!token) continue;
+
       // Check if this segment is a global selector
-      const segmentBase = segment.split(/[.#\[]/)[0];
-      if (globalSelectors.has(segmentBase) || globalSelectors.has(segment)) {
-        return segment;
+      const segmentBase = token.split(/[.#\[]/)[0];
+      if (globalSelectors.has(segmentBase) || globalSelectors.has(token)) {
+        result.push(token);
+        continue;
+      }
+
+      // Handle :has(), :is(), :where(), :not() - scope selectors inside
+      if (token.includes(':has(') || token.includes(':is(') ||
+          token.includes(':where(') || token.includes(':not(')) {
+        result.push(scopePseudoClassSelector(transformer, token));
+        continue;
       }
 
       // Skip pseudo-elements and pseudo-classes at the end
-      const pseudoMatch = segment.match(/^([^:]+)(:.+)?$/);
+      const pseudoMatch = token.match(/^([^:]+)(:.+)?$/);
       if (pseudoMatch) {
         const base = pseudoMatch[1];
         const pseudo = pseudoMatch[2] || '';
 
         // Skip if it's just a pseudo selector (like :root)
-        if (!base || globalSelectors.has(`:${pseudo.slice(1)}`)) return segment;
+        if (!base || globalSelectors.has(`:${pseudo.slice(1)}`)) {
+          result.push(token);
+          continue;
+        }
 
         // Add scope class
-        return `${base}.${transformer.scopeId}${pseudo}`;
+        result.push(`${base}.${transformer.scopeId}${pseudo}`);
+        continue;
       }
-      return `${segment}.${transformer.scopeId}`;
-    }).join(' ');
+      result.push(`${token}.${transformer.scopeId}`);
+    }
+
+    return result.join('');
   }).join(', ');
 }
+
+/**
+ * Scope selectors inside functional pseudo-classes like :has(), :is(), :where(), :not()
+ * @param {Object} transformer - Transformer instance
+ * @param {string} selector - Selector containing functional pseudo-class
+ * @returns {string} Scoped selector
+ */
+function scopePseudoClassSelector(transformer, selector) {
+  // Match functional pseudo-classes: :has(), :is(), :where(), :not()
+  return selector.replace(
+    /:(has|is|where|not)\(([^)]+)\)/g,
+    (_match, pseudoClass, inner) => {
+      // Recursively scope the inner selector
+      const scopedInner = scopeStyleSelector(transformer, inner);
+      return `:${pseudoClass}(${scopedInner})`;
+    }
+  );
+}

package/compiler/transformer/view.js

@@ -355,8 +355,17 @@ function parseBalancedExpression(str, start) {
  * @param {string} selector - CSS selector with potential dynamic attributes
  * @returns {Object} { cleanSelector, dynamicAttrs }
  */
+/**
+ * Extract all attributes (static and dynamic) from a selector string.
+ * Static attributes become part of the attrs object passed to el().
+ * Dynamic attributes (with {expr} values) are bound via bind().
+ *
+ * @param {string} selector - Element selector like "div.class[href=url][value={expr}]"
+ * @returns {{cleanSelector: string, staticAttrs: Array<{name: string, value: string}>, dynamicAttrs: Array<{name: string, expr: string}>}}
+ */
 function extractDynamicAttributes(selector) {
   const dynamicAttrs = [];
+  const staticAttrs = [];
   let cleanSelector = '';
   let i = 0;
 
@@ -367,7 +376,7 @@ function extractDynamicAttributes(selector) {
 
       // Parse attribute name
       let attrName = '';
-      while (i < selector.length && /[a-zA-Z0-9-]/.test(selector[i])) {
+      while (i < selector.length && /[a-zA-Z0-9-_]/.test(selector[i])) {
         attrName += selector[i];
         i++;
       }
@@ -382,9 +391,12 @@ function extractDynamicAttributes(selector) {
         // Skip whitespace
         while (i < selector.length && /\s/.test(selector[i])) i++;
 
-        // Check for optional quote
-        const hasQuote = selector[i] === '"';
-        if (hasQuote) i++;
+        // Determine quote character (or none)
+        let quoteChar = null;
+        if (selector[i] === '"' || selector[i] === "'") {
+          quoteChar = selector[i];
+          i++;
+        }
 
         // Check for dynamic expression {
         if (selector[i] === '{') {
@@ -394,7 +406,7 @@ function extractDynamicAttributes(selector) {
             i = result.end + 1; // Skip past closing }
 
             // Skip optional closing quote
-            if (hasQuote && selector[i] === '"') i++;
+            if (quoteChar && selector[i] === quoteChar) i++;
 
             // Skip closing ]
             if (selector[i] === ']') i++;
@@ -403,16 +415,40 @@ function extractDynamicAttributes(selector) {
             continue;
           }
         }
-      }
 
-      // Not a dynamic attribute, copy everything from [ to ]
-      let bracketDepth = 1;
-      cleanSelector += '[';
-      while (i < selector.length && bracketDepth > 0) {
-        if (selector[i] === '[') bracketDepth++;
-        else if (selector[i] === ']') bracketDepth--;
-        cleanSelector += selector[i];
-        i++;
+        // Static attribute - parse the value
+        let attrValue = '';
+        if (quoteChar) {
+          // Quoted value - read until closing quote
+          while (i < selector.length && selector[i] !== quoteChar) {
+            attrValue += selector[i];
+            i++;
+          }
+          // Skip closing quote
+          if (selector[i] === quoteChar) i++;
+        } else {
+          // Unquoted value - read until ]
+          while (i < selector.length && selector[i] !== ']') {
+            attrValue += selector[i];
+            i++;
+          }
+        }
+
+        // Skip closing ]
+        if (selector[i] === ']') i++;
+
+        // Add to static attrs (don't put in selector)
+        staticAttrs.push({ name: attrName, value: attrValue });
+        continue;
+      } else {
+        // Boolean attribute (no value) like [disabled]
+        // Skip to closing ]
+        while (i < selector.length && selector[i] !== ']') i++;
+        if (selector[i] === ']') i++;
+
+        // Add as boolean attribute
+        staticAttrs.push({ name: attrName, value: '' });
+        continue;
       }
     } else {
       cleanSelector += selector[i];
@@ -420,7 +456,7 @@ function extractDynamicAttributes(selector) {
     }
   }
 
-  return { cleanSelector, dynamicAttrs };
+  return { cleanSelector, staticAttrs, dynamicAttrs };
 }
 
 /**
@@ -445,8 +481,8 @@ export function transformElement(transformer, node, indent) {
     return transformComponentCall(transformer, node, indent);
   }
 
-  // Extract dynamic attributes from selector (e.g., [value={searchQuery}])
-  let { cleanSelector, dynamicAttrs } = extractDynamicAttributes(node.selector);
+  // Extract all attributes from selector (static and dynamic)
+  let { cleanSelector, staticAttrs, dynamicAttrs } = extractDynamicAttributes(node.selector);
 
   // Add scoped class to selector if CSS scoping is enabled
   let selector = cleanSelector;
@@ -483,51 +519,46 @@ export function transformElement(transformer, node, indent) {
     transformer.usesA11y.trapFocus = true;
   }
 
-  // Build ARIA attributes from directives
-  const ariaAttrs = [];
+  // Collect all static attributes for the el() attrs object
+  const allStaticAttrs = [];
 
-  // Process @a11y directives
+  // Add attributes extracted from selector
+  for (const attr of staticAttrs) {
+    // Escape single quotes in values
+    const escapedValue = attr.value.replace(/'/g, "\\'");
+    if (attr.value === '') {
+      // Boolean attribute
+      allStaticAttrs.push(`'${attr.name}': true`);
+    } else {
+      allStaticAttrs.push(`'${attr.name}': '${escapedValue}'`);
+    }
+  }
+
+  // Process @a11y directives - add to static attrs
   for (const directive of a11yDirectives) {
     const attrs = buildA11yAttributes(transformer, directive);
     for (const [key, value] of Object.entries(attrs)) {
       const valueCode = typeof value === 'string' ? `'${value}'` : value;
-      ariaAttrs.push(`'${key}': ${valueCode}`);
+      allStaticAttrs.push(`'${key}': ${valueCode}`);
     }
   }
 
   // Process @live directives (add aria-live and aria-atomic)
   for (const directive of liveDirectives) {
     const priority = directive.priority || 'polite';
-    ariaAttrs.push(`'aria-live': '${priority}'`);
-    ariaAttrs.push(`'aria-atomic': 'true'`);
-  }
-
-  // Build selector with inline ARIA attributes
-  let enhancedSelector = selector;
-  if (ariaAttrs.length > 0) {
-    // Convert ARIA attrs to selector attribute syntax where possible
-    // For dynamic values, we'll need to use setAriaAttributes
-    const staticAttrs = [];
-    const dynamicAttrs = [];
-
-    for (const attr of ariaAttrs) {
-      const match = attr.match(/^'([^']+)':\s*'([^']+)'$/);
-      if (match) {
-        // Static attribute - can embed in selector
-        staticAttrs.push(`[${match[1]}=${match[2]}]`);
-      } else {
-        dynamicAttrs.push(attr);
-      }
-    }
-
-    // Add static ARIA attributes to selector
-    enhancedSelector = selector + staticAttrs.join('');
+    allStaticAttrs.push(`'aria-live': '${priority}'`);
+    allStaticAttrs.push(`'aria-atomic': 'true'`);
   }
 
   // Start with el() call - escape single quotes in selector
-  const escapedSelector = enhancedSelector.replace(/'/g, "\\'");
+  const escapedSelector = selector.replace(/'/g, "\\'");
   parts.push(`${pad}el('${escapedSelector}'`);
 
+  // Add attributes object if we have any static attributes
+  if (allStaticAttrs.length > 0) {
+    parts.push(`, { ${allStaticAttrs.join(', ')} }`);
+  }
+
   // Add text content
   if (node.textContent.length > 0) {
     for (const text of node.textContent) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-js-framework",
-  "version": "1.7.25",
+  "version": "1.7.29",
   "description": "A declarative DOM framework with CSS selector-based structure and reactive pulsations",
   "type": "module",
   "main": "index.js",