@classic-homes/theme-svelte 1.2.2 → 1.3.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

@@ -96,6 +96,12 @@
      * cover the tab. Defaults to 0.
      */
     tabInset?: number;
+    /**
+     * Thickness (px) of the collapsed tab — how far it protrudes into the page
+     * from its edge. The 56px default fits a title + subtitle; a single-line
+     * tab reads better around 36-40.
+     */
+    tabThickness?: number;
     /** Disable close button */
     disableClose?: boolean;
     /** Disable resize functionality */
@@ -141,6 +147,7 @@
     cardConfig = {},
     tabWidth = DEFAULT_TAB_WIDTH,
     tabInset = 0,
+    tabThickness = undefined,
     disableClose = false,
     disableResize = false,
     disableDrag = false,
@@ -1169,6 +1176,7 @@
       {disableClose}
       {tabWidth}
       {tabInset}
+      {tabThickness}
       onclick={handleTabClick}
       onClose={handleClose}
       offset={internalTabOffset}

package/dist/lib/components/DataPanel.svelte.d.ts

@@ -44,6 +44,12 @@ interface Props {
      * cover the tab. Defaults to 0.
      */
     tabInset?: number;
+    /**
+     * Thickness (px) of the collapsed tab — how far it protrudes into the page
+     * from its edge. The 56px default fits a title + subtitle; a single-line
+     * tab reads better around 36-40.
+     */
+    tabThickness?: number;
     /** Disable close button */
     disableClose?: boolean;
     /** Disable resize functionality */

package/dist/lib/components/DataPanelTab.svelte

@@ -37,6 +37,13 @@
      * to 0 (flush with the edge).
      */
     tabInset?: number;
+    /**
+     * Thickness (px) of the tab — how far it protrudes into the page from its
+     * edge. The 56px default fits a title + subtitle; a single-line tab reads
+     * better around 36-40. Only applies to side tabs; top/bottom tabs stay
+     * content-height.
+     */
+    tabThickness?: number;
     /** Additional class */
     class?: string;
   }
@@ -52,6 +59,7 @@
     onOffsetChange,
     tabWidth = DEFAULT_TAB_WIDTH,
     tabInset = 0,
+    tabThickness = TAB_THICKNESS,
     class: className,
   }: Props = $props();
 
@@ -83,8 +91,10 @@
   // Geometry is entirely pixel-based (see getTabTransform): the tab carries an
   // explicit width so nothing has to resolve a percentage against a
   // content-sized box while a rotation is composed onto it.
-  const tabTransform = $derived<string>(getTabTransform(edge, tabWidth, effectiveOffset));
-  const tabBounds = $derived(getTabBounds(edge, tabWidth));
+  const tabTransform = $derived<string>(
+    getTabTransform(edge, tabWidth, effectiveOffset, tabThickness)
+  );
+  const tabBounds = $derived(getTabBounds(edge, tabWidth, tabThickness));
 
   // Non-reactive drag bookkeeping.
   let drag = { startX: 0, startY: 0, startOffset: 0, moved: false, pointerId: -1 };
@@ -210,7 +220,7 @@
   style={`${insetStyle} width: ${tabWidth}px; ${
     /* Side tabs rotate, so they need a fixed thickness for a deterministic edge
        hug; top/bottom stay content-height. */
-    isVertical ? `height: ${TAB_THICKNESS}px; ` : ''
+    isVertical ? `height: ${tabThickness}px; ` : ''
   }transform-origin: 0 0; transform: ${tabTransform};`}
   onpointerdown={handlePointerDown}
   onpointermove={draggable ? handlePointerMove : undefined}
@@ -220,14 +230,34 @@
   <button
     type="button"
     aria-label={`Expand ${title} panel`}
-    class="flex min-w-0 flex-1 flex-col text-left leading-tight hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    class="flex min-w-0 flex-1 items-center gap-1.5 text-left leading-tight hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
     onclick={draggable ? undefined : onclick}
     onkeydown={handleExpandKeyDown}
   >
-    <span class="truncate text-sm font-semibold">{title}</span>
-    {#if subtitle}
-      <span class="truncate text-xs text-muted-foreground">{subtitle}</span>
-    {/if}
+    <!-- Expand chevron, pointing into the page (the direction the panel opens).
+         The chip rotates with its edge, so the pre-rotation "up" chevron lands
+         correctly on side edges; only a top tab needs flipping. -->
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      class={cn('shrink-0 text-muted-foreground', edge === 'top' && 'rotate-180')}
+    >
+      <path d="m18 15-6-6-6 6" />
+    </svg>
+    <span class="flex min-w-0 flex-col">
+      <span class="truncate text-sm font-semibold">{title}</span>
+      {#if subtitle}
+        <span class="truncate text-xs text-muted-foreground">{subtitle}</span>
+      {/if}
+    </span>
   </button>
 
   {#if !disableClose && onClose}

package/dist/lib/components/DataPanelTab.svelte.d.ts

@@ -27,6 +27,13 @@ interface Props {
      * to 0 (flush with the edge).
      */
     tabInset?: number;
+    /**
+     * Thickness (px) of the tab — how far it protrudes into the page from its
+     * edge. The 56px default fits a title + subtitle; a single-line tab reads
+     * better around 36-40. Only applies to side tabs; top/bottom tabs stay
+     * content-height.
+     */
+    tabThickness?: number;
     /** Additional class */
     class?: string;
 }