@bendyline/squisq-editor-react 1.4.0 → 1.5.0

package/src/__tests__/jsonEditor.test.tsx

@@ -0,0 +1,168 @@
+import { describe, it, expect, vi } from 'vitest';
+import { useState } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { SquisqAnnotatedSchema } from '@bendyline/squisq/jsonForm';
+import { JsonEditor } from '../jsonEditor';
+
+function Controlled<T>({
+  schema,
+  initial,
+  onValueChange,
+}: {
+  schema: SquisqAnnotatedSchema;
+  initial: T;
+  onValueChange?: (next: T) => void;
+}) {
+  const [value, setValue] = useState<T>(initial);
+  return (
+    <JsonEditor
+      schema={schema}
+      value={value}
+      onChange={(v) => {
+        setValue(v as T);
+        onValueChange?.(v as T);
+      }}
+    />
+  );
+}
+
+describe('JsonEditor', () => {
+  it('renders text input and propagates edits through onChange', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: { title: { type: 'string', title: 'Title' } },
+    };
+    const onChange = vi.fn();
+    render(<Controlled schema={schema} initial={{ title: 'Hi' }} onValueChange={onChange} />);
+    const input = screen.getByDisplayValue('Hi') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'Hello' } });
+    expect(onChange).toHaveBeenLastCalledWith({ title: 'Hello' });
+  });
+
+  it('toggles a boolean via the toggle control', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: { active: { type: 'boolean', title: 'Active' } },
+    };
+    const onChange = vi.fn();
+    render(<Controlled schema={schema} initial={{ active: false }} onValueChange={onChange} />);
+    const button = screen.getByRole('button', { pressed: false });
+    fireEvent.click(button);
+    expect(onChange).toHaveBeenLastCalledWith({ active: true });
+  });
+
+  it('hides fields whose hidden rule matches', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: {
+        showAuthor: { type: 'boolean', title: 'Show author' },
+        authorName: {
+          type: 'string',
+          title: 'Author name',
+          squisq: { hidden: { field: 'showAuthor', truthy: false } },
+        },
+      },
+    };
+    const { container } = render(
+      <Controlled schema={schema} initial={{ showAuthor: false, authorName: 'Alex' }} />,
+    );
+    expect(container.textContent).not.toContain('Author name');
+  });
+
+  it('selecting a different segmented option commits the new enum value', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: {
+        size: { type: 'string', title: 'Size', enum: ['s', 'm', 'l'] },
+      },
+    };
+    const onChange = vi.fn();
+    render(<Controlled schema={schema} initial={{ size: 's' }} onValueChange={onChange} />);
+    fireEvent.click(screen.getByRole('button', { name: 'l' }));
+    expect(onChange).toHaveBeenLastCalledWith({ size: 'l' });
+  });
+
+  it('card-stack: + Add appends, × Remove removes, ↑↓ reorder', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: {
+        sections: {
+          type: 'array',
+          title: 'Sections',
+          items: {
+            type: 'object',
+            properties: { heading: { type: 'string' } },
+            squisq: { itemLabel: { fromField: 'heading' } },
+          },
+          squisq: { control: 'card-stack', addLabel: '+ Add section' },
+        },
+      },
+    };
+    const onChange = vi.fn();
+    render(
+      <Controlled
+        schema={schema}
+        initial={{ sections: [{ heading: 'A' }, { heading: 'B' }] }}
+        onValueChange={onChange}
+      />,
+    );
+
+    // + Add appends a new empty item.
+    fireEvent.click(screen.getByText('+ Add section'));
+    expect(onChange).toHaveBeenLastCalledWith({
+      sections: [{ heading: 'A' }, { heading: 'B' }, { heading: '' }],
+    });
+
+    // × on the first card removes it.
+    const removeButtons = screen.getAllByLabelText('Remove');
+    fireEvent.click(removeButtons[0]);
+    expect(onChange).toHaveBeenLastCalledWith({
+      sections: [{ heading: 'B' }, { heading: '' }],
+    });
+
+    // ↓ on the first card reorders.
+    const downs = screen.getAllByLabelText('Move down');
+    fireEvent.click(downs[0]);
+    expect(onChange).toHaveBeenLastCalledWith({
+      sections: [{ heading: '' }, { heading: 'B' }],
+    });
+  });
+
+  it('chip-bin: typing + Enter appends, × removes', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: {
+        tags: {
+          type: 'array',
+          items: { type: 'string' },
+          squisq: { control: 'chip-bin', addLabel: '+ Add tag' },
+        },
+      },
+    };
+    const onChange = vi.fn();
+    render(<Controlled schema={schema} initial={{ tags: ['one'] }} onValueChange={onChange} />);
+
+    const addInput = screen.getByPlaceholderText('+ Add tag');
+    fireEvent.change(addInput, { target: { value: 'two' } });
+    fireEvent.keyDown(addInput, { key: 'Enter' });
+    expect(onChange).toHaveBeenLastCalledWith({ tags: ['one', 'two'] });
+
+    fireEvent.click(screen.getByLabelText('Remove one'));
+    expect(onChange).toHaveBeenLastCalledWith({ tags: ['two'] });
+  });
+
+  it('omitting onChange disables every editor', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: { title: { type: 'string', title: 'Title' } },
+    };
+    const onChange = vi.fn();
+    // Use a sniffer onChange we can verify is never called by simulating an
+    // attempted change. We render WITHOUT passing onChange to JsonEditor.
+    render(<JsonEditor schema={schema} value={{ title: 'Hi' }} />);
+    const input = screen.getByDisplayValue('Hi') as HTMLInputElement;
+    expect(input.disabled).toBe(true);
+    fireEvent.change(input, { target: { value: 'changed' } });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/layersPanel.test.tsx

@@ -0,0 +1,97 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { ImageEditDoc } from '@bendyline/squisq/schemas';
+import { LayersPanel } from '../imageEditor/LayersPanel.js';
+import type { ImageEditorAction } from '../imageEditor/state.js';
+
+function buildDoc(): ImageEditDoc {
+  return {
+    version: 1,
+    canvas: { width: 100, height: 100 },
+    layers: [
+      {
+        id: 'a',
+        type: 'shape',
+        name: 'Bottom',
+        position: { x: 0, y: 0, width: 10, height: 10 },
+        content: { shape: 'rect' },
+      },
+      {
+        id: 'b',
+        type: 'text',
+        name: 'Middle',
+        position: { x: 0, y: 0, width: 50, height: 20 },
+        content: { text: 'Hi', style: { fontSize: 16, color: '#000' } },
+      },
+      {
+        id: 'c',
+        type: 'shape',
+        name: 'Top',
+        visible: false,
+        position: { x: 0, y: 0, width: 10, height: 10 },
+        content: { shape: 'rect' },
+      },
+    ],
+  };
+}
+
+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} />);
+    const items = screen.getAllByText(/Bottom|Middle|Top/);
+    expect(items[0]?.textContent).toContain('Top');
+    expect(items[items.length - 1]?.textContent).toContain('Bottom');
+  });
+
+  it('clicking the layer name dispatches a select action', () => {
+    const dispatch = vi.fn<(a: ImageEditorAction) => void>();
+    render(<LayersPanel doc={buildDoc()} selectedLayerId={null} dispatch={dispatch} />);
+    fireEvent.click(screen.getByText('Middle'));
+    expect(dispatch).toHaveBeenCalledWith({ type: 'select', layerId: 'b' });
+  });
+
+  it('toggling visibility dispatches an update-layer action', () => {
+    const dispatch = vi.fn<(a: ImageEditorAction) => void>();
+    render(<LayersPanel doc={buildDoc()} selectedLayerId={null} dispatch={dispatch} />);
+    // 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'
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'update-layer',
+      layerId: 'b',
+      patch: { visible: false },
+    });
+  });
+
+  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} />);
+    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);
+  });
+
+  it('delete button dispatches a remove-layer action', () => {
+    const dispatch = vi.fn<(a: ImageEditorAction) => void>();
+    render(<LayersPanel doc={buildDoc()} selectedLayerId={null} dispatch={dispatch} />);
+    const delButtons = screen.getAllByRole('button', { name: 'Delete layer' });
+    fireEvent.click(delButtons[0]!); // top of stack ('c')
+    expect(dispatch).toHaveBeenCalledWith({ type: 'remove-layer', layerId: 'c' });
+  });
+
+  it('shows an empty-state message when there are no layers', () => {
+    const dispatch = vi.fn<(a: ImageEditorAction) => void>();
+    render(
+      <LayersPanel
+        doc={{ version: 1, canvas: { width: 1, height: 1 }, layers: [] }}
+        selectedLayerId={null}
+        dispatch={dispatch}
+      />,
+    );
+    expect(screen.getByText(/no layers yet/i)).toBeTruthy();
+  });
+});

package/src/__tests__/linkDialogDocPicker.test.tsx

@@ -0,0 +1,137 @@
+/**
+ * Covers the LinkDialog's "Browse documents" picker added behind the
+ * `documentLinkProvider` prop. The picker is purely additive — when
+ * the prop is absent the dialog renders its original URL-only layout.
+ */
+
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { LinkDialog } from '../LinkDialog';
+import type { DocumentLinkProvider } from '../EditorContext';
+
+const NEIGHBORS = [
+  { path: 'resume.md', label: 'Resume', description: 'My CV' },
+  { path: 'projects.md', label: 'Projects' },
+  { path: 'misc/notes.md', label: 'Notes', description: 'Scratchpad' },
+];
+
+const provider: DocumentLinkProvider = async (q) => {
+  const query = q.trim().toLowerCase();
+  if (!query) return NEIGHBORS;
+  return NEIGHBORS.filter(
+    (n) => n.label.toLowerCase().includes(query) || n.path.toLowerCase().includes(query),
+  );
+};
+
+describe('LinkDialog — document picker', () => {
+  it('hides the documents tab when no provider is supplied', () => {
+    render(
+      <LinkDialog
+        mode="insert"
+        initialText=""
+        initialUrl=""
+        onConfirm={() => {}}
+        onClose={() => {}}
+      />,
+    );
+    expect(screen.queryByRole('tab', { name: /browse documents/i })).toBeNull();
+  });
+
+  it('shows both tabs when the provider is supplied', () => {
+    render(
+      <LinkDialog
+        mode="insert"
+        initialText=""
+        initialUrl=""
+        onConfirm={() => {}}
+        onClose={() => {}}
+        documentLinkProvider={provider}
+      />,
+    );
+    expect(screen.getByRole('tab', { name: 'URL' })).toBeTruthy();
+    expect(screen.getByRole('tab', { name: 'Browse documents' })).toBeTruthy();
+  });
+
+  it('lists initial candidates when the documents tab opens', async () => {
+    render(
+      <LinkDialog
+        mode="insert"
+        initialText=""
+        initialUrl=""
+        onConfirm={() => {}}
+        onClose={() => {}}
+        documentLinkProvider={provider}
+      />,
+    );
+    fireEvent.click(screen.getByRole('tab', { name: 'Browse documents' }));
+    await waitFor(() => {
+      expect(screen.getByText('Resume')).toBeTruthy();
+      expect(screen.getByText('Projects')).toBeTruthy();
+      expect(screen.getByText('Notes')).toBeTruthy();
+    });
+  });
+
+  it('filters candidates as the user types', async () => {
+    render(
+      <LinkDialog
+        mode="insert"
+        initialText=""
+        initialUrl=""
+        onConfirm={() => {}}
+        onClose={() => {}}
+        documentLinkProvider={provider}
+      />,
+    );
+    fireEvent.click(screen.getByRole('tab', { name: 'Browse documents' }));
+    await waitFor(() => screen.getByText('Resume'));
+    const search = screen.getByLabelText('Search') as HTMLInputElement;
+    fireEvent.change(search, { target: { value: 'proj' } });
+    await waitFor(() => {
+      expect(screen.getByText('Projects')).toBeTruthy();
+      expect(screen.queryByText('Resume')).toBeNull();
+    });
+  });
+
+  it('picking a document fills the URL and auto-fills the caption when empty', async () => {
+    const onConfirm = vi.fn();
+    render(
+      <LinkDialog
+        mode="insert"
+        initialText=""
+        initialUrl=""
+        onConfirm={onConfirm}
+        onClose={() => {}}
+        documentLinkProvider={provider}
+      />,
+    );
+    fireEvent.click(screen.getByRole('tab', { name: 'Browse documents' }));
+    await waitFor(() => screen.getByText('Resume'));
+    fireEvent.click(screen.getByRole('option', { name: /Resume/i }));
+    // After picking, the dialog jumps back to the URL tab so Enter submits.
+    const urlInput = screen.getByLabelText('URL') as HTMLInputElement;
+    expect(urlInput.value).toBe('resume.md');
+    const textInput = screen.getByLabelText('Text') as HTMLInputElement;
+    expect(textInput.value).toBe('Resume');
+    // Submit
+    fireEvent.submit(urlInput.closest('form')!);
+    expect(onConfirm).toHaveBeenCalledWith('Resume', 'resume.md');
+  });
+
+  it('preserves a caption the user already typed when picking a document', async () => {
+    render(
+      <LinkDialog
+        mode="insert"
+        initialText="Read my work"
+        initialUrl=""
+        onConfirm={() => {}}
+        onClose={() => {}}
+        documentLinkProvider={provider}
+      />,
+    );
+    fireEvent.click(screen.getByRole('tab', { name: 'Browse documents' }));
+    await waitFor(() => screen.getByText('Resume'));
+    fireEvent.click(screen.getByRole('option', { name: /Resume/i }));
+    const textInput = screen.getByLabelText('Text') as HTMLInputElement;
+    expect(textInput.value).toBe('Read my work');
+  });
+});

package/src/__tests__/outlinePanel.test.tsx

@@ -0,0 +1,79 @@
+import { describe, expect, it, beforeAll } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { EditorProvider } from '../EditorContext';
+import { OutlinePanel } from '../OutlinePanel';
+
+// jsdom lacks ResizeObserver — the pane wires one up to track the editor's
+// page edge. A no-op shim is enough for the rendering tests below.
+beforeAll(() => {
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    globalThis.ResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    } as unknown as typeof ResizeObserver;
+  }
+});
+
+function renderOutline(markdown: string) {
+  return render(
+    <EditorProvider initialMarkdown={markdown} initialView="wysiwyg" articleId="test">
+      <OutlinePanel />
+    </EditorProvider>,
+  );
+}
+
+describe('OutlinePanel', () => {
+  it('renders the empty placeholder when the doc has no headings', async () => {
+    renderOutline('Just a paragraph, no headings.\n');
+    expect(await screen.findByText(/add a heading to populate the outline/i)).toBeTruthy();
+  });
+
+  it('renders one row per heading and nests by depth', async () => {
+    const md = [
+      '# Top Level',
+      '',
+      '## Subsection A',
+      '',
+      'Body.',
+      '',
+      '### Detail',
+      '',
+      'Body.',
+      '',
+      '## Subsection B',
+      '',
+      'Body.',
+      '',
+    ].join('\n');
+
+    const { container } = renderOutline(md);
+    await screen.findByTestId('outline-panel');
+
+    const rows = container.querySelectorAll('.squisq-outline-row');
+    expect(rows.length).toBe(4);
+
+    // Depth modifier classes are applied per heading level.
+    const depths = Array.from(rows).map((r) => {
+      const match = r.className.match(/squisq-outline-row--depth-(\d)/);
+      return match ? Number(match[1]) : null;
+    });
+    expect(depths).toEqual([1, 2, 3, 2]);
+
+    // Heading text is reflected in row labels.
+    const labels = Array.from(rows).map((r) => r.textContent?.trim());
+    expect(labels).toContain('Top Level');
+    expect(labels).toContain('Subsection A');
+    expect(labels).toContain('Detail');
+    expect(labels).toContain('Subsection B');
+  });
+
+  it('shows a template chip on annotated headings', async () => {
+    const md = '# Welcome {[title]}\n\nIntro.\n';
+    const { container } = renderOutline(md);
+    await screen.findByTestId('outline-panel');
+    const chip = container.querySelector('.squisq-outline-template-chip');
+    expect(chip).not.toBeNull();
+    expect(chip!.textContent).toContain('Title');
+  });
+});

package/src/__tests__/plainHtmlPreview.test.tsx

@@ -0,0 +1,107 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import type { MediaProvider } from '@bendyline/squisq/schemas';
+import { resolveTheme } from '@bendyline/squisq/schemas';
+import { PlainHtmlPreview } from '../PlainHtmlPreview';
+
+function getIframeSrcDoc(): string {
+  const iframe = screen.getByTestId('plain-html-preview') as HTMLIFrameElement;
+  return iframe.srcdoc;
+}
+
+describe('PlainHtmlPreview', () => {
+  it('renders the markdown into the iframe srcDoc', () => {
+    render(<PlainHtmlPreview markdown={'# Hello\n\nWorld'} />);
+    const srcdoc = getIframeSrcDoc();
+    expect(srcdoc).toContain('<!DOCTYPE html>');
+    expect(srcdoc).toContain('<h1>Hello</h1>');
+    expect(srcdoc).toContain('<p>World</p>');
+  });
+
+  it('refuses scripts via sandbox attribute (allow-same-origin only)', () => {
+    render(<PlainHtmlPreview markdown={'hi'} />);
+    const iframe = screen.getByTestId('plain-html-preview') as HTMLIFrameElement;
+    const sandbox = iframe.getAttribute('sandbox') ?? '';
+    expect(sandbox).toContain('allow-same-origin');
+    expect(sandbox).not.toContain('allow-scripts');
+  });
+
+  it('applies pre-resolved images via the images prop', () => {
+    render(
+      <PlainHtmlPreview
+        markdown={'![a](a.jpg)'}
+        images={new Map([['a.jpg', 'data:image/png;base64,AAA']])}
+      />,
+    );
+    expect(getIframeSrcDoc()).toContain('src="data:image/png;base64,AAA"');
+  });
+
+  it('resolves image URLs through the supplied mediaProvider', async () => {
+    const provider: MediaProvider = {
+      resolveUrl: vi.fn(async (ref: string) => `blob:resolved/${ref}`),
+      listMedia: vi.fn(async () => []),
+      addMedia: vi.fn(async () => ''),
+      removeMedia: vi.fn(async () => {}),
+      dispose: vi.fn(() => {}),
+    };
+    render(<PlainHtmlPreview markdown={'![a](cat.jpg)'} mediaProvider={provider} />);
+    await waitFor(() => {
+      expect(getIframeSrcDoc()).toContain('src="blob:resolved/cat.jpg"');
+    });
+    expect(provider.resolveUrl).toHaveBeenCalledWith('cat.jpg');
+  });
+
+  it('does not resolve external URLs through the provider', async () => {
+    const provider: MediaProvider = {
+      resolveUrl: vi.fn(async (ref: string) => `blob:should-not-fire/${ref}`),
+      listMedia: vi.fn(async () => []),
+      addMedia: vi.fn(async () => ''),
+      removeMedia: vi.fn(async () => {}),
+      dispose: vi.fn(() => {}),
+    };
+    render(
+      <PlainHtmlPreview markdown={'![ext](https://example.com/x.jpg)'} mediaProvider={provider} />,
+    );
+    await waitFor(() => {
+      expect(getIframeSrcDoc()).toContain('src="https://example.com/x.jpg"');
+    });
+    expect(provider.resolveUrl).not.toHaveBeenCalled();
+  });
+
+  it('applies the supplied theme to the iframe document', () => {
+    const theme = resolveTheme('warm-earth');
+    render(<PlainHtmlPreview markdown={'# Hi'} theme={theme} />);
+    const srcdoc = getIframeSrcDoc();
+    expect(srcdoc).toContain(`--plain-bg: ${theme.colors.background};`);
+    expect(srcdoc).toContain(`--plain-primary: ${theme.colors.primary};`);
+    expect(srcdoc).toContain('--plain-body-font:');
+  });
+
+  it('loads Google Fonts for themes that reference google-hosted faces', () => {
+    const theme = resolveTheme('documentary');
+    render(<PlainHtmlPreview markdown={'# Hi'} theme={theme} />);
+    expect(getIframeSrcDoc()).toContain('https://fonts.googleapis.com/css2?');
+  });
+
+  it('resolves raw HTML <img> tags too (resized image case)', async () => {
+    // Resized images round-trip through the markdown source as raw
+    // HTML, which the preview must scan to keep the iframe's <img>
+    // pointing at a fetchable blob URL.
+    const provider: MediaProvider = {
+      resolveUrl: vi.fn(async (ref: string) => `blob:r/${ref}`),
+      listMedia: vi.fn(async () => []),
+      addMedia: vi.fn(async () => ''),
+      removeMedia: vi.fn(async () => {}),
+      dispose: vi.fn(() => {}),
+    };
+    render(
+      <PlainHtmlPreview
+        markdown={'<img alt="resized" src="resized.png" width="194">'}
+        mediaProvider={provider}
+      />,
+    );
+    await waitFor(() => {
+      expect(getIframeSrcDoc()).toContain('src="blob:r/resized.png"');
+    });
+  });
+});

package/src/__tests__/propertiesPanel.test.tsx

@@ -0,0 +1,69 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { ImageEditDoc } from '@bendyline/squisq/schemas';
+import { PropertiesPanel } from '../imageEditor/PropertiesPanel.js';
+import type { ImageEditorAction } from '../imageEditor/state.js';
+
+function buildDoc(): ImageEditDoc {
+  return {
+    version: 1,
+    canvas: { width: 100, height: 80, background: '#ffffff' },
+    layers: [
+      {
+        id: 'a',
+        type: 'shape',
+        name: 'Box',
+        position: { x: 5, y: 6, width: 30, height: 20 },
+        content: { shape: 'rect', fill: '#3399ff' },
+      },
+    ],
+  };
+}
+
+describe('PropertiesPanel', () => {
+  it('shows an empty hint when no layer is selected', () => {
+    const dispatch = vi.fn();
+    render(<PropertiesPanel doc={buildDoc()} selectedLayerId={null} dispatch={dispatch} />);
+    expect(screen.getByText(/no layer selected/i)).toBeTruthy();
+  });
+
+  it('editing the canvas width dispatches set-canvas', () => {
+    const dispatch = vi.fn<(a: ImageEditorAction) => void>();
+    render(<PropertiesPanel doc={buildDoc()} selectedLayerId={null} dispatch={dispatch} />);
+    const widthInput = screen.getByDisplayValue('100') as HTMLInputElement;
+    fireEvent.change(widthInput, { target: { value: '200' } });
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'set-canvas',
+      canvas: expect.objectContaining({ width: 200, height: 80 }),
+    });
+  });
+
+  it('renaming a layer dispatches update-layer with patch.name', () => {
+    const dispatch = vi.fn<(a: ImageEditorAction) => void>();
+    render(<PropertiesPanel doc={buildDoc()} selectedLayerId="a" dispatch={dispatch} />);
+    const nameInput = screen.getByDisplayValue('Box') as HTMLInputElement;
+    fireEvent.change(nameInput, { target: { value: 'Renamed' } });
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'update-layer',
+      layerId: 'a',
+      patch: expect.objectContaining({ name: 'Renamed' }),
+    });
+  });
+
+  it('changing position X dispatches update-layer with merged position', () => {
+    const dispatch = vi.fn<(a: ImageEditorAction) => void>();
+    render(<PropertiesPanel doc={buildDoc()} selectedLayerId="a" dispatch={dispatch} />);
+    const xInput = screen.getByDisplayValue('5') as HTMLInputElement;
+    fireEvent.change(xInput, { target: { value: '50' } });
+    const calls = dispatch.mock.calls.map((c) => c[0]);
+    const last = calls[calls.length - 1];
+    expect(last).toMatchObject({
+      type: 'update-layer',
+      layerId: 'a',
+      patch: { position: { x: 50, y: 6, width: 30, height: 20 } },
+    });
+  });
+});