@effing/canvas 0.41.0 → 0.42.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/index.ts
-import { createCanvas as _createCanvas } from "@napi-rs/canvas";
+import { createCanvas as _createCanvas } from "@effing/skia";
 import {
   Canvas,
   GlobalFonts as GlobalFonts2,
@@ -13,10 +13,10 @@ import {
   FillType,
   StrokeJoin,
   StrokeCap
-} from "@napi-rs/canvas";
+} from "@effing/skia";
 
 // src/image.ts
-import { loadImage as nativeLoadImage } from "@napi-rs/canvas";
+import { loadImage as nativeLoadImage } from "@effing/skia";
 function loadImage(source, options) {
   const remoteUrl = typeof source === "string" && isRemoteUrl(source) ? source : source instanceof URL && isRemoteUrl(source.href) ? source.href : void 0;
   if (remoteUrl !== void 0) {
@@ -56,7 +56,7 @@ async function loadRemoteImage(url, userAgent) {
 }
 
 // src/lottie.ts
-import { LottieAnimation } from "@napi-rs/canvas";
+import { LottieAnimation } from "@effing/skia";
 function loadLottie(data, options) {
   const jsonString = typeof data === "string" ? data : data.toString("utf-8");
   return LottieAnimation.loadFromData(jsonString, {
@@ -321,7 +321,7 @@ function resolveLengthUnits(transform, viewportWidth, viewportHeight, fontSize,
 }
 
 // src/jsx/font.ts
-import { GlobalFonts } from "@napi-rs/canvas";
+import { GlobalFonts } from "@effing/skia";
 
 // src/jsx/font-metrics.ts
 import { inflateSync } from "zlib";
@@ -493,7 +493,7 @@ function findBreakOpportunities(text) {
 }
 
 // src/jsx/text/measure.ts
-import { createCanvas } from "@napi-rs/canvas";
+import { createCanvas } from "@effing/skia";
 var scratchCtx = null;
 function getScratchCtx() {
   if (!scratchCtx) {
@@ -501,6 +501,16 @@ function getScratchCtx() {
   }
   return scratchCtx;
 }
+function withUnsnappedText(ctx, fn) {
+  const previous = ctx.textRendering;
+  if (previous === "geometricPrecision") return fn();
+  ctx.textRendering = "geometricPrecision";
+  try {
+    return fn();
+  } finally {
+    ctx.textRendering = previous;
+  }
+}
 var GENERIC_FAMILIES = /* @__PURE__ */ new Set([
   "serif",
   "sans-serif",
@@ -520,14 +530,16 @@ function quoteFontFamily(family) {
   if (!family || GENERIC_FAMILIES.has(family)) return family;
   return `"${family}"`;
 }
+function quoteFontFamilies(fontFamily) {
+  return fontFamily.split(",").map((f) => quoteFontFamily(f.trim())).join(", ");
+}
 function setFont(ctx, fontSize, fontFamily, fontWeight = 400, fontStyle = "normal") {
-  const quoted = fontFamily.split(",").map((f) => quoteFontFamily(f.trim())).join(", ");
-  ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${quoted}`;
+  ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${quoteFontFamilies(fontFamily)}`;
 }
 function measureText(text, fontSize, fontFamily, fontWeight = 400, fontStyle = "normal", ctx) {
   const c = ctx ?? getScratchCtx();
   setFont(c, fontSize, fontFamily, fontWeight, fontStyle);
-  const m = c.measureText(text);
+  const m = withUnsnappedText(c, () => c.measureText(text));
   const ascent = m.fontBoundingBoxAscent ?? m.actualBoundingBoxAscent ?? fontSize * 0.8;
   const descent = m.fontBoundingBoxDescent ?? m.actualBoundingBoxDescent ?? fontSize * 0.2;
   return {
@@ -540,7 +552,8 @@ function measureText(text, fontSize, fontFamily, fontWeight = 400, fontStyle = "
 function measureTrimMetrics(fontSize, fontFamily, fontWeight, fontStyle, lineHeight, edge, ctx, fontMetrics) {
   const c = ctx ?? getScratchCtx();
   setFont(c, fontSize, fontFamily, fontWeight, fontStyle);
-  const refMetrics = c.measureText("M");
+  const measure = (text) => withUnsnappedText(c, () => c.measureText(text));
+  const refMetrics = measure("M");
   let fontAscent;
   let fontDescent;
   if (fontMetrics) {
@@ -557,12 +570,12 @@ function measureTrimMetrics(fontSize, fontFamily, fontWeight, fontStyle, lineHei
   let targetAscent;
   switch (overEdge) {
     case "cap": {
-      const capMetrics = c.measureText("H");
+      const capMetrics = measure("H");
       targetAscent = capMetrics.actualBoundingBoxAscent ?? fontSize * 0.7;
       break;
     }
     case "ex": {
-      const exMetrics = c.measureText("x");
+      const exMetrics = measure("x");
       targetAscent = exMetrics.actualBoundingBoxAscent ?? fontSize * 0.5;
       break;
     }
@@ -606,6 +619,141 @@ function measureWord(word, fontSize, fontFamily, fontWeight = 400, fontStyle = "
   return base + letterSpacing * word.length;
 }
 
+// src/jsx/text/native.ts
+import { Paragraph } from "@effing/skia/extensions";
+function canLayoutNatively(text, style, emojiEnabled) {
+  if (text === "") return false;
+  if (style.wordBreak === "break-all") return false;
+  if (style.whiteSpace === "pre" && /[ \t](?:\n|$)/.test(text)) return false;
+  if (emojiEnabled) {
+    for (const char of text) {
+      if (isEmoji(char)) return false;
+    }
+  }
+  return true;
+}
+function toWeight(weight) {
+  if (typeof weight === "number") return weight;
+  if (weight === "bold") return 700;
+  const parsed = parseInt(String(weight ?? "400"), 10);
+  return isNaN(parsed) ? 400 : parsed;
+}
+function toFontStyle(fontStyle) {
+  if (fontStyle?.startsWith("italic")) return "italic";
+  if (fontStyle?.startsWith("oblique")) return "oblique";
+  return "normal";
+}
+var TEXT_ALIGNS = /* @__PURE__ */ new Set([
+  "left",
+  "right",
+  "center",
+  "justify",
+  "start",
+  "end"
+]);
+function toTextAlign(textAlign) {
+  return textAlign !== void 0 && TEXT_ALIGNS.has(textAlign) ? textAlign : "left";
+}
+var MIN_WIDTH = 0.01;
+var MAX_PENDING_PARAGRAPHS = 2e3;
+var pendingParagraphs = 0;
+var turnWatched = false;
+function countParagraph() {
+  pendingParagraphs++;
+  if (turnWatched) return;
+  turnWatched = true;
+  setImmediate(() => {
+    pendingParagraphs = 0;
+    turnWatched = false;
+  });
+}
+async function releaseParagraphs() {
+  if (pendingParagraphs < MAX_PENDING_PARAGRAPHS) return;
+  await new Promise((resolve) => setImmediate(resolve));
+}
+function layoutTextNative(text, style, maxWidth, lineHeight) {
+  const fontSize = style.fontSize ?? 16;
+  const fontFamily = style.fontFamily ?? DEFAULT_FONT_FAMILY;
+  const fontWeight = style.fontWeight ?? 400;
+  const fontStyle = style.fontStyle ?? "normal";
+  const letterSpacing = typeof style.letterSpacing === "number" ? style.letterSpacing : 0;
+  const whiteSpace = style.whiteSpace ?? "normal";
+  const noWrap = whiteSpace === "nowrap" || whiteSpace === "pre";
+  const lineClamp = style.lineClamp && style.lineClamp > 0 ? style.lineClamp : void 0;
+  const ellipsis = lineClamp !== void 0 || noWrap && style.textOverflow === "ellipsis" ? "\u2026" : void 0;
+  const width = maxWidth > 0 ? maxWidth : MIN_WIDTH;
+  const paragraph = new Paragraph(text, {
+    fontFamily: quoteFontFamilies(fontFamily),
+    fontSize,
+    fontWeight: toWeight(fontWeight),
+    fontStyle: toFontStyle(fontStyle),
+    letterSpacing,
+    lineHeight: lineHeight ?? 0,
+    textAlign: toTextAlign(style.textAlign),
+    noWrap,
+    maxLines: lineClamp,
+    ellipsis
+  });
+  countParagraph();
+  const layout = paragraph.layout(width);
+  if (!noWrap && layout.minIntrinsicWidth > width) return null;
+  const segments = layout.lines.map((line, i) => ({
+    // A line that ends the text at a newline reports the newline as its text.
+    text: text.slice(line.startIndex, line.endIndex).replace(/\n/g, ""),
+    x: line.left,
+    y: line.baseline,
+    width: line.width,
+    height: layout.lineHeight,
+    fontSize,
+    fontFamily,
+    fontWeight,
+    fontStyle,
+    color: style.color ?? "black",
+    ascent: layout.ascent,
+    textDecoration: style.textDecoration,
+    letterSpacing,
+    lineIndex: i
+  }));
+  let height = layout.height;
+  if (lineHeight === void 0 && segments.length > 0) {
+    height = Math.ceil(height);
+  }
+  let paragraphOffsetY = 0;
+  const textBoxTrim = style.textBoxTrim;
+  if (textBoxTrim && textBoxTrim !== "none" && segments.length > 0) {
+    const fontMetrics = {
+      unitsPerEm: fontSize,
+      ascender: layout.ascent,
+      descender: -layout.descent
+    };
+    const trim = measureTrimMetrics(
+      fontSize,
+      fontFamily,
+      fontWeight,
+      fontStyle,
+      layout.lineHeight,
+      style.textBoxEdge ?? "text",
+      void 0,
+      fontMetrics
+    );
+    if (textBoxTrim === "trim-start" || textBoxTrim === "trim-both") {
+      for (const seg of segments) seg.y -= trim.overTrim;
+      height -= trim.overTrim;
+      paragraphOffsetY = -trim.overTrim;
+    }
+    if (textBoxTrim === "trim-end" || textBoxTrim === "trim-both") {
+      height -= trim.underTrim;
+    }
+  }
+  return {
+    segments,
+    width: segments.reduce((w, s) => Math.max(w, s.width), 0),
+    height,
+    paragraph,
+    paragraphOffsetY
+  };
+}
+
 // src/jsx/text/index.ts
 function emojiAwareMeasureWord(word, fontSize, fontFamily, fontWeight, fontStyle, ctx, letterSpacing = 0) {
   const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
@@ -651,6 +799,29 @@ function emojiAwareMeasureWord(word, fontSize, fontFamily, fontWeight, fontStyle
   return totalWidth;
 }
 function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
+  const fontSize = style.fontSize ?? 16;
+  const isAutoLineHeight = style.lineHeight === void 0 || style.lineHeight === "normal";
+  const lineHeight = isAutoLineHeight ? void 0 : resolveLineHeight(style.lineHeight, fontSize);
+  const hasLineBox = lineHeight === void 0 || lineHeight > 0;
+  if (hasLineBox && canLayoutNatively(text, style, emojiEnabled)) {
+    const result = layoutTextNative(
+      applyTextTransform(text, style),
+      style,
+      maxWidth,
+      lineHeight
+    );
+    if (result) {
+      const textStrokeWidth = resolveTextStrokeWidth(style, fontSize);
+      for (const seg of result.segments) {
+        seg.textStrokeWidth = textStrokeWidth;
+        seg.textStrokeColor = style.WebkitTextStrokeColor;
+      }
+      return result;
+    }
+  }
+  return layoutTextFallback(text, style, maxWidth, ctx, emojiEnabled);
+}
+function layoutTextFallback(text, style, maxWidth, ctx, emojiEnabled) {
   const fontSize = style.fontSize ?? 16;
   const fontFamily = style.fontFamily ?? DEFAULT_FONT_FAMILY;
   const fontWeight = style.fontWeight ?? 400;
@@ -677,16 +848,7 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
   const wordBreak = style.wordBreak ?? "normal";
   const textOverflow = style.textOverflow ?? "clip";
   const textDecoration = style.textDecoration;
-  let textStrokeWidth;
-  const rawStrokeWidth = style.WebkitTextStrokeWidth;
-  if (rawStrokeWidth !== void 0) {
-    if (typeof rawStrokeWidth === "number") {
-      textStrokeWidth = rawStrokeWidth;
-    } else {
-      const resolved = resolveUnit(String(rawStrokeWidth), 0, 0, fontSize, 16);
-      textStrokeWidth = typeof resolved === "number" ? resolved : void 0;
-    }
-  }
+  const textStrokeWidth = resolveTextStrokeWidth(style, fontSize);
   const textStrokeColor = style.WebkitTextStrokeColor;
   const measure = emojiEnabled ? (word, ls) => emojiAwareMeasureWord(
     word,
@@ -705,14 +867,7 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
     ctx,
     ls ?? letterSpacing
   );
-  let processedText = text;
-  if (style.textTransform === "uppercase") {
-    processedText = text.toUpperCase();
-  } else if (style.textTransform === "lowercase") {
-    processedText = text.toLowerCase();
-  } else if (style.textTransform === "capitalize") {
-    processedText = text.replace(/\b\w/g, (c) => c.toUpperCase());
-  }
+  const processedText = applyTextTransform(text, style);
   const noWrap = whiteSpace === "nowrap" || whiteSpace === "pre";
   const paragraphs = processedText.split("\n");
   const lines = [];
@@ -775,11 +930,12 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
     const lineWidth = measure(line);
+    const slack = Math.max(0, maxWidth - lineWidth);
     let x = 0;
     if (textAlign === "center") {
-      x = (maxWidth - lineWidth) / 2;
+      x = slack / 2;
     } else if (textAlign === "right") {
-      x = maxWidth - lineWidth;
+      x = slack;
     }
     const metrics = measureText(
       line || "M",
@@ -859,6 +1015,21 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
     height: totalHeight
   };
 }
+function resolveTextStrokeWidth(style, fontSize) {
+  const raw = style.WebkitTextStrokeWidth;
+  if (raw === void 0) return void 0;
+  if (typeof raw === "number") return raw;
+  const resolved = resolveUnit(String(raw), 0, 0, fontSize, 16);
+  return typeof resolved === "number" ? resolved : void 0;
+}
+function applyTextTransform(text, style) {
+  if (style.textTransform === "uppercase") return text.toUpperCase();
+  if (style.textTransform === "lowercase") return text.toLowerCase();
+  if (style.textTransform === "capitalize") {
+    return text.replace(/\b\w/g, (c) => c.toUpperCase());
+  }
+  return text;
+}
 function resolveLineHeight(lineHeight, fontSize, canvasMetrics, fontMetrics) {
   if (lineHeight === void 0 || lineHeight === "normal") {
     if (fontMetrics) {
@@ -889,7 +1060,7 @@ function wrapText(text, maxWidth, fontSize, fontFamily, fontWeight, fontStyle, l
   let lineStart = 0;
   let lastBreak = 0;
   for (const opp of breakOpps) {
-    const segment = text.slice(lineStart, opp.position);
+    const segment = text.slice(lineStart, opp.position).replace(/\s+$/, "");
     const segWidth = mw(segment);
     if (segWidth > maxWidth && lastBreak > lineStart) {
       const line = text.slice(lineStart, lastBreak).replace(/\s+$/, "");
@@ -1056,198 +1227,8 @@ function hasRadius(r) {
   return r.topLeft > 0 || r.topRight > 0 || r.bottomRight > 0 || r.bottomLeft > 0;
 }
 
-// src/jsx/draw/offscreen.ts
-import { createCanvas as createCanvas2 } from "@napi-rs/canvas";
-var canvasPool = /* @__PURE__ */ new Map();
-function acquireOffscreen(w, h) {
-  const key = `${w}x${h}`;
-  const stack = canvasPool.get(key);
-  if (stack) {
-    while (stack.length > 0) {
-      const ref = stack.pop();
-      const canvas2 = ref.deref();
-      if (canvas2) {
-        const ctx = canvas2.getContext("2d");
-        ctx.reset();
-        return [canvas2, ctx];
-      }
-    }
-  }
-  const canvas = createCanvas2(w, h);
-  return [canvas, canvas.getContext("2d")];
-}
-function releaseOffscreen(canvas) {
-  const key = `${canvas.width}x${canvas.height}`;
-  let stack = canvasPool.get(key);
-  if (!stack) {
-    stack = [];
-    canvasPool.set(key, stack);
-  }
-  stack.push(new WeakRef(canvas));
-}
-
-// src/jsx/draw/backdrop-filter.ts
-function drawBackdropFilter(ctx, filter, x, y, width, height, borderRadius) {
-  if (width <= 0 || height <= 0) return;
-  const normalized = filter.trim();
-  if (!normalized || normalized === "none") return;
-  const m = ctx.getTransform();
-  const det = m.a * m.d - m.b * m.c;
-  if (det === 0) return;
-  const pad = Math.ceil(filterBleed(normalized)) + 1;
-  const bx = x - pad;
-  const by = y - pad;
-  const bw = width + 2 * pad;
-  const bh = height + 2 * pad;
-  const bounds = transformedBounds(m, bx, by, bw, bh);
-  const rx = Math.floor(bounds.x0);
-  const ry = Math.floor(bounds.y0);
-  const rw = Math.ceil(bounds.x1) - rx;
-  const rh = Math.ceil(bounds.y1) - ry;
-  const canvasW = ctx.canvas.width;
-  const canvasH = ctx.canvas.height;
-  if (rx + rw <= 0 || ry + rh <= 0 || rx >= canvasW || ry >= canvasH) return;
-  const sx = Math.hypot(m.a, m.b);
-  const sy = Math.hypot(m.c, m.d);
-  const eps = 1e-6 * Math.max(sx, sy);
-  const similar = Math.abs(sx - sy) <= eps && Math.abs(m.a * m.c + m.b * m.d) <= eps * sx;
-  let bufW;
-  let bufH;
-  let scale;
-  if (similar) {
-    bufW = rw;
-    bufH = rh;
-    scale = sx;
-  } else {
-    scale = Math.max(sx, sy);
-    bufW = Math.ceil(bw * scale);
-    bufH = Math.ceil(bh * scale);
-  }
-  if (bufW <= 0 || bufH <= 0) return;
-  const [snapshot, snapCtx] = acquireOffscreen(bufW, bufH);
-  if (similar) {
-    snapCtx.translate(-rx, -ry);
-  } else {
-    const inv = invert(m, det);
-    snapCtx.setTransform(
-      scale * inv.a,
-      scale * inv.b,
-      scale * inv.c,
-      scale * inv.d,
-      scale * (inv.e - bx),
-      scale * (inv.f - by)
-    );
-  }
-  drawExtendedBackdrop(snapCtx, ctx.canvas, rx, ry, rw, rh);
-  const filtered = filterSnapshot(snapshot, normalized, scale);
-  releaseOffscreen(snapshot);
-  ctx.save();
-  applyClip(ctx, x, y, width, height, borderRadius);
-  ctx.filter = "none";
-  if (similar) {
-    ctx.setTransform(1, 0, 0, 1, 0, 0);
-    ctx.drawImage(filtered, 0, 0, bufW, bufH, rx, ry, bufW, bufH);
-  } else {
-    ctx.drawImage(filtered, 0, 0, bufW, bufH, bx, by, bw, bh);
-  }
-  ctx.restore();
-  releaseOffscreen(filtered);
-}
-function drawExtendedBackdrop(target, canvas, rx, ry, rw, rh) {
-  const cw = canvas.width;
-  const ch = canvas.height;
-  const ix0 = Math.max(rx, 0);
-  const iy0 = Math.max(ry, 0);
-  const ix1 = Math.min(rx + rw, cw);
-  const iy1 = Math.min(ry + rh, ch);
-  if (ix1 <= ix0 || iy1 <= iy0) return;
-  const iw = ix1 - ix0;
-  const ih = iy1 - iy0;
-  target.drawImage(canvas, ix0, iy0, iw, ih, ix0, iy0, iw, ih);
-  const left = ix0 - rx;
-  const right = rx + rw - ix1;
-  const top = iy0 - ry;
-  const bottom = ry + rh - iy1;
-  if (left > 0) target.drawImage(canvas, 0, iy0, 1, ih, rx, iy0, left, ih);
-  if (right > 0) {
-    target.drawImage(canvas, cw - 1, iy0, 1, ih, ix1, iy0, right, ih);
-  }
-  if (top > 0) target.drawImage(canvas, ix0, 0, iw, 1, ix0, ry, iw, top);
-  if (bottom > 0) {
-    target.drawImage(canvas, ix0, ch - 1, iw, 1, ix0, iy1, iw, bottom);
-  }
-  if (left > 0 && top > 0) {
-    target.drawImage(canvas, 0, 0, 1, 1, rx, ry, left, top);
-  }
-  if (right > 0 && top > 0) {
-    target.drawImage(canvas, cw - 1, 0, 1, 1, ix1, ry, right, top);
-  }
-  if (left > 0 && bottom > 0) {
-    target.drawImage(canvas, 0, ch - 1, 1, 1, rx, iy1, left, bottom);
-  }
-  if (right > 0 && bottom > 0) {
-    target.drawImage(canvas, cw - 1, ch - 1, 1, 1, ix1, iy1, right, bottom);
-  }
-}
-function filterSnapshot(snapshot, filter, scale) {
-  const [out, outCtx] = acquireOffscreen(snapshot.width, snapshot.height);
-  outCtx.filter = scale === 1 ? filter : scaleFilterLengths(filter, scale);
-  outCtx.drawImage(snapshot, 0, 0);
-  outCtx.filter = "none";
-  return out;
-}
-function transformedBounds(m, x, y, w, h) {
-  let x0 = Infinity;
-  let y0 = Infinity;
-  let x1 = -Infinity;
-  let y1 = -Infinity;
-  for (const [px, py] of [
-    [x, y],
-    [x + w, y],
-    [x, y + h],
-    [x + w, y + h]
-  ]) {
-    const dx = m.a * px + m.c * py + m.e;
-    const dy = m.b * px + m.d * py + m.f;
-    if (dx < x0) x0 = dx;
-    if (dx > x1) x1 = dx;
-    if (dy < y0) y0 = dy;
-    if (dy > y1) y1 = dy;
-  }
-  return { x0, y0, x1, y1 };
-}
-function invert(m, det) {
-  return {
-    a: m.d / det,
-    b: -m.b / det,
-    c: -m.c / det,
-    d: m.a / det,
-    e: (m.c * m.f - m.d * m.e) / det,
-    f: (m.b * m.e - m.a * m.f) / det
-  };
-}
-function filterBleed(filter) {
-  let bleed = 0;
-  for (const m of filter.matchAll(/blur\(\s*(-?\d*\.?\d+)(?:px)?\s*\)/g)) {
-    bleed += Math.abs(parseFloat(m[1])) * 3;
-  }
-  for (const m of filter.matchAll(/drop-shadow\(((?:[^()]|\([^()]*\))*)\)/g)) {
-    const args = m[1].replace(/[\w-]+\([^()]*\)/g, " ");
-    const nums = args.match(/-?\d*\.?\d+(?=px|\s|$)/g) ?? [];
-    const [ox = "0", oy = "0", blur = "0"] = nums;
-    bleed += Math.abs(parseFloat(ox)) + Math.abs(parseFloat(oy)) + Math.abs(parseFloat(blur)) * 3;
-  }
-  return bleed;
-}
-function scaleFilterLengths(filter, scale) {
-  return filter.replace(
-    /(?<![\w.])(-?\d*\.?\d+)px/g,
-    (_, n) => `${formatCSSNumber(parseFloat(n) * scale)}px`
-  );
-}
-
 // src/jsx/draw/clip-path.ts
-import { Path2D } from "@napi-rs/canvas";
+import { Path2D } from "@effing/skia";
 
 // src/jsx/draw/rect.ts
 function drawRect(ctx, x, y, width, height, style) {
@@ -1453,14 +1434,6 @@ function drawBorders(ctx, x, y, width, height, style, borderRadius) {
   }
 }
 var BOX_SHADOW_RE = /(-?\d+(?:\.\d+)?)\s*(?:px)?\s+(-?\d+(?:\.\d+)?)\s*(?:px)?\s+(-?\d+(?:\.\d+)?)\s*(?:px)?(?:\s+(-?\d+(?:\.\d+)?)\s*(?:px)?)?\s+(.*)/;
-function boxShadowExtent(boxShadow) {
-  const parts = boxShadow.match(BOX_SHADOW_RE);
-  if (!parts) return 0;
-  const offsetX = parseFloat(parts[1]);
-  const offsetY = parseFloat(parts[2]);
-  const blur = parseFloat(parts[3]);
-  return blur * 2 + Math.abs(offsetX) + Math.abs(offsetY);
-}
 function drawBoxShadow(ctx, x, y, width, height, boxShadow, borderRadius) {
   const parts = boxShadow.match(BOX_SHADOW_RE);
   if (!parts) return;
@@ -2308,6 +2281,32 @@ function splitGradientArgs(content) {
   return parts;
 }
 
+// src/jsx/draw/group.ts
+import { beginGroup, endGroup } from "@effing/skia/extensions";
+function isNoFilter(filter) {
+  if (!filter) return true;
+  const normalized = filter.trim();
+  return normalized === "" || normalized === "none";
+}
+function beginElementGroup(ctx, opacity, filter) {
+  const hasFilter = !isNoFilter(filter);
+  if (opacity >= 1 && !hasFilter) return false;
+  beginGroup(ctx, { opacity, filter: hasFilter ? filter.trim() : void 0 });
+  return true;
+}
+function endElementGroup(ctx) {
+  endGroup(ctx);
+}
+function drawBackdropFilter(ctx, filter, x, y, width, height, borderRadius, opacity) {
+  if (width <= 0 || height <= 0) return;
+  if (isNoFilter(filter)) return;
+  ctx.save();
+  applyClip(ctx, x, y, width, height, borderRadius);
+  beginGroup(ctx, { backdropFilter: filter.trim(), opacity });
+  endGroup(ctx);
+  ctx.restore();
+}
+
 // src/jsx/draw/object-fit.ts
 function computeCover(imgW, imgH, boxX, boxY, boxW, boxH) {
   const imgRatio = imgW / imgH;
@@ -2529,7 +2528,7 @@ function applySvgTransform(ctx, transform) {
 }
 
 // src/jsx/draw/svg/path.ts
-import { Path2D as Path2D2 } from "@napi-rs/canvas";
+import { Path2D as Path2D2 } from "@effing/skia";
 function pathBBox(d) {
   let minX = Infinity;
   let minY = Infinity;
@@ -2769,6 +2768,36 @@ function parsePoints(value) {
   return result;
 }
 
+// src/jsx/draw/offscreen.ts
+import { createCanvas as createCanvas2 } from "@effing/skia";
+var canvasPool = /* @__PURE__ */ new Map();
+function acquireOffscreen(w, h) {
+  const key = `${w}x${h}`;
+  const stack = canvasPool.get(key);
+  if (stack) {
+    while (stack.length > 0) {
+      const ref = stack.pop();
+      const canvas2 = ref.deref();
+      if (canvas2) {
+        const ctx = canvas2.getContext("2d");
+        ctx.reset();
+        return [canvas2, ctx];
+      }
+    }
+  }
+  const canvas = createCanvas2(w, h);
+  return [canvas, canvas.getContext("2d")];
+}
+function releaseOffscreen(canvas) {
+  const key = `${canvas.width}x${canvas.height}`;
+  let stack = canvasPool.get(key);
+  if (!stack) {
+    stack = [];
+    canvasPool.set(key, stack);
+  }
+  stack.push(new WeakRef(canvas));
+}
+
 // src/jsx/draw/svg/filters.ts
 function applyFeOffset(input, dx, dy, w, h) {
   const [canvas, ctx] = acquireOffscreen(w, h);
@@ -2918,10 +2947,10 @@ function applyFilter(filterDef, sourceGraphic, w, h) {
 }
 
 // src/jsx/draw/svg/shapes.ts
-import { Path2D as Path2D4 } from "@napi-rs/canvas";
+import { Path2D as Path2D4 } from "@effing/skia";
 
 // src/jsx/draw/svg/gradients.ts
-import { Path2D as Path2D3 } from "@napi-rs/canvas";
+import { Path2D as Path2D3 } from "@effing/skia";
 import parseCssColor from "parse-css-color";
 function parseFrac(value, fallback) {
   if (value == null) return fallback;
@@ -3374,7 +3403,8 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
 }
 
 // src/jsx/draw/text.ts
-import { loadImage as loadImage2 } from "@napi-rs/canvas";
+import { loadImage as loadImage2 } from "@effing/skia";
+import { fillParagraph, strokeParagraph } from "@effing/skia/extensions";
 import parseCssColor2 from "parse-css-color";
 
 // src/jsx/emoji.ts
@@ -3486,7 +3516,58 @@ function loadEmojiImage(style, char) {
   }
   return cached;
 }
-async function drawText(ctx, segments, offsetX, offsetY, textShadow, emojiStyle) {
+async function drawText(ctx, segments, offsetX, offsetY, textShadow, emojiStyle, native) {
+  if (native) {
+    drawParagraph(
+      ctx,
+      native.paragraph,
+      segments,
+      offsetX,
+      offsetY,
+      native.offsetY,
+      textShadow
+    );
+    return;
+  }
+  const textRendering = ctx.textRendering;
+  ctx.textRendering = "geometricPrecision";
+  try {
+    await drawSegments(ctx, segments, offsetX, offsetY, textShadow, emojiStyle);
+  } finally {
+    ctx.textRendering = textRendering;
+  }
+}
+function drawParagraph(ctx, paragraph, segments, offsetX, offsetY, paragraphOffsetY, textShadow) {
+  const first = segments[0];
+  if (!first) return;
+  const x = offsetX;
+  const y = offsetY + paragraphOffsetY;
+  const shadow = textShadow ? parseShadow(textShadow) : null;
+  ctx.fillStyle = first.color;
+  if (shadow) {
+    drawShadowPass(
+      ctx,
+      shadow,
+      getColorAlpha(first.color),
+      () => fillParagraph(ctx, paragraph, x, y)
+    );
+  }
+  if (first.textStrokeWidth !== void 0 && first.textStrokeWidth > 0) {
+    ctx.save();
+    ctx.lineWidth = first.textStrokeWidth;
+    ctx.strokeStyle = first.textStrokeColor ?? first.color;
+    ctx.lineJoin = "round";
+    strokeParagraph(ctx, paragraph, x, y);
+    ctx.restore();
+  }
+  fillParagraph(ctx, paragraph, x, y);
+  for (const seg of segments) {
+    if (seg.textDecoration) {
+      drawTextDecoration(ctx, seg, offsetX, offsetY);
+    }
+  }
+}
+async function drawSegments(ctx, segments, offsetX, offsetY, textShadow, emojiStyle) {
   const shadow = textShadow ? parseShadow(textShadow) : null;
   for (const seg of segments) {
     if (!seg.text) continue;
@@ -3706,139 +3787,30 @@ function drawTextDecoration(ctx, seg, offsetX, offsetY) {
 async function drawNode(ctx, node, parentX, parentY, context, emojiStyle) {
   const x = parentX + node.x;
   const y = parentY + node.y;
-  const { width, height, style } = node;
+  const { style } = node;
   const renderContext = context ?? {
     imageCache: /* @__PURE__ */ new Map(),
     debug: false
   };
   if (style.display === "none") return;
-  const opacity = style.opacity ?? 1;
+  const rawOpacity = Number(style.opacity ?? 1);
+  const opacity = Number.isFinite(rawOpacity) ? rawOpacity : 1;
   if (opacity <= 0) return;
-  const scaleInfo = style.transform ? extractScale(style.transform) : null;
-  const hasOtherTransforms = scaleInfo !== null && scaleInfo.remaining.length > 0;
-  const subtree = scaleInfo && (scaleInfo.sx !== 1 || scaleInfo.sy !== 1) && !hasOtherTransforms ? scanSubtree(node) : null;
-  if (scaleInfo && subtree && !subtree.hasBackdropFilter) {
-    const sx = scaleInfo.sx;
-    const sy = scaleInfo.sy;
-    const transformWithoutScale = scaleInfo.remaining;
-    const bleed = Math.max(1, subtree.overflowBleed);
-    const qx = Math.max(1, Math.ceil(Math.abs(sx)));
-    const qy = Math.max(1, Math.ceil(Math.abs(sy)));
-    const bufW = Math.ceil((width + 2 * bleed) * qx);
-    const bufH = Math.ceil((height + 2 * bleed) * qy);
-    if (bufW > 0 && bufH > 0) {
-      const [offscreen, offCtx] = acquireOffscreen(bufW, bufH);
-      offCtx.save();
-      offCtx.scale(qx, qy);
-      await drawNodeCore(
-        offCtx,
-        node,
-        parentX,
-        parentY,
-        bleed - x,
-        bleed - y,
-        emojiStyle,
-        renderContext,
-        transformWithoutScale
-      );
-      offCtx.restore();
-      ctx.save();
-      if (opacity < 1) {
-        ctx.globalAlpha *= opacity;
-      }
-      let ox = x + width / 2;
-      let oy = y + height / 2;
-      if (style.transformOrigin) {
-        const parts = style.transformOrigin.split(/\s+/);
-        ox = resolveOrigin(parts[0], x, width);
-        oy = resolveOrigin(parts[1], y, height);
-      }
-      ctx.translate(ox, oy);
-      ctx.scale(sx, sy);
-      ctx.translate(-ox, -oy);
-      ctx.drawImage(
-        offscreen,
-        0,
-        0,
-        bufW,
-        bufH,
-        x - bleed,
-        y - bleed,
-        width + 2 * bleed,
-        height + 2 * bleed
-      );
-      releaseOffscreen(offscreen);
-      ctx.restore();
-      return;
-    }
+  const group = { open: false };
+  ctx.save();
+  try {
+    await paintNode(ctx, node, x, y, opacity, renderContext, emojiStyle, group);
+  } finally {
+    if (group.open) endElementGroup(ctx);
+    ctx.restore();
   }
-  await drawNodeCore(
-    ctx,
-    node,
-    parentX,
-    parentY,
-    0,
-    0,
-    emojiStyle,
-    renderContext
-  );
-}
-function extractScale(transform) {
-  const scaleMatch = transform.match(/\b(scale|scaleX|scaleY)\(([^)]+)\)/);
-  if (!scaleMatch) return null;
-  const [fullMatch, name, args] = scaleMatch;
-  const values = args.split(",").map((s) => s.trim());
-  const sx = name === "scaleY" ? 1 : parseFloat(values[0]);
-  const sy = name === "scaleX" ? 1 : parseFloat(values[name === "scale" ? 1 : 0] ?? String(sx));
-  const remaining = transform.replace(fullMatch, "").trim();
-  return { sx, sy, remaining };
-}
-function scanSubtree(node) {
-  let overflowBleed = 0;
-  let hasBackdropFilter = false;
-  const visit = (n) => {
-    if (n.style.display === "none") return;
-    if ((n.style.opacity ?? 1) <= 0) return;
-    const fontSize = typeof n.style.fontSize === "number" ? n.style.fontSize : 0;
-    if (n.textContent !== void 0 && n.textContent !== "" && fontSize > 0) {
-      const letterSpacing = typeof n.style.letterSpacing === "number" ? n.style.letterSpacing : 0;
-      overflowBleed = Math.max(
-        overflowBleed,
-        fontSize + Math.max(0, -letterSpacing)
-      );
-    }
-    if (n.style.boxShadow) {
-      overflowBleed = Math.max(
-        overflowBleed,
-        boxShadowExtent(n.style.boxShadow)
-      );
-    }
-    const filter = n.style.backdropFilter;
-    if (filter && filter.trim() !== "none") hasBackdropFilter = true;
-    for (const child of n.children) visit(child);
-  };
-  visit(node);
-  return { overflowBleed, hasBackdropFilter };
 }
-async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, emojiStyle, context, overrideTransform) {
-  const x = parentX + node.x + offsetX;
-  const y = parentY + node.y + offsetY;
+async function paintNode(ctx, node, x, y, opacity, renderContext, emojiStyle, group) {
   const { width, height, style } = node;
-  if (style.display === "none") return;
-  const opacity = style.opacity ?? 1;
-  if (opacity <= 0) return;
-  ctx.save();
-  if (opacity < 1) {
-    ctx.globalAlpha *= opacity;
-  }
-  if (style.filter) {
-    ctx.filter = style.filter;
-  }
-  const transformToApply = overrideTransform !== void 0 ? overrideTransform : style.transform;
-  if (transformToApply) {
+  if (style.transform) {
     applyTransform(
       ctx,
-      transformToApply,
+      style.transform,
       x,
       y,
       width,
@@ -3858,9 +3830,11 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, emoji
       y,
       width,
       height,
-      borderRadius
+      borderRadius,
+      opacity
     );
   }
+  group.open = beginElementGroup(ctx, opacity, style.filter);
   if (style.boxShadow) {
     drawBoxShadow(ctx, x, y, width, height, style.boxShadow, borderRadius);
   }
@@ -3902,9 +3876,9 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, emoji
             applyClip(ctx, x, y, width, height, borderRadius);
           }
           const image = await cachedLoadImage(
-            context.imageCache,
+            renderContext.imageCache,
             urlMatch[1],
-            context.userAgent
+            renderContext.userAgent
           );
           const bgSize = style.backgroundSize;
           if (bgSize === "cover") {
@@ -3960,7 +3934,7 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, emoji
       }
     }
   }
-  if (context.debug) {
+  if (renderContext.debug) {
     ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
     ctx.lineWidth = 1;
     ctx.strokeRect(x, y, width, height);
@@ -3988,7 +3962,11 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, emoji
       contentX,
       contentY,
       style.textShadow,
-      emojiStyle
+      emojiStyle,
+      textLayout.paragraph && {
+        paragraph: textLayout.paragraph,
+        offsetY: textLayout.paragraphOffsetY ?? 0
+      }
     );
   }
   if (node.type === "img" && node.props.src) {
@@ -4016,7 +3994,7 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, emoji
       imgY,
       imgW,
       imgH,
-      context,
+      renderContext,
       style
     );
   }
@@ -4024,14 +4002,9 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, emoji
     drawSvgContainer(ctx, node, x, y, width, height);
   } else {
     for (const child of node.children) {
-      if (offsetX === 0 && offsetY === 0) {
-        await drawNode(ctx, child, x, y, context, emojiStyle);
-      } else {
-        await drawNodeCore(ctx, child, x, y, 0, 0, emojiStyle, context);
-      }
+      await drawNode(ctx, child, x, y, renderContext, emojiStyle);
     }
   }
-  ctx.restore();
 }
 function applyTransform(ctx, transform, x, y, width, height, transformOrigin) {
   let ox = x + width / 2;
@@ -4964,6 +4937,7 @@ async function renderReactElement(ctx, element, options = {}) {
     renderContext
   );
   await drawNode(ctx, layoutTree, 0, 0, renderContext, emojiStyle);
+  await releaseParagraphs();
 }
 
 // src/fit-text.ts
@@ -5005,10 +4979,7 @@ function findLargestUsableFontSize(options) {
 
 // src/index.ts
 function createCanvas3(width, height) {
-  const canvas = _createCanvas(width, height);
-  const origEncode = canvas.encode.bind(canvas);
-  canvas.encode = (async (...args) => Buffer.from(await origEncode(...args)));
-  return canvas;
+  return _createCanvas(width, height);
 }
 export {
   Canvas,