@classic-homes/theme-svelte 1.22.0 → 1.22.2

package/dist/__tests__/code-field.test.js

@@ -1,65 +0,0 @@
-/**
- * CodeField: Tab indents instead of leaving the field, with Escape as the way
- * out, and indenting a selection works line by line.
- */
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { mount, unmount, flushSync } from 'svelte';
-import CodeField from '../lib/components/CodeField.svelte';
-let instance = null;
-function render(props) {
-    const host = document.createElement('div');
-    document.body.appendChild(host);
-    instance = mount(CodeField, { target: host, props });
-    flushSync();
-    return host.querySelector('textarea');
-}
-afterEach(() => {
-    if (instance)
-        unmount(instance);
-    instance = null;
-    document.body.innerHTML = '';
-});
-function press(field, key, shiftKey = false) {
-    const event = new KeyboardEvent('keydown', { key, shiftKey, bubbles: true, cancelable: true });
-    field.dispatchEvent(event);
-    return event;
-}
-describe('CodeField', () => {
-    it('is a labelled, monospaced, unspellchecked field with its keyboard hint', () => {
-        const field = render({ value: 'graph TD', label: 'Diagram source' });
-        expect(field.getAttribute('aria-label')).toBe('Diagram source');
-        expect(field.getAttribute('spellcheck')).toBe('false');
-        expect(field.className).toContain('font-mono');
-        const hint = document.getElementById(field.getAttribute('aria-describedby').split(' ')[0]);
-        expect(hint?.textContent).toMatch(/Escape, then Tab/);
-    });
-    it('indents at the cursor on Tab and reports the new value', () => {
-        const onValueChange = vi.fn();
-        const field = render({ value: 'ab', label: 'Code', onValueChange });
-        field.setSelectionRange(1, 1);
-        expect(press(field, 'Tab').defaultPrevented).toBe(true);
-        expect(field.value).toBe('a  b');
-        expect(onValueChange).toHaveBeenLastCalledWith('a  b');
-    });
-    it('indents and outdents every selected line', () => {
-        const field = render({ value: 'one\ntwo\nthree', label: 'Code' });
-        field.setSelectionRange(0, 7);
-        press(field, 'Tab');
-        expect(field.value).toBe('  one\n  two\nthree');
-        field.setSelectionRange(0, 11);
-        press(field, 'Tab', true);
-        expect(field.value).toBe('one\ntwo\nthree');
-    });
-    it('lets Tab leave after Escape', () => {
-        const field = render({ value: 'x', label: 'Code' });
-        press(field, 'Escape');
-        expect(press(field, 'Tab').defaultPrevented).toBe(false);
-        expect(field.value).toBe('x');
-        // and only once
-        expect(press(field, 'Tab').defaultPrevented).toBe(true);
-    });
-    it('does not indent a read-only field', () => {
-        const field = render({ value: 'x', label: 'Code', readonly: true });
-        expect(press(field, 'Tab').defaultPrevented).toBe(false);
-    });
-});

package/dist/__tests__/control-text-color.test.js

@@ -1,29 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import Input from '../lib/components/Input.svelte';
-import Textarea from '../lib/components/Textarea.svelte';
-import Select from '../lib/components/Select.svelte';
-import PasswordInput from '../lib/components/PasswordInput.svelte';
-// Form controls paint their own light surface (bg-background), so they must
-// also set their own text color. Otherwise a dark parent that sets white text
-// (Toolbar's text-toolbar-foreground) leaks into the value: white on white.
-describe('light-surface controls own their text color', () => {
-    it('Input', () => {
-        render(Input, { props: { 'aria-label': 'Search' } });
-        expect(screen.getByRole('textbox', { name: 'Search' })).toHaveClass('bg-background', 'text-foreground');
-    });
-    it('Textarea', () => {
-        render(Textarea, { props: { 'aria-label': 'Notes' } });
-        expect(screen.getByRole('textbox', { name: 'Notes' })).toHaveClass('bg-background', 'text-foreground');
-    });
-    it('PasswordInput', () => {
-        const { container } = render(PasswordInput, { props: { id: 'pw' } });
-        expect(container.querySelector('#pw')).toHaveClass('bg-background', 'text-foreground');
-    });
-    it('Select trigger', () => {
-        const { container } = render(Select, {
-            props: { id: 'status', options: [{ value: 'a', label: 'Active' }], value: 'a' },
-        });
-        expect(container.querySelector('#status')).toHaveClass('bg-background', 'text-foreground');
-    });
-});

package/dist/__tests__/data-panel-card-gestures.test.js

@@ -1,138 +0,0 @@
-/**
- * DataPanel phone card: gestures and layout.
- *
- * - A cancelled pointer (iOS's swipe up from the home indicator to leave the
- *   app) must not expand the card. It used to be handled like pointerup, so a
- *   quick cancel read as a tap.
- * - The phone card is laid out at its expanded height and slid with
- *   `translate`, padded by the safe-area inset so its collapsed header sits
- *   above the home indicator.
- */
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { mount, unmount, flushSync, createRawSnippet } from 'svelte';
-import DataPanel from '../lib/components/DataPanel.svelte';
-const children = createRawSnippet(() => ({ render: () => '<p>Legend body</p>' }));
-let instance = null;
-let host;
-function pointer(type, target, y) {
-    const event = new MouseEvent(type, { bubbles: true, clientX: 100, clientY: y });
-    Object.defineProperty(event, 'pointerId', { value: 1 });
-    target.dispatchEvent(event);
-}
-function mountCard(props = {}) {
-    host = document.createElement('div');
-    document.body.appendChild(host);
-    instance = mount(DataPanel, {
-        target: host,
-        props: {
-            title: 'Legend & Information',
-            variant: 'card',
-            disableClose: true,
-            mobileBreakpoint: 768,
-            children,
-            ...props,
-        },
-    });
-    flushSync();
-    return {
-        panel: host.querySelector('[role="dialog"]'),
-        header: host.querySelector('[data-panel-header]'),
-    };
-}
-beforeEach(() => {
-    var _a, _b, _c, _d;
-    vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(390);
-    vi.spyOn(window, 'innerHeight', 'get').mockReturnValue(800);
-    vi.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(390);
-    // jsdom has no pointer capture
-    (_a = HTMLElement.prototype).setPointerCapture ?? (_a.setPointerCapture = () => { });
-    (_b = HTMLElement.prototype).releasePointerCapture ?? (_b.releasePointerCapture = () => { });
-    (_c = HTMLElement.prototype).hasPointerCapture ?? (_c.hasPointerCapture = () => false);
-    // ...nor Web Animations, which the scrim's fade transition uses
-    (_d = Element.prototype).animate ?? (_d.animate = function () {
-        const animation = {
-            onfinish: null,
-            cancel() { },
-            finished: Promise.resolve(),
-        };
-        queueMicrotask(() => animation.onfinish?.());
-        return animation;
-    });
-});
-afterEach(() => {
-    if (instance)
-        unmount(instance);
-    instance = null;
-    host?.remove();
-    vi.useRealTimers();
-    vi.restoreAllMocks();
-});
-describe('DataPanel card pointer cancel', () => {
-    it('does not expand when the OS cancels the pointer', () => {
-        const onExpandedChange = vi.fn();
-        const { header } = mountCard({ expanded: false, onExpandedChange });
-        pointer('pointerdown', header, 790);
-        flushSync();
-        pointer('pointercancel', header, 790);
-        flushSync();
-        expect(onExpandedChange).not.toHaveBeenCalled();
-    });
-    it('does not expand on a fast upward cancel either', () => {
-        const onExpandedChange = vi.fn();
-        const { header } = mountCard({ expanded: false, onExpandedChange });
-        pointer('pointerdown', header, 790);
-        flushSync();
-        pointer('pointermove', header, 700);
-        flushSync();
-        pointer('pointercancel', header, 600);
-        flushSync();
-        expect(onExpandedChange).not.toHaveBeenCalled();
-    });
-    it('still expands on a tap', () => {
-        const onExpandedChange = vi.fn();
-        const { header } = mountCard({ expanded: false, onExpandedChange });
-        pointer('pointerdown', header, 790);
-        flushSync();
-        pointer('pointerup', header, 790);
-        flushSync();
-        expect(onExpandedChange).toHaveBeenCalledWith(true);
-    });
-});
-describe('DataPanel phone card layout', () => {
-    it('slides a full-height sheet instead of resizing it, clear of the home indicator', () => {
-        const { panel, header } = mountCard({ expanded: false });
-        // 0.85 of an 800px viewport
-        // jsdom cannot parse env() (it drops padding-bottom and garbles height),
-        // so the safe-area padding itself is checked in a browser
-        expect(panel.style.height).toContain('680px');
-        expect(panel.style.height).toContain('safe-area-inset-bottom');
-        // Collapsed: everything but the 72px header is below the fold
-        expect(panel.style.getPropertyValue('translate')).toBe('0 608px');
-        expect(header.classList.contains('touch-none')).toBe(true);
-    });
-    it('keeps content mounted while the card animates closed', () => {
-        vi.useFakeTimers();
-        // Uncontrolled: the chevron drives expanded state
-        const { panel } = mountCard();
-        const chevron = () => host.querySelector('button[title="Expand"], button[title="Collapse"]');
-        if (chevron().title === 'Expand')
-            chevron().click();
-        flushSync();
-        expect(panel.style.getPropertyValue('translate')).toBe('0 0px');
-        expect(host.textContent).toContain('Legend body');
-        chevron().click();
-        flushSync();
-        expect(panel.style.getPropertyValue('translate')).toBe('0 608px');
-        expect(host.textContent).toContain('Legend body');
-        vi.advanceTimersByTime(400);
-        flushSync();
-        expect(host.textContent).not.toContain('Legend body');
-    });
-    it('leaves the desktop card sized by height', () => {
-        vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1280);
-        vi.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(1280);
-        const { panel } = mountCard({ expanded: false });
-        expect(panel.style.height).toBe('72px');
-        expect(panel.style.getPropertyValue('translate')).toBe('');
-    });
-});

package/dist/__tests__/data-panel-viewport.test.js

@@ -1,45 +0,0 @@
-/**
- * DataPanel card sizing uses the layout viewport, not window.innerWidth.
- *
- * innerWidth includes a vertical scrollbar; the layout width does not. With
- * a 15px scrollbar the card used to be 16px from the left edge and 1px from
- * the right, because both its width and its centred offset came from the
- * wider number.
- */
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { mount, unmount, flushSync, createRawSnippet } from 'svelte';
-import DataPanel from '../lib/components/DataPanel.svelte';
-const children = createRawSnippet(() => ({ render: () => '<p>Legend</p>' }));
-let instance = null;
-afterEach(() => {
-    if (instance)
-        unmount(instance);
-    instance = null;
-    vi.restoreAllMocks();
-});
-describe('DataPanel card viewport width', () => {
-    it('insets the card equally when a scrollbar makes innerWidth wider than the layout', () => {
-        // 390px window with a 15px vertical scrollbar: 375px of layout
-        vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(390);
-        vi.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(375);
-        const host = document.createElement('div');
-        document.body.appendChild(host);
-        instance = mount(DataPanel, {
-            target: host,
-            props: {
-                title: 'Legend & Information',
-                variant: 'card',
-                expanded: false,
-                disableClose: true,
-                mobileBreakpoint: 768,
-                cardConfig: { maxWidth: 480, horizontalMargin: 16 },
-                children,
-            },
-        });
-        flushSync();
-        const panel = host.querySelector('[role="dialog"]');
-        expect(panel.style.left).toBe('16px');
-        // 375 - 2 * 16, so the right margin is 16px too
-        expect(panel.style.width).toBe('343px');
-    });
-});

package/dist/__tests__/dropdown-trigger.test.js

@@ -1,39 +0,0 @@
-/**
- * DropdownMenu trigger styling
- *
- * `triggerVariant` styles the trigger <button> as a Button variant, so a menu
- * in a header looks like the buttons beside it without app-side classes.
- * Without it the trigger stays unstyled, as before.
- */
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import DropdownMenu from '../lib/components/DropdownMenu.svelte';
-import { buttonVariants } from '../lib/components/button-variants.js';
-const trigger = createRawSnippet(() => ({ render: () => '<span>Menu</span>' }));
-const items = [{ label: 'One', href: '/one' }];
-describe('DropdownMenu trigger', () => {
-    it('is unstyled by default', () => {
-        render(DropdownMenu, { props: { items, trigger, triggerClass: 'custom' } });
-        expect(screen.getByRole('button', { name: 'Menu' }).className).toBe('custom');
-    });
-    it('takes Button variant classes from triggerVariant, plus triggerClass', () => {
-        render(DropdownMenu, {
-            props: { items, trigger, triggerVariant: 'ghost', triggerClass: 'custom' },
-        });
-        const button = screen.getByRole('button', { name: 'Menu' });
-        for (const cls of buttonVariants({ variant: 'ghost', size: 'sm' }).split(' ')) {
-            expect(button.classList.contains(cls)).toBe(true);
-        }
-        expect(button.classList.contains('custom')).toBe(true);
-    });
-    it('adds a disclosure chevron only with showChevron', () => {
-        const { unmount } = render(DropdownMenu, { props: { items, trigger } });
-        expect(screen.getByRole('button', { name: 'Menu' }).querySelector('svg')).toBeNull();
-        unmount();
-        render(DropdownMenu, { props: { items, trigger, triggerVariant: 'ghost', showChevron: true } });
-        const chevron = screen.getByRole('button', { name: 'Menu' }).querySelector('svg');
-        expect(chevron).not.toBeNull();
-        expect(chevron?.getAttribute('aria-hidden')).toBe('true');
-    });
-});

package/dist/__tests__/header-search.test.js

@@ -1,90 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-import { render, screen, waitFor, within } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { axe } from 'vitest-axe';
-import HeaderSearch from '../lib/components/HeaderSearch.svelte';
-const groups = [
-    {
-        title: 'Pages',
-        items: [
-            { id: 'p1', title: 'Dashboard', href: '/dashboard', icon: 'home' },
-            { id: 'p2', title: 'Documents', href: '/documents' },
-        ],
-    },
-    {
-        title: 'Selections',
-        items: [
-            { id: 's1', title: 'Quartz countertop', description: 'Kitchen', category: 'Selection' },
-        ],
-    },
-];
-async function openSearch(props = {}) {
-    // A dialog left open by the previous test can leave pointer-events: none on body.
-    const user = userEvent.setup({ pointerEventsCheck: 0 });
-    const result = render(HeaderSearch, { props: { results: groups, ...props } });
-    await user.click(screen.getByRole('button', { name: 'Search' }));
-    const input = await screen.findByRole('combobox');
-    return { user, input, ...result };
-}
-describe('HeaderSearch', () => {
-    it('renders a heading for each result group', async () => {
-        await openSearch();
-        const pages = screen.getByRole('group', { name: 'Pages' });
-        expect(within(pages).getAllByRole('option')).toHaveLength(2);
-        const selections = screen.getByRole('group', { name: 'Selections' });
-        expect(within(selections).getByRole('option', { name: /Quartz countertop/ })).toBeInTheDocument();
-    });
-    it('renders flat results without headings', async () => {
-        const flat = [{ id: 'a', title: 'Alpha' }];
-        await openSearch({ results: flat });
-        expect(screen.getByRole('option', { name: /Alpha/ })).toBeInTheDocument();
-        expect(screen.queryByText('Pages')).not.toBeInTheDocument();
-    });
-    it('moves the active result across groups and points the input at it', async () => {
-        const { user, input } = await openSearch();
-        const options = screen.getAllByRole('option');
-        expect(input).toHaveAttribute('aria-activedescendant', options[0].id);
-        await user.keyboard('{ArrowDown}{ArrowDown}');
-        expect(input).toHaveAttribute('aria-activedescendant', options[2].id);
-        expect(options[2]).toHaveAttribute('aria-selected', 'true');
-        expect(options[0]).toHaveAttribute('aria-selected', 'false');
-    });
-    it('selects the active result on Enter and closes', async () => {
-        const onSelect = vi.fn();
-        const { user } = await openSearch({ onSelect });
-        await user.keyboard('{ArrowDown}{ArrowDown}{Enter}');
-        expect(onSelect).toHaveBeenCalledWith(groups[1].items[0]);
-        await waitFor(() => expect(screen.queryByRole('combobox')).not.toBeInTheDocument());
-    });
-    it('shows result icons only when asked', async () => {
-        const { unmount } = await openSearch();
-        expect(screen.getByRole('option', { name: /Dashboard/ }).querySelector('svg')).toBeNull();
-        unmount();
-        await openSearch({ showIcons: true });
-        expect(screen.getByRole('option', { name: /Dashboard/ }).querySelector('svg')).not.toBeNull();
-    });
-    it('switches secondary text and icon to the accent foreground on the active row', async () => {
-        const { user } = await openSearch({ showIcons: true });
-        const dashboard = screen.getByRole('option', { name: /Dashboard/ });
-        const quartz = screen.getByRole('option', { name: /Quartz countertop/ });
-        // Active row: icon and category follow the accent foreground.
-        expect(dashboard.querySelector('svg')).toHaveClass('text-accent-foreground/80');
-        // Inactive row: description and category stay muted.
-        expect(within(quartz).getByText('Kitchen')).toHaveClass('text-muted-foreground');
-        expect(within(quartz).getByText('Selection')).toHaveClass('text-muted-foreground');
-        await user.hover(quartz);
-        expect(within(quartz).getByText('Kitchen')).toHaveClass('text-accent-foreground/80');
-        expect(within(quartz).getByText('Selection')).toHaveClass('text-accent-foreground/80');
-        expect(dashboard.querySelector('svg')).toHaveClass('text-muted-foreground');
-    });
-    it('caps the results list at the given height', async () => {
-        await openSearch({ resultsMaxHeight: '60vh' });
-        const listbox = screen.getByRole('listbox');
-        expect(listbox.parentElement).toHaveStyle({ maxHeight: '60vh' });
-    });
-    it('has no axe violations with grouped results open', async () => {
-        await openSearch();
-        const dialog = screen.getByRole('dialog');
-        expect(await axe(dialog)).toHaveNoViolations();
-    });
-});

package/dist/__tests__/media-components.test.js

@@ -1,206 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-import { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import Image from '../lib/components/media/Image.svelte';
-import MediaEmbed from '../lib/components/media/MediaEmbed.svelte';
-import MediaGrid from '../lib/components/media/MediaGrid.svelte';
-import Lightbox from '../lib/components/media/Lightbox.svelte';
-const photos = [
-    { id: '1', kind: 'image', src: '/one.jpg', alt: 'First photo' },
-    { id: '2', kind: 'image', src: '/two.jpg', alt: 'Second photo' },
-    { id: '3', kind: 'image', src: '/three.jpg', alt: 'Third photo' },
-];
-describe('Image', () => {
-    it('renders the image with its alt text and lazy-loads by default', () => {
-        render(Image, { props: { src: '/photo.jpg', alt: 'A landscape' } });
-        const img = screen.getByAltText('A landscape');
-        expect(img).toBeInTheDocument();
-        expect(img).toHaveAttribute('loading', 'lazy');
-        expect(img).toHaveAttribute('decoding', 'async');
-    });
-    it('honours an explicit loading override', () => {
-        render(Image, { props: { src: '/hero.jpg', alt: 'Hero', loading: 'eager' } });
-        expect(screen.getByAltText('Hero')).toHaveAttribute('loading', 'eager');
-    });
-    it('swaps in the fallback when the source fails', async () => {
-        render(Image, { props: { src: '/missing.jpg', alt: 'Missing' } });
-        const img = screen.getByAltText('Missing');
-        await fireEvent.error(img);
-        await waitFor(() => {
-            expect(screen.queryByAltText('Missing')).not.toBeInTheDocument();
-        });
-        // The fallback icon carries the alt text so the failure is still described.
-        expect(screen.getByText('Failed to load: Missing')).toBeInTheDocument();
-    });
-    it('reports load and error through the callbacks', async () => {
-        const onload = vi.fn();
-        render(Image, { props: { src: '/photo.jpg', alt: 'Photo', onload } });
-        await fireEvent.load(screen.getByAltText('Photo'));
-        expect(onload).toHaveBeenCalledOnce();
-    });
-    it('applies sizing classes to the element that carries the size', async () => {
-        // Regression: `class` used to land on the ratio box's inner, absolutely
-        // inset element, so `w-24` and friends were silently dropped.
-        const { container } = render(Image, {
-            props: { src: '/photo.jpg', alt: 'Photo', ratio: 'square', class: 'w-24' },
-        });
-        const sized = container.querySelector('.w-24');
-        expect(sized).not.toBeNull();
-        expect(getComputedStyle(sized).position).not.toBe('absolute');
-    });
-    it('renders a blurred placeholder behind the image while loading', () => {
-        const { container } = render(Image, {
-            props: { src: '/photo.jpg', alt: 'Photo', placeholder: 'data:image/gif;base64,AAAA' },
-        });
-        const placeholder = container.querySelector('img[aria-hidden="true"]');
-        expect(placeholder).toHaveAttribute('src', 'data:image/gif;base64,AAAA');
-        // Decorative, so it must not be exposed as a second image.
-        expect(placeholder).toHaveAttribute('alt', '');
-    });
-});
-describe('MediaEmbed', () => {
-    it('shows a facade and requests nothing from the provider before activation', () => {
-        const { container } = render(MediaEmbed, {
-            props: { url: 'https://youtu.be/dQw4w9WgXcQ', title: 'A song' },
-        });
-        expect(container.querySelector('iframe')).toBeNull();
-        expect(screen.getByRole('button', { name: 'Play A song on YouTube' })).toBeInTheDocument();
-    });
-    it('injects a privacy-domain iframe once the facade is clicked', async () => {
-        const user = userEvent.setup();
-        const { container } = render(MediaEmbed, {
-            props: { url: 'https://youtu.be/dQw4w9WgXcQ', title: 'A song' },
-        });
-        await user.click(screen.getByRole('button', { name: /Play A song/ }));
-        const iframe = container.querySelector('iframe');
-        expect(iframe).not.toBeNull();
-        expect(iframe).toHaveAttribute('title', 'A song');
-        expect(iframe?.getAttribute('src')).toContain('youtube-nocookie.com');
-        // Autoplay is only added after the click, satisfying the user-gesture rule.
-        expect(iframe?.getAttribute('src')).toContain('autoplay=1');
-    });
-    it('renders an error state for an unrecognised URL rather than a broken frame', () => {
-        const { container } = render(MediaEmbed, {
-            props: { url: 'https://example.com/video', title: 'Unknown' },
-        });
-        expect(container.querySelector('iframe')).toBeNull();
-        expect(screen.getByRole('alert')).toHaveTextContent('This video could not be loaded.');
-    });
-});
-describe('MediaGrid', () => {
-    it('renders one labelled tile per item', () => {
-        render(MediaGrid, { props: { items: photos, label: 'Project photos' } });
-        expect(screen.getByRole('list', { name: 'Project photos' })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'First photo' })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Third photo' })).toBeInTheDocument();
-    });
-    it('keeps a single tab stop by default', () => {
-        render(MediaGrid, { props: { items: photos } });
-        const tiles = screen.getAllByRole('button');
-        expect(tiles[0]).toHaveAttribute('tabindex', '0');
-        expect(tiles[1]).toHaveAttribute('tabindex', '-1');
-    });
-    it('makes every tile tabbable when singleTabStop is off', () => {
-        render(MediaGrid, { props: { items: photos, singleTabStop: false } });
-        for (const tile of screen.getAllByRole('button')) {
-            expect(tile).toHaveAttribute('tabindex', '0');
-        }
-    });
-    it('moves focus with the arrow keys', async () => {
-        render(MediaGrid, { props: { items: photos, lightbox: false } });
-        const tiles = screen.getAllByRole('button');
-        tiles[0].focus();
-        await fireEvent.keyDown(screen.getByRole('list'), { key: 'ArrowRight' });
-        expect(document.activeElement).toBe(tiles[1]);
-        await fireEvent.keyDown(screen.getByRole('list'), { key: 'End' });
-        expect(document.activeElement).toBe(tiles[2]);
-        await fireEvent.keyDown(screen.getByRole('list'), { key: 'Home' });
-        expect(document.activeElement).toBe(tiles[0]);
-    });
-    it('reports the selected index without opening a lightbox when disabled', async () => {
-        const user = userEvent.setup();
-        const onSelect = vi.fn();
-        render(MediaGrid, { props: { items: photos, lightbox: false, onSelect } });
-        await user.click(screen.getByRole('button', { name: 'Second photo' }));
-        expect(onSelect).toHaveBeenCalledWith(1, photos[1]);
-        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    });
-    it('renders an empty state rather than a bare list', () => {
-        render(MediaGrid, { props: { items: [] } });
-        expect(screen.getByText('No media to show.')).toBeInTheDocument();
-        expect(screen.queryByRole('list')).not.toBeInTheDocument();
-    });
-});
-describe('Lightbox', () => {
-    it('renders nothing until it is opened', () => {
-        render(Lightbox, { props: { items: photos } });
-        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    });
-    it('exposes an accessible name taken from the active item', async () => {
-        render(Lightbox, { props: { items: photos, open: true } });
-        const dialog = await screen.findByRole('dialog');
-        expect(dialog).toHaveAccessibleName('First photo');
-    });
-    it('navigates between items with the arrow keys', async () => {
-        render(Lightbox, { props: { items: photos, open: true } });
-        const dialog = await screen.findByRole('dialog');
-        expect(dialog).toHaveAccessibleName('First photo');
-        await fireEvent.keyDown(dialog, { key: 'ArrowRight' });
-        await waitFor(() => expect(dialog).toHaveAccessibleName('Second photo'));
-        await fireEvent.keyDown(dialog, { key: 'End' });
-        await waitFor(() => expect(dialog).toHaveAccessibleName('Third photo'));
-        // Wraps by default, so Next from the last item returns to the first.
-        await fireEvent.keyDown(dialog, { key: 'ArrowRight' });
-        await waitFor(() => expect(dialog).toHaveAccessibleName('First photo'));
-    });
-    it('stops at the ends when looping is disabled', async () => {
-        render(Lightbox, { props: { items: photos, open: true, loop: false } });
-        const dialog = await screen.findByRole('dialog');
-        await fireEvent.keyDown(dialog, { key: 'ArrowLeft' });
-        await waitFor(() => expect(dialog).toHaveAccessibleName('First photo'));
-    });
-    it('offers labelled navigation and close controls', async () => {
-        render(Lightbox, { props: { items: photos, open: true } });
-        await screen.findByRole('dialog');
-        expect(screen.getByRole('button', { name: 'Previous item' })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Next item' })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Close viewer' })).toBeInTheDocument();
-    });
-    it('hides the navigation controls for a single item', async () => {
-        render(Lightbox, { props: { items: [photos[0]], open: true } });
-        await screen.findByRole('dialog');
-        expect(screen.queryByRole('button', { name: 'Next item' })).not.toBeInTheDocument();
-    });
-    it('renders an empty state instead of a blank stage', async () => {
-        render(Lightbox, { props: { items: [], open: true } });
-        await screen.findByRole('dialog');
-        expect(screen.getByText('No media to show.')).toBeInTheDocument();
-    });
-    it('keeps a zoom applied instead of snapping it straight back', async () => {
-        // Regression: the effect that resets zoom on navigation used to read the
-        // zoom state while tracking, so it subscribed to the scale it had just
-        // written and undid every zoom immediately.
-        const user = userEvent.setup();
-        render(Lightbox, { props: { items: photos, open: true } });
-        const dialog = await screen.findByRole('dialog');
-        const image = dialog.querySelector('img');
-        expect(image.style.transform).toContain('scale(1)');
-        await user.click(screen.getByRole('button', { name: 'Zoom in' }));
-        await waitFor(() => expect(image.style.transform).toContain('scale(1.5)'));
-        // Zoom out is only enabled once zoomed, so its state proves the same thing.
-        expect(screen.getByRole('button', { name: 'Zoom out' })).toBeEnabled();
-    });
-    it('resets zoom when the item changes', async () => {
-        const user = userEvent.setup();
-        render(Lightbox, { props: { items: photos, open: true } });
-        const dialog = await screen.findByRole('dialog');
-        await user.click(screen.getByRole('button', { name: 'Zoom in' }));
-        await waitFor(() => expect(dialog.querySelector('img').style.transform).toContain('scale(1.5)'));
-        await user.click(screen.getByRole('button', { name: 'Next item' }));
-        await waitFor(() => {
-            const next = dialog.querySelector('img');
-            expect(next.style.transform).toContain('scale(1)');
-            expect(next.style.transform).not.toContain('scale(1.5)');
-        });
-    });
-});