@dxos/react-ui-feed 0.11.1

package/src/testing/FeedStory.tsx

@@ -0,0 +1,452 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { random } from '@dxos/random';
+import { IconButton, Input, Panel, ThemedClassName, Toolbar } from '@dxos/react-ui';
+import { Message } from '@dxos/types';
+import { mx } from '@dxos/ui-theme';
+
+import { Outline, type OutlineMarker } from '../components';
+import { type MessageChromeProps, MessageList, useMessageList } from '../components';
+import { type Decoration, DecorationsProvider, ItemSelectionProvider } from '../hooks';
+import { SearchHit, defaultRenderer, searchFeed, sliceFeed, useFeedModel } from '../model';
+import { FeedStats, useFeedDebug } from './debug';
+import { createMessages } from './generator';
+import { type FeedScenario, createScenario } from './scenarios';
+import { createAnswer, textStream } from './stream';
+import { streamTurn } from './turn';
+
+/** Pause between one answer finishing and the next question arriving. */
+const TURN_DELAY = 800;
+
+/** A turn that is only a growing text tail: what every scenario but the assistant chat produces. */
+async function* textTurn(options: { wordsPerChunk: number; chunkDelay: number }) {
+  let text = '';
+  for await (const chunk of textStream(createAnswer(), options)) {
+    text += chunk;
+    yield [{ _tag: 'text' as const, text, pending: true }];
+  }
+  yield [{ _tag: 'text' as const, text }];
+}
+
+const makeQuestion = () =>
+  Message.make({
+    sender: { role: 'user', name: 'Alice' },
+    blocks: [{ _tag: 'text', text: random.lorem.sentence(8) }],
+  });
+
+const makeAnswer = () =>
+  Message.make({
+    sender: { role: 'assistant', name: 'Assistant' },
+    blocks: [{ _tag: 'text', text: '' }],
+  });
+
+//
+// Chrome
+//
+
+/**
+ * Per-message chrome, supplied by the host rather than the engine — the thing a single thread-wide
+ * document cannot do without injecting widgets into its own markdown.
+ */
+const TestChrome = ({ message, index, selected, onSelect, children }: MessageChromeProps) => {
+  const role = message.sender.role ?? 'user';
+  const time = new Date(message.created).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+  return (
+    <div
+      className={mx('group relative grid grid-cols-[2rem_1fr] gap-2 px-2 py-2', selected && 'bg-hover-surface')}
+      data-testid='feed.message'
+    >
+      <div className='flex flex-col items-center gap-1'>
+        <Input.Root>
+          <Input.Checkbox
+            checked={selected}
+            onCheckedChange={() => onSelect(message.id, true)}
+            data-testid='feed.message.select'
+          />
+        </Input.Root>
+      </div>
+
+      {/*
+        Fork / rewind / reply — chrome, not content. Positioned out of flow and toggled by opacity:
+        anything that changes a row's height on hover re-triggers the virtualizer's measurement, and
+        a pointer moving down the list during a scroll then shifts every row below it.
+      */}
+      <div className='absolute right-1 top-1 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
+        <IconButton icon='ph--git-branch--regular' iconOnly label='Fork' variant='ghost' size={3} />
+        <IconButton icon='ph--arrow-counter-clockwise--regular' iconOnly label='Rewind' variant='ghost' size={3} />
+        <IconButton icon='ph--arrow-bend-up-left--regular' iconOnly label='Reply' variant='ghost' size={3} />
+      </div>
+
+      <div className='min-w-0'>
+        <div className='flex items-center gap-2 text-xs text-description'>
+          <span className='font-medium'>{message.sender.name ?? role}</span>
+          <span>{time}</span>
+          <span className='text-subdued'>#{index}</span>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+//
+// Story
+//
+
+export type FeedStoryProps = {
+  /**
+   * Which downstream call site to approximate. Each supplies its own renderer, chrome and follow
+   * behaviour; everything else — the list, virtualization, selection, search — is the same engine.
+   * Omitted, the story runs the synthetic mixed feed the measurements were taken against.
+   */
+  scenario?: FeedScenario;
+  /** Messages of seeded history; 0 starts empty. */
+  count?: number;
+  /** Outline every item and every block inside it; the toolbar toggles it too. */
+  debug?: boolean;
+  /** Begin streaming turns on mount. */
+  streaming?: boolean;
+  wordsPerChunk?: number;
+  chunkDelay?: number;
+  estimateSize?: number;
+  /** Reserve space below the last row so any message can be brought to the top. */
+  scrollPastEnd?: boolean;
+};
+
+/**
+ * The one renderer every `MessageList` story uses; the stories differ only by args.
+ *
+ * Seeded history, a search over the model, message-set selection, and a play control that streams
+ * turns into the tail until stopped — one harness, so a story is a set of arguments rather than
+ * another component to keep in step.
+ */
+export const FeedStory = ({
+  scenario,
+  scrollPastEnd,
+  count = 0,
+  debug: debugProp,
+  streaming: streamingProp = false,
+  wordsPerChunk = 4,
+  chunkDelay = 120,
+  estimateSize,
+}: FeedStoryProps) => {
+  const definition = useMemo(() => (scenario ? createScenario({ scenario, count }) : undefined), [scenario, count]);
+  const [messages, setMessages] = useState<Message.Message[]>(() => definition?.messages ?? createMessages({ count }));
+  const [streaming, setStreaming] = useState(streamingProp);
+  const [answerId, setAnswerId] = useState<string | undefined>();
+  const [selectedIds, setSelectedIds] = useState<ReadonlySet<string>>(new Set());
+  const [copied, setCopied] = useState<string | null>(null);
+  const [query, setQuery] = useState('');
+
+  const hits = useMemo(() => searchFeed(messages, defaultRenderer, query), [messages, query]);
+
+  // Search is a decoration producer, not a list prop (SPEC §Aspects): the ranges reach the items
+  // through the provider below, and the list neither knows nor routes them.
+  const decorations = useMemo<Decoration[]>(
+    () => hits.map(({ messageId, offset, length }) => ({ id: messageId, range: { offset, length }, kind: 'search' })),
+    [hits],
+  );
+
+  // The model owns identity, stops and streaming; the array survives as this adapter (SPEC F-7.3).
+  const isAnchor = definition?.isAnchor;
+  const model = useFeedModel(messages, { stops: isAnchor ?? 'message' });
+
+  // Instrumentation as an aspect: the meter, the sweep, the outlines and the pass label live in
+  // `useFeedDebug` so this component stays about the feed.
+  const { debug, toggleDebug, meter, viewportRef, sweeping, onSweep } = useFeedDebug({
+    scenario,
+    count,
+    estimateSize,
+    streaming,
+    enabled: debugProp,
+  });
+
+  const handleAppend = useCallback(() => setMessages((prev) => [...prev, makeQuestion()]), []);
+
+  const handleReset = useCallback(() => {
+    setStreaming(false);
+    setAnswerId(undefined);
+    setMessages(definition?.messages ?? createMessages({ count }));
+  }, [count, definition]);
+
+  const handleCopy = useCallback(() => {
+    // Copy across message boundaries is reconstructed from the model: unmounted items are not in the
+    // DOM, so a native selection could never have included them.
+    if (messages.length < 3) {
+      return;
+    }
+
+    setCopied(
+      sliceFeed(messages, defaultRenderer, {
+        from: { messageId: messages[0].id, offset: 0 },
+        to: { messageId: messages[2].id, offset: 20 },
+      }),
+    );
+  }, [messages]);
+
+  // Turns keep arriving until stopped: an unbounded conversation is what the list has to survive,
+  // and the only way to watch the follow behave across more than one answer.
+  useEffect(() => {
+    if (!streaming) {
+      return;
+    }
+
+    let cancelled = false;
+    void (async () => {
+      while (!cancelled) {
+        const answer = makeAnswer();
+        setMessages((prev) => [...prev, makeQuestion(), answer]);
+        setAnswerId(answer.id);
+
+        // A chat turn arrives as blocks — status, reasoning, a tool call, then the answer — which is
+        // what makes reconciliation hard: the document shrinks and rewrites as well as grows. Every
+        // other scenario streams a plain text tail, the easy half.
+        const turn =
+          scenario === 'assistant'
+            ? streamTurn({ wordsPerChunk, chunkDelay })
+            : textTurn({ wordsPerChunk, chunkDelay });
+
+        for await (const blocks of turn) {
+          if (cancelled) {
+            return;
+          }
+          setMessages((prev) =>
+            prev.map((message) => (message.id === answer.id ? ({ ...message, blocks } as Message.Message) : message)),
+          );
+        }
+
+        setAnswerId(undefined);
+        await new Promise((resolve) => setTimeout(resolve, TURN_DELAY));
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      // A turn interrupted before its first chunk leaves an empty answer behind, which renders as a
+      // tall blank row. Strict mode runs this teardown on mount, so it is the common case.
+      setMessages((prev) => {
+        const last = prev.at(-1);
+        return last && last.sender.role === 'assistant' && !Message.extractText(last).length ? prev.slice(0, -1) : prev;
+      });
+    };
+  }, [streaming, wordsPerChunk, chunkDelay, scenario]);
+
+  const onSelect = useCallback((id: string, additive: boolean) => {
+    setSelectedIds((current) => {
+      const next = new Set(additive ? current : []);
+      if (additive && next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  return (
+    // Root is headless, so the toolbar and statusbar sit outside the scroll container and still read
+    // the list's state through `useMessageList`. The providers around it are the aspect pattern:
+    // selection and decorations reach the items by id, and the list never sees either.
+    <DecorationsProvider decorations={decorations}>
+      <ItemSelectionProvider selectedIds={selectedIds} onSelect={onSelect}>
+        <MessageList.Root
+          model={model}
+          renderer={definition?.renderer}
+          debug={debug}
+          Chrome={definition?.Chrome ?? TestChrome}
+          Custom={definition?.Custom}
+          registry={definition?.registry}
+          estimateSize={estimateSize ?? definition?.estimateSize}
+          stickyBottom={definition?.stickyBottom ?? true}
+          scrollPastEnd={scrollPastEnd}
+        >
+          <Panel.Root>
+            <Panel.Toolbar asChild>
+              <Toolbar.Root>
+                <IconButton
+                  icon={streaming ? 'ph--stop--regular' : 'ph--play--regular'}
+                  iconOnly
+                  label={streaming ? 'Stop' : 'Start'}
+                  data-testid='feed.stream.toggle'
+                  onClick={() => setStreaming((value) => !value)}
+                />
+                <IconButton
+                  icon='ph--plus--regular'
+                  iconOnly
+                  label='Add message'
+                  data-testid='feed.stream.append'
+                  onClick={handleAppend}
+                />
+                <IconButton icon='ph--trash--regular' iconOnly label='Reset' onClick={handleReset} />
+                <IconButton
+                  icon={debug ? 'ph--bounding-box--fill' : 'ph--bounding-box--regular'}
+                  iconOnly
+                  label={debug ? 'Hide block outlines' : 'Show block outlines'}
+                  data-testid='feed.debug.toggle'
+                  onClick={toggleDebug}
+                />
+                <Toolbar.Separator />
+                <Input.Root>
+                  <Input.TextInput
+                    placeholder='Search…'
+                    value={query}
+                    onChange={(event) => setQuery(event.target.value)}
+                    data-testid='feed.search'
+                  />
+                </Input.Root>
+                <FindButton hits={hits} />
+                <IconButton icon='ph--copy--regular' iconOnly label='Copy range' onClick={handleCopy} />
+                <IconButton
+                  icon={sweeping ? 'ph--stop--regular' : 'ph--arrows-down-up--regular'}
+                  iconOnly
+                  label={sweeping ? 'Stop sweep' : 'Sweep (measure a pass)'}
+                  data-testid='feed.sweep'
+                  onClick={onSweep}
+                />
+                <div className='grow' />
+                <NavButtons />
+              </Toolbar.Root>
+            </Panel.Toolbar>
+
+            <Panel.Content classNames='relative dx-container'>
+              <div className='z-10 absolute left-0 top-0 bottom-0 grid grid-rows-[1fr_4fr_1fr] justify-center'>
+                <FeedOutline classNames='row-start-2' messages={messages} />
+              </div>
+              <MessageList.Viewport classNames='absolute inset-0' padding ref={viewportRef} />
+            </Panel.Content>
+          </Panel.Root>
+          <FeedStats meter={meter} streaming={streaming} selected={selectedIds.size} hits={hits.length} />
+        </MessageList.Root>
+      </ItemSelectionProvider>
+    </DecorationsProvider>
+  );
+};
+
+/**
+ * The outline of a feed: one tick per prompt, in message-index space.
+ *
+ * `OutlineMarker.range` is "the document's own position space", which for a feed is the message
+ * index — so a marker is `[index, index + 1)` and the visible range is the mounted window. No
+ * pixel offsets are involved, which is what makes this survive rows whose heights are still
+ * estimates.
+ */
+const FeedOutline = ({ classNames, messages }: ThemedClassName<{ messages: readonly Message.Message[] }>) => {
+  const { currentIndex, scrollToIndex } = useMessageList('FeedOutline');
+
+  const markers = useMemo<OutlineMarker[]>(() => {
+    // Every prompt is passed; the rail thins them to whatever its height affords.
+    return messages
+      .map((message, index) => ({ message, index }))
+      .filter(({ message }) => message.sender.role === 'user')
+      .map(({ message, index }) => ({
+        id: message.id,
+        title: `#${index} · ${message.sender.name ?? message.sender.role}`,
+        // Tags stripped: an html-kind message's text is markup, which reads as noise in a tooltip.
+        description: Message.extractText(message)
+          .replace(/<[^>]*>/g, ' ')
+          .split('\n')
+          .map((line) => line.trim())
+          .find(Boolean)
+          ?.slice(0, 160),
+        // A tick marks one message, not a span: which one is current is decided below, so the range
+        // stays honest about what the tick points at.
+        range: { from: index, to: index + 1 },
+      }));
+  }, [messages]);
+
+  // Exactly one tick reads as current — the last prompt at or before the cursor. Passing the
+  // mounted window instead would light up whichever ticks happen to fall inside it: none for most
+  // of a sampled rail, two when the window straddles a boundary.
+  const current = useMemo(() => {
+    const marker = [...markers].reverse().find(({ range: { from } }) => from <= currentIndex) ?? markers[0];
+    return marker?.range;
+  }, [markers, currentIndex]);
+
+  const handleSelect = useCallback(
+    (marker: OutlineMarker) => scrollToIndex(marker.range.from, { align: 'start', behavior: 'smooth' }),
+    [scrollToIndex],
+  );
+
+  if (!markers.length) {
+    return <div />;
+  }
+
+  return (
+    <Outline
+      classNames={['justify-self-center', classNames]}
+      markers={markers}
+      visibleRange={current}
+      onSelect={handleSelect}
+    />
+  );
+};
+
+/** Scroll-to-hit lives in the toolbar, outside the viewport — the reason Root is headless. */
+const FindButton = ({ hits }: { hits: readonly SearchHit[] }) => {
+  const { scrollToIndex } = useMessageList('FindButton');
+  const handleFind = useCallback(() => {
+    const hit = hits[0];
+    if (hit) {
+      scrollToIndex(hit.index, { align: 'center', behavior: 'smooth' });
+    }
+  }, [hits, scrollToIndex]);
+
+  return <IconButton icon='ph--magnifying-glass--regular' iconOnly label='Find' onClick={handleFind} />;
+};
+
+/** Move by one message, or to either end, from the list's cursor (what the arrow keys also move). */
+const NavButtons = () => {
+  const { currentIndex: current, count, navigation, scrollToIndex, scrollToBottom } = useMessageList('NavButtons');
+
+  // The same seam the arrow keys use (SPEC F-3.2), so a reader who switches between them does not
+  // change places.
+  const step = navigation.step;
+
+  return (
+    <>
+      <IconButton
+        icon='ph--arrow-line-up--regular'
+        iconOnly
+        label='First message'
+        variant='ghost'
+        disabled={current <= 0}
+        data-testid='feed.nav.top'
+        // Smooth is requested, but a jump across more than a few rows travels towards an estimated
+        // offset, so `scrollToIndex` takes these instantly. Same call, honest either way.
+        onClick={() => scrollToIndex(0, { align: 'start', behavior: 'smooth' })}
+      />
+      <IconButton
+        icon='ph--caret-up--regular'
+        iconOnly
+        label='Previous message'
+        variant='ghost'
+        disabled={current <= 0}
+        data-testid='feed.nav.back'
+        onClick={() => step(-1)}
+      />
+      <IconButton
+        icon='ph--caret-down--regular'
+        iconOnly
+        label='Next message'
+        variant='ghost'
+        disabled={current >= count - 1}
+        data-testid='feed.nav.forward'
+        onClick={() => step(1)}
+      />
+      <IconButton
+        icon='ph--arrow-line-down--regular'
+        iconOnly
+        label='Last message'
+        variant='ghost'
+        disabled={count === 0}
+        data-testid='feed.nav.bottom'
+        onClick={() => scrollToBottom({ behavior: 'smooth' })}
+      />
+    </>
+  );
+};

package/src/testing/MessageWindow.tsx

@@ -0,0 +1,139 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type ComponentType, useCallback, useMemo, useRef, useState } from 'react';
+
+import { Column } from '@dxos/react-ui';
+import { type Message } from '@dxos/types';
+
+import { HtmlBlock, MarkdownBlock, type MessageChromeProps } from '../components';
+import { useListModel } from '../model';
+import { type MessageRenderer, defaultRenderer } from '../model';
+import { Window, type WindowController, type WindowState } from '../virtualizer';
+
+/**
+ * A feed of real messages placed by `Window`, and nothing else.
+ *
+ * The bridge between the placement layer and the thing it has to replace. `placement/*` proves the
+ * shape against boxes that cannot lie about their size; `baseline/*` proves the current engine
+ * against real editors. This is where those meet: the same messages, the same renderer and the same
+ * chrome as a feed, but placed by the new module — so the baseline invariants can be pointed at it
+ * and answer whether the replacement is ready, rather than the question being settled by argument.
+ *
+ * Deliberately *not* wired into `MessageList.Root`. Root owns the follow, the sticky tail, the
+ * anchors and the cursor as well as the virtualizer, so swapping the placement inside it is not a
+ * swap but a reimplementation — and doing that before this exists would leave nothing to check it
+ * against.
+ */
+export type MessageWindowProps = {
+  messages: Message.Message[];
+  renderer?: MessageRenderer;
+  Chrome?: ComponentType<MessageChromeProps>;
+  Custom?: ComponentType<{ content: any; message: Message.Message }>;
+  /** Extent of a row before it has been measured; a function where rows differ widely. */
+  estimateSize?: number | ((message: Message.Message, index: number) => number);
+  gutter?: 'sm' | 'md' | 'lg';
+  /** Keep the last message against the bottom as content arrives — a chat's standing intent. */
+  sticky?: boolean;
+  /**
+   * Empty extent after the last row, so it can be brought to the top of the viewport.
+   *
+   * A number, computed by the host from its own container. Not a `scrollPastEnd` mode: with the
+   * window placed rather than the rows, the reserve is a term in the sizer and nothing else in the
+   * engine knows about it (§7) — which is what the old engine could not say, since its reserve was
+   * a DOM spacer outside the virtualizer's coordinate space.
+   */
+  reserve?: number;
+  onChange?: (state: WindowState) => void;
+  controllerRef?: React.Ref<WindowController>;
+};
+
+const DefaultChrome = ({ children }: MessageChromeProps) => <>{children}</>;
+
+export const MessageWindow = ({
+  messages,
+  renderer = defaultRenderer,
+  Chrome = DefaultChrome,
+  Custom,
+  estimateSize = 120,
+  gutter,
+  sticky,
+  reserve,
+  onChange,
+  controllerRef,
+}: MessageWindowProps) => {
+  const [selectedIds, setSelectedIds] = useState(new Set<string>());
+  const onSelect = useCallback((id: string) => setSelectedIds((current) => new Set(current).add(id)), []);
+
+  const model = useListModel(messages, (message: Message.Message) => message.id);
+  const extents = useMemo(
+    () => ({
+      of: (index: number) => {
+        const message = messages[index];
+        if (!message) {
+          return typeof estimateSize === 'number' ? estimateSize : 120;
+        }
+
+        return typeof estimateSize === 'function' ? estimateSize(message, index) : estimateSize;
+      },
+    }),
+    [messages, estimateSize],
+  );
+
+  return (
+    <Window
+      classNames='h-full'
+      model={model}
+      extents={extents}
+      sticky={sticky}
+      reserve={reserve}
+      onChange={onChange}
+      controllerRef={controllerRef}
+    >
+      {(index) => {
+        const message = messages[index];
+        if (!message) {
+          return null;
+        }
+
+        return (
+          <Column.Root gutter={gutter}>
+            <Column.Center>
+              <Chrome message={message} index={index} selected={selectedIds.has(message.id)} onSelect={onSelect}>
+                <Item content={renderer(message)} message={message} Custom={Custom} />
+              </Chrome>
+            </Column.Center>
+          </Column.Root>
+        );
+      }}
+    </Window>
+  );
+};
+
+/**
+ * The item's content, resolved without the list.
+ *
+ * `MessageList.Item` reads the renderer, the registry, the hits and the widget census from
+ * `MessageList.Root`'s context, so it cannot be rendered outside the very thing this exists to
+ * replace. Repeated here rather than refactored: making the item take its dependencies as props is
+ * the right change and belongs in the retrofit, not in a harness written to measure it.
+ */
+const Item = ({
+  content,
+  message,
+  Custom,
+}: {
+  content: ReturnType<MessageRenderer>;
+  message: Message.Message;
+  Custom?: ComponentType<{ content: any; message: Message.Message }>;
+}) => (
+  <>
+    {content.kind === 'markdown' && <MarkdownBlock text={content.text} />}
+    {content.kind === 'html' && <HtmlBlock html={content.html} />}
+    {content.kind === 'custom' && Custom && <Custom content={content} message={message} />}
+  </>
+);
+
+/** Kept for the stories that drive it; the ref is the same handle `placement/*` uses. */
+export const useMessageWindow = () => useRef<WindowController>(null);

package/src/testing/controls.tsx

@@ -0,0 +1,96 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { EditorState, type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import React, { useLayoutEffect, useRef } from 'react';
+
+import { type Message } from '@dxos/types';
+import {
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+} from '@dxos/ui-editor';
+
+import { MarkdownBlock } from '../components';
+
+/**
+ * Controls for attributing what a row costs to mount.
+ *
+ * `baseline/mount` measures a whole feed with its fixtures already built and finds ~2ms for a row
+ * with no editor against ~15ms for a row with one — while the same editor constructed into an
+ * offscreen container costs 0.4ms (`baseline/construction`). These render the *same* rows through
+ * the same chrome, differing only in what is inside them, so the gap can be attributed rather than
+ * argued about.
+ */
+export type ControlContent = { data?: unknown };
+
+/** The floor: the row's text, and no editor at all. */
+export const TextItem = ({ content }: { content: ControlContent; message: Message.Message }) => (
+  <p className='py-1 text-sm'>{String(content.data ?? '')}</p>
+);
+
+/** An editor with nothing but wrapping: no theme, no keymap, no markdown, no decoration. */
+const BARE: Extension[] = [EditorView.editable.of(false), EditorState.readOnly.of(true), EditorView.lineWrapping];
+
+/** Wrapping plus the theme — the extension the isolated profile shows to be nearly free. */
+const THEMED: Extension[] = [
+  createBasicExtensions({ readOnly: true, editable: false, lineWrapping: true }),
+  createThemeExtensions({ themeMode: 'light' }),
+];
+
+/** The theme plus the markdown language: parsing, but nothing rendered from what it parsed. */
+const MARKDOWN: Extension[] = [...THEMED, createMarkdownExtensions()];
+
+/** Everything the item has bar its highlight layer — headings, lists and links drawn as themselves. */
+const DECORATED: Extension[] = [...MARKDOWN, decorateMarkdown()];
+
+export const BareEditorItem = ({ content }: { content: ControlContent; message: Message.Message }) => (
+  <ProbeEditor text={String(content.data ?? '')} extensions={BARE} />
+);
+
+export const ThemedEditorItem = ({ content }: { content: ControlContent; message: Message.Message }) => (
+  <ProbeEditor text={String(content.data ?? '')} extensions={THEMED} />
+);
+
+export const MarkdownEditorItem = ({ content }: { content: ControlContent; message: Message.Message }) => (
+  <ProbeEditor text={String(content.data ?? '')} extensions={MARKDOWN} />
+);
+
+export const DecoratedEditorItem = ({ content }: { content: ControlContent; message: Message.Message }) => (
+  <ProbeEditor text={String(content.data ?? '')} extensions={DECORATED} />
+);
+
+/**
+ * The real item, reached the same way the probes are.
+ *
+ * The rung that separates *what the editor is configured with* from *what the component does around
+ * it*: everything outside this component is identical to `uniform-decorated`.
+ */
+export const MarkdownProbeItem = ({ content }: { content: ControlContent; message: Message.Message }) => (
+  <MarkdownBlock text={String(content.data ?? '')} />
+);
+
+/**
+ * A deliberate copy of `MarkdownBlock`'s construction, reduced to the part being measured.
+ *
+ * Copied rather than shared: the point of a control is that it does not change when the thing it is
+ * a control for does.
+ */
+const ProbeEditor = ({ text, extensions }: { text: string; extensions: Extension[] }) => {
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const parent = rootRef.current;
+    if (!parent) {
+      return;
+    }
+
+    const view = new EditorView({ parent, state: EditorState.create({ doc: text, extensions }) });
+    return () => view.destroy();
+  }, [text, extensions]);
+
+  return <div ref={rootRef} />;
+};