@classic-homes/theme-svelte 1.21.0 → 1.22.1

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)');
-        });
-    });
-});

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

@@ -1,273 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/svelte';
-import Video from '../lib/components/media/Video.svelte';
-import MediaEmbed from '../lib/components/media/MediaEmbed.svelte';
-import { canPlayHlsNatively, hasHlsLoader, resetHlsLoader, setHlsLoader, } from '../lib/utils/hls.js';
-import { cloudflareStream } from '../lib/utils/media.js';
-const STREAM_ACCOUNT = { customerCode: 'abc123' };
-const HLS_URL = 'https://customer-abc123.cloudflarestream.com/a1b2c3/manifest/video.m3u8';
-/** Minimal stand-in for hls.js, enough to observe how the player drives it. */
-function createFakeHls() {
-    const instances = [];
-    class FakeHls {
-        constructor(config) {
-            this.config = config;
-            this.handlers = new Map();
-            this.loadSource = vi.fn();
-            this.attachMedia = vi.fn();
-            this.destroy = vi.fn();
-            this.startLoad = vi.fn();
-            this.recoverMediaError = vi.fn();
-            this.on = vi.fn((event, callback) => {
-                this.handlers.set(event, callback);
-            });
-            instances.push(this);
-        }
-        emit(event, data) {
-            this.handlers.get(event)?.(event, data);
-        }
-    }
-    FakeHls.isSupported = vi.fn(() => true);
-    FakeHls.Events = { ERROR: 'hlsError' };
-    FakeHls.ErrorTypes = { NETWORK_ERROR: 'networkError', MEDIA_ERROR: 'mediaError' };
-    return { FakeHls, instances };
-}
-/** jsdom reports no HLS support, matching Chrome and Firefox. */
-function stubNativeHls(supported) {
-    vi.spyOn(HTMLMediaElement.prototype, 'canPlayType').mockImplementation((type) => supported && type.toLowerCase().includes('mpegurl') ? 'maybe' : '');
-}
-beforeEach(() => {
-    resetHlsLoader();
-    vi.spyOn(console, 'warn').mockImplementation(() => { });
-});
-afterEach(() => {
-    resetHlsLoader();
-    vi.restoreAllMocks();
-});
-describe('canPlayHlsNatively', () => {
-    it('is false when the browser rejects the HLS MIME types', () => {
-        stubNativeHls(false);
-        expect(canPlayHlsNatively()).toBe(false);
-    });
-    it('is true when the browser reports playback support, as Safari does', () => {
-        stubNativeHls(true);
-        expect(canPlayHlsNatively()).toBe(true);
-    });
-});
-describe('setHlsLoader', () => {
-    it('reports whether a loader is available without loading it', () => {
-        expect(hasHlsLoader()).toBe(false);
-        setHlsLoader(() => ({}));
-        expect(hasHlsLoader()).toBe(true);
-    });
-    it('detects a global Hls, as set by the CDN build', () => {
-        const { FakeHls } = createFakeHls();
-        globalThis.Hls = FakeHls;
-        try {
-            expect(hasHlsLoader()).toBe(true);
-        }
-        finally {
-            delete globalThis.Hls;
-        }
-    });
-});
-describe('Video with an HLS source', () => {
-    it('plays natively without hls.js where the browser supports it', async () => {
-        stubNativeHls(true);
-        const { FakeHls, instances } = createFakeHls();
-        setHlsLoader(() => FakeHls);
-        const { container } = render(Video, { props: { src: HLS_URL, label: 'Stream' } });
-        const video = container.querySelector('video');
-        await waitFor(() => expect(video.getAttribute('src')).toBe(HLS_URL));
-        // Safari needs no library, so none should be constructed.
-        expect(instances).toHaveLength(0);
-    });
-    it('attaches hls.js when the browser cannot play HLS natively', async () => {
-        stubNativeHls(false);
-        const { FakeHls, instances } = createFakeHls();
-        setHlsLoader(() => FakeHls);
-        const { container } = render(Video, { props: { src: HLS_URL, label: 'Stream' } });
-        await waitFor(() => expect(instances).toHaveLength(1));
-        expect(instances[0].loadSource).toHaveBeenCalledWith(HLS_URL);
-        expect(instances[0].attachMedia).toHaveBeenCalledWith(container.querySelector('video'));
-    });
-    it('omits the HLS <source> when hls.js drives playback', async () => {
-        // Leaving a playlist the browser cannot decode would make the element
-        // report an error before hls.js ever attaches.
-        stubNativeHls(false);
-        const { FakeHls } = createFakeHls();
-        setHlsLoader(() => FakeHls);
-        const { container } = render(Video, { props: { src: HLS_URL, label: 'Stream' } });
-        await waitFor(() => expect(container.querySelectorAll('source')).toHaveLength(0));
-    });
-    it('keeps progressive fallbacks as <source> alongside a stream', async () => {
-        stubNativeHls(false);
-        const { FakeHls } = createFakeHls();
-        setHlsLoader(() => FakeHls);
-        const { container } = render(Video, {
-            props: {
-                src: [
-                    { src: HLS_URL, type: 'application/vnd.apple.mpegurl' },
-                    { src: '/fallback.mp4', type: 'video/mp4' },
-                ],
-                label: 'Stream',
-            },
-        });
-        await waitFor(() => {
-            const sources = container.querySelectorAll('source');
-            expect(sources).toHaveLength(1);
-            expect(sources[0]).toHaveAttribute('src', '/fallback.mp4');
-        });
-    });
-    it('passes hls.js config through', async () => {
-        stubNativeHls(false);
-        const { FakeHls, instances } = createFakeHls();
-        render(Video, {
-            props: {
-                src: HLS_URL,
-                label: 'Stream',
-                hlsLoader: () => FakeHls,
-                hlsConfig: { lowLatencyMode: true },
-            },
-        });
-        await waitFor(() => expect(instances).toHaveLength(1));
-        expect(instances[0].config).toMatchObject({ lowLatencyMode: true });
-    });
-    it('starts downloading immediately by default', async () => {
-        stubNativeHls(false);
-        const { FakeHls, instances } = createFakeHls();
-        setHlsLoader(() => FakeHls);
-        render(Video, { props: { src: HLS_URL, label: 'Stream' } });
-        await waitFor(() => expect(instances).toHaveLength(1));
-        expect(instances[0].config).toMatchObject({ autoStartLoad: true });
-    });
-    it('holds off downloading until play when preload is none', async () => {
-        // hls.js fetches through its own loader and ignores the element's
-        // `preload`, so a stream would otherwise pull segments the moment it
-        // mounted — starving any other player on the page of bandwidth.
-        stubNativeHls(false);
-        const { FakeHls, instances } = createFakeHls();
-        setHlsLoader(() => FakeHls);
-        render(Video, { props: { src: HLS_URL, label: 'Stream', preload: 'none' } });
-        await waitFor(() => expect(instances).toHaveLength(1));
-        expect(instances[0].config).toMatchObject({ autoStartLoad: false });
-        expect(instances[0].startLoad).not.toHaveBeenCalled();
-        await screen.getByRole('button', { name: 'Play video' }).click();
-        await waitFor(() => expect(instances[0].startLoad).toHaveBeenCalled());
-    });
-    it('lets an explicit hlsConfig override the preload-derived default', async () => {
-        stubNativeHls(false);
-        const { FakeHls, instances } = createFakeHls();
-        setHlsLoader(() => FakeHls);
-        render(Video, {
-            props: {
-                src: HLS_URL,
-                label: 'Stream',
-                preload: 'none',
-                hlsConfig: { autoStartLoad: true },
-            },
-        });
-        await waitFor(() => expect(instances).toHaveLength(1));
-        expect(instances[0].config).toMatchObject({ autoStartLoad: true });
-    });
-    it('recovers from non-fatal and recoverable hls.js errors instead of giving up', async () => {
-        stubNativeHls(false);
-        const { FakeHls, instances } = createFakeHls();
-        setHlsLoader(() => FakeHls);
-        render(Video, { props: { src: HLS_URL, label: 'Stream' } });
-        await waitFor(() => expect(instances).toHaveLength(1));
-        instances[0].emit('hlsError', { fatal: false, type: 'networkError' });
-        expect(instances[0].startLoad).not.toHaveBeenCalled();
-        instances[0].emit('hlsError', { fatal: true, type: 'networkError' });
-        expect(instances[0].startLoad).toHaveBeenCalled();
-        instances[0].emit('hlsError', { fatal: true, type: 'mediaError' });
-        expect(instances[0].recoverMediaError).toHaveBeenCalled();
-    });
-    it('explains itself when hls.js is needed but unavailable', async () => {
-        stubNativeHls(false);
-        // No loader registered, and no global Hls.
-        render(Video, { props: { src: HLS_URL, label: 'Stream' } });
-        const alert = await screen.findByRole('alert');
-        expect(alert).toHaveTextContent('This browser cannot play adaptive streams.');
-        expect(alert).toHaveTextContent(/hls\.js/);
-    });
-    it('does not warn about missing captions for a stream, which carries its own', async () => {
-        stubNativeHls(true);
-        render(Video, { props: { src: HLS_URL, label: 'Stream' } });
-        await waitFor(() => {
-            expect(console.warn).not.toHaveBeenCalledWith(expect.stringContaining('No caption tracks'));
-        });
-    });
-    it('tears hls.js down when the player unmounts', async () => {
-        stubNativeHls(false);
-        const { FakeHls, instances } = createFakeHls();
-        setHlsLoader(() => FakeHls);
-        const { unmount } = render(Video, { props: { src: HLS_URL, label: 'Stream' } });
-        await waitFor(() => expect(instances).toHaveLength(1));
-        unmount();
-        expect(instances[0].destroy).toHaveBeenCalled();
-    });
-});
-describe('Video with a Cloudflare Stream item', () => {
-    it('takes source, poster, and label from the item', async () => {
-        stubNativeHls(true);
-        const item = cloudflareStream('a1b2c3', { ...STREAM_ACCOUNT, title: 'Product tour' });
-        const { container } = render(Video, { props: { item } });
-        const video = container.querySelector('video');
-        expect(screen.getByRole('region', { name: 'Product tour' })).toBeInTheDocument();
-        expect(video).toHaveAttribute('poster', item.poster);
-        await waitFor(() => expect(video.getAttribute('src')).toBe(HLS_URL));
-    });
-    it('lets explicit props override the item', () => {
-        stubNativeHls(true);
-        const item = cloudflareStream('a1b2c3', { ...STREAM_ACCOUNT, title: 'Product tour' });
-        const { container } = render(Video, {
-            props: { item, label: 'Custom label', poster: '/own-poster.jpg' },
-        });
-        expect(screen.getByRole('region', { name: 'Custom label' })).toBeInTheDocument();
-        expect(container.querySelector('video')).toHaveAttribute('poster', '/own-poster.jpg');
-    });
-});
-describe('MediaEmbed with Cloudflare Stream', () => {
-    it('shows a facade with a derived Stream thumbnail', () => {
-        const { container } = render(MediaEmbed, {
-            props: { provider: 'cloudflare', videoId: 'a1b2c3', customerCode: 'abc', title: 'Tour' },
-        });
-        expect(container.querySelector('iframe')).toBeNull();
-        const facade = screen.getByRole('button', { name: 'Play Tour on Cloudflare Stream' });
-        expect(facade).toBeInTheDocument();
-        expect(facade.querySelector('img')).toHaveAttribute('src', expect.stringContaining('customer-abc.cloudflarestream.com/a1b2c3/thumbnails/thumbnail.jpg'));
-    });
-    it('injects the Stream player iframe once activated', async () => {
-        const { container } = render(MediaEmbed, {
-            props: {
-                provider: 'cloudflare',
-                videoId: 'a1b2c3',
-                customerCode: 'abc',
-                title: 'Tour',
-                eager: true,
-            },
-        });
-        const iframe = container.querySelector('iframe');
-        expect(iframe).toHaveAttribute('src', 'https://customer-abc.cloudflarestream.com/a1b2c3/iframe');
-        expect(iframe).toHaveAttribute('title', 'Tour');
-    });
-    it('resolves the account from a full Stream URL', () => {
-        const { container } = render(MediaEmbed, {
-            props: {
-                url: 'https://customer-abc.cloudflarestream.com/a1b2c3/watch',
-                title: 'Tour',
-                eager: true,
-            },
-        });
-        expect(container.querySelector('iframe')).toHaveAttribute('src', 'https://customer-abc.cloudflarestream.com/a1b2c3/iframe');
-    });
-    it('renders an error state, not a broken frame, when the account is missing', () => {
-        const { container } = render(MediaEmbed, {
-            props: { provider: 'cloudflare', videoId: 'a1b2c3', title: 'Tour' },
-        });
-        expect(container.querySelector('iframe')).toBeNull();
-        expect(screen.getByRole('alert')).toHaveTextContent('This video could not be loaded.');
-        expect(console.warn).toHaveBeenCalledWith(expect.stringContaining('customerCode'));
-    });
-});