@effing/canvas 0.18.4 → 0.18.6

package/dist/index.js

@@ -74,8 +74,28 @@ function getScratchCtx() {
   }
   return scratchCtx;
 }
+var GENERIC_FAMILIES = /* @__PURE__ */ new Set([
+  "serif",
+  "sans-serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+  "system-ui",
+  "ui-serif",
+  "ui-sans-serif",
+  "ui-monospace",
+  "ui-rounded",
+  "math",
+  "emoji",
+  "fangsong"
+]);
+function quoteFontFamily(family) {
+  if (!family || GENERIC_FAMILIES.has(family)) return family;
+  return `"${family}"`;
+}
 function setFont(ctx, fontSize, fontFamily, fontWeight = 400, fontStyle = "normal") {
-  ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+  const quoted = fontFamily.split(",").map((f) => quoteFontFamily(f.trim())).join(", ");
+  ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${quoted}`;
 }
 function measureText(text, fontSize, fontFamily, fontWeight = 400, fontStyle = "normal", ctx) {
   const c = ctx ?? getScratchCtx();
@@ -650,7 +670,7 @@ async function drawImage(ctx, src, x, y, width, height, style, preloadedImage) {
 
 // src/jsx/draw/rect.ts
 function drawRect(ctx, x, y, width, height, style) {
-  const borderRadius = getBorderRadius(style);
+  const borderRadius = getBorderRadius(style, width, height);
   const hasRoundedCorners = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
   if (style.boxShadow) {
     drawBoxShadow(ctx, x, y, width, height, style.boxShadow, borderRadius);
@@ -677,16 +697,20 @@ function drawRect(ctx, x, y, width, height, style) {
   }
   drawBorders(ctx, x, y, width, height, style, borderRadius);
 }
-function getBorderRadius(style) {
+function resolveRadius(v, width, height) {
+  if (typeof v === "string") return parseCSSLength(v, Math.min(width, height));
+  return toNumber(v);
+}
+function getBorderRadius(style, width, height) {
   return {
-    topLeft: toNumber(style.borderTopLeftRadius),
-    topRight: toNumber(style.borderTopRightRadius),
-    bottomRight: toNumber(style.borderBottomRightRadius),
-    bottomLeft: toNumber(style.borderBottomLeftRadius)
+    topLeft: resolveRadius(style.borderTopLeftRadius, width, height),
+    topRight: resolveRadius(style.borderTopRightRadius, width, height),
+    bottomRight: resolveRadius(style.borderBottomRightRadius, width, height),
+    bottomLeft: resolveRadius(style.borderBottomLeftRadius, width, height)
   };
 }
-function getBorderRadiusFromStyle(style) {
-  return getBorderRadius(style);
+function getBorderRadiusFromStyle(style, width, height) {
+  return getBorderRadius(style, width, height);
 }
 function drawBorders(ctx, x, y, width, height, style, borderRadius) {
   const hasRoundedCorners = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
@@ -786,12 +810,6 @@ function drawBoxShadow(ctx, x, y, width, height, boxShadow, borderRadius) {
   ctx.fill();
   ctx.restore();
 }
-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;
-}
 
 // src/jsx/draw/svg.ts
 import { Path2D } from "@napi-rs/canvas";
@@ -804,6 +822,97 @@ function mergeStyleIntoProps(props) {
   if (!style) return props;
   return { ...props, ...style };
 }
+function collectDefs(children) {
+  const defs = /* @__PURE__ */ new Map();
+  for (const child of children) {
+    if (child.type !== "defs") continue;
+    const defsChildren = normalizeChildren(child);
+    for (const def of defsChildren) {
+      if (def.type === "clipPath") {
+        const id = def.props.id;
+        if (id) {
+          defs.set(id, normalizeChildren(def));
+        }
+      }
+    }
+  }
+  return defs;
+}
+function parseUrlRef(value) {
+  if (typeof value !== "string") return void 0;
+  const m = value.match(/^url\(#(.+)\)$/);
+  return m?.[1];
+}
+function normalizeChildren(node) {
+  const raw = node.children ?? node.props.children;
+  if (raw == null) return [];
+  return Array.isArray(raw) ? raw : [raw];
+}
+function buildPath(child) {
+  const props = mergeStyleIntoProps(child.props);
+  switch (child.type) {
+    case "path": {
+      const d = props.d;
+      if (!d) return void 0;
+      return new Path2D(d);
+    }
+    case "circle": {
+      const cx = Number(props.cx ?? 0);
+      const cy = Number(props.cy ?? 0);
+      const r = Number(props.r ?? 0);
+      if (r <= 0) return void 0;
+      const p = new Path2D();
+      p.arc(cx, cy, r, 0, Math.PI * 2);
+      return p;
+    }
+    case "rect": {
+      const rx = Number(props.x ?? 0);
+      const ry = Number(props.y ?? 0);
+      const w = Number(props.width ?? 0);
+      const h = Number(props.height ?? 0);
+      if (w <= 0 || h <= 0) return void 0;
+      const p = new Path2D();
+      p.rect(rx, ry, w, h);
+      return p;
+    }
+    case "ellipse": {
+      const cx = Number(props.cx ?? 0);
+      const cy = Number(props.cy ?? 0);
+      const rx = Number(props.rx ?? 0);
+      const ry = Number(props.ry ?? 0);
+      if (rx <= 0 || ry <= 0) return void 0;
+      const p = new Path2D();
+      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();
+      p.moveTo(points[0][0], points[0][1]);
+      for (let i = 1; i < points.length; i++) {
+        p.lineTo(points[i][0], points[i][1]);
+      }
+      p.closePath();
+      return p;
+    }
+    default:
+      return void 0;
+  }
+}
+function buildClipPath(shapes) {
+  let combined;
+  for (const shape of shapes) {
+    const p = buildPath(shape);
+    if (!p) continue;
+    if (!combined) {
+      combined = p;
+    } else {
+      combined.addPath(p);
+    }
+  }
+  return combined;
+}
 function drawSvgContainer(ctx, node, x, y, width, height) {
   ctx.save();
   ctx.translate(x, y);
@@ -824,17 +933,25 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
   const children = node.props.children;
   if (children != null) {
     const childArray = Array.isArray(children) ? children : [children];
-    for (const child of childArray) {
-      if (child != null && typeof child === "object") {
-        drawSvgChild(ctx, child, inheritedFill, color);
-      }
+    const svgChildren = childArray.filter(
+      (c) => c != null && typeof c === "object"
+    );
+    const defs = collectDefs(svgChildren);
+    for (const child of svgChildren) {
+      drawSvgChild(ctx, child, inheritedFill, color, defs);
     }
   }
   ctx.restore();
 }
-function drawSvgChild(ctx, child, inheritedFill, color) {
+function drawSvgChild(ctx, child, inheritedFill, color, defs = /* @__PURE__ */ new Map()) {
   const { type } = child;
   const props = mergeStyleIntoProps(child.props);
+  if (type === "defs" || type === "clipPath") return;
+  const clipRef = parseUrlRef(props.clipPath ?? props["clip-path"]);
+  const clipShapes = clipRef ? defs.get(clipRef) : void 0;
+  const clipPath = clipShapes ? buildClipPath(clipShapes) : void 0;
+  if (clipPath) ctx.save();
+  if (clipPath) ctx.clip(clipPath);
   switch (type) {
     case "path":
       drawPath(ctx, props, inheritedFill, color);
@@ -858,9 +975,10 @@ function drawSvgChild(ctx, child, inheritedFill, color) {
       drawPolyline(ctx, props, inheritedFill, color);
       break;
     case "g":
-      drawGroup(ctx, child, inheritedFill, color);
+      drawGroup(ctx, child, inheritedFill, color, defs);
       break;
   }
+  if (clipPath) ctx.restore();
 }
 function drawPath(ctx, props, inheritedFill, color) {
   const d = props.d;
@@ -928,15 +1046,14 @@ function drawPolyline(ctx, props, inheritedFill, color) {
   }
   applyFillAndStroke(ctx, props, path, inheritedFill, color);
 }
-function drawGroup(ctx, node, inheritedFill, color) {
-  const children = node.children ?? node.props.children;
-  if (children == null) return;
+function drawGroup(ctx, node, inheritedFill, color, defs = /* @__PURE__ */ new Map()) {
+  const children = normalizeChildren(node);
+  if (children.length === 0) return;
   const merged = mergeStyleIntoProps(node.props);
   const groupFill = resolveCurrentColor(merged.fill, color) ?? inheritedFill;
-  const childArray = Array.isArray(children) ? children : [children];
-  for (const child of childArray) {
+  for (const child of children) {
     if (child != null && typeof child === "object") {
-      drawSvgChild(ctx, child, groupFill, color);
+      drawSvgChild(ctx, child, groupFill, color, defs);
     }
   }
 }
@@ -951,9 +1068,14 @@ function parsePoints(value) {
 }
 function applyFillAndStroke(ctx, props, path, inheritedFill, color) {
   const fill = resolveCurrentColor(props.fill, color) ?? inheritedFill;
+  const fillRule = props.fillRule ?? props["fill-rule"];
+  const clipRule = props.clipRule ?? props["clip-rule"];
+  if (clipRule) {
+    ctx.clip(path, clipRule);
+  }
   if (fill !== "none") {
     ctx.fillStyle = fill;
-    ctx.fill(path);
+    ctx.fill(path, fillRule ?? "nonzero");
   }
   applyStroke(ctx, props, path, color);
 }
@@ -1014,7 +1136,7 @@ async function loadEmoji(type, code) {
 }
 
 // src/jsx/text/emoji-split.ts
-function splitTextIntoRuns(text, measureText2, emojiSize) {
+function splitTextIntoRuns(text, measureText2, emojiSize, letterSpacing = 0) {
   const runs = [];
   const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
   let currentText = "";
@@ -1024,13 +1146,18 @@ function splitTextIntoRuns(text, measureText2, emojiSize) {
     if (isEmojiGrapheme(segment)) {
       if (currentText) {
         const textWidth = measureText2(currentText);
+        const graphemeCount = [
+          ...new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(
+            currentText
+          )
+        ].length;
         runs.push({
           kind: "text",
           text: currentText,
           x: textStartX,
-          width: textWidth
+          width: textWidth + letterSpacing * graphemeCount
         });
-        currentX = textStartX + textWidth;
+        currentX = textStartX + textWidth + letterSpacing * graphemeCount;
         currentText = "";
       }
       runs.push({
@@ -1039,7 +1166,7 @@ function splitTextIntoRuns(text, measureText2, emojiSize) {
         x: currentX,
         width: emojiSize
       });
-      currentX += emojiSize;
+      currentX += emojiSize + letterSpacing;
       textStartX = currentX;
     } else {
       if (!currentText) textStartX = currentX;
@@ -1048,11 +1175,16 @@ function splitTextIntoRuns(text, measureText2, emojiSize) {
   }
   if (currentText) {
     const textWidth = measureText2(currentText);
+    const graphemeCount = [
+      ...new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(
+        currentText
+      )
+    ].length;
     runs.push({
       kind: "text",
       text: currentText,
       x: textStartX,
-      width: textWidth
+      width: textWidth + letterSpacing * graphemeCount
     });
   }
   return runs;
@@ -1103,20 +1235,29 @@ async function drawText(ctx, segments, offsetX, offsetY, textShadow, emojiStyle)
   }
 }
 async function drawSegmentWithEmoji(ctx, seg, x, y, textShadow, emojiStyle) {
+  const letterSpacing = seg.letterSpacing ?? 0;
   const runs = splitTextIntoRuns(
     seg.text,
     (text) => {
       setFont(ctx, seg.fontSize, seg.fontFamily, seg.fontWeight, seg.fontStyle);
       return ctx.measureText(text).width;
     },
-    seg.fontSize
+    seg.fontSize,
+    letterSpacing
   );
   for (const run of runs) {
     if (run.kind === "text") {
-      if (textShadow) {
-        drawTextShadow(ctx, run.text, x + run.x, y, textShadow);
+      if (letterSpacing !== 0) {
+        if (textShadow) {
+          drawTextShadow(ctx, run.text, x + run.x, y, textShadow);
+        }
+        drawTextWithLetterSpacing(ctx, run.text, x + run.x, y, letterSpacing);
+      } else {
+        if (textShadow) {
+          drawTextShadow(ctx, run.text, x + run.x, y, textShadow);
+        }
+        ctx.fillText(run.text, x + run.x, y);
       }
-      ctx.fillText(run.text, x + run.x, y);
     } else {
       const img = await loadEmojiImage(emojiStyle, run.char);
       if (img) {
@@ -1291,84 +1432,91 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
   }
   const isClipped = style.overflow === "hidden" || style.overflowX === "hidden" || style.overflowY === "hidden";
   if (isClipped) {
-    const borderRadius = getBorderRadiusFromStyle(style);
+    const borderRadius = getBorderRadiusFromStyle(style, width, height);
     applyClip(ctx, x, y, width, height, borderRadius);
   }
   if (style.backgroundColor || style.borderTopWidth || style.borderRightWidth || style.borderBottomWidth || style.borderLeftWidth || style.boxShadow) {
     drawRect(ctx, x, y, width, height, style);
   }
   if (style.backgroundImage) {
-    const gradient = createGradientFromCSS(
-      ctx,
-      style.backgroundImage,
-      x,
-      y,
-      width,
-      height
-    );
-    if (gradient) {
-      ctx.fillStyle = gradient;
-      const borderRadius = getBorderRadiusFromStyle(style);
-      if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
-        ctx.beginPath();
-        roundedRect(
-          ctx,
-          x,
-          y,
-          width,
-          height,
-          borderRadius.topLeft,
-          borderRadius.topRight,
-          borderRadius.bottomRight,
-          borderRadius.bottomLeft
-        );
-        ctx.fill();
-      } else {
-        ctx.fillRect(x, y, width, height);
-      }
-    } else {
-      const urlMatch = style.backgroundImage.match(/url\(["']?(.*?)["']?\)/);
-      if (urlMatch) {
-        const borderRadius = getBorderRadiusFromStyle(style);
-        const hasRadius2 = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
-        if (hasRadius2) {
-          applyClip(ctx, x, y, width, height, borderRadius);
-        }
-        const image = await loadImage3(urlMatch[1]);
-        const bgSize = style.backgroundSize;
-        if (bgSize === "cover") {
-          const r = computeCover(
-            image.width,
-            image.height,
+    const layers = splitGradientArgs(style.backgroundImage);
+    for (let i = layers.length - 1; i >= 0; i--) {
+      const layer = layers[i].trim();
+      const gradient = createGradientFromCSS(ctx, layer, x, y, width, height);
+      if (gradient) {
+        ctx.fillStyle = gradient;
+        const borderRadius = getBorderRadiusFromStyle(style, width, height);
+        if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
+          ctx.beginPath();
+          roundedRect(
+            ctx,
             x,
             y,
             width,
-            height
+            height,
+            borderRadius.topLeft,
+            borderRadius.topRight,
+            borderRadius.bottomRight,
+            borderRadius.bottomLeft
           );
-          ctx.drawImage(image, r.sx, r.sy, r.sw, r.sh, r.dx, r.dy, r.dw, r.dh);
+          ctx.fill();
         } else {
-          let tileW, tileH;
-          if (bgSize === "contain") {
-            const r = computeContain(
+          ctx.fillRect(x, y, width, height);
+        }
+      } else {
+        const urlMatch = layer.match(/url\(["']?(.*?)["']?\)/);
+        if (urlMatch) {
+          const borderRadius = getBorderRadiusFromStyle(style, width, height);
+          const hasRadius2 = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
+          if (hasRadius2) {
+            applyClip(ctx, x, y, width, height, borderRadius);
+          }
+          const image = await loadImage3(urlMatch[1]);
+          const bgSize = style.backgroundSize;
+          if (bgSize === "cover") {
+            const r = computeCover(
               image.width,
               image.height,
-              0,
-              0,
+              x,
+              y,
               width,
               height
             );
-            tileW = r.dw;
-            tileH = r.dh;
-          } else if (bgSize === "100% 100%") {
-            tileW = width;
-            tileH = height;
+            ctx.drawImage(
+              image,
+              r.sx,
+              r.sy,
+              r.sw,
+              r.sh,
+              r.dx,
+              r.dy,
+              r.dw,
+              r.dh
+            );
           } else {
-            tileW = image.width;
-            tileH = image.height;
-          }
-          for (let ty = y; ty < y + height; ty += tileH) {
-            for (let tx = x; tx < x + width; tx += tileW) {
-              ctx.drawImage(image, tx, ty, tileW, tileH);
+            let tileW, tileH;
+            if (bgSize === "contain") {
+              const r = computeContain(
+                image.width,
+                image.height,
+                0,
+                0,
+                width,
+                height
+              );
+              tileW = r.dw;
+              tileH = r.dh;
+            } else if (bgSize === "100% 100%") {
+              tileW = width;
+              tileH = height;
+            } else {
+              tileW = image.width;
+              tileH = image.height;
+            }
+            for (let ty = y; ty < y + height; ty += tileH) {
+              for (let tx = x; tx < x + width; tx += tileW) {
+                ctx.drawImage(image, tx, ty, tileW, tileH);
+              }
             }
           }
         }
@@ -1381,12 +1529,12 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
     ctx.strokeRect(x, y, width, height);
   }
   if (node.textContent !== void 0 && node.textContent !== "") {
-    const paddingTop = toNumber2(style.paddingTop);
-    const paddingLeft = toNumber2(style.paddingLeft);
-    const paddingRight = toNumber2(style.paddingRight);
-    const borderTopW = toNumber2(style.borderTopWidth);
-    const borderLeftW = toNumber2(style.borderLeftWidth);
-    const borderRightW = toNumber2(style.borderRightWidth);
+    const paddingTop = toNumber(style.paddingTop);
+    const paddingLeft = toNumber(style.paddingLeft);
+    const paddingRight = toNumber(style.paddingRight);
+    const borderTopW = toNumber(style.borderTopWidth);
+    const borderLeftW = toNumber(style.borderLeftWidth);
+    const borderRightW = toNumber(style.borderRightWidth);
     const contentX = x + paddingLeft + borderLeftW;
     const contentY = y + paddingTop + borderTopW;
     const contentWidth = width - paddingLeft - paddingRight - borderLeftW - borderRightW;
@@ -1407,16 +1555,16 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
     );
   }
   if (node.type === "img" && node.props.src) {
-    const paddingTop = toNumber2(style.paddingTop);
-    const paddingLeft = toNumber2(style.paddingLeft);
-    const paddingRight = toNumber2(style.paddingRight);
-    const paddingBottom = toNumber2(style.paddingBottom);
+    const paddingTop = toNumber(style.paddingTop);
+    const paddingLeft = toNumber(style.paddingLeft);
+    const paddingRight = toNumber(style.paddingRight);
+    const paddingBottom = toNumber(style.paddingBottom);
     const imgX = x + paddingLeft;
     const imgY = y + paddingTop;
     const imgW = width - paddingLeft - paddingRight;
     const imgH = height - paddingTop - paddingBottom;
     if (!isClipped) {
-      const borderRadius = getBorderRadiusFromStyle(style);
+      const borderRadius = getBorderRadiusFromStyle(style, width, height);
       if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
         applyClip(ctx, imgX, imgY, imgW, imgH, borderRadius);
       }
@@ -1479,84 +1627,91 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
   }
   const isClipped = style.overflow === "hidden" || style.overflowX === "hidden" || style.overflowY === "hidden";
   if (isClipped) {
-    const borderRadius = getBorderRadiusFromStyle(style);
+    const borderRadius = getBorderRadiusFromStyle(style, width, height);
     applyClip(ctx, x, y, width, height, borderRadius);
   }
   if (style.backgroundColor || style.borderTopWidth || style.borderRightWidth || style.borderBottomWidth || style.borderLeftWidth || style.boxShadow) {
     drawRect(ctx, x, y, width, height, style);
   }
   if (style.backgroundImage) {
-    const gradient = createGradientFromCSS(
-      ctx,
-      style.backgroundImage,
-      x,
-      y,
-      width,
-      height
-    );
-    if (gradient) {
-      ctx.fillStyle = gradient;
-      const borderRadius = getBorderRadiusFromStyle(style);
-      if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
-        ctx.beginPath();
-        roundedRect(
-          ctx,
-          x,
-          y,
-          width,
-          height,
-          borderRadius.topLeft,
-          borderRadius.topRight,
-          borderRadius.bottomRight,
-          borderRadius.bottomLeft
-        );
-        ctx.fill();
-      } else {
-        ctx.fillRect(x, y, width, height);
-      }
-    } else {
-      const urlMatch = style.backgroundImage.match(/url\(["']?(.*?)["']?\)/);
-      if (urlMatch) {
-        const borderRadius = getBorderRadiusFromStyle(style);
-        const hasRadius2 = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
-        if (hasRadius2) {
-          applyClip(ctx, x, y, width, height, borderRadius);
-        }
-        const image = await loadImage3(urlMatch[1]);
-        const bgSize = style.backgroundSize;
-        if (bgSize === "cover") {
-          const r = computeCover(
-            image.width,
-            image.height,
+    const layers = splitGradientArgs(style.backgroundImage);
+    for (let i = layers.length - 1; i >= 0; i--) {
+      const layer = layers[i].trim();
+      const gradient = createGradientFromCSS(ctx, layer, x, y, width, height);
+      if (gradient) {
+        ctx.fillStyle = gradient;
+        const borderRadius = getBorderRadiusFromStyle(style, width, height);
+        if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
+          ctx.beginPath();
+          roundedRect(
+            ctx,
             x,
             y,
             width,
-            height
+            height,
+            borderRadius.topLeft,
+            borderRadius.topRight,
+            borderRadius.bottomRight,
+            borderRadius.bottomLeft
           );
-          ctx.drawImage(image, r.sx, r.sy, r.sw, r.sh, r.dx, r.dy, r.dw, r.dh);
+          ctx.fill();
         } else {
-          let tileW, tileH;
-          if (bgSize === "contain") {
-            const r = computeContain(
+          ctx.fillRect(x, y, width, height);
+        }
+      } else {
+        const urlMatch = layer.match(/url\(["']?(.*?)["']?\)/);
+        if (urlMatch) {
+          const borderRadius = getBorderRadiusFromStyle(style, width, height);
+          const hasRadius2 = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
+          if (hasRadius2) {
+            applyClip(ctx, x, y, width, height, borderRadius);
+          }
+          const image = await loadImage3(urlMatch[1]);
+          const bgSize = style.backgroundSize;
+          if (bgSize === "cover") {
+            const r = computeCover(
               image.width,
               image.height,
-              0,
-              0,
+              x,
+              y,
               width,
               height
             );
-            tileW = r.dw;
-            tileH = r.dh;
-          } else if (bgSize === "100% 100%") {
-            tileW = width;
-            tileH = height;
+            ctx.drawImage(
+              image,
+              r.sx,
+              r.sy,
+              r.sw,
+              r.sh,
+              r.dx,
+              r.dy,
+              r.dw,
+              r.dh
+            );
           } else {
-            tileW = image.width;
-            tileH = image.height;
-          }
-          for (let ty = y; ty < y + height; ty += tileH) {
-            for (let tx = x; tx < x + width; tx += tileW) {
-              ctx.drawImage(image, tx, ty, tileW, tileH);
+            let tileW, tileH;
+            if (bgSize === "contain") {
+              const r = computeContain(
+                image.width,
+                image.height,
+                0,
+                0,
+                width,
+                height
+              );
+              tileW = r.dw;
+              tileH = r.dh;
+            } else if (bgSize === "100% 100%") {
+              tileW = width;
+              tileH = height;
+            } else {
+              tileW = image.width;
+              tileH = image.height;
+            }
+            for (let ty = y; ty < y + height; ty += tileH) {
+              for (let tx = x; tx < x + width; tx += tileW) {
+                ctx.drawImage(image, tx, ty, tileW, tileH);
+              }
             }
           }
         }
@@ -1569,12 +1724,12 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
     ctx.strokeRect(x, y, width, height);
   }
   if (node.textContent !== void 0 && node.textContent !== "") {
-    const paddingTop = toNumber2(style.paddingTop);
-    const paddingLeft = toNumber2(style.paddingLeft);
-    const paddingRight = toNumber2(style.paddingRight);
-    const borderTopW = toNumber2(style.borderTopWidth);
-    const borderLeftW = toNumber2(style.borderLeftWidth);
-    const borderRightW = toNumber2(style.borderRightWidth);
+    const paddingTop = toNumber(style.paddingTop);
+    const paddingLeft = toNumber(style.paddingLeft);
+    const paddingRight = toNumber(style.paddingRight);
+    const borderTopW = toNumber(style.borderTopWidth);
+    const borderLeftW = toNumber(style.borderLeftWidth);
+    const borderRightW = toNumber(style.borderRightWidth);
     const contentX = x + paddingLeft + borderLeftW;
     const contentY = y + paddingTop + borderTopW;
     const contentWidth = width - paddingLeft - paddingRight - borderLeftW - borderRightW;
@@ -1595,16 +1750,16 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
     );
   }
   if (node.type === "img" && node.props.src) {
-    const paddingTop = toNumber2(style.paddingTop);
-    const paddingLeft = toNumber2(style.paddingLeft);
-    const paddingRight = toNumber2(style.paddingRight);
-    const paddingBottom = toNumber2(style.paddingBottom);
+    const paddingTop = toNumber(style.paddingTop);
+    const paddingLeft = toNumber(style.paddingLeft);
+    const paddingRight = toNumber(style.paddingRight);
+    const paddingBottom = toNumber(style.paddingBottom);
     const imgX = x + paddingLeft;
     const imgY = y + paddingTop;
     const imgW = width - paddingLeft - paddingRight;
     const imgH = height - paddingTop - paddingBottom;
     if (!isClipped) {
-      const borderRadius = getBorderRadiusFromStyle(style);
+      const borderRadius = getBorderRadiusFromStyle(style, width, height);
       if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
         applyClip(ctx, imgX, imgY, imgW, imgH, borderRadius);
       }
@@ -1629,6 +1784,10 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
   }
   ctx.restore();
 }
+function parseCSSLength(value, referenceSize) {
+  if (value.endsWith("%")) return parseFloat(value) / 100 * referenceSize;
+  return parseFloat(value);
+}
 function applyTransform(ctx, transform, x, y, width, height, transformOrigin) {
   let ox = x + width / 2;
   let oy = y + height / 2;
@@ -1645,8 +1804,11 @@ function applyTransform(ctx, transform, x, y, width, height, transformOrigin) {
       case "translate":
       case "translateX":
       case "translateY": {
-        const tx = name === "translateY" ? 0 : parseFloat(values[0]);
-        const ty = name === "translateX" ? 0 : parseFloat(values[name === "translate" ? 1 : 0] ?? "0");
+        const tx = name === "translateY" ? 0 : parseCSSLength(values[0], width);
+        const ty = name === "translateX" ? 0 : parseCSSLength(
+          values[name === "translate" ? 1 : 0] ?? "0",
+          height
+        );
         ctx.translate(tx, ty);
         break;
       }
@@ -1682,8 +1844,7 @@ function resolveOrigin(value, base, size) {
   if (value === "left" || value === "top") return base;
   if (value === "right" || value === "bottom") return base + size;
   if (value === "center") return base + size / 2;
-  if (value.endsWith("%")) return base + parseFloat(value) / 100 * size;
-  return base + parseFloat(value);
+  return base + parseCSSLength(value, size);
 }
 function parseAngle(value) {
   if (value.endsWith("deg")) return parseFloat(value) * Math.PI / 180;
@@ -1691,7 +1852,7 @@ function parseAngle(value) {
   if (value.endsWith("turn")) return parseFloat(value) * 2 * Math.PI;
   return parseFloat(value);
 }
-function toNumber2(v) {
+function toNumber(v) {
   if (typeof v === "number") return v;
   if (v === void 0 || v === null) return 0;
   const n = parseFloat(String(v));
@@ -1742,11 +1903,11 @@ function parseValue(v) {
   if (v === void 0 || v === null) return void 0;
   const s = String(v);
   if (s === "auto") return "auto";
-  const n = parseFloat(s);
-  if (!isNaN(n)) return n;
+  const n = Number(s);
+  if (s !== "" && !isNaN(n)) return n;
   return s;
 }
-function expandStyle(raw) {
+function expandStyle(raw, fontFamilies) {
   const style = { ...raw };
   if (style.margin !== void 0) {
     const sides = parseSides(String(style.margin));
@@ -1859,7 +2020,14 @@ function expandStyle(raw) {
     if (style.overflowY === void 0) style.overflowY = style.overflow;
   }
   if (typeof style.fontFamily === "string") {
-    style.fontFamily = style.fontFamily.split(",").map((s) => s.trim().replace(/^['"]|['"]$/g, "")).filter(Boolean).join(", ");
+    const families = style.fontFamily.split(",").map((s) => s.trim().replace(/^['"]|['"]$/g, "")).filter(Boolean);
+    if (fontFamilies) {
+      const present = new Set(families);
+      for (const name of fontFamilies) {
+        if (!present.has(name)) families.push(name);
+      }
+    }
+    style.fontFamily = families.join(", ");
   }
   return style;
 }
@@ -1952,7 +2120,15 @@ var DIMENSION_PROPS = [
   "paddingLeft",
   "rowGap",
   "columnGap",
-  "flexBasis"
+  "flexBasis",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomRightRadius",
+  "borderBottomLeftRadius"
 ];
 function resolveUnit(value, viewportWidth, viewportHeight, fontSize, rootFontSize) {
   if (value.endsWith("%") || value === "auto") return value;
@@ -2022,8 +2198,41 @@ function resolveUnits(style, viewportWidth, viewportHeight, rootFontSize = DEFAU
       style[prop] = resolved;
     }
   }
+  if (style.transform) {
+    style.transform = resolveTransformUnits(
+      style.transform,
+      viewportWidth,
+      viewportHeight,
+      fontSize,
+      rootFontSize
+    );
+  }
+  if (style.transformOrigin) {
+    style.transformOrigin = resolveTransformUnits(
+      style.transformOrigin,
+      viewportWidth,
+      viewportHeight,
+      fontSize,
+      rootFontSize
+    );
+  }
   return style;
 }
+function resolveTransformUnits(transform, viewportWidth, viewportHeight, fontSize, rootFontSize) {
+  return transform.replace(
+    /(-?\d*\.?\d+)(vw|vh|vmin|vmax|em|rem|px|pt|pc|in|cm|mm)\b/g,
+    (match) => {
+      const resolved = resolveUnit(
+        match,
+        viewportWidth,
+        viewportHeight,
+        fontSize,
+        rootFontSize
+      );
+      return typeof resolved === "number" ? String(resolved) : match;
+    }
+  );
+}
 
 // src/jsx/yoga.ts
 import Yoga, {
@@ -2212,16 +2421,18 @@ function applyEdgeValue(node, setter, edge, value) {
 }
 
 // src/jsx/layout.ts
-async function buildLayoutTree(element, containerWidth, containerHeight, ctx, emojiEnabled) {
+async function buildLayoutTree(element, containerWidth, containerHeight, ctx, emojiEnabled, fontFamilies) {
   const rootYogaNode = createYogaNode();
+  const rootStyle = fontFamilies?.length ? { ...DEFAULT_STYLE, fontFamily: fontFamilies.join(", ") } : DEFAULT_STYLE;
   const rootNode = await buildNode(
     element,
-    DEFAULT_STYLE,
+    rootStyle,
     rootYogaNode,
     containerWidth,
     containerHeight,
     ctx,
-    emojiEnabled
+    emojiEnabled,
+    fontFamilies
   );
   rootYogaNode.setWidth(containerWidth);
   rootYogaNode.setHeight(containerHeight);
@@ -2230,7 +2441,7 @@ async function buildLayoutTree(element, containerWidth, containerHeight, ctx, em
   freeYogaNode(rootYogaNode);
   return layoutTree;
 }
-async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewportHeight, ctx, emojiEnabled) {
+async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewportHeight, ctx, emojiEnabled, fontFamilies) {
   if (element === null || element === void 0 || typeof element === "boolean") {
     return {
       type: "empty",
@@ -2271,7 +2482,8 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
           viewportWidth,
           viewportHeight,
           ctx,
-          emojiEnabled
+          emojiEnabled,
+          fontFamilies
         )
       );
     }
@@ -2296,12 +2508,13 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
       viewportWidth,
       viewportHeight,
       ctx,
-      emojiEnabled
+      emojiEnabled,
+      fontFamilies
     );
   }
   const props = el.props ?? {};
   const rawStyle = props.style ?? {};
-  const expanded = expandStyle(rawStyle);
+  const expanded = expandStyle(rawStyle, fontFamilies);
   const style = resolveStyle(expanded, parentStyle);
   resolveUnits(style, viewportWidth, viewportHeight);
   const tagName = String(type);
@@ -2419,7 +2632,8 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
           viewportWidth,
           viewportHeight,
           ctx,
-          emojiEnabled
+          emojiEnabled,
+          fontFamilies
         )
       );
     }
@@ -2487,12 +2701,14 @@ async function renderReactElement(ctx, element, options) {
   const width = ctx.canvas.width;
   const height = ctx.canvas.height;
   const emojiStyle = options.emoji === "none" ? void 0 : options.emoji ?? "twemoji";
+  const fontFamilies = [...new Set(options.fonts.map((f) => f.name))];
   const layoutTree = await buildLayoutTree(
     element,
     width,
     height,
     ctx,
-    !!emojiStyle
+    !!emojiStyle,
+    fontFamilies
   );
   await drawNode(ctx, layoutTree, 0, 0, options.debug ?? false, emojiStyle);
 }