@effing/canvas 0.41.1 → 0.43.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, {
@@ -130,6 +130,7 @@ var INHERITABLE_PROPS = [
   "letterSpacing",
   "whiteSpace",
   "wordBreak",
+  "overflowWrap",
   "textOverflow",
   "lineClamp",
   "textBoxTrim",
@@ -320,180 +321,39 @@ function resolveLengthUnits(transform, viewportWidth, viewportHeight, fontSize,
   );
 }
 
-// src/jsx/font.ts
-import { GlobalFonts } from "@napi-rs/canvas";
-
-// src/jsx/font-metrics.ts
-import { inflateSync } from "zlib";
-function fontMetricsToPx(metrics, fontSize) {
-  return {
-    ascent: metrics.ascender / metrics.unitsPerEm * fontSize,
-    descent: -metrics.descender / metrics.unitsPerEm * fontSize
-  };
-}
-var WOFF_SIGNATURE = 2001684038;
-function readWoffTable(view, entry) {
-  const compressed = entry.compLength < entry.origLength;
-  if (compressed) {
-    try {
-      const compData = new Uint8Array(
-        view.buffer,
-        view.byteOffset + entry.offset,
-        entry.compLength
-      );
-      const decompressed = inflateSync(compData);
-      return new DataView(
-        decompressed.buffer,
-        decompressed.byteOffset,
-        decompressed.byteLength
-      );
-    } catch {
-      return null;
-    }
-  }
-  return new DataView(
-    view.buffer,
-    view.byteOffset + entry.offset,
-    entry.origLength
-  );
-}
-function parseWoff(view) {
-  if (view.byteLength < 44) return null;
-  const numTables = view.getUint16(12);
-  if (view.byteLength < 44 + numTables * 20) return null;
-  let headEntry = null;
-  let hheaEntry = null;
-  for (let i = 0; i < numTables; i++) {
-    const r = 44 + i * 20;
-    const tag = String.fromCharCode(view.getUint8(r)) + String.fromCharCode(view.getUint8(r + 1)) + String.fromCharCode(view.getUint8(r + 2)) + String.fromCharCode(view.getUint8(r + 3));
-    const offset = view.getUint32(r + 4);
-    const compLength = view.getUint32(r + 8);
-    const origLength = view.getUint32(r + 12);
-    if (tag === "head") headEntry = { offset, compLength, origLength };
-    else if (tag === "hhea") hheaEntry = { offset, compLength, origLength };
-  }
-  if (!headEntry || !hheaEntry) return null;
-  const headView = readWoffTable(view, headEntry);
-  const hheaView = readWoffTable(view, hheaEntry);
-  if (!headView || !hheaView) return null;
-  if (headView.byteLength < 20 || hheaView.byteLength < 8) return null;
-  const unitsPerEm = headView.getUint16(18);
-  const ascender = hheaView.getInt16(4);
-  const descender = hheaView.getInt16(6);
-  return { unitsPerEm, ascender, descender };
-}
-function parseSfnt(view) {
-  const numTables = view.getUint16(4);
-  if (view.byteLength < 12 + numTables * 16) return null;
-  let headOffset = -1;
-  let hheaOffset = -1;
-  for (let i = 0; i < numTables; i++) {
-    const recordOffset = 12 + i * 16;
-    const tag = String.fromCharCode(view.getUint8(recordOffset)) + String.fromCharCode(view.getUint8(recordOffset + 1)) + String.fromCharCode(view.getUint8(recordOffset + 2)) + String.fromCharCode(view.getUint8(recordOffset + 3));
-    const offset = view.getUint32(recordOffset + 8);
-    if (tag === "head") headOffset = offset;
-    else if (tag === "hhea") hheaOffset = offset;
-  }
-  if (headOffset < 0 || hheaOffset < 0) return null;
-  if (view.byteLength < headOffset + 20) return null;
-  const unitsPerEm = view.getUint16(headOffset + 18);
-  if (view.byteLength < hheaOffset + 8) return null;
-  const ascender = view.getInt16(hheaOffset + 4);
-  const descender = view.getInt16(hheaOffset + 6);
-  return { unitsPerEm, ascender, descender };
-}
-function parseFontMetrics(data) {
-  const buf = data instanceof ArrayBuffer ? data : data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
-  const view = new DataView(buf);
-  if (buf.byteLength < 12) return null;
-  const signature = view.getUint32(0);
-  if (signature === WOFF_SIGNATURE) {
-    return parseWoff(view);
-  }
-  return parseSfnt(view);
-}
-
-// src/jsx/font.ts
-var registeredFonts = /* @__PURE__ */ new Set();
-var metricsCache = /* @__PURE__ */ new Map();
-function registerFont(font) {
-  const key = `${font.name}:${font.weight}:${font.style}`;
-  if (registeredFonts.has(key)) return;
-  const buffer = Buffer.isBuffer(font.data) ? font.data : Buffer.from(font.data);
-  GlobalFonts.register(buffer, font.name);
-  const metrics = parseFontMetrics(font.data);
-  if (metrics) {
-    metricsCache.set(key, metrics);
-  }
-  registeredFonts.add(key);
-}
-function getFontMetrics(family, weight, style) {
-  const families = family.split(",").map((f) => f.trim().replace(/^['"]|['"]$/g, ""));
-  for (const name of families) {
-    const exact = metricsCache.get(`${name}:${weight}:${style}`);
-    if (exact) return exact;
-    for (const [key, metrics] of metricsCache) {
-      if (key.startsWith(`${name}:`)) return metrics;
-    }
-  }
-  return null;
-}
-function registerFontFromPath(path, nameAlias) {
-  GlobalFonts.registerFromPath(path, nameAlias ?? "");
-}
-function registeredFamilies() {
-  return GlobalFonts.families.map((f) => f.family);
-}
-function ensureFontsRegistered(fonts) {
-  for (const font of fonts) {
-    registerFont(font);
-  }
-}
+// src/jsx/text/native.ts
+import { Paragraph } from "@effing/skia/extensions";
 
 // src/jsx/language.ts
-function isEmoji(char) {
-  const cp = char.codePointAt(0);
-  if (cp === void 0) return false;
-  if (cp >= 128512 && cp <= 128591) return true;
-  if (cp >= 127744 && cp <= 128511) return true;
-  if (cp >= 128640 && cp <= 128767) return true;
-  if (cp >= 129280 && cp <= 129535) return true;
-  if (cp >= 9728 && cp <= 9983) return true;
-  if (cp >= 9984 && cp <= 10175) return true;
-  if (cp >= 11088 && cp <= 11093) return true;
-  if (cp >= 8205 && cp <= 8205) return true;
-  if (cp >= 65024 && cp <= 65039) return true;
-  if (cp >= 129536 && cp <= 129647) return true;
-  if (cp >= 129648 && cp <= 129791) return true;
-  if (cp >= 8986 && cp <= 9203) return true;
-  if (cp >= 9193 && cp <= 9210) return true;
-  if (cp >= 9642 && cp <= 9726) return true;
-  if (cp >= 10548 && cp <= 10549) return true;
-  if (cp >= 11013 && cp <= 11015) return true;
-  if (cp >= 12336 && cp <= 12336) return true;
-  if (cp >= 12349 && cp <= 12349) return true;
-  if (cp >= 12951 && cp <= 12953) return true;
-  return false;
-}
-
-// src/jsx/text/linebreak.ts
-import LineBreaker from "linebreak";
-function findBreakOpportunities(text) {
-  const breaker = new LineBreaker(text);
-  const opportunities = [];
-  let bk = breaker.nextBreak();
-  while (bk) {
-    opportunities.push({
-      position: bk.position,
-      required: bk.required ?? false
-    });
-    bk = breaker.nextBreak();
-  }
-  return opportunities;
+var UNASSIGNED_PICTOGRAPHIC = String.raw`(?=\p{Cn})\p{Extended_Pictographic}`;
+var EMOJI_CHAR = String.raw`[\p{Emoji}\p{Extended_Pictographic}]`;
+var KEYCAP_BASE = "[0-9#*]";
+var TEXT_EMOJI_CHAR = String.raw`[0-9#*\u00A9\u00AE\u2122]`;
+var TAGS = String.raw`[\u{E0020}-\u{E007E}]+\u{E007F}`;
+var PRESENTED_EMOJI = [
+  // Keycap: 1️⃣, and the unqualified 1⃣.
+  String.raw`${KEYCAP_BASE}\uFE0F?\u20E3`,
+  // Flag: a pair of regional indicators.
+  String.raw`\p{Regional_Indicator}{2}`,
+  // Emoji presentation sequence (©️), modifier sequence (👍🏽, ☝🏽) or tag
+  // sequence (🏴󠁧󠁢󠁥󠁮󠁧󠁿).
+  String.raw`(?!${KEYCAP_BASE})${EMOJI_CHAR}(?:\uFE0F|\p{Emoji_Modifier}|${TAGS})`,
+  // An emoji character on its own, emoji presentation by default (🌍, ⭐) or
+  // text (❤, ☎, 🕵), but not one that stays text.
+  String.raw`(?!${TEXT_EMOJI_CHAR})\p{Emoji}`,
+  UNASSIGNED_PICTOGRAPHIC
+].join("|");
+var ZWJ_ELEMENT = `(?:${PRESENTED_EMOJI}|(?!${KEYCAP_BASE})${EMOJI_CHAR})`;
+var EMOJI_RE = new RegExp(
+  `^(?:${PRESENTED_EMOJI}|${ZWJ_ELEMENT}(?:\\u200D${ZWJ_ELEMENT})+)$`,
+  "u"
+);
+function isEmoji(grapheme) {
+  return EMOJI_RE.test(grapheme);
 }
 
 // src/jsx/text/measure.ts
-import { createCanvas } from "@napi-rs/canvas";
+import { createCanvas } from "@effing/skia";
 var scratchCtx = null;
 function getScratchCtx() {
   if (!scratchCtx) {
@@ -520,49 +380,36 @@ 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}`;
-}
-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 ascent = m.fontBoundingBoxAscent ?? m.actualBoundingBoxAscent ?? fontSize * 0.8;
-  const descent = m.fontBoundingBoxDescent ?? m.actualBoundingBoxDescent ?? fontSize * 0.2;
-  return {
-    width: m.width,
-    ascent,
-    descent,
-    height: ascent + descent
+  ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${quoteFontFamilies(fontFamily)}`;
+}
+function measureTrimMetrics(fontSize, fontFamily, fontWeight, fontStyle, lineHeight, edge, fontAscent, fontDescent) {
+  const c = getScratchCtx();
+  const measure = (text) => {
+    setFont(c, fontSize, fontFamily, fontWeight, fontStyle);
+    const previous = c.textRendering;
+    c.textRendering = "geometricPrecision";
+    try {
+      return c.measureText(text);
+    } finally {
+      c.textRendering = previous;
+    }
   };
-}
-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");
-  let fontAscent;
-  let fontDescent;
-  if (fontMetrics) {
-    const px = fontMetricsToPx(fontMetrics, fontSize);
-    fontAscent = px.ascent;
-    fontDescent = px.descent;
-  } else {
-    fontAscent = refMetrics.fontBoundingBoxAscent ?? refMetrics.actualBoundingBoxAscent ?? fontSize * 0.8;
-    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");
+      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;
     }
@@ -593,423 +440,364 @@ function measureTrimMetrics(fontSize, fontFamily, fontWeight, fontStyle, lineHei
     underTrim: Math.max(0, underTrim)
   };
 }
-function measureWord(word, fontSize, fontFamily, fontWeight = 400, fontStyle = "normal", ctx, letterSpacing = 0) {
-  const base = measureText(
-    word,
-    fontSize,
-    fontFamily,
-    fontWeight,
-    fontStyle,
-    ctx
-  ).width;
-  if (letterSpacing === 0 || word.length === 0) return base;
-  return base + letterSpacing * word.length;
-}
 
-// src/jsx/text/index.ts
-function emojiAwareMeasureWord(word, fontSize, fontFamily, fontWeight, fontStyle, ctx, letterSpacing = 0) {
-  const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
-  let totalWidth = 0;
-  let textBuffer = "";
-  for (const { segment } of segmenter.segment(word)) {
-    let isEmojiSegment = false;
-    for (const char of segment) {
-      if (isEmoji(char)) {
-        isEmojiSegment = true;
-        break;
-      }
+// src/jsx/text/native.ts
+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";
+}
+function toWordBreak(style) {
+  const { wordBreak } = style;
+  return wordBreak === "break-all" || wordBreak === "keep-all" ? wordBreak : "normal";
+}
+function toOverflowWrap(style) {
+  const { overflowWrap, wordBreak } = style;
+  return overflowWrap === "break-word" || overflowWrap === "anywhere" || wordBreak === "break-word" ? "break-word" : "normal";
+}
+var MIN_WIDTH = 0.01;
+var MIN_FONT_SIZE = 1e-3;
+var EMOJI_DROP = 0.1;
+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));
+}
+var graphemeSegmenter = new Intl.Segmenter(void 0, {
+  granularity: "grapheme"
+});
+function splitEmoji(text, fontSize, letterSpacing) {
+  const items = [];
+  const emoji = [];
+  const marks = [];
+  let run = "";
+  let paragraphIndex = 0;
+  let textIndex = 0;
+  for (const { segment } of graphemeSegmenter.segment(text)) {
+    if (!isEmoji(segment)) {
+      run += segment;
+      paragraphIndex += segment.length;
+      textIndex += segment.length;
+      continue;
     }
-    if (isEmojiSegment) {
-      if (textBuffer) {
-        totalWidth += measureWord(
-          textBuffer,
-          fontSize,
-          fontFamily,
-          fontWeight,
-          fontStyle,
-          ctx,
-          letterSpacing
-        );
-        textBuffer = "";
+    if (run) items.push(run);
+    run = "";
+    items.push({
+      // Letter spacing follows every character, an emoji too, but a
+      // paragraph doesn't add it to a placeholder.
+      width: Math.max(0, fontSize + letterSpacing),
+      height: fontSize,
+      verticalAlign: "baseline",
+      baselineOffset: fontSize * (1 - EMOJI_DROP),
+      // Lines break around it as around an emoji, not an inline-block: it
+      // stays with the punctuation next to it, so "Hi 🎉! ok" breaks as
+      // "Hi | 🎉! | ok" and "(🎉)" stays whole, as in browsers.
+      lineBreak: "emoji"
+    });
+    emoji.push(segment);
+    marks.push([paragraphIndex, textIndex]);
+    paragraphIndex += 1;
+    textIndex += segment.length;
+    marks.push([paragraphIndex, textIndex]);
+  }
+  if (run) items.push(run);
+  if (emoji.length === 0) return { items: [text], emoji };
+  return {
+    items,
+    emoji,
+    toTextIndex: (index) => {
+      let mark = [0, 0];
+      for (const m of marks) {
+        if (m[0] > index) break;
+        mark = m;
       }
-      totalWidth += fontSize;
-    } else {
-      textBuffer += segment;
+      return mark[1] + (index - mark[0]);
     }
-  }
-  if (textBuffer) {
-    totalWidth += measureWord(
-      textBuffer,
-      fontSize,
-      fontFamily,
-      fontWeight,
-      fontStyle,
-      ctx,
-      letterSpacing
-    );
-  }
-  return totalWidth;
+  };
 }
-function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
-  const fontSize = style.fontSize ?? 16;
+function layoutTextNative(text, style, maxWidth, lineHeight, emojiEnabled) {
+  const styledFontSize = style.fontSize ?? 16;
+  const fontSize = Number.isFinite(styledFontSize) ? Math.max(styledFontSize, MIN_FONT_SIZE) : 16;
   const fontFamily = style.fontFamily ?? DEFAULT_FONT_FAMILY;
   const fontWeight = style.fontWeight ?? 400;
   const fontStyle = style.fontStyle ?? "normal";
-  const color = style.color ?? "black";
-  const textAlign = style.textAlign ?? "left";
-  const refMetrics = measureText(
-    "M",
-    fontSize,
-    fontFamily,
-    fontWeight,
-    fontStyle,
-    ctx
-  );
-  const fontMetrics = getFontMetrics(fontFamily, fontWeight, fontStyle);
-  const lineHeightPx = resolveLineHeight(
-    style.lineHeight,
-    fontSize,
-    refMetrics,
-    fontMetrics
-  );
-  const letterSpacing = typeof style.letterSpacing === "number" ? style.letterSpacing : 0;
+  const letterSpacing = typeof style.letterSpacing === "number" && Number.isFinite(style.letterSpacing) ? style.letterSpacing : 0;
   const whiteSpace = style.whiteSpace ?? "normal";
-  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 textStrokeColor = style.WebkitTextStrokeColor;
-  const measure = emojiEnabled ? (word, ls) => emojiAwareMeasureWord(
-    word,
+  const noWrap = whiteSpace === "nowrap" || whiteSpace === "pre";
+  const lineClamp = style.lineClamp && style.lineClamp >= 1 ? Math.floor(style.lineClamp) : void 0;
+  const ellipsis = lineClamp !== void 0 || noWrap && style.textOverflow === "ellipsis" ? "\u2026" : void 0;
+  const width = maxWidth > 0 ? maxWidth : MIN_WIDTH;
+  const content = emojiEnabled ? splitEmoji(text, fontSize, letterSpacing) : { items: [text], emoji: [] };
+  const paragraph = new Paragraph(content.items, {
+    fontFamily: quoteFontFamilies(fontFamily),
     fontSize,
-    fontFamily,
-    fontWeight,
-    fontStyle,
-    ctx,
-    ls ?? letterSpacing
-  ) : (word, ls) => measureWord(
-    word,
+    fontWeight: toWeight(fontWeight),
+    fontStyle: toFontStyle(fontStyle),
+    letterSpacing,
+    lineHeight,
+    textAlign: toTextAlign(style.textAlign),
+    noWrap,
+    maxLines: lineClamp,
+    ellipsis,
+    // `pre` and `pre-wrap` keep the spaces before a line break in the line.
+    keepTrailingWhitespace: whiteSpace === "pre" || whiteSpace === "pre-wrap",
+    wordBreak: toWordBreak(style),
+    overflowWrap: toOverflowWrap(style)
+  });
+  countParagraph();
+  const layout = paragraph.layout(width);
+  const lines = layout.lines.length > 0 ? layout.lines : [
+    {
+      left: 0,
+      width: 0,
+      // As Skia places a baseline: by half-leading in the line box.
+      baseline: (layout.lineHeight + layout.ascent - layout.descent) / 2,
+      startIndex: 0,
+      endIndex: 0,
+      hardBreak: true
+    }
+  ];
+  const toTextIndex = content.toTextIndex ?? ((index) => index);
+  const segments = lines.map((line, i) => ({
+    // A line that ends the text at a newline reports the newline as its text.
+    text: text.slice(toTextIndex(line.startIndex), toTextIndex(line.endIndex)).replace(/\n/g, ""),
+    x: line.left,
+    y: line.baseline,
+    width: line.width,
+    height: layout.lineHeight,
     fontSize,
     fontFamily,
     fontWeight,
     fontStyle,
-    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 noWrap = whiteSpace === "nowrap" || whiteSpace === "pre";
-  const paragraphs = processedText.split("\n");
-  const lines = [];
-  for (const paragraph of paragraphs) {
-    if (noWrap) {
-      lines.push(paragraph);
-      continue;
-    }
-    const wrapped = wrapText(
-      paragraph,
-      maxWidth,
-      fontSize,
-      fontFamily,
-      fontWeight,
-      fontStyle,
-      letterSpacing,
-      wordBreak,
-      ctx,
-      measure
-    );
-    lines.push(...wrapped);
-  }
-  if (textOverflow === "ellipsis" && noWrap && lines.length === 1) {
-    const line = lines[0];
-    const lineWidth = measure(line);
-    if (lineWidth > maxWidth) {
-      lines[0] = truncateWithEllipsis(
-        line,
-        maxWidth,
-        fontSize,
-        fontFamily,
-        fontWeight,
-        fontStyle,
-        ctx,
-        letterSpacing
-      );
-    }
-  }
-  const lineClamp = style.lineClamp;
-  if (lineClamp && lineClamp > 0 && lines.length > lineClamp) {
-    const lastLineText = lines.slice(lineClamp - 1).join(" ");
-    lines.length = lineClamp;
-    lines[lineClamp - 1] = truncateWithEllipsis(
-      lastLineText,
-      maxWidth,
-      fontSize,
-      fontFamily,
-      fontWeight,
-      fontStyle,
-      ctx,
-      letterSpacing
-    );
-  }
-  const segments = [];
-  let totalHeight = 0;
-  let maxLineWidth = 0;
-  const isAutoLineHeight = style.lineHeight === void 0 || style.lineHeight === "normal";
-  const fontPx = fontMetrics ? fontMetricsToPx(fontMetrics, fontSize) : null;
-  let lastPositioningDescent;
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    const lineWidth = measure(line);
-    let x = 0;
-    if (textAlign === "center") {
-      x = (maxWidth - lineWidth) / 2;
-    } else if (textAlign === "right") {
-      x = maxWidth - lineWidth;
-    }
-    const metrics = measureText(
-      line || "M",
-      fontSize,
-      fontFamily,
-      fontWeight,
-      fontStyle,
-      ctx
-    );
-    const positioningAscent = fontPx?.ascent ?? metrics.ascent;
-    const positioningDescent = fontPx?.descent ?? metrics.descent;
-    lastPositioningDescent = positioningDescent;
-    const contentHeight = positioningAscent + positioningDescent;
-    let effectiveAscent = positioningAscent;
-    let effectiveDescent = positioningDescent;
-    if (isAutoLineHeight && contentHeight > lineHeightPx) {
-      const scale = lineHeightPx / contentHeight;
-      effectiveAscent = positioningAscent * scale;
-      effectiveDescent = positioningDescent * scale;
-    }
-    const baselineY = totalHeight + (lineHeightPx + effectiveAscent - effectiveDescent) / 2;
-    segments.push({
-      text: line,
-      x,
-      y: baselineY,
-      width: lineWidth,
-      height: lineHeightPx,
-      fontSize,
-      fontFamily,
-      fontWeight,
-      fontStyle,
-      color,
-      ascent: metrics.ascent,
-      textDecoration,
-      letterSpacing,
-      lineIndex: i,
-      textStrokeWidth,
-      textStrokeColor
+    color: style.color ?? "black",
+    ascent: layout.ascent,
+    textDecoration: style.textDecoration,
+    letterSpacing,
+    lineIndex: i
+  }));
+  const emoji = [];
+  layout.placeholders.forEach((box, i) => {
+    if (!box) return;
+    emoji.push({
+      grapheme: content.emoji[i],
+      x: box.x,
+      y: box.y,
+      size: fontSize,
+      baseline: lines[box.line].baseline
     });
-    totalHeight += lineHeightPx;
-    maxLineWidth = Math.max(maxLineWidth, lineWidth);
-  }
-  if (isAutoLineHeight && lastPositioningDescent !== void 0 && segments.length > 0) {
-    const lastSeg = segments[segments.length - 1];
-    const descentOverflow = lastSeg.y + lastPositioningDescent - totalHeight;
-    if (descentOverflow > 0) {
-      totalHeight += descentOverflow;
-    }
-    totalHeight = Math.ceil(totalHeight);
+  });
+  let height = lines.length * layout.lineHeight;
+  if (lineHeight === void 0) {
+    const noFontSize = Number.isFinite(styledFontSize) && styledFontSize <= 0;
+    height = noFontSize ? 0 : Math.ceil(height);
   }
+  let paragraphOffsetY = 0;
   const textBoxTrim = style.textBoxTrim;
-  if (textBoxTrim && textBoxTrim !== "none" && segments.length > 0) {
-    const textBoxEdge = style.textBoxEdge ?? "text";
-    const trimMetrics = measureTrimMetrics(
+  if (textBoxTrim && textBoxTrim !== "none") {
+    const trim = measureTrimMetrics(
       fontSize,
       fontFamily,
       fontWeight,
       fontStyle,
-      lineHeightPx,
-      textBoxEdge,
-      ctx,
-      fontMetrics
+      layout.lineHeight,
+      style.textBoxEdge ?? "text",
+      layout.ascent,
+      layout.descent
     );
     if (textBoxTrim === "trim-start" || textBoxTrim === "trim-both") {
-      for (const seg of segments) {
-        seg.y -= trimMetrics.overTrim;
+      for (const seg of segments) seg.y -= trim.overTrim;
+      for (const e of emoji) {
+        e.y -= trim.overTrim;
+        e.baseline -= trim.overTrim;
       }
-      totalHeight -= trimMetrics.overTrim;
+      height -= trim.overTrim;
+      paragraphOffsetY = -trim.overTrim;
     }
     if (textBoxTrim === "trim-end" || textBoxTrim === "trim-both") {
-      totalHeight -= trimMetrics.underTrim;
+      height -= trim.underTrim;
     }
   }
   return {
     segments,
-    width: maxLineWidth,
-    height: totalHeight
+    width: segments.reduce((w, s) => Math.max(w, s.width), 0),
+    height,
+    paragraph,
+    paragraphOffsetY,
+    emoji
   };
 }
-function resolveLineHeight(lineHeight, fontSize, canvasMetrics, fontMetrics) {
-  if (lineHeight === void 0 || lineHeight === "normal") {
-    if (fontMetrics) {
-      const px = fontMetricsToPx(fontMetrics, fontSize);
-      return px.ascent + px.descent;
-    }
-    return canvasMetrics ? canvasMetrics.ascent + canvasMetrics.descent : fontSize * 1.2;
+
+// src/jsx/text/white-space.ts
+function isWhiteSpaceOnly(text) {
+  return /^[ \t\n\r\f\v]*$/.test(text);
+}
+function collapseWhiteSpace(text, whiteSpace) {
+  let result = text.replace(/[\v\f]/g, "").replace(/\r\n/g, "\n");
+  if (whiteSpace === "pre" || whiteSpace === "pre-wrap") {
+    result = result.replace(/\r/g, "");
+  } else if (/[\t\n\r]| {2}|^ | $/.test(result)) {
+    result = result.replace(/[\t\r]/g, " ").replace(/ *\n */g, "\n");
+    if (whiteSpace !== "pre-line") result = result.replace(/\n+/g, " ");
+    result = result.replace(/ {2,}/g, " ").replace(/^ | $/g, "");
+  }
+  return result.replace(FINAL_BREAK, "").replace(SEPARATORS, SEPARATOR_SPACE);
+}
+var FINAL_BREAK = /\n$/;
+var SEPARATORS = /[\u2028\u2029]/g;
+var SEPARATOR_SPACE = "\xA0\u200B";
+
+// src/jsx/text/index.ts
+function layoutText(text, style, maxWidth, emojiEnabled) {
+  const fontSize = style.fontSize ?? 16;
+  const result = layoutTextNative(
+    applyTextTransform(collapseWhiteSpace(text, style.whiteSpace), style),
+    style,
+    maxWidth,
+    resolveLineHeight(style.lineHeight, fontSize),
+    emojiEnabled
+  );
+  const textStrokeWidth = resolveTextStrokeWidth(style, fontSize);
+  for (const seg of result.segments) {
+    seg.textStrokeWidth = textStrokeWidth;
+    seg.textStrokeColor = style.WebkitTextStrokeColor;
   }
-  if (typeof lineHeight === "number") {
-    return lineHeight > 5 ? lineHeight : lineHeight * fontSize;
+  return result;
+}
+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());
   }
-  const parsed = parseFloat(String(lineHeight));
-  return isNaN(parsed) ? fontSize * 1.2 : parsed;
+  return text;
 }
-function wrapText(text, maxWidth, fontSize, fontFamily, fontWeight, fontStyle, letterSpacing, wordBreak, ctx, measureFn) {
-  if (!text) return [""];
-  const mw = measureFn ?? ((word) => measureWord(
-    word,
-    fontSize,
-    fontFamily,
-    fontWeight,
-    fontStyle,
-    ctx,
-    letterSpacing
-  ));
-  const breakOpps = findBreakOpportunities(text);
-  const lines = [];
-  let lineStart = 0;
-  let lastBreak = 0;
-  for (const opp of breakOpps) {
-    const segment = text.slice(lineStart, opp.position);
-    const segWidth = mw(segment);
-    if (segWidth > maxWidth && lastBreak > lineStart) {
-      const line = text.slice(lineStart, lastBreak).replace(/\s+$/, "");
-      lines.push(line);
-      lineStart = lastBreak;
-    } else if (segWidth > maxWidth && wordBreak === "break-all") {
-      const broken = forceBreakWord(
-        text,
-        lineStart,
-        opp.position,
+function resolveLineHeight(lineHeight, fontSize) {
+  if (lineHeight === void 0 || lineHeight === "normal") return void 0;
+  let px;
+  if (typeof lineHeight === "number") {
+    px = lineHeight > 5 ? lineHeight : lineHeight * fontSize;
+  } else {
+    px = parseFloat(lineHeight);
+  }
+  return Number.isFinite(px) && px >= 0 ? px : void 0;
+}
+var TextMeasure = class {
+  constructor(text, style, emojiEnabled) {
+    this.text = text;
+    this.style = style;
+    this.emojiEnabled = emojiEnabled;
+    this.measureStyle = { ...style, textOverflow: "clip" };
+  }
+  text;
+  style;
+  emojiEnabled;
+  /** Yoga's measurements by width (Infinity for unbounded). */
+  sizes = /* @__PURE__ */ new Map();
+  /** The heights reported to Yoga since the last `settle`. */
+  reported = /* @__PURE__ */ new Set();
+  pinnedHeight;
+  settled;
+  measureStyle;
+  /**
+   * Measure the text for Yoga.
+   *
+   * @param maxWidth - The width available, Infinity for unbounded
+   */
+  measure(maxWidth) {
+    let size = this.sizes.get(maxWidth);
+    if (!size) {
+      const result = layoutText(
+        this.text,
+        this.measureStyle,
         maxWidth,
-        fontSize,
-        fontFamily,
-        fontWeight,
-        fontStyle,
-        ctx,
-        letterSpacing,
-        measureFn
+        this.emojiEnabled
       );
-      lines.push(...broken.lines);
-      lineStart = broken.endPos;
-    }
-    if (opp.required) {
-      const line = text.slice(lineStart, opp.position).replace(/\s+$/, "");
-      lines.push(line);
-      lineStart = opp.position;
-    }
-    lastBreak = opp.position;
-  }
-  if (lineStart < text.length) {
-    const remaining = text.slice(lineStart).replace(/\s+$/, "");
-    if (remaining) {
-      const remWidth = mw(remaining);
-      if (remWidth > maxWidth && wordBreak === "break-all") {
-        const broken = forceBreakWord(
-          text,
-          lineStart,
-          text.length,
-          maxWidth,
-          fontSize,
-          fontFamily,
-          fontWeight,
-          fontStyle,
-          ctx,
-          letterSpacing,
-          measureFn
-        );
-        lines.push(...broken.lines);
-      } else {
-        lines.push(remaining);
-      }
+      const wrapped = result.segments.length > 1 && maxWidth < Infinity;
+      size = {
+        width: wrapped ? maxWidth : Math.min(result.width, maxWidth),
+        height: result.height
+      };
+      this.sizes.set(maxWidth, size);
     }
-  }
-  return lines.length > 0 ? lines : [""];
-}
-function forceBreakWord(text, start, end, maxWidth, fontSize, fontFamily, fontWeight, fontStyle, ctx, letterSpacing = 0, measureFn) {
-  const mw = measureFn ?? ((word) => measureWord(
-    word,
-    fontSize,
-    fontFamily,
-    fontWeight,
-    fontStyle,
-    ctx,
-    letterSpacing
-  ));
-  const lines = [];
-  let pos = start;
-  while (pos < end) {
-    let breakPos = pos + 1;
-    while (breakPos < end) {
-      const chunk = text.slice(pos, breakPos + 1);
-      const w = mw(chunk);
-      if (w > maxWidth) break;
-      breakPos++;
+    const height = this.pinnedHeight ?? size.height;
+    this.reported.add(height);
+    return { width: size.width, height };
+  }
+  /**
+   * Lay the text out for drawing at the node's final content width, and
+   * check it against the heights Yoga was given since the last call.
+   *
+   * @param pin - Whether to pin later measurements to the drawn height when
+   *   they disagree
+   * @returns Whether Yoga sized the node from another height. If `pin`, the
+   *   node's measurements are now pinned to the drawn height, and the caller
+   *   should mark the node dirty and compute the layout again.
+   */
+  settle(width, pin) {
+    if (this.settled?.width !== width) {
+      this.settled = {
+        width,
+        result: layoutText(this.text, this.style, width, this.emojiEnabled)
+      };
     }
-    const line = text.slice(pos, breakPos);
-    if (line.trim()) lines.push(line);
-    pos = breakPos;
+    const { height } = this.settled.result;
+    const agrees = this.reported.size === 0 || this.reported.size === 1 && this.reported.has(height);
+    this.reported.clear();
+    if (agrees) return false;
+    if (pin) this.pinnedHeight = height;
+    return true;
   }
-  return { lines, endPos: end };
-}
-function truncateWithEllipsis(text, maxWidth, fontSize, fontFamily, fontWeight, fontStyle, ctx, letterSpacing = 0) {
-  const ellipsis = "\u2026";
-  const ellipsisWidth = measureWord(
-    ellipsis,
-    fontSize,
-    fontFamily,
-    fontWeight,
-    fontStyle,
-    ctx,
-    letterSpacing
-  );
-  const availWidth = maxWidth - ellipsisWidth;
-  for (let i = text.length; i > 0; i--) {
-    const truncated = text.slice(0, i);
-    const w = measureWord(
-      truncated,
-      fontSize,
-      fontFamily,
-      fontWeight,
-      fontStyle,
-      ctx,
-      letterSpacing
-    );
-    if (w <= availWidth) {
-      return truncated + ellipsis;
-    }
+  /**
+   * Drop the pinned height, so that Yoga sees the measured heights again.
+   *
+   * @returns Whether there was a pin
+   */
+  unpin() {
+    const pinned = this.pinnedHeight !== void 0;
+    this.pinnedHeight = void 0;
+    this.reported.clear();
+    return pinned;
+  }
+  /** The text as laid out by the last `settle`. */
+  get layout() {
+    return this.settled?.result;
   }
-  return ellipsis;
-}
-function createTextMeasureFunc(text, style, ctx, emojiEnabled) {
-  const measureStyle = { ...style, textOverflow: "clip" };
-  return (width, _widthMode, _height, _heightMode) => {
-    const maxWidth = width > 0 ? width : Infinity;
-    const result = layoutText(text, measureStyle, maxWidth, ctx, emojiEnabled);
-    const wrapped = result.segments.length > 1;
-    const reportedWidth = wrapped ? Math.min(maxWidth, width > 0 ? width : result.width) : result.width;
-    return { width: Math.min(reportedWidth, maxWidth), height: result.height };
-  };
-}
+};
 
 // src/jsx/draw/clip.ts
 function applyClip(ctx, x, y, width, height, borderRadius) {
@@ -1056,198 +844,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 +1051,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 +1898,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 +2145,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 +2385,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 +2564,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,110 +3020,75 @@ 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
-var emojiApis = {
-  twemoji: (code) => `https://cdnjs.cloudflare.com/ajax/libs/twemoji/16.0.1/svg/${code.toLowerCase()}.svg`,
-  openmoji: "https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/svg/",
-  blobmoji: "https://cdn.jsdelivr.net/npm/@svgmoji/blob@2.0.0/svg/",
-  noto: "https://cdn.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/svg/",
-  fluent: (code) => `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${code.toLowerCase()}_color.svg`,
-  fluentFlat: (code) => `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${code.toLowerCase()}_flat.svg`
-};
-var U200D = String.fromCharCode(8205);
-var UFE0Fg = /\uFE0F/g;
-function getEmojiCode(char) {
-  return toCodePoint(char.indexOf(U200D) < 0 ? char.replace(UFE0Fg, "") : char);
-}
-function toCodePoint(unicodeSurrogates) {
-  const r = [];
-  let c = 0, p = 0, i = 0;
-  while (i < unicodeSurrogates.length) {
-    c = unicodeSurrogates.charCodeAt(i++);
-    if (p) {
-      r.push((65536 + (p - 55296 << 10) + (c - 56320)).toString(16));
-      p = 0;
-    } else if (55296 <= c && c <= 56319) {
-      p = c;
-    } else {
-      r.push(c.toString(16));
+var FE0F = 65039;
+var ZWJ = 8205;
+var KEYCAP = 8419;
+var EMOJI_CHAR2 = /[\p{Emoji}\p{Extended_Pictographic}]/u;
+var EMOJI_PRESENTATION = new RegExp(
+  String.raw`\p{Emoji_Presentation}|${UNASSIGNED_PICTOGRAPHIC}`,
+  "u"
+);
+var EMOJI_MODIFIER = /\p{Emoji_Modifier}/u;
+function qualifiedCodePoints(emoji) {
+  const chars = [...emoji].filter((c) => c.codePointAt(0) !== FE0F);
+  const codePoints = [];
+  chars.forEach((char, i) => {
+    codePoints.push(char.codePointAt(0));
+    const startsElement = i === 0 || chars[i - 1] === "\u200D";
+    if (startsElement && EMOJI_CHAR2.test(char) && !EMOJI_PRESENTATION.test(char) && !EMOJI_MODIFIER.test(chars[i + 1] ?? "")) {
+      codePoints.push(FE0F);
     }
-  }
-  return r.join("-");
+  });
+  return codePoints;
 }
-var emojiCache = {};
-async function loadEmoji(type, code) {
-  const key = type + ":" + code;
-  if (key in emojiCache) return emojiCache[key];
-  const api = emojiApis[type];
-  const url = typeof api === "function" ? api(code) : `${api}${code.toUpperCase()}.svg`;
-  return emojiCache[key] = fetch(url).then((r) => r.text());
+function hex(codePoints, pad = 0) {
+  return codePoints.map((cp) => cp.toString(16).padStart(pad, "0")).join("-");
 }
-
-// src/jsx/text/emoji-split.ts
-function splitTextIntoRuns(text, measureText2, emojiSize, letterSpacing = 0) {
-  const runs = [];
-  const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
-  let currentText = "";
-  let currentGraphemeCount = 0;
-  let currentX = 0;
-  let textStartX = 0;
-  for (const { segment } of segmenter.segment(text)) {
-    if (isEmojiGrapheme(segment)) {
-      if (currentText) {
-        const textWidth = measureText2(currentText);
-        runs.push({
-          kind: "text",
-          text: currentText,
-          x: textStartX,
-          width: textWidth + letterSpacing * currentGraphemeCount
-        });
-        currentX = textStartX + textWidth + letterSpacing * currentGraphemeCount;
-        currentText = "";
-        currentGraphemeCount = 0;
-      }
-      runs.push({
-        kind: "emoji",
-        char: segment,
-        x: currentX,
-        width: emojiSize
-      });
-      currentX += emojiSize + letterSpacing;
-      textStartX = currentX;
-    } else {
-      if (!currentText) textStartX = currentX;
-      currentText += segment;
-      currentGraphemeCount++;
-    }
-  }
-  if (currentText) {
-    const textWidth = measureText2(currentText);
-    runs.push({
-      kind: "text",
-      text: currentText,
-      x: textStartX,
-      width: textWidth + letterSpacing * currentGraphemeCount
-    });
-  }
-  return runs;
+function twemojiCode(codePoints) {
+  const code = hex(
+    codePoints.includes(ZWJ) ? codePoints : codePoints.filter((cp) => cp !== FE0F)
+  );
+  return code === "1f441-fe0f-200d-1f5e8-fe0f" ? "1f441-200d-1f5e8" : code;
+}
+function svgmojiCode(codePoints) {
+  const keepFE0F = codePoints.includes(ZWJ) || codePoints.includes(KEYCAP);
+  return hex(
+    keepFE0F ? codePoints : codePoints.filter((cp) => cp !== FE0F),
+    4
+  ).toUpperCase();
+}
+function fluentCode(codePoints) {
+  return encodeURIComponent(String.fromCodePoint(...codePoints));
+}
+var emojiUrls = {
+  twemoji: (cps) => `https://cdnjs.cloudflare.com/ajax/libs/twemoji/16.0.1/svg/${twemojiCode(cps)}.svg`,
+  openmoji: (cps) => `https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/svg/${svgmojiCode(cps)}.svg`,
+  blobmoji: (cps) => `https://cdn.jsdelivr.net/npm/@svgmoji/blob@2.0.0/svg/${svgmojiCode(cps)}.svg`,
+  noto: (cps) => `https://cdn.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/svg/${svgmojiCode(cps)}.svg`,
+  fluent: (cps) => `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${fluentCode(cps)}_color.svg`,
+  fluentFlat: (cps) => `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${fluentCode(cps)}_flat.svg`
+};
+function emojiUrl(style, emoji) {
+  return emojiUrls[style](qualifiedCodePoints(emoji));
 }
-function isEmojiGrapheme(grapheme) {
-  for (const char of grapheme) {
-    if (isEmoji(char)) return true;
-  }
-  return false;
+var emojiCache = {};
+async function loadEmoji(style, emoji) {
+  const url = emojiUrl(style, emoji);
+  return emojiCache[url] ??= fetch(url).then((r) => r.text());
 }
 
 // src/jsx/draw/text.ts
 var emojiImageCache = /* @__PURE__ */ new Map();
-function loadEmojiImage(style, char) {
-  const code = getEmojiCode(char);
-  const key = style + ":" + code;
+function loadEmojiImage(style, emoji) {
+  const key = emojiUrl(style, emoji);
   let cached = emojiImageCache.get(key);
   if (!cached) {
-    cached = loadEmoji(style, code).then((svgText) => {
+    cached = loadEmoji(style, emoji).then((svgText) => {
       if (!svgText || !svgText.includes("<svg")) return null;
       const dataUri = "data:image/svg+xml;base64," + Buffer.from(svgText).toString("base64");
       return loadImage2(dataUri);
@@ -3486,166 +3097,62 @@ function loadEmojiImage(style, char) {
   }
   return cached;
 }
-async function drawText(ctx, segments, offsetX, offsetY, textShadow, emojiStyle) {
+async function drawText(ctx, layout, offsetX, offsetY, textShadow, emojiStyle) {
+  const { paragraph, segments, emoji } = layout;
+  const first = segments[0];
+  if (!first) return;
+  const x = offsetX;
+  const y = offsetY + layout.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);
+  if (emojiStyle && emoji.length > 0) {
+    await drawEmoji(ctx, emoji, first, offsetX, offsetY, emojiStyle);
+  }
   for (const seg of segments) {
-    if (!seg.text) continue;
-    setFont(ctx, seg.fontSize, seg.fontFamily, seg.fontWeight, seg.fontStyle);
-    ctx.fillStyle = seg.color;
-    const x = offsetX + seg.x;
-    const y = offsetY + seg.y;
-    const textAlpha = shadow ? getColorAlpha(seg.color) : 1;
-    const hasStroke = seg.textStrokeWidth !== void 0 && seg.textStrokeWidth > 0;
-    if (emojiStyle) {
-      await drawSegmentWithEmoji(
-        ctx,
-        seg,
-        x,
-        y,
-        textShadow,
-        emojiStyle,
-        hasStroke
-      );
-    } else if (seg.letterSpacing && seg.letterSpacing !== 0) {
-      if (shadow) {
-        drawShadowPass(
-          ctx,
-          shadow,
-          textAlpha,
-          () => drawTextWithLetterSpacing(ctx, seg.text, x, y, seg.letterSpacing)
-        );
-      }
-      if (hasStroke) {
-        drawStrokeWithLetterSpacing(
-          ctx,
-          seg.text,
-          x,
-          y,
-          seg.letterSpacing,
-          seg.textStrokeWidth,
-          seg.textStrokeColor ?? seg.color
-        );
-      }
-      drawTextWithLetterSpacing(ctx, seg.text, x, y, seg.letterSpacing);
-    } else {
-      if (shadow) {
-        drawShadowPass(
-          ctx,
-          shadow,
-          textAlpha,
-          () => ctx.fillText(seg.text, x, y)
-        );
-      }
-      if (hasStroke) {
-        ctx.save();
-        ctx.lineWidth = seg.textStrokeWidth;
-        ctx.strokeStyle = seg.textStrokeColor ?? seg.color;
-        ctx.lineJoin = "round";
-        ctx.strokeText(seg.text, x, y);
-        ctx.restore();
-      }
-      ctx.fillText(seg.text, x, y);
-    }
     if (seg.textDecoration) {
       drawTextDecoration(ctx, seg, offsetX, offsetY);
     }
   }
 }
-async function drawSegmentWithEmoji(ctx, seg, x, y, textShadow, emojiStyle, hasStroke) {
-  const letterSpacing = seg.letterSpacing ?? 0;
-  const runs = splitTextIntoRuns(
-    seg.text,
-    (text) => {
-      setFont(ctx, seg.fontSize, seg.fontFamily, seg.fontWeight, seg.fontStyle);
-      return ctx.measureText(text).width;
-    },
-    seg.fontSize,
-    letterSpacing
+async function drawEmoji(ctx, emoji, font, offsetX, offsetY, emojiStyle) {
+  const images = await Promise.all(
+    emoji.map((e) => loadEmojiImage(emojiStyle, e.grapheme))
   );
-  const shadow = textShadow ? parseShadow(textShadow) : null;
-  const textAlpha = shadow ? getColorAlpha(seg.color) : 1;
-  for (const run of runs) {
-    if (run.kind === "text") {
-      if (shadow) {
-        if (letterSpacing !== 0) {
-          drawShadowPass(
-            ctx,
-            shadow,
-            textAlpha,
-            () => drawTextWithLetterSpacing(
-              ctx,
-              run.text,
-              x + run.x,
-              y,
-              letterSpacing
-            )
-          );
-        } else {
-          drawShadowPass(
-            ctx,
-            shadow,
-            textAlpha,
-            () => ctx.fillText(run.text, x + run.x, y)
-          );
-        }
-      }
-      if (hasStroke) {
-        if (letterSpacing !== 0) {
-          drawStrokeWithLetterSpacing(
-            ctx,
-            run.text,
-            x + run.x,
-            y,
-            letterSpacing,
-            seg.textStrokeWidth,
-            seg.textStrokeColor ?? seg.color
-          );
-        } else {
-          ctx.save();
-          ctx.lineWidth = seg.textStrokeWidth;
-          ctx.strokeStyle = seg.textStrokeColor ?? seg.color;
-          ctx.lineJoin = "round";
-          ctx.strokeText(run.text, x + run.x, y);
-          ctx.restore();
-        }
-      }
-      if (letterSpacing !== 0) {
-        drawTextWithLetterSpacing(ctx, run.text, x + run.x, y, letterSpacing);
-      } else {
-        ctx.fillText(run.text, x + run.x, y);
-      }
-    } else {
-      const img = await loadEmojiImage(emojiStyle, run.char);
-      if (img) {
-        const emojiSize = seg.fontSize;
-        const emojiY = y - seg.ascent + (seg.height - seg.fontSize) / 2;
-        ctx.drawImage(img, x + run.x, emojiY, emojiSize, emojiSize);
-      } else {
-        ctx.fillText(run.char, x + run.x, y);
-      }
+  emoji.forEach((e, i) => {
+    const img = images[i];
+    if (img) {
+      ctx.drawImage(img, offsetX + e.x, offsetY + e.y, e.size, e.size);
+      return;
     }
-  }
-}
-function drawTextWithLetterSpacing(ctx, text, x, y, letterSpacing) {
-  let currentX = x;
-  for (const char of text) {
-    ctx.fillText(char, currentX, y);
-    const metrics = ctx.measureText(char);
-    currentX += metrics.width + letterSpacing;
-  }
-}
-function drawStrokeWithLetterSpacing(ctx, text, x, y, letterSpacing, strokeWidth, strokeColor) {
-  ctx.save();
-  ctx.lineWidth = strokeWidth;
-  ctx.strokeStyle = strokeColor;
-  ctx.lineJoin = "round";
-  let currentX = x;
-  for (const char of text) {
-    ctx.strokeText(char, currentX, y);
-    const metrics = ctx.measureText(char);
-    currentX += metrics.width + letterSpacing;
-  }
-  ctx.restore();
+    setFont(
+      ctx,
+      font.fontSize,
+      font.fontFamily,
+      font.fontWeight,
+      font.fontStyle
+    );
+    const textRendering = ctx.textRendering;
+    ctx.textRendering = "geometricPrecision";
+    ctx.fillText(e.grapheme, offsetX + e.x, offsetY + e.baseline);
+    ctx.textRendering = textRendering;
+  });
 }
 function parseShadow(shadow) {
   const parts = shadow.match(
@@ -3706,139 +3213,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, Math.ceil(subtree.overflowBleed));
-    const qx = Math.max(1, Math.ceil(Math.abs(sx)));
-    const qy = Math.max(1, Math.ceil(Math.abs(sy)));
-    const bufW = Math.ceil((width + 2 * bleed) * qx);
-    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 +3256,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 +3302,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 +3360,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);
@@ -3975,16 +3375,10 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, emoji
     const contentX = x + paddingLeft + borderLeftW;
     const contentY = y + paddingTop + borderTopW;
     const contentWidth = width - paddingLeft - paddingRight - borderLeftW - borderRightW;
-    const textLayout = layoutText(
-      node.textContent,
-      style,
-      contentWidth,
-      ctx,
-      !!emojiStyle
-    );
+    const textLayout = node.textLayout && contentWidth === node.width ? node.textLayout : layoutText(node.textContent, style, contentWidth, !!emojiStyle);
     await drawText(
       ctx,
-      textLayout.segments,
+      textLayout,
       contentX,
       contentY,
       style.textShadow,
@@ -4016,7 +3410,7 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, emoji
       imgY,
       imgW,
       imgH,
-      context,
+      renderContext,
       style
     );
   }
@@ -4024,14 +3418,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;
@@ -4098,6 +3487,28 @@ function parseAngle(value) {
   return parseFloat(value);
 }
 
+// src/jsx/font.ts
+import { GlobalFonts } from "@effing/skia";
+var registeredFonts = /* @__PURE__ */ new Set();
+function registerFont(font) {
+  const key = `${font.name}:${font.weight}:${font.style}`;
+  if (registeredFonts.has(key)) return;
+  const buffer = Buffer.isBuffer(font.data) ? font.data : Buffer.from(font.data);
+  GlobalFonts.register(buffer, font.name);
+  registeredFonts.add(key);
+}
+function registerFontFromPath(path, nameAlias) {
+  GlobalFonts.registerFromPath(path, nameAlias ?? "");
+}
+function registeredFamilies() {
+  return GlobalFonts.families.map((f) => f.family);
+}
+function ensureFontsRegistered(fonts) {
+  for (const font of fonts) {
+    registerFont(font);
+  }
+}
+
 // src/jsx/style/expand.ts
 var SIDES = ["Top", "Right", "Bottom", "Left"];
 function parseSides(value) {
@@ -4291,6 +3702,10 @@ function expandStyle(raw, fontFamilies) {
       style.backdropFilter = style.WebkitBackdropFilter;
     delete style.WebkitBackdropFilter;
   }
+  if (style.wordWrap !== void 0) {
+    if (style.overflowWrap === void 0) style.overflowWrap = style.wordWrap;
+    delete style.wordWrap;
+  }
   if (style.WebkitClipPath !== void 0) {
     if (style.clipPath === void 0) style.clipPath = style.WebkitClipPath;
     delete style.WebkitClipPath;
@@ -4415,6 +3830,7 @@ import Yoga, {
   FlexDirection,
   Gutter,
   Justify,
+  MeasureMode,
   Overflow,
   PositionType,
   Wrap
@@ -4422,6 +3838,14 @@ import Yoga, {
 function createYogaNode() {
   return Yoga.Node.create();
 }
+var textConfig;
+function createTextYogaNode() {
+  if (!textConfig) {
+    textConfig = Yoga.Config.create();
+    textConfig.setPointScaleFactor(0);
+  }
+  return Yoga.Node.create(textConfig);
+}
 function freeYogaNode(node) {
   node.freeRecursive();
 }
@@ -4594,20 +4018,20 @@ function applyEdgeValue(node, setter, edge, value) {
 }
 
 // src/jsx/layout.ts
-async function buildLayoutTree(element, containerWidth, containerHeight, ctx, emojiEnabled, fontFamilies, context) {
+async function buildLayoutTree(element, containerWidth, containerHeight, emojiEnabled, fontFamilies, context) {
   const renderContext = context ?? {
     imageCache: /* @__PURE__ */ new Map(),
     debug: false
   };
-  const elementYogaNode = createYogaNode();
+  const rootElement = renderComponents(element);
+  const elementYogaNode = isText(rootElement) ? createTextYogaNode() : createYogaNode();
   const rootStyle = fontFamilies?.length ? { ...DEFAULT_STYLE, fontFamily: fontFamilies.join(", ") } : DEFAULT_STYLE;
   const elementNode = await buildNode(
-    element,
+    rootElement,
     rootStyle,
     elementYogaNode,
     containerWidth,
     containerHeight,
-    ctx,
     emojiEnabled,
     fontFamilies,
     renderContext
@@ -4618,6 +4042,11 @@ async function buildLayoutTree(element, containerWidth, containerHeight, ctx, em
   rootYogaNode.setFlexDirection(FlexDirection.Row);
   rootYogaNode.insertChild(elementYogaNode, 0);
   rootYogaNode.calculateLayout(containerWidth, containerHeight);
+  settleText(
+    elementNode,
+    () => rootYogaNode.calculateLayout(containerWidth, containerHeight),
+    renderContext.debug
+  );
   const elementLayout = extractLayout(elementNode, elementYogaNode);
   freeYogaNode(rootYogaNode);
   const tree = {
@@ -4632,7 +4061,7 @@ async function buildLayoutTree(element, containerWidth, containerHeight, ctx, em
   };
   return { tree, imageCache: renderContext.imageCache };
 }
-async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewportHeight, ctx, emojiEnabled, fontFamilies, context) {
+async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewportHeight, emojiEnabled, fontFamilies, context) {
   if (element === null || element === void 0 || typeof element === "boolean") {
     return {
       type: "empty",
@@ -4645,35 +4074,20 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
   if (typeof element === "string" || typeof element === "number") {
     const text = String(element);
     const style2 = resolveStyle(void 0, parentStyle);
-    const measureFunc = createTextMeasureFunc(text, style2, ctx, emojiEnabled);
-    yogaNode.setMeasureFunc(measureFunc);
+    const textMeasure = new TextMeasure(text, style2, emojiEnabled);
+    setTextMeasure(yogaNode, textMeasure);
     return {
       type: "text",
       style: style2,
       children: [],
       textContent: text,
+      textMeasure,
       props: {},
       yogaNode
     };
   }
   const el = element;
   const type = el.type;
-  if (typeof type === "function") {
-    const rendered = type(
-      el.props ?? {}
-    );
-    return await buildNode(
-      rendered,
-      parentStyle,
-      yogaNode,
-      viewportWidth,
-      viewportHeight,
-      ctx,
-      emojiEnabled,
-      fontFamilies,
-      context
-    );
-  }
   const props = el.props ?? {};
   const rawStyle = props.style ?? {};
   const expanded = expandStyle(rawStyle, fontFamilies);
@@ -4767,17 +4181,14 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
       yogaNode
     };
   }
-  const textContent = extractTextContent(props.children);
-  if (textContent !== void 0 && !hasElementChildren(props.children)) {
+  const items = flattenChildren(props.children);
+  const onlyText = items.length === 1 && isText(items[0]) ? items[0] : null;
+  if (onlyText !== null && !isWhiteSpaceOnly(String(onlyText))) {
+    const textContent = String(onlyText);
     const childStyle = resolveStyle(void 0, style);
-    const childYogaNode = createYogaNode();
-    const measureFunc = createTextMeasureFunc(
-      textContent,
-      childStyle,
-      ctx,
-      emojiEnabled
-    );
-    childYogaNode.setMeasureFunc(measureFunc);
+    const childYogaNode = createTextYogaNode();
+    const textMeasure = new TextMeasure(textContent, childStyle, emojiEnabled);
+    setTextMeasure(childYogaNode, textMeasure);
     const jc = style.justifyContent;
     if (!jc || jc === "flex-start") {
       childYogaNode.setFlexGrow(1);
@@ -4796,6 +4207,7 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
           style: childStyle,
           children: [],
           textContent,
+          textMeasure,
           props: {},
           yogaNode: childYogaNode
         }
@@ -4805,36 +4217,22 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
     };
   }
   const children = [];
-  const rawChildren = props.children;
-  if (rawChildren !== void 0 && rawChildren !== null) {
-    const childArray = Array.isArray(rawChildren) ? rawChildren.flat(Infinity) : [rawChildren];
-    const ws = style.whiteSpace;
-    const collapsesWhitespace = ws === void 0 || ws === "normal" || ws === "nowrap" || ws === "pre-line";
-    let prevWasBr = false;
-    for (const child of childArray) {
-      if (child === null || child === void 0 || typeof child === "boolean")
-        continue;
-      let processedChild = child;
-      if (prevWasBr && collapsesWhitespace && typeof child === "string") {
-        processedChild = child.trimStart();
-      }
-      prevWasBr = isBrElement(child);
-      const childYogaNode = createYogaNode();
-      yogaNode.insertChild(childYogaNode, children.length);
-      children.push(
-        await buildNode(
-          processedChild,
-          style,
-          childYogaNode,
-          viewportWidth,
-          viewportHeight,
-          ctx,
-          emojiEnabled,
-          fontFamilies,
-          context
-        )
-      );
-    }
+  for (const rendered of items) {
+    if (typeof rendered === "string" && isWhiteSpaceOnly(rendered)) continue;
+    const childYogaNode = isText(rendered) ? createTextYogaNode() : createYogaNode();
+    yogaNode.insertChild(childYogaNode, children.length);
+    children.push(
+      await buildNode(
+        rendered,
+        style,
+        childYogaNode,
+        viewportWidth,
+        viewportHeight,
+        emojiEnabled,
+        fontFamilies,
+        context
+      )
+    );
   }
   return {
     type: tagName,
@@ -4844,8 +4242,84 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
     yogaNode
   };
 }
+var MAX_TEXT_RELAYOUTS = 2;
+function settleText(root, relayout, debug) {
+  const textNodes = [];
+  const collect = (node) => {
+    if (node.style.display === "none") return;
+    if (node.textMeasure) textNodes.push(node);
+    node.children.forEach(collect);
+  };
+  collect(root);
+  const settle = (node, pin) => node.textMeasure.settle(node.yogaNode.getComputedWidth(), pin);
+  for (let pass = 0; pass < MAX_TEXT_RELAYOUTS; pass++) {
+    let unsettled2 = false;
+    for (const node of textNodes) {
+      if (settle(node, true)) {
+        node.yogaNode.markDirty();
+        unsettled2 = true;
+      }
+    }
+    if (!unsettled2) return;
+    relayout();
+  }
+  if (!textNodes.some((node) => settle(node, false))) return;
+  for (const node of textNodes) {
+    if (node.textMeasure.unpin()) node.yogaNode.markDirty();
+  }
+  relayout();
+  const unsettled = textNodes.filter((node) => settle(node, false)).length;
+  if (debug && unsettled > 0) {
+    console.warn(
+      `[@effing/canvas] ${unsettled} text node(s) sized for other lines than drawn: the layout didn't settle in ${MAX_TEXT_RELAYOUTS} relayouts`
+    );
+  }
+}
+function setTextMeasure(yogaNode, textMeasure) {
+  yogaNode.setMeasureFunc(
+    (width, widthMode) => textMeasure.measure(
+      widthMode === MeasureMode.Undefined || Number.isNaN(width) ? Infinity : width
+    )
+  );
+}
+var isText = (node) => typeof node === "string" || typeof node === "number";
+function renderComponents(node) {
+  while (node !== null && typeof node === "object" && "type" in node && typeof node.type === "function") {
+    const el = node;
+    node = el.type(
+      el.props ?? {}
+    );
+  }
+  return node;
+}
+function flattenChildren(node, items = []) {
+  const rendered = renderComponents(node);
+  if (rendered === null || rendered === void 0 || typeof rendered === "boolean") {
+    return items;
+  }
+  if (Array.isArray(rendered)) {
+    for (const child of rendered) flattenChildren(child, items);
+    return items;
+  }
+  const el = rendered;
+  if (typeof rendered === "object" && el.type === REACT_FRAGMENT) {
+    return flattenChildren(el.props?.children, items);
+  }
+  const last = items[items.length - 1];
+  if (isText(rendered) && items.length > 0 && isText(last)) {
+    items[items.length - 1] = `${last}${rendered}`;
+  } else {
+    items.push(rendered);
+  }
+  return items;
+}
+function floorToPixel(value) {
+  const rounded = Math.round(value);
+  return Math.abs(value - rounded) < 1e-4 ? rounded : Math.floor(value);
+}
 function extractLayout(node, yogaNode) {
   const layout = yogaNode.getComputedLayout();
+  const place = node.textMeasure ? floorToPixel : (v) => v;
   return {
     type: node.type,
     style: node.style,
@@ -4854,37 +4328,14 @@ function extractLayout(node, yogaNode) {
       return extractLayout(child, childYoga);
     }),
     textContent: node.textContent,
+    textLayout: node.textMeasure?.layout,
     props: node.props,
-    x: layout.left,
-    y: layout.top,
+    x: place(layout.left),
+    y: place(layout.top),
     width: layout.width,
     height: layout.height
   };
 }
-function isBrElement(child) {
-  if (child === null || child === void 0 || typeof child !== "object")
-    return false;
-  return child.type === "br";
-}
-function extractTextContent(children) {
-  if (children === void 0 || children === null) return void 0;
-  if (typeof children === "string") return children;
-  if (typeof children === "number") return String(children);
-  if (Array.isArray(children)) {
-    const parts = [];
-    for (const child of children) {
-      if (typeof child === "string") {
-        parts.push(child);
-      } else if (typeof child === "number") {
-        parts.push(String(child));
-      } else if (child !== null && child !== void 0 && typeof child !== "boolean") {
-        return void 0;
-      }
-    }
-    return parts.join("");
-  }
-  return void 0;
-}
 var REACT_FRAGMENT = /* @__PURE__ */ Symbol.for("react.fragment");
 function resolveSvgTree(node) {
   if (node === null || node === void 0 || typeof node === "boolean")
@@ -4928,18 +4379,6 @@ function resolveSvgTree(node) {
   }
   return el;
 }
-function hasElementChildren(children) {
-  if (children === void 0 || children === null || typeof children === "boolean")
-    return false;
-  if (typeof children === "string" || typeof children === "number")
-    return false;
-  if (Array.isArray(children)) {
-    return children.some(
-      (child) => child !== null && child !== void 0 && typeof child !== "boolean" && typeof child !== "string" && typeof child !== "number"
-    );
-  }
-  return typeof children === "object";
-}
 
 // src/jsx/index.ts
 async function renderReactElement(ctx, element, options = {}) {
@@ -4958,12 +4397,12 @@ async function renderReactElement(ctx, element, options = {}) {
     element,
     width,
     height,
-    ctx,
     !!emojiStyle,
     fontFamilies,
     renderContext
   );
   await drawNode(ctx, layoutTree, 0, 0, renderContext, emojiStyle);
+  await releaseParagraphs();
 }
 
 // src/fit-text.ts
@@ -5005,10 +4444,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,