@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/__tests__/resolveBlockVisual.test.ts

@@ -1,43 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,190 +0,0 @@
-/**
- * @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

@@ -1,99 +0,0 @@
-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"');
-    expect(html).toContain('Getting Started');
-    expect(html).not.toContain('{[comparisonBar]}'); // raw text stripped
-  });
-
-  it('round-trips markdown → HTML → markdown losslessly', () => {
-    const original = '## Getting Started {[comparisonBar]}';
-    const html = markdownToTiptap(original);
-    const back = tiptapToMarkdown(html);
-    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);
-    expect(html).not.toContain('data-template="transition=fade"');
-    expect(html).toContain('data-template-params="transition=fade"');
-    expect(tiptapToMarkdown(html).trim()).toBe(original);
-  });
-
-  it('preserves template annotation through Tiptap-rendered HTML (with badge spans)', () => {
-    // Simulates HTML that Tiptap actually renders after parse: includes the
-    // squisq-heading-content + squisq-template-badge wrapper spans.
-    const tiptapRendered =
-      '<h2 data-template="comparisonBar">' +
-      '<span class="squisq-heading-content">Getting Started</span>' +
-      '<span class="squisq-template-badge" contenteditable="false" data-template="comparisonBar">' +
-      '<span class="squisq-template-badge-core" data-template-label="Comparison Bar" aria-hidden="true"></span>' +
-      '</span>' +
-      '</h2>';
-    const md = tiptapToMarkdown(tiptapRendered);
-    expect(md).toContain('## Getting Started');
-    expect(md).toContain('{[comparisonBar]}');
-    // No literal badge spans should leak into markdown
-    expect(md).not.toContain('squisq-template-badge');
-    expect(md).not.toContain('Comparison Bar'); // CSS-rendered label shouldn't bleed
-  });
-
-  it('does not leak the block-properties badge into markdown', () => {
-    // The props badge is an empty CSS-painted span rendered alongside the
-    // template badge (and on plain headings, the empty template badge). It
-    // must serialize to nothing — no stray `*`/`**` from an `<i>`, no span.
-    const tiptapRendered =
-      '<h2 data-block-attrs="transition=fade">' +
-      '<span class="squisq-heading-content">Intro</span>' +
-      '<span class="squisq-template-badge squisq-template-badge--empty" contenteditable="false">' +
-      '<span class="squisq-template-badge-core" data-template-label="Block" aria-hidden="true"></span>' +
-      '</span>' +
-      '<span class="squisq-props-badge" contenteditable="false" data-props-summary="Fade · 1:30 start"></span>' +
-      '</h2>';
-    const md = tiptapToMarkdown(tiptapRendered).trim();
-    expect(md).toBe('## Intro {transition=fade}');
-    expect(md).not.toContain('squisq-props-badge');
-    expect(md).not.toContain('*');
-    // The CSS-painted summary lives in a data attribute; it must not bleed.
-    expect(md).not.toContain('start');
-  });
-
-  it('serializes data-template-params without data-template as a squiggly annotation', () => {
-    const tiptapRendered =
-      '<h2 data-template-params="transition=fade">' +
-      '<span class="squisq-heading-content">Intro</span>' +
-      '<span class="squisq-props-badge" contenteditable="false" data-props-summary="Fade"></span>' +
-      '</h2>';
-    expect(tiptapToMarkdown(tiptapRendered).trim()).toBe('## Intro {[transition=fade]}');
-  });
-});

package/src/__tests__/templateContentPreview.test.ts

@@ -1,101 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { DEFAULT_THEME, markdownToDoc } from '@bendyline/squisq/doc';
-import { parseMarkdown } from '@bendyline/squisq/markdown';
-import { VIEWPORT_PRESETS } from '@bendyline/squisq/schemas';
-import {
-  resolveTemplateContentPreview,
-  resolveTemplateContentPreviewResult,
-  type TemplatePreviewSource,
-} from '../templateContentPreviewResolver';
-
-function previewSource(markdown: string): TemplatePreviewSource {
-  const doc = markdownToDoc(parseMarkdown(markdown), { autoTemplates: false });
-  const block = doc.blocks[0];
-  if (!block) throw new Error('expected markdown to produce a block');
-  return {
-    block,
-    theme: DEFAULT_THEME,
-    viewport: VIEWPORT_PRESETS.landscape,
-    basePath: '/',
-  };
-}
-
-describe('template content previews', () => {
-  it('renders a candidate preview from the active block content', () => {
-    const visual = resolveTemplateContentPreview(
-      'list',
-      previewSource(`## Launch Steps
-
-- Draft the outline
-- Review the visuals
-- Publish the page
-`),
-    );
-
-    expect(visual).toBeTruthy();
-    expect(JSON.stringify(visual?.layers)).toContain('Draft the outline');
-  });
-
-  it('falls back for content-specific templates when the block is too sparse', () => {
-    const visual = resolveTemplateContentPreview('list', previewSource('## About Squisq'));
-
-    expect(visual).toBeNull();
-  });
-
-  it('reports why stat and date previews cannot be derived', () => {
-    expect(
-      resolveTemplateContentPreviewResult('statHighlight', previewSource('## About Squisq')),
-    ).toMatchObject({
-      visual: null,
-      warning: 'No stat found in this block',
-    });
-
-    expect(
-      resolveTemplateContentPreviewResult('dateEvent', previewSource('## About Squisq')),
-    ).toMatchObject({
-      visual: null,
-      warning: 'No date found in this block',
-    });
-  });
-
-  it('reports why image previews cannot be derived', () => {
-    expect(
-      resolveTemplateContentPreviewResult('imageWithCaption', previewSource('## About Squisq')),
-    ).toMatchObject({
-      visual: null,
-      warning: 'No image found in this block',
-    });
-  });
-
-  it('reports why video previews cannot be derived without media', () => {
-    expect(
-      resolveTemplateContentPreviewResult('videoWithCaption', previewSource('## About Squisq')),
-    ).toMatchObject({
-      visual: null,
-      warning: 'No audio/video found in this block',
-    });
-
-    expect(
-      resolveTemplateContentPreviewResult('videoPullQuote', previewSource('## About Squisq')),
-    ).toMatchObject({
-      visual: null,
-      warning: 'No audio/video found in this block',
-    });
-  });
-
-  it('does not warn about missing media when an audio or video tag is present', () => {
-    expect(
-      resolveTemplateContentPreviewResult(
-        'videoWithCaption',
-        previewSource('## Demo\n\n<video src="media/demo.mp4" controls></video>'),
-      ).warning,
-    ).toBeUndefined();
-
-    expect(
-      resolveTemplateContentPreviewResult(
-        'videoPullQuote',
-        previewSource('## Narration\n\n<audio src="audio/narration.webm" controls></audio>'),
-      ).warning,
-    ).toBeUndefined();
-  });
-});

package/src/__tests__/templatePickerMetadata.test.ts

@@ -1,32 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { TEMPLATE_METADATA } from '@bendyline/squisq/doc';
-import { TEMPLATE_ENTRIES } from '../TemplatePicker';
-
-/**
- * The TemplatePicker gallery must stay 1:1 with core's TEMPLATE_METADATA so a
- * template added to the core registry can never silently fail to appear in the
- * editor. Core owns the canonical id list + labels + descriptions; the picker
- * adds only the per-id preview icon.
- */
-describe('TemplatePicker ↔ core TEMPLATE_METADATA', () => {
-  it('lists the same ids in the same order as TEMPLATE_METADATA', () => {
-    const pickerNames = TEMPLATE_ENTRIES.map((e) => e.name);
-    const metadataNames = Object.keys(TEMPLATE_METADATA);
-    expect(pickerNames).toEqual(metadataNames);
-  });
-
-  it('uses the canonical label and description for every entry', () => {
-    for (const entry of TEMPLATE_ENTRIES) {
-      const meta = TEMPLATE_METADATA[entry.name];
-      expect(meta, `missing core metadata for picker entry "${entry.name}"`).toBeTruthy();
-      expect(entry.label, `label drift for "${entry.name}"`).toBe(meta.label);
-      expect(entry.description, `description drift for "${entry.name}"`).toBe(meta.description);
-    }
-  });
-
-  it('provides a preview icon for every entry', () => {
-    for (const entry of TEMPLATE_ENTRIES) {
-      expect(entry.icon, `missing icon for "${entry.name}"`).toBeTruthy();
-    }
-  });
-});

package/src/__tests__/templatePickerPortal.test.tsx

@@ -1,62 +0,0 @@
-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);
-  });
-});