@hypen-space/web 0.4.36 → 0.4.37

package/dist/canvas/paint.js

@@ -1,1218 +1,1194 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
+/**
+ * Paint System
+ *
+ * Drawing virtual nodes to canvas
+ */
+import { renderText } from "./text.js";
+/**
+ * Custom painters registry
+ */
+const customPainters = new Map();
+/**
+ * Register a custom painter for a component type
+ */
+export function registerPainter(type, painter) {
+    customPainters.set(type.toLowerCase(), painter);
 }
-var __toCommonJS = (from) => {
-  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
-  if (entry)
-    return entry;
-  entry = __defProp({}, "__esModule", { value: true });
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (var key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(entry, key))
-        __defProp(entry, key, {
-          get: __accessProp.bind(from, key),
-          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-        });
-  }
-  __moduleCache.set(from, entry);
-  return entry;
-};
-var __moduleCache;
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: __exportSetter.bind(all, name)
-    });
-};
-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
-import { frameworkLoggers } from "@hypen-space/core/logger";
-var log = frameworkLoggers.canvas;
-var textMetricsCache = new Map;
-function getCacheKey(text, fontStyle, maxWidth) {
-  return `${text}|${fontStyle.fontSize}|${fontStyle.fontWeight}|${fontStyle.fontFamily}|${maxWidth || "auto"}`;
-}
-function measureText(ctx, text, fontStyle, maxWidth) {
-  const cacheKey = getCacheKey(text, fontStyle, maxWidth);
-  const cached = textMetricsCache.get(cacheKey);
-  if (cached)
-    return cached;
-  const font = createFontString(fontStyle.fontSize, fontStyle.fontWeight, fontStyle.fontFamily);
-  ctx.save();
-  ctx.font = font;
-  const lineHeight = fontStyle.lineHeight || fontStyle.fontSize * 1.2;
-  if (!maxWidth) {
-    const metrics = ctx.measureText(text);
-    const result2 = {
-      width: metrics.width,
-      height: lineHeight,
-      lines: [text],
-      lineHeight
-    };
-    ctx.restore();
-    textMetricsCache.set(cacheKey, result2);
-    return result2;
-  }
-  const lines = wrapText(ctx, text, maxWidth);
-  const width = Math.max(...lines.map((line) => ctx.measureText(line).width));
-  const height = lines.length * lineHeight;
-  const result = {
-    width,
-    height,
-    lines,
-    lineHeight
-  };
-  ctx.restore();
-  textMetricsCache.set(cacheKey, result);
-  return result;
-}
-function wrapText(ctx, text, maxWidth) {
-  const lines = [];
-  const paragraphs = text.split(`
-`);
-  for (const paragraph of paragraphs) {
-    const words = paragraph.split(" ");
-    let currentLine = "";
-    for (const word of words) {
-      const testLine = currentLine ? `${currentLine} ${word}` : word;
-      const metrics = ctx.measureText(testLine);
-      if (metrics.width > maxWidth && currentLine) {
-        lines.push(currentLine);
-        currentLine = word;
-      } else {
-        currentLine = testLine;
-      }
-    }
-    if (currentLine) {
-      lines.push(currentLine);
-    }
-  }
-  return lines.length > 0 ? lines : [""];
-}
-function renderText(ctx, text, x, y, width, height, style) {
-  const font = createFontString(style.fontSize, style.fontWeight, style.fontFamily);
-  ctx.save();
-  ctx.font = font;
-  ctx.fillStyle = style.color;
-  ctx.textBaseline = "top";
-  const metrics = measureText(ctx, text, style, width);
-  let startY = y;
-  if (style.verticalAlign === "middle") {
-    startY = y + (height - metrics.height) / 2;
-  } else if (style.verticalAlign === "bottom") {
-    startY = y + height - metrics.height;
-  }
-  for (let i = 0;i < metrics.lines.length; i++) {
-    const line = metrics.lines[i];
-    const lineY = startY + i * metrics.lineHeight;
-    let lineX = x;
-    if (style.textAlign === "center") {
-      const lineWidth = ctx.measureText(line).width;
-      lineX = x + (width - lineWidth) / 2;
-    } else if (style.textAlign === "right") {
-      const lineWidth = ctx.measureText(line).width;
-      lineX = x + width - lineWidth;
-    }
-    ctx.fillText(line, lineX, lineY);
-  }
-  ctx.restore();
-}
-function clearTextCache() {
-  textMetricsCache.clear();
-}
-async function loadFont(fontFamily, fontWeight = "normal") {
-  if (!("fonts" in document))
-    return;
-  const font = `${fontWeight} 16px ${fontFamily}`;
-  try {
-    await document.fonts.load(font);
-  } catch (error) {
-    log.warn(`Failed to load font: ${font}`, error);
-  }
-}
-
-// src/canvas/paint.ts
-var customPainters = new Map;
-function registerPainter(type, painter) {
-  customPainters.set(type.toLowerCase(), painter);
-}
-function paintNode(ctx, node) {
-  if (!node.visible || !node.layout)
-    return;
-  ctx.save();
-  applyTransforms(ctx, node);
-  if (node.opacity < 1) {
-    ctx.globalAlpha = node.opacity;
-  }
-  const customPainter = customPainters.get(node.type.toLowerCase());
-  if (customPainter) {
-    customPainter(ctx, node);
-    ctx.restore();
-    return;
-  }
-  switch (node.type.toLowerCase()) {
-    case "column":
-    case "row":
-    case "stack":
-      paintContainer(ctx, node);
-      break;
-    case "text":
-      paintText(ctx, node);
-      break;
-    case "button":
-      paintButton(ctx, node);
-      break;
-    case "input":
-      paintInput(ctx, node);
-      break;
-    case "image":
-      paintImage(ctx, node);
-      break;
-    case "spacer":
-      break;
-    case "divider":
-    case "separator":
-      paintDivider(ctx, node);
-      break;
-    case "checkbox":
-      paintCheckbox(ctx, node);
-      break;
-    case "radio":
-      paintRadio(ctx, node);
-      break;
-    case "switch":
-    case "toggle":
-      paintSwitch(ctx, node);
-      break;
-    case "slider":
-      paintSlider(ctx, node);
-      break;
-    case "progress":
-    case "progressbar":
-      paintProgress(ctx, node);
-      break;
-    case "spinner":
-    case "loading":
-      paintSpinner(ctx, node);
-      break;
-    case "card":
-      paintCard(ctx, node);
-      break;
-    case "badge":
-      paintBadge(ctx, node);
-      break;
-    case "avatar":
-      paintAvatar(ctx, node);
-      break;
-    case "icon":
-      paintIcon(ctx, node);
-      break;
-    case "link":
-      paintLink(ctx, node);
-      break;
-    case "app":
-    case "container":
-    case "box":
-      paintContainer(ctx, node);
-      break;
-    default:
-      paintContainer(ctx, node);
-  }
-  ctx.restore();
-  for (const child of node.children) {
-    paintNode(ctx, child);
-  }
-  if (node._needsRestore) {
+/**
+ * Paint a virtual node and its children
+ */
+export function paintNode(ctx, node) {
+    if (!node.visible || !node.layout)
+        return;
+    ctx.save();
+    // Apply transforms
+    applyTransforms(ctx, node);
+    // Apply opacity
+    if (node.opacity < 1) {
+        ctx.globalAlpha = node.opacity;
+    }
+    // Check for custom painter
+    const customPainter = customPainters.get(node.type.toLowerCase());
+    if (customPainter) {
+        customPainter(ctx, node);
+        ctx.restore();
+        return;
+    }
+    // Default painting based on type
+    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":
+            // Spacer is invisible, just takes up space
+            break;
+        case "divider":
+        case "separator":
+            paintDivider(ctx, node);
+            break;
+        case "checkbox":
+            paintCheckbox(ctx, node);
+            break;
+        case "radio":
+            paintRadio(ctx, node);
+            break;
+        case "switch":
+        case "toggle":
+            paintSwitch(ctx, node);
+            break;
+        case "slider":
+            paintSlider(ctx, node);
+            break;
+        case "progress":
+        case "progressbar":
+            paintProgress(ctx, node);
+            break;
+        case "spinner":
+        case "loading":
+            paintSpinner(ctx, node);
+            break;
+        case "card":
+            paintCard(ctx, node);
+            break;
+        case "badge":
+            paintBadge(ctx, node);
+            break;
+        case "avatar":
+            paintAvatar(ctx, node);
+            break;
+        case "icon":
+            paintIcon(ctx, node);
+            break;
+        case "link":
+            paintLink(ctx, node);
+            break;
+        case "app":
+        case "container":
+        case "box":
+            paintContainer(ctx, node);
+            break;
+        default:
+            paintContainer(ctx, node);
+    }
     ctx.restore();
-    delete node._needsRestore;
-  }
+    // Paint children
+    for (const child of node.children) {
+        paintNode(ctx, child);
+    }
+    // Restore context if overflow clipping was applied
+    if (node._needsRestore) {
+        ctx.restore();
+        delete node._needsRestore;
+    }
 }
+/**
+ * Paint a container (Column, Row, Stack, Box)
+ */
 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);
+    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;
+    // Apply shadow if specified
+    const shadow = props.shadow || props.boxShadow;
+    if (shadow) {
+        applyShadow(ctx, shadow);
+    }
+    // Draw background
+    const backgroundColor = props.backgroundColor || props.background;
+    if (backgroundColor) {
+        // Support for gradients
+        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);
+        }
+    }
+    // Reset shadow for border
+    if (shadow) {
+        ctx.shadowColor = "transparent";
+        ctx.shadowBlur = 0;
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+    }
+    // Draw border
+    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);
+        }
+    }
+    // Apply overflow clipping for children
+    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();
+        // Mark that we need to restore later
+        node._needsRestore = true;
     }
-    ctx.clip();
-    node._needsRestore = true;
-  }
 }
+/**
+ * Paint text node
+ */
 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;
-  }
+    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;
+    // Apply text transform
+    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());
+    }
+    // Apply text shadow if specified
+    const textShadow = props.textShadow || props.shadow;
+    if (textShadow) {
+        applyShadow(ctx, textShadow);
+    }
+    // Handle letter spacing
+    const x = layout.x + layout.contentX;
+    const y = layout.y + layout.contentY;
+    if (letterSpacing !== 0) {
+        // Manual letter spacing
+        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;
+            // Add letter spacing after each character except the last
+            if (i < text.length - 1) {
+                currentX += letterSpacing;
+            }
+        }
+        // Text decoration with letter spacing (now correct width)
+        if (textDecoration !== "none") {
+            applyTextDecoration(ctx, textDecoration, color, x, y, currentX - x, fontSize);
+        }
+    }
+    else {
+        // Normal text rendering
+        renderText(ctx, text, x, y, layout.contentWidth, layout.contentHeight, {
+            color,
+            fontSize,
+            fontWeight,
+            fontFamily,
+            textAlign: textAlign,
+            verticalAlign: "top",
+            lineHeight,
+        });
+        // Text decoration (need to set font again for measurement)
+        if (textDecoration !== "none") {
+            ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+            const textWidth = ctx.measureText(text).width;
+            applyTextDecoration(ctx, textDecoration, color, x, y, textWidth, fontSize);
+        }
+    }
+    // Reset shadow
+    if (textShadow) {
+        ctx.shadowColor = "transparent";
+        ctx.shadowBlur = 0;
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+    }
 }
+/**
+ * Paint button node
+ */
 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;
+    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;
+    // Apply shadow if specified
+    const shadow = props.shadow || props.boxShadow;
+    if (shadow) {
+        applyShadow(ctx, shadow);
+    }
+    // Background color based on state
+    let backgroundColor = props.backgroundColor || "#007bff";
+    if (node.hovered) {
+        backgroundColor = props.hoverColor || "#0056b3";
+    }
+    if (node.focused) {
+        backgroundColor = props.focusColor || "#004085";
+    }
+    // Support gradients for button background
+    if (typeof backgroundColor === "string" && backgroundColor.includes("gradient")) {
+        ctx.fillStyle = parseGradient(ctx, backgroundColor, x, y, width, height);
+    }
+    else {
+        ctx.fillStyle = backgroundColor;
+    }
+    // Draw button background
     drawRoundedRect(ctx, x, y, width, height, radius);
-    ctx.stroke();
-  }
-  for (const child of node.children) {
-    paintNode(ctx, child);
-  }
+    ctx.fill();
+    // Reset shadow for border
+    if (shadow) {
+        ctx.shadowColor = "transparent";
+        ctx.shadowBlur = 0;
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+    }
+    // Draw border
+    if (layout.border.width > 0) {
+        ctx.strokeStyle = layout.border.color;
+        ctx.lineWidth = layout.border.width;
+        drawRoundedRect(ctx, x, y, width, height, radius);
+        ctx.stroke();
+    }
+    // Paint children (typically Text)
+    for (const child of node.children) {
+        paintNode(ctx, child);
+    }
 }
+/**
+ * Paint input node
+ */
 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
-    });
-  }
+    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;
+    // Background
+    ctx.fillStyle = props.backgroundColor || "#ffffff";
+    drawRoundedRect(ctx, x, y, width, height, radius);
+    ctx.fill();
+    // Border (thicker if focused)
+    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();
+    // Input value text
+    const value = props.value || "";
+    const placeholder = props.placeholder || "";
+    const text = value || placeholder;
+    const textColor = value ? (props.color || "#000000") : "#999999";
+    if (text) {
+        const fontSize = parseFloat(props.fontSize) || 16;
+        const fontWeight = props.fontWeight || "normal";
+        const fontFamily = props.fontFamily || "system-ui, sans-serif";
+        const lineHeight = parseFloat(props.lineHeight) || fontSize * 1.2;
+        renderText(ctx, text, layout.x + layout.contentX, layout.y + layout.contentY, layout.contentWidth, layout.contentHeight, {
+            color: textColor,
+            fontSize,
+            fontWeight,
+            fontFamily,
+            textAlign: "left",
+            verticalAlign: "middle",
+            lineHeight,
+        });
+    }
 }
-var MAX_IMAGE_CACHE_SIZE = 100;
-var MAX_FAIL_CACHE_SIZE = 200;
-var imageCache = new Map;
-var imagePending = new Set;
-var imageInFlight = new Map;
-var imageFailCache = new Map;
-var IMAGE_FAIL_COOLDOWN_MS = 30000;
-var IMAGE_MAX_ATTEMPTS = 3;
+/**
+ * Image cache for canvas renderer
+ */
+const MAX_IMAGE_CACHE_SIZE = 100;
+const MAX_FAIL_CACHE_SIZE = 200;
+const imageCache = new Map();
+const imagePending = new Set();
+const imageInFlight = new Map();
+const imageFailCache = new Map();
+const IMAGE_FAIL_COOLDOWN_MS = 30_000;
+const IMAGE_MAX_ATTEMPTS = 3;
+/**
+ * Evict oldest entries from a Map when it exceeds the given maximum size.
+ */
 function evictMap(map, max) {
-  while (map.size > max) {
-    const oldest = map.keys().next().value;
-    if (oldest === undefined)
-      break;
-    map.delete(oldest);
-  }
+    while (map.size > max) {
+        const oldest = map.keys().next().value;
+        if (oldest === undefined)
+            break;
+        map.delete(oldest);
+    }
 }
+/**
+ * Purge expired entries from imageFailCache.
+ */
 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);
-    }
-  }
+    const now = Date.now();
+    for (const [key, entry] of imageFailCache) {
+        if (entry.attempts >= IMAGE_MAX_ATTEMPTS)
+            continue; // Keep max-attempt entries until evicted by size
+        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();
+/**
+ * Clear the image cache and cancel all in-flight loads, freeing resources.
+ */
+export function clearImageCache() {
+    // Cancel in-flight Image loads so their callbacks cannot repopulate caches
+    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();
 }
+/**
+ * Paint image node
+ */
 function paintImage(ctx, node) {
-  const layout = node.layout;
-  const props = node.props;
-  const src = props.src || props[0];
-  if (!src)
-    return;
-  const x = layout.x;
-  const y = layout.y;
-  const width = layout.width;
-  const height = layout.height;
-  const cached = imageCache.get(src);
-  if (cached && cached.complete && cached.naturalWidth > 0) {
-    ctx.drawImage(cached, x, y, width, height);
-    return;
-  }
-  ctx.fillStyle = "#e0e0e0";
-  ctx.fillRect(x, y, width, height);
-  ctx.strokeStyle = "#999999";
-  ctx.lineWidth = 1;
-  ctx.strokeRect(x, y, width, height);
-  ctx.fillStyle = "#666666";
-  ctx.font = "14px sans-serif";
-  ctx.textAlign = "center";
-  ctx.textBaseline = "middle";
-  const failEntry = imageFailCache.get(src);
-  if (failEntry) {
-    if (failEntry.attempts >= IMAGE_MAX_ATTEMPTS || Date.now() - failEntry.failedAt < IMAGE_FAIL_COOLDOWN_MS) {
-      ctx.fillText("Failed", x + width / 2, y + height / 2);
-      return;
-    }
-  }
-  ctx.fillText("Loading...", x + width / 2, y + height / 2);
-  if (!imagePending.has(src)) {
-    imagePending.add(src);
-    const canvas = ctx.canvas;
-    const img = new Image;
-    img.crossOrigin = "anonymous";
-    imageInFlight.set(src, img);
-    img.onload = () => {
-      imageInFlight.delete(src);
-      imageCache.set(src, img);
-      imagePending.delete(src);
-      imageFailCache.delete(src);
-      evictMap(imageCache, MAX_IMAGE_CACHE_SIZE);
-      canvas.dispatchEvent(new CustomEvent("hypen:redraw"));
-    };
-    img.onerror = () => {
-      imageInFlight.delete(src);
-      imagePending.delete(src);
-      purgeExpiredFailures();
-      imageFailCache.set(src, {
-        failedAt: Date.now(),
-        attempts: (imageFailCache.get(src)?.attempts ?? 0) + 1
-      });
-      evictMap(imageFailCache, MAX_FAIL_CACHE_SIZE);
-    };
-    img.src = src;
-  }
+    const layout = node.layout;
+    const props = node.props;
+    const src = props.src || props[0];
+    if (!src)
+        return;
+    const x = layout.x;
+    const y = layout.y;
+    const width = layout.width;
+    const height = layout.height;
+    const cached = imageCache.get(src);
+    if (cached && cached.complete && cached.naturalWidth > 0) {
+        // Draw the loaded image
+        ctx.drawImage(cached, x, y, width, height);
+        return;
+    }
+    // Draw placeholder while loading
+    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";
+    // Check if this URL has failed recently
+    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);
+    // Start loading if not already pending
+    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);
+            // Request a repaint so the loaded image is drawn
+            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;
+    }
 }
+/**
+ * Draw rounded rectangle path
+ */
 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();
+    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();
 }
+/**
+ * Apply shadow to canvas context
+ * Supports both simple and CSS-like shadow syntax:
+ * - Simple: "2 2 4 rgba(0,0,0,0.3)"
+ * - CSS-like: "2px 2px 4px rgba(0,0,0,0.3)"
+ * - Named: {offsetX: 2, offsetY: 2, blur: 4, color: "rgba(0,0,0,0.3)"}
+ */
 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)";
-  }
+    if (typeof shadow === "string") {
+        // Parse CSS-like shadow string: "offsetX offsetY blur color"
+        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") {
+        // Object syntax
+        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)";
+    }
 }
+/**
+ * Parse gradient string and create canvas gradient
+ * Supports:
+ * - linear-gradient(direction, color1, color2, ...)
+ * - radial-gradient(color1, color2, ...)
+ */
 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;
+    // Simple gradient parsing
+    if (gradientStr.startsWith("linear-gradient")) {
+        // Extract content between parentheses
+        const match = gradientStr.match(/linear-gradient\((.*)\)/);
+        if (!match)
+            return gradientStr;
+        const parts = match[1].split(",").map((s) => s.trim());
+        // Determine direction (default to bottom)
+        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;
+            }
+            // Default is "to bottom" which we already set
+        }
+        const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+        // Add color stops
+        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")) {
+        // Extract content between parentheses
+        const match = gradientStr.match(/radial-gradient\((.*)\)/);
+        if (!match)
+            return gradientStr;
+        const parts = match[1].split(",").map((s) => s.trim());
+        // Create radial gradient from center
+        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);
+        // Add color stops
+        parts.forEach((color, i) => {
+            const stop = i / (parts.length - 1);
+            gradient.addColorStop(stop, color.trim());
+        });
+        return gradient;
+    }
+    return gradientStr;
 }
+/**
+ * Apply CSS-like transforms to canvas context
+ * Supports:
+ * - translate(x, y)
+ * - rotate(angle)
+ * - scale(x, y)
+ * - skew(x, y)
+ * - transform: "translate(10, 20) rotate(45) scale(1.5)"
+ */
 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);
-  }
+    const props = node.props;
+    const layout = node.layout;
+    // Get transform origin (default to center)
+    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;
+    // Check for individual transform properties
+    const translateX = parseFloat(props.translateX) || 0;
+    const translateY = parseFloat(props.translateY) || 0;
+    const rotate = parseFloat(props.rotate) || 0; // in degrees
+    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; // in degrees
+    const skewY = parseFloat(props.skewY) || 0; // in degrees
+    // Apply transforms in order: translate to origin, scale, rotate, skew, translate back, translate by offset
+    if (translateX !== 0 || translateY !== 0 || rotate !== 0 || scaleX !== 1 || scaleY !== 1 || skewX !== 0 || skewY !== 0) {
+        // Move to transform origin
+        ctx.translate(centerX, centerY);
+        // Apply scale
+        if (scaleX !== 1 || scaleY !== 1) {
+            ctx.scale(scaleX, scaleY);
+        }
+        // Apply rotation (convert degrees to radians)
+        if (rotate !== 0) {
+            ctx.rotate((rotate * Math.PI) / 180);
+        }
+        // Apply skew using transform matrix
+        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);
+        }
+        // Move back from origin and apply translation
+        ctx.translate(-centerX + translateX, -centerY + translateY);
+    }
+    // Also support compound transform string (optional, for future extensibility)
+    if (props.transform && typeof props.transform === "string") {
+        parseTransformString(ctx, props.transform, centerX, centerY);
+    }
 }
+/**
+ * Parse and apply a CSS-like transform string
+ */
 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);
+    // Simple transform parsing - matches translate(), rotate(), scale()
+    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);
 }
+/**
+ * Paint divider/separator node
+ */
 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();
+    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();
 }
+/**
+ * Paint checkbox node
+ */
 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);
+    const layout = node.layout;
+    const props = node.props;
+    const size = Math.min(layout.width, layout.height);
+    const x = layout.x;
+    const y = layout.y;
+    // Properly parse boolean values (handle string "false")
+    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;
+    // Background
+    const bgColor = checked ? (props.checkedColor || "#007bff") : (props.backgroundColor || "#ffffff");
+    ctx.fillStyle = bgColor;
+    drawRoundedRect(ctx, x, y, size, size, radius);
+    ctx.fill();
+    // Border
+    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();
-  }
+    // Checkmark
+    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();
+    }
 }
+/**
+ * Paint radio button node
+ */
 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";
+    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;
+    // Properly parse boolean values (handle string "false")
+    const checkedValue = props.checked !== undefined ? props.checked : props.value;
+    const checked = checkedValue === true || checkedValue === "true" || (checkedValue !== false && checkedValue !== "false" && !!checkedValue);
+    // Outer circle background
+    const bgColor = props.backgroundColor || "#ffffff";
+    ctx.fillStyle = bgColor;
     ctx.beginPath();
-    ctx.arc(centerX, centerY, radius * 0.5, 0, Math.PI * 2);
+    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
     ctx.fill();
-  }
+    // Outer circle border
+    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();
+    // Inner filled circle when checked
+    if (checked) {
+        ctx.fillStyle = props.checkedColor || "#007bff";
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, radius * 0.5, 0, Math.PI * 2);
+        ctx.fill();
+    }
 }
+/**
+ * Paint switch/toggle node
+ */
 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;
+    const layout = node.layout;
+    const props = node.props;
+    const width = layout.width;
+    const height = layout.height;
+    const x = layout.x;
+    const y = layout.y;
+    // Properly parse boolean values (handle string "false")
+    const checkedValue = props.checked !== undefined ? props.checked : props.value;
+    const checked = checkedValue === true || checkedValue === "true" || (checkedValue !== false && checkedValue !== "false" && !!checkedValue);
+    const radius = height / 2;
+    // Track background
+    const trackColor = checked ? (props.checkedColor || "#4caf50") : (props.backgroundColor || "#cccccc");
+    ctx.fillStyle = trackColor;
+    drawRoundedRect(ctx, x, y, width, height, radius);
+    ctx.fill();
+    // Thumb (circle)
+    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();
-    ctx.shadowColor = "transparent";
-    ctx.shadowBlur = 0;
-    ctx.shadowOffsetY = 0;
-  }
+    // Thumb shadow
+    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;
+    }
 }
+/**
+ * Paint slider node
+ */
 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 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;
+    // Track background
+    ctx.fillStyle = props.trackColor || "#e0e0e0";
+    drawRoundedRect(ctx, x, trackY, width, trackHeight, trackHeight / 2);
+    ctx.fill();
+    // Track fill
     const fillWidth = width * percentage;
     const fillColor = props.fillColor || props.color || "#007bff";
+    // Support gradient fills
     if (typeof fillColor === "string" && fillColor.includes("gradient")) {
-      ctx.fillStyle = parseGradient(ctx, fillColor, x, y, fillWidth, height);
-    } else {
-      ctx.fillStyle = fillColor;
+        ctx.fillStyle = parseGradient(ctx, fillColor, x, trackY, fillWidth, trackHeight);
     }
-    drawRoundedRect(ctx, x, y, fillWidth, height, radius);
+    else {
+        ctx.fillStyle = fillColor;
+    }
+    drawRoundedRect(ctx, x, trackY, fillWidth, trackHeight, trackHeight / 2);
     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);
-  }
+    // Thumb
+    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();
+    // Thumb border
+    ctx.strokeStyle = "#ffffff";
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.arc(thumbX, thumbY, thumbSize / 2, 0, Math.PI * 2);
+    ctx.stroke();
 }
+/**
+ * Paint progress bar node
+ */
+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;
+    // Background
+    ctx.fillStyle = props.backgroundColor || "#e0e0e0";
+    drawRoundedRect(ctx, x, y, width, height, radius);
+    ctx.fill();
+    // Progress fill
+    if (percentage > 0) {
+        const fillWidth = width * percentage;
+        // Support gradient fills
+        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();
+    }
+    // Optional text label
+    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);
+    }
+}
+/**
+ * Paint spinner/loading node
+ */
 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;
+    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";
+    // Use timestamp for animation if available
+    const rotation = (Date.now() / 1000) * Math.PI; // Rotate based on time
+    ctx.strokeStyle = color;
+    ctx.lineWidth = thickness;
+    ctx.lineCap = "round";
+    // Draw circular arc
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, radius, rotation, rotation + Math.PI * 1.5);
+    ctx.stroke();
+    // Fade out effect
+    ctx.globalAlpha = 0.3;
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.globalAlpha = 1;
 }
+/**
+ * Paint card node
+ */
 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;
+    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;
+    // Default card shadow
+    const shadow = props.shadow || props.boxShadow || "0 2 8 rgba(0,0,0,0.1)";
+    applyShadow(ctx, shadow);
+    // Background
+    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.stroke();
-  }
-  for (const child of node.children) {
-    paintNode(ctx, child);
-  }
+    ctx.fill();
+    // Reset shadow
+    ctx.shadowColor = "transparent";
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+    // Border
+    if (layout.border.width > 0) {
+        ctx.strokeStyle = layout.border.color;
+        ctx.lineWidth = layout.border.width;
+        drawRoundedRect(ctx, x, y, width, height, radius);
+        ctx.stroke();
+    }
+    // Paint children
+    for (const child of node.children) {
+        paintNode(ctx, child);
+    }
 }
+/**
+ * Paint badge node
+ */
 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);
-  }
+    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;
+    // Background
+    const backgroundColor = props.backgroundColor || "#dc3545";
+    ctx.fillStyle = backgroundColor;
+    drawRoundedRect(ctx, x, y, width, height, radius);
+    ctx.fill();
+    // Text content
+    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);
+    }
 }
+/**
+ * Paint avatar node
+ */
 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;
+    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;
+    // Clip to circle
+    ctx.save();
     ctx.beginPath();
     ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
-    ctx.stroke();
-  }
+    ctx.clip();
+    // Background
+    const backgroundColor = props.backgroundColor || "#cccccc";
+    ctx.fillStyle = backgroundColor;
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+    ctx.fill();
+    // Text initials if provided
+    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();
+    // Border
+    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();
+    }
 }
+/**
+ * Paint icon node (simple placeholder - real icons would need SVG path support)
+ */
 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();
-  }
+    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;
+    // Simple icon shapes
+    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:
+            // Default: filled circle
+            ctx.beginPath();
+            ctx.arc(x + size / 2, y + size / 2, size / 3, 0, Math.PI * 2);
+            ctx.fill();
+    }
 }
+/**
+ * Paint link node
+ */
 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;
+    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);
+    // Underline
+    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();
+    }
+}
+/**
+ * Apply text decoration (underline, line-through, etc.)
+ */
+function applyTextDecoration(ctx, decoration, color, x, y, width, fontSize) {
     ctx.strokeStyle = color;
-    ctx.lineWidth = 1;
+    ctx.lineWidth = Math.max(1, fontSize / 16);
     ctx.beginPath();
-    ctx.moveTo(x, y + fontSize + 2);
-    ctx.lineTo(x + textWidth, y + fontSize + 2);
+    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 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();
+/**
+ * Apply overflow clipping
+ */
+function applyOverflowClip(ctx, node) {
+    const props = node.props;
+    const overflow = props.overflow || "visible";
+    if (overflow === "hidden" || overflow === "scroll" || overflow === "auto") {
+        const layout = node.layout;
+        const x = layout.x;
+        const y = layout.y;
+        const width = layout.width;
+        const height = layout.height;
+        const radius = layout.border.radius;
+        ctx.save();
+        ctx.beginPath();
+        if (radius > 0) {
+            drawRoundedRect(ctx, x, y, width, height, radius);
+        }
+        else {
+            ctx.rect(x, y, width, height);
+        }
+        ctx.clip();
+    }
 }
+/**
+ * Helper: Draw a star shape
+ */
 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();
+    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();
 }
-export {
-  registerPainter,
-  paintNode,
-  clearImageCache
-};
-
-//# debugId=DB7D7BF5FB8A39B564756E2164756E21
+//# sourceMappingURL=paint.js.map