@delightstack/components 0.1.0

package/dist/media/carousel.js

@@ -0,0 +1,408 @@
+import { thumbHashToDataURL } from 'thumbhash';
+// const BACK_OUT_EASTING = 'cubic-bezier(0.34, 1.56, 0.64, 1)';
+const BACK_OUT_EASTING = 'cubic-bezier(0.34, 1.30, 0.55, 1)';
+const DELTA_LINE_MULTIPLIER = 8;
+const DELTA_PAGE_MULTIPLIER = 24;
+const MAX_WHEEL_DELTA = 24;
+/** Returns the centroid center point between all the given points */
+export function center(...points) {
+    const x = points.reduce((a, b) => a + b.x, 0) / points.length;
+    const y = points.reduce((a, b) => a + b.y, 0) / points.length;
+    return { x, y };
+}
+/** Returns the distance between two points. Always a positive number */
+export function distance(pointA, pointB) {
+    if (!pointA || !pointB)
+        return 0;
+    return Math.sqrt((pointA.x - pointB.x) ** 2 + (pointA.y - pointB.y) ** 2);
+}
+/** Calculates the angle between two points (in radians) */
+export function angle(pointA, pointB) {
+    if (!pointA || !pointB)
+        return 0;
+    return (180 / Math.PI) * Math.atan2(pointB.y - pointA.y, pointB.x - pointA.x);
+}
+/** Creates a new DOMMatrix based on the transform string. If force3d, it will ensure the matrix is 3d */
+export function createMatrix(transform, force3d = true) {
+    const Matrix = window.WebKitCSSMatrix || window.DOMMatrix;
+    if (transform instanceof Matrix)
+        return Matrix.fromMatrix(transform);
+    if (!force3d)
+        return new Matrix(transform || '');
+    if (transform) {
+        const matrix = new Matrix(transform);
+        if (!matrix.is2D)
+            return matrix;
+        return new Matrix(Array.from(matrix.toFloat32Array()));
+    }
+    return new Matrix([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+}
+/** Extracts the x, y, and scale of the given matrix */
+export function extractMatrixTransform(matrix) {
+    const scale = Math.hypot(matrix.a, matrix.b);
+    return { scale, x: matrix.e / scale, y: matrix.f / scale };
+}
+/** Animates the target element to the given transform matrix. Returns a promise that resolves when complete */
+export async function animateElement(element, options) {
+    if (!element)
+        return;
+    element.getAnimations().forEach((animation) => {
+        try {
+            animation.commitStyles();
+        }
+        catch {
+            // ignore
+        }
+    });
+    const matrix = options?.transform || createMatrix();
+    const animation = element.animate([
+        {
+            transform: typeof matrix === 'string' ? matrix : matrix.toString(),
+            ...(options?.opacity !== undefined && { opacity: `${options.opacity}` }),
+        },
+    ], {
+        direction: 'normal',
+        fill: 'both',
+        ...options,
+        duration: options?.duration || 250,
+        easing: options?.easing === 'back-out' ? BACK_OUT_EASTING : options?.easing || 'ease-out',
+    });
+    await animation.finished.catch(() => { });
+    try {
+        animation.commitStyles();
+        animation.finish();
+        animation.cancel();
+    }
+    catch {
+        return;
+    }
+}
+/** Calculates the transform of the pointers based on their relationship to each other */
+export function calcTransform(pointer, pointers, midpoint, prevPointers, prevMidpoint) {
+    const prevPointer = prevPointers[pointer.id];
+    if (!prevPointer) {
+        return {
+            scale: 1,
+            rotation: 0,
+            translateX: 0,
+            translateY: 0,
+            originX: 0,
+            originY: 0,
+        };
+    }
+    const prevPointerList = Object.values(prevPointers);
+    const pointerList = Object.values(pointers);
+    const primary = pointerList.find((p) => p.primary) ||
+        [...pointerList].sort((a, b) => a.time - b.time)[0];
+    const prevPrimary = prevPointerList.find((p) => p.id === primary.id) ||
+        prevPointerList.find((p) => p.primary) ||
+        [...prevPointerList].sort((a, b) => a.time - b.time)[0] ||
+        primary;
+    let scale = 1;
+    let rotation = 0;
+    if (pointerList.length > 1) {
+        const scaleList = pointerList
+            .filter((p) => p.id !== primary.id)
+            .map((p) => {
+            if (!prevPointers[p.id])
+                return 1;
+            const prevDistance = distance(prevPointers[p.id], prevPrimary);
+            if (!prevDistance)
+                return 1;
+            return distance(p, primary) / prevDistance;
+        });
+        scale = scaleList.reduce((a, b) => a + b, 0) / (scaleList.length || 1) || 1;
+        const rotationList = pointerList.map((p) => !prevPointers[p.id]
+            ? 1
+            : angle(p, primary) - angle(prevPointers[p.id], prevPrimary));
+        rotation = rotationList.reduce((a, b) => a + b, 0) / rotationList.length;
+    }
+    return {
+        scale,
+        rotation,
+        translateX: pointerList.length > 1 && prevMidpoint
+            ? (midpoint?.x || 0) - (prevMidpoint?.x || 0)
+            : prevPointer
+                ? pointer.x - prevPointer.x
+                : 0,
+        translateY: pointerList.length > 1 && prevMidpoint
+            ? (midpoint?.y || 0) - (prevMidpoint?.y || 0)
+            : prevPointer
+                ? pointer.y - prevPointer.y
+                : 0,
+        originX: prevMidpoint?.x || 0,
+        originY: prevMidpoint?.y || 0,
+    };
+}
+/** Returns the min/max of the x/y position that should be used to ensure the element fits in the bounds */
+export function calcBounds(options) {
+    const scale = options?.scale || 1;
+    const viewportW = options?.viewportW || window.innerWidth;
+    const viewportH = options?.viewportH || window.innerHeight;
+    if (scale <= 1) {
+        const x = (viewportW * (1 - scale)) / 2;
+        const y = (viewportH * (1 - scale)) / 2;
+        return { minX: x, maxX: x, minY: y, maxY: y };
+    }
+    const padding = (options?.padding || 0) / scale;
+    const ratio = options?.ratio || 1;
+    const viewportRatio = viewportW / (viewportH || 1);
+    const imageW = ratio >= viewportRatio ? viewportW : viewportH * ratio;
+    const imageH = ratio >= viewportRatio ? viewportW / ratio : viewportH;
+    const containerW = viewportW;
+    const containerH = viewportH;
+    const containerPaddingW = (containerW * scale - imageW * scale) / 2;
+    const containerPaddingH = (containerH * scale - imageH * scale) / 2;
+    const imagePaddingW = Math.abs(imageW * scale - viewportW);
+    const imagePaddingH = Math.abs(imageH * scale - viewportH);
+    let minX = (-containerPaddingW - imagePaddingW) / scale - padding;
+    let maxX = (imageW - containerW) / 2 + padding;
+    let minY = (-containerPaddingH - imagePaddingH) / scale - padding;
+    let maxY = (imageH - containerH) / 2 + padding;
+    if (imageW * scale < viewportW - padding * 2) {
+        minX = (viewportW - containerW * scale) / 2 / scale;
+        maxX = minX;
+    }
+    if (imageH * scale < viewportH - padding * 2) {
+        minY = (viewportH - containerH * scale) / 2 / scale;
+        maxY = minY;
+    }
+    return { minX, maxX, minY, maxY };
+}
+/** Calculates the transform matrix that would ensure the image stays in the bounds of the window */
+export function clampMatrix(matrix, options) {
+    const { scale, x, y } = extractMatrixTransform(matrix);
+    const viewportW = options?.viewportW || window.innerWidth;
+    const viewportH = options?.viewportH || window.innerHeight;
+    if (scale <= 1) {
+        return createMatrix()
+            .translate((viewportW * (1 - scale)) / 2, (viewportH * (1 - scale)) / 2)
+            .scale(scale);
+    }
+    const { minX, minY, maxX, maxY } = calcBounds({ ...options, scale });
+    const targetX = Math.max(minX, Math.min(maxX, x));
+    const targetY = Math.max(minY, Math.min(maxY, y));
+    return matrix.translate(targetX - x, targetY - y);
+}
+/** Returns the deltaX/deltaY of the given wheel event - normalized between devices */
+export function normalizeWheel(e) {
+    function limit(delta, max_delta) {
+        return Math.sign(delta) * Math.min(max_delta, Math.abs(delta));
+    }
+    let dx = e.deltaX;
+    let dy = e.deltaY;
+    if (e.shiftKey && dx === 0) {
+        [dx, dy] = [dy, dx];
+    }
+    if (e.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+        dx *= DELTA_LINE_MULTIPLIER;
+        dy *= DELTA_LINE_MULTIPLIER;
+    }
+    else if (e.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+        dx *= DELTA_PAGE_MULTIPLIER;
+        dy *= DELTA_PAGE_MULTIPLIER;
+    }
+    return [limit(dx, MAX_WHEEL_DELTA), limit(dy, MAX_WHEEL_DELTA)];
+}
+/** Returns whether the given item can be swiped left/right to change slides */
+export function isSwipeable(item) {
+    if (!item)
+        return false;
+    if (item.disable_swipe)
+        return false;
+    if (item.type === 'embed')
+        return false;
+    if (item.type === 'image' && item.panorama)
+        return false;
+    return true;
+}
+/** Returns whether the given item can be pinched/zoomed */
+export function isScalable(item) {
+    if (!item)
+        return false;
+    if (item.disable_zoom)
+        return false;
+    if (item.type === 'embed' || item.type === 'video')
+        return false;
+    if (item.type === 'image' && item.panorama)
+        return false;
+    if (item.type === 'custom')
+        return false;
+    return true;
+}
+/**
+ * Normalizes an embed iframe URL: rewrites known providers (YouTube, Vimeo,
+ * iplayerhd, Matterport) so autoplay/play params reflect whether the iframe is
+ * eagerly loaded. Plain `vimeo.com/<id>` URLs are converted to the canonical
+ * `player.vimeo.com/video/<id>` embed form.
+ */
+export function normalizeEmbedSrc(src, eager) {
+    if (!src)
+        return '';
+    let url;
+    try {
+        url = new URL(src);
+    }
+    catch {
+        return src;
+    }
+    const host = url.hostname.replace(/^www\./, '');
+    if (host === 'youtube.com' ||
+        host === 'youtu.be' ||
+        host === 'youtube-nocookie.com' ||
+        host === 'player.vimeo.com') {
+        url.searchParams.set('autoplay', eager ? '1' : '0');
+    }
+    else if (host === 'vimeo.com') {
+        // vimeo.com/<id> → player.vimeo.com/video/<id>
+        const match = url.pathname.match(/^\/(\d+)(?:\/([0-9a-zA-Z]+))?/);
+        if (match) {
+            const id = match[1];
+            const hash = match[2];
+            url = new URL(`https://player.vimeo.com/video/${id}${hash ? `?h=${hash}` : ''}`);
+            url.searchParams.set('autoplay', eager ? '1' : '0');
+        }
+    }
+    else if (host === 'iplayerhd.com') {
+        url.searchParams.set('autoplay', eager ? 'true' : 'false');
+    }
+    else if (host === 'matterport.com' || host === 'my.matterport.com') {
+        url.searchParams.set('play', eager ? '1' : '0');
+    }
+    return url.toString();
+}
+/**
+ * Returns true if the given URL points to an embed provider whose iframe
+ * renders video-like 16:9 content (YouTube, Vimeo). Used as a styling hint.
+ */
+export function isVideoEmbed(src) {
+    if (!src)
+        return false;
+    return /^(https?:\/\/)?(www\.)?(youtu\.?be|vimeo|youtube-nocookie)/.test(src);
+}
+/**
+ * Returns the best thumbnail URL for an item, in this order:
+ *   1. The explicit `item.poster` field.
+ *   2. For images, the largest src URL.
+ *   3. For known providers, a derived poster (YouTube → img.youtube.com,
+ *      Vimeo → vumbnail.com, Cloudinary `.mp4` → `.jpg`).
+ *   4. Otherwise `undefined` — callers should fall back to a placeholder
+ *      (the Gallery shows a type icon overlay over a styled placeholder block).
+ */
+export function getItemThumbnailSrc(item) {
+    if (item.poster)
+        return item.poster;
+    const src = item.src;
+    if (!src)
+        return undefined;
+    // Images (including panoramas) just use the source image directly.
+    if (!item.type || item.type === 'image')
+        return pickLargestSrc(src);
+    const single = pickLargestSrc(src);
+    // Cloudinary video URL → swap the file extension for `.jpg` to get the
+    // first frame as an image with all the same transforms applied.
+    if (/^https?:\/\/res\.cloudinary\.com\//.test(single) &&
+        /\.(mp4|webm|mov|m3u8)$/i.test(single)) {
+        return single.replace(/\.(mp4|webm|mov|m3u8)$/i, '.jpg');
+    }
+    // YouTube embed → `img.youtube.com` thumbnail.
+    const youtubeId = single.match(/^https?:\/\/(?:www\.)?(?:youtube(?:-nocookie)?\.com\/embed\/|youtu\.be\/)([\w-]{6,})/)?.[1];
+    if (youtubeId)
+        return `https://img.youtube.com/vi/${youtubeId}/hqdefault.jpg`;
+    // Vimeo embed → vumbnail.com (free third-party thumbnail mirror).
+    const vimeoId = single.match(/^https?:\/\/player\.vimeo\.com\/video\/(\d+)/)?.[1];
+    if (vimeoId)
+        return `https://vumbnail.com/${vimeoId}.jpg`;
+    return undefined;
+}
+/**
+ * Normalizes any acceptable carousel input (string src, partial item, or a full item)
+ * into a guaranteed CarouselItem. Returns `undefined` for inputs that can't be coerced.
+ */
+export function normalizeCarouselItem(input) {
+    if (!input)
+        return undefined;
+    if (typeof input === 'string') {
+        return { src: input, type: 'image' };
+    }
+    if (!input.src)
+        return undefined;
+    return {
+        type: input.type || 'image',
+        ...input,
+    };
+}
+/**
+ * Returns true if `src` is an actual srcset (multiple URLs with width descriptors),
+ * not just a single URL that happens to contain a comma in its path.
+ */
+export function isResponsiveSrcset(src) {
+    if (!src)
+        return false;
+    if (!src.includes(',') && !src.includes(' '))
+        return false;
+    return /\s\d+w(?:\s*,|\s*$)/.test(src);
+}
+/**
+ * Returns the highest-width URL from a srcset-style string, or the URL as-is if it's
+ * already a single URL. Used to extract a single `src` for elements that don't accept
+ * srcset (video, iframe, pdf consumers, download links).
+ */
+export function pickLargestSrc(src) {
+    if (!src)
+        return '';
+    if (!src.includes(',') && !src.includes(' '))
+        return src;
+    if (!isResponsiveSrcset(src))
+        return src;
+    let bestUrl = '';
+    let bestWidth = -1;
+    for (const entry of src.split(',')) {
+        const trimmed = entry.trim();
+        if (!trimmed)
+            continue;
+        const parts = trimmed.split(/\s+/);
+        const url = parts[0];
+        if (!url)
+            continue;
+        const widthMatch = parts[1]?.match(/^(\d+)w$/);
+        const width = widthMatch ? parseInt(widthMatch[1], 10) : 0;
+        if (width > bestWidth) {
+            bestWidth = width;
+            bestUrl = url;
+        }
+    }
+    return bestUrl || src;
+}
+/** Module-level cache of "best resolution already loaded" per item id, so cross-mount renders */
+/** of the same image avoid downgrading to a smaller resolution. */
+const loadedResolutions = new Map();
+export function getLoadedResolutions(id) {
+    return Array.from(loadedResolutions.get(id) || []);
+}
+export function addLoadedResolution(id, resolution) {
+    if (!id || !resolution || !Number.isFinite(resolution))
+        return;
+    const set = loadedResolutions.get(id) || new Set();
+    set.add(resolution);
+    loadedResolutions.set(id, set);
+}
+/** Memoized base64-thumbhash → data:image/png URL conversions. */
+const thumbhashDecodeCache = new Map();
+/**
+ * Decode a base64-encoded ThumbHash into a `data:image/png` URL suitable for
+ * use as an `<img src>` value. Decoded URLs are memoized so repeated renders
+ * of the same item don't pay the decode cost more than once.
+ */
+export function decodeThumbHash(base64) {
+    const cached = thumbhashDecodeCache.get(base64);
+    if (cached)
+        return cached;
+    const binary = atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++)
+        bytes[i] = binary.charCodeAt(i);
+    const url = thumbHashToDataURL(bytes);
+    thumbhashDecodeCache.set(base64, url);
+    return url;
+}

package/dist/media/index.d.ts

@@ -0,0 +1,11 @@
+export { default as Carousel } from './Carousel.svelte';
+export type { CarouselItem, CarouselItemType, GalleryGesture } from './Carousel.svelte';
+export { decodeThumbHash, getItemThumbnailSrc, isResponsiveSrcset, isScalable, isSwipeable, isVideoEmbed, normalizeCarouselItem, normalizeEmbedSrc, pickLargestSrc, } from './carousel';
+export { default as Gallery } from './Gallery.svelte';
+export type { GalleryDisplay, GalleryItem, GalleryItemAction, GalleryRadius, GallerySize, GallerySpacing, } from './Gallery.svelte';
+export { default as Image } from './Image.svelte';
+export type { Hotspot as PanoramaHotspot } from './Panorama.svelte';
+export type { PDFAnnotation } from './PDF.svelte';
+export { default as Video } from './Video.svelte';
+export type { Source as VideoSource, Track as VideoTrack } from './Video.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/media/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/media/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxF,OAAO,EACN,eAAe,EACf,mBAAmB,EACnB,kBAAkB,EAClB,UAAU,EACV,WAAW,EACX,YAAY,EACZ,qBAAqB,EACrB,iBAAiB,EACjB,cAAc,GACd,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,YAAY,EACX,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,cAAc,GACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGlD,YAAY,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpE,YAAY,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EAAE,MAAM,IAAI,WAAW,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/media/index.js

@@ -0,0 +1,5 @@
+export { default as Carousel } from './Carousel.svelte';
+export { decodeThumbHash, getItemThumbnailSrc, isResponsiveSrcset, isScalable, isSwipeable, isVideoEmbed, normalizeCarouselItem, normalizeEmbedSrc, pickLargestSrc, } from './carousel';
+export { default as Gallery } from './Gallery.svelte';
+export { default as Image } from './Image.svelte';
+export { default as Video } from './Video.svelte';