@bendyline/squisq-editor-react 1.6.2 → 2.0.0

package/src/__tests__/previewControls.test.tsx

@@ -2,7 +2,8 @@
  * @vitest-environment jsdom
  */
 import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { compileTheme } from '@bendyline/squisq/schemas';
 import { EditorProvider, useEditorContext } from '../EditorContext';
 import {
   PreviewModeSwitch,
@@ -10,10 +11,25 @@ import {
   PreviewToolbarControls,
   usePreviewSettings,
 } from '../PreviewControls';
+import { Toolbar } from '../Toolbar';
+import {
+  clearThemeLibrary,
+  CustomThemeProvider,
+  saveLibraryTheme,
+  useDocCustomThemes,
+} from '../customThemes';
 
 function ModeProbe() {
-  const { activeDisplayMode } = usePreviewSettings();
-  return <div data-testid="active-mode">{activeDisplayMode}</div>;
+  const { activeDisplayMode, activeThemeId, activeTransformStyle } = usePreviewSettings();
+  return (
+    <div
+      data-testid="active-mode"
+      data-theme-id={activeThemeId}
+      data-transform-style={activeTransformStyle}
+    >
+      {activeDisplayMode}
+    </div>
+  );
 }
 
 function PreviewHarness() {
@@ -35,6 +51,43 @@ function PreviewToolbarHarness() {
   );
 }
 
+function UseTabHarness() {
+  const { activeView, doc } = useEditorContext();
+  return (
+    <PreviewSettingsProvider doc={doc}>
+      <Toolbar />
+      <ModeProbe />
+      <div data-testid="active-view">{activeView}</div>
+    </PreviewSettingsProvider>
+  );
+}
+
+function LibraryThemeProbe() {
+  const { activeTheme, setSelectedThemeId } = usePreviewSettings();
+  const { markdownSource } = useEditorContext();
+  return (
+    <>
+      <button type="button" onClick={() => setSelectedThemeId('library-theme')}>
+        Select library theme
+      </button>
+      <div data-testid="active-theme-name">{activeTheme.name}</div>
+      <pre data-testid="markdown-source">{markdownSource}</pre>
+    </>
+  );
+}
+
+function LibraryThemeHarness() {
+  const { doc } = useEditorContext();
+  const { docThemes, onDocThemesChange } = useDocCustomThemes();
+  return (
+    <CustomThemeProvider docThemes={docThemes} onDocThemesChange={onDocThemesChange}>
+      <PreviewSettingsProvider doc={doc}>
+        <LibraryThemeProbe />
+      </PreviewSettingsProvider>
+    </CustomThemeProvider>
+  );
+}
+
 function renderPreviewControls(markdown: string) {
   render(
     <EditorProvider initialMarkdown={markdown}>
@@ -51,7 +104,10 @@ function renderPreviewToolbar(markdown: string) {
   );
 }
 
-afterEach(() => cleanup());
+afterEach(() => {
+  cleanup();
+  clearThemeLibrary();
+});
 
 describe('PreviewModeSwitch', () => {
   it('labels the plain document preview as Document and the styled view as Page', () => {
@@ -62,7 +118,8 @@ describe('PreviewModeSwitch', () => {
       .map((button) => button.textContent)
       .filter(Boolean);
 
-    expect(labels).toEqual(['Video', 'Slideshow', 'Page', 'Document']);
+    expect(labels).toEqual(['Slideshow', 'Video', 'Page', 'Document', 'Narrate']);
+    expect(screen.getByTestId('active-mode').textContent).toBe('slideshow');
 
     fireEvent.click(screen.getByRole('button', { name: 'Document' }));
     expect(screen.getByTestId('active-mode').textContent).toBe('page');
@@ -89,9 +146,83 @@ describe('PreviewModeSwitch', () => {
     });
     expect(screen.getByRole('button', { name: 'Page' }).getAttribute('aria-pressed')).toBe('true');
   });
+
+  it('uses the shared squisq-theme, themeId, theme fallback order', async () => {
+    renderPreviewControls('---\nthemeId: bold\ntheme: cinematic\n---\n\n# Hello');
+
+    await waitFor(() => {
+      expect(screen.getByTestId('active-mode').getAttribute('data-theme-id')).toBe('bold');
+    });
+  });
+
+  it('canonicalizes the stored dataDriven transform id', async () => {
+    renderPreviewControls('---\nsquisq-transform: dataDriven\n---\n\n# Hello');
+
+    await waitFor(() => {
+      expect(screen.getByTestId('active-mode').getAttribute('data-transform-style')).toBe(
+        'data-driven',
+      );
+    });
+  });
+
+  it('copies a selected browser-library theme into the document atomically', async () => {
+    saveLibraryTheme(
+      compileTheme({
+        id: 'library-theme',
+        name: 'Library Theme',
+        seedColors: { primary: '#456789' },
+      }),
+    );
+    render(
+      <EditorProvider initialMarkdown="# Hello">
+        <LibraryThemeHarness />
+      </EditorProvider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Select library theme' }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('active-theme-name').textContent).toBe('Library Theme');
+      const source = screen.getByTestId('markdown-source').textContent ?? '';
+      expect(source).toContain('squisq-theme: library-theme');
+      expect(source).toContain('squisq-custom-themes:');
+      expect(source).toContain('library-theme');
+    });
+  });
 });
 
 describe('PreviewToolbarControls', () => {
+  it('presents transforms as summarization without implying the source is changed', () => {
+    const originalResizeObserver = globalThis.ResizeObserver;
+    class ResizeObserverStub implements ResizeObserver {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    }
+
+    globalThis.ResizeObserver = ResizeObserverStub;
+    try {
+      renderPreviewToolbar('# Hello');
+
+      const summarizeLabels = screen.getAllByText('Summarize:');
+      expect(summarizeLabels.length).toBeGreaterThan(0);
+      for (const label of summarizeLabels) {
+        expect(label.getAttribute('title')).toBe(
+          'Extract and summarize content for presentation with these Use modes. Your underlying content is not changed.',
+        );
+      }
+      expect(screen.queryByText('Transform:')).toBeNull();
+      expect(document.querySelector('[role="group"][aria-label="Display mode"]')).toBeNull();
+      expect(document.querySelector('[role="group"][aria-label="Aspect ratio"]')).not.toBeNull();
+    } finally {
+      if (originalResizeObserver) {
+        globalThis.ResizeObserver = originalResizeObserver;
+      } else {
+        Reflect.deleteProperty(globalThis, 'ResizeObserver');
+      }
+    }
+  });
+
   it('keeps the overflow popover inside the left viewport edge', async () => {
     const originalResizeObserver = globalThis.ResizeObserver;
     const originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
@@ -161,3 +292,85 @@ describe('PreviewToolbarControls', () => {
     }
   });
 });
+
+describe('Use tab mode menu', () => {
+  it('lists the Use modes beside the tab and selects a mode without a toolbar radio group', () => {
+    render(
+      <EditorProvider initialMarkdown="# Hello" initialView="wysiwyg" allowRecording={false}>
+        <UseTabHarness />
+      </EditorProvider>,
+    );
+
+    const useTab = screen.getByRole('tab', { name: 'Slideshow' });
+    expect(screen.queryByRole('tab', { name: 'Use' })).toBeNull();
+    const tabGroup = useTab.parentElement;
+    expect(tabGroup).not.toBeNull();
+    expect(within(tabGroup!).getByRole('button', { name: 'Choose Use mode' })).toBeTruthy();
+
+    // The first click enters Use; once active, clicking the tab again opens
+    // the mode menu.
+    fireEvent.click(useTab);
+    expect(screen.getByTestId('active-view').textContent).toBe('preview');
+    expect(screen.queryByRole('menu', { name: 'Use mode' })).toBeNull();
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Slideshow' }));
+
+    const menu = screen.getByRole('menu', { name: 'Use mode' });
+    expect(
+      within(menu)
+        .getAllByRole('menuitemradio')
+        .map((item) => item.querySelector('.squisq-use-mode-menu-label')?.textContent),
+    ).toEqual(['Slideshow', 'Video', 'Page', 'Document', 'Narrate']);
+    const slideshowItem = within(menu).getByRole('menuitemradio', { name: 'Slideshow' });
+    expect(slideshowItem.getAttribute('aria-checked')).toBe('true');
+    expect(within(slideshowItem).getByText('Present designed slides one at a time.')).toBeTruthy();
+
+    fireEvent.click(within(menu).getByRole('menuitemradio', { name: 'Document' }));
+    expect(screen.getByTestId('active-mode').textContent).toBe('page');
+    expect(screen.getByTestId('active-view').textContent).toBe('preview');
+    expect(screen.getByRole('tab', { name: 'Document' })).toBeTruthy();
+    expect(screen.queryByRole('menu', { name: 'Use mode' })).toBeNull();
+  });
+});
+
+describe('Narrate mode gating', () => {
+  function renderWithNarrateGate(markdown: string, allowNarrate: boolean) {
+    render(
+      <EditorProvider initialMarkdown={markdown} allowNarrate={allowNarrate}>
+        <PreviewHarness />
+      </EditorProvider>,
+    );
+  }
+
+  it('selects narrate from the switch and resolves teleprompter frontmatter aliases', async () => {
+    renderPreviewControls('# Hello');
+    fireEvent.click(screen.getByRole('button', { name: 'Narrate' }));
+    expect(screen.getByTestId('active-mode').textContent).toBe('narrate');
+
+    cleanup();
+    renderPreviewControls('---\ndisplay-mode: teleprompter\n---\n\n# Hello');
+    await waitFor(() => {
+      expect(screen.getByTestId('active-mode').textContent).toBe('narrate');
+    });
+    expect(screen.getByRole('button', { name: 'Narrate' }).getAttribute('aria-pressed')).toBe(
+      'true',
+    );
+  });
+
+  it('allowNarrate=false hides the button and clamps frontmatter-forced narrate to video', async () => {
+    renderWithNarrateGate('---\ndisplay-mode: narrate\n---\n\n# Hello', false);
+
+    expect(screen.queryByRole('button', { name: 'Narrate' })).toBeNull();
+    // Give the frontmatter parse a tick, then confirm the clamp held.
+    await waitFor(() => {
+      expect(screen.getByTestId('active-mode').textContent).toBe('video');
+    });
+  });
+
+  it('allowNarrate=true (default) honors frontmatter narrate', async () => {
+    renderWithNarrateGate('---\ndisplay-mode: narrate\n---\n\n# Hello', true);
+    await waitFor(() => {
+      expect(screen.getByTestId('active-mode').textContent).toBe('narrate');
+    });
+  });
+});

package/src/__tests__/previewPanelAudioFailure.test.tsx

@@ -0,0 +1,46 @@
+/** @vitest-environment jsdom */
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { MemoryContentContainer } from '@bendyline/squisq/storage';
+
+const resolveAudioMapping = vi.hoisted(() =>
+  vi.fn(async () => {
+    throw new Error('timing.json is corrupt');
+  }),
+);
+
+vi.mock('@bendyline/squisq/doc', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@bendyline/squisq/doc')>()),
+  resolveAudioMapping,
+}));
+
+import { EditorProvider, useEditorContext } from '../EditorContext';
+import { PreviewSettingsProvider } from '../PreviewControls';
+import { PreviewPanel } from '../PreviewPanel';
+
+function Harness({ container }: { container: MemoryContentContainer }) {
+  const { doc } = useEditorContext();
+  return (
+    <PreviewSettingsProvider doc={doc}>
+      <PreviewPanel workspaceContainer={container} />
+    </PreviewSettingsProvider>
+  );
+}
+
+describe('PreviewPanel optional audio mapping', () => {
+  it('keeps the synchronous preview when audio discovery rejects', async () => {
+    const load = vi.spyOn(HTMLMediaElement.prototype, 'load').mockImplementation(() => undefined);
+    const container = new MemoryContentContainer();
+    const view = render(
+      <EditorProvider initialMarkdown="# Preview\n\nBody" initialView="preview">
+        <Harness container={container} />
+      </EditorProvider>,
+    );
+    await waitFor(() => expect(resolveAudioMapping).toHaveBeenCalled());
+    await waitFor(() => {
+      expect(screen.getByTestId('preview-panel').textContent).not.toContain('No content');
+    });
+    view.unmount();
+    load.mockRestore();
+  });
+});

package/src/__tests__/previewPanelPresentation.test.tsx

@@ -0,0 +1,126 @@
+/** @vitest-environment jsdom */
+
+import { useRef } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { Doc } from '@bendyline/squisq/schemas';
+import type { DocPlayerProps, PlaybackState } from '@bendyline/squisq-react';
+
+vi.mock('@bendyline/squisq-react', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@bendyline/squisq-react')>();
+  const { useEffect } = await import('react');
+  const state: PlaybackState = {
+    isPlaying: false,
+    currentTime: 0,
+    totalDuration: 10,
+    isCoverVisible: true,
+    currentBlockIndex: 0,
+    totalBlocks: 2,
+    docProgress: 0,
+    hasCaptions: false,
+    captionsEnabled: false,
+    captionMode: 'off',
+    currentSegmentIndex: 0,
+    currentSegmentName: null,
+    currentBlock: null,
+  };
+  function MockDocPlayer(props: DocPlayerProps & { doc: Doc }) {
+    const { onPlaybackStateChange, onControlsReady } = props;
+    useEffect(() => {
+      if (props.audioController) return;
+      onPlaybackStateChange?.(state);
+      onControlsReady?.({
+        play: () => undefined,
+        pause: () => undefined,
+        toggle: () => undefined,
+        restart: () => undefined,
+        seekTo: () => undefined,
+        setCaptionsEnabled: () => undefined,
+        cycleCaptionMode: () => undefined,
+      });
+    }, [onControlsReady, onPlaybackStateChange, props.audioController]);
+    return (
+      <div
+        data-testid="mock-doc-player"
+        data-article={props.doc.articleId}
+        data-audience={props.audioController ? 'true' : 'false'}
+        data-controls={props.showControls ? 'true' : 'false'}
+        data-cover={String(props.coverVisible)}
+      />
+    );
+  }
+  return {
+    ...actual,
+    useMediaProvider: () => null,
+    DocPlayer: MockDocPlayer,
+  };
+});
+
+import { EditorProvider, useEditorContext } from '../EditorContext';
+import { PreviewSettingsProvider } from '../PreviewControls';
+import { PreviewPanel } from '../PreviewPanel';
+import {
+  PresentationModeControl,
+  PresentationModeProvider,
+} from '../presentation/PresentationMode';
+
+function Harness() {
+  const { doc } = useEditorContext();
+  const rootRef = useRef<HTMLDivElement>(null);
+  return (
+    <div ref={rootRef}>
+      <PreviewSettingsProvider doc={doc}>
+        <PresentationModeProvider rootRef={rootRef}>
+          <PresentationModeControl />
+          <PreviewPanel />
+        </PresentationModeProvider>
+      </PreviewSettingsProvider>
+    </div>
+  );
+}
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe('PreviewPanel presentation audience', () => {
+  it('renders a clockless, controlled audience follower in the popup', async () => {
+    const popupDocument = document.implementation.createHTMLDocument('');
+    const popupEvents = new EventTarget();
+    let closed = false;
+    const popup = {
+      document: popupDocument,
+      get closed() {
+        return closed;
+      },
+      close: vi.fn(() => {
+        closed = true;
+      }),
+      focus: vi.fn(),
+      addEventListener: popupEvents.addEventListener.bind(popupEvents),
+      removeEventListener: popupEvents.removeEventListener.bind(popupEvents),
+    } as unknown as Window;
+    vi.spyOn(window, 'open').mockReturnValue(popup);
+
+    render(
+      <EditorProvider initialMarkdown="# Audience mirror\n\nBody" initialView="preview">
+        <Harness />
+      </EditorProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByTestId('mock-doc-player')).toBeTruthy());
+    fireEvent.click(screen.getByRole('button', { name: 'Presentation options' }));
+    fireEvent.click(screen.getByRole('menuitemradio', { name: /New window/ }));
+    fireEvent.click(screen.getByRole('button', { name: 'Present: New window' }));
+
+    await waitFor(() => {
+      const audience = popupDocument.querySelector<HTMLElement>(
+        '[data-testid="mock-doc-player"][data-audience="true"]',
+      );
+      expect(audience).toBeTruthy();
+      expect(audience?.dataset.controls).toBe('false');
+      expect(audience?.dataset.cover).toBe('true');
+    });
+  });
+});

package/src/__tests__/previewPanelTransforms.test.tsx

@@ -0,0 +1,117 @@
+/** @vitest-environment jsdom */
+import type { ReactNode } from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import type { Doc } from '@bendyline/squisq/schemas';
+
+vi.mock('@bendyline/squisq-react', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@bendyline/squisq-react')>();
+  const blockSummary = (doc: Doc) =>
+    JSON.stringify(doc.blocks.map((block) => ({ id: block.id, template: block.template })));
+  return {
+    ...actual,
+    useMediaProvider: () => null,
+    DocPlayer: ({ doc }: { doc: Doc }) => (
+      <div data-testid="mock-doc-player">{blockSummary(doc)}</div>
+    ),
+    LinearDocView: ({ doc }: { doc: Doc }) => (
+      <div data-testid="mock-linear-doc">{blockSummary(doc)}</div>
+    ),
+  };
+});
+
+vi.mock('../PlainHtmlPreview', () => ({
+  PlainHtmlPreview: ({ markdown }: { markdown: string }) => (
+    <div data-testid="mock-plain-document">{markdown}</div>
+  ),
+}));
+
+import { EditorProvider, useEditorContext } from '../EditorContext';
+import { PreviewSettingsProvider, usePreviewSettings } from '../PreviewControls';
+import { PreviewPanel } from '../PreviewPanel';
+
+const SOURCE = `---
+title: Metrics Brief
+---
+
+# Metrics Brief {[title]}
+
+This report collects the strongest signals from a year of product work.
+
+## Growth
+
+Revenue increased 42% year over year while customer retention reached 91%.
+
+## Milestone
+
+On January 15, 2026 the team shipped the largest release in company history.
+
+## Customer voice
+
+> "The new workflow saves our team hours every week."
+`;
+
+function TransformButton() {
+  const { setSelectedTransformStyle } = usePreviewSettings();
+  return <button onClick={() => setSelectedTransformStyle('data-driven')}>Summarize now</button>;
+}
+
+function Harness({ children }: { children?: ReactNode }) {
+  const { doc } = useEditorContext();
+  return (
+    <PreviewSettingsProvider doc={doc}>
+      <TransformButton />
+      {children}
+      <PreviewPanel />
+    </PreviewSettingsProvider>
+  );
+}
+
+function renderMode(displayMode?: string) {
+  const source = displayMode
+    ? SOURCE.replace('title: Metrics Brief', `title: Metrics Brief\ndisplay-mode: ${displayMode}`)
+    : SOURCE;
+  return render(
+    <EditorProvider initialMarkdown={source} initialView="preview">
+      <Harness />
+    </EditorProvider>,
+  );
+}
+
+describe('PreviewPanel transform projection', () => {
+  it('replaces the slideshow deck when a summarization style is selected', async () => {
+    renderMode('slideshow');
+    await waitFor(() => expect(screen.getByTestId('mock-doc-player')).toBeTruthy());
+    expect(screen.getByTestId('mock-doc-player').textContent).not.toContain('transform-');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Summarize now' }));
+
+    await waitFor(() =>
+      expect(screen.getByTestId('mock-doc-player').textContent).toContain('transform-'),
+    );
+  });
+
+  it('feeds the transformed content model to Page mode', async () => {
+    renderMode('page');
+    await waitFor(() => expect(screen.getByTestId('mock-linear-doc')).toBeTruthy());
+
+    fireEvent.click(screen.getByRole('button', { name: 'Summarize now' }));
+
+    await waitFor(() =>
+      expect(screen.getByTestId('mock-linear-doc').textContent).toContain('transform-'),
+    );
+  });
+
+  it('feeds readable transformed Markdown to Document mode', async () => {
+    renderMode('document');
+    await waitFor(() => expect(screen.getByTestId('mock-plain-document')).toBeTruthy());
+
+    fireEvent.click(screen.getByRole('button', { name: 'Summarize now' }));
+
+    await waitFor(() => {
+      const markdown = screen.getByTestId('mock-plain-document').textContent ?? '';
+      expect(markdown).toContain('Metrics Brief');
+      expect(markdown).toContain('42%');
+    });
+  });
+});

package/src/__tests__/rawEditorModelIsolation.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+import { canHandleSquisqMediaDrop, ownsMonacoModel } from '../rawEditorIsolation';
+import { SQUISQ_MEDIA_MIME } from '../mediaDragMime';
+
+describe('RawEditor Monaco provider isolation', () => {
+  it('accepts only the model owned by the registering editor', () => {
+    const firstModel = {} as never;
+    const secondModel = {} as never;
+    const firstEditor = { getModel: () => firstModel } as never;
+    expect(ownsMonacoModel(firstEditor, firstModel)).toBe(true);
+    expect(ownsMonacoModel(firstEditor, secondModel)).toBe(false);
+  });
+
+  it('rejects media-bin drops while read-only', () => {
+    const transfer = { types: [SQUISQ_MEDIA_MIME] } as unknown as DataTransfer;
+    expect(canHandleSquisqMediaDrop(true, transfer)).toBe(false);
+    expect(canHandleSquisqMediaDrop(false, transfer)).toBe(true);
+  });
+});

package/src/__tests__/resolveBlockVisual.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest';
+import { DEFAULT_THEME, VIEWPORT_PRESETS } from '@bendyline/squisq/schemas';
+import type { Block, Doc, TextLayer } from '@bendyline/squisq/schemas';
+import { resolveBlockVisual } from '../resolveBlockVisual';
+
+describe('resolveBlockVisual', () => {
+  it('materializes document-scoped custom templates in editor previews', () => {
+    const block: Block = {
+      id: 'custom',
+      startTime: 0,
+      duration: 5,
+      audioSegment: 0,
+      template: 'hero',
+      title: 'Editor custom template',
+    };
+    const doc: Doc = {
+      articleId: 'custom-preview',
+      duration: 5,
+      blocks: [block],
+      audio: { segments: [] },
+      customTemplates: [
+        {
+          name: 'hero',
+          label: 'Hero',
+          viewport: { width: 1920, height: 1080 },
+          layers: [
+            {
+              id: 'hero-title',
+              type: 'text',
+              position: { x: '5%', y: '10%', width: '90%' },
+              content: { text: '{title}', style: { fontSize: 48, color: '#000000' } },
+            },
+          ],
+        },
+      ],
+    };
+
+    const visual = resolveBlockVisual(doc, block, DEFAULT_THEME, VIEWPORT_PRESETS.landscape);
+
+    expect(visual).not.toBeNull();
+    expect((visual?.layers?.[0] as TextLayer).content.text).toBe('Editor custom template');
+  });
+});

package/src/__tests__/statusBar.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { EditorProvider } from '../EditorContext';
+import { StatusBar } from '../StatusBar';
+
+function renderStatusBar(markdown: string) {
+  return render(
+    <EditorProvider initialMarkdown={markdown} articleId="status-bar-test">
+      <StatusBar />
+    </EditorProvider>,
+  );
+}
+
+describe('StatusBar', () => {
+  it('counts nested document blocks, not only top-level roots', async () => {
+    renderStatusBar('# Root\n\n## Child one\n\n### Grandchild\n\n## Child two\n');
+
+    expect(await screen.findByText('4 blocks')).toBeTruthy();
+  });
+
+  it('uses the singular label for one block', async () => {
+    renderStatusBar('# Only block\n');
+
+    expect(await screen.findByText('1 block')).toBeTruthy();
+    expect(screen.queryByText('1 blocks')).toBeNull();
+  });
+});