chat-layout 1.2.0-2 → 1.2.0-3

package/README.md

@@ -28,10 +28,11 @@ const bubble = new RoundedBox(
 );
 
 const body = new ShrinkWrap(
-  new Flex(
-    [senderLine, bubble],
-    { direction: "column", gap: 4, alignItems: item.sender === "A" ? "end" : "start" },
-  ),
+  new Flex([senderLine, bubble], {
+    direction: "column",
+    gap: 4,
+    alignItems: item.sender === "A" ? "end" : "start",
+  }),
 );
 
 const row = new Flex(
@@ -74,17 +75,20 @@ See [example/chat.ts](./example/chat.ts) for a full chat example.
 Single-line `Text` can ellipsize at the start, end, or middle when a finite width constraint is present:
 
 ```ts
-const title = new Text([
-  { text: "Extremely long " },
-  { text: "thread title", font: "700 16px system-ui", color: "#0f766e" },
-  { text: " that should not blow out the row" },
-], {
-  lineHeight: 20,
-  font: "16px system-ui",
-  color: "#111",
-  overflow: "ellipsis",
-  ellipsisPosition: "middle",
-});
+const title = new Text(
+  [
+    { text: "Extremely long " },
+    { text: "thread title", font: "700 16px system-ui", color: "#0f766e" },
+    { text: " that should not blow out the row" },
+  ],
+  {
+    lineHeight: 20,
+    font: "16px system-ui",
+    color: "#111",
+    overflow: "ellipsis",
+    ellipsisPosition: "middle",
+  },
+);
 ```
 
 Multi-line `MultilineText` can cap the visible line count and convert the last visible line to an end ellipsis:
@@ -119,9 +123,9 @@ const justified = new MultilineText(paragraph, {
   font: "16px system-ui",
   color: "#111",
   align: "start",
-  justify: true,               // or "inter-word" | "inter-character"
-  justifyLastLine: false,       // default: last line uses normal alignment
-  justifyGapThreshold: 2.0,    // max gap ratio before fallback
+  justify: true, // or "inter-word" | "inter-character"
+  justifyLastLine: false, // default: last line uses normal alignment
+  justifyGapThreshold: 2.0, // max gap ratio before fallback
 });
 ```
 

package/example/chat.ts

@@ -195,7 +195,11 @@ const richTextMessage: InlineSpan<C>[] = [
   { text: "、" },
   { text: "粗体", font: "700 16px system-ui", color: "#b91c1c" },
   { text: "，以及 " },
-  { text: "inline code", font: "15px ui-monospace, SFMono-Regular, Consolas, monospace", color: "#7c3aed" },
+  {
+    text: "inline code",
+    font: "15px ui-monospace, SFMono-Regular, Consolas, monospace",
+    color: "#7c3aed",
+  },
   { text: " 这样的片段混排。" },
 ];
 
@@ -205,7 +209,11 @@ const richReplyPreview: InlineSpan<C>[] = [
   { text: "，比如 " },
   { text: "关键词高亮", color: "#2563eb" },
   { text: " 和 " },
-  { text: "code()", font: "12px ui-monospace, SFMono-Regular, Consolas, monospace", color: "#7c3aed" },
+  {
+    text: "code()",
+    font: "12px ui-monospace, SFMono-Regular, Consolas, monospace",
+    color: "#7c3aed",
+  },
   {
     text: "，超长内容仍然会按原来的两行省略规则收起，不需要额外处理。",
   },
@@ -234,13 +242,15 @@ class ItemDetector extends Wrapper<C> {
   hittest(_ctx: Context<C>, test: HitTest): boolean {
     currentHover = this.item;
     if (test.type === "click") {
-      const index = list.items.indexOf(this.item);
-      if (index < 0) {
+      if (!list.items.includes(this.item)) {
         return true;
       }
-      const nextItem = this.item.kind === "revoked" ? this.item.original : revokeMessage(this.item);
+      const nextItem =
+        this.item.kind === "revoked"
+          ? this.item.original
+          : revokeMessage(this.item);
       currentHover = nextItem;
-      list.replace(index, nextItem, {
+      list.update(this.item, nextItem, {
         duration: REPLACE_ANIMATION_DURATION,
       });
     }
@@ -266,8 +276,10 @@ const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
               left: 12,
               right: 12,
               radii: 999,
-              fill: () => (currentHover?.id === item.id ? "#d9d9d9" : "#ececec"),
-              stroke: () => (currentHover?.id === item.id ? "#bcbcbc" : "#d3d3d3"),
+              fill: () =>
+                currentHover?.id === item.id ? "#d9d9d9" : "#ececec",
+              stroke: () =>
+                currentHover?.id === item.id ? "#bcbcbc" : "#d3d3d3",
             },
           ),
           {
@@ -632,12 +644,13 @@ button("jump latest (no anim)", () => {
 });
 
 button("revoke first", () => {
-  const item = list.items.find((entry): entry is MessageItem => entry.kind === "message");
+  const item = list.items.find(
+    (entry): entry is MessageItem => entry.kind === "message",
+  );
   if (item == null) {
     return;
   }
-  const index = list.items.indexOf(item);
-  list.replace(index, revokeMessage(item), {
+  list.update(item, revokeMessage(item), {
     duration: REPLACE_ANIMATION_DURATION,
   });
 });

package/example/test.ts

@@ -47,8 +47,10 @@ class RoundedBox extends PaddingBox<C> {
     // Reuse the current layout constraints so the background matches wrapped text.
     const { width, height } = ctx.measureNode(this, ctx.constraints);
     ctx.with((g) => {
-      const fill = this.fill == null ? undefined : ctx.resolveDynValue(this.fill);
-      const stroke = this.stroke == null ? undefined : ctx.resolveDynValue(this.stroke);
+      const fill =
+        this.fill == null ? undefined : ctx.resolveDynValue(this.fill);
+      const stroke =
+        this.stroke == null ? undefined : ctx.resolveDynValue(this.stroke);
       g.beginPath();
       g.roundRect(x, y, width, height, this.radii);
       if (fill != null) {

package/index.d.mts

@@ -509,7 +509,7 @@ declare class DebugRenderer<C extends CanvasRenderingContext2D> extends BaseRend
 /**
  * Mutable list state shared with virtualized renderers.
  */
-interface ReplaceListItemAnimationOptions {
+interface UpdateListItemAnimationOptions {
   /** Animation duration in milliseconds. */
   duration?: number;
 }
@@ -536,9 +536,9 @@ declare class ListState<T extends {}> {
   /** Appends an array of items. */
   pushAll(items: T[]): void;
   /**
-   * Replaces an existing item by index.
+   * Updates an existing item by object identity.
    */
-  replace(index: number, item: T, animation?: ReplaceListItemAnimationOptions): void;
+  update(targetItem: T, nextItem: T, animation?: UpdateListItemAnimationOptions): void;
   /**
    * Sets the current anchor item and pixel offset.
    */
@@ -658,7 +658,7 @@ declare abstract class VirtualizedRenderer<C extends CanvasRenderingContext2D, T
   protected _finishRender(requestRedraw: boolean): boolean;
   protected _clampItemIndex(index: number): number;
   protected _getItemHeight(index: number): number;
-  protected _resolveItem(item: T, index: number, now: number): {
+  protected _resolveItem(item: T, _index: number, now: number): {
     value: VirtualizedResolvedItem<C>;
     height: number;
   };
@@ -703,5 +703,5 @@ declare class TimelineRenderer<C extends CanvasRenderingContext2D, T extends {}>
   hittest(test: HitTest): boolean;
 }
 //#endregion
-export { Axis, BaseRenderer, Box, ChatRenderer, ChildLayoutResult, Context, CrossAxisAlignment, DebugRenderer, DynValue, Fixed, Flex, FlexContainerOptions, FlexItem, FlexItemOptions, FlexLayoutResult, Group, HitTest, InlineSpan, JumpToOptions, LayoutConstraints, LayoutRect, ListState, MainAxisAlignment, MainAxisSize, MultilineText, MultilineTextOptions, Node, PaddingBox, PhysicalTextAlign, Place, RenderFeedback, RendererOptions, ReplaceListItemAnimationOptions, ShrinkWrap, Text, TextAlign, TextEllipsisPosition, TextJustifyMode, TextJustifyOptions, TextOptions, TextOverflowMode, TextOverflowWrapMode, TextStyleOptions, TextWhiteSpaceMode, TextWordBreakMode, TimelineRenderer, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
+export { Axis, BaseRenderer, Box, ChatRenderer, ChildLayoutResult, Context, CrossAxisAlignment, DebugRenderer, DynValue, Fixed, Flex, FlexContainerOptions, FlexItem, FlexItemOptions, FlexLayoutResult, Group, HitTest, InlineSpan, JumpToOptions, LayoutConstraints, LayoutRect, ListState, MainAxisAlignment, MainAxisSize, MultilineText, MultilineTextOptions, Node, PaddingBox, PhysicalTextAlign, Place, RenderFeedback, RendererOptions, ShrinkWrap, Text, TextAlign, TextEllipsisPosition, TextJustifyMode, TextJustifyOptions, TextOptions, TextOverflowMode, TextOverflowWrapMode, TextStyleOptions, TextWhiteSpaceMode, TextWordBreakMode, TimelineRenderer, UpdateListItemAnimationOptions, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
 //# sourceMappingURL=index.d.mts.map

package/index.mjs

@@ -3625,6 +3625,24 @@ function subscribeListState(list, owner, listener) {
 		token
 	});
 }
+function isObjectIdentityCandidate(value) {
+	return typeof value === "object" && value !== null || typeof value === "function";
+}
+function assertUniqueItemReferences(items, existingItems) {
+	const seen = /* @__PURE__ */ new Set();
+	if (existingItems != null) {
+		for (const item of existingItems) if (isObjectIdentityCandidate(item)) seen.add(item);
+	}
+	for (const item of items) {
+		if (!isObjectIdentityCandidate(item)) continue;
+		if (seen.has(item)) throw new Error("ListState items must use unique object references.");
+		seen.add(item);
+	}
+}
+function normalizeUpdateAnimation(animation) {
+	if (animation == null) return;
+	return Number.isFinite(animation.duration) ? { duration: animation.duration } : {};
+}
 var ListState = class {
 	#items;
 	/** Pixel offset from the anchored item edge. */
@@ -3637,14 +3655,18 @@ var ListState = class {
 	}
 	/** Replaces the full item collection while preserving scroll state. */
 	set items(value) {
-		this.#items = [...value];
+		const nextItems = [...value];
+		assertUniqueItemReferences(nextItems);
+		this.#items = nextItems;
 		emitListStateChange(this, { type: "set" });
 	}
 	/**
 	* @param items Initial list items.
 	*/
 	constructor(items = []) {
-		this.#items = [...items];
+		const nextItems = [...items];
+		assertUniqueItemReferences(nextItems);
+		this.#items = nextItems;
 	}
 	/** Prepends one or more items. */
 	unshift(...items) {
@@ -3653,6 +3675,7 @@ var ListState = class {
 	/** Prepends an array of items. */
 	unshiftAll(items) {
 		if (items.length === 0) return;
+		assertUniqueItemReferences(items, this.#items);
 		if (this.position != null) this.position += items.length;
 		this.#items = items.concat(this.#items);
 		emitListStateChange(this, {
@@ -3667,6 +3690,7 @@ var ListState = class {
 	/** Appends an array of items. */
 	pushAll(items) {
 		if (items.length === 0) return;
+		assertUniqueItemReferences(items, this.#items);
 		this.#items.push(...items);
 		emitListStateChange(this, {
 			type: "push",
@@ -3674,19 +3698,21 @@ var ListState = class {
 		});
 	}
 	/**
-	* Replaces an existing item by index.
+	* Updates an existing item by object identity.
 	*/
-	replace(index, item, animation) {
-		const normalizedIndex = Number.isFinite(index) ? Math.trunc(index) : NaN;
-		if (!Number.isInteger(normalizedIndex) || normalizedIndex < 0 || normalizedIndex >= this.#items.length) throw new RangeError(`replace() index ${index} is out of range for list length ${this.#items.length}.`);
-		const prevItem = this.#items[normalizedIndex];
-		this.#items[normalizedIndex] = item;
+	update(targetItem, nextItem, animation) {
+		if (!isObjectIdentityCandidate(targetItem) || !isObjectIdentityCandidate(nextItem)) throw new TypeError("update() only supports object items.");
+		if (targetItem === nextItem) throw new Error("update() requires nextItem to be a new object reference.");
+		const index = this.#items.indexOf(targetItem);
+		if (index < 0) throw new Error("update() targetItem is not present in the list.");
+		if (this.#items.includes(nextItem)) throw new Error("update() nextItem is already present in the list.");
+		const prevItem = this.#items[index];
+		this.#items[index] = nextItem;
 		emitListStateChange(this, {
-			type: "replace",
-			index: normalizedIndex,
+			type: "update",
 			prevItem,
-			nextItem: item,
-			animation: animation != null && Number.isFinite(animation.duration) ? { duration: animation.duration } : animation == null ? void 0 : {}
+			nextItem,
+			animation: normalizeUpdateAnimation(animation)
 		});
 	}
 	/**
@@ -3700,7 +3726,9 @@ var ListState = class {
 	* Replaces all items and clears scroll state.
 	*/
 	reset(items = []) {
-		this.#items = [...items];
+		const nextItems = [...items];
+		assertUniqueItemReferences(nextItems);
+		this.#items = nextItems;
 		this.offset = 0;
 		this.position = void 0;
 		emitListStateChange(this, { type: "reset" });
@@ -3808,7 +3836,8 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	static JUMP_DURATION_PER_ITEM = 28;
 	#controlledState;
 	#jumpAnimation;
-	#replacementAnimations = /* @__PURE__ */ new Map();
+	#replacementAnimations = /* @__PURE__ */ new WeakMap();
+	#activeReplacementItems = /* @__PURE__ */ new Set();
 	#nextReplacementLayerKey = 0;
 	constructor(graphics, options) {
 		super(graphics, options);
@@ -3971,14 +4000,14 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	}
 	_getItemHeight(index) {
 		const now = getNow();
-		const replacement = this.#readReplacementAnimation(index, now);
-		if (replacement != null) return this.#sampleReplacementHeight(replacement, now);
 		const item = this.items[index];
+		const replacement = this.#readReplacementAnimation(item, now);
+		if (replacement != null) return this.#sampleReplacementHeight(replacement, now);
 		const node = this.options.renderItem(item);
 		return this.measureRootNode(node).height;
 	}
-	_resolveItem(item, index, now) {
-		const replacement = this.#readReplacementAnimation(index, now);
+	_resolveItem(item, _index, now) {
+		const replacement = this.#readReplacementAnimation(item, now);
 		if (replacement == null) {
 			const node = this.options.renderItem(item);
 			return {
@@ -4050,24 +4079,26 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	#isLayerComplete(layer, now) {
 		return getProgress(layer.startTime, layer.duration, now) >= 1 && Math.abs(layer.toAlpha - this.#sampleLayerAlpha(layer, now)) <= ALPHA_EPSILON;
 	}
-	#readReplacementAnimation(index, now) {
-		const animation = this.#replacementAnimations.get(index);
+	#readReplacementAnimation(item, now) {
+		const animation = this.#replacementAnimations.get(item);
 		if (animation == null) return;
 		const currentLayer = animation.layers.find((layer) => layer.key === animation.currentLayerKey);
 		if (currentLayer == null) {
-			this.#replacementAnimations.delete(index);
+			this.#replacementAnimations.delete(item);
+			this.#activeReplacementItems.delete(item);
 			return;
 		}
 		animation.layers = animation.layers.filter((layer) => layer.key === animation.currentLayerKey || !this.#isLayerComplete(layer, now));
 		if (getProgress(animation.startTime, animation.duration, now) >= 1 && this.#isLayerComplete(currentLayer, now) && animation.layers.length === 1) {
-			this.#replacementAnimations.delete(index);
+			this.#replacementAnimations.delete(item);
+			this.#activeReplacementItems.delete(item);
 			return;
 		}
 		return animation;
 	}
 	#prepareReplacementAnimations(now) {
 		let keepAnimating = false;
-		for (const index of [...this.#replacementAnimations.keys()]) if (this.#readReplacementAnimation(index, now) != null) keepAnimating = true;
+		for (const item of [...this.#activeReplacementItems]) if (this.#readReplacementAnimation(item, now) != null) keepAnimating = true;
 		return keepAnimating;
 	}
 	#drawReplacementLayers(layers, slotHeight, y) {
@@ -4093,38 +4124,34 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 	}
 	#handleListStateChange(change) {
 		switch (change.type) {
-			case "replace":
-				this.#handleReplace(change.index, change.prevItem, change.nextItem, change.animation?.duration);
+			case "update":
+				this.#handleUpdate(change.prevItem, change.nextItem, change.animation?.duration);
 				break;
-			case "unshift": {
-				if (change.count <= 0 || this.#replacementAnimations.size === 0) return;
-				const shifted = /* @__PURE__ */ new Map();
-				for (const [index, animation] of this.#replacementAnimations) shifted.set(index + change.count, animation);
-				this.#replacementAnimations = shifted;
-				break;
-			}
+			case "unshift":
 			case "push": break;
 			case "reset":
 			case "set":
-				this.#replacementAnimations.clear();
+				this.#replacementAnimations = /* @__PURE__ */ new WeakMap();
+				this.#activeReplacementItems.clear();
 				break;
 		}
 	}
-	#handleReplace(index, prevItem, nextItem, duration) {
-		const normalizedDuration = Number.isFinite(duration) ? Math.max(0, duration) : 0;
+	#handleUpdate(prevItem, nextItem, duration) {
+		const normalizedDuration = Math.max(0, typeof duration === "number" && Number.isFinite(duration) ? duration : 0);
 		if (normalizedDuration <= 0) {
-			this.#replacementAnimations.delete(index);
+			this.#replacementAnimations.delete(prevItem);
+			this.#activeReplacementItems.delete(prevItem);
 			return;
 		}
 		const now = getNow();
 		const nextNode = this.options.renderItem(nextItem);
 		const nextHeight = this.measureRootNode(nextNode).height;
-		const animation = this.#readReplacementAnimation(index, now);
+		const animation = this.#readReplacementAnimation(prevItem, now);
 		if (animation == null) {
 			const prevNode = this.options.renderItem(prevItem);
 			const outgoing = this.#createReplacementLayer(prevNode, 1, 0, now, normalizedDuration);
 			const incoming = this.#createReplacementLayer(nextNode, 0, 1, now, normalizedDuration);
-			this.#replacementAnimations.set(index, {
+			this.#replacementAnimations.set(nextItem, {
 				currentLayerKey: incoming.key,
 				layers: [outgoing, incoming],
 				fromHeight: this.measureRootNode(prevNode).height,
@@ -4132,6 +4159,8 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 				startTime: now,
 				duration: normalizedDuration
 			});
+			this.#activeReplacementItems.delete(prevItem);
+			this.#activeReplacementItems.add(nextItem);
 			return;
 		}
 		const currentLayer = animation.layers.find((layer) => layer.key === animation.currentLayerKey);
@@ -4141,7 +4170,8 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 		if (currentAlpha > ALPHA_EPSILON) layers.push(this.#createReplacementLayer(currentNode, currentAlpha, 0, now, normalizedDuration));
 		const incoming = this.#createReplacementLayer(nextNode, 0, 1, now, normalizedDuration);
 		layers.push(incoming);
-		this.#replacementAnimations.set(index, {
+		this.#replacementAnimations.delete(prevItem);
+		this.#replacementAnimations.set(nextItem, {
 			currentLayerKey: incoming.key,
 			layers,
 			fromHeight: this.#sampleReplacementHeight(animation, now),
@@ -4149,6 +4179,8 @@ var VirtualizedRenderer = class VirtualizedRenderer extends BaseRenderer {
 			startTime: now,
 			duration: normalizedDuration
 		});
+		this.#activeReplacementItems.delete(prevItem);
+		this.#activeReplacementItems.add(nextItem);
 	}
 };
 //#endregion