@effing/canvas 0.18.5 → 0.19.0

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();
@@ -90,6 +110,54 @@ function measureText(text, fontSize, fontFamily, fontWeight = 400, fontStyle = "
     height: ascent + descent
   };
 }
+function measureTrimMetrics(fontSize, fontFamily, fontWeight, fontStyle, lineHeight, edge, ctx) {
+  const c = ctx ?? getScratchCtx();
+  setFont(c, fontSize, fontFamily, fontWeight, fontStyle);
+  const refMetrics = c.measureText("M");
+  const fontAscent = refMetrics.fontBoundingBoxAscent ?? refMetrics.actualBoundingBoxAscent ?? fontSize * 0.8;
+  const fontDescent = refMetrics.fontBoundingBoxDescent ?? refMetrics.actualBoundingBoxDescent ?? fontSize * 0.2;
+  const parts = edge.trim().split(/\s+/);
+  const overEdge = parts[0] ?? "text";
+  const underEdge = parts.length > 1 ? parts[1] : overEdge;
+  let targetAscent;
+  switch (overEdge) {
+    case "cap": {
+      const capMetrics = c.measureText("H");
+      targetAscent = capMetrics.actualBoundingBoxAscent ?? fontSize * 0.7;
+      break;
+    }
+    case "ex": {
+      const exMetrics = c.measureText("x");
+      targetAscent = exMetrics.actualBoundingBoxAscent ?? fontSize * 0.5;
+      break;
+    }
+    case "ideographic":
+    case "ideographic-ink":
+    case "text":
+    default:
+      targetAscent = fontAscent;
+      break;
+  }
+  let targetDescent;
+  switch (underEdge) {
+    case "alphabetic":
+      targetDescent = 0;
+      break;
+    case "ideographic":
+    case "ideographic-ink":
+    case "text":
+    default:
+      targetDescent = fontDescent;
+      break;
+  }
+  const halfLeading = (lineHeight - (fontAscent + fontDescent)) / 2;
+  const overTrim = halfLeading + (fontAscent - targetAscent);
+  const underTrim = halfLeading + (fontDescent - targetDescent);
+  return {
+    overTrim: Math.max(0, overTrim),
+    underTrim: Math.max(0, underTrim)
+  };
+}
 function measureWord(word, fontSize, fontFamily, fontWeight = 400, fontStyle = "normal", ctx, letterSpacing = 0) {
   const base = measureText(
     word,
@@ -275,6 +343,28 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
     totalHeight += lineHeightPx;
     maxLineWidth = Math.max(maxLineWidth, lineWidth);
   }
+  const textBoxTrim = style.textBoxTrim;
+  if (textBoxTrim && textBoxTrim !== "none" && segments.length > 0) {
+    const textBoxEdge = style.textBoxEdge ?? "text";
+    const trimMetrics = measureTrimMetrics(
+      fontSize,
+      fontFamily,
+      fontWeight,
+      fontStyle,
+      lineHeightPx,
+      textBoxEdge,
+      ctx
+    );
+    if (textBoxTrim === "trim-start" || textBoxTrim === "trim-both") {
+      for (const seg of segments) {
+        seg.y -= trimMetrics.overTrim;
+      }
+      totalHeight -= trimMetrics.overTrim;
+    }
+    if (textBoxTrim === "trim-end" || textBoxTrim === "trim-both") {
+      totalHeight -= trimMetrics.underTrim;
+    }
+  }
   return {
     segments,
     width: maxLineWidth,
@@ -678,10 +768,7 @@ function drawRect(ctx, x, y, width, height, style) {
   drawBorders(ctx, x, y, width, height, style, borderRadius);
 }
 function resolveRadius(v, width, height) {
-  if (typeof v === "string" && v.endsWith("%")) {
-    const pct = parseFloat(v) / 100;
-    return pct * Math.min(width, height);
-  }
+  if (typeof v === "string") return parseCSSLength(v, Math.min(width, height));
   return toNumber(v);
 }
 function getBorderRadius(style, width, height) {
@@ -793,12 +880,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";
@@ -811,6 +892,349 @@ function mergeStyleIntoProps(props) {
   if (!style) return props;
   return { ...props, ...style };
 }
+function collectDefs(children) {
+  const clips = /* @__PURE__ */ new Map();
+  const gradients = /* @__PURE__ */ new Map();
+  for (const child of children) {
+    if (child.type !== "defs") continue;
+    for (const def of normalizeChildren(child)) {
+      const id = def.props.id;
+      if (!id) continue;
+      if (def.type === "clipPath") clips.set(id, normalizeChildren(def));
+      else if (def.type === "radialGradient" || def.type === "linearGradient")
+        gradients.set(id, def);
+    }
+  }
+  return { clips, gradients };
+}
+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 parseFrac(value, fallback) {
+  if (value == null) return fallback;
+  const s = String(value);
+  if (s.endsWith("%")) return parseFloat(s) / 100;
+  return Number(s);
+}
+function applyOpacity(color, opacity) {
+  if (opacity >= 1) return color;
+  const m = color.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
+  if (m)
+    return `rgba(${parseInt(m[1], 16)}, ${parseInt(m[2], 16)}, ${parseInt(m[3], 16)}, ${opacity})`;
+  return color;
+}
+function addGradientStops(gradient, def) {
+  for (const stop of normalizeChildren(def)) {
+    if (stop.type !== "stop") continue;
+    const sp = stop.props;
+    const offsetRaw = sp.offset ?? 0;
+    const offset = typeof offsetRaw === "string" && offsetRaw.endsWith("%") ? parseFloat(offsetRaw) / 100 : Number(offsetRaw);
+    const stopColor = sp.stopColor ?? sp["stop-color"] ?? "black";
+    const stopOpacity = Number(sp.stopOpacity ?? sp["stop-opacity"] ?? 1);
+    gradient.addColorStop(offset, applyOpacity(stopColor, stopOpacity));
+  }
+}
+function fillWithSvgGradient(ctx, def, bbox, path, fillRule) {
+  const props = def.props;
+  if (def.type === "linearGradient") {
+    const x1 = bbox.x + parseFrac(props.x1, 0) * bbox.width;
+    const y1 = bbox.y + parseFrac(props.y1, 0) * bbox.height;
+    const x2 = bbox.x + parseFrac(props.x2, 1) * bbox.width;
+    const y2 = bbox.y + parseFrac(props.y2, 0) * bbox.height;
+    const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
+    addGradientStops(gradient, def);
+    ctx.fillStyle = gradient;
+    ctx.fill(path, fillRule);
+    return true;
+  }
+  if (def.type === "radialGradient") {
+    const cxF = parseFrac(props.cx, 0.5);
+    const cyF = parseFrac(props.cy, 0.5);
+    const rF = parseFrac(props.r, 0.5);
+    const fxF = parseFrac(props.fx, cxF);
+    const fyF = parseFrac(props.fy, cyF);
+    ctx.save();
+    ctx.translate(bbox.x, bbox.y);
+    ctx.scale(bbox.width, bbox.height);
+    const gradient = ctx.createRadialGradient(fxF, fyF, 0, cxF, cyF, rF);
+    addGradientStops(gradient, def);
+    ctx.fillStyle = gradient;
+    const unitPath = new Path2D();
+    const invTransform = {
+      a: 1 / bbox.width,
+      b: 0,
+      c: 0,
+      d: 1 / bbox.height,
+      e: -bbox.x / bbox.width,
+      f: -bbox.y / bbox.height
+    };
+    unitPath.addPath(path, invTransform);
+    ctx.fill(unitPath, fillRule);
+    ctx.restore();
+    return true;
+  }
+  return false;
+}
+function strokeWithSvgGradient(ctx, def, bbox, path) {
+  const props = def.props;
+  if (def.type === "linearGradient") {
+    const x1 = bbox.x + parseFrac(props.x1, 0) * bbox.width;
+    const y1 = bbox.y + parseFrac(props.y1, 0) * bbox.height;
+    const x2 = bbox.x + parseFrac(props.x2, 1) * bbox.width;
+    const y2 = bbox.y + parseFrac(props.y2, 0) * bbox.height;
+    const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
+    addGradientStops(gradient, def);
+    ctx.strokeStyle = gradient;
+    ctx.stroke(path);
+    return true;
+  }
+  if (def.type === "radialGradient") {
+    const cxAbs = bbox.x + parseFrac(props.cx, 0.5) * bbox.width;
+    const cyAbs = bbox.y + parseFrac(props.cy, 0.5) * bbox.height;
+    const rAbs = parseFrac(props.r, 0.5) * Math.sqrt(bbox.width * bbox.height);
+    const fxAbs = bbox.x + parseFrac(props.fx, 0.5) * bbox.width;
+    const fyAbs = bbox.y + parseFrac(props.fy, 0.5) * bbox.height;
+    const gradient = ctx.createRadialGradient(
+      fxAbs,
+      fyAbs,
+      0,
+      cxAbs,
+      cyAbs,
+      rAbs
+    );
+    addGradientStops(gradient, def);
+    ctx.strokeStyle = gradient;
+    ctx.stroke(path);
+    return true;
+  }
+  return false;
+}
+function pathBBox(d) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  let cx = 0;
+  let cy = 0;
+  const update = (x, y) => {
+    if (x < minX) minX = x;
+    if (x > maxX) maxX = x;
+    if (y < minY) minY = y;
+    if (y > maxY) maxY = y;
+  };
+  const tokens = d.match(/[a-zA-Z]|[-+]?(?:\d+\.?\d*|\.\d+)(?:[eE][-+]?\d+)?/g);
+  if (!tokens) return { x: 0, y: 0, width: 0, height: 0 };
+  let cmd = "";
+  let i = 0;
+  const num = () => Number(tokens[i++]);
+  while (i < tokens.length) {
+    const t = tokens[i];
+    if (/[a-zA-Z]/.test(t)) {
+      cmd = t;
+      i++;
+    }
+    switch (cmd) {
+      case "M":
+        cx = num();
+        cy = num();
+        update(cx, cy);
+        cmd = "L";
+        break;
+      case "m":
+        cx += num();
+        cy += num();
+        update(cx, cy);
+        cmd = "l";
+        break;
+      case "L":
+        cx = num();
+        cy = num();
+        update(cx, cy);
+        break;
+      case "l":
+        cx += num();
+        cy += num();
+        update(cx, cy);
+        break;
+      case "H":
+        cx = num();
+        update(cx, cy);
+        break;
+      case "h":
+        cx += num();
+        update(cx, cy);
+        break;
+      case "V":
+        cy = num();
+        update(cx, cy);
+        break;
+      case "v":
+        cy += num();
+        update(cx, cy);
+        break;
+      case "C": {
+        for (let j = 0; j < 3; j++) {
+          const px = num();
+          const py = num();
+          update(px, py);
+        }
+        cx = Number(tokens[i - 2]);
+        cy = Number(tokens[i - 1]);
+        break;
+      }
+      case "c": {
+        for (let j = 0; j < 3; j++) {
+          const dx = num();
+          const dy = num();
+          update(cx + dx, cy + dy);
+          if (j === 2) {
+            cx += dx;
+            cy += dy;
+          }
+        }
+        break;
+      }
+      case "Q": {
+        for (let j = 0; j < 2; j++) {
+          const px = num();
+          const py = num();
+          update(px, py);
+        }
+        cx = Number(tokens[i - 2]);
+        cy = Number(tokens[i - 1]);
+        break;
+      }
+      case "q": {
+        for (let j = 0; j < 2; j++) {
+          const dx = num();
+          const dy = num();
+          update(cx + dx, cy + dy);
+          if (j === 1) {
+            cx += dx;
+            cy += dy;
+          }
+        }
+        break;
+      }
+      case "A": {
+        num();
+        num();
+        num();
+        num();
+        num();
+        cx = num();
+        cy = num();
+        update(cx, cy);
+        break;
+      }
+      case "a": {
+        num();
+        num();
+        num();
+        num();
+        num();
+        cx += num();
+        cy += num();
+        update(cx, cy);
+        break;
+      }
+      case "Z":
+      case "z":
+        break;
+      default:
+        i++;
+        break;
+    }
+  }
+  if (!isFinite(minX)) return { x: 0, y: 0, width: 0, height: 0 };
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function pointsBBox(points) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const [x, y] of points) {
+    if (x < minX) minX = x;
+    if (x > maxX) maxX = x;
+    if (y < minY) minY = y;
+    if (y > maxY) maxY = y;
+  }
+  if (!isFinite(minX)) return { x: 0, y: 0, width: 0, height: 0 };
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+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);
@@ -831,60 +1255,75 @@ 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) {
+var EMPTY_DEFS = {
+  clips: /* @__PURE__ */ new Map(),
+  gradients: /* @__PURE__ */ new Map()
+};
+function drawSvgChild(ctx, child, inheritedFill, color, defs = EMPTY_DEFS) {
   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.clips.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);
+      drawPath(ctx, props, inheritedFill, color, defs);
       break;
     case "circle":
-      drawCircle(ctx, props, inheritedFill, color);
+      drawCircle(ctx, props, inheritedFill, color, defs);
       break;
     case "rect":
-      drawSvgRect(ctx, props, inheritedFill, color);
+      drawSvgRect(ctx, props, inheritedFill, color, defs);
       break;
     case "line":
-      drawLine(ctx, props, color);
+      drawLine(ctx, props, color, defs);
       break;
     case "ellipse":
-      drawEllipse(ctx, props, inheritedFill, color);
+      drawEllipse(ctx, props, inheritedFill, color, defs);
       break;
     case "polygon":
-      drawPolygon(ctx, props, inheritedFill, color);
+      drawPolygon(ctx, props, inheritedFill, color, defs);
       break;
     case "polyline":
-      drawPolyline(ctx, props, inheritedFill, color);
+      drawPolyline(ctx, props, inheritedFill, color, defs);
       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) {
+function drawPath(ctx, props, inheritedFill, color, defs) {
   const d = props.d;
   if (!d) return;
   const path = new Path2D(d);
-  applyFillAndStroke(ctx, props, path, inheritedFill, color);
+  const bbox = pathBBox(d);
+  applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
 }
-function drawCircle(ctx, props, inheritedFill, color) {
+function drawCircle(ctx, props, inheritedFill, color, defs) {
   const cx = Number(props.cx ?? 0);
   const cy = Number(props.cy ?? 0);
   const r = Number(props.r ?? 0);
   if (r <= 0) return;
   const path = new Path2D();
   path.arc(cx, cy, r, 0, Math.PI * 2);
-  applyFillAndStroke(ctx, props, path, inheritedFill, color);
+  const bbox = { x: cx - r, y: cy - r, width: 2 * r, height: 2 * r };
+  applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
 }
-function drawSvgRect(ctx, props, inheritedFill, color) {
+function drawSvgRect(ctx, props, inheritedFill, color, defs) {
   const rx = Number(props.x ?? 0);
   const ry = Number(props.y ?? 0);
   const w = Number(props.width ?? 0);
@@ -892,9 +1331,10 @@ function drawSvgRect(ctx, props, inheritedFill, color) {
   if (w <= 0 || h <= 0) return;
   const path = new Path2D();
   path.rect(rx, ry, w, h);
-  applyFillAndStroke(ctx, props, path, inheritedFill, color);
+  const bbox = { x: rx, y: ry, width: w, height: h };
+  applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
 }
-function drawLine(ctx, props, color) {
+function drawLine(ctx, props, color, defs) {
   const x1 = Number(props.x1 ?? 0);
   const y1 = Number(props.y1 ?? 0);
   const x2 = Number(props.x2 ?? 0);
@@ -902,9 +1342,15 @@ function drawLine(ctx, props, color) {
   const path = new Path2D();
   path.moveTo(x1, y1);
   path.lineTo(x2, y2);
-  applyStroke(ctx, props, path, color);
+  const bbox = {
+    x: Math.min(x1, x2),
+    y: Math.min(y1, y2),
+    width: Math.abs(x2 - x1),
+    height: Math.abs(y2 - y1)
+  };
+  applyStroke(ctx, props, path, color, defs, bbox);
 }
-function drawEllipse(ctx, props, inheritedFill, color) {
+function drawEllipse(ctx, props, inheritedFill, color, defs) {
   const cx = Number(props.cx ?? 0);
   const cy = Number(props.cy ?? 0);
   const rx = Number(props.rx ?? 0);
@@ -912,9 +1358,15 @@ function drawEllipse(ctx, props, inheritedFill, color) {
   if (rx <= 0 || ry <= 0) return;
   const path = new Path2D();
   path.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
-  applyFillAndStroke(ctx, props, path, inheritedFill, color);
+  const bbox = {
+    x: cx - rx,
+    y: cy - ry,
+    width: 2 * rx,
+    height: 2 * ry
+  };
+  applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
 }
-function drawPolygon(ctx, props, inheritedFill, color) {
+function drawPolygon(ctx, props, inheritedFill, color, defs) {
   const points = parsePoints(props.points);
   if (points.length < 2) return;
   const path = new Path2D();
@@ -923,9 +1375,10 @@ function drawPolygon(ctx, props, inheritedFill, color) {
     path.lineTo(points[i][0], points[i][1]);
   }
   path.closePath();
-  applyFillAndStroke(ctx, props, path, inheritedFill, color);
+  const bbox = pointsBBox(points);
+  applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
 }
-function drawPolyline(ctx, props, inheritedFill, color) {
+function drawPolyline(ctx, props, inheritedFill, color, defs) {
   const points = parsePoints(props.points);
   if (points.length < 2) return;
   const path = new Path2D();
@@ -933,19 +1386,88 @@ function drawPolyline(ctx, props, inheritedFill, color) {
   for (let i = 1; i < points.length; i++) {
     path.lineTo(points[i][0], points[i][1]);
   }
-  applyFillAndStroke(ctx, props, path, inheritedFill, color);
+  const bbox = pointsBBox(points);
+  applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
+}
+function applySvgTransform(ctx, transform) {
+  const re = /\b(translate|scale|rotate|skewX|skewY|matrix)\s*\(([^)]*)\)/g;
+  let match;
+  while ((match = re.exec(transform)) !== null) {
+    const fn = match[1];
+    const args = match[2].split(/[\s,]+/).filter(Boolean).map(Number);
+    switch (fn) {
+      case "translate":
+        ctx.translate(args[0] ?? 0, args[1] ?? 0);
+        break;
+      case "scale": {
+        const sx = args[0] ?? 1;
+        ctx.scale(sx, args[1] ?? sx);
+        break;
+      }
+      case "rotate": {
+        const angle = (args[0] ?? 0) * Math.PI / 180;
+        if (args.length >= 3) {
+          const cx = args[1];
+          const cy = args[2];
+          ctx.translate(cx, cy);
+          ctx.rotate(angle);
+          ctx.translate(-cx, -cy);
+        } else {
+          ctx.rotate(angle);
+        }
+        break;
+      }
+      case "skewX":
+        ctx.transform(
+          1,
+          0,
+          Math.tan((args[0] ?? 0) * Math.PI / 180),
+          1,
+          0,
+          0
+        );
+        break;
+      case "skewY":
+        ctx.transform(
+          1,
+          Math.tan((args[0] ?? 0) * Math.PI / 180),
+          0,
+          1,
+          0,
+          0
+        );
+        break;
+      case "matrix":
+        ctx.transform(
+          args[0] ?? 1,
+          args[1] ?? 0,
+          args[2] ?? 0,
+          args[3] ?? 1,
+          args[4] ?? 0,
+          args[5] ?? 0
+        );
+        break;
+    }
+  }
 }
-function drawGroup(ctx, node, inheritedFill, color) {
-  const children = node.children ?? node.props.children;
-  if (children == null) return;
+function drawGroup(ctx, node, inheritedFill, color, defs = EMPTY_DEFS) {
+  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) {
+  const transform = merged.transform;
+  if (transform) {
+    ctx.save();
+    applySvgTransform(ctx, transform);
+  }
+  for (const child of children) {
     if (child != null && typeof child === "object") {
-      drawSvgChild(ctx, child, groupFill, color);
+      drawSvgChild(ctx, child, groupFill, color, defs);
     }
   }
+  if (transform) {
+    ctx.restore();
+  }
 }
 function parsePoints(value) {
   if (!value) return [];
@@ -956,26 +1478,36 @@ function parsePoints(value) {
   }
   return result;
 }
-function applyFillAndStroke(ctx, props, path, inheritedFill, color) {
+function applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox) {
   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") {
+  const fillRef = parseUrlRef(fill);
+  if (fillRef) {
+    const gradientDef = defs.gradients.get(fillRef);
+    if (gradientDef) {
+      fillWithSvgGradient(ctx, gradientDef, bbox, path, fillRule ?? "nonzero");
+    }
+  } else if (fill !== "none") {
     ctx.fillStyle = fill;
     ctx.fill(path, fillRule ?? "nonzero");
   }
-  applyStroke(ctx, props, path, color);
+  applyStroke(ctx, props, path, color, defs, bbox);
 }
-function applyStroke(ctx, props, path, color) {
+function applyStroke(ctx, props, path, color, defs, bbox) {
   const stroke = resolveCurrentColor(props.stroke, color);
   if (!stroke || stroke === "none") return;
-  ctx.strokeStyle = stroke;
   ctx.lineWidth = Number(props.strokeWidth ?? props["stroke-width"] ?? 1);
   ctx.lineCap = props.strokeLinecap ?? props["stroke-linecap"] ?? "butt";
   ctx.lineJoin = props.strokeLinejoin ?? props["stroke-linejoin"] ?? "miter";
+  const strokeRef = parseUrlRef(stroke);
+  if (strokeRef) {
+    const gradientDef = defs.gradients.get(strokeRef);
+    if (gradientDef) {
+      strokeWithSvgGradient(ctx, gradientDef, bbox, path);
+      return;
+    }
+  }
+  ctx.strokeStyle = stroke;
   ctx.stroke(path);
 }
 
@@ -1419,12 +1951,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;
@@ -1445,10 +1977,10 @@ 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;
@@ -1614,12 +2146,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;
@@ -1640,10 +2172,10 @@ 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;
@@ -1674,6 +2206,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;
@@ -1690,8 +2226,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;
       }
@@ -1727,8 +2266,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;
@@ -1736,7 +2274,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));
@@ -1791,7 +2329,7 @@ function parseValue(v) {
   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));
@@ -1862,6 +2400,20 @@ function expandStyle(raw) {
     }
     delete style.border;
   }
+  for (const side of SIDES) {
+    const key = `border${side}`;
+    if (style[key] !== void 0) {
+      const parts = String(style[key]).split(/\s+/);
+      const width = parseValue(parts[0]);
+      const borderStyle = parts[1] ?? "solid";
+      const color = parts[2] ?? "black";
+      if (style[`${key}Width`] === void 0) style[`${key}Width`] = width;
+      if (style[`${key}Style`] === void 0)
+        style[`${key}Style`] = borderStyle;
+      if (style[`${key}Color`] === void 0) style[`${key}Color`] = color;
+      delete style[key];
+    }
+  }
   if (style.flex !== void 0) {
     const val = String(style.flex);
     const parts = val.split(/\s+/);
@@ -1903,13 +2455,34 @@ function expandStyle(raw) {
     if (style.overflowX === void 0) style.overflowX = style.overflow;
     if (style.overflowY === void 0) style.overflowY = style.overflow;
   }
+  if (style.textBox !== void 0) {
+    const val = String(style.textBox);
+    if (val === "normal" || val === "none") {
+      style.textBoxTrim ??= "none";
+    } else {
+      const parts = val.split(/\s+/);
+      style.textBoxTrim ??= parts[0];
+      if (parts.length > 1) {
+        style.textBoxEdge ??= parts.slice(1).join(" ");
+      }
+    }
+    delete style.textBox;
+  }
   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;
 }
 
 // src/jsx/style/compute.ts
+var ROOT_FONT_SIZE = 16;
 var DEFAULT_STYLE = {
   display: "flex",
   flexDirection: "row",
@@ -1919,7 +2492,7 @@ var DEFAULT_STYLE = {
   alignItems: "stretch",
   justifyContent: "flex-start",
   position: "relative",
-  fontSize: 16,
+  fontSize: ROOT_FONT_SIZE,
   fontWeight: 400,
   fontStyle: "normal",
   color: "black",
@@ -1944,7 +2517,9 @@ var INHERITABLE_PROPS = [
   "letterSpacing",
   "whiteSpace",
   "wordBreak",
-  "textOverflow"
+  "textOverflow",
+  "textBoxTrim",
+  "textBoxEdge"
 ];
 function resolveStyle(rawStyle, parentStyle) {
   const style = { ...rawStyle };
@@ -1954,8 +2529,15 @@ function resolveStyle(rawStyle, parentStyle) {
     }
   }
   if (typeof style.fontSize === "string") {
-    const parsed = parseFloat(style.fontSize);
-    style.fontSize = isNaN(parsed) ? parentStyle.fontSize : parsed;
+    const parentFontSize = typeof parentStyle.fontSize === "number" ? parentStyle.fontSize : ROOT_FONT_SIZE;
+    const resolved = resolveUnit(
+      style.fontSize,
+      0,
+      0,
+      parentFontSize,
+      ROOT_FONT_SIZE
+    );
+    style.fontSize = typeof resolved === "number" ? resolved : parentFontSize;
   }
   if (typeof style.lineHeight === "string") {
     const str = style.lineHeight;
@@ -1969,9 +2551,16 @@ function resolveStyle(rawStyle, parentStyle) {
     }
   }
   if (typeof style.letterSpacing === "string") {
-    const parsed = parseFloat(style.letterSpacing);
-    if (!isNaN(parsed)) {
-      style.letterSpacing = parsed;
+    const currentFontSize = typeof style.fontSize === "number" ? style.fontSize : typeof parentStyle.fontSize === "number" ? parentStyle.fontSize : ROOT_FONT_SIZE;
+    const resolved = resolveUnit(
+      style.letterSpacing,
+      0,
+      0,
+      currentFontSize,
+      ROOT_FONT_SIZE
+    );
+    if (typeof resolved === "number") {
+      style.letterSpacing = resolved;
     }
   }
   return style;
@@ -2059,7 +2648,7 @@ function resolveUnit(value, viewportWidth, viewportHeight, fontSize, rootFontSiz
   }
   return value;
 }
-function resolveUnits(style, viewportWidth, viewportHeight, rootFontSize = DEFAULT_STYLE.fontSize) {
+function resolveUnits(style, viewportWidth, viewportHeight, rootFontSize = ROOT_FONT_SIZE) {
   const fontSize = typeof style.fontSize === "number" ? style.fontSize : rootFontSize;
   for (const prop of DIMENSION_PROPS) {
     const value = style[prop];
@@ -2075,8 +2664,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, {
@@ -2265,16 +2887,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);
@@ -2283,7 +2907,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",
@@ -2324,7 +2948,8 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
           viewportWidth,
           viewportHeight,
           ctx,
-          emojiEnabled
+          emojiEnabled,
+          fontFamilies
         )
       );
     }
@@ -2349,12 +2974,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);
@@ -2472,7 +3098,8 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
           viewportWidth,
           viewportHeight,
           ctx,
-          emojiEnabled
+          emojiEnabled,
+          fontFamilies
         )
       );
     }
@@ -2540,12 +3167,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);
 }