pulse-js-framework 1.7.26 → 1.7.30

package/cli/dev.js

@@ -134,12 +134,15 @@ export async function startDevServer(args) {
             });
             res.end(result.code);
           } else {
+            const errorDetails = result.errors.map(e => `${e.message} at line ${e.line || '?'}:${e.column || '?'}`).join('\n');
+            console.error(`[Pulse] Compilation error in ${filePath}:`, result.errors);
             res.writeHead(500, { 'Content-Type': 'text/plain' });
-            res.end(`Compilation error: ${result.errors.map(e => e.message).join('\n')}`);
+            res.end(`Compilation error: ${errorDetails}\nFile: ${filePath}`);
           }
         } catch (error) {
+          console.error(`[Pulse] Error compiling ${filePath}:`, error);
           res.writeHead(500, { 'Content-Type': 'text/plain' });
-          res.end(`Error: ${error.message}`);
+          res.end(`Error: ${error.message}\nFile: ${filePath}`);
         }
         return;
       }

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/parser.js

@@ -1597,9 +1597,14 @@ export class Parser {
 
         // Special case: . or # after an identifier needs space (descendant selector)
         // e.g., ".school .date" - need space between "school" and "."
+        // BUT NOT for "body.dark" where . is directly adjacent to body (no whitespace)
+        // We check if tokens are adjacent by comparing positions
+        const expectedNextCol = lastToken ? (lastToken.column + String(lastToken.value).length) : 0;
+        const tokensAreAdjacent = token.column === expectedNextCol;
         const isDescendantSelector = (tokenValue === '.' || tokenValue === '#') &&
                                      lastToken?.type === TokenType.IDENT &&
-                                     !inAtRule;  // Don't add space in @media selectors
+                                     !inAtRule &&  // Don't add space in @media selectors
+                                     !tokensAreAdjacent;  // Only add space if not directly adjacent
 
         // Special case: hyphenated class/id names like .job-title, .card-3d, max-width
         // Check if we're continuing a class/id name - the last part should end with alphanumeric

package/compiler/sourcemap.js

@@ -210,9 +210,11 @@ export class SourceMapGenerator {
    * @returns {string} Comment with base64 encoded source map
    */
   toComment() {
-    const base64 = typeof btoa === 'function'
-      ? btoa(this.toString())
-      : Buffer.from(this.toString()).toString('base64');
+    // Use Buffer for base64 encoding (supports UTF-8, unlike btoa which is Latin1-only)
+    const json = this.toString();
+    const base64 = typeof Buffer !== 'undefined'
+      ? Buffer.from(json, 'utf-8').toString('base64')
+      : btoa(unescape(encodeURIComponent(json))); // Browser fallback for UTF-8
     return `//# sourceMappingURL=data:application/json;charset=utf-8;base64,${base64}`;
   }
 

package/compiler/transformer/constants.js

@@ -33,7 +33,8 @@ export const PUNCT_NO_SPACE_AFTER = [
 /** JavaScript statement keywords */
 export const STATEMENT_KEYWORDS = new Set([
   'let', 'const', 'var', 'return', 'if', 'else', 'for', 'while',
-  'switch', 'throw', 'try', 'catch', 'finally'
+  'switch', 'throw', 'try', 'catch', 'finally', 'break', 'continue',
+  'case', 'default'
 ]);
 
 /** Built-in JavaScript functions and objects */

package/compiler/transformer/expressions.js

@@ -25,9 +25,9 @@ export function transformExpression(transformer, node) {
 
   switch (node.type) {
     case NodeType.Identifier:
-      // Props take precedence over state (props are destructured in render scope)
+      // Props and state are both reactive (wrapped in computed via useProp or pulse)
       if (transformer.propVars.has(node.name)) {
-        return node.name;
+        return `${node.name}.get()`;
       }
       if (transformer.stateVars.has(node.name)) {
         return `${node.name}.get()`;
@@ -47,12 +47,18 @@ export function transformExpression(transformer, node) {
 
     case NodeType.MemberExpression: {
       const obj = transformExpression(transformer, node.object);
-      // Use optional chaining when accessing properties on function call results
+      // Use optional chaining when accessing properties on:
+      // 1. Function call results (could return null/undefined)
+      // 2. Props (commonly receive null values like notification: null)
+      // Note: State vars don't get optional chaining to avoid breaking array/object methods
       const isCallResult = node.object.type === NodeType.CallExpression;
-      const accessor = isCallResult ? '?.' : '.';
+      const isProp = node.object.type === NodeType.Identifier &&
+        transformer.propVars.has(node.object.name);
+      const useOptionalChaining = isCallResult || isProp;
+      const accessor = useOptionalChaining ? '?.' : '.';
       if (node.computed) {
         const prop = transformExpression(transformer, node.property);
-        return isCallResult ? `${obj}?.[${prop}]` : `${obj}[${prop}]`;
+        return useOptionalChaining ? `${obj}?.[${prop}]` : `${obj}[${prop}]`;
       }
       return `${obj}${accessor}${node.property}`;
     }
@@ -156,21 +162,39 @@ export function transformExpression(transformer, node) {
  * @returns {string} Transformed expression string
  */
 export function transformExpressionString(transformer, exprStr) {
-  // Simple transformation: wrap state vars with .get()
-  // Props take precedence - don't wrap props with .get()
+  // Simple transformation: wrap state and prop vars with .get()
+  // Both are now reactive (useProp returns computed for uniform interface)
   let result = exprStr;
+
+  // Transform state vars
   for (const stateVar of transformer.stateVars) {
-    // Skip if this var name is also a prop (props shadow state in render scope)
-    if (transformer.propVars.has(stateVar)) {
-      continue;
-    }
     result = result.replace(
       new RegExp(`\\b${stateVar}\\b`, 'g'),
       `${stateVar}.get()`
     );
   }
-  // Add optional chaining after function calls followed by property access
-  result = result.replace(/(\w+\([^)]*\))\.(\w)/g, '$1?.$2');
+
+  // Transform prop vars (now also reactive via useProp)
+  // Add optional chaining when followed by property access for nullable props
+  // Props commonly receive null values (e.g., notification: null)
+  for (const propVar of transformer.propVars) {
+    result = result.replace(
+      new RegExp(`\\b${propVar}\\b(?=\\.)`, 'g'),
+      `${propVar}.get()?`
+    );
+    // Handle standalone prop var (not followed by property access)
+    result = result.replace(
+      new RegExp(`\\b${propVar}\\b(?!\\.)`, 'g'),
+      `${propVar}.get()`
+    );
+  }
+
+  // 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;
 }
 
@@ -181,7 +205,7 @@ export function transformExpressionString(transformer, exprStr) {
  * @returns {string} JavaScript code
  */
 export function transformFunctionBody(transformer, tokens) {
-  const { stateVars, actionNames } = transformer;
+  const { stateVars, propVars, actionNames } = transformer;
   let code = '';
   let lastToken = null;
   let lastNonSpaceToken = null;
@@ -189,15 +213,17 @@ export function transformFunctionBody(transformer, tokens) {
   // Tokens that must follow } directly without semicolon
   const NO_SEMI_BEFORE = new Set(['catch', 'finally', 'else']);
 
-  const needsManualSemicolon = (token, nextToken, lastNonSpace) => {
+  const needsManualSemicolon = (token, nextToken, lastNonSpace, tokenIndex) => {
     if (!token || lastNonSpace?.value === 'new') return false;
     // Don't add semicolon after 'await' - it always needs its expression
     if (lastNonSpace?.value === 'await') return false;
-    // For 'return': bare return followed by statement keyword needs semicolon
+    // For 'return': bare return followed by statement keyword or state assignment needs semicolon
     if (lastNonSpace?.value === 'return') {
       // If followed by a statement keyword, it's a bare return - needs semicolon
       if (token.type === 'IDENT' && STATEMENT_KEYWORDS.has(token.value)) return true;
       if (STATEMENT_TOKEN_TYPES.has(token.type)) return true;
+      // If followed by a state variable assignment, it's a bare return - needs semicolon
+      if (token.type === 'IDENT' && stateVars.has(token.value) && nextToken?.type === 'EQ') return true;
       return false;  // return expression - no semicolon
     }
     // Don't add semicolon before catch/finally/else after }
@@ -206,9 +232,25 @@ export function transformFunctionBody(transformer, tokens) {
     if (token.type !== 'IDENT') return false;
     if (STATEMENT_KEYWORDS.has(token.value)) return true;
     if (stateVars.has(token.value) && nextToken?.type === 'EQ') return true;
+    // Any identifier followed by = after a statement end is an assignment statement
+    if (nextToken?.type === 'EQ' && lastNonSpace?.type === 'RPAREN') return true;
     if (nextToken?.type === 'LPAREN' &&
         (BUILTIN_FUNCTIONS.has(token.value) || actionNames.has(token.value))) return true;
     if (nextToken?.type === 'DOT' && BUILTIN_FUNCTIONS.has(token.value)) return true;
+
+    // Check for property assignment or method call: identifier.property = value OR identifier.method()
+    // This is a new statement if token is followed by .property = ... or .method(...)
+    if (nextToken?.type === 'DOT') {
+      // Look ahead to see if this is an assignment or method call
+      for (let j = tokenIndex + 1; j < tokens.length && j < tokenIndex + 10; j++) {
+        const t = tokens[j];
+        // Assignment: identifier.property = value
+        if (t.type === 'EQ' && tokens[j-1]?.type === 'IDENT') return true;
+        // Method call: identifier.method()
+        if (t.type === 'LPAREN' && tokens[j-1]?.type === 'IDENT') return true;
+        if (t.type === 'SEMI') break;
+      }
+    }
     return false;
   };
 
@@ -237,7 +279,7 @@ export function transformFunctionBody(transformer, tokens) {
     }
 
     // Add semicolon before statement starters
-    if (needsManualSemicolon(token, nextToken, lastNonSpaceToken) &&
+    if (needsManualSemicolon(token, nextToken, lastNonSpaceToken, i) &&
         afterStatementEnd(lastNonSpaceToken)) {
       if (!afterIfCondition && lastToken && lastToken.value !== ';' && lastToken.value !== '{') {
         code += '; ';
@@ -411,10 +453,74 @@ export function transformFunctionBody(transformer, tokens) {
 
   // Replace state var reads (not in assignments, not already with .get/.set)
   // Allow spread operators (...stateVar) but block member access (obj.stateVar)
+  // Skip object literal keys (e.g., { users: value } - don't transform the key 'users')
   for (const stateVar of stateVars) {
     code = code.replace(
       new RegExp(`(?:(?<=\\.\\.\\.)|(?<!\\.))\\b${stateVar}\\b(?!\\s*=(?!=)|\\s*\\(|\\s*\\.(?:get|set))`, 'g'),
-      `${stateVar}.get()`
+      (match, offset) => {
+        // Check if this is an object key by looking at context
+        // Pattern: after { or , and before : (with arbitrary content between)
+        const after = code.slice(offset + match.length, offset + match.length + 10);
+
+        // If followed by : (not ::), check if it's an object key
+        if (/^\s*:(?!:)/.test(after)) {
+          // Look backwards for the nearest { or , that would indicate object context
+          // We need to track bracket depth to handle nested structures
+          let depth = 0;
+          for (let i = offset - 1; i >= 0; i--) {
+            const ch = code[i];
+            if (ch === ')' || ch === ']') depth++;
+            else if (ch === '(' || ch === '[') depth--;
+            else if (ch === '}') depth++;
+            else if (ch === '{') {
+              if (depth === 0) {
+                // Found opening brace at same depth - this is an object key
+                return match;
+              }
+              depth--;
+            }
+            else if (ch === ',' && depth === 0) {
+              // Found comma at same depth - this is an object key
+              return match;
+            }
+            // Stop if we hit a semicolon at depth 0 (different statement)
+            else if (ch === ';' && depth === 0) break;
+          }
+        }
+
+        return `${stateVar}.get()`;
+      }
+    );
+  }
+
+  // Replace prop var reads (props are reactive via useProp, need .get() like state vars)
+  // For props: allow function calls (prop callbacks need .get()() pattern)
+  // Skip object keys, allow spreads, block member access
+  for (const propVar of propVars) {
+    code = code.replace(
+      new RegExp(`(?:(?<=\\.\\.\\.)|(?<!\\.))\\b${propVar}\\b(?!\\s*=(?!=)|\\s*\\.(?:get|set))`, 'g'),
+      (match, offset) => {
+        // Check if this is an object key
+        const after = code.slice(offset + match.length, offset + match.length + 10);
+
+        if (/^\s*:(?!:)/.test(after)) {
+          let depth = 0;
+          for (let i = offset - 1; i >= 0; i--) {
+            const ch = code[i];
+            if (ch === ')' || ch === ']') depth++;
+            else if (ch === '(' || ch === '[') depth--;
+            else if (ch === '}') depth++;
+            else if (ch === '{') {
+              if (depth === 0) return match;
+              depth--;
+            }
+            else if (ch === ',' && depth === 0) return match;
+            else if (ch === ';' && depth === 0) break;
+          }
+        }
+
+        return `${propVar}.get()`;
+      }
     );
   }
 

package/compiler/transformer/imports.js

@@ -46,6 +46,11 @@ export function generateImports(transformer) {
     'model'
   ];
 
+  // Add useProp if component has props (for reactive prop support)
+  if (transformer.propVars.size > 0) {
+    runtimeImports.push('useProp');
+  }
+
   lines.push(`import { ${runtimeImports.join(', ')} } from '${options.runtime}';`);
 
   // A11y imports (if a11y features are used)

package/compiler/transformer/index.js

@@ -178,15 +178,7 @@ export class Transformer {
       extractImportedComponents(this, this.ast.imports);
     }
 
-    // Pre-scan for a11y usage to determine imports
-    if (this.ast.view) {
-      this._scanA11yUsage(this.ast.view);
-    }
-
-    // Imports (runtime + user imports)
-    parts.push(generateImports(this));
-
-    // Extract prop variables
+    // Extract prop variables (before imports so useProp can be conditionally imported)
     if (this.ast.props) {
       extractPropVars(this, this.ast.props);
     }
@@ -201,6 +193,14 @@ export class Transformer {
       extractActionNames(this, this.ast.actions);
     }
 
+    // Pre-scan for a11y usage to determine imports
+    if (this.ast.view) {
+      this._scanA11yUsage(this.ast.view);
+    }
+
+    // Imports (runtime + user imports) - after extraction so we know what to import
+    parts.push(generateImports(this));
+
     // Store (must come before router so $store is available to guards)
     if (this.ast.store) {
       parts.push(transformStore(this, this.ast.store, transformValue));

package/compiler/transformer/state.js

@@ -93,6 +93,22 @@ export function transformState(transformer, stateBlock) {
   return lines.join('\n');
 }
 
+/**
+ * Check if an action body references any prop variables
+ * @param {Array} bodyTokens - Function body tokens
+ * @param {Set} propVars - Set of prop variable names
+ * @returns {boolean} True if action references props
+ */
+export function actionReferencesProp(bodyTokens, propVars) {
+  if (propVars.size === 0) return false;
+  for (const token of bodyTokens) {
+    if (token.type === 'IDENT' && propVars.has(token.value)) {
+      return true;
+    }
+  }
+  return false;
+}
+
 /**
  * Transform actions block to function declarations
  * @param {Object} transformer - Transformer instance
@@ -104,6 +120,11 @@ export function transformActions(transformer, actionsBlock, transformFunctionBod
   const lines = ['// Actions'];
 
   for (const fn of actionsBlock.functions) {
+    // Skip actions that reference props - they'll be generated inside render()
+    if (actionReferencesProp(fn.body, transformer.propVars)) {
+      continue;
+    }
+
     const asyncKeyword = fn.async ? 'async ' : '';
     const params = fn.params.join(', ');
     const body = transformFunctionBody(transformer, fn.body);
@@ -116,3 +137,33 @@ export function transformActions(transformer, actionsBlock, transformFunctionBod
 
   return lines.join('\n');
 }
+
+/**
+ * Transform prop-dependent actions (to be placed inside render function)
+ * @param {Object} transformer - Transformer instance
+ * @param {Object} actionsBlock - Actions block from AST
+ * @param {Function} transformFunctionBody - Function to transform body tokens
+ * @param {string} indent - Indentation string
+ * @returns {string} JavaScript code
+ */
+export function transformPropDependentActions(transformer, actionsBlock, transformFunctionBody, indent = '  ') {
+  const lines = [];
+
+  for (const fn of actionsBlock.functions) {
+    // Only include actions that reference props
+    if (!actionReferencesProp(fn.body, transformer.propVars)) {
+      continue;
+    }
+
+    const asyncKeyword = fn.async ? 'async ' : '';
+    const params = fn.params.join(', ');
+    const body = transformFunctionBody(transformer, fn.body);
+
+    lines.push(`${indent}${asyncKeyword}function ${fn.name}(${params}) {`);
+    lines.push(`${indent}  ${body}`);
+    lines.push(`${indent}}`);
+    lines.push('');
+  }
+
+  return lines.join('\n');
+}

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

@@ -5,8 +5,8 @@
  */
 
 import { NodeType } from '../parser.js';
-import { transformValue } from './state.js';
-import { transformExpression, transformExpressionString } from './expressions.js';
+import { transformValue, transformPropDependentActions } from './state.js';
+import { transformExpression, transformExpressionString, transformFunctionBody } from './expressions.js';
 
 /** View node transformers lookup table */
 export const VIEW_NODE_HANDLERS = {
@@ -38,14 +38,27 @@ export function transformView(transformer, viewBlock) {
   // Generate render function with props parameter
   lines.push('function render({ props = {}, slots = {} } = {}) {');
 
-  // Destructure props with defaults if component has props
+  // Extract props using useProp() for reactive prop support
+  // useProp checks for a getter (propName$) and returns a computed if present
   if (transformer.propVars.size > 0) {
-    const propsDestructure = [...transformer.propVars].map(name => {
+    for (const name of transformer.propVars) {
       const defaultValue = transformer.propDefaults.get(name);
       const defaultCode = defaultValue ? transformValue(transformer, defaultValue) : 'undefined';
-      return `${name} = ${defaultCode}`;
-    }).join(', ');
-    lines.push(`  const { ${propsDestructure} } = props;`);
+      lines.push(`  const ${name} = useProp(props, '${name}', ${defaultCode});`);
+    }
+  }
+
+  // Generate prop-dependent actions inside render (after useProp declarations)
+  if (transformer.ast.actions && transformer.propVars.size > 0) {
+    const propActions = transformPropDependentActions(
+      transformer,
+      transformer.ast.actions,
+      transformFunctionBody,
+      '  '
+    );
+    if (propActions.trim()) {
+      lines.push(propActions);
+    }
   }
 
   lines.push('  return (');
@@ -416,7 +429,7 @@ function extractDynamicAttributes(selector) {
           }
         }
 
-        // Static attribute - parse the value
+        // Parse the attribute value (may be static or contain interpolations)
         let attrValue = '';
         if (quoteChar) {
           // Quoted value - read until closing quote
@@ -437,8 +450,15 @@ function extractDynamicAttributes(selector) {
         // Skip closing ]
         if (selector[i] === ']') i++;
 
-        // Add to static attrs (don't put in selector)
-        staticAttrs.push({ name: attrName, value: attrValue });
+        // Check if the value contains interpolation {expr}
+        // If so, treat as dynamic attribute with template string
+        if (attrValue.includes('{') && attrValue.includes('}')) {
+          // Convert "text {expr} more" to template string: `text ${expr} more`
+          dynamicAttrs.push({ name: attrName, expr: attrValue, isInterpolated: true });
+        } else {
+          // Pure static attribute
+          staticAttrs.push({ name: attrName, value: attrValue });
+        }
         continue;
       } else {
         // Boolean attribute (no value) like [disabled]
@@ -618,7 +638,16 @@ export function transformElement(transformer, node, indent) {
 
   // Chain dynamic attribute bindings (e.g., [value={searchQuery}])
   for (const attr of dynamicAttrs) {
-    const exprCode = transformExpressionString(transformer, attr.expr);
+    let exprCode;
+    if (attr.isInterpolated) {
+      // String with interpolation: "display: {show ? 'block' : 'none'}"
+      // Convert to template literal: `display: ${show.get() ? 'block' : 'none'}`
+      const templateStr = attr.expr.replace(/\{/g, '${');
+      exprCode = '`' + transformExpressionString(transformer, templateStr) + '`';
+    } else {
+      // Pure expression: {searchQuery}
+      exprCode = transformExpressionString(transformer, attr.expr);
+    }
     result = `bind(${result}, '${attr.name}', () => ${exprCode})`;
   }
 
@@ -642,8 +671,69 @@ export function addScopeToSelector(transformer, selector) {
   return `${selector}.${transformer.scopeId}`;
 }
 
+/**
+ * Check if an expression references any state variables
+ * @param {Object} transformer - Transformer instance
+ * @param {Object} node - AST node to check
+ * @returns {boolean} True if expression uses state variables
+ */
+function expressionUsesState(transformer, node) {
+  if (!node) return false;
+
+  switch (node.type) {
+    case NodeType.Identifier:
+      return transformer.stateVars.has(node.name);
+
+    case NodeType.MemberExpression:
+      return expressionUsesState(transformer, node.object) ||
+             (node.computed && expressionUsesState(transformer, node.property));
+
+    case NodeType.CallExpression:
+      return expressionUsesState(transformer, node.callee) ||
+             node.arguments.some(arg => expressionUsesState(transformer, arg));
+
+    case NodeType.BinaryExpression:
+    case NodeType.ConditionalExpression:
+      return expressionUsesState(transformer, node.left) ||
+             expressionUsesState(transformer, node.right) ||
+             (node.test && expressionUsesState(transformer, node.test)) ||
+             (node.consequent && expressionUsesState(transformer, node.consequent)) ||
+             (node.alternate && expressionUsesState(transformer, node.alternate));
+
+    case NodeType.UnaryExpression:
+    case NodeType.UpdateExpression:
+      return expressionUsesState(transformer, node.argument);
+
+    case NodeType.ArrayLiteral:
+      return node.elements?.some(el => expressionUsesState(transformer, el));
+
+    case NodeType.ObjectLiteral:
+      return node.properties?.some(prop =>
+        expressionUsesState(transformer, prop.value)
+      );
+
+    case NodeType.ArrowFunction:
+      // Arrow functions capture state, but don't need wrapping themselves
+      return false;
+
+    case NodeType.SpreadElement:
+      return expressionUsesState(transformer, node.argument);
+
+    default:
+      return false;
+  }
+}
+
 /**
  * Transform a component call (imported component)
+ *
+ * For reactive props (those that reference state variables), we pass both:
+ * - The current value: `propName: value`
+ * - A getter function: `propName$: () => value`
+ *
+ * The child component can use `useProp(props, 'propName', default)` to get
+ * a reactive computed if a getter exists, or the static value otherwise.
+ *
  * @param {Object} transformer - Transformer instance
  * @param {Object} node - Element node (component)
  * @param {number} indent - Indentation level
@@ -670,17 +760,26 @@ export function transformComponentCall(transformer, node, indent) {
   }
 
   // Build component call
-  let code = `${pad}${componentName}.render({ `;
-
   const renderArgs = [];
 
   // Add props if any
   if (node.props && node.props.length > 0) {
-    const propsCode = node.props.map(prop => {
+    const propEntries = [];
+
+    for (const prop of node.props) {
       const valueCode = transformExpression(transformer, prop.value);
-      return `${prop.name}: ${valueCode}`;
-    }).join(', ');
-    renderArgs.push(`props: { ${propsCode} }`);
+      const usesState = expressionUsesState(transformer, prop.value);
+
+      if (usesState) {
+        // Reactive prop: pass both value and getter
+        // The getter allows child to create a reactive binding via useProp()
+        propEntries.push(`${prop.name}$: () => ${valueCode}`);
+      }
+      // Always pass the current value (for non-useProp access and initial render)
+      propEntries.push(`${prop.name}: ${valueCode}`);
+    }
+
+    renderArgs.push(`props: { ${propEntries.join(', ')} }`);
   }
 
   // Add slots if any
@@ -691,9 +790,8 @@ export function transformComponentCall(transformer, node, indent) {
     renderArgs.push(`slots: { ${slotCode} }`);
   }
 
-  code += renderArgs.join(', ');
-  code += ' })';
-  return code;
+  const renderCall = `${componentName}.render({ ${renderArgs.join(', ')} })`;
+  return `${pad}${renderCall}`;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-js-framework",
-  "version": "1.7.26",
+  "version": "1.7.30",
   "description": "A declarative DOM framework with CSS selector-based structure and reactive pulsations",
   "type": "module",
   "main": "index.js",
@@ -109,7 +109,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "test": "npm run test:compiler && npm run test:sourcemap && npm run test:css-parsing && npm run test:pulse && npm run test:dom && npm run test:dom-element && npm run test:dom-adapter && npm run test:enhanced-mock-adapter && npm run test:router && npm run test:store && npm run test:context && npm run test:hmr && npm run test:lint && npm run test:format && npm run test:analyze && npm run test:cli && npm run test:cli-ui && npm run test:lru-cache && npm run test:utils && npm run test:docs && npm run test:docs-nav && npm run test:async && npm run test:form && npm run test:http && npm run test:devtools && npm run test:native && npm run test:a11y && npm run test:a11y-enhanced && npm run test:logger && npm run test:errors && npm run test:security && npm run test:websocket && npm run test:graphql && npm run test:doctor && npm run test:scaffold && npm run test:test-runner && npm run test:build && npm run test:integration && npm run test:context-stress && npm run test:form-edge-cases && npm run test:graphql-subscriptions && npm run test:http-edge-cases && npm run test:integration-advanced && npm run test:websocket-stress && npm run test:ssr",
+    "test": "npm run test:compiler && npm run test:sourcemap && npm run test:css-parsing && npm run test:pulse && npm run test:dom && npm run test:dom-element && npm run test:dom-adapter && npm run test:enhanced-mock-adapter && npm run test:router && npm run test:store && npm run test:context && npm run test:hmr && npm run test:lint && npm run test:format && npm run test:analyze && npm run test:cli && npm run test:cli-ui && npm run test:cli-create && npm run test:lru-cache && npm run test:utils && npm run test:docs && npm run test:docs-nav && npm run test:async && npm run test:form && npm run test:http && npm run test:devtools && npm run test:native && npm run test:a11y && npm run test:a11y-enhanced && npm run test:logger && npm run test:errors && npm run test:security && npm run test:websocket && npm run test:graphql && npm run test:doctor && npm run test:scaffold && npm run test:test-runner && npm run test:build && npm run test:integration && npm run test:context-stress && npm run test:form-edge-cases && npm run test:graphql-subscriptions && npm run test:http-edge-cases && npm run test:integration-advanced && npm run test:websocket-stress && npm run test:ssr",
     "test:compiler": "node test/compiler.test.js",
     "test:sourcemap": "node test/sourcemap.test.js",
     "test:css-parsing": "node test/css-parsing.test.js",
@@ -127,6 +127,7 @@
     "test:analyze": "node test/analyze.test.js",
     "test:cli": "node test/cli.test.js",
     "test:cli-ui": "node test/cli-ui.test.js",
+    "test:cli-create": "node test/cli-create.test.js",
     "test:lru-cache": "node test/lru-cache.test.js",
     "test:utils": "node test/utils.test.js",
     "test:docs": "node test/docs.test.js",

package/runtime/pulse.js

@@ -1316,6 +1316,39 @@ export function untrack(fn) {
   }
 }
 
+/**
+ * Create a reactive prop from component props object.
+ * If the prop has a reactive getter (marked with $ suffix), returns a computed.
+ * Otherwise returns the static value.
+ *
+ * @template T
+ * @param {Object} props - Component props object
+ * @param {string} name - Prop name to extract
+ * @param {T} [defaultValue] - Default value if prop is undefined
+ * @returns {T|Pulse<T>} The prop value (reactive if getter exists, static otherwise)
+ *
+ * @example
+ * // In compiled component render function:
+ * function render({ props = {} } = {}) {
+ *   const darkMode = useProp(props, 'darkMode', false);
+ *   // darkMode is now reactive - can use in text(() => darkMode.get())
+ * }
+ */
+export function useProp(props, name, defaultValue) {
+  const getter = props[`${name}$`];
+  if (typeof getter === 'function') {
+    // Reactive prop - wrap in computed for automatic dependency tracking
+    return computed(() => {
+      const value = getter();
+      return value !== undefined ? value : defaultValue;
+    });
+  }
+  // Static prop - wrap in computed for uniform interface
+  // This allows child components to always use prop.get() consistently
+  const value = props[name];
+  return computed(() => value !== undefined ? value : defaultValue);
+}
+
 export default {
   Pulse,
   pulse,
@@ -1337,5 +1370,7 @@ export default {
   // HMR support
   setCurrentModule,
   clearCurrentModule,
-  disposeModule
+  disposeModule,
+  // Component props helper
+  useProp
 };