@effing/canvas 0.42.0 → 0.44.0

package/dist/index.js

@@ -130,6 +130,7 @@ var INHERITABLE_PROPS = [
   "letterSpacing",
   "whiteSpace",
   "wordBreak",
+  "overflowWrap",
   "textOverflow",
   "lineClamp",
   "textBoxTrim",
@@ -138,8 +139,22 @@ var INHERITABLE_PROPS = [
   "WebkitTextStrokeWidth",
   "WebkitTextStrokeColor"
 ];
+var CSS_NUMBER = /^[+-]?(\d+(\.\d+)?|\.\d+)([eE][+-]?\d+)?$/;
+var FONT_WEIGHT_KEYWORDS = /* @__PURE__ */ new Set(["normal", "bold", "bolder", "lighter"]);
+function isValidFontWeight(weight) {
+  if (typeof weight === "string") {
+    const text = weight.trim();
+    if (FONT_WEIGHT_KEYWORDS.has(text.toLowerCase())) return true;
+    if (!CSS_NUMBER.test(text)) return false;
+    weight = Number(text);
+  }
+  return Number.isFinite(weight) && weight >= 1 && weight <= 1e3;
+}
 function resolveStyle(rawStyle, parentStyle) {
   const style = { ...rawStyle };
+  if (style.fontWeight !== void 0 && !isValidFontWeight(style.fontWeight)) {
+    delete style.fontWeight;
+  }
   for (const prop of INHERITABLE_PROPS) {
     if (style[prop] === void 0 && parentStyle[prop] !== void 0) {
       style[prop] = parentStyle[prop];
@@ -301,7 +316,9 @@ var LENGTH_STRING_PROPS = [
   ["transformOrigin", ""],
   ["clipPath", "px"],
   ["filter", "px"],
-  ["backdropFilter", "px"]
+  ["backdropFilter", "px"],
+  ["boxShadow", "px"],
+  ["textShadow", "px"]
 ];
 function resolveLengthUnits(transform, viewportWidth, viewportHeight, fontSize, rootFontSize, suffix = "") {
   return transform.replace(
@@ -320,176 +337,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 +377,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 +402,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, line, edge) {
+  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;
@@ -583,7 +433,7 @@ function measureTrimMetrics(fontSize, fontFamily, fontWeight, fontStyle, lineHei
     case "ideographic-ink":
     case "text":
     default:
-      targetAscent = fontAscent;
+      targetAscent = line.ascent;
       break;
   }
   let targetDescent;
@@ -595,48 +445,24 @@ function measureTrimMetrics(fontSize, fontFamily, fontWeight, fontStyle, lineHei
     case "ideographic-ink":
     case "text":
     default:
-      targetDescent = fontDescent;
+      targetDescent = line.descent;
       break;
   }
-  const halfLeading = (lineHeight - (fontAscent + fontDescent)) / 2;
-  const overTrim = halfLeading + (fontAscent - targetAscent);
-  const underTrim = halfLeading + (fontDescent - targetDescent);
+  const overTrim = line.baseline - targetAscent;
+  const underTrim = line.lineHeight - line.baseline - targetDescent;
   return {
     overTrim: Math.max(0, overTrim),
     underTrim: Math.max(0, underTrim)
   };
 }
-function measureWord(word, fontSize, fontFamily, fontWeight = 400, fontStyle = "normal", ctx, letterSpacing = 0) {
-  const base = measureText(
-    word,
-    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;
-  const parsed = parseInt(String(weight ?? "400"), 10);
-  return isNaN(parsed) ? 400 : parsed;
+  const text = String(weight ?? "400").trim().toLowerCase();
+  if (text === "bold") return 700;
+  const parsed = text === "" ? NaN : Number(text);
+  return Number.isFinite(parsed) ? parsed : 400;
 }
 function toFontStyle(fontStyle) {
   if (fontStyle?.startsWith("italic")) return "italic";
@@ -654,7 +480,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 +507,119 @@ 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;
+function halfLeadingLineBox(lineHeight, ascent, descent) {
+  const a = Math.round(ascent);
+  const d = Math.round(descent);
+  const leading = (lineHeight - a - d) * 64;
+  return {
+    lineHeight,
+    baseline: a + Math.floor(Math.trunc(leading / 2) / 64),
+    ascent: a,
+    descent: d
+  };
+}
+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,
+    // Undefined for `normal`, which the paragraph sizes as Chrome does.
+    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) => ({
-    // 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, ""),
+  const box = halfLeadingLineBox(
+    layout.lineHeight,
+    layout.ascent,
+    layout.descent
+  );
+  const lines = layout.lines.length > 0 ? layout.lines : [
+    {
+      left: 0,
+      width: 0,
+      baseline: box.baseline,
+      startIndex: 0,
+      endIndex: 0,
+      hardBreak: true
+    }
+  ];
+  const toTextIndex = content.toTextIndex ?? ((index) => index);
+  const segments = lines.map((line, i) => ({
+    text: text.slice(toTextIndex(line.startIndex), toTextIndex(line.endIndex)),
     x: line.left,
     y: line.baseline,
     width: line.width,
@@ -714,32 +634,37 @@ 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((placed, i) => {
+    if (!placed) return;
+    emoji.push({
+      grapheme: content.emoji[i],
+      x: placed.x,
+      y: placed.y,
+      size: fontSize,
+      baseline: lines[placed.line].baseline
+    });
+  });
+  let height = lines.length * layout.lineHeight;
   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,
       fontWeight,
       fontStyle,
-      layout.lineHeight,
-      style.textBoxEdge ?? "text",
-      void 0,
-      fontMetrics
+      box,
+      style.textBoxEdge ?? "text"
     );
     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;
+      paragraphOffsetY -= trim.overTrim;
     }
     if (textBoxTrim === "trim-end" || textBoxTrim === "trim-both") {
       height -= trim.underTrim;
@@ -749,271 +674,51 @@ function layoutTextNative(text, style, maxWidth, lineHeight) {
     segments,
     width: segments.reduce((w, s) => Math.max(w, s.width), 0),
     height,
+    maxContentWidth: layout.maxIntrinsicWidth,
+    minContentWidth: layout.minIntrinsicWidth,
     paragraph,
-    paragraphOffsetY
+    paragraphOffsetY,
+    emoji
   };
 }
 
-// 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;
+// src/jsx/text/white-space.ts
+function isWhiteSpaceOnly(text) {
+  return /^[ \t\n\r\f\v]*$/.test(text);
 }
-function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
-  const fontSize = style.fontSize ?? 16;
-  const isAutoLineHeight = style.lineHeight === void 0 || style.lineHeight === "normal";
-  const lineHeight = isAutoLineHeight ? void 0 : resolveLineHeight(style.lineHeight, fontSize);
-  const hasLineBox = lineHeight === void 0 || lineHeight > 0;
-  if (hasLineBox && canLayoutNatively(text, style, emojiEnabled)) {
-    const result = layoutTextNative(
-      applyTextTransform(text, style),
-      style,
-      maxWidth,
-      lineHeight
-    );
-    if (result) {
-      const textStrokeWidth = resolveTextStrokeWidth(style, fontSize);
-      for (const seg of result.segments) {
-        seg.textStrokeWidth = textStrokeWidth;
-        seg.textStrokeColor = style.WebkitTextStrokeColor;
-      }
-      return result;
-    }
+function collapseWhiteSpace(text, whiteSpace) {
+  const pieces = typeof text === "string" ? [text] : text;
+  return pieces.map((piece) => collapsePiece(piece, whiteSpace)).join("\n").replace(/\r\n/g, "\n").replace(FINAL_BREAK, "").replace(SEPARATORS, SEPARATOR_SPACE);
+}
+function collapsePiece(text, whiteSpace) {
+  let result = text.replace(/[\v\f]/g, "").replace(/\r\n/g, "\n");
+  if (whiteSpace !== "pre" && whiteSpace !== "pre-wrap" && /[\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 layoutTextFallback(text, style, maxWidth, ctx, emojiEnabled);
+  return result;
 }
-function layoutTextFallback(text, style, maxWidth, ctx, emojiEnabled) {
+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 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 +735,232 @@ 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,
-        maxWidth,
-        fontSize,
-        fontFamily,
-        fontWeight,
-        fontStyle,
-        ctx,
-        letterSpacing,
-        measureFn
-      );
-      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);
+    px = lineHeight > 5 ? lineHeight : lineHeight * fontSize;
+  } else {
+    px = parseFloat(lineHeight);
+  }
+  return Number.isFinite(px) && px >= 0 ? px : void 0;
+}
+function toLayoutGrid(width) {
+  return Math.ceil(width * 64) / 64;
+}
+var graphemeSegmenter2 = new Intl.Segmenter(void 0, {
+  granularity: "grapheme"
+});
+var TextMeasure = class {
+  constructor(text, style, emojiEnabled) {
+    this.text = text;
+    this.style = style;
+    this.emojiEnabled = emojiEnabled;
+  }
+  text;
+  style;
+  emojiEnabled;
+  /**
+   * Yoga's measurements by width (Infinity for unbounded), and those at
+   * exactly a width.
+   */
+  sizes = /* @__PURE__ */ new Map();
+  exactSizes = /* @__PURE__ */ new Map();
+  /**
+   * The heights reported to Yoga since the node was last marked dirty (see
+   * `settle`): Yoga may size the node, and its ancestors, from any of them,
+   * cached, without measuring it again.
+   */
+  reported = /* @__PURE__ */ new Set();
+  pinnedHeight;
+  settled;
+  /**
+   * The text's intrinsic widths, from whichever layout came first: its
+   * max-content width, and a bound on its min-content width, which is the
+   * min-content width but where finding it takes more (see `widestGrapheme`).
+   */
+  intrinsic;
+  /**
+   * Measure the text for Yoga.
+   *
+   * @param maxWidth - The width available, Infinity for unbounded
+   * @param exact - Whether the node is exactly `maxWidth` wide, whatever its
+   *   text: it's then measured for its height there
+   */
+  measure(maxWidth, exact = false) {
+    const sizes = exact ? this.exactSizes : this.sizes;
+    let size = sizes.get(maxWidth);
+    if (!size) {
+      let result = this.layOut(maxWidth);
+      let width;
+      if (exact) {
+        width = maxWidth;
+      } else if (result.maxContentWidth > maxWidth) {
+        width = this.minContentBound <= maxWidth ? maxWidth : Math.max(maxWidth, this.minContentWidth);
+        if (width > maxWidth) result = this.layOut(width);
       } else {
-        lines.push(remaining);
+        width = Math.min(
+          toLayoutGrid(Math.min(result.width, result.maxContentWidth)),
+          maxWidth
+        );
       }
+      size = { width, height: result.height };
+      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 };
+  }
+  /**
+   * The height of the text's lines at exactly `width`, as drawn there,
+   * whatever height later measurements are pinned to.
+   */
+  heightAt(width) {
+    if (this.settled?.width === width) return this.settled.result.height;
+    let size = this.exactSizes.get(width);
+    if (!size) {
+      size = { width, height: this.layOut(width).height };
+      this.exactSizes.set(width, size);
     }
-    const line = text.slice(pos, breakPos);
-    if (line.trim()) lines.push(line);
-    pos = breakPos;
-  }
-  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
+    return size.height;
+  }
+  /**
+   * The text's min-content width: as narrow as it gets, each run of it that
+   * can't break on a line of its own. As CSS has it, that's the widest word,
+   * or the widest line for text that doesn't wrap, and under
+   * `overflow-wrap: anywhere` (or `word-break: break-word`) and
+   * `word-break: break-all` the widest letter. Text truncated with an
+   * ellipsis (`text-overflow: ellipsis` without wrapping, or a line clamp)
+   * has none: it's drawn at whatever width it has, which CSS gives it in
+   * the `overflow: hidden` box an ellipsis needs.
+   *
+   * Never wider than the text's widest line, and on the layout grid (see
+   * `toLayoutGrid`), as the widths `measure` reports are.
+   */
+  get minContentWidth() {
+    const intrinsic = this.intrinsic ?? this.measureIntrinsic();
+    intrinsic.min ??= Math.min(
+      toLayoutGrid(this.widestGrapheme()),
+      intrinsic.minBound
+    );
+    return intrinsic.min;
+  }
+  /** At least the text's min-content width, and found without more work. */
+  get minContentBound() {
+    return (this.intrinsic ?? this.measureIntrinsic()).minBound;
+  }
+  /**
+   * The text's max-content width: its widest line, were no line to wrap, on
+   * the layout grid.
+   */
+  get maxContentWidth() {
+    return (this.intrinsic ?? this.measureIntrinsic()).max;
+  }
+  /** Whether the text can't be narrower than its widest line. */
+  get unbreakable() {
+    return this.minContentBound >= this.maxContentWidth;
+  }
+  measureIntrinsic() {
+    this.layOut(Infinity);
+    return this.intrinsic;
+  }
+  layOut(width) {
+    const result = layoutText(this.text, this.style, width, this.emojiEnabled);
+    this.intrinsic ??= this.intrinsicOf(result);
+    return result;
+  }
+  /** The intrinsic widths of the text, from a layout of it at any width. */
+  intrinsicOf(result) {
+    const { style } = this;
+    const max = toLayoutGrid(result.maxContentWidth);
+    const noWrap = style.whiteSpace === "nowrap" || style.whiteSpace === "pre";
+    if (style.lineClamp !== void 0 && style.lineClamp >= 1 || noWrap && style.textOverflow === "ellipsis") {
+      return { max, minBound: 0, min: 0 };
+    }
+    const minBound = Math.min(
+      toLayoutGrid(
+        noWrap ? Math.min(result.minContentWidth, result.width) : result.minContentWidth
+      ),
+      max
+    );
+    const anywhere = !noWrap && (style.overflowWrap === "anywhere" || style.wordBreak === "break-word");
+    return { max, minBound, min: anywhere ? void 0 : minBound };
+  }
+  /**
+   * The width of the text's widest grapheme cluster: its min-content where
+   * a line may break between any two. Each one is laid out once, as a word
+   * of its own.
+   */
+  widestGrapheme() {
+    const text = applyTextTransform(
+      collapseWhiteSpace(this.text, this.style.whiteSpace),
+      this.style
+    );
+    const graphemes = new Set(
+      /^[\s!-\u02ff]*$/.test(text) ? text : Array.from(graphemeSegmenter2.segment(text), ({ segment }) => segment)
     );
-    if (w <= availWidth) {
-      return truncated + ellipsis;
+    for (const grapheme of graphemes) {
+      if (/^\s+$/.test(grapheme)) graphemes.delete(grapheme);
     }
+    if (graphemes.size === 0) return 0;
+    return layoutText(
+      [...graphemes].join(" "),
+      {
+        ...this.style,
+        whiteSpace: "normal",
+        wordBreak: "normal",
+        overflowWrap: "normal",
+        textTransform: "none"
+      },
+      Infinity,
+      this.emojiEnabled
+    ).minContentWidth;
+  }
+  /**
+   * Lay the text out for drawing at the node's final content width, and
+   * check it against the heights Yoga was given since the node was last
+   * marked dirty: Yoga reuses a node's measurements until then, also when
+   * the node ends up at another width, so the heights of earlier layouts
+   * count too, not just those of the last.
+   *
+   * @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
+   *   must 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);
+    if (agrees) return false;
+    if (pin) {
+      this.pinnedHeight = height;
+      this.reported.clear();
+    }
+    return true;
   }
-  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 };
-  };
-}
+  /**
+   * Drop the pinned height, so that Yoga sees the measured heights again.
+   *
+   * @returns Whether there was a pin, for the caller to mark the node dirty
+   */
+  unpin() {
+    const pinned = this.pinnedHeight !== void 0;
+    this.pinnedHeight = void 0;
+    if (pinned) this.reported.clear();
+    return pinned;
+  }
+  /** The text as laid out by the last `settle`. */
+  get layout() {
+    return this.settled?.result;
+  }
+};
 
 // src/jsx/draw/clip.ts
 function applyClip(ctx, x, y, width, height, borderRadius) {
@@ -1433,33 +1213,113 @@ 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 drawBoxShadow(ctx, x, y, width, height, boxShadow, borderRadius) {
-  const parts = boxShadow.match(BOX_SHADOW_RE);
-  if (!parts) return;
-  const offsetX = parseFloat(parts[1]);
-  const offsetY = parseFloat(parts[2]);
-  const blur = parseFloat(parts[3]);
-  const color = parts[5].trim();
-  const radii = [
-    borderRadius.topLeft,
-    borderRadius.topRight,
-    borderRadius.bottomRight,
-    borderRadius.bottomLeft
+var NO_COLOR = "rgba(0, 0, 0, 0)";
+function drawBoxShadow(ctx, x, y, width, height, shadows, borderRadius) {
+  const outer = shadows.filter((s) => !s.inset);
+  if (outer.length === 0) return;
+  const radii = clampRadii(borderRadius, width, height);
+  let margin = 0;
+  for (const s of outer) {
+    margin = Math.max(margin, reach(s));
+  }
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(x - margin, y - margin, width + margin * 2, height + margin * 2);
+  roundedRect(ctx, x, y, width, height, ...radii);
+  ctx.clip("evenodd");
+  for (let i = outer.length - 1; i >= 0; i--) {
+    const s = outer[i];
+    const w = width + s.spread * 2;
+    const h = height + s.spread * 2;
+    if (w <= 0 || h <= 0) continue;
+    ctx.save();
+    setShadowPaint(ctx, s);
+    ctx.beginPath();
+    roundedRect(
+      ctx,
+      x - s.spread + s.offsetX,
+      y - s.spread + s.offsetY,
+      w,
+      h,
+      ...spreadRadii(radii, s.spread)
+    );
+    ctx.fill();
+    ctx.restore();
+  }
+  ctx.restore();
+}
+function drawInsetBoxShadow(ctx, x, y, width, height, shadows, borderRadius, style) {
+  const inset = shadows.filter((s) => s.inset);
+  if (inset.length === 0) return;
+  const bt = resolveBoxValue(style.borderTopWidth, width);
+  const br = resolveBoxValue(style.borderRightWidth, width);
+  const bb = resolveBoxValue(style.borderBottomWidth, width);
+  const bl = resolveBoxValue(style.borderLeftWidth, width);
+  const px = x + bl;
+  const py = y + bt;
+  const pw = width - bl - br;
+  const ph = height - bt - bb;
+  if (pw <= 0 || ph <= 0) return;
+  const [tl, tr, brr, bll] = clampRadii(borderRadius, width, height);
+  const inner = [
+    Math.max(0, tl - Math.max(bt, bl)),
+    Math.max(0, tr - Math.max(bt, br)),
+    Math.max(0, brr - Math.max(bb, br)),
+    Math.max(0, bll - Math.max(bb, bl))
+  ];
+  ctx.save();
+  ctx.beginPath();
+  roundedRect(ctx, px, py, pw, ph, ...inner);
+  ctx.clip();
+  for (let i = inset.length - 1; i >= 0; i--) {
+    const s = inset[i];
+    const m = reach(s);
+    ctx.save();
+    setShadowPaint(ctx, s);
+    ctx.beginPath();
+    ctx.rect(px - m, py - m, pw + m * 2, ph + m * 2);
+    const w = pw - s.spread * 2;
+    const h = ph - s.spread * 2;
+    if (w > 0 && h > 0) {
+      roundedRect(
+        ctx,
+        px + s.spread + s.offsetX,
+        py + s.spread + s.offsetY,
+        w,
+        h,
+        ...spreadRadii(inner, -s.spread)
+      );
+    }
+    ctx.fill("evenodd");
+    ctx.restore();
+  }
+  ctx.restore();
+}
+function reach(s) {
+  return s.blur * 2 + Math.abs(s.offsetX) + Math.abs(s.offsetY) + Math.abs(s.spread) + 1;
+}
+function setShadowPaint(ctx, s) {
+  ctx.fillStyle = NO_COLOR;
+  ctx.fillStyle = s.color;
+  if (s.blur > 0) ctx.filter = `blur(${s.blur / 2}px)`;
+}
+function clampRadii(r, width, height) {
+  const max = maxCornerRadius(width, height);
+  return [
+    Math.min(r.topLeft, max),
+    Math.min(r.topRight, max),
+    Math.min(r.bottomRight, max),
+    Math.min(r.bottomLeft, max)
   ];
-  const margin = blur * 2 + Math.abs(offsetX) + Math.abs(offsetY);
-  ctx.save();
-  ctx.beginPath();
-  ctx.rect(x - margin, y - margin, width + margin * 2, height + margin * 2);
-  ctx.roundRect(x, y, width, height, radii);
-  ctx.clip("evenodd");
-  ctx.filter = `blur(${blur / 2}px)`;
-  ctx.translate(offsetX, offsetY);
-  ctx.fillStyle = color;
-  ctx.beginPath();
-  ctx.roundRect(x, y, width, height, radii);
-  ctx.fill();
-  ctx.restore();
+}
+function spreadRadii(radii, spread) {
+  return radii.map((r) => spreadRadius(r, spread));
+}
+function spreadRadius(r, spread) {
+  if (spread <= 0) return Math.max(0, r + spread);
+  if (r >= spread) return r + spread;
+  const ratio = r / spread;
+  return r + spread * (1 + (ratio - 1) ** 3);
 }
 
 // src/jsx/draw/clip-path.ts
@@ -2377,6 +2237,80 @@ async function drawImage(ctx, src, x, y, width, height, context, style) {
   }
 }
 
+// src/jsx/draw/shadow.ts
+var BOX_SHADOW = { maxLengths: 4, inset: true };
+var TEXT_SHADOW = { maxLengths: 3, inset: false };
+function parseBoxShadow(value, currentColor) {
+  return parseShadowList(value, currentColor, BOX_SHADOW);
+}
+function parseTextShadow(value, currentColor) {
+  return parseShadowList(value, currentColor, TEXT_SHADOW);
+}
+function parseShadowList(value, currentColor, syntax) {
+  const text = value.trim();
+  if (text === "" || text.toLowerCase() === "none") return [];
+  const shadows = [];
+  for (const item of splitTopLevel(text, ",")) {
+    const shadow = parseShadow(item, currentColor, syntax);
+    if (!shadow) return [];
+    shadows.push(shadow);
+  }
+  return shadows;
+}
+var LENGTH = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)(px)?$/i;
+var NUMERIC = /^[+-]?\.?\d/;
+function parseShadow(item, currentColor, syntax) {
+  const tokens = splitTopLevel(item, " ");
+  const lengths = [];
+  let lengthsEnded = false;
+  let inset = false;
+  let color;
+  for (const token of tokens) {
+    if (NUMERIC.test(token)) {
+      const match = LENGTH.exec(token);
+      if (!match || lengthsEnded) return null;
+      lengths.push(parseFloat(match[1]));
+      continue;
+    }
+    if (lengths.length > 0) lengthsEnded = true;
+    if (token.toLowerCase() === "inset") {
+      if (!syntax.inset || inset) return null;
+      inset = true;
+    } else {
+      if (color !== void 0) return null;
+      color = token;
+    }
+  }
+  if (lengths.length < 2 || lengths.length > syntax.maxLengths) return null;
+  const [offsetX, offsetY, blur = 0, spread = 0] = lengths;
+  if (blur < 0) return null;
+  if (color === void 0 || color.toLowerCase() === "currentcolor") {
+    color = currentColor;
+  }
+  return { offsetX, offsetY, blur, spread, inset, color };
+}
+function splitTopLevel(text, separator) {
+  const parts = [];
+  let depth = 0;
+  let current = "";
+  for (const ch of text) {
+    if (ch === "(") depth++;
+    else if (ch === ")") depth = Math.max(0, depth - 1);
+    const splits = depth === 0 && (separator === "," ? ch === "," : /\s/.test(ch));
+    if (splits) {
+      parts.push(current);
+      current = "";
+    } else {
+      current += ch;
+    }
+  }
+  parts.push(current);
+  if (separator === ",") {
+    return parts.map((p) => p.trim());
+  }
+  return parts.filter((p) => p !== "");
+}
+
 // src/jsx/draw/svg/style.ts
 function resolveCurrentColor(value, color) {
   if (value?.toLowerCase() === "currentcolor") return color;
@@ -3408,106 +3342,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,38 +3414,18 @@ 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 shadow = textShadow ? parseShadow(textShadow) : null;
+  const y = offsetY + layout.paragraphOffsetY;
+  const shadows = textShadow ? parseTextShadow(textShadow, first.color) : [];
   ctx.fillStyle = first.color;
-  if (shadow) {
+  for (let i = shadows.length - 1; i >= 0; i--) {
     drawShadowPass(
       ctx,
-      shadow,
+      shadows[i],
       getColorAlpha(first.color),
       () => fillParagraph(ctx, paragraph, x, y)
     );
@@ -3561,184 +3439,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();
-}
-function parseShadow(shadow) {
-  const parts = shadow.match(
-    /(-?\d+(?:\.\d+)?)\s*(?:px)?\s+(-?\d+(?:\.\d+)?)\s*(?:px)?\s+(-?\d+(?:\.\d+)?)\s*(?:px)?\s+(.*)/
-  );
-  if (!parts) return null;
-  return {
-    offsetX: parseFloat(parts[1]),
-    offsetY: parseFloat(parts[2]),
-    blur: parseFloat(parts[3]),
-    color: parts[4].trim()
-  };
+    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 getColorAlpha(color) {
   const parsed = parseCssColor2(color);
@@ -3746,6 +3477,7 @@ function getColorAlpha(color) {
 }
 function drawShadowPass(ctx, shadow, textAlpha, drawFn) {
   ctx.save();
+  ctx.fillStyle = "rgba(0, 0, 0, 0)";
   ctx.fillStyle = shadow.color;
   if (textAlpha < 1) ctx.globalAlpha *= textAlpha;
   if (shadow.blur > 0) ctx.filter = `blur(${shadow.blur / 2}px)`;
@@ -3835,9 +3567,8 @@ async function paintNode(ctx, node, x, y, opacity, renderContext, emojiStyle, gr
     );
   }
   group.open = beginElementGroup(ctx, opacity, style.filter);
-  if (style.boxShadow) {
-    drawBoxShadow(ctx, x, y, width, height, style.boxShadow, borderRadius);
-  }
+  const boxShadows = style.boxShadow ? parseBoxShadow(style.boxShadow, style.color ?? "black") : [];
+  drawBoxShadow(ctx, x, y, width, height, boxShadows, borderRadius);
   const isClipped = style.overflow === "hidden" || style.overflowX === "hidden" || style.overflowY === "hidden";
   if (isClipped) {
     applyClip(ctx, x, y, width, height, borderRadius);
@@ -3872,15 +3603,14 @@ async function paintNode(ctx, node, x, y, opacity, renderContext, emojiStyle, gr
       } else {
         const urlMatch = layer.match(/url\(["']?(.*?)["']?\)/);
         if (urlMatch) {
-          if (hasRadius(borderRadius)) {
-            applyClip(ctx, x, y, width, height, borderRadius);
-          }
           const image = await cachedLoadImage(
             renderContext.imageCache,
             urlMatch[1],
             renderContext.userAgent
           );
           const bgSize = style.backgroundSize;
+          ctx.save();
+          applyClip(ctx, x, y, width, height, borderRadius);
           if (bgSize === "cover") {
             const r = computeCover(
               image.width,
@@ -3921,19 +3651,24 @@ async function paintNode(ctx, node, x, y, opacity, renderContext, emojiStyle, gr
               tileW = image.width;
               tileH = image.height;
             }
+            const drawable = tileW > 0 && tileH > 0 && Number.isFinite(tileW) && Number.isFinite(tileH);
             const repeat = style.backgroundRepeat ?? "repeat";
             const stepX = repeat === "repeat" || repeat === "repeat-x" ? tileW : width;
             const stepY = repeat === "repeat" || repeat === "repeat-y" ? tileH : height;
-            for (let ty = y; ty < y + height; ty += stepY) {
-              for (let tx = x; tx < x + width; tx += stepX) {
-                ctx.drawImage(image, tx, ty, tileW, tileH);
+            if (drawable) {
+              for (let ty = y; ty < y + height; ty += stepY) {
+                for (let tx = x; tx < x + width; tx += stepX) {
+                  ctx.drawImage(image, tx, ty, tileW, tileH);
+                }
               }
             }
           }
+          ctx.restore();
         }
       }
     }
   }
+  drawInsetBoxShadow(ctx, x, y, width, height, boxShadows, borderRadius, style);
   if (renderContext.debug) {
     ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
     ctx.lineWidth = 1;
@@ -3949,24 +3684,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 +3796,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 +4011,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,18 +4139,32 @@ import Yoga, {
   FlexDirection,
   Gutter,
   Justify,
+  MeasureMode,
   Overflow,
   PositionType,
+  Unit,
   Wrap
 } from "yoga-layout";
 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();
 }
 
 // src/jsx/style/properties.ts
+function toLayoutUnit(px) {
+  if (!Number.isFinite(px)) return px;
+  return Math.trunc(Math.round(px * 64 * 1e6) / 1e6) / 64;
+}
 function applyStylesToYoga(node, style) {
   if (style.display === "none") {
     node.setDisplay(Display.None);
@@ -4477,14 +4242,14 @@ function applyStylesToYoga(node, style) {
   node.setFlexShrink(style.flexShrink ?? 0);
   if (style.flexBasis !== void 0) {
     if (typeof style.flexBasis === "number") {
-      node.setFlexBasis(style.flexBasis);
+      node.setFlexBasis(toLayoutUnit(style.flexBasis));
     } else if (String(style.flexBasis).endsWith("%")) {
       node.setFlexBasis(String(style.flexBasis));
     } else if (style.flexBasis === "auto") {
       node.setFlexBasis("auto");
     } else {
       const n = parseFloat(String(style.flexBasis));
-      if (!isNaN(n)) node.setFlexBasis(n);
+      if (!isNaN(n)) node.setFlexBasis(toLayoutUnit(n));
     }
   }
   applyDimension(node, "setWidth", style.width);
@@ -4511,16 +4276,20 @@ function applyStylesToYoga(node, style) {
   applyEdgeValue(node, "setPadding", Edge.Bottom, style.paddingBottom);
   applyEdgeValue(node, "setPadding", Edge.Left, style.paddingLeft);
   if (style.borderTopWidth !== void 0)
-    node.setBorder(Edge.Top, style.borderTopWidth);
+    node.setBorder(Edge.Top, toLayoutUnit(style.borderTopWidth));
   if (style.borderRightWidth !== void 0)
-    node.setBorder(Edge.Right, style.borderRightWidth);
+    node.setBorder(Edge.Right, toLayoutUnit(style.borderRightWidth));
   if (style.borderBottomWidth !== void 0)
-    node.setBorder(Edge.Bottom, style.borderBottomWidth);
+    node.setBorder(
+      Edge.Bottom,
+      toLayoutUnit(style.borderBottomWidth)
+    );
   if (style.borderLeftWidth !== void 0)
-    node.setBorder(Edge.Left, style.borderLeftWidth);
-  if (style.rowGap !== void 0) node.setGap(Gutter.Row, style.rowGap);
+    node.setBorder(Edge.Left, toLayoutUnit(style.borderLeftWidth));
+  if (style.rowGap !== void 0)
+    node.setGap(Gutter.Row, toLayoutUnit(style.rowGap));
   if (style.columnGap !== void 0)
-    node.setGap(Gutter.Column, style.columnGap);
+    node.setGap(Gutter.Column, toLayoutUnit(style.columnGap));
   if (style.overflow === "hidden" || style.overflowX === "hidden" || style.overflowY === "hidden") {
     node.setOverflow(Overflow.Hidden);
   } else {
@@ -4536,7 +4305,7 @@ function applyDimension(node, setter, value) {
     return;
   }
   if (typeof value === "number") {
-    node[setter](value);
+    node[setter](toLayoutUnit(value));
     return;
   }
   const s = String(value);
@@ -4544,7 +4313,7 @@ function applyDimension(node, setter, value) {
     node[setter](s);
   } else {
     const n = parseFloat(s);
-    if (!isNaN(n)) node[setter](n);
+    if (!isNaN(n)) node[setter](toLayoutUnit(n));
   }
 }
 function applyEdgeValue(node, setter, edge, value) {
@@ -4554,7 +4323,7 @@ function applyEdgeValue(node, setter, edge, value) {
     return;
   }
   if (typeof value === "number") {
-    node[setter](edge, value);
+    node[setter](edge, toLayoutUnit(value));
     return;
   }
   const s = String(value);
@@ -4562,25 +4331,25 @@ function applyEdgeValue(node, setter, edge, value) {
     node[setter](edge, s);
   } else {
     const n = parseFloat(s);
-    if (!isNaN(n)) node[setter](edge, n);
+    if (!isNaN(n)) node[setter](edge, toLayoutUnit(n));
   }
 }
 
 // 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
@@ -4590,7 +4359,46 @@ async function buildLayoutTree(element, containerWidth, containerHeight, ctx, em
   rootYogaNode.setHeight(containerHeight);
   rootYogaNode.setFlexDirection(FlexDirection.Row);
   rootYogaNode.insertChild(elementYogaNode, 0);
-  rootYogaNode.calculateLayout(containerWidth, containerHeight);
+  let layouts = 0;
+  const compute = () => {
+    layouts++;
+    rootYogaNode.calculateLayout(containerWidth, containerHeight);
+  };
+  const autoMinimums = collectAutoMinimums(elementNode);
+  const layOut = () => {
+    compute();
+    for (const node of autoMinimums) node.autoMinimum.refreshed = false;
+    for (let pass = 0; pass < MAX_AUTO_MINIMUM_RELAYOUTS && enforceAutoMinimums(autoMinimums); pass++) {
+      compute();
+    }
+  };
+  layOut();
+  settleText(elementNode, layOut, renderContext.debug);
+  const limit = RUNAWAY_SIZE * Math.max(containerWidth, containerHeight);
+  for (let pass = 0; pass < MAX_RUNAWAY_RELAYOUTS; pass++) {
+    const runaway2 = findRunawayItems(elementNode, limit);
+    if (runaway2.length === 0) break;
+    for (const item of runaway2) pinAtMinimum(item);
+    layOut();
+    settleText(elementNode, layOut, renderContext.debug);
+  }
+  const runaway = findRunawayItems(elementNode, limit);
+  if (runaway.length > 0) {
+    const lines = new Set(runaway.map((item) => item.parent));
+    const lifted = [...lines].flatMap((line) => line.children).filter((node) => node.autoMinimum && liftAutoMinimum(node));
+    if (lifted.length > 0) {
+      layOut();
+      settleText(elementNode, layOut, renderContext.debug);
+    }
+    if (renderContext.debug) {
+      console.warn(
+        "[@effing/canvas] Yoga sized flex items out of all proportion" + (lifted.length > 0 ? ": laid their text out without minimums" : "")
+      );
+    }
+  }
+  if (renderContext.debug && layouts > 5) {
+    console.warn(`[@effing/canvas] computed the layout ${layouts} times`);
+  }
   const elementLayout = extractLayout(elementNode, elementYogaNode);
   freeYogaNode(rootYogaNode);
   const tree = {
@@ -4605,7 +4413,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",
@@ -4615,38 +4423,12 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
       yogaNode
     };
   }
-  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);
-    return {
-      type: "text",
-      style: style2,
-      children: [],
-      textContent: text,
-      props: {},
-      yogaNode
-    };
+  if (isText(element) || isTextRun(element)) {
+    const text = isTextRun(element) ? textContentOf(element) : String(element);
+    return buildTextNode(text, parentStyle, yogaNode, emojiEnabled);
   }
   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 +4522,18 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
       yogaNode
     };
   }
-  const textContent = extractTextContent(props.children);
-  if (textContent !== void 0 && !hasElementChildren(props.children)) {
-    const childStyle = resolveStyle(void 0, style);
-    const childYogaNode = createYogaNode();
-    const measureFunc = createTextMeasureFunc(
-      textContent,
-      childStyle,
-      ctx,
+  const items = flattenChildren(props.children).filter(
+    (item) => !isTextRun(item) || !isBlankRun(item)
+  );
+  const onlyText = items.length === 1 && isTextRun(items[0]) ? items[0] : null;
+  if (onlyText !== null) {
+    const childYogaNode = createTextYogaNode();
+    const child = buildTextNode(
+      textContentOf(onlyText),
+      style,
+      childYogaNode,
       emojiEnabled
     );
-    childYogaNode.setMeasureFunc(measureFunc);
     const jc = style.justifyContent;
     if (!jc || jc === "flex-start") {
       childYogaNode.setFlexGrow(1);
@@ -4760,54 +4543,42 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
     if (style.flexShrink === void 0) {
       yogaNode.setFlexShrink(1);
     }
+    const textMeasure = child.textMeasure;
+    child.autoMinimum = {
+      textMeasure,
+      column: !isRow(style),
+      text: childYogaNode
+    };
     return {
       type: tagName,
       style,
-      children: [
-        {
-          type: "text",
-          style: childStyle,
-          children: [],
-          textContent,
-          props: {},
-          yogaNode: childYogaNode
-        }
-      ],
+      children: [child],
       props,
-      yogaNode
+      yogaNode,
+      autoMinimum: hasAutoMinimum(style, parentStyle) ? {
+        textMeasure,
+        style,
+        column: !isRow(parentStyle),
+        text: childYogaNode
+      } : void 0
     };
   }
   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) {
+    const childYogaNode = isTextRun(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 +4588,339 @@ 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 buildTextNode(text, parentStyle, yogaNode, emojiEnabled) {
+  const style = resolveStyle(void 0, parentStyle);
+  const textMeasure = new TextMeasure(text, style, emojiEnabled);
+  setTextMeasure(yogaNode, textMeasure);
+  return {
+    type: "text",
+    style,
+    children: [],
+    textContent: text,
+    textMeasure,
+    props: {},
+    yogaNode
+  };
+}
+var isRow = (style) => style.flexDirection === void 0 || style.flexDirection === "row" || style.flexDirection === "row-reverse";
+function hasAutoMinimum(style, parentStyle) {
+  const min = isRow(parentStyle) ? style.minWidth : style.minHeight;
+  return style.position !== "absolute" && (min === void 0 || min === "auto") && ![style.overflow, style.overflowX, style.overflowY].some(
+    (overflow) => overflow === "hidden" || overflow === "scroll" || overflow === "auto"
+  );
+}
+var MAX_AUTO_MINIMUM_RELAYOUTS = 4;
+function collectAutoMinimums(root) {
+  const nodes = [];
+  const collect = (node) => {
+    if (node.style.display === "none") return;
+    if (node.autoMinimum) nodes.push(node);
+    node.children.forEach(collect);
+  };
+  collect(root);
+  return nodes;
+}
+function enforceAutoMinimums(nodes) {
+  let enforced = false;
+  for (const node of nodes) {
+    const autoMinimum = node.autoMinimum;
+    if (autoMinimum.lifted) continue;
+    if (autoMinimum.column) {
+      if (enforceAutoMinimumHeight(node)) enforced = true;
+      continue;
+    }
+    if (autoMinimum.lift) continue;
+    const { yogaNode } = node;
+    const { textMeasure, style } = autoMinimum;
+    const width = yogaNode.getComputedWidth();
+    const tolerance = style ? 1 : 1e-3;
+    const edges = style ? horizontalEdges(yogaNode, style) : 0;
+    if (width + tolerance >= textMeasure.minContentBound + edges) continue;
+    const minimum = autoMinimumWidth(node);
+    if (minimum === void 0 || width + tolerance >= minimum) continue;
+    autoMinimum.lift = holdAtMinimum(yogaNode, minimum, {
+      atBasis: textMeasure.unbreakable && (!style || isAuto(style.width) && isAuto(style.flexBasis)),
+      // The text in an element sizes the element's own flex basis, which a
+      // pin would take from it.
+      pin: style !== void 0,
+      column: false
+    });
+    enforced = true;
+  }
+  return enforced;
+}
+function enforceAutoMinimumHeight(node) {
+  const autoMinimum = node.autoMinimum;
+  const { yogaNode } = node;
+  const { style } = autoMinimum;
+  const minimum = autoMinimumHeight(node);
+  if (minimum === void 0) return false;
+  const height = yogaNode.getComputedHeight();
+  const tolerance = style ? 0.5 : 1e-3;
+  const short = height + tolerance < minimum;
+  const atBasis = !style || isAuto(style.height) && isAuto(style.flexBasis);
+  if (autoMinimum.lift) {
+    const { held } = autoMinimum;
+    if (held === void 0) {
+      if (!short) return false;
+    } else if (Math.abs(held - minimum) < tolerance || // In a column that wraps, the heights decide the widths: an item is
+    // only ever held higher there, or they could swing back and forth.
+    minimum < held && yogaNode.getParent()?.getFlexWrap() !== Wrap.NoWrap) {
+      if (height + (style ? 1 : 1e-3) >= held || autoMinimum.refreshed) {
+        return false;
+      }
+      autoMinimum.text.markDirty();
+      autoMinimum.refreshed = true;
+      return true;
+    }
+    autoMinimum.lift();
+  } else if (!short) {
+    return false;
+  } else if (atBasis) {
+    autoMinimum.lift = holdAtMinimum(yogaNode, minimum, {
+      atBasis: true,
+      pin: false,
+      column: true
+    });
+    return true;
+  }
+  autoMinimum.held = minimum;
+  autoMinimum.lift = holdAtMinimum(yogaNode, minimum, {
+    atBasis: false,
+    pin: !atBasis,
+    column: true
+  });
+  return true;
+}
+var isAuto = (value) => value === void 0 || value === "auto";
+function horizontalEdges(yogaNode, style) {
+  const lengths = style && [
+    style.paddingLeft,
+    style.paddingRight,
+    style.borderLeftWidth,
+    style.borderRightWidth
+  ];
+  if (lengths?.every((v) => v === void 0 || typeof v === "number")) {
+    return lengths.reduce(
+      (sum, v) => sum + toLayoutUnit(v ?? 0),
+      0
+    );
+  }
+  return yogaNode.getComputedPadding(Edge.Left) + yogaNode.getComputedPadding(Edge.Right) + yogaNode.getComputedBorder(Edge.Left) + yogaNode.getComputedBorder(Edge.Right);
+}
+function autoMinimumWidth(node) {
+  const { yogaNode } = node;
+  const { textMeasure, style } = node.autoMinimum;
+  if (!style) return textMeasure.minContentWidth;
+  const parent = yogaNode.getParent();
+  return capped(
+    textMeasure.minContentWidth + horizontalEdges(yogaNode, style),
+    [style.width, style.maxWidth],
+    parent ? parent.getComputedWidth() - horizontalEdges(parent) : NaN
+  );
+}
+function autoMinimumHeight(node) {
+  const { yogaNode } = node;
+  const { textMeasure, style, text } = node.autoMinimum;
+  const height = textMeasure.heightAt(text.getComputedWidth());
+  if (!style) return height;
+  const parent = yogaNode.getParent();
+  return capped(
+    height + verticalEdges(yogaNode),
+    [style.height, style.maxHeight],
+    parent ? parent.getComputedHeight() - verticalEdges(parent) : NaN
+  );
+}
+function capped(minimum, sizes, parentContentSize) {
+  for (const value of sizes) {
+    if (isAuto(value)) continue;
+    let cap;
+    if (typeof value === "number") {
+      cap = toLayoutUnit(value);
+    } else if (value.endsWith("%") && Number.isFinite(parentContentSize)) {
+      cap = parseFloat(value) / 100 * parentContentSize;
+    } else {
+      return void 0;
+    }
+    if (!Number.isFinite(cap)) return void 0;
+    minimum = Math.min(minimum, cap);
+  }
+  return minimum;
+}
+var verticalEdges = (yogaNode) => yogaNode.getComputedPadding(Edge.Top) + yogaNode.getComputedPadding(Edge.Bottom) + yogaNode.getComputedBorder(Edge.Top) + yogaNode.getComputedBorder(Edge.Bottom);
+function holdAtMinimum(yogaNode, minimum, { atBasis, pin, column }) {
+  const flexShrink = yogaNode.getFlexShrink();
+  if (atBasis) {
+    yogaNode.setFlexShrink(0);
+    return () => yogaNode.setFlexShrink(flexShrink);
+  }
+  const wraps = yogaNode.getParent()?.getFlexWrap() !== Wrap.NoWrap;
+  if (!pin || wraps) {
+    const setMin = (value) => column ? yogaNode.setMinHeight(value) : yogaNode.setMinWidth(value);
+    setMin(minimum);
+    return () => setMin(void 0);
+  }
+  const flexGrow = yogaNode.getFlexGrow();
+  const flexBasis = yogaNode.getFlexBasis();
+  yogaNode.setFlexBasis(minimum);
+  yogaNode.setFlexShrink(0);
+  yogaNode.setFlexGrow(0);
+  return () => {
+    yogaNode.setFlexShrink(flexShrink);
+    yogaNode.setFlexGrow(flexGrow);
+    if (flexBasis.unit === Unit.Point) yogaNode.setFlexBasis(flexBasis.value);
+    else if (flexBasis.unit === Unit.Percent)
+      yogaNode.setFlexBasis(`${flexBasis.value}%`);
+    else yogaNode.setFlexBasis("auto");
+  };
+}
+function liftAutoMinimum(node) {
+  const autoMinimum = node.autoMinimum;
+  const { lift } = autoMinimum;
+  lift?.();
+  autoMinimum.lift = void 0;
+  autoMinimum.lifted = true;
+  return lift !== void 0;
+}
+var RUNAWAY_SIZE = 100;
+var MAX_RUNAWAY_RELAYOUTS = 2;
+var isRunaway = (size, limit) => !(Math.abs(size) <= limit);
+function findRunawayItems(root, limit) {
+  const items = [];
+  const visit = (node, parent) => {
+    if (node.style.display === "none") return;
+    const { yogaNode } = node;
+    if (parent) {
+      const row = [FlexDirection.Row, FlexDirection.RowReverse].includes(
+        parent.yogaNode.getFlexDirection()
+      );
+      const size = (n) => row ? n.getComputedWidth() : n.getComputedHeight();
+      if (yogaNode.getFlexShrink() > 0 && isRunaway(size(yogaNode), limit) && !isRunaway(size(parent.yogaNode), limit)) {
+        items.push({ node, parent, row });
+        return;
+      }
+    }
+    for (const child of node.children) visit(child, node);
+  };
+  visit(root);
+  return items;
+}
+function pinAtMinimum({ node, parent, row }) {
+  const { yogaNode } = node;
+  const autoMinimum = node.autoMinimum;
+  const auto = autoMinimum && autoMinimum.column !== row ? row ? autoMinimumWidth(node) : autoMinimumHeight(node) : 0;
+  yogaNode.setFlexBasis(
+    Math.max(minimumSize(yogaNode, parent.yogaNode, row), auto ?? 0)
+  );
+  yogaNode.setFlexShrink(0);
+}
+function minimumSize(yogaNode, parent, row) {
+  const [start, end] = row ? [Edge.Left, Edge.Right] : [Edge.Top, Edge.Bottom];
+  const edges = (node) => node.getComputedPadding(start) + node.getComputedPadding(end) + node.getComputedBorder(start) + node.getComputedBorder(end);
+  const min = row ? yogaNode.getMinWidth() : yogaNode.getMinHeight();
+  let minimum = 0;
+  if (min.unit === Unit.Point) {
+    minimum = min.value;
+  } else if (min.unit === Unit.Percent) {
+    const parentSize = row ? parent.getComputedWidth() : parent.getComputedHeight();
+    minimum = min.value / 100 * (parentSize - edges(parent));
+  }
+  return Math.max(minimum, edges(yogaNode));
+}
+function setTextMeasure(yogaNode, textMeasure) {
+  yogaNode.setMeasureFunc(
+    (width, widthMode) => widthMode === MeasureMode.Undefined || Number.isNaN(width) ? textMeasure.measure(Infinity) : textMeasure.measure(width, widthMode === MeasureMode.Exactly)
+  );
+}
+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;
+}
+var TextRun = class {
+  pieces;
+  constructor(...pieces) {
+    this.pieces = pieces;
+  }
+};
+var isTextRun = (node) => node instanceof TextRun;
+var textContentOf = (run) => run.pieces.length === 1 ? run.pieces[0] : run.pieces;
+var isBlankRun = (run) => run.pieces.length === 1 && isWhiteSpaceOnly(run.pieces[0]);
+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)) {
+    if (isTextRun(last)) {
+      last.pieces[last.pieces.length - 1] += String(rendered);
+    } else {
+      items.push(new TextRun(String(rendered)));
+    }
+  } else if (!isBreak(rendered)) {
+    items.push(rendered);
+  } else if (!isHidden(rendered)) {
+    if (isTextRun(last)) last.pieces.push("");
+    else items.push(new TextRun("", ""));
+  }
+  return items;
+}
+var isBreak = (node) => typeof node === "object" && node !== null && node.type === "br";
+var isHidden = (el) => el.props.style?.display === "none";
+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 +4929,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 +4980,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 +4998,6 @@ async function renderReactElement(ctx, element, options = {}) {
     element,
     width,
     height,
-    ctx,
     !!emojiStyle,
     fontFamilies,
     renderContext