pa_font 0.2.1 → 0.2.2

package/dist/paFont.js

@@ -3186,61 +3186,95 @@ var sharedGraphemeSegmenter = null;
 function layoutParagraph(fontInstance, text, options = {}, state = {}) {
 	const normalized = normalizeParagraphOptions(fontInstance, options);
 	const textValue = String(text ?? "");
-	const layoutState = normalized.engine === "pretext" && normalized.overflowWrap !== "normal" ? layoutWithPretext(fontInstance, textValue, normalized, state) : layoutWithNative(fontInstance, textValue, normalized);
-	const lines = positionLines(fontInstance, applyMaxLines(layoutState.lines, normalized, createTextMeasurer(fontInstance, normalized)), normalized);
-	const bbox = combineRects(lines.map((line) => line.bbox)) ?? emptyRect();
-	const width = lines.reduce((max, line) => Math.max(max, line.width), 0);
+	const layoutBox = resolveLayoutBox(normalized, state);
+	const retainedPreparedState = resolveRetainedPreparedState(state, normalized);
+	const pretextState = shouldAttemptPretextLayout(normalized) ? layoutWithPretext(textValue, normalized, retainedPreparedState, layoutBox) : null;
+	const layoutState = pretextState != null && canUsePretextLayout(pretextState, normalized) ? pretextState : layoutWithNative(fontInstance, textValue, normalized, layoutBox);
+	const measureWidth = createLazyTextMeasurer(fontInstance, normalized);
+	const lines = positionLines(fontInstance, applyOverflowClamping(layoutState.lines, normalized, layoutBox, measureWidth), normalized, layoutBox, measureWidth);
+	const textBBox = combineRects(lines.map((line) => line.bbox)) ?? emptyRect();
+	const textWidth = lines.reduce((max, line) => Math.max(max, line.width), 0);
+	const textHeight = lines.length * normalized.lineHeight;
+	const finalLayoutBox = finalizeLayoutBox(layoutBox, normalized, textHeight);
+	const cachedPrepared = pretextState?.prepared ?? retainedPreparedState.prepared ?? null;
+	const cachedPreparedWhiteSpace = pretextState?.preparedWhiteSpace ?? retainedPreparedState.preparedWhiteSpace ?? null;
 	return {
 		options: normalized,
 		lines,
 		metrics: {
-			x: normalized.x,
-			y: normalized.y,
-			width,
-			height: lines.length * normalized.lineHeight,
+			x: finalLayoutBox.contentBox.x,
+			y: finalLayoutBox.contentBox.y,
+			width: textWidth,
+			height: textHeight,
 			lineCount: lines.length,
-			bbox
+			bbox: textBBox,
+			contentBox: { ...finalLayoutBox.contentBox },
+			paddingBox: { ...finalLayoutBox.paddingBox },
+			marginBox: { ...finalLayoutBox.marginBox },
+			clipBox: { ...finalLayoutBox.clipBox }
 		},
-		prepared: layoutState.prepared ?? null,
-		preparedWhiteSpace: layoutState.preparedWhiteSpace ?? null,
-		layoutEngine: layoutState.layoutEngine
+		prepared: cachedPrepared,
+		preparedWhiteSpace: cachedPreparedWhiteSpace,
+		layoutEngine: layoutState.layoutEngine,
+		layoutBox: finalLayoutBox,
+		containerWidth: layoutBox.containerWidth,
+		containerHeight: layoutBox.containerHeight
 	};
 }
 function normalizeParagraphOptions(fontInstance, options = {}) {
 	if (options == null || typeof options !== "object" || Array.isArray(options)) throw new TypeError("font.paragraph() options must be an object.");
 	const textOptions = normalizeTextOptions(options);
-	const width = normalizePositive(options.width, 0);
-	if (width <= 0) throw new TypeError("font.paragraph() option \"width\" must be a positive number.");
+	const wrapDefaults = resolveWrapDefaults(normalizeNullableEnum(options.wrap, [
+		"word",
+		"char",
+		"keep"
+	], null));
+	const width = normalizeDimension(options.width);
+	const height = normalizeDimension(options.height);
+	if (options.width != null && width == null) throw new TypeError("font.paragraph() option \"width\" must be a positive number.");
+	if (options.height != null && height == null) throw new TypeError("font.paragraph() option \"height\" must be a positive number.");
 	const font = resolveCanvasFont(fontInstance, textOptions.size, options);
-	const lineHeight = resolveLineHeight(options.lineHeight, textOptions.size);
-	const align = normalizeEnum(options.align, [
-		"left",
-		"center",
-		"right",
-		"justify"
-	], "left");
-	const whiteSpace = normalizeEnum(options.whiteSpace, [
-		"normal",
-		"pre-wrap",
-		"nowrap"
-	], "normal");
-	const overflowWrap = normalizeEnum(options.overflowWrap, [
-		"normal",
-		"break-word",
-		"anywhere"
-	], "break-word");
-	const engine = normalizeEnum(options.engine, ["pretext", "native"], "pretext");
-	const maxLines = normalizeMaxLines(options.maxLines);
-	const ellipsis = normalizeEllipsis(options.ellipsis);
 	return {
 		...textOptions,
+		wrap: resolveWrapPreset(normalizeEnum(options.wordBreak, [
+			"normal",
+			"break-all",
+			"keep-all"
+		], wrapDefaults.wordBreak), normalizeEnum(options.overflowWrap, [
+			"normal",
+			"break-word",
+			"anywhere"
+		], wrapDefaults.overflowWrap)),
 		width,
-		lineHeight,
-		align,
-		whiteSpace,
-		overflowWrap,
-		maxLines,
-		ellipsis,
+		height,
+		lineHeight: resolveLineHeight(options.lineHeight, textOptions.size),
+		align: normalizeEnum(options.align, [
+			"left",
+			"center",
+			"right",
+			"justify"
+		], "left"),
+		whiteSpace: normalizeEnum(options.whiteSpace, [
+			"normal",
+			"pre-wrap",
+			"nowrap"
+		], "normal"),
+		overflowWrap: normalizeEnum(options.overflowWrap, [
+			"normal",
+			"break-word",
+			"anywhere"
+		], wrapDefaults.overflowWrap),
+		wordBreak: normalizeEnum(options.wordBreak, [
+			"normal",
+			"break-all",
+			"keep-all"
+		], wrapDefaults.wordBreak),
+		overflow: normalizeEnum(options.overflow, ["visible", "hidden"], "visible"),
+		textOverflow: normalizeNullableEnum(options.textOverflow, ["clip", "ellipsis"], null),
+		maxLines: normalizeMaxLines(options.maxLines),
+		ellipsis: normalizeEllipsis(options.ellipsis),
+		margin: normalizeSpacing(options.margin),
+		padding: normalizeSpacing(options.padding),
 		fontStyle: normalizeEnum(options.fontStyle, [
 			"normal",
 			"italic",
@@ -3249,7 +3283,7 @@ function normalizeParagraphOptions(fontInstance, options = {}) {
 		fontWeight: typeof options.fontWeight === "string" || Number.isFinite(options.fontWeight) ? options.fontWeight : 400,
 		fontFamily: resolveFontFamily(fontInstance, options.fontFamily),
 		font,
-		engine
+		engine: normalizeEnum(options.engine, ["pretext", "native"], "pretext")
 	};
 }
 function resolveCanvasFont(fontInstance, size, options = {}) {
@@ -3263,11 +3297,12 @@ function resolveCanvasFont(fontInstance, size, options = {}) {
 function canReusePreparedParagraphState(previousState, previousOptions, nextOptions) {
 	return previousState?.prepared != null && previousState.preparedWhiteSpace === resolvePretextWhiteSpace(nextOptions.whiteSpace) && previousOptions?.font === nextOptions.font;
 }
-function layoutWithPretext(fontInstance, text, options, state) {
+function layoutWithPretext(text, options, state, layoutBox) {
 	const preparedWhiteSpace = resolvePretextWhiteSpace(options.whiteSpace);
 	const prepared = state.prepared != null && state.preparedWhiteSpace === preparedWhiteSpace && state.font === options.font ? state.prepared : prepareWithSegments(text, options.font, { whiteSpace: preparedWhiteSpace });
+	const layout = layoutWithLines(prepared, options.whiteSpace === "nowrap" ? HUGE_LAYOUT_WIDTH : layoutBox.contentWidth, options.lineHeight);
 	return {
-		lines: layoutWithLines(prepared, options.whiteSpace === "nowrap" ? HUGE_LAYOUT_WIDTH : options.width, options.lineHeight).lines.map((line) => ({
+		lines: layout.lines.map((line) => ({
 			text: line.text,
 			width: line.width,
 			start: null,
@@ -3277,10 +3312,10 @@ function layoutWithPretext(fontInstance, text, options, state) {
 		prepared,
 		preparedWhiteSpace,
 		layoutEngine: "pretext",
-		fontInstance
+		usedOverflowWrapFallbackBreaks: layout.lines.some((line) => line.end.graphemeIndex > 0)
 	};
 }
-function layoutWithNative(fontInstance, text, options) {
+function layoutWithNative(fontInstance, text, options, layoutBox) {
 	const measuredWidth = createOpenTypeMeasurer(fontInstance, options);
 	const source = normalizeNativeText(text, options.whiteSpace);
 	if (source.length === 0) return {
@@ -3301,7 +3336,7 @@ function layoutWithNative(fontInstance, text, options) {
 		preparedWhiteSpace: null,
 		layoutEngine: "native"
 	};
-	const tokens = tokenizeNativeText(source, options.whiteSpace, measuredWidth);
+	const tokens = tokenizeNativeText(source, options.whiteSpace, measuredWidth, options.wordBreak);
 	const lines = [];
 	let currentText = "";
 	let currentWidth = 0;
@@ -3329,12 +3364,12 @@ function layoutWithNative(fontInstance, text, options) {
 		currentEnd = piece.end;
 	};
 	const appendWrappedToken = (token) => {
-		if (options.overflowWrap === "normal") {
+		if (options.overflowWrap === "normal" && options.wordBreak !== "break-all") {
 			appendPiece(token);
 			return;
 		}
 		splitIntoGraphemePieces(token, measuredWidth).forEach((piece) => {
-			if (currentText.length > 0 && currentWidth + piece.width > options.width + JUSTIFY_EPSILON) pushCurrentLine(false, piece.start);
+			if (currentText.length > 0 && currentWidth + piece.width > layoutBox.contentWidth + JUSTIFY_EPSILON) pushCurrentLine(false, piece.start);
 			appendPiece(piece);
 		});
 	};
@@ -3344,7 +3379,7 @@ function layoutWithNative(fontInstance, text, options) {
 			return;
 		}
 		if (token.type === "space" && currentText.length === 0 && options.whiteSpace !== "pre-wrap") return;
-		if (currentText.length === 0 || currentWidth + token.width <= options.width + JUSTIFY_EPSILON) {
+		if (currentText.length === 0 || currentWidth + token.width <= layoutBox.contentWidth + JUSTIFY_EPSILON) {
 			appendPiece(token);
 			return;
 		}
@@ -3381,45 +3416,69 @@ function splitIntoGraphemePieces(token, measureWidth) {
 	}
 	return pieces.length > 0 ? pieces : [token];
 }
-function applyMaxLines(lines, options, measureWidth) {
-	if (options.maxLines == null || lines.length <= options.maxLines) return lines;
-	const clipped = lines.slice(0, options.maxLines).map((line) => ({ ...line }));
-	if (options.ellipsis !== false && clipped.length > 0) {
-		const lastLine = clipped[clipped.length - 1];
-		const suffix = options.ellipsis;
-		const suffixWidth = measureWidth(suffix);
-		const trimmed = trimTrailingWhitespace(lastLine.text);
-		if (suffixWidth > options.width + JUSTIFY_EPSILON) {
-			lastLine.text = "";
-			lastLine.width = 0;
-		} else {
-			let nextText = trimmed;
-			while (nextText.length > 0 && measureWidth(`${nextText}${suffix}`) > options.width + JUSTIFY_EPSILON) nextText = trimLastGrapheme(nextText);
-			lastLine.text = `${nextText}${suffix}`;
-			lastLine.width = measureWidth(lastLine.text);
-		}
-		lastLine.hardBreak = false;
-	}
-	return clipped;
-}
-function positionLines(fontInstance, lines, options) {
+function applyOverflowClamping(lines, options, layoutBox, measureWidth) {
+	const contentWidth = layoutBox.contentWidth;
+	const result = lines.map((line) => ({ ...line }));
+	let lineLimit = options.maxLines;
+	if (options.overflow === "hidden" && layoutBox.clipContentHeight != null) {
+		const visibleLineCount = Math.max(0, Math.floor((layoutBox.clipContentHeight + JUSTIFY_EPSILON) / options.lineHeight));
+		lineLimit = lineLimit == null ? visibleLineCount : Math.min(lineLimit, visibleLineCount);
+	}
+	let clippedByCount = false;
+	if (lineLimit != null) {
+		if (lineLimit <= 0) return [];
+		if (result.length > lineLimit) {
+			result.length = lineLimit;
+			clippedByCount = true;
+		}
+	}
+	if (result.length === 0) return result;
+	if (options.overflow === "hidden" && options.whiteSpace === "nowrap" && result[0].width > contentWidth + JUSTIFY_EPSILON) result[0] = truncateLineToWidth(result[0], contentWidth, measureWidth, options.textOverflow === "ellipsis" ? options.ellipsis : false);
+	else if (clippedByCount && shouldEllipsizeClampedLines(options)) {
+		const lastIndex = result.length - 1;
+		result[lastIndex] = truncateLineToWidth(result[lastIndex], contentWidth, measureWidth, options.ellipsis);
+		result[lastIndex].hardBreak = false;
+	}
+	return result;
+}
+function truncateLineToWidth(line, maxWidth, measureWidth, suffix) {
+	const suffixText = suffix === false ? "" : suffix;
+	if ((suffixText.length > 0 ? measureWidth(suffixText) : 0) > maxWidth + JUSTIFY_EPSILON) return {
+		...line,
+		text: "",
+		width: 0,
+		hardBreak: false
+	};
+	let nextText = trimTrailingWhitespace(line.text);
+	while (nextText.length > 0 && measureWidth(`${nextText}${suffixText}`) > maxWidth + JUSTIFY_EPSILON) nextText = trimLastGrapheme(nextText);
+	const text = `${nextText}${suffixText}`;
+	return {
+		...line,
+		text,
+		width: measureWidth(text),
+		hardBreak: false
+	};
+}
+function shouldEllipsizeClampedLines(options) {
+	return options.textOverflow === "ellipsis" || options.textOverflow == null && options.maxLines != null && options.ellipsis !== false;
+}
+function positionLines(fontInstance, lines, options, layoutBox, measureWidth) {
 	const ascent = getFontAscender(fontInstance, options.size);
 	const lineBoxHeight = options.lineHeight;
-	const measureWidth = createTextMeasurer(fontInstance, options);
 	let cursor = 0;
 	return lines.map((line, index) => {
 		const justified = shouldJustifyLine(line, index, lines.length, options);
-		const offsetX = justified ? 0 : resolveAlignOffset(options.align, line.width, options.width);
-		const x = options.x + offsetX;
-		const y = options.y + index * lineBoxHeight;
+		const offsetX = justified ? 0 : resolveAlignOffset(options.align, line.width, layoutBox.contentWidth);
+		const x = layoutBox.contentX + offsetX;
+		const y = layoutBox.contentY + index * lineBoxHeight;
 		const baseline = y + ascent;
-		const fragments = justified ? buildJustifiedFragments(line, options, measureWidth) : [{
+		const fragments = justified ? buildJustifiedFragments(line, layoutBox.contentX, layoutBox.contentWidth, measureWidth) : [{
 			text: line.text,
 			x,
 			width: line.width,
 			isWhitespace: false
 		}];
-		const width = justified ? options.width : line.width;
+		const width = justified ? layoutBox.contentWidth : line.width;
 		const bbox = {
 			x,
 			y,
@@ -3444,7 +3503,7 @@ function positionLines(fontInstance, lines, options) {
 		return positioned;
 	});
 }
-function buildJustifiedFragments(line, options, measureWidth) {
+function buildJustifiedFragments(line, contentX, contentWidth, measureWidth) {
 	const tokens = splitPreservingWhitespace(line.text);
 	const expandable = tokens.reduce((count, token, index) => {
 		if (index > 0 && index < tokens.length - 1 && /\s/u.test(token)) return count + 1;
@@ -3452,13 +3511,13 @@ function buildJustifiedFragments(line, options, measureWidth) {
 	}, 0);
 	if (expandable === 0) return [{
 		text: line.text,
-		x: options.x,
+		x: contentX,
 		width: line.width,
 		isWhitespace: false
 	}];
-	const extraPerGap = Math.max(0, options.width - line.width) / expandable;
+	const extraPerGap = Math.max(0, contentWidth - line.width) / expandable;
 	const fragments = [];
-	let cursorX = options.x;
+	let cursorX = contentX;
 	tokens.forEach((token, index) => {
 		const isWhitespace = /\s/u.test(token);
 		const isExpandable = isWhitespace && index > 0 && index < tokens.length - 1;
@@ -3486,20 +3545,169 @@ function resolveLineHeight(value, size) {
 	if (value <= 10) return size * value;
 	return value;
 }
+function resolveLayoutBox(options, state = {}) {
+	const margin = options.margin;
+	const padding = options.padding;
+	const containerWidth = resolveContainerDimension(state.containerWidth, typeof window !== "undefined" ? window.innerWidth : null);
+	const containerHeight = resolveContainerDimension(state.containerHeight, typeof window !== "undefined" ? window.innerHeight : null);
+	const contentWidth = options.width ?? Math.max(1, (containerWidth ?? 0) - options.x - margin.left - margin.right - padding.left - padding.right);
+	const contentX = options.x + margin.left + padding.left;
+	const contentY = options.y + margin.top + padding.top;
+	return {
+		containerWidth,
+		containerHeight,
+		contentWidth,
+		clipContentHeight: options.height,
+		contentX,
+		contentY,
+		margin,
+		padding,
+		contentBox: {
+			x: contentX,
+			y: contentY,
+			w: contentWidth,
+			h: options.height ?? 0
+		},
+		paddingBox: {
+			x: options.x + margin.left,
+			y: options.y + margin.top,
+			w: contentWidth + padding.left + padding.right,
+			h: (options.height ?? 0) + padding.top + padding.bottom
+		},
+		marginBox: {
+			x: options.x,
+			y: options.y,
+			w: contentWidth + padding.left + padding.right + margin.left + margin.right,
+			h: (options.height ?? 0) + padding.top + padding.bottom + margin.top + margin.bottom
+		},
+		clipBox: {
+			x: contentX,
+			y: contentY,
+			w: contentWidth,
+			h: options.height ?? 0
+		}
+	};
+}
+function finalizeLayoutBox(layoutBox, options, textHeight) {
+	const contentHeight = options.height ?? textHeight;
+	return {
+		...layoutBox,
+		contentBox: {
+			x: layoutBox.contentX,
+			y: layoutBox.contentY,
+			w: layoutBox.contentWidth,
+			h: contentHeight
+		},
+		paddingBox: {
+			x: layoutBox.paddingBox.x,
+			y: layoutBox.paddingBox.y,
+			w: layoutBox.paddingBox.w,
+			h: contentHeight + layoutBox.padding.top + layoutBox.padding.bottom
+		},
+		marginBox: {
+			x: layoutBox.marginBox.x,
+			y: layoutBox.marginBox.y,
+			w: layoutBox.marginBox.w,
+			h: contentHeight + layoutBox.padding.top + layoutBox.padding.bottom + layoutBox.margin.top + layoutBox.margin.bottom
+		},
+		clipBox: {
+			x: layoutBox.contentX,
+			y: layoutBox.contentY,
+			w: layoutBox.contentWidth,
+			h: options.overflow === "hidden" ? contentHeight : textHeight
+		}
+	};
+}
+function resolveContainerDimension(explicit, fallback) {
+	if (Number.isFinite(explicit) && explicit > 0) return explicit;
+	if (Number.isFinite(fallback) && fallback > 0) return fallback;
+	return null;
+}
 function normalizeEnum(value, supported, fallback) {
 	return typeof value === "string" && supported.includes(value) ? value : fallback;
 }
+function normalizeNullableEnum(value, supported, fallback) {
+	if (value == null) return fallback;
+	return typeof value === "string" && supported.includes(value) ? value : fallback;
+}
 function normalizeEllipsis(value) {
-	if (value === false || value == null) return false;
-	return typeof value === "string" ? value : "…";
+	if (value === false) return false;
+	if (typeof value === "string") return value;
+	return "…";
 }
 function normalizeMaxLines(value) {
 	if (!Number.isFinite(value)) return null;
 	const rounded = Math.floor(value);
 	return rounded > 0 ? rounded : null;
 }
+function normalizeDimension(value) {
+	return Number.isFinite(value) && value > 0 ? value : null;
+}
+function normalizeSpacing(value) {
+	if (value == null) return zeroSpacing();
+	if (Number.isFinite(value)) {
+		const next = Number(value);
+		return {
+			top: next,
+			right: next,
+			bottom: next,
+			left: next
+		};
+	}
+	if (Array.isArray(value)) {
+		const numbers = value.map((entry) => Number.isFinite(entry) ? Number(entry) : 0);
+		if (numbers.length === 2) return {
+			top: numbers[0],
+			right: numbers[1],
+			bottom: numbers[0],
+			left: numbers[1]
+		};
+		if (numbers.length === 3) return {
+			top: numbers[0],
+			right: numbers[1],
+			bottom: numbers[2],
+			left: numbers[1]
+		};
+		if (numbers.length === 4) return {
+			top: numbers[0],
+			right: numbers[1],
+			bottom: numbers[2],
+			left: numbers[3]
+		};
+		if (numbers.length === 1) return {
+			top: numbers[0],
+			right: numbers[0],
+			bottom: numbers[0],
+			left: numbers[0]
+		};
+	}
+	if (typeof value === "string") {
+		const tokens = parseSpacingString(value);
+		if (tokens != null) return normalizeSpacing(tokens);
+	}
+	if (typeof value === "object") {
+		const horizontal = normalizeNumber(value.x, 0);
+		const vertical = normalizeNumber(value.y, 0);
+		return {
+			top: normalizeNumber(value.top, vertical),
+			right: normalizeNumber(value.right, horizontal),
+			bottom: normalizeNumber(value.bottom, vertical),
+			left: normalizeNumber(value.left, horizontal)
+		};
+	}
+	return zeroSpacing();
+}
+function zeroSpacing() {
+	return {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	};
+}
 function resolveFontFamily(fontInstance, fontFamily) {
 	if (typeof fontFamily === "string" && fontFamily.trim().length > 0) return fontFamily.trim();
+	if (typeof fontInstance?.canvasFamily === "string" && fontInstance.canvasFamily.trim().length > 0) return fontInstance.canvasFamily.trim();
 	const preferred = fontInstance?.font?.names?.fullName?.en ?? fontInstance?.font?.names?.fontFamily?.en ?? fontInstance?.font?.familyName;
 	return typeof preferred === "string" && preferred.trim().length > 0 ? preferred.trim() : "sans-serif";
 }
@@ -3510,6 +3718,42 @@ function formatFontFamily(value) {
 function resolvePretextWhiteSpace(whiteSpace) {
 	return whiteSpace === "pre-wrap" ? "pre-wrap" : "normal";
 }
+function resolveWrapDefaults(wrap) {
+	if (wrap === "char") return {
+		overflowWrap: "break-word",
+		wordBreak: "break-all"
+	};
+	if (wrap === "keep") return {
+		overflowWrap: "normal",
+		wordBreak: "keep-all"
+	};
+	return {
+		overflowWrap: "break-word",
+		wordBreak: "normal"
+	};
+}
+function resolveWrapPreset(wordBreak, overflowWrap) {
+	if (wordBreak === "break-all") return "char";
+	if (wordBreak === "keep-all" && overflowWrap === "normal") return "keep";
+	if (wordBreak === "normal" && overflowWrap === "break-word") return "word";
+	return null;
+}
+function shouldAttemptPretextLayout(options) {
+	return options.engine === "pretext" && options.wordBreak === "normal";
+}
+function canUsePretextLayout(layoutState, options) {
+	return !(options.overflowWrap === "normal" && layoutState.usedOverflowWrapFallbackBreaks);
+}
+function resolveRetainedPreparedState(state, options) {
+	if (state.prepared != null && state.preparedWhiteSpace === resolvePretextWhiteSpace(options.whiteSpace) && state.font === options.font) return {
+		prepared: state.prepared,
+		preparedWhiteSpace: state.preparedWhiteSpace
+	};
+	return {
+		prepared: null,
+		preparedWhiteSpace: null
+	};
+}
 function isHardBreak(prepared, line) {
 	return prepared.kinds?.[line.end.segmentIndex] === "hard-break";
 }
@@ -3517,7 +3761,7 @@ function normalizeNativeText(text, whiteSpace) {
 	if (whiteSpace === "pre-wrap") return String(text ?? "").replace(/\r\n/g, "\n").replace(/\r/g, "\n");
 	return String(text ?? "").replace(/\s+/gu, " ").trim();
 }
-function tokenizeNativeText(text, whiteSpace, measureWidth) {
+function tokenizeNativeText(text, whiteSpace, measureWidth, wordBreak) {
 	const tokens = [];
 	let index = 0;
 	while (index < text.length) {
@@ -3536,12 +3780,13 @@ function tokenizeNativeText(text, whiteSpace, measureWidth) {
 		if ((char === " " || char === "	") && whiteSpace === "pre-wrap") {
 			const start = index;
 			while (index < text.length && (text[index] === " " || text[index] === "	")) index += 1;
+			const segment = text.slice(start, index);
 			tokens.push({
-				text: text.slice(start, index),
+				text: segment,
 				type: "space",
 				start,
 				end: index,
-				width: measureWidth(text.slice(start, index))
+				width: measureWidth(segment)
 			});
 			continue;
 		}
@@ -3558,7 +3803,7 @@ function tokenizeNativeText(text, whiteSpace, measureWidth) {
 		}
 		const nextStop = findNextStop(text, index, whiteSpace);
 		const chunk = text.slice(index, nextStop);
-		for (const piece of segmentWords(chunk, index, measureWidth)) tokens.push(piece);
+		tokens.push(...segmentChunk(chunk, index, measureWidth, wordBreak));
 		index = nextStop;
 	}
 	return tokens;
@@ -3573,6 +3818,24 @@ function findNextStop(text, start, whiteSpace) {
 	}
 	return index;
 }
+function segmentChunk(text, baseOffset, measureWidth, wordBreak) {
+	if (text.length === 0) return [];
+	if (wordBreak === "keep-all") return [{
+		text,
+		type: "text",
+		start: baseOffset,
+		end: baseOffset + text.length,
+		width: measureWidth(text)
+	}];
+	if (wordBreak === "break-all") return splitIntoGraphemePieces({
+		text,
+		type: "text",
+		start: baseOffset,
+		end: baseOffset + text.length,
+		width: measureWidth(text)
+	}, measureWidth);
+	return segmentWords(text, baseOffset, measureWidth);
+}
 function segmentWords(text, baseOffset, measureWidth) {
 	const pieces = [];
 	const segmenter = getWordSegmenter();
@@ -3611,6 +3874,13 @@ function createTextMeasurer(fontInstance, options) {
 		return width;
 	};
 }
+function createLazyTextMeasurer(fontInstance, options) {
+	let measureWidth = null;
+	return (value) => {
+		if (measureWidth == null) measureWidth = createTextMeasurer(fontInstance, options);
+		return measureWidth(value);
+	};
+}
 function createOpenTypeMeasurer(fontInstance, options) {
 	const cache = /* @__PURE__ */ new Map();
 	const widthOptions = {
@@ -3666,6 +3936,15 @@ function trimLastGrapheme(value) {
 function splitPreservingWhitespace(value) {
 	return value.split(/(\s+)/u).filter((token) => token.length > 0);
 }
+function parseSpacingString(value) {
+	const tokens = value.trim().split(/[\s,]+/u).filter(Boolean).map(parseSpacingToken);
+	if (tokens.length >= 1 && tokens.length <= 4 && tokens.every(Number.isFinite)) return tokens;
+	return null;
+}
+function parseSpacingToken(value) {
+	const match = value.match(/^(-?\d+(?:\.\d+)?)(px)?$/u);
+	return match ? Number(match[1]) : NaN;
+}
 function getFontAscender(fontInstance, size) {
 	return normalizeNumber(fontInstance?.font?.ascender, fontInstance?.unitsPerEm ?? 1e3) / normalizePositive(fontInstance?.unitsPerEm, 1e3) * size;
 }
@@ -3674,29 +3953,12 @@ function getFontAscender(fontInstance, size) {
 var paParagraph = class paParagraph {
 	constructor(fontInstance, text, options, state) {
 		this._font = fontInstance;
-		this._state = state;
 		this.text = text;
-		this.options = options;
-		this.lines = state.lines.map((line) => ({
-			index: line.index,
-			text: line.text,
-			start: line.start,
-			end: line.end,
-			x: line.x,
-			y: line.y,
-			width: line.width,
-			baseline: line.baseline,
-			height: line.height,
-			bbox: { ...line.bbox }
-		}));
-		this.metrics = {
-			...state.metrics,
-			bbox: { ...state.metrics.bbox }
-		};
 		this._cache = {
 			baseShapes: /* @__PURE__ */ new Map(),
 			layoutParagraphs: /* @__PURE__ */ new Map()
 		};
+		this._applySnapshot(options, state);
 	}
 	relayout(next = {}) {
 		const normalized = normalizeParagraphOptions(this._font, {
@@ -3706,7 +3968,9 @@ var paParagraph = class paParagraph {
 		const state = layoutParagraph(this._font, this.text, normalized, {
 			prepared: canReusePreparedParagraphState(this._state, this.options, normalized) ? this._state.prepared : null,
 			preparedWhiteSpace: this._state.preparedWhiteSpace,
-			font: this.options.font
+			font: this.options.font,
+			containerWidth: this._state.containerWidth,
+			containerHeight: this._state.containerHeight
 		});
 		return new paParagraph(this._font, this.text, normalized, state);
 	}
@@ -3718,12 +3982,19 @@ var paParagraph = class paParagraph {
 		const fill = options.fill !== false;
 		const stroke = options.stroke === true;
 		if (!fill && !stroke) return;
+		this._syncLayoutWithContext(ctx);
 		ctx.save();
 		ctx.font = resolveCanvasFont(this._font, this.options.size, this.options);
 		ctx.textAlign = "left";
 		ctx.textBaseline = "alphabetic";
 		if (options.fillStyle != null) ctx.fillStyle = options.fillStyle;
 		if (options.strokeStyle != null) ctx.strokeStyle = options.strokeStyle;
+		if (this.options.overflow === "hidden" && this._state.layoutBox?.clipBox) {
+			const clipBox = this._state.layoutBox.clipBox;
+			ctx.beginPath();
+			ctx.rect(clipBox.x, clipBox.y, clipBox.w, clipBox.h);
+			ctx.clip();
+		}
 		this._state.lines.forEach((line) => {
 			line.fragments.forEach((fragment) => {
 				if (fill) ctx.fillText(fragment.text, fragment.x, line.baseline);
@@ -3751,6 +4022,48 @@ var paParagraph = class paParagraph {
 		paragraph._cache.baseShapes.set("base", baseShape);
 		return baseShape;
 	}
+	_applySnapshot(options, state) {
+		this.options = options;
+		this.layoutEngine = state.layoutEngine;
+		this._state = state;
+		this.lines = state.lines.map((line) => ({
+			index: line.index,
+			text: line.text,
+			start: line.start,
+			end: line.end,
+			x: line.x,
+			y: line.y,
+			width: line.width,
+			baseline: line.baseline,
+			height: line.height,
+			bbox: { ...line.bbox }
+		}));
+		this.metrics = {
+			...state.metrics,
+			bbox: { ...state.metrics.bbox },
+			contentBox: state.metrics.contentBox ? { ...state.metrics.contentBox } : void 0,
+			paddingBox: state.metrics.paddingBox ? { ...state.metrics.paddingBox } : void 0,
+			marginBox: state.metrics.marginBox ? { ...state.metrics.marginBox } : void 0,
+			clipBox: state.metrics.clipBox ? { ...state.metrics.clipBox } : void 0
+		};
+		this._cache.baseShapes.clear();
+		this._cache.layoutParagraphs.clear();
+	}
+	_syncLayoutWithContext(ctx) {
+		const canvas = ctx?.canvas;
+		if (!canvas || this.options.width != null) return;
+		const containerWidth = Number.isFinite(canvas.width) ? canvas.width : null;
+		const containerHeight = Number.isFinite(canvas.height) ? canvas.height : null;
+		if (containerWidth === this._state.containerWidth && containerHeight === this._state.containerHeight) return;
+		const state = layoutParagraph(this._font, this.text, this.options, {
+			prepared: canReusePreparedParagraphState(this._state, this.options, this.options) ? this._state.prepared : null,
+			preparedWhiteSpace: this._state.preparedWhiteSpace,
+			font: this.options.font,
+			containerWidth,
+			containerHeight
+		});
+		this._applySnapshot(this.options, state);
+	}
 	_resolveParagraph(layout) {
 		if (layout === "current") return this;
 		if (layout === "native") return this._getLayoutParagraph("native");
@@ -3824,17 +4137,30 @@ function normalizeParagraphPointOptions(options = {}) {
 }
 //#endregion
 //#region src/paFont/paFont.js
+var browserFontRegistrationId = 0;
 var paFont = class paFont {
 	constructor(font) {
 		this.font = font;
 		this.unitsPerEm = font.unitsPerEm ?? 1e3;
+		this.family = resolveLoadedFontFamily(font);
+		this.canvasFamily = this.family;
 		this._glyphTopologyCache = /* @__PURE__ */ new Map();
 		this._glyphFlatCache = /* @__PURE__ */ new Map();
 	}
 	static async load(source, options = {}) {
 		const opts = normalizeLoadOptions(options);
-		if (source instanceof ArrayBuffer || ArrayBuffer.isView(source)) return new paFont(parse(toArrayBuffer(source)));
-		if (typeof window !== "undefined") return new paFont(parse(await fetchFontBytes(resolveBrowserFontSource(source, opts.base))));
+		if (source instanceof ArrayBuffer || ArrayBuffer.isView(source)) {
+			const bytes = toArrayBuffer(source);
+			const instance = new paFont(parse(bytes));
+			await instance._registerBrowserFont(bytes);
+			return instance;
+		}
+		if (typeof window !== "undefined") {
+			const bytes = await fetchFontBytes(resolveBrowserFontSource(source, opts.base));
+			const instance = new paFont(parse(bytes));
+			await instance._registerBrowserFont(bytes);
+			return instance;
+		}
 		const { target, loadOptions } = await resolveNodeFontSource(source, opts.base);
 		return new paFont(await load(target, void 0, loadOptions));
 	}
@@ -3869,6 +4195,18 @@ var paFont = class paFont {
 	paragraph(value, options = {}) {
 		return createParagraph(this, String(value ?? ""), options);
 	}
+	async _registerBrowserFont(source) {
+		if (typeof window === "undefined" || typeof FontFace === "undefined" || typeof document === "undefined" || document.fonts == null) return;
+		try {
+			const family = createBrowserFontFamily(this.family);
+			const face = new FontFace(family, source);
+			await face.load();
+			document.fonts.add(face);
+			this.canvasFamily = family;
+		} catch {
+			this.canvasFamily = this.family;
+		}
+	}
 	_getGlyphTopology(glyph) {
 		const key = String(glyph.index);
 		if (!this._glyphTopologyCache.has(key)) this._glyphTopologyCache.set(key, buildGlyphTopology(glyph, this.unitsPerEm));
@@ -3953,6 +4291,13 @@ function readSignature(bytes) {
 function isHtmlSignature(signature) {
 	return signature === "<!do" || signature === "<htm";
 }
+function resolveLoadedFontFamily(font) {
+	return font?.names?.fontFamily?.en ?? font?.names?.preferredFamily?.en ?? font?.names?.fullName?.en ?? font?.familyName ?? "paFont";
+}
+function createBrowserFontFamily(family) {
+	browserFontRegistrationId += 1;
+	return `${String(family ?? "paFont").trim().replace(/\s+/g, " ").replace(/[^a-zA-Z0-9 _-]/g, "") || "paFont"}__pa_${browserFontRegistrationId}`;
+}
 //#endregion
 export { PAShape, paFont as default, paFont, paParagraph };