@bendyline/squisq-editor-react 1.6.2 → 2.0.1

package/src/__tests__/editorShellProps.test.tsx

@@ -13,9 +13,10 @@
  * the props it receives so we can assert `monacoTheme` reaches it.
  */
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import type { RawEditorProps } from '../RawEditor';
 import type { MediaEntry, MediaProvider } from '@bendyline/squisq/schemas';
+import { useMediaProvider } from '@bendyline/squisq-react';
 
 // Records the props the shell passes to RawEditor on each render.
 const rawEditorProps: RawEditorProps[] = [];
@@ -42,6 +43,13 @@ function MarkdownSourceProbe() {
   return <pre data-testid="markdown-source">{markdownSource}</pre>;
 }
 
+function MediaProviderProbe({ expected }: { expected: MediaProvider }) {
+  const provider = useMediaProvider();
+  return (
+    <span data-testid="media-context-probe">{provider === expected ? 'same' : 'missing'}</span>
+  );
+}
+
 function mediaProviderWith(count: number): MediaProvider {
   const entries: MediaEntry[] = Array.from({ length: count }, (_, i) => ({
     name: `file-${i + 1}.png`,
@@ -184,6 +192,61 @@ describe('RawEditor monacoTheme prop', () => {
   });
 });
 
+describe('<EditorShell> instance boundaries', () => {
+  it('provides its mediaProvider to React preview/layer consumers', async () => {
+    const provider = mediaProviderWith(0);
+    await act(async () => {
+      render(
+        <EditorShell
+          initialMarkdown="# hi"
+          initialView="raw"
+          mediaProvider={provider}
+          toolbarSlotLeft={<MediaProviderProbe expected={provider} />}
+        />,
+      );
+    });
+    expect(screen.getByTestId('media-context-probe').textContent).toBe('same');
+  });
+
+  it('keeps view shortcuts inside the editor that received the key', async () => {
+    const { container } = render(
+      <>
+        <EditorShell initialMarkdown="# first" initialView="raw" />
+        <EditorShell initialMarkdown="# second" initialView="raw" />
+      </>,
+    );
+    const shells = container.querySelectorAll<HTMLElement>('.squisq-editor-shell');
+    fireEvent.keyDown(within(shells[1]).getByTestId('raw-editor-stub'), {
+      key: '1',
+      ctrlKey: true,
+    });
+    await waitFor(() => expect(within(shells[1]).getByTestId('wysiwyg-editor-stub')).toBeTruthy());
+    expect(within(shells[0]).getByTestId('raw-editor-stub')).toBeTruthy();
+  });
+
+  it('ignores file drops in readOnly mode', async () => {
+    const { container } = render(
+      <EditorShell
+        initialMarkdown="# original"
+        initialView="raw"
+        readOnly
+        toolbarSlotRight={<MarkdownSourceProbe />}
+      />,
+    );
+    const shell = container.querySelector<HTMLElement>('.squisq-editor-shell')!;
+    const file = new File(['# replacement'], 'replacement.md', { type: 'text/markdown' });
+    fireEvent.drop(shell, {
+      dataTransfer: {
+        types: ['Files'],
+        files: [file],
+        items: [{ kind: 'file', type: 'text/markdown', getAsFile: () => file }],
+      },
+    });
+    await act(async () => Promise.resolve());
+    expect(screen.getByTestId('markdown-source').textContent).toBe('# original');
+  });
+});
+
 describe('<EditorShell> Files badge', () => {
   it('shows the mediaProvider file count on the paperclip button', async () => {
     const { container } = render(
@@ -231,6 +294,25 @@ describe('<EditorShell> Files badge', () => {
     expect(container.querySelector('.squisq-toolbar-files-badge')?.textContent).toBe('1');
   });
 
+  it('hides .gitignore entries from the Files panel and its count', async () => {
+    const { provider } = mutableMediaProviderWith([
+      { name: '.gitignore', mimeType: 'text/plain', size: 11 },
+      { name: 'notes_files/.gitignore', mimeType: 'text/plain', size: 11 },
+      { name: 'notes_files/hero.png', mimeType: 'image/png', size: 1024 },
+    ]);
+
+    render(<EditorShell initialMarkdown="# hi" initialView="raw" mediaProvider={provider} />);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel, 1 file')).toBeTruthy();
+    });
+    fireEvent.click(screen.getByLabelText('Toggle Files panel, 1 file'));
+
+    expect(await screen.findByText('hero.png')).toBeTruthy();
+    expect(screen.queryByText('.gitignore')).toBeNull();
+    expect(screen.getByText('Files (1)')).toBeTruthy();
+  });
+
   it('removes a media file and matching markdown refs from the files context menu', async () => {
     const { provider, removed } = mutableMediaProviderWith([
       {
@@ -338,6 +420,28 @@ describe('<Toolbar> Files badge', () => {
     });
     expect(container.querySelector('.squisq-toolbar-files-badge')?.textContent).toBe('2');
   });
+
+  it('excludes .gitignore from a self-scanned count', async () => {
+    const { provider } = mutableMediaProviderWith([
+      { name: '.gitignore', mimeType: 'text/plain', size: 11 },
+      { name: 'hero.png', mimeType: 'image/png', size: 1024 },
+    ]);
+    const { container } = render(
+      <EditorProvider
+        initialMarkdown="# hi"
+        initialView="raw"
+        mediaProvider={provider}
+        allowRecording={false}
+      >
+        <Toolbar onToggleFiles={() => {}} />
+      </EditorProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Toggle Files panel, 1 file')).toBeTruthy();
+    });
+    expect(container.querySelector('.squisq-toolbar-files-badge')?.textContent).toBe('1');
+  });
 });
 
 describe('<Toolbar> Insert menu', () => {
@@ -360,4 +464,22 @@ describe('<Toolbar> Insert menu', () => {
       );
     });
   });
+
+  it('adds an explicit authored timeline fence from the Insert menu', async () => {
+    render(
+      <EditorProvider initialMarkdown="Intro" initialView="raw" allowRecording={false}>
+        <Toolbar />
+        <MarkdownSourceProbe />
+      </EditorProvider>,
+    );
+
+    fireEvent.click(screen.getByLabelText('Insert'));
+    fireEvent.click(await screen.findByRole('menuitem', { name: /Timeline/i }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('markdown-source').textContent).toContain(
+        '```timeline\nMilestones: ● Start',
+      );
+    });
+  });
 });

package/src/__tests__/emojiPicker.test.tsx

@@ -1,43 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { EmojiPicker } from '../EmojiPicker';
-import {
-  EMOJI_CATEGORIES,
-  ALL_EMOJIS,
-  searchEmojis,
-  PICKER_CATEGORIES,
-  ALL_PICKER_ENTRIES,
-  searchPickerEntries,
-} from '../emojiData';
-
-describe('emojiData — legacy emoji exports', () => {
-  it('exposes the standard CLDR category buckets', () => {
-    const ids = EMOJI_CATEGORIES.map((c) => c.id);
-    expect(ids).toEqual([
-      'smileys',
-      'people',
-      'nature',
-      'food',
-      'travel',
-      'activities',
-      'objects',
-      'symbols',
-      'flags',
-    ]);
-  });
-
-  it('each entry has a non-empty char and name', () => {
-    for (const entry of ALL_EMOJIS) {
-      expect(entry.char.length).toBeGreaterThan(0);
-      expect(entry.name.length).toBeGreaterThan(0);
-    }
-  });
-
-  it('searchEmojis matches by name (case-insensitive)', () => {
-    const results = searchEmojis('HEART');
-    expect(results.some((e) => e.char === '❤️')).toBe(true);
-  });
-});
+import { EmojiPicker, PICKER_CATEGORIES, ALL_PICKER_ENTRIES, searchPickerEntries } from '../index';
 
 describe('emojiData — unified picker entries', () => {
   it('appends FA Brands, Solid, and Regular categories after the emoji buckets', () => {
@@ -78,12 +41,9 @@ describe('EmojiPicker', () => {
 
   it('renders all emoji + FA tabs when open', () => {
     render(<EmojiPicker open onSelect={() => {}} onClose={() => {}} />);
-    for (const cat of EMOJI_CATEGORIES) {
+    for (const cat of PICKER_CATEGORIES) {
       expect(screen.getByRole('tab', { name: cat.label })).toBeTruthy();
     }
-    expect(screen.getByRole('tab', { name: 'Brands' })).toBeTruthy();
-    expect(screen.getByRole('tab', { name: 'Solid' })).toBeTruthy();
-    expect(screen.getByRole('tab', { name: 'Regular' })).toBeTruthy();
   });
 
   it('fires onSelect with an emoji PickerEntry when an emoji tile is clicked', () => {

package/src/__tests__/headingTransition.test.ts

@@ -4,7 +4,6 @@ import {
   setHeadingLineTransition,
   readBlockAttrsTransition,
   setHeadingAttrsTransition,
-  setBlockAttrsTransition,
   EMPTY_TRANSITION,
 } from '../headingTransition';
 
@@ -174,15 +173,4 @@ describe('block-attrs (WYSIWYG) helpers', () => {
       templateParams: null,
     });
   });
-
-  it('legacy single-channel writer still writes a fresh inner when none exists', () => {
-    expect(setBlockAttrsTransition(null, { type: 'fade', direction: '', duration: '' })).toBe(
-      'transition=fade',
-    );
-  });
-
-  it('legacy single-channel writer preserves the id and clears to null when emptied', () => {
-    expect(setBlockAttrsTransition('transition=fade', EMPTY_TRANSITION)).toBeNull();
-    expect(setBlockAttrsTransition('#intro transition=fade', EMPTY_TRANSITION)).toBe('#intro');
-  });
 });

package/src/__tests__/imageEditAffordance.test.tsx

@@ -182,8 +182,10 @@ describe('<EditorShell> image-edit modal wiring', () => {
 
     expect(screen.queryByTestId('image-edit-modal')).toBeNull();
 
+    const trigger = screen.getByTestId('trigger');
+    trigger.focus();
     await act(async () => {
-      fireEvent.click(screen.getByTestId('trigger'));
+      fireEvent.click(trigger);
     });
 
     await waitFor(() => {
@@ -191,6 +193,7 @@ describe('<EditorShell> image-edit modal wiring', () => {
     });
     // Shows the relative path in the header.
     expect(screen.getByText('hero.png')).toBeTruthy();
+    expect(document.activeElement).toBe(screen.getByTestId('image-edit-modal-close'));
 
     await act(async () => {
       fireEvent.click(screen.getByTestId('image-edit-modal-close'));
@@ -198,6 +201,7 @@ describe('<EditorShell> image-edit modal wiring', () => {
     await waitFor(() => {
       expect(screen.queryByTestId('image-edit-modal')).toBeNull();
     });
+    expect(document.activeElement).toBe(screen.getByTestId('trigger'));
   });
 
   it('opens the modal with a transient sidecar when only a mediaProvider is wired (no host container)', async () => {

package/src/__tests__/imageEditModalContract.test.tsx

@@ -0,0 +1,119 @@
+/** @vitest-environment jsdom */
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { ContentContainer } from '@bendyline/squisq/storage';
+import { MemoryContentContainer } from '@bendyline/squisq/storage';
+import type { MediaProvider } from '@bendyline/squisq/schemas';
+import { useEditorContext } from '../EditorContext';
+
+const imageEditorProps: Array<{
+  filesContainer: ContentContainer;
+  saveFormat: 'png' | 'jpeg' | 'webp';
+  onExport: (blob: Blob, format: 'png' | 'jpeg' | 'webp') => void;
+}> = [];
+
+vi.mock('../ImageEditor', () => ({
+  ImageEditor: (props: (typeof imageEditorProps)[number]) => {
+    imageEditorProps.push(props);
+    return <div data-testid="image-editor-contract-stub" />;
+  },
+}));
+vi.mock('../RawEditor', () => ({ RawEditor: () => <div /> }));
+vi.mock('../WysiwygEditor', () => ({ WysiwygEditor: () => <div /> }));
+vi.mock('../PreviewPanel', () => ({ PreviewPanel: () => <div /> }));
+
+import { EditorShell } from '../EditorShell';
+
+function Trigger({ path }: { path: string }) {
+  const { openImageEdit } = useEditorContext();
+  return <button onClick={() => openImageEdit(path)}>edit</button>;
+}
+
+function provider(): MediaProvider {
+  return {
+    addMedia: vi.fn(async (name: string) => name),
+    resolveUrl: vi.fn(async (name: string) => `blob:${name}`),
+    listMedia: vi.fn(async () => []),
+    removeMedia: vi.fn(async () => {}),
+    dispose: vi.fn(),
+  };
+}
+
+beforeEach(() => {
+  imageEditorProps.length = 0;
+  if (typeof window.matchMedia !== 'function') {
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      value: () => ({ matches: false, addEventListener() {}, removeEventListener() {} }),
+    });
+  }
+});
+
+describe('ImageEditModal storage contract', () => {
+  it('writes JPEG bytes/MIME back to a .jpg path', async () => {
+    const mediaProvider = provider();
+    render(
+      <EditorShell
+        initialMarkdown="# image"
+        mediaProvider={mediaProvider}
+        toolbarSlotRight={<Trigger path="photo.jpg" />}
+      />,
+    );
+    fireEvent.click(screen.getByText('edit'));
+    await waitFor(() => expect(screen.getByTestId('image-editor-contract-stub')).toBeTruthy());
+    const props = imageEditorProps[imageEditorProps.length - 1]!;
+    expect(props.saveFormat).toBe('jpeg');
+    await act(async () => props.onExport(new Blob(['jpeg']), 'jpeg'));
+    expect(mediaProvider.addMedia).toHaveBeenCalledWith(
+      'photo.jpg',
+      expect.any(Blob),
+      'image/jpeg',
+    );
+  });
+
+  it('hashes sidecar paths so sanitized-name collisions remain separate', async () => {
+    const parent = new MemoryContentContainer();
+    const mediaProvider = provider();
+    const first = render(
+      <EditorShell
+        initialMarkdown="# image"
+        workspaceContainer={parent}
+        mediaProvider={mediaProvider}
+        toolbarSlotRight={<Trigger path="a/b.png" />}
+      />,
+    );
+    fireEvent.click(screen.getByText('edit'));
+    await waitFor(() => expect(imageEditorProps).toHaveLength(1));
+    const firstContainer = imageEditorProps[0].filesContainer;
+    first.unmount();
+
+    render(
+      <EditorShell
+        initialMarkdown="# image"
+        workspaceContainer={parent}
+        mediaProvider={mediaProvider}
+        toolbarSlotRight={<Trigger path="a_b.png" />}
+      />,
+    );
+    fireEvent.click(screen.getByText('edit'));
+    await waitFor(() => expect(imageEditorProps).toHaveLength(2));
+    const secondContainer = imageEditorProps[1].filesContainer;
+    await firstContainer.writeFile('sentinel', new Uint8Array([1]).buffer);
+    await secondContainer.writeFile('sentinel', new Uint8Array([2]).buffer);
+    const paths = (await parent.listFiles('.imageEdits')).map((entry) => entry.path);
+    expect(paths.filter((path) => path.endsWith('/sentinel'))).toHaveLength(2);
+  });
+
+  it('refuses unsupported source formats instead of writing mismatched bytes', async () => {
+    render(
+      <EditorShell
+        initialMarkdown="# image"
+        mediaProvider={provider()}
+        toolbarSlotRight={<Trigger path="animated.gif" />}
+      />,
+    );
+    fireEvent.click(screen.getByText('edit'));
+    await waitFor(() => expect(screen.getByText(/supports PNG, JPEG, and WebP/i)).toBeTruthy());
+    expect(screen.queryByTestId('image-editor-contract-stub')).toBeNull();
+  });
+});

package/src/__tests__/imageEditorShell.test.tsx

@@ -6,7 +6,7 @@
  * renders the toolbar / canvas / panels.
  */
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { MemoryContentContainer, scopeContainer } from '@bendyline/squisq/storage';
 import { writeImageEditDoc, createEmptyImageEditDoc } from '@bendyline/squisq/imageEdit';
 import { DARK_SURFACE } from '@bendyline/squisq/schemas';
@@ -56,6 +56,20 @@ describe('<ImageEditor>', () => {
     expect(screen.getByText(/loading image editor/i)).toBeTruthy();
   });
 
+  it('adds a centered shape layer from the Layers panel menu', async () => {
+    const parent = new MemoryContentContainer();
+    const sidecar = scopeContainer(parent, 'pic_files');
+    await writeImageEditDoc(sidecar, createEmptyImageEditDoc(640, 480));
+
+    render(<ImageEditor filesContainer={sidecar} />);
+    await waitFor(() => expect(screen.getByTestId('image-editor')).toBeTruthy());
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add layer' }));
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Shape layer' }));
+
+    await waitFor(() => expect(screen.getByTitle('Rectangle')).toBeTruthy());
+  });
+
   it('applies an explicit dark surface to the editor chrome', async () => {
     const parent = new MemoryContentContainer();
     const sidecar = scopeContainer(parent, 'pic_files');

package/src/__tests__/jsonEditor.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from 'vitest';
 import { useState } from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import type { SquisqAnnotatedSchema } from '@bendyline/squisq/jsonForm';
 import { JsonEditor } from '../jsonEditor';
 
@@ -165,4 +165,59 @@ describe('JsonEditor', () => {
     fireEvent.change(input, { target: { value: 'changed' } });
     expect(onChange).not.toHaveBeenCalled();
   });
+
+  it('escapes object property names as RFC 6901 pointer segments', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: { 'a/b~c': { type: 'string', title: 'Odd key' } },
+    };
+    const onChange = vi.fn();
+    render(<Controlled schema={schema} initial={{ 'a/b~c': 'before' }} onValueChange={onChange} />);
+    fireEvent.change(screen.getByLabelText('Odd key'), { target: { value: 'after' } });
+    expect(onChange).toHaveBeenLastCalledWith({ 'a/b~c': 'after' });
+  });
+
+  it('associates labels/help/errors and reports validation after render', async () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: {
+        title: { type: 'string', title: 'Title', description: 'A useful title' },
+      },
+    };
+    const onValidate = vi.fn();
+    render(
+      <JsonEditor
+        schema={schema}
+        value={{ title: '' }}
+        onChange={() => {}}
+        validate={() => [{ path: '/title', message: 'Required' }]}
+        onValidate={onValidate}
+      />,
+    );
+    const input = screen.getByLabelText('Title');
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+    const described = input.getAttribute('aria-describedby') ?? '';
+    expect(described).toContain('-help');
+    expect(described).toContain('-error');
+    expect(screen.getByRole('alert').textContent).toBe('Required');
+    await waitFor(() =>
+      expect(onValidate).toHaveBeenCalledWith([{ path: '/title', message: 'Required' }]),
+    );
+  });
+
+  it('adds ARIA state and keyboard navigation to segmented/tabs controls', () => {
+    const schema: SquisqAnnotatedSchema = {
+      oneOf: [
+        { type: 'string', title: 'Text option' },
+        { type: 'number', title: 'Number option' },
+      ],
+      squisq: { control: 'tabs', label: 'Value type' },
+    };
+    render(<JsonEditor schema={schema} value="hello" onChange={() => {}} />);
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs[0].getAttribute('aria-selected')).toBe('true');
+    fireEvent.keyDown(tabs[0], { key: 'ArrowRight' });
+    expect(tabs[1].getAttribute('aria-selected')).toBe('true');
+    expect(screen.getByRole('tabpanel')).toBeTruthy();
+  });
 });

package/src/__tests__/layersPanel.test.tsx

@@ -7,6 +7,8 @@ import type { ImageEditDoc } from '@bendyline/squisq/schemas';
 import { LayersPanel } from '../imageEditor/LayersPanel.js';
 import type { ImageEditorAction } from '../imageEditor/state.js';
 
+const ignoreAddLayer = () => {};
+
 function buildDoc(): ImageEditDoc {
   return {
     version: 1,
@@ -41,7 +43,14 @@ function buildDoc(): ImageEditDoc {
 describe('LayersPanel', () => {
   it('renders layers with the top of the SVG stack first', () => {
     const dispatch = vi.fn<(a: ImageEditorAction) => void>();
-    render(<LayersPanel doc={buildDoc()} selectedLayerId={null} dispatch={dispatch} />);
+    render(
+      <LayersPanel
+        doc={buildDoc()}
+        selectedLayerId={null}
+        dispatch={dispatch}
+        onAddLayer={ignoreAddLayer}
+      />,
+    );
     const items = screen.getAllByText(/Bottom|Middle|Top/);
     expect(items[0]?.textContent).toContain('Top');
     expect(items[items.length - 1]?.textContent).toContain('Bottom');
@@ -49,14 +58,60 @@ describe('LayersPanel', () => {
 
   it('clicking the layer name dispatches a select action', () => {
     const dispatch = vi.fn<(a: ImageEditorAction) => void>();
-    render(<LayersPanel doc={buildDoc()} selectedLayerId={null} dispatch={dispatch} />);
+    render(
+      <LayersPanel
+        doc={buildDoc()}
+        selectedLayerId={null}
+        dispatch={dispatch}
+        onAddLayer={ignoreAddLayer}
+      />,
+    );
     fireEvent.click(screen.getByText('Middle'));
     expect(dispatch).toHaveBeenCalledWith({ type: 'select', layerId: 'b' });
   });
 
+  it('exposes the full layer name as a tooltip when the row is truncated', () => {
+    const dispatch = vi.fn<(a: ImageEditorAction) => void>();
+    render(
+      <LayersPanel
+        doc={buildDoc()}
+        selectedLayerId={null}
+        dispatch={dispatch}
+        onAddLayer={ignoreAddLayer}
+      />,
+    );
+    expect(screen.getByTitle('Middle').textContent).toContain('Middle');
+  });
+
+  it('opens the add-layer menu and reports the selected layer kind', () => {
+    const dispatch = vi.fn<(a: ImageEditorAction) => void>();
+    const onAddLayer = vi.fn();
+    render(
+      <LayersPanel
+        doc={buildDoc()}
+        selectedLayerId={null}
+        dispatch={dispatch}
+        onAddLayer={onAddLayer}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add layer' }));
+    expect(screen.getByRole('menu')).toBeTruthy();
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Text layer' }));
+    expect(onAddLayer).toHaveBeenCalledWith('text');
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+
   it('toggling visibility dispatches an update-layer action', () => {
     const dispatch = vi.fn<(a: ImageEditorAction) => void>();
-    render(<LayersPanel doc={buildDoc()} selectedLayerId={null} dispatch={dispatch} />);
+    render(
+      <LayersPanel
+        doc={buildDoc()}
+        selectedLayerId={null}
+        dispatch={dispatch}
+        onAddLayer={ignoreAddLayer}
+      />,
+    );
     // The "Hide layer" buttons exist for visible layers.
     const hideButtons = screen.getAllByRole('button', { name: 'Hide layer' });
     fireEvent.click(hideButtons[0]!); // top-most visible layer is 'b'
@@ -69,7 +124,14 @@ describe('LayersPanel', () => {
 
   it('move-up button is disabled at the top of the stack', () => {
     const dispatch = vi.fn<(a: ImageEditorAction) => void>();
-    render(<LayersPanel doc={buildDoc()} selectedLayerId={null} dispatch={dispatch} />);
+    render(
+      <LayersPanel
+        doc={buildDoc()}
+        selectedLayerId={null}
+        dispatch={dispatch}
+        onAddLayer={ignoreAddLayer}
+      />,
+    );
     const upButtons = screen.getAllByRole('button', { name: 'Move layer up' });
     // Visual order is c, b, a; layer 'c' is at the top of the stack and cannot move up.
     expect((upButtons[0] as HTMLButtonElement).disabled).toBe(true);
@@ -77,7 +139,14 @@ describe('LayersPanel', () => {
 
   it('delete button dispatches a remove-layer action', () => {
     const dispatch = vi.fn<(a: ImageEditorAction) => void>();
-    render(<LayersPanel doc={buildDoc()} selectedLayerId={null} dispatch={dispatch} />);
+    render(
+      <LayersPanel
+        doc={buildDoc()}
+        selectedLayerId={null}
+        dispatch={dispatch}
+        onAddLayer={ignoreAddLayer}
+      />,
+    );
     const delButtons = screen.getAllByRole('button', { name: 'Delete layer' });
     fireEvent.click(delButtons[0]!); // top of stack ('c')
     expect(dispatch).toHaveBeenCalledWith({ type: 'remove-layer', layerId: 'c' });
@@ -90,6 +159,7 @@ describe('LayersPanel', () => {
         doc={{ version: 1, canvas: { width: 1, height: 1 }, layers: [] }}
         selectedLayerId={null}
         dispatch={dispatch}
+        onAddLayer={ignoreAddLayer}
       />,
     );
     expect(screen.getByText(/no layers yet/i)).toBeTruthy();

package/src/__tests__/majorApiTypes.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import type { DiagramEdge, DiagramNode, EditorShellProps } from '../index';
+
+// @ts-expect-error React Flow-prefixed types were removed in the major API cleanup.
+import type { DiagramRFNode } from '../index';
+
+describe('major-version editor API types', () => {
+  it('uses implementation-neutral diagram names', () => {
+    const node: DiagramNode = { id: 'a', position: { x: 0, y: 0 }, data: { label: 'A' } };
+    const edge: DiagramEdge = { id: 'a-b', source: 'a', target: 'b' };
+    expect([node.id, edge.id]).toEqual(['a', 'a-b']);
+  });
+
+  it('does not accept the removed EditorShell container prop', () => {
+    const props: EditorShellProps = {
+      // @ts-expect-error Use workspaceContainer; container was removed.
+      container: null,
+    };
+    expect(props).toHaveProperty('container');
+  });
+
+  it('keeps the old type import absent', () => {
+    const legacy: DiagramRFNode | null = null;
+    expect(legacy).toBeNull();
+  });
+});

package/src/__tests__/mediaAttachmentFlow.test.ts

@@ -7,7 +7,7 @@ import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
  * uploaded files into the bin without inserting a markdown ref into
  * the editor body. A user would upload an image, hit Send in the
  * downstream chat composer, and the outgoing markdown would have no
- * image reference — the gezel would reply "nothing came through."
+ * image reference — the downstream consumer would reply "nothing came through."
  *
  * The fix: after `mediaProvider.addMedia(...)` succeeds, MediaBin
  * fires `onMediaUploaded(relativePath, name, mimeType)`. The
@@ -18,7 +18,7 @@ import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
  * These tests exercise the contract directly: the markdown snippet
  * produced by the upload callback, once round-tripped through the
  * editor's markdown↔HTML bridge, must round-trip back to a form
- * the gezel service's image-extraction regex can see.
+ * the downstream service's image-extraction regex can see.
  */
 
 function fakeMediaProvider(records: string[]): MediaProvider {