@effing/canvas 0.40.2 → 0.41.1

package/dist/index.js

@@ -5,7 +5,7 @@ import {
   GlobalFonts as GlobalFonts2,
   Image,
   ImageData,
-  Path2D as Path2D4,
+  Path2D as Path2D5,
   DOMMatrix,
   DOMPoint,
   DOMRect,
@@ -68,6 +68,30 @@ function renderLottieFrame(ctx, animation, frame) {
   animation.render(ctx);
 }
 
+// src/jsx/draw/utils.ts
+function parseCSSLength(value, referenceSize) {
+  if (value.endsWith("%")) return parseFloat(value) / 100 * referenceSize;
+  return parseFloat(value);
+}
+function toNumber(v) {
+  if (typeof v === "number") return v;
+  if (v === void 0 || v === null) return 0;
+  const n = parseFloat(String(v));
+  return isNaN(n) ? 0 : n;
+}
+function resolveBoxValue(v, referenceWidth) {
+  if (typeof v === "number") return v;
+  if (v === void 0 || v === null) return 0;
+  const s = String(v);
+  if (s.endsWith("%")) return parseFloat(s) / 100 * referenceWidth;
+  const n = parseFloat(s);
+  return isNaN(n) ? 0 : n;
+}
+function formatCSSNumber(n) {
+  const fixed = n.toFixed(6).replace(/\.?0+$/, "");
+  return fixed === "-0" || fixed === "" ? "0" : fixed;
+}
+
 // src/jsx/style/compute.ts
 var ROOT_FONT_SIZE = 16;
 var DEFAULT_FONT_FAMILY = "Helvetica, Arial, sans-serif";
@@ -258,29 +282,31 @@ function resolveUnits(style, viewportWidth, viewportHeight, rootFontSize = ROOT_
       style[prop] = resolved;
     }
   }
-  if (style.transform) {
-    style.transform = resolveTransformUnits(
-      style.transform,
-      viewportWidth,
-      viewportHeight,
-      fontSize,
-      rootFontSize
-    );
-  }
-  if (style.transformOrigin) {
-    style.transformOrigin = resolveTransformUnits(
-      style.transformOrigin,
+  for (const [prop, suffix] of LENGTH_STRING_PROPS) {
+    const value = style[prop];
+    if (typeof value !== "string") continue;
+    style[prop] = resolveLengthUnits(
+      value,
       viewportWidth,
       viewportHeight,
       fontSize,
-      rootFontSize
+      rootFontSize,
+      suffix
     );
   }
   return style;
 }
-function resolveTransformUnits(transform, viewportWidth, viewportHeight, fontSize, rootFontSize) {
+var LENGTH_STRING_PROPS = [
+  ["transform", ""],
+  ["transformOrigin", ""],
+  ["clipPath", "px"],
+  ["filter", "px"],
+  ["backdropFilter", "px"]
+];
+function resolveLengthUnits(transform, viewportWidth, viewportHeight, fontSize, rootFontSize, suffix = "") {
   return transform.replace(
-    /(-?\d*\.?\d+)(vw|vh|vmin|vmax|em|rem|px|pt|pc|in|cm|mm)\b/g,
+    // The lookbehind keeps a number from being matched mid-token (`1e1em`).
+    /(?<![\w.])(-?\d*\.?\d+)(vw|vh|vmin|vmax|em|rem|px|pt|pc|in|cm|mm)\b/g,
     (match) => {
       const resolved = resolveUnit(
         match,
@@ -289,7 +315,7 @@ function resolveTransformUnits(transform, viewportWidth, viewportHeight, fontSiz
         fontSize,
         rootFontSize
       );
-      return typeof resolved === "number" ? String(resolved) : match;
+      return typeof resolved === "number" ? `${formatCSSNumber(resolved)}${suffix}` : match;
     }
   );
 }
@@ -1007,7 +1033,7 @@ function applyClip(ctx, x, y, width, height, borderRadius) {
   ctx.clip();
 }
 function roundedRect(ctx, x, y, w, h, tl, tr, br, bl) {
-  const maxR = Math.min(w, h) / 2;
+  const maxR = maxCornerRadius(w, h);
   tl = Math.min(tl, maxR);
   tr = Math.min(tr, maxR);
   br = Math.min(br, maxR);
@@ -1023,188 +1049,13 @@ function roundedRect(ctx, x, y, w, h, tl, tr, br, bl) {
   if (tl > 0) ctx.arcTo(x, y, x + tl, y, tl);
   ctx.closePath();
 }
+function maxCornerRadius(w, h) {
+  return Math.min(w, h) / 2;
+}
 function hasRadius(r) {
   return r.topLeft > 0 || r.topRight > 0 || r.bottomRight > 0 || r.bottomLeft > 0;
 }
 
-// src/jsx/draw/gradient.ts
-function createGradientFromCSS(ctx, cssGradient, x, y, width, height) {
-  const trimmed = cssGradient.trim();
-  if (trimmed.startsWith("linear-gradient")) {
-    return parseLinearGradient(ctx, trimmed, x, y, width, height);
-  }
-  if (trimmed.startsWith("radial-gradient")) {
-    return parseRadialGradient(ctx, trimmed, x, y, width, height);
-  }
-  return null;
-}
-function parseLinearGradient(ctx, css, x, y, width, height) {
-  const match = css.match(/linear-gradient\((.*)\)/s);
-  if (!match) return null;
-  const content = match[1].trim();
-  const parts = splitGradientArgs(content);
-  let angle = 180;
-  let colorStartIdx = 0;
-  const first = parts[0]?.trim();
-  if (first) {
-    if (first.startsWith("to ")) {
-      angle = directionToAngle(first);
-      colorStartIdx = 1;
-    } else if (first.endsWith("deg")) {
-      angle = parseFloat(first);
-      colorStartIdx = 1;
-    } else if (first.endsWith("turn")) {
-      angle = parseFloat(first) * 360;
-      colorStartIdx = 1;
-    }
-  }
-  const rad = (angle - 90) * Math.PI / 180;
-  const cx = x + width / 2;
-  const cy = y + height / 2;
-  const halfDiag = Math.abs(width * Math.cos(rad)) / 2 + Math.abs(height * Math.sin(rad)) / 2;
-  const x0 = cx - halfDiag * Math.cos(rad);
-  const y0 = cy - halfDiag * Math.sin(rad);
-  const x1 = cx + halfDiag * Math.cos(rad);
-  const y1 = cy + halfDiag * Math.sin(rad);
-  const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
-  const stops = parts.slice(colorStartIdx);
-  addColorStops(gradient, stops);
-  return gradient;
-}
-function parseRadialGradient(ctx, css, x, y, width, height) {
-  const match = css.match(/radial-gradient\((.*)\)/s);
-  if (!match) return null;
-  const content = match[1].trim();
-  const parts = splitGradientArgs(content);
-  const cx = x + width / 2;
-  const cy = y + height / 2;
-  const radius = Math.max(width, height) / 2;
-  const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius);
-  let colorStartIdx = 0;
-  const first = parts[0]?.trim() ?? "";
-  if (first.startsWith("circle") || first.startsWith("ellipse") || first.startsWith("closest") || first.startsWith("farthest")) {
-    colorStartIdx = 1;
-  }
-  addColorStops(gradient, parts.slice(colorStartIdx));
-  return gradient;
-}
-function addColorStops(gradient, stops) {
-  if (stops.length === 0) return;
-  for (let i = 0; i < stops.length; i++) {
-    const stop = stops[i].trim();
-    const percentMatch = stop.match(/^(.+?)\s+(\d+(?:\.\d+)?%?)$/);
-    if (percentMatch) {
-      const color = percentMatch[1];
-      const pos = percentMatch[2];
-      const offset = pos.endsWith("%") ? parseFloat(pos) / 100 : parseFloat(pos);
-      gradient.addColorStop(Math.max(0, Math.min(1, offset)), color);
-    } else {
-      const offset = stops.length === 1 ? 0.5 : i / (stops.length - 1);
-      gradient.addColorStop(offset, stop);
-    }
-  }
-}
-function directionToAngle(dir) {
-  const map = {
-    "to top": 0,
-    "to right": 90,
-    "to bottom": 180,
-    "to left": 270,
-    "to top right": 45,
-    "to top left": 315,
-    "to bottom right": 135,
-    "to bottom left": 225
-  };
-  return map[dir] ?? 180;
-}
-function splitGradientArgs(content) {
-  const parts = [];
-  let current = "";
-  let parenDepth = 0;
-  for (const char of content) {
-    if (char === "(") parenDepth++;
-    if (char === ")") parenDepth--;
-    if (char === "," && parenDepth === 0) {
-      parts.push(current);
-      current = "";
-    } else {
-      current += char;
-    }
-  }
-  if (current.trim()) parts.push(current);
-  return parts;
-}
-
-// src/jsx/draw/object-fit.ts
-function computeCover(imgW, imgH, boxX, boxY, boxW, boxH) {
-  const imgRatio = imgW / imgH;
-  const boxRatio = boxW / boxH;
-  let sx, sy, sw, sh;
-  if (imgRatio > boxRatio) {
-    sh = imgH;
-    sw = imgH * boxRatio;
-    sx = (imgW - sw) / 2;
-    sy = 0;
-  } else {
-    sw = imgW;
-    sh = imgW / boxRatio;
-    sx = 0;
-    sy = (imgH - sh) / 2;
-  }
-  return { sx, sy, sw, sh, dx: boxX, dy: boxY, dw: boxW, dh: boxH };
-}
-function computeContain(imgW, imgH, boxX, boxY, boxW, boxH) {
-  const imgRatio = imgW / imgH;
-  const boxRatio = boxW / boxH;
-  let dw, dh;
-  if (imgRatio > boxRatio) {
-    dw = boxW;
-    dh = boxW / imgRatio;
-  } else {
-    dh = boxH;
-    dw = boxH * imgRatio;
-  }
-  const dx = boxX + (boxW - dw) / 2;
-  const dy = boxY + (boxH - dh) / 2;
-  return { sx: 0, sy: 0, sw: imgW, sh: imgH, dx, dy, dw, dh };
-}
-
-// src/jsx/draw/image.ts
-async function drawImage(ctx, src, x, y, width, height, context, style) {
-  const image = await cachedLoadImage(
-    context.imageCache,
-    src,
-    context.userAgent
-  );
-  const objectFit = style?.objectFit ?? "fill";
-  if (objectFit === "fill") {
-    ctx.drawImage(image, x, y, width, height);
-    return;
-  }
-  const imgW = image.width;
-  const imgH = image.height;
-  if (objectFit === "contain") {
-    const r = computeContain(imgW, imgH, x, y, width, height);
-    ctx.drawImage(image, r.dx, r.dy, r.dw, r.dh);
-  } else if (objectFit === "cover") {
-    const r = computeCover(imgW, imgH, x, y, width, height);
-    ctx.drawImage(image, r.sx, r.sy, r.sw, r.sh, r.dx, r.dy, r.dw, r.dh);
-  } else if (objectFit === "none") {
-    const dx = x + (width - imgW) / 2;
-    const dy = y + (height - imgH) / 2;
-    ctx.drawImage(image, dx, dy);
-  } else if (objectFit === "scale-down") {
-    if (imgW <= width && imgH <= height) {
-      const dx = x + (width - imgW) / 2;
-      const dy = y + (height - imgH) / 2;
-      ctx.drawImage(image, dx, dy);
-    } else {
-      const r = computeContain(imgW, imgH, x, y, width, height);
-      ctx.drawImage(image, r.dx, r.dy, r.dw, r.dh);
-    }
-  }
-}
-
 // src/jsx/draw/offscreen.ts
 import { createCanvas as createCanvas2 } from "@napi-rs/canvas";
 var canvasPool = /* @__PURE__ */ new Map();
@@ -1235,26 +1086,169 @@ function releaseOffscreen(canvas) {
   stack.push(new WeakRef(canvas));
 }
 
-// src/jsx/draw/utils.ts
-function parseCSSLength(value, referenceSize) {
-  if (value.endsWith("%")) return parseFloat(value) / 100 * referenceSize;
-  return parseFloat(value);
+// src/jsx/draw/backdrop-filter.ts
+function drawBackdropFilter(ctx, filter, x, y, width, height, borderRadius) {
+  if (width <= 0 || height <= 0) return;
+  const normalized = filter.trim();
+  if (!normalized || normalized === "none") return;
+  const m = ctx.getTransform();
+  const det = m.a * m.d - m.b * m.c;
+  if (det === 0) return;
+  const pad = Math.ceil(filterBleed(normalized)) + 1;
+  const bx = x - pad;
+  const by = y - pad;
+  const bw = width + 2 * pad;
+  const bh = height + 2 * pad;
+  const bounds = transformedBounds(m, bx, by, bw, bh);
+  const rx = Math.floor(bounds.x0);
+  const ry = Math.floor(bounds.y0);
+  const rw = Math.ceil(bounds.x1) - rx;
+  const rh = Math.ceil(bounds.y1) - ry;
+  const canvasW = ctx.canvas.width;
+  const canvasH = ctx.canvas.height;
+  if (rx + rw <= 0 || ry + rh <= 0 || rx >= canvasW || ry >= canvasH) return;
+  const sx = Math.hypot(m.a, m.b);
+  const sy = Math.hypot(m.c, m.d);
+  const eps = 1e-6 * Math.max(sx, sy);
+  const similar = Math.abs(sx - sy) <= eps && Math.abs(m.a * m.c + m.b * m.d) <= eps * sx;
+  let bufW;
+  let bufH;
+  let scale;
+  if (similar) {
+    bufW = rw;
+    bufH = rh;
+    scale = sx;
+  } else {
+    scale = Math.max(sx, sy);
+    bufW = Math.ceil(bw * scale);
+    bufH = Math.ceil(bh * scale);
+  }
+  if (bufW <= 0 || bufH <= 0) return;
+  const [snapshot, snapCtx] = acquireOffscreen(bufW, bufH);
+  if (similar) {
+    snapCtx.translate(-rx, -ry);
+  } else {
+    const inv = invert(m, det);
+    snapCtx.setTransform(
+      scale * inv.a,
+      scale * inv.b,
+      scale * inv.c,
+      scale * inv.d,
+      scale * (inv.e - bx),
+      scale * (inv.f - by)
+    );
+  }
+  drawExtendedBackdrop(snapCtx, ctx.canvas, rx, ry, rw, rh);
+  const filtered = filterSnapshot(snapshot, normalized, scale);
+  releaseOffscreen(snapshot);
+  ctx.save();
+  applyClip(ctx, x, y, width, height, borderRadius);
+  ctx.filter = "none";
+  if (similar) {
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.drawImage(filtered, 0, 0, bufW, bufH, rx, ry, bufW, bufH);
+  } else {
+    ctx.drawImage(filtered, 0, 0, bufW, bufH, bx, by, bw, bh);
+  }
+  ctx.restore();
+  releaseOffscreen(filtered);
+}
+function drawExtendedBackdrop(target, canvas, rx, ry, rw, rh) {
+  const cw = canvas.width;
+  const ch = canvas.height;
+  const ix0 = Math.max(rx, 0);
+  const iy0 = Math.max(ry, 0);
+  const ix1 = Math.min(rx + rw, cw);
+  const iy1 = Math.min(ry + rh, ch);
+  if (ix1 <= ix0 || iy1 <= iy0) return;
+  const iw = ix1 - ix0;
+  const ih = iy1 - iy0;
+  target.drawImage(canvas, ix0, iy0, iw, ih, ix0, iy0, iw, ih);
+  const left = ix0 - rx;
+  const right = rx + rw - ix1;
+  const top = iy0 - ry;
+  const bottom = ry + rh - iy1;
+  if (left > 0) target.drawImage(canvas, 0, iy0, 1, ih, rx, iy0, left, ih);
+  if (right > 0) {
+    target.drawImage(canvas, cw - 1, iy0, 1, ih, ix1, iy0, right, ih);
+  }
+  if (top > 0) target.drawImage(canvas, ix0, 0, iw, 1, ix0, ry, iw, top);
+  if (bottom > 0) {
+    target.drawImage(canvas, ix0, ch - 1, iw, 1, ix0, iy1, iw, bottom);
+  }
+  if (left > 0 && top > 0) {
+    target.drawImage(canvas, 0, 0, 1, 1, rx, ry, left, top);
+  }
+  if (right > 0 && top > 0) {
+    target.drawImage(canvas, cw - 1, 0, 1, 1, ix1, ry, right, top);
+  }
+  if (left > 0 && bottom > 0) {
+    target.drawImage(canvas, 0, ch - 1, 1, 1, rx, iy1, left, bottom);
+  }
+  if (right > 0 && bottom > 0) {
+    target.drawImage(canvas, cw - 1, ch - 1, 1, 1, ix1, iy1, right, bottom);
+  }
+}
+function filterSnapshot(snapshot, filter, scale) {
+  const [out, outCtx] = acquireOffscreen(snapshot.width, snapshot.height);
+  outCtx.filter = scale === 1 ? filter : scaleFilterLengths(filter, scale);
+  outCtx.drawImage(snapshot, 0, 0);
+  outCtx.filter = "none";
+  return out;
 }
-function toNumber(v) {
-  if (typeof v === "number") return v;
-  if (v === void 0 || v === null) return 0;
-  const n = parseFloat(String(v));
-  return isNaN(n) ? 0 : n;
+function transformedBounds(m, x, y, w, h) {
+  let x0 = Infinity;
+  let y0 = Infinity;
+  let x1 = -Infinity;
+  let y1 = -Infinity;
+  for (const [px, py] of [
+    [x, y],
+    [x + w, y],
+    [x, y + h],
+    [x + w, y + h]
+  ]) {
+    const dx = m.a * px + m.c * py + m.e;
+    const dy = m.b * px + m.d * py + m.f;
+    if (dx < x0) x0 = dx;
+    if (dx > x1) x1 = dx;
+    if (dy < y0) y0 = dy;
+    if (dy > y1) y1 = dy;
+  }
+  return { x0, y0, x1, y1 };
+}
+function invert(m, det) {
+  return {
+    a: m.d / det,
+    b: -m.b / det,
+    c: -m.c / det,
+    d: m.a / det,
+    e: (m.c * m.f - m.d * m.e) / det,
+    f: (m.b * m.e - m.a * m.f) / det
+  };
 }
-function resolveBoxValue(v, referenceWidth) {
-  if (typeof v === "number") return v;
-  if (v === void 0 || v === null) return 0;
-  const s = String(v);
-  if (s.endsWith("%")) return parseFloat(s) / 100 * referenceWidth;
-  const n = parseFloat(s);
-  return isNaN(n) ? 0 : n;
+function filterBleed(filter) {
+  let bleed = 0;
+  for (const m of filter.matchAll(/blur\(\s*(-?\d*\.?\d+)(?:px)?\s*\)/g)) {
+    bleed += Math.abs(parseFloat(m[1])) * 3;
+  }
+  for (const m of filter.matchAll(/drop-shadow\(((?:[^()]|\([^()]*\))*)\)/g)) {
+    const args = m[1].replace(/[\w-]+\([^()]*\)/g, " ");
+    const nums = args.match(/-?\d*\.?\d+(?=px|\s|$)/g) ?? [];
+    const [ox = "0", oy = "0", blur = "0"] = nums;
+    bleed += Math.abs(parseFloat(ox)) + Math.abs(parseFloat(oy)) + Math.abs(parseFloat(blur)) * 3;
+  }
+  return bleed;
+}
+function scaleFilterLengths(filter, scale) {
+  return filter.replace(
+    /(?<![\w.])(-?\d*\.?\d+)px/g,
+    (_, n) => `${formatCSSNumber(parseFloat(n) * scale)}px`
+  );
 }
 
+// src/jsx/draw/clip-path.ts
+import { Path2D } from "@napi-rs/canvas";
+
 // src/jsx/draw/rect.ts
 function drawRect(ctx, x, y, width, height, style) {
   const borderRadius = getBorderRadiusFromStyle(style, width, height);
@@ -1325,174 +1319,1063 @@ function drawBorders(ctx, x, y, width, height, style, borderRadius) {
       );
       ctx.stroke();
     } else {
-      ctx.strokeRect(x + tw / 2, y + tw / 2, width - tw, height - tw);
+      ctx.strokeRect(x + tw / 2, y + tw / 2, width - tw, height - tw);
+    }
+    return;
+  }
+  if (hasRoundedCorners) {
+    const maxR = Math.min(width, height) / 2;
+    const tl = Math.min(borderRadius.topLeft, maxR);
+    const tr = Math.min(borderRadius.topRight, maxR);
+    const br = Math.min(borderRadius.bottomRight, maxR);
+    const bl = Math.min(borderRadius.bottomLeft, maxR);
+    const top = y + tw / 2;
+    const right = x + width - rw / 2;
+    const bottom = y + height - bw / 2;
+    const left = x + lw / 2;
+    const eTL = Math.max(0, tl - Math.max(tw, lw) / 2);
+    const eTR = Math.max(0, tr - Math.max(tw, rw) / 2);
+    const eBR = Math.max(0, br - Math.max(bw, rw) / 2);
+    const eBL = Math.max(0, bl - Math.max(bw, lw) / 2);
+    if (tw > 0) {
+      ctx.strokeStyle = tc;
+      ctx.lineWidth = tw;
+      ctx.beginPath();
+      if (eTL > 0 && lw === 0) {
+        ctx.moveTo(left, top + eTL);
+        ctx.arcTo(left, top, left + eTL, top, eTL);
+      } else if (eTL > 0) {
+        ctx.moveTo(left + eTL, top);
+      } else {
+        ctx.moveTo(x, top);
+      }
+      if (eTR > 0) {
+        ctx.lineTo(right - eTR, top);
+        ctx.arcTo(right, top, right, top + eTR, eTR);
+      } else {
+        ctx.lineTo(x + width, top);
+      }
+      ctx.stroke();
+    }
+    if (rw > 0) {
+      ctx.strokeStyle = rc;
+      ctx.lineWidth = rw;
+      ctx.beginPath();
+      if (eTR > 0 && tw === 0) {
+        ctx.moveTo(right - eTR, top);
+        ctx.arcTo(right, top, right, top + eTR, eTR);
+      } else if (eTR > 0) {
+        ctx.moveTo(right, top + eTR);
+      } else {
+        ctx.moveTo(right, y);
+      }
+      if (eBR > 0) {
+        ctx.lineTo(right, bottom - eBR);
+        ctx.arcTo(right, bottom, right - eBR, bottom, eBR);
+      } else {
+        ctx.lineTo(right, y + height);
+      }
+      ctx.stroke();
+    }
+    if (bw > 0) {
+      ctx.strokeStyle = bc;
+      ctx.lineWidth = bw;
+      ctx.beginPath();
+      if (eBR > 0 && rw === 0) {
+        ctx.moveTo(right, bottom - eBR);
+        ctx.arcTo(right, bottom, right - eBR, bottom, eBR);
+      } else if (eBR > 0) {
+        ctx.moveTo(right - eBR, bottom);
+      } else {
+        ctx.moveTo(x + width, bottom);
+      }
+      if (eBL > 0) {
+        ctx.lineTo(left + eBL, bottom);
+        ctx.arcTo(left, bottom, left, bottom - eBL, eBL);
+      } else {
+        ctx.lineTo(x, bottom);
+      }
+      ctx.stroke();
+    }
+    if (lw > 0) {
+      ctx.strokeStyle = lc;
+      ctx.lineWidth = lw;
+      ctx.beginPath();
+      if (eBL > 0 && bw === 0) {
+        ctx.moveTo(left + eBL, bottom);
+        ctx.arcTo(left, bottom, left, bottom - eBL, eBL);
+      } else if (eBL > 0) {
+        ctx.moveTo(left, bottom - eBL);
+      } else {
+        ctx.moveTo(left, y + height);
+      }
+      if (eTL > 0) {
+        ctx.lineTo(left, top + eTL);
+        ctx.arcTo(left, top, left + eTL, top, eTL);
+      } else {
+        ctx.lineTo(left, y);
+      }
+      ctx.stroke();
+    }
+  } else {
+    if (tw > 0) {
+      ctx.strokeStyle = tc;
+      ctx.lineWidth = tw;
+      ctx.beginPath();
+      ctx.moveTo(x, y + tw / 2);
+      ctx.lineTo(x + width, y + tw / 2);
+      ctx.stroke();
+    }
+    if (rw > 0) {
+      ctx.strokeStyle = rc;
+      ctx.lineWidth = rw;
+      ctx.beginPath();
+      ctx.moveTo(x + width - rw / 2, y);
+      ctx.lineTo(x + width - rw / 2, y + height);
+      ctx.stroke();
+    }
+    if (bw > 0) {
+      ctx.strokeStyle = bc;
+      ctx.lineWidth = bw;
+      ctx.beginPath();
+      ctx.moveTo(x, y + height - bw / 2);
+      ctx.lineTo(x + width, y + height - bw / 2);
+      ctx.stroke();
+    }
+    if (lw > 0) {
+      ctx.strokeStyle = lc;
+      ctx.lineWidth = lw;
+      ctx.beginPath();
+      ctx.moveTo(x + lw / 2, y);
+      ctx.lineTo(x + lw / 2, y + height);
+      ctx.stroke();
+    }
+  }
+}
+var BOX_SHADOW_RE = /(-?\d+(?:\.\d+)?)\s*(?:px)?\s+(-?\d+(?:\.\d+)?)\s*(?:px)?\s+(-?\d+(?:\.\d+)?)\s*(?:px)?(?:\s+(-?\d+(?:\.\d+)?)\s*(?:px)?)?\s+(.*)/;
+function boxShadowExtent(boxShadow) {
+  const parts = boxShadow.match(BOX_SHADOW_RE);
+  if (!parts) return 0;
+  const offsetX = parseFloat(parts[1]);
+  const offsetY = parseFloat(parts[2]);
+  const blur = parseFloat(parts[3]);
+  return blur * 2 + Math.abs(offsetX) + Math.abs(offsetY);
+}
+function drawBoxShadow(ctx, x, y, width, height, boxShadow, borderRadius) {
+  const parts = boxShadow.match(BOX_SHADOW_RE);
+  if (!parts) return;
+  const offsetX = parseFloat(parts[1]);
+  const offsetY = parseFloat(parts[2]);
+  const blur = parseFloat(parts[3]);
+  const color = parts[5].trim();
+  const radii = [
+    borderRadius.topLeft,
+    borderRadius.topRight,
+    borderRadius.bottomRight,
+    borderRadius.bottomLeft
+  ];
+  const margin = blur * 2 + Math.abs(offsetX) + Math.abs(offsetY);
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(x - margin, y - margin, width + margin * 2, height + margin * 2);
+  ctx.roundRect(x, y, width, height, radii);
+  ctx.clip("evenodd");
+  ctx.filter = `blur(${blur / 2}px)`;
+  ctx.translate(offsetX, offsetY);
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.roundRect(x, y, width, height, radii);
+  ctx.fill();
+  ctx.restore();
+}
+
+// src/jsx/draw/clip-path.ts
+var GEOMETRY_BOXES = /* @__PURE__ */ new Set([
+  "border-box",
+  "padding-box",
+  "content-box",
+  "margin-box",
+  "fill-box",
+  "stroke-box",
+  "view-box"
+]);
+var H_KEYWORDS = /* @__PURE__ */ new Map([
+  ["left", 0],
+  ["x-start", 0],
+  ["center", 0.5],
+  ["right", 1],
+  ["x-end", 1]
+]);
+var V_KEYWORDS = /* @__PURE__ */ new Map([
+  ["top", 0],
+  ["y-start", 0],
+  ["center", 0.5],
+  ["bottom", 1],
+  ["y-end", 1]
+]);
+var ARC_OPTIONS = /* @__PURE__ */ new Set(["of", "cw", "ccw", "large", "small", "rotate"]);
+function applyClipPath(ctx, clipPath, style, x, y, width, height) {
+  const shape = parseClipPath(clipPath, style, { x, y, width, height });
+  if (!shape || shape.kind === "none") return;
+  const path = clipShapeToPath(shape);
+  if (path) ctx.clip(path, shapeFillRule(shape));
+}
+function shapeFillRule(shape) {
+  return shape.kind === "polygon" || shape.kind === "path" ? shape.fillRule : "nonzero";
+}
+function parseClipPath(value, style, box) {
+  const trimmed = value.trim();
+  if (trimmed === "none") return { kind: "none" };
+  let fn = null;
+  let geometryBox = "border-box";
+  const fnMatch = trimmed.match(/^(.*?)([a-z]+)\((.*)\)(.*)$/s);
+  let keywords;
+  if (fnMatch) {
+    fn = { name: fnMatch[2], args: fnMatch[3] };
+    keywords = [fnMatch[1], fnMatch[4]].join(" ").split(/\s+/).filter(Boolean);
+  } else {
+    keywords = trimmed.split(/\s+/).filter(Boolean);
+  }
+  for (const kw of keywords) {
+    if (!GEOMETRY_BOXES.has(kw)) return null;
+    geometryBox = kw;
+  }
+  if (!fn && keywords.length === 0) return null;
+  const ref = resolveReferenceBox(geometryBox, style, box);
+  const { width: w, height: h } = ref;
+  if (!fn) {
+    return {
+      kind: "rect",
+      x: ref.x,
+      y: ref.y,
+      width: w,
+      height: h,
+      radii: referenceBoxRadii(geometryBox, style, box, ref)
+    };
+  }
+  switch (fn.name) {
+    case "inset":
+      return parseInset(fn.args, ref);
+    case "rect":
+      return parseRect(fn.args, ref);
+    case "xywh":
+      return parseXywh(fn.args, ref);
+    case "circle":
+      return parseCircle(fn.args, ref);
+    case "ellipse":
+      return parseEllipse(fn.args, ref);
+    case "polygon":
+      return parsePolygon(fn.args, ref);
+    case "path":
+      return parsePath(fn.args, ref);
+    case "shape":
+      return parseShape(fn.args, ref);
+    default:
+      return null;
+  }
+}
+function clipShapeToPath(shape) {
+  const p = new Path2D();
+  switch (shape.kind) {
+    case "none":
+      break;
+    case "rect":
+      if (shape.radii && shape.width > 0 && shape.height > 0) {
+        roundedRectPath(
+          p,
+          shape.x,
+          shape.y,
+          shape.width,
+          shape.height,
+          shape.radii
+        );
+      } else {
+        p.rect(
+          shape.x,
+          shape.y,
+          Math.max(0, shape.width),
+          Math.max(0, shape.height)
+        );
+      }
+      break;
+    case "circle":
+      if (shape.r > 0) p.arc(shape.cx, shape.cy, shape.r, 0, Math.PI * 2);
+      break;
+    case "ellipse":
+      if (shape.rx > 0 && shape.ry > 0) {
+        p.ellipse(shape.cx, shape.cy, shape.rx, shape.ry, 0, 0, Math.PI * 2);
+      }
+      break;
+    case "polygon":
+      if (shape.points.length >= 3) {
+        const [first, ...rest] = shape.points;
+        p.moveTo(first[0], first[1]);
+        for (const [px, py] of rest) p.lineTo(px, py);
+        p.closePath();
+      }
+      break;
+    case "path": {
+      let inner;
+      try {
+        inner = new Path2D(shape.d);
+      } catch {
+        return null;
+      }
+      if (shape.dx === 0 && shape.dy === 0) return inner;
+      p.addPath(inner, { a: 1, b: 0, c: 0, d: 1, e: shape.dx, f: shape.dy });
+      break;
+    }
+  }
+  return p;
+}
+function resolveReferenceBox(geometryBox, style, box) {
+  const { x, y, width, height } = box;
+  switch (geometryBox) {
+    case "padding-box": {
+      const t = resolveBoxValue(style.borderTopWidth, width);
+      const r = resolveBoxValue(style.borderRightWidth, width);
+      const b = resolveBoxValue(style.borderBottomWidth, width);
+      const l = resolveBoxValue(style.borderLeftWidth, width);
+      return {
+        x: x + l,
+        y: y + t,
+        width: width - l - r,
+        height: height - t - b
+      };
+    }
+    case "content-box": {
+      const t = resolveBoxValue(style.borderTopWidth, width) + resolveBoxValue(style.paddingTop, width);
+      const r = resolveBoxValue(style.borderRightWidth, width) + resolveBoxValue(style.paddingRight, width);
+      const b = resolveBoxValue(style.borderBottomWidth, width) + resolveBoxValue(style.paddingBottom, width);
+      const l = resolveBoxValue(style.borderLeftWidth, width) + resolveBoxValue(style.paddingLeft, width);
+      return {
+        x: x + l,
+        y: y + t,
+        width: width - l - r,
+        height: height - t - b
+      };
+    }
+    case "margin-box": {
+      const t = marginValue(style.marginTop, width);
+      const r = marginValue(style.marginRight, width);
+      const b = marginValue(style.marginBottom, width);
+      const l = marginValue(style.marginLeft, width);
+      return {
+        x: x - l,
+        y: y - t,
+        width: width + l + r,
+        height: height + t + b
+      };
+    }
+    default:
+      return box;
+  }
+}
+function marginValue(v, referenceWidth) {
+  if (v === "auto") return 0;
+  return resolveBoxValue(v, referenceWidth);
+}
+function referenceBoxRadii(geometryBox, style, box, ref) {
+  const br = getBorderRadiusFromStyle(style, box.width, box.height);
+  const maxR = maxCornerRadius(box.width, box.height);
+  const base = [br.topLeft, br.topRight, br.bottomRight, br.bottomLeft].map(
+    (r) => Math.min(Math.max(0, r), maxR)
+  );
+  if (base.every((r) => r <= 0)) return null;
+  const left = ref.x - box.x;
+  const top = ref.y - box.y;
+  const right = box.x + box.width - (ref.x + ref.width);
+  const bottom = box.y + box.height - (ref.y + ref.height);
+  const insets = [
+    [left, top],
+    [right, top],
+    [right, bottom],
+    [left, bottom]
+  ];
+  const radii = base.map((r, i) => {
+    const [ix, iy] = insets[i];
+    return [adjustRadius(r, ix), adjustRadius(r, iy)];
+  });
+  if (radii.every(([rx, ry]) => rx <= 0 || ry <= 0)) return null;
+  return normalizeRadii(radii, ref.width, ref.height);
+}
+function adjustRadius(r, inset) {
+  if (inset >= 0) return Math.max(0, r - inset);
+  if (r <= 0) return 0;
+  const m = -inset;
+  if (r >= m) return r + m;
+  const ratio = r / m - 1;
+  return r + m * (1 + ratio * ratio * ratio);
+}
+function parseInset(args, ref) {
+  const [insetPart, roundPart] = splitRound(args);
+  const values = tokenize(insetPart);
+  if (values.length < 1 || values.length > 4) return null;
+  const [t, r, b, l] = expandSides(values);
+  const top = parseCSSLength(t, ref.height);
+  const right = parseCSSLength(r, ref.width);
+  const bottom = parseCSSLength(b, ref.height);
+  const left = parseCSSLength(l, ref.width);
+  if ([top, right, bottom, left].some(isNaN)) return null;
+  return makeRect(
+    ref.x + left,
+    ref.y + top,
+    ref.width - left - right,
+    ref.height - top - bottom,
+    roundPart,
+    ref
+  );
+}
+function parseRect(args, ref) {
+  const [rectPart, roundPart] = splitRound(args);
+  const values = tokenize(rectPart);
+  if (values.length !== 4) return null;
+  const [t, r, b, l] = values;
+  const top = t === "auto" ? 0 : parseCSSLength(t, ref.height);
+  const right = r === "auto" ? ref.width : parseCSSLength(r, ref.width);
+  const bottom = b === "auto" ? ref.height : parseCSSLength(b, ref.height);
+  const left = l === "auto" ? 0 : parseCSSLength(l, ref.width);
+  if ([top, right, bottom, left].some(isNaN)) return null;
+  const x2 = Math.max(left, right);
+  const y2 = Math.max(top, bottom);
+  return makeRect(
+    ref.x + left,
+    ref.y + top,
+    x2 - left,
+    y2 - top,
+    roundPart,
+    ref
+  );
+}
+function parseXywh(args, ref) {
+  const [xywhPart, roundPart] = splitRound(args);
+  const values = tokenize(xywhPart);
+  if (values.length !== 4) return null;
+  const [xs, ys, ws, hs] = values;
+  const x = parseCSSLength(xs, ref.width);
+  const y = parseCSSLength(ys, ref.height);
+  const w = parseCSSLength(ws, ref.width);
+  const h = parseCSSLength(hs, ref.height);
+  if ([x, y, w, h].some(isNaN)) return null;
+  return makeRect(
+    ref.x + x,
+    ref.y + y,
+    Math.max(0, w),
+    Math.max(0, h),
+    roundPart,
+    ref
+  );
+}
+function makeRect(x, y, width, height, roundPart, ref) {
+  const w = Math.max(0, width);
+  const h = Math.max(0, height);
+  let radii = null;
+  if (roundPart !== void 0) {
+    const parsed = parseRadii(roundPart, ref.width, ref.height, w, h);
+    if (parsed === void 0) return null;
+    radii = parsed;
+  }
+  return { kind: "rect", x, y, width: w, height: h, radii };
+}
+function parseCircle(args, ref) {
+  const [radiusPart, posPart] = splitAt(args);
+  const radiusTokens = tokenize(radiusPart);
+  if (radiusTokens.length > 1) return null;
+  const pos = resolvePosition(tokenize(posPart ?? ""), ref.width, ref.height);
+  if (!pos) return null;
+  const [cx, cy] = pos;
+  const closest = Math.min(cx, cy, ref.width - cx, ref.height - cy);
+  const farthest = Math.max(cx, cy, ref.width - cx, ref.height - cy);
+  const percentBase = Math.hypot(ref.width, ref.height) / Math.SQRT2;
+  const r = resolveRadius2(radiusTokens[0], closest, farthest, percentBase);
+  if (r === void 0) return null;
+  return { kind: "circle", cx: ref.x + cx, cy: ref.y + cy, r: Math.max(0, r) };
+}
+function parseEllipse(args, ref) {
+  const [radiusPart, posPart] = splitAt(args);
+  const radiusTokens = tokenize(radiusPart);
+  if (radiusTokens.length !== 0 && radiusTokens.length !== 2) return null;
+  const pos = resolvePosition(tokenize(posPart ?? ""), ref.width, ref.height);
+  if (!pos) return null;
+  const [cx, cy] = pos;
+  const rx = resolveRadius2(
+    radiusTokens[0],
+    Math.min(cx, ref.width - cx),
+    Math.max(cx, ref.width - cx),
+    ref.width
+  );
+  const ry = resolveRadius2(
+    radiusTokens[1],
+    Math.min(cy, ref.height - cy),
+    Math.max(cy, ref.height - cy),
+    ref.height
+  );
+  if (rx === void 0 || ry === void 0) return null;
+  return {
+    kind: "ellipse",
+    cx: ref.x + cx,
+    cy: ref.y + cy,
+    rx: Math.max(0, rx),
+    ry: Math.max(0, ry)
+  };
+}
+function parsePolygon(args, ref) {
+  const parts = splitArgs(args);
+  let fillRule = "nonzero";
+  const first = parts[0]?.trim();
+  if (first === "nonzero" || first === "evenodd") {
+    fillRule = first;
+    parts.shift();
+  }
+  const points = [];
+  for (const part of parts) {
+    const pair = tokenize(part);
+    if (pair.length !== 2) return null;
+    const px = parseCSSLength(pair[0], ref.width);
+    const py = parseCSSLength(pair[1], ref.height);
+    if (isNaN(px) || isNaN(py)) return null;
+    points.push([ref.x + px, ref.y + py]);
+  }
+  if (points.length === 0) return null;
+  return { kind: "polygon", points, fillRule };
+}
+function parsePath(args, ref) {
+  const parts = splitArgs(args);
+  let fillRule = "nonzero";
+  const first = parts[0]?.trim();
+  if (first === "nonzero" || first === "evenodd") {
+    fillRule = first;
+    parts.shift();
+  }
+  if (parts.length !== 1) return null;
+  const d = unquote(parts[0].trim());
+  if (!d) return null;
+  return { kind: "path", d, dx: ref.x, dy: ref.y, fillRule };
+}
+function parseShape(args, ref) {
+  const { width: w, height: h } = ref;
+  const parts = splitArgs(args);
+  const first = parts.shift()?.trim();
+  if (!first) return null;
+  const startMatch = first.match(/^(?:(nonzero|evenodd)\s+)?from\s+(.+)$/s);
+  if (!startMatch) return null;
+  const fillRule = startMatch[1] ?? "nonzero";
+  let current = resolvePoint(tokenize(startMatch[2]), w, h);
+  if (!current) return null;
+  let subpathStart = current;
+  let d = `M${fmtPoint(current)}`;
+  for (const part of parts) {
+    const tokens = tokenize(part);
+    const command = tokens.shift();
+    switch (command) {
+      case "close": {
+        if (tokens.length) return null;
+        d += " Z";
+        current = subpathStart;
+        break;
+      }
+      case "move":
+      case "line": {
+        const end = resolveEndpoint(tokens, current, w, h);
+        if (!end) return null;
+        d += ` ${command === "move" ? "M" : "L"}${fmtPoint(end)}`;
+        current = end;
+        if (command === "move") subpathStart = end;
+        break;
+      }
+      case "hline":
+      case "vline": {
+        const [mode, token, ...rest] = tokens;
+        if (mode !== "to" && mode !== "by" || !token || rest.length) {
+          return null;
+        }
+        const axis = command === "hline" ? 0 : 1;
+        const base = axis === 0 ? w : h;
+        const keywords = axis === 0 ? H_KEYWORDS : V_KEYWORDS;
+        const kw = keywords.get(token);
+        const resolved = mode === "to" && kw !== void 0 ? kw * base : parseCSSLength(token, base);
+        if (isNaN(resolved)) return null;
+        const next = [current[0], current[1]];
+        next[axis] = mode === "by" ? current[axis] + resolved : resolved;
+        d += axis === 0 ? ` H${fmt(next[0])}` : ` V${fmt(next[1])}`;
+        current = next;
+        break;
+      }
+      case "curve":
+      case "smooth": {
+        const withIndex = tokens.indexOf("with");
+        const endTokens = withIndex === -1 ? tokens : tokens.slice(0, withIndex);
+        const controlTokens = withIndex === -1 ? [] : tokens.slice(withIndex + 1);
+        const mode = endTokens[0];
+        const end = resolveEndpoint(endTokens, current, w, h);
+        if (!end) return null;
+        if (command === "curve" && withIndex === -1) return null;
+        const controls = [];
+        for (const control of splitAtSlash(controlTokens)) {
+          const point = resolveControlPoint(control, mode, current, end, w, h);
+          if (!point) return null;
+          controls.push(point);
+        }
+        if (command === "curve") {
+          if (controls.length === 1) {
+            d += ` Q${fmtPoint(controls[0])} ${fmtPoint(end)}`;
+          } else if (controls.length === 2) {
+            d += ` C${fmtPoint(controls[0])} ${fmtPoint(controls[1])} ${fmtPoint(end)}`;
+          } else {
+            return null;
+          }
+        } else if (controls.length === 0) {
+          d += ` T${fmtPoint(end)}`;
+        } else if (controls.length === 1) {
+          d += ` S${fmtPoint(controls[0])} ${fmtPoint(end)}`;
+        } else {
+          return null;
+        }
+        current = end;
+        break;
+      }
+      case "arc": {
+        const optionIndex = tokens.findIndex((t) => ARC_OPTIONS.has(t));
+        const endTokens = optionIndex === -1 ? tokens : tokens.slice(0, optionIndex);
+        const options = optionIndex === -1 ? [] : tokens.slice(optionIndex);
+        const end = resolveEndpoint(endTokens, current, w, h);
+        if (!end) return null;
+        let rx = 0;
+        let ry = 0;
+        let rotation = 0;
+        let large = 0;
+        let sweep = 0;
+        for (let i = 0; i < options.length; i++) {
+          const option = options[i];
+          if (option === "of") {
+            const r1 = options[++i];
+            if (!r1) return null;
+            const r2 = options[i + 1];
+            const hasSecond = r2 !== void 0 && !ARC_OPTIONS.has(r2);
+            if (hasSecond) {
+              i++;
+              rx = parseCSSLength(r1, w);
+              ry = parseCSSLength(r2, h);
+            } else {
+              rx = ry = parseCSSLength(r1, Math.hypot(w, h) / Math.SQRT2);
+            }
+            if (isNaN(rx) || isNaN(ry)) return null;
+          } else if (option === "cw" || option === "ccw") {
+            sweep = option === "cw" ? 1 : 0;
+          } else if (option === "large" || option === "small") {
+            large = option === "large" ? 1 : 0;
+          } else if (option === "rotate") {
+            const angle = options[++i];
+            if (!angle) return null;
+            rotation = parseAngleDegrees(angle);
+            if (isNaN(rotation)) return null;
+          } else {
+            return null;
+          }
+        }
+        d += ` A${fmt(Math.abs(rx))} ${fmt(Math.abs(ry))} ${fmt(rotation)} ${large} ${sweep} ${fmtPoint(end)}`;
+        current = end;
+        break;
+      }
+      default:
+        return null;
+    }
+  }
+  return { kind: "path", d, dx: ref.x, dy: ref.y, fillRule };
+}
+function resolveEndpoint(tokens, current, w, h) {
+  const mode = tokens[0];
+  if (mode !== "to" && mode !== "by") return null;
+  const point = resolvePoint(tokens.slice(1), w, h);
+  if (!point) return null;
+  return mode === "by" ? [current[0] + point[0], current[1] + point[1]] : point;
+}
+function resolveControlPoint(tokens, mode, start, end, w, h) {
+  let origin = mode === "by" ? "start" : "origin";
+  let coords = tokens;
+  const fromIndex = tokens.indexOf("from");
+  if (fromIndex !== -1) {
+    const ref = tokens[fromIndex + 1];
+    if (ref !== "start" && ref !== "end" && ref !== "origin" || tokens.length !== fromIndex + 2) {
+      return null;
+    }
+    origin = ref;
+    coords = tokens.slice(0, fromIndex);
+  }
+  const point = resolvePoint(coords, w, h);
+  if (!point) return null;
+  const base = origin === "start" ? start : origin === "end" ? end : [0, 0];
+  return [base[0] + point[0], base[1] + point[1]];
+}
+function resolvePoint(tokens, w, h) {
+  if (tokens.length !== 2) return null;
+  const x = resolveAxis(tokens[0], w, H_KEYWORDS);
+  const y = resolveAxis(tokens[1], h, V_KEYWORDS);
+  if (isNaN(x) || isNaN(y)) return null;
+  return [x, y];
+}
+function resolvePosition(tokens, w, h) {
+  if (tokens.length === 0) return [w / 2, h / 2];
+  if (tokens.length === 1) {
+    const t = tokens[0];
+    if (V_KEYWORDS.has(t) && !H_KEYWORDS.has(t)) {
+      return [w / 2, V_KEYWORDS.get(t) * h];
+    }
+    const x2 = resolveAxis(t, w, H_KEYWORDS);
+    return isNaN(x2) ? null : [x2, h / 2];
+  }
+  if (tokens.length === 2) {
+    let [a, b] = tokens;
+    const bothKeywords = (H_KEYWORDS.has(a) || V_KEYWORDS.has(a)) && (H_KEYWORDS.has(b) || V_KEYWORDS.has(b));
+    if (bothKeywords && (V_KEYWORDS.has(a) && !H_KEYWORDS.has(a) || H_KEYWORDS.has(b) && !V_KEYWORDS.has(b))) {
+      [a, b] = [b, a];
+    }
+    const x2 = resolveAxis(a, w, H_KEYWORDS);
+    const y2 = resolveAxis(b, h, V_KEYWORDS);
+    return isNaN(x2) || isNaN(y2) ? null : [x2, y2];
+  }
+  let x = w / 2;
+  let y = h / 2;
+  for (let i = 0; i < tokens.length; i++) {
+    const t = tokens[i];
+    const next = tokens[i + 1];
+    const hasOffset = next !== void 0 && !H_KEYWORDS.has(next) && !V_KEYWORDS.has(next);
+    if (t === "left" || t === "right") {
+      const off = hasOffset ? parseCSSLength(next, w) : 0;
+      if (isNaN(off)) return null;
+      x = t === "left" ? off : w - off;
+    } else if (t === "top" || t === "bottom") {
+      const off = hasOffset ? parseCSSLength(next, h) : 0;
+      if (isNaN(off)) return null;
+      y = t === "top" ? off : h - off;
+    } else if (t !== "center") {
+      return null;
+    }
+    if (hasOffset) i++;
+  }
+  return [x, y];
+}
+function resolveAxis(token, size, keywords) {
+  const kw = keywords.get(token);
+  if (kw !== void 0) return kw * size;
+  return parseCSSLength(token, size);
+}
+function resolveRadius2(token, closestSide, farthestSide, percentBase) {
+  if (token === void 0 || token === "closest-side") return closestSide;
+  if (token === "farthest-side") return farthestSide;
+  const r = parseCSSLength(token, percentBase);
+  return isNaN(r) ? void 0 : r;
+}
+function parseRadii(value, refW, refH, w, h) {
+  const [hPart, vPart] = value.split("/");
+  const hTokens = tokenize(hPart ?? "");
+  const vTokens = vPart === void 0 ? hTokens : tokenize(vPart);
+  if (hTokens.length < 1 || hTokens.length > 4 || vTokens.length < 1 || vTokens.length > 4) {
+    return void 0;
+  }
+  const hs = expandSides(hTokens).map((t) => parseCSSLength(t, refW));
+  const vs = expandSides(vTokens).map((t) => parseCSSLength(t, refH));
+  if ([...hs, ...vs].some(isNaN)) return void 0;
+  const radii = hs.map((rx, i) => [
+    Math.max(0, rx),
+    Math.max(0, vs[i])
+  ]);
+  if (radii.every(([rx, ry]) => rx <= 0 || ry <= 0)) return null;
+  return normalizeRadii(radii, w, h);
+}
+function normalizeRadii(radii, w, h) {
+  const [tl, tr, br, bl] = radii;
+  let f = 1;
+  const consider = (sum, length) => {
+    if (sum > 0 && length / sum < f) f = length / sum;
+  };
+  consider(tl[0] + tr[0], w);
+  consider(bl[0] + br[0], w);
+  consider(tl[1] + bl[1], h);
+  consider(tr[1] + br[1], h);
+  if (f >= 1) return radii;
+  return radii.map(([rx, ry]) => [rx * f, ry * f]);
+}
+function roundedRectPath(p, x, y, w, h, radii) {
+  const [tl, tr, br, bl] = radii;
+  const round = (r) => r[0] > 0 && r[1] > 0;
+  const HALF = Math.PI / 2;
+  p.moveTo(x + (round(tl) ? tl[0] : 0), y);
+  p.lineTo(x + w - (round(tr) ? tr[0] : 0), y);
+  if (round(tr)) {
+    p.ellipse(x + w - tr[0], y + tr[1], tr[0], tr[1], 0, -HALF, 0);
+  }
+  p.lineTo(x + w, y + h - (round(br) ? br[1] : 0));
+  if (round(br)) {
+    p.ellipse(x + w - br[0], y + h - br[1], br[0], br[1], 0, 0, HALF);
+  }
+  p.lineTo(x + (round(bl) ? bl[0] : 0), y + h);
+  if (round(bl)) {
+    p.ellipse(x + bl[0], y + h - bl[1], bl[0], bl[1], 0, HALF, Math.PI);
+  }
+  p.lineTo(x, y + (round(tl) ? tl[1] : 0));
+  if (round(tl)) {
+    p.ellipse(x + tl[0], y + tl[1], tl[0], tl[1], 0, Math.PI, 3 * HALF);
+  }
+  p.closePath();
+}
+function expandSides(values) {
+  const [a, b, c, d] = values;
+  switch (values.length) {
+    case 1:
+      return [a, a, a, a];
+    case 2:
+      return [a, b, a, b];
+    case 3:
+      return [a, b, c, b];
+    default:
+      return [a, b, c, d];
+  }
+}
+function splitRound(args) {
+  const m = args.match(/^(.*?)\bround\b(.*)$/s);
+  if (!m) return [args, void 0];
+  return [m[1], m[2]];
+}
+function splitAt(args) {
+  const m = args.match(/^(.*?)\bat\b(.*)$/s);
+  if (!m) return [args, void 0];
+  return [m[1], m[2]];
+}
+function splitArgs(content) {
+  const parts = [];
+  let current = "";
+  let depth = 0;
+  let quote = null;
+  for (const char of content) {
+    if (quote) {
+      if (char === quote) quote = null;
+      current += char;
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      quote = char;
+      current += char;
+      continue;
+    }
+    if (char === "(") depth++;
+    if (char === ")") depth--;
+    if (char === "," && depth === 0) {
+      parts.push(current);
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  if (current.trim()) parts.push(current);
+  return parts;
+}
+function splitAtSlash(tokens) {
+  if (tokens.length === 0) return [];
+  const slash = tokens.indexOf("/");
+  return slash === -1 ? [tokens] : [tokens.slice(0, slash), tokens.slice(slash + 1)];
+}
+function tokenize(value) {
+  return value.trim().replace(/\//g, " / ").split(/\s+/).filter(Boolean);
+}
+function unquote(s) {
+  if (s.length >= 2 && (s.startsWith('"') && s.endsWith('"') || s.startsWith("'") && s.endsWith("'"))) {
+    return s.slice(1, -1);
+  }
+  return s;
+}
+function parseAngleDegrees(value) {
+  const n = parseFloat(value);
+  if (isNaN(n)) return NaN;
+  if (value.endsWith("deg")) return n;
+  if (value.endsWith("grad")) return n * 0.9;
+  if (value.endsWith("rad")) return n * 180 / Math.PI;
+  if (value.endsWith("turn")) return n * 360;
+  return n;
+}
+function fmt(n) {
+  return String(Math.round(n * 1e3) / 1e3);
+}
+function fmtPoint(p) {
+  return `${fmt(p[0])} ${fmt(p[1])}`;
+}
+
+// src/jsx/draw/gradient.ts
+function createGradientFromCSS(ctx, cssGradient, x, y, width, height) {
+  const trimmed = cssGradient.trim();
+  if (trimmed.startsWith("linear-gradient")) {
+    return parseLinearGradient(ctx, trimmed, x, y, width, height);
+  }
+  if (trimmed.startsWith("radial-gradient")) {
+    return parseRadialGradient(ctx, trimmed, x, y, width, height);
+  }
+  return null;
+}
+function parseLinearGradient(ctx, css, x, y, width, height) {
+  const match = css.match(/linear-gradient\((.*)\)/s);
+  if (!match) return null;
+  const content = match[1].trim();
+  const parts = splitGradientArgs(content);
+  let angle = 180;
+  let colorStartIdx = 0;
+  const first = parts[0]?.trim();
+  if (first) {
+    if (first.startsWith("to ")) {
+      angle = directionToAngle(first);
+      colorStartIdx = 1;
+    } else if (first.endsWith("deg")) {
+      angle = parseFloat(first);
+      colorStartIdx = 1;
+    } else if (first.endsWith("turn")) {
+      angle = parseFloat(first) * 360;
+      colorStartIdx = 1;
+    }
+  }
+  const rad = (angle - 90) * Math.PI / 180;
+  const cx = x + width / 2;
+  const cy = y + height / 2;
+  const halfDiag = Math.abs(width * Math.cos(rad)) / 2 + Math.abs(height * Math.sin(rad)) / 2;
+  const x0 = cx - halfDiag * Math.cos(rad);
+  const y0 = cy - halfDiag * Math.sin(rad);
+  const x1 = cx + halfDiag * Math.cos(rad);
+  const y1 = cy + halfDiag * Math.sin(rad);
+  const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+  const stops = parts.slice(colorStartIdx);
+  addColorStops(gradient, stops);
+  return gradient;
+}
+function parseRadialGradient(ctx, css, x, y, width, height) {
+  const match = css.match(/radial-gradient\((.*)\)/s);
+  if (!match) return null;
+  const content = match[1].trim();
+  const parts = splitGradientArgs(content);
+  const cx = x + width / 2;
+  const cy = y + height / 2;
+  const radius = Math.max(width, height) / 2;
+  const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius);
+  let colorStartIdx = 0;
+  const first = parts[0]?.trim() ?? "";
+  if (first.startsWith("circle") || first.startsWith("ellipse") || first.startsWith("closest") || first.startsWith("farthest")) {
+    colorStartIdx = 1;
+  }
+  addColorStops(gradient, parts.slice(colorStartIdx));
+  return gradient;
+}
+function addColorStops(gradient, stops) {
+  if (stops.length === 0) return;
+  for (let i = 0; i < stops.length; i++) {
+    const stop = stops[i].trim();
+    const percentMatch = stop.match(/^(.+?)\s+(\d+(?:\.\d+)?%?)$/);
+    if (percentMatch) {
+      const color = percentMatch[1];
+      const pos = percentMatch[2];
+      const offset = pos.endsWith("%") ? parseFloat(pos) / 100 : parseFloat(pos);
+      gradient.addColorStop(Math.max(0, Math.min(1, offset)), color);
+    } else {
+      const offset = stops.length === 1 ? 0.5 : i / (stops.length - 1);
+      gradient.addColorStop(offset, stop);
+    }
+  }
+}
+function directionToAngle(dir) {
+  const map = {
+    "to top": 0,
+    "to right": 90,
+    "to bottom": 180,
+    "to left": 270,
+    "to top right": 45,
+    "to top left": 315,
+    "to bottom right": 135,
+    "to bottom left": 225
+  };
+  return map[dir] ?? 180;
+}
+function splitGradientArgs(content) {
+  const parts = [];
+  let current = "";
+  let parenDepth = 0;
+  for (const char of content) {
+    if (char === "(") parenDepth++;
+    if (char === ")") parenDepth--;
+    if (char === "," && parenDepth === 0) {
+      parts.push(current);
+      current = "";
+    } else {
+      current += char;
     }
-    return;
   }
-  if (hasRoundedCorners) {
-    const maxR = Math.min(width, height) / 2;
-    const tl = Math.min(borderRadius.topLeft, maxR);
-    const tr = Math.min(borderRadius.topRight, maxR);
-    const br = Math.min(borderRadius.bottomRight, maxR);
-    const bl = Math.min(borderRadius.bottomLeft, maxR);
-    const top = y + tw / 2;
-    const right = x + width - rw / 2;
-    const bottom = y + height - bw / 2;
-    const left = x + lw / 2;
-    const eTL = Math.max(0, tl - Math.max(tw, lw) / 2);
-    const eTR = Math.max(0, tr - Math.max(tw, rw) / 2);
-    const eBR = Math.max(0, br - Math.max(bw, rw) / 2);
-    const eBL = Math.max(0, bl - Math.max(bw, lw) / 2);
-    if (tw > 0) {
-      ctx.strokeStyle = tc;
-      ctx.lineWidth = tw;
-      ctx.beginPath();
-      if (eTL > 0 && lw === 0) {
-        ctx.moveTo(left, top + eTL);
-        ctx.arcTo(left, top, left + eTL, top, eTL);
-      } else if (eTL > 0) {
-        ctx.moveTo(left + eTL, top);
-      } else {
-        ctx.moveTo(x, top);
-      }
-      if (eTR > 0) {
-        ctx.lineTo(right - eTR, top);
-        ctx.arcTo(right, top, right, top + eTR, eTR);
-      } else {
-        ctx.lineTo(x + width, top);
-      }
-      ctx.stroke();
-    }
-    if (rw > 0) {
-      ctx.strokeStyle = rc;
-      ctx.lineWidth = rw;
-      ctx.beginPath();
-      if (eTR > 0 && tw === 0) {
-        ctx.moveTo(right - eTR, top);
-        ctx.arcTo(right, top, right, top + eTR, eTR);
-      } else if (eTR > 0) {
-        ctx.moveTo(right, top + eTR);
-      } else {
-        ctx.moveTo(right, y);
-      }
-      if (eBR > 0) {
-        ctx.lineTo(right, bottom - eBR);
-        ctx.arcTo(right, bottom, right - eBR, bottom, eBR);
-      } else {
-        ctx.lineTo(right, y + height);
-      }
-      ctx.stroke();
-    }
-    if (bw > 0) {
-      ctx.strokeStyle = bc;
-      ctx.lineWidth = bw;
-      ctx.beginPath();
-      if (eBR > 0 && rw === 0) {
-        ctx.moveTo(right, bottom - eBR);
-        ctx.arcTo(right, bottom, right - eBR, bottom, eBR);
-      } else if (eBR > 0) {
-        ctx.moveTo(right - eBR, bottom);
-      } else {
-        ctx.moveTo(x + width, bottom);
-      }
-      if (eBL > 0) {
-        ctx.lineTo(left + eBL, bottom);
-        ctx.arcTo(left, bottom, left, bottom - eBL, eBL);
-      } else {
-        ctx.lineTo(x, bottom);
-      }
-      ctx.stroke();
-    }
-    if (lw > 0) {
-      ctx.strokeStyle = lc;
-      ctx.lineWidth = lw;
-      ctx.beginPath();
-      if (eBL > 0 && bw === 0) {
-        ctx.moveTo(left + eBL, bottom);
-        ctx.arcTo(left, bottom, left, bottom - eBL, eBL);
-      } else if (eBL > 0) {
-        ctx.moveTo(left, bottom - eBL);
-      } else {
-        ctx.moveTo(left, y + height);
-      }
-      if (eTL > 0) {
-        ctx.lineTo(left, top + eTL);
-        ctx.arcTo(left, top, left + eTL, top, eTL);
-      } else {
-        ctx.lineTo(left, y);
-      }
-      ctx.stroke();
-    }
+  if (current.trim()) parts.push(current);
+  return parts;
+}
+
+// src/jsx/draw/object-fit.ts
+function computeCover(imgW, imgH, boxX, boxY, boxW, boxH) {
+  const imgRatio = imgW / imgH;
+  const boxRatio = boxW / boxH;
+  let sx, sy, sw, sh;
+  if (imgRatio > boxRatio) {
+    sh = imgH;
+    sw = imgH * boxRatio;
+    sx = (imgW - sw) / 2;
+    sy = 0;
   } else {
-    if (tw > 0) {
-      ctx.strokeStyle = tc;
-      ctx.lineWidth = tw;
-      ctx.beginPath();
-      ctx.moveTo(x, y + tw / 2);
-      ctx.lineTo(x + width, y + tw / 2);
-      ctx.stroke();
-    }
-    if (rw > 0) {
-      ctx.strokeStyle = rc;
-      ctx.lineWidth = rw;
-      ctx.beginPath();
-      ctx.moveTo(x + width - rw / 2, y);
-      ctx.lineTo(x + width - rw / 2, y + height);
-      ctx.stroke();
-    }
-    if (bw > 0) {
-      ctx.strokeStyle = bc;
-      ctx.lineWidth = bw;
-      ctx.beginPath();
-      ctx.moveTo(x, y + height - bw / 2);
-      ctx.lineTo(x + width, y + height - bw / 2);
-      ctx.stroke();
-    }
-    if (lw > 0) {
-      ctx.strokeStyle = lc;
-      ctx.lineWidth = lw;
-      ctx.beginPath();
-      ctx.moveTo(x + lw / 2, y);
-      ctx.lineTo(x + lw / 2, y + height);
-      ctx.stroke();
-    }
+    sw = imgW;
+    sh = imgW / boxRatio;
+    sx = 0;
+    sy = (imgH - sh) / 2;
   }
+  return { sx, sy, sw, sh, dx: boxX, dy: boxY, dw: boxW, dh: boxH };
 }
-var BOX_SHADOW_RE = /(-?\d+(?:\.\d+)?)\s*(?:px)?\s+(-?\d+(?:\.\d+)?)\s*(?:px)?\s+(-?\d+(?:\.\d+)?)\s*(?:px)?(?:\s+(-?\d+(?:\.\d+)?)\s*(?:px)?)?\s+(.*)/;
-function boxShadowExtent(boxShadow) {
-  const parts = boxShadow.match(BOX_SHADOW_RE);
-  if (!parts) return 0;
-  const offsetX = parseFloat(parts[1]);
-  const offsetY = parseFloat(parts[2]);
-  const blur = parseFloat(parts[3]);
-  return blur * 2 + Math.abs(offsetX) + Math.abs(offsetY);
+function computeContain(imgW, imgH, boxX, boxY, boxW, boxH) {
+  const imgRatio = imgW / imgH;
+  const boxRatio = boxW / boxH;
+  let dw, dh;
+  if (imgRatio > boxRatio) {
+    dw = boxW;
+    dh = boxW / imgRatio;
+  } else {
+    dh = boxH;
+    dw = boxH * imgRatio;
+  }
+  const dx = boxX + (boxW - dw) / 2;
+  const dy = boxY + (boxH - dh) / 2;
+  return { sx: 0, sy: 0, sw: imgW, sh: imgH, dx, dy, dw, dh };
 }
-function drawBoxShadow(ctx, x, y, width, height, boxShadow, borderRadius) {
-  const parts = boxShadow.match(BOX_SHADOW_RE);
-  if (!parts) return;
-  const offsetX = parseFloat(parts[1]);
-  const offsetY = parseFloat(parts[2]);
-  const blur = parseFloat(parts[3]);
-  const color = parts[5].trim();
-  const radii = [
-    borderRadius.topLeft,
-    borderRadius.topRight,
-    borderRadius.bottomRight,
-    borderRadius.bottomLeft
-  ];
-  const margin = blur * 2 + Math.abs(offsetX) + Math.abs(offsetY);
-  ctx.save();
-  ctx.beginPath();
-  ctx.rect(x - margin, y - margin, width + margin * 2, height + margin * 2);
-  ctx.roundRect(x, y, width, height, radii);
-  ctx.clip("evenodd");
-  ctx.filter = `blur(${blur / 2}px)`;
-  ctx.translate(offsetX, offsetY);
-  ctx.fillStyle = color;
-  ctx.beginPath();
-  ctx.roundRect(x, y, width, height, radii);
-  ctx.fill();
-  ctx.restore();
+
+// src/jsx/draw/image.ts
+async function drawImage(ctx, src, x, y, width, height, context, style) {
+  const image = await cachedLoadImage(
+    context.imageCache,
+    src,
+    context.userAgent
+  );
+  const objectFit = style?.objectFit ?? "fill";
+  if (objectFit === "fill") {
+    ctx.drawImage(image, x, y, width, height);
+    return;
+  }
+  const imgW = image.width;
+  const imgH = image.height;
+  if (objectFit === "contain") {
+    const r = computeContain(imgW, imgH, x, y, width, height);
+    ctx.drawImage(image, r.dx, r.dy, r.dw, r.dh);
+  } else if (objectFit === "cover") {
+    const r = computeCover(imgW, imgH, x, y, width, height);
+    ctx.drawImage(image, r.sx, r.sy, r.sw, r.sh, r.dx, r.dy, r.dw, r.dh);
+  } else if (objectFit === "none") {
+    const dx = x + (width - imgW) / 2;
+    const dy = y + (height - imgH) / 2;
+    ctx.drawImage(image, dx, dy);
+  } else if (objectFit === "scale-down") {
+    if (imgW <= width && imgH <= height) {
+      const dx = x + (width - imgW) / 2;
+      const dy = y + (height - imgH) / 2;
+      ctx.drawImage(image, dx, dy);
+    } else {
+      const r = computeContain(imgW, imgH, x, y, width, height);
+      ctx.drawImage(image, r.dx, r.dy, r.dw, r.dh);
+    }
+  }
 }
 
 // src/jsx/draw/svg/style.ts
@@ -1646,7 +2529,7 @@ function applySvgTransform(ctx, transform) {
 }
 
 // src/jsx/draw/svg/path.ts
-import { Path2D } from "@napi-rs/canvas";
+import { Path2D as Path2D2 } from "@napi-rs/canvas";
 function pathBBox(d) {
   let minX = Infinity;
   let minY = Infinity;
@@ -1807,14 +2690,14 @@ function buildPath(child, vbW, vbH) {
     case "path": {
       const d = props.d;
       if (!d) return void 0;
-      return new Path2D(d);
+      return new Path2D2(d);
     }
     case "circle": {
       const cx = svgLength(props.cx, vbW);
       const cy = svgLength(props.cy, vbH);
       const r = svgLength(props.r, Math.min(vbW, vbH));
       if (r <= 0) return void 0;
-      const p = new Path2D();
+      const p = new Path2D2();
       p.arc(cx, cy, r, 0, Math.PI * 2);
       return p;
     }
@@ -1830,7 +2713,7 @@ function buildPath(child, vbW, vbH) {
       let ry = ryRaw >= 0 ? ryRaw : rx;
       rx = Math.min(rx, w / 2);
       ry = Math.min(ry, h / 2);
-      const p = new Path2D();
+      const p = new Path2D2();
       if (rx > 0 || ry > 0) {
         p.roundRect(x, y, w, h, [rx]);
       } else {
@@ -1844,14 +2727,14 @@ function buildPath(child, vbW, vbH) {
       const rx = svgLength(props.rx, vbW);
       const ry = svgLength(props.ry, vbH);
       if (rx <= 0 || ry <= 0) return void 0;
-      const p = new Path2D();
+      const p = new Path2D2();
       p.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
       return p;
     }
     case "polygon": {
       const points = parsePoints(props.points);
       if (points.length < 2) return void 0;
-      const p = new Path2D();
+      const p = new Path2D2();
       p.moveTo(points[0][0], points[0][1]);
       for (let i = 1; i < points.length; i++) {
         p.lineTo(points[i][0], points[i][1]);
@@ -2035,10 +2918,10 @@ function applyFilter(filterDef, sourceGraphic, w, h) {
 }
 
 // src/jsx/draw/svg/shapes.ts
-import { Path2D as Path2D3 } from "@napi-rs/canvas";
+import { Path2D as Path2D4 } from "@napi-rs/canvas";
 
 // src/jsx/draw/svg/gradients.ts
-import { Path2D as Path2D2 } from "@napi-rs/canvas";
+import { Path2D as Path2D3 } from "@napi-rs/canvas";
 import parseCssColor from "parse-css-color";
 function parseFrac(value, fallback) {
   if (value == null) return fallback;
@@ -2126,7 +3009,7 @@ function fillWithSvgGradient(ctx, def, bbox, path, fillRule, viewport) {
     const gradient = ctx.createRadialGradient(fxF, fyF, 0, cxF, cyF, rF);
     addGradientStops(gradient, def);
     ctx.fillStyle = gradient;
-    const unitPath = new Path2D2();
+    const unitPath = new Path2D3();
     const invTransform = {
       a: 1 / bbox.width,
       b: 0,
@@ -2248,7 +3131,7 @@ function applyStroke(ctx, props, path, inherited, color, defs, bbox) {
 function drawPath(ctx, props, inherited, color, defs) {
   const d = props.d;
   if (!d) return;
-  const path = new Path2D3(d);
+  const path = new Path2D4(d);
   const bbox = pathBBox(d);
   applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox);
 }
@@ -2257,7 +3140,7 @@ function drawCircle(ctx, props, inherited, color, defs, vbW = 0, vbH = 0) {
   const cy = svgLength(props.cy, vbH);
   const r = svgLength(props.r, Math.min(vbW, vbH));
   if (r <= 0) return;
-  const path = new Path2D3();
+  const path = new Path2D4();
   path.arc(cx, cy, r, 0, Math.PI * 2);
   const bbox = { x: cx - r, y: cy - r, width: 2 * r, height: 2 * r };
   applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox);
@@ -2274,7 +3157,7 @@ function drawSvgRect(ctx, props, inherited, color, defs, vbW = 0, vbH = 0) {
   let ry = ryRaw >= 0 ? ryRaw : rx;
   rx = Math.min(rx, w / 2);
   ry = Math.min(ry, h / 2);
-  const path = new Path2D3();
+  const path = new Path2D4();
   if (rx > 0 || ry > 0) {
     path.roundRect(x, y, w, h, [rx]);
   } else {
@@ -2288,7 +3171,7 @@ function drawLine(ctx, props, inherited, color, defs, vbW = 0, vbH = 0) {
   const y1 = svgLength(props.y1, vbH);
   const x2 = svgLength(props.x2, vbW);
   const y2 = svgLength(props.y2, vbH);
-  const path = new Path2D3();
+  const path = new Path2D4();
   path.moveTo(x1, y1);
   path.lineTo(x2, y2);
   const bbox = {
@@ -2305,7 +3188,7 @@ function drawEllipse(ctx, props, inherited, color, defs, vbW = 0, vbH = 0) {
   const rx = svgLength(props.rx, vbW);
   const ry = svgLength(props.ry, vbH);
   if (rx <= 0 || ry <= 0) return;
-  const path = new Path2D3();
+  const path = new Path2D4();
   path.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
   const bbox = {
     x: cx - rx,
@@ -2318,7 +3201,7 @@ function drawEllipse(ctx, props, inherited, color, defs, vbW = 0, vbH = 0) {
 function drawPolygon(ctx, props, inherited, color, defs) {
   const points = parsePoints(props.points);
   if (points.length < 2) return;
-  const path = new Path2D3();
+  const path = new Path2D4();
   path.moveTo(points[0][0], points[0][1]);
   for (let i = 1; i < points.length; i++) {
     path.lineTo(points[i][0], points[i][1]);
@@ -2330,7 +3213,7 @@ function drawPolygon(ctx, props, inherited, color, defs) {
 function drawPolyline(ctx, props, inherited, color, defs) {
   const points = parsePoints(props.points);
   if (points.length < 2) return;
-  const path = new Path2D3();
+  const path = new Path2D4();
   path.moveTo(points[0][0], points[0][1]);
   for (let i = 1; i < points.length; i++) {
     path.lineTo(points[i][0], points[i][1]);
@@ -2833,11 +3716,12 @@ async function drawNode(ctx, node, parentX, parentY, context, emojiStyle) {
   if (opacity <= 0) return;
   const scaleInfo = style.transform ? extractScale(style.transform) : null;
   const hasOtherTransforms = scaleInfo !== null && scaleInfo.remaining.length > 0;
-  if (scaleInfo && (scaleInfo.sx !== 1 || scaleInfo.sy !== 1) && !hasOtherTransforms) {
+  const subtree = scaleInfo && (scaleInfo.sx !== 1 || scaleInfo.sy !== 1) && !hasOtherTransforms ? scanSubtree(node) : null;
+  if (scaleInfo && subtree && !subtree.hasBackdropFilter) {
     const sx = scaleInfo.sx;
     const sy = scaleInfo.sy;
     const transformWithoutScale = scaleInfo.remaining;
-    const bleed = Math.max(1, computeOverflowBleed(node));
+    const bleed = Math.max(1, Math.ceil(subtree.overflowBleed));
     const qx = Math.max(1, Math.ceil(Math.abs(sx)));
     const qy = Math.max(1, Math.ceil(Math.abs(sy)));
     const bufW = Math.ceil((width + 2 * bleed) * qx);
@@ -2909,23 +3793,32 @@ function extractScale(transform) {
   const remaining = transform.replace(fullMatch, "").trim();
   return { sx, sy, remaining };
 }
-function computeOverflowBleed(node) {
-  let bleed = 0;
+function scanSubtree(node) {
+  let overflowBleed = 0;
+  let hasBackdropFilter = false;
   const visit = (n) => {
     if (n.style.display === "none") return;
     if ((n.style.opacity ?? 1) <= 0) return;
     const fontSize = typeof n.style.fontSize === "number" ? n.style.fontSize : 0;
     if (n.textContent !== void 0 && n.textContent !== "" && fontSize > 0) {
       const letterSpacing = typeof n.style.letterSpacing === "number" ? n.style.letterSpacing : 0;
-      bleed = Math.max(bleed, fontSize + Math.max(0, -letterSpacing));
+      overflowBleed = Math.max(
+        overflowBleed,
+        fontSize + Math.max(0, -letterSpacing)
+      );
     }
     if (n.style.boxShadow) {
-      bleed = Math.max(bleed, boxShadowExtent(n.style.boxShadow));
+      overflowBleed = Math.max(
+        overflowBleed,
+        boxShadowExtent(n.style.boxShadow)
+      );
     }
+    const filter = n.style.backdropFilter;
+    if (filter && filter.trim() !== "none") hasBackdropFilter = true;
     for (const child of n.children) visit(child);
   };
   visit(node);
-  return bleed;
+  return { overflowBleed, hasBackdropFilter };
 }
 async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, emojiStyle, context, overrideTransform) {
   const x = parentX + node.x + offsetX;
@@ -2953,7 +3846,21 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, emoji
       style.transformOrigin
     );
   }
+  if (style.clipPath) {
+    applyClipPath(ctx, style.clipPath, style, x, y, width, height);
+  }
   const borderRadius = getBorderRadiusFromStyle(style, width, height);
+  if (style.backdropFilter) {
+    drawBackdropFilter(
+      ctx,
+      style.backdropFilter,
+      x,
+      y,
+      width,
+      height,
+      borderRadius
+    );
+  }
   if (style.boxShadow) {
     drawBoxShadow(ctx, x, y, width, height, style.boxShadow, borderRadius);
   }
@@ -3379,6 +4286,15 @@ function expandStyle(raw, fontFamilies) {
     }
     delete style.WebkitTextStroke;
   }
+  if (style.WebkitBackdropFilter !== void 0) {
+    if (style.backdropFilter === void 0)
+      style.backdropFilter = style.WebkitBackdropFilter;
+    delete style.WebkitBackdropFilter;
+  }
+  if (style.WebkitClipPath !== void 0) {
+    if (style.clipPath === void 0) style.clipPath = style.WebkitClipPath;
+    delete style.WebkitClipPath;
+  }
   if (typeof style.fontFamily === "string") {
     const families = style.fontFamily.split(",").map((s) => s.trim().replace(/^['"]|['"]$/g, "")).filter(Boolean);
     if (fontFamilies) {
@@ -4104,7 +5020,7 @@ export {
   Image,
   ImageData,
   LottieAnimation,
-  Path2D4 as Path2D,
+  Path2D5 as Path2D,
   PathOp,
   StrokeCap,
   StrokeJoin,