@hypen-space/web 0.2.0 → 0.2.2

package/README.md

@@ -0,0 +1,297 @@
+# @hypen-space/web
+
+Browser renderers for Hypen - DOM and Canvas rendering for web applications.
+
+## Installation
+
+```bash
+npm install @hypen-space/core @hypen-space/web
+# or
+bun add @hypen-space/core @hypen-space/web
+```
+
+## Quick Start
+
+The simplest way to use Hypen in the browser:
+
+```typescript
+import { render } from "@hypen-space/web";
+
+// Auto-discovers and loads components from ./src/components
+await render("HomePage", "#app");
+```
+
+### With Explicit Configuration
+
+```typescript
+import { Hypen } from "@hypen-space/web";
+
+const hypen = new Hypen({
+  componentsDir: "./src/components",
+  debug: true,
+  wasmPath: "/hypen_engine_bg.wasm",
+});
+
+await hypen.init();
+await hypen.loadComponents();
+await hypen.render("HomePage", "#app");
+
+// Access router and state
+const router = hypen.getRouter();
+const state = hypen.getState();
+
+// Cleanup when done
+await hypen.unmount();
+```
+
+### File-Based Components
+
+Create components with `.hypen` templates and optional `.ts` modules:
+
+```
+src/components/
+├── Counter/
+│   ├── component.hypen    # UI template
+│   └── component.ts       # State & actions (optional)
+├── Header/
+│   └── component.hypen    # Stateless component
+└── ProductList/
+    ├── component.hypen
+    └── component.ts
+```
+
+**component.hypen:**
+```hypen
+Column.padding(16).gap(8) {
+  Text("Count: ${state.count}")
+    .fontSize(24)
+  Row.gap(8) {
+    Button(onClick: @actions.decrement) { Text("-") }
+    Button(onClick: @actions.increment) { Text("+") }
+  }
+}
+```
+
+**component.ts:**
+```typescript
+import { app } from "@hypen-space/core";
+
+export default app
+  .defineState({ count: 0 })
+  .onAction("increment", ({ state }) => state.count++)
+  .onAction("decrement", ({ state }) => state.count--)
+  .build();
+```
+
+## Hypen Class API
+
+```typescript
+import { Hypen } from "@hypen-space/web";
+
+const hypen = new Hypen({
+  componentsDir: "./src/components", // Default
+  debug: false,
+  wasmPath: "/hypen_engine_bg.wasm",
+  debugHeatmap: false,               // Visualize re-renders
+  heatmapIncrement: 5,               // % opacity per re-render
+  heatmapFadeOut: 2000,              // ms fade duration
+});
+
+// Initialize WASM engine
+await hypen.init();
+
+// Auto-load components from directory
+await hypen.loadComponents();
+// Or load from custom path
+await hypen.loadComponents("./custom/path");
+
+// Render to DOM
+await hypen.render("HomePage", "#app");
+// Or use an element directly
+await hypen.render("HomePage", document.getElementById("app"));
+
+// Access runtime
+const router = hypen.getRouter();
+const context = hypen.getGlobalContext();
+const state = hypen.getState();
+const module = hypen.getModuleInstance();
+
+// Debug tools
+hypen.setDebugHeatmap(true);
+hypen.resetDebugTracking();
+const stats = hypen.getDebugStats();
+
+// Cleanup
+await hypen.unmount();
+```
+
+## DOM Renderer (Low-Level)
+
+For custom integrations:
+
+```typescript
+import { Engine, app } from "@hypen-space/core";
+import { DOMRenderer } from "@hypen-space/web";
+
+const engine = new Engine();
+await engine.init({ wasmPath: "/hypen_engine_bg.wasm" });
+
+const renderer = new DOMRenderer(document.getElementById("app")!, engine, {
+  enabled: true,
+  showHeatmap: true,
+});
+
+engine.setRenderCallback((patches) => {
+  renderer.applyPatches(patches);
+});
+
+engine.renderSource(`Column { Text("Hello!") }`);
+```
+
+## Custom Components
+
+Register custom DOM components:
+
+```typescript
+const registry = renderer.getComponentRegistry();
+
+registry.register("VideoPlayer", {
+  create: () => {
+    const video = document.createElement("video");
+    video.controls = true;
+    return video;
+  },
+  applyProps: (element, props) => {
+    if (props.src) element.src = props.src;
+    if (props.autoplay) element.autoplay = true;
+  },
+});
+
+// Use in Hypen DSL:
+// VideoPlayer(src: "video.mp4", autoplay: true)
+```
+
+## Custom Applicators
+
+Register custom styling:
+
+```typescript
+const registry = renderer.getApplicatorRegistry();
+
+registry.register("glassmorphism", (el, value) => {
+  if (value) {
+    el.style.background = "rgba(255, 255, 255, 0.1)";
+    el.style.backdropFilter = "blur(10px)";
+  }
+});
+
+// Use in Hypen DSL:
+// Card.glassmorphism(true)
+```
+
+## Built-in Components
+
+**Layout:** Column, Row, Container, Center, Stack, Grid, Spacer, Divider
+
+**Text & Media:** Text, Heading, Paragraph, Image, Video, Audio
+
+**Form:** Button, Input, Textarea, Select, Checkbox, Switch, Slider
+
+**Navigation:** Link, Router, Route
+
+**UI:** Card, Badge, Avatar, Spinner, ProgressBar, List
+
+## Built-in Applicators
+
+```hypen
+Text("Hello")
+  // Layout
+  .padding(16)
+  .margin(8)
+  .width(200)
+  .height(100)
+  .weight(1)              // flex: 1 (cross-platform)
+  .gap(8)
+
+  // Alignment (works for both Row and Column)
+  .horizontalAlignment(center)
+  .verticalAlignment(spaceBetween)
+
+  // Colors
+  .color(blue)
+  .backgroundColor(white)
+  .borderColor(gray)
+
+  // Typography
+  .fontSize(18)
+  .fontWeight(bold)
+  .fontFamily("Inter")
+  .textAlign(center)
+
+  // Borders & Effects
+  .borderRadius(8)
+  .opacity(0.9)
+  .boxShadow("0 2px 8px rgba(0,0,0,0.1)")
+
+  // Events
+  .onClick(@actions.handleClick)
+```
+
+## Canvas Renderer
+
+Hardware-accelerated rendering:
+
+```typescript
+import { CanvasRenderer } from "@hypen-space/web";
+
+const canvas = document.querySelector("canvas")!;
+const renderer = new CanvasRenderer(canvas, engine, {
+  devicePixelRatio: window.devicePixelRatio,
+  enableAccessibility: true,
+  enableHitTesting: true,
+});
+
+engine.setRenderCallback((patches) => {
+  renderer.applyPatches(patches);
+});
+```
+
+## Remote UI
+
+Connect to a server-driven UI:
+
+```typescript
+import { RemoteEngine } from "@hypen-space/core";
+import { DOMRenderer } from "@hypen-space/web";
+
+const renderer = new DOMRenderer(document.getElementById("app")!, engine);
+const remote = new RemoteEngine("ws://localhost:3000", {
+  autoReconnect: true,
+});
+
+remote
+  .onPatches((patches) => renderer.applyPatches(patches))
+  .onStateUpdate((state) => renderer.updateState(state))
+  .onConnect(() => console.log("Connected"));
+
+await remote.connect();
+remote.dispatchAction("login", { user: "admin" });
+```
+
+## Exports
+
+| Export | Description |
+|--------|-------------|
+| `@hypen-space/web` | Main - Hypen, render, DOMRenderer, CanvasRenderer |
+| `@hypen-space/web/hypen` | High-level Hypen class |
+| `@hypen-space/web/dom` | DOM renderer and utilities |
+| `@hypen-space/web/canvas` | Canvas renderer |
+
+## Requirements
+
+- Browser with ES2020 support
+- `@hypen-space/core` peer dependency
+
+## License
+
+MIT

package/dist/src/canvas/index.js

@@ -1,6 +1,9 @@
 import {
   CanvasRenderer
 } from "./renderer.js";
+import {
+  InputOverlay
+} from "./input.js";
 import {
   registerPainter
 } from "./paint.js";
@@ -12,9 +15,6 @@ import {
   AccessibilityLayer
 } from "./accessibility.js";
 import"./text.js";
-import {
-  InputOverlay
-} from "./input.js";
 import"./utils.js";
 import"../../chunk-2s02mkzs.js";
 export {
@@ -25,4 +25,4 @@ export {
   AccessibilityLayer
 };
 
-//# debugId=11D5013CD5400CA064756E2164756E21
+//# debugId=C51FA9AAA98C9F1064756E2164756E21

package/dist/src/canvas/index.js.map

@@ -4,6 +4,6 @@
   "sourcesContent": [
   ],
   "mappings": "",
-  "debugId": "11D5013CD5400CA064756E2164756E21",
+  "debugId": "C51FA9AAA98C9F1064756E2164756E21",
   "names": []
 }

package/dist/src/canvas/renderer.js

@@ -1,3 +1,6 @@
+import {
+  InputOverlay
+} from "./input.js";
 import {
   paintNode,
   registerPainter
@@ -12,9 +15,6 @@ import {
   AccessibilityLayer
 } from "./accessibility.js";
 import"./text.js";
-import {
-  InputOverlay
-} from "./input.js";
 import"./utils.js";
 import"../../chunk-2s02mkzs.js";
 
@@ -273,4 +273,4 @@ export {
 
 export { CanvasRenderer };
 
-//# debugId=5517243AFD76B28664756E2164756E21
+//# debugId=C74D0582CBD605AC64756E2164756E21

package/dist/src/canvas/renderer.js.map

@@ -5,6 +5,6 @@
     "/**\n * Canvas Renderer\n *\n * Main renderer class that orchestrates layout, painting, and events\n */\n\nimport type { Renderer, Patch } from \"@hypen/core\";\n\n// Interface for the engine that canvas renderer needs\ninterface IEngine {\n  dispatchAction(name: string, payload?: any): void;\n}\nimport type {\n  VirtualNode,\n  CanvasRendererOptions,\n  PainterFunction,\n  LayoutFunction,\n} from \"./types.js\";\nimport { computeLayout } from \"./layout.js\";\nimport { paintNode, registerPainter } from \"./paint.js\";\nimport { CanvasEventManager } from \"./events.js\";\nimport { InputOverlay } from \"./input.js\";\nimport { AccessibilityLayer } from \"./accessibility.js\";\nimport { findNodeById } from \"./utils.js\";\n\nconst DEFAULT_OPTIONS: CanvasRendererOptions = {\n  devicePixelRatio: typeof window !== \"undefined\" ? window.devicePixelRatio || 1 : 1,\n  backgroundColor: \"#ffffff\",\n  enableAccessibility: true,\n  enableHitTesting: true,\n  enableInputOverlay: true,\n  enableDirtyRects: false,\n  enableLayerCaching: false,\n  maxLayerCacheSize: 10,\n  showLayoutBounds: false,\n  showDirtyRects: false,\n  logPerformance: false,\n};\n\n/**\n * Canvas Renderer\n */\nexport class CanvasRenderer implements Renderer {\n  private canvas: HTMLCanvasElement;\n  private ctx: CanvasRenderingContext2D;\n  private engine: IEngine;\n  private options: CanvasRendererOptions;\n  \n  private rootNode: VirtualNode | null = null;\n  private nodes = new Map<string, VirtualNode>();\n  \n  private eventManager: CanvasEventManager;\n  private inputOverlay: InputOverlay;\n  private accessibilityLayer: AccessibilityLayer;\n  \n  private rafId: number | null = null;\n  private needsRedraw = false;\n  \n  private frameCount = 0;\n  private lastFrameTime = 0;\n\n  constructor(canvas: HTMLCanvasElement, engine: IEngine, options?: Partial<CanvasRendererOptions>) {\n    this.canvas = canvas;\n    this.engine = engine;\n    this.options = { ...DEFAULT_OPTIONS, ...options };\n\n    // Get context\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) {\n      throw new Error(\"Failed to get 2D context from canvas\");\n    }\n    this.ctx = ctx;\n\n    // Setup HiDPI\n    this.setupHiDPI();\n\n    // Initialize subsystems\n    this.eventManager = new CanvasEventManager(canvas, engine);\n    this.inputOverlay = new InputOverlay(\n      (canvas as any).parentElement || (typeof document !== \"undefined\" ? document.body : null)\n    );\n    this.accessibilityLayer = new AccessibilityLayer(\n      (canvas as any).parentElement || (typeof document !== \"undefined\" ? document.body : null),\n      this.options.enableAccessibility || false\n    );\n\n    // Listen for redraw requests from event manager\n    this.canvas.addEventListener(\"hypen:redraw\", () => this.scheduleRedraw());\n\n    // Don't schedule initial render - wait for patches\n  }\n\n  /**\n   * Setup HiDPI rendering\n   */\n  private setupHiDPI(): void {\n    const dpr = this.options.devicePixelRatio || 1;\n    const rect = this.canvas.getBoundingClientRect();\n\n    this.canvas.width = rect.width * dpr;\n    this.canvas.height = rect.height * dpr;\n\n    this.ctx.scale(dpr, dpr);\n\n    // Update canvas display size\n    this.canvas.style.width = `${rect.width}px`;\n    this.canvas.style.height = `${rect.height}px`;\n  }\n\n  /**\n   * Apply patches from engine\n   */\n  applyPatches(patches: Patch[]): void {\n    for (const patch of patches) {\n      this.applyPatch(patch);\n    }\n\n    // Update accessibility layer\n    if (this.rootNode) {\n      this.accessibilityLayer.syncTree(this.rootNode);\n    }\n\n    // Schedule redraw\n    this.scheduleRedraw();\n  }\n\n  /**\n   * Apply single patch\n   */\n  private applyPatch(patch: Patch): void {\n    switch (patch.type) {\n      case \"create\":\n        this.onCreate(patch.id!, (patch as any).element_type!, patch.props || {});\n        break;\n\n      case \"setProp\":\n        this.onSetProp(patch.id!, patch.name!, patch.value);\n        break;\n\n      case \"setText\":\n        this.onSetText(patch.id!, patch.text!);\n        break;\n\n      case \"insert\":\n        this.onInsert((patch as any).parent_id!, patch.id!, (patch as any).before_id);\n        break;\n\n      case \"move\":\n        this.onMove((patch as any).parent_id!, patch.id!, (patch as any).before_id);\n        break;\n\n      case \"remove\":\n        this.onRemove(patch.id!);\n        break;\n    }\n  }\n\n  /**\n   * Create new virtual node\n   */\n  private onCreate(id: string, elementType: string, props: Record<string, any>): void {\n    const node: VirtualNode = {\n      id,\n      type: elementType,\n      props: props instanceof Map ? Object.fromEntries(props) : props,\n      children: [],\n      parent: null,\n      visible: true,\n      opacity: parseFloat(props.opacity) || 1,\n      clickable: elementType === \"button\" || !!props.onclick,\n      hoverable: true,\n      focusable: elementType === \"input\" || elementType === \"textarea\" || elementType === \"button\",\n      focused: false,\n      hovered: false,\n    };\n\n    this.nodes.set(id, node);\n  }\n\n  /**\n   * Set property on node\n   */\n  private onSetProp(id: string, name: string, value: any): void {\n    const node = this.nodes.get(id);\n    if (!node) return;\n\n    node.props[name] = value;\n\n    // Update computed properties\n    if (name === \"visible\") {\n      node.visible = !!value;\n    }\n    if (name === \"opacity\") {\n      node.opacity = parseFloat(value) || 1;\n    }\n\n    // Update accessibility\n    this.accessibilityLayer.updateNode(node);\n  }\n\n  /**\n   * Set text on node\n   */\n  private onSetText(id: string, text: string): void {\n    const node = this.nodes.get(id);\n    if (!node) return;\n\n    node.props[0] = text;\n\n    // Update accessibility\n    this.accessibilityLayer.updateNode(node);\n  }\n\n  /**\n   * Insert node into tree\n   */\n  private onInsert(parentId: string, id: string, beforeId?: string): void {\n    const child = this.nodes.get(id);\n    if (!child) return;\n\n    // Check if this is setting the root node (parent_id === id === \"root\" or similar)\n    if (parentId === \"root\" && id === \"root\") {\n      this.rootNode = child;\n      this.eventManager.setRootNode(child);\n      return;\n    }\n\n    // Otherwise find the parent node\n    const parent = this.nodes.get(parentId);\n    if (!parent) {\n      // If parent is \"root\", this might be the first real root node\n      if (parentId === \"root\") {\n        this.rootNode = child;\n        this.eventManager.setRootNode(child);\n      }\n      return;\n    }\n\n    // Insert child into parent\n    child.parent = parent;\n\n    if (beforeId) {\n      const beforeIndex = parent.children.findIndex((c) => c.id === beforeId);\n      if (beforeIndex >= 0) {\n        parent.children.splice(beforeIndex, 0, child);\n      } else {\n        parent.children.push(child);\n      }\n    } else {\n      parent.children.push(child);\n    }\n  }\n\n  /**\n   * Move node in tree\n   */\n  private onMove(parentId: string, id: string, beforeId?: string): void {\n    // Remove from old parent\n    const node = this.nodes.get(id);\n    if (!node || !node.parent) return;\n\n    const oldParent = node.parent;\n    const oldIndex = oldParent.children.indexOf(node);\n    if (oldIndex >= 0) {\n      oldParent.children.splice(oldIndex, 1);\n    }\n\n    // Insert into new location\n    this.onInsert(parentId, id, beforeId);\n  }\n\n  /**\n   * Remove node from tree\n   */\n  private onRemove(id: string): void {\n    const node = this.nodes.get(id);\n    if (!node) return;\n\n    // Remove from parent\n    if (node.parent) {\n      const index = node.parent.children.indexOf(node);\n      if (index >= 0) {\n        node.parent.children.splice(index, 1);\n      }\n    }\n\n    // Remove from root\n    if (this.rootNode === node) {\n      this.rootNode = null;\n      this.eventManager.setRootNode(null);\n    }\n\n    // Remove from nodes map\n    this.nodes.delete(id);\n  }\n\n  /**\n   * Schedule redraw\n   */\n  private scheduleRedraw(): void {\n    if (this.rafId !== null) return;\n\n    // Use requestAnimationFrame if available (browser), otherwise render immediately (tests)\n    if (typeof requestAnimationFrame !== \"undefined\") {\n      this.rafId = requestAnimationFrame(() => {\n        this.render();\n        this.rafId = null;\n      });\n    } else {\n      // In non-browser environments (tests), render immediately\n      this.render();\n    }\n  }\n\n  /**\n   * Main render function\n   */\n  private render(): void {\n    const startTime = performance.now();\n\n    // Clear canvas\n    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n\n    // Draw background\n    if (this.options.backgroundColor) {\n      this.ctx.fillStyle = this.options.backgroundColor;\n      this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);\n    }\n\n    // Layout and paint\n    if (this.rootNode) {\n      // Compute layout\n      const dpr = this.options.devicePixelRatio || 1;\n      computeLayout(\n        this.ctx,\n        this.rootNode,\n        this.canvas.width / dpr,\n        this.canvas.height / dpr\n      );\n\n      // Paint\n      paintNode(this.ctx, this.rootNode);\n\n      // Debug: show layout bounds\n      if (this.options.showLayoutBounds) {\n        this.drawLayoutBounds(this.rootNode);\n      }\n    }\n\n    // Performance logging\n    if (this.options.logPerformance) {\n      const elapsed = performance.now() - startTime;\n      this.frameCount++;\n      if (performance.now() - this.lastFrameTime > 1000) {\n        console.log(`Canvas FPS: ${this.frameCount}, Last frame: ${elapsed.toFixed(2)}ms`);\n        this.frameCount = 0;\n        this.lastFrameTime = performance.now();\n      }\n    }\n  }\n\n  /**\n   * Draw layout bounds for debugging\n   */\n  private drawLayoutBounds(node: VirtualNode): void {\n    if (!node.layout) return;\n\n    const layout = node.layout;\n\n    this.ctx.strokeStyle = \"#ff0000\";\n    this.ctx.lineWidth = 1;\n    this.ctx.strokeRect(layout.x, layout.y, layout.width, layout.height);\n\n    for (const child of node.children) {\n      this.drawLayoutBounds(child);\n    }\n  }\n\n  /**\n   * Get node by ID\n   */\n  getNode(id: string): VirtualNode | undefined {\n    return this.nodes.get(id);\n  }\n\n  /**\n   * Clear renderer\n   */\n  clear(): void {\n    this.rootNode = null;\n    this.nodes.clear();\n    this.eventManager.setRootNode(null);\n    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n  }\n\n  /**\n   * Register custom painter\n   */\n  registerPainter(type: string, painter: PainterFunction): void {\n    registerPainter(type, painter);\n  }\n\n  /**\n   * Set renderer options\n   */\n  setOptions(options: Partial<CanvasRendererOptions>): void {\n    this.options = { ...this.options, ...options };\n    this.accessibilityLayer.setEnabled(this.options.enableAccessibility || false);\n  }\n\n  /**\n   * Destroy renderer\n   */\n  destroy(): void {\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n    }\n    this.eventManager.destroy();\n    this.accessibilityLayer.destroy();\n  }\n}\n\n"
   ],
   "mappings": "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",
-  "debugId": "5517243AFD76B28664756E2164756E21",
+  "debugId": "C74D0582CBD605AC64756E2164756E21",
   "names": []
 }

package/dist/src/dom/applicators/index.js

@@ -1,3 +1,7 @@
+import {
+  exports_layout,
+  init_layout
+} from "./layout.js";
 import {
   exports_events,
   init_events
@@ -14,6 +18,10 @@ import {
   exports_effects,
   init_effects
 } from "./effects.js";
+import {
+  exports_transform,
+  init_transform
+} from "./transform.js";
 import {
   exports_margin
 } from "./margin.js";
@@ -41,10 +49,6 @@ import {
   exports_transition,
   init_transition
 } from "./transition.js";
-import {
-  exports_layout,
-  init_layout
-} from "./layout.js";
 import {
   exports_padding
 } from "./padding.js";
@@ -52,10 +56,6 @@ import {
   exports_border,
   init_border
 } from "./border.js";
-import {
-  exports_transform,
-  init_transform
-} from "./transform.js";
 import {
   __toCommonJS
 } from "../../../chunk-2s02mkzs.js";
@@ -293,4 +293,4 @@ export {
 
 export { ApplicatorRegistry };
 
-//# debugId=FC865C18036E241064756E2164756E21
+//# debugId=0F458DA72C35D48864756E2164756E21

package/dist/src/dom/applicators/index.js.map

@@ -5,6 +5,6 @@
     "/**\n * Applicator Registry\n *\n * Handles style applicators (modifiers) for Hypen components\n */\n\nexport type ApplicatorHandler = (element: HTMLElement, value: any) => void;\n\nexport class ApplicatorRegistry {\n  private handlers: Map<string, ApplicatorHandler> = new Map();\n  private elementState: WeakMap<HTMLElement, Map<string, any>> = new WeakMap();\n\n  constructor() {\n    this.registerDefaults();\n  }\n\n  /**\n   * Register an applicator handler\n   */\n  register(name: string, handler: ApplicatorHandler): void {\n    this.handlers.set(name, handler);\n  }\n\n  /**\n   * Apply an applicator to an element\n   */\n  apply(element: HTMLElement, name: string, value: any): void {\n    // Parse applicator metadata so we can normalize event arguments and retain legacy behavior\n    const { handlerName, argKey, aggregate, fallbackName } = this.parseApplicatorName(name);\n\n    const handler = this.handlers.get(handlerName);\n    const state = this.getElementState(element);\n    const previous = state.get(handlerName);\n\n    if (aggregate && argKey !== null) {\n      // Merge event payload updates with the previously applied arguments so handlers\n      // always receive the full payload object (prevents stale dispatch data)\n      const merged = this.mergeAggregateState(previous, argKey, this.normalizeValue(value));\n\n      state.set(handlerName, merged);\n\n      if (handler) {\n        handler(element, merged);\n      } else {\n        // Fallback: set as CSS property using the original name if no handler exists\n        this.setStyleProperty(element, fallbackName, value);\n      }\n      return;\n    }\n\n    if (handler) {\n      if (this.isEventApplicator(handlerName)) {\n        const normalizedValue = this.normalizeEventValue(previous, value);\n        state.set(handlerName, normalizedValue);\n        handler(element, normalizedValue);\n      } else {\n        state.set(handlerName, value);\n        handler(element, value);\n      }\n    } else {\n      // Fallback: set as CSS property\n      this.setStyleProperty(element, handlerName, value);\n    }\n  }\n\n  /**\n   * Parse applicator name to handle indexed and event argument formats\n   * e.g., \"fontSize.0\" -> { handlerName: \"fontSize\" }\n   *       \"onClick.id\" -> { handlerName: \"onClick\", aggregate: true, argKey: \"id\" }\n   * Keeps compound names like \"padding.top\" as-is so they can fall back to CSS.\n   */\n  private parseApplicatorName(name: string): {\n    handlerName: string;\n    argKey: string | null;\n    aggregate: boolean;\n    fallbackName: string;\n  } {\n    const dotIndex = name.indexOf('.');\n    if (dotIndex === -1) {\n      return { handlerName: name, argKey: null, aggregate: false, fallbackName: name };\n    }\n\n    const baseName = name.substring(0, dotIndex);\n    const argKey = name.substring(dotIndex + 1);\n\n    if (this.handlers.has(baseName) && this.isEventApplicator(baseName)) {\n      return { handlerName: baseName, argKey, aggregate: true, fallbackName: name };\n    }\n\n    if (/^\\d+$/.test(argKey)) {\n      return { handlerName: baseName, argKey: null, aggregate: false, fallbackName: baseName };\n    }\n\n    return { handlerName: name, argKey: null, aggregate: false, fallbackName: name };\n  }\n\n  /**\n   * Get or initialize per-element applicator state used for merging event payloads\n   */\n  private getElementState(element: HTMLElement): Map<string, any> {\n    let state = this.elementState.get(element);\n    if (!state) {\n      state = new Map();\n      this.elementState.set(element, state);\n    }\n    return state;\n  }\n\n  /**\n   * Merge updated event argument into previously stored payload snapshot\n   */\n  private mergeAggregateState(previous: any, argKey: string, value: any): Record<string, any> {\n    const base: Record<string, any> = this.cloneAggregateState(previous);\n\n    if (value === undefined) {\n      delete base[argKey];\n    } else {\n      base[argKey] = value;\n    }\n\n    return base;\n  }\n\n  /**\n   * Convert stored state into a mutable payload object we can merge into\n   */\n  private cloneAggregateState(previous: any): Record<string, any> {\n    if (previous && typeof previous === \"object\" && !Array.isArray(previous)) {\n      return { ...previous };\n    }\n\n    if (typeof previous === \"string\") {\n      return { \"0\": previous };\n    }\n\n    return {};\n  }\n\n  /**\n   * Normalize event value updates so action payload arguments persist across SetProp orderings\n   */\n  private normalizeEventValue(previous: any, value: any): Record<string, any> {\n    const normalizedInput = this.normalizeValue(value);\n    const base = this.cloneAggregateState(previous);\n\n    if (normalizedInput && typeof normalizedInput === \"object\" && !Array.isArray(normalizedInput)) {\n      const next = { ...base, ...normalizedInput } as Record<string, any>;\n\n      if (!Object.prototype.hasOwnProperty.call(next, \"0\") && base[\"0\"] !== undefined) {\n        next[\"0\"] = base[\"0\"];\n      }\n\n      return next;\n    }\n\n    if (normalizedInput !== undefined) {\n      base[\"0\"] = normalizedInput;\n    }\n\n    return base;\n  }\n\n  /**\n   * Convert Maps (from WASM) and nested structures into plain JS values we can merge safely\n   */\n  private normalizeValue(value: any): any {\n    if (value instanceof Map) {\n      const obj: Record<string, any> = {};\n      for (const [key, val] of value.entries()) {\n        obj[key] = this.normalizeValue(val);\n      }\n      return obj;\n    }\n\n    if (Array.isArray(value)) {\n      return value.map((item) => this.normalizeValue(item));\n    }\n\n    if (value && typeof value === \"object\") {\n      const obj: Record<string, any> = {};\n      for (const [key, val] of Object.entries(value)) {\n        obj[key] = this.normalizeValue(val);\n      }\n      return obj;\n    }\n\n    return value;\n  }\n\n  /**\n   * Determine if a handler name follows the event applicator naming convention\n   */\n  private isEventApplicator(name: string): boolean {\n    return /^on[A-Z]/.test(name);\n  }\n\n  /**\n   * Apply multiple applicators\n   */\n  applyAll(element: HTMLElement, applicators: Record<string, any>): void {\n    //console.log(`[ApplicatorRegistry] Applying applicators:`, applicators);\n\n    // Group applicators by their base name (treat applicators like components with arguments)\n    // e.g., \"onClick.0\", \"onClick.id\", \"onClick.title\" -> onClick: {0: ..., id: ..., title: ...}\n    const grouped = new Map<string, Record<string, any>>();\n\n    for (const [name, value] of Object.entries(applicators)) {\n      // Extract base name and argument key\n      const dotIndex = name.indexOf('.');\n      const baseName = dotIndex !== -1 ? name.substring(0, dotIndex) : name;\n      const argKey = dotIndex !== -1 ? name.substring(dotIndex + 1) : null;\n\n      if (!grouped.has(baseName)) {\n        grouped.set(baseName, {});\n      }\n\n      const args = grouped.get(baseName)!;\n      if (argKey !== null) {\n        // This is an argument (e.g., \"onClick.0\" or \"onClick.id\")\n        args[argKey] = value;\n      } else {\n        // This is a single-value applicator (e.g., \"padding\")\n        args['__value'] = value;\n      }\n    }\n\n    // Apply each applicator with its arguments\n    for (const [baseName, args] of grouped.entries()) {\n      // If it's a single value (either __value or just \"0\"), pass just the value\n      if (Object.keys(args).length === 1) {\n        if ('__value' in args) {\n          this.apply(element, baseName, args['__value']);\n        } else if ('0' in args) {\n          // Single positional argument (e.g., padding.0 -> just pass the value)\n          this.apply(element, baseName, args['0']);\n        } else {\n          // Single named argument? Pass the whole object\n          this.apply(element, baseName, args);\n        }\n      } else {\n        // Multiple arguments - pass the entire args object\n        this.apply(element, baseName, args);\n      }\n    }\n  }\n\n  /**\n   * Set a CSS property with automatic unit handling\n   */\n  private setStyleProperty(element: HTMLElement, name: string, value: any): void {\n    // Convert camelCase to kebab-case\n    const cssName = name.replace(/([A-Z])/g, \"-$1\").toLowerCase();\n\n    // Add units for numeric values on size properties\n    if (typeof value === \"number\" && this.needsUnit(cssName)) {\n      element.style.setProperty(cssName, `${value}px`);\n    } else {\n      element.style.setProperty(cssName, String(value));\n    }\n  }\n\n  /**\n   * Check if a property needs a unit\n   */\n  private needsUnit(prop: string): boolean {\n    const unitless = [\n      \"opacity\",\n      \"z-index\",\n      \"font-weight\",\n      \"line-height\",\n      \"flex\",\n      \"flex-grow\",\n      \"flex-shrink\",\n      \"order\",\n    ];\n    return !unitless.includes(prop);\n  }\n\n  /**\n   * Register default applicator handlers\n   */\n  private registerDefaults(): void {\n    const { paddingHandler } = require(\"./padding.js\");\n    const { marginHandler } = require(\"./margin.js\");\n    const { colorHandlers } = require(\"./color.js\");\n    const { borderHandlers } = require(\"./border.js\");\n    const { sizeHandlers } = require(\"./size.js\");\n    const { fontHandlers } = require(\"./font.js\");\n    const { layoutHandlers } = require(\"./layout.js\");\n    const { eventHandlers } = require(\"./events.js\");\n    const { typographyHandlers } = require(\"./typography.js\");\n    const { transformHandlers } = require(\"./transform.js\");\n    const { effectsHandlers } = require(\"./effects.js\");\n    const { advancedLayoutHandlers } = require(\"./advanced-layout.js\");\n    const { backgroundHandlers } = require(\"./background.js\");\n    const { displayHandlers } = require(\"./display.js\");\n    const { transitionHandlers } = require(\"./transition.js\");\n\n    this.register(\"padding\", paddingHandler);\n    this.register(\"margin\", marginHandler);\n\n    for (const [name, handler] of Object.entries(colorHandlers)) {\n      this.register(name, handler as ApplicatorHandler);\n    }\n\n    for (const [name, handler] of Object.entries(borderHandlers)) {\n      this.register(name, handler as ApplicatorHandler);\n    }\n\n    for (const [name, handler] of Object.entries(sizeHandlers)) {\n      this.register(name, handler as ApplicatorHandler);\n    }\n\n    for (const [name, handler] of Object.entries(fontHandlers)) {\n      this.register(name, handler as ApplicatorHandler);\n    }\n\n    for (const [name, handler] of Object.entries(layoutHandlers)) {\n      this.register(name, handler as ApplicatorHandler);\n    }\n\n    for (const [name, handler] of Object.entries(eventHandlers)) {\n      this.register(name, handler as ApplicatorHandler);\n    }\n\n    for (const [name, handler] of Object.entries(typographyHandlers)) {\n      this.register(name, handler as ApplicatorHandler);\n    }\n\n    for (const [name, handler] of Object.entries(transformHandlers)) {\n      this.register(name, handler as ApplicatorHandler);\n    }\n\n    for (const [name, handler] of Object.entries(effectsHandlers)) {\n      this.register(name, handler as ApplicatorHandler);\n    }\n\n    for (const [name, handler] of Object.entries(advancedLayoutHandlers)) {\n      this.register(name, handler as ApplicatorHandler);\n    }\n\n    for (const [name, handler] of Object.entries(backgroundHandlers)) {\n      this.register(name, handler as ApplicatorHandler);\n    }\n\n    for (const [name, handler] of Object.entries(displayHandlers)) {\n      this.register(name, handler as ApplicatorHandler);\n    }\n\n    for (const [name, handler] of Object.entries(transitionHandlers)) {\n      this.register(name, handler as ApplicatorHandler);\n    }\n  }\n}\n"
   ],
   "mappings": "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",
-  "debugId": "FC865C18036E241064756E2164756E21",
+  "debugId": "0F458DA72C35D48864756E2164756E21",
   "names": []
 }

package/dist/src/dom/components/index.js

@@ -14,6 +14,10 @@ import {
   exports_link,
   init_link
 } from "./link.js";
+import {
+  exports_container,
+  init_container
+} from "./container.js";
 import {
   exports_avatar,
   init_avatar
@@ -42,6 +46,10 @@ import {
   exports_spacer,
   init_spacer
 } from "./spacer.js";
+import {
+  exports_text,
+  init_text
+} from "./text.js";
 import {
   exports_input,
   init_input
@@ -71,9 +79,9 @@ import {
   init_card
 } from "./card.js";
 import {
-  exports_container,
-  init_container
-} from "./container.js";
+  exports_image,
+  init_image
+} from "./image.js";
 import {
   exports_video,
   init_video
@@ -102,10 +110,6 @@ import {
   exports_paragraph,
   init_paragraph
 } from "./paragraph.js";
-import {
-  exports_text,
-  init_text
-} from "./text.js";
 import {
   exports_checkbox,
   init_checkbox
@@ -114,10 +118,6 @@ import {
   exports_column,
   init_column
 } from "./column.js";
-import {
-  exports_image,
-  init_image
-} from "./image.js";
 import {
   __toCommonJS
 } from "../../../chunk-2s02mkzs.js";
@@ -214,4 +214,4 @@ export {
 
 export { ComponentRegistry };
 
-//# debugId=65DAAC739196799D64756E2164756E21
+//# debugId=D69B3D47E1A589AD64756E2164756E21

package/dist/src/dom/components/index.js.map

@@ -5,6 +5,6 @@
     "/**\n * Component Registry\n *\n * Manages mappings from Hypen component types to DOM elements\n */\n\nexport interface ComponentHandler {\n  create(): HTMLElement;\n  applyProps?(element: HTMLElement, props: Record<string, any>): void;\n}\n\nexport class ComponentRegistry {\n  private handlers: Map<string, ComponentHandler> = new Map();\n\n  constructor() {\n    this.registerDefaults();\n  }\n\n  /**\n   * Register a component handler\n   */\n  register(type: string, handler: ComponentHandler): void {\n    this.handlers.set(type.toLowerCase(), handler);\n  }\n\n  /**\n   * Get handler for a component type\n   */\n  get(type: string): ComponentHandler | undefined {\n    return this.handlers.get(type.toLowerCase());\n  }\n\n  /**\n   * Create element for a component type\n   */\n  createElement(type: string, props: Record<string, any> = {}): HTMLElement | null {\n    const handler = this.get(type);\n    if (!handler) return null;\n\n    const element = handler.create();\n    if (handler.applyProps) {\n      handler.applyProps(element, props);\n    }\n    return element;\n  }\n\n  /**\n   * Register all default Hypen components\n   */\n  private registerDefaults(): void {\n    // Import and register all component handlers\n    const { columnHandler } = require(\"./column.js\");\n    const { rowHandler } = require(\"./row.js\");\n    const { textHandler } = require(\"./text.js\");\n    const { imageHandler } = require(\"./image.js\");\n    const { buttonHandler } = require(\"./button.js\");\n    const { containerHandler } = require(\"./container.js\");\n    const { centerHandler } = require(\"./center.js\");\n    const { listHandler } = require(\"./list.js\");\n    const { inputHandler } = require(\"./input.js\");\n    const { linkHandler } = require(\"./link.js\");\n    const { textareaHandler } = require(\"./textarea.js\");\n    const { checkboxHandler } = require(\"./checkbox.js\");\n    const { selectHandler } = require(\"./select.js\");\n    const { spacerHandler } = require(\"./spacer.js\");\n    const { stackHandler } = require(\"./stack.js\");\n    const { dividerHandler } = require(\"./divider.js\");\n    const { gridHandler } = require(\"./grid.js\");\n    const { cardHandler } = require(\"./card.js\");\n    const { headingHandler } = require(\"./heading.js\");\n    const { switchHandler } = require(\"./switch.js\");\n    const { sliderHandler } = require(\"./slider.js\");\n    const { spinnerHandler } = require(\"./spinner.js\");\n    const { badgeHandler } = require(\"./badge.js\");\n    const { avatarHandler } = require(\"./avatar.js\");\n    const { progressBarHandler } = require(\"./progressbar.js\");\n    const { videoHandler } = require(\"./video.js\");\n    const { audioHandler } = require(\"./audio.js\");\n    const { paragraphHandler } = require(\"./paragraph.js\");\n    const { routerHandler } = require(\"./router.js\");\n    const { routeHandler } = require(\"./route.js\");\n\n    this.register(\"column\", columnHandler);\n    this.register(\"row\", rowHandler);\n    this.register(\"text\", textHandler);\n    this.register(\"image\", imageHandler);\n    this.register(\"button\", buttonHandler);\n    this.register(\"container\", containerHandler);\n    this.register(\"box\", containerHandler);\n    this.register(\"center\", centerHandler);\n    this.register(\"list\", listHandler);\n    this.register(\"input\", inputHandler);\n    this.register(\"link\", linkHandler);\n    this.register(\"textarea\", textareaHandler);\n    this.register(\"checkbox\", checkboxHandler);\n    this.register(\"select\", selectHandler);\n    this.register(\"spacer\", spacerHandler);\n    this.register(\"stack\", stackHandler);\n    this.register(\"divider\", dividerHandler);\n    this.register(\"grid\", gridHandler);\n    this.register(\"card\", cardHandler);\n    this.register(\"heading\", headingHandler);\n    this.register(\"switch\", switchHandler);\n    this.register(\"slider\", sliderHandler);\n    this.register(\"spinner\", spinnerHandler);\n    this.register(\"badge\", badgeHandler);\n    this.register(\"avatar\", avatarHandler);\n    this.register(\"progressbar\", progressBarHandler);\n    this.register(\"video\", videoHandler);\n    this.register(\"audio\", audioHandler);\n    this.register(\"paragraph\", paragraphHandler);\n    this.register(\"router\", routerHandler);\n    this.register(\"route\", routeHandler);\n  }\n}\n"
   ],
   "mappings": "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",
-  "debugId": "65DAAC739196799D64756E2164756E21",
+  "debugId": "D69B3D47E1A589AD64756E2164756E21",
   "names": []
 }

package/dist/src/dom/index.js

@@ -4,7 +4,6 @@ import {
 import {
   DOMRenderer
 } from "./renderer.js";
-import"./canvas/index.js";
 import {
   ComponentRegistry
 } from "./components/index.js";
@@ -12,6 +11,8 @@ import"./components/list.js";
 import"./components/textarea.js";
 import"./components/grid.js";
 import"./components/link.js";
+import"./canvas/index.js";
+import"./components/container.js";
 import"./components/avatar.js";
 import"./components/switch.js";
 import"./components/badge.js";
@@ -19,6 +20,7 @@ import"./components/route.js";
 import"./components/center.js";
 import"./components/divider.js";
 import"./components/spacer.js";
+import"./components/text.js";
 import"./components/input.js";
 import"./components/stack.js";
 import"./components/progressbar.js";
@@ -26,7 +28,7 @@ import"./components/button.js";
 import"./components/heading.js";
 import"./components/slider.js";
 import"./components/card.js";
-import"./components/container.js";
+import"./components/image.js";
 import"./components/video.js";
 import"./components/spinner.js";
 import"./components/row.js";
@@ -34,17 +36,17 @@ import"./components/select.js";
 import"./components/router.js";
 import"./components/audio.js";
 import"./components/paragraph.js";
-import"./components/text.js";
 import {
   ApplicatorRegistry
 } from "./applicators/index.js";
+import"./applicators/layout.js";
 import"./applicators/events.js";
 import"./applicators/color.js";
 import"./applicators/typography.js";
 import"./applicators/effects.js";
 import"./components/checkbox.js";
 import"./components/column.js";
-import"./components/image.js";
+import"./applicators/transform.js";
 import"./applicators/margin.js";
 import"./applicators/advanced-layout.js";
 import"./applicators/display.js";
@@ -52,14 +54,12 @@ import"./applicators/size.js";
 import"./applicators/font.js";
 import"./applicators/background.js";
 import"./applicators/transition.js";
-import"./applicators/layout.js";
 import {
   RerenderTracker,
   defaultDebugConfig
 } from "./debug.js";
 import"./applicators/padding.js";
 import"./applicators/border.js";
-import"./applicators/transform.js";
 import"../../chunk-2s02mkzs.js";
 export {
   defaultDebugConfig,
@@ -70,4 +70,4 @@ export {
   ApplicatorRegistry
 };
 
-//# debugId=B37DC3169EBA00A264756E2164756E21
+//# debugId=F2160B44162FF9D064756E2164756E21

package/dist/src/dom/index.js.map

@@ -4,6 +4,6 @@
   "sourcesContent": [
   ],
   "mappings": "",
-  "debugId": "B37DC3169EBA00A264756E2164756E21",
+  "debugId": "F2160B44162FF9D064756E2164756E21",
   "names": []
 }