@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/__tests__/imageEditAffordance.test.tsx

@@ -1,272 +0,0 @@
-/**
- * @vitest-environment jsdom
- *
- * Tests for the image-edit affordance + modal:
- *   - EditorContext exposes openImageEdit / closeImageEdit / bumpMediaRevision
- *   - <EditorShell> mounts an `<ImageEditModal>` when the target is set,
- *     and routes Export blobs back through `mediaProvider.addMedia`.
- *
- * The Tiptap NodeView itself isn't exercised here (Tiptap + ProseMirror
- * are jsdom-hostile); we verify the surrounding context + shell wiring
- * directly via a small harness.
- */
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import {
-  MemoryContentContainer,
-  createMediaProviderFromContainer,
-} from '@bendyline/squisq/storage';
-import type { MediaProvider } from '@bendyline/squisq/schemas';
-import { EditorProvider, useEditorContext } from '../EditorContext';
-
-// Stub the heavy editing surfaces so the shell can mount under jsdom
-// without dragging in monaco-editor or Tiptap. We only care about the
-// shell's modal-mounting wiring here.
-vi.mock('../RawEditor', () => ({
-  RawEditor: () => <div data-testid="raw-editor-stub" />,
-}));
-vi.mock('../WysiwygEditor', () => ({
-  WysiwygEditor: () => <div data-testid="wysiwyg-editor-stub" />,
-}));
-vi.mock('../PreviewPanel', () => ({
-  PreviewPanel: () => <div data-testid="preview-stub" />,
-}));
-
-import { EditorShell } from '../EditorShell';
-
-beforeEach(() => {
-  if (typeof URL.createObjectURL !== 'function') {
-    Object.defineProperty(URL, 'createObjectURL', {
-      configurable: true,
-      value: vi.fn(() => 'blob:stub'),
-    });
-  }
-  if (typeof URL.revokeObjectURL !== 'function') {
-    Object.defineProperty(URL, 'revokeObjectURL', {
-      configurable: true,
-      value: vi.fn(),
-    });
-  }
-  if (typeof window !== 'undefined' && typeof window.matchMedia !== 'function') {
-    Object.defineProperty(window, 'matchMedia', {
-      configurable: true,
-      value: (query: string) => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addListener: vi.fn(),
-        removeListener: vi.fn(),
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-        dispatchEvent: vi.fn(() => false),
-      }),
-    });
-  }
-  if (typeof globalThis.ResizeObserver === 'undefined') {
-    class ResizeObserverStub {
-      observe(): void {}
-      unobserve(): void {}
-      disconnect(): void {}
-    }
-    (globalThis as unknown as { ResizeObserver: typeof ResizeObserverStub }).ResizeObserver =
-      ResizeObserverStub;
-  }
-});
-
-// ── Context harness ──────────────────────────────────────
-
-function ContextHarness() {
-  const ctx = useEditorContext();
-  return (
-    <div>
-      <span data-testid="target">{ctx.imageEditTarget ?? 'null'}</span>
-      <span data-testid="revision">{ctx.mediaRevision}</span>
-      <button data-testid="open" type="button" onClick={() => ctx.openImageEdit('hero.png')}>
-        open
-      </button>
-      <button data-testid="close" type="button" onClick={ctx.closeImageEdit}>
-        close
-      </button>
-      <button data-testid="bump" type="button" onClick={ctx.bumpMediaRevision}>
-        bump
-      </button>
-    </div>
-  );
-}
-
-describe('EditorContext image-edit actions', () => {
-  it('starts with imageEditTarget=null and mediaRevision=0', () => {
-    render(
-      <EditorProvider>
-        <ContextHarness />
-      </EditorProvider>,
-    );
-    expect(screen.getByTestId('target').textContent).toBe('null');
-    expect(screen.getByTestId('revision').textContent).toBe('0');
-  });
-
-  it('openImageEdit sets the target, closeImageEdit clears it', () => {
-    render(
-      <EditorProvider>
-        <ContextHarness />
-      </EditorProvider>,
-    );
-    act(() => {
-      fireEvent.click(screen.getByTestId('open'));
-    });
-    expect(screen.getByTestId('target').textContent).toBe('hero.png');
-    act(() => {
-      fireEvent.click(screen.getByTestId('close'));
-    });
-    expect(screen.getByTestId('target').textContent).toBe('null');
-  });
-
-  it('bumpMediaRevision increments monotonically', () => {
-    render(
-      <EditorProvider>
-        <ContextHarness />
-      </EditorProvider>,
-    );
-    expect(screen.getByTestId('revision').textContent).toBe('0');
-    act(() => {
-      fireEvent.click(screen.getByTestId('bump'));
-    });
-    act(() => {
-      fireEvent.click(screen.getByTestId('bump'));
-    });
-    expect(screen.getByTestId('revision').textContent).toBe('2');
-  });
-});
-
-// ── Shell + modal harness ────────────────────────────────
-
-/**
- * A floating button that uses `useEditorContext` to dispatch
- * `openImageEdit(path)` from inside the shell — this lets us trigger
- * the modal without spinning up a full Tiptap NodeView.
- */
-function TriggerButton({ path }: { path: string }) {
-  const { openImageEdit } = useEditorContext();
-  return (
-    <button data-testid="trigger" type="button" onClick={() => openImageEdit(path)}>
-      open
-    </button>
-  );
-}
-
-async function setupShellWithImage(): Promise<{
-  container: MemoryContentContainer;
-  mediaProvider: MediaProvider;
-}> {
-  const container = new MemoryContentContainer();
-  // Seed a 1×1 PNG so resolveUrl returns a fetchable blob URL.
-  const onePixel = new Uint8Array([
-    0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x0d, 0x49, 0x48, 0x44, 0x52,
-  ]);
-  await container.writeFile('hero.png', onePixel.buffer, 'image/png');
-  const mediaProvider = createMediaProviderFromContainer(container);
-  return { container, mediaProvider };
-}
-
-describe('<EditorShell> image-edit modal wiring', () => {
-  it('opens the modal when openImageEdit is dispatched and closes via the close button', async () => {
-    const { container, mediaProvider } = await setupShellWithImage();
-    render(
-      <EditorShell
-        initialMarkdown="# hi"
-        workspaceContainer={container}
-        mediaProvider={mediaProvider}
-        toolbarSlotRight={<TriggerButton path="hero.png" />}
-      />,
-    );
-
-    expect(screen.queryByTestId('image-edit-modal')).toBeNull();
-
-    const trigger = screen.getByTestId('trigger');
-    trigger.focus();
-    await act(async () => {
-      fireEvent.click(trigger);
-    });
-
-    await waitFor(() => {
-      expect(screen.getByTestId('image-edit-modal')).toBeTruthy();
-    });
-    // 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'));
-    });
-    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 () => {
-    const { mediaProvider } = await setupShellWithImage();
-    render(
-      <EditorShell
-        initialMarkdown="# hi"
-        mediaProvider={mediaProvider}
-        toolbarSlotRight={<TriggerButton path="hero.png" />}
-      />,
-    );
-    await act(async () => {
-      fireEvent.click(screen.getByTestId('trigger'));
-    });
-    // Modal now mounts even without a host container — the sidecar is
-    // backed by a fresh MemoryContentContainer the modal owns.
-    await waitFor(() => {
-      expect(screen.getByTestId('image-edit-modal')).toBeTruthy();
-    });
-  });
-
-  it('does NOT mount the modal when no mediaProvider is wired', async () => {
-    render(
-      <EditorShell initialMarkdown="# hi" toolbarSlotRight={<TriggerButton path="hero.png" />} />,
-    );
-    await act(async () => {
-      fireEvent.click(screen.getByTestId('trigger'));
-    });
-    // Without a media provider the modal has no way to resolve the source
-    // or write the result back — the guard bails out.
-    expect(screen.queryByTestId('image-edit-modal')).toBeNull();
-  });
-
-  it('writes the exported blob back through mediaProvider.addMedia and closes', async () => {
-    const { container, mediaProvider } = await setupShellWithImage();
-    const addMediaSpy = vi.spyOn(mediaProvider, 'addMedia');
-
-    render(
-      <EditorShell
-        initialMarkdown="# hi"
-        workspaceContainer={container}
-        mediaProvider={mediaProvider}
-        toolbarSlotRight={<TriggerButton path="hero.png" />}
-      />,
-    );
-
-    await act(async () => {
-      fireEvent.click(screen.getByTestId('trigger'));
-    });
-    await waitFor(() => {
-      expect(screen.getByTestId('image-edit-modal')).toBeTruthy();
-    });
-
-    // Drive the export path directly via mediaProvider.addMedia — the
-    // modal's onExport handler does exactly this. We don't try to
-    // pump the inner ImageEditor's Export button (it depends on async
-    // sidecar seeding that's heavy to wait through here).
-    // Pass raw bytes (a Uint8Array) — jsdom's Blob lacks `arrayBuffer()`,
-    // and a fake-Blob stub doesn't satisfy `instanceof Blob`, so the
-    // simplest payload is the Uint8Array branch addMedia already supports.
-    const bytes = new Uint8Array([1, 2, 3]);
-    await act(async () => {
-      await mediaProvider.addMedia('hero.png', bytes, 'image/png');
-    });
-
-    expect(addMediaSpy).toHaveBeenCalledWith('hero.png', bytes, 'image/png');
-  });
-});

package/src/__tests__/imageEditModalContract.test.tsx

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

@@ -1,94 +0,0 @@
-/**
- * @vitest-environment jsdom
- *
- * High-level smoke test for the `<ImageEditor>` shell — verifies it
- * mounts against a sidecar container, finishes its initial seed, and
- * renders the toolbar / canvas / panels.
- */
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-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';
-import { ImageEditor } from '../ImageEditor.js';
-
-beforeEach(() => {
-  if (typeof URL.createObjectURL !== 'function') {
-    Object.defineProperty(URL, 'createObjectURL', {
-      configurable: true,
-      value: vi.fn(() => 'blob:stub'),
-    });
-  }
-  if (typeof URL.revokeObjectURL !== 'function') {
-    Object.defineProperty(URL, 'revokeObjectURL', {
-      configurable: true,
-      value: vi.fn(),
-    });
-  }
-});
-
-describe('<ImageEditor>', () => {
-  it('mounts an existing state.json and shows toolbar / layers / properties', async () => {
-    const parent = new MemoryContentContainer();
-    const sidecar = scopeContainer(parent, 'pic_files');
-    await writeImageEditDoc(sidecar, createEmptyImageEditDoc(64, 48));
-
-    render(<ImageEditor filesContainer={sidecar} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('image-editor')).toBeTruthy();
-    });
-
-    expect(screen.getByTestId('image-editor-toolbar')).toBeTruthy();
-    expect(screen.getByTestId('image-editor-layers')).toBeTruthy();
-    expect(screen.getByTestId('image-editor-properties')).toBeTruthy();
-
-    // SVG canvas viewBox reflects the doc dimensions.
-    const svg = document.querySelector('svg.squisq-image-editor-canvas');
-    expect(svg).not.toBeNull();
-    expect(svg!.getAttribute('viewBox')).toBe('0 0 64 48');
-  });
-
-  it('shows the loading state before the seed completes', () => {
-    const parent = new MemoryContentContainer();
-    const sidecar = scopeContainer(parent, 'pic_files');
-    render(<ImageEditor filesContainer={sidecar} />);
-    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');
-    await writeImageEditDoc(sidecar, createEmptyImageEditDoc(64, 48));
-
-    render(<ImageEditor filesContainer={sidecar} surface={DARK_SURFACE} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('image-editor')).toBeTruthy();
-    });
-
-    const editor = screen.getByTestId('image-editor');
-    expect(editor.style.getPropertyValue('--squisq-image-editor-bg')).toBe(DARK_SURFACE.background);
-    expect(editor.style.getPropertyValue('--squisq-image-editor-text')).toBe(DARK_SURFACE.text);
-    expect(editor.style.getPropertyValue('--squisq-image-editor-panel-bg')).toBe(
-      `color-mix(in srgb, ${DARK_SURFACE.background} 92%, ${DARK_SURFACE.text} 8%)`,
-    );
-    expect(editor.style.getPropertyValue('--squisq-image-editor-control-bg')).toBe(
-      `color-mix(in srgb, ${DARK_SURFACE.background} 86%, ${DARK_SURFACE.text} 14%)`,
-    );
-  });
-});

package/src/__tests__/imageEditorState.test.ts

@@ -1,171 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import type { ImageEditDoc, ImageEditLayer } from '@bendyline/squisq/schemas';
-import { createEmptyImageEditDoc } from '@bendyline/squisq/imageEdit';
-import {
-  imageEditorReducer,
-  initialImageEditorState,
-  type ImageEditorState,
-  type ImageEditorAction,
-} from '../imageEditor/state.js';
-
-function bootstrap(): ImageEditorState {
-  const doc = createEmptyImageEditDoc(400, 300);
-  // touch sets updatedAt — clear it for stable comparisons
-  return initialImageEditorState(doc);
-}
-
-function dispatchAll(state: ImageEditorState, actions: ImageEditorAction[]): ImageEditorState {
-  return actions.reduce((s, a) => imageEditorReducer(s, a), state);
-}
-
-describe('imageEditorReducer', () => {
-  it('initial state is clean and selects no layer', () => {
-    const s = bootstrap();
-    expect(s.dirty).toBe(false);
-    expect(s.selectedLayerId).toBe(null);
-    expect(s.tool).toBe('select');
-    expect(s.doc.canvas.width).toBe(400);
-  });
-
-  it('add-layer assigns an id, marks dirty, and selects by default', () => {
-    const s0 = bootstrap();
-    const s1 = imageEditorReducer(s0, {
-      type: 'add-layer',
-      layer: {
-        type: 'shape',
-        position: { x: 0, y: 0, width: 50, height: 50 },
-        content: { shape: 'rect', fill: '#fff' },
-      },
-    });
-    expect(s1.dirty).toBe(true);
-    expect(s1.doc.layers).toHaveLength(1);
-    const added = s1.doc.layers[0]!;
-    expect(added.id).toMatch(/^layer-/);
-    expect(s1.selectedLayerId).toBe(added.id);
-  });
-
-  it('add-layer with select:false leaves selection untouched', () => {
-    const s = imageEditorReducer(bootstrap(), {
-      type: 'add-layer',
-      select: false,
-      layer: {
-        type: 'shape',
-        position: { x: 0, y: 0, width: 1, height: 1 },
-        content: { shape: 'rect' },
-      },
-    });
-    expect(s.selectedLayerId).toBe(null);
-  });
-
-  it('remove-layer drops the layer and clears selection if it was selected', () => {
-    const s1 = imageEditorReducer(bootstrap(), {
-      type: 'add-layer',
-      layer: {
-        type: 'shape',
-        position: { x: 0, y: 0, width: 1, height: 1 },
-        content: { shape: 'rect' },
-      },
-    });
-    const id = s1.doc.layers[0]!.id;
-    const s2 = imageEditorReducer(s1, { type: 'remove-layer', layerId: id });
-    expect(s2.doc.layers).toHaveLength(0);
-    expect(s2.selectedLayerId).toBe(null);
-  });
-
-  it('update-layer applies a shallow patch', () => {
-    const s1 = imageEditorReducer(bootstrap(), {
-      type: 'add-layer',
-      layer: {
-        type: 'shape',
-        position: { x: 10, y: 10, width: 20, height: 20 },
-        content: { shape: 'rect' },
-      },
-    });
-    const id = s1.doc.layers[0]!.id;
-    const s2 = imageEditorReducer(s1, {
-      type: 'update-layer',
-      layerId: id,
-      patch: { name: 'Box', opacity: 0.5 },
-    });
-    const layer = s2.doc.layers[0]!;
-    expect(layer.name).toBe('Box');
-    expect(layer.opacity).toBe(0.5);
-    // Untouched fields are preserved.
-    expect(layer.position).toEqual({ x: 10, y: 10, width: 20, height: 20 });
-  });
-
-  it('reorder-layer moves a layer to the requested index', () => {
-    let s = bootstrap();
-    s = dispatchAll(s, [
-      { type: 'add-layer', layer: shape('a') },
-      { type: 'add-layer', layer: shape('b') },
-      { type: 'add-layer', layer: shape('c') },
-    ]);
-    const ids = s.doc.layers.map((l) => l.id);
-    // Move the first layer to the top of the stack.
-    const s2 = imageEditorReducer(s, { type: 'reorder-layer', layerId: ids[0]!, toIndex: 2 });
-    expect(s2.doc.layers.map((l) => l.id)).toEqual([ids[1], ids[2], ids[0]]);
-  });
-
-  it('crop translates layer positions into the new origin and resizes the canvas', () => {
-    let s = bootstrap();
-    s = imageEditorReducer(s, {
-      type: 'add-layer',
-      layer: {
-        type: 'shape',
-        position: { x: 100, y: 80, width: 50, height: 50 },
-        content: { shape: 'rect' },
-      },
-    });
-    const s2 = imageEditorReducer(s, {
-      type: 'crop',
-      rect: { x: 50, y: 50, width: 200, height: 150 },
-    });
-    expect(s2.doc.canvas.width).toBe(200);
-    expect(s2.doc.canvas.height).toBe(150);
-    const layer = s2.doc.layers[0]!;
-    expect(layer.position.x).toBe(50);
-    expect(layer.position.y).toBe(30);
-  });
-
-  it('mark-clean clears the dirty flag without touching the doc', () => {
-    let s = bootstrap();
-    s = imageEditorReducer(s, { type: 'set-canvas', canvas: { width: 1, height: 1 } });
-    expect(s.dirty).toBe(true);
-    const docRef = s.doc;
-    s = imageEditorReducer(s, { type: 'mark-clean' });
-    expect(s.dirty).toBe(false);
-    expect(s.doc).toBe(docRef);
-  });
-
-  it('select / set-tool do not mark the doc dirty', () => {
-    const s0 = imageEditorReducer(bootstrap(), {
-      type: 'add-layer',
-      layer: shape('x'),
-    });
-    const s1 = imageEditorReducer(
-      { ...s0, dirty: false },
-      {
-        type: 'select',
-        layerId: s0.doc.layers[0]!.id,
-      },
-    );
-    expect(s1.dirty).toBe(false);
-    const s2 = imageEditorReducer(s1, { type: 'set-tool', tool: 'crop' });
-    expect(s2.dirty).toBe(false);
-    expect(s2.tool).toBe('crop');
-  });
-});
-
-function shape(name: string): ImageEditLayer {
-  return {
-    id: '', // assigned by reducer
-    type: 'shape',
-    name,
-    position: { x: 0, y: 0, width: 10, height: 10 },
-    content: { shape: 'rect' },
-  } as ImageEditLayer;
-}
-
-// Make the test module type-check without unused import warnings.
-export type _Unused = ImageEditDoc;