@effing/canvas 0.22.2 → 0.23.0

package/dist/index.js

@@ -23,6 +23,292 @@ function renderLottieFrame(ctx, animation, frame) {
 // src/jsx/draw/index.ts
 import { loadImage as loadImage3 } from "@napi-rs/canvas";
 
+// src/jsx/style/compute.ts
+var ROOT_FONT_SIZE = 16;
+var DEFAULT_STYLE = {
+  display: "flex",
+  flexDirection: "row",
+  flexWrap: "nowrap",
+  flexGrow: 0,
+  flexShrink: 0,
+  alignItems: "stretch",
+  justifyContent: "flex-start",
+  position: "relative",
+  fontSize: ROOT_FONT_SIZE,
+  fontWeight: 400,
+  fontStyle: "normal",
+  color: "black",
+  lineHeight: "normal",
+  textAlign: "left",
+  whiteSpace: "normal",
+  wordBreak: "normal",
+  textOverflow: "clip",
+  opacity: 1,
+  overflow: "visible"
+};
+var INHERITABLE_PROPS = [
+  "color",
+  "fontSize",
+  "fontFamily",
+  "fontWeight",
+  "fontStyle",
+  "textAlign",
+  "textTransform",
+  "textDecoration",
+  "lineHeight",
+  "letterSpacing",
+  "whiteSpace",
+  "wordBreak",
+  "textOverflow",
+  "lineClamp",
+  "textBoxTrim",
+  "textBoxEdge",
+  "WebkitTextStrokeWidth",
+  "WebkitTextStrokeColor"
+];
+function resolveStyle(rawStyle, parentStyle) {
+  const style = { ...rawStyle };
+  for (const prop of INHERITABLE_PROPS) {
+    if (style[prop] === void 0 && parentStyle[prop] !== void 0) {
+      style[prop] = parentStyle[prop];
+    }
+  }
+  if (typeof style.fontSize === "string") {
+    const parentFontSize = typeof parentStyle.fontSize === "number" ? parentStyle.fontSize : ROOT_FONT_SIZE;
+    const resolved = resolveUnit(
+      style.fontSize,
+      0,
+      0,
+      parentFontSize,
+      ROOT_FONT_SIZE
+    );
+    style.fontSize = typeof resolved === "number" ? resolved : parentFontSize;
+  }
+  if (typeof style.lineHeight === "string") {
+    const str = style.lineHeight;
+    if (str.endsWith("%")) {
+      style.lineHeight = parseFloat(str) / 100;
+    } else {
+      const parsed = parseFloat(str);
+      if (!isNaN(parsed)) {
+        style.lineHeight = parsed;
+      }
+    }
+  }
+  if (typeof style.letterSpacing === "string") {
+    const currentFontSize = typeof style.fontSize === "number" ? style.fontSize : typeof parentStyle.fontSize === "number" ? parentStyle.fontSize : ROOT_FONT_SIZE;
+    const resolved = resolveUnit(
+      style.letterSpacing,
+      0,
+      0,
+      currentFontSize,
+      ROOT_FONT_SIZE
+    );
+    if (typeof resolved === "number") {
+      style.letterSpacing = resolved;
+    }
+  }
+  return style;
+}
+var DIMENSION_PROPS = [
+  "width",
+  "height",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "rowGap",
+  "columnGap",
+  "flexBasis",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomRightRadius",
+  "borderBottomLeftRadius",
+  "WebkitTextStrokeWidth"
+];
+function resolveUnit(value, viewportWidth, viewportHeight, fontSize, rootFontSize) {
+  if (value.endsWith("%") || value === "auto") return value;
+  if (value.endsWith("vmin")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n / 100 * Math.min(viewportWidth, viewportHeight);
+  }
+  if (value.endsWith("vmax")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n / 100 * Math.max(viewportWidth, viewportHeight);
+  }
+  if (value.endsWith("vw")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n / 100 * viewportWidth;
+  }
+  if (value.endsWith("vh")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n / 100 * viewportHeight;
+  }
+  if (value.endsWith("rem")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * rootFontSize;
+  }
+  if (value.endsWith("em")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * fontSize;
+  }
+  if (value.endsWith("px")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n;
+  }
+  if (value.endsWith("pt")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * (96 / 72);
+  }
+  if (value.endsWith("pc")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * 16;
+  }
+  if (value.endsWith("in")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * 96;
+  }
+  if (value.endsWith("cm")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * (96 / 2.54);
+  }
+  if (value.endsWith("mm")) {
+    const n = parseFloat(value);
+    return isNaN(n) ? value : n * (96 / 25.4);
+  }
+  return value;
+}
+function resolveUnits(style, viewportWidth, viewportHeight, rootFontSize = ROOT_FONT_SIZE) {
+  const fontSize = typeof style.fontSize === "number" ? style.fontSize : rootFontSize;
+  for (const prop of DIMENSION_PROPS) {
+    const value = style[prop];
+    if (typeof value !== "string") continue;
+    const resolved = resolveUnit(
+      value,
+      viewportWidth,
+      viewportHeight,
+      fontSize,
+      rootFontSize
+    );
+    if (resolved !== value) {
+      style[prop] = resolved;
+    }
+  }
+  if (style.transform) {
+    style.transform = resolveTransformUnits(
+      style.transform,
+      viewportWidth,
+      viewportHeight,
+      fontSize,
+      rootFontSize
+    );
+  }
+  if (style.transformOrigin) {
+    style.transformOrigin = resolveTransformUnits(
+      style.transformOrigin,
+      viewportWidth,
+      viewportHeight,
+      fontSize,
+      rootFontSize
+    );
+  }
+  return style;
+}
+function resolveTransformUnits(transform, viewportWidth, viewportHeight, fontSize, rootFontSize) {
+  return transform.replace(
+    /(-?\d*\.?\d+)(vw|vh|vmin|vmax|em|rem|px|pt|pc|in|cm|mm)\b/g,
+    (match) => {
+      const resolved = resolveUnit(
+        match,
+        viewportWidth,
+        viewportHeight,
+        fontSize,
+        rootFontSize
+      );
+      return typeof resolved === "number" ? String(resolved) : match;
+    }
+  );
+}
+
+// src/jsx/font.ts
+import { GlobalFonts } from "@napi-rs/canvas";
+
+// src/jsx/font-metrics.ts
+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 numTables = view.getUint16(4);
+  if (buf.byteLength < 12 + numTables * 16) return null;
+  let headOffset = -1;
+  let os2Offset = -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 === "OS/2") os2Offset = offset;
+  }
+  if (headOffset < 0 || os2Offset < 0) return null;
+  if (buf.byteLength < headOffset + 20) return null;
+  const unitsPerEm = view.getUint16(headOffset + 18);
+  if (buf.byteLength < os2Offset + 74) return null;
+  const sTypoAscender = view.getInt16(os2Offset + 68);
+  const sTypoDescender = view.getInt16(os2Offset + 70);
+  const sTypoLineGap = view.getInt16(os2Offset + 72);
+  return { unitsPerEm, sTypoAscender, sTypoDescender, sTypoLineGap };
+}
+
+// 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 exact = metricsCache.get(`${family}:${weight}:${style}`);
+  if (exact) return exact;
+  for (const [key, metrics] of metricsCache) {
+    if (key.startsWith(`${family}:`)) 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/language.ts
 function isEmoji(char) {
   const cp = char.codePointAt(0);
@@ -110,12 +396,19 @@ function measureText(text, fontSize, fontFamily, fontWeight = 400, fontStyle = "
     height: ascent + descent
   };
 }
-function measureTrimMetrics(fontSize, fontFamily, fontWeight, fontStyle, lineHeight, edge, ctx) {
+function measureTrimMetrics(fontSize, fontFamily, fontWeight, fontStyle, lineHeight, edge, ctx, fontMetrics) {
   const c = ctx ?? getScratchCtx();
   setFont(c, fontSize, fontFamily, fontWeight, fontStyle);
   const refMetrics = c.measureText("M");
-  const fontAscent = refMetrics.fontBoundingBoxAscent ?? refMetrics.actualBoundingBoxAscent ?? fontSize * 0.8;
-  const fontDescent = refMetrics.fontBoundingBoxDescent ?? refMetrics.actualBoundingBoxDescent ?? fontSize * 0.2;
+  let fontAscent;
+  let fontDescent;
+  if (fontMetrics) {
+    fontAscent = fontMetrics.sTypoAscender / fontMetrics.unitsPerEm * fontSize;
+    fontDescent = -fontMetrics.sTypoDescender / fontMetrics.unitsPerEm * fontSize;
+  } 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;
@@ -230,16 +523,29 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
     fontStyle,
     ctx
   );
+  const fontMetrics = getFontMetrics(fontFamily, fontWeight, fontStyle);
   const lineHeightPx = resolveLineHeight(
     style.lineHeight,
     fontSize,
-    refMetrics
+    refMetrics,
+    fontMetrics
   );
   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;
+  let textStrokeWidth;
+  const rawStrokeWidth = style.WebkitTextStrokeWidth;
+  if (rawStrokeWidth !== void 0) {
+    if (typeof rawStrokeWidth === "number") {
+      textStrokeWidth = rawStrokeWidth;
+    } else {
+      const resolved = resolveUnit(String(rawStrokeWidth), 0, 0, fontSize, 16);
+      textStrokeWidth = typeof resolved === "number" ? resolved : void 0;
+    }
+  }
+  const textStrokeColor = style.WebkitTextStrokeColor;
   const measure = emojiEnabled ? (word, ls) => emojiAwareMeasureWord(
     word,
     fontSize,
@@ -338,10 +644,18 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
       fontStyle,
       ctx
     );
+    let baselineY;
+    if (fontMetrics) {
+      const typoAscent = fontMetrics.sTypoAscender / fontMetrics.unitsPerEm * fontSize;
+      const typoDescent = -fontMetrics.sTypoDescender / fontMetrics.unitsPerEm * fontSize;
+      baselineY = totalHeight + (lineHeightPx + typoAscent - typoDescent) / 2;
+    } else {
+      baselineY = totalHeight + (lineHeightPx + metrics.ascent - metrics.descent) / 2;
+    }
     segments.push({
       text: line,
       x,
-      y: totalHeight + (lineHeightPx + metrics.ascent - metrics.descent) / 2,
+      y: baselineY,
       width: lineWidth,
       height: lineHeightPx,
       fontSize,
@@ -352,7 +666,9 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
       ascent: metrics.ascent,
       textDecoration,
       letterSpacing,
-      lineIndex: i
+      lineIndex: i,
+      textStrokeWidth,
+      textStrokeColor
     });
     totalHeight += lineHeightPx;
     maxLineWidth = Math.max(maxLineWidth, lineWidth);
@@ -367,7 +683,8 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
       fontStyle,
       lineHeightPx,
       textBoxEdge,
-      ctx
+      ctx,
+      fontMetrics
     );
     if (textBoxTrim === "trim-start" || textBoxTrim === "trim-both") {
       for (const seg of segments) {
@@ -385,9 +702,13 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
     height: totalHeight
   };
 }
-function resolveLineHeight(lineHeight, fontSize, metrics) {
+function resolveLineHeight(lineHeight, fontSize, canvasMetrics, fontMetrics) {
   if (lineHeight === void 0 || lineHeight === "normal") {
-    return metrics ? metrics.ascent + metrics.descent : fontSize * 1.2;
+    if (fontMetrics) {
+      const { sTypoAscender, sTypoDescender, sTypoLineGap, unitsPerEm } = fontMetrics;
+      return (sTypoAscender - sTypoDescender + sTypoLineGap) / unitsPerEm * fontSize;
+    }
+    return canvasMetrics ? canvasMetrics.ascent + canvasMetrics.descent : fontSize * 1.2;
   }
   if (typeof lineHeight === "number") {
     return lineHeight > 5 ? lineHeight : lineHeight * fontSize;
@@ -2083,14 +2404,42 @@ async function drawText(ctx, segments, offsetX, offsetY, textShadow, emojiStyle)
     ctx.fillStyle = seg.color;
     const x = offsetX + seg.x;
     const y = offsetY + seg.y;
+    const hasStroke = seg.textStrokeWidth !== void 0 && seg.textStrokeWidth > 0;
     if (emojiStyle) {
-      await drawSegmentWithEmoji(ctx, seg, x, y, textShadow, emojiStyle);
+      await drawSegmentWithEmoji(
+        ctx,
+        seg,
+        x,
+        y,
+        textShadow,
+        emojiStyle,
+        hasStroke
+      );
     } else if (seg.letterSpacing && seg.letterSpacing !== 0) {
+      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 (textShadow) {
         drawTextShadow(ctx, seg.text, x, y, textShadow);
       }
+      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) {
@@ -2098,7 +2447,7 @@ async function drawText(ctx, segments, offsetX, offsetY, textShadow, emojiStyle)
     }
   }
 }
-async function drawSegmentWithEmoji(ctx, seg, x, y, textShadow, emojiStyle) {
+async function drawSegmentWithEmoji(ctx, seg, x, y, textShadow, emojiStyle, hasStroke) {
   const letterSpacing = seg.letterSpacing ?? 0;
   const runs = splitTextIntoRuns(
     seg.text,
@@ -2114,6 +2463,26 @@ async function drawSegmentWithEmoji(ctx, seg, x, y, textShadow, emojiStyle) {
       if (textShadow) {
         drawTextShadow(ctx, run.text, x + run.x, y, textShadow);
       }
+      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 {
@@ -2139,6 +2508,19 @@ function drawTextWithLetterSpacing(ctx, text, x, y, letterSpacing) {
     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 drawTextShadow(ctx, text, x, y, shadow) {
   const parts = shadow.match(
     /(-?\d+(?:\.\d+)?)\s*px?\s+(-?\d+(?:\.\d+)?)\s*px?\s+(-?\d+(?:\.\d+)?)\s*px?\s+(.*)/
@@ -2524,28 +2906,6 @@ function parseAngle(value) {
   return parseFloat(value);
 }
 
-// src/jsx/font.ts
-import { GlobalFonts } from "@napi-rs/canvas";
-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/layout.ts
 import { loadImage as loadImage4 } from "@napi-rs/canvas";
 
@@ -2720,6 +3080,20 @@ function expandStyle(raw, fontFamilies) {
     }
     delete style.textBox;
   }
+  if (style.WebkitTextStroke !== void 0) {
+    const val = String(style.WebkitTextStroke).trim();
+    const match = val.match(/^(\S+)\s+(.+)$/);
+    if (match) {
+      if (style.WebkitTextStrokeWidth === void 0)
+        style.WebkitTextStrokeWidth = parseValue(match[1]);
+      if (style.WebkitTextStrokeColor === void 0)
+        style.WebkitTextStrokeColor = match[2];
+    } else {
+      if (style.WebkitTextStrokeWidth === void 0)
+        style.WebkitTextStrokeWidth = parseValue(val);
+    }
+    delete style.WebkitTextStroke;
+  }
   if (typeof style.fontFamily === "string") {
     const families = style.fontFamily.split(",").map((s) => s.trim().replace(/^['"]|['"]$/g, "")).filter(Boolean);
     if (fontFamilies) {
@@ -2733,226 +3107,6 @@ function expandStyle(raw, fontFamilies) {
   return style;
 }
 
-// src/jsx/style/compute.ts
-var ROOT_FONT_SIZE = 16;
-var DEFAULT_STYLE = {
-  display: "flex",
-  flexDirection: "row",
-  flexWrap: "nowrap",
-  flexGrow: 0,
-  flexShrink: 0,
-  alignItems: "stretch",
-  justifyContent: "flex-start",
-  position: "relative",
-  fontSize: ROOT_FONT_SIZE,
-  fontWeight: 400,
-  fontStyle: "normal",
-  color: "black",
-  lineHeight: "normal",
-  textAlign: "left",
-  whiteSpace: "normal",
-  wordBreak: "normal",
-  textOverflow: "clip",
-  opacity: 1,
-  overflow: "visible"
-};
-var INHERITABLE_PROPS = [
-  "color",
-  "fontSize",
-  "fontFamily",
-  "fontWeight",
-  "fontStyle",
-  "textAlign",
-  "textTransform",
-  "textDecoration",
-  "lineHeight",
-  "letterSpacing",
-  "whiteSpace",
-  "wordBreak",
-  "textOverflow",
-  "lineClamp",
-  "textBoxTrim",
-  "textBoxEdge"
-];
-function resolveStyle(rawStyle, parentStyle) {
-  const style = { ...rawStyle };
-  for (const prop of INHERITABLE_PROPS) {
-    if (style[prop] === void 0 && parentStyle[prop] !== void 0) {
-      style[prop] = parentStyle[prop];
-    }
-  }
-  if (typeof style.fontSize === "string") {
-    const parentFontSize = typeof parentStyle.fontSize === "number" ? parentStyle.fontSize : ROOT_FONT_SIZE;
-    const resolved = resolveUnit(
-      style.fontSize,
-      0,
-      0,
-      parentFontSize,
-      ROOT_FONT_SIZE
-    );
-    style.fontSize = typeof resolved === "number" ? resolved : parentFontSize;
-  }
-  if (typeof style.lineHeight === "string") {
-    const str = style.lineHeight;
-    if (str.endsWith("%")) {
-      style.lineHeight = parseFloat(str) / 100;
-    } else {
-      const parsed = parseFloat(str);
-      if (!isNaN(parsed)) {
-        style.lineHeight = parsed;
-      }
-    }
-  }
-  if (typeof style.letterSpacing === "string") {
-    const currentFontSize = typeof style.fontSize === "number" ? style.fontSize : typeof parentStyle.fontSize === "number" ? parentStyle.fontSize : ROOT_FONT_SIZE;
-    const resolved = resolveUnit(
-      style.letterSpacing,
-      0,
-      0,
-      currentFontSize,
-      ROOT_FONT_SIZE
-    );
-    if (typeof resolved === "number") {
-      style.letterSpacing = resolved;
-    }
-  }
-  return style;
-}
-var DIMENSION_PROPS = [
-  "width",
-  "height",
-  "minWidth",
-  "minHeight",
-  "maxWidth",
-  "maxHeight",
-  "top",
-  "right",
-  "bottom",
-  "left",
-  "marginTop",
-  "marginRight",
-  "marginBottom",
-  "marginLeft",
-  "paddingTop",
-  "paddingRight",
-  "paddingBottom",
-  "paddingLeft",
-  "rowGap",
-  "columnGap",
-  "flexBasis",
-  "borderTopWidth",
-  "borderRightWidth",
-  "borderBottomWidth",
-  "borderLeftWidth",
-  "borderTopLeftRadius",
-  "borderTopRightRadius",
-  "borderBottomRightRadius",
-  "borderBottomLeftRadius"
-];
-function resolveUnit(value, viewportWidth, viewportHeight, fontSize, rootFontSize) {
-  if (value.endsWith("%") || value === "auto") return value;
-  if (value.endsWith("vmin")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n / 100 * Math.min(viewportWidth, viewportHeight);
-  }
-  if (value.endsWith("vmax")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n / 100 * Math.max(viewportWidth, viewportHeight);
-  }
-  if (value.endsWith("vw")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n / 100 * viewportWidth;
-  }
-  if (value.endsWith("vh")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n / 100 * viewportHeight;
-  }
-  if (value.endsWith("rem")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n * rootFontSize;
-  }
-  if (value.endsWith("em")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n * fontSize;
-  }
-  if (value.endsWith("px")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n;
-  }
-  if (value.endsWith("pt")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n * (96 / 72);
-  }
-  if (value.endsWith("pc")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n * 16;
-  }
-  if (value.endsWith("in")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n * 96;
-  }
-  if (value.endsWith("cm")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n * (96 / 2.54);
-  }
-  if (value.endsWith("mm")) {
-    const n = parseFloat(value);
-    return isNaN(n) ? value : n * (96 / 25.4);
-  }
-  return value;
-}
-function resolveUnits(style, viewportWidth, viewportHeight, rootFontSize = ROOT_FONT_SIZE) {
-  const fontSize = typeof style.fontSize === "number" ? style.fontSize : rootFontSize;
-  for (const prop of DIMENSION_PROPS) {
-    const value = style[prop];
-    if (typeof value !== "string") continue;
-    const resolved = resolveUnit(
-      value,
-      viewportWidth,
-      viewportHeight,
-      fontSize,
-      rootFontSize
-    );
-    if (resolved !== value) {
-      style[prop] = resolved;
-    }
-  }
-  if (style.transform) {
-    style.transform = resolveTransformUnits(
-      style.transform,
-      viewportWidth,
-      viewportHeight,
-      fontSize,
-      rootFontSize
-    );
-  }
-  if (style.transformOrigin) {
-    style.transformOrigin = resolveTransformUnits(
-      style.transformOrigin,
-      viewportWidth,
-      viewportHeight,
-      fontSize,
-      rootFontSize
-    );
-  }
-  return style;
-}
-function resolveTransformUnits(transform, viewportWidth, viewportHeight, fontSize, rootFontSize) {
-  return transform.replace(
-    /(-?\d*\.?\d+)(vw|vh|vmin|vmax|em|rem|px|pt|pc|in|cm|mm)\b/g,
-    (match) => {
-      const resolved = resolveUnit(
-        match,
-        viewportWidth,
-        viewportHeight,
-        fontSize,
-        rootFontSize
-      );
-      return typeof resolved === "number" ? String(resolved) : match;
-    }
-  );
-}
-
 // src/jsx/yoga.ts
 import Yoga, {
   Align,
@@ -3336,14 +3490,22 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
   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(
-          child,
+          processedChild,
           style,
           childYogaNode,
           viewportWidth,
@@ -3380,6 +3542,11 @@ function extractLayout(node, yogaNode) {
     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;