@phosart/common 0.4.22

package/README.md

@@ -0,0 +1,58 @@
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```sh
+npm publish
+```

package/dist/FullGallery.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { ArtPiece } from './util/art.js';
+	import ModalGallery from './ModalGallery.svelte';
+	import type { Component } from 'svelte';
+	import { useLibraryConfig } from './util/phosart_config.svelte.js';
+
+	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/dist/FullGallery.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { ArtPiece } from './util/art.ts';
+import type { Component } from 'svelte';
+interface Props {
+    pieces: ArtPiece[];
+    addNav?: boolean;
+    noDetails?: boolean;
+    browser: boolean;
+    CardComponent?: Component<{
+        piece: ArtPiece;
+        onselect: () => void;
+        showDescriptionByDefault: boolean;
+    }>;
+}
+declare const FullGallery: Component<Props, {}, "">;
+type FullGallery = ReturnType<typeof FullGallery>;
+export default FullGallery;
+//# sourceMappingURL=FullGallery.svelte.d.ts.map

package/dist/FullGallery.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullGallery.svelte.d.ts","sourceRoot":"","sources":["../src/lib/FullGallery.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAIvC,UAAU,KAAK;IACd,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,SAAS,CAAC;QACzB,KAAK,EAAE,QAAQ,CAAC;QAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;QACrB,wBAAwB,EAAE,OAAO,CAAC;KAClC,CAAC,CAAC;CACH;AAiCF,QAAA,MAAM,WAAW,0BAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/Gallery.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { ArtPiece } from './util/art.js';
+	import ModalGallery from './ModalGallery.svelte';
+	import type { Component } from 'svelte';
+	import { useLibraryConfig } from './util/phosart_config.svelte.js';
+
+	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/dist/Gallery.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ArtPiece } from './util/art.ts';
+import type { Component } from 'svelte';
+interface Props {
+    pieces: ArtPiece[];
+    browser: boolean;
+    PieceComponent?: Component<{
+        piece: ArtPiece;
+        onselect: () => void;
+    }>;
+}
+declare const Gallery: Component<Props, {}, "">;
+type Gallery = ReturnType<typeof Gallery>;
+export default Gallery;
+//# sourceMappingURL=Gallery.svelte.d.ts.map

package/dist/Gallery.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gallery.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Gallery.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAIvC,UAAU,KAAK;IACd,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,SAAS,CAAC;QAAE,KAAK,EAAE,QAAQ,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;CACtE;AA6BF,QAAA,MAAM,OAAO,0BAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/GalleryPreview.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { Gallery } from './util/art.js';
+	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/dist/GalleryPreview.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Gallery } from './util/art.ts';
+interface Props {
+    gallery: Gallery;
+    cssSize: string;
+}
+declare const GalleryPreview: import("svelte").Component<Props, {}, "">;
+type GalleryPreview = ReturnType<typeof GalleryPreview>;
+export default GalleryPreview;
+//# sourceMappingURL=GalleryPreview.svelte.d.ts.map

package/dist/GalleryPreview.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryPreview.svelte.d.ts","sourceRoot":"","sources":["../src/lib/GalleryPreview.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAI5C,UAAU,KAAK;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CAChB;AA0CF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/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/dist/HighResContext.svelte.d.ts

@@ -0,0 +1,8 @@
+export declare function isHighRes(): boolean;
+interface Props {
+    children?: import('svelte').Snippet;
+}
+declare const HighResContext: import("svelte").Component<Props, {}, "">;
+type HighResContext = ReturnType<typeof HighResContext>;
+export default HighResContext;
+//# sourceMappingURL=HighResContext.svelte.d.ts.map

package/dist/HighResContext.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighResContext.svelte.d.ts","sourceRoot":"","sources":["../src/lib/HighResContext.svelte.ts"],"names":[],"mappings":"AAMC,wBAAgB,SAAS,YAExB;AAKD,UAAU,KAAK;IACd,QAAQ,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACpC;AAgBF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/Image.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+	import { onlyHighRes, type Image as ImageModel, no4K } from './util/art.js';
+	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>

package/dist/Image.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type Image as ImageModel } from './util/art.ts';
+interface Props {
+    picture: ImageModel;
+    alt: string;
+    video?: string | undefined;
+    controls?: boolean;
+    nolqip?: boolean;
+    onloaded?: () => void;
+    loading?: boolean;
+}
+declare const Image: import("svelte").Component<Props, {}, "loading">;
+type Image = ReturnType<typeof Image>;
+export default Image;
+//# sourceMappingURL=Image.svelte.d.ts.map

package/dist/Image.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Image.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,KAAK,IAAI,UAAU,EAAQ,MAAM,eAAe,CAAC;AAK3E,UAAU,KAAK;IACd,OAAO,EAAE,UAAU,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AA8GF,QAAA,MAAM,KAAK,kDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/Modal.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	interface Props {
+		open?: boolean;
+		children?: import('svelte').Snippet;
+		onclose?: () => void;
+	}
+
+	let { open = $bindable(false), children, onclose }: Props = $props();
+
+	let dialog: HTMLDialogElement | undefined = $state();
+	let closing = false;
+
+	function doClose() {
+		dialog?.close();
+		// closing = true;
+		// const evt = (e: AnimationEvent) => {
+		// 	dialog.close();
+		// 	closing = false;
+		// 	dialog.removeEventListener('animationend', evt);
+		// };
+		// dialog.addEventListener('animationend', evt);
+	}
+	$effect(() => {
+		if (dialog && open && !dialog.open) dialog.showModal();
+	});
+	$effect(() => {
+		if (dialog && !open && dialog.open) doClose();
+	});
+</script>
+
+<dialog
+	class:closing
+	bind:this={dialog}
+	onclick={doClose}
+	onclose={() => {
+		open = false;
+		onclose?.();
+	}}
+	onkeypress={(e) => e.code === 'Escape' && doClose()}
+>
+	{@render children?.()}
+</dialog>
+
+<style>
+	dialog {
+		border: none;
+		background: none;
+		padding: 0;
+		animation: in 0.1s linear;
+		overflow: hidden;
+		width: 100%;
+		height: 100%;
+	}
+
+	dialog:modal {
+		max-width: 100%;
+		max-height: 100%;
+	}
+
+	dialog::backdrop {
+		background-color: #000a;
+		animation: in 0.1s linear;
+	}
+
+	dialog.closing,
+	dialog.closing::backdrop {
+		animation: out 0.1s linear;
+	}
+
+	@keyframes in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes out {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+		}
+	}
+</style>

package/dist/Modal.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    open?: boolean;
+    children?: import('svelte').Snippet;
+    onclose?: () => void;
+}
+declare const Modal: import("svelte").Component<Props, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;
+//# sourceMappingURL=Modal.svelte.d.ts.map

package/dist/Modal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Modal.svelte.ts"],"names":[],"mappings":"AAGC,UAAU,KAAK;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAsCF,QAAA,MAAM,KAAK,+CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/ModalGallery/Carousel.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { run, createBubbler, stopPropagation } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+	import Image from '../Image.svelte';
+	import type { ArtPiece } from '../util/art.js';
+
+	interface Props {
+		pieces: ArtPiece[];
+		selected: number | null;
+		browser: boolean;
+	}
+
+	let { pieces, selected = $bindable(), browser }: Props = $props();
+
+	let carouselScroller: HTMLDivElement | undefined = $state();
+
+	run(() => {
+		if (carouselScroller && selected !== null && browser) {
+			const width = browser
+				? parseInt(
+						getComputedStyle(document.documentElement).getPropertyValue('--carousel-height') ||
+							'100'
+					)
+				: 100;
+			carouselScroller.scroll({
+				left: Math.max(0, width * selected + width / 2 - window.innerWidth / 2),
+				behavior: 'smooth'
+			});
+		}
+	});
+</script>
+
+<div
+	style="height: var(--carousel-height); width: 100%; overflow: scroll;"
+	bind:this={carouselScroller}
+	onclick={stopPropagation(bubble('click'))}
+	onkeypress={stopPropagation(bubble('keypress'))}
+	role="button"
+	tabindex={-1}
+>
+	<div style="width: fit-content;">
+		<div style=" display: flex; flex-direction: row; align-items: end;">
+			{#each pieces as piece, j (piece.slug)}
+				<div
+					class="gallery-item"
+					onclick={() => (selected = j)}
+					onkeypress={() => (selected = j)}
+					class:selected={selected === j}
+					role="button"
+					tabindex={-1}
+				>
+					<Image picture={piece.image.thumbnail} alt={piece.alt} />
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.selected.gallery-item {
+		opacity: 1;
+	}
+	.gallery-item {
+		border: 1px solid #0008;
+		height: var(--carousel-height);
+		width: auto;
+		aspect-ratio: 1 / 1;
+		user-select: none;
+		cursor: pointer;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		opacity: 0.5;
+	}
+</style>

package/dist/ModalGallery/Carousel.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ArtPiece } from '../util/art.ts';
+interface Props {
+    pieces: ArtPiece[];
+    selected: number | null;
+    browser: boolean;
+}
+declare const Carousel: import("svelte").Component<Props, {}, "selected">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;
+//# sourceMappingURL=Carousel.svelte.d.ts.map

package/dist/ModalGallery/Carousel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/ModalGallery/Carousel.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG9C,UAAU,KAAK;IACd,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;CACjB;AA6CF,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}