@hypen-space/web 0.2.5 → 0.2.7

package/dist/src/canvas/renderer.js

@@ -1,22 +1,1868 @@
-import {
-  InputOverlay
-} from "./input.js";
-import {
-  paintNode,
-  registerPainter
-} from "./paint.js";
-import {
-  computeLayout
-} from "./layout.js";
-import {
-  CanvasEventManager
-} from "./events.js";
-import {
-  AccessibilityLayer
-} from "./accessibility.js";
-import"./text.js";
-import"./utils.js";
-import"../../chunk-2s02mkzs.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.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
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+
+// 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
+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) {
+    console.warn(`Failed to load font: ${font}`, error);
+  }
+}
+
+// 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 === "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 justifyContent = props.justifyContent || "flex-start";
+  const alignItems = props.alignItems || "flex-start";
+  const gap = parseFloat(props.gap) || 0;
+  const isColumn = flexDirection === "column";
+  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;
+        }
+        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);
+        }
+        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 alignItems = props.alignItems || "flex-start";
+  const justifyContent = props.justifyContent || "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 (alignItems === "center") {
+      x = (availableWidth - childLayout.width) / 2;
+    } else if (alignItems === "flex-end") {
+      x = availableWidth - childLayout.width;
+    }
+    if (justifyContent === "center") {
+      y = (availableHeight - childLayout.height) / 2;
+    } else if (justifyContent === "flex-end") {
+      y = availableHeight - childLayout.height;
+    }
+    childLayout.x = layout.x + layout.contentX + x;
+    childLayout.y = layout.y + layout.contentY + y;
+  }
+}
+
+// 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 "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
+    });
+  }
+}
+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;
+  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";
+  ctx.fillText("IMG", x + width / 2, y + height / 2);
+}
+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/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);
+    } 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() {}
+}
+
+// src/canvas/input.ts
+class InputOverlay {
+  container;
+  overlay = null;
+  focusedNode = null;
+  onChangeCallback = null;
+  constructor(container) {
+    this.container = container || {};
+  }
+  showInput(node, canvasBounds, onChange) {
+    if (typeof document === "undefined")
+      return;
+    this.hideInput();
+    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;
+  }
+  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);
+  }
+  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/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/renderer.ts
 var DEFAULT_OPTIONS = {
@@ -271,6 +2117,4 @@ export {
   CanvasRenderer
 };
 
-export { CanvasRenderer };
-
-//# debugId=C74D0582CBD605AC64756E2164756E21
+//# debugId=000BEE03B23C15A564756E2164756E21