chat-layout 0.1.5 → 1.0.0-1

package/index.mjs

@@ -1,283 +1,85 @@
-import { layoutWithLines, prepareWithSegments } from "@chenglou/pretext";
-//#region src/text.ts
-function preprocessSegments(text) {
-	return text.split("\n").map((line) => line.trim()).filter(Boolean);
+import { layoutNextLine, layoutWithLines, prepareWithSegments, walkLineRanges } from "@chenglou/pretext";
+//#region src/internal/node-registry.ts
+const registry = /* @__PURE__ */ new WeakMap();
+const revisions = /* @__PURE__ */ new WeakMap();
+function getOwnershipError() {
+	return /* @__PURE__ */ new Error("A node can only be attached to one parent. Shared nodes are not supported.");
 }
-function layoutFirstLine(ctx, text, maxWidth) {
-	if (maxWidth < 0) maxWidth = 0;
-	const segment = preprocessSegments(text)[0];
-	if (!segment) return {
-		width: 0,
-		text: "",
-		shift: 0
-	};
-	const { fontBoundingBoxAscent: ascent = 0, fontBoundingBoxDescent: descent = 0 } = ctx.graphics.measureText(segment);
-	const shift = ascent - descent;
-	if (maxWidth === 0) return {
-		width: 0,
-		text: "",
-		shift
-	};
-	const { lines } = layoutWithLines(prepareWithSegments(segment, ctx.graphics.font), maxWidth, 0);
-	if (lines.length === 0) return {
-		width: 0,
-		text: "",
-		shift
-	};
-	return {
-		width: lines[0].width,
-		text: lines[0].text,
-		shift
-	};
+function getDetachOwnershipError() {
+	return /* @__PURE__ */ new Error("Cannot detach or replace a node from a parent that does not own it.");
 }
-function layoutText(ctx, text, maxWidth) {
-	if (maxWidth < 0) maxWidth = 0;
-	const segments = preprocessSegments(text);
-	if (segments.length === 0 || maxWidth === 0) return {
-		width: 0,
-		lines: []
-	};
-	const font = ctx.graphics.font;
-	let width = 0;
-	const lines = [];
-	for (const segment of segments) {
-		const { fontBoundingBoxAscent: ascent = 0, fontBoundingBoxDescent: descent = 0 } = ctx.graphics.measureText(segment);
-		const shift = ascent - descent;
-		const { lines: segLines } = layoutWithLines(prepareWithSegments(segment, font), maxWidth, 0);
-		for (const segLine of segLines) {
-			width = Math.max(width, segLine.width);
-			lines.push({
-				width: segLine.width,
-				text: segLine.text,
-				shift
-			});
-		}
-	}
-	return {
-		width,
-		lines
-	};
-}
-//#endregion
-//#region src/utils.ts
-function shallow(object) {
-	return Object.create(object);
+function bumpRevision(node) {
+	revisions.set(node, (revisions.get(node) ?? 0) + 1);
 }
-function shallowMerge(object, other) {
-	return {
-		__proto__: object,
-		...other
-	};
+function getNodeRevision(node) {
+	return revisions.get(node) ?? 0;
 }
-//#endregion
-//#region src/registry.ts
-const registry = /* @__PURE__ */ new WeakMap();
-function registerNodeParent(node, parent) {
+function attachNodeToParent(node, parent) {
+	if (registry.has(node)) throw getOwnershipError();
 	registry.set(node, parent);
+	bumpRevision(parent);
 }
-function unregisterNodeParent(node) {
-	registry.delete(node);
+function replaceNodeParent(previousNode, nextNode, parent) {
+	if (previousNode === nextNode) return;
+	if (registry.get(previousNode) !== parent) throw getDetachOwnershipError();
+	if (registry.has(nextNode)) throw getOwnershipError();
+	registry.delete(previousNode);
+	registry.set(nextNode, parent);
+	bumpRevision(parent);
 }
-function getNodeParent(node) {
-	return registry.get(node);
+function replaceNodesParent(previousNodes, nextNodes, parent) {
+	const previousSnapshot = Array.from(previousNodes);
+	const nextSnapshot = Array.from(nextNodes);
+	if (previousSnapshot.length === nextSnapshot.length && previousSnapshot.every((node, index) => node === nextSnapshot[index])) return;
+	const previousSet = new Set(previousSnapshot);
+	const nextSet = /* @__PURE__ */ new Set();
+	for (const node of nextSnapshot) {
+		if (nextSet.has(node)) throw getOwnershipError();
+		nextSet.add(node);
+		const currentParent = registry.get(node);
+		if (currentParent != null && currentParent !== parent) throw getOwnershipError();
+	}
+	for (const node of previousSnapshot) if (!nextSet.has(node)) {
+		if (registry.get(node) !== parent) throw getDetachOwnershipError();
+		registry.delete(node);
+	}
+	for (const node of nextSnapshot) if (!previousSet.has(node)) registry.set(node, parent);
+	bumpRevision(parent);
+}
+function forEachNodeAncestor(node, visitor) {
+	let current = node;
+	while (current = registry.get(current)) visitor(current);
 }
 //#endregion
-//#region src/nodes.ts
+//#region src/nodes/base.ts
 var Group = class {
+	#children;
 	constructor(children) {
-		this.children = children;
-		for (const child of children) registerNodeParent(child, this);
-	}
-	get flex() {
-		return this.children.some((item) => item.flex);
-	}
-};
-var VStack = class extends Group {
-	constructor(children, options = {}) {
-		super(children);
-		this.options = options;
-	}
-	measure(ctx) {
-		let width = 0;
-		let height = 0;
-		if (this.options.alignment != null) ctx.alignment = this.options.alignment;
-		for (const [index, child] of this.children.entries()) {
-			if (this.options.gap != null && index !== 0) height += this.options.gap;
-			const result = shallow(ctx).measureNode(child);
-			height += result.height;
-			width = Math.max(width, result.width);
-		}
-		ctx.remainingWidth -= width;
-		return {
-			width,
-			height
-		};
-	}
-	draw(ctx, x, y) {
-		let result = false;
-		const fullWidth = ctx.measureNode(this).width;
-		const alignment = this.options.alignment ?? ctx.alignment;
-		if (this.options.alignment != null) ctx.alignment = this.options.alignment;
-		for (const [index, child] of this.children.entries()) {
-			if (this.options.gap != null && index !== 0) y += this.options.gap;
-			const { width, height } = shallow(ctx).measureNode(child);
-			const curCtx = shallow(ctx);
-			let requestRedraw;
-			if (alignment === "right") requestRedraw = child.draw(curCtx, x + fullWidth - width, y);
-			else if (alignment === "center") requestRedraw = child.draw(curCtx, x + (fullWidth - width) / 2, y);
-			else requestRedraw = child.draw(curCtx, x, y);
-			result ||= requestRedraw;
-			y += height;
-		}
-		return result;
-	}
-	hittest(ctx, test) {
-		let y = 0;
-		const fullWidth = ctx.measureNode(this).width;
-		const alignment = this.options.alignment ?? ctx.alignment;
-		if (this.options.alignment != null) ctx.alignment = this.options.alignment;
-		for (const [index, child] of this.children.entries()) {
-			if (this.options.gap != null && index !== 0) y += this.options.gap;
-			const { width, height } = shallow(ctx).measureNode(child);
-			const curCtx = shallow(ctx);
-			if (test.y >= y && test.y < y + height) {
-				let x;
-				if (alignment === "right") x = test.x - fullWidth + width;
-				else if (alignment === "center") x = test.x - (fullWidth - width) / 2;
-				else x = test.x;
-				if (x < 0 || x >= width) return false;
-				return child.hittest(curCtx, shallowMerge(test, {
-					x,
-					y: test.y - y
-				}));
-			}
-			y += height;
-		}
-		return false;
-	}
-};
-var HStack = class extends Group {
-	constructor(children, options = {}) {
-		super(children);
-		this.children = children;
-		this.options = options;
+		this.#children = [...children];
+		replaceNodesParent([], this.#children, this);
 	}
-	measure(ctx) {
-		let width = 0;
-		let height = 0;
-		let firstFlex;
-		for (const [index, child] of this.children.entries()) {
-			if (this.options.gap != null && index !== 0) width += this.options.gap;
-			if (firstFlex == null && child.flex) {
-				firstFlex = child;
-				continue;
-			}
-			const curCtx = shallow(ctx);
-			curCtx.remainingWidth = ctx.remainingWidth - width;
-			const result = curCtx.measureNode(child);
-			width += result.width;
-			height = Math.max(height, result.height);
-		}
-		if (firstFlex != null) {
-			const curCtx = shallow(ctx);
-			curCtx.remainingWidth = ctx.remainingWidth - width;
-			const result = curCtx.measureNode(firstFlex);
-			width += result.width;
-			height = Math.max(height, result.height);
-		}
-		return {
-			width,
-			height
-		};
+	get children() {
+		return this.#children;
 	}
-	draw(ctx, x, y) {
-		let result = false;
-		const reverse = this.options.reverse ?? ctx.reverse;
-		if (this.options.reverse) ctx.reverse = this.options.reverse;
-		if (reverse) {
-			x += ctx.measureNode(this).width;
-			for (const [index, child] of this.children.entries()) {
-				const gap = this.options.gap != null && index !== 0 ? this.options.gap : void 0;
-				if (gap) {
-					x -= gap;
-					ctx.remainingWidth -= gap;
-				}
-				const { width } = shallow(ctx).measureNode(child);
-				x -= width;
-				const requestRedraw = child.draw(shallow(ctx), x, y);
-				result ||= requestRedraw;
-				ctx.remainingWidth -= width;
-			}
-		} else for (const [index, child] of this.children.entries()) {
-			const gap = this.options.gap != null && index !== 0 ? this.options.gap : void 0;
-			if (gap) {
-				x += gap;
-				ctx.remainingWidth -= gap;
-			}
-			const requestRedraw = child.draw(shallow(ctx), x, y);
-			result ||= requestRedraw;
-			const { width } = shallow(ctx).measureNode(child);
-			ctx.remainingWidth -= width;
-			x += width;
-		}
-		return result;
-	}
-	hittest(ctx, test) {
-		const reverse = this.options.reverse ?? ctx.reverse;
-		if (this.options.reverse) ctx.reverse = this.options.reverse;
-		if (reverse) {
-			let x = ctx.measureNode(this).width;
-			for (const [index, child] of this.children.entries()) {
-				const gap = this.options.gap != null && index !== 0 ? this.options.gap : void 0;
-				if (gap) {
-					x -= gap;
-					ctx.remainingWidth -= gap;
-				}
-				const { width, height } = shallow(ctx).measureNode(child);
-				x -= width;
-				if (x <= test.x && test.x < x + width) {
-					if (test.y >= height) return false;
-					return child.hittest(shallow(ctx), shallowMerge(test, { x: test.x - x }));
-				}
-				ctx.remainingWidth -= width;
-			}
-		} else {
-			let x = 0;
-			for (const [index, child] of this.children.entries()) {
-				const gap = this.options.gap != null && index !== 0 ? this.options.gap : void 0;
-				if (gap) {
-					x += gap;
-					ctx.remainingWidth -= gap;
-				}
-				const { width, height } = shallow(ctx).measureNode(child);
-				if (x <= test.x && test.x < x + width) {
-					if (test.y >= height) return false;
-					return child.hittest(shallow(ctx), shallowMerge(test, { x: test.x - x }));
-				}
-				x += width;
-				ctx.remainingWidth -= width;
-			}
-		}
-		return false;
+	replaceChildren(nextChildren) {
+		const nextSnapshot = [...nextChildren];
+		replaceNodesParent(this.#children, nextSnapshot, this);
+		this.#children = nextSnapshot;
 	}
 };
 var Wrapper = class {
 	#inner;
 	constructor(inner) {
 		this.#inner = inner;
-		registerNodeParent(this.#inner, this);
+		attachNodeToParent(this.#inner, this);
 	}
 	get inner() {
 		return this.#inner;
 	}
 	set inner(newNode) {
 		if (newNode === this.#inner) return;
-		unregisterNodeParent(this.#inner);
+		replaceNodeParent(this.#inner, newNode, this);
 		this.#inner = newNode;
-		registerNodeParent(newNode, this);
-	}
-	get flex() {
-		return this.inner.flex;
 	}
 	measure(ctx) {
 		return this.inner.measure(ctx);
@@ -289,6 +91,128 @@ var Wrapper = class {
 		return this.inner.hittest(ctx, test);
 	}
 };
+//#endregion
+//#region src/layout.ts
+/**
+* 创建 LayoutRect 的辅助函数
+*/
+function createRect(x, y, width, height) {
+	return {
+		x,
+		y,
+		width,
+		height
+	};
+}
+/**
+* 合并多个 rect 得到包含所有 rect 的最小外接矩形
+*/
+function mergeRects(rects) {
+	if (rects.length === 0) return createRect(0, 0, 0, 0);
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+	for (const rect of rects) {
+		minX = Math.min(minX, rect.x);
+		minY = Math.min(minY, rect.y);
+		maxX = Math.max(maxX, rect.x + rect.width);
+		maxY = Math.max(maxY, rect.y + rect.height);
+	}
+	return createRect(minX, minY, maxX - minX, maxY - minY);
+}
+/**
+* 从子节点布局结果计算容器的 contentBox
+*/
+function computeContentBox(children) {
+	return mergeRects(children.map((child) => child.contentBox));
+}
+/**
+* 检查点是否在 rect 内
+*/
+function pointInRect(x, y, rect) {
+	return x >= rect.x && x < rect.x + rect.width && y >= rect.y && y < rect.y + rect.height;
+}
+/**
+* 读取单子节点布局结果中的唯一 child。
+*/
+function getSingleChildLayout(layout) {
+	return layout.children[0];
+}
+/**
+* 在布局结果中按指定盒模型查找命中的 child，并返回局部坐标。
+*/
+function findChildAtPoint(children, x, y, box = "contentBox") {
+	for (let i = children.length - 1; i >= 0; i -= 1) {
+		const child = children[i];
+		const target = box === "rect" ? child.rect : child.contentBox;
+		if (!pointInRect(x, y, target)) continue;
+		return {
+			child,
+			localX: x - target.x,
+			localY: y - target.y
+		};
+	}
+}
+//#endregion
+//#region src/utils.ts
+function shallow(object) {
+	return Object.create(object);
+}
+function shallowMerge(object, other) {
+	return {
+		__proto__: object,
+		...other
+	};
+}
+//#endregion
+//#region src/nodes/shared.ts
+function withConstraints(ctx, constraints) {
+	const next = shallow(ctx);
+	next.constraints = constraints;
+	return next;
+}
+function getLayoutContext(ctx) {
+	return ctx;
+}
+function readLayoutResult(node, ctx) {
+	return getLayoutContext(ctx).getLayoutResult(node, ctx.constraints);
+}
+function writeLayoutResult(node, ctx, result) {
+	getLayoutContext(ctx).setLayoutResult(node, result, ctx.constraints);
+}
+function ensureLayoutResult(node, ctx) {
+	return readLayoutResult(node, ctx);
+}
+function drawLayoutChildren(node, ctx, x, y) {
+	const layoutResult = ensureLayoutResult(node, ctx);
+	if (!layoutResult) return false;
+	let result = false;
+	for (const childResult of layoutResult.children) result ||= childResult.node.draw(withConstraints(ctx, childResult.constraints), x + childResult.contentBox.x, y + childResult.contentBox.y);
+	return result;
+}
+function hittestLayoutChildren(node, ctx, test, box = "contentBox") {
+	const layoutResult = ensureLayoutResult(node, ctx);
+	if (!layoutResult) return false;
+	const hit = findChildAtPoint(layoutResult.children, test.x, test.y, box);
+	if (!hit) return false;
+	return hit.child.node.hittest(withConstraints(ctx, hit.child.constraints), shallowMerge(test, {
+		x: hit.localX,
+		y: hit.localY
+	}));
+}
+//#endregion
+//#region src/nodes/box.ts
+function clampToConstraints$1(value, min, max) {
+	let result = value;
+	if (min != null) result = Math.max(result, min);
+	if (max != null) result = Math.min(result, max);
+	return result;
+}
+function shrinkConstraint(value, padding) {
+	if (value == null) return;
+	return Math.max(0, value - padding);
+}
 var PaddingBox = class extends Wrapper {
 	constructor(inner, padding = {}) {
 		super(inner);
@@ -307,80 +231,634 @@ var PaddingBox = class extends Wrapper {
 		return this.padding.right ?? 0;
 	}
 	measure(ctx) {
-		ctx.remainingWidth -= this.#left + this.#right;
-		const { width, height } = ctx.measureNode(this.inner);
+		const paddingLeft = this.#left;
+		const paddingRight = this.#right;
+		const paddingTop = this.#top;
+		const paddingBottom = this.#bottom;
+		const horizontalPadding = paddingLeft + paddingRight;
+		const verticalPadding = paddingTop + paddingBottom;
+		const childConstraints = ctx.constraints ? {
+			...ctx.constraints,
+			minWidth: shrinkConstraint(ctx.constraints.minWidth, horizontalPadding),
+			maxWidth: shrinkConstraint(ctx.constraints.maxWidth, horizontalPadding),
+			minHeight: shrinkConstraint(ctx.constraints.minHeight, verticalPadding),
+			maxHeight: shrinkConstraint(ctx.constraints.maxHeight, verticalPadding)
+		} : void 0;
+		const { width, height } = ctx.measureNode(this.inner, childConstraints);
+		const containerBox = createRect(0, 0, clampToConstraints$1(width + horizontalPadding, ctx.constraints?.minWidth, ctx.constraints?.maxWidth), clampToConstraints$1(height + verticalPadding, ctx.constraints?.minHeight, ctx.constraints?.maxHeight));
+		const childRect = createRect(paddingLeft, paddingTop, width, height);
+		writeLayoutResult(this, ctx, {
+			containerBox,
+			contentBox: childRect,
+			children: [{
+				node: this.inner,
+				rect: childRect,
+				contentBox: childRect,
+				constraints: childConstraints
+			}],
+			constraints: ctx.constraints
+		});
 		return {
-			width: width + this.#left + this.#right,
-			height: height + this.#top + this.#bottom
+			width: containerBox.width,
+			height: containerBox.height
 		};
 	}
 	draw(ctx, x, y) {
-		ctx.remainingWidth -= this.#left + this.#right;
-		return this.inner.draw(ctx, x + this.#left, y + this.#top);
+		const layoutResult = readLayoutResult(this, ctx);
+		if (!layoutResult) return this.inner.draw(ctx, x + this.#left, y + this.#top);
+		const childResult = getSingleChildLayout(layoutResult);
+		if (!childResult) return false;
+		return childResult.node.draw(withConstraints(ctx, childResult.constraints), x + childResult.rect.x, y + childResult.rect.y);
 	}
 	hittest(ctx, test) {
-		ctx.remainingWidth -= this.#left + this.#right;
-		const { width, height } = shallow(ctx).measureNode(this.inner);
-		if (0 <= test.x - this.#left && test.x - this.#left < width && 0 <= test.y - this.#top && test.y - this.#top < height) return this.inner.hittest(shallow(ctx), shallowMerge(test, {
-			x: test.x - this.#left,
-			y: test.y - this.#top
+		const layoutResult = readLayoutResult(this, ctx);
+		if (!layoutResult) return false;
+		const hit = findChildAtPoint(layoutResult.children, test.x, test.y, "rect");
+		if (!hit) return false;
+		return hit.child.node.hittest(withConstraints(ctx, hit.child.constraints), shallowMerge(test, {
+			x: hit.localX,
+			y: hit.localY
 		}));
+	}
+};
+var Fixed = class {
+	constructor(width, height) {
+		this.width = width;
+		this.height = height;
+	}
+	measure(_ctx) {
+		return {
+			width: this.width,
+			height: this.height
+		};
+	}
+	draw(_ctx, _x, _y) {
+		return false;
+	}
+	hittest(_ctx, _test) {
 		return false;
 	}
 };
-var AlignBox = class extends Wrapper {
-	#shift = 0;
-	constructor(inner, options) {
+//#endregion
+//#region src/nodes/flex.ts
+function getMainSize(axis, box) {
+	return axis === "row" ? box.width : box.height;
+}
+function getCrossSize(axis, box) {
+	return axis === "row" ? box.height : box.width;
+}
+function getMinMain(axis, constraints) {
+	return axis === "row" ? constraints?.minWidth : constraints?.minHeight;
+}
+function getMaxMain(axis, constraints) {
+	return axis === "row" ? constraints?.maxWidth : constraints?.maxHeight;
+}
+function getMinCross(axis, constraints) {
+	return axis === "row" ? constraints?.minHeight : constraints?.minWidth;
+}
+function getMaxCross(axis, constraints) {
+	return axis === "row" ? constraints?.maxHeight : constraints?.maxWidth;
+}
+function createAxisConstraints(axis, constraints, main, cross = {}) {
+	if (constraints == null && main.min == null && main.max == null && cross.min == null && cross.max == null) return;
+	const next = { ...constraints };
+	if (axis === "row") {
+		next.minWidth = main.min;
+		next.maxWidth = main.max;
+		next.minHeight = cross.min;
+		next.maxHeight = cross.max;
+	} else {
+		next.minHeight = main.min;
+		next.maxHeight = main.max;
+		next.minWidth = cross.min;
+		next.maxWidth = cross.max;
+	}
+	return next;
+}
+function clampToConstraints(value, min, max) {
+	let result = value;
+	if (min != null) result = Math.max(result, min);
+	if (max != null) result = Math.min(result, max);
+	return result;
+}
+function getCrossAlignment(alignSelf, alignItems) {
+	if (alignSelf == null || alignSelf === "auto") return alignItems;
+	return alignSelf;
+}
+function getJustifySpacing(justifyContent, freeSpace, itemCount, gap) {
+	switch (justifyContent) {
+		case "center": return {
+			leading: freeSpace / 2,
+			between: gap
+		};
+		case "end": return {
+			leading: freeSpace,
+			between: gap
+		};
+		case "space-between": return {
+			leading: 0,
+			between: itemCount > 1 ? gap + freeSpace / (itemCount - 1) : gap
+		};
+		case "space-around": return {
+			leading: itemCount > 0 ? freeSpace / itemCount / 2 : 0,
+			between: itemCount > 0 ? gap + freeSpace / itemCount : gap
+		};
+		case "space-evenly": return {
+			leading: itemCount > 0 ? freeSpace / (itemCount + 1) : 0,
+			between: itemCount > 0 ? gap + freeSpace / (itemCount + 1) : gap
+		};
+		default: return {
+			leading: 0,
+			between: gap
+		};
+	}
+}
+function getCrossOffset(align, frameCross, contentCross) {
+	switch (align) {
+		case "center": return (frameCross - contentCross) / 2;
+		case "end": return frameCross - contentCross;
+		default: return 0;
+	}
+}
+function createRectFromAxis(axis, main, cross, mainSize, crossSize) {
+	return axis === "row" ? createRect(main, cross, mainSize, crossSize) : createRect(cross, main, crossSize, mainSize);
+}
+function readFlexItemOptions(child) {
+	if (child instanceof FlexItem) return child.item;
+	return {};
+}
+function computeFlexLayout(children, options, constraints, measureChild) {
+	const axis = options.direction ?? "row";
+	const gap = options.gap ?? 0;
+	const justifyContent = options.justifyContent ?? "start";
+	const alignItems = options.alignItems ?? "start";
+	const reverse = options.reverse ?? false;
+	const mainAxisSize = options.mainAxisSize ?? "fill";
+	const orderedChildren = reverse ? [...children].reverse() : children;
+	const maxMain = getMaxMain(axis, constraints);
+	const minMain = getMinMain(axis, constraints);
+	const maxCross = getMaxCross(axis, constraints);
+	const minCross = getMinCross(axis, constraints);
+	const gapTotal = orderedChildren.length > 1 ? gap * (orderedChildren.length - 1) : 0;
+	const finiteMain = maxMain != null;
+	const finiteCross = maxCross != null;
+	const availableMain = finiteMain ? Math.max(0, maxMain - gapTotal) : void 0;
+	let consumedMain = 0;
+	let totalGrow = 0;
+	const measurements = /* @__PURE__ */ new Map();
+	for (const child of orderedChildren) {
+		const item = readFlexItemOptions(child);
+		const grow = item.grow ?? 0;
+		totalGrow += grow;
+		if (grow > 0 && finiteMain) continue;
+		const effectiveAlign = getCrossAlignment(item.alignSelf, alignItems);
+		const stretch = effectiveAlign === "stretch";
+		const childConstraints = createAxisConstraints(axis, constraints, { max: finiteMain && availableMain != null ? Math.max(0, availableMain - consumedMain) : maxMain }, {
+			min: void 0,
+			max: maxCross
+		});
+		const measured = measureChild(child, childConstraints);
+		const frameMain = getMainSize(axis, measured);
+		const frameCross = getCrossSize(axis, measured);
+		measurements.set(child, {
+			child,
+			item,
+			measured,
+			initialConstraints: childConstraints,
+			finalConstraints: childConstraints,
+			allocatedMain: void 0,
+			grow,
+			effectiveAlign,
+			stretch,
+			frameMain,
+			frameCross
+		});
+		consumedMain += frameMain;
+	}
+	const remainingMain = finiteMain && availableMain != null ? Math.max(0, availableMain - consumedMain) : void 0;
+	for (const child of orderedChildren) {
+		if (measurements.has(child)) continue;
+		const item = readFlexItemOptions(child);
+		const grow = item.grow ?? 0;
+		const effectiveAlign = getCrossAlignment(item.alignSelf, alignItems);
+		const stretch = effectiveAlign === "stretch";
+		const allocatedMain = finiteMain && remainingMain != null && totalGrow > 0 ? remainingMain * grow / totalGrow : void 0;
+		const childConstraints = createAxisConstraints(axis, constraints, { max: allocatedMain }, {
+			min: void 0,
+			max: maxCross
+		});
+		const measured = measureChild(child, childConstraints);
+		const measuredMain = getMainSize(axis, measured);
+		const frameMain = allocatedMain ?? measuredMain;
+		const frameCross = getCrossSize(axis, measured);
+		measurements.set(child, {
+			child,
+			item,
+			measured,
+			initialConstraints: childConstraints,
+			finalConstraints: childConstraints,
+			allocatedMain,
+			grow,
+			effectiveAlign,
+			stretch,
+			frameMain,
+			frameCross
+		});
+	}
+	let contentMain = gapTotal;
+	let contentCross = 0;
+	for (const child of orderedChildren) {
+		const measurement = measurements.get(child);
+		contentMain += measurement.frameMain;
+		contentCross = Math.max(contentCross, measurement.frameCross);
+	}
+	finiteMain && mainAxisSize === "fill" || clampToConstraints(contentMain, minMain, maxMain);
+	const containerCross = clampToConstraints(contentCross, minCross, maxCross);
+	if (finiteCross) {
+		for (const child of orderedChildren) {
+			const measurement = measurements.get(child);
+			if (!measurement.stretch) continue;
+			const finalConstraints = createAxisConstraints(axis, measurement.initialConstraints, {
+				min: getMinMain(axis, measurement.initialConstraints),
+				max: getMaxMain(axis, measurement.initialConstraints)
+			}, {
+				min: containerCross,
+				max: containerCross
+			});
+			const remeasured = measureChild(child, finalConstraints);
+			measurement.measured = remeasured;
+			measurement.finalConstraints = finalConstraints;
+			measurement.frameCross = containerCross;
+			measurement.frameMain = measurement.allocatedMain ?? getMainSize(axis, remeasured);
+		}
+		contentMain = gapTotal;
+		contentCross = 0;
+		for (const child of orderedChildren) {
+			const measurement = measurements.get(child);
+			contentMain += measurement.frameMain;
+			contentCross = Math.max(contentCross, getCrossSize(axis, measurement.measured));
+		}
+	}
+	const finalContainerMain = finiteMain && mainAxisSize === "fill" ? Math.max(maxMain, contentMain) : clampToConstraints(contentMain, minMain, maxMain);
+	const spacing = getJustifySpacing(justifyContent, Math.max(0, finalContainerMain - contentMain), orderedChildren.length, gap);
+	const childResults = [];
+	let cursor = spacing.leading;
+	for (const child of orderedChildren) {
+		const measurement = measurements.get(child);
+		const frameCross = measurement.stretch && finiteCross ? containerCross : measurement.frameCross;
+		const contentMainSize = getMainSize(axis, measurement.measured);
+		const contentCrossSize = getCrossSize(axis, measurement.measured);
+		const rectCross = measurement.stretch ? 0 : getCrossOffset(measurement.effectiveAlign, containerCross, frameCross);
+		const contentCrossOffset = rectCross + getCrossOffset(measurement.effectiveAlign, frameCross, contentCrossSize);
+		const rect = createRectFromAxis(axis, cursor, rectCross, measurement.frameMain, frameCross);
+		const contentBox = createRectFromAxis(axis, cursor, contentCrossOffset, contentMainSize, contentCrossSize);
+		childResults.push({
+			node: child,
+			rect,
+			contentBox,
+			constraints: measurement.finalConstraints
+		});
+		cursor += measurement.frameMain + spacing.between;
+	}
+	const containerBox = axis === "row" ? createRect(0, 0, finalContainerMain, containerCross) : createRect(0, 0, containerCross, finalContainerMain);
+	const finalContentBox = childResults.length > 0 ? computeContentBox(childResults) : createRect(0, 0, 0, 0);
+	return {
+		box: {
+			width: containerBox.width,
+			height: containerBox.height
+		},
+		layout: {
+			containerBox,
+			contentBox: finalContentBox,
+			children: childResults,
+			constraints
+		}
+	};
+}
+var FlexItem = class extends Wrapper {
+	constructor(inner, item = {}) {
 		super(inner);
+		this.item = item;
+	}
+};
+var Flex = class extends Group {
+	constructor(children, options = {}) {
+		super(children);
 		this.options = options;
 	}
 	measure(ctx) {
-		ctx.alignment = this.options.alignment;
-		const { width, height } = ctx.measureNode(this.inner);
-		switch (this.options.alignment) {
-			case "center":
-				this.#shift = (ctx.remainingWidth - width) / 2;
-				break;
-			case "right":
-				this.#shift = ctx.remainingWidth - width;
-				break;
-			default: this.#shift = 0;
-		}
+		const result = computeFlexLayout(this.children, this.options, ctx.constraints, (node, constraints) => ctx.measureNode(node, constraints));
+		writeLayoutResult(this, ctx, result.layout);
+		return result.box;
+	}
+	draw(ctx, x, y) {
+		return drawLayoutChildren(this, ctx, x, y);
+	}
+	hittest(ctx, test) {
+		return hittestLayoutChildren(this, ctx, test, "contentBox");
+	}
+};
+//#endregion
+//#region src/nodes/place.ts
+function resolveHorizontalOffset(align, availableWidth, childWidth) {
+	switch (align) {
+		case "center": return (availableWidth - childWidth) / 2;
+		case "end": return availableWidth - childWidth;
+		case "start": return 0;
+	}
+}
+var Place = class extends Wrapper {
+	constructor(inner, options = {}) {
+		super(inner);
+		this.options = options;
+	}
+	measure(ctx) {
+		const availableWidth = ctx.constraints?.maxWidth;
+		const expand = this.options.expand ?? true;
+		const childConstraints = ctx.constraints ? { ...ctx.constraints } : void 0;
+		const childBox = ctx.measureNode(this.inner, childConstraints);
+		let width = expand && availableWidth != null ? availableWidth : childBox.width;
+		if (ctx.constraints?.minWidth != null) width = Math.max(width, ctx.constraints.minWidth);
+		if (ctx.constraints?.maxWidth != null) width = Math.min(width, ctx.constraints.maxWidth);
+		const childRect = createRect(resolveHorizontalOffset(this.options.align ?? "start", width, childBox.width), 0, childBox.width, childBox.height);
+		writeLayoutResult(this, ctx, {
+			containerBox: createRect(0, 0, width, childBox.height),
+			contentBox: childRect,
+			children: [{
+				node: this.inner,
+				rect: childRect,
+				contentBox: createRect(0, 0, childBox.width, childBox.height),
+				constraints: childConstraints
+			}],
+			constraints: ctx.constraints
+		});
 		return {
-			width: ctx.remainingWidth,
-			height
+			width,
+			height: childBox.height
 		};
 	}
 	draw(ctx, x, y) {
-		ctx.alignment = this.options.alignment;
-		return this.inner.draw(ctx, x + this.#shift, y);
+		const layoutResult = readLayoutResult(this, ctx);
+		if (!layoutResult) return this.inner.draw(ctx, x, y);
+		const childResult = getSingleChildLayout(layoutResult);
+		if (!childResult) return false;
+		const childCtx = withConstraints(ctx, childResult.constraints);
+		return childResult.node.draw(childCtx, x + childResult.rect.x, y + childResult.rect.y);
 	}
 	hittest(ctx, test) {
-		ctx.alignment = this.options.alignment;
-		const { width } = shallow(ctx).measureNode(this.inner);
-		if (0 <= test.x - this.#shift && test.x - this.#shift < width) return this.inner.hittest(shallow(ctx), shallowMerge(test, { x: test.x - this.#shift }));
-		return false;
+		const layoutResult = readLayoutResult(this, ctx);
+		if (!layoutResult) return false;
+		const hit = findChildAtPoint(layoutResult.children, test.x, test.y, "rect");
+		if (!hit) return false;
+		return hit.child.node.hittest(withConstraints(ctx, hit.child.constraints), shallowMerge(test, {
+			x: hit.localX,
+			y: hit.localY
+		}));
 	}
 };
+//#endregion
+//#region src/text.ts
+const FONT_SHIFT_PROBE = "M";
+const PREPARED_SEGMENT_CACHE_CAPACITY = 512;
+const FONT_SHIFT_CACHE_CAPACITY = 64;
+const LINE_START_CURSOR = {
+	segmentIndex: 0,
+	graphemeIndex: 0
+};
+const preparedSegmentCache = /* @__PURE__ */ new Map();
+const fontShiftCache = /* @__PURE__ */ new Map();
+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);
+	return segments;
+}
+function readLruValue(cache, key) {
+	const cached = cache.get(key);
+	if (cached == null) return;
+	cache.delete(key);
+	cache.set(key, cached);
+	return cached;
+}
+function writeLruValue(cache, key, value, capacity) {
+	if (cache.has(key)) cache.delete(key);
+	else if (cache.size >= capacity) {
+		const firstKey = cache.keys().next().value;
+		if (firstKey != null) cache.delete(firstKey);
+	}
+	cache.set(key, value);
+	return value;
+}
+function getPreparedSegmentCacheKey(segment, font) {
+	return `${font}\u0000${segment}`;
+}
+function readPreparedSegment(segment, font) {
+	const key = getPreparedSegmentCacheKey(segment, font);
+	const cached = readLruValue(preparedSegmentCache, key);
+	if (cached != null) return cached;
+	return writeLruValue(preparedSegmentCache, key, prepareWithSegments(segment, font), PREPARED_SEGMENT_CACHE_CAPACITY);
+}
+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 layoutFirstLineIntrinsic(ctx, text, whitespace = "preserve") {
+	const segment = preprocessSegments(text, whitespace)[0];
+	if (!segment) return {
+		width: 0,
+		text: "",
+		shift: 0
+	};
+	const shift = measureFontShift(ctx);
+	return {
+		width: ctx.graphics.measureText(segment).width,
+		text: segment,
+		shift
+	};
+}
+function measureTextIntrinsic(ctx, text, whitespace = "preserve") {
+	const segments = preprocessSegments(text, whitespace);
+	if (segments.length === 0) return {
+		width: 0,
+		lineCount: 0
+	};
+	let width = 0;
+	for (const segment of segments) width = Math.max(width, ctx.graphics.measureText(segment).width);
+	return {
+		width,
+		lineCount: segments.length
+	};
+}
+function layoutTextIntrinsic(ctx, text, whitespace = "preserve") {
+	const segments = preprocessSegments(text, whitespace);
+	if (segments.length === 0) return {
+		width: 0,
+		lines: []
+	};
+	const shift = measureFontShift(ctx);
+	let width = 0;
+	const lines = [];
+	for (const segment of segments) {
+		const measuredWidth = ctx.graphics.measureText(segment).width;
+		width = Math.max(width, measuredWidth);
+		lines.push({
+			width: measuredWidth,
+			text: segment,
+			shift
+		});
+	}
+	return {
+		width,
+		lines
+	};
+}
+function layoutFirstLine(ctx, text, maxWidth, whitespace = "preserve") {
+	if (maxWidth < 0) maxWidth = 0;
+	const segment = preprocessSegments(text, whitespace)[0];
+	if (!segment) return {
+		width: 0,
+		text: "",
+		shift: 0
+	};
+	const shift = measureFontShift(ctx);
+	if (maxWidth === 0) return {
+		width: 0,
+		text: "",
+		shift
+	};
+	const line = layoutNextLine(readPreparedSegment(segment, ctx.graphics.font), LINE_START_CURSOR, maxWidth);
+	if (line == null) return {
+		width: 0,
+		text: "",
+		shift
+	};
+	return {
+		width: line.width,
+		text: line.text,
+		shift
+	};
+}
+function measureText(ctx, text, maxWidth, whitespace = "preserve") {
+	if (maxWidth < 0) maxWidth = 0;
+	const segments = preprocessSegments(text, whitespace);
+	if (segments.length === 0 || maxWidth === 0) return {
+		width: 0,
+		lineCount: 0
+	};
+	const font = ctx.graphics.font;
+	let width = 0;
+	let lineCount = 0;
+	for (const segment of segments) {
+		if (segment.length === 0) {
+			lineCount += 1;
+			continue;
+		}
+		const prepared = readPreparedSegment(segment, font);
+		lineCount += walkLineRanges(prepared, maxWidth, (line) => {
+			width = Math.max(width, line.width);
+		});
+	}
+	return {
+		width,
+		lineCount
+	};
+}
+function layoutText(ctx, text, maxWidth, whitespace = "preserve") {
+	if (maxWidth < 0) maxWidth = 0;
+	const segments = preprocessSegments(text, whitespace);
+	if (segments.length === 0 || maxWidth === 0) return {
+		width: 0,
+		lines: []
+	};
+	const font = ctx.graphics.font;
+	const shift = measureFontShift(ctx);
+	let width = 0;
+	const lines = [];
+	for (const segment of segments) {
+		if (segment.length === 0) {
+			lines.push({
+				width: 0,
+				text: "",
+				shift
+			});
+			continue;
+		}
+		const { lines: segLines } = layoutWithLines(readPreparedSegment(segment, font), maxWidth, 0);
+		for (const segLine of segLines) {
+			width = Math.max(width, segLine.width);
+			lines.push({
+				width: segLine.width,
+				text: segLine.text,
+				shift
+			});
+		}
+	}
+	return {
+		width,
+		lines
+	};
+}
+//#endregion
+//#region src/nodes/text.ts
+function resolvePhysicalTextAlign(options) {
+	if (options.physicalAlign != null) return options.physicalAlign;
+	if (options.align != null) switch (options.align) {
+		case "start": return "left";
+		case "center": return "center";
+		case "end": return "right";
+	}
+	return "left";
+}
+function normalizeTextMaxWidth(maxWidth) {
+	if (maxWidth == null) return;
+	return Math.max(0, maxWidth);
+}
+function getTextLayoutContext(ctx) {
+	return ctx;
+}
+function readCachedTextLayout(node, ctx, key, compute) {
+	const textCtx = getTextLayoutContext(ctx);
+	const cached = textCtx.getTextLayout(node, key);
+	if (cached != null) return cached;
+	const layout = compute();
+	textCtx.setTextLayout(node, key, layout);
+	return layout;
+}
+function getSingleLineLayoutKey(maxWidth) {
+	return maxWidth == null ? "single:intrinsic" : `single:${maxWidth}`;
+}
+function getMultiLineMeasureLayoutKey(maxWidth) {
+	return maxWidth == null ? "multi:measure:intrinsic" : `multi:measure:${maxWidth}`;
+}
+function getMultiLineDrawLayoutKey(maxWidth) {
+	return maxWidth == null ? "multi:draw:intrinsic" : `multi:draw:${maxWidth}`;
+}
+function getSingleLineLayout(node, ctx, text, whitespace) {
+	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
+	return readCachedTextLayout(node, ctx, getSingleLineLayoutKey(maxWidth), () => maxWidth == null ? layoutFirstLineIntrinsic(ctx, text, whitespace) : layoutFirstLine(ctx, text, maxWidth, whitespace));
+}
+function getMultiLineMeasureLayout(node, ctx, text, whitespace) {
+	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
+	return readCachedTextLayout(node, ctx, getMultiLineMeasureLayoutKey(maxWidth), () => maxWidth == null ? measureTextIntrinsic(ctx, text, whitespace) : measureText(ctx, text, maxWidth, whitespace));
+}
+function getMultiLineDrawLayout(node, ctx, text, whitespace) {
+	const maxWidth = normalizeTextMaxWidth(ctx.constraints?.maxWidth);
+	return readCachedTextLayout(node, ctx, getMultiLineDrawLayoutKey(maxWidth), () => maxWidth == null ? layoutTextIntrinsic(ctx, text, whitespace) : layoutText(ctx, text, maxWidth, whitespace));
+}
 var MultilineText = class {
-	#width = 0;
-	#lines = [];
 	constructor(text, options) {
 		this.text = text;
 		this.options = options;
 	}
-	get flex() {
-		return true;
-	}
 	measure(ctx) {
 		return ctx.with((g) => {
 			g.font = this.options.font;
-			const { width, lines } = layoutText(ctx, this.text, ctx.remainingWidth);
-			this.#width = width;
-			this.#lines = lines;
+			const { width, lineCount } = getMultiLineMeasureLayout(this, ctx, this.text, this.options.whitespace);
 			return {
-				width: this.#width,
-				height: this.#lines.length * this.options.lineHeight
+				width,
+				height: lineCount * this.options.lineHeight
 			};
 		});
 	}
@@ -388,25 +866,26 @@ var MultilineText = class {
 		return ctx.with((g) => {
 			g.font = this.options.font;
 			g.fillStyle = ctx.resolveDynValue(this.options.style);
-			switch (this.options.alignment) {
+			const { width, lines } = getMultiLineDrawLayout(this, ctx, this.text, this.options.whitespace);
+			switch (resolvePhysicalTextAlign(this.options)) {
 				case "left":
-					for (const { text, shift } of this.#lines) {
+					for (const { text, shift } of lines) {
 						g.fillText(text, x, y + (this.options.lineHeight + shift) / 2);
 						y += this.options.lineHeight;
 					}
 					break;
 				case "right":
-					x += this.#width;
+					x += width;
 					g.textAlign = "right";
-					for (const { text, shift } of this.#lines) {
+					for (const { text, shift } of lines) {
 						g.fillText(text, x, y + (this.options.lineHeight + shift) / 2);
 						y += this.options.lineHeight;
 					}
 					break;
 				case "center":
-					x += this.#width / 2;
+					x += width / 2;
 					g.textAlign = "center";
-					for (const { text, shift } of this.#lines) {
+					for (const { text, shift } of lines) {
 						g.fillText(text, x, y + (this.options.lineHeight + shift) / 2);
 						y += this.options.lineHeight;
 					}
@@ -420,25 +899,16 @@ var MultilineText = class {
 	}
 };
 var Text = class {
-	#width = 0;
-	#text = "";
-	#shift = 0;
 	constructor(text, options) {
 		this.text = text;
 		this.options = options;
 	}
-	get flex() {
-		return false;
-	}
 	measure(ctx) {
 		return ctx.with((g) => {
 			g.font = this.options.font;
-			const { width, text, shift } = layoutFirstLine(ctx, this.text, ctx.remainingWidth);
-			this.#width = width;
-			this.#text = text;
-			this.#shift = shift;
+			const { width } = getSingleLineLayout(this, ctx, this.text, this.options.whitespace);
 			return {
-				width: this.#width,
+				width,
 				height: this.options.lineHeight
 			};
 		});
@@ -447,7 +917,8 @@ var Text = class {
 		return ctx.with((g) => {
 			g.font = this.options.font;
 			g.fillStyle = ctx.resolveDynValue(this.options.style);
-			g.fillText(this.#text, x, y + (this.options.lineHeight + this.#shift) / 2);
+			const { text, shift } = getSingleLineLayout(this, ctx, this.text, this.options.whitespace);
+			g.fillText(text, x, y + (this.options.lineHeight + shift) / 2);
 			return false;
 		});
 	}
@@ -455,34 +926,20 @@ var Text = class {
 		return false;
 	}
 };
-var Fixed = class {
-	constructor(width, height) {
-		this.width = width;
-		this.height = height;
-	}
-	get flex() {
-		return false;
-	}
-	measure(_ctx) {
-		return {
-			width: this.width,
-			height: this.height
-		};
-	}
-	draw(_ctx, _x, _y) {
-		return false;
-	}
-	hittest(_ctx, _test) {
-		return false;
-	}
-};
 //#endregion
-//#region src/renderer.ts
+//#region src/renderer/base.ts
+const MAX_CONSTRAINT_VARIANTS = 8;
+function constraintKey(constraints) {
+	if (constraints == null) return "";
+	return `${constraints.minWidth ?? ""},${constraints.maxWidth ?? ""},${constraints.minHeight ?? ""},${constraints.maxHeight ?? ""}`;
+}
 var BaseRenderer = class {
 	graphics;
 	#ctx;
 	#lastWidth;
 	#cache = /* @__PURE__ */ new WeakMap();
+	#layoutCache = /* @__PURE__ */ new WeakMap();
+	#textLayoutCache = /* @__PURE__ */ new WeakMap();
 	get context() {
 		return shallow(this.#ctx);
 	}
@@ -493,19 +950,20 @@ var BaseRenderer = class {
 		const self = this;
 		this.#ctx = {
 			graphics: this.graphics,
-			get remainingWidth() {
-				return this.graphics.canvas.clientWidth;
+			measureNode(node, constraints) {
+				return self.measureNode(node, constraints);
 			},
-			set remainingWidth(value) {
-				Object.defineProperty(this, "remainingWidth", {
-					value,
-					writable: true
-				});
+			getLayoutResult(node, constraints) {
+				return self.getLayoutResult(node, constraints);
 			},
-			alignment: "left",
-			reverse: false,
-			measureNode(node) {
-				return self.measureNode(node, this);
+			setLayoutResult(node, result, constraints) {
+				self.setLayoutResult(node, result, constraints);
+			},
+			getTextLayout(node, key) {
+				return self.getTextLayout(node, key);
+			},
+			setTextLayout(node, key, layout) {
+				self.setTextLayout(node, key, layout);
 			},
 			invalidateNode: this.invalidateNode.bind(this),
 			resolveDynValue(value) {
@@ -523,21 +981,131 @@ var BaseRenderer = class {
 		};
 		this.#lastWidth = this.graphics.canvas.clientWidth;
 	}
+	#clearAllCaches() {
+		this.#cache = /* @__PURE__ */ new WeakMap();
+		this.#layoutCache = /* @__PURE__ */ new WeakMap();
+		this.#textLayoutCache = /* @__PURE__ */ new WeakMap();
+	}
+	#syncCachesToViewportWidth() {
+		const width = this.graphics.canvas.clientWidth;
+		if (this.#lastWidth === width) return;
+		this.#clearAllCaches();
+		this.#lastWidth = width;
+	}
+	getRootConstraints() {
+		return { maxWidth: this.graphics.canvas.clientWidth };
+	}
+	getRootContext() {
+		const ctx = this.context;
+		ctx.constraints = this.getRootConstraints();
+		return ctx;
+	}
+	measureRootNode(node) {
+		return this.measureNode(node, this.getRootConstraints());
+	}
+	drawRootNode(node, x = 0, y = 0) {
+		this.measureRootNode(node);
+		return node.draw(this.getRootContext(), x, y);
+	}
+	hittestRootNode(node, test) {
+		this.measureRootNode(node);
+		return node.hittest(this.getRootContext(), test);
+	}
 	invalidateNode(node) {
+		this.#syncCachesToViewportWidth();
 		this.#cache.delete(node);
-		let it = node;
-		while (it = getNodeParent(it)) this.#cache.delete(it);
+		this.#layoutCache.delete(node);
+		this.#textLayoutCache.delete(node);
+		forEachNodeAncestor(node, (ancestor) => {
+			this.#cache.delete(ancestor);
+			this.#layoutCache.delete(ancestor);
+			this.#textLayoutCache.delete(ancestor);
+		});
 	}
-	measureNode(node, ctx) {
-		if (this.#lastWidth !== this.graphics.canvas.clientWidth) {
-			this.#cache = /* @__PURE__ */ new WeakMap();
-			this.#lastWidth = this.graphics.canvas.clientWidth;
-		} else {
-			const result = this.#cache.get(node);
-			if (result != null) return result;
+	getLayoutResult(node, constraints) {
+		this.#syncCachesToViewportWidth();
+		const nodeCache = this.#layoutCache.get(node);
+		if (nodeCache == null) return;
+		const key = constraintKey(constraints);
+		const cached = nodeCache.get(key);
+		if (cached == null) return;
+		if (cached.revision !== getNodeRevision(node)) {
+			nodeCache.delete(key);
+			return;
+		}
+		return cached.layout;
+	}
+	setLayoutResult(node, result, constraints) {
+		this.#syncCachesToViewportWidth();
+		let nodeCache = this.#layoutCache.get(node);
+		if (nodeCache == null) {
+			nodeCache = /* @__PURE__ */ new Map();
+			this.#layoutCache.set(node, nodeCache);
+		} else if (nodeCache.size >= MAX_CONSTRAINT_VARIANTS) {
+			const firstKey = nodeCache.keys().next().value;
+			nodeCache.delete(firstKey);
+		}
+		nodeCache.set(constraintKey(constraints), {
+			revision: getNodeRevision(node),
+			layout: result
+		});
+	}
+	getTextLayout(node, key) {
+		this.#syncCachesToViewportWidth();
+		const nodeCache = this.#textLayoutCache.get(node);
+		if (nodeCache == null) return;
+		const cached = nodeCache.get(key);
+		if (cached == null) return;
+		if (cached.revision !== getNodeRevision(node)) {
+			nodeCache.delete(key);
+			return;
+		}
+		return cached.layout;
+	}
+	setTextLayout(node, key, layout) {
+		this.#syncCachesToViewportWidth();
+		let nodeCache = this.#textLayoutCache.get(node);
+		if (nodeCache == null) {
+			nodeCache = /* @__PURE__ */ new Map();
+			this.#textLayoutCache.set(node, nodeCache);
+		} else if (nodeCache.size >= MAX_CONSTRAINT_VARIANTS) {
+			const firstKey = nodeCache.keys().next().value;
+			nodeCache.delete(firstKey);
+		}
+		nodeCache.set(key, {
+			revision: getNodeRevision(node),
+			layout
+		});
+	}
+	measureNode(node, constraints) {
+		this.#syncCachesToViewportWidth();
+		{
+			const nodeCache = this.#cache.get(node);
+			if (nodeCache != null) {
+				const key = constraintKey(constraints);
+				const cached = nodeCache.get(key);
+				if (cached != null) {
+					if (cached.revision === getNodeRevision(node)) return cached.box;
+					nodeCache.delete(key);
+				}
+			}
+		}
+		const ctx = this.context;
+		if (constraints != null) ctx.constraints = constraints;
+		const result = node.measure(ctx);
+		const key = constraintKey(constraints);
+		let nodeCache = this.#cache.get(node);
+		if (nodeCache == null) {
+			nodeCache = /* @__PURE__ */ new Map();
+			this.#cache.set(node, nodeCache);
+		} else if (nodeCache.size >= MAX_CONSTRAINT_VARIANTS) {
+			const firstKey = nodeCache.keys().next().value;
+			nodeCache.delete(firstKey);
 		}
-		const result = node.measure(ctx ?? this.context);
-		this.#cache.set(node, result);
+		nodeCache.set(key, {
+			revision: getNodeRevision(node),
+			box: result
+		});
 		return result;
 	}
 };
@@ -545,33 +1113,26 @@ var DebugRenderer = class extends BaseRenderer {
 	draw(node) {
 		const { clientWidth: viewportWidth, clientHeight: viewportHeight } = this.graphics.canvas;
 		this.graphics.clearRect(0, 0, viewportWidth, viewportHeight);
-		return node.draw(this.context, 0, 0);
+		return this.drawRootNode(node);
 	}
 	hittest(node, test) {
-		return node.hittest(this.context, test);
+		return this.hittestRootNode(node, test);
 	}
 };
-function memoRenderItem(renderItem) {
-	const cache = /* @__PURE__ */ new WeakMap();
-	function fn(item) {
-		const key = item;
-		const cached = cache.get(key);
-		if (cached != null) return cached;
-		const result = renderItem(item);
-		cache.set(key, result);
-		return result;
-	}
-	return Object.assign(fn, { reset: (key) => cache.delete(key) });
-}
+//#endregion
+//#region src/renderer/list-state.ts
 var ListState = class {
 	offset = 0;
-	position = NaN;
+	position;
 	items = [];
+	constructor(items = []) {
+		this.items = [...items];
+	}
 	unshift(...items) {
 		this.unshiftAll(items);
 	}
 	unshiftAll(items) {
-		this.position += items.length;
+		if (this.position != null) this.position += items.length;
 		this.items = items.concat(this.items);
 	}
 	push(...items) {
@@ -580,20 +1141,59 @@ var ListState = class {
 	pushAll(items) {
 		this.items.push(...items);
 	}
-	reset() {
-		this.items = [];
+	setAnchor(position, offset = 0) {
+		this.position = Number.isFinite(position) ? Math.trunc(position) : void 0;
+		this.offset = Number.isFinite(offset) ? offset : 0;
+	}
+	reset(items = []) {
+		this.items = [...items];
 		this.offset = 0;
-		this.position = NaN;
+		this.position = void 0;
 	}
 	resetScroll() {
 		this.offset = 0;
-		this.position = NaN;
+		this.position = void 0;
 	}
 	applyScroll(delta) {
 		this.offset += delta;
 	}
 };
-function clamp(value, min, max) {
+//#endregion
+//#region src/renderer/memo.ts
+function isWeakMapKey(value) {
+	return typeof value === "object" && value !== null || typeof value === "function";
+}
+function memoRenderItem(renderItem) {
+	const cache = /* @__PURE__ */ new WeakMap();
+	function fn(item) {
+		if (!isWeakMapKey(item)) throw new TypeError("memoRenderItem() only supports object items. Use memoRenderItemBy() for primitive keys.");
+		const key = item;
+		const cached = cache.get(key);
+		if (cached != null) return cached;
+		const result = renderItem(item);
+		cache.set(key, result);
+		return result;
+	}
+	return Object.assign(fn, { reset: (key) => cache.delete(key) });
+}
+function memoRenderItemBy(keyOf, renderItem) {
+	const cache = /* @__PURE__ */ new Map();
+	function fn(item) {
+		const key = keyOf(item);
+		const cached = cache.get(key);
+		if (cached != null) return cached;
+		const result = renderItem(item);
+		cache.set(key, result);
+		return result;
+	}
+	return Object.assign(fn, {
+		reset: (item) => cache.delete(keyOf(item)),
+		resetKey: (key) => cache.delete(key)
+	});
+}
+//#endregion
+//#region src/renderer/virtualized/base.ts
+function clamp$3(value, min, max) {
 	return Math.min(Math.max(value, min), max);
 }
 function sameState(state, position, offset) {
@@ -629,13 +1229,23 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	set items(value) {
 		this.options.list.items = value;
 	}
+	_readListState() {
+		return {
+			position: this.position,
+			offset: this.offset
+		};
+	}
+	_commitListState(state) {
+		this.position = state.position;
+		this.offset = state.offset;
+	}
 	jumpTo(index, options = {}) {
 		if (this.items.length === 0) {
 			this.#cancelJumpAnimation();
 			return;
 		}
 		const targetIndex = this._clampItemIndex(index);
-		this._prepareAnchorState();
+		const currentState = this._normalizeListState(this._readListState());
 		const targetBlock = options.block ?? this._getDefaultJumpBlock();
 		const targetAnchor = this._getTargetAnchor(targetIndex, targetBlock);
 		if (!(options.animated ?? true)) {
@@ -644,14 +1254,14 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 			options.onComplete?.();
 			return;
 		}
-		const startAnchor = this._readAnchor();
+		const startAnchor = this._readAnchor(currentState);
 		if (!Number.isFinite(startAnchor)) {
 			this.#cancelJumpAnimation();
 			this._applyAnchor(targetAnchor);
 			options.onComplete?.();
 			return;
 		}
-		const duration = clamp(options.duration ?? VirtualizedRenderer.MIN_JUMP_DURATION + Math.abs(targetAnchor - startAnchor) * VirtualizedRenderer.JUMP_DURATION_PER_ITEM, 0, VirtualizedRenderer.MAX_JUMP_DURATION);
+		const duration = clamp$3(options.duration ?? VirtualizedRenderer.MIN_JUMP_DURATION + Math.abs(targetAnchor - startAnchor) * VirtualizedRenderer.JUMP_DURATION_PER_ITEM, 0, VirtualizedRenderer.MAX_JUMP_DURATION);
 		if (duration <= 0 || Math.abs(targetAnchor - startAnchor) <= Number.EPSILON) {
 			this.#cancelJumpAnimation();
 			this._applyAnchor(targetAnchor);
@@ -666,10 +1276,7 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 			needsMoreFrames: true,
 			onComplete: options.onComplete
 		};
-		this.#controlledState = {
-			position: this.position,
-			offset: this.offset
-		};
+		this.#controlledState = this._readListState();
 	}
 	_resetRenderFeedback(feedback) {
 		if (feedback == null) return;
@@ -681,8 +1288,8 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	_accumulateRenderFeedback(feedback, idx, top, height) {
 		if (!Number.isFinite(top) || !Number.isFinite(height) || height <= 0) return;
 		const viewportHeight = this.graphics.canvas.clientHeight;
-		const visibleTop = clamp(-top, 0, height);
-		const visibleBottom = clamp(viewportHeight - top, 0, height);
+		const visibleTop = clamp$3(-top, 0, height);
+		const visibleBottom = clamp$3(viewportHeight - top, 0, height);
 		if (visibleBottom <= visibleTop) return;
 		const itemMin = idx + visibleTop / height;
 		const itemMax = idx + visibleBottom / height;
@@ -694,14 +1301,26 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	_renderDrawList(list, shift, feedback) {
 		let result = false;
 		const viewportHeight = this.graphics.canvas.clientHeight;
-		for (const { idx, node, offset, height } of list) {
+		for (const { idx, value: node, offset, height } of list) {
 			const y = offset + shift;
 			if (feedback != null) this._accumulateRenderFeedback(feedback, idx, y, height);
 			if (y + height < 0 || y > viewportHeight) continue;
-			if (node.draw(this.context, 0, y)) result = true;
+			if (this.drawRootNode(node, 0, y)) result = true;
 		}
 		return result;
 	}
+	_renderVisibleWindow(window, feedback) {
+		this._resetRenderFeedback(feedback);
+		return this._renderDrawList(window.drawList, window.shift, feedback);
+	}
+	_hittestVisibleWindow(window, test) {
+		for (const { value: node, offset, height } of window.drawList) {
+			const y = offset + window.shift;
+			if (test.y < y || test.y >= y + height) continue;
+			return node.hittest(this.getRootContext(), shallowMerge(test, { y: test.y - y }));
+		}
+		return false;
+	}
 	_prepareRender() {
 		const animation = this.#jumpAnimation;
 		if (animation == null) return false;
@@ -713,7 +1332,7 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 			this.#cancelJumpAnimation();
 			return false;
 		}
-		const progress = clamp((getNow() - animation.startTime) / animation.duration, 0, 1);
+		const progress = clamp$3((getNow() - animation.startTime) / animation.duration, 0, 1);
 		const eased = progress >= 1 ? 1 : smoothstep(progress);
 		const anchor = animation.startAnchor + (animation.targetAnchor - animation.startAnchor) * eased;
 		this._applyAnchor(anchor);
@@ -724,10 +1343,7 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 		const animation = this.#jumpAnimation;
 		if (animation == null) return requestRedraw;
 		if (animation.needsMoreFrames) {
-			this.#controlledState = {
-				position: this.position,
-				offset: this.offset
-			};
+			this.#controlledState = this._readListState();
 			return true;
 		}
 		const onComplete = animation.onComplete;
@@ -736,12 +1352,12 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 		return requestRedraw || this.#jumpAnimation != null;
 	}
 	_clampItemIndex(index) {
-		return clamp(Number.isFinite(index) ? Math.trunc(index) : 0, 0, this.items.length - 1);
+		return clamp$3(Number.isFinite(index) ? Math.trunc(index) : 0, 0, this.items.length - 1);
 	}
 	_getItemHeight(index) {
 		const item = this.items[index];
 		const node = this.options.renderItem(item);
-		return this.measureNode(node).height;
+		return this.measureRootNode(node).height;
 	}
 	_getAnchorAtOffset(index, offset) {
 		if (this.items.length === 0) return 0;
@@ -769,251 +1385,309 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 		this.#controlledState = void 0;
 	}
 };
-var TimelineRenderer = class extends VirtualizedRenderer {
-	_getDefaultJumpBlock() {
-		return "start";
+//#endregion
+//#region src/renderer/virtualized/solver.ts
+function clamp$2(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function normalizeOffset(offset) {
+	return Number.isFinite(offset) ? offset : 0;
+}
+function normalizeTimelineState(itemCount, state) {
+	if (itemCount <= 0) return {
+		position: 0,
+		offset: 0
+	};
+	const position = state.position;
+	if (typeof position !== "number" || !Number.isFinite(position)) return {
+		position: 0,
+		offset: normalizeOffset(state.offset)
+	};
+	return {
+		position: clamp$2(Math.trunc(position), 0, itemCount - 1),
+		offset: normalizeOffset(state.offset)
+	};
+}
+function normalizeChatState(itemCount, state) {
+	if (itemCount <= 0) return {
+		position: 0,
+		offset: 0
+	};
+	const position = state.position;
+	if (typeof position !== "number" || !Number.isFinite(position)) return {
+		position: itemCount - 1,
+		offset: normalizeOffset(state.offset)
+	};
+	return {
+		position: clamp$2(Math.trunc(position), 0, itemCount - 1),
+		offset: normalizeOffset(state.offset)
+	};
+}
+function resolveTimelineVisibleWindow(items, state, viewportHeight, resolveItem) {
+	const normalizedState = normalizeTimelineState(items.length, state);
+	if (items.length === 0) return {
+		normalizedState,
+		window: {
+			drawList: [],
+			shift: 0
+		}
+	};
+	let { position, offset } = normalizedState;
+	let drawLength = 0;
+	if (offset > 0) if (position === 0) offset = 0;
+	else {
+		for (let i = position - 1; i >= 0; i -= 1) {
+			const { height } = resolveItem(items[i], i);
+			position = i;
+			offset -= height;
+			if (offset <= 0) break;
+		}
+		if (position === 0 && offset > 0) offset = 0;
+	}
+	let y = offset;
+	const drawList = [];
+	for (let i = position; i < items.length; i += 1) {
+		const { value, height } = resolveItem(items[i], i);
+		if (y + height > 0) {
+			drawList.push({
+				idx: i,
+				value,
+				offset: y,
+				height
+			});
+			drawLength += height;
+		} else {
+			offset += height;
+			position = i + 1;
+		}
+		y += height;
+		if (y >= viewportHeight) break;
+	}
+	let shift = 0;
+	if (y < viewportHeight) if (position === 0 && drawLength < viewportHeight) {
+		shift = -offset;
+		offset = 0;
+	} else {
+		shift = viewportHeight - y;
+		y = offset += shift;
+		let lastIdx = -1;
+		for (let i = position - 1; i >= 0; i -= 1) {
+			const { value, height } = resolveItem(items[i], i);
+			drawLength += height;
+			y -= height;
+			drawList.push({
+				idx: i,
+				value,
+				offset: y - shift,
+				height
+			});
+			lastIdx = i;
+			if (y < 0) break;
+		}
+		if (lastIdx === 0 && drawLength < viewportHeight) {
+			shift = drawList.at(-1)?.offset == null ? 0 : -drawList.at(-1).offset;
+			position = 0;
+			offset = 0;
+		}
 	}
-	_prepareAnchorState() {
-		if (this.items.length === 0) return;
-		if (!Number.isFinite(this.position)) {
-			this.position = 0;
-			this.offset = 0;
-			return;
+	return {
+		normalizedState: {
+			position,
+			offset
+		},
+		window: {
+			drawList,
+			shift
+		}
+	};
+}
+function resolveChatVisibleWindow(items, state, viewportHeight, resolveItem) {
+	const normalizedState = normalizeChatState(items.length, state);
+	if (items.length === 0) return {
+		normalizedState,
+		window: {
+			drawList: [],
+			shift: 0
+		}
+	};
+	let { position, offset } = normalizedState;
+	let drawLength = 0;
+	if (offset < 0) if (position === items.length - 1) offset = 0;
+	else for (let i = position + 1; i < items.length; i += 1) {
+		const { height } = resolveItem(items[i], i);
+		position = i;
+		offset += height;
+		if (offset > 0) break;
+	}
+	let y = viewportHeight + offset;
+	const drawList = [];
+	for (let i = position; i >= 0; i -= 1) {
+		const { value, height } = resolveItem(items[i], i);
+		y -= height;
+		if (y <= viewportHeight) {
+			drawList.push({
+				idx: i,
+				value,
+				offset: y,
+				height
+			});
+			drawLength += height;
+		} else {
+			offset -= height;
+			position = i - 1;
+		}
+		if (y < 0) break;
+	}
+	let shift = 0;
+	if (y > 0) {
+		shift = -y;
+		if (drawLength < viewportHeight) {
+			y = drawLength;
+			for (let i = position + 1; i < items.length; i += 1) {
+				const { value, height } = resolveItem(items[i], i);
+				drawList.push({
+					idx: i,
+					value,
+					offset: y - shift,
+					height
+				});
+				y = drawLength += height;
+				position = i;
+				if (y >= viewportHeight) break;
+			}
+			offset = drawLength < viewportHeight ? 0 : drawLength - viewportHeight;
+		} else offset = drawLength - viewportHeight;
+	}
+	return {
+		normalizedState: {
+			position,
+			offset
+		},
+		window: {
+			drawList,
+			shift
 		}
-		this.position = this._clampItemIndex(this.position);
-		if (!Number.isFinite(this.offset)) this.offset = 0;
+	};
+}
+//#endregion
+//#region src/renderer/virtualized/chat.ts
+function clamp$1(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+var ChatRenderer = class extends VirtualizedRenderer {
+	#resolveVisibleWindow() {
+		return resolveChatVisibleWindow(this.items, this._readListState(), this.graphics.canvas.clientHeight, (item) => {
+			const node = this.options.renderItem(item);
+			return {
+				value: node,
+				height: this.measureRootNode(node).height
+			};
+		});
+	}
+	_getDefaultJumpBlock() {
+		return "end";
+	}
+	_normalizeListState(state) {
+		return normalizeChatState(this.items.length, state);
 	}
-	_readAnchor() {
-		this._prepareAnchorState();
+	_readAnchor(state) {
 		if (this.items.length === 0) return 0;
-		const height = this._getItemHeight(this.position);
-		return height > 0 ? this.position - this.offset / height : this.position;
+		const height = this._getItemHeight(state.position);
+		return height > 0 ? state.position + 1 - state.offset / height : state.position + 1;
 	}
 	_applyAnchor(anchor) {
 		if (this.items.length === 0) return;
-		const clampedAnchor = clamp(anchor, 0, this.items.length);
-		const position = clamp(Math.floor(clampedAnchor), 0, this.items.length - 1);
+		const clampedAnchor = clamp$1(anchor, 0, this.items.length);
+		const position = clamp$1(Math.ceil(clampedAnchor) - 1, 0, this.items.length - 1);
 		const height = this._getItemHeight(position);
-		this.position = position;
-		const offset = height > 0 ? -(clampedAnchor - position) * height : 0;
-		this.offset = Object.is(offset, -0) ? 0 : offset;
+		const offset = height > 0 ? (position + 1 - clampedAnchor) * height : 0;
+		this._commitListState({
+			position,
+			offset: Object.is(offset, -0) ? 0 : offset
+		});
 	}
 	_getTargetAnchor(index, block) {
 		const height = this._getItemHeight(index);
 		const viewportHeight = this.graphics.canvas.clientHeight;
 		switch (block) {
-			case "start": return this._getAnchorAtOffset(index, 0);
-			case "center": return this._getAnchorAtOffset(index, height / 2 - viewportHeight / 2);
-			case "end": return this._getAnchorAtOffset(index, height - viewportHeight);
+			case "start": return this._getAnchorAtOffset(index, viewportHeight);
+			case "center": return this._getAnchorAtOffset(index, height / 2 + viewportHeight / 2);
+			case "end": return this._getAnchorAtOffset(index, height);
 		}
 	}
 	render(feedback) {
 		const keepAnimating = this._prepareRender();
 		const { clientWidth: viewportWidth, clientHeight: viewportHeight } = this.graphics.canvas;
 		this.graphics.clearRect(0, 0, viewportWidth, viewportHeight);
-		this._resetRenderFeedback(feedback);
-		let drawLength = 0;
-		if (Number.isNaN(this.position)) this.position = 0;
-		if (this.offset > 0) if (this.position === 0) this.offset = 0;
-		else {
-			for (let i = this.position - 1; i >= 0; i -= 1) {
-				const item = this.items[i];
-				const node = this.options.renderItem(item);
-				const { height } = this.measureNode(node);
-				this.position = i;
-				this.offset -= height;
-				if (this.offset <= 0) break;
-			}
-			if (this.position === 0 && this.offset > 0) this.offset = 0;
-		}
-		let y = this.offset;
-		const drawList = [];
-		for (let i = this.position; i < this.items.length; i += 1) {
-			const item = this.items[i];
-			const node = this.options.renderItem(item);
-			const { height } = this.measureNode(node);
-			if (y + height > 0) {
-				drawList.push({
-					idx: i,
-					node,
-					offset: y,
-					height
-				});
-				drawLength += height;
-			} else {
-				this.offset += height;
-				this.position = i + 1;
-			}
-			y += height;
-			if (y >= viewportHeight) break;
-		}
-		let shift = 0;
-		if (y < viewportHeight) if (this.position === 0 && drawLength < viewportHeight) {
-			shift = -this.offset;
-			this.offset = 0;
-		} else {
-			shift = viewportHeight - y;
-			y = this.offset += shift;
-			let lastIdx = -1;
-			for (let i = this.position - 1; i >= 0; i -= 1) {
-				const item = this.items[lastIdx = i];
-				const node = this.options.renderItem(item);
-				const { height } = this.measureNode(node);
-				drawLength += height;
-				y -= height;
-				drawList.push({
-					idx: i,
-					node,
-					offset: y - shift,
-					height
-				});
-				if (y < 0) break;
-			}
-			if (lastIdx === 0 && drawLength < viewportHeight) {
-				shift = -drawList[drawList.length - 1].offset;
-				this.position = 0;
-				this.offset = 0;
-			}
-		}
-		const requestRedraw = this._renderDrawList(drawList, shift, feedback);
+		const solution = this.#resolveVisibleWindow();
+		const requestRedraw = this._renderVisibleWindow(solution.window, feedback);
+		this._commitListState(solution.normalizedState);
 		return this._finishRender(keepAnimating || requestRedraw);
 	}
 	hittest(test) {
-		const viewportHeight = this.graphics.canvas.clientHeight;
-		let y = this.offset;
-		for (let i = this.position; i < this.items.length; i += 1) {
-			const item = this.items[i];
-			const node = this.options.renderItem(item);
-			const { height } = this.measureNode(node);
-			if (test.y < y + height) return node.hittest(this.context, shallowMerge(test, { y: test.y - y }));
-			y += height;
-			if (y >= viewportHeight) break;
-		}
-		return false;
+		return this._hittestVisibleWindow(this.#resolveVisibleWindow().window, test);
 	}
 };
-var ChatRenderer = class extends VirtualizedRenderer {
+//#endregion
+//#region src/renderer/virtualized/timeline.ts
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+var TimelineRenderer = class extends VirtualizedRenderer {
+	#resolveVisibleWindow() {
+		return resolveTimelineVisibleWindow(this.items, this._readListState(), this.graphics.canvas.clientHeight, (item) => {
+			const node = this.options.renderItem(item);
+			return {
+				value: node,
+				height: this.measureRootNode(node).height
+			};
+		});
+	}
 	_getDefaultJumpBlock() {
-		return "end";
+		return "start";
 	}
-	_prepareAnchorState() {
-		if (this.items.length === 0) return;
-		if (!Number.isFinite(this.position)) {
-			this.position = this.items.length - 1;
-			this.offset = 0;
-			return;
-		}
-		this.position = this._clampItemIndex(this.position);
-		if (!Number.isFinite(this.offset)) this.offset = 0;
+	_normalizeListState(state) {
+		return normalizeTimelineState(this.items.length, state);
 	}
-	_readAnchor() {
-		this._prepareAnchorState();
+	_readAnchor(state) {
 		if (this.items.length === 0) return 0;
-		const height = this._getItemHeight(this.position);
-		return height > 0 ? this.position + 1 - this.offset / height : this.position + 1;
+		const height = this._getItemHeight(state.position);
+		return height > 0 ? state.position - state.offset / height : state.position;
 	}
 	_applyAnchor(anchor) {
 		if (this.items.length === 0) return;
 		const clampedAnchor = clamp(anchor, 0, this.items.length);
-		const position = clamp(Math.ceil(clampedAnchor) - 1, 0, this.items.length - 1);
+		const position = clamp(Math.floor(clampedAnchor), 0, this.items.length - 1);
 		const height = this._getItemHeight(position);
-		this.position = position;
-		const offset = height > 0 ? (position + 1 - clampedAnchor) * height : 0;
-		this.offset = Object.is(offset, -0) ? 0 : offset;
+		const offset = height > 0 ? -(clampedAnchor - position) * height : 0;
+		this._commitListState({
+			position,
+			offset: Object.is(offset, -0) ? 0 : offset
+		});
 	}
 	_getTargetAnchor(index, block) {
 		const height = this._getItemHeight(index);
 		const viewportHeight = this.graphics.canvas.clientHeight;
 		switch (block) {
-			case "start": return this._getAnchorAtOffset(index, viewportHeight);
-			case "center": return this._getAnchorAtOffset(index, height / 2 + viewportHeight / 2);
-			case "end": return this._getAnchorAtOffset(index, height);
+			case "start": return this._getAnchorAtOffset(index, 0);
+			case "center": return this._getAnchorAtOffset(index, height / 2 - viewportHeight / 2);
+			case "end": return this._getAnchorAtOffset(index, height - viewportHeight);
 		}
 	}
 	render(feedback) {
 		const keepAnimating = this._prepareRender();
 		const { clientWidth: viewportWidth, clientHeight: viewportHeight } = this.graphics.canvas;
 		this.graphics.clearRect(0, 0, viewportWidth, viewportHeight);
-		this._resetRenderFeedback(feedback);
-		let drawLength = 0;
-		if (Number.isNaN(this.position)) this.position = this.items.length - 1;
-		if (this.offset < 0) if (this.position === this.items.length - 1) this.offset = 0;
-		else for (let i = this.position + 1; i < this.items.length; i += 1) {
-			const item = this.items[i];
-			const node = this.options.renderItem(item);
-			const { height } = this.measureNode(node);
-			this.position = i;
-			this.offset += height;
-			if (this.offset > 0) break;
-		}
-		let y = viewportHeight + this.offset;
-		const drawList = [];
-		for (let i = this.position; i >= 0; i -= 1) {
-			const item = this.items[i];
-			const node = this.options.renderItem(item);
-			const { height } = this.measureNode(node);
-			y -= height;
-			if (y <= viewportHeight) {
-				drawList.push({
-					idx: i,
-					node,
-					offset: y,
-					height
-				});
-				drawLength += height;
-			} else {
-				this.offset -= height;
-				this.position = i - 1;
-			}
-			if (y < 0) break;
-		}
-		let shift = 0;
-		if (y > 0) {
-			shift = -y;
-			if (drawLength < viewportHeight) {
-				y = drawLength;
-				for (let i = this.position + 1; i < this.items.length; i += 1) {
-					const item = this.items[i];
-					const node = this.options.renderItem(item);
-					const { height } = this.measureNode(node);
-					drawList.push({
-						idx: i,
-						node,
-						offset: y - shift,
-						height
-					});
-					y = drawLength += height;
-					this.position = i;
-					if (y >= viewportHeight) break;
-				}
-				if (drawLength < viewportHeight) this.offset = 0;
-				else this.offset = drawLength - viewportHeight;
-			} else this.offset = drawLength - viewportHeight;
-		}
-		const requestRedraw = this._renderDrawList(drawList, shift, feedback);
+		const solution = this.#resolveVisibleWindow();
+		const requestRedraw = this._renderVisibleWindow(solution.window, feedback);
+		this._commitListState(solution.normalizedState);
 		return this._finishRender(keepAnimating || requestRedraw);
 	}
 	hittest(test) {
-		const viewportHeight = this.graphics.canvas.clientHeight;
-		let drawLength = 0;
-		const heights = [];
-		for (let i = this.position; i >= 0; i -= 1) {
-			const item = this.items[i];
-			const node = this.options.renderItem(item);
-			const { height } = this.measureNode(node);
-			drawLength += height;
-			heights.push([node, height]);
-		}
-		let y = drawLength < viewportHeight ? drawLength : viewportHeight + this.offset;
-		if (test.y > y) return false;
-		for (const [node, height] of heights) {
-			y -= height;
-			if (test.y > y) return node.hittest(this.context, shallowMerge(test, { y: test.y - y }));
-		}
-		return false;
+		return this._hittestVisibleWindow(this.#resolveVisibleWindow().window, test);
 	}
 };
 //#endregion
-export { AlignBox, BaseRenderer, ChatRenderer, DebugRenderer, Fixed, Group, HStack, ListState, MultilineText, PaddingBox, Text, TimelineRenderer, VStack, VirtualizedRenderer, Wrapper, getNodeParent, memoRenderItem, registerNodeParent, unregisterNodeParent };
+export { BaseRenderer, ChatRenderer, DebugRenderer, Fixed, Flex, FlexItem, Group, ListState, MultilineText, PaddingBox, Place, Text, TimelineRenderer, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
 
 //# sourceMappingURL=index.mjs.map