@hypen-space/web 0.4.32 → 0.4.35

package/dist/canvas/renderer.js

@@ -2,31 +2,185 @@ var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __moduleCache = /* @__PURE__ */ new WeakMap;
+function __accessProp(key) {
+  return this[key];
+}
 var __toCommonJS = (from) => {
-  var entry = __moduleCache.get(from), desc;
+  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")
-    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    }));
+  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: (newValue) => all[name] = () => newValue
+      set: __exportSetter.bind(all, name)
     });
 };
 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");
+        }
+        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;
+        }
+        break;
+      case "textarea":
+        element = document.createElement("textarea");
+        element.value = node.props.value || "";
+        if (node.props.placeholder) {
+          element.placeholder = node.props.placeholder;
+        }
+        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") {
@@ -256,302 +410,136 @@ async function loadFont(fontFamily, fontWeight = "normal") {
   }
 }
 
-// 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;
+// src/canvas/input.ts
+class InputOverlay {
+  container;
+  overlay = null;
+  focusedNode = null;
+  onChangeCallback = null;
+  bindPath = null;
+  engine = null;
+  constructor(container) {
+    this.container = container || {};
   }
-  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;
+  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;
   }
-  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);
+  hideInput() {
+    if (this.overlay) {
+      this.overlay.remove();
+      this.overlay = null;
+    }
+    this.focusedNode = null;
+    this.onChangeCallback = null;
+    this.bindPath = null;
+    this.engine = null;
   }
-}
-function layoutChildren(ctx, parent) {
-  const layout = parent.layout;
-  const props = parent.props;
-  if (parent.type.toLowerCase() === "stack") {
-    layoutStackChildren(ctx, parent);
-    return;
+  updatePosition(node, canvasBounds) {
+    if (!this.overlay || node !== this.focusedNode)
+      return;
+    const bounds = getAbsoluteBounds(node);
+    if (!bounds)
+      return;
+    this.positionOverlay(bounds, canvasBounds);
   }
-  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;
-      }
+  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;
     }
-    childInfo.push({
-      width: childLayout.width,
-      height: childLayout.height,
-      flexGrow,
-      flexShrink,
-      flexBasis
+    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`
     });
-    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;
-        }
-        totalMainSize += extraSpace;
-      }
+  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
+      });
     }
-    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);
-        }
-        totalMainSize -= shrinkSpace;
-      }
+  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();
     }
-    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;
+  isShown() {
+    return this.overlay !== null;
   }
-  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;
+  getFocusedNode() {
+    return this.focusedNode;
   }
 }
 
@@ -850,6 +838,46 @@ function paintInput(ctx, node) {
     });
   }
 }
+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;
@@ -860,6 +888,11 @@ function paintImage(ctx, node) {
   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";
@@ -869,7 +902,40 @@ function paintImage(ctx, node) {
   ctx.font = "14px sans-serif";
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
-  ctx.fillText("IMG", x + width / 2, y + height / 2);
+  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) {
@@ -1421,466 +1487,514 @@ function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {
   ctx.closePath();
 }
 
-// src/canvas/events.ts
-class CanvasEventManager {
-  canvas;
-  engine;
-  rootNode = null;
-  hoveredNode = null;
-  focusedNode = null;
-  mouseDownNode = null;
-  constructor(canvas, engine) {
-    this.canvas = canvas;
-    this.engine = engine;
-    this.setupEventListeners();
-  }
-  setRootNode(node) {
-    this.rootNode = node;
-  }
-  setupEventListeners() {
-    this.canvas.addEventListener("mousemove", this.onMouseMove.bind(this));
-    this.canvas.addEventListener("mousedown", this.onMouseDown.bind(this));
-    this.canvas.addEventListener("mouseup", this.onMouseUp.bind(this));
-    this.canvas.addEventListener("click", this.onClick.bind(this));
-    this.canvas.addEventListener("dblclick", this.onDoubleClick.bind(this));
-    this.canvas.addEventListener("keydown", this.onKeyDown.bind(this));
-    this.canvas.addEventListener("keyup", this.onKeyUp.bind(this));
-  }
-  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);
+// 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 {
-      this.setFocus(null);
+      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;
   }
-  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;
+  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;
   }
-  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
-      });
-    }
+  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);
   }
-  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
-      });
+}
+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;
   }
-  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
-      });
+  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;
+        }
+        totalMainSize += extraSpace;
+      }
     }
+    remainingSpace = 0;
   }
-  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
-      });
+  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);
+        }
+        totalMainSize -= shrinkSpace;
+      }
     }
+    remainingSpace = availableMain - totalMainSize;
   }
-  setFocus(node) {
-    if (node === this.focusedNode)
-      return;
-    if (this.focusedNode) {
-      this.focusedNode.focused = false;
-      this.dispatchNodeEvent(this.focusedNode, "blur", {});
+  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;
     }
-    this.focusedNode = node;
-    if (node) {
-      node.focused = true;
-      this.dispatchNodeEvent(node, "focus", {});
+    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;
     }
-    this.requestRedraw();
-  }
-  updateCursor(node) {
-    if (!node) {
-      this.canvas.style.cursor = "default";
-      return;
+    if (justifyContent === "space-between" || justifyContent === "space-around") {
+      currentMain += spacing;
     }
-    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
-      });
+}
+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;
   }
-  requestRedraw() {
-    this.canvas.dispatchEvent(new CustomEvent("hypen:redraw"));
-  }
-  destroy() {}
 }
 
-// src/canvas/input.ts
-class InputOverlay {
-  container;
-  overlay = null;
+// src/canvas/events.ts
+class CanvasEventManager {
+  canvas;
+  engine;
+  rootNode = null;
+  hoveredNode = 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
-      });
-    }
+  mouseDownNode = null;
+  boundOnMouseMove;
+  boundOnMouseDown;
+  boundOnMouseUp;
+  boundOnClick;
+  boundOnDoubleClick;
+  boundOnKeyDown;
+  boundOnKeyUp;
+  constructor(canvas, engine) {
+    this.canvas = canvas;
+    this.engine = engine;
+    this.setupEventListeners();
   }
-  onBlur() {
-    this.hideInput();
+  setRootNode(node) {
+    this.rootNode = node;
   }
-  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();
-    }
+  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);
   }
-  isShown() {
-    return this.overlay !== null;
+  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
+    };
   }
-  getFocusedNode() {
-    return this.focusedNode;
+  hitTest(point) {
+    if (!this.rootNode)
+      return null;
+    return this.hitTestNode(this.rootNode, point);
   }
-}
-
-// 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 = {};
+  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;
   }
-  syncTree(root) {
-    if (!this.enabled)
-      return;
-    this.shadowRoot.innerHTML = "";
-    this.nodeMap.clear();
-    const shadowNode = this.createShadowNode(root);
-    if (shadowNode) {
-      this.shadowRoot.appendChild(shadowNode);
+  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();
     }
   }
-  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");
-        }
-        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;
-        }
-        break;
-      case "textarea":
-        element = document.createElement("textarea");
-        element.value = node.props.value || "";
-        if (node.props.placeholder) {
-          element.placeholder = node.props.placeholder;
-        }
-        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");
+  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
+      });
     }
-    element.setAttribute("data-hypen-id", node.id);
-    if (node.props["aria-label"]) {
-      element.setAttribute("aria-label", node.props["aria-label"]);
+    if (node && node.focusable) {
+      this.setFocus(node);
+    } else {
+      this.setFocus(null);
     }
-    if (node.focusable) {
-      element.tabIndex = 0;
+  }
+  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.nodeMap.set(node.id, element);
-    for (const child of node.children) {
-      const childElement = this.createShadowNode(child);
-      if (childElement) {
-        element.appendChild(childElement);
-      }
+    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
+      });
     }
-    return element;
   }
-  getNodeText(node) {
-    if (node.type === "text") {
-      return String(node.props[0] || node.props.text || "");
+  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
+      });
     }
-    let text = "";
-    for (const child of node.children) {
-      text += this.getNodeText(child);
+  }
+  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
+      });
     }
-    return text;
   }
-  focusNode(nodeId) {
-    if (!this.enabled)
-      return;
-    const element = this.nodeMap.get(nodeId);
-    if (element) {
-      element.focus();
+  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
+      });
     }
   }
-  updateNode(node) {
-    if (!this.enabled)
-      return;
-    const element = this.nodeMap.get(node.id);
-    if (!element)
+  setFocus(node) {
+    if (node === this.focusedNode)
       return;
-    if (node.type === "text") {
-      element.textContent = String(node.props[0] || node.props.text || "");
+    if (this.focusedNode) {
+      this.focusedNode.focused = false;
+      this.dispatchNodeEvent(this.focusedNode, "blur", {});
     }
-    if (node.type === "input" || node.type === "textarea") {
-      element.value = node.props.value || "";
+    this.focusedNode = node;
+    if (node) {
+      node.focused = true;
+      this.dispatchNodeEvent(node, "focus", {});
     }
-    element.style.display = node.visible ? "" : "none";
+    this.requestRedraw();
   }
-  getElement(nodeId) {
-    return this.nodeMap.get(nodeId);
+  updateCursor(node) {
+    if (!node) {
+      this.canvas.style.cursor = "default";
+      return;
+    }
+    const cursor = node.props.cursor || (node.clickable ? "pointer" : "default");
+    this.canvas.style.cursor = cursor;
   }
-  setEnabled(enabled) {
-    this.enabled = enabled;
-    if (!enabled && this.shadowRoot.parentElement) {
-      this.shadowRoot.remove();
+  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() {
-    if (this.shadowRoot.parentElement) {
-      this.shadowRoot.remove();
-    }
-    this.nodeMap.clear();
+    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;
   }
 }
 
@@ -2155,4 +2269,4 @@ export {
   CanvasRenderer
 };
 
-//# debugId=64A1C0C9DB735D3764756E2164756E21
+//# debugId=F583F289DA278D9964756E2164756E21