@dxos/react-ui-markdown 0.8.4-main.c85a9c8dae → 0.8.4-main.cb12b3f963

package/src/MarkdownStream/MarkdownStream.tsx

@@ -0,0 +1,446 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { EditorSelection, type Extension, Transaction } from '@codemirror/state';
+import { type EditorView } from '@codemirror/view';
+import * as Effect from 'effect/Effect';
+import * as Fiber from 'effect/Fiber';
+import * as Queue from 'effect/Queue';
+import * as Stream from 'effect/Stream';
+import React, {
+  forwardRef,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type RefObject,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+import { addEventListener } from '@dxos/async';
+import { runAndForwardErrors } from '@dxos/effect';
+import { ErrorBoundary, type ThemedClassName, useDynamicRef, useStateWithRef, useThemeContext } from '@dxos/react-ui';
+import { useTextEditor, type UseTextEditor } from '@dxos/react-ui-editor';
+import {
+  type AutoScrollProps,
+  type XmlTagsOptions,
+  type XmlWidgetState,
+  type XmlWidgetStateManager,
+  createBasicExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+  extendedMarkdown,
+  navigateNextEffect,
+  navigatePreviousEffect,
+  preview,
+  scroller,
+  scrollerLineEffect,
+  fader,
+  typewriter,
+  typewriterBypass,
+  xmlTagContextEffect,
+  xmlTagResetEffect,
+  xmlTagUpdateEffect,
+  xmlTags,
+  autoScroll,
+  documentSlots,
+  xmlFormatting,
+  xmlBlockDecoration,
+} from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
+import { isTruthy } from '@dxos/util';
+
+import { setFooterVisibleEffect, footer } from './footer';
+import { type StreamerOptions, createStreamer } from './stream';
+export interface MarkdownStreamController extends XmlWidgetStateManager {
+  get length(): number | undefined;
+  focus: () => void;
+  scrollToBottom: (behavior?: ScrollBehavior) => void;
+  navigateNext: () => void;
+  navigatePrevious: () => void;
+  setContext: (context: any) => void;
+  setContent: (text: string) => Promise<void>;
+  append: (text: string) => Promise<void>;
+}
+
+export type MarkdownStreamEvent = {
+  type: 'submit';
+  value: string | null;
+};
+
+export type MarkdownStreamProps = ThemedClassName<
+  {
+    debug?: boolean;
+
+    /** Initial content. */
+    content?: string;
+
+    /** View options. */
+    options?: {
+      autoScroll?: boolean;
+      typewriter?: boolean;
+      cursor?: boolean;
+      fader?: boolean;
+
+      /**
+       * Streaming cadence. See {@link StreamerOptions}.
+       * Use `'word'` or `'character'` to break large source chunks into smaller CM dispatches —
+       * useful when the AI service emits big partial blocks but you want a smoother typewriter
+       * effect. Combine with `streamDelayMs` to add a per-token sleep.
+       * Default: `'span'` (one CM dispatch per source chunk; current behaviour).
+       */
+      streamCadence?: StreamerOptions['chunkSize'];
+
+      /**
+       * Per-token delay (ms) for the streaming queue. Default `0`.
+       */
+      streamDelayMs?: number;
+    };
+
+    /**
+     * Optional React subtree rendered as a CodeMirror block-widget decoration anchored at
+     * `doc.length`. Scrolls with the document content (lives inside `cm-content`'s flow).
+     * Visibility tracks the truthiness of the prop.
+     */
+    footer?: ReactNode;
+
+    /**
+     * Extra CodeMirror extensions appended after the built-in stack — use for keymaps or
+     * other host-level behaviour (e.g. `Mod-d` to toggle debug) that should apply when the
+     * document is focused.
+     */
+    extensions?: Extension;
+
+    /** Event handler. */
+    onEvent?: (event: MarkdownStreamEvent) => void;
+  } & (XmlTagsOptions & AutoScrollProps)
+>;
+
+/**
+ * Codemirror-based markdown editor with xml tag widtgets and streaming support.
+ */
+export const MarkdownStream = forwardRef<MarkdownStreamController | null, MarkdownStreamProps>(
+  ({ classNames, debug, content, options, registry, extensions, footer, onEvent }, forwardedRef) => {
+    // Store current content so that we can toggle debug mode. Default to '' so the
+    // `append()` path (which does `contentRef.current += text`) doesn't concatenate
+    // against `undefined` and stamp `"undefined"` into the transcript snapshot.
+    const contentRef = useRef(content ?? '');
+
+    // DOM node for the footer block widget — populated when its decoration mounts.
+    const [footerRoot, setFooterRoot] = useState<HTMLElement | null>(null);
+
+    // Codemirror editor.
+    const { parentRef, view, viewRef, widgets } = useMarkdownStreamTextEditor(contentRef, {
+      debug,
+      registry,
+      options,
+      extensions,
+      setFooterRoot: footer ? setFooterRoot : undefined,
+    });
+
+    // Show the status footer.
+    const footerVisible = !!footer;
+    useEffect(() => {
+      view?.dispatch({ effects: setFooterVisibleEffect.of(footerVisible) });
+    }, [view, footerVisible]);
+
+    // Streaming text queue.
+    const [queue, setQueue, queueRef] = useStateWithRef(Effect.runSync(Queue.unbounded<string>()));
+
+    // Reset document.
+    const onReset = useCallback(
+      async (text: string) => {
+        contentRef.current = text;
+        if (!viewRef.current) {
+          return;
+        }
+
+        // Set content and scroll to bottom.
+        viewRef.current.dispatch({
+          effects: [xmlTagContextEffect.of(null), xmlTagResetEffect.of(null)],
+          changes: [{ from: 0, to: viewRef.current.state.doc.length, insert: text }],
+          annotations: typewriterBypass.of(true),
+          selection: EditorSelection.cursor(text.length),
+        });
+
+        // New queue.
+        setQueue(Effect.runSync(Queue.unbounded<string>()));
+      },
+      [contentRef, viewRef, setQueue],
+    );
+
+    // Controller API.
+    useImperativeHandle(
+      forwardedRef,
+      () => createMarkdownStreamController({ contentRef, viewRef, queueRef, onReset }),
+      [onReset],
+    );
+
+    // Widget events.
+    useEffect(() => {
+      if (!parentRef.current) {
+        return;
+      }
+
+      // TODO(burdon): Replace this hack with a custom event listener from widgets.
+      return addEventListener(parentRef.current, 'click', (event) => {
+        const button = (event.target as HTMLElement).closest('[data-action="submit"]');
+        if (button?.getAttribute('data-action') === 'submit') {
+          onEvent?.({
+            type: 'submit',
+            value: button.getAttribute('data-value'),
+          });
+        }
+      });
+    }, [view, parentRef, onEvent]);
+
+    // Consume queue and update document.
+    useMarkdownStreamQueue(view, queue, {
+      chunkSize: options?.streamCadence,
+      delayMs: options?.streamDelayMs,
+    });
+
+    // Cleanup.
+    useEffect(() => {
+      return () => {
+        view?.destroy();
+      };
+    }, [view]);
+
+    return (
+      <>
+        {/* Markdown editor. */}
+        <div role='none' className={mx('dx-container', classNames)} ref={parentRef} />
+
+        {/* React widgets are rendered in portals outside of the editor. */}
+        <ErrorBoundary name='markdown-stream'>
+          {widgets.map(({ Component, root, id, props }) => (
+            <div key={id} role='none'>
+              {createPortal(<Component view={view} {...props} />, root)}
+            </div>
+          ))}
+          {footerRoot && footerVisible && createPortal(footer, footerRoot)}
+        </ErrorBoundary>
+      </>
+    );
+  },
+);
+
+type MarkdownStreamTextEditorParams = Pick<MarkdownStreamProps, 'debug' | 'registry' | 'options' | 'extensions'> & {
+  setFooterRoot?: (el: HTMLElement | null) => void;
+};
+
+type MarkdownStreamTextEditorResult = UseTextEditor & {
+  viewRef: RefObject<EditorView | null>;
+  widgets: XmlWidgetState[];
+};
+
+/**
+ * Read-only markdown editor configured for streaming (theme, markdown extensions, XML widgets).
+ */
+const useMarkdownStreamTextEditor = (
+  currentContent: RefObject<string | undefined>,
+  { debug, registry, options, extensions: extraExtensions, setFooterRoot }: MarkdownStreamTextEditorParams,
+): MarkdownStreamTextEditorResult => {
+  const { themeMode } = useThemeContext();
+
+  // Active widgets.
+  const [widgets, setWidgets] = useState<XmlWidgetState[]>([]);
+
+  // Editor.
+  const { view, parentRef } = useTextEditor(() => {
+    const content = currentContent.current;
+    return {
+      initialValue: content,
+      selection: EditorSelection.cursor(content?.length ?? 0),
+      extensions: [
+        createBasicExtensions({
+          lineWrapping: true,
+          readOnly: true,
+        }),
+        createThemeExtensions({
+          slots: documentSlots,
+          scrollbarThin: true,
+          syntaxHighlighting: true,
+          themeMode,
+        }),
+        xmlFormatting({ skip: debug ? [] : ['prompt'] }),
+        !debug &&
+          [
+            extendedMarkdown({ registry }),
+            decorateMarkdown({
+              // `dxn:` links/images are reference widgets owned by `preview()` (PreviewInlineWidget /
+              // PreviewBlockWidget). Skipping them here avoids `decorateMarkdown` adding a
+              // non-functional `LinkButton` anchor on top of the same node — e.g. for
+              // `[DXOS](dxn:echo:BNPMIBEDJLRIILYUYZVM6GT64VWI6WPPZ:01KQ889PZBRNHAEECV0ANFAYX7)`.
+              skip: (node) => (node.name === 'Link' || node.name === 'Image') && node.url.startsWith('dxn:'),
+            }),
+            preview(),
+            // NOTE: An ancestor element must set `data-hue` so `.dx-panel` resolves to the user's
+            // hue tokens (see `packages/ui/ui-theme/src/css/components/panel.css`). Tailwind picks
+            // up these utility classes from this source file.
+            xmlBlockDecoration({
+              tag: 'prompt',
+              lineClass: 'cm-prompt-line my-8',
+              contentClass: 'cm-prompt-bubble dx-panel px-2 py-1.5 rounded-sm [&_*]:text-inherit!',
+              hideTags: true,
+            }),
+            xmlTags({ registry, setWidgets, bookmarks: ['prompt'] }),
+            scroller({ overScroll: 80 }),
+            options?.autoScroll && autoScroll(),
+            options?.typewriter &&
+              typewriter({
+                cursor: options?.cursor,
+                streamingTags: new Set(
+                  Object.entries(registry ?? {})
+                    .filter(([, def]) => def.streaming)
+                    .map(([tag]) => tag),
+                ),
+              }),
+            options?.fader && fader(),
+            setFooterRoot && footer(setFooterRoot),
+          ].filter(isTruthy),
+        extraExtensions,
+      ].filter(isTruthy),
+    };
+  }, [
+    themeMode,
+    registry,
+    debug,
+    options?.autoScroll,
+    options?.typewriter,
+    options?.cursor,
+    options?.fader,
+    extraExtensions,
+  ]);
+
+  const viewRef = useDynamicRef(view);
+  return { view, viewRef, parentRef, widgets };
+};
+
+/**
+ * Consumes streaming text from the queue and appends it to the editor document.
+ */
+const useMarkdownStreamQueue = (
+  view: EditorView | null,
+  queue: Queue.Queue<string>,
+  streamerOptions?: StreamerOptions,
+) => {
+  const chunkSize = streamerOptions?.chunkSize;
+  const delayMs = streamerOptions?.delayMs;
+  useEffect(() => {
+    if (!view) {
+      return;
+    }
+
+    // Consume queue and update document.
+    const fork = Stream.fromQueue(queue).pipe(
+      (source) => createStreamer(source, { chunkSize, delayMs }),
+      Stream.runForEach((text) =>
+        Effect.sync(() => {
+          const scrollTop = view.scrollDOM.scrollTop;
+          view.dispatch({
+            changes: [{ from: view.state.doc.length, insert: text }],
+            annotations: Transaction.remote.of(true),
+            scrollIntoView: false,
+          });
+
+          // Prevent autoscrolling.
+          requestAnimationFrame(() => {
+            view.scrollDOM.scrollTop = scrollTop;
+          });
+        }),
+      ),
+      Effect.runFork,
+    );
+
+    return () => {
+      void runAndForwardErrors(Fiber.interrupt(fork));
+    };
+  }, [view, queue, chunkSize, delayMs]);
+};
+
+type MarkdownStreamControllerDeps = {
+  contentRef: RefObject<string | undefined>;
+  viewRef: RefObject<EditorView | null>;
+  queueRef: RefObject<Queue.Queue<string>>;
+  onReset: (text: string) => Promise<void>;
+};
+
+/**
+ * External controller API.
+ */
+const createMarkdownStreamController = ({
+  contentRef,
+  viewRef,
+  queueRef,
+  onReset,
+}: MarkdownStreamControllerDeps): MarkdownStreamController => {
+  return {
+    get length() {
+      return viewRef.current?.state.doc.length;
+    },
+
+    /** Focus the editor. */
+    focus: () => {
+      viewRef.current?.focus();
+    },
+
+    /** Scroll to bottom. */
+    scrollToBottom: (behavior?: ScrollBehavior) => {
+      viewRef.current?.dispatch({
+        effects: scrollerLineEffect.of({ line: -1, behavior }),
+      });
+    },
+
+    /** Navigate previous prompt. */
+    navigatePrevious: () => {
+      viewRef.current?.dispatch({
+        effects: navigatePreviousEffect.of(),
+      });
+    },
+
+    /** Navigate next prompt. */
+    navigateNext: () => {
+      viewRef.current?.dispatch({
+        effects: navigateNextEffect.of(),
+      });
+    },
+
+    /** Set the context for widgets (XML tags). */
+    setContext: (context: any) => {
+      viewRef.current?.dispatch({
+        effects: xmlTagContextEffect.of(context),
+      });
+    },
+
+    /** Reset document. */
+    setContent: onReset,
+
+    /** Append to queue (and stream). */
+    append: async (text: string) => {
+      contentRef.current += text;
+      if (text.length) {
+        // Always go through the streaming queue, even when the doc starts empty. Skipping the
+        // queue in that case (via `onReset`) bypasses the `typewriter` extension's transaction filter
+        // and the first chunk lands in one CM dispatch — defeating the typewriter for any
+        // consumer (e.g. ChatThread) where the first delta is large because upstream batching
+        // collected several streaming partials before React rendered.
+        const queue = queueRef.current;
+        if (queue) {
+          await runAndForwardErrors(Queue.offer(queue, text));
+        }
+      }
+    },
+
+    /** Update widget state. */
+    updateWidget: (id: string, value: any) => {
+      viewRef.current?.dispatch({
+        effects: xmlTagUpdateEffect.of({ id, value }),
+      });
+    },
+  } satisfies MarkdownStreamController;
+};

package/src/MarkdownStream/footer.ts

@@ -0,0 +1,119 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Extension, StateEffect, StateField } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, WidgetType } from '@codemirror/view';
+
+import { Domino } from '@dxos/ui';
+import { typewriterDrainingEffect } from '@dxos/ui-editor';
+
+/**
+ * Host-controlled visibility intent. The footer block widget is rendered only when this is
+ * `true` AND typewriter is not actively draining its typewriter buffer — the latter is observed
+ * through {@link typewriterDrainingEffect}. Removing the decoration during a drip avoids the
+ * scroll-measure conflict between CM's view-line model and the floating absolute child.
+ */
+export const setFooterVisibleEffect = StateEffect.define<boolean>();
+
+type FooterState = {
+  /** Host wants the footer rendered. */
+  wanted: boolean;
+  /** Typewriter is actively dripping into the document. */
+  draining: boolean;
+  decorations: DecorationSet;
+};
+
+/**
+ * Renders a host-supplied React subtree as a CodeMirror block widget anchored at
+ * `doc.length`. The widget lives inside the document, so it scrolls with content.
+ *
+ * Toggle the host-intent visibility via {@link setFooterVisibleEffect}. The widget is also
+ * automatically removed while {@link typewriterDrainingEffect} reports `true` and re-mounted
+ * once the typewriter's buffer drains — this prevents the block widget from interfering with CM's
+ * view-line measurement during the typewriter drip.
+ *
+ * For pure doc edits (no visibility transition), the decoration's position is mapped
+ * through the change set so insertions at the end translate the anchor without destroying
+ * the widget's DOM.
+ */
+export const footer = (setRoot: (el: HTMLElement | null) => void): Extension => {
+  const widget = new FooterWidget(setRoot);
+  const buildSet = (length: number): DecorationSet =>
+    Decoration.set([Decoration.widget({ widget, block: true, side: 1 }).range(length)]);
+
+  const field = StateField.define<FooterState>({
+    create: () => ({ wanted: false, draining: false, decorations: Decoration.none }),
+    update: (state, tr) => {
+      let { wanted, draining, decorations } = state;
+      for (const effect of tr.effects) {
+        if (effect.is(setFooterVisibleEffect)) {
+          wanted = effect.value;
+        }
+        if (effect.is(typewriterDrainingEffect)) {
+          draining = effect.value;
+        }
+      }
+
+      // Also gate on the document being non-empty: there's nothing for the footer to anchor
+      // below, and rendering it on a blank doc looks like detached chrome.
+      const docLength = tr.state.doc.length;
+      const visible = wanted && !draining && docLength > 0;
+      const wasVisible = decorations.size > 0;
+      if (visible !== wasVisible) {
+        decorations = visible ? buildSet(docLength) : Decoration.none;
+      } else if (tr.docChanged && decorations.size > 0) {
+        // Position-map the existing decoration so insertions at the end translate the
+        // widget anchor without destroying the DOM (`widget.eq` is identity-true).
+        decorations = decorations.map(tr.changes);
+      }
+
+      return { wanted, draining, decorations };
+    },
+    provide: (f) => EditorView.decorations.from(f, (state) => state.decorations),
+  });
+
+  return [field];
+};
+
+/**
+ * Block widget rendered at the end of the document. The DOM element is reported via
+ * `setRoot` so the host React component can `createPortal` arbitrary content into it.
+ */
+class FooterWidget extends WidgetType {
+  constructor(private readonly _setRoot: (el: HTMLElement | null) => void) {
+    super();
+  }
+
+  // Singleton equality so CM keeps the same DOM element across decoration rebuilds —
+  // the React subtree portaled into it is not unmounted on every doc change.
+  override eq(_other: this): boolean {
+    return true;
+  }
+
+  override ignoreEvent(): boolean {
+    return true;
+  }
+
+  override toDOM(): HTMLElement {
+    // The outer block-widget element is `position: relative` with zero flow height so it
+    // does not push the document layout (autoScroll, line measurement, etc. ignore it).
+    // The inner element is `position: absolute`, taking the React subtree out of flow — it
+    // renders as a floating layer anchored to the doc tail without consuming space.
+    const inner = Domino.of('div')
+      .classNames('cm-stream-footer-content')
+      .style({ position: 'absolute', left: '0', top: '0' });
+
+    const el = Domino.of('div')
+      .classNames('cm-stream-footer')
+      .style({ position: 'relative', height: '0' })
+      .append(inner);
+
+    this._setRoot(inner.root);
+    return el.root;
+  }
+
+  override destroy(): void {
+    this._setRoot(null);
+  }
+}

package/src/MarkdownStream/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './stream';
+export * from './testing';
+
+export * from './MarkdownStream';

package/src/MarkdownStream/stream.test.ts

@@ -0,0 +1,126 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe, it } from '@effect/vitest';
+import * as Effect from 'effect/Effect';
+import * as Stream from 'effect/Stream';
+import * as TestContext from 'effect/TestContext';
+
+import { type StreamerOptions, createStreamer, splitFragments, splitSentences, splitSpans } from './stream';
+
+describe('stream', () => {
+  it.effect('tokenize tags', ({ expect }) =>
+    Effect.gen(function* () {
+      {
+        expect(splitSpans('A\n<test />\nB')).toEqual(['A\n', '<test />', '\nB']);
+        expect(splitSpans('A\n<test>hello</test>\nB')).toEqual(['A\n', '<test>', 'hello', '</test>', '\nB']);
+      }
+    }),
+  );
+
+  it.effect('tokenize fragments', ({ expect }) =>
+    Effect.gen(function* () {
+      {
+        expect(splitFragments('A\n<toolkit />\nB')).toEqual(['A\n', '<toolkit />', '\nB']);
+        expect(splitFragments('A\n<suggestion>Test</suggestion>\nB')).toEqual([
+          'A\n',
+          '<suggestion>Test</suggestion>',
+          '\nB',
+        ]);
+        expect(splitFragments('A\n<select><option /><option>Test</option></select>\nB')).toEqual([
+          'A\n',
+          '<select><option /><option>Test</option></select>',
+          '\nB',
+        ]);
+        // Hyphenated custom element names must resolve to the correct closing tag.
+        expect(splitFragments('A\n<dom-widget>Hello</dom-widget>\nB')).toEqual([
+          'A\n',
+          '<dom-widget>Hello</dom-widget>',
+          '\nB',
+        ]);
+      }
+    }),
+  );
+
+  it.effect('split sentences', ({ expect }) =>
+    Effect.gen(function* () {
+      expect(splitSentences('Hello world. What a nice day!\nLooking great.')).toEqual([
+        'Hello world. ',
+        'What a nice day!\n',
+        'Looking great.',
+      ]);
+    }),
+  );
+
+  it.effect('stream char-by-char with tags', ({ expect }) =>
+    Effect.gen(function* () {
+      const text = 'Hello <b>World</b>!';
+      const result = yield* testStreamer(text);
+      expect(result).toEqual(['Hello ', '<b>World</b>', '!']);
+    }).pipe(Effect.provide(TestContext.TestContext)),
+  );
+
+  it.effect('stream keeps hyphenated custom elements intact', ({ expect }) =>
+    Effect.gen(function* () {
+      const text = 'Before <dom-widget>Hello</dom-widget> after';
+      const result = yield* testStreamer(text);
+      expect(result).toEqual(['Before ', '<dom-widget>Hello</dom-widget>', ' after']);
+    }).pipe(Effect.provide(TestContext.TestContext)),
+  );
+
+  it.effect('stream with self-closing tags', ({ expect }) =>
+    Effect.gen(function* () {
+      const text = 'Hello<br/>world<img src="test.jpg"/>';
+      const result = yield* testStreamer(text);
+      expect(result).toEqual(['Hello', '<br/>', 'world', '<img src="test.jpg"/>']);
+    }).pipe(Effect.provide(TestContext.TestContext)),
+  );
+
+  it.effect('stream with incomplete tag fragment', ({ expect }) =>
+    Effect.gen(function* () {
+      const text = 'Hello <div class="test';
+      const result = yield* testStreamer(text);
+      expect(result).toEqual(['Hello ', '<div class="test']);
+    }).pipe(Effect.provide(TestContext.TestContext)),
+  );
+
+  // chunkSize: 'word' subdivides plain-text spans at whitespace boundaries while keeping XML
+  // fragments atomic, so widgets still mount on a single CM dispatch.
+  it.effect('chunkSize "word" splits text spans into words and whitespace runs', ({ expect }) =>
+    Effect.gen(function* () {
+      const result = yield* testStreamer('Hello brave new <b>world</b>!', { chunkSize: 'word' });
+      expect(result).toEqual(['Hello', ' ', 'brave', ' ', 'new', ' ', '<b>world</b>', '!']);
+    }).pipe(Effect.provide(TestContext.TestContext)),
+  );
+
+  // chunkSize: 'character' is the smallest cadence — one CM dispatch per character of plain
+  // text. XML fragments are still atomic.
+  it.effect('chunkSize "character" splits text spans char-by-char and keeps tags atomic', ({ expect }) =>
+    Effect.gen(function* () {
+      const result = yield* testStreamer('Hi <b>X</b>!', { chunkSize: 'character' });
+      expect(result).toEqual(['H', 'i', ' ', '<b>X</b>', '!']);
+    }).pipe(Effect.provide(TestContext.TestContext)),
+  );
+
+  // Default `chunkSize: 'span'` preserves the original behaviour — tests above already cover it.
+  it.effect('chunkSize defaults to "span"', ({ expect }) =>
+    Effect.gen(function* () {
+      const result = yield* testStreamer('Hello world');
+      expect(result).toEqual(['Hello world']);
+    }).pipe(Effect.provide(TestContext.TestContext)),
+  );
+});
+
+const testStreamer = (text: string, options?: StreamerOptions) =>
+  Effect.gen(function* () {
+    const result: string[] = [];
+
+    // Create a stream from the single text value.
+    yield* Stream.make(text).pipe(
+      (source) => createStreamer(source, options),
+      Stream.runForEach((text) => Effect.sync(() => result.push(text))),
+    );
+
+    return result;
+  });