@dxos/react-ui-feed 0.11.1

package/src/hooks/useItemSelection.tsx

@@ -0,0 +1,53 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type MouseEvent, type PropsWithChildren, createContext, useCallback, useContext } from 'react';
+
+/** What an item can do about its own selection — the item-side face of the host's selection model. */
+export type ItemSelection = {
+  selected: boolean;
+  /** Additive when the gesture says so (meta/ctrl); the mode is the provider's business. */
+  toggle: (additive?: boolean) => void;
+};
+
+export type ItemSelectionValue = {
+  selectedIds?: ReadonlySet<string>;
+  onSelect?: (id: string, additive: boolean) => void;
+};
+
+const ItemSelectionContext = createContext<ItemSelectionValue>({});
+
+export type ItemSelectionProviderProps = PropsWithChildren<ItemSelectionValue>;
+
+/**
+ * The item-side hook of the decoration pattern applied to selection (SPEC: useItemSelection): an
+ * item asks for its own `{ selected, toggle }` by id instead of the list threading `selectedIds`
+ * through props. Selection is model-space ids, so virtualization is untouched: an unmounted item is
+ * still selected, and mounts knowing it.
+ *
+ * The provider is deliberately the thinnest thing that works — a set and a callback. Mode policies
+ * (single | multi | range) belong to `react-ui-list`'s `useListSelection`, which a host composes
+ * *above* this provider; teaching this package about modes would be rebuilding that hook.
+ */
+export const ItemSelectionProvider = ({ selectedIds, onSelect, children }: ItemSelectionProviderProps) => (
+  <ItemSelectionContext.Provider value={{ selectedIds, onSelect }}>{children}</ItemSelectionContext.Provider>
+);
+
+/**
+ * The whole selection value, for a component that renders many items in one pass.
+ *
+ * A row loop cannot call `useItemSelection` per row — hooks do not run in loops — so the viewport
+ * reads the value once and derives per-row state; item-shaped components use the per-id hook.
+ */
+export const useItemSelectionValue = (): ItemSelectionValue => useContext(ItemSelectionContext);
+
+export const useItemSelection = (id: string): ItemSelection => {
+  const { selectedIds, onSelect } = useContext(ItemSelectionContext);
+  const toggle = useCallback((additive = true) => onSelect?.(id, additive), [id, onSelect]);
+  return { selected: selectedIds?.has(id) ?? false, toggle };
+};
+
+/** Reads the additive intent off a gesture, so callers do not each invent the modifier rule. */
+export const isAdditive = (event: MouseEvent | globalThis.MouseEvent): boolean =>
+  event.metaKey || event.ctrlKey || event.shiftKey;

package/src/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './hooks';
+export * from './components';
+export * from './model';

package/src/model/feed-model.test.ts

@@ -0,0 +1,84 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, expect, test } from 'vitest';
+
+import { Message } from '@dxos/types';
+
+import { defaultRenderer, messageText, searchFeed, sliceFeed } from './feed-model';
+
+const makeMessage = (text: string, mimeType?: string) =>
+  Message.make({ sender: { role: 'user' }, blocks: [{ _tag: 'text', text, ...(mimeType ? { mimeType } : {}) }] });
+
+describe('feed model', () => {
+  test('renders markdown by default and html when the block declares it', () => {
+    expect(defaultRenderer(makeMessage('# Hello'))).toEqual({ kind: 'markdown', text: '# Hello' });
+    expect(defaultRenderer(makeMessage('<p>Hello</p>', 'text/html'))).toEqual({ kind: 'html', html: '<p>Hello</p>' });
+  });
+
+  test('html messages are searchable as text', () => {
+    expect(messageText(makeMessage('<p>Hello <b>world</b></p>', 'text/html'), defaultRenderer)).toEqual('Hello world');
+  });
+
+  describe('search', () => {
+    test('finds every occurrence across messages, with the index for scroll-to', () => {
+      const messages = [makeMessage('alpha beta'), makeMessage('gamma'), makeMessage('beta beta')];
+      const hits = searchFeed(messages, defaultRenderer, 'beta');
+      expect(hits.map(({ index, offset }) => [index, offset])).toEqual([
+        [0, 6],
+        [2, 0],
+        [2, 5],
+      ]);
+    });
+
+    test('is case-insensitive and empty for an empty query', () => {
+      const messages = [makeMessage('Alpha')];
+      expect(searchFeed(messages, defaultRenderer, 'alpha')).toHaveLength(1);
+      expect(searchFeed(messages, defaultRenderer, '')).toEqual([]);
+    });
+
+    test('reaches messages that no viewport has mounted', () => {
+      // The engine only mounts the visible window; search runs over the model, so a hit 500 messages
+      // down is found without ever rendering it.
+      const messages = [...Array(500)].map((_, index) => makeMessage(`message ${index}`));
+      expect(searchFeed(messages, defaultRenderer, 'message 499')).toMatchObject([{ index: 499, offset: 0 }]);
+    });
+  });
+
+  describe('slice', () => {
+    const messages = [makeMessage('alpha'), makeMessage('beta'), makeMessage('gamma')];
+
+    test('spans message boundaries', () => {
+      const text = sliceFeed(messages, defaultRenderer, {
+        from: { messageId: messages[0].id, offset: 2 },
+        to: { messageId: messages[2].id, offset: 3 },
+      });
+      expect(text).toEqual('pha\n\nbeta\n\ngam');
+    });
+
+    test('is symmetric for a backwards drag', () => {
+      const range = {
+        from: { messageId: messages[2].id, offset: 3 },
+        to: { messageId: messages[0].id, offset: 2 },
+      };
+      expect(sliceFeed(messages, defaultRenderer, range)).toEqual('pha\n\nbeta\n\ngam');
+    });
+
+    test('handles a range within one message', () => {
+      const text = sliceFeed(messages, defaultRenderer, {
+        from: { messageId: messages[1].id, offset: 1 },
+        to: { messageId: messages[1].id, offset: 3 },
+      });
+      expect(text).toEqual('et');
+    });
+
+    test('returns nothing for a stale anchor', () => {
+      const text = sliceFeed(messages, defaultRenderer, {
+        from: { messageId: 'gone', offset: 0 },
+        to: { messageId: messages[1].id, offset: 1 },
+      });
+      expect(text).toEqual('');
+    });
+  });
+});

package/src/model/feed-model.ts

@@ -0,0 +1,214 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type ContentBlock, type Message } from '@dxos/types';
+
+/**
+ * What an item renders. The engine is renderer-agnostic: a message may resolve to a markdown
+ * document, to raw HTML (email bodies, which are not markdown and cannot be a CodeMirror document),
+ * or to a caller-supplied component.
+ */
+export type ItemContent =
+  | { kind: 'markdown'; text: string }
+  | { kind: 'html'; html: string }
+  | { kind: 'custom'; key: string; data?: unknown };
+
+/** Resolves a message to the content its item renders. One per scenario (chat, email, …). */
+export type MessageRenderer = (message: Message.Message) => ItemContent;
+
+/**
+ * Default renderer: an `text/html` block wins (email), otherwise every block is flattened to
+ * markdown. Block kinds the engine does not know become fenced JSON so nothing renders as blank.
+ */
+export const defaultRenderer: MessageRenderer = (message) => createContent(message, false);
+
+/**
+ * Assistant chat: as {@link defaultRenderer}, plus the reader's own turns marked with `<prompt>`.
+ *
+ * Separate because the tag is only meaningful where a widget registry knows it — a feed rendered
+ * without one would show the reader their own angle brackets, which is what a human chat, a
+ * transcript and a comment list all are.
+ */
+export const chatRenderer: MessageRenderer = (message) => createContent(message, true);
+
+const createContent = (message: Message.Message, prompts: boolean): ItemContent => {
+  const textBlocks = message.blocks.filter((block): block is ContentBlock.Text => block._tag === 'text');
+  const html = textBlocks.find((block) => block.mimeType === 'text/html');
+  if (html) {
+    return { kind: 'html', html: html.text };
+  }
+
+  return {
+    kind: 'markdown',
+    text: message.blocks
+      .map((block) => blockToMarkdown(message, block, prompts))
+      .filter(Boolean)
+      .join('\n\n'),
+  };
+};
+
+/**
+ * One block as markdown, with anything that is not prose emitted as an XML tag for a widget to
+ * render. A message is the concatenation of these, which is what makes an item a document rather
+ * than a component tree: the blocks are content, and the chrome around them belongs to the host.
+ */
+const blockToMarkdown = (message: Message.Message, block: ContentBlock.Any, prompts: boolean): string => {
+  switch (block._tag) {
+    case 'text':
+      // A prompt is marked rather than styled: the reader's own words are content, and the widget
+      // that frames them is the host's business.
+      return prompts && message.sender.role === 'user' ? tag('prompt', block.text, block) : block.text.trim();
+    case 'reasoning':
+      return tag('reasoning', block.reasoningText ?? block.redactedText ?? '', block);
+    case 'status':
+      return tag('status', block.statusText, block);
+    case 'summary':
+      return tag('summary', block.content, block);
+    case 'suggestion':
+      return tag('suggestion', block.text, block);
+    case 'select':
+      return block.options.length
+        ? `<select>${block.options.map((option) => `<option>${escapeXml(option)}</option>`).join('')}</select>`
+        : '';
+    case 'toolCall':
+      // Name and status ride on the tag rather than in widget state kept beside the document: an
+      // item is rebuilt from its message alone, so anything the widget needs has to survive there.
+      return `<toolCall id="${escapeXml(block.toolCallId)}" name="${escapeXml(block.name)}"${block.pending ? ' pending="true"' : ''} />`;
+    case 'toolResult':
+      return tag('toolResult', String(block.result ?? block.error ?? ''), block, `for="${escapeXml(block.name)}"`);
+    default:
+      // Nothing renders blank: an unknown block is shown as what it is.
+      return tag('json', JSON.stringify(block), block);
+  }
+};
+
+/**
+ * An XML tag holding block content.
+ *
+ * A pending block is emitted **unclosed**, which is the streaming contract: the item reconciles by
+ * appending, so a closing tag written before the content is complete would have to be rewritten on
+ * every chunk — and rewriting the document is what discards decorations and scroll position.
+ *
+ * Paragraph breaks inside the content are collapsed, since a blank line would end the enclosing
+ * markdown block and leave the rest of the tag parsing as prose.
+ */
+const tag = (name: string, content: string, block: ContentBlock.Any, attributes?: string): string => {
+  const text = escapeXml(content.replace(/\n\n+/g, ' ').trim());
+  if (!text.length && !block.pending) {
+    return '';
+  }
+
+  const open = `<${name}${attributes ? ` ${attributes}` : ''}>`;
+  return block.pending ? `${open}${text}` : `${open}${text}</${name}>`;
+};
+
+const escapeXml = (raw: string): string => raw.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+/** Plain text of a message, used by search and copy so both read the same projection. */
+export const messageText = (message: Message.Message, renderer: MessageRenderer): string => {
+  const content = renderer(message);
+  switch (content.kind) {
+    case 'markdown':
+      return content.text;
+    case 'html':
+      return stripHtml(content.html);
+    case 'custom':
+      return '';
+  }
+};
+
+/** Crude tag strip — the engine only needs searchable/copyable text, not a parse tree. */
+const stripHtml = (html: string): string =>
+  html
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+//
+// Search
+//
+
+export type SearchHit = {
+  messageId: string;
+  /** Index into the message list, so the virtualizer can scroll to it without a second lookup. */
+  index: number;
+  /** Offset into the message's rendered text. */
+  offset: number;
+  length: number;
+};
+
+/**
+ * Search the model rather than the DOM.
+ *
+ * Virtualization means most messages are not mounted, and a `viewType` filter can hide blocks that
+ * are still in the model — neither is reachable by a per-view CodeMirror search, so thread-wide find
+ * has to run over the projection.
+ */
+export const searchFeed = (
+  messages: readonly Message.Message[],
+  renderer: MessageRenderer,
+  query: string,
+): SearchHit[] => {
+  const hits: SearchHit[] = [];
+  if (!query.length) {
+    return hits;
+  }
+
+  const needle = query.toLowerCase();
+  messages.forEach((message, index) => {
+    const text = messageText(message, renderer).toLowerCase();
+    let offset = text.indexOf(needle);
+    while (offset !== -1) {
+      hits.push({ messageId: message.id, index, offset, length: query.length });
+      offset = text.indexOf(needle, offset + needle.length);
+    }
+  });
+
+  return hits;
+};
+
+//
+// Selection
+//
+
+/** A point in the feed: a message plus an offset into its rendered text. */
+export type FeedAnchor = { messageId: string; offset: number };
+
+export type FeedRange = { from: FeedAnchor; to: FeedAnchor };
+
+/**
+ * Text between two anchors, spanning message boundaries.
+ *
+ * Native selection cannot span separate editor instances, and unmounted messages are not in the DOM
+ * at all, so cross-message copy is reconstructed from the model.
+ */
+export const sliceFeed = (
+  messages: readonly Message.Message[],
+  renderer: MessageRenderer,
+  range: FeedRange,
+): string => {
+  const fromIndex = messages.findIndex((message) => message.id === range.from.messageId);
+  const toIndex = messages.findIndex((message) => message.id === range.to.messageId);
+  if (fromIndex === -1 || toIndex === -1) {
+    return '';
+  }
+
+  // Normalize so a backwards drag (focus before anchor) yields the same text as a forwards one.
+  const [start, end] =
+    fromIndex < toIndex || (fromIndex === toIndex && range.from.offset <= range.to.offset)
+      ? [range.from, range.to]
+      : [range.to, range.from];
+
+  const [startIndex, endIndex] = fromIndex < toIndex ? [fromIndex, toIndex] : [toIndex, fromIndex];
+
+  const parts: string[] = [];
+  for (let index = startIndex; index <= endIndex; index++) {
+    const text = messageText(messages[index], renderer);
+    const from = index === startIndex ? start.offset : 0;
+    const to = index === endIndex ? end.offset : text.length;
+    parts.push(text.slice(from, to));
+  }
+
+  return parts.join('\n\n');
+};

package/src/model/feed.test.ts

@@ -0,0 +1,65 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, expect, test } from 'vitest';
+
+import { Message } from '@dxos/types';
+
+import { FeedModel, fromMessages } from './feed';
+
+const message = (role: 'user' | 'assistant', text: string) =>
+  Message.make({ sender: { role, name: role }, blocks: [{ _tag: 'text', text }] });
+
+describe('FeedModel', () => {
+  test('stops follow the policy, and the policy is swappable', () => {
+    const model = fromMessages([
+      message('user', 'question one'),
+      message('assistant', 'answer one'),
+      message('user', 'question two'),
+    ]);
+
+    expect(model.stops().map(({ index }) => index)).to.deep.eq([0, 1, 2]);
+
+    model.setStops('prompt');
+    expect(model.stops().map(({ index }) => index)).to.deep.eq([0, 2]);
+  });
+
+  test('the model owns iteration: an edge asks the source, and the page arrives as a prepend', async () => {
+    const history = [message('user', 'older')];
+    const model = new FeedModel({
+      messages: [message('user', 'newer')],
+      loadBefore: async () => history.splice(0),
+    });
+
+    const changes: unknown[] = [];
+    model.subscribe((change) => changes.push(change));
+
+    expect(await model.more('start')).to.eq(true);
+    expect(changes).to.deep.eq([{ prepended: 1 }]);
+    // The source is drained; the edge stops asking.
+    expect(await model.more('start')).to.eq(false);
+  });
+
+  test('streaming is an update to one identity, not a change to the list', () => {
+    const answer = message('assistant', 'streaming');
+    const model = fromMessages([message('user', 'prompt'), answer]);
+    const changes: unknown[] = [];
+    model.subscribe((change) => changes.push(change));
+
+    model.setStreaming(answer.id);
+    model.stream(answer.id);
+    model.setStreaming(undefined);
+
+    expect(model.count).to.eq(2);
+    expect(changes).to.deep.eq([{ updated: [answer.id] }, { updated: [answer.id] }, { updated: [answer.id] }]);
+  });
+
+  test('search runs over the model, since the DOM cannot see unmounted rows', () => {
+    const model = fromMessages([message('user', 'find the needle'), message('assistant', 'nothing here')]);
+
+    const hits = model.search('needle');
+    expect(hits.length).to.eq(1);
+    expect(hits[0].index).to.eq(0);
+  });
+});

package/src/model/feed.ts

@@ -0,0 +1,157 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Message } from '@dxos/types';
+
+import { type MessageRenderer, type SearchHit, defaultRenderer, messageText, searchFeed } from './feed-model';
+import { ListModel } from './list-model';
+
+/**
+ * One position navigation can land on (SPEC: Stop).
+ *
+ * Produced by a pluggable policy over the model and consumed identically by every driver —
+ * toolbar, arrow keys, outliner, minimap — which is what keeps the rails and the keymap from
+ * growing parallel wiring.
+ */
+export type Stop = {
+  index: number;
+  id: string;
+  label?: string;
+};
+
+/** The built-in policies; a host may hand a function instead. */
+export type StopsPolicy = 'message' | 'prompt' | ((message: Message.Message, index: number) => boolean);
+
+export type FeedModelOptions = {
+  messages?: readonly Message.Message[];
+  stops?: StopsPolicy;
+  /** Paged history: consumed when the window reaches the start edge. Paging is the model's business. */
+  loadBefore?: () => Promise<readonly Message.Message[]>;
+  /** The forward twin, for feeds that are windows into something longer. */
+  loadAfter?: () => Promise<readonly Message.Message[]>;
+};
+
+/**
+ * The native case, not an add-on (SPEC: FeedModel): a ListModel of messages carrying the feed's
+ * own semantics — the stops policy, the streaming tail, and iteration. The list consumes this and
+ * nothing else; `hits`, `isAnchor` and `streamingId` all left the props API and live here or in
+ * the decoration provider.
+ *
+ * ECHO/queue bindings adapt to this outside the package; `fromMessages` adapts the plain case.
+ */
+export class FeedModel extends ListModel<Message.Message> {
+  #stops: StopsPolicy;
+  #streamingId: string | undefined;
+  #loading = false;
+  readonly #loadBefore?: () => Promise<readonly Message.Message[]>;
+  readonly #loadAfter?: () => Promise<readonly Message.Message[]>;
+
+  constructor({ messages = [], stops = 'message', loadBefore, loadAfter }: FeedModelOptions = {}) {
+    super({ items: messages, getId: (message) => message.id });
+    this.#stops = stops;
+    this.#loadBefore = loadBefore;
+    this.#loadAfter = loadAfter;
+  }
+
+  get messages(): readonly Message.Message[] {
+    return this.items;
+  }
+
+  /** The tail message reconciling by delta; its item must not remount per chunk. */
+  get streamingId(): string | undefined {
+    return this.#streamingId;
+  }
+
+  setStreaming(id: string | undefined): void {
+    const previous = this.#streamingId;
+    this.#streamingId = id;
+    // The item that stopped (or started) streaming re-renders; the rest of the feed does not care.
+    for (const changed of [previous, id]) {
+      if (changed) {
+        this.update(changed);
+      }
+    }
+  }
+
+  /** A chunk arrived for the streaming tail: same identity, longer content. */
+  stream(id: string): void {
+    this.update(id);
+  }
+
+  setStops(stops: StopsPolicy): void {
+    this.#stops = stops;
+  }
+
+  /**
+   * The positions navigation can land on, under the current policy.
+   *
+   * Recomputed on demand rather than cached: a policy is a predicate over the model, and the model
+   * knows when it changed — callers that want reactivity derive from `rowsAtom`.
+   */
+  stops(): Stop[] {
+    const predicate =
+      this.#stops === 'message'
+        ? () => true
+        : this.#stops === 'prompt'
+          ? (message: Message.Message) => message.sender.role === 'user'
+          : this.#stops;
+
+    const stops: Stop[] = [];
+    this.messages.forEach((message, index) => {
+      if (predicate(message, index)) {
+        stops.push({ index, id: message.id });
+      }
+    });
+
+    return stops;
+  }
+
+  /**
+   * The window reached the start: ask the source for history.
+   *
+   * The model owns iteration (SPEC F-7.2) — the pages arrive as a prepend, which the virtualizer
+   * is told about, so nothing on screen moves (F-1.1). Serialized, because edges are reached once
+   * per frame while the reader sits on them.
+   */
+  async more(edge: 'start' | 'end'): Promise<boolean> {
+    const load = edge === 'start' ? this.#loadBefore : this.#loadAfter;
+    if (!load || this.#loading) {
+      return false;
+    }
+
+    this.#loading = true;
+    try {
+      const page = await load();
+      if (!page.length) {
+        return false;
+      }
+
+      if (edge === 'start') {
+        this.prepend(page);
+      } else {
+        this.append(page);
+      }
+
+      return true;
+    } finally {
+      this.#loading = false;
+    }
+  }
+
+  /** Model-level search, since virtualization hides most items from any DOM search. */
+  search(query: string, renderer: MessageRenderer = defaultRenderer): SearchHit[] {
+    return searchFeed(this.messages, renderer, query);
+  }
+
+  /** The rendered text of one message, for previews and rails. */
+  textOf(id: string, renderer: MessageRenderer = defaultRenderer): string | undefined {
+    const index = this.indexOf(id);
+    const message = this.at(index);
+    return message && messageText(message, renderer);
+  }
+}
+
+/** The plain case: a feed over an array the host already has. */
+export const fromMessages = (messages: readonly Message.Message[], options: Omit<FeedModelOptions, 'messages'> = {}) =>
+  new FeedModel({ messages, ...options });

package/src/model/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './feed-model';
+export * from './feed';
+export * from './list-model';
+export * from './useListModel';

package/src/model/list-model.test.ts

@@ -0,0 +1,71 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, expect, test } from 'vitest';
+
+import { ListModel } from './list-model';
+
+const create = (count = 5) =>
+  new ListModel<{ id: string }>({
+    items: Array.from({ length: count }, (_, index) => ({ id: `row-${index}` })),
+    getId: (item) => item.id,
+  });
+
+describe('ListModel', () => {
+  test('a prepend is told, never inferred', () => {
+    const model = create();
+    const changes: unknown[] = [];
+    model.subscribe((change) => changes.push(change));
+
+    model.prepend([{ id: 'earlier-0' }, { id: 'earlier-1' }]);
+
+    expect(changes).to.deep.eq([{ prepended: 2 }]);
+    expect(model.getId(0)).to.eq('earlier-0');
+    expect(model.getId(2)).to.eq('row-0');
+  });
+
+  test('replace recovers the prepend for a caller that does not know', () => {
+    // The one place the identity scan survives: a host handing over a whole new array. The model
+    // works out that everything before the old first row was prepended, so the virtualizer is
+    // still told rather than left to infer.
+    const model = create(3);
+    const changes: unknown[] = [];
+    model.subscribe((change) => changes.push(change));
+
+    model.replace([{ id: 'earlier-0' }, { id: 'row-0' }, { id: 'row-1' }, { id: 'row-2' }]);
+
+    expect(changes).to.deep.eq([{ prepended: 1, appended: undefined }]);
+  });
+
+  test('replace reads growth at the end as an append', () => {
+    const model = create(3);
+    const changes: unknown[] = [];
+    model.subscribe((change) => changes.push(change));
+
+    model.replace([{ id: 'row-0' }, { id: 'row-1' }, { id: 'row-2' }, { id: 'later-0' }]);
+
+    expect(changes).to.deep.eq([{ prepended: undefined, appended: 1 }]);
+  });
+
+  test('patch replaces a frozen item under its own identity', () => {
+    const model = create(3);
+    const changes: unknown[] = [];
+    model.subscribe((change) => changes.push(change));
+
+    model.patch('row-1', { id: 'row-1' });
+    // A patch that would change identity is refused: it would strand measurements and selection.
+    model.patch('row-2', { id: 'imposter' });
+
+    expect(changes).to.deep.eq([{ updated: ['row-1'] }]);
+    expect(model.getId(2)).to.eq('row-2');
+  });
+
+  test('the atom face tracks the same rows', () => {
+    const model = create(2);
+    model.append([{ id: 'later-0' }]);
+
+    expect(model.count).to.eq(3);
+    expect(model.items.map((item) => item.id)).to.deep.eq(['row-0', 'row-1', 'later-0']);
+  });
+});