@effing/canvas 0.18.6 → 0.19.1

package/dist/index.js

@@ -110,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,
@@ -295,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,
@@ -714,10 +784,10 @@ function getBorderRadiusFromStyle(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;
-  const tw = toNumber(style.borderTopWidth);
-  const rw = toNumber(style.borderRightWidth);
-  const bw = toNumber(style.borderBottomWidth);
-  const lw = toNumber(style.borderLeftWidth);
+  const tw = resolveBoxValue(style.borderTopWidth, width);
+  const rw = resolveBoxValue(style.borderRightWidth, width);
+  const bw = resolveBoxValue(style.borderBottomWidth, width);
+  const lw = resolveBoxValue(style.borderLeftWidth, width);
   if (tw === 0 && rw === 0 && bw === 0 && lw === 0) return;
   const allSameWidth = tw === rw && rw === bw && bw === lw && tw > 0;
   const tc = style.borderTopColor ?? "black";
@@ -823,20 +893,19 @@ function mergeStyleIntoProps(props) {
   return { ...props, ...style };
 }
 function collectDefs(children) {
-  const defs = /* @__PURE__ */ new Map();
+  const clips = /* @__PURE__ */ new Map();
+  const gradients = /* @__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));
-        }
-      }
+    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 defs;
+  return { clips, gradients };
 }
 function parseUrlRef(value) {
   if (typeof value !== "string") return void 0;
@@ -848,7 +917,267 @@ function normalizeChildren(node) {
   if (raw == null) return [];
   return Array.isArray(raw) ? raw : [raw];
 }
-function buildPath(child) {
+function svgLength(value, reference, fallback = 0) {
+  if (value == null) return fallback;
+  const s = String(value);
+  if (s.endsWith("%")) return parseFloat(s) / 100 * reference;
+  const n = Number(s);
+  return isNaN(n) ? fallback : n;
+}
+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, vbW, vbH) {
   const props = mergeStyleIntoProps(child.props);
   switch (child.type) {
     case "path": {
@@ -857,29 +1186,29 @@ function buildPath(child) {
       return new Path2D(d);
     }
     case "circle": {
-      const cx = Number(props.cx ?? 0);
-      const cy = Number(props.cy ?? 0);
-      const r = Number(props.r ?? 0);
+      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();
       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);
+      const rx = svgLength(props.x, vbW);
+      const ry = svgLength(props.y, vbH);
+      const w = svgLength(props.width, vbW);
+      const h = svgLength(props.height, vbH);
       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);
+      const cx = svgLength(props.cx, vbW);
+      const cy = svgLength(props.cy, 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();
       p.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
@@ -900,10 +1229,10 @@ function buildPath(child) {
       return void 0;
   }
 }
-function buildClipPath(shapes) {
+function buildClipPath(shapes, vbW, vbH) {
   let combined;
   for (const shape of shapes) {
-    const p = buildPath(shape);
+    const p = buildPath(shape, vbW, vbH);
     if (!p) continue;
     if (!combined) {
       combined = p;
@@ -917,10 +1246,14 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
   ctx.save();
   ctx.translate(x, y);
   const viewBox = node.props.viewBox;
+  let vbW = width;
+  let vbH = height;
   if (viewBox) {
     const parts = viewBox.split(/[\s,]+/).map(Number);
     if (parts.length === 4) {
-      const [vbX, vbY, vbW, vbH] = parts;
+      const [vbX, vbY, parsedW, parsedH] = parts;
+      vbW = parsedW;
+      vbH = parsedH;
       const scaleX = width / vbW;
       const scaleY = height / vbH;
       ctx.scale(scaleX, scaleY);
@@ -938,94 +1271,113 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
     );
     const defs = collectDefs(svgChildren);
     for (const child of svgChildren) {
-      drawSvgChild(ctx, child, inheritedFill, color, defs);
+      drawSvgChild(ctx, child, inheritedFill, color, defs, vbW, vbH);
     }
   }
   ctx.restore();
 }
-function drawSvgChild(ctx, child, inheritedFill, color, defs = /* @__PURE__ */ new Map()) {
+var EMPTY_DEFS = {
+  clips: /* @__PURE__ */ new Map(),
+  gradients: /* @__PURE__ */ new Map()
+};
+function drawSvgChild(ctx, child, inheritedFill, color, defs = EMPTY_DEFS, vbW = 0, vbH = 0) {
   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;
+  const clipShapes = clipRef ? defs.clips.get(clipRef) : void 0;
+  const clipPath = clipShapes ? buildClipPath(clipShapes, vbW, vbH) : 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, vbW, vbH);
       break;
     case "rect":
-      drawSvgRect(ctx, props, inheritedFill, color);
+      drawSvgRect(ctx, props, inheritedFill, color, defs, vbW, vbH);
       break;
     case "line":
-      drawLine(ctx, props, color);
+      drawLine(ctx, props, color, defs, vbW, vbH);
       break;
     case "ellipse":
-      drawEllipse(ctx, props, inheritedFill, color);
+      drawEllipse(ctx, props, inheritedFill, color, defs, vbW, vbH);
       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, defs);
+      drawGroup(ctx, child, inheritedFill, color, defs, vbW, vbH);
       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) {
-  const cx = Number(props.cx ?? 0);
-  const cy = Number(props.cy ?? 0);
-  const r = Number(props.r ?? 0);
+function drawCircle(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
+  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;
   const path = new Path2D();
   path.arc(cx, cy, r, 0, Math.PI * 2);
-  applyFillAndStroke(ctx, props, path, inheritedFill, color);
-}
-function drawSvgRect(ctx, props, inheritedFill, color) {
-  const rx = Number(props.x ?? 0);
-  const ry = Number(props.y ?? 0);
-  const w = Number(props.width ?? 0);
-  const h = Number(props.height ?? 0);
+  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, defs, vbW = 0, vbH = 0) {
+  const rx = svgLength(props.x, vbW);
+  const ry = svgLength(props.y, vbH);
+  const w = svgLength(props.width, vbW);
+  const h = svgLength(props.height, vbH);
   if (w <= 0 || h <= 0) return;
   const path = new Path2D();
   path.rect(rx, ry, w, h);
-  applyFillAndStroke(ctx, props, path, inheritedFill, color);
-}
-function drawLine(ctx, props, color) {
-  const x1 = Number(props.x1 ?? 0);
-  const y1 = Number(props.y1 ?? 0);
-  const x2 = Number(props.x2 ?? 0);
-  const y2 = Number(props.y2 ?? 0);
+  const bbox = { x: rx, y: ry, width: w, height: h };
+  applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox);
+}
+function drawLine(ctx, props, color, defs, vbW = 0, vbH = 0) {
+  const x1 = svgLength(props.x1, vbW);
+  const y1 = svgLength(props.y1, vbH);
+  const x2 = svgLength(props.x2, vbW);
+  const y2 = svgLength(props.y2, vbH);
   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) {
-  const cx = Number(props.cx ?? 0);
-  const cy = Number(props.cy ?? 0);
-  const rx = Number(props.rx ?? 0);
-  const ry = Number(props.ry ?? 0);
+function drawEllipse(ctx, props, inheritedFill, color, defs, vbW = 0, vbH = 0) {
+  const cx = svgLength(props.cx, vbW);
+  const cy = svgLength(props.cy, vbH);
+  const rx = svgLength(props.rx, vbW);
+  const ry = svgLength(props.ry, vbH);
   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();
@@ -1034,9 +1386,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();
@@ -1044,18 +1397,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, defs = /* @__PURE__ */ new Map()) {
+function drawGroup(ctx, node, inheritedFill, color, defs = EMPTY_DEFS, vbW = 0, vbH = 0) {
   const children = normalizeChildren(node);
   if (children.length === 0) return;
   const merged = mergeStyleIntoProps(node.props);
   const groupFill = resolveCurrentColor(merged.fill, color) ?? inheritedFill;
+  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, defs);
+      drawSvgChild(ctx, child, groupFill, color, defs, vbW, vbH);
     }
   }
+  if (transform) {
+    ctx.restore();
+  }
 }
 function parsePoints(value) {
   if (!value) return [];
@@ -1066,26 +1489,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);
 }
 
@@ -1529,12 +1962,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 = 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 paddingTop = resolveBoxValue(style.paddingTop, width);
+    const paddingLeft = resolveBoxValue(style.paddingLeft, width);
+    const paddingRight = resolveBoxValue(style.paddingRight, width);
+    const borderTopW = resolveBoxValue(style.borderTopWidth, width);
+    const borderLeftW = resolveBoxValue(style.borderLeftWidth, width);
+    const borderRightW = resolveBoxValue(style.borderRightWidth, width);
     const contentX = x + paddingLeft + borderLeftW;
     const contentY = y + paddingTop + borderTopW;
     const contentWidth = width - paddingLeft - paddingRight - borderLeftW - borderRightW;
@@ -1555,10 +1988,10 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
     );
   }
   if (node.type === "img" && node.props.src) {
-    const paddingTop = toNumber(style.paddingTop);
-    const paddingLeft = toNumber(style.paddingLeft);
-    const paddingRight = toNumber(style.paddingRight);
-    const paddingBottom = toNumber(style.paddingBottom);
+    const paddingTop = resolveBoxValue(style.paddingTop, width);
+    const paddingLeft = resolveBoxValue(style.paddingLeft, width);
+    const paddingRight = resolveBoxValue(style.paddingRight, width);
+    const paddingBottom = resolveBoxValue(style.paddingBottom, width);
     const imgX = x + paddingLeft;
     const imgY = y + paddingTop;
     const imgW = width - paddingLeft - paddingRight;
@@ -1724,12 +2157,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 = 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 paddingTop = resolveBoxValue(style.paddingTop, width);
+    const paddingLeft = resolveBoxValue(style.paddingLeft, width);
+    const paddingRight = resolveBoxValue(style.paddingRight, width);
+    const borderTopW = resolveBoxValue(style.borderTopWidth, width);
+    const borderLeftW = resolveBoxValue(style.borderLeftWidth, width);
+    const borderRightW = resolveBoxValue(style.borderRightWidth, width);
     const contentX = x + paddingLeft + borderLeftW;
     const contentY = y + paddingTop + borderTopW;
     const contentWidth = width - paddingLeft - paddingRight - borderLeftW - borderRightW;
@@ -1750,10 +2183,10 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
     );
   }
   if (node.type === "img" && node.props.src) {
-    const paddingTop = toNumber(style.paddingTop);
-    const paddingLeft = toNumber(style.paddingLeft);
-    const paddingRight = toNumber(style.paddingRight);
-    const paddingBottom = toNumber(style.paddingBottom);
+    const paddingTop = resolveBoxValue(style.paddingTop, width);
+    const paddingLeft = resolveBoxValue(style.paddingLeft, width);
+    const paddingRight = resolveBoxValue(style.paddingRight, width);
+    const paddingBottom = resolveBoxValue(style.paddingBottom, width);
     const imgX = x + paddingLeft;
     const imgY = y + paddingTop;
     const imgW = width - paddingLeft - paddingRight;
@@ -1858,6 +2291,14 @@ function toNumber(v) {
   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;
+}
 
 // src/jsx/font.ts
 import { GlobalFonts } from "@napi-rs/canvas";
@@ -1978,6 +2419,20 @@ function expandStyle(raw, fontFamilies) {
     }
     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+/);
@@ -2019,6 +2474,19 @@ function expandStyle(raw, fontFamilies) {
     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") {
     const families = style.fontFamily.split(",").map((s) => s.trim().replace(/^['"]|['"]$/g, "")).filter(Boolean);
     if (fontFamilies) {
@@ -2033,6 +2501,7 @@ function expandStyle(raw, fontFamilies) {
 }
 
 // src/jsx/style/compute.ts
+var ROOT_FONT_SIZE = 16;
 var DEFAULT_STYLE = {
   display: "flex",
   flexDirection: "row",
@@ -2042,7 +2511,7 @@ var DEFAULT_STYLE = {
   alignItems: "stretch",
   justifyContent: "flex-start",
   position: "relative",
-  fontSize: 16,
+  fontSize: ROOT_FONT_SIZE,
   fontWeight: 400,
   fontStyle: "normal",
   color: "black",
@@ -2067,7 +2536,9 @@ var INHERITABLE_PROPS = [
   "letterSpacing",
   "whiteSpace",
   "wordBreak",
-  "textOverflow"
+  "textOverflow",
+  "textBoxTrim",
+  "textBoxEdge"
 ];
 function resolveStyle(rawStyle, parentStyle) {
   const style = { ...rawStyle };
@@ -2077,8 +2548,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;
@@ -2092,9 +2570,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;
@@ -2182,7 +2667,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];
@@ -2533,15 +3018,15 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
       if (parts.length === 4) {
         const [, , vbW, vbH] = parts;
         if (vbW > 0 && vbH > 0) {
-          const w = typeof style.width === "number" ? style.width : void 0;
-          const h = typeof style.height === "number" ? style.height : void 0;
-          if (w !== void 0 && h === void 0) {
-            style.height = w * (vbH / vbW);
-          } else if (h !== void 0 && w === void 0) {
-            style.width = h * (vbW / vbH);
-          } else if (w === void 0 && h === void 0) {
+          const wSet = style.width !== void 0;
+          const hSet = style.height !== void 0;
+          if (!wSet && !hSet) {
             style.width = vbW;
             style.height = vbH;
+          } else if (!hSet && typeof style.width === "number") {
+            style.height = style.width * (vbH / vbW);
+          } else if (!wSet && typeof style.height === "number") {
+            style.width = style.height * (vbW / vbH);
           }
         }
       }
@@ -2562,12 +3047,12 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
         const image = await loadImage4(src);
         const naturalW = image.width;
         const naturalH = image.height;
-        const w = typeof style.width === "number" ? style.width : void 0;
-        const h = typeof style.height === "number" ? style.height : void 0;
-        if (w !== void 0 && h === void 0 && naturalW > 0) {
-          style.height = w * (naturalH / naturalW);
-        } else if (h !== void 0 && w === void 0 && naturalH > 0) {
-          style.width = h * (naturalW / naturalH);
+        const wSet = style.width !== void 0;
+        const hSet = style.height !== void 0;
+        if (wSet && !hSet && typeof style.width === "number" && naturalW > 0) {
+          style.height = style.width * (naturalH / naturalW);
+        } else if (hSet && !wSet && typeof style.height === "number" && naturalH > 0) {
+          style.width = style.height * (naturalW / naturalH);
         }
         props.__loadedImage = image;
       } catch {