@bendyline/squisq-editor-react 2.0.1 → 2.2.0

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;

package/src/__tests__/inlinePreviewGutter.test.tsx

@@ -1,62 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { EditorProvider } from '../EditorContext';
-import { InlinePreviewGutter } from '../InlinePreviewGutter';
-
-/**
- * The gutter pulls its data from the EditorContext's parsed Doc. We mount
- * it against a real provider seeded with markdown that contains both an
- * annotated heading (`{[title]}`) and a plain heading. The first
- * should produce a card; the second should be ignored.
- *
- * We deliberately don't snapshot the SVG — the BlockRenderer covers that
- * elsewhere. Here we just assert (a) the gutter mounts, (b) it renders
- * one card per annotated block, and (c) the empty state shows when there
- * are no annotated blocks.
- */
-
-function renderGutter(markdown: string) {
-  return render(
-    <EditorProvider initialMarkdown={markdown} initialView="wysiwyg" articleId="test">
-      <InlinePreviewGutter />
-    </EditorProvider>,
-  );
-}
-
-describe('InlinePreviewGutter', () => {
-  it('renders the empty state when no blocks are template-annotated', async () => {
-    renderGutter('# Plain heading\n\nSome body text.\n');
-    expect(await screen.findByText(/tag a heading with a template/i)).toBeTruthy();
-  });
-
-  it('renders one card per template-annotated block', async () => {
-    const md = [
-      '# Welcome {[title]}',
-      '',
-      'Subtitle goes here.',
-      '',
-      '## Plain heading',
-      '',
-      'No template tag — should not produce a card.',
-      '',
-      '## Big number {[statHighlight]}',
-      '',
-      '42',
-    ].join('\n');
-
-    const { container } = renderGutter(md);
-
-    // Two annotated headings → two cards.
-    await screen.findByTestId('inline-preview-gutter');
-    const cards = container.querySelectorAll('.squisq-inline-preview-card');
-    expect(cards.length).toBe(2);
-
-    // Template labels are rendered alongside each card.
-    const labels = Array.from(
-      container.querySelectorAll('.squisq-inline-preview-card-template'),
-    ).map((el) => el.textContent);
-    // Templates render their human-readable label (via `templateLabel`).
-    expect(labels).toContain('Title');
-    expect(labels).toContain('Stat Highlight');
-  });
-});

package/src/__tests__/inlinePreviewGutterAllBlocks.test.tsx

@@ -1,103 +0,0 @@
-import { describe, expect, it, beforeAll } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import { EditorProvider } from '../EditorContext';
-import { InlinePreviewGutter } from '../InlinePreviewGutter';
-
-// jsdom lacks ResizeObserver — the gutter's heading-layout hook wires one
-// up to recompute on editor resizes. Stub a no-op for these tests.
-beforeAll(() => {
-  if (typeof globalThis.ResizeObserver === 'undefined') {
-    globalThis.ResizeObserver = class {
-      observe() {}
-      unobserve() {}
-      disconnect() {}
-    } as unknown as typeof ResizeObserver;
-  }
-});
-
-/**
- * The gutter pulls heading data from the parsed Doc (via `useHeadingLayout`)
- * and pairs it to DOM headings inside the `.squisq-wysiwyg-container`.
- * To exercise the all-blocks bracket logic we provide both: real markdown
- * (so the parser populates `doc.blocks`) AND a sibling stub container with
- * matching `<h*>` elements (so the DOM-pairing path finds something to
- * measure).
- */
-function renderWithMatchingDom(markdown: string, headingHtml: string) {
-  return render(
-    <EditorProvider initialMarkdown={markdown} initialView="wysiwyg" articleId="test">
-      <div className="squisq-editor-with-gutter" style={{ position: 'relative', height: 600 }}>
-        <div
-          className="squisq-wysiwyg-container"
-          style={{ position: 'relative', width: 800, height: 600 }}
-        >
-          <div
-            className="squisq-wysiwyg-editor"
-            dangerouslySetInnerHTML={{ __html: headingHtml }}
-          />
-        </div>
-        <InlinePreviewGutter />
-      </div>
-    </EditorProvider>,
-  );
-}
-
-describe('InlinePreviewGutter — all-block bracket lines', () => {
-  it('renders a vertical-extent bar per heading even when none are annotated', async () => {
-    const md = '# Hello World\n\nBody\n\n## Getting Started\n\nBody\n\n## Tips\n\nBody\n';
-    const { container } = renderWithMatchingDom(
-      md,
-      '<h1>Hello World</h1>' +
-        '<p>Body</p>' +
-        '<h2>Getting Started</h2>' +
-        '<p>Body</p>' +
-        '<h2>Tips</h2>' +
-        '<p>Body</p>',
-    );
-
-    await waitFor(
-      () => {
-        const bars = container.querySelectorAll('.squisq-inline-preview-extent');
-        expect(bars.length).toBe(3);
-      },
-      { timeout: 1000 },
-    );
-
-    // All three should be the untagged variant (no `data-template` on any).
-    const bars = container.querySelectorAll('.squisq-inline-preview-extent');
-    bars.forEach((bar) =>
-      expect(bar.classList.contains('squisq-inline-preview-extent--untagged')).toBe(true),
-    );
-  });
-
-  it('renders a strong tagged bar for annotated headings + lighter bars for the rest', async () => {
-    const md = '# Welcome\n\n## Getting Started {[sectionHeader]}\n\n## Tips\n';
-    const { container } = renderWithMatchingDom(
-      md,
-      '<h1>Welcome</h1>' +
-        '<h2 data-template="sectionHeader">Getting Started</h2>' +
-        '<h2>Tips</h2>',
-    );
-
-    await waitFor(
-      () => {
-        const bars = container.querySelectorAll('.squisq-inline-preview-extent');
-        expect(bars.length).toBe(3);
-      },
-      { timeout: 1000 },
-    );
-
-    const bars = Array.from(container.querySelectorAll('.squisq-inline-preview-extent'));
-    const tagged = bars.filter(
-      (b) => !b.classList.contains('squisq-inline-preview-extent--untagged'),
-    );
-    const untagged = bars.filter((b) =>
-      b.classList.contains('squisq-inline-preview-extent--untagged'),
-    );
-    expect(tagged.length).toBe(1);
-    expect(untagged.length).toBe(2);
-  });
-});
-
-// `screen` import unused but kept to mirror the sibling test file's style.
-void screen;

package/src/__tests__/jsonEditor.test.tsx

@@ -1,223 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { useState } from 'react';
-import { fireEvent, render, screen, waitFor } 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();
-  });
-
-  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();
-  });
-});