chat-layout 1.0.0-4 → 1.0.0-6

package/README.md

@@ -50,6 +50,46 @@ See [example/chat.ts](./example/chat.ts) for a full chat example.
 - `MultilineText.align` uses logical values: `start`, `center`, `end`.
 - `MultilineText.physicalAlign` uses physical values: `left`, `center`, `right`.
 - `Text` and `MultilineText` preserve blank lines and edge whitespace by default. Use `whitespace: "trim-and-collapse"` if you want cleanup.
+- `Text` and `MultilineText` default to `overflowWrap: "break-word"`, which preserves compatibility-first min-content sizing for shrink layouts.
+- Use `overflowWrap: "anywhere"` when long unspaced strings should contribute grapheme-level breakpoints to min-content sizing.
+- `Text` supports `overflow: "ellipsis"` with `ellipsisPosition: "start" | "end" | "middle"` when measured under a finite `maxWidth`.
+- `MultilineText` supports `overflow: "ellipsis"` together with `maxLines`; values below `1` are treated as `1`.
+
+## Text ellipsis
+
+Single-line `Text` can ellipsize at the start, end, or middle when a finite width constraint is present:
+
+```ts
+const title = new Text("Extremely long thread title that should not blow out the row", {
+  lineHeight: 20,
+  font: "16px system-ui",
+  style: "#111",
+  overflow: "ellipsis",
+  ellipsisPosition: "middle",
+});
+```
+
+Multi-line `MultilineText` can cap the visible line count and convert the last visible line to an end ellipsis:
+
+```ts
+const preview = new MultilineText(reply.content, {
+  lineHeight: 16,
+  font: "13px system-ui",
+  style: "#444",
+  align: "start",
+  overflowWrap: "anywhere",
+  overflow: "ellipsis",
+  maxLines: 2,
+});
+```
+
+Notes:
+
+- Ellipsis is only inserted when the node is measured under a finite `maxWidth` and content actually overflows that constraint.
+- `MultilineText` only supports end ellipsis on the last visible line; start/middle ellipsis are intentionally single-line only.
+- `maxLines` defaults to unlimited, and values below `1` are clamped to `1`.
+- `overflowWrap: "break-word"` keeps the current min-content behavior; `overflowWrap: "anywhere"` lets long unspaced strings shrink inside flex layouts such as chat bubbles.
+- Current `measureMinContent()` behavior stays compatibility-first: ellipsis affects constrained measurement/drawing, but does not lower the min-content shrink floor by itself.
 
 ## Shrink behavior
 

package/example/chat.ts

@@ -195,6 +195,7 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
       font: "16px system-ui",
       style: "black",
       align: "start",
+      overflowWrap: "anywhere",
     }),
     { alignSelf: "start" },
   );
@@ -215,6 +216,9 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
               font: "13px system-ui",
               style: () => (currentHover === item ? "#222" : "#444"),
               align: "start",
+              overflow: "ellipsis",
+              overflowWrap: "anywhere",
+              maxLines: 2,
             }),
           ],
           {
@@ -306,13 +310,28 @@ const list = new ListState<ChatItem>([
   },
   { sender: "B", content: "aaaabbb" },
   { sender: "B", content: "测试中文" },
+  {
+    sender: "A",
+    content:
+      "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+  },
   { sender: "B", content: "测试aa中文aaa" },
   {
     sender: "A",
     content: randomText(8),
     reply: {
       sender: "B",
-      content: "测试aa中文aaa",
+      content:
+        "测试aa中文aaa hello world chat layout message render bubble timeline virtualized canvas stream session update typing history",
+    },
+  },
+  {
+    sender: "B",
+    content: "这里是一条会展示回复预览省略效果的消息。",
+    reply: {
+      sender: "A",
+      content:
+        "这是一条非常长的回复预览，用来演示 MultilineText 在 chat example 里的末尾 ellipsis 能力。它应该被限制在两行之内，而不是把整个气泡一路撑到天花板。",
     },
   },
   { sender: "B", content: randomText(5) },

package/index.d.mts

@@ -48,6 +48,18 @@ type PhysicalTextAlign = "left" | "center" | "right";
  * Whitespace normalization mode for text measurement and layout.
  */
 type TextWhitespaceMode = "preserve" | "trim-and-collapse";
+/**
+ * Text overflow behavior when content exceeds a finite width constraint.
+ */
+type TextOverflowMode = "clip" | "ellipsis";
+/**
+ * Controls whether soft wrap opportunities affect min-content sizing.
+ */
+type TextOverflowWrapMode = "break-word" | "anywhere";
+/**
+ * Placement of the ellipsis glyph for single-line text.
+ */
+type TextEllipsisPosition = "start" | "end" | "middle";
 /**
  * Shared text styling options for text nodes.
  */
@@ -60,6 +72,8 @@ interface TextStyleOptions<C extends CanvasRenderingContext2D> {
   style: DynValue<C, string>;
   /** Default: preserve input whitespace, including blank lines and edge spaces. */
   whitespace?: TextWhitespaceMode;
+  /** Default: break-word; use anywhere when min-content should honor grapheme break opportunities. */
+  overflowWrap?: TextOverflowWrapMode;
 }
 /**
  * Options for multi-line text nodes.
@@ -69,11 +83,20 @@ interface MultilineTextOptions<C extends CanvasRenderingContext2D> extends TextS
   align?: TextAlign;
   /** Explicit physical alignment when left/right semantics are required. */
   physicalAlign?: PhysicalTextAlign;
+  /** Default: clip hidden overflow; `ellipsis` only applies when `maxLines` truncates visible lines. */
+  overflow?: TextOverflowMode;
+  /** Maximum visible line count. Values below `1` are clamped to `1`. */
+  maxLines?: number;
 }
 /**
  * Options for single-line text nodes.
  */
-interface TextOptions<C extends CanvasRenderingContext2D> extends TextStyleOptions<C> {}
+interface TextOptions<C extends CanvasRenderingContext2D> extends TextStyleOptions<C> {
+  /** Default: clip overflow to the constrained first line. */
+  overflow?: TextOverflowMode;
+  /** Default: place the ellipsis at the end of the visible text. */
+  ellipsisPosition?: TextEllipsisPosition;
+}
 /**
  * Optional layout bounds passed down during measurement and drawing.
  */
@@ -589,5 +612,5 @@ declare class TimelineRenderer<C extends CanvasRenderingContext2D, T extends {}>
   hittest(test: HitTest): boolean;
 }
 //#endregion
-export { Axis, BaseRenderer, Box, ChatRenderer, ChildLayoutResult, Context, CrossAxisAlignment, DebugRenderer, DynValue, Fixed, Flex, FlexContainerOptions, FlexItem, FlexItemOptions, FlexLayoutResult, Group, HitTest, JumpToOptions, LayoutConstraints, LayoutRect, ListState, MainAxisAlignment, MainAxisSize, MultilineText, MultilineTextOptions, Node, PaddingBox, PhysicalTextAlign, Place, RenderFeedback, RendererOptions, Text, TextAlign, TextOptions, TextStyleOptions, TextWhitespaceMode, TimelineRenderer, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
+export { Axis, BaseRenderer, Box, ChatRenderer, ChildLayoutResult, Context, CrossAxisAlignment, DebugRenderer, DynValue, Fixed, Flex, FlexContainerOptions, FlexItem, FlexItemOptions, FlexLayoutResult, Group, HitTest, JumpToOptions, LayoutConstraints, LayoutRect, ListState, MainAxisAlignment, MainAxisSize, MultilineText, MultilineTextOptions, Node, PaddingBox, PhysicalTextAlign, Place, RenderFeedback, RendererOptions, Text, TextAlign, TextEllipsisPosition, TextOptions, TextOverflowMode, TextOverflowWrapMode, TextStyleOptions, TextWhitespaceMode, TimelineRenderer, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
 //# sourceMappingURL=index.d.mts.map

package/index.mjs

@@ -821,8 +821,10 @@ var Place = class extends Wrapper {
 //#endregion
 //#region src/text.ts
 const FONT_SHIFT_PROBE = "M";
+const ELLIPSIS_GLYPH = "…";
 const PREPARED_SEGMENT_CACHE_CAPACITY = 512;
 const FONT_SHIFT_CACHE_CAPACITY = 64;
+const ELLIPSIS_WIDTH_CACHE_CAPACITY = 64;
 const LINE_START_CURSOR = {
 	segmentIndex: 0,
 	graphemeIndex: 0
@@ -830,6 +832,9 @@ const LINE_START_CURSOR = {
 const MIN_CONTENT_WIDTH_EPSILON = .001;
 const preparedSegmentCache = /* @__PURE__ */ new Map();
 const fontShiftCache = /* @__PURE__ */ new Map();
+const ellipsisWidthCache = /* @__PURE__ */ new Map();
+const preparedUnitCache = /* @__PURE__ */ new WeakMap();
+let sharedGraphemeSegmenter;
 function preprocessSegments(text, whitespace = "preserve") {
 	const segments = text.split("\n");
 	if (whitespace === "trim-and-collapse") return segments.map((line) => line.trim()).filter((line) => line.length > 0);
@@ -867,17 +872,183 @@ function measureFontShift(ctx) {
 	const { fontBoundingBoxAscent: ascent = 0, fontBoundingBoxDescent: descent = 0 } = ctx.graphics.measureText(FONT_SHIFT_PROBE);
 	return writeLruValue(fontShiftCache, font, ascent - descent, FONT_SHIFT_CACHE_CAPACITY);
 }
-function measurePreparedMinContentWidth(prepared) {
+function measurePreparedMinContentWidth(prepared, overflowWrap = "break-word") {
 	let maxWidth = 0;
 	let maxAnyWidth = 0;
 	for (let i = 0; i < prepared.widths.length; i += 1) {
 		const segmentWidth = prepared.widths[i] ?? 0;
 		maxAnyWidth = Math.max(maxAnyWidth, segmentWidth);
 		const segment = prepared.segments[i];
-		if (segment != null && segment.trim().length > 0) maxWidth = Math.max(maxWidth, segmentWidth);
+		if (segment != null && segment.trim().length > 0) {
+			const breakableWidths = prepared.breakableWidths[i];
+			const minContentWidth = overflowWrap === "anywhere" && breakableWidths != null && breakableWidths.length > 0 ? breakableWidths.reduce((widest, width) => Math.max(widest, width), 0) : segmentWidth;
+			maxWidth = Math.max(maxWidth, minContentWidth);
+		}
 	}
 	return maxWidth > 0 ? maxWidth : maxAnyWidth;
 }
+function measurePreparedWidth(prepared) {
+	let width = 0;
+	for (const segmentWidth of prepared.widths) width += segmentWidth ?? 0;
+	return width;
+}
+function getGraphemeSegmenter() {
+	if (sharedGraphemeSegmenter !== void 0) return sharedGraphemeSegmenter;
+	sharedGraphemeSegmenter = typeof Intl.Segmenter === "function" ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
+	return sharedGraphemeSegmenter;
+}
+function splitGraphemes(text) {
+	const segmenter = getGraphemeSegmenter();
+	if (segmenter == null) return Array.from(text);
+	const graphemes = [];
+	for (const part of segmenter.segment(text)) graphemes.push(part.segment);
+	return graphemes;
+}
+function getPreparedUnits(prepared) {
+	const cached = preparedUnitCache.get(prepared);
+	if (cached != null) return cached;
+	const units = [];
+	for (let i = 0; i < prepared.segments.length; i += 1) {
+		const segment = prepared.segments[i] ?? "";
+		const segmentWidth = prepared.widths[i] ?? 0;
+		const breakableWidths = prepared.breakableWidths[i];
+		if (breakableWidths != null && segment.length > 0) {
+			const graphemes = splitGraphemes(segment);
+			if (graphemes.length === breakableWidths.length) {
+				for (let j = 0; j < graphemes.length; j += 1) units.push({
+					text: graphemes[j] ?? "",
+					width: breakableWidths[j] ?? 0
+				});
+				continue;
+			}
+		}
+		if (segment.length > 0 || segmentWidth > 0) units.push({
+			text: segment,
+			width: segmentWidth
+		});
+	}
+	preparedUnitCache.set(prepared, units);
+	return units;
+}
+function buildUnitPrefixWidths(units) {
+	const widths = [0];
+	let total = 0;
+	for (const unit of units) {
+		total += unit.width;
+		widths.push(total);
+	}
+	return widths;
+}
+function buildUnitSuffixWidths(units) {
+	const widths = [0];
+	let total = 0;
+	for (let i = units.length - 1; i >= 0; i -= 1) {
+		total += units[i]?.width ?? 0;
+		widths.push(total);
+	}
+	return widths;
+}
+function findMaxFittingCount(cumulativeWidths, maxWidth) {
+	if (maxWidth <= 0) return 0;
+	let low = 0;
+	let high = cumulativeWidths.length - 1;
+	while (low < high) {
+		const mid = Math.floor((low + high + 1) / 2);
+		if ((cumulativeWidths[mid] ?? 0) <= maxWidth) low = mid;
+		else high = mid - 1;
+	}
+	return low;
+}
+function joinUnitText(units, start, end) {
+	if (start >= end) return "";
+	return units.slice(start, end).map((unit) => unit.text).join("");
+}
+function measureEllipsisWidth(ctx) {
+	const font = ctx.graphics.font;
+	const cached = readLruValue(ellipsisWidthCache, font);
+	if (cached != null) return cached;
+	return writeLruValue(ellipsisWidthCache, font, ctx.graphics.measureText(ELLIPSIS_GLYPH).width, ELLIPSIS_WIDTH_CACHE_CAPACITY);
+}
+function createEllipsisOnlyLayout(ctx, maxWidth, shift) {
+	const ellipsisWidth = measureEllipsisWidth(ctx);
+	if (ellipsisWidth > maxWidth) return {
+		width: 0,
+		text: "",
+		shift,
+		overflowed: true
+	};
+	return {
+		width: ellipsisWidth,
+		text: ELLIPSIS_GLYPH,
+		shift,
+		overflowed: true
+	};
+}
+function layoutPreparedEllipsis(ctx, prepared, text, maxWidth, shift, position, forceEllipsis = false) {
+	const intrinsicWidth = measurePreparedWidth(prepared);
+	if (!forceEllipsis && intrinsicWidth <= maxWidth) return {
+		width: intrinsicWidth,
+		text,
+		shift,
+		overflowed: false
+	};
+	const ellipsisWidth = measureEllipsisWidth(ctx);
+	if (ellipsisWidth > maxWidth) return {
+		width: 0,
+		text: "",
+		shift,
+		overflowed: true
+	};
+	const units = getPreparedUnits(prepared);
+	if (units.length === 0) return createEllipsisOnlyLayout(ctx, maxWidth, shift);
+	const availableWidth = Math.max(0, maxWidth - ellipsisWidth);
+	const prefixWidths = buildUnitPrefixWidths(units);
+	const suffixWidths = buildUnitSuffixWidths(units);
+	let prefixCount = 0;
+	let suffixCount = 0;
+	switch (position) {
+		case "start":
+			suffixCount = Math.min(units.length, findMaxFittingCount(suffixWidths, availableWidth));
+			break;
+		case "middle": {
+			let bestVisibleUnits = -1;
+			let bestBalanceScore = Number.NEGATIVE_INFINITY;
+			for (let nextPrefixCount = 0; nextPrefixCount <= units.length; nextPrefixCount += 1) {
+				const prefixWidth = prefixWidths[nextPrefixCount] ?? 0;
+				if (prefixWidth > availableWidth) break;
+				const remainingWidth = availableWidth - prefixWidth;
+				const maxSuffixCount = units.length - nextPrefixCount;
+				const nextSuffixCount = Math.min(maxSuffixCount, findMaxFittingCount(suffixWidths, remainingWidth));
+				const visibleUnits = nextPrefixCount + nextSuffixCount;
+				const balanceScore = -Math.abs(nextPrefixCount - nextSuffixCount);
+				if (visibleUnits > bestVisibleUnits || visibleUnits === bestVisibleUnits && balanceScore > bestBalanceScore || visibleUnits === bestVisibleUnits && balanceScore === bestBalanceScore && nextPrefixCount > prefixCount) {
+					prefixCount = nextPrefixCount;
+					suffixCount = nextSuffixCount;
+					bestVisibleUnits = visibleUnits;
+					bestBalanceScore = balanceScore;
+				}
+			}
+			break;
+		}
+		case "end":
+			prefixCount = Math.min(units.length, findMaxFittingCount(prefixWidths, availableWidth));
+			break;
+	}
+	const prefixWidth = prefixWidths[prefixCount] ?? 0;
+	const suffixWidth = suffixWidths[suffixCount] ?? 0;
+	const prefixText = joinUnitText(units, 0, prefixCount);
+	const suffixText = joinUnitText(units, units.length - suffixCount, units.length);
+	return {
+		width: prefixWidth + ellipsisWidth + suffixWidth,
+		text: `${prefixText}${ELLIPSIS_GLYPH}${suffixText}`,
+		shift,
+		overflowed: true
+	};
+}
+function normalizeMaxLines(maxLines) {
+	if (maxLines == null || !Number.isFinite(maxLines)) return;
+	return Math.max(1, Math.trunc(maxLines));
+}
 function layoutFirstLineIntrinsic(ctx, text, whitespace = "preserve") {
 	const segment = preprocessSegments(text, whitespace)[0];
 	if (!segment) return {
@@ -954,6 +1125,28 @@ function layoutFirstLine(ctx, text, maxWidth, whitespace = "preserve") {
 		shift
 	};
 }
+function layoutEllipsizedFirstLine(ctx, text, maxWidth, ellipsisPosition = "end", whitespace = "preserve") {
+	if (maxWidth < 0) maxWidth = 0;
+	const segment = preprocessSegments(text, whitespace)[0];
+	if (!segment) return {
+		width: 0,
+		text: "",
+		shift: 0,
+		overflowed: false
+	};
+	const shift = measureFontShift(ctx);
+	if (maxWidth === 0) return {
+		width: 0,
+		text: "",
+		shift,
+		overflowed: true
+	};
+	return layoutPreparedEllipsis(ctx, readPreparedSegment(segment, ctx.graphics.font), segment, maxWidth, shift, ellipsisPosition);
+}
+function layoutForcedEllipsizedLine(ctx, text, maxWidth, shift) {
+	if (text.length === 0) return createEllipsisOnlyLayout(ctx, maxWidth, shift);
+	return layoutPreparedEllipsis(ctx, readPreparedSegment(text, ctx.graphics.font), text, maxWidth, shift, "end", true);
+}
 function measureText(ctx, text, maxWidth, whitespace = "preserve") {
 	if (maxWidth < 0) maxWidth = 0;
 	const segments = preprocessSegments(text, whitespace);
@@ -979,7 +1172,7 @@ function measureText(ctx, text, maxWidth, whitespace = "preserve") {
 		lineCount
 	};
 }
-function measureTextMinContent(ctx, text, whitespace = "preserve") {
+function measureTextMinContent(ctx, text, whitespace = "preserve", overflowWrap = "break-word") {
 	const segments = preprocessSegments(text, whitespace);
 	if (segments.length === 0) return {
 		width: 0,
@@ -990,7 +1183,7 @@ function measureTextMinContent(ctx, text, whitespace = "preserve") {
 	for (const segment of segments) {
 		if (segment.length === 0) continue;
 		const prepared = readPreparedSegment(segment, font);
-		width = Math.max(width, measurePreparedMinContentWidth(prepared));
+		width = Math.max(width, measurePreparedMinContentWidth(prepared, overflowWrap));
 	}
 	let lineCount = 0;
 	const lineMaxWidth = Math.max(width, MIN_CONTENT_WIDTH_EPSILON);
@@ -1042,6 +1235,44 @@ function layoutText(ctx, text, maxWidth, whitespace = "preserve") {
 		lines
 	};
 }
+function layoutTextWithOverflow(ctx, text, maxWidth, options = {}) {
+	const whitespace = options.whitespace ?? "preserve";
+	const overflow = options.overflow ?? "clip";
+	const normalizedMaxLines = normalizeMaxLines(options.maxLines);
+	const layout = layoutText(ctx, text, maxWidth, whitespace);
+	if (normalizedMaxLines == null || layout.lines.length <= normalizedMaxLines) return {
+		width: layout.width,
+		lines: layout.lines.map((line) => ({
+			...line,
+			overflowed: false
+		})),
+		overflowed: false
+	};
+	const visibleLines = layout.lines.slice(0, normalizedMaxLines);
+	if (overflow !== "ellipsis") return {
+		width: visibleLines.reduce((lineWidth, line) => Math.max(lineWidth, line.width), 0),
+		lines: visibleLines.map((line) => ({
+			...line,
+			overflowed: false
+		})),
+		overflowed: true
+	};
+	const shift = visibleLines[visibleLines.length - 1]?.shift ?? measureFontShift(ctx);
+	const lastVisibleLine = visibleLines[visibleLines.length - 1];
+	const ellipsizedLastLine = lastVisibleLine == null || lastVisibleLine.text.length === 0 ? createEllipsisOnlyLayout(ctx, Math.max(0, maxWidth), shift) : layoutForcedEllipsizedLine(ctx, lastVisibleLine.text, maxWidth, shift);
+	const lines = [...visibleLines.slice(0, -1).map((line) => ({
+		...line,
+		overflowed: false
+	})), {
+		...ellipsizedLastLine,
+		shift
+	}];
+	return {
+		width: lines.reduce((lineWidth, line) => Math.max(lineWidth, line.width), 0),
+		lines,
+		overflowed: true
+	};
+}
 //#endregion
 //#region src/nodes/text.ts
 function resolvePhysicalTextAlign(options) {
@@ -1077,29 +1308,59 @@ function getMultiLineMeasureLayoutKey(maxWidth) {
 function getMultiLineDrawLayoutKey(maxWidth) {
 	return maxWidth == null ? "multi:draw:intrinsic" : `multi:draw:${maxWidth}`;
 }
+function getMultiLineOverflowLayoutKey(maxWidth) {
+	return maxWidth == null ? "multi:overflow:intrinsic" : `multi:overflow:${maxWidth}`;
+}
+function shouldUseMultilineOverflowLayout(options) {
+	return options.maxLines != null;
+}
 function getSingleLineMinContentLayoutKey() {
 	return "single:min-content";
 }
 function getMultiLineMinContentLayoutKey() {
 	return "multi:min-content";
 }
-function getSingleLineLayout(node, ctx, text, whitespace) {
+function getSingleLineLayout(node, ctx, text, options) {
 	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
-	return readCachedTextLayout(node, ctx, getSingleLineLayoutKey(maxWidth), () => maxWidth == null ? layoutFirstLineIntrinsic(ctx, text, whitespace) : layoutFirstLine(ctx, text, maxWidth, whitespace));
+	return readCachedTextLayout(node, ctx, getSingleLineLayoutKey(maxWidth), () => maxWidth == null ? layoutFirstLineIntrinsic(ctx, text, options.whitespace) : options.overflow === "ellipsis" ? layoutEllipsizedFirstLine(ctx, text, maxWidth, options.ellipsisPosition ?? "end", options.whitespace) : layoutFirstLine(ctx, text, maxWidth, options.whitespace));
 }
-function getMultiLineMeasureLayout(node, ctx, text, whitespace) {
+function getMultiLineOverflowLayout(node, ctx, text, options) {
 	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
-	return readCachedTextLayout(node, ctx, getMultiLineMeasureLayoutKey(maxWidth), () => maxWidth == null ? measureTextIntrinsic(ctx, text, whitespace) : measureText(ctx, text, maxWidth, whitespace));
+	return readCachedTextLayout(node, ctx, getMultiLineOverflowLayoutKey(maxWidth), () => layoutTextWithOverflow(ctx, text, maxWidth ?? 0, {
+		whitespace: options.whitespace,
+		overflow: options.overflow,
+		maxLines: options.maxLines
+	}));
 }
-function getMultiLineDrawLayout(node, ctx, text, whitespace) {
+function getMultiLineMeasureLayout(node, ctx, text, options) {
 	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
-	return readCachedTextLayout(node, ctx, getMultiLineDrawLayoutKey(maxWidth), () => maxWidth == null ? layoutTextIntrinsic(ctx, text, whitespace) : layoutText(ctx, text, maxWidth, whitespace));
+	if (maxWidth != null && shouldUseMultilineOverflowLayout(options)) {
+		const layout = getMultiLineOverflowLayout(node, ctx, text, options);
+		return {
+			width: layout.width,
+			lineCount: layout.lines.length
+		};
+	}
+	return readCachedTextLayout(node, ctx, getMultiLineMeasureLayoutKey(maxWidth), () => maxWidth == null ? measureTextIntrinsic(ctx, text, options.whitespace) : measureText(ctx, text, maxWidth, options.whitespace));
+}
+function getMultiLineDrawLayout(node, ctx, text, options) {
+	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
+	if (maxWidth != null && shouldUseMultilineOverflowLayout(options)) return getMultiLineOverflowLayout(node, ctx, text, options);
+	return readCachedTextLayout(node, ctx, getMultiLineDrawLayoutKey(maxWidth), () => maxWidth == null ? layoutTextIntrinsic(ctx, text, options.whitespace) : layoutText(ctx, text, maxWidth, options.whitespace));
 }
-function getSingleLineMinContentLayout(node, ctx, text, whitespace) {
-	return readCachedTextLayout(node, ctx, getSingleLineMinContentLayoutKey(), () => layoutFirstLineIntrinsic(ctx, text, whitespace));
+function getSingleLineMinContentLayout(node, ctx, text, options) {
+	return readCachedTextLayout(node, ctx, getSingleLineMinContentLayoutKey(), () => {
+		const measurement = measureTextMinContent(ctx, text, options.whitespace, options.overflowWrap);
+		const { shift } = layoutFirstLineIntrinsic(ctx, text, options.whitespace);
+		return {
+			width: measurement.width,
+			text,
+			shift
+		};
+	});
 }
-function getMultiLineMinContentLayout(node, ctx, text, whitespace) {
-	return readCachedTextLayout(node, ctx, getMultiLineMinContentLayoutKey(), () => measureTextMinContent(ctx, text, whitespace));
+function getMultiLineMinContentLayout(node, ctx, text, whitespace, overflowWrap) {
+	return readCachedTextLayout(node, ctx, getMultiLineMinContentLayoutKey(), () => measureTextMinContent(ctx, text, whitespace, overflowWrap));
 }
 /**
 * Draws wrapped text using the configured line height and alignment.
@@ -1116,7 +1377,7 @@ var MultilineText = class {
 	measure(ctx) {
 		return ctx.with((g) => {
 			g.font = this.options.font;
-			const { width, lineCount } = getMultiLineMeasureLayout(this, ctx, this.text, this.options.whitespace);
+			const { width, lineCount } = getMultiLineMeasureLayout(this, ctx, this.text, this.options);
 			return {
 				width,
 				height: lineCount * this.options.lineHeight
@@ -1126,7 +1387,7 @@ var MultilineText = class {
 	measureMinContent(ctx) {
 		return ctx.with((g) => {
 			g.font = this.options.font;
-			const { width, lineCount } = getMultiLineMinContentLayout(this, ctx, this.text, this.options.whitespace);
+			const { width, lineCount } = getMultiLineMinContentLayout(this, ctx, this.text, this.options.whitespace, this.options.overflowWrap);
 			return {
 				width,
 				height: lineCount * this.options.lineHeight
@@ -1137,7 +1398,7 @@ var MultilineText = class {
 		return ctx.with((g) => {
 			g.font = this.options.font;
 			g.fillStyle = ctx.resolveDynValue(this.options.style);
-			const { width, lines } = getMultiLineDrawLayout(this, ctx, this.text, this.options.whitespace);
+			const { width, lines } = getMultiLineDrawLayout(this, ctx, this.text, this.options);
 			switch (resolvePhysicalTextAlign(this.options)) {
 				case "left":
 					for (const { text, shift } of lines) {
@@ -1184,7 +1445,7 @@ var Text = class {
 	measure(ctx) {
 		return ctx.with((g) => {
 			g.font = this.options.font;
-			const { width } = getSingleLineLayout(this, ctx, this.text, this.options.whitespace);
+			const { width } = getSingleLineLayout(this, ctx, this.text, this.options);
 			return {
 				width,
 				height: this.options.lineHeight
@@ -1194,7 +1455,7 @@ var Text = class {
 	measureMinContent(ctx) {
 		return ctx.with((g) => {
 			g.font = this.options.font;
-			const { width } = getSingleLineMinContentLayout(this, ctx, this.text, this.options.whitespace);
+			const { width } = getSingleLineMinContentLayout(this, ctx, this.text, this.options);
 			return {
 				width,
 				height: this.options.lineHeight
@@ -1205,7 +1466,7 @@ var Text = class {
 		return ctx.with((g) => {
 			g.font = this.options.font;
 			g.fillStyle = ctx.resolveDynValue(this.options.style);
-			const { text, shift } = getSingleLineLayout(this, ctx, this.text, this.options.whitespace);
+			const { text, shift } = getSingleLineLayout(this, ctx, this.text, this.options);
 			g.fillText(text, x, y + (this.options.lineHeight + shift) / 2);
 			return false;
 		});