@effing/canvas 0.42.0 → 0.43.0

package/dist/index.js

@@ -130,6 +130,7 @@ var INHERITABLE_PROPS = [
   "letterSpacing",
   "whiteSpace",
   "wordBreak",
+  "overflowWrap",
   "textOverflow",
   "lineClamp",
   "textBoxTrim",
@@ -320,176 +321,35 @@ function resolveLengthUnits(transform, viewportWidth, viewportHeight, fontSize,
   );
 }
 
-// src/jsx/font.ts
-import { GlobalFonts } from "@effing/skia";
-
-// 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
@@ -501,16 +361,6 @@ 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",
@@ -536,34 +386,18 @@ function quoteFontFamilies(fontFamily) {
 function setFont(ctx, fontSize, fontFamily, fontWeight = 400, fontStyle = "normal") {
   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 = withUnsnappedText(c, () => 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
+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 measure = (text) => withUnsnappedText(c, () => c.measureText(text));
-  const refMetrics = measure("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;
@@ -606,32 +440,8 @@ 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/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;
@@ -654,7 +464,17 @@ var TEXT_ALIGNS = /* @__PURE__ */ new Set([
 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;
@@ -671,35 +491,104 @@ 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;
+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 (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;
+      }
+      return mark[1] + (index - mark[0]);
+    }
+  };
+}
+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 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 noWrap = whiteSpace === "nowrap" || whiteSpace === "pre";
-  const lineClamp = style.lineClamp && style.lineClamp > 0 ? style.lineClamp : void 0;
+  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 paragraph = new Paragraph(text, {
+  const content = emojiEnabled ? splitEmoji(text, fontSize, letterSpacing) : { items: [text], emoji: [] };
+  const paragraph = new Paragraph(content.items, {
     fontFamily: quoteFontFamilies(fontFamily),
     fontSize,
     fontWeight: toWeight(fontWeight),
     fontStyle: toFontStyle(fontStyle),
     letterSpacing,
-    lineHeight: lineHeight ?? 0,
+    lineHeight,
     textAlign: toTextAlign(style.textAlign),
     noWrap,
     maxLines: lineClamp,
-    ellipsis
+    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);
-  if (!noWrap && layout.minIntrinsicWidth > width) return null;
-  const segments = layout.lines.map((line, i) => ({
+  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(line.startIndex, line.endIndex).replace(/\n/g, ""),
+    text: text.slice(toTextIndex(line.startIndex), toTextIndex(line.endIndex)).replace(/\n/g, ""),
     x: line.left,
     y: line.baseline,
     width: line.width,
@@ -714,18 +603,25 @@ function layoutTextNative(text, style, maxWidth, lineHeight) {
     letterSpacing,
     lineIndex: i
   }));
-  let height = layout.height;
-  if (lineHeight === void 0 && segments.length > 0) {
-    height = Math.ceil(height);
+  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
+    });
+  });
+  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 fontMetrics = {
-      unitsPerEm: fontSize,
-      ascender: layout.ascent,
-      descender: -layout.descent
-    };
+  if (textBoxTrim && textBoxTrim !== "none") {
     const trim = measureTrimMetrics(
       fontSize,
       fontFamily,
@@ -733,11 +629,15 @@ function layoutTextNative(text, style, maxWidth, lineHeight) {
       fontStyle,
       layout.lineHeight,
       style.textBoxEdge ?? "text",
-      void 0,
-      fontMetrics
+      layout.ascent,
+      layout.descent
     );
     if (textBoxTrim === "trim-start" || textBoxTrim === "trim-both") {
       for (const seg of segments) seg.y -= trim.overTrim;
+      for (const e of emoji) {
+        e.y -= trim.overTrim;
+        e.baseline -= trim.overTrim;
+      }
       height -= trim.overTrim;
       paragraphOffsetY = -trim.overTrim;
     }
@@ -750,270 +650,46 @@ function layoutTextNative(text, style, maxWidth, lineHeight) {
     width: segments.reduce((w, s) => Math.max(w, s.width), 0),
     height,
     paragraph,
-    paragraphOffsetY
+    paragraphOffsetY,
+    emoji
   };
 }
 
+// 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 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;
-      }
-    }
-    if (isEmojiSegment) {
-      if (textBuffer) {
-        totalWidth += measureWord(
-          textBuffer,
-          fontSize,
-          fontFamily,
-          fontWeight,
-          fontStyle,
-          ctx,
-          letterSpacing
-        );
-        textBuffer = "";
-      }
-      totalWidth += fontSize;
-    } else {
-      textBuffer += segment;
-    }
-  }
-  if (textBuffer) {
-    totalWidth += measureWord(
-      textBuffer,
-      fontSize,
-      fontFamily,
-      fontWeight,
-      fontStyle,
-      ctx,
-      letterSpacing
-    );
-  }
-  return totalWidth;
-}
-function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
+function layoutText(text, style, maxWidth, 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;
-  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 result = layoutTextNative(
+    applyTextTransform(collapseWhiteSpace(text, style.whiteSpace), style),
+    style,
+    maxWidth,
+    resolveLineHeight(style.lineHeight, fontSize),
+    emojiEnabled
   );
-  const letterSpacing = typeof style.letterSpacing === "number" ? style.letterSpacing : 0;
-  const whiteSpace = style.whiteSpace ?? "normal";
-  const wordBreak = style.wordBreak ?? "normal";
-  const textOverflow = style.textOverflow ?? "clip";
-  const textDecoration = style.textDecoration;
   const textStrokeWidth = resolveTextStrokeWidth(style, fontSize);
-  const textStrokeColor = style.WebkitTextStrokeColor;
-  const measure = emojiEnabled ? (word, ls) => emojiAwareMeasureWord(
-    word,
-    fontSize,
-    fontFamily,
-    fontWeight,
-    fontStyle,
-    ctx,
-    ls ?? letterSpacing
-  ) : (word, ls) => measureWord(
-    word,
-    fontSize,
-    fontFamily,
-    fontWeight,
-    fontStyle,
-    ctx,
-    ls ?? letterSpacing
-  );
-  const processedText = applyTextTransform(text, style);
-  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
-      );
-    }
+  for (const seg of result.segments) {
+    seg.textStrokeWidth = textStrokeWidth;
+    seg.textStrokeColor = style.WebkitTextStrokeColor;
   }
-  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);
-    const slack = Math.max(0, maxWidth - lineWidth);
-    let x = 0;
-    if (textAlign === "center") {
-      x = slack / 2;
-    } else if (textAlign === "right") {
-      x = slack;
-    }
-    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
-    });
-    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);
-  }
-  const textBoxTrim = style.textBoxTrim;
-  if (textBoxTrim && textBoxTrim !== "none" && segments.length > 0) {
-    const textBoxEdge = style.textBoxEdge ?? "text";
-    const trimMetrics = measureTrimMetrics(
-      fontSize,
-      fontFamily,
-      fontWeight,
-      fontStyle,
-      lineHeightPx,
-      textBoxEdge,
-      ctx,
-      fontMetrics
-    );
-    if (textBoxTrim === "trim-start" || textBoxTrim === "trim-both") {
-      for (const seg of segments) {
-        seg.y -= trimMetrics.overTrim;
-      }
-      totalHeight -= trimMetrics.overTrim;
-    }
-    if (textBoxTrim === "trim-end" || textBoxTrim === "trim-both") {
-      totalHeight -= trimMetrics.underTrim;
-    }
-  }
-  return {
-    segments,
-    width: maxLineWidth,
-    height: totalHeight
-  };
+  return result;
 }
 function resolveTextStrokeWidth(style, fontSize) {
   const raw = style.WebkitTextStrokeWidth;
@@ -1030,157 +706,98 @@ function applyTextTransform(text, style) {
   }
   return text;
 }
-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;
-  }
+function resolveLineHeight(lineHeight, fontSize) {
+  if (lineHeight === void 0 || lineHeight === "normal") return void 0;
+  let px;
   if (typeof lineHeight === "number") {
-    return lineHeight > 5 ? lineHeight : lineHeight * fontSize;
-  }
-  const parsed = parseFloat(String(lineHeight));
-  return isNaN(parsed) ? fontSize * 1.2 : parsed;
-}
-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).replace(/\s+$/, "");
-    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,
+    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;
+      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);
     }
-    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 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 { 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.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 line = text.slice(pos, breakPos);
-    if (line.trim()) lines.push(line);
-    pos = breakPos;
+  /**
+   * 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 { 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;
-    }
-  }
-  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) {
@@ -3408,106 +3025,70 @@ 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);
@@ -3516,32 +3097,12 @@ function loadEmojiImage(style, char) {
   }
   return cached;
 }
-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) {
+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 + paragraphOffsetY;
+  const y = offsetY + layout.paragraphOffsetY;
   const shadow = textShadow ? parseShadow(textShadow) : null;
   ctx.fillStyle = first.color;
   if (shadow) {
@@ -3561,172 +3122,37 @@ function drawParagraph(ctx, paragraph, segments, offsetX, offsetY, paragraphOffs
     ctx.restore();
   }
   fillParagraph(ctx, paragraph, x, y);
-  for (const seg of segments) {
-    if (seg.textDecoration) {
-      drawTextDecoration(ctx, seg, offsetX, offsetY);
-    }
+  if (emojiStyle && emoji.length > 0) {
+    await drawEmoji(ctx, emoji, first, offsetX, offsetY, emojiStyle);
   }
-}
-async function drawSegments(ctx, segments, offsetX, offsetY, textShadow, emojiStyle) {
-  const shadow = textShadow ? parseShadow(textShadow) : null;
   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(
@@ -3949,24 +3375,14 @@ async function paintNode(ctx, node, x, y, opacity, renderContext, emojiStyle, gr
     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,
-      emojiStyle,
-      textLayout.paragraph && {
-        paragraph: textLayout.paragraph,
-        offsetY: textLayout.paragraphOffsetY ?? 0
-      }
+      emojiStyle
     );
   }
   if (node.type === "img" && node.props.src) {
@@ -4071,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) {
@@ -4264,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;
@@ -4388,6 +3830,7 @@ import Yoga, {
   FlexDirection,
   Gutter,
   Justify,
+  MeasureMode,
   Overflow,
   PositionType,
   Wrap
@@ -4395,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();
 }
@@ -4567,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
@@ -4591,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 = {
@@ -4605,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",
@@ -4618,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);
@@ -4740,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);
@@ -4769,6 +4207,7 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
           style: childStyle,
           children: [],
           textContent,
+          textMeasure,
           props: {},
           yogaNode: childYogaNode
         }
@@ -4778,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,
@@ -4817,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,
@@ -4827,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")
@@ -4901,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 = {}) {
@@ -4931,7 +4397,6 @@ async function renderReactElement(ctx, element, options = {}) {
     element,
     width,
     height,
-    ctx,
     !!emojiStyle,
     fontFamilies,
     renderContext