@zolomedia/bifrost-client 1.7.74

package/L1_Foundation/L1_Foundation.js

@@ -0,0 +1,13 @@
+/**
+ * L1_Foundation - Core Infrastructure Layer
+ * 
+ * Low-level primitives with no dependencies on higher layers.
+ * Provides: Connection, Logging, Configuration, Constants, Bootstrap
+ */
+
+// Export subdirectories (will be populated in Step 2)
+export * from './connection/connection.js';
+export * from './logger/logger.js';
+export * from './config/config.js';
+export * from './constants/constants.js';
+export * from './bootstrap/bootstrap.js';

package/L1_Foundation/bootstrap/bootstrap.js

@@ -0,0 +1,11 @@
+/**
+ * L1_Foundation/bootstrap - Bootstrap Infrastructure
+ * 
+ * UMD bootstrap components, CDN loading, module registry.
+ */
+
+export { BootstrapLogger } from './bootstrap_logger.js';
+export { BootstrapHooks } from './bootstrap_hooks.js';
+export { CDNLoader } from './cdn_loader.js';
+export { ModuleRegistry } from './module_registry.js';
+export { loadPrismJS } from './prism_loader.js';

package/L1_Foundation/bootstrap/bootstrap_hooks.js

@@ -0,0 +1,123 @@
+/**
+ * Bootstrap Hooks - Lightweight inline hook manager for UMD bootstrap
+ * 
+ * Zero-dependency hook system used before ES modules load.
+ * Intentional duplication of core/hooks.js for UMD compatibility.
+ * 
+ * @module bootstrap/bootstrap_hooks
+ * @layer -1 (Bootstrap - loaded before all other layers)
+ * 
+ * Pattern: UMD module that creates browser global
+ * 
+ * Usage:
+ * ```javascript
+ * const hooks = createBootstrapHooks({ onConnected: () => {} }, logger);
+ * hooks.call('onConnected', data);
+ * hooks.register('onMessage', (msg) => {});
+ * ```
+ * 
+ * Extracted from bifrost_client.js (Phase 2)
+ */
+
+(function(root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define([], factory);
+  } else if (typeof module === 'object' && module.exports) {
+    module.exports = factory();
+  } else {
+    root.createBootstrapHooks = factory();
+  }
+}(typeof self !== 'undefined' ? self : this, () => {
+  'use strict';
+
+  /**
+   * Create a lightweight hook manager instance
+   * 
+   * @param {Object} initialHooks - Initial hooks object
+   * @param {Object} logger - Logger instance for debugging
+   * @returns {Object} Hook manager instance
+   */
+  function createBootstrapHooks(initialHooks = {}, logger = console) {
+    const hookManager = {
+      hooks: initialHooks,
+      errorHandler: null,
+      logger: logger,
+      
+      call: (hookName, ...args) => {
+        const hook = hookManager.hooks[hookName];
+        hookManager.logger.debug(`[Hooks] Calling hook: ${hookName}`);
+        
+        if (typeof hook === 'function') {
+          try {
+            return hook(...args);
+          } catch (error) {
+            // Log to console
+            hookManager.logger.error(`Error in ${hookName} hook:`, error);
+
+            // Display in UI if error handler is set
+            if (hookManager.errorHandler) {
+              try {
+                hookManager.errorHandler({
+                  type: 'hook_error',
+                  hookName,
+                  error,
+                  message: error.message,
+                  stack: error.stack
+                });
+              } catch (displayError) {
+                hookManager.logger.error('Error handler itself failed:', displayError);
+              }
+            }
+
+            // Call onError hook if it exists and isn't the one that failed
+            if (hookName !== 'onError' && hookManager.hooks.onError) {
+              try {
+                hookManager.hooks.onError(error);
+              } catch (onErrorError) {
+                hookManager.logger.error('onError hook failed:', onErrorError);
+              }
+            }
+          }
+        }
+      },
+      
+      has: (hookName) => {
+        return typeof hookManager.hooks[hookName] === 'function';
+      },
+      
+      register: (hookName, fn) => {
+        if (typeof fn === 'function') {
+          hookManager.hooks[hookName] = fn;
+          hookManager.logger.debug(`[Hooks] Registered hook: ${hookName}`);
+        } else {
+          hookManager.logger.error(`[Hooks] [ERROR] Failed to register hook ${hookName}: not a function`);
+        }
+      },
+      
+      unregister: (hookName) => {
+        delete hookManager.hooks[hookName];
+      },
+      
+      list: () => Object.keys(hookManager.hooks),
+      
+      // Dark mode utilities (requires dynamic import)
+      initBuiltInHooks: () => {
+        // Initialize dark mode from localStorage
+        const savedTheme = localStorage.getItem('zTheme-mode');
+        if (savedTheme === 'dark') {
+          hookManager._applyDarkMode(true);
+        }
+      },
+      
+      _applyDarkMode: async (isDark) => {
+        // Note: This requires import, so it's kept in bifrost_client.js
+        // This method is a placeholder that will be overridden
+        hookManager.logger.warn('[Hooks] _applyDarkMode not yet initialized');
+      }
+    };
+    
+    return hookManager;
+  }
+
+  return createBootstrapHooks;
+}));

package/L1_Foundation/bootstrap/bootstrap_index.js

@@ -0,0 +1,15 @@
+/**
+ * Bootstrap Module Barrel Export
+ * 
+ * Centralized exports for all bootstrap utilities.
+ * 
+ * @module bootstrap
+ * @layer -1 (Bootstrap)
+ */
+
+// Note: bootstrap_logger.js and bootstrap_hooks.js are UMD modules
+// They are loaded directly in bifrost_client.js via <script> tags or dynamic import
+// This barrel file only exports ES modules
+
+export * from './module_registry.js';
+export * from './cdn_loader.js';

package/L1_Foundation/bootstrap/bootstrap_logger.js

@@ -0,0 +1,135 @@
+/**
+ * Bootstrap Logger - Lightweight inline logger for UMD bootstrap
+ * 
+ * Zero-dependency logger used before ES modules load.
+ * Intentional duplication of core/logger.js for UMD compatibility.
+ * 
+ * @module bootstrap/bootstrap_logger
+ * @layer -1 (Bootstrap - loaded before all other layers)
+ * 
+ * Pattern: UMD module that creates browser global
+ * 
+ * Usage:
+ * ```javascript
+ * const logger = createBootstrapLogger('Bifrost', 'INFO');
+ * logger.log('Message');
+ * logger.error('Error');
+ * ```
+ * 
+ * Extracted from bifrost_client.js (Phase 2)
+ */
+
+(function(root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define([], factory);
+  } else if (typeof module === 'object' && module.exports) {
+    module.exports = factory();
+  } else {
+    root.createBootstrapLogger = factory();
+  }
+}(typeof self !== 'undefined' ? self : this, () => {
+  'use strict';
+
+  /**
+   * Create a lightweight logger instance
+   * 
+   * @param {string} context - Logger context name (e.g., 'Bifrost')
+   * @param {string} logLevel - Log level (DEBUG, INFO, WARN, ERROR)
+   * @returns {Object} Logger instance
+   */
+  function createBootstrapLogger(context = 'Bifrost', logLevel = 'INFO') {
+    const logger = {
+      levels: { DEBUG: 0, INFO: 1, WARN: 2, ERROR: 3 },
+      level: logLevel === 'DEBUG' ? 0 : logLevel === 'INFO' ? 1 : logLevel === 'WARN' ? 2 : 3,
+      context: context,
+      
+      _interpolate: (message, args) => {
+        if (args.length === 0) return message;
+        
+        // Support Python-style %s interpolation
+        if (message.includes('%s')) {
+          let result = message;
+          args.forEach(arg => {
+            result = result.replace('%s', String(arg));
+          });
+          return result;
+        }
+        
+        return message;
+      },
+      
+      _formatMessage: (level, message, args = []) => {
+        const interpolated = logger._interpolate(message, args);
+        
+        // ANSI color codes for browser console
+        const colors = {
+          debug: '\x1b[90m',     // Gray for DEBUG
+          info: '\x1b[34m',      // Blue for INFO
+          warn: '\x1b[33m',      // Yellow for WARN
+          error: '\x1b[91m',     // Bright red for ERROR
+          message: '\x1b[38;2;255;251;203m',  // Cream #fffbcb for message text
+          bold: '\x1b[1m',       // Bold
+          reset: '\x1b[0m'
+        };
+        
+        const levelColor = colors[level.toLowerCase()] || colors.info;
+        
+        return `${colors.bold}${levelColor}[${level}]${colors.reset}: ${colors.message}${interpolated}${colors.reset}`;
+      },
+      
+      debug: (message, ...args) => {
+        if (logger.level <= logger.levels.DEBUG) {
+          const formatted = logger._formatMessage('DEBUG', message, args);
+          console.debug(formatted, ...args.filter(arg => typeof arg === 'object'));
+        }
+      },
+      
+      info: (message, ...args) => {
+        if (logger.level <= logger.levels.INFO) {
+          const formatted = logger._formatMessage('INFO', message, args);
+          console.info(formatted, ...args.filter(arg => typeof arg === 'object'));
+        }
+      },
+      
+      log: (message, ...args) => {
+        if (logger.level <= logger.levels.INFO) {
+          const formatted = logger._formatMessage('INFO', message, args);
+          console.log(formatted, ...args.filter(arg => typeof arg === 'object'));
+        }
+      },
+      
+      error: (message, ...args) => {
+        const formatted = logger._formatMessage('ERROR', message, args);
+        console.error(formatted, ...args.filter(arg => typeof arg === 'object'));
+      },
+      
+      warn: (message, ...args) => {
+        if (logger.level <= logger.levels.WARN) {
+          const formatted = logger._formatMessage('WARN', message, args);
+          console.warn(formatted, ...args.filter(arg => typeof arg === 'object'));
+        }
+      },
+      
+      setLevel: (level) => {
+        const levelMap = { DEBUG: 0, INFO: 1, WARN: 2, ERROR: 3 };
+        logger.level = levelMap[level] || levelMap.INFO;
+      },
+      
+      enable: () => {
+        logger.level = logger.levels.DEBUG;
+      },
+      
+      disable: () => {
+        logger.level = logger.levels.ERROR;
+      },
+      
+      isEnabled: () => {
+        return logger.level <= logger.levels.INFO;
+      }
+    };
+    
+    return logger;
+  }
+
+  return createBootstrapLogger;
+}));

package/L1_Foundation/bootstrap/cdn_loader.js

@@ -0,0 +1,217 @@
+/**
+ * CDN Loader - External asset loading utilities
+ * 
+ * Centralized logic for loading external CSS/JS from CDNs.
+ * Extracted from bifrost_client.js to reduce main file size.
+ * 
+ * @module bootstrap/cdn_loader
+ * @layer -1 (Bootstrap)
+ * 
+ * Pattern: ES module (not UMD - only used by bifrost_client.js)
+ * 
+ * Usage:
+ * ```javascript
+ * import { loadZThemeCDN, loadBootstrapIcons, loadPrismJS } from './bootstrap/cdn_loader.js';
+ * await loadZThemeCDN('https://cdn.jsdelivr.net/gh/ZoloAi/zTheme@main/dist');
+ * await loadBootstrapIcons();
+ * await loadPrismJS();
+ * ```
+ * 
+ * Created in Phase 2
+ */
+
+/**
+ * Load zTheme CSS and JS from CDN
+ * 
+ * @param {string} cdnBaseUrl - CDN base URL (default: jsdelivr ZoloAi/zTheme)
+ * @param {Object} logger - Logger instance
+ * @returns {Promise<void>}
+ */
+export async function loadZThemeCDN(cdnBaseUrl = 'https://cdn.jsdelivr.net/gh/ZoloAi/zTheme@main/dist', logger = console) {
+  if (typeof document === 'undefined') {
+    logger.warn('[CDN] Not in browser environment - skipping zTheme CDN load');
+    return;
+  }
+
+  // Check if already loaded
+  if (document.querySelector('link[href*="zTheme"]')) {
+    logger.log('[CDN] zTheme CSS already loaded');
+    return;
+  }
+
+  logger.log(`[CDN] Loading zTheme from: ${cdnBaseUrl}`);
+
+  // Load CSS
+  const cssLink = document.createElement('link');
+  cssLink.rel = 'stylesheet';
+  cssLink.href = `${cdnBaseUrl}/zTheme.css`;
+  document.head.appendChild(cssLink);
+
+  // Load JS (if exists)
+  try {
+    const jsScript = document.createElement('script');
+    jsScript.src = `${cdnBaseUrl}/zTheme.js`;
+    jsScript.async = true;
+    document.head.appendChild(jsScript);
+    
+    await new Promise((resolve, reject) => {
+      jsScript.onload = resolve;
+      jsScript.onerror = () => {
+        logger.warn('[CDN] zTheme JS not found (CSS-only mode)');
+        resolve(); // Non-fatal
+      };
+    });
+  } catch (err) {
+    logger.warn('[CDN] Failed to load zTheme JS:', err);
+  }
+
+  logger.log('[CDN] zTheme loaded successfully');
+}
+
+/**
+ * Load Bootstrap Icons from CDN
+ * 
+ * @param {string} cdnUrl - CDN URL (default: jsdelivr bootstrap-icons)
+ * @param {Object} logger - Logger instance
+ * @returns {Promise<void>}
+ */
+export async function loadBootstrapIcons(
+  cdnUrl = 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css',
+  logger = console
+) {
+  if (typeof document === 'undefined') {
+    logger.warn('[CDN] Not in browser environment - skipping Bootstrap Icons');
+    return;
+  }
+
+  // Check if already loaded
+  if (document.querySelector('link[href*="bootstrap-icons"]')) {
+    logger.log('[CDN] Bootstrap Icons already loaded');
+    return;
+  }
+
+  logger.log('[CDN] Loading Bootstrap Icons');
+
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = cdnUrl;
+  document.head.appendChild(link);
+
+  await new Promise((resolve) => {
+    link.onload = resolve;
+    link.onerror = () => {
+      logger.warn('[CDN] Failed to load Bootstrap Icons');
+      resolve(); // Non-fatal
+    };
+  });
+
+  logger.log('[CDN] Bootstrap Icons loaded');
+}
+
+/**
+ * Load Prism.js from CDN
+ * 
+ * @param {string} baseUrl - Base URL for Prism assets
+ * @param {Object} logger - Logger instance
+ * @returns {Promise<void>}
+ */
+export async function loadPrismJS(baseUrl = null, logger = console) {
+  if (typeof document === 'undefined') {
+    logger.warn('[CDN] Not in browser environment - skipping Prism.js');
+    return;
+  }
+
+  // Check if already loaded
+  if (window.Prism) {
+    logger.log('[CDN] Prism.js already loaded');
+    return;
+  }
+
+  logger.log('[CDN] Loading Prism.js');
+
+  // Determine base URL (prefer local, fallback to CDN)
+  const prismBaseUrl = baseUrl || 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0';
+
+  // Load CSS
+  const cssLink = document.createElement('link');
+  cssLink.rel = 'stylesheet';
+  cssLink.href = `${prismBaseUrl}/themes/prism.css`;
+  document.head.appendChild(cssLink);
+
+  // Load JS
+  const script = document.createElement('script');
+  script.src = `${prismBaseUrl}/prism.js`;
+  script.async = true;
+  document.head.appendChild(script);
+
+  await new Promise((resolve) => {
+    script.onload = resolve;
+    script.onerror = () => {
+      logger.warn('[CDN] Failed to load Prism.js');
+      resolve(); // Non-fatal
+    };
+  });
+
+  logger.log('[CDN] Prism.js loaded');
+}
+
+/**
+ * Generic CSS loader
+ * 
+ * @param {string} href - CSS file URL
+ * @param {Object} logger - Logger instance
+ * @returns {Promise<void>}
+ */
+export async function loadCSS(href, logger = console) {
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  // Check if already loaded
+  if (document.querySelector(`link[href="${href}"]`)) {
+    logger.debug(`[CDN] CSS already loaded: ${href}`);
+    return;
+  }
+
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = href;
+  document.head.appendChild(link);
+
+  await new Promise((resolve) => {
+    link.onload = resolve;
+    link.onerror = () => {
+      logger.warn(`[CDN] Failed to load CSS: ${href}`);
+      resolve(); // Non-fatal
+    };
+  });
+}
+
+/**
+ * Generic JS loader
+ * 
+ * @param {string} src - JS file URL
+ * @param {Object} logger - Logger instance
+ * @returns {Promise<void>}
+ */
+export async function loadJS(src, logger = console) {
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  // Check if already loaded
+  if (document.querySelector(`script[src="${src}"]`)) {
+    logger.debug(`[CDN] JS already loaded: ${src}`);
+    return;
+  }
+
+  const script = document.createElement('script');
+  script.src = src;
+  script.async = true;
+  document.head.appendChild(script);
+
+  await new Promise((resolve, reject) => {
+    script.onload = resolve;
+    script.onerror = () => reject(new Error(`Failed to load: ${src}`));
+  });
+}

package/L1_Foundation/bootstrap/module_registry.js

@@ -0,0 +1,102 @@
+/**
+ * Module Registry - SSOT for dynamic module loading paths
+ * 
+ * Centralized registry of all dynamically loaded modules and their paths.
+ * Eliminates hardcoded string paths in _loadModule().
+ * 
+ * @module bootstrap/module_registry
+ * @layer -1 (Bootstrap)
+ * 
+ * Pattern: ES module (not UMD - only used by bifrost_client.js)
+ * 
+ * Usage:
+ * ```javascript
+ * import { MODULE_REGISTRY, getModulePath } from './bootstrap/module_registry.js';
+ * const path = getModulePath('connection');  // 'core/connection.js'
+ * ```
+ * 
+ * Created in Phase 2
+ */
+
+// ─────────────────────────────────────────────────────────────────
+// Module Registry - SSOT for all module paths
+// ─────────────────────────────────────────────────────────────────
+
+export const MODULE_REGISTRY = {
+  // L1 Foundation modules
+  connection: 'L1_Foundation/connection/connection.js',
+  logger: 'L1_Foundation/logger/logger.js',
+  
+  // L2 Handling modules
+  message_handler: 'L2_Handling/message/message_handler.js',
+  navigation_manager: 'L2_Handling/navigation/navigation_manager.js',
+  widget_hook_manager: 'L2_Handling/hooks/widget_hook_manager.js',
+  zvaf_manager: 'L2_Handling/zvaf/zvaf_manager.js',
+  error_display: 'zSys/errors/error_display.js', // Step 6: Moved to zSys
+  
+  // L2 Display: Orchestration
+  renderer: 'L2_Handling/display/orchestration/renderer.js',
+  zdisplay_orchestrator: 'L2_Handling/display/orchestration/zdisplay_orchestrator.js',
+  // L2 Display: Navigation
+  navigation_renderer: 'L2_Handling/display/navigation/navigation_renderer.js',
+  menu_renderer: 'L2_Handling/display/navigation/menu_renderer.js',
+  
+  // L2 Display: Inputs
+  form_renderer: 'L2_Handling/display/inputs/form_renderer.js',
+  button_renderer: 'L2_Handling/display/inputs/button_renderer.js',
+  input_renderer: 'L2_Handling/display/inputs/input_renderer.js',
+  
+  // L2 Display: Outputs
+  text_renderer: 'L2_Handling/display/outputs/text_renderer.js',
+  table_renderer: 'L2_Handling/display/outputs/table_renderer.js',
+  card_renderer: 'L2_Handling/display/outputs/card_renderer.js',
+  header_renderer: 'L2_Handling/display/outputs/header_renderer.js',
+  typography_renderer: 'L2_Handling/display/outputs/typography_renderer.js',
+  alert_renderer: 'L2_Handling/display/outputs/alert_renderer.js',
+  list_renderer: 'L2_Handling/display/outputs/list_renderer.js',
+  image_renderer: 'L2_Handling/display/outputs/image_renderer.js',
+  icon_renderer: 'L2_Handling/display/outputs/icon_renderer.js',
+  dl_renderer: 'L2_Handling/display/outputs/dl_renderer.js',
+  
+  // L2 Display: Composite
+  dashboard_renderer: 'L2_Handling/display/composite/dashboard_renderer.js',
+  terminal_renderer: 'L2_Handling/display/composite/terminal_renderer.js',
+  swiper_renderer: 'L2_Handling/display/composite/swiper_renderer.js',
+  wizard_conditional_renderer: 'L2_Handling/display/composite/wizard_conditional_renderer.js',
+  
+  // L2 Display: Feedback
+  progressbar_renderer: 'L2_Handling/display/feedback/progressbar_renderer.js',
+  spinner_renderer: 'L2_Handling/display/feedback/spinner_renderer.js',
+  
+  // L2 Display: Specialized
+  input_request_renderer: 'L2_Handling/display/specialized/input_request_renderer.js',
+};
+
+/**
+ * Get module path from registry
+ * 
+ * @param {string} moduleName - Module name (e.g., 'connection')
+ * @returns {string|null} Module path or null if not found
+ */
+export function getModulePath(moduleName) {
+  return MODULE_REGISTRY[moduleName] || null;
+}
+
+/**
+ * Get all registered module names
+ * 
+ * @returns {string[]} Array of module names
+ */
+export function getAllModuleNames() {
+  return Object.keys(MODULE_REGISTRY);
+}
+
+/**
+ * Check if module is registered
+ * 
+ * @param {string} moduleName - Module name to check
+ * @returns {boolean} True if module is registered
+ */
+export function isModuleRegistered(moduleName) {
+  return moduleName in MODULE_REGISTRY;
+}