pulse-js-framework 1.7.33 → 1.7.37

package/compiler/parser.js

@@ -100,7 +100,9 @@ export class Parser {
    * Peek at token at offset
    */
   peek(offset = 1) {
-    return this.tokens[this.pos + offset];
+    const index = this.pos + offset;
+    if (index < 0 || index >= this.tokens.length) return undefined;
+    return this.tokens[index];
   }
 
   /**

package/compiler/transformer/constants.js

@@ -5,7 +5,7 @@
  */
 
 /** Generate a unique scope ID for CSS scoping */
-export const generateScopeId = () => 'p' + Math.random().toString(36).substring(2, 8);
+export const generateScopeId = () => 'p' + Math.random().toString(36).substring(2, 12);
 
 /** Token types that should not have space after them */
 export const NO_SPACE_AFTER = new Set([

package/compiler/transformer/expressions.js

@@ -182,14 +182,54 @@ export function transformExpression(transformer, node) {
  * @returns {string} Transformed expression string
  */
 export function transformExpressionString(transformer, exprStr) {
-  // Simple transformation: wrap state and prop vars with .get()
+  // Transform state and prop vars in expression strings (interpolations, attribute bindings)
   // Both are now reactive (useProp returns computed for uniform interface)
   let result = exprStr;
 
-  // Transform state vars
+  // First, handle assignments to state vars: stateVar = expr -> stateVar.set(expr)
+  // This must happen before the generic .get() replacement to avoid generating
+  // invalid code like stateVar.get() = expr (LHS of assignment is not a reference)
   for (const stateVar of transformer.stateVars) {
+    // Compound assignment: stateVar += expr -> stateVar.update(_v => _v + expr)
     result = result.replace(
-      new RegExp(`\\b${stateVar}\\b`, 'g'),
+      new RegExp(`\\b${stateVar}\\s*(\\+=|-=|\\*=|\\/=|&&=|\\|\\|=|\\?\\?=)\\s*`, 'g'),
+      (_match, op) => {
+        const baseOp = op.slice(0, -1); // Remove trailing '='
+        return `${stateVar}.update(_v => _v ${baseOp} `;
+      }
+    );
+    // Close the .update() call - find the end of the expression after the replacement
+    // This is handled by the fact that the expression continues after the replacement text
+    // and the closing paren is added by wrapping logic below.
+
+    // Simple assignment: stateVar = expr -> stateVar.set(expr)
+    // Use negative lookbehind to skip compound assignments (already handled)
+    // Use negative lookahead to skip == and ===
+    result = result.replace(
+      new RegExp(`\\b${stateVar}\\s*=(?!=)`, 'g'),
+      `${stateVar}.set(`
+    );
+  }
+
+  // If we inserted .set( or .update(, we need to close the parenthesis
+  // Find unclosed .set( and .update( calls and close them at end of expression
+  if (result.includes('.set(') || result.includes('.update(_v =>')) {
+    // For .update(_v => _v op expr), close with )
+    result = result.replace(
+      /\.update\(_v => _v [^\)]*$/,
+      (m) => m + ')'
+    );
+    // For .set(expr), close with )
+    result = result.replace(
+      /\.set\(([^)]*$)/,
+      (_m, expr) => `.set(${expr})`
+    );
+  }
+
+  // Transform state var reads (not already transformed to .get/.set/.update)
+  for (const stateVar of transformer.stateVars) {
+    result = result.replace(
+      new RegExp(`\\b${stateVar}\\b(?!\\.(?:get|set|update))`, 'g'),
       `${stateVar}.get()`
     );
   }

package/loader/vite-plugin.js

@@ -146,7 +146,7 @@ export default function pulsePlugin(options = {}) {
                 compressed: sassOptions.compressed || false
               });
 
-              if (preprocessed.wasSass) {
+              if (preprocessed.preprocessor !== 'none') {
                 css = preprocessed.css;
               }
             } catch (sassError) {

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "pulse-js-framework",
-  "version": "1.7.33",
+  "version": "1.7.37",
   "description": "A declarative DOM framework with CSS selector-based structure and reactive pulsations",
   "type": "module",
+  "sideEffects": false,
   "main": "index.js",
   "types": "types/index.d.ts",
   "bin": {
@@ -178,6 +179,8 @@
     "test:esbuild-plugin": "node test/esbuild-plugin.test.js",
     "test:parcel-plugin": "node test/parcel-plugin.test.js",
     "test:swc-plugin": "node test/swc-plugin.test.js",
+    "test:dom-binding": "node test/dom-binding.test.js",
+    "test:interceptor-manager": "node test/interceptor-manager.test.js",
     "build:netlify": "node scripts/build-netlify.js",
     "version": "node scripts/sync-version.js",
     "docs": "node cli/index.js dev docs"

package/runtime/security.js

@@ -321,6 +321,27 @@ export function sanitizeHtml(html, options = {}) {
         attrValue = sanitized;
       }
 
+      // Sanitize style attribute to prevent CSS injection
+      if (attrName === 'style') {
+        const parts = attrValue.split(';').filter(Boolean);
+        const safeParts = [];
+        for (const part of parts) {
+          const colonIndex = part.indexOf(':');
+          if (colonIndex === -1) continue;
+          const cssProp = part.slice(0, colonIndex).trim();
+          const cssVal = part.slice(colonIndex + 1).trim();
+          if (/url\s*\(/i.test(cssVal) || /expression\s*\(/i.test(cssVal) ||
+              /javascript:/i.test(cssVal) || /behavior\s*:/i.test(cssVal) ||
+              /-moz-binding/i.test(cssVal)) {
+            log.warn(`Blocked dangerous CSS in style attribute: ${cssProp}`);
+            continue;
+          }
+          safeParts.push(`${cssProp}: ${cssVal}`);
+        }
+        attrValue = safeParts.join('; ');
+        if (!attrValue) continue;
+      }
+
       result += ` ${attrName}="${escapeHtml(attrValue)}"`;
     }
 

package/runtime/ssr.js

@@ -408,12 +408,16 @@ export function deserializeState(data) {
  * // Default implementation just stores in global
  * restoreState(window.__PULSE_STATE__);
  */
+// Module-scoped state store (avoids globalThis collision between multiple SSR instances)
+let _ssrState = null;
+
 export function restoreState(state) {
   const deserialized = typeof state === 'string'
     ? deserializeState(state)
     : state;
 
-  // Store in global for access by components
+  // Store in module scope and global for backward compatibility
+  _ssrState = deserialized;
   if (typeof globalThis !== 'undefined') {
     globalThis.__PULSE_SSR_STATE__ = deserialized;
   }
@@ -430,10 +434,20 @@ export function restoreState(state) {
  * const userData = getSSRState('user');
  */
 export function getSSRState(key) {
-  const state = globalThis?.__PULSE_SSR_STATE__ || {};
+  const state = _ssrState || globalThis?.__PULSE_SSR_STATE__ || {};
   return key ? state[key] : state;
 }
 
+/**
+ * Clear the SSR state. Use in tests or when cleaning up SSR context.
+ */
+export function clearSSRState() {
+  _ssrState = null;
+  if (typeof globalThis !== 'undefined') {
+    delete globalThis.__PULSE_SSR_STATE__;
+  }
+}
+
 // ============================================================================
 // Re-exports for convenience
 // ============================================================================
@@ -456,6 +470,7 @@ export default {
   deserializeState,
   restoreState,
   getSSRState,
+  clearSSRState,
 
   // Mode checks
   isSSR,

package/types/a11y.d.ts

@@ -91,6 +91,24 @@ export function restoreFocus(): void;
  */
 export function clearFocusStack(): void;
 
+/**
+ * Handle escape key press within a container
+ * @returns Cleanup function to remove listener
+ */
+export function onEscapeKey(
+  container: HTMLElement,
+  onEscape: () => void,
+  options?: { stopPropagation?: boolean }
+): () => void;
+
+/**
+ * Track keyboard vs mouse focus for :focus-visible styling
+ */
+export function createFocusVisibleTracker(): {
+  isKeyboardUser: Pulse<boolean>;
+  cleanup: () => void;
+};
+
 // =============================================================================
 // SKIP LINKS
 // =============================================================================
@@ -138,10 +156,28 @@ export function prefersColorScheme(): 'light' | 'dark' | 'no-preference';
  */
 export function prefersHighContrast(): boolean;
 
+/**
+ * Check if user prefers reduced transparency
+ */
+export function prefersReducedTransparency(): boolean;
+
+/**
+ * Check if forced colors mode is active (Windows High Contrast Mode)
+ */
+export function forcedColorsMode(): 'active' | 'none';
+
+/**
+ * Check user's preferred contrast level
+ */
+export function prefersContrast(): 'no-preference' | 'more' | 'less' | 'custom';
+
 export interface UserPreferences {
   reducedMotion: Pulse<boolean>;
   colorScheme: Pulse<'light' | 'dark' | 'no-preference'>;
   highContrast: Pulse<boolean>;
+  reducedTransparency?: Pulse<boolean>;
+  forcedColors?: Pulse<'active' | 'none'>;
+  contrast?: Pulse<'no-preference' | 'more' | 'less' | 'custom'>;
 }
 
 /**
@@ -209,6 +245,96 @@ export function createTabs(
   options?: TabsOptions
 ): TabsControl;
 
+// =============================================================================
+// ARIA WIDGETS
+// =============================================================================
+
+export interface ModalOptions {
+  labelledBy?: string;
+  describedBy?: string;
+  closeOnBackdropClick?: boolean;
+  onClose?: () => void;
+}
+
+export interface ModalControl {
+  open: () => void;
+  close: () => void;
+  isOpen: Pulse<boolean>;
+}
+
+/**
+ * Create an ARIA-compliant modal dialog
+ */
+export function createModal(
+  dialog: HTMLElement,
+  options?: ModalOptions
+): ModalControl;
+
+export interface TooltipOptions {
+  showDelay?: number;
+  hideDelay?: number;
+}
+
+export interface TooltipControl {
+  isVisible: Pulse<boolean>;
+  cleanup: () => void;
+}
+
+/**
+ * Create an ARIA-compliant tooltip
+ */
+export function createTooltip(
+  trigger: HTMLElement,
+  tooltip: HTMLElement,
+  options?: TooltipOptions
+): TooltipControl;
+
+export interface AccordionOptions {
+  triggerSelector?: string;
+  panelSelector?: string;
+  allowMultiple?: boolean;
+  defaultOpen?: number;
+}
+
+export interface AccordionControl {
+  open: (index: number) => void;
+  close: (index: number) => void;
+  toggle: (index: number) => void;
+  closeAll: () => void;
+  openIndices: Pulse<number[]>;
+  cleanup: () => void;
+}
+
+/**
+ * Create an ARIA-compliant accordion
+ */
+export function createAccordion(
+  container: HTMLElement,
+  options?: AccordionOptions
+): AccordionControl;
+
+export interface MenuOptions {
+  itemSelector?: string;
+  closeOnSelect?: boolean;
+  onSelect?: (element: HTMLElement, index: number) => void;
+}
+
+export interface MenuControl {
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+  cleanup: () => void;
+}
+
+/**
+ * Create an ARIA-compliant dropdown menu
+ */
+export function createMenu(
+  button: HTMLElement,
+  menu: HTMLElement,
+  options?: MenuOptions
+): MenuControl;
+
 // =============================================================================
 // KEYBOARD NAVIGATION
 // =============================================================================
@@ -260,6 +386,61 @@ export function logA11yIssues(issues: A11yIssue[]): void;
  */
 export function highlightA11yIssues(issues: A11yIssue[]): () => void;
 
+// =============================================================================
+// COLOR CONTRAST
+// =============================================================================
+
+/**
+ * Calculate WCAG contrast ratio between two colors
+ */
+export function getContrastRatio(foreground: string, background: string): number;
+
+/**
+ * Check if a contrast ratio meets WCAG requirements
+ */
+export function meetsContrastRequirement(
+  ratio: number,
+  level?: 'AA' | 'AAA',
+  textSize?: 'normal' | 'large'
+): boolean;
+
+/**
+ * Get the effective background color of an element (handles transparency)
+ */
+export function getEffectiveBackgroundColor(element: HTMLElement): string;
+
+/**
+ * Check contrast of a specific element
+ */
+export function checkElementContrast(
+  element: HTMLElement,
+  level?: 'AA' | 'AAA'
+): {
+  ratio: number;
+  passes: boolean;
+  foreground: string;
+  background: string;
+};
+
+// =============================================================================
+// ANNOUNCEMENT QUEUE
+// =============================================================================
+
+export interface AnnouncementQueueOptions {
+  minDelay?: number;
+}
+
+export interface AnnouncementQueue {
+  add: (message: string, options?: { priority?: 'polite' | 'assertive' }) => void;
+  clear: () => void;
+  queueLength: Pulse<number>;
+}
+
+/**
+ * Create a queue for managing multiple announcements
+ */
+export function createAnnouncementQueue(options?: AnnouncementQueueOptions): AnnouncementQueue;
+
 // =============================================================================
 // UTILITIES
 // =============================================================================
@@ -285,6 +466,11 @@ export function makeInert(element: HTMLElement): () => void;
  */
 export function srOnly(text: string): HTMLSpanElement;
 
+/**
+ * Compute the accessible name of an element (aria-label, text content, etc.)
+ */
+export function getAccessibleName(element: HTMLElement): string;
+
 // =============================================================================
 // DEFAULT EXPORT
 // =============================================================================