@zolomedia/bifrost-client 1.7.74

package/syntax/prism-zspark.js

@@ -0,0 +1,25 @@
+/**
+ * Prism.js language definition for zspark
+ * zSpark.*.zolo - Application entry point configuration
+ *
+ * Extends base 'zolo' language with file-type-specific patterns.
+ *
+ * Generated by zlsp/zlsp/generators/generate_prism_zolo.py
+ * DO NOT EDIT MANUALLY - regenerate with: python3 -m zlsp.generators.generate_prism_zolo
+ */
+
+Prism.languages.zspark = Prism.languages.extend('zolo', {
+});
+
+// Insert value patterns BEFORE string-unquoted for priority
+Prism.languages.insertBefore('zspark', 'string-unquoted', {
+        'zspark-zpath-value': {
+            pattern: /(?<=(?:zScrapath|zVaFolder|zSpace):\s*)[@~](?:\.[a-zA-Z0-9_./]+)?/,
+            alias: 'keyword',
+            lookbehind: true,
+            greedy: true,
+        }
+});
+
+// Support both ```zspark and ```zSpark code fences
+Prism.languages.zSpark = Prism.languages.zspark;

package/syntax/prism-zui.js

@@ -0,0 +1,68 @@
+/**
+ * Prism.js language definition for zui
+ * zUI.*.zolo - User interface component files
+ *
+ * Extends base 'zolo' language with file-type-specific patterns.
+ *
+ * Generated by zlsp/zlsp/generators/generate_prism_zolo.py
+ * DO NOT EDIT MANUALLY - regenerate with: python3 -m zlsp.generators.generate_prism_zolo
+ */
+
+Prism.languages.zui = Prism.languages.extend('zolo', {
+    'zui-special-root': {
+        pattern: /((?:^|\n)[ \t]*)(?:zMeta|zVaF)(?=\s*:)/m,
+        alias: 'function',
+        lookbehind: true,
+    },
+    'root-key': {
+        pattern: /(^|\n)([a-zA-Z][a-zA-Z0-9_]*)(?=\s*(?:\([^)]+\))?[*!^~]?:)/m,
+        alias: 'class-name',
+        lookbehind: true,
+    },
+    'property': {
+        pattern: /\b[a-zA-Z][a-zA-Z0-9_]*(?=\s*(?:\([^)]+\))?[*!]?:)/,
+    },
+    'prefix-modifier': {
+        pattern: /[\^~](?=[a-zA-Z][a-zA-Z0-9_]*\s*:)/,
+        alias: 'variable',
+    },
+    'suffix-modifier': {
+        pattern: /[*!](?=:)/,
+        alias: 'operator',
+    }
+});
+
+// Insert key patterns BEFORE 'property' for correct priority
+Prism.languages.insertBefore('zui', 'property', {
+        'zrbac-key': {
+            pattern: /\bzRBAC(?=\s*:)/,
+            alias: 'constant',
+        },
+        'control-flow-key': {
+            pattern: /\bzWizard(?=\s*:)/,
+            alias: 'function',
+        },
+        'zsub-key': {
+            pattern: /\bzSub(?=\s*:)/,
+            alias: 'keyword',
+        },
+        'zui-element': {
+            pattern: /\b(?:zError|zWizard|zImage|zWarning|zSuccess|zH3|zDL|zTable|zSignal|zH0|zRange|zCheckbox|zInput|zH4|zBtn|zNavBar|zMD|zOL|zH6|zH1|zCode|zLink|zFunc|zCrumbs|zUL|zInfo|zH5|zH2|zURL|zText|zTerminal|zSelect)(?=\s*(?:\([^)]+\))?[*!]?:)/,
+            alias: 'function',
+        },
+        'metadata': {
+            pattern: /\b_z[A-Z][a-zA-Z]+(?=:)/,
+            alias: 'keyword',
+        },
+        'zui-element-property': {
+            pattern: /\b(?:action|alt_text|autocomplete|break_message|burst|caption|checked|color|columns|content|count|delay|disabled|every|format|full_page|href|id|indent|interactive|items|label|limit|max|maxlength|min|minlength|multi|multiple|name|offset|open_prompt|options|overwrite|parent|pattern|pause|placeholder|prefix|prompt|quality|readonly|rel|required|resolution|rows|selector|semantic|show|show_header|size|src|step|style|suffix|target|title|type|value|window|zAnchor)(?=\s*(?:\([^)]+\))?:)/,
+            alias: 'variable',
+        },
+        'zdispatch-event': {
+            pattern: /\b(?:zCRUD|zData|zDialog|zDispatch|zExport|zImport|zLogin|zMenu)(?=\s*(?:\([^)]+\))?[*!]?:)/,
+            alias: 'dispatch-event',
+        }
+});
+
+// Support both ```zui and ```zUI code fences
+Prism.languages.zUI = Prism.languages.zui;

package/zSys/accessibility/accessibility.js

@@ -0,0 +1,10 @@
+/**
+ * zSys/accessibility - Accessibility Utilities Barrel
+ * 
+ * Accessibility utilities (emoji, ARIA, screen readers).
+ * 
+ * @module zSys/accessibility
+ * @layer zSys (System Utilities)
+ */
+
+export * from './emoji_accessibility.js';

package/zSys/accessibility/emoji_accessibility.js

@@ -0,0 +1,173 @@
+/**
+ * Emoji Accessibility Module for Bifrost
+ * 
+ * Provides ARIA labels for emojis to make them accessible to screen readers.
+ * Uses the CLDR-based emoji-a11y.en.json data file.
+ * 
+ * Features:
+ * - Lazy loading of emoji descriptions
+ * - Auto-wrap emojis with aria-label spans
+ * - Graceful fallback if data unavailable
+ * - Singleton pattern for efficient loading
+ * 
+ * Phase 5: Bifrost ARIA Integration
+ * Author: zOS Framework
+ * Version: 1.0.0
+ */
+
+import { escapeHtml } from '../dom/encoding_utils.js';
+
+class EmojiAccessibility {
+    constructor(logger = console) {
+        this.logger = logger;
+        this.descriptions = null;
+        this.loading = null;
+        this.enabled = true;
+    }
+    
+    /**
+     * Lazy load emoji descriptions from JSON file.
+     * 
+     * @returns {Promise<void>}
+     */
+    async load() {
+        // Already loaded
+        if (this.descriptions) {
+            return;
+        }
+        
+        // Already loading (prevent duplicate requests)
+        if (this.loading) {
+            return this.loading;
+        }
+        
+        // Start loading
+        this.loading = (async () => {
+            try {
+                const response = await fetch('/static/js/emoji-a11y.en.json');
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                }
+                
+                this.descriptions = await response.json();
+                this.logger.log(`[EmojiA11y] Loaded ${Object.keys(this.descriptions).length} emoji descriptions`);
+            } catch (e) {
+                console.warn('[EmojiA11y] Failed to load descriptions:', e);
+                this.descriptions = {};
+                this.enabled = false;
+            } finally {
+                this.loading = null;
+            }
+        })();
+        
+        return this.loading;
+    }
+    
+    /**
+     * Get description for an emoji character.
+     * 
+     * @param {string} emoji - Emoji character
+     * @returns {string|null} - Description or null if not found
+     */
+    getDescription(emoji) {
+        if (!this.descriptions) {
+            return null;
+        }
+        
+        return this.descriptions[emoji] || null;
+    }
+    
+    /**
+     * Wrap emoji with accessible ARIA span.
+     * 
+     * @param {string} emoji - Emoji character
+     * @returns {string} - HTML string with aria-label or plain emoji
+     * 
+     * @example
+     * wrapWithAria('') → '<span aria-label="mobile phone" role="img"></span>'
+     * wrapWithAria('A')  → 'A' (not an emoji)
+     */
+    wrapWithAria(emoji) {
+        if (!this.enabled) {
+            return emoji;
+        }
+        
+        const desc = this.getDescription(emoji);
+        
+        if (desc) {
+            // Escape HTML in description to prevent XSS
+            const safeDesc = this._escapeHtml(desc);
+            return `<span aria-label="${safeDesc}" role="img">${emoji}</span>`;
+        }
+        
+        return emoji;
+    }
+    
+    /**
+     * Enhance text by wrapping all emojis with ARIA labels.
+     * 
+     * @param {string} text - Plain or HTML text with emojis
+     * @returns {string} - Text with emojis wrapped in accessible spans
+     * 
+     * @example
+     * enhanceText('Mobile: ') → 'Mobile: <span aria-label="mobile phone" role="img"></span>'
+     */
+    enhanceText(text) {
+        if (!this.enabled || !this.descriptions) {
+            return text;
+        }
+        
+        // Emoji Unicode ranges (same as Python version)
+        // Matches: emoji characters only (excludes ASCII)
+        const emojiRegex = /[\u{1F300}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F000}-\u{1F0FF}\u{1F200}-\u{1F2FF}\u{1F600}-\u{1F64F}\u{1F680}-\u{1F6FF}\u{1F900}-\u{1F9FF}\u{2300}-\u{23FF}\u{2B00}-\u{2BFF}\u{FE00}-\u{FE0F}]/gu;
+        
+        return text.replace(emojiRegex, (emoji) => {
+            return this.wrapWithAria(emoji);
+        });
+    }
+    
+    /**
+     * Escape HTML entities to prevent XSS.
+     * 
+     * @private
+     * @param {string} text - Text to escape
+     * @returns {string} - Escaped text
+     */
+    _escapeHtml(text) {
+        // SSOT escape (also escapes " / ' — safe for the aria-label attribute)
+        return escapeHtml(text);
+    }
+    
+    /**
+     * Check if emoji accessibility is enabled and loaded.
+     * 
+     * @returns {boolean}
+     */
+    isReady() {
+        return this.enabled && this.descriptions !== null;
+    }
+    
+    /**
+     * Get statistics about loaded descriptions.
+     * 
+     * @returns {object} - Stats object
+     */
+    getStats() {
+        return {
+            enabled: this.enabled,
+            loaded: this.descriptions !== null,
+            count: this.descriptions ? Object.keys(this.descriptions).length : 0
+        };
+    }
+}
+
+// Global singleton instance
+const emojiAccessibility = new EmojiAccessibility();
+
+// Auto-load on module import (non-blocking)
+emojiAccessibility.load().catch(console.error);
+
+// Export for use in Bifrost
+export default emojiAccessibility;
+export { EmojiAccessibility };

package/zSys/dom/block_utils.js

@@ -0,0 +1,122 @@
+/**
+ * 
+ * Block Wrapper Utilities
+ * 
+ *
+ * Helper functions for creating and managing zBlock wrappers with metadata.
+ * Supports both static and progressive rendering patterns.
+ *
+ * @module utils/block_utils
+ * @version 1.0.0
+ * @author Gal Nachshon
+ *
+ * 
+ * Architecture:
+ * - Uses primitives for DOM creation (createDiv)
+ * - Handles _zClass and _zStyle metadata
+ * - Supports progressive rendering with data attributes
+ * 
+ */
+
+// ─────────────────────────────────────────────────────────────────
+// Imports
+// ─────────────────────────────────────────────────────────────────
+
+// Layer 2: Utilities
+import { createDiv } from './dom_utils.js';
+import { convertStyleToString } from './style_utils.js';
+
+/**
+ * Create a block wrapper with metadata
+ * @param {Object} blockData - Block data object (may contain _zClass, _zStyle)
+ * @param {string} blockName - Block name for data attribute (default: 'zBlock')
+ * @param {boolean} isProgressive - Whether this is for progressive rendering (default: false)
+ * @returns {HTMLElement|null} Block wrapper div, or null if no metadata
+ */
+export function createBlockWrapper(blockData, blockName = 'zBlock', isProgressive = false) {
+  if (!blockData || typeof blockData !== 'object' || !blockData._zClass) {
+    return null;
+  }
+
+  const blockLevelDiv = createDiv();
+
+  // Apply block-level classes
+  const classes = Array.isArray(blockData._zClass)
+    ? blockData._zClass
+    : blockData._zClass.split(',').map(c => c.trim());
+  blockLevelDiv.className = classes.join(' ');
+
+  // Set data attribute
+  blockLevelDiv.setAttribute('data-zblock', isProgressive ? 'progressive' : blockName);
+
+  // Set id for named blocks (not progressive)
+  if (!isProgressive && blockName && blockName !== 'zBlock') {
+    blockLevelDiv.setAttribute('id', blockName);
+  }
+
+  // Apply inline styles if present
+  if (blockData._zStyle) {
+    const cssString = convertStyleToString(blockData._zStyle);
+    if (cssString) {
+      blockLevelDiv.setAttribute('style', cssString);
+    }
+  }
+
+  return blockLevelDiv;
+}
+
+/**
+ * Apply block metadata to an existing wrapper
+ * @param {HTMLElement} wrapper - The wrapper element
+ * @param {Object} metadata - Metadata object (may contain _zClass, _zStyle)
+ */
+export function applyBlockMetadata(wrapper, metadata) {
+  if (!wrapper || !metadata) {
+    return;
+  }
+
+  if (metadata._zClass) {
+    wrapper.className = metadata._zClass;
+  }
+
+  if (metadata._zStyle) {
+    const cssString = convertStyleToString(metadata._zStyle);
+    if (cssString) {
+      wrapper.setAttribute('style', cssString);
+    }
+  }
+}
+
+/**
+ * Find existing progressive block wrapper in container
+ * @param {HTMLElement} container - Container to search in
+ * @returns {HTMLElement|null} Existing wrapper, or null
+ */
+export function findProgressiveBlockWrapper(container) {
+  if (!container) {
+    return null;
+  }
+  return container.querySelector('[data-zblock="progressive"]');
+}
+
+/**
+ * Check if block data has metadata (_zClass or _zStyle)
+ * @param {Object} blockData - Block data object
+ * @returns {boolean} True if has metadata
+ */
+export function hasBlockMetadata(blockData) {
+  return blockData &&
+         typeof blockData === 'object' &&
+         (blockData._zClass || blockData._zStyle);
+}
+
+// 
+// Default Export (for convenience)
+// 
+export default {
+  createBlockWrapper,
+  applyBlockMetadata,
+  findProgressiveBlockWrapper,
+  hasBlockMetadata
+};
+