@bendyline/squisq-editor-react 1.6.2 → 2.0.0

package/src/__tests__/teleprompter.test.tsx

@@ -0,0 +1,190 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { parseMarkdown } from '@bendyline/squisq/markdown';
+import { markdownToDoc } from '@bendyline/squisq/doc';
+import { buildNarrationScript } from '@bendyline/squisq/narration';
+import { DEFAULT_THEME } from '@bendyline/squisq/schemas';
+import { TeleprompterView } from '../teleprompter/TeleprompterView';
+import { stepScroll, targetOffsetFor, type TokenLineMap } from '../teleprompter/scrollModel';
+import { detectFloatTiers } from '../teleprompter/floatingWindow';
+import { PCM_WORKLET_SOURCE, PCM_WORKLET_NAME } from '../teleprompter/pcmWorklet';
+import { vadConfigForSensitivity } from '../teleprompter/useTeleprompter';
+
+const MD = `# First Section
+
+One two three four five six seven eight.
+
+## Second Section
+
+Nine ten eleven twelve.
+`;
+
+afterEach(() => {
+  cleanup();
+  // Prefs persist to localStorage; keep tests order-independent.
+  window.localStorage.removeItem('squisq:teleprompter-prefs');
+});
+
+describe('scrollModel', () => {
+  const lines: TokenLineMap = {
+    tokenTops: [0, 0, 0, 60, 60, 120, 120, 180],
+    tokenHeights: [60, 60, 60, 60, 60, 60, 60, 60],
+  };
+
+  it('places the active line at the eye-line', () => {
+    // Token 5 sits at top 120; eye-line = 35% of 600 = 210 → offset keeps it clamped ≥ 0.
+    expect(targetOffsetFor(5, lines, 600)).toBe(0);
+    // Smaller viewport pushes real scrolling: 120 + 30 − 0.35×200 = 80.
+    expect(targetOffsetFor(5, lines, 200)).toBe(80);
+    // Fractional positions interpolate between token tops.
+    expect(targetOffsetFor(4.5, lines, 200)).toBe(60 + 30 + 30 - 70);
+  });
+
+  it('clamps to non-negative offsets and empty maps', () => {
+    expect(targetOffsetFor(0, lines, 600)).toBe(0);
+    expect(targetOffsetFor(3, { tokenTops: [], tokenHeights: [] }, 600)).toBe(0);
+  });
+
+  it('stepScroll approaches the target and respects the speed clamp', () => {
+    // A huge jump advances by at most maxPxPerSec × dt.
+    expect(stepScroll(0, 100000, 16, 2600)).toBeCloseTo(2600 * 0.016, 5);
+    // Small distances converge and snap exactly.
+    let offset = 0;
+    for (let i = 0; i < 120; i++) offset = stepScroll(offset, 300, 16);
+    expect(offset).toBe(300);
+    // No time → no movement.
+    expect(stepScroll(50, 300, 0)).toBe(50);
+  });
+});
+
+describe('detectFloatTiers', () => {
+  it('reports popup + docked under jsdom (no PiP APIs)', () => {
+    const tiers = detectFloatTiers();
+    expect(tiers).toContain('popup');
+    expect(tiers[tiers.length - 1]).toBe('docked');
+    expect(tiers).not.toContain('document-pip');
+    expect(tiers).not.toContain('video-pip');
+  });
+
+  it('reports document-pip first when the API exists', () => {
+    const win = window as Window & { documentPictureInPicture?: unknown };
+    win.documentPictureInPicture = { requestWindow: () => Promise.reject(new Error('stub')) };
+    try {
+      expect(detectFloatTiers()[0]).toBe('document-pip');
+    } finally {
+      delete win.documentPictureInPicture;
+    }
+  });
+});
+
+describe('pcmWorklet source', () => {
+  it('compiles under stubbed worklet globals and registers the tap', () => {
+    const registered: string[] = [];
+    const factory = new Function(
+      'registerProcessor',
+      'AudioWorkletProcessor',
+      'currentTime',
+      PCM_WORKLET_SOURCE,
+    );
+    class ProcessorStub {
+      port = { postMessage: () => undefined };
+    }
+    factory((name: string) => registered.push(name), ProcessorStub, 0);
+    expect(registered).toEqual([PCM_WORKLET_NAME]);
+    expect(PCM_WORKLET_SOURCE).toContain('process(inputs)');
+  });
+});
+
+describe('vadConfigForSensitivity', () => {
+  it('maps 0.5 to the engine defaults and keeps hysteresis ordering', () => {
+    const mid = vadConfigForSensitivity(0.5);
+    expect(mid.enterRatio).toBeCloseTo(3.0, 5);
+    for (const s of [0, 0.25, 0.5, 0.75, 1]) {
+      const cfg = vadConfigForSensitivity(s);
+      expect(cfg.enterRatio!).toBeGreaterThan(cfg.exitRatio! - 1e-9);
+    }
+    // Higher sensitivity → lower (easier) enter threshold.
+    expect(vadConfigForSensitivity(0.9).enterRatio!).toBeLessThan(
+      vadConfigForSensitivity(0.1).enterRatio!,
+    );
+  });
+});
+
+describe('TeleprompterView', () => {
+  function renderView(markdown: string | null) {
+    const doc = markdown ? markdownToDoc(parseMarkdown(markdown)) : null;
+    render(<TeleprompterView doc={doc} theme={DEFAULT_THEME} />);
+    return doc;
+  }
+
+  it('renders one span per script token plus block markers and controls', () => {
+    const doc = renderView(MD);
+    const script = buildNarrationScript(doc!);
+    const spans = document.querySelectorAll('[data-token-idx]');
+    expect(spans.length).toBe(script.tokens.length);
+    expect(
+      screen.getByText('First Section', { selector: '.squisq-teleprompter-block-marker' }),
+    ).toBeTruthy();
+    expect(screen.getByTestId('teleprompter-controls')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Start prompter' })).toBeTruthy();
+  });
+
+  it('mirrors the live surface into a presentation target without duplicating controls', () => {
+    const doc = markdownToDoc(parseMarkdown(MD));
+    const audienceDocument = document.implementation.createHTMLDocument('Audience');
+    const audienceTarget = audienceDocument.createElement('div');
+    audienceDocument.body.appendChild(audienceTarget);
+
+    render(
+      <TeleprompterView doc={doc} theme={DEFAULT_THEME} presentationTarget={audienceTarget} />,
+    );
+
+    expect(audienceTarget.querySelector('[aria-label="Audience presentation"]')).toBeTruthy();
+    expect(audienceTarget.querySelectorAll('[data-token-idx]').length).toBe(
+      buildNarrationScript(doc).tokens.length,
+    );
+    expect(audienceTarget.querySelector('[data-testid="teleprompter-controls"]')).toBeNull();
+    expect(screen.getAllByTestId('teleprompter-controls')).toHaveLength(1);
+  });
+
+  it('shows an empty state for an empty doc', () => {
+    renderView(null);
+    expect(screen.getByText(/Nothing to narrate yet/)).toBeTruthy();
+    expect(screen.queryByTestId('teleprompter-controls')).toBeNull();
+  });
+
+  it('mirrors the empty state into a presentation target', () => {
+    const audienceDocument = document.implementation.createHTMLDocument('Audience');
+    const audienceTarget = audienceDocument.createElement('div');
+    audienceDocument.body.appendChild(audienceTarget);
+
+    render(
+      <TeleprompterView doc={null} theme={DEFAULT_THEME} presentationTarget={audienceTarget} />,
+    );
+
+    expect(audienceTarget.querySelector('[aria-label="Audience presentation"]')).toBeTruthy();
+    expect(audienceTarget.textContent).toContain('Nothing to narrate yet');
+    expect(audienceTarget.querySelector('[data-testid="teleprompter-controls"]')).toBeNull();
+  });
+
+  it('start button enters countdown and Escape cancels back to stopped', () => {
+    renderView(MD);
+    fireEvent.click(screen.getByRole('button', { name: 'Start prompter' }));
+    // Default prefs use a 3 s countdown → the overlay digit appears.
+    expect(document.querySelector('.squisq-teleprompter-countdown-digit')?.textContent).toBe('3');
+    fireEvent.keyDown(screen.getByTestId('teleprompter-view'), { key: 'Escape' });
+    expect(document.querySelector('.squisq-teleprompter-countdown-digit')).toBeNull();
+    expect(screen.getByRole('button', { name: 'Start prompter' })).toBeTruthy();
+  });
+
+  it('mirror toggle flips the surface class', () => {
+    renderView(MD);
+    const surface = screen.getByTestId('teleprompter-surface');
+    expect(surface.className).not.toContain('--mirrored');
+    fireEvent.click(screen.getByRole('button', { name: '⇋ Mirror' }));
+    expect(screen.getByTestId('teleprompter-surface').className).toContain('--mirrored');
+  });
+});

package/src/__tests__/templateAnnotationRoundTrip.test.ts

@@ -2,6 +2,15 @@ import { describe, it, expect } from 'vitest';
 import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
 
 describe('Template annotation round-trip', () => {
+  it('hides an empty annotation in Write view while preserving it on round-trip', () => {
+    const original = '## Getting Started {[]}';
+    const html = markdownToTiptap(original);
+
+    expect(html).toContain('data-template-empty="true"');
+    expect(html).not.toContain('{[]}');
+    expect(tiptapToMarkdown(html).trim()).toBe(original);
+  });
+
   it('extracts {[template]} into data-template on markdownToTiptap', () => {
     const html = markdownToTiptap('## Getting Started {[comparisonBar]}');
     expect(html).toContain('data-template="comparisonBar"');
@@ -16,6 +25,23 @@ describe('Template annotation round-trip', () => {
     expect(back.trim()).toBe(original);
   });
 
+  it('preserves a heading whose last word is also the template label', () => {
+    const original = '### A Famous Quote {[quote]}';
+    const html = markdownToTiptap(original);
+
+    expect(tiptapToMarkdown(html).trim()).toBe(original);
+  });
+
+  it('ignores legacy text rendered inside a template badge', () => {
+    const tiptapRendered =
+      '<h3 data-template="quote">' +
+      '<span class="squisq-heading-content">A Famous Quote</span>' +
+      '<span class="squisq-template-badge" contenteditable="false">Quote</span>' +
+      '</h3>';
+
+    expect(tiptapToMarkdown(tiptapRendered).trim()).toBe('### A Famous Quote {[quote]}');
+  });
+
   it('round-trips param-only squiggly annotations', () => {
     const original = '## Intro {[transition=fade]}';
     const html = markdownToTiptap(original);

package/src/__tests__/templatePickerPortal.test.tsx

@@ -0,0 +1,62 @@
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { TEMPLATE_GALLERY_PORTAL_SELECTOR, TemplateBadgePopover } from '../TemplatePicker';
+
+const anchorRect = new DOMRect(20, 20, 80, 24);
+const originalElementsFromPoint = document.elementsFromPoint;
+
+function badge(key: string) {
+  return (
+    <TemplateBadgePopover
+      key={key}
+      anchorRect={anchorRect}
+      value=""
+      onChange={vi.fn()}
+      onClose={vi.fn()}
+    />
+  );
+}
+
+beforeEach(() => {
+  Object.defineProperty(document, 'elementsFromPoint', {
+    configurable: true,
+    value: () => [],
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  Object.defineProperty(document, 'elementsFromPoint', {
+    configurable: true,
+    value: originalElementsFromPoint,
+  });
+});
+
+describe('template gallery portal ids', () => {
+  it('uses an instance-scoped id for a single open heading-badge gallery', () => {
+    render(badge('only'));
+
+    const gallery = document.querySelector(TEMPLATE_GALLERY_PORTAL_SELECTOR);
+    expect(gallery).not.toBeNull();
+    expect(gallery?.id).toMatch(/^squisq-template-gallery-portal-\S+$/);
+    expect(gallery?.id).not.toBe('squisq-template-gallery-portal');
+  });
+
+  it('keeps concurrent editor galleries unique and preserves the survivor id', () => {
+    const view = render(
+      <>
+        {badge('first')}
+        {badge('second')}
+      </>,
+    );
+
+    const galleries = [...document.querySelectorAll(TEMPLATE_GALLERY_PORTAL_SELECTOR)];
+    expect(galleries).toHaveLength(2);
+    expect(new Set(galleries.map((gallery) => gallery.id)).size).toBe(2);
+    const survivorId = galleries[1].id;
+
+    view.rerender(<>{badge('second')}</>);
+    const survivor = document.querySelector(TEMPLATE_GALLERY_PORTAL_SELECTOR);
+    expect(survivor?.id).toBe(survivorId);
+  });
+});

package/src/__tests__/tiptapBridge.test.ts

@@ -283,6 +283,29 @@ describe('tiptapToMarkdown', () => {
     expect(md).toContain('plain code');
   });
 
+  it('converts code blocks when <pre> carries attributes (real getHTML shape)', () => {
+    // StarterKit is configured with codeBlock HTMLAttributes, so real
+    // editor.getHTML() output puts class="squisq-code-block" on <pre>.
+    const md = tiptapToMarkdown(
+      '<pre class="squisq-code-block"><code class="language-js">const x = 1;</code></pre>',
+    );
+    expect(md).toContain('```js');
+    expect(md).toContain('const x = 1;');
+  });
+
+  it('converts attribute-bearing code blocks without language', () => {
+    const md = tiptapToMarkdown('<pre class="squisq-code-block"><code>plain code</code></pre>');
+    expect(md).toContain('```\nplain code\n```');
+  });
+
+  it('extracts language regardless of surrounding attributes on <code>', () => {
+    const md = tiptapToMarkdown(
+      '<pre class="squisq-code-block"><code spellcheck="false" class="language-python">x = 1</code></pre>',
+    );
+    expect(md).toContain('```python');
+    expect(md).toContain('x = 1');
+  });
+
   it('converts blockquotes', () => {
     const md = tiptapToMarkdown('<blockquote><p>A wise quote</p></blockquote>');
     expect(md).toContain('> ');

package/src/__tests__/tiptapCodeBlockRoundTrip.test.ts

@@ -0,0 +1,109 @@
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { describe, expect, it } from 'vitest';
+import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
+import { HeadingWithTemplate } from '../TemplateAnnotation';
+
+/**
+ * Code-fence round-trip through a REAL tiptap editor.
+ *
+ * The string-level bridge tests feed hand-written `<pre><code>` HTML, but
+ * the production editor configures StarterKit's codeBlock with
+ * `HTMLAttributes: { class: 'squisq-code-block' }`, which tiptap renders
+ * onto the <pre>. The serializer regex used to require a bare `<pre><code`
+ * and silently dropped every fence on save. These tests exercise the real
+ * `getHTML()` output so that shape can never regress unnoticed.
+ */
+
+function roundTripThroughEditor(md: string): string {
+  const editor = new Editor({
+    extensions: [
+      StarterKit.configure({
+        heading: false,
+        codeBlock: { HTMLAttributes: { class: 'squisq-code-block' } },
+      }),
+      HeadingWithTemplate.configure({ levels: [1, 2, 3, 4, 5, 6] }),
+    ],
+    content: markdownToTiptap(md),
+  });
+  const html = editor.getHTML();
+  editor.destroy();
+  return tiptapToMarkdown(html);
+}
+
+describe('code fences through a real editor (getHTML → markdown)', () => {
+  it('emits class="squisq-code-block" on <pre> (the shape the serializer must accept)', () => {
+    const editor = new Editor({
+      extensions: [
+        StarterKit.configure({
+          heading: false,
+          codeBlock: { HTMLAttributes: { class: 'squisq-code-block' } },
+        }),
+        HeadingWithTemplate.configure({ levels: [1, 2, 3, 4, 5, 6] }),
+      ],
+      content: markdownToTiptap('```js\nconst x = 1;\n```\n'),
+    });
+    const html = editor.getHTML();
+    editor.destroy();
+    expect(html).toContain('<pre class="squisq-code-block">');
+  });
+
+  it('round-trips a fence with a language byte-for-byte', () => {
+    const md = '```js\nconst x = 1;\n```\n';
+    expect(roundTripThroughEditor(md)).toBe(md);
+  });
+
+  it('round-trips a fence without a language byte-for-byte', () => {
+    const md = '```\nplain text content\n```\n';
+    expect(roundTripThroughEditor(md)).toBe(md);
+  });
+
+  it('round-trips a fence surrounded by prose', () => {
+    const md = 'Before the code.\n\n```python\nprint("hi")\n```\n\nAfter the code.\n';
+    expect(roundTripThroughEditor(md)).toBe(md);
+  });
+
+  it('round-trips HTML-significant characters inside a fence', () => {
+    const md = '```\nif (a < b && c > d) { echo "&nbsp;"; }\n```\n';
+    expect(roundTripThroughEditor(md)).toBe(md);
+  });
+
+  it('round-trips trailing spaces inside fence lines', () => {
+    const md = '```\nline with trailing   \nspaces\n```\n';
+    expect(roundTripThroughEditor(md)).toBe(md);
+  });
+
+  it('round-trips a blank last line inside a fence', () => {
+    const md = '```\nfoo\n\n```\n';
+    expect(roundTripThroughEditor(md)).toBe(md);
+  });
+
+  it('round-trips Unicode box-drawing art byte-for-byte', () => {
+    const md = [
+      '```',
+      '┌────────┐    ┌────────┐',
+      '│  CLI   │    │  MCP   │',
+      '└───┬────┘    └───┬────┘',
+      '    │             │',
+      '    ▼             ▼',
+      '┌──────────────────────┐',
+      '│        kernel        │',
+      '└──────────────────────┘',
+      '```',
+      '',
+    ].join('\n');
+    expect(roundTripThroughEditor(md)).toBe(md);
+  });
+
+  it('round-trips +--+ ASCII art byte-for-byte', () => {
+    const md = [
+      '```text',
+      '+--------+     +--------+',
+      '| Input  | --> | Output |',
+      '+--------+     +--------+',
+      '```',
+      '',
+    ].join('\n');
+    expect(roundTripThroughEditor(md)).toBe(md);
+  });
+});

package/src/__tests__/transformStyleId.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest';
+import { resolvePersistedTransformStyleId } from '../transformStyleId';
+
+describe('resolvePersistedTransformStyleId', () => {
+  it('accepts canonical ids and canonicalizes the legacy wire value', () => {
+    expect(resolvePersistedTransformStyleId('data-driven')).toBe('data-driven');
+    expect(resolvePersistedTransformStyleId('dataDriven')).toBe('data-driven');
+  });
+
+  it('does not turn an unknown id into the default transform', () => {
+    expect(resolvePersistedTransformStyleId('not-a-style')).toBeNull();
+  });
+});

package/src/__tests__/useImageEditor.test.tsx

@@ -12,6 +12,14 @@ import {
 } from '@bendyline/squisq/imageEdit';
 import { useImageEditor } from '../imageEditor/useImageEditor.js';
 
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((res) => {
+    resolve = res;
+  });
+  return { promise, resolve };
+}
+
 beforeEach(() => {
   // jsdom doesn't implement createObjectURL or HTMLImageElement loading.
   // Stub both so the hook can complete its asset-resolution path.
@@ -131,6 +139,65 @@ describe('useImageEditor', () => {
     expect(persisted?.canvas.width).toBe(25);
   });
 
+  it('does not mark a newer edit clean when an older write resolves', async () => {
+    const container = new MemoryContentContainer();
+    await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));
+    const originalWrite = container.writeFile.bind(container);
+    const gate = deferred<void>();
+    const started = deferred<void>();
+    let writes = 0;
+    vi.spyOn(container, 'writeFile').mockImplementation(async (...args) => {
+      writes += 1;
+      if (writes === 1) {
+        started.resolve();
+        await gate.promise;
+      }
+      return originalWrite(...args);
+    });
+    const { result } = renderHook(() => useImageEditor({ container, persistDebounceMs: 5 }));
+    await waitFor(() => expect(result.current.ready).toBe(true));
+
+    act(() => result.current.dispatch({ type: 'set-canvas', canvas: { width: 20, height: 20 } }));
+    await started.promise;
+    act(() => result.current.dispatch({ type: 'set-canvas', canvas: { width: 30, height: 30 } }));
+    gate.resolve();
+
+    await waitFor(() => expect(result.current.state?.dirty).toBe(false));
+    expect((await readImageEditDoc(container))?.canvas.width).toBe(30);
+  });
+
+  it('flushes a dirty debounce when the editor unmounts', async () => {
+    const container = new MemoryContentContainer();
+    await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));
+    const { result, unmount } = renderHook(() =>
+      useImageEditor({ container, persistDebounceMs: 100000 }),
+    );
+    await waitFor(() => expect(result.current.ready).toBe(true));
+    act(() => result.current.dispatch({ type: 'set-canvas', canvas: { width: 44, height: 44 } }));
+    unmount();
+    await waitFor(async () => expect((await readImageEditDoc(container))?.canvas.width).toBe(44));
+  });
+
+  it('does not populate the URL cache after unmount', async () => {
+    const container = new MemoryContentContainer();
+    await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));
+    await container.writeFile('assets/late.png', new Uint8Array([1]).buffer, 'image/png');
+    const { result, unmount } = renderHook(() => useImageEditor({ container }));
+    await waitFor(() => expect(result.current.ready).toBe(true));
+    const originalRead = container.readFile.bind(container);
+    const gate = deferred<ArrayBuffer | null>();
+    vi.spyOn(container, 'readFile').mockImplementation((path) =>
+      path === 'assets/late.png' ? gate.promise : originalRead(path),
+    );
+    const create = vi.mocked(URL.createObjectURL);
+    const before = create.mock.calls.length;
+    const pending = result.current.resolveAssetUrl('assets/late.png');
+    unmount();
+    gate.resolve(new Uint8Array([1]).buffer);
+    await expect(pending).rejects.toThrow(/cancelled/);
+    expect(create).toHaveBeenCalledTimes(before);
+  });
+
   it('versioning is null when allowVersioning is false', async () => {
     const container = new MemoryContentContainer();
     await writeImageEditDoc(container, createEmptyImageEditDoc(10, 10));

package/src/__tests__/useMediaRecorder.test.ts

@@ -50,6 +50,7 @@ interface FakeRecorderHandle {
 }
 
 let lastRecorder: FakeRecorderHandle | null = null;
+let lastStream: FakeMediaStream | null = null;
 
 class FakeMediaRecorder implements FakeRecorderHandle {
   state: 'recording' | 'inactive' = 'inactive';
@@ -90,6 +91,7 @@ beforeEach(() => {
   lastRecorder = null;
   (globalThis as { MediaRecorder?: unknown }).MediaRecorder = FakeMediaRecorder;
   const fakeStream = new FakeMediaStream([new FakeMediaStreamTrack('audio')]);
+  lastStream = fakeStream;
   Object.defineProperty(globalThis, 'navigator', {
     value: {
       mediaDevices: {
@@ -224,4 +226,77 @@ describe('useMediaRecorder lifecycle', () => {
     expect(result.current.stream).toBeNull();
     expect(tracks.every((t) => t.stop.mock.calls.length > 0)).toBe(true);
   });
+
+  it('deduplicates concurrent permission requests', async () => {
+    let resolve!: (stream: FakeMediaStream) => void;
+    const pending = new Promise<FakeMediaStream>((res) => {
+      resolve = res;
+    });
+    const getUserMedia = vi.fn().mockReturnValue(pending);
+    Object.defineProperty(globalThis, 'navigator', {
+      configurable: true,
+      value: { mediaDevices: { getUserMedia } },
+    });
+    const stream = new FakeMediaStream([new FakeMediaStreamTrack('audio')]);
+    const { result } = renderHook(() => useMediaRecorder({ source: 'mic' }));
+    let first!: Promise<void>;
+    let second!: Promise<void>;
+    act(() => {
+      first = result.current.request();
+      second = result.current.request();
+    });
+    expect(getUserMedia).toHaveBeenCalledTimes(1);
+    resolve(stream);
+    await act(async () => Promise.all([first, second]));
+    expect(result.current.state).toBe('ready');
+  });
+
+  it('releases an acquired stream when recorder construction fails', async () => {
+    class ThrowingRecorder {
+      static isTypeSupported() {
+        return true;
+      }
+      constructor() {
+        throw new Error('construction failed');
+      }
+    }
+    (globalThis as { MediaRecorder?: unknown }).MediaRecorder = ThrowingRecorder;
+    const { result } = renderHook(() => useMediaRecorder({ source: 'mic' }));
+    await act(async () => {
+      await expect(result.current.request()).rejects.toThrow('construction failed');
+    });
+    expect(lastStream?.getTracks().every((track) => track.stop.mock.calls.length > 0)).toBe(true);
+  });
+
+  it('ignores a late onstop event after cancel', async () => {
+    const { result } = renderHook(() => useMediaRecorder({ source: 'mic' }));
+    await act(async () => result.current.request());
+    act(() => result.current.start());
+    const lateOnStop = lastRecorder?.onstop;
+    act(() => result.current.cancel());
+    act(() => lateOnStop?.());
+    expect(result.current.state).toBe('idle');
+    expect(result.current.blob).toBeNull();
+  });
+
+  it('returns the same in-flight stop promise to repeated callers', async () => {
+    const { result } = renderHook(() => useMediaRecorder({ source: 'mic' }));
+    await act(async () => result.current.request());
+    act(() => result.current.start());
+    const recorder = lastRecorder!;
+    const complete = recorder.onstop!;
+    recorder.stop = vi.fn(() => {
+      recorder.state = 'inactive';
+    });
+    let first!: Promise<Blob | null>;
+    let second!: Promise<Blob | null>;
+    act(() => {
+      first = result.current.stop();
+      second = result.current.stop();
+    });
+    expect(second).toBe(first);
+    act(() => complete());
+    await first;
+    expect(result.current.state).toBe('stopped');
+  });
 });