@classic-homes/theme-svelte 1.2.3 → 1.4.0

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

@@ -0,0 +1,427 @@
+import { describe, expect, it } from 'vitest';
+import { buildEmbedSrc, clamp, cloudflareStream, cloudflareStreamHost, cloudflareStreamThumbnail, cloudflareStreamUrls, formatDuration, formatDurationSpoken, getEmbedThumbnail, getFileExtension, getMediaLabel, getMediaThumbnail, inferMediaKind, isHlsSource, isTimeBasedMedia, parseEmbedUrl, resolveAspectRatio, timeRangesToArray, toMediaSources, } from '../lib/utils/media.js';
+describe('formatDuration', () => {
+    it('formats under a minute with a padded seconds field', () => {
+        expect(formatDuration(0)).toBe('0:00');
+        expect(formatDuration(9)).toBe('0:09');
+        expect(formatDuration(59)).toBe('0:59');
+    });
+    it('formats minutes and seconds', () => {
+        expect(formatDuration(60)).toBe('1:00');
+        expect(formatDuration(83)).toBe('1:23');
+        expect(formatDuration(599)).toBe('9:59');
+    });
+    it('adds an hours field past an hour and pads the minutes', () => {
+        expect(formatDuration(3600)).toBe('1:00:00');
+        expect(formatDuration(3723)).toBe('1:02:03');
+    });
+    it('collapses non-finite and negative input to zero', () => {
+        // `video.duration` is NaN until metadata loads, and a player must not
+        // render "NaN:NaN" in the meantime.
+        expect(formatDuration(NaN)).toBe('0:00');
+        expect(formatDuration(Infinity)).toBe('0:00');
+        expect(formatDuration(-5)).toBe('0:00');
+    });
+    it('truncates fractional seconds rather than rounding up', () => {
+        expect(formatDuration(59.9)).toBe('0:59');
+    });
+});
+describe('formatDurationSpoken', () => {
+    it('spells out each unit', () => {
+        expect(formatDurationSpoken(83)).toBe('1 minute 23 seconds');
+        expect(formatDurationSpoken(3723)).toBe('1 hour 2 minutes 3 seconds');
+    });
+    it('singularises correctly', () => {
+        expect(formatDurationSpoken(1)).toBe('1 second');
+        expect(formatDurationSpoken(60)).toBe('1 minute');
+    });
+    it('always says something for zero', () => {
+        expect(formatDurationSpoken(0)).toBe('0 seconds');
+        expect(formatDurationSpoken(NaN)).toBe('0 seconds');
+    });
+});
+describe('getFileExtension', () => {
+    it('ignores query strings and fragments', () => {
+        expect(getFileExtension('/clip.mp4?token=abc')).toBe('mp4');
+        expect(getFileExtension('/clip.MP4#t=10')).toBe('mp4');
+    });
+    it('returns an empty string when there is no extension', () => {
+        expect(getFileExtension('/asset')).toBe('');
+        expect(getFileExtension('/asset.')).toBe('');
+        expect(getFileExtension('https://example.com/path.with.dots/file')).toBe('');
+    });
+});
+describe('inferMediaKind', () => {
+    it('prefers the MIME type over the URL', () => {
+        expect(inferMediaKind('/asset', 'image/png')).toBe('image');
+        expect(inferMediaKind('/asset.mp4', 'audio/mpeg')).toBe('audio');
+    });
+    it('falls back to the file extension', () => {
+        expect(inferMediaKind('/photo.webp')).toBe('image');
+        expect(inferMediaKind('/clip.webm')).toBe('video');
+        expect(inferMediaKind('/track.flac')).toBe('audio');
+    });
+    it('recognises provider URLs as embeds', () => {
+        expect(inferMediaKind('https://youtu.be/dQw4w9WgXcQ')).toBe('embed');
+        expect(inferMediaKind('https://vimeo.com/123456789')).toBe('embed');
+    });
+    it('returns null when nothing can be inferred', () => {
+        expect(inferMediaKind('/unknown.xyz')).toBeNull();
+        expect(inferMediaKind('')).toBeNull();
+    });
+});
+describe('parseEmbedUrl', () => {
+    it('parses every common YouTube URL shape', () => {
+        const expected = { provider: 'youtube', videoId: 'dQw4w9WgXcQ' };
+        expect(parseEmbedUrl('https://www.youtube.com/watch?v=dQw4w9WgXcQ')).toEqual(expected);
+        expect(parseEmbedUrl('https://youtu.be/dQw4w9WgXcQ')).toEqual(expected);
+        expect(parseEmbedUrl('https://www.youtube.com/embed/dQw4w9WgXcQ')).toEqual(expected);
+        expect(parseEmbedUrl('https://www.youtube.com/shorts/dQw4w9WgXcQ')).toEqual(expected);
+        expect(parseEmbedUrl('https://www.youtube.com/live/dQw4w9WgXcQ')).toEqual(expected);
+        expect(parseEmbedUrl('https://m.youtube.com/watch?v=dQw4w9WgXcQ')).toEqual(expected);
+    });
+    it('parses Vimeo URLs, including the player and channel forms', () => {
+        expect(parseEmbedUrl('https://vimeo.com/123456789')).toEqual({
+            provider: 'vimeo',
+            videoId: '123456789',
+        });
+        expect(parseEmbedUrl('https://player.vimeo.com/video/123456789')).toEqual({
+            provider: 'vimeo',
+            videoId: '123456789',
+        });
+        expect(parseEmbedUrl('https://vimeo.com/channels/staffpicks/123456789')).toEqual({
+            provider: 'vimeo',
+            videoId: '123456789',
+        });
+    });
+    it('reads the start offset in both numeric and hms form', () => {
+        expect(parseEmbedUrl('https://youtu.be/dQw4w9WgXcQ?t=30')?.start).toBe(30);
+        expect(parseEmbedUrl('https://youtu.be/dQw4w9WgXcQ?t=1m30s')?.start).toBe(90);
+        expect(parseEmbedUrl('https://youtu.be/dQw4w9WgXcQ?t=1h2m3s')?.start).toBe(3723);
+        expect(parseEmbedUrl('https://www.youtube.com/watch?v=dQw4w9WgXcQ&start=45')?.start).toBe(45);
+    });
+    it('rejects malformed ids rather than building a broken embed', () => {
+        expect(parseEmbedUrl('https://www.youtube.com/watch?v=short')).toBeNull();
+        expect(parseEmbedUrl('https://youtu.be/way-too-long-an-id')).toBeNull();
+        expect(parseEmbedUrl('https://vimeo.com/not-a-number')).toBeNull();
+    });
+    it('returns null for unsupported hosts and empty input', () => {
+        expect(parseEmbedUrl('https://example.com/video.mp4')).toBeNull();
+        expect(parseEmbedUrl('https://dailymotion.com/video/x123')).toBeNull();
+        expect(parseEmbedUrl('')).toBeNull();
+    });
+});
+describe('buildEmbedSrc', () => {
+    it('routes YouTube through the no-cookie domain by default', () => {
+        expect(buildEmbedSrc('youtube', 'abc')).toContain('youtube-nocookie.com');
+    });
+    it('uses the standard domain when privacy is turned off', () => {
+        const src = buildEmbedSrc('youtube', 'abc', { privacy: false });
+        expect(src).toContain('www.youtube.com');
+        expect(src).not.toContain('nocookie');
+    });
+    it('adds autoplay and start parameters only when requested', () => {
+        expect(buildEmbedSrc('youtube', 'abc')).not.toContain('autoplay');
+        const src = buildEmbedSrc('youtube', 'abc', { autoplay: true, start: 30.7 });
+        expect(src).toContain('autoplay=1');
+        // Providers reject fractional offsets.
+        expect(src).toContain('start=30');
+    });
+    it('suppresses related videos by default', () => {
+        expect(buildEmbedSrc('youtube', 'abc')).toContain('rel=0');
+        expect(buildEmbedSrc('youtube', 'abc', { showRelated: true })).not.toContain('rel=0');
+    });
+    it('builds a Vimeo player URL with do-not-track set', () => {
+        const src = buildEmbedSrc('vimeo', '123');
+        expect(src).toContain('player.vimeo.com/video/123');
+        expect(src).toContain('dnt=1');
+    });
+});
+describe('getEmbedThumbnail', () => {
+    it('derives a YouTube thumbnail URL', () => {
+        expect(getEmbedThumbnail('youtube', 'abc')).toBe('https://i.ytimg.com/vi/abc/hqdefault.jpg');
+    });
+    it('returns null for Vimeo, which needs an oEmbed lookup', () => {
+        expect(getEmbedThumbnail('vimeo', '123')).toBeNull();
+    });
+});
+describe('getMediaThumbnail', () => {
+    const base = { id: '1', thumbnail: undefined };
+    it('prefers an explicit thumbnail over anything derived', () => {
+        const item = { ...base, kind: 'image', src: '/a.jpg', alt: '', thumbnail: '/t.jpg' };
+        expect(getMediaThumbnail(item)).toBe('/t.jpg');
+    });
+    it('falls back per kind', () => {
+        expect(getMediaThumbnail({ ...base, kind: 'image', src: '/a.jpg', alt: '' })).toBe('/a.jpg');
+        expect(getMediaThumbnail({ ...base, kind: 'video', src: '/a.mp4', poster: '/p.jpg' })).toBe('/p.jpg');
+        expect(getMediaThumbnail({ ...base, kind: 'audio', src: '/a.mp3', artwork: '/w.jpg' })).toBe('/w.jpg');
+        expect(getMediaThumbnail({ ...base, kind: 'embed', provider: 'youtube', videoId: 'abc' })).toContain('i.ytimg.com');
+    });
+    it('returns null when there is nothing to show', () => {
+        expect(getMediaThumbnail({ ...base, kind: 'video', src: '/a.mp4' })).toBeNull();
+        expect(getMediaThumbnail({ ...base, kind: 'audio', src: '/a.mp3' })).toBeNull();
+        expect(getMediaThumbnail({ ...base, kind: 'embed', provider: 'vimeo', videoId: '1' })).toBeNull();
+    });
+});
+describe('getMediaLabel', () => {
+    it('prefers the title, then image alt text', () => {
+        expect(getMediaLabel({ id: '1', kind: 'image', src: '/a.jpg', alt: 'A cat', title: 'Cat' })).toBe('Cat');
+        expect(getMediaLabel({ id: '1', kind: 'image', src: '/a.jpg', alt: 'A cat' })).toBe('A cat');
+    });
+    it('falls back to a positional name so a tile is never unlabelled', () => {
+        expect(getMediaLabel({ id: '1', kind: 'video', src: '/a.mp4' }, 2)).toBe('Video 3');
+        expect(getMediaLabel({ id: '1', kind: 'video', src: '/a.mp4' })).toBe('Untitled video');
+    });
+    it('describes embeds as videos rather than "embed"', () => {
+        expect(getMediaLabel({ id: '1', kind: 'embed', provider: 'youtube', videoId: 'a' }, 0)).toBe('Video 1');
+    });
+});
+describe('isTimeBasedMedia', () => {
+    it('is true for anything with a timeline', () => {
+        expect(isTimeBasedMedia({ id: '1', kind: 'video', src: '/a.mp4' })).toBe(true);
+        expect(isTimeBasedMedia({ id: '1', kind: 'audio', src: '/a.mp3' })).toBe(true);
+        expect(isTimeBasedMedia({ id: '1', kind: 'embed', provider: 'vimeo', videoId: '1' })).toBe(true);
+        expect(isTimeBasedMedia({ id: '1', kind: 'image', src: '/a.jpg', alt: '' })).toBe(false);
+    });
+});
+describe('toMediaSources', () => {
+    it('passes an explicit source list through untouched', () => {
+        const sources = [{ src: '/a.webm', type: 'video/webm' }];
+        expect(toMediaSources(sources)).toBe(sources);
+    });
+    it('wraps a single URL and guesses its MIME type', () => {
+        expect(toMediaSources('/a.mp4')).toEqual([{ src: '/a.mp4', type: 'video/mp4' }]);
+        expect(toMediaSources('/a.mp3')).toEqual([{ src: '/a.mp3', type: 'audio/mpeg' }]);
+    });
+    it('omits the type when the extension is unknown', () => {
+        expect(toMediaSources('/stream')).toEqual([{ src: '/stream', type: undefined }]);
+    });
+});
+describe('resolveAspectRatio', () => {
+    it('maps named ratios to numbers and passes numbers through', () => {
+        expect(resolveAspectRatio('square')).toBe(1);
+        expect(resolveAspectRatio('video')).toBeCloseTo(16 / 9);
+        expect(resolveAspectRatio(2.35)).toBe(2.35);
+    });
+});
+describe('timeRangesToArray', () => {
+    it('flattens the opaque TimeRanges object into plain pairs', () => {
+        const ranges = {
+            length: 2,
+            start: (i) => [0, 30][i],
+            end: (i) => [10, 45][i],
+        };
+        expect(timeRangesToArray(ranges)).toEqual([
+            { start: 0, end: 10 },
+            { start: 30, end: 45 },
+        ]);
+    });
+    it('handles a null ranges object', () => {
+        expect(timeRangesToArray(null)).toEqual([]);
+    });
+});
+describe('isHlsSource', () => {
+    it('detects HLS by declared MIME type', () => {
+        expect(isHlsSource({ src: '/stream', type: 'application/vnd.apple.mpegurl' })).toBe(true);
+        expect(isHlsSource({ src: '/stream', type: 'application/x-mpegURL' })).toBe(true);
+    });
+    it('detects HLS by extension when no type is declared', () => {
+        expect(isHlsSource('/manifest/video.m3u8')).toBe(true);
+        expect(isHlsSource('/manifest/video.m3u8?protocol=llhls')).toBe(true);
+    });
+    it('trusts an explicit type over the extension', () => {
+        // A progressive MP4 must not be routed through hls.js just because the
+        // URL happens to mention a playlist.
+        expect(isHlsSource({ src: '/video.m3u8', type: 'video/mp4' })).toBe(false);
+    });
+    it('is false for ordinary files', () => {
+        expect(isHlsSource('/clip.mp4')).toBe(false);
+        expect(isHlsSource('/manifest/video.mpd')).toBe(false);
+    });
+});
+describe('cloudflareStreamHost', () => {
+    it('builds the customer subdomain', () => {
+        expect(cloudflareStreamHost({ customerCode: 'abc123' })).toBe('customer-abc123.cloudflarestream.com');
+    });
+    it('prefers a custom domain and strips scheme and trailing slash', () => {
+        expect(cloudflareStreamHost({ domain: 'https://video.example.com/', customerCode: 'abc' })).toBe('video.example.com');
+    });
+    it('returns null when the account cannot be resolved', () => {
+        expect(cloudflareStreamHost({})).toBeNull();
+    });
+});
+describe('cloudflareStreamUrls', () => {
+    const account = { customerCode: 'abc123' };
+    it('builds every playback URL from the video id', () => {
+        const urls = cloudflareStreamUrls('a1b2c3', account);
+        const base = 'https://customer-abc123.cloudflarestream.com/a1b2c3';
+        expect(urls.hls).toBe(`${base}/manifest/video.m3u8`);
+        expect(urls.dash).toBe(`${base}/manifest/video.mpd`);
+        expect(urls.iframe).toBe(`${base}/iframe`);
+        expect(urls.thumbnail).toBe(`${base}/thumbnails/thumbnail.jpg`);
+        expect(urls.download).toBe(`${base}/downloads/default.mp4`);
+    });
+    it('requests the low-latency variant on demand', () => {
+        expect(cloudflareStreamUrls('a1b2c3', { ...account, lowLatency: true }).hls).toContain('protocol=llhls');
+        expect(cloudflareStreamUrls('a1b2c3', account).hls).not.toContain('protocol');
+    });
+    it('passes a bandwidth hint through', () => {
+        expect(cloudflareStreamUrls('a1b2c3', { ...account, clientBandwidthHint: 3.5 }).hls).toContain('clientBandwidthHint=3.5');
+    });
+    it('accepts a signed token in place of the video id', () => {
+        // Stream substitutes the whole JWT wherever the UID would go, so no
+        // separate code path should be needed for private videos.
+        const token = 'eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJhMWIyYzMifQ.signature';
+        expect(cloudflareStreamUrls(token, account).hls).toBe(`https://customer-abc123.cloudflarestream.com/${token}/manifest/video.m3u8`);
+    });
+    it('returns null without an account or a video id', () => {
+        expect(cloudflareStreamUrls('a1b2c3', {})).toBeNull();
+        expect(cloudflareStreamUrls('', account)).toBeNull();
+    });
+});
+describe('cloudflareStreamThumbnail', () => {
+    const account = { customerCode: 'abc123' };
+    it('builds a still thumbnail with its options', () => {
+        expect(cloudflareStreamThumbnail('a1b2c3', { ...account, time: '1s', height: 600 })).toBe('https://customer-abc123.cloudflarestream.com/a1b2c3/thumbnails/thumbnail.jpg?time=1s&height=600');
+    });
+    it('supports width and fit', () => {
+        const url = cloudflareStreamThumbnail('a1b2c3', { ...account, width: 320, fit: 'scale' });
+        expect(url).toContain('width=320');
+        expect(url).toContain('fit=scale');
+    });
+    it('builds an animated thumbnail with its extra options', () => {
+        const url = cloudflareStreamThumbnail('a1b2c3', {
+            ...account,
+            animated: true,
+            duration: '4s',
+            fps: 8,
+        });
+        expect(url).toContain('/thumbnails/thumbnail.gif');
+        expect(url).toContain('duration=4s');
+        expect(url).toContain('fps=8');
+    });
+    it('omits GIF-only options from a still thumbnail', () => {
+        const url = cloudflareStreamThumbnail('a1b2c3', { ...account, duration: '4s', fps: 8 });
+        expect(url).toContain('thumbnail.jpg');
+        expect(url).not.toContain('duration');
+        expect(url).not.toContain('fps');
+    });
+    it('returns null without an account', () => {
+        expect(cloudflareStreamThumbnail('a1b2c3', {})).toBeNull();
+    });
+});
+describe('cloudflareStream', () => {
+    const account = { customerCode: 'abc123' };
+    it('builds a playable video item with a derived poster', () => {
+        const item = cloudflareStream('a1b2c3', { ...account, title: 'Product tour' });
+        expect(item.kind).toBe('video');
+        expect(item.id).toBe('a1b2c3');
+        expect(item.title).toBe('Product tour');
+        // Typed as HLS so the player routes it through hls.js where needed.
+        expect(item.src).toEqual([
+            {
+                src: 'https://customer-abc123.cloudflarestream.com/a1b2c3/manifest/video.m3u8',
+                type: 'application/vnd.apple.mpegurl',
+            },
+        ]);
+        expect(item.poster).toContain('/thumbnails/thumbnail.jpg?time=1s&height=720');
+        // The thumbnail is reused for grids and lightbox strips.
+        expect(item.thumbnail).toBe(item.poster);
+    });
+    it('honours an explicit poster and poster timing', () => {
+        expect(cloudflareStream('a1b2c3', { ...account, poster: '/own.jpg' }).poster).toBe('/own.jpg');
+        expect(cloudflareStream('a1b2c3', { ...account, posterTime: '30s', posterHeight: 400 }).poster).toContain('time=30s&height=400');
+    });
+    it('only exposes a download URL when downloads are requested', () => {
+        expect(cloudflareStream('a1b2c3', account).downloadUrl).toBeUndefined();
+        expect(cloudflareStream('a1b2c3', { ...account, downloadable: true }).downloadUrl).toContain('/downloads/default.mp4');
+    });
+    it('throws a directed error when the account is missing', () => {
+        expect(() => cloudflareStream('a1b2c3', {})).toThrow(/customerCode/);
+    });
+    it('produces an item the media helpers understand', () => {
+        const item = cloudflareStream('a1b2c3', { ...account, title: 'Tour' });
+        expect(isTimeBasedMedia(item)).toBe(true);
+        expect(getMediaLabel(item, 0)).toBe('Tour');
+        expect(getMediaThumbnail(item)).toBe(item.poster);
+        expect(isHlsSource(toMediaSources(item.src)[0])).toBe(true);
+    });
+});
+describe('parseEmbedUrl - Cloudflare Stream', () => {
+    it('parses every Stream asset URL shape', () => {
+        const expected = { provider: 'cloudflare', videoId: 'a1b2c3', customerCode: 'abc' };
+        expect(parseEmbedUrl('https://customer-abc.cloudflarestream.com/a1b2c3/iframe')).toEqual(expected);
+        expect(parseEmbedUrl('https://customer-abc.cloudflarestream.com/a1b2c3/watch')).toEqual(expected);
+        expect(parseEmbedUrl('https://customer-abc.cloudflarestream.com/a1b2c3/manifest/video.m3u8')).toEqual(expected);
+    });
+    it('reads the Stream player start offset', () => {
+        expect(parseEmbedUrl('https://customer-abc.cloudflarestream.com/a1b2c3/iframe?startTime=1m30s')
+            ?.start).toBe(90);
+    });
+    it('recognises the legacy videodelivery.net hosts without a customer code', () => {
+        expect(parseEmbedUrl('https://iframe.videodelivery.net/a1b2c3')).toEqual({
+            provider: 'cloudflare',
+            videoId: 'a1b2c3',
+        });
+    });
+    it('accepts a signed token as the id, since it has no fixed shape', () => {
+        const token = 'eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJhMWIyYzMifQ.sig';
+        expect(parseEmbedUrl(`https://customer-abc.cloudflarestream.com/${token}/iframe`)).toEqual({
+            provider: 'cloudflare',
+            videoId: token,
+            customerCode: 'abc',
+        });
+    });
+    it('rejects a Stream host with no video id', () => {
+        expect(parseEmbedUrl('https://customer-abc.cloudflarestream.com/')).toBeNull();
+    });
+});
+describe('buildEmbedSrc - Cloudflare Stream', () => {
+    const account = { customerCode: 'abc' };
+    it('builds the player iframe URL', () => {
+        expect(buildEmbedSrc('cloudflare', 'a1b2c3', account)).toBe('https://customer-abc.cloudflarestream.com/a1b2c3/iframe');
+    });
+    it('mutes automatically when autoplaying, as browsers require', () => {
+        const src = buildEmbedSrc('cloudflare', 'a1b2c3', { ...account, autoplay: true });
+        expect(src).toContain('autoplay=true');
+        expect(src).toContain('muted=true');
+    });
+    it('maps the remaining player options', () => {
+        const src = buildEmbedSrc('cloudflare', 'a1b2c3', {
+            ...account,
+            start: 90,
+            loop: true,
+            controls: false,
+            preload: 'metadata',
+            primaryColor: '#c00',
+            defaultTextTrack: 'en',
+        });
+        expect(src).toContain('startTime=90s');
+        expect(src).toContain('loop=true');
+        expect(src).toContain('controls=false');
+        expect(src).toContain('preload=metadata');
+        expect(src).toContain(`primaryColor=${encodeURIComponent('#c00')}`);
+        expect(src).toContain('defaultTextTrack=en');
+    });
+    it('throws a directed error when the account is missing', () => {
+        expect(() => buildEmbedSrc('cloudflare', 'a1b2c3')).toThrow(/customerCode/);
+    });
+});
+describe('getEmbedThumbnail - Cloudflare Stream', () => {
+    it('derives a Stream thumbnail, unlike Vimeo', () => {
+        expect(getEmbedThumbnail('cloudflare', 'a1b2c3', { customerCode: 'abc' })).toContain('https://customer-abc.cloudflarestream.com/a1b2c3/thumbnails/thumbnail.jpg');
+    });
+    it('returns null without an account rather than a malformed URL', () => {
+        expect(getEmbedThumbnail('cloudflare', 'a1b2c3')).toBeNull();
+    });
+});
+describe('clamp', () => {
+    it('bounds the value inclusively', () => {
+        expect(clamp(5, 0, 10)).toBe(5);
+        expect(clamp(-1, 0, 10)).toBe(0);
+        expect(clamp(11, 0, 10)).toBe(10);
+    });
+    it('resolves NaN to the minimum, so a seek never writes NaN to the element', () => {
+        expect(clamp(NaN, 0, 10)).toBe(0);
+    });
+});

package/dist/__tests__/setup.js

@@ -4,3 +4,53 @@ import * as matchers from 'vitest-axe/matchers';
 expect.extend(matchers);
 // Mock scrollIntoView since jsdom doesn't support it
 Element.prototype.scrollIntoView = vi.fn();
+// jsdom has no layout engine, so scrollTo is a no-op stub
+Element.prototype.scrollTo = vi.fn();
+// jsdom implements no media pipeline: play/pause/load all throw "not
+// implemented" without these stubs, which breaks any Video or Audio test.
+HTMLMediaElement.prototype.play = vi.fn().mockResolvedValue(undefined);
+HTMLMediaElement.prototype.pause = vi.fn();
+HTMLMediaElement.prototype.load = vi.fn();
+// Fullscreen and picture-in-picture are not implemented in jsdom either
+Element.prototype.requestFullscreen = vi.fn().mockResolvedValue(undefined);
+document.exitFullscreen = vi.fn().mockResolvedValue(undefined);
+// Observers used for lazy loading and layout measurement
+if (!('IntersectionObserver' in globalThis)) {
+    globalThis.IntersectionObserver = class {
+        constructor() {
+            this.observe = vi.fn();
+            this.unobserve = vi.fn();
+            this.disconnect = vi.fn();
+            this.takeRecords = vi.fn(() => []);
+            this.root = null;
+            this.rootMargin = '';
+            this.thresholds = [];
+        }
+    };
+}
+if (!('ResizeObserver' in globalThis)) {
+    globalThis.ResizeObserver = class {
+        constructor() {
+            this.observe = vi.fn();
+            this.unobserve = vi.fn();
+            this.disconnect = vi.fn();
+        }
+    };
+}
+// jsdom has no canvas backend and logs a "not implemented" notice on every
+// getContext call. Returning null matches what a real browser does when the
+// context type is unsupported, and the callers already handle it.
+HTMLCanvasElement.prototype.getContext = vi.fn(() => null);
+// matchMedia backs useReducedMotion; jsdom does not provide it
+if (!window.matchMedia) {
+    window.matchMedia = vi.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+    }));
+}

package/dist/lib/components/DataPanel.svelte

@@ -19,7 +19,6 @@
     DEFAULT_CARD_CONFIG,
     DEFAULT_TAB_WIDTH,
     CARD_HEADER_HEIGHT,
-    CARD_EXPANDED_RATIO,
     CARD_MIN_WIDTH,
     loadPanelState,
     savePanelState,
@@ -166,6 +165,20 @@
   const resolvedConstraints = $derived({ ...DEFAULT_CONSTRAINTS, ...constraints });
   const resolvedCardConfig = $derived({ ...DEFAULT_CARD_CONFIG, ...cardConfig });
 
+  /**
+   * Default left offset for the card sheet, honoring cardConfig.align.
+   * Drag/resize bounds derive from the same offset so existing
+   * interactions are unaffected by non-center alignment.
+   */
+  function cardDefaultLeftOffset(width: number): number {
+    const margin = resolvedCardConfig.horizontalMargin;
+    if (resolvedCardConfig.align === 'left') return margin;
+    if (resolvedCardConfig.align === 'right') {
+      return Math.max(margin, viewportWidth - width - margin);
+    }
+    return Math.max(margin, (viewportWidth - width) / 2);
+  }
+
   // Internal state - initialized from props or persistence
   let internalMode = $state<PanelMode>(DEFAULT_PANEL_STATE.mode);
   let internalVariant = $state<PanelVariant>(DEFAULT_PANEL_STATE.variant);
@@ -295,13 +308,13 @@
     viewportHeight = window.innerHeight;
 
     // Initialize card expanded height
-    cardExpandedHeight = viewportHeight * CARD_EXPANDED_RATIO;
+    cardExpandedHeight = viewportHeight * resolvedCardConfig.expandedRatio;
 
     // Listen for resize
     const handleResize = () => {
       viewportWidth = window.innerWidth;
       viewportHeight = window.innerHeight;
-      cardExpandedHeight = viewportHeight * CARD_EXPANDED_RATIO;
+      cardExpandedHeight = viewportHeight * resolvedCardConfig.expandedRatio;
     };
     window.addEventListener('resize', handleResize);
 
@@ -583,10 +596,7 @@
         viewportWidth - resolvedCardConfig.horizontalMargin * 2,
         resolvedCardConfig.maxWidth
       );
-      const defaultLeftOffset = Math.max(
-        resolvedCardConfig.horizontalMargin,
-        (viewportWidth - cardWidth) / 2
-      );
+      const defaultLeftOffset = cardDefaultLeftOffset(cardWidth);
       // Calculate bounds: can move from left margin to right margin
       const minOffset = -(defaultLeftOffset - resolvedCardConfig.horizontalMargin);
       const maxOffset =
@@ -898,10 +908,7 @@
     cardWidthResizeStartWidth = currentWidth;
 
     // Calculate current left position
-    const defaultLeftOffset = Math.max(
-      resolvedCardConfig.horizontalMargin,
-      (viewportWidth - defaultCardWidth) / 2
-    );
+    const defaultLeftOffset = cardDefaultLeftOffset(defaultCardWidth);
     cardWidthResizeStartLeft = defaultLeftOffset + cardHorizontalPosition;
 
     document.body.style.cursor = 'ew-resize';
@@ -940,10 +947,7 @@
           viewportWidth - resolvedCardConfig.horizontalMargin * 2,
           resolvedCardConfig.maxWidth
         );
-        const defaultLeftOffset = Math.max(
-          resolvedCardConfig.horizontalMargin,
-          (viewportWidth - defaultCardWidth) / 2
-        );
+        const defaultLeftOffset = cardDefaultLeftOffset(defaultCardWidth);
         cardHorizontalPosition = newLeft - defaultLeftOffset;
       }
     }
@@ -1087,10 +1091,7 @@
       );
       // Use custom cardWidth if set, otherwise use default
       const actualCardWidth = cardWidth ?? defaultCardWidth;
-      const defaultLeftOffset = Math.max(
-        resolvedCardConfig.horizontalMargin,
-        (viewportWidth - defaultCardWidth) / 2
-      );
+      const defaultLeftOffset = cardDefaultLeftOffset(defaultCardWidth);
 
       // Height based on expanded state or drag
       let height: number;