@effing/canvas 0.43.0 → 0.44.0

package/dist/index.js

@@ -139,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];
@@ -302,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(
@@ -386,7 +402,7 @@ function quoteFontFamilies(fontFamily) {
 function setFont(ctx, fontSize, fontFamily, fontWeight = 400, fontStyle = "normal") {
   ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${quoteFontFamilies(fontFamily)}`;
 }
-function measureTrimMetrics(fontSize, fontFamily, fontWeight, fontStyle, lineHeight, edge, fontAscent, fontDescent) {
+function measureTrimMetrics(fontSize, fontFamily, fontWeight, fontStyle, line, edge) {
   const c = getScratchCtx();
   const measure = (text) => {
     setFont(c, fontSize, fontFamily, fontWeight, fontStyle);
@@ -417,7 +433,7 @@ function measureTrimMetrics(fontSize, fontFamily, fontWeight, fontStyle, lineHei
     case "ideographic-ink":
     case "text":
     default:
-      targetAscent = fontAscent;
+      targetAscent = line.ascent;
       break;
   }
   let targetDescent;
@@ -429,12 +445,11 @@ 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)
@@ -444,9 +459,10 @@ function measureTrimMetrics(fontSize, fontFamily, fontWeight, fontStyle, lineHei
 // src/jsx/text/native.ts
 function toWeight(weight) {
   if (typeof weight === "number") return weight;
-  if (weight === "bold") return 700;
-  const parsed = parseInt(String(weight ?? "400"), 10);
-  return isNaN(parsed) ? 400 : parsed;
+  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";
@@ -491,6 +507,17 @@ async function releaseParagraphs() {
   if (pendingParagraphs < MAX_PENDING_PARAGRAPHS) return;
   await new Promise((resolve) => setImmediate(resolve));
 }
+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"
 });
@@ -562,6 +589,7 @@ function layoutTextNative(text, style, maxWidth, lineHeight, emojiEnabled) {
     fontWeight: toWeight(fontWeight),
     fontStyle: toFontStyle(fontStyle),
     letterSpacing,
+    // Undefined for `normal`, which the paragraph sizes as Chrome does.
     lineHeight,
     textAlign: toTextAlign(style.textAlign),
     noWrap,
@@ -574,12 +602,16 @@ function layoutTextNative(text, style, maxWidth, lineHeight, emojiEnabled) {
   });
   countParagraph();
   const layout = paragraph.layout(width);
+  const box = halfLeadingLineBox(
+    layout.lineHeight,
+    layout.ascent,
+    layout.descent
+  );
   const lines = layout.lines.length > 0 ? layout.lines : [
     {
       left: 0,
       width: 0,
-      // As Skia places a baseline: by half-leading in the line box.
-      baseline: (layout.lineHeight + layout.ascent - layout.descent) / 2,
+      baseline: box.baseline,
       startIndex: 0,
       endIndex: 0,
       hardBreak: true
@@ -587,8 +619,7 @@ function layoutTextNative(text, style, maxWidth, lineHeight, emojiEnabled) {
   ];
   const toTextIndex = content.toTextIndex ?? ((index) => index);
   const segments = lines.map((line, i) => ({
-    // A line that ends the text at a newline reports the newline as its text.
-    text: text.slice(toTextIndex(line.startIndex), toTextIndex(line.endIndex)).replace(/\n/g, ""),
+    text: text.slice(toTextIndex(line.startIndex), toTextIndex(line.endIndex)),
     x: line.left,
     y: line.baseline,
     width: line.width,
@@ -604,21 +635,17 @@ function layoutTextNative(text, style, maxWidth, lineHeight, emojiEnabled) {
     lineIndex: i
   }));
   const emoji = [];
-  layout.placeholders.forEach((box, i) => {
-    if (!box) return;
+  layout.placeholders.forEach((placed, i) => {
+    if (!placed) return;
     emoji.push({
       grapheme: content.emoji[i],
-      x: box.x,
-      y: box.y,
+      x: placed.x,
+      y: placed.y,
       size: fontSize,
-      baseline: lines[box.line].baseline
+      baseline: lines[placed.line].baseline
     });
   });
   let height = lines.length * layout.lineHeight;
-  if (lineHeight === void 0) {
-    const noFontSize = Number.isFinite(styledFontSize) && styledFontSize <= 0;
-    height = noFontSize ? 0 : Math.ceil(height);
-  }
   let paragraphOffsetY = 0;
   const textBoxTrim = style.textBoxTrim;
   if (textBoxTrim && textBoxTrim !== "none") {
@@ -627,10 +654,8 @@ function layoutTextNative(text, style, maxWidth, lineHeight, emojiEnabled) {
       fontFamily,
       fontWeight,
       fontStyle,
-      layout.lineHeight,
-      style.textBoxEdge ?? "text",
-      layout.ascent,
-      layout.descent
+      box,
+      style.textBoxEdge ?? "text"
     );
     if (textBoxTrim === "trim-start" || textBoxTrim === "trim-both") {
       for (const seg of segments) seg.y -= trim.overTrim;
@@ -639,7 +664,7 @@ function layoutTextNative(text, style, maxWidth, lineHeight, emojiEnabled) {
         e.baseline -= trim.overTrim;
       }
       height -= trim.overTrim;
-      paragraphOffsetY = -trim.overTrim;
+      paragraphOffsetY -= trim.overTrim;
     }
     if (textBoxTrim === "trim-end" || textBoxTrim === "trim-both") {
       height -= trim.underTrim;
@@ -649,6 +674,8 @@ function layoutTextNative(text, style, maxWidth, lineHeight, emojiEnabled) {
     segments,
     width: segments.reduce((w, s) => Math.max(w, s.width), 0),
     height,
+    maxContentWidth: layout.maxIntrinsicWidth,
+    minContentWidth: layout.minIntrinsicWidth,
     paragraph,
     paragraphOffsetY,
     emoji
@@ -660,15 +687,17 @@ function isWhiteSpaceOnly(text) {
   return /^[ \t\n\r\f\v]*$/.test(text);
 }
 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") {
-    result = result.replace(/\r/g, "");
-  } else if (/[\t\n\r]| {2}|^ | $/.test(result)) {
+  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 result.replace(FINAL_BREAK, "").replace(SEPARATORS, SEPARATOR_SPACE);
+  return result;
 }
 var FINAL_BREAK = /\n$/;
 var SEPARATORS = /[\u2028\u2029]/g;
@@ -716,57 +745,189 @@ function resolveLineHeight(lineHeight, fontSize) {
   }
   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;
-    this.measureStyle = { ...style, textOverflow: "clip" };
   }
   text;
   style;
   emojiEnabled;
-  /** Yoga's measurements by width (Infinity for unbounded). */
+  /**
+   * Yoga's measurements by width (Infinity for unbounded), and those at
+   * exactly a width.
+   */
   sizes = /* @__PURE__ */ new Map();
-  /** The heights reported to Yoga since the last `settle`. */
+  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;
-  measureStyle;
+  /**
+   * 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) {
-    let size = this.sizes.get(maxWidth);
+  measure(maxWidth, exact = false) {
+    const sizes = exact ? this.exactSizes : this.sizes;
+    let size = sizes.get(maxWidth);
     if (!size) {
-      const result = layoutText(
-        this.text,
-        this.measureStyle,
-        maxWidth,
-        this.emojiEnabled
-      );
-      const wrapped = result.segments.length > 1 && maxWidth < Infinity;
-      size = {
-        width: wrapped ? maxWidth : Math.min(result.width, maxWidth),
-        height: result.height
-      };
-      this.sizes.set(maxWidth, size);
+      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 {
+        width = Math.min(
+          toLayoutGrid(Math.min(result.width, result.maxContentWidth)),
+          maxWidth
+        );
+      }
+      size = { width, height: result.height };
+      sizes.set(maxWidth, size);
     }
     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);
+    }
+    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)
+    );
+    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 last call.
+   * 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
-   *   should mark the node dirty and compute the layout again.
+   *   must mark the node dirty and compute the layout again.
    */
   settle(width, pin) {
     if (this.settled?.width !== width) {
@@ -777,20 +938,22 @@ var TextMeasure = class {
     }
     const { height } = this.settled.result;
     const agrees = this.reported.size === 0 || this.reported.size === 1 && this.reported.has(height);
-    this.reported.clear();
     if (agrees) return false;
-    if (pin) this.pinnedHeight = height;
+    if (pin) {
+      this.pinnedHeight = height;
+      this.reported.clear();
+    }
     return true;
   }
   /**
    * Drop the pinned height, so that Yoga sees the measured heights again.
    *
-   * @returns Whether there was a pin
+   * @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;
-    this.reported.clear();
+    if (pinned) this.reported.clear();
     return pinned;
   }
   /** The text as laid out by the last `settle`. */
@@ -1050,34 +1213,114 @@ 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
-  ];
-  const margin = blur * 2 + Math.abs(offsetX) + Math.abs(offsetY);
+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);
-  ctx.roundRect(x, y, width, height, radii);
+  roundedRect(ctx, x, y, width, height, ...radii);
   ctx.clip("evenodd");
-  ctx.filter = `blur(${blur / 2}px)`;
-  ctx.translate(offsetX, offsetY);
-  ctx.fillStyle = color;
+  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();
-  ctx.roundRect(x, y, width, height, radii);
-  ctx.fill();
+  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)
+  ];
+}
+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
 var GEOMETRY_BOXES = /* @__PURE__ */ new Set([
@@ -1994,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;
@@ -3103,12 +3420,12 @@ async function drawText(ctx, layout, offsetX, offsetY, textShadow, emojiStyle) {
   if (!first) return;
   const x = offsetX;
   const y = offsetY + layout.paragraphOffsetY;
-  const shadow = textShadow ? parseShadow(textShadow) : null;
+  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)
     );
@@ -3154,24 +3471,13 @@ async function drawEmoji(ctx, emoji, font, offsetX, offsetY, emojiStyle) {
     ctx.textRendering = textRendering;
   });
 }
-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()
-  };
-}
 function getColorAlpha(color) {
   const parsed = parseCssColor2(color);
   return parsed ? parsed.alpha : 1;
 }
 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)`;
@@ -3261,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);
@@ -3298,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,
@@ -3347,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;
@@ -3833,6 +4142,7 @@ import Yoga, {
   MeasureMode,
   Overflow,
   PositionType,
+  Unit,
   Wrap
 } from "yoga-layout";
 function createYogaNode() {
@@ -3851,6 +4161,10 @@ function freeYogaNode(node) {
 }
 
 // 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);
@@ -3928,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);
@@ -3962,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 {
@@ -3987,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);
@@ -3995,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) {
@@ -4005,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);
@@ -4013,7 +4331,7 @@ 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));
   }
 }
 
@@ -4041,12 +4359,46 @@ async function buildLayoutTree(element, containerWidth, containerHeight, emojiEn
   rootYogaNode.setHeight(containerHeight);
   rootYogaNode.setFlexDirection(FlexDirection.Row);
   rootYogaNode.insertChild(elementYogaNode, 0);
-  rootYogaNode.calculateLayout(containerWidth, containerHeight);
-  settleText(
-    elementNode,
-    () => rootYogaNode.calculateLayout(containerWidth, containerHeight),
-    renderContext.debug
-  );
+  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 = {
@@ -4071,20 +4423,9 @@ 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 textMeasure = new TextMeasure(text, style2, emojiEnabled);
-    setTextMeasure(yogaNode, textMeasure);
-    return {
-      type: "text",
-      style: style2,
-      children: [],
-      textContent: text,
-      textMeasure,
-      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;
@@ -4181,14 +4522,18 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
       yogaNode
     };
   }
-  const items = flattenChildren(props.children);
-  const onlyText = items.length === 1 && isText(items[0]) ? items[0] : null;
-  if (onlyText !== null && !isWhiteSpaceOnly(String(onlyText))) {
-    const textContent = String(onlyText);
-    const childStyle = resolveStyle(void 0, style);
+  const 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 textMeasure = new TextMeasure(textContent, childStyle, emojiEnabled);
-    setTextMeasure(childYogaNode, textMeasure);
+    const child = buildTextNode(
+      textContentOf(onlyText),
+      style,
+      childYogaNode,
+      emojiEnabled
+    );
     const jc = style.justifyContent;
     if (!jc || jc === "flex-start") {
       childYogaNode.setFlexGrow(1);
@@ -4198,28 +4543,29 @@ 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,
-          textMeasure,
-          props: {},
-          yogaNode: childYogaNode
-        }
-      ],
+      children: [child],
       props,
-      yogaNode
+      yogaNode,
+      autoMinimum: hasAutoMinimum(style, parentStyle) ? {
+        textMeasure,
+        style,
+        column: !isRow(parentStyle),
+        text: childYogaNode
+      } : void 0
     };
   }
   const children = [];
   for (const rendered of items) {
-    if (typeof rendered === "string" && isWhiteSpaceOnly(rendered)) continue;
-    const childYogaNode = isText(rendered) ? createTextYogaNode() : createYogaNode();
+    const childYogaNode = isTextRun(rendered) ? createTextYogaNode() : createYogaNode();
     yogaNode.insertChild(childYogaNode, children.length);
     children.push(
       await buildNode(
@@ -4275,11 +4621,248 @@ function settleText(root, relayout, debug) {
     );
   }
 }
+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) => textMeasure.measure(
-      widthMode === MeasureMode.Undefined || Number.isNaN(width) ? Infinity : width
-    )
+    (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";
@@ -4292,6 +4875,15 @@ function renderComponents(node) {
   }
   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") {
@@ -4306,13 +4898,22 @@ function flattenChildren(node, items = []) {
     return flattenChildren(el.props?.children, items);
   }
   const last = items[items.length - 1];
-  if (isText(rendered) && items.length > 0 && isText(last)) {
-    items[items.length - 1] = `${last}${rendered}`;
-  } else {
+  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);