@hypen-space/web 0.4.35 → 0.4.37

package/dist/canvas/renderer.js

@@ -1,2272 +1,365 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toCommonJS = (from) => {
-  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
-  if (entry)
-    return entry;
-  entry = __defProp({}, "__esModule", { value: true });
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (var key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(entry, key))
-        __defProp(entry, key, {
-          get: __accessProp.bind(from, key),
-          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-        });
-  }
-  __moduleCache.set(from, entry);
-  return entry;
-};
-var __moduleCache;
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: __exportSetter.bind(all, name)
-    });
+/**
+ * Canvas Renderer
+ *
+ * Main renderer class that orchestrates layout, painting, and events
+ */
+import { frameworkLoggers } from "@hypen-space/core/logger";
+const log = frameworkLoggers.canvas;
+import { computeLayout } from "./layout.js";
+import { paintNode, registerPainter } from "./paint.js";
+import { CanvasEventManager } from "./events.js";
+import { InputOverlay } from "./input.js";
+import { AccessibilityLayer } from "./accessibility.js";
+const DEFAULT_OPTIONS = {
+    devicePixelRatio: typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1,
+    backgroundColor: "#ffffff",
+    enableAccessibility: true,
+    enableHitTesting: true,
+    enableInputOverlay: true,
+    enableDirtyRects: false,
+    enableLayerCaching: false,
+    maxLayerCacheSize: 10,
+    showLayoutBounds: false,
+    showDirtyRects: false,
+    logPerformance: false,
 };
-var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
-
-// src/canvas/accessibility.ts
-class AccessibilityLayer {
-  shadowRoot;
-  nodeMap = new Map;
-  enabled;
-  constructor(container, enabled = true) {
-    this.enabled = enabled && typeof document !== "undefined";
-    if (this.enabled && typeof document !== "undefined") {
-      this.shadowRoot = document.createElement("div");
-      this.shadowRoot.setAttribute("role", "application");
-      this.shadowRoot.setAttribute("aria-label", "Hypen Canvas Application");
-      this.shadowRoot.style.position = "absolute";
-      this.shadowRoot.style.left = "-9999px";
-      this.shadowRoot.style.width = "1px";
-      this.shadowRoot.style.height = "1px";
-      this.shadowRoot.style.overflow = "hidden";
-      if (container) {
-        container.appendChild(this.shadowRoot);
-      }
-    } else {
-      this.shadowRoot = {};
-    }
-  }
-  syncTree(root) {
-    if (!this.enabled)
-      return;
-    this.shadowRoot.innerHTML = "";
-    this.nodeMap.clear();
-    const shadowNode = this.createShadowNode(root);
-    if (shadowNode) {
-      this.shadowRoot.appendChild(shadowNode);
-    }
-  }
-  createShadowNode(node) {
-    if (!node.visible)
-      return null;
-    let element;
-    switch (node.type.toLowerCase()) {
-      case "button":
-        element = document.createElement("button");
-        element.textContent = this.getNodeText(node);
-        if (node.props.onclick) {
-          element.setAttribute("aria-label", "Clickable button");
+/**
+ * Canvas Renderer
+ */
+export class CanvasRenderer {
+    canvas;
+    ctx;
+    engine;
+    options;
+    rootNode = null;
+    nodes = new Map();
+    eventManager;
+    inputOverlay;
+    accessibilityLayer;
+    rafId = null;
+    needsRedraw = false;
+    frameCount = 0;
+    lastFrameTime = 0;
+    constructor(canvas, engine, options) {
+        this.canvas = canvas;
+        this.engine = engine;
+        this.options = { ...DEFAULT_OPTIONS, ...options };
+        // Get context
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+            throw new Error("Failed to get 2D context from canvas");
         }
-        break;
-      case "input":
-        element = document.createElement("input");
-        element.type = node.props.type || "text";
-        element.value = node.props.value || "";
-        if (node.props.placeholder) {
-          element.placeholder = node.props.placeholder;
+        this.ctx = ctx;
+        // Setup HiDPI
+        this.setupHiDPI();
+        // Initialize subsystems
+        this.eventManager = new CanvasEventManager(canvas, engine);
+        this.inputOverlay = new InputOverlay(canvas.parentElement || (typeof document !== "undefined" ? document.body : null));
+        this.accessibilityLayer = new AccessibilityLayer(canvas.parentElement || (typeof document !== "undefined" ? document.body : null), this.options.enableAccessibility || false);
+        // Listen for redraw requests from event manager
+        this.canvas.addEventListener("hypen:redraw", () => this.scheduleRedraw());
+        // Don't schedule initial render - wait for patches
+    }
+    /**
+     * Setup HiDPI rendering
+     */
+    setupHiDPI() {
+        const dpr = this.options.devicePixelRatio || 1;
+        const rect = this.canvas.getBoundingClientRect();
+        this.canvas.width = rect.width * dpr;
+        this.canvas.height = rect.height * dpr;
+        this.ctx.scale(dpr, dpr);
+        // Update canvas display size
+        this.canvas.style.width = `${rect.width}px`;
+        this.canvas.style.height = `${rect.height}px`;
+    }
+    /**
+     * Apply patches from engine
+     */
+    applyPatches(patches) {
+        for (const patch of patches) {
+            this.applyPatch(patch);
         }
-        break;
-      case "textarea":
-        element = document.createElement("textarea");
-        element.value = node.props.value || "";
-        if (node.props.placeholder) {
-          element.placeholder = node.props.placeholder;
+        // Update accessibility layer
+        if (this.rootNode) {
+            this.accessibilityLayer.syncTree(this.rootNode);
         }
-        break;
-      case "image":
-        element = document.createElement("img");
-        element.src = node.props.src || "";
-        element.alt = node.props.alt || "Image";
-        break;
-      case "text":
-        element = document.createElement("span");
-        element.textContent = String(node.props[0] || node.props.text || "");
-        break;
-      case "column":
-      case "row":
-      case "container":
-      case "box":
-        element = document.createElement("div");
-        element.setAttribute("role", node.type === "column" ? "group" : "group");
-        break;
-      default:
-        element = document.createElement("div");
-    }
-    element.setAttribute("data-hypen-id", node.id);
-    if (node.props["aria-label"]) {
-      element.setAttribute("aria-label", node.props["aria-label"]);
-    }
-    if (node.focusable) {
-      element.tabIndex = 0;
-    }
-    this.nodeMap.set(node.id, element);
-    for (const child of node.children) {
-      const childElement = this.createShadowNode(child);
-      if (childElement) {
-        element.appendChild(childElement);
-      }
-    }
-    return element;
-  }
-  getNodeText(node) {
-    if (node.type === "text") {
-      return String(node.props[0] || node.props.text || "");
-    }
-    let text = "";
-    for (const child of node.children) {
-      text += this.getNodeText(child);
-    }
-    return text;
-  }
-  focusNode(nodeId) {
-    if (!this.enabled)
-      return;
-    const element = this.nodeMap.get(nodeId);
-    if (element) {
-      element.focus();
-    }
-  }
-  updateNode(node) {
-    if (!this.enabled)
-      return;
-    const element = this.nodeMap.get(node.id);
-    if (!element)
-      return;
-    if (node.type === "text") {
-      element.textContent = String(node.props[0] || node.props.text || "");
-    }
-    if (node.type === "input" || node.type === "textarea") {
-      element.value = node.props.value || "";
-    }
-    element.style.display = node.visible ? "" : "none";
-  }
-  getElement(nodeId) {
-    return this.nodeMap.get(nodeId);
-  }
-  setEnabled(enabled) {
-    this.enabled = enabled;
-    if (!enabled && this.shadowRoot.parentElement) {
-      this.shadowRoot.remove();
-    }
-  }
-  destroy() {
-    if (this.shadowRoot.parentElement) {
-      this.shadowRoot.remove();
-    }
-    this.nodeMap.clear();
-  }
-}
-
-// src/canvas/utils.ts
-function parseSpacing(value) {
-  if (typeof value === "number") {
-    return { top: value, right: value, bottom: value, left: value };
-  }
-  if (typeof value === "string") {
-    const parts = value.split(/\s+/).map((v) => parseFloat(v) || 0);
-    if (parts.length === 1) {
-      return { top: parts[0], right: parts[0], bottom: parts[0], left: parts[0] };
-    }
-    if (parts.length === 2) {
-      return { top: parts[0], right: parts[1], bottom: parts[0], left: parts[1] };
-    }
-    if (parts.length === 4) {
-      return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[3] };
-    }
-  }
-  if (typeof value === "object" && value !== null) {
-    return {
-      top: parseFloat(value.top) || 0,
-      right: parseFloat(value.right) || 0,
-      bottom: parseFloat(value.bottom) || 0,
-      left: parseFloat(value.left) || 0
-    };
-  }
-  return { top: 0, right: 0, bottom: 0, left: 0 };
-}
-function parseSize(value) {
-  if (typeof value === "number")
-    return value;
-  if (typeof value === "string") {
-    if (value === "auto")
-      return null;
-    const num = parseFloat(value);
-    return isNaN(num) ? null : num;
-  }
-  return null;
-}
-function isPointInRect(point, rect) {
-  return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
-}
-function isPointInRoundedRect(point, rect, radius) {
-  const { x, y, width, height } = rect;
-  if (!isPointInRect(point, rect))
-    return false;
-  if (radius <= 0)
-    return true;
-  const px = point.x;
-  const py = point.y;
-  if (px < x + radius && py < y + radius) {
-    return Math.pow(px - (x + radius), 2) + Math.pow(py - (y + radius), 2) <= Math.pow(radius, 2);
-  }
-  if (px > x + width - radius && py < y + radius) {
-    return Math.pow(px - (x + width - radius), 2) + Math.pow(py - (y + radius), 2) <= Math.pow(radius, 2);
-  }
-  if (px < x + radius && py > y + height - radius) {
-    return Math.pow(px - (x + radius), 2) + Math.pow(py - (y + height - radius), 2) <= Math.pow(radius, 2);
-  }
-  if (px > x + width - radius && py > y + height - radius) {
-    return Math.pow(px - (x + width - radius), 2) + Math.pow(py - (y + height - radius), 2) <= Math.pow(radius, 2);
-  }
-  return true;
-}
-function mergeRects(rects) {
-  if (rects.length === 0)
-    return null;
-  if (rects.length === 1)
-    return rects[0];
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  for (const rect of rects) {
-    minX = Math.min(minX, rect.x);
-    minY = Math.min(minY, rect.y);
-    maxX = Math.max(maxX, rect.x + rect.width);
-    maxY = Math.max(maxY, rect.y + rect.height);
-  }
-  return {
-    x: minX,
-    y: minY,
-    width: maxX - minX,
-    height: maxY - minY
-  };
-}
-function createFontString(fontSize, fontWeight, fontFamily) {
-  return `${fontWeight} ${fontSize}px ${fontFamily}`;
-}
-function walkTree(node, callback) {
-  callback(node);
-  for (const child of node.children) {
-    walkTree(child, callback);
-  }
-}
-function findNodeById(root, id) {
-  if (root.id === id)
-    return root;
-  for (const child of root.children) {
-    const found = findNodeById(child, id);
-    if (found)
-      return found;
-  }
-  return null;
-}
-function getAbsoluteBounds(node) {
-  if (!node.layout)
-    return null;
-  let x = node.layout.x;
-  let y = node.layout.y;
-  let current = node.parent;
-  while (current && current.layout) {
-    x += current.layout.contentX;
-    y += current.layout.contentY;
-    current = current.parent;
-  }
-  return {
-    x,
-    y,
-    width: node.layout.width,
-    height: node.layout.height
-  };
-}
-
-// src/canvas/text.ts
-import { frameworkLoggers } from "@hypen-space/core/logger";
-var log = frameworkLoggers.canvas;
-var textMetricsCache = new Map;
-function getCacheKey(text, fontStyle, maxWidth) {
-  return `${text}|${fontStyle.fontSize}|${fontStyle.fontWeight}|${fontStyle.fontFamily}|${maxWidth || "auto"}`;
-}
-function measureText(ctx, text, fontStyle, maxWidth) {
-  const cacheKey = getCacheKey(text, fontStyle, maxWidth);
-  const cached = textMetricsCache.get(cacheKey);
-  if (cached)
-    return cached;
-  const font = createFontString(fontStyle.fontSize, fontStyle.fontWeight, fontStyle.fontFamily);
-  ctx.save();
-  ctx.font = font;
-  const lineHeight = fontStyle.lineHeight || fontStyle.fontSize * 1.2;
-  if (!maxWidth) {
-    const metrics = ctx.measureText(text);
-    const result2 = {
-      width: metrics.width,
-      height: lineHeight,
-      lines: [text],
-      lineHeight
-    };
-    ctx.restore();
-    textMetricsCache.set(cacheKey, result2);
-    return result2;
-  }
-  const lines = wrapText(ctx, text, maxWidth);
-  const width = Math.max(...lines.map((line) => ctx.measureText(line).width));
-  const height = lines.length * lineHeight;
-  const result = {
-    width,
-    height,
-    lines,
-    lineHeight
-  };
-  ctx.restore();
-  textMetricsCache.set(cacheKey, result);
-  return result;
-}
-function wrapText(ctx, text, maxWidth) {
-  const lines = [];
-  const paragraphs = text.split(`
-`);
-  for (const paragraph of paragraphs) {
-    const words = paragraph.split(" ");
-    let currentLine = "";
-    for (const word of words) {
-      const testLine = currentLine ? `${currentLine} ${word}` : word;
-      const metrics = ctx.measureText(testLine);
-      if (metrics.width > maxWidth && currentLine) {
-        lines.push(currentLine);
-        currentLine = word;
-      } else {
-        currentLine = testLine;
-      }
-    }
-    if (currentLine) {
-      lines.push(currentLine);
-    }
-  }
-  return lines.length > 0 ? lines : [""];
-}
-function renderText(ctx, text, x, y, width, height, style) {
-  const font = createFontString(style.fontSize, style.fontWeight, style.fontFamily);
-  ctx.save();
-  ctx.font = font;
-  ctx.fillStyle = style.color;
-  ctx.textBaseline = "top";
-  const metrics = measureText(ctx, text, style, width);
-  let startY = y;
-  if (style.verticalAlign === "middle") {
-    startY = y + (height - metrics.height) / 2;
-  } else if (style.verticalAlign === "bottom") {
-    startY = y + height - metrics.height;
-  }
-  for (let i = 0;i < metrics.lines.length; i++) {
-    const line = metrics.lines[i];
-    const lineY = startY + i * metrics.lineHeight;
-    let lineX = x;
-    if (style.textAlign === "center") {
-      const lineWidth = ctx.measureText(line).width;
-      lineX = x + (width - lineWidth) / 2;
-    } else if (style.textAlign === "right") {
-      const lineWidth = ctx.measureText(line).width;
-      lineX = x + width - lineWidth;
-    }
-    ctx.fillText(line, lineX, lineY);
-  }
-  ctx.restore();
-}
-function clearTextCache() {
-  textMetricsCache.clear();
-}
-async function loadFont(fontFamily, fontWeight = "normal") {
-  if (!("fonts" in document))
-    return;
-  const font = `${fontWeight} 16px ${fontFamily}`;
-  try {
-    await document.fonts.load(font);
-  } catch (error) {
-    log.warn(`Failed to load font: ${font}`, error);
-  }
-}
-
-// src/canvas/input.ts
-class InputOverlay {
-  container;
-  overlay = null;
-  focusedNode = null;
-  onChangeCallback = null;
-  bindPath = null;
-  engine = null;
-  constructor(container) {
-    this.container = container || {};
-  }
-  showInput(node, canvasBounds, onChange, engine) {
-    if (typeof document === "undefined")
-      return;
-    this.hideInput();
-    this.bindPath = node.props.bind || null;
-    this.engine = engine || null;
-    const bounds = getAbsoluteBounds(node);
-    if (!bounds)
-      return;
-    const isMultiline = node.type === "textarea";
-    this.overlay = isMultiline ? document.createElement("textarea") : document.createElement("input");
-    this.styleOverlay(node, bounds, canvasBounds);
-    const value = node.props.value || "";
-    this.overlay.value = value;
-    this.onChangeCallback = onChange;
-    this.overlay.addEventListener("input", this.onInput.bind(this));
-    this.overlay.addEventListener("blur", this.onBlur.bind(this));
-    this.overlay.addEventListener("keydown", this.onKeyDown.bind(this));
-    this.container.appendChild(this.overlay);
-    this.overlay.focus();
-    this.focusedNode = node;
-  }
-  hideInput() {
-    if (this.overlay) {
-      this.overlay.remove();
-      this.overlay = null;
-    }
-    this.focusedNode = null;
-    this.onChangeCallback = null;
-    this.bindPath = null;
-    this.engine = null;
-  }
-  updatePosition(node, canvasBounds) {
-    if (!this.overlay || node !== this.focusedNode)
-      return;
-    const bounds = getAbsoluteBounds(node);
-    if (!bounds)
-      return;
-    this.positionOverlay(bounds, canvasBounds);
-  }
-  styleOverlay(node, bounds, canvasBounds) {
-    if (!this.overlay)
-      return;
-    const props = node.props;
-    this.positionOverlay(bounds, canvasBounds);
-    const fontSize = parseFloat(props.fontSize) || 16;
-    const fontWeight = props.fontWeight || "normal";
-    const fontFamily = props.fontFamily || "system-ui, sans-serif";
-    const color = props.color || "#000000";
-    Object.assign(this.overlay.style, {
-      fontSize: `${fontSize}px`,
-      fontWeight,
-      fontFamily,
-      color,
-      border: "none",
-      outline: "2px solid #007bff",
-      backgroundColor: props.backgroundColor || "#ffffff",
-      padding: `${props.padding || 8}px`,
-      borderRadius: `${props.borderRadius || 4}px`,
-      boxSizing: "border-box",
-      resize: "none"
-    });
-    if (props.placeholder) {
-      this.overlay.placeholder = props.placeholder;
-    }
-    if (this.overlay instanceof HTMLInputElement && props.type) {
-      this.overlay.type = props.type;
-    }
-  }
-  positionOverlay(bounds, canvasBounds) {
-    if (!this.overlay)
-      return;
-    const canvas = this.container.querySelector("canvas");
-    const scaleX = canvasBounds.width / canvas.width;
-    const scaleY = canvasBounds.height / canvas.height;
-    const left = bounds.x * scaleX;
-    const top = bounds.y * scaleY;
-    const width = bounds.width * scaleX;
-    const height = bounds.height * scaleY;
-    Object.assign(this.overlay.style, {
-      position: "absolute",
-      left: `${left}px`,
-      top: `${top}px`,
-      width: `${width}px`,
-      height: `${height}px`
-    });
-  }
-  onInput(e) {
-    if (!this.overlay || !this.onChangeCallback)
-      return;
-    const value = this.overlay.value;
-    this.onChangeCallback(value);
-    if (this.bindPath && this.engine) {
-      this.engine.dispatchAction("__hypen_bind", {
-        path: this.bindPath,
-        value
-      });
-    }
-  }
-  onBlur() {
-    this.hideInput();
-  }
-  onKeyDown(e) {
-    if (!this.overlay)
-      return;
-    if (e.key === "Enter" && this.overlay instanceof HTMLInputElement) {
-      e.preventDefault();
-      this.overlay.blur();
-    }
-    if (e.key === "Escape") {
-      e.preventDefault();
-      this.overlay.blur();
-    }
-  }
-  isShown() {
-    return this.overlay !== null;
-  }
-  getFocusedNode() {
-    return this.focusedNode;
-  }
-}
-
-// src/canvas/paint.ts
-var customPainters = new Map;
-function registerPainter(type, painter) {
-  customPainters.set(type.toLowerCase(), painter);
-}
-function paintNode(ctx, node) {
-  if (!node.visible || !node.layout)
-    return;
-  ctx.save();
-  applyTransforms(ctx, node);
-  if (node.opacity < 1) {
-    ctx.globalAlpha = node.opacity;
-  }
-  const customPainter = customPainters.get(node.type.toLowerCase());
-  if (customPainter) {
-    customPainter(ctx, node);
-    ctx.restore();
-    return;
-  }
-  switch (node.type.toLowerCase()) {
-    case "column":
-    case "row":
-    case "stack":
-      paintContainer(ctx, node);
-      break;
-    case "text":
-      paintText(ctx, node);
-      break;
-    case "button":
-      paintButton(ctx, node);
-      break;
-    case "input":
-      paintInput(ctx, node);
-      break;
-    case "image":
-      paintImage(ctx, node);
-      break;
-    case "spacer":
-      break;
-    case "divider":
-    case "separator":
-      paintDivider(ctx, node);
-      break;
-    case "checkbox":
-      paintCheckbox(ctx, node);
-      break;
-    case "radio":
-      paintRadio(ctx, node);
-      break;
-    case "switch":
-    case "toggle":
-      paintSwitch(ctx, node);
-      break;
-    case "slider":
-      paintSlider(ctx, node);
-      break;
-    case "progress":
-    case "progressbar":
-      paintProgress(ctx, node);
-      break;
-    case "spinner":
-    case "loading":
-      paintSpinner(ctx, node);
-      break;
-    case "card":
-      paintCard(ctx, node);
-      break;
-    case "badge":
-      paintBadge(ctx, node);
-      break;
-    case "avatar":
-      paintAvatar(ctx, node);
-      break;
-    case "icon":
-      paintIcon(ctx, node);
-      break;
-    case "link":
-      paintLink(ctx, node);
-      break;
-    case "app":
-    case "container":
-    case "box":
-      paintContainer(ctx, node);
-      break;
-    default:
-      paintContainer(ctx, node);
-  }
-  ctx.restore();
-  for (const child of node.children) {
-    paintNode(ctx, child);
-  }
-  if (node._needsRestore) {
-    ctx.restore();
-    delete node._needsRestore;
-  }
-}
-function paintContainer(ctx, node) {
-  const layout = node.layout;
-  const props = node.props;
-  const x = layout.x;
-  const y = layout.y;
-  const width = layout.width;
-  const height = layout.height;
-  const radius = layout.border.radius;
-  const shadow = props.shadow || props.boxShadow;
-  if (shadow) {
-    applyShadow(ctx, shadow);
-  }
-  const backgroundColor = props.backgroundColor || props.background;
-  if (backgroundColor) {
-    if (typeof backgroundColor === "string" && backgroundColor.includes("gradient")) {
-      ctx.fillStyle = parseGradient(ctx, backgroundColor, x, y, width, height);
-    } else {
-      ctx.fillStyle = backgroundColor;
-    }
-    if (radius > 0) {
-      drawRoundedRect(ctx, x, y, width, height, radius);
-      ctx.fill();
-    } else {
-      ctx.fillRect(x, y, width, height);
-    }
-  }
-  if (shadow) {
-    ctx.shadowColor = "transparent";
-    ctx.shadowBlur = 0;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 0;
-  }
-  if (layout.border.width > 0 && layout.border.color !== "transparent") {
-    ctx.strokeStyle = layout.border.color;
-    ctx.lineWidth = layout.border.width;
-    if (radius > 0) {
-      drawRoundedRect(ctx, x, y, width, height, radius);
-      ctx.stroke();
-    } else {
-      ctx.strokeRect(x, y, width, height);
-    }
-  }
-  const overflow = props.overflow || "visible";
-  if (overflow === "hidden" || overflow === "scroll" || overflow === "auto") {
-    ctx.save();
-    ctx.beginPath();
-    if (radius > 0) {
-      drawRoundedRect(ctx, x, y, width, height, radius);
-    } else {
-      ctx.rect(x, y, width, height);
-    }
-    ctx.clip();
-    node._needsRestore = true;
-  }
-}
-function paintText(ctx, node) {
-  const layout = node.layout;
-  const props = node.props;
-  let text = String(props[0] || props.text || "");
-  const color = props.color || "#000000";
-  const fontSize = parseFloat(props.fontSize) || 16;
-  const fontWeight = props.fontWeight || "normal";
-  const fontFamily = props.fontFamily || "system-ui, sans-serif";
-  const textAlign = props.textAlign || "left";
-  const lineHeight = parseFloat(props.lineHeight) || fontSize * 1.2;
-  const textDecoration = props.textDecoration || "none";
-  const textTransform = props.textTransform || "none";
-  const letterSpacing = parseFloat(props.letterSpacing) || 0;
-  if (textTransform === "uppercase") {
-    text = text.toUpperCase();
-  } else if (textTransform === "lowercase") {
-    text = text.toLowerCase();
-  } else if (textTransform === "capitalize") {
-    text = text.replace(/\b\w/g, (char) => char.toUpperCase());
-  }
-  const textShadow = props.textShadow || props.shadow;
-  if (textShadow) {
-    applyShadow(ctx, textShadow);
-  }
-  const x = layout.x + layout.contentX;
-  const y = layout.y + layout.contentY;
-  if (letterSpacing !== 0) {
-    ctx.fillStyle = color;
-    ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
-    ctx.textAlign = "left";
-    ctx.textBaseline = "top";
-    let currentX = x;
-    for (let i = 0;i < text.length; i++) {
-      ctx.fillText(text[i], currentX, y);
-      currentX += ctx.measureText(text[i]).width;
-      if (i < text.length - 1) {
-        currentX += letterSpacing;
-      }
-    }
-    if (textDecoration !== "none") {
-      applyTextDecoration(ctx, textDecoration, color, x, y, currentX - x, fontSize);
-    }
-  } else {
-    renderText(ctx, text, x, y, layout.contentWidth, layout.contentHeight, {
-      color,
-      fontSize,
-      fontWeight,
-      fontFamily,
-      textAlign,
-      verticalAlign: "top",
-      lineHeight
-    });
-    if (textDecoration !== "none") {
-      ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
-      const textWidth = ctx.measureText(text).width;
-      applyTextDecoration(ctx, textDecoration, color, x, y, textWidth, fontSize);
-    }
-  }
-  if (textShadow) {
-    ctx.shadowColor = "transparent";
-    ctx.shadowBlur = 0;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 0;
-  }
-}
-function paintButton(ctx, node) {
-  const layout = node.layout;
-  const props = node.props;
-  const x = layout.x;
-  const y = layout.y;
-  const width = layout.width;
-  const height = layout.height;
-  const radius = layout.border.radius || 4;
-  const shadow = props.shadow || props.boxShadow;
-  if (shadow) {
-    applyShadow(ctx, shadow);
-  }
-  let backgroundColor = props.backgroundColor || "#007bff";
-  if (node.hovered) {
-    backgroundColor = props.hoverColor || "#0056b3";
-  }
-  if (node.focused) {
-    backgroundColor = props.focusColor || "#004085";
-  }
-  if (typeof backgroundColor === "string" && backgroundColor.includes("gradient")) {
-    ctx.fillStyle = parseGradient(ctx, backgroundColor, x, y, width, height);
-  } else {
-    ctx.fillStyle = backgroundColor;
-  }
-  drawRoundedRect(ctx, x, y, width, height, radius);
-  ctx.fill();
-  if (shadow) {
-    ctx.shadowColor = "transparent";
-    ctx.shadowBlur = 0;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 0;
-  }
-  if (layout.border.width > 0) {
-    ctx.strokeStyle = layout.border.color;
-    ctx.lineWidth = layout.border.width;
-    drawRoundedRect(ctx, x, y, width, height, radius);
-    ctx.stroke();
-  }
-  for (const child of node.children) {
-    paintNode(ctx, child);
-  }
-}
-function paintInput(ctx, node) {
-  const layout = node.layout;
-  const props = node.props;
-  const x = layout.x;
-  const y = layout.y;
-  const width = layout.width;
-  const height = layout.height;
-  const radius = layout.border.radius || 4;
-  ctx.fillStyle = props.backgroundColor || "#ffffff";
-  drawRoundedRect(ctx, x, y, width, height, radius);
-  ctx.fill();
-  const borderColor = node.focused ? "#007bff" : layout.border.color || "#cccccc";
-  const borderWidth = node.focused ? 2 : layout.border.width || 1;
-  ctx.strokeStyle = borderColor;
-  ctx.lineWidth = borderWidth;
-  drawRoundedRect(ctx, x, y, width, height, radius);
-  ctx.stroke();
-  const value = props.value || "";
-  const placeholder = props.placeholder || "";
-  const text = value || placeholder;
-  const textColor = value ? props.color || "#000000" : "#999999";
-  if (text) {
-    const fontSize = parseFloat(props.fontSize) || 16;
-    const fontWeight = props.fontWeight || "normal";
-    const fontFamily = props.fontFamily || "system-ui, sans-serif";
-    const lineHeight = parseFloat(props.lineHeight) || fontSize * 1.2;
-    renderText(ctx, text, layout.x + layout.contentX, layout.y + layout.contentY, layout.contentWidth, layout.contentHeight, {
-      color: textColor,
-      fontSize,
-      fontWeight,
-      fontFamily,
-      textAlign: "left",
-      verticalAlign: "middle",
-      lineHeight
-    });
-  }
-}
-var MAX_IMAGE_CACHE_SIZE = 100;
-var MAX_FAIL_CACHE_SIZE = 200;
-var imageCache = new Map;
-var imagePending = new Set;
-var imageInFlight = new Map;
-var imageFailCache = new Map;
-var IMAGE_FAIL_COOLDOWN_MS = 30000;
-var IMAGE_MAX_ATTEMPTS = 3;
-function evictMap(map, max) {
-  while (map.size > max) {
-    const oldest = map.keys().next().value;
-    if (oldest === undefined)
-      break;
-    map.delete(oldest);
-  }
-}
-function purgeExpiredFailures() {
-  const now = Date.now();
-  for (const [key, entry] of imageFailCache) {
-    if (entry.attempts >= IMAGE_MAX_ATTEMPTS)
-      continue;
-    if (now - entry.failedAt >= IMAGE_FAIL_COOLDOWN_MS) {
-      imageFailCache.delete(key);
-    }
-  }
-}
-function clearImageCache() {
-  for (const img of imageInFlight.values()) {
-    img.onload = null;
-    img.onerror = null;
-    img.src = "";
-  }
-  imageInFlight.clear();
-  for (const img of imageCache.values()) {
-    img.src = "";
-  }
-  imageCache.clear();
-  imagePending.clear();
-  imageFailCache.clear();
-}
-function paintImage(ctx, node) {
-  const layout = node.layout;
-  const props = node.props;
-  const src = props.src || props[0];
-  if (!src)
-    return;
-  const x = layout.x;
-  const y = layout.y;
-  const width = layout.width;
-  const height = layout.height;
-  const cached = imageCache.get(src);
-  if (cached && cached.complete && cached.naturalWidth > 0) {
-    ctx.drawImage(cached, x, y, width, height);
-    return;
-  }
-  ctx.fillStyle = "#e0e0e0";
-  ctx.fillRect(x, y, width, height);
-  ctx.strokeStyle = "#999999";
-  ctx.lineWidth = 1;
-  ctx.strokeRect(x, y, width, height);
-  ctx.fillStyle = "#666666";
-  ctx.font = "14px sans-serif";
-  ctx.textAlign = "center";
-  ctx.textBaseline = "middle";
-  const failEntry = imageFailCache.get(src);
-  if (failEntry) {
-    if (failEntry.attempts >= IMAGE_MAX_ATTEMPTS || Date.now() - failEntry.failedAt < IMAGE_FAIL_COOLDOWN_MS) {
-      ctx.fillText("Failed", x + width / 2, y + height / 2);
-      return;
-    }
-  }
-  ctx.fillText("Loading...", x + width / 2, y + height / 2);
-  if (!imagePending.has(src)) {
-    imagePending.add(src);
-    const canvas = ctx.canvas;
-    const img = new Image;
-    img.crossOrigin = "anonymous";
-    imageInFlight.set(src, img);
-    img.onload = () => {
-      imageInFlight.delete(src);
-      imageCache.set(src, img);
-      imagePending.delete(src);
-      imageFailCache.delete(src);
-      evictMap(imageCache, MAX_IMAGE_CACHE_SIZE);
-      canvas.dispatchEvent(new CustomEvent("hypen:redraw"));
-    };
-    img.onerror = () => {
-      imageInFlight.delete(src);
-      imagePending.delete(src);
-      purgeExpiredFailures();
-      imageFailCache.set(src, {
-        failedAt: Date.now(),
-        attempts: (imageFailCache.get(src)?.attempts ?? 0) + 1
-      });
-      evictMap(imageFailCache, MAX_FAIL_CACHE_SIZE);
-    };
-    img.src = src;
-  }
-}
-function drawRoundedRect(ctx, x, y, width, height, radius) {
-  if (radius <= 0) {
-    ctx.rect(x, y, width, height);
-    return;
-  }
-  ctx.beginPath();
-  ctx.moveTo(x + radius, y);
-  ctx.lineTo(x + width - radius, y);
-  ctx.arcTo(x + width, y, x + width, y + radius, radius);
-  ctx.lineTo(x + width, y + height - radius);
-  ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
-  ctx.lineTo(x + radius, y + height);
-  ctx.arcTo(x, y + height, x, y + height - radius, radius);
-  ctx.lineTo(x, y + radius);
-  ctx.arcTo(x, y, x + radius, y, radius);
-  ctx.closePath();
-}
-function applyShadow(ctx, shadow) {
-  if (typeof shadow === "string") {
-    const parts = shadow.trim().split(/\s+/);
-    if (parts.length >= 3) {
-      const offsetX = parseFloat(parts[0]);
-      const offsetY = parseFloat(parts[1]);
-      const blur = parseFloat(parts[2]);
-      const color = parts.slice(3).join(" ") || "rgba(0,0,0,0.3)";
-      ctx.shadowOffsetX = offsetX;
-      ctx.shadowOffsetY = offsetY;
-      ctx.shadowBlur = blur;
-      ctx.shadowColor = color;
-    }
-  } else if (typeof shadow === "object") {
-    ctx.shadowOffsetX = shadow.offsetX || 0;
-    ctx.shadowOffsetY = shadow.offsetY || 0;
-    ctx.shadowBlur = shadow.blur || 0;
-    ctx.shadowColor = shadow.color || "rgba(0,0,0,0.3)";
-  }
-}
-function parseGradient(ctx, gradientStr, x, y, width, height) {
-  if (gradientStr.startsWith("linear-gradient")) {
-    const match = gradientStr.match(/linear-gradient\((.*)\)/);
-    if (!match)
-      return gradientStr;
-    const parts = match[1].split(",").map((s) => s.trim());
-    let x0 = x, y0 = y, x1 = x, y1 = y + height;
-    let colorStart = 0;
-    if (parts[0].includes("deg") || parts[0].includes("to ")) {
-      colorStart = 1;
-      const direction = parts[0];
-      if (direction.includes("to right") || direction === "90deg") {
-        x1 = x + width;
-        y1 = y;
-      } else if (direction.includes("to left") || direction === "270deg") {
-        x0 = x + width;
-        x1 = x;
-        y0 = y;
-        y1 = y;
-      } else if (direction.includes("to top") || direction === "0deg") {
-        y0 = y + height;
-        y1 = y;
-      }
-    }
-    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
-    const colors = parts.slice(colorStart);
-    colors.forEach((color, i) => {
-      const stop = i / (colors.length - 1);
-      gradient.addColorStop(stop, color.trim());
-    });
-    return gradient;
-  } else if (gradientStr.startsWith("radial-gradient")) {
-    const match = gradientStr.match(/radial-gradient\((.*)\)/);
-    if (!match)
-      return gradientStr;
-    const parts = match[1].split(",").map((s) => s.trim());
-    const centerX = x + width / 2;
-    const centerY = y + height / 2;
-    const radius = Math.max(width, height) / 2;
-    const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
-    parts.forEach((color, i) => {
-      const stop = i / (parts.length - 1);
-      gradient.addColorStop(stop, color.trim());
-    });
-    return gradient;
-  }
-  return gradientStr;
-}
-function applyTransforms(ctx, node) {
-  const props = node.props;
-  const layout = node.layout;
-  const originX = parseFloat(props.transformOriginX) || 0.5;
-  const originY = parseFloat(props.transformOriginY) || 0.5;
-  const centerX = layout.x + layout.width * originX;
-  const centerY = layout.y + layout.height * originY;
-  const translateX = parseFloat(props.translateX) || 0;
-  const translateY = parseFloat(props.translateY) || 0;
-  const rotate = parseFloat(props.rotate) || 0;
-  const scaleX = parseFloat(props.scaleX) || parseFloat(props.scale) || 1;
-  const scaleY = parseFloat(props.scaleY) || parseFloat(props.scale) || 1;
-  const skewX = parseFloat(props.skewX) || parseFloat(props.skew) || 0;
-  const skewY = parseFloat(props.skewY) || 0;
-  if (translateX !== 0 || translateY !== 0 || rotate !== 0 || scaleX !== 1 || scaleY !== 1 || skewX !== 0 || skewY !== 0) {
-    ctx.translate(centerX, centerY);
-    if (scaleX !== 1 || scaleY !== 1) {
-      ctx.scale(scaleX, scaleY);
-    }
-    if (rotate !== 0) {
-      ctx.rotate(rotate * Math.PI / 180);
-    }
-    if (skewX !== 0 || skewY !== 0) {
-      const skewXRad = skewX * Math.PI / 180;
-      const skewYRad = skewY * Math.PI / 180;
-      ctx.transform(1, Math.tan(skewYRad), Math.tan(skewXRad), 1, 0, 0);
-    }
-    ctx.translate(-centerX + translateX, -centerY + translateY);
-  }
-  if (props.transform && typeof props.transform === "string") {
-    parseTransformString(ctx, props.transform, centerX, centerY);
-  }
-}
-function parseTransformString(ctx, transformStr, originX, originY) {
-  const transforms = transformStr.match(/(\w+)\(([^)]+)\)/g);
-  if (!transforms)
-    return;
-  ctx.translate(originX, originY);
-  for (const transform of transforms) {
-    const match = transform.match(/(\w+)\(([^)]+)\)/);
-    if (!match)
-      continue;
-    const [, func, args] = match;
-    const values = args.split(",").map((v) => parseFloat(v.trim()));
-    switch (func.toLowerCase()) {
-      case "translate":
-        ctx.translate(values[0] || 0, values[1] || 0);
-        break;
-      case "rotate":
-        ctx.rotate(values[0] * Math.PI / 180);
-        break;
-      case "scale":
-        ctx.scale(values[0] || 1, values[1] || values[0] || 1);
-        break;
-    }
-  }
-  ctx.translate(-originX, -originY);
-}
-function paintDivider(ctx, node) {
-  const layout = node.layout;
-  const props = node.props;
-  const orientation = props.orientation || "horizontal";
-  const color = props.color || props.backgroundColor || "#e0e0e0";
-  const thickness = parseFloat(props.thickness) || 1;
-  ctx.strokeStyle = color;
-  ctx.lineWidth = thickness;
-  ctx.beginPath();
-  if (orientation === "vertical") {
-    const x = layout.x + layout.width / 2;
-    ctx.moveTo(x, layout.y);
-    ctx.lineTo(x, layout.y + layout.height);
-  } else {
-    const y = layout.y + layout.height / 2;
-    ctx.moveTo(layout.x, y);
-    ctx.lineTo(layout.x + layout.width, y);
-  }
-  ctx.stroke();
-}
-function paintCheckbox(ctx, node) {
-  const layout = node.layout;
-  const props = node.props;
-  const size = Math.min(layout.width, layout.height);
-  const x = layout.x;
-  const y = layout.y;
-  const checkedValue = props.checked !== undefined ? props.checked : props.value;
-  const checked = checkedValue === true || checkedValue === "true" || checkedValue !== false && checkedValue !== "false" && !!checkedValue;
-  const radius = parseFloat(props.borderRadius) || 2;
-  const bgColor = checked ? props.checkedColor || "#007bff" : props.backgroundColor || "#ffffff";
-  ctx.fillStyle = bgColor;
-  drawRoundedRect(ctx, x, y, size, size, radius);
-  ctx.fill();
-  const borderColor = checked ? props.checkedColor || "#007bff" : props.borderColor || "#cccccc";
-  ctx.strokeStyle = borderColor;
-  ctx.lineWidth = node.focused ? 2 : 1;
-  drawRoundedRect(ctx, x, y, size, size, radius);
-  ctx.stroke();
-  if (checked) {
-    ctx.strokeStyle = props.checkColor || "#ffffff";
-    ctx.lineWidth = 2;
-    ctx.lineCap = "round";
-    ctx.lineJoin = "round";
-    const padding = size * 0.25;
-    ctx.beginPath();
-    ctx.moveTo(x + padding, y + size / 2);
-    ctx.lineTo(x + size * 0.4, y + size - padding);
-    ctx.lineTo(x + size - padding, y + padding);
-    ctx.stroke();
-  }
-}
-function paintRadio(ctx, node) {
-  const layout = node.layout;
-  const props = node.props;
-  const size = Math.min(layout.width, layout.height);
-  const centerX = layout.x + size / 2;
-  const centerY = layout.y + size / 2;
-  const radius = size / 2;
-  const checkedValue = props.checked !== undefined ? props.checked : props.value;
-  const checked = checkedValue === true || checkedValue === "true" || checkedValue !== false && checkedValue !== "false" && !!checkedValue;
-  const bgColor = props.backgroundColor || "#ffffff";
-  ctx.fillStyle = bgColor;
-  ctx.beginPath();
-  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
-  ctx.fill();
-  const borderColor = checked ? props.checkedColor || "#007bff" : props.borderColor || "#cccccc";
-  ctx.strokeStyle = borderColor;
-  ctx.lineWidth = node.focused ? 2 : 1;
-  ctx.beginPath();
-  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
-  ctx.stroke();
-  if (checked) {
-    ctx.fillStyle = props.checkedColor || "#007bff";
-    ctx.beginPath();
-    ctx.arc(centerX, centerY, radius * 0.5, 0, Math.PI * 2);
-    ctx.fill();
-  }
-}
-function paintSwitch(ctx, node) {
-  const layout = node.layout;
-  const props = node.props;
-  const width = layout.width;
-  const height = layout.height;
-  const x = layout.x;
-  const y = layout.y;
-  const checkedValue = props.checked !== undefined ? props.checked : props.value;
-  const checked = checkedValue === true || checkedValue === "true" || checkedValue !== false && checkedValue !== "false" && !!checkedValue;
-  const radius = height / 2;
-  const trackColor = checked ? props.checkedColor || "#4caf50" : props.backgroundColor || "#cccccc";
-  ctx.fillStyle = trackColor;
-  drawRoundedRect(ctx, x, y, width, height, radius);
-  ctx.fill();
-  const thumbRadius = radius * 0.8;
-  const thumbX = checked ? x + width - radius : x + radius;
-  const thumbY = y + radius;
-  ctx.fillStyle = props.thumbColor || "#ffffff";
-  ctx.beginPath();
-  ctx.arc(thumbX, thumbY, thumbRadius, 0, Math.PI * 2);
-  ctx.fill();
-  if (props.shadow !== false) {
-    ctx.shadowColor = "rgba(0,0,0,0.2)";
-    ctx.shadowBlur = 2;
-    ctx.shadowOffsetY = 1;
-    ctx.beginPath();
-    ctx.arc(thumbX, thumbY, thumbRadius, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.shadowColor = "transparent";
-    ctx.shadowBlur = 0;
-    ctx.shadowOffsetY = 0;
-  }
-}
-function paintSlider(ctx, node) {
-  const layout = node.layout;
-  const props = node.props;
-  const width = layout.width;
-  const height = layout.height;
-  const x = layout.x;
-  const y = layout.y;
-  const min = parseFloat(props.min) || 0;
-  const max = parseFloat(props.max) || 100;
-  const value = parseFloat(props.value) || min;
-  const percentage = (value - min) / (max - min);
-  const trackHeight = parseFloat(props.trackHeight) || 4;
-  const thumbSize = parseFloat(props.thumbSize) || 16;
-  const trackY = y + (height - trackHeight) / 2;
-  ctx.fillStyle = props.trackColor || "#e0e0e0";
-  drawRoundedRect(ctx, x, trackY, width, trackHeight, trackHeight / 2);
-  ctx.fill();
-  const fillWidth = width * percentage;
-  const fillColor = props.fillColor || props.color || "#007bff";
-  if (typeof fillColor === "string" && fillColor.includes("gradient")) {
-    ctx.fillStyle = parseGradient(ctx, fillColor, x, trackY, fillWidth, trackHeight);
-  } else {
-    ctx.fillStyle = fillColor;
-  }
-  drawRoundedRect(ctx, x, trackY, fillWidth, trackHeight, trackHeight / 2);
-  ctx.fill();
-  const thumbX = x + fillWidth;
-  const thumbY = y + height / 2;
-  ctx.fillStyle = props.thumbColor || "#007bff";
-  ctx.beginPath();
-  ctx.arc(thumbX, thumbY, thumbSize / 2, 0, Math.PI * 2);
-  ctx.fill();
-  ctx.strokeStyle = "#ffffff";
-  ctx.lineWidth = 2;
-  ctx.beginPath();
-  ctx.arc(thumbX, thumbY, thumbSize / 2, 0, Math.PI * 2);
-  ctx.stroke();
-}
-function paintProgress(ctx, node) {
-  const layout = node.layout;
-  const props = node.props;
-  const width = layout.width;
-  const height = layout.height;
-  const x = layout.x;
-  const y = layout.y;
-  const min = parseFloat(props.min) || 0;
-  const max = parseFloat(props.max) || 100;
-  const value = parseFloat(props.value) || 0;
-  const percentage = Math.min(Math.max((value - min) / (max - min), 0), 1);
-  const radius = layout.border.radius || height / 2;
-  ctx.fillStyle = props.backgroundColor || "#e0e0e0";
-  drawRoundedRect(ctx, x, y, width, height, radius);
-  ctx.fill();
-  if (percentage > 0) {
-    const fillWidth = width * percentage;
-    const fillColor = props.fillColor || props.color || "#007bff";
-    if (typeof fillColor === "string" && fillColor.includes("gradient")) {
-      ctx.fillStyle = parseGradient(ctx, fillColor, x, y, fillWidth, height);
-    } else {
-      ctx.fillStyle = fillColor;
-    }
-    drawRoundedRect(ctx, x, y, fillWidth, height, radius);
-    ctx.fill();
-  }
-  if (props.showLabel) {
-    const label = props.label || `${Math.round(percentage * 100)}%`;
-    ctx.fillStyle = props.labelColor || "#ffffff";
-    ctx.font = `${props.fontSize || 12}px ${props.fontFamily || "sans-serif"}`;
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.fillText(label, x + width / 2, y + height / 2);
-  }
-}
-function paintSpinner(ctx, node) {
-  const layout = node.layout;
-  const props = node.props;
-  const size = Math.min(layout.width, layout.height);
-  const centerX = layout.x + size / 2;
-  const centerY = layout.y + size / 2;
-  const radius = size / 2 - 4;
-  const thickness = parseFloat(props.thickness) || 4;
-  const color = props.color || "#007bff";
-  const rotation = Date.now() / 1000 * Math.PI;
-  ctx.strokeStyle = color;
-  ctx.lineWidth = thickness;
-  ctx.lineCap = "round";
-  ctx.beginPath();
-  ctx.arc(centerX, centerY, radius, rotation, rotation + Math.PI * 1.5);
-  ctx.stroke();
-  ctx.globalAlpha = 0.3;
-  ctx.beginPath();
-  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
-  ctx.stroke();
-  ctx.globalAlpha = 1;
-}
-function paintCard(ctx, node) {
-  const layout = node.layout;
-  const props = node.props;
-  const x = layout.x;
-  const y = layout.y;
-  const width = layout.width;
-  const height = layout.height;
-  const radius = layout.border.radius || 8;
-  const shadow = props.shadow || props.boxShadow || "0 2 8 rgba(0,0,0,0.1)";
-  applyShadow(ctx, shadow);
-  const backgroundColor = props.backgroundColor || "#ffffff";
-  if (typeof backgroundColor === "string" && backgroundColor.includes("gradient")) {
-    ctx.fillStyle = parseGradient(ctx, backgroundColor, x, y, width, height);
-  } else {
-    ctx.fillStyle = backgroundColor;
-  }
-  drawRoundedRect(ctx, x, y, width, height, radius);
-  ctx.fill();
-  ctx.shadowColor = "transparent";
-  ctx.shadowBlur = 0;
-  ctx.shadowOffsetX = 0;
-  ctx.shadowOffsetY = 0;
-  if (layout.border.width > 0) {
-    ctx.strokeStyle = layout.border.color;
-    ctx.lineWidth = layout.border.width;
-    drawRoundedRect(ctx, x, y, width, height, radius);
-    ctx.stroke();
-  }
-  for (const child of node.children) {
-    paintNode(ctx, child);
-  }
-}
-function paintBadge(ctx, node) {
-  const layout = node.layout;
-  const props = node.props;
-  const x = layout.x;
-  const y = layout.y;
-  const width = layout.width;
-  const height = layout.height;
-  const radius = layout.border.radius || height / 2;
-  const backgroundColor = props.backgroundColor || "#dc3545";
-  ctx.fillStyle = backgroundColor;
-  drawRoundedRect(ctx, x, y, width, height, radius);
-  ctx.fill();
-  const text = String(props[0] || props.text || "");
-  if (text) {
-    ctx.fillStyle = props.color || "#ffffff";
-    ctx.font = `${props.fontWeight || "bold"} ${props.fontSize || 10}px ${props.fontFamily || "sans-serif"}`;
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.fillText(text, x + width / 2, y + height / 2);
-  }
-}
-function paintAvatar(ctx, node) {
-  const layout = node.layout;
-  const props = node.props;
-  const size = Math.min(layout.width, layout.height);
-  const centerX = layout.x + size / 2;
-  const centerY = layout.y + size / 2;
-  const radius = size / 2;
-  ctx.save();
-  ctx.beginPath();
-  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
-  ctx.clip();
-  const backgroundColor = props.backgroundColor || "#cccccc";
-  ctx.fillStyle = backgroundColor;
-  ctx.beginPath();
-  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
-  ctx.fill();
-  const text = String(props[0] || props.text || props.initials || "");
-  if (text) {
-    ctx.fillStyle = props.color || "#ffffff";
-    ctx.font = `${props.fontWeight || "bold"} ${props.fontSize || size / 2.5}px ${props.fontFamily || "sans-serif"}`;
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.fillText(text, centerX, centerY);
-  }
-  ctx.restore();
-  if (layout.border.width > 0) {
-    ctx.strokeStyle = layout.border.color;
-    ctx.lineWidth = layout.border.width;
-    ctx.beginPath();
-    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
-    ctx.stroke();
-  }
-}
-function paintIcon(ctx, node) {
-  const layout = node.layout;
-  const props = node.props;
-  const size = Math.min(layout.width, layout.height);
-  const x = layout.x;
-  const y = layout.y;
-  const color = props.color || "#000000";
-  const iconName = props.icon || props.name || "circle";
-  ctx.fillStyle = color;
-  ctx.strokeStyle = color;
-  ctx.lineWidth = 2;
-  switch (iconName.toLowerCase()) {
-    case "circle":
-      ctx.beginPath();
-      ctx.arc(x + size / 2, y + size / 2, size / 3, 0, Math.PI * 2);
-      ctx.fill();
-      break;
-    case "square":
-      const padding = size * 0.2;
-      ctx.fillRect(x + padding, y + padding, size - padding * 2, size - padding * 2);
-      break;
-    case "star":
-      drawStar(ctx, x + size / 2, y + size / 2, 5, size / 3, size / 6);
-      ctx.fill();
-      break;
-    case "check":
-    case "checkmark":
-      const p = size * 0.2;
-      ctx.beginPath();
-      ctx.moveTo(x + p, y + size / 2);
-      ctx.lineTo(x + size * 0.4, y + size - p);
-      ctx.lineTo(x + size - p, y + p);
-      ctx.stroke();
-      break;
-    case "x":
-    case "close":
-      const pd = size * 0.2;
-      ctx.beginPath();
-      ctx.moveTo(x + pd, y + pd);
-      ctx.lineTo(x + size - pd, y + size - pd);
-      ctx.moveTo(x + size - pd, y + pd);
-      ctx.lineTo(x + pd, y + size - pd);
-      ctx.stroke();
-      break;
-    default:
-      ctx.beginPath();
-      ctx.arc(x + size / 2, y + size / 2, size / 3, 0, Math.PI * 2);
-      ctx.fill();
-  }
-}
-function paintLink(ctx, node) {
-  const layout = node.layout;
-  const props = node.props;
-  const text = String(props[0] || props.text || "");
-  const color = node.hovered ? props.hoverColor || "#0056b3" : props.color || "#007bff";
-  const fontSize = parseFloat(props.fontSize) || 16;
-  const fontWeight = props.fontWeight || "normal";
-  const fontFamily = props.fontFamily || "system-ui, sans-serif";
-  const textDecoration = props.textDecoration !== undefined ? props.textDecoration : "underline";
-  ctx.fillStyle = color;
-  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
-  ctx.textAlign = "left";
-  ctx.textBaseline = "top";
-  const x = layout.x + layout.contentX;
-  const y = layout.y + layout.contentY;
-  ctx.fillText(text, x, y);
-  if (textDecoration === "underline") {
-    const textWidth = ctx.measureText(text).width;
-    ctx.strokeStyle = color;
-    ctx.lineWidth = 1;
-    ctx.beginPath();
-    ctx.moveTo(x, y + fontSize + 2);
-    ctx.lineTo(x + textWidth, y + fontSize + 2);
-    ctx.stroke();
-  }
-}
-function applyTextDecoration(ctx, decoration, color, x, y, width, fontSize) {
-  ctx.strokeStyle = color;
-  ctx.lineWidth = Math.max(1, fontSize / 16);
-  ctx.beginPath();
-  if (decoration === "underline") {
-    const underlineY = y + fontSize + 2;
-    ctx.moveTo(x, underlineY);
-    ctx.lineTo(x + width, underlineY);
-  } else if (decoration === "line-through" || decoration === "strikethrough") {
-    const lineThroughY = y + fontSize / 2;
-    ctx.moveTo(x, lineThroughY);
-    ctx.lineTo(x + width, lineThroughY);
-  } else if (decoration === "overline") {
-    ctx.moveTo(x, y);
-    ctx.lineTo(x + width, y);
-  }
-  ctx.stroke();
-}
-function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {
-  let rot = Math.PI / 2 * 3;
-  let x = cx;
-  let y = cy;
-  const step = Math.PI / spikes;
-  ctx.beginPath();
-  ctx.moveTo(cx, cy - outerRadius);
-  for (let i = 0;i < spikes; i++) {
-    x = cx + Math.cos(rot) * outerRadius;
-    y = cy + Math.sin(rot) * outerRadius;
-    ctx.lineTo(x, y);
-    rot += step;
-    x = cx + Math.cos(rot) * innerRadius;
-    y = cy + Math.sin(rot) * innerRadius;
-    ctx.lineTo(x, y);
-    rot += step;
-  }
-  ctx.lineTo(cx, cy - outerRadius);
-  ctx.closePath();
-}
-
-// src/canvas/layout.ts
-function computeLayout(ctx, node, availableWidth, availableHeight, x = 0, y = 0) {
-  const props = node.props;
-  let margin = parseSpacing(props.margin || 0);
-  if (props.marginTop !== undefined)
-    margin.top = parseFloat(props.marginTop) || 0;
-  if (props.marginRight !== undefined)
-    margin.right = parseFloat(props.marginRight) || 0;
-  if (props.marginBottom !== undefined)
-    margin.bottom = parseFloat(props.marginBottom) || 0;
-  if (props.marginLeft !== undefined)
-    margin.left = parseFloat(props.marginLeft) || 0;
-  let padding = parseSpacing(props.padding || 0);
-  if (props.paddingTop !== undefined)
-    padding.top = parseFloat(props.paddingTop) || 0;
-  if (props.paddingRight !== undefined)
-    padding.right = parseFloat(props.paddingRight) || 0;
-  if (props.paddingBottom !== undefined)
-    padding.bottom = parseFloat(props.paddingBottom) || 0;
-  if (props.paddingLeft !== undefined)
-    padding.left = parseFloat(props.paddingLeft) || 0;
-  const borderWidth = parseFloat(props.borderWidth) || 0;
-  const borderColor = props.borderColor || "transparent";
-  const borderRadius = parseFloat(props.borderRadius) || 0;
-  const availableAfterMargin = {
-    width: availableWidth - margin.left - margin.right,
-    height: availableHeight - margin.top - margin.bottom
-  };
-  let width = parseSize(props.width);
-  let height = parseSize(props.height);
-  const type = node.type.toLowerCase();
-  if (type === "app") {
-    if (width === null)
-      width = availableAfterMargin.width;
-    if (height === null)
-      height = availableAfterMargin.height;
-  } else if (type === "spacer") {
-    if (width === null)
-      width = availableAfterMargin.width;
-    if (height === null)
-      height = availableAfterMargin.height;
-  } else if (type === "divider" || type === "separator") {
-    const orientation = props.orientation || "horizontal";
-    const thickness = parseFloat(props.thickness) || 1;
-    if (orientation === "vertical") {
-      if (width === null)
-        width = thickness;
-      if (height === null)
-        height = availableAfterMargin.height;
-    } else {
-      if (width === null)
-        width = availableAfterMargin.width;
-      if (height === null)
-        height = thickness;
-    }
-  } else if (type === "checkbox" || type === "radio") {
-    const size = parseFloat(props.size) || 20;
-    if (width === null)
-      width = size;
-    if (height === null)
-      height = size;
-  } else if (type === "switch" || type === "toggle") {
-    if (width === null)
-      width = 44;
-    if (height === null)
-      height = 24;
-  } else if (type === "slider") {
-    if (width === null)
-      width = 200;
-    if (height === null)
-      height = 20;
-  } else if (type === "progress" || type === "progressbar") {
-    if (width === null)
-      width = 200;
-    if (height === null)
-      height = 8;
-  } else if (type === "spinner" || type === "loading") {
-    const size = parseFloat(props.size) || 24;
-    if (width === null)
-      width = size;
-    if (height === null)
-      height = size;
-  } else if (type === "badge") {
-    if (width === null)
-      width = 20;
-    if (height === null)
-      height = 20;
-  } else if (type === "avatar") {
-    const size = parseFloat(props.size) || 40;
-    if (width === null)
-      width = size;
-    if (height === null)
-      height = size;
-  } else if (type === "icon") {
-    const size = parseFloat(props.size) || 24;
-    if (width === null)
-      width = size;
-    if (height === null)
-      height = size;
-  }
-  if (node.type === "text" && node.props[0]) {
-    const text = String(node.props[0] || "");
-    const fontSize = parseFloat(props.fontSize) || 16;
-    const fontWeight = props.fontWeight || "normal";
-    const fontFamily = props.fontFamily || "system-ui, sans-serif";
-    const lineHeight = parseFloat(props.lineHeight) || fontSize * 1.2;
-    const maxWidth2 = width || availableAfterMargin.width - padding.left - padding.right;
-    const metrics = measureText(ctx, text, { fontSize, fontWeight, fontFamily, lineHeight }, maxWidth2);
-    if (!width)
-      width = metrics.width + padding.left + padding.right;
-    if (!height)
-      height = metrics.height + padding.top + padding.bottom;
-  }
-  if (width === null)
-    width = availableAfterMargin.width;
-  if (height === null)
-    height = availableAfterMargin.height;
-  const minWidth = parseSize(props.minWidth);
-  const maxWidth = parseSize(props.maxWidth);
-  const minHeight = parseSize(props.minHeight);
-  const maxHeight = parseSize(props.maxHeight);
-  if (minWidth !== null)
-    width = Math.max(width, minWidth);
-  if (maxWidth !== null)
-    width = Math.min(width, maxWidth);
-  if (minHeight !== null)
-    height = Math.max(height, minHeight);
-  if (maxHeight !== null)
-    height = Math.min(height, maxHeight);
-  const layout = {
-    x: x + margin.left,
-    y: y + margin.top,
-    width,
-    height,
-    margin,
-    padding,
-    border: {
-      width: borderWidth,
-      color: borderColor,
-      radius: borderRadius
-    },
-    contentX: padding.left + borderWidth,
-    contentY: padding.top + borderWidth,
-    contentWidth: width - padding.left - padding.right - borderWidth * 2,
-    contentHeight: height - padding.top - padding.bottom - borderWidth * 2
-  };
-  node.layout = layout;
-  if (node.children.length > 0) {
-    layoutChildren(ctx, node);
-  }
-}
-function layoutChildren(ctx, parent) {
-  const layout = parent.layout;
-  const props = parent.props;
-  if (parent.type.toLowerCase() === "stack") {
-    layoutStackChildren(ctx, parent);
-    return;
-  }
-  const flexDirection = props.flexDirection || (parent.type === "column" ? "column" : "row");
-  const isColumn = flexDirection === "column";
-  const justifyContent = isColumn ? props.verticalAlignment || "flex-start" : props.horizontalAlignment || "flex-start";
-  const alignItems = isColumn ? props.horizontalAlignment || "flex-start" : props.verticalAlignment || "flex-start";
-  const gap = parseFloat(props.gap) || 0;
-  const availableWidth = layout.contentWidth;
-  const availableHeight = layout.contentHeight;
-  const childInfo = [];
-  let totalMainSize = 0;
-  let totalFlexGrow = 0;
-  let totalFlexShrink = 0;
-  for (const child of parent.children) {
-    const flexGrow = parseFloat(child.props.flexGrow) || parseFloat(child.props.flex) || 0;
-    const flexShrink = parseFloat(child.props.flexShrink) || 1;
-    const flexBasis = parseSize(child.props.flexBasis);
-    computeLayout(ctx, child, availableWidth, availableHeight, 0, 0);
-    const childLayout = child.layout;
-    let mainSize = isColumn ? childLayout.height : childLayout.width;
-    if (flexBasis !== null) {
-      mainSize = flexBasis;
-      if (isColumn) {
-        childLayout.height = flexBasis;
-      } else {
-        childLayout.width = flexBasis;
-      }
-    }
-    childInfo.push({
-      width: childLayout.width,
-      height: childLayout.height,
-      flexGrow,
-      flexShrink,
-      flexBasis
-    });
-    totalMainSize += mainSize;
-    totalFlexGrow += flexGrow;
-    totalFlexShrink += flexShrink;
-  }
-  const totalGap = gap * (parent.children.length - 1);
-  totalMainSize += totalGap;
-  const availableMain = isColumn ? availableHeight : availableWidth;
-  let remainingSpace = availableMain - totalMainSize;
-  if (remainingSpace > 0 && totalFlexGrow > 0) {
-    const spacePerFlex = remainingSpace / totalFlexGrow;
-    for (let i = 0;i < parent.children.length; i++) {
-      const info = childInfo[i];
-      if (info.flexGrow > 0) {
-        const extraSpace = spacePerFlex * info.flexGrow;
-        if (isColumn) {
-          info.height += extraSpace;
-        } else {
-          info.width += extraSpace;
+        // Schedule redraw
+        this.scheduleRedraw();
+    }
+    /**
+     * Apply single patch
+     */
+    applyPatch(patch) {
+        switch (patch.type) {
+            case "create":
+                this.onCreate(patch.id, patch.elementType, patch.props || {});
+                break;
+            case "setProp":
+                this.onSetProp(patch.id, patch.name, patch.value);
+                break;
+            case "removeProp":
+                this.onRemoveProp(patch.id, patch.name);
+                break;
+            case "setText":
+                this.onSetText(patch.id, patch.text);
+                break;
+            case "insert":
+                this.onInsert(patch.parentId, patch.id, patch.beforeId);
+                break;
+            case "move":
+                this.onMove(patch.parentId, patch.id, patch.beforeId);
+                break;
+            case "remove":
+                this.onRemove(patch.id);
+                break;
         }
-        totalMainSize += extraSpace;
-      }
     }
-    remainingSpace = 0;
-  }
-  if (remainingSpace < 0 && totalFlexShrink > 0) {
-    const shrinkPerFlex = Math.abs(remainingSpace) / totalFlexShrink;
-    for (let i = 0;i < parent.children.length; i++) {
-      const info = childInfo[i];
-      if (info.flexShrink > 0) {
-        const shrinkSpace = Math.min(shrinkPerFlex * info.flexShrink, isColumn ? info.height : info.width);
-        if (isColumn) {
-          info.height = Math.max(0, info.height - shrinkSpace);
-        } else {
-          info.width = Math.max(0, info.width - shrinkSpace);
+    /**
+     * Create new virtual node
+     */
+    onCreate(id, elementType, props) {
+        const node = {
+            id,
+            type: elementType,
+            props: props instanceof Map ? Object.fromEntries(props) : props,
+            children: [],
+            parent: null,
+            visible: true,
+            opacity: parseFloat(props.opacity) || 1,
+            clickable: elementType === "button" || !!props.onclick,
+            hoverable: true,
+            focusable: elementType === "input" || elementType === "textarea" || elementType === "button",
+            focused: false,
+            hovered: false,
+        };
+        this.nodes.set(id, node);
+    }
+    /**
+     * Set property on node
+     */
+    onSetProp(id, name, value) {
+        const node = this.nodes.get(id);
+        if (!node)
+            return;
+        node.props[name] = value;
+        // Update computed properties
+        if (name === "visible") {
+            node.visible = !!value;
+        }
+        if (name === "opacity") {
+            node.opacity = parseFloat(value) || 1;
+        }
+        // Update accessibility
+        this.accessibilityLayer.updateNode(node);
+    }
+    /**
+     * Remove a property from a node
+     */
+    onRemoveProp(id, name) {
+        const node = this.nodes.get(id);
+        if (!node)
+            return;
+        delete node.props[name];
+        if (name === "visible") {
+            node.visible = true;
+        }
+        if (name === "opacity") {
+            node.opacity = 1;
+        }
+        this.accessibilityLayer.updateNode(node);
+    }
+    /**
+     * Set text on node
+     */
+    onSetText(id, text) {
+        const node = this.nodes.get(id);
+        if (!node)
+            return;
+        node.props[0] = text;
+        // Update accessibility
+        this.accessibilityLayer.updateNode(node);
+    }
+    /**
+     * Insert node into tree
+     */
+    onInsert(parentId, id, beforeId) {
+        const child = this.nodes.get(id);
+        if (!child)
+            return;
+        // Check if this is setting the root node (parent_id === id === "root" or similar)
+        if (parentId === "root" && id === "root") {
+            this.rootNode = child;
+            this.eventManager.setRootNode(child);
+            return;
+        }
+        // Otherwise find the parent node
+        const parent = this.nodes.get(parentId);
+        if (!parent) {
+            // If parent is "root", this might be the first real root node
+            if (parentId === "root") {
+                this.rootNode = child;
+                this.eventManager.setRootNode(child);
+            }
+            return;
+        }
+        // Insert child into parent
+        child.parent = parent;
+        if (beforeId) {
+            const beforeIndex = parent.children.findIndex((c) => c.id === beforeId);
+            if (beforeIndex >= 0) {
+                parent.children.splice(beforeIndex, 0, child);
+            }
+            else {
+                parent.children.push(child);
+            }
+        }
+        else {
+            parent.children.push(child);
         }
-        totalMainSize -= shrinkSpace;
-      }
-    }
-    remainingSpace = availableMain - totalMainSize;
-  }
-  let mainStart = 0;
-  let spacing = 0;
-  if (justifyContent === "center") {
-    mainStart = Math.max(0, remainingSpace / 2);
-  } else if (justifyContent === "flex-end") {
-    mainStart = Math.max(0, remainingSpace);
-  } else if (justifyContent === "space-between") {
-    spacing = remainingSpace / Math.max(1, parent.children.length - 1);
-  } else if (justifyContent === "space-around") {
-    spacing = remainingSpace / parent.children.length;
-    mainStart = spacing / 2;
-  }
-  let currentMain = mainStart;
-  for (let i = 0;i < parent.children.length; i++) {
-    const child = parent.children[i];
-    const childLayout = child.layout;
-    const info = childInfo[i];
-    childLayout.width = info.width;
-    childLayout.height = info.height;
-    let crossStart = 0;
-    const availableCross = isColumn ? availableWidth : availableHeight;
-    const childCross = isColumn ? info.width : info.height;
-    if (alignItems === "center") {
-      crossStart = (availableCross - childCross) / 2;
-    } else if (alignItems === "flex-end") {
-      crossStart = availableCross - childCross;
-    }
-    if (isColumn) {
-      childLayout.x = layout.x + layout.contentX + crossStart;
-      childLayout.y = layout.y + layout.contentY + currentMain;
-      currentMain += info.height + gap;
-    } else {
-      childLayout.x = layout.x + layout.contentX + currentMain;
-      childLayout.y = layout.y + layout.contentY + crossStart;
-      currentMain += info.width + gap;
-    }
-    if (justifyContent === "space-between" || justifyContent === "space-around") {
-      currentMain += spacing;
-    }
-  }
-}
-function layoutStackChildren(ctx, parent) {
-  const layout = parent.layout;
-  const props = parent.props;
-  const horizontalAlignment = props.horizontalAlignment || "flex-start";
-  const verticalAlignment = props.verticalAlignment || "flex-start";
-  const availableWidth = layout.contentWidth;
-  const availableHeight = layout.contentHeight;
-  for (const child of parent.children) {
-    computeLayout(ctx, child, availableWidth, availableHeight, 0, 0);
-    const childLayout = child.layout;
-    let x = 0;
-    let y = 0;
-    if (horizontalAlignment === "center") {
-      x = (availableWidth - childLayout.width) / 2;
-    } else if (horizontalAlignment === "flex-end") {
-      x = availableWidth - childLayout.width;
-    }
-    if (verticalAlignment === "center") {
-      y = (availableHeight - childLayout.height) / 2;
-    } else if (verticalAlignment === "flex-end") {
-      y = availableHeight - childLayout.height;
-    }
-    childLayout.x = layout.x + layout.contentX + x;
-    childLayout.y = layout.y + layout.contentY + y;
-  }
-}
-
-// src/canvas/events.ts
-class CanvasEventManager {
-  canvas;
-  engine;
-  rootNode = null;
-  hoveredNode = null;
-  focusedNode = null;
-  mouseDownNode = null;
-  boundOnMouseMove;
-  boundOnMouseDown;
-  boundOnMouseUp;
-  boundOnClick;
-  boundOnDoubleClick;
-  boundOnKeyDown;
-  boundOnKeyUp;
-  constructor(canvas, engine) {
-    this.canvas = canvas;
-    this.engine = engine;
-    this.setupEventListeners();
-  }
-  setRootNode(node) {
-    this.rootNode = node;
-  }
-  setupEventListeners() {
-    this.boundOnMouseMove = this.onMouseMove.bind(this);
-    this.boundOnMouseDown = this.onMouseDown.bind(this);
-    this.boundOnMouseUp = this.onMouseUp.bind(this);
-    this.boundOnClick = this.onClick.bind(this);
-    this.boundOnDoubleClick = this.onDoubleClick.bind(this);
-    this.boundOnKeyDown = this.onKeyDown.bind(this);
-    this.boundOnKeyUp = this.onKeyUp.bind(this);
-    this.canvas.addEventListener("mousemove", this.boundOnMouseMove);
-    this.canvas.addEventListener("mousedown", this.boundOnMouseDown);
-    this.canvas.addEventListener("mouseup", this.boundOnMouseUp);
-    this.canvas.addEventListener("click", this.boundOnClick);
-    this.canvas.addEventListener("dblclick", this.boundOnDoubleClick);
-    this.canvas.addEventListener("keydown", this.boundOnKeyDown);
-    this.canvas.addEventListener("keyup", this.boundOnKeyUp);
-  }
-  getCanvasCoordinates(e) {
-    const rect = this.canvas.getBoundingClientRect();
-    const scaleX = this.canvas.width / rect.width;
-    const scaleY = this.canvas.height / rect.height;
-    return {
-      x: (e.clientX - rect.left) * scaleX,
-      y: (e.clientY - rect.top) * scaleY
-    };
-  }
-  hitTest(point) {
-    if (!this.rootNode)
-      return null;
-    return this.hitTestNode(this.rootNode, point);
-  }
-  hitTestNode(node, point) {
-    if (!node.visible || !node.layout)
-      return null;
-    const bounds = getAbsoluteBounds(node);
-    if (!bounds)
-      return null;
-    for (let i = node.children.length - 1;i >= 0; i--) {
-      const child = node.children[i];
-      const hit = this.hitTestNode(child, point);
-      if (hit)
-        return hit;
-    }
-    const radius = node.layout.border.radius;
-    if (isPointInRoundedRect(point, bounds, radius)) {
-      return node;
-    }
-    return null;
-  }
-  onMouseMove(e) {
-    const point = this.getCanvasCoordinates(e);
-    const node = this.hitTest(point);
-    if (node !== this.hoveredNode) {
-      if (this.hoveredNode) {
-        this.hoveredNode.hovered = false;
-        this.dispatchNodeEvent(this.hoveredNode, "mouseleave", {});
-      }
-      this.hoveredNode = node;
-      if (node) {
-        node.hovered = true;
-        this.dispatchNodeEvent(node, "mouseenter", {});
-      }
-      this.updateCursor(node);
-      this.requestRedraw();
-    }
-  }
-  onMouseDown(e) {
-    const point = this.getCanvasCoordinates(e);
-    const node = this.hitTest(point);
-    this.mouseDownNode = node;
-    if (node && node.clickable) {
-      this.dispatchNodeEvent(node, "mousedown", {
-        button: e.button,
-        clientX: e.clientX,
-        clientY: e.clientY
-      });
-    }
-    if (node && node.focusable) {
-      this.setFocus(node);
-    } else {
-      this.setFocus(null);
-    }
-  }
-  onMouseUp(e) {
-    const point = this.getCanvasCoordinates(e);
-    const node = this.hitTest(point);
-    if (node && node.clickable) {
-      this.dispatchNodeEvent(node, "mouseup", {
-        button: e.button,
-        clientX: e.clientX,
-        clientY: e.clientY
-      });
-    }
-    this.mouseDownNode = null;
-  }
-  onClick(e) {
-    const point = this.getCanvasCoordinates(e);
-    const node = this.hitTest(point);
-    if (node && node.clickable && node === this.mouseDownNode) {
-      this.dispatchNodeEvent(node, "click", {
-        button: e.button,
-        clientX: e.clientX,
-        clientY: e.clientY
-      });
-    }
-  }
-  onDoubleClick(e) {
-    const point = this.getCanvasCoordinates(e);
-    const node = this.hitTest(point);
-    if (node && node.clickable) {
-      this.dispatchNodeEvent(node, "dblclick", {
-        button: e.button,
-        clientX: e.clientX,
-        clientY: e.clientY
-      });
-    }
-  }
-  onKeyDown(e) {
-    if (this.focusedNode) {
-      this.dispatchNodeEvent(this.focusedNode, "keydown", {
-        key: e.key,
-        code: e.code,
-        ctrlKey: e.ctrlKey,
-        shiftKey: e.shiftKey,
-        altKey: e.altKey
-      });
-    }
-  }
-  onKeyUp(e) {
-    if (this.focusedNode) {
-      this.dispatchNodeEvent(this.focusedNode, "keyup", {
-        key: e.key,
-        code: e.code,
-        ctrlKey: e.ctrlKey,
-        shiftKey: e.shiftKey,
-        altKey: e.altKey
-      });
-    }
-  }
-  setFocus(node) {
-    if (node === this.focusedNode)
-      return;
-    if (this.focusedNode) {
-      this.focusedNode.focused = false;
-      this.dispatchNodeEvent(this.focusedNode, "blur", {});
-    }
-    this.focusedNode = node;
-    if (node) {
-      node.focused = true;
-      this.dispatchNodeEvent(node, "focus", {});
-    }
-    this.requestRedraw();
-  }
-  updateCursor(node) {
-    if (!node) {
-      this.canvas.style.cursor = "default";
-      return;
-    }
-    const cursor = node.props.cursor || (node.clickable ? "pointer" : "default");
-    this.canvas.style.cursor = cursor;
-  }
-  dispatchNodeEvent(node, eventType, data) {
-    const actionName = node.props[`on${eventType}`] || node.props[eventType];
-    if (actionName && typeof actionName === "string") {
-      this.engine.dispatchAction(actionName, {
-        type: eventType,
-        nodeId: node.id,
-        timestamp: Date.now(),
-        ...data
-      });
-    }
-  }
-  requestRedraw() {
-    this.canvas.dispatchEvent(new CustomEvent("hypen:redraw"));
-  }
-  destroy() {
-    this.canvas.removeEventListener("mousemove", this.boundOnMouseMove);
-    this.canvas.removeEventListener("mousedown", this.boundOnMouseDown);
-    this.canvas.removeEventListener("mouseup", this.boundOnMouseUp);
-    this.canvas.removeEventListener("click", this.boundOnClick);
-    this.canvas.removeEventListener("dblclick", this.boundOnDoubleClick);
-    this.canvas.removeEventListener("keydown", this.boundOnKeyDown);
-    this.canvas.removeEventListener("keyup", this.boundOnKeyUp);
-    this.rootNode = null;
-    this.hoveredNode = null;
-    this.focusedNode = null;
-    this.mouseDownNode = null;
-  }
-}
-
-// src/canvas/renderer.ts
-import { frameworkLoggers as frameworkLoggers2 } from "@hypen-space/core/logger";
-var log2 = frameworkLoggers2.canvas;
-var DEFAULT_OPTIONS = {
-  devicePixelRatio: typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1,
-  backgroundColor: "#ffffff",
-  enableAccessibility: true,
-  enableHitTesting: true,
-  enableInputOverlay: true,
-  enableDirtyRects: false,
-  enableLayerCaching: false,
-  maxLayerCacheSize: 10,
-  showLayoutBounds: false,
-  showDirtyRects: false,
-  logPerformance: false
-};
-
-class CanvasRenderer {
-  canvas;
-  ctx;
-  engine;
-  options;
-  rootNode = null;
-  nodes = new Map;
-  eventManager;
-  inputOverlay;
-  accessibilityLayer;
-  rafId = null;
-  needsRedraw = false;
-  frameCount = 0;
-  lastFrameTime = 0;
-  constructor(canvas, engine, options) {
-    this.canvas = canvas;
-    this.engine = engine;
-    this.options = { ...DEFAULT_OPTIONS, ...options };
-    const ctx = canvas.getContext("2d");
-    if (!ctx) {
-      throw new Error("Failed to get 2D context from canvas");
-    }
-    this.ctx = ctx;
-    this.setupHiDPI();
-    this.eventManager = new CanvasEventManager(canvas, engine);
-    this.inputOverlay = new InputOverlay(canvas.parentElement || (typeof document !== "undefined" ? document.body : null));
-    this.accessibilityLayer = new AccessibilityLayer(canvas.parentElement || (typeof document !== "undefined" ? document.body : null), this.options.enableAccessibility || false);
-    this.canvas.addEventListener("hypen:redraw", () => this.scheduleRedraw());
-  }
-  setupHiDPI() {
-    const dpr = this.options.devicePixelRatio || 1;
-    const rect = this.canvas.getBoundingClientRect();
-    this.canvas.width = rect.width * dpr;
-    this.canvas.height = rect.height * dpr;
-    this.ctx.scale(dpr, dpr);
-    this.canvas.style.width = `${rect.width}px`;
-    this.canvas.style.height = `${rect.height}px`;
-  }
-  applyPatches(patches) {
-    for (const patch of patches) {
-      this.applyPatch(patch);
-    }
-    if (this.rootNode) {
-      this.accessibilityLayer.syncTree(this.rootNode);
-    }
-    this.scheduleRedraw();
-  }
-  applyPatch(patch) {
-    switch (patch.type) {
-      case "create":
-        this.onCreate(patch.id, patch.elementType, patch.props || {});
-        break;
-      case "setProp":
-        this.onSetProp(patch.id, patch.name, patch.value);
-        break;
-      case "removeProp":
-        this.onRemoveProp(patch.id, patch.name);
-        break;
-      case "setText":
-        this.onSetText(patch.id, patch.text);
-        break;
-      case "insert":
-        this.onInsert(patch.parentId, patch.id, patch.beforeId);
-        break;
-      case "move":
-        this.onMove(patch.parentId, patch.id, patch.beforeId);
-        break;
-      case "remove":
-        this.onRemove(patch.id);
-        break;
-    }
-  }
-  onCreate(id, elementType, props) {
-    const node = {
-      id,
-      type: elementType,
-      props: props instanceof Map ? Object.fromEntries(props) : props,
-      children: [],
-      parent: null,
-      visible: true,
-      opacity: parseFloat(props.opacity) || 1,
-      clickable: elementType === "button" || !!props.onclick,
-      hoverable: true,
-      focusable: elementType === "input" || elementType === "textarea" || elementType === "button",
-      focused: false,
-      hovered: false
-    };
-    this.nodes.set(id, node);
-  }
-  onSetProp(id, name, value) {
-    const node = this.nodes.get(id);
-    if (!node)
-      return;
-    node.props[name] = value;
-    if (name === "visible") {
-      node.visible = !!value;
-    }
-    if (name === "opacity") {
-      node.opacity = parseFloat(value) || 1;
-    }
-    this.accessibilityLayer.updateNode(node);
-  }
-  onRemoveProp(id, name) {
-    const node = this.nodes.get(id);
-    if (!node)
-      return;
-    delete node.props[name];
-    if (name === "visible") {
-      node.visible = true;
-    }
-    if (name === "opacity") {
-      node.opacity = 1;
-    }
-    this.accessibilityLayer.updateNode(node);
-  }
-  onSetText(id, text) {
-    const node = this.nodes.get(id);
-    if (!node)
-      return;
-    node.props[0] = text;
-    this.accessibilityLayer.updateNode(node);
-  }
-  onInsert(parentId, id, beforeId) {
-    const child = this.nodes.get(id);
-    if (!child)
-      return;
-    if (parentId === "root" && id === "root") {
-      this.rootNode = child;
-      this.eventManager.setRootNode(child);
-      return;
-    }
-    const parent = this.nodes.get(parentId);
-    if (!parent) {
-      if (parentId === "root") {
-        this.rootNode = child;
-        this.eventManager.setRootNode(child);
-      }
-      return;
-    }
-    child.parent = parent;
-    if (beforeId) {
-      const beforeIndex = parent.children.findIndex((c) => c.id === beforeId);
-      if (beforeIndex >= 0) {
-        parent.children.splice(beforeIndex, 0, child);
-      } else {
-        parent.children.push(child);
-      }
-    } else {
-      parent.children.push(child);
-    }
-  }
-  onMove(parentId, id, beforeId) {
-    const node = this.nodes.get(id);
-    if (!node || !node.parent)
-      return;
-    const oldParent = node.parent;
-    const oldIndex = oldParent.children.indexOf(node);
-    if (oldIndex >= 0) {
-      oldParent.children.splice(oldIndex, 1);
-    }
-    this.onInsert(parentId, id, beforeId);
-  }
-  onRemove(id) {
-    const node = this.nodes.get(id);
-    if (!node)
-      return;
-    if (node.parent) {
-      const index = node.parent.children.indexOf(node);
-      if (index >= 0) {
-        node.parent.children.splice(index, 1);
-      }
-    }
-    if (this.rootNode === node) {
-      this.rootNode = null;
-      this.eventManager.setRootNode(null);
-    }
-    this.nodes.delete(id);
-  }
-  scheduleRedraw() {
-    if (this.rafId !== null)
-      return;
-    if (typeof requestAnimationFrame !== "undefined") {
-      this.rafId = requestAnimationFrame(() => {
-        this.render();
-        this.rafId = null;
-      });
-    } else {
-      this.render();
-    }
-  }
-  render() {
-    const startTime = performance.now();
-    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-    if (this.options.backgroundColor) {
-      this.ctx.fillStyle = this.options.backgroundColor;
-      this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
     }
-    if (this.rootNode) {
-      const dpr = this.options.devicePixelRatio || 1;
-      computeLayout(this.ctx, this.rootNode, this.canvas.width / dpr, this.canvas.height / dpr);
-      paintNode(this.ctx, this.rootNode);
-      if (this.options.showLayoutBounds) {
-        this.drawLayoutBounds(this.rootNode);
-      }
+    /**
+     * Move node in tree
+     */
+    onMove(parentId, id, beforeId) {
+        // Remove from old parent
+        const node = this.nodes.get(id);
+        if (!node || !node.parent)
+            return;
+        const oldParent = node.parent;
+        const oldIndex = oldParent.children.indexOf(node);
+        if (oldIndex >= 0) {
+            oldParent.children.splice(oldIndex, 1);
+        }
+        // Insert into new location
+        this.onInsert(parentId, id, beforeId);
+    }
+    /**
+     * Remove node from tree
+     */
+    onRemove(id) {
+        const node = this.nodes.get(id);
+        if (!node)
+            return;
+        // Remove from parent
+        if (node.parent) {
+            const index = node.parent.children.indexOf(node);
+            if (index >= 0) {
+                node.parent.children.splice(index, 1);
+            }
+        }
+        // Remove from root
+        if (this.rootNode === node) {
+            this.rootNode = null;
+            this.eventManager.setRootNode(null);
+        }
+        // Remove from nodes map
+        this.nodes.delete(id);
+    }
+    /**
+     * Schedule redraw
+     */
+    scheduleRedraw() {
+        if (this.rafId !== null)
+            return;
+        // Use requestAnimationFrame if available (browser), otherwise render immediately (tests)
+        if (typeof requestAnimationFrame !== "undefined") {
+            this.rafId = requestAnimationFrame(() => {
+                this.render();
+                this.rafId = null;
+            });
+        }
+        else {
+            // In non-browser environments (tests), render immediately
+            this.render();
+        }
     }
-    if (this.options.logPerformance) {
-      const elapsed = performance.now() - startTime;
-      this.frameCount++;
-      if (performance.now() - this.lastFrameTime > 1000) {
-        log2.debug(`Canvas FPS: ${this.frameCount}, Last frame: ${elapsed.toFixed(2)}ms`);
-        this.frameCount = 0;
-        this.lastFrameTime = performance.now();
-      }
+    /**
+     * Main render function
+     */
+    render() {
+        const startTime = performance.now();
+        // Clear canvas
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        // Draw background
+        if (this.options.backgroundColor) {
+            this.ctx.fillStyle = this.options.backgroundColor;
+            this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+        }
+        // Layout and paint
+        if (this.rootNode) {
+            // Compute layout
+            const dpr = this.options.devicePixelRatio || 1;
+            computeLayout(this.ctx, this.rootNode, this.canvas.width / dpr, this.canvas.height / dpr);
+            // Paint
+            paintNode(this.ctx, this.rootNode);
+            // Debug: show layout bounds
+            if (this.options.showLayoutBounds) {
+                this.drawLayoutBounds(this.rootNode);
+            }
+        }
+        // Performance logging
+        if (this.options.logPerformance) {
+            const elapsed = performance.now() - startTime;
+            this.frameCount++;
+            if (performance.now() - this.lastFrameTime > 1000) {
+                log.debug(`Canvas FPS: ${this.frameCount}, Last frame: ${elapsed.toFixed(2)}ms`);
+                this.frameCount = 0;
+                this.lastFrameTime = performance.now();
+            }
+        }
     }
-  }
-  drawLayoutBounds(node) {
-    if (!node.layout)
-      return;
-    const layout = node.layout;
-    this.ctx.strokeStyle = "#ff0000";
-    this.ctx.lineWidth = 1;
-    this.ctx.strokeRect(layout.x, layout.y, layout.width, layout.height);
-    for (const child of node.children) {
-      this.drawLayoutBounds(child);
+    /**
+     * Draw layout bounds for debugging
+     */
+    drawLayoutBounds(node) {
+        if (!node.layout)
+            return;
+        const layout = node.layout;
+        this.ctx.strokeStyle = "#ff0000";
+        this.ctx.lineWidth = 1;
+        this.ctx.strokeRect(layout.x, layout.y, layout.width, layout.height);
+        for (const child of node.children) {
+            this.drawLayoutBounds(child);
+        }
     }
-  }
-  getNode(id) {
-    return this.nodes.get(id);
-  }
-  clear() {
-    this.rootNode = null;
-    this.nodes.clear();
-    this.eventManager.setRootNode(null);
-    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-  }
-  registerPainter(type, painter) {
-    registerPainter(type, painter);
-  }
-  setOptions(options) {
-    this.options = { ...this.options, ...options };
-    this.accessibilityLayer.setEnabled(this.options.enableAccessibility || false);
-  }
-  destroy() {
-    if (this.rafId !== null) {
-      cancelAnimationFrame(this.rafId);
+    /**
+     * Get node by ID
+     */
+    getNode(id) {
+        return this.nodes.get(id);
+    }
+    /**
+     * Clear renderer
+     */
+    clear() {
+        this.rootNode = null;
+        this.nodes.clear();
+        this.eventManager.setRootNode(null);
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+    /**
+     * Register custom painter
+     */
+    registerPainter(type, painter) {
+        registerPainter(type, painter);
+    }
+    /**
+     * Set renderer options
+     */
+    setOptions(options) {
+        this.options = { ...this.options, ...options };
+        this.accessibilityLayer.setEnabled(this.options.enableAccessibility || false);
+    }
+    /**
+     * Destroy renderer
+     */
+    destroy() {
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+        }
+        this.eventManager.destroy();
+        this.accessibilityLayer.destroy();
     }
-    this.eventManager.destroy();
-    this.accessibilityLayer.destroy();
-  }
 }
-export {
-  CanvasRenderer
-};
-
-//# debugId=F583F289DA278D9964756E2164756E21
+//# sourceMappingURL=renderer.js.map