@hypen-space/web 0.4.1 → 0.4.3

package/dist/dom/components/progressbar.d.ts

@@ -0,0 +1,5 @@
+/**
+ * ProgressBar Component
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const progressBarHandler: ComponentHandler;

package/dist/dom/components/route.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Route Component - Lazy rendering container for route content
+ * Stores component name as metadata, Router handles actual rendering
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const routeHandler: ComponentHandler;

package/dist/dom/components/route.js

@@ -32,7 +32,7 @@ var exports_route = {};
 __export(exports_route, {
   routeHandler: () => routeHandler
 });
-import { frameworkLoggers } from "@hypen-space/core";
+import { frameworkLoggers } from "@hypen-space/core/logger";
 var log, routeHandler;
 var init_route = __esm(() => {
   log = frameworkLoggers.router;
@@ -65,4 +65,4 @@ export {
   routeHandler
 };
 
-//# debugId=201C4C1C4724D29A64756E2164756E21
+//# debugId=F3E0E9255A1674A564756E2164756E21

package/dist/dom/components/route.js.map

@@ -2,9 +2,9 @@
   "version": 3,
   "sources": ["../src/dom/components/route.ts"],
   "sourcesContent": [
-    "/**\n * Route Component - Lazy rendering container for route content\n * Stores component name as metadata, Router handles actual rendering\n */\n\nimport type { ComponentHandler } from \"./index.js\";\nimport { frameworkLoggers } from \"@hypen-space/core\";\n\nconst log = frameworkLoggers.router;\n\nexport const routeHandler: ComponentHandler = {\n  create(): HTMLElement {\n    const el = document.createElement(\"div\");\n    el.style.display = \"flex\";\n    el.style.flexDirection = \"column\";\n    el.style.width = \"100%\";\n    el.dataset.hypenType = \"route\";\n    el.dataset.routeRendered = \"false\"; // Track if component has been rendered\n    return el;\n  },\n\n  applyProps(el: HTMLElement, props: Record<string, any>): void {\n    // Extract route path from props\n    const path = props.path || props[\"0\"] || \"/\";\n    el.dataset.routePath = String(path);\n    \n    // Check if this is a lazy route (has __lazy flag)\n    const isLazy = props.__lazy === true;\n    el.dataset.routeLazy = String(isLazy);\n    \n    // Store component name - either from explicit prop or from lazy child\n    const componentName = props.component || props.__lazy_child;\n    if (componentName) {\n      el.dataset.routeComponent = String(componentName);\n    }\n    \n    log.debug(`Route created: path=\"${path}\", lazy=${isLazy}, component=\"${el.dataset.routeComponent || 'none'}\"`);\n  },\n};\n\n"
+    "/**\n * Route Component - Lazy rendering container for route content\n * Stores component name as metadata, Router handles actual rendering\n */\n\nimport type { ComponentHandler } from \"./index.js\";\nimport { frameworkLoggers } from \"@hypen-space/core/logger\";\n\nconst log = frameworkLoggers.router;\n\nexport const routeHandler: ComponentHandler = {\n  create(): HTMLElement {\n    const el = document.createElement(\"div\");\n    el.style.display = \"flex\";\n    el.style.flexDirection = \"column\";\n    el.style.width = \"100%\";\n    el.dataset.hypenType = \"route\";\n    el.dataset.routeRendered = \"false\"; // Track if component has been rendered\n    return el;\n  },\n\n  applyProps(el: HTMLElement, props: Record<string, any>): void {\n    // Extract route path from props\n    const path = props.path || props[\"0\"] || \"/\";\n    el.dataset.routePath = String(path);\n    \n    // Check if this is a lazy route (has __lazy flag)\n    const isLazy = props.__lazy === true;\n    el.dataset.routeLazy = String(isLazy);\n    \n    // Store component name - either from explicit prop or from lazy child\n    const componentName = props.component || props.__lazy_child;\n    if (componentName) {\n      el.dataset.routeComponent = String(componentName);\n    }\n    \n    log.debug(`Route created: path=\"${path}\", lazy=${isLazy}, component=\"${el.dataset.routeComponent || 'none'}\"`);\n  },\n};\n\n"
   ],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;AAAA,IAEM,KAEO;AAAA;AAAA,EAFP,MAAM,iBAAiB;AAAA,EAEhB,eAAiC;AAAA,IAC5C,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,KAAK;AAAA,MACvC,GAAG,MAAM,UAAU;AAAA,MACnB,GAAG,MAAM,gBAAgB;AAAA,MACzB,GAAG,MAAM,QAAQ;AAAA,MACjB,GAAG,QAAQ,YAAY;AAAA,MACvB,GAAG,QAAQ,gBAAgB;AAAA,MAC3B,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,MAE5D,MAAM,OAAO,MAAM,QAAQ,MAAM,QAAQ;AAAA,MACzC,GAAG,QAAQ,YAAY,OAAO,IAAI;AAAA,MAGlC,MAAM,SAAS,MAAM,WAAW;AAAA,MAChC,GAAG,QAAQ,YAAY,OAAO,MAAM;AAAA,MAGpC,MAAM,gBAAgB,MAAM,aAAa,MAAM;AAAA,MAC/C,IAAI,eAAe;AAAA,QACjB,GAAG,QAAQ,iBAAiB,OAAO,aAAa;AAAA,MAClD;AAAA,MAEA,IAAI,MAAM,wBAAwB,eAAe,sBAAsB,GAAG,QAAQ,kBAAkB,SAAS;AAAA;AAAA,EAEjH;AAAA;",
-  "debugId": "201C4C1C4724D29A64756E2164756E21",
+  "debugId": "F3E0E9255A1674A564756E2164756E21",
   "names": []
 }

package/dist/dom/components/router.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Router Component - Container for routes
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const routerHandler: ComponentHandler;

package/dist/dom/components/row.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Row Component - Horizontal Stack
+ * Children keep their intrinsic size by default (matching iOS/Android behavior).
+ * Use .weight(1) on children to make them expand equally.
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const rowHandler: ComponentHandler;

package/dist/dom/components/select.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Select Component
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const selectHandler: ComponentHandler;

package/dist/dom/components/slider.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Slider Component (Range Input)
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const sliderHandler: ComponentHandler;

package/dist/dom/components/spacer.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Spacer Component - Flexible space in flex layouts
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const spacerHandler: ComponentHandler;

package/dist/dom/components/spinner.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Spinner Component (Loading Indicator)
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const spinnerHandler: ComponentHandler;

package/dist/dom/components/stack.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Stack Component - Overlaying elements with absolute positioning
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const stackHandler: ComponentHandler;

package/dist/dom/components/switch.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Switch Component (Toggle)
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const switchHandler: ComponentHandler;

package/dist/dom/components/text.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Text Component
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const textHandler: ComponentHandler;

package/dist/dom/components/textarea.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Textarea Component
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const textareaHandler: ComponentHandler;

package/dist/dom/components/video.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Video Component
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const videoHandler: ComponentHandler;

package/dist/dom/debug.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Debug utilities for DOM rendering visualization
+ *
+ * Provides heatmap overlays to visualize re-renders
+ */
+export interface DebugConfig {
+    /** Enable debug mode */
+    enabled: boolean;
+    /** Show heatmap overlays on re-renders */
+    showHeatmap: boolean;
+    /** Increment per re-render (default: 5%) */
+    heatmapIncrement: number;
+    /** Maximum opacity for heatmap (default: 0.8) */
+    maxOpacity: number;
+    /** Fade out duration in ms (0 to disable) */
+    fadeOutDuration: number;
+}
+export declare const defaultDebugConfig: DebugConfig;
+/**
+ * Tracks re-render counts for each element
+ */
+export declare class RerenderTracker {
+    private renderCounts;
+    private overlays;
+    private config;
+    constructor(config?: DebugConfig);
+    /**
+     * Update the configuration
+     */
+    setConfig(config: Partial<DebugConfig>): void;
+    /**
+     * Track a re-render for an element
+     */
+    trackRerender(id: string, element: HTMLElement, patchType: string): void;
+    /**
+     * Create or update the heatmap overlay for an element
+     */
+    private updateHeatmap;
+    /**
+     * Reset tracking for a specific element
+     */
+    reset(id: string): void;
+    /**
+     * Reset tracking for all elements
+     */
+    resetAll(): void;
+    /**
+     * Get render count for an element
+     */
+    getRenderCount(id: string): number;
+    /**
+     * Clean up all overlays (called when debug mode is disabled)
+     */
+    private cleanup;
+    /**
+     * Get statistics about re-renders
+     */
+    getStats(): {
+        totalRerenders: number;
+        elementCount: number;
+        avgRerenders: number;
+    };
+}

package/dist/dom/debug.js

@@ -28,7 +28,7 @@ var __export = (target, all) => {
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 
 // src/dom/debug.ts
-import { frameworkLoggers } from "@hypen-space/core";
+import { frameworkLoggers } from "@hypen-space/core/logger";
 var log = frameworkLoggers.debug;
 var defaultDebugConfig = {
   enabled: false,
@@ -194,4 +194,4 @@ export {
   RerenderTracker
 };
 
-//# debugId=3A6B7464F3DF802964756E2164756E21
+//# debugId=6D5CACC8379C540864756E2164756E21

package/dist/dom/debug.js.map

@@ -2,9 +2,9 @@
   "version": 3,
   "sources": ["../src/dom/debug.ts"],
   "sourcesContent": [
-    "/**\n * Debug utilities for DOM rendering visualization\n *\n * Provides heatmap overlays to visualize re-renders\n */\n\nimport { frameworkLoggers } from \"@hypen-space/core\";\n\nconst log = frameworkLoggers.debug;\n\nexport interface DebugConfig {\n  /** Enable debug mode */\n  enabled: boolean;\n  /** Show heatmap overlays on re-renders */\n  showHeatmap: boolean;\n  /** Increment per re-render (default: 5%) */\n  heatmapIncrement: number;\n  /** Maximum opacity for heatmap (default: 0.8) */\n  maxOpacity: number;\n  /** Fade out duration in ms (0 to disable) */\n  fadeOutDuration: number;\n}\n\nexport const defaultDebugConfig: DebugConfig = {\n  enabled: false,\n  showHeatmap: true,\n  heatmapIncrement: 5,\n  maxOpacity: 0.8,\n  fadeOutDuration: 2000,\n};\n\n/**\n * Tracks re-render counts for each element\n */\nexport class RerenderTracker {\n  private renderCounts = new Map<string, number>();\n  private overlays = new Map<string, HTMLDivElement>();\n  private config: DebugConfig;\n\n  constructor(config: DebugConfig = defaultDebugConfig) {\n    this.config = config;\n  }\n\n  /**\n   * Update the configuration\n   */\n  setConfig(config: Partial<DebugConfig>): void {\n    this.config = { ...this.config, ...config };\n\n    // If debug mode is disabled, clean up all overlays\n    if (!this.config.enabled) {\n      this.cleanup();\n    }\n  }\n\n  /**\n   * Track a re-render for an element\n   */\n  trackRerender(id: string, element: HTMLElement, patchType: string): void {\n    if (!this.config.enabled || !this.config.showHeatmap) {\n      return;\n    }\n\n    log.debug(`Tracking re-render: ${id} - ${patchType}`);\n\n    // Increment render count\n    const currentCount = this.renderCounts.get(id) || 0;\n    const newCount = currentCount + 1;\n    this.renderCounts.set(id, newCount);\n\n    // Create or update heatmap overlay\n    this.updateHeatmap(id, element, newCount, patchType);\n  }\n\n  /**\n   * Create or update the heatmap overlay for an element\n   */\n  private updateHeatmap(id: string, element: HTMLElement, renderCount: number, patchType: string): void {\n    // Calculate opacity based on render count (increment by heatmapIncrement% each time)\n    const opacity = Math.min(\n      (renderCount * this.config.heatmapIncrement) / 100,\n      this.config.maxOpacity\n    );\n\n    log.debug(`Updating heatmap for ${id}, count: ${renderCount}, opacity: ${opacity}`);\n\n    // For inline elements or text, use a simpler approach: background color + outline\n    const isInline = window.getComputedStyle(element).display.includes('inline');\n\n    if (isInline || element.tagName === 'SPAN') {\n      // Store original styles if not already stored\n      if (!element.dataset.hypenDebugOriginalBg) {\n        element.dataset.hypenDebugOriginalBg = element.style.backgroundColor || '';\n        element.dataset.hypenDebugOriginalOutline = element.style.outline || '';\n        element.dataset.hypenDebugOriginalPosition = element.style.position || '';\n      }\n\n      // Apply red background and outline directly to the element\n      element.style.backgroundColor = `rgba(255, 0, 0, ${Math.max(opacity, 0.15)})`;\n      element.style.outline = `2px solid rgba(255, 0, 0, ${Math.max(opacity + 0.2, 0.3)})`;\n      element.style.outlineOffset = '2px';\n      element.style.position = 'relative';\n\n      // Add count badge as ::before pseudo-element or data attribute\n      element.setAttribute('data-hypen-renders', `${renderCount}× ${patchType}`);\n\n      // Add CSS for the badge if not already added\n      if (!document.getElementById('hypen-debug-styles')) {\n        const style = document.createElement('style');\n        style.id = 'hypen-debug-styles';\n        style.textContent = `\n          [data-hypen-renders]::before {\n            content: attr(data-hypen-renders);\n            position: absolute;\n            top: -18px;\n            left: 0;\n            background: rgba(255, 0, 0, 0.9);\n            color: white;\n            padding: 2px 6px;\n            font-size: 10px;\n            font-family: 'Courier New', monospace;\n            font-weight: bold;\n            border-radius: 3px;\n            z-index: 999999;\n            pointer-events: none;\n            white-space: nowrap;\n            text-shadow: none;\n          }\n        `;\n        document.head.appendChild(style);\n      }\n\n      // Store in overlays map for cleanup\n      this.overlays.set(id, element as any);\n\n      // Fade out after duration if enabled\n      if (this.config.fadeOutDuration > 0) {\n        setTimeout(() => {\n          const originalBg = element.dataset.hypenDebugOriginalBg || '';\n          const originalOutline = element.dataset.hypenDebugOriginalOutline || '';\n          element.style.backgroundColor = originalBg;\n          element.style.outline = originalOutline;\n          element.style.opacity = '1';\n        }, this.config.fadeOutDuration);\n      }\n    } else {\n      // For block elements, use overlay approach\n      let overlay = this.overlays.get(id);\n\n      if (!overlay) {\n        overlay = document.createElement(\"div\");\n        overlay.className = \"hypen-debug-overlay\";\n        overlay.style.cssText = `\n          position: absolute;\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          pointer-events: none;\n          z-index: 999999 !important;\n          transition: opacity ${this.config.fadeOutDuration}ms ease-out;\n          border: 2px solid rgba(255, 0, 0, 0.7) !important;\n          box-sizing: border-box;\n          font-size: 11px;\n          color: white;\n          text-shadow: 0 0 3px black, 0 0 5px black;\n          padding: 4px;\n          font-family: 'Courier New', monospace;\n          font-weight: bold;\n          display: block !important;\n          visibility: visible !important;\n        `;\n\n        const currentPosition = window.getComputedStyle(element).position;\n        if (currentPosition === 'static') {\n          element.style.position = 'relative';\n        }\n\n        element.appendChild(overlay);\n        this.overlays.set(id, overlay);\n      }\n\n      overlay.style.backgroundColor = `rgba(255, 0, 0, ${Math.max(opacity, 0.15)})`;\n      overlay.style.opacity = '1';\n      overlay.textContent = `${renderCount}× ${patchType}`;\n\n      if (this.config.fadeOutDuration > 0) {\n        setTimeout(() => {\n          if (overlay) {\n            overlay.style.opacity = '0.2';\n          }\n        }, this.config.fadeOutDuration);\n      }\n    }\n  }\n\n  /**\n   * Reset tracking for a specific element\n   */\n  reset(id: string): void {\n    this.renderCounts.delete(id);\n    const overlay = this.overlays.get(id);\n    if (overlay) {\n      overlay.remove();\n      this.overlays.delete(id);\n    }\n  }\n\n  /**\n   * Reset tracking for all elements\n   */\n  resetAll(): void {\n    this.renderCounts.clear();\n    for (const overlay of this.overlays.values()) {\n      overlay.remove();\n    }\n    this.overlays.clear();\n  }\n\n  /**\n   * Get render count for an element\n   */\n  getRenderCount(id: string): number {\n    return this.renderCounts.get(id) || 0;\n  }\n\n  /**\n   * Clean up all overlays (called when debug mode is disabled)\n   */\n  private cleanup(): void {\n    for (const overlay of this.overlays.values()) {\n      overlay.remove();\n    }\n    this.overlays.clear();\n  }\n\n  /**\n   * Get statistics about re-renders\n   */\n  getStats(): { totalRerenders: number; elementCount: number; avgRerenders: number } {\n    const totalRerenders = Array.from(this.renderCounts.values()).reduce((sum, count) => sum + count, 0);\n    const elementCount = this.renderCounts.size;\n    const avgRerenders = elementCount > 0 ? totalRerenders / elementCount : 0;\n\n    return {\n      totalRerenders,\n      elementCount,\n      avgRerenders: Math.round(avgRerenders * 100) / 100,\n    };\n  }\n}\n"
+    "/**\n * Debug utilities for DOM rendering visualization\n *\n * Provides heatmap overlays to visualize re-renders\n */\n\nimport { frameworkLoggers } from \"@hypen-space/core/logger\";\n\nconst log = frameworkLoggers.debug;\n\nexport interface DebugConfig {\n  /** Enable debug mode */\n  enabled: boolean;\n  /** Show heatmap overlays on re-renders */\n  showHeatmap: boolean;\n  /** Increment per re-render (default: 5%) */\n  heatmapIncrement: number;\n  /** Maximum opacity for heatmap (default: 0.8) */\n  maxOpacity: number;\n  /** Fade out duration in ms (0 to disable) */\n  fadeOutDuration: number;\n}\n\nexport const defaultDebugConfig: DebugConfig = {\n  enabled: false,\n  showHeatmap: true,\n  heatmapIncrement: 5,\n  maxOpacity: 0.8,\n  fadeOutDuration: 2000,\n};\n\n/**\n * Tracks re-render counts for each element\n */\nexport class RerenderTracker {\n  private renderCounts = new Map<string, number>();\n  private overlays = new Map<string, HTMLDivElement>();\n  private config: DebugConfig;\n\n  constructor(config: DebugConfig = defaultDebugConfig) {\n    this.config = config;\n  }\n\n  /**\n   * Update the configuration\n   */\n  setConfig(config: Partial<DebugConfig>): void {\n    this.config = { ...this.config, ...config };\n\n    // If debug mode is disabled, clean up all overlays\n    if (!this.config.enabled) {\n      this.cleanup();\n    }\n  }\n\n  /**\n   * Track a re-render for an element\n   */\n  trackRerender(id: string, element: HTMLElement, patchType: string): void {\n    if (!this.config.enabled || !this.config.showHeatmap) {\n      return;\n    }\n\n    log.debug(`Tracking re-render: ${id} - ${patchType}`);\n\n    // Increment render count\n    const currentCount = this.renderCounts.get(id) || 0;\n    const newCount = currentCount + 1;\n    this.renderCounts.set(id, newCount);\n\n    // Create or update heatmap overlay\n    this.updateHeatmap(id, element, newCount, patchType);\n  }\n\n  /**\n   * Create or update the heatmap overlay for an element\n   */\n  private updateHeatmap(id: string, element: HTMLElement, renderCount: number, patchType: string): void {\n    // Calculate opacity based on render count (increment by heatmapIncrement% each time)\n    const opacity = Math.min(\n      (renderCount * this.config.heatmapIncrement) / 100,\n      this.config.maxOpacity\n    );\n\n    log.debug(`Updating heatmap for ${id}, count: ${renderCount}, opacity: ${opacity}`);\n\n    // For inline elements or text, use a simpler approach: background color + outline\n    const isInline = window.getComputedStyle(element).display.includes('inline');\n\n    if (isInline || element.tagName === 'SPAN') {\n      // Store original styles if not already stored\n      if (!element.dataset.hypenDebugOriginalBg) {\n        element.dataset.hypenDebugOriginalBg = element.style.backgroundColor || '';\n        element.dataset.hypenDebugOriginalOutline = element.style.outline || '';\n        element.dataset.hypenDebugOriginalPosition = element.style.position || '';\n      }\n\n      // Apply red background and outline directly to the element\n      element.style.backgroundColor = `rgba(255, 0, 0, ${Math.max(opacity, 0.15)})`;\n      element.style.outline = `2px solid rgba(255, 0, 0, ${Math.max(opacity + 0.2, 0.3)})`;\n      element.style.outlineOffset = '2px';\n      element.style.position = 'relative';\n\n      // Add count badge as ::before pseudo-element or data attribute\n      element.setAttribute('data-hypen-renders', `${renderCount}× ${patchType}`);\n\n      // Add CSS for the badge if not already added\n      if (!document.getElementById('hypen-debug-styles')) {\n        const style = document.createElement('style');\n        style.id = 'hypen-debug-styles';\n        style.textContent = `\n          [data-hypen-renders]::before {\n            content: attr(data-hypen-renders);\n            position: absolute;\n            top: -18px;\n            left: 0;\n            background: rgba(255, 0, 0, 0.9);\n            color: white;\n            padding: 2px 6px;\n            font-size: 10px;\n            font-family: 'Courier New', monospace;\n            font-weight: bold;\n            border-radius: 3px;\n            z-index: 999999;\n            pointer-events: none;\n            white-space: nowrap;\n            text-shadow: none;\n          }\n        `;\n        document.head.appendChild(style);\n      }\n\n      // Store in overlays map for cleanup\n      this.overlays.set(id, element as any);\n\n      // Fade out after duration if enabled\n      if (this.config.fadeOutDuration > 0) {\n        setTimeout(() => {\n          const originalBg = element.dataset.hypenDebugOriginalBg || '';\n          const originalOutline = element.dataset.hypenDebugOriginalOutline || '';\n          element.style.backgroundColor = originalBg;\n          element.style.outline = originalOutline;\n          element.style.opacity = '1';\n        }, this.config.fadeOutDuration);\n      }\n    } else {\n      // For block elements, use overlay approach\n      let overlay = this.overlays.get(id);\n\n      if (!overlay) {\n        overlay = document.createElement(\"div\");\n        overlay.className = \"hypen-debug-overlay\";\n        overlay.style.cssText = `\n          position: absolute;\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          pointer-events: none;\n          z-index: 999999 !important;\n          transition: opacity ${this.config.fadeOutDuration}ms ease-out;\n          border: 2px solid rgba(255, 0, 0, 0.7) !important;\n          box-sizing: border-box;\n          font-size: 11px;\n          color: white;\n          text-shadow: 0 0 3px black, 0 0 5px black;\n          padding: 4px;\n          font-family: 'Courier New', monospace;\n          font-weight: bold;\n          display: block !important;\n          visibility: visible !important;\n        `;\n\n        const currentPosition = window.getComputedStyle(element).position;\n        if (currentPosition === 'static') {\n          element.style.position = 'relative';\n        }\n\n        element.appendChild(overlay);\n        this.overlays.set(id, overlay);\n      }\n\n      overlay.style.backgroundColor = `rgba(255, 0, 0, ${Math.max(opacity, 0.15)})`;\n      overlay.style.opacity = '1';\n      overlay.textContent = `${renderCount}× ${patchType}`;\n\n      if (this.config.fadeOutDuration > 0) {\n        setTimeout(() => {\n          if (overlay) {\n            overlay.style.opacity = '0.2';\n          }\n        }, this.config.fadeOutDuration);\n      }\n    }\n  }\n\n  /**\n   * Reset tracking for a specific element\n   */\n  reset(id: string): void {\n    this.renderCounts.delete(id);\n    const overlay = this.overlays.get(id);\n    if (overlay) {\n      overlay.remove();\n      this.overlays.delete(id);\n    }\n  }\n\n  /**\n   * Reset tracking for all elements\n   */\n  resetAll(): void {\n    this.renderCounts.clear();\n    for (const overlay of this.overlays.values()) {\n      overlay.remove();\n    }\n    this.overlays.clear();\n  }\n\n  /**\n   * Get render count for an element\n   */\n  getRenderCount(id: string): number {\n    return this.renderCounts.get(id) || 0;\n  }\n\n  /**\n   * Clean up all overlays (called when debug mode is disabled)\n   */\n  private cleanup(): void {\n    for (const overlay of this.overlays.values()) {\n      overlay.remove();\n    }\n    this.overlays.clear();\n  }\n\n  /**\n   * Get statistics about re-renders\n   */\n  getStats(): { totalRerenders: number; elementCount: number; avgRerenders: number } {\n    const totalRerenders = Array.from(this.renderCounts.values()).reduce((sum, count) => sum + count, 0);\n    const elementCount = this.renderCounts.size;\n    const avgRerenders = elementCount > 0 ? totalRerenders / elementCount : 0;\n\n    return {\n      totalRerenders,\n      elementCount,\n      avgRerenders: Math.round(avgRerenders * 100) / 100,\n    };\n  }\n}\n"
   ],
   "mappings": "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",
-  "debugId": "3A6B7464F3DF802964756E2164756E21",
+  "debugId": "6D5CACC8379C540864756E2164756E21",
   "names": []
 }

package/dist/dom/element-data.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Type-Safe Element Data
+ *
+ * Provides strongly-typed access to Hypen-specific data attached to DOM elements.
+ * Eliminates `as any` casts throughout the codebase.
+ */
+/**
+ * Engine interface for dispatching actions
+ */
+export interface IEngine {
+    dispatchAction(name: string, payload?: unknown): void;
+}
+/**
+ * All Hypen-specific data attached to an element
+ */
+export interface HypenElementData {
+    /** Engine reference for action dispatch */
+    engine?: IEngine;
+    /** Target key for keyboard events (e.g., "Enter", "Escape") */
+    keyTarget?: string;
+    /** Set of registered event type:action pairs */
+    registeredEvents?: Set<string>;
+    /** Custom element metadata */
+    meta?: Record<string, unknown>;
+}
+/**
+ * Get Hypen data for an element, creating if needed
+ */
+export declare function getHypenData(element: HTMLElement): HypenElementData;
+/**
+ * Check if element has Hypen data
+ */
+export declare function hasHypenData(element: HTMLElement): boolean;
+/**
+ * Clear Hypen data from an element
+ */
+export declare function clearHypenData(element: HTMLElement): void;
+/**
+ * Get the engine attached to an element
+ */
+export declare function getEngine(element: HTMLElement): IEngine | undefined;
+/**
+ * Set the engine on an element
+ */
+export declare function setEngine(element: HTMLElement, engine: IEngine): void;
+/**
+ * Find engine by walking up the DOM tree
+ */
+export declare function findEngine(element: HTMLElement): IEngine | undefined;
+/**
+ * Get registered events set for an element
+ */
+export declare function getRegisteredEvents(element: HTMLElement): Set<string>;
+/**
+ * Check if an event handler is registered
+ */
+export declare function isEventRegistered(element: HTMLElement, eventKey: string): boolean;
+/**
+ * Mark an event handler as registered
+ */
+export declare function registerEvent(element: HTMLElement, eventKey: string): void;
+/**
+ * Unregister an event handler
+ */
+export declare function unregisterEvent(element: HTMLElement, eventKey: string): void;
+/**
+ * Get the target key for keyboard events
+ */
+export declare function getKeyTarget(element: HTMLElement): string | undefined;
+/**
+ * Set the target key for keyboard events
+ */
+export declare function setKeyTarget(element: HTMLElement, key: string): void;
+/**
+ * Get custom metadata value
+ */
+export declare function getMeta<T>(element: HTMLElement, key: string): T | undefined;
+/**
+ * Set custom metadata value
+ */
+export declare function setMeta<T>(element: HTMLElement, key: string, value: T): void;
+/**
+ * Dispose all resources attached to an element and clear data
+ * Call this when removing an element from the DOM
+ */
+export declare function disposeHypenElement(element: HTMLElement): void;
+/**
+ * Legacy accessor for engine (backwards compatible with existing code)
+ */
+export declare function getLegacyEngine(element: HTMLElement): IEngine | undefined;
+/**
+ * Legacy setter for engine (backwards compatible)
+ */
+export declare function setLegacyEngine(element: HTMLElement, engine: IEngine): void;

package/dist/dom/events.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Event Management System
+ *
+ * Handles DOM event binding and action dispatching
+ */
+interface IEngine {
+    dispatchAction(name: string, payload?: any): void;
+}
+export interface EventBinding {
+    elementId: string;
+    eventName: string;
+    actionName: string;
+}
+export declare class EventManager {
+    private engine;
+    private bindings;
+    constructor(engine: IEngine);
+    /**
+     * Attach an event listener to an element
+     */
+    attach(elementId: string, element: HTMLElement, eventName: string, actionName: string): void;
+    /**
+     * Detach an event listener from an element
+     */
+    detach(elementId: string, element: HTMLElement, eventName: string): void;
+    /**
+     * Extract relevant data from an event
+     */
+    private extractEventData;
+    /**
+     * Clear all event bindings for an element
+     */
+    clearElement(elementId: string, element: HTMLElement): void;
+    /**
+     * Clear all event bindings
+     */
+    clearAll(): void;
+}
+export {};

package/dist/dom/events.js

@@ -28,7 +28,7 @@ var __export = (target, all) => {
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 
 // src/dom/events.ts
-import { frameworkLoggers } from "@hypen-space/core";
+import { frameworkLoggers } from "@hypen-space/core/logger";
 var log = frameworkLoggers.events;
 
 class EventManager {
@@ -137,4 +137,4 @@ export {
   EventManager
 };
 
-//# debugId=CFF27E1FA4869F5864756E2164756E21
+//# debugId=AB9487AE99F7A49464756E2164756E21

package/dist/dom/events.js.map

@@ -2,9 +2,9 @@
   "version": 3,
   "sources": ["../src/dom/events.ts"],
   "sourcesContent": [
-    "/**\n * Event Management System\n *\n * Handles DOM event binding and action dispatching\n */\n\nimport { frameworkLoggers } from \"@hypen-space/core\";\n\nconst log = frameworkLoggers.events;\n\n// Interface for the engine that EventManager needs\ninterface IEngine {\n  dispatchAction(name: string, payload?: any): void;\n}\n\nexport interface EventBinding {\n  elementId: string;\n  eventName: string;\n  actionName: string;\n}\n\nexport class EventManager {\n  private engine: IEngine;\n  private bindings: Map<string, Map<string, EventListener>> = new Map();\n\n  constructor(engine: IEngine) {\n    this.engine = engine;\n  }\n\n  /**\n   * Attach an event listener to an element\n   */\n  attach(elementId: string, element: HTMLElement, eventName: string, actionName: string): void {\n    // Convert onClick to click for DOM events\n    const domEventName = eventName === \"onClick\" ? \"click\" : eventName;\n    log.debug(`Attaching ${eventName} (DOM: ${domEventName}) to element ${elementId}, action: ${actionName}`);\n\n    // Create event listener that dispatches action\n    const listener = (event: Event) => {\n      log.debug(`Event fired: ${eventName} on ${elementId}, dispatching action: ${actionName}`);\n      log.debug(`Event object:`, event);\n      log.debug(`Element:`, element);\n\n      // Prevent default for certain events\n      if (eventName === \"submit\" || (eventName === \"click\" && element.tagName === \"A\")) {\n        event.preventDefault();\n      }\n\n      // Extract event data\n      const payload = this.extractEventData(event, element);\n      log.debug(`Event payload:`, payload);\n\n      // Dispatch action to engine\n      log.debug(`Calling engine.dispatchAction(${actionName})`);\n      try {\n        this.engine.dispatchAction(actionName, payload);\n        log.debug(`dispatchAction succeeded`);\n      } catch (error) {\n        log.error(`dispatchAction failed:`, error);\n      }\n    };\n\n    // Store listener reference\n    let elementBindings = this.bindings.get(elementId);\n    if (!elementBindings) {\n      elementBindings = new Map();\n      this.bindings.set(elementId, elementBindings);\n    }\n    elementBindings.set(eventName, listener);\n\n    // Attach to DOM\n    element.addEventListener(domEventName, listener);\n    log.debug(`Listener attached to DOM for ${domEventName}`);\n    log.debug(`Element details:`, {\n      tagName: element.tagName,\n      id: element.id,\n      dataset: element.dataset,\n      textContent: element.textContent?.substring(0, 50)\n    });\n\n    // Test: Add a simple click listener to verify DOM events work\n    if (domEventName === \"click\") {\n      element.addEventListener(\"click\", (e) => {\n        log.debug(`Raw DOM click detected on ${element.tagName}`, e);\n      });\n    }\n  }\n\n  /**\n   * Detach an event listener from an element\n   */\n  detach(elementId: string, element: HTMLElement, eventName: string): void {\n    const elementBindings = this.bindings.get(elementId);\n    if (!elementBindings) return;\n\n    const listener = elementBindings.get(eventName);\n    if (listener) {\n      element.removeEventListener(eventName, listener);\n      elementBindings.delete(eventName);\n    }\n\n    if (elementBindings.size === 0) {\n      this.bindings.delete(elementId);\n    }\n  }\n\n  /**\n   * Extract relevant data from an event\n   */\n  private extractEventData(event: Event, element: HTMLElement): any {\n    const data: any = {\n      type: event.type,\n      timestamp: Date.now(),\n    };\n\n    // Mouse events\n    if (event instanceof MouseEvent) {\n      data.clientX = event.clientX;\n      data.clientY = event.clientY;\n      data.button = event.button;\n    }\n\n    // Keyboard events\n    if (event instanceof KeyboardEvent) {\n      data.key = event.key;\n      data.code = event.code;\n      data.ctrlKey = event.ctrlKey;\n      data.shiftKey = event.shiftKey;\n      data.altKey = event.altKey;\n      data.metaKey = event.metaKey;\n    }\n\n    // Input events (for form elements)\n    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {\n      data.value = element.value;\n    }\n\n    // Select events\n    if (element instanceof HTMLSelectElement) {\n      data.value = element.value;\n      data.selectedIndex = element.selectedIndex;\n    }\n\n    // Form events\n    if (event.type === \"submit\" && element instanceof HTMLFormElement) {\n      data.formData = new FormData(element);\n    }\n\n    return data;\n  }\n\n  /**\n   * Clear all event bindings for an element\n   */\n  clearElement(elementId: string, element: HTMLElement): void {\n    const elementBindings = this.bindings.get(elementId);\n    if (!elementBindings) return;\n\n    for (const [eventName, listener] of elementBindings) {\n      element.removeEventListener(eventName, listener);\n    }\n\n    this.bindings.delete(elementId);\n  }\n\n  /**\n   * Clear all event bindings\n   */\n  clearAll(): void {\n    this.bindings.clear();\n  }\n}\n"
+    "/**\n * Event Management System\n *\n * Handles DOM event binding and action dispatching\n */\n\nimport { frameworkLoggers } from \"@hypen-space/core/logger\";\n\nconst log = frameworkLoggers.events;\n\n// Interface for the engine that EventManager needs\ninterface IEngine {\n  dispatchAction(name: string, payload?: any): void;\n}\n\nexport interface EventBinding {\n  elementId: string;\n  eventName: string;\n  actionName: string;\n}\n\nexport class EventManager {\n  private engine: IEngine;\n  private bindings: Map<string, Map<string, EventListener>> = new Map();\n\n  constructor(engine: IEngine) {\n    this.engine = engine;\n  }\n\n  /**\n   * Attach an event listener to an element\n   */\n  attach(elementId: string, element: HTMLElement, eventName: string, actionName: string): void {\n    // Convert onClick to click for DOM events\n    const domEventName = eventName === \"onClick\" ? \"click\" : eventName;\n    log.debug(`Attaching ${eventName} (DOM: ${domEventName}) to element ${elementId}, action: ${actionName}`);\n\n    // Create event listener that dispatches action\n    const listener = (event: Event) => {\n      log.debug(`Event fired: ${eventName} on ${elementId}, dispatching action: ${actionName}`);\n      log.debug(`Event object:`, event);\n      log.debug(`Element:`, element);\n\n      // Prevent default for certain events\n      if (eventName === \"submit\" || (eventName === \"click\" && element.tagName === \"A\")) {\n        event.preventDefault();\n      }\n\n      // Extract event data\n      const payload = this.extractEventData(event, element);\n      log.debug(`Event payload:`, payload);\n\n      // Dispatch action to engine\n      log.debug(`Calling engine.dispatchAction(${actionName})`);\n      try {\n        this.engine.dispatchAction(actionName, payload);\n        log.debug(`dispatchAction succeeded`);\n      } catch (error) {\n        log.error(`dispatchAction failed:`, error);\n      }\n    };\n\n    // Store listener reference\n    let elementBindings = this.bindings.get(elementId);\n    if (!elementBindings) {\n      elementBindings = new Map();\n      this.bindings.set(elementId, elementBindings);\n    }\n    elementBindings.set(eventName, listener);\n\n    // Attach to DOM\n    element.addEventListener(domEventName, listener);\n    log.debug(`Listener attached to DOM for ${domEventName}`);\n    log.debug(`Element details:`, {\n      tagName: element.tagName,\n      id: element.id,\n      dataset: element.dataset,\n      textContent: element.textContent?.substring(0, 50)\n    });\n\n    // Test: Add a simple click listener to verify DOM events work\n    if (domEventName === \"click\") {\n      element.addEventListener(\"click\", (e) => {\n        log.debug(`Raw DOM click detected on ${element.tagName}`, e);\n      });\n    }\n  }\n\n  /**\n   * Detach an event listener from an element\n   */\n  detach(elementId: string, element: HTMLElement, eventName: string): void {\n    const elementBindings = this.bindings.get(elementId);\n    if (!elementBindings) return;\n\n    const listener = elementBindings.get(eventName);\n    if (listener) {\n      element.removeEventListener(eventName, listener);\n      elementBindings.delete(eventName);\n    }\n\n    if (elementBindings.size === 0) {\n      this.bindings.delete(elementId);\n    }\n  }\n\n  /**\n   * Extract relevant data from an event\n   */\n  private extractEventData(event: Event, element: HTMLElement): any {\n    const data: any = {\n      type: event.type,\n      timestamp: Date.now(),\n    };\n\n    // Mouse events\n    if (event instanceof MouseEvent) {\n      data.clientX = event.clientX;\n      data.clientY = event.clientY;\n      data.button = event.button;\n    }\n\n    // Keyboard events\n    if (event instanceof KeyboardEvent) {\n      data.key = event.key;\n      data.code = event.code;\n      data.ctrlKey = event.ctrlKey;\n      data.shiftKey = event.shiftKey;\n      data.altKey = event.altKey;\n      data.metaKey = event.metaKey;\n    }\n\n    // Input events (for form elements)\n    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {\n      data.value = element.value;\n    }\n\n    // Select events\n    if (element instanceof HTMLSelectElement) {\n      data.value = element.value;\n      data.selectedIndex = element.selectedIndex;\n    }\n\n    // Form events\n    if (event.type === \"submit\" && element instanceof HTMLFormElement) {\n      data.formData = new FormData(element);\n    }\n\n    return data;\n  }\n\n  /**\n   * Clear all event bindings for an element\n   */\n  clearElement(elementId: string, element: HTMLElement): void {\n    const elementBindings = this.bindings.get(elementId);\n    if (!elementBindings) return;\n\n    for (const [eventName, listener] of elementBindings) {\n      element.removeEventListener(eventName, listener);\n    }\n\n    this.bindings.delete(elementId);\n  }\n\n  /**\n   * Clear all event bindings\n   */\n  clearAll(): void {\n    this.bindings.clear();\n  }\n}\n"
   ],
   "mappings": "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",
-  "debugId": "CFF27E1FA4869F5864756E2164756E21",
+  "debugId": "AB9487AE99F7A49464756E2164756E21",
   "names": []
 }

package/dist/dom/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * DOM Renderer for Hypen
+ *
+ * Browser-only module for rendering Hypen UI to the DOM
+ */
+export { DOMRenderer } from "./renderer.js";
+export { ComponentRegistry } from "./components/index.js";
+export { ApplicatorRegistry } from "./applicators/index.js";
+export { EventManager } from "./events.js";
+export { RerenderTracker, type DebugConfig, defaultDebugConfig } from "./debug.js";

package/dist/dom/index.js

@@ -1011,7 +1011,7 @@ var exports_route = {};
 __export(exports_route, {
   routeHandler: () => routeHandler
 });
-import { frameworkLoggers } from "@hypen-space/core";
+import { frameworkLoggers } from "@hypen-space/core/logger";
 var log, routeHandler;
 var init_route = __esm(() => {
   log = frameworkLoggers.router;
@@ -1046,7 +1046,7 @@ __export(exports_hypenapp, {
   disconnectHypenApp: () => disconnectHypenApp
 });
 import { RemoteEngine } from "@hypen-space/core/remote/client";
-import { frameworkLoggers as frameworkLoggers2 } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers2 } from "@hypen-space/core/logger";
 function applyPatches(container, nodes, patches, engine, onRoot) {
   for (const patch of patches) {
     switch (patch.type) {
@@ -1202,8 +1202,6 @@ function applyProp(el, name, value) {
     border: "border",
     gap: "gap",
     flex: "flex",
-    alignItems: "alignItems",
-    justifyContent: "justifyContent",
     opacity: "opacity",
     overflow: "overflow"
   };
@@ -1301,6 +1299,26 @@ var init_hypenapp = __esm(() => {
   };
 });
 
+// src/dom/components/app.ts
+var exports_app = {};
+__export(exports_app, {
+  appHandler: () => appHandler
+});
+var appHandler;
+var init_app = __esm(() => {
+  appHandler = {
+    create() {
+      const el = document.createElement("div");
+      el.style.display = "flex";
+      el.style.flexDirection = "column";
+      el.style.minHeight = "100vh";
+      el.style.width = "100%";
+      el.dataset.hypenType = "app";
+      return el;
+    }
+  };
+});
+
 // src/dom/components/index.ts
 class ComponentRegistry {
   handlers = new Map;
@@ -1311,9 +1329,13 @@ class ComponentRegistry {
     this.handlers.set(type.toLowerCase(), handler);
   }
   get(type) {
+    if (!type)
+      return;
     return this.handlers.get(type.toLowerCase());
   }
   createElement(type, props = {}) {
+    if (!type)
+      return null;
     const handler = this.get(type);
     if (!handler)
       return null;
@@ -1355,6 +1377,8 @@ class ComponentRegistry {
     const { routerHandler: routerHandler2 } = (init_router(), __toCommonJS(exports_router));
     const { routeHandler: routeHandler2 } = (init_route(), __toCommonJS(exports_route));
     const { hypenAppHandler: hypenAppHandler2 } = (init_hypenapp(), __toCommonJS(exports_hypenapp));
+    const { appHandler: appHandler2 } = (init_app(), __toCommonJS(exports_app));
+    this.register("app", appHandler2);
     this.register("column", columnHandler2);
     this.register("row", rowHandler2);
     this.register("text", textHandler2);
@@ -2038,7 +2062,7 @@ import {
   disposableListener,
   disposableTimeout
 } from "@hypen-space/core/disposable";
-import { frameworkLoggers as frameworkLoggers3 } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers3 } from "@hypen-space/core/logger";
 var log3 = frameworkLoggers3.events;
 function toPlainObject(value) {
   if (value instanceof Map) {
@@ -2323,6 +2347,7 @@ var eventHandlers = {
     extractPayload: scrollPayload
   }),
   onLongClick: createLongClickHandler(500),
+  onLongPress: createLongClickHandler(500),
   onFocus: createEventHandler("focus", { extractPayload: focusPayload }),
   onBlur: createEventHandler("blur", { extractPayload: focusPayload }),
   onMouseEnter: createEventHandler("mouseenter", { extractPayload: mousePayload }),
@@ -2584,12 +2609,6 @@ var advancedLayoutHandlers = {
   flexBasis: (el, value) => {
     el.style.flexBasis = typeof value === "number" ? `${value}px` : String(value);
   },
-  justifyContent: (el, value) => {
-    el.style.justifyContent = mapAlignmentValue(String(value));
-  },
-  alignItems: (el, value) => {
-    el.style.alignItems = mapAlignmentValue(String(value));
-  },
   alignContent: (el, value) => {
     el.style.alignContent = String(value);
   },
@@ -3127,7 +3146,7 @@ var canvasApplicators = {
 };
 
 // src/dom/debug.ts
-import { frameworkLoggers as frameworkLoggers4 } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers4 } from "@hypen-space/core/logger";
 var log4 = frameworkLoggers4.debug;
 var defaultDebugConfig = {
   enabled: false,
@@ -3290,7 +3309,7 @@ class RerenderTracker {
 }
 
 // src/dom/renderer.ts
-import { frameworkLoggers as frameworkLoggers5 } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers5 } from "@hypen-space/core/logger";
 var log5 = frameworkLoggers5.renderer;
 
 class DOMRenderer {
@@ -3363,24 +3382,30 @@ class DOMRenderer {
     });
   }
   applyPatch(patch) {
+    const p = patch;
+    const id = patch.id ?? p.id;
+    const elementType = patch.elementType ?? p.element_type;
+    const parentId = patch.parentId ?? p.parent_id;
+    const beforeId = patch.beforeId ?? p.before_id;
+    const eventName = patch.eventName ?? p.event_name;
     switch (patch.type) {
       case "create":
-        this.onCreate(patch.id, patch.elementType, patch.props || {});
+        this.onCreate(id, elementType ?? "container", patch.props || {});
         break;
       case "setProp":
-        this.onSetProp(patch.id, patch.name, patch.value);
+        this.onSetProp(id, patch.name, patch.value);
         break;
       case "setText":
-        this.onSetText(patch.id, patch.text);
+        this.onSetText(id, patch.text);
         break;
       case "insert":
-        this.onInsert(patch.parentId, patch.id, patch.beforeId);
+        this.onInsert(parentId, id, beforeId);
         break;
       case "move":
-        this.onMove(patch.parentId, patch.id, patch.beforeId);
+        this.onMove(parentId, id, beforeId);
         break;
       case "remove":
-        this.onRemove(patch.id);
+        this.onRemove(id);
         break;
     }
   }
@@ -3511,7 +3536,7 @@ class DOMRenderer {
 }
 
 // src/dom/events.ts
-import { frameworkLoggers as frameworkLoggers6 } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers6 } from "@hypen-space/core/logger";
 var log6 = frameworkLoggers6.events;
 
 class EventManager {
@@ -3625,4 +3650,4 @@ export {
   ApplicatorRegistry
 };
 
-//# debugId=B4E923D0EBE0B01664756E2164756E21
+//# debugId=5D2D653C8A26162564756E2164756E21