@bendyline/squisq-editor-react 1.6.2 → 2.0.1

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__/recorderTheme.test.tsx

@@ -0,0 +1,42 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import type { MediaProvider } from '@bendyline/squisq/schemas';
+import { RecorderModal } from '../recorder/RecorderModal';
+import { RecorderPanel } from '../recorder/RecorderPanel';
+
+const mediaProvider: MediaProvider = {
+  resolveUrl: vi.fn(async (path: string) => path),
+  listMedia: vi.fn(async () => []),
+  addMedia: vi.fn(async (name: string) => name),
+  removeMedia: vi.fn(async () => undefined),
+  dispose: vi.fn(),
+};
+
+describe('recorder theme propagation', () => {
+  it('creates a dark theme scope for the recorder dialog', () => {
+    render(<RecorderModal mediaProvider={mediaProvider} colorScheme="dark" onClose={vi.fn()} />);
+
+    const dialog = screen.getByRole('dialog', { name: 'Record media' });
+    expect(dialog.getAttribute('data-theme')).toBe('dark');
+    expect(dialog.classList.contains('squisq-editor-shell')).toBe(true);
+    expect(dialog.style.colorScheme).toBe('dark');
+    expect(dialog.style.getPropertyValue('--squisq-recorder-surface')).toBe(
+      'var(--squisq-bg, #1f2937)',
+    );
+    expect(dialog.style.getPropertyValue('--squisq-recorder-text')).toBe(
+      'var(--squisq-text, #e5e7eb)',
+    );
+  });
+
+  it('passes the requested scheme through the portaled panel wrapper', () => {
+    render(<RecorderPanel mediaProvider={mediaProvider} colorScheme="dark" />);
+    fireEvent.click(screen.getByRole('button', { name: 'Record media' }));
+
+    expect(screen.getByRole('dialog', { name: 'Record media' }).getAttribute('data-theme')).toBe(
+      'dark',
+    );
+  });
+});

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__/selectionConversions.test.ts

@@ -0,0 +1,80 @@
+import { describe, expect, it } from 'vitest';
+import {
+  selectionToTable,
+  selectionToTableMarkdown,
+  selectionToTaskItems,
+  selectionToTaskListMarkdown,
+} from '../selectionConversions';
+
+describe('selectionToTable', () => {
+  it('detects consistently pipe-delimited rows, including outer pipes', () => {
+    expect(selectionToTable('| Name | Role |\n| Ada | Engineer |')).toEqual({
+      delimiter: 'pipe',
+      rows: [
+        ['Name', 'Role'],
+        ['Ada', 'Engineer'],
+      ],
+    });
+  });
+
+  it('detects CSV rows without splitting quoted commas', () => {
+    expect(selectionToTable('Name,Notes\nAda,"Math, logic"')).toEqual({
+      delimiter: 'comma',
+      rows: [
+        ['Name', 'Notes'],
+        ['Ada', 'Math, logic'],
+      ],
+    });
+  });
+
+  it('retains literal quotes in comma-delimited cells', () => {
+    expect(selectionToTable('Item,Size\nDisplay,5" screen').rows[1]).toEqual([
+      'Display',
+      '5" screen',
+    ]);
+  });
+
+  it.each([
+    ['tab', 'Name\tRole\nAda\tEngineer'],
+    ['multispace', 'Name    Role\nAda     Engineer'],
+  ] as const)('detects %s-delimited rows', (delimiter, text) => {
+    expect(selectionToTable(text)).toEqual({
+      delimiter,
+      rows: [
+        ['Name', 'Role'],
+        ['Ada', 'Engineer'],
+      ],
+    });
+  });
+
+  it('falls back to one column when delimiter counts are inconsistent', () => {
+    expect(selectionToTable('One,Two\nThree\nFour,Five,Six')).toEqual({
+      delimiter: null,
+      rows: [['One,Two'], ['Three'], ['Four,Five,Six']],
+    });
+  });
+
+  it('uses the first row as the Markdown header and escapes cell pipes', () => {
+    expect(selectionToTableMarkdown('Name,Notes\nAda,A | B')).toBe(
+      '| Name | Notes |\n| --- | --- |\n| Ada | A \\| B |',
+    );
+  });
+});
+
+describe('selectionToTaskListMarkdown', () => {
+  it('turns non-empty selected lines into unchecked tasks', () => {
+    expect(selectionToTaskListMarkdown('Buy milk\n\nCall Sam')).toBe(
+      '- [ ] Buy milk\n- [ ] Call Sam',
+    );
+  });
+
+  it('normalizes list markers and retains existing checked state', () => {
+    const text = '- first\n2. second\n- [x] already done';
+    expect(selectionToTaskItems(text)).toEqual([
+      { checked: false, text: 'first' },
+      { checked: false, text: 'second' },
+      { checked: true, text: 'already done' },
+    ]);
+    expect(selectionToTaskListMarkdown(text)).toBe('- [ ] first\n- [ ] second\n- [x] already done');
+  });
+});

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();
+  });
+});

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);
+  });
+});