@hypen-space/web 0.2.0

package/dist/src/canvas/paint.js

@@ -0,0 +1,878 @@
+import {
+  renderText
+} from "./text.js";
+import"./utils.js";
+import"../../chunk-2s02mkzs.js";
+
+// 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();
+}
+export {
+  registerPainter,
+  paintNode
+};
+
+export { registerPainter, paintNode };
+
+//# debugId=0E042DAE3A9F443064756E2164756E21