@phosart/common 0.4.22

package/dist/util/phosart_config.svelte.js

@@ -0,0 +1,51 @@
+import { createContext } from 'svelte';
+const [get, set] = createContext();
+const DEFAULT_CONFIG = {
+    siteName: '',
+    gallery: {
+        DefaultCardComponent: undefined, // TODO
+        DefaultPieceComponent: undefined // TODO
+    },
+    modal: {
+        chipOptionsByType: {
+            artist: {
+                action: { makeHref: (artist) => `/artist/${artist.name}` }
+            },
+            tag: { action: { makeHref: (tag) => `/tag/${tag}` } },
+            character: { action: { makeHref: (ch) => `/characters/${ch.name}` } },
+            permalink: { action: { makeHref: (pl) => `/piece/${pl.slug}` } }
+        }
+    }
+};
+function spread(cfg) {
+    const modalBase = DEFAULT_CONFIG.modal;
+    let gallery = DEFAULT_CONFIG.gallery;
+    let modal = modalBase;
+    let chipOptionsByType = modalBase?.chipOptionsByType;
+    if (cfg.gallery) {
+        gallery = { ...DEFAULT_CONFIG.gallery, ...cfg.gallery };
+    }
+    if (cfg.modal) {
+        if (cfg.modal.chipOptionsByType) {
+            chipOptionsByType = { ...modalBase?.chipOptionsByType, ...cfg.modal.chipOptionsByType };
+        }
+        modal = { ...modalBase, ...cfg.modal, chipOptionsByType };
+    }
+    return { ...cfg, gallery, modal };
+}
+export function useChipConfig(type) {
+    const config = useLibraryConfig();
+    if (!config.modal) {
+        return null;
+    }
+    return config.modal.chipOptionsByType?.[type] ?? null;
+}
+export function setLibraryConfig(config) {
+    set(spread(config));
+    $effect(() => {
+        set(spread(config));
+    });
+}
+export function useLibraryConfig() {
+    return get() ?? DEFAULT_CONFIG;
+}

package/dist/util/search.d.ts

@@ -0,0 +1,3 @@
+import { type ArtPiece } from './art.ts';
+export declare function executeSearch(query: string, pieces: ArtPiece[]): ArtPiece[];
+//# sourceMappingURL=search.d.ts.map

package/dist/util/search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../src/lib/util/search.ts"],"names":[],"mappings":"AACA,OAAO,EAAuC,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAG9E,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,CAuB3E"}

package/dist/util/search.js

@@ -0,0 +1,24 @@
+import fz from 'fuzzysort';
+import { normalizeArtist, normalizeCharacter } from "./art.js";
+import { asRecord } from "./util.js";
+export function executeSearch(query, pieces) {
+    const allPieces = asRecord(pieces, (p) => p.slug);
+    const searchObj = Object.values(allPieces).map((p) => ({
+        name: p.name,
+        description: p.description,
+        alt: p.alt,
+        tags: p.tags.join(', '),
+        characters: p.characters
+            .map((ch) => normalizeCharacter(ch))
+            .map((ch) => `${ch.name} ${ch.from}`),
+        artists: normalizeArtist(p.artist)
+            .map((a) => a.name)
+            .join(', '),
+        slug: p.slug
+    }));
+    const results = fz.go(query, searchObj, {
+        keys: ['name', 'characters', 'artists', 'tags', 'alt', 'description'],
+        threshold: 0.3
+    });
+    return results.map((res) => allPieces[res.obj.slug]);
+}

package/dist/util/smoothscroll.d.ts

@@ -0,0 +1,4 @@
+export declare const smoothScroll: (anchor: HTMLAnchorElement) => {
+    destroy(): void;
+};
+//# sourceMappingURL=smoothscroll.d.ts.map

package/dist/util/smoothscroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"smoothscroll.d.ts","sourceRoot":"","sources":["../../src/lib/util/smoothscroll.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,GAAI,QAAQ,iBAAiB;;CAoBrD,CAAC"}

package/dist/util/smoothscroll.js

@@ -0,0 +1,21 @@
+export const smoothScroll = (anchor) => {
+    const cb = (e) => {
+        e.preventDefault();
+        const href = anchor.getAttribute('href');
+        if (!href || !href.startsWith('#'))
+            return;
+        const target = document.getElementById(href.replace(/^#/g, ''));
+        if (!target)
+            return;
+        window.scrollTo({
+            top: target.offsetTop,
+            behavior: 'smooth'
+        });
+    };
+    anchor.addEventListener('click', cb);
+    return {
+        destroy() {
+            anchor.removeEventListener('click', cb);
+        }
+    };
+};

package/dist/util/tree.d.ts

@@ -0,0 +1,19 @@
+import type { GalleryCache } from '../server/gallery.ts';
+import type { ArtPiece, Gallery } from './art.ts';
+export type FolderElement = {
+    $type: 'folder';
+    data: GalleryTree;
+    items: number;
+};
+export type GalleryElement = {
+    $type: 'gallery';
+    data: Gallery;
+    fullpath: string;
+};
+export type TreeElement = FolderElement | GalleryElement;
+export type GalleryTree = {
+    [element: string]: TreeElement;
+};
+export declare function asTree(cache: GalleryCache, transformPieces?: (pieces: Array<ArtPiece>) => Array<ArtPiece>): FolderElement;
+export declare function pathView(tree: FolderElement, path: string[]): GalleryTree;
+//# sourceMappingURL=tree.d.ts.map

package/dist/util/tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../src/lib/util/tree.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG;IAAE,KAAK,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAClF,MAAM,MAAM,cAAc,GAAG;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AACnF,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG;IACzB,CAAC,OAAO,EAAE,MAAM,GAAG,WAAW,CAAC;CAC/B,CAAC;AAEF,wBAAgB,MAAM,CACrB,KAAK,EAAE,YAAY,EACnB,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,GAC5D,aAAa,CA8Bf;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,WAAW,CA4BzE"}

package/dist/util/tree.js

@@ -0,0 +1,58 @@
+export function asTree(cache, transformPieces) {
+    const paths = Object.entries(cache);
+    const tree = { $type: 'folder', data: {}, items: 0 };
+    for (const [path, gallery] of paths) {
+        let cur = tree;
+        tree.items += gallery.pieces.length;
+        const segments = path.split('/');
+        const dir = segments.slice(0, -1);
+        for (const segment of dir) {
+            let next = cur.data[segment];
+            if (!next) {
+                cur.data[segment] = { $type: 'folder', data: {}, items: 0 };
+                next = cur.data[segment];
+            }
+            if (next.$type !== 'folder') {
+                throw new Error('Somehow found gallery + folder with same name??');
+            }
+            next.items += gallery.pieces.length;
+            cur = next;
+        }
+        cur.data[segments.at(-1)] = {
+            $type: 'gallery',
+            data: {
+                pieces: transformPieces?.(gallery.pieces) ?? gallery.pieces
+            },
+            fullpath: path
+        };
+    }
+    return tree;
+}
+export function pathView(tree, path) {
+    let cur = tree;
+    // Go to path
+    for (let i = 0; i < path.length; i++) {
+        const el = path[i];
+        const next = cur.data[el];
+        if (!next) {
+            return {};
+        }
+        if (next.$type !== 'folder') {
+            return {};
+        }
+        cur = next;
+    }
+    cur = { ...cur, data: { ...cur.data } };
+    // Prune deeper levels
+    for (const [k, el] of Object.entries(cur.data)) {
+        if (el.$type === 'folder') {
+            if (el.items === 0) {
+                delete cur.data[k];
+            }
+            else {
+                cur.data[k] = { $type: 'folder', data: {}, items: el.items };
+            }
+        }
+    }
+    return cur.data;
+}

package/dist/util/util.d.ts

@@ -0,0 +1,4 @@
+export declare function asRecord<T>(arr: T[], key: (el: T) => string, combine?: (a: T, b: T) => T): Record<string, T>;
+export declare function multiRecordBy<T>(arr: T[], key: (el: T) => string): Record<string, T[]>;
+export declare function deduplicateBy<T>(arr: T[], key: (el: T) => string, combine?: (a: T, b: T) => T): T[];
+//# sourceMappingURL=util.d.ts.map

package/dist/util/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../src/lib/util/util.ts"],"names":[],"mappings":"AAIA,wBAAgB,QAAQ,CAAC,CAAC,EACzB,GAAG,EAAE,CAAC,EAAE,EACR,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,MAAM,EACtB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,GACzB,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAYnB;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAMtF;AAED,wBAAgB,aAAa,CAAC,CAAC,EAC9B,GAAG,EAAE,CAAC,EAAE,EACR,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,MAAM,EACtB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,GACzB,CAAC,EAAE,CAEL"}

package/dist/util/util.js

@@ -0,0 +1,22 @@
+function defaultCombine(a) {
+    return a;
+}
+export function asRecord(arr, key, combine) {
+    const record = {};
+    for (const val of arr) {
+        const k = key(val);
+        if (k in record) {
+            record[k] = (combine ?? defaultCombine)(record[k], val);
+        }
+        else {
+            record[k] = val;
+        }
+    }
+    return record;
+}
+export function multiRecordBy(arr, key) {
+    return asRecord(arr.map((v) => [v]), (arr) => key(arr[0]), (a1, a2) => [...a1, ...a2]);
+}
+export function deduplicateBy(arr, key, combine) {
+    return Object.values(asRecord(arr, key, combine));
+}

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "@phosart/common",
+  "version": "0.4.22",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "src/lib",
+    "!src/lib/**/*.test.*",
+    "!src/lib/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./util": {
+      "types": "./dist/util/index.d.ts",
+      "default": "./dist/util/index.js"
+    },
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "default": "./dist/server/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.4.0",
+    "@eslint/js": "^9.39.1",
+    "@playwright/test": "^1.57.0",
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.49.2",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.1.17",
+    "@types/msgpack": "^0.0.34",
+    "@types/node": "^22",
+    "@vitest/browser-playwright": "^4.0.15",
+    "@vitest/coverage-v8": "^4.0.15",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.13.1",
+    "globals": "^16.5.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "playwright": "^1.57.0",
+    "prettier": "^3.7.4",
+    "prettier-plugin-svelte": "^3.4.0",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "publint": "^0.3.15",
+    "svelte": "^5.45.6",
+    "svelte-check": "^4.3.4",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.48.1",
+    "vite": "^7.2.6",
+    "vitest": "^4.0.15",
+    "vitest-browser-svelte": "^2.0.1"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^7.1.0",
+    "async-sema": "^3.1.1",
+    "fuzzysort": "^3.1.0",
+    "glob": "^13.0.0",
+    "msgpackr": "^1.11.8",
+    "rehype-sanitize": "^6.0.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "sharp": "^0.34.5",
+    "sharp-phash": "^2.2.0",
+    "tslog": "^4.10.2",
+    "unified": "^11.0.5",
+    "yaml": "^2.8.2",
+    "zod": "^4.3.2"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack && WRITE_SCHEMA=1 node ./dist/server/theme/schema.js",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "test:unit": "vitest",
+    "test": "npm run test:unit -- --run && npm run test:e2e",
+    "test:e2e": "playwright test"
+  }
+}

package/src/lib/FullGallery.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { ArtPiece } from './util/art.ts';
+	import ModalGallery from './ModalGallery.svelte';
+	import type { Component } from 'svelte';
+	import { useLibraryConfig } from './util/phosart_config.svelte.ts';
+
+	interface Props {
+		pieces: ArtPiece[];
+		addNav?: boolean;
+		noDetails?: boolean;
+		browser: boolean;
+		CardComponent?: Component<{
+			piece: ArtPiece;
+			onselect: () => void;
+			showDescriptionByDefault: boolean;
+		}>;
+	}
+
+	let { pieces, addNav = false, noDetails = false, browser, CardComponent }: Props = $props();
+
+	let config = useLibraryConfig();
+
+	const TheCardComponent = $derived(CardComponent ?? config.gallery?.DefaultCardComponent);
+
+	let selected: number | null = $state(null);
+
+	function onSelect(idx: number) {
+		selected = idx;
+	}
+</script>
+
+<div
+	style="margin-bottom: 24px; align-items: stretch; display: flex; flex-direction: column; row-gap: 2rem;"
+>
+	{#each pieces as piece, i (piece.slug)}
+		<section
+			id={piece.name}
+			data-nav={piece.name}
+			data-nav-icon="palette"
+			class:scroll-ignore={!addNav}
+		>
+			<TheCardComponent
+				{piece}
+				onselect={() => onSelect(i)}
+				showDescriptionByDefault={!noDetails}
+			/>
+		</section>
+	{/each}
+
+	<ModalGallery {pieces} {browser} bind:selected />
+</div>

package/src/lib/Gallery.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { ArtPiece } from './util/art.ts';
+	import ModalGallery from './ModalGallery.svelte';
+	import type { Component } from 'svelte';
+	import { useLibraryConfig } from './util/phosart_config.svelte.ts';
+
+	interface Props {
+		pieces: ArtPiece[];
+		browser: boolean;
+		PieceComponent?: Component<{ piece: ArtPiece; onselect: () => void }>;
+	}
+
+	let { pieces, browser, PieceComponent }: Props = $props();
+
+	let config = useLibraryConfig();
+
+	let ThePieceComponent = $derived(PieceComponent ?? config.gallery?.DefaultPieceComponent);
+
+	let selected: number | null = $state(null);
+
+	function onSelect(idx: number) {
+		selected = idx;
+	}
+</script>
+
+{#each pieces as piece, i (piece.slug)}
+	<ThePieceComponent {piece} onselect={() => onSelect(i)} />
+{/each}
+
+<ModalGallery {pieces} {browser} bind:selected />

package/src/lib/GalleryPreview.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { Gallery } from './util/art.ts';
+	import Image from './Image.svelte';
+
+	interface Props {
+		gallery: Gallery;
+		cssSize: string;
+	}
+
+	const { gallery, cssSize }: Props = $props();
+
+	const pieces = $derived(gallery.pieces.slice(0, 4));
+</script>
+
+{#if pieces[0]}
+	{@const topw = pieces[1] ? 'calc(var(--preview-size) / 2)' : 'var(--preview-size)'}
+	{@const toph = pieces[2] ? 'calc(var(--preview-size) / 2)' : 'var(--preview-size)'}
+	{@const botw = pieces[3] ? 'calc(var(--preview-size) / 2)' : 'var(--preview-size)'}
+	{@const both = 'calc(var(--preview-size) / 2)'}
+	<div class="preview" style="--preview-size: {cssSize}">
+		<div style="height: {toph}; width: {topw}" class="imgcontainer" class:square={topw === toph}>
+			<div><Image alt={pieces[0].alt} picture={pieces[0].image.thumbnail} /></div>
+		</div>
+		{#if pieces[1]}
+			<div style="height: {toph}; width: {topw}" class="imgcontainer" class:square={topw === toph}>
+				<div><Image alt={pieces[1].alt} picture={pieces[1].image.thumbnail} /></div>
+			</div>
+		{/if}
+		{#if pieces[2]}
+			<div style="height: {both}; width: {botw}" class="imgcontainer" class:square={botw === both}>
+				<div><Image alt={pieces[2].alt} picture={pieces[2].image.thumbnail} /></div>
+			</div>
+		{/if}
+		{#if pieces[3]}
+			<div style="height: {both}; width: {botw}" class="imgcontainer" class:square={botw === both}>
+				<div><Image alt={pieces[3].alt} picture={pieces[3].image.thumbnail} /></div>
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.preview {
+		display: contents;
+	}
+	.imgcontainer {
+		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.imgcontainer:not(.square) > div {
+		width: var(--preview-size);
+		height: var(--preview-size);
+		max-width: var(--preview-size);
+		max-height: var(--preview-size);
+		min-width: var(--preview-size);
+		min-height: var(--preview-size);
+	}
+</style>

package/src/lib/HighResContext.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+	import { getContext } from 'svelte';
+	const ctxKey = Symbol();
+
+	export function isHighRes() {
+		return getContext(ctxKey) === true;
+	}
+</script>
+
+<script lang="ts">
+	import { setContext } from 'svelte';
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	setContext(ctxKey, true);
+</script>
+
+{@render children?.()}

package/src/lib/Image.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+	import { onlyHighRes, type Image as ImageModel, no4K } from './util/art.ts';
+	import { untrack } from 'svelte';
+	import { isHighRes } from './HighResContext.svelte';
+
+	interface Props {
+		picture: ImageModel;
+		alt: string;
+		video?: string | undefined;
+		controls?: boolean;
+		nolqip?: boolean;
+		onloaded?: () => void;
+		loading?: boolean;
+	}
+
+	let {
+		picture,
+		alt,
+		onloaded = undefined,
+		video = undefined,
+		controls = false,
+		nolqip = false,
+		loading = $bindable(true)
+	}: Props = $props();
+
+	let showBackground = $state(true);
+	let loadingMeta = $state(true);
+	// svelte-ignore state_referenced_locally
+	let lastSrc = $state(picture.fallback.src);
+
+	const highRes = isHighRes();
+	let src = $derived(highRes ? onlyHighRes(picture) : no4K(picture));
+
+	let background = $derived(
+		!nolqip && src.lqip && showBackground
+			? `url(${src.lqip?.src}) no-repeat center/contain`
+			: 'none'
+	);
+
+	$effect(() => {
+		let prev = untrack(() => lastSrc);
+
+		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+		picture;
+		untrack(() => {
+			lastSrc = picture.fallback.src;
+			if (prev !== picture.fallback.src) {
+				showBackground = true;
+				loading = true;
+			}
+		});
+	});
+
+	function onload(el: HTMLImageElement | HTMLVideoElement) {
+		let timeoutHandle: ReturnType<typeof setTimeout> | null = null;
+		const onloadend = () => {
+			loading = false;
+			onloaded?.();
+		};
+
+		const onloadstart = () => {
+			if (loading) {
+				showBackground = true;
+				loadingMeta = true;
+			}
+		};
+
+		const animationend = () => {
+			showBackground = false;
+		};
+
+		const onloadmeta = () => {
+			loadingMeta = false;
+		};
+
+		el.addEventListener('loadstart', onloadstart);
+		el.addEventListener('load', onloadend);
+		el.addEventListener('loadeddata', onloadend);
+		el.addEventListener('loadedmetadata', onloadmeta);
+		el.addEventListener('animationend', animationend);
+
+		onloadstart();
+
+		return {
+			destroy() {
+				if (timeoutHandle) {
+					clearTimeout(timeoutHandle);
+				}
+				el.removeEventListener('loadstart', onloadstart);
+				el.removeEventListener('load', onloadend);
+				el.removeEventListener('loadeddata', onloadend);
+				el.removeEventListener('loadedmetadata', onloadmeta);
+				el.removeEventListener('animationend', animationend);
+			}
+		};
+	}
+</script>
+
+{#each [{ src, video }] as pic (JSON.stringify(pic))}
+	{#if video}
+		<video
+			style="background: {background}; aspect-ratio: {src.fallback.w} / {src.fallback.h};"
+			muted
+			autoplay
+			{controls}
+			disablepictureinpicture
+			disableremoteplayback
+			loop
+			playsinline
+			use:onload
+		>
+			<source src={video} type="video/mp4" />
+		</video>
+	{:else}
+		<picture style="background: {background}; aspect-ratio: {src.fallback.w} / {src.fallback.h};">
+			{#each Object.entries(src.sources) as [format, images] (format)}
+				<source
+					srcset={images.map((img) => `${img.src} ${img.w}w`).join(', ')}
+					type={'image/' + format}
+				/>
+			{/each}
+			<img
+				src={src.fallback.src}
+				{alt}
+				use:onload
+				loading="lazy"
+				decoding="async"
+				class:loading
+				class:loaded={!loading}
+				width={src.fallback.w}
+				height={src.fallback.h}
+				style="font-size: 0; {!(!loadingMeta || !loading) &&
+					`width: ${src.fallback.w}px; height: ${src.fallback.h}px;`}"
+			/>
+		</picture>
+	{/if}
+{/each}
+
+<style>
+	picture,
+	video {
+		display: flex;
+		width: 100%;
+		height: 100%;
+		max-height: 100%;
+		max-width: 100%;
+		overflow: hidden;
+	}
+	img {
+		object-fit: contain;
+		object-position: center;
+		width: 100%;
+		height: 100%;
+	}
+
+	.loading {
+		opacity: 0;
+	}
+	.loaded {
+		animation: in 0.1s linear;
+	}
+
+	@keyframes in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+</style>