chat-layout 1.1.0-4 → 1.1.0

package/index.mjs

@@ -1,5 +1,5 @@
 import { layoutNextLine, layoutWithLines, measureLineStats, measureNaturalWidth, prepareWithSegments } from "@chenglou/pretext";
-import { materializeRichInlineLineRange, measureRichInlineStats, prepareRichInline, walkRichInlineLineRanges } from "@chenglou/pretext/rich-inline";
+import { layoutNextRichInlineLineRange, materializeRichInlineLineRange, measureRichInlineStats, prepareRichInline, walkRichInlineLineRanges } from "@chenglou/pretext/rich-inline";
 //#region src/internal/node-registry.ts
 const registry = /* @__PURE__ */ new WeakMap();
 const revisions = /* @__PURE__ */ new WeakMap();
@@ -816,23 +816,10 @@ var Place = class extends Wrapper {
 		});
 	}
 };
-//#endregion
-//#region src/text.ts
-const FONT_SHIFT_PROBE = "M";
-const ELLIPSIS_GLYPH = "…";
 const INTRINSIC_MAX_WIDTH = Number.POSITIVE_INFINITY;
-const PREPARED_TEXT_CACHE_CAPACITY = 512;
-const FONT_SHIFT_CACHE_CAPACITY = 64;
-const ELLIPSIS_WIDTH_CACHE_CAPACITY = 64;
-const LINE_START_CURSOR = {
-	segmentIndex: 0,
-	graphemeIndex: 0
-};
 const MIN_CONTENT_WIDTH_EPSILON = .001;
-const preparedTextCache = /* @__PURE__ */ new Map();
 const fontShiftCache = /* @__PURE__ */ new Map();
 const ellipsisWidthCache = /* @__PURE__ */ new Map();
-const preparedUnitCache = /* @__PURE__ */ new WeakMap();
 let sharedGraphemeSegmenter;
 function readLruValue(cache, key) {
 	const cached = cache.get(key);
@@ -850,6 +837,106 @@ function writeLruValue(cache, key, value, capacity) {
 	cache.set(key, value);
 	return value;
 }
+function measureFontShift(ctx) {
+	const font = ctx.graphics.font;
+	const cached = readLruValue(fontShiftCache, font);
+	if (cached != null) return cached;
+	const { fontBoundingBoxAscent: ascent = 0, fontBoundingBoxDescent: descent = 0 } = ctx.graphics.measureText("M");
+	return writeLruValue(fontShiftCache, font, ascent - descent, 64);
+}
+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("…").width, 64);
+}
+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 buildPrefixWidths(widths) {
+	const cumulativeWidths = [0];
+	let total = 0;
+	for (const width of widths) {
+		total += width;
+		cumulativeWidths.push(total);
+	}
+	return cumulativeWidths;
+}
+function buildSuffixWidths(widths) {
+	const cumulativeWidths = [0];
+	let total = 0;
+	for (let index = widths.length - 1; index >= 0; index -= 1) {
+		total += widths[index] ?? 0;
+		cumulativeWidths.push(total);
+	}
+	return cumulativeWidths;
+}
+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 normalizeMaxLines(maxLines) {
+	if (maxLines == null || !Number.isFinite(maxLines)) return;
+	return Math.max(1, Math.trunc(maxLines));
+}
+function selectEllipsisUnitCounts({ position, prefixWidths, suffixWidths, unitCount, availableWidth, getMaxSuffixCount = (prefixCount) => unitCount - prefixCount }) {
+	let prefixCount = 0;
+	let suffixCount = 0;
+	switch (position) {
+		case "start":
+			suffixCount = Math.min(unitCount, findMaxFittingCount(suffixWidths, availableWidth));
+			break;
+		case "middle": {
+			let bestVisibleUnits = -1;
+			let bestBalanceScore = Number.NEGATIVE_INFINITY;
+			for (let nextPrefixCount = 0; nextPrefixCount <= unitCount; nextPrefixCount += 1) {
+				const prefixWidth = prefixWidths[nextPrefixCount] ?? 0;
+				if (prefixWidth > availableWidth) break;
+				const remainingWidth = availableWidth - prefixWidth;
+				const maxSuffixCount = Math.max(0, getMaxSuffixCount(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(unitCount, findMaxFittingCount(prefixWidths, availableWidth));
+			break;
+	}
+	return {
+		prefixCount,
+		suffixCount
+	};
+}
+const LINE_START_CURSOR$1 = {
+	segmentIndex: 0,
+	graphemeIndex: 0
+};
+const preparedTextCache = /* @__PURE__ */ new Map();
+const preparedUnitCache = /* @__PURE__ */ new WeakMap();
 function getPreparedTextCacheKey(text, font, whiteSpace, wordBreak) {
 	return `${font}\u0000${whiteSpace}\u0000${wordBreak}\u0000${text}`;
 }
@@ -860,64 +947,45 @@ function readPreparedText(text, font, whiteSpace, wordBreak) {
 	return writeLruValue(preparedTextCache, key, prepareWithSegments(text, font, {
 		whiteSpace,
 		wordBreak
-	}), PREPARED_TEXT_CACHE_CAPACITY);
+	}), 512);
 }
 function readPreparedFirstLine(ctx, text, whiteSpace, wordBreak) {
-	const line = layoutNextLine(readPreparedText(text, ctx.graphics.font, whiteSpace, wordBreak), LINE_START_CURSOR, INTRINSIC_MAX_WIDTH);
+	const line = layoutNextLine(readPreparedText(text, ctx.graphics.font, whiteSpace, wordBreak), LINE_START_CURSOR$1, INTRINSIC_MAX_WIDTH);
 	if (line == null) return;
 	return {
 		text: line.text,
 		prepared: readPreparedText(line.text, ctx.graphics.font, whiteSpace, wordBreak)
 	};
 }
-function measureFontShift(ctx) {
-	const font = ctx.graphics.font;
-	const cached = readLruValue(fontShiftCache, font);
-	if (cached != null) return cached;
-	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, 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;
+	for (let index = 0; index < prepared.widths.length; index += 1) {
+		const segmentWidth = prepared.widths[index] ?? 0;
 		maxAnyWidth = Math.max(maxAnyWidth, segmentWidth);
-		const segment = prepared.segments[i];
+		const segment = prepared.segments[index];
 		if (segment != null && segment.trim().length > 0) {
-			const breakableWidths = prepared.breakableFitAdvances[i];
+			const breakableWidths = prepared.breakableFitAdvances[index];
 			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 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.breakableFitAdvances[i];
+	for (let index = 0; index < prepared.segments.length; index += 1) {
+		const segment = prepared.segments[index] ?? "";
+		const segmentWidth = prepared.widths[index] ?? 0;
+		const breakableWidths = prepared.breakableFitAdvances[index];
 		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
+				for (let graphemeIndex = 0; graphemeIndex < graphemes.length; graphemeIndex += 1) units.push({
+					text: graphemes[graphemeIndex] ?? "",
+					width: breakableWidths[graphemeIndex] ?? 0
 				});
 				continue;
 			}
@@ -930,44 +998,18 @@ function getPreparedUnits(prepared) {
 	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);
+//#endregion
+//#region src/text/plain.ts
+const LINE_START_CURSOR = {
+	segmentIndex: 0,
+	graphemeIndex: 0
+};
+function clampMaxWidth(maxWidth) {
+	return Math.max(0, maxWidth);
 }
 function createEllipsisOnlyLayout(ctx, maxWidth, shift) {
 	const ellipsisWidth = measureEllipsisWidth(ctx);
@@ -979,11 +1021,22 @@ function createEllipsisOnlyLayout(ctx, maxWidth, shift) {
 	};
 	return {
 		width: ellipsisWidth,
-		text: ELLIPSIS_GLYPH,
+		text: "…",
 		shift,
 		overflowed: true
 	};
 }
+function toTextBlockLayout(lines, shift) {
+	const mappedLines = lines.map((line) => ({
+		width: line.width,
+		text: line.text,
+		shift
+	}));
+	return {
+		width: mappedLines.reduce((maxLineWidth, line) => Math.max(maxLineWidth, line.width), 0),
+		lines: mappedLines
+	};
+}
 function layoutPreparedEllipsis(ctx, prepared, text, maxWidth, shift, position, forceEllipsis = false) {
 	const intrinsicWidth = measureNaturalWidth(prepared);
 	if (!forceEllipsis && intrinsicWidth <= maxWidth) return {
@@ -1002,52 +1055,29 @@ function layoutPreparedEllipsis(ctx, prepared, text, maxWidth, shift, position,
 	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 prefixWidths = buildPrefixWidths(units.map((unit) => unit.width));
+	const suffixWidths = buildSuffixWidths(units.map((unit) => unit.width));
+	const { prefixCount, suffixCount } = selectEllipsisUnitCounts({
+		position,
+		prefixWidths,
+		suffixWidths,
+		unitCount: units.length,
+		availableWidth
+	});
 	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}`,
+		text: `${prefixText}…${suffixText}`,
 		shift,
 		overflowed: true
 	};
 }
-function normalizeMaxLines(maxLines) {
-	if (maxLines == null || !Number.isFinite(maxLines)) return;
-	return Math.max(1, Math.trunc(maxLines));
+function layoutForcedEllipsizedLine(ctx, text, maxWidth, shift, whiteSpace = "normal", wordBreak = "normal") {
+	if (text.length === 0) return createEllipsisOnlyLayout(ctx, maxWidth, shift);
+	return layoutPreparedEllipsis(ctx, readPreparedText(text, ctx.graphics.font, whiteSpace, wordBreak), text, maxWidth, shift, "end", true);
 }
 function layoutFirstLineIntrinsic(ctx, text, whiteSpace = "normal", wordBreak = "normal") {
 	const firstLine = readPreparedFirstLine(ctx, text, whiteSpace, wordBreak);
@@ -1080,26 +1110,17 @@ function layoutTextIntrinsic(ctx, text, whiteSpace = "normal", wordBreak = "norm
 		width: 0,
 		lines: []
 	};
-	const shift = measureFontShift(ctx);
-	const lines = intrinsic.lines.map((line) => ({
-		width: line.width,
-		text: line.text,
-		shift
-	}));
-	return {
-		width: lines.reduce((maxLineWidth, line) => Math.max(maxLineWidth, line.width), 0),
-		lines
-	};
+	return toTextBlockLayout(intrinsic.lines, measureFontShift(ctx));
 }
 function layoutFirstLine(ctx, text, maxWidth, whiteSpace = "normal", wordBreak = "normal") {
-	if (maxWidth < 0) maxWidth = 0;
+	const clampedMaxWidth = clampMaxWidth(maxWidth);
 	const shift = measureFontShift(ctx);
-	if (maxWidth === 0) return {
+	if (clampedMaxWidth === 0) return {
 		width: 0,
 		text: "",
 		shift
 	};
-	const line = layoutNextLine(readPreparedText(text, ctx.graphics.font, whiteSpace, wordBreak), LINE_START_CURSOR, maxWidth);
+	const line = layoutNextLine(readPreparedText(text, ctx.graphics.font, whiteSpace, wordBreak), LINE_START_CURSOR, clampedMaxWidth);
 	if (line == null) return {
 		width: 0,
 		text: "",
@@ -1112,7 +1133,7 @@ function layoutFirstLine(ctx, text, maxWidth, whiteSpace = "normal", wordBreak =
 	};
 }
 function layoutEllipsizedFirstLine(ctx, text, maxWidth, ellipsisPosition = "end", whiteSpace = "normal", wordBreak = "normal") {
-	if (maxWidth < 0) maxWidth = 0;
+	const clampedMaxWidth = clampMaxWidth(maxWidth);
 	const firstLine = readPreparedFirstLine(ctx, text, whiteSpace, wordBreak);
 	if (firstLine == null) return {
 		width: 0,
@@ -1121,25 +1142,21 @@ function layoutEllipsizedFirstLine(ctx, text, maxWidth, ellipsisPosition = "end"
 		overflowed: false
 	};
 	const shift = measureFontShift(ctx);
-	if (maxWidth === 0) return {
+	if (clampedMaxWidth === 0) return {
 		width: 0,
 		text: "",
 		shift,
 		overflowed: true
 	};
-	return layoutPreparedEllipsis(ctx, firstLine.prepared, firstLine.text, maxWidth, shift, ellipsisPosition);
-}
-function layoutForcedEllipsizedLine(ctx, text, maxWidth, shift, whiteSpace = "normal", wordBreak = "normal") {
-	if (text.length === 0) return createEllipsisOnlyLayout(ctx, maxWidth, shift);
-	return layoutPreparedEllipsis(ctx, readPreparedText(text, ctx.graphics.font, whiteSpace, wordBreak), text, maxWidth, shift, "end", true);
+	return layoutPreparedEllipsis(ctx, firstLine.prepared, firstLine.text, clampedMaxWidth, shift, ellipsisPosition);
 }
 function measureText(ctx, text, maxWidth, whiteSpace = "normal", wordBreak = "normal") {
-	if (maxWidth < 0) maxWidth = 0;
-	if (maxWidth === 0) return {
+	const clampedMaxWidth = clampMaxWidth(maxWidth);
+	if (clampedMaxWidth === 0) return {
 		width: 0,
 		lineCount: 0
 	};
-	const { maxLineWidth: width, lineCount } = measureLineStats(readPreparedText(text, ctx.graphics.font, whiteSpace, wordBreak), maxWidth);
+	const { maxLineWidth: width, lineCount } = measureLineStats(readPreparedText(text, ctx.graphics.font, whiteSpace, wordBreak), clampedMaxWidth);
 	return {
 		width,
 		lineCount
@@ -1159,33 +1176,25 @@ function measureTextMinContent(ctx, text, whiteSpace = "normal", wordBreak = "no
 	};
 }
 function layoutText(ctx, text, maxWidth, whiteSpace = "normal", wordBreak = "normal") {
-	if (maxWidth < 0) maxWidth = 0;
-	if (maxWidth === 0) return {
+	const clampedMaxWidth = clampMaxWidth(maxWidth);
+	if (clampedMaxWidth === 0) return {
 		width: 0,
 		lines: []
 	};
-	const layout = layoutWithLines(readPreparedText(text, ctx.graphics.font, whiteSpace, wordBreak), maxWidth, 0);
+	const layout = layoutWithLines(readPreparedText(text, ctx.graphics.font, whiteSpace, wordBreak), clampedMaxWidth, 0);
 	if (layout.lines.length === 0) return {
 		width: 0,
 		lines: []
 	};
-	const shift = measureFontShift(ctx);
-	const lines = layout.lines.map((line) => ({
-		width: line.width,
-		text: line.text,
-		shift
-	}));
-	return {
-		width: lines.reduce((maxLineWidth, line) => Math.max(maxLineWidth, line.width), 0),
-		lines
-	};
+	return toTextBlockLayout(layout.lines, measureFontShift(ctx));
 }
 function layoutTextWithOverflow(ctx, text, maxWidth, options = {}) {
+	const clampedMaxWidth = clampMaxWidth(maxWidth);
 	const whiteSpace = options.whiteSpace ?? "normal";
 	const wordBreak = options.wordBreak ?? "normal";
 	const overflow = options.overflow ?? "clip";
 	const normalizedMaxLines = normalizeMaxLines(options.maxLines);
-	const layout = layoutText(ctx, text, maxWidth, whiteSpace, wordBreak);
+	const layout = layoutText(ctx, text, clampedMaxWidth, whiteSpace, wordBreak);
 	if (normalizedMaxLines == null || layout.lines.length <= normalizedMaxLines) return {
 		width: layout.width,
 		lines: layout.lines.map((line) => ({
@@ -1205,7 +1214,7 @@ function layoutTextWithOverflow(ctx, text, maxWidth, options = {}) {
 	};
 	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, whiteSpace, wordBreak);
+	const ellipsizedLastLine = lastVisibleLine == null || lastVisibleLine.text.length === 0 ? createEllipsisOnlyLayout(ctx, clampedMaxWidth, shift) : layoutForcedEllipsizedLine(ctx, lastVisibleLine.text, clampedMaxWidth, shift, whiteSpace, wordBreak);
 	const lines = [...visibleLines.slice(0, -1).map((line) => ({
 		...line,
 		overflowed: false
@@ -1219,40 +1228,50 @@ function layoutTextWithOverflow(ctx, text, maxWidth, options = {}) {
 		overflowed: true
 	};
 }
+//#endregion
+//#region src/text/rich.ts
 const RICH_PREPARED_CACHE_CAPACITY = 256;
 const richPreparedCache = /* @__PURE__ */ new Map();
+function withFont(ctx, font, cb) {
+	const previousFont = ctx.graphics.font;
+	ctx.graphics.font = font;
+	try {
+		return cb();
+	} finally {
+		ctx.graphics.font = previousFont;
+	}
+}
 function getRichPreparedCacheKey(spans, defaultFont) {
-	return spans.map((s) => `${s.font ?? defaultFont}\u0000${s.text}\u0000${s.break ?? ""}\u0000${s.extraWidth ?? 0}`).join("
");
+	return spans.map((span) => `${span.font ?? defaultFont}\u0000${span.text}\u0000${span.break ?? ""}\u0000${span.extraWidth ?? 0}`).join("
");
 }
 function readRichPrepared(spans, defaultFont) {
 	const key = getRichPreparedCacheKey(spans, defaultFont);
 	const cached = readLruValue(richPreparedCache, key);
 	if (cached != null) return cached;
-	return writeLruValue(richPreparedCache, key, prepareRichInline(spans.map((s) => ({
-		text: s.text,
-		font: s.font ?? defaultFont,
-		break: s.break,
-		extraWidth: s.extraWidth
+	return writeLruValue(richPreparedCache, key, prepareRichInline(spans.map((span) => ({
+		text: span.text,
+		font: span.font ?? defaultFont,
+		break: span.break,
+		extraWidth: span.extraWidth
 	}))), RICH_PREPARED_CACHE_CAPACITY);
 }
-function materializeRichLine(ctx, spans, defaultFont, defaultStyle, lineRange, overflowed) {
+function measureRichFragmentShift(ctx, font) {
+	return withFont(ctx, font, () => measureFontShift(ctx));
+}
+function materializeRichLine(ctx, spans, defaultFont, defaultColor, lineRange, overflowed) {
 	const richLine = materializeRichInlineLineRange(readRichPrepared(spans, defaultFont), lineRange);
-	const fragments = richLine.fragments.map((frag) => {
-		const span = spans[frag.itemIndex];
-		const fragFont = span?.font ?? defaultFont;
-		const fragStyle = span?.style ?? defaultStyle;
-		const prevFont = ctx.graphics.font;
-		ctx.graphics.font = fragFont;
-		const shift = measureFontShift(ctx);
-		ctx.graphics.font = prevFont;
+	const fragments = richLine.fragments.map((fragment) => {
+		const span = spans[fragment.itemIndex];
+		const font = span?.font ?? defaultFont;
+		const color = span?.color ?? defaultColor;
 		return {
-			itemIndex: frag.itemIndex,
-			text: frag.text,
-			font: fragFont,
-			style: fragStyle,
-			gapBefore: frag.gapBefore,
-			occupiedWidth: frag.occupiedWidth,
-			shift
+			itemIndex: fragment.itemIndex,
+			text: fragment.text,
+			font,
+			color,
+			gapBefore: fragment.gapBefore,
+			occupiedWidth: fragment.occupiedWidth,
+			shift: measureRichFragmentShift(ctx, font)
 		};
 	});
 	return {
@@ -1261,7 +1280,176 @@ function materializeRichLine(ctx, spans, defaultFont, defaultStyle, lineRange, o
 		overflowed
 	};
 }
-function measureRichText(ctx, spans, maxWidth, defaultFont) {
+function flattenRichLineUnits(line) {
+	const units = [];
+	for (let fragmentIndex = 0; fragmentIndex < line.fragments.length; fragmentIndex += 1) {
+		const fragment = line.fragments[fragmentIndex];
+		const fragmentUnits = getPreparedUnits(readPreparedText(fragment.text, fragment.font, "normal", "normal"));
+		if (fragmentUnits.length === 0) continue;
+		const textWidth = fragmentUnits.reduce((total, unit) => total + unit.width, 0);
+		const trailingExtraWidth = Math.max(0, fragment.occupiedWidth - textWidth);
+		for (let unitIndex = 0; unitIndex < fragmentUnits.length; unitIndex += 1) {
+			const unit = fragmentUnits[unitIndex];
+			units.push({
+				fragmentIndex,
+				itemIndex: fragment.itemIndex,
+				text: unit.text,
+				width: unit.width + (unitIndex === fragmentUnits.length - 1 ? trailingExtraWidth : 0),
+				font: fragment.font,
+				color: fragment.color,
+				leadingGap: unitIndex === 0 ? fragment.gapBefore : 0
+			});
+		}
+	}
+	return units;
+}
+function buildRichPrefixWidths(units) {
+	return buildPrefixWidths(units.map((unit) => unit.leadingGap + unit.width));
+}
+function buildRichSuffixWidths(units) {
+	const widths = [0];
+	let total = 0;
+	for (let index = units.length - 1; index >= 0; index -= 1) {
+		const unit = units[index];
+		total += unit.width;
+		if (widths.length > 1) total += unit.leadingGap;
+		widths.push(total);
+	}
+	return widths;
+}
+function materializeRichFragmentsFromUnits(units, start, end, suppressLeadingGap) {
+	const fragments = [];
+	for (let index = start; index < end; index += 1) {
+		const unit = units[index];
+		const previous = fragments[fragments.length - 1];
+		const previousUnit = units[index - 1];
+		if (previous != null && previousUnit != null && previousUnit.fragmentIndex === unit.fragmentIndex) {
+			previous.text += unit.text;
+			previous.occupiedWidth += unit.width;
+			continue;
+		}
+		fragments.push({
+			itemIndex: unit.itemIndex,
+			text: unit.text,
+			font: unit.font,
+			color: unit.color,
+			gapBefore: fragments.length === 0 && suppressLeadingGap ? 0 : unit.leadingGap,
+			occupiedWidth: unit.width,
+			shift: 0
+		});
+	}
+	return fragments;
+}
+function measureRichFragmentsShift(ctx, fragments) {
+	return fragments.map((fragment) => ({
+		...fragment,
+		shift: measureRichFragmentShift(ctx, fragment.font)
+	}));
+}
+function createRichEllipsisFragment(ctx, font, color) {
+	return withFont(ctx, font, () => ({
+		itemIndex: -1,
+		text: "…",
+		font,
+		color,
+		gapBefore: 0,
+		occupiedWidth: measureEllipsisWidth(ctx),
+		shift: measureFontShift(ctx)
+	}));
+}
+function createRichEllipsisOnlyLayout(ctx, maxWidth, font, color) {
+	const ellipsis = createRichEllipsisFragment(ctx, font, color);
+	if (ellipsis.occupiedWidth > maxWidth) return {
+		width: 0,
+		fragments: [],
+		overflowed: true
+	};
+	return {
+		width: ellipsis.occupiedWidth,
+		fragments: [ellipsis],
+		overflowed: true
+	};
+}
+function layoutPreparedRichEllipsis(ctx, line, maxWidth, defaultFont, defaultColor, position) {
+	if (!line.overflowed && line.width <= maxWidth) return {
+		...line,
+		overflowed: false
+	};
+	const units = flattenRichLineUnits(line);
+	const fallbackFragment = line.fragments[0];
+	const ellipsisOnly = createRichEllipsisOnlyLayout(ctx, maxWidth, fallbackFragment?.font ?? defaultFont, fallbackFragment?.color ?? defaultColor);
+	if (ellipsisOnly.fragments.length === 0 || units.length === 0) return ellipsisOnly;
+	const ellipsisWidth = ellipsisOnly.width;
+	const availableWidth = Math.max(0, maxWidth - ellipsisWidth);
+	const prefixWidths = buildRichPrefixWidths(units);
+	const suffixWidths = buildRichSuffixWidths(units);
+	const { prefixCount, suffixCount } = selectEllipsisUnitCounts({
+		position,
+		prefixWidths,
+		suffixWidths,
+		unitCount: units.length,
+		availableWidth,
+		getMaxSuffixCount: position === "middle" ? (nextPrefixCount) => Math.max(0, units.length - nextPrefixCount - 1) : void 0
+	});
+	const prefixFragments = measureRichFragmentsShift(ctx, materializeRichFragmentsFromUnits(units, 0, prefixCount, false));
+	const suffixFragments = measureRichFragmentsShift(ctx, materializeRichFragmentsFromUnits(units, units.length - suffixCount, units.length, true));
+	const ellipsisSource = position === "start" ? suffixFragments[0] ?? line.fragments[0] : position === "middle" ? prefixFragments[prefixFragments.length - 1] ?? suffixFragments[0] ?? line.fragments[line.fragments.length - 1] : prefixFragments[prefixFragments.length - 1] ?? line.fragments[line.fragments.length - 1];
+	const ellipsis = createRichEllipsisFragment(ctx, ellipsisSource?.font ?? defaultFont, ellipsisSource?.color ?? defaultColor);
+	const fragments = position === "start" ? [ellipsis, ...suffixFragments] : position === "middle" ? [
+		...prefixFragments,
+		ellipsis,
+		...suffixFragments
+	] : [...prefixFragments, ellipsis];
+	return {
+		width: position === "start" ? ellipsis.occupiedWidth + (suffixWidths[suffixCount] ?? 0) : position === "middle" ? (prefixWidths[prefixCount] ?? 0) + ellipsis.occupiedWidth + (suffixWidths[suffixCount] ?? 0) : (prefixWidths[prefixCount] ?? 0) + ellipsis.occupiedWidth,
+		fragments,
+		overflowed: true
+	};
+}
+function layoutRichFirstLineIntrinsic(ctx, spans, defaultFont, defaultColor) {
+	if (spans.length === 0) return {
+		width: 0,
+		fragments: [],
+		overflowed: false
+	};
+	const lineRange = layoutNextRichInlineLineRange(readRichPrepared(spans, defaultFont), INTRINSIC_MAX_WIDTH);
+	if (lineRange == null) return {
+		width: 0,
+		fragments: [],
+		overflowed: false
+	};
+	return materializeRichLine(ctx, spans, defaultFont, defaultColor, lineRange, false);
+}
+function layoutRichFirstLine(ctx, spans, maxWidth, defaultFont, defaultColor) {
+	const clampedMaxWidth = Math.max(0, maxWidth);
+	if (spans.length === 0 || clampedMaxWidth === 0) return {
+		width: 0,
+		fragments: [],
+		overflowed: false
+	};
+	const lineRange = layoutNextRichInlineLineRange(readRichPrepared(spans, defaultFont), clampedMaxWidth);
+	if (lineRange == null) return {
+		width: 0,
+		fragments: [],
+		overflowed: false
+	};
+	return materializeRichLine(ctx, spans, defaultFont, defaultColor, lineRange, false);
+}
+function layoutRichEllipsizedFirstLine(ctx, spans, maxWidth, defaultFont, defaultColor, ellipsisPosition = "end") {
+	const clampedMaxWidth = Math.max(0, maxWidth);
+	const intrinsicLine = layoutRichFirstLineIntrinsic(ctx, spans, defaultFont, defaultColor);
+	if (intrinsicLine.fragments.length === 0) return {
+		...intrinsicLine,
+		overflowed: false
+	};
+	if (clampedMaxWidth === 0) return {
+		width: 0,
+		fragments: [],
+		overflowed: true
+	};
+	return layoutPreparedRichEllipsis(ctx, intrinsicLine, clampedMaxWidth, defaultFont, defaultColor, ellipsisPosition);
+}
+function measureRichText(_ctx, spans, maxWidth, defaultFont) {
 	if (spans.length === 0) return {
 		width: 0,
 		lineCount: 0
@@ -1272,7 +1460,7 @@ function measureRichText(ctx, spans, maxWidth, defaultFont) {
 		lineCount
 	};
 }
-function measureRichTextIntrinsic(ctx, spans, defaultFont) {
+function measureRichTextIntrinsic(_ctx, spans, defaultFont) {
 	if (spans.length === 0) return {
 		width: 0,
 		lineCount: 0
@@ -1283,7 +1471,7 @@ function measureRichTextIntrinsic(ctx, spans, defaultFont) {
 		lineCount
 	};
 }
-function measureRichTextMinContent(ctx, spans, defaultFont, overflowWrap = "break-word") {
+function measureRichTextMinContent(_ctx, spans, defaultFont, overflowWrap = "break-word") {
 	if (spans.length === 0) return {
 		width: 0,
 		lineCount: 0
@@ -1292,8 +1480,8 @@ function measureRichTextMinContent(ctx, spans, defaultFont, overflowWrap = "brea
 	for (const span of spans) {
 		if (span.text.trim().length === 0) continue;
 		const font = span.font ?? defaultFont;
-		const spanMin = measurePreparedMinContentWidth(readPreparedText(span.text, font, "normal", "normal"), overflowWrap) + (span.extraWidth ?? 0);
-		if (spanMin > maxWidth) maxWidth = spanMin;
+		const spanMinWidth = measurePreparedMinContentWidth(readPreparedText(span.text, font, "normal", "normal"), overflowWrap) + (span.extraWidth ?? 0);
+		if (spanMinWidth > maxWidth) maxWidth = spanMinWidth;
 	}
 	if (maxWidth === 0) return {
 		width: 0,
@@ -1305,7 +1493,7 @@ function measureRichTextMinContent(ctx, spans, defaultFont, overflowWrap = "brea
 		lineCount
 	};
 }
-function layoutRichText(ctx, spans, maxWidth, defaultFont, defaultStyle) {
+function layoutRichText(ctx, spans, maxWidth, defaultFont, defaultColor) {
 	if (spans.length === 0) return {
 		width: 0,
 		lines: [],
@@ -1313,124 +1501,50 @@ function layoutRichText(ctx, spans, maxWidth, defaultFont, defaultStyle) {
 	};
 	const prepared = readRichPrepared(spans, defaultFont);
 	const lineRanges = [];
-	walkRichInlineLineRanges(prepared, maxWidth, (line) => lineRanges.push(line));
+	walkRichInlineLineRanges(prepared, maxWidth, (lineRange) => lineRanges.push(lineRange));
 	if (lineRanges.length === 0) return {
 		width: 0,
 		lines: [],
 		overflowed: false
 	};
-	const lines = lineRanges.map((lr) => materializeRichLine(ctx, spans, defaultFont, defaultStyle, lr, false));
+	const lines = lineRanges.map((lineRange) => materializeRichLine(ctx, spans, defaultFont, defaultColor, lineRange, false));
 	return {
-		width: lines.reduce((max, line) => Math.max(max, line.width), 0),
+		width: lines.reduce((maxLineWidth, line) => Math.max(maxLineWidth, line.width), 0),
 		lines,
 		overflowed: false
 	};
 }
-function layoutRichTextIntrinsic(ctx, spans, defaultFont, defaultStyle) {
-	return layoutRichText(ctx, spans, INTRINSIC_MAX_WIDTH, defaultFont, defaultStyle);
+function layoutRichTextIntrinsic(ctx, spans, defaultFont, defaultColor) {
+	return layoutRichText(ctx, spans, INTRINSIC_MAX_WIDTH, defaultFont, defaultColor);
 }
-function layoutRichTextWithOverflow(ctx, spans, maxWidth, defaultFont, defaultStyle, maxLines, overflow = "clip") {
+function layoutRichTextWithOverflow(ctx, spans, maxWidth, defaultFont, defaultColor, maxLines, overflow = "clip") {
 	if (spans.length === 0) return {
 		width: 0,
 		lines: [],
 		overflowed: false
 	};
 	const normalizedMaxLines = normalizeMaxLines(maxLines);
-	const layout = layoutRichText(ctx, spans, maxWidth, defaultFont, defaultStyle);
+	const layout = layoutRichText(ctx, spans, maxWidth, defaultFont, defaultColor);
 	if (normalizedMaxLines == null || layout.lines.length <= normalizedMaxLines) return layout;
 	const visibleLines = layout.lines.slice(0, normalizedMaxLines);
 	if (overflow !== "ellipsis") return {
-		width: visibleLines.reduce((max, line) => Math.max(max, line.width), 0),
+		width: visibleLines.reduce((maxLineWidth, line) => Math.max(maxLineWidth, line.width), 0),
 		lines: visibleLines,
 		overflowed: true
 	};
-	const lastLine = visibleLines[visibleLines.length - 1];
-	if (lastLine == null || lastLine.fragments.length === 0) return {
-		width: visibleLines.slice(0, -1).reduce((max, line) => Math.max(max, line.width), 0),
-		lines: visibleLines.slice(0, -1),
+	const lastVisibleLine = visibleLines[visibleLines.length - 1];
+	const ellipsizedLastLine = lastVisibleLine == null ? {
+		width: 0,
+		fragments: [],
 		overflowed: true
-	};
-	const lastFrag = lastLine.fragments[lastLine.fragments.length - 1];
-	const prevFont1 = ctx.graphics.font;
-	ctx.graphics.font = lastFrag.font;
-	const ellipsisWidth = measureEllipsisWidth(ctx);
-	ctx.graphics.font = prevFont1;
-	if (maxWidth <= 0 || ellipsisWidth > maxWidth) {
-		const truncatedLine = {
-			width: 0,
-			fragments: [],
-			overflowed: true
-		};
-		return {
-			width: visibleLines.slice(0, -1).reduce((max, line) => Math.max(max, line.width), 0),
-			lines: [...visibleLines.slice(0, -1), truncatedLine],
-			overflowed: true
-		};
-	}
-	const budget = maxWidth - ellipsisWidth;
-	const resultFragments = [];
-	let usedWidth = 0;
-	let ellipsisFont = lastFrag.font;
-	let ellipsisStyle = lastFrag.style;
-	let truncated = false;
-	for (let fi = 0; fi < lastLine.fragments.length; fi++) {
-		const frag = lastLine.fragments[fi];
-		const neededGap = fi === 0 ? 0 : frag.gapBefore;
-		const fragTotal = neededGap + frag.occupiedWidth;
-		if (usedWidth + fragTotal <= budget) {
-			resultFragments.push({
-				...frag,
-				gapBefore: fi === 0 ? 0 : frag.gapBefore
-			});
-			usedWidth += fragTotal;
-		} else {
-			ellipsisFont = frag.font;
-			ellipsisStyle = frag.style;
-			const remaining = budget - usedWidth - neededGap;
-			if (remaining > 0 && frag.text.length > 0) {
-				const units = getPreparedUnits(readPreparedText(frag.text, frag.font, "normal", "normal"));
-				let charWidth = 0;
-				let charText = "";
-				for (const unit of units) {
-					if (charWidth + unit.width > remaining) break;
-					charWidth += unit.width;
-					charText += unit.text;
-				}
-				if (charText.length > 0) {
-					resultFragments.push({
-						...frag,
-						text: charText,
-						occupiedWidth: charWidth,
-						gapBefore: fi === 0 ? 0 : frag.gapBefore
-					});
-					usedWidth += neededGap + charWidth;
-				}
-			}
-			truncated = true;
-			break;
-		}
-	}
-	const prevFont2 = ctx.graphics.font;
-	ctx.graphics.font = ellipsisFont;
-	const ellipsisShift = measureFontShift(ctx);
-	ctx.graphics.font = prevFont2;
-	resultFragments.push({
-		itemIndex: -1,
-		text: ELLIPSIS_GLYPH,
-		font: ellipsisFont,
-		style: ellipsisStyle,
-		gapBefore: 0,
-		occupiedWidth: ellipsisWidth,
-		shift: ellipsisShift
-	});
-	const lastLineResult = {
-		width: usedWidth + ellipsisWidth,
-		fragments: resultFragments,
-		overflowed: truncated || layout.lines.length > normalizedMaxLines
-	};
+	} : layoutPreparedRichEllipsis(ctx, {
+		...lastVisibleLine,
+		overflowed: true
+	}, maxWidth, defaultFont, defaultColor, "end");
+	const lines = [...visibleLines.slice(0, -1), ellipsizedLastLine];
 	return {
-		width: [...visibleLines.slice(0, -1), lastLineResult].reduce((max, line) => Math.max(max, line.width), 0),
-		lines: [...visibleLines.slice(0, -1), lastLineResult],
+		width: lines.reduce((maxLineWidth, line) => Math.max(maxLineWidth, line.width), 0),
+		lines,
 		overflowed: true
 	};
 }
@@ -1484,6 +1598,15 @@ function getRichMultiLineOverflowLayoutKey(maxWidth) {
 function shouldUseMultilineOverflowLayout(options) {
 	return options.maxLines != null;
 }
+function shouldReadConstrainedOverflowLayout(maxWidth, options) {
+	return maxWidth != null && shouldUseMultilineOverflowLayout(options);
+}
+function measureBlockLayout(layout) {
+	return {
+		width: layout.width,
+		lineCount: layout.lines.length
+	};
+}
 function getSingleLineMinContentLayoutKey() {
 	return "single:min-content";
 }
@@ -1497,6 +1620,10 @@ function getSingleLineLayout(node, ctx, text, options) {
 	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
 	return readCachedTextLayout(node, ctx, getSingleLineLayoutKey(maxWidth), () => maxWidth == null ? layoutFirstLineIntrinsic(ctx, text, options.whiteSpace, options.wordBreak) : options.overflow === "ellipsis" ? layoutEllipsizedFirstLine(ctx, text, maxWidth, options.ellipsisPosition ?? "end", options.whiteSpace, options.wordBreak) : layoutFirstLine(ctx, text, maxWidth, options.whiteSpace, options.wordBreak));
 }
+function getRichSingleLineLayout(node, ctx, spans, options) {
+	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
+	return readCachedTextLayout(node, ctx, getSingleLineLayoutKey(maxWidth), () => maxWidth == null ? layoutRichFirstLineIntrinsic(ctx, spans, options.font, options.color) : options.overflow === "ellipsis" ? layoutRichEllipsizedFirstLine(ctx, spans, maxWidth, options.font, options.color, options.ellipsisPosition ?? "end") : layoutRichFirstLine(ctx, spans, maxWidth, options.font, options.color));
+}
 function getMultiLineOverflowLayout(node, ctx, text, options) {
 	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
 	return readCachedTextLayout(node, ctx, getMultiLineOverflowLayoutKey(maxWidth), () => layoutTextWithOverflow(ctx, text, maxWidth ?? 0, {
@@ -1508,18 +1635,12 @@ function getMultiLineOverflowLayout(node, ctx, text, options) {
 }
 function getMultiLineMeasureLayout(node, ctx, text, options) {
 	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
-	if (maxWidth != null && shouldUseMultilineOverflowLayout(options)) {
-		const layout = getMultiLineOverflowLayout(node, ctx, text, options);
-		return {
-			width: layout.width,
-			lineCount: layout.lines.length
-		};
-	}
+	if (shouldReadConstrainedOverflowLayout(maxWidth, options)) return measureBlockLayout(getMultiLineOverflowLayout(node, ctx, text, options));
 	return readCachedTextLayout(node, ctx, getMultiLineMeasureLayoutKey(maxWidth), () => maxWidth == null ? measureTextIntrinsic(ctx, text, options.whiteSpace, options.wordBreak) : measureText(ctx, text, maxWidth, options.whiteSpace, options.wordBreak));
 }
 function getMultiLineDrawLayout(node, ctx, text, options) {
 	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
-	if (maxWidth != null && shouldUseMultilineOverflowLayout(options)) return getMultiLineOverflowLayout(node, ctx, text, options);
+	if (shouldReadConstrainedOverflowLayout(maxWidth, options)) return getMultiLineOverflowLayout(node, ctx, text, options);
 	return readCachedTextLayout(node, ctx, getMultiLineDrawLayoutKey(maxWidth), () => maxWidth == null ? layoutTextIntrinsic(ctx, text, options.whiteSpace, options.wordBreak) : layoutText(ctx, text, maxWidth, options.whiteSpace, options.wordBreak));
 }
 function getSingleLineMinContentLayout(node, ctx, text, options) {
@@ -1533,28 +1654,39 @@ function getSingleLineMinContentLayout(node, ctx, text, options) {
 		};
 	});
 }
+function getRichSingleLineMinContentWidth(node, ctx, spans, options) {
+	return readCachedTextLayout(node, ctx, getSingleLineMinContentLayoutKey(), () => measureRichTextMinContent(ctx, spans, options.font, options.overflowWrap).width);
+}
+function drawRichLine(ctx, line, fallbackColor, x, y, lineHeight) {
+	let cursorX = x;
+	for (let fragmentIndex = 0; fragmentIndex < line.fragments.length; fragmentIndex += 1) {
+		const fragment = line.fragments[fragmentIndex];
+		cursorX += fragment.gapBefore;
+		ctx.with((g) => {
+			g.font = fragment.font;
+			g.fillStyle = ctx.resolveDynValue(fragment.color ?? fallbackColor);
+			g.textAlign = "left";
+			g.fillText(fragment.text, cursorX, y + (lineHeight + fragment.shift) / 2);
+		});
+		cursorX += fragment.occupiedWidth;
+	}
+}
 function getMultiLineMinContentLayout(node, ctx, text, whiteSpace, wordBreak, overflowWrap) {
 	return readCachedTextLayout(node, ctx, getMultiLineMinContentLayoutKey(), () => measureTextMinContent(ctx, text, whiteSpace, wordBreak, overflowWrap));
 }
 function getRichMultiLineMeasureLayout(node, ctx, spans, options) {
 	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
-	if (maxWidth != null && shouldUseMultilineOverflowLayout(options)) {
-		const layout = getRichMultiLineOverflowLayout(node, ctx, spans, options);
-		return {
-			width: layout.width,
-			lineCount: layout.lines.length
-		};
-	}
+	if (shouldReadConstrainedOverflowLayout(maxWidth, options)) return measureBlockLayout(getRichMultiLineOverflowLayout(node, ctx, spans, options));
 	return readCachedTextLayout(node, ctx, getRichMultiLineMeasureLayoutKey(maxWidth), () => maxWidth == null ? measureRichTextIntrinsic(ctx, spans, options.font) : measureRichText(ctx, spans, maxWidth, options.font));
 }
 function getRichMultiLineOverflowLayout(node, ctx, spans, options) {
 	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
-	return readCachedTextLayout(node, ctx, getRichMultiLineOverflowLayoutKey(maxWidth), () => layoutRichTextWithOverflow(ctx, spans, maxWidth ?? 0, options.font, options.style, options.maxLines, options.overflow));
+	return readCachedTextLayout(node, ctx, getRichMultiLineOverflowLayoutKey(maxWidth), () => layoutRichTextWithOverflow(ctx, spans, maxWidth ?? 0, options.font, options.color, options.maxLines, options.overflow));
 }
 function getRichMultiLineDrawLayout(node, ctx, spans, options) {
 	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
-	if (maxWidth != null && shouldUseMultilineOverflowLayout(options)) return getRichMultiLineOverflowLayout(node, ctx, spans, options);
-	return readCachedTextLayout(node, ctx, getRichMultiLineDrawLayoutKey(maxWidth), () => maxWidth == null ? layoutRichTextIntrinsic(ctx, spans, options.font, options.style) : layoutRichText(ctx, spans, maxWidth, options.font, options.style));
+	if (shouldReadConstrainedOverflowLayout(maxWidth, options)) return getRichMultiLineOverflowLayout(node, ctx, spans, options);
+	return readCachedTextLayout(node, ctx, getRichMultiLineDrawLayoutKey(maxWidth), () => maxWidth == null ? layoutRichTextIntrinsic(ctx, spans, options.font, options.color) : layoutRichText(ctx, spans, maxWidth, options.font, options.color));
 }
 function getRichMultiLineMinContentLayout(node, ctx, spans, options) {
 	return readCachedTextLayout(node, ctx, getRichMultiLineMinContentLayoutKey(), () => measureRichTextMinContent(ctx, spans, options.font, options.overflowWrap));
@@ -1621,7 +1753,7 @@ var MultilineText = class {
 					cursorX += frag.gapBefore;
 					ctx.with((g) => {
 						g.font = frag.font;
-						g.fillStyle = ctx.resolveDynValue(frag.style ?? this.options.style);
+						g.fillStyle = ctx.resolveDynValue(frag.color ?? this.options.color);
 						if (align === "right") g.textAlign = "right";
 						else if (align === "center") g.textAlign = "center";
 						else g.textAlign = "left";
@@ -1635,7 +1767,7 @@ var MultilineText = class {
 		}
 		return ctx.with((g) => {
 			g.font = this.options.font;
-			g.fillStyle = ctx.resolveDynValue(this.options.style);
+			g.fillStyle = ctx.resolveDynValue(this.options.color);
 			const { width, lines } = getMultiLineDrawLayout(this, ctx, this.text, this.options);
 			switch (resolvePhysicalTextAlign(this.options)) {
 				case "left":
@@ -1673,7 +1805,7 @@ var MultilineText = class {
 */
 var Text = class {
 	/**
-	* @param text Source text to measure and draw.
+	* @param text Source text to measure and draw. Pass an `InlineSpan[]` for mixed inline styles.
 	* @param options Text layout and drawing options.
 	*/
 	constructor(text, options) {
@@ -1681,9 +1813,17 @@ var Text = class {
 		this.options = options;
 	}
 	measure(ctx) {
+		if (typeof this.text !== "string") {
+			const { width } = getRichSingleLineLayout(this, ctx, this.text, this.options);
+			return {
+				width,
+				height: this.options.lineHeight
+			};
+		}
+		const text = this.text;
 		return ctx.with((g) => {
 			g.font = this.options.font;
-			const { width } = getSingleLineLayout(this, ctx, this.text, this.options);
+			const { width } = getSingleLineLayout(this, ctx, text, this.options);
 			return {
 				width,
 				height: this.options.lineHeight
@@ -1691,9 +1831,14 @@ var Text = class {
 		});
 	}
 	measureMinContent(ctx) {
+		if (typeof this.text !== "string") return {
+			width: getRichSingleLineMinContentWidth(this, ctx, this.text, this.options),
+			height: this.options.lineHeight
+		};
+		const text = this.text;
 		return ctx.with((g) => {
 			g.font = this.options.font;
-			const { width } = getSingleLineMinContentLayout(this, ctx, this.text, this.options);
+			const { width } = getSingleLineMinContentLayout(this, ctx, text, this.options);
 			return {
 				width,
 				height: this.options.lineHeight
@@ -1701,11 +1846,16 @@ var Text = class {
 		});
 	}
 	draw(ctx, x, y) {
+		if (typeof this.text !== "string") {
+			drawRichLine(ctx, getRichSingleLineLayout(this, ctx, this.text, this.options), this.options.color, x, y, this.options.lineHeight);
+			return false;
+		}
+		const text = this.text;
 		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);
-			g.fillText(text, x, y + (this.options.lineHeight + shift) / 2);
+			g.fillStyle = ctx.resolveDynValue(this.options.color);
+			const layout = getSingleLineLayout(this, ctx, text, this.options);
+			g.fillText(layout.text, x, y + (this.options.lineHeight + layout.shift) / 2);
 			return false;
 		});
 	}