chat-layout 0.1.5 → 1.0.0-2

package/README.md

@@ -1,27 +1,233 @@
 # chat-layout
 
-To install dependencies:
+Canvas-based chat and timeline layout primitives with a v2 flex-style layout model.
+
+The current recommended APIs are:
+
+- `Flex` for row/column layout
+- `FlexItem` for explicit `grow` / `shrink`
+- `Place` for single-child horizontal placement
+- `MultilineText` `align` / `physicalAlign` for text content alignment
+- `ChatRenderer` plus `ListState` for virtualized chat rendering
+- `memoRenderItem` for object items, or `memoRenderItemBy` when your stable key is primitive / explicit
+
+**Layout Model**
+`Flex` and `Place` split layout concerns more clearly than the older API:
+
+- Use `new Flex(children, { direction: "row" | "column" })` for main-axis layout.
+- Use `new FlexItem(child, { grow: 1 })` when a child should consume remaining space.
+- Use `new FlexItem(child, { shrink: 1 })` when a child should participate in overflow redistribution under a finite main-axis cap.
+- `Flex` shrink-wraps on the cross axis by default; `maxWidth` / `maxHeight` act as measurement caps rather than implicit fill signals.
+- Use `alignItems` / `alignSelf: "stretch"` when a specific child should fill the container's computed cross axis.
+- Use `new Place(child, { align: "start" | "center" | "end" })` when a single child should fill available width and then be placed left/center/right.
+- Use `justifyContent`, `alignItems`, and `alignSelf` for container/item placement.
+- Use `align: "start" | "center" | "end"` on `MultilineText` for logical alignment that matches `Place.align`.
+- Use `physicalAlign: "left" | "center" | "right"` on `MultilineText` only when you explicitly want physical left/right semantics.
+- `Text` / `MultilineText` preserve blank lines and edge whitespace by default; opt into cleanup with `whitespace: "trim-and-collapse"`.
+
+**Example**
+This is the recommended chat bubble shape used by [example/chat.ts](./example/chat.ts):
+
+```ts
+type ChatItem = {
+  sender: string;
+  content: string;
+  reply?: {
+    sender: string;
+    content: string;
+  };
+};
+
+const renderItem = memoRenderItem((item: ChatItem): Node<C> => {
+  const senderLine = new Flex<C>(
+    [avatarDot, senderLabel],
+    {
+      direction: "row",
+      gap: 4,
+      mainAxisSize: "fit-content",
+      reverse: item.sender === "A",
+    },
+  );
+
+  const messageText = new FlexItem(
+    new MultilineText(item.content, {
+      lineHeight: 20,
+      font: "16px system-ui",
+      style: "black",
+      align: "start",
+    }),
+    { alignSelf: "start" },
+  );
+
+  const bubbleChildren: Node<C>[] = [];
+  if (item.reply != null) {
+    bubbleChildren.push(
+      new FlexItem(
+        new RoundedBox(
+          new Flex<C>(
+            [
+              new Text(item.reply.sender, {
+                lineHeight: 14,
+                font: "11px system-ui",
+                style: "#666",
+              }),
+              new MultilineText(item.reply.content, {
+                lineHeight: 16,
+                font: "13px system-ui",
+                style: "#444",
+                align: "start",
+              }),
+            ],
+            {
+              direction: "column",
+              gap: 2,
+              alignItems: "start",
+            },
+          ),
+          {
+            top: 5,
+            bottom: 5,
+            left: 8,
+            right: 8,
+            radii: 6,
+            fill: "#e2e2e2",
+          },
+        ),
+        { alignSelf: "stretch" },
+      ),
+    );
+  }
+  bubbleChildren.push(messageText);
+
+  const bubbleColumn = new Flex<C>(bubbleChildren, {
+    direction: "column",
+    gap: 6,
+    // The bubble itself stays intrinsic on the cross axis.
+    // Only the reply preview stretches to the bubble width.
+    alignItems: "start",
+  });
+
+  const content = new RoundedBox(
+    bubbleColumn,
+    {
+      top: 6,
+      bottom: 6,
+      left: 10,
+      right: 10,
+      radii: 8,
+      fill: "#ccc",
+    },
+  );
+
+  const body = new Flex<C>([senderLine, content], {
+    direction: "column",
+    alignItems: item.sender === "A" ? "end" : "start",
+  });
+
+  const alignedBody = new Place<C>(body, {
+    align: item.sender === "A" ? "end" : "start",
+  });
+
+  return new Place(
+    new PaddingBox(
+      new Flex<C>(
+        [
+          avatar,
+          // Opt into shrink so narrow viewports wrap the bubble body instead of overflowing the row.
+          new FlexItem(alignedBody, { grow: 1, shrink: 1 }),
+          new Fixed(32, 0),
+        ],
+        {
+          direction: "row",
+          gap: 4,
+          reverse: item.sender === "A",
+        },
+      ),
+      {
+        top: 4,
+        bottom: 4,
+        left: 4,
+        right: 4,
+      },
+    ),
+    {
+      align: item.sender === "A" ? "end" : "start",
+    },
+  );
+});
+```
+
+That combination gives you:
+
+- explicit row/column structure
+- explicit grow/shrink behavior through `FlexItem`
+- left/right chat placement through `Place`
+- wrapped message bubbles that respect available width without becoming full-width by default
+- nested reply previews that use item-level cross-axis `stretch` to fill the bubble width
+- opt-in overflow redistribution on the message body when the row runs out of main-axis space
+
+In other words: a finite `maxWidth` / `maxHeight` limits measurement, but does not force the `Flex` container to fill the cross axis. If you want a child to fill the computed bubble width, mark that child with `alignSelf: "stretch"` (or inherit `alignItems: "stretch"` from the parent).
+
+## Flex shrink
+
+- `FlexItemOptions.shrink` defaults to `0`, so existing layouts keep their old behavior unless you opt in.
+- When a finite main-axis cap is present and the summed basis sizes overflow it, negative space is redistributed by `shrink * basis`.
+- `basis` is still internal-only and fixed to `"auto"`; the library currently measures the natural content size first, then decides whether to grow or shrink.
+- Custom nodes can implement `measureMinContent()` for accurate saturation. Nodes that do not implement it fall back to their regular `measure()` result, so shrink stays safe but may be more conservative.
+- Known limitation: `column` shrink with `MultilineText` does not clip visual overflow on its own. If you need clipping, add it in your draw layer or wrap the node in a clipping primitive.
+
+## API notes
+
+- `memoRenderItem()` now only accepts object items. If your list item is a primitive or you want to memoize by an explicit id, use `memoRenderItemBy(keyOf, renderItem)`.
+- `FlexItemOptions` exposes `grow`, `shrink`, and `alignSelf`. `shrink` uses a compatibility-first default of `0`, while `basis` remains internal-only and fixed to `"auto"`.
+- `ListState.position` now uses `undefined` as the explicit “use renderer default anchor” state. Use `list.setAnchor(position, offset)` to opt into a concrete anchor.
+- `ListState` can be seeded with `new ListState(items)` and reset with `list.reset(nextItems)`.
+- `MultilineText` now uses only `align` / `physicalAlign`; the old `alignment` field has been removed.
+
+### Migration notes
+
+- Before:
+  - `memoRenderItem((item: number) => ...)`
+- After:
+  - `memoRenderItemBy((item: number) => item, (item) => ...)`
+- Before:
+  - `new FlexItem(node, { grow: 1, shrink: 1, basis: 100 })`
+- After:
+  - `new FlexItem(node, { grow: 1, shrink: 1 })` if you want overflow redistribution
+  - `new FlexItem(node, { grow: 1 })` if you want to preserve the pre-shrink behavior
+  - `basis` stays internal-only (`"auto"`); unsupported sizing semantics beyond that should still be modeled explicitly in node measurement/layout
+- Before:
+  - `new MultilineText(text, { alignment: "left" })`
+- After:
+  - `new MultilineText(text, { align: "start" })`
+  - or `new MultilineText(text, { physicalAlign: "left" })` when physical left/right semantics are required
+- Before:
+  - `list.position = Number.NaN`
+- After:
+  - `list.resetScroll()`
+  - or `list.setAnchor(index, offset)` for an explicit anchor
+
+**Development**
+Install dependencies:
 
 ```bash
 bun install
 ```
 
-To type-check:
+Type-check:
 
 ```bash
 bun run typecheck
 ```
 
-To build distributable files:
+Build distributable files:
 
 ```bash
 bun run dist
 ```
 
-To build example:
+Build the chat example:
 
 ```bash
 bun run example
 ```
-
-This project was created using `bun init` in bun v1.1.37. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.

package/index.d.mts

@@ -11,13 +11,52 @@ interface RenderFeedback {
   /** Largest visible continuous item position, expressed in item coordinates rather than pixels. */
   max: number;
 }
-type Alignment = "left" | "center" | "right";
+type Axis = "row" | "column";
+type MainAxisAlignment = "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
+type CrossAxisAlignment = "start" | "center" | "end" | "stretch";
+type MainAxisSize = "fill" | "fit-content";
+type TextAlign = "start" | "center" | "end";
+type PhysicalTextAlign = "left" | "center" | "right";
+type TextWhitespaceMode = "preserve" | "trim-and-collapse";
+interface TextStyleOptions<C extends CanvasRenderingContext2D> {
+  lineHeight: number;
+  font: string;
+  style: DynValue<C, string>;
+  /** Default: preserve input whitespace, including blank lines and edge spaces. */
+  whitespace?: TextWhitespaceMode;
+}
+interface MultilineTextOptions<C extends CanvasRenderingContext2D> extends TextStyleOptions<C> {
+  /** Logical alignment that matches `Place.align`. */
+  align?: TextAlign;
+  /** Explicit physical alignment when left/right semantics are required. */
+  physicalAlign?: PhysicalTextAlign;
+}
+interface TextOptions<C extends CanvasRenderingContext2D> extends TextStyleOptions<C> {}
+interface LayoutConstraints {
+  minWidth?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  maxHeight?: number;
+}
+interface FlexItemOptions {
+  grow?: number;
+  /** Compatibility-first default: 0 (opt-in shrink). */
+  shrink?: number;
+  alignSelf?: CrossAxisAlignment | "auto";
+}
+interface FlexContainerOptions {
+  direction?: Axis;
+  gap?: number;
+  justifyContent?: MainAxisAlignment;
+  alignItems?: CrossAxisAlignment;
+  reverse?: boolean;
+  mainAxisSize?: MainAxisSize;
+}
 interface Context<C extends CanvasRenderingContext2D> {
   graphics: C;
-  remainingWidth: number;
-  alignment: Alignment;
-  reverse: boolean;
-  measureNode(node: Node<C>): Box;
+  /** v2: 显式布局约束 */
+  constraints?: LayoutConstraints;
+  measureNode(node: Node<C>, constraints?: LayoutConstraints): Box;
   invalidateNode(node: Node<C>): void;
   resolveDynValue<T>(value: DynValue<C, T>): T;
   with<T>(this: Context<C>, cb: (g: C) => T): T;
@@ -32,58 +71,54 @@ interface HitTest {
   type: "click" | "auxclick" | "hover";
 }
 interface Node<C extends CanvasRenderingContext2D> {
+  /** Measure the node under the current layout constraints. */
   measure(ctx: Context<C>): Box;
+  /** Optional intrinsic lower bound used by flex-shrink saturation. */
+  measureMinContent?(ctx: Context<C>): Box;
   draw(ctx: Context<C>, x: number, y: number): boolean;
   hittest(ctx: Context<C>, test: HitTest): boolean;
-  readonly flex: boolean;
+}
+interface LayoutRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+interface ChildLayoutResult<C extends CanvasRenderingContext2D> {
+  node: Node<C>;
+  rect: LayoutRect;
+  contentBox: LayoutRect;
+  constraints?: LayoutConstraints;
+}
+interface FlexLayoutResult<C extends CanvasRenderingContext2D> {
+  containerBox: LayoutRect;
+  contentBox: LayoutRect;
+  children: ChildLayoutResult<C>[];
+  constraints?: LayoutConstraints;
 }
 //#endregion
-//#region src/nodes.d.ts
+//#region src/nodes/base.d.ts
 declare abstract class Group<C extends CanvasRenderingContext2D> implements Node<C> {
-  readonly children: Node<C>[];
+  #private;
   constructor(children: Node<C>[]);
+  get children(): readonly Node<C>[];
+  replaceChildren(nextChildren: Node<C>[]): void;
   abstract measure(ctx: Context<C>): Box;
   abstract draw(ctx: Context<C>, x: number, y: number): boolean;
   abstract hittest(ctx: Context<C>, test: HitTest): boolean;
-  get flex(): boolean;
-}
-declare class VStack<C extends CanvasRenderingContext2D> extends Group<C> {
-  readonly options: {
-    gap?: number;
-    alignment?: "left" | "center" | "right";
-  };
-  constructor(children: Node<C>[], options?: {
-    gap?: number;
-    alignment?: "left" | "center" | "right";
-  });
-  measure(ctx: Context<C>): Box;
-  draw(ctx: Context<C>, x: number, y: number): boolean;
-  hittest(ctx: Context<C>, test: HitTest): boolean;
-}
-declare class HStack<C extends CanvasRenderingContext2D> extends Group<C> {
-  readonly children: Node<C>[];
-  readonly options: {
-    reverse?: boolean;
-    gap?: number;
-  };
-  constructor(children: Node<C>[], options?: {
-    reverse?: boolean;
-    gap?: number;
-  });
-  measure(ctx: Context<C>): Box;
-  draw(ctx: Context<C>, x: number, y: number): boolean;
-  hittest(ctx: Context<C>, test: HitTest): boolean;
 }
 declare class Wrapper<C extends CanvasRenderingContext2D> implements Node<C> {
   #private;
   constructor(inner: Node<C>);
   get inner(): Node<C>;
   set inner(newNode: Node<C>);
-  get flex(): boolean;
   measure(ctx: Context<C>): Box;
+  measureMinContent(ctx: Context<C>): Box;
   draw(ctx: Context<C>, x: number, y: number): boolean;
   hittest(ctx: Context<C>, test: HitTest): boolean;
 }
+//#endregion
+//#region src/nodes/box.d.ts
 declare class PaddingBox<C extends CanvasRenderingContext2D> extends Wrapper<C> {
   #private;
   readonly padding: {
@@ -99,104 +134,148 @@ declare class PaddingBox<C extends CanvasRenderingContext2D> extends Wrapper<C>
     right?: number;
   });
   measure(ctx: Context<C>): Box;
+  measureMinContent(ctx: Context<C>): Box;
   draw(ctx: Context<C>, x: number, y: number): boolean;
   hittest(ctx: Context<C>, test: HitTest): boolean;
 }
-declare class AlignBox<C extends CanvasRenderingContext2D> extends Wrapper<C> {
-  #private;
+declare class Fixed<C extends CanvasRenderingContext2D> implements Node<C> {
+  readonly width: number;
+  readonly height: number;
+  constructor(width: number, height: number);
+  measure(_ctx: Context<C>): Box;
+  measureMinContent(_ctx: Context<C>): Box;
+  draw(_ctx: Context<C>, _x: number, _y: number): boolean;
+  hittest(_ctx: Context<C>, _test: HitTest): boolean;
+}
+//#endregion
+//#region src/nodes/flex.d.ts
+declare class FlexItem<C extends CanvasRenderingContext2D> extends Wrapper<C> {
+  readonly item: FlexItemOptions;
+  constructor(inner: Node<C>, item?: FlexItemOptions);
+}
+declare class Flex<C extends CanvasRenderingContext2D> extends Group<C> {
+  readonly options: FlexContainerOptions;
+  constructor(children: Node<C>[], options?: FlexContainerOptions);
+  measure(ctx: Context<C>): Box;
+  measureMinContent(ctx: Context<C>): Box;
+  draw(ctx: Context<C>, x: number, y: number): boolean;
+  hittest(ctx: Context<C>, test: HitTest): boolean;
+}
+//#endregion
+//#region src/nodes/place.d.ts
+declare class Place<C extends CanvasRenderingContext2D> extends Wrapper<C> {
   readonly options: {
-    alignment: Alignment;
+    align?: TextAlign;
+    expand?: boolean;
   };
-  constructor(inner: Node<C>, options: {
-    alignment: Alignment;
+  constructor(inner: Node<C>, options?: {
+    align?: TextAlign;
+    expand?: boolean;
   });
   measure(ctx: Context<C>): Box;
+  measureMinContent(ctx: Context<C>): Box;
   draw(ctx: Context<C>, x: number, y: number): boolean;
   hittest(ctx: Context<C>, test: HitTest): boolean;
 }
+//#endregion
+//#region src/nodes/text.d.ts
 declare class MultilineText<C extends CanvasRenderingContext2D> implements Node<C> {
-  #private;
   readonly text: string;
-  readonly options: {
-    lineHeight: number;
-    font: string;
-    alignment: "left" | "center" | "right";
-    style: DynValue<C, string>;
-  };
-  constructor(text: string, options: {
-    lineHeight: number;
-    font: string;
-    alignment: "left" | "center" | "right";
-    style: DynValue<C, string>;
-  });
-  get flex(): boolean;
+  readonly options: MultilineTextOptions<C>;
+  constructor(text: string, options: MultilineTextOptions<C>);
   measure(ctx: Context<C>): Box;
+  measureMinContent(ctx: Context<C>): Box;
   draw(ctx: Context<C>, x: number, y: number): boolean;
-  hittest(_ctx: Context<C>, _test: HitTest): boolean;
+  hittest(_ctx: Context<C>, _test: {
+    x: number;
+    y: number;
+    type: "click" | "auxclick" | "hover";
+  }): boolean;
 }
 declare class Text<C extends CanvasRenderingContext2D> implements Node<C> {
-  #private;
   readonly text: string;
-  readonly options: {
-    lineHeight: number;
-    font: string;
-    style: DynValue<C, string>;
-  };
-  constructor(text: string, options: {
-    lineHeight: number;
-    font: string;
-    style: DynValue<C, string>;
-  });
-  get flex(): boolean;
+  readonly options: TextOptions<C>;
+  constructor(text: string, options: TextOptions<C>);
   measure(ctx: Context<C>): Box;
+  measureMinContent(ctx: Context<C>): Box;
   draw(ctx: Context<C>, x: number, y: number): boolean;
-  hittest(_ctx: Context<C>, _test: HitTest): boolean;
-}
-declare class Fixed<C extends CanvasRenderingContext2D> implements Node<C> {
-  readonly width: number;
-  readonly height: number;
-  constructor(width: number, height: number);
-  get flex(): boolean;
-  measure(_ctx: Context<C>): Box;
-  draw(_ctx: Context<C>, _x: number, _y: number): boolean;
-  hittest(_ctx: Context<C>, _test: HitTest): boolean;
+  hittest(_ctx: Context<C>, _test: {
+    x: number;
+    y: number;
+    type: "click" | "auxclick" | "hover";
+  }): boolean;
 }
 //#endregion
-//#region src/renderer.d.ts
+//#region src/renderer/base.d.ts
 declare class BaseRenderer<C extends CanvasRenderingContext2D, O extends {} = {}> {
   #private;
   readonly options: RendererOptions & O;
   graphics: C;
   protected get context(): Context<C>;
   constructor(graphics: C, options: RendererOptions & O);
+  protected getRootConstraints(): LayoutConstraints;
+  protected getRootContext(): Context<C>;
+  protected measureRootNode(node: Node<C>): Box;
+  protected drawRootNode(node: Node<C>, x?: number, y?: number): boolean;
+  protected hittestRootNode(node: Node<C>, test: HitTest): boolean;
   invalidateNode(node: Node<C>): void;
-  measureNode(node: Node<C>, ctx?: Context<C>): Box;
+  getLayoutResult(node: Node<C>, constraints?: LayoutConstraints): FlexLayoutResult<C> | undefined;
+  setLayoutResult(node: Node<C>, result: FlexLayoutResult<C>, constraints?: LayoutConstraints): void;
+  protected getTextLayout<T>(node: Node<C>, key: string): T | undefined;
+  protected setTextLayout<T>(node: Node<C>, key: string, layout: T): void;
+  measureNode(node: Node<C>, constraints?: LayoutConstraints): Box;
 }
 declare class DebugRenderer<C extends CanvasRenderingContext2D> extends BaseRenderer<C> {
   draw(node: Node<C>): boolean;
   hittest(node: Node<C>, test: HitTest): boolean;
 }
-declare function memoRenderItem<C extends CanvasRenderingContext2D, T extends {}>(renderItem: (item: T) => Node<C>): ((item: T) => Node<C>) & {
-  reset: (key: T) => boolean;
-};
+//#endregion
+//#region src/renderer/list-state.d.ts
 declare class ListState<T extends {}> {
   offset: number;
-  position: number;
+  position: number | undefined;
   items: T[];
+  constructor(items?: T[]);
   unshift(...items: T[]): void;
   unshiftAll(items: T[]): void;
   push(...items: T[]): void;
   pushAll(items: T[]): void;
-  reset(): void;
+  setAnchor(position: number, offset?: number): void;
+  reset(items?: T[]): void;
   resetScroll(): void;
   applyScroll(delta: number): void;
 }
-type DrawItem<C extends CanvasRenderingContext2D> = {
+//#endregion
+//#region src/renderer/memo.d.ts
+declare function memoRenderItem<C extends CanvasRenderingContext2D, T extends object>(renderItem: (item: T) => Node<C>): ((item: T) => Node<C>) & {
+  reset: (key: T) => boolean;
+};
+declare function memoRenderItemBy<C extends CanvasRenderingContext2D, T, K>(keyOf: (item: T) => K, renderItem: (item: T) => Node<C>): ((item: T) => Node<C>) & {
+  reset: (item: T) => boolean;
+  resetKey: (key: K) => boolean;
+};
+//#endregion
+//#region src/renderer/virtualized/solver.d.ts
+interface VisibleListState {
+  position?: number;
+  offset: number;
+}
+interface NormalizedListState {
+  position: number;
+  offset: number;
+}
+interface VisibleWindowEntry<T> {
   idx: number;
-  node: Node<C>;
+  value: T;
   offset: number;
   height: number;
-};
+}
+interface VisibleWindow<T> {
+  drawList: VisibleWindowEntry<T>[];
+  shift: number;
+}
+//#endregion
+//#region src/renderer/virtualized/base.d.ts
 interface JumpToOptions {
   animated?: boolean;
   block?: "start" | "center" | "end";
@@ -211,52 +290,65 @@ declare abstract class VirtualizedRenderer<C extends CanvasRenderingContext2D, T
   static readonly MIN_JUMP_DURATION = 160;
   static readonly MAX_JUMP_DURATION = 420;
   static readonly JUMP_DURATION_PER_ITEM = 28;
-  get position(): number;
-  set position(value: number);
+  get position(): number | undefined;
+  set position(value: number | undefined);
   get offset(): number;
   set offset(value: number);
   get items(): T[];
   set items(value: T[]);
   abstract render(feedback?: RenderFeedback): boolean;
-  abstract hittest(test: HitTest): boolean;
+  abstract hittest(test: {
+    x: number;
+    y: number;
+    type: "click" | "auxclick" | "hover";
+  }): boolean;
+  protected _readListState(): VisibleListState;
+  protected _commitListState(state: NormalizedListState): void;
   jumpTo(index: number, options?: JumpToOptions): void;
   protected _resetRenderFeedback(feedback?: RenderFeedback): void;
   protected _accumulateRenderFeedback(feedback: RenderFeedback, idx: number, top: number, height: number): void;
-  protected _renderDrawList(list: DrawItem<C>[], shift: number, feedback?: RenderFeedback): boolean;
+  protected _renderDrawList(list: VisibleWindow<Node<C>>["drawList"], shift: number, feedback?: RenderFeedback): boolean;
+  protected _renderVisibleWindow(window: VisibleWindow<Node<C>>, feedback?: RenderFeedback): boolean;
+  protected _hittestVisibleWindow(window: VisibleWindow<Node<C>>, test: {
+    x: number;
+    y: number;
+    type: "click" | "auxclick" | "hover";
+  }): boolean;
   protected _prepareRender(): boolean;
   protected _finishRender(requestRedraw: boolean): boolean;
   protected _clampItemIndex(index: number): number;
   protected _getItemHeight(index: number): number;
   protected _getAnchorAtOffset(index: number, offset: number): number;
-  protected abstract _prepareAnchorState(): void;
-  protected abstract _readAnchor(): number;
+  protected abstract _normalizeListState(state: VisibleListState): NormalizedListState;
+  protected abstract _readAnchor(state: NormalizedListState): number;
   protected abstract _applyAnchor(anchor: number): void;
   protected abstract _getDefaultJumpBlock(): NonNullable<JumpToOptions["block"]>;
   protected abstract _getTargetAnchor(index: number, block: NonNullable<JumpToOptions["block"]>): number;
 }
-declare class TimelineRenderer<C extends CanvasRenderingContext2D, T extends {}> extends VirtualizedRenderer<C, T> {
+//#endregion
+//#region src/renderer/virtualized/chat.d.ts
+declare class ChatRenderer<C extends CanvasRenderingContext2D, T extends {}> extends VirtualizedRenderer<C, T> {
+  #private;
   protected _getDefaultJumpBlock(): NonNullable<JumpToOptions["block"]>;
-  protected _prepareAnchorState(): void;
-  protected _readAnchor(): number;
+  protected _normalizeListState(state: VisibleListState): NormalizedListState;
+  protected _readAnchor(state: NormalizedListState): number;
   protected _applyAnchor(anchor: number): void;
   protected _getTargetAnchor(index: number, block: NonNullable<JumpToOptions["block"]>): number;
   render(feedback?: RenderFeedback): boolean;
   hittest(test: HitTest): boolean;
 }
-declare class ChatRenderer<C extends CanvasRenderingContext2D, T extends {}> extends VirtualizedRenderer<C, T> {
+//#endregion
+//#region src/renderer/virtualized/timeline.d.ts
+declare class TimelineRenderer<C extends CanvasRenderingContext2D, T extends {}> extends VirtualizedRenderer<C, T> {
+  #private;
   protected _getDefaultJumpBlock(): NonNullable<JumpToOptions["block"]>;
-  protected _prepareAnchorState(): void;
-  protected _readAnchor(): number;
+  protected _normalizeListState(state: VisibleListState): NormalizedListState;
+  protected _readAnchor(state: NormalizedListState): number;
   protected _applyAnchor(anchor: number): void;
   protected _getTargetAnchor(index: number, block: NonNullable<JumpToOptions["block"]>): number;
   render(feedback?: RenderFeedback): boolean;
   hittest(test: HitTest): boolean;
 }
 //#endregion
-//#region src/registry.d.ts
-declare function registerNodeParent<C extends CanvasRenderingContext2D>(node: Node<C>, parent: Node<C>): void;
-declare function unregisterNodeParent<C extends CanvasRenderingContext2D>(node: Node<C>): void;
-declare function getNodeParent<C extends CanvasRenderingContext2D>(node: Node<C>): Node<C> | undefined;
-//#endregion
-export { AlignBox, Alignment, BaseRenderer, Box, ChatRenderer, Context, DebugRenderer, DynValue, Fixed, Group, HStack, HitTest, JumpToOptions, ListState, MultilineText, Node, PaddingBox, RenderFeedback, RendererOptions, Text, TimelineRenderer, VStack, VirtualizedRenderer, Wrapper, getNodeParent, memoRenderItem, registerNodeParent, unregisterNodeParent };
+export { Axis, BaseRenderer, Box, ChatRenderer, ChildLayoutResult, Context, CrossAxisAlignment, DebugRenderer, DynValue, Fixed, Flex, FlexContainerOptions, FlexItem, FlexItemOptions, FlexLayoutResult, Group, HitTest, JumpToOptions, LayoutConstraints, LayoutRect, ListState, MainAxisAlignment, MainAxisSize, MultilineText, MultilineTextOptions, Node, PaddingBox, PhysicalTextAlign, Place, RenderFeedback, RendererOptions, Text, TextAlign, TextOptions, TextStyleOptions, TextWhitespaceMode, TimelineRenderer, VirtualizedRenderer, Wrapper, memoRenderItem, memoRenderItemBy };
 //# sourceMappingURL=index.d.mts.map