@marianmeres/stuic 2.39.1 → 2.41.0

package/dist/components/AssetsPreview/AssetsPreview.svelte

@@ -0,0 +1,547 @@
+<script lang="ts" module>
+	import { iconBsFileEarmark } from "@marianmeres/icons-fns/bootstrap/iconBsFileEarmark.js";
+	import { iconBsFileEarmarkBinary } from "@marianmeres/icons-fns/bootstrap/iconBsFileEarmarkBinary.js";
+	import { iconBsFileEarmarkCode } from "@marianmeres/icons-fns/bootstrap/iconBsFileEarmarkCode.js";
+	import { iconBsFileEarmarkImage } from "@marianmeres/icons-fns/bootstrap/iconBsFileEarmarkImage.js";
+	import { iconBsFileEarmarkMusic } from "@marianmeres/icons-fns/bootstrap/iconBsFileEarmarkMusic.js";
+	import { iconBsFileEarmarkPdf } from "@marianmeres/icons-fns/bootstrap/iconBsFileEarmarkPdf.js";
+	import { iconBsFileEarmarkRichtext } from "@marianmeres/icons-fns/bootstrap/iconBsFileEarmarkRichtext.js";
+	import { iconBsFileEarmarkSlides } from "@marianmeres/icons-fns/bootstrap/iconBsFileEarmarkSlides.js";
+	import { iconBsFileEarmarkSpreadsheet } from "@marianmeres/icons-fns/bootstrap/iconBsFileEarmarkSpreadsheet.js";
+	import { iconBsFileEarmarkText } from "@marianmeres/icons-fns/bootstrap/iconBsFileEarmarkText.js";
+	import { iconBsFileEarmarkWord } from "@marianmeres/icons-fns/bootstrap/iconBsFileEarmarkWord.js";
+	import { iconBsFileEarmarkZip } from "@marianmeres/icons-fns/bootstrap/iconBsFileEarmarkZip.js";
+	import { iconFeatherArrowLeft as iconPrevious } from "@marianmeres/icons-fns/feather/iconFeatherArrowLeft.js";
+	import { iconFeatherArrowRight as iconNext } from "@marianmeres/icons-fns/feather/iconFeatherArrowRight.js";
+	import { iconFeatherDownload as iconDownload } from "@marianmeres/icons-fns/feather/iconFeatherDownload.js";
+	import { iconFeatherPlus as iconAdd } from "@marianmeres/icons-fns/feather/iconFeatherPlus.js";
+	import { iconFeatherTrash2 as iconDelete } from "@marianmeres/icons-fns/feather/iconFeatherTrash2.js";
+	import { iconFeatherZoomIn } from "@marianmeres/icons-fns/feather/iconFeatherZoomIn.js";
+	import { iconFeatherZoomOut } from "@marianmeres/icons-fns/feather/iconFeatherZoomOut.js";
+	import { getFileTypeLabel } from "../../utils/get-file-type-label.js";
+	import { Modal } from "../Modal/index.js";
+	import { createClog } from "@marianmeres/clog";
+	import { isImage } from "../../utils/is-image.js";
+	import { isPlainObject } from "../../utils/is-plain-object.js";
+	import { replaceMap } from "../../utils/replace-map.js";
+	import type { TranslateFn } from "../../types.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { forceDownload } from "../../utils/force-download.js";
+	import { tooltip } from "../../actions/index.js";
+	import { X } from "../X/index.js";
+	import { preloadImgs } from "../../utils/preload-img.js";
+	import { fade } from "svelte/transition";
+
+	export type AssetPreviewUrlObj = {
+		// o
+		thumb: string | URL;
+		// used in modal preview
+		full: string | URL;
+		// (potentially extra high res) used for download
+		original: string | URL;
+	};
+
+	export interface AssetPreview {
+		url: AssetPreviewUrlObj;
+		name?: string;
+		type?: string;
+	}
+
+	interface AssetPreviewNormalized extends AssetPreview {
+		name: string;
+		type: string;
+		ext: string;
+		isImage: boolean;
+	}
+
+	export interface Props {
+		assets: string[] | AssetPreview[];
+		classControls?: string;
+		/** Optional translate function */
+		t?: TranslateFn;
+		/** Optional delete handler - receives the current asset and its index */
+		onDelete?: (
+			asset: AssetPreview,
+			index: number,
+			controls: {
+				close: () => void;
+			}
+		) => void;
+	}
+
+	export function getAssetIcon(ext?: string) {
+		const map: Record<string, CallableFunction> = {
+			archive: iconBsFileEarmarkZip,
+			audio: iconBsFileEarmarkMusic,
+			binary: iconBsFileEarmarkBinary,
+			code: iconBsFileEarmarkCode,
+			doc: iconBsFileEarmarkWord,
+			image: iconBsFileEarmarkImage,
+			pdf: iconBsFileEarmarkPdf,
+			presentation: iconBsFileEarmarkSlides,
+			richtext: iconBsFileEarmarkRichtext,
+			spreadsheet: iconBsFileEarmarkSpreadsheet,
+			text: iconBsFileEarmarkText,
+			unknown: iconBsFileEarmark,
+		};
+		return map[getFileTypeLabel(ext ?? "unknown")] ?? iconBsFileEarmark;
+	}
+
+	// i18n ready
+	function t_default(
+		k: string,
+		values: false | null | undefined | Record<string, string | number> = null,
+		fallback: string | boolean = "",
+		i18nSpanWrap: boolean = true
+	) {
+		const m: Record<string, string> = {
+			unable_to_preview: "Unable to preview",
+			download: "Download",
+			close: "Close",
+			zoom_in: "Zoom in",
+			zoom_out: "Zoom out",
+			delete: "Delete",
+		};
+		let out = m[k] ?? fallback ?? k;
+
+		return isPlainObject(values) ? replaceMap(out, values as any) : out;
+	}
+
+	// naive best-effort
+	function ext(name: string): string {
+		const _ext = name.split(".").at(-1) ?? "";
+		return _ext ? `.${_ext}` : "";
+	}
+
+	function normalizeInput(input: string | AssetPreview): AssetPreviewNormalized | null {
+		const asset: AssetPreviewNormalized = {
+			name: "",
+			type: "",
+			url: { full: "", thumb: "", original: "" },
+			isImage: false,
+			ext: "",
+		};
+		if (typeof input === "string") {
+			asset.url.full = input;
+		} else {
+			// Handle AssetPreview object
+			asset.url = { ...input.url };
+			asset.name = input.name ?? "";
+			asset.type = input.type ?? "";
+		}
+
+		if (!asset.url.full) {
+			return null;
+		}
+
+		asset.url.full = new URL(
+			asset.url.full,
+			globalThis.location?.href ?? "http://placeholder"
+		);
+
+		// Use "full" also as "thumb" and "original", if not provided
+		asset.url.thumb ||= asset.url.full;
+		asset.url.original ||= asset.url.full;
+
+		// best-effort..
+		if (!asset.name) {
+			asset.name = asset.url.full.pathname.split("/").at(-1) ?? "";
+		}
+
+		// best-effort..
+		if (!asset.type) {
+			asset.type = getFileTypeLabel(ext(asset.name) ?? "unknown");
+		}
+
+		asset.ext = ext(asset.name);
+		asset.isImage = isImage(asset.ext);
+
+		return asset;
+	}
+</script>
+
+<script lang="ts">
+	const clog = createClog("AssetsPreview", { color: "auto" });
+
+	let { assets: _assets, t = t_default, classControls = "", onDelete }: Props = $props();
+
+	let assets: AssetPreviewNormalized[] = $derived(
+		(_assets ?? []).map(normalizeInput).filter(Boolean) as AssetPreviewNormalized[]
+	);
+	let previewIdx = $state<number>(0);
+	let modal: Modal | undefined = $state();
+	let dotTooltip: string | undefined = $state();
+
+	// Zoom state
+	const ZOOM_LEVELS = [1, 1.5, 2, 3, 4] as const;
+	let zoomLevelIdx = $state(0);
+	let zoomLevel = $derived(ZOOM_LEVELS[zoomLevelIdx]);
+
+	// Pan state
+	let isPanning = $state(false);
+	let panX = $state(0);
+	let panY = $state(0);
+	let startPanX = 0;
+	let startPanY = 0;
+	let startMouseX = 0;
+	let startMouseY = 0;
+
+	// Image and container dimensions for pan clamping
+	let imgEl: HTMLImageElement | null = null;
+	let containerEl: HTMLDivElement | null = $state(null);
+
+	const TOP_BUTTON_CLS = "rounded bg-white hover:bg-neutral-200 p-1";
+
+	$effect(() => {
+		const visible = modal?.visibility().visible;
+		if (visible) {
+			// Reset preview index on modal open
+			previewIdx = 0;
+
+			// perhaps we should have some upper limit here...
+			const toPreload = (assets ?? [])
+				.map((asset) => (asset.isImage ? String(asset.url.full) : ""))
+				.filter(Boolean);
+
+			clog.debug("going to (maybe) preload", toPreload);
+			preloadImgs(toPreload);
+		} else {
+			// Reset zoom when modal closes
+			resetZoom();
+		}
+	});
+
+	// Svelte action for pan event listeners - guaranteed to run when element is created
+	function pannable(node: HTMLImageElement) {
+		imgEl = node;
+		node.addEventListener("mousedown", panStart);
+		node.addEventListener("touchstart", panStart, { passive: false });
+
+		document.addEventListener("mousemove", panMove);
+		document.addEventListener("mouseup", panEnd);
+		document.addEventListener("touchmove", panMove, { passive: false });
+		document.addEventListener("touchend", panEnd);
+		document.addEventListener("touchcancel", panEnd);
+
+		return {
+			destroy() {
+				imgEl = null;
+				node.removeEventListener("mousedown", panStart);
+				node.removeEventListener("touchstart", panStart);
+				document.removeEventListener("mousemove", panMove);
+				document.removeEventListener("mouseup", panEnd);
+				document.removeEventListener("touchmove", panMove);
+				document.removeEventListener("touchend", panEnd);
+				document.removeEventListener("touchcancel", panEnd);
+			},
+		};
+	}
+
+	// Clamp pan values to keep image within bounds
+	function clampPan(newPanX: number, newPanY: number): { x: number; y: number } {
+		if (!imgEl || !containerEl) return { x: newPanX, y: newPanY };
+
+		const imgRect = imgEl.getBoundingClientRect();
+		const containerRect = containerEl.getBoundingClientRect();
+
+		// Calculate the scaled image dimensions
+		const scaledWidth = imgRect.width; // already includes transform scale
+		const scaledHeight = imgRect.height;
+
+		// Calculate max pan distance (how much the scaled image exceeds the container)
+		// Divide by zoomLevel because translate values are applied before scale in our transform
+		const maxPanX = Math.max(0, (scaledWidth - containerRect.width) / 2 / zoomLevel);
+		const maxPanY = Math.max(0, (scaledHeight - containerRect.height) / 2 / zoomLevel);
+
+		return {
+			x: Math.max(-maxPanX, Math.min(maxPanX, newPanX)),
+			y: Math.max(-maxPanY, Math.min(maxPanY, newPanY)),
+		};
+	}
+
+	// Zoom functions
+	function zoomIn() {
+		if (zoomLevelIdx < ZOOM_LEVELS.length - 1) {
+			zoomLevelIdx++;
+		}
+	}
+
+	function zoomOut() {
+		if (zoomLevelIdx > 0) {
+			zoomLevelIdx--;
+			// Reset pan when zooming out to 1x
+			if (zoomLevelIdx === 0) {
+				panX = 0;
+				panY = 0;
+			}
+		}
+	}
+
+	function resetZoom() {
+		zoomLevelIdx = 0;
+		panX = 0;
+		panY = 0;
+	}
+
+	// Pan/drag handlers
+	function panStart(e: MouseEvent | TouchEvent) {
+		if (zoomLevel <= 1) return;
+		e.preventDefault();
+		isPanning = true;
+
+		const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
+		const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
+
+		startMouseX = clientX;
+		startMouseY = clientY;
+		startPanX = panX;
+		startPanY = panY;
+	}
+
+	function panMove(e: MouseEvent | TouchEvent) {
+		if (!isPanning) return;
+		e.preventDefault();
+
+		const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
+		const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
+
+		const newPanX = startPanX + (clientX - startMouseX);
+		const newPanY = startPanY + (clientY - startMouseY);
+
+		const clamped = clampPan(newPanX, newPanY);
+		panX = clamped.x;
+		panY = clamped.y;
+	}
+
+	function panEnd() {
+		isPanning = false;
+	}
+
+	export function open(index?: number) {
+		if (typeof index === "number") {
+			previewIdx = index;
+		}
+		modal?.open();
+	}
+
+	export function close() {
+		modal?.close();
+	}
+
+	export function visibility() {
+		return (
+			modal?.visibility() ?? {
+				get visible() {
+					return false;
+				},
+			}
+		);
+	}
+
+	export function setOpener(opener?: null | HTMLElement) {
+		modal?.setOpener(opener);
+	}
+
+	function preview_previous() {
+		previewIdx = (previewIdx - 1 + assets.length) % assets.length;
+		resetZoom();
+	}
+
+	function preview_next() {
+		previewIdx = (previewIdx + 1) % assets.length;
+		resetZoom();
+	}
+
+	function preview(idx: number) {
+		previewIdx = idx % assets.length;
+	}
+
+	// $inspect(assets).with(clog);
+</script>
+
+<!-- this must be on window as we're catching any typing anywhere -->
+<svelte:window
+	onkeydown={(e) => {
+		if (modal?.visibility().visible) {
+			if (["ArrowRight"].includes(e.key)) {
+				preview_next();
+			} else if (["ArrowLeft"].includes(e.key)) {
+				preview_previous();
+			}
+		}
+	}}
+/>
+
+{#if assets.length}
+	<Modal
+		bind:this={modal}
+		onEscape={modal?.close}
+		classBackdrop="p-4 md:p-4"
+		classInner="max-w-full h-full"
+		class="max-h-full md:max-h-full rounded-lg"
+		classMain="flex items-center justify-center relative stuic-assets-preview stuic-assets-preview-open"
+	>
+		{@const previewAsset = assets?.[previewIdx]}
+		{#if previewAsset}
+			<!-- <pre>{JSON.stringify(previewAsset)}</pre> -->
+			{#if previewAsset.isImage}
+				<div
+					bind:this={containerEl}
+					class="w-full h-full overflow-hidden flex items-center justify-center"
+				>
+					<img
+						use:pannable
+						src={String(previewAsset.url.full)}
+						class="max-w-full max-h-full object-scale-down select-none"
+						class:cursor-grab={zoomLevel > 1 && !isPanning}
+						class:cursor-grabbing={isPanning}
+						alt={previewAsset?.name}
+						style:transform="scale({zoomLevel}) translate({panX / zoomLevel}px, {panY /
+							zoomLevel}px)"
+						style:transform-origin="center center"
+						draggable="false"
+					/>
+				</div>
+			{:else}
+				<div>
+					<div>
+						{@html getAssetIcon(previewAsset.ext)({
+							size: 32,
+							class: "mx-auto",
+						})}
+					</div>
+					<div class="opacity-50 mt-4">{t("unable_to_preview")}</div>
+				</div>
+			{/if}
+
+			{#if assets?.length > 1}
+				<div
+					class="absolute inset-0 flex items-center justify-between pointer-events-none"
+				>
+					<button
+						class={twMerge("p-4 pointer-events-auto", classControls)}
+						onclick={preview_previous}
+						type="button"
+					>
+						<span class="bg-white rounded-full p-3 block">
+							{@html iconPrevious()}
+						</span>
+					</button>
+
+					<button
+						class={twMerge("p-4 pointer-events-auto", classControls)}
+						onclick={preview_next}
+						type="button"
+					>
+						<span class="bg-white rounded-full p-3 block">
+							{@html iconNext()}
+						</span>
+					</button>
+				</div>
+			{/if}
+
+			<div class="absolute top-4 right-4 flex items-center space-x-3">
+				{#if previewAsset.isImage}
+					<button
+						class={twMerge(TOP_BUTTON_CLS, classControls)}
+						type="button"
+						onclick={zoomOut}
+						disabled={zoomLevelIdx === 0}
+						aria-label={t("zoom_out")}
+						use:tooltip
+					>
+						{@html iconFeatherZoomOut({ class: "size-6" })}
+					</button>
+
+					<button
+						class={twMerge(TOP_BUTTON_CLS, classControls)}
+						type="button"
+						onclick={zoomIn}
+						disabled={zoomLevelIdx === ZOOM_LEVELS.length - 1}
+						aria-label={t("zoom_in")}
+						use:tooltip
+					>
+						{@html iconFeatherZoomIn({ class: "size-6" })}
+					</button>
+				{/if}
+
+				{#if typeof onDelete === "function"}
+					<button
+						class={twMerge(TOP_BUTTON_CLS, classControls)}
+						type="button"
+						onclick={() => onDelete(previewAsset, previewIdx, { close })}
+						aria-label={t("delete")}
+						use:tooltip
+					>
+						{@html iconDelete({ class: "size-6" })}
+					</button>
+				{/if}
+
+				<button
+					class={twMerge(TOP_BUTTON_CLS, classControls)}
+					type="button"
+					onclick={(e) => {
+						e.preventDefault();
+						forceDownload(String(previewAsset.url.original), previewAsset?.name || "");
+					}}
+					aria-label={t("download")}
+					use:tooltip
+				>
+					{@html iconDownload({ class: "size-6" })}
+				</button>
+
+				<button
+					class={twMerge(TOP_BUTTON_CLS, classControls)}
+					onclick={modal?.close}
+					aria-label={t("close")}
+					type="button"
+					use:tooltip
+				>
+					<X />
+				</button>
+			</div>
+
+			{#if previewAsset?.name}
+				<span class="absolute top-4 left-4 bg-white px-1 rounded">
+					{previewAsset?.name}
+				</span>
+			{/if}
+
+			{#if assets.length > 1}
+				{#if dotTooltip}
+					<div
+						class="absolute bottom-10 left-0 right-0 text-center"
+						transition:fade={{ duration: 100 }}
+					>
+						<span class="bg-white p-1 rounded opacity/75">
+							{dotTooltip}
+						</span>
+					</div>
+				{/if}
+				<div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-3">
+					{#each assets as _, i}
+						<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+						<button
+							type="button"
+							class={twMerge(
+								"size-3 rounded-full transition-colors border border-black/50",
+								i === previewIdx ? "bg-white" : "bg-white/50 hover:bg-neutral-200"
+							)}
+							onclick={() => {
+								previewIdx = i;
+								resetZoom();
+							}}
+							aria-label={assets[i]?.name}
+							onmouseover={() => {
+								dotTooltip = assets[i]?.name;
+							}}
+							onmouseout={() => {
+								dotTooltip = undefined;
+							}}
+						></button>
+					{/each}
+				</div>
+			{/if}
+		{/if}
+	</Modal>
+{/if}

package/dist/components/AssetsPreview/AssetsPreview.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { TranslateFn } from "../../types.js";
+export type AssetPreviewUrlObj = {
+    thumb: string | URL;
+    full: string | URL;
+    original: string | URL;
+};
+export interface AssetPreview {
+    url: AssetPreviewUrlObj;
+    name?: string;
+    type?: string;
+}
+export interface Props {
+    assets: string[] | AssetPreview[];
+    classControls?: string;
+    /** Optional translate function */
+    t?: TranslateFn;
+    /** Optional delete handler - receives the current asset and its index */
+    onDelete?: (asset: AssetPreview, index: number, controls: {
+        close: () => void;
+    }) => void;
+}
+export declare function getAssetIcon(ext?: string): CallableFunction;
+declare const AssetsPreview: import("svelte").Component<Props, {
+    open: (index?: number) => void;
+    close: () => void;
+    visibility: () => {
+        readonly visible: boolean;
+    };
+    setOpener: (opener?: null | HTMLElement) => void;
+}, "">;
+type AssetsPreview = ReturnType<typeof AssetsPreview>;
+export default AssetsPreview;

package/dist/components/AssetsPreview/README.md

@@ -0,0 +1,166 @@
+# AssetsPreview
+
+A modal-based asset preview component for displaying images and files. Supports image zoom, pan/drag navigation, keyboard shortcuts, and multi-asset navigation with thumbnails.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `assets` | `string[] \| AssetPreview[]` | - | Array of assets to preview |
+| `classControls` | `string` | - | CSS for control buttons |
+| `t` | `TranslateFn` | built-in | Translation function for i18n |
+| `onDelete` | `(asset, index) => void` | - | Optional delete handler |
+
+## Types
+
+```typescript
+type AssetPreviewUrlObj = {
+  thumb: string | URL;    // Thumbnail URL
+  full: string | URL;     // Full resolution for preview
+  original: string | URL; // Original for download
+};
+
+interface AssetPreview {
+  url: AssetPreviewUrlObj;
+  name?: string;  // Display name
+  type?: string;  // MIME type or file type
+}
+```
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `open(index?)` | Open preview, optionally at specific asset index |
+| `close()` | Close preview |
+| `visibility()` | Returns object with `visible` getter |
+| `setOpener(el)` | Set element to refocus when closed |
+
+## Features
+
+- **Image zoom**: 5 zoom levels (1x, 1.5x, 2x, 3x, 4x)
+- **Pan/drag**: Click and drag to pan zoomed images
+- **Keyboard navigation**: Arrow keys for prev/next
+- **Touch support**: Touch gestures for pan
+- **Auto-preload**: Preloads full-resolution images when modal opens
+- **File type icons**: Displays appropriate icons for non-image files
+
+## Translation Keys
+
+| Key | Default |
+|-----|---------|
+| `unable_to_preview` | "Unable to preview" |
+| `download` | "Download" |
+| `close` | "Close" |
+| `zoom_in` | "Zoom in" |
+| `zoom_out` | "Zoom out" |
+| `delete` | "Delete" |
+
+## Usage
+
+### Basic Usage with Strings
+
+```svelte
+<script lang="ts">
+  import { AssetsPreview } from 'stuic';
+
+  let preview: AssetsPreview;
+  const images = [
+    '/images/photo1.jpg',
+    '/images/photo2.jpg',
+  ];
+</script>
+
+<button onclick={() => preview.open()}>View Images</button>
+
+<AssetsPreview bind:this={preview} assets={images} />
+```
+
+### With Full Asset Objects
+
+```svelte
+<script lang="ts">
+  import { AssetsPreview, type AssetPreview } from 'stuic';
+
+  let preview: AssetsPreview;
+
+  const assets: AssetPreview[] = [
+    {
+      url: {
+        thumb: '/images/photo1-thumb.jpg',
+        full: '/images/photo1-large.jpg',
+        original: '/images/photo1-original.jpg',
+      },
+      name: 'Vacation Photo',
+      type: 'image/jpeg',
+    },
+    {
+      url: {
+        thumb: '/docs/report-thumb.png',
+        full: '/docs/report.pdf',
+        original: '/docs/report.pdf',
+      },
+      name: 'Annual Report.pdf',
+      type: 'application/pdf',
+    },
+  ];
+</script>
+
+<AssetsPreview bind:this={preview} assets={assets} />
+```
+
+### Open at Specific Index
+
+```svelte
+<script lang="ts">
+  let preview: AssetsPreview;
+</script>
+
+{#each assets as asset, idx}
+  <button onclick={() => preview.open(idx)}>
+    <img src={asset.url.thumb} alt={asset.name} />
+  </button>
+{/each}
+
+<AssetsPreview bind:this={preview} {assets} />
+```
+
+### With Delete Handler
+
+```svelte
+<script lang="ts">
+  let assets = $state([...initialAssets]);
+  let preview: AssetsPreview;
+
+  function handleDelete(asset: AssetPreview, index: number) {
+    assets.splice(index, 1);
+    assets = assets; // trigger reactivity
+  }
+</script>
+
+<AssetsPreview
+  bind:this={preview}
+  {assets}
+  onDelete={handleDelete}
+/>
+```
+
+### With Custom Translations
+
+```svelte
+<script lang="ts">
+  const t = (key: string) => {
+    const translations: Record<string, string> = {
+      'unable_to_preview': 'Vorschau nicht verfügbar',
+      'download': 'Herunterladen',
+      'close': 'Schließen',
+      'zoom_in': 'Vergrößern',
+      'zoom_out': 'Verkleinern',
+      'delete': 'Löschen',
+    };
+    return translations[key] ?? key;
+  };
+</script>
+
+<AssetsPreview bind:this={preview} {assets} {t} />
+```

package/dist/components/AssetsPreview/index.d.ts

@@ -0,0 +1 @@
+export { default as AssetsPreview, type Props as AssetsPreviewProps, type AssetPreview, type AssetPreviewUrlObj, } from "./AssetsPreview.svelte";

package/dist/components/AssetsPreview/index.js

@@ -0,0 +1 @@
+export { default as AssetsPreview, } from "./AssetsPreview.svelte";

package/dist/components/Input/FieldAssets.svelte

@@ -12,11 +12,7 @@
 	import { iconBsFileEarmarkText } from "@marianmeres/icons-fns/bootstrap/iconBsFileEarmarkText.js";
 	import { iconBsFileEarmarkWord } from "@marianmeres/icons-fns/bootstrap/iconBsFileEarmarkWord.js";
 	import { iconBsFileEarmarkZip } from "@marianmeres/icons-fns/bootstrap/iconBsFileEarmarkZip.js";
-	import { iconFeatherArrowLeft as iconPrevious } from "@marianmeres/icons-fns/feather/iconFeatherArrowLeft.js";
-	import { iconFeatherArrowRight as iconNext } from "@marianmeres/icons-fns/feather/iconFeatherArrowRight.js";
-	import { iconFeatherDownload as iconDownload } from "@marianmeres/icons-fns/feather/iconFeatherDownload.js";
 	import { iconFeatherPlus as iconAdd } from "@marianmeres/icons-fns/feather/iconFeatherPlus.js";
-	import { iconFeatherTrash2 as iconDelete } from "@marianmeres/icons-fns/feather/iconFeatherTrash2.js";
 	import { onDestroy, type Snippet } from "svelte";
 	import { fileDropzone } from "../../actions/file-dropzone.svelte.js";
 	import { highlightDragover } from "../../actions/highlight-dragover.svelte.js";
@@ -27,20 +23,17 @@
 		type ValidationResult,
 	} from "../../actions/validate.svelte.js";
 	import type { TranslateFn } from "../../types.js";
-	import { forceDownload } from "../../utils/force-download.js";
 	import { getFileTypeLabel } from "../../utils/get-file-type-label.js";
 	import { getId } from "../../utils/get-id.js";
 	import { isImage } from "../../utils/is-image.js";
 	import { isPlainObject } from "../../utils/is-plain-object.js";
-	import { preloadImgs } from "../../utils/preload-img.js";
 	import { replaceMap } from "../../utils/replace-map.js";
 	import { twMerge } from "../../utils/tw-merge.js";
+	import { AssetsPreview } from "../AssetsPreview/index.js";
 	import Circle from "../Circle/Circle.svelte";
-	import { Modal } from "../Modal/index.js";
 	import { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 	import SpinnerCircleOscillate from "../Spinner/SpinnerCircleOscillate.svelte";
 	import { isTHCNotEmpty, type THC } from "../Thc/Thc.svelte";
-	import { X } from "../X/index.js";
 	import InputWrap from "./_internal/InputWrap.svelte";
 
 	const clog = createClog("FieldAssets");
@@ -256,8 +249,7 @@
 	let parentHiddenInputEl: HTMLInputElement | undefined = $state();
 	let hasLabel = $derived(isTHCNotEmpty(label) || typeof label === "function");
 	let inputEl = $state<HTMLInputElement>()!;
-	let modal: Modal = $state()!;
-	let previewIdx = $state<number>(-1);
+	let assetsPreview: AssetsPreview = $state()!;
 
 	let assets: FieldAsset[] = $derived(parseValue(value));
 	// $inspect("assets", assets);
@@ -269,7 +261,7 @@
 	// $inspect("progress", progress);
 
 	$effect(() => {
-		if (!assets?.length) modal?.close?.();
+		if (!assets?.length) assetsPreview?.close?.();
 	});
 
 	//
@@ -317,16 +309,6 @@
 		notifications?.info(t("deleted", { name }));
 	}
 
-	function preview_previous() {
-		previewIdx = (previewIdx - 1 + assets.length) % assets.length;
-	}
-
-	function preview_next() {
-		previewIdx = (previewIdx + 1) % assets.length;
-	}
-
-	const TOP_BUTTON_CLS = "rounded bg-white hover:bg-neutral-200 p-1";
-
 	onDestroy(() => {
 		try {
 			assets.forEach((a) => {
@@ -341,39 +323,8 @@
 		}
 	});
 
-	// cosmetic side effect - once the modal is open we want to preload all "full" resolutions
-	// so the navigation feels more instant
-	$effect(() => {
-		if (modal.visibility().visible) {
-			// perhaps we should have some upper limit here...
-			const toPreload = (assets ?? [])
-				.map((asset) => {
-					const url = asset_urls(asset);
-					return isImage(asset.type ?? url.full) && !url.full.startsWith("blob:")
-						? url.full
-						: "";
-				})
-				.filter(Boolean);
-
-			clog.debug("going to (maybe) preload", toPreload);
-			preloadImgs(toPreload);
-		}
-	});
 </script>
 
-<!-- this must be on window as we're catching any typing anywhere -->
-<svelte:window
-	onkeydown={(e) => {
-		if (modal.visibility().visible) {
-			if (["ArrowRight"].includes(e.key)) {
-				preview_next();
-			} else if (["ArrowLeft"].includes(e.key)) {
-				preview_previous();
-			}
-		}
-	}}
-/>
-
 {#snippet default_render()}
 	{#if isLoading}
 		<div class="p-2 pl-8 flex items-center justify-center min-h-24">
@@ -390,8 +341,7 @@
 						onclick={(e) => {
 							e.stopPropagation();
 							e.preventDefault();
-							previewIdx = idx;
-							modal.open();
+							assetsPreview.open(idx);
 						}}
 						type="button"
 					>
@@ -562,102 +512,23 @@
 <!-- hack to be able to validate the conventional way -->
 <input type="hidden" {name} {value} use:validateAction={() => wrappedValidate} />
 
-<Modal
-	bind:this={modal}
-	onEscape={modal?.close}
-	classBackdrop="p-4 md:p-4"
-	classInner="max-w-full h-full"
-	class="max-h-full md:max-h-full"
-	classMain="flex items-center justify-center relative stuic-field-assets stuic-field-assets-open"
->
-	{@const previewAsset = assets?.[previewIdx]}
-	{#if previewAsset}
-		{@const url = asset_urls(previewAsset!)}
-		{@const _is_img = isImage(previewAsset!.type ?? url.thumb)}
-		{#if _is_img}
-			<img
-				src={url.full}
-				class="w-full h-full object-scale-down"
-				alt={previewAsset?.name}
-			/>
-		{:else}
-			<div>
-				<div>
-					{@html getAssetIcon((previewAsset?.name ?? "").split(".").at(-1))({
-						size: 32,
-						class: "mx-auto",
-					})}
-				</div>
-				<div class="opacity-50 mt-4 text-sm">{t("unable_to_preview")}</div>
-			</div>
-		{/if}
-
-		{#if assets?.length > 1}
-			<div class={["absolute inset-0 flex items-center justify-between"]}>
-				<button
-					class={twMerge("p-4", classControls)}
-					onclick={preview_previous}
-					type="button"
-				>
-					<span class="bg-white rounded-full p-3 block">
-						{@html iconPrevious()}
-					</span>
-				</button>
-
-				<button
-					class={twMerge("p-4", classControls)}
-					onclick={preview_next}
-					type="button"
-				>
-					<span class="bg-white rounded-full p-3 block">
-						{@html iconNext()}
-					</span>
-				</button>
-			</div>
-		{/if}
-
-		<!--  bg-white rounded-md p-2 -->
-		<div class="absolute top-4 right-4 flex items-center space-x-3">
-			<button
-				class={twMerge(TOP_BUTTON_CLS, classControls)}
-				onclick={(e) => {
-					e.preventDefault();
-					remove_by_idx(previewIdx);
-					previewIdx = previewIdx % assets.length; // important
-				}}
-				type="button"
-				aria-label={t("delete")}
-				use:tooltip
-			>
-				{@html iconDelete({ class: "size-6" })}
-			</button>
-			<button
-				class={twMerge(TOP_BUTTON_CLS, classControls)}
-				type="button"
-				onclick={(e) => {
-					e.preventDefault();
-					forceDownload(url.original ?? url.full, previewAsset?.name || "");
-				}}
-				aria-label={t("download")}
-				use:tooltip
-			>
-				{@html iconDownload({ class: "size-6" })}
-			</button>
-			<button
-				class={twMerge(TOP_BUTTON_CLS, classControls)}
-				onclick={modal.close}
-				aria-label={t("close")}
-				type="button"
-				use:tooltip
-			>
-				<X />
-			</button>
-		</div>
-
-		{#if previewAsset?.name}
-			<span class="absolute top-4 left-4 bg-white px-1 text-sm rounded">
-				{previewAsset?.name}
-			</span>
-		{/if}
-	{/if}
-</Modal>
+<AssetsPreview
+	bind:this={assetsPreview}
+	assets={assets.map((a) => {
+		const urls = asset_urls(a);
+		return {
+			url: {
+				thumb: urls.thumb,
+				full: urls.full,
+				original: urls.original ?? urls.full,
+			},
+			name: a.name,
+			type: a.type,
+		};
+	})}
+	{t}
+	{classControls}
+	onDelete={(_, index) => {
+		remove_by_idx(index);
+	}}
+/>

package/dist/components/X/X.svelte

@@ -8,7 +8,7 @@
 <script lang="ts">
 	import { twMerge } from "../../index.js";
 
-	let { class: classProps, strokeWidth = 2 }: Props = $props();
+	let { class: classProps, strokeWidth = 2.5 }: Props = $props();
 
 	// size-6 = 1.5rem = 24px
 </script>

package/dist/index.d.ts

@@ -24,6 +24,7 @@
 export * from "./components/AlertConfirmPrompt/index.js";
 export * from "./components/AnimatedElipsis/index.js";
 export * from "./components/AppShell/index.js";
+export * from "./components/AssetsPreview/index.js";
 export * from "./components/AvatarInitials/index.js";
 export * from "./components/Backdrop/index.js";
 export * from "./components/Button/index.js";

package/dist/index.js

@@ -25,6 +25,7 @@
 export * from "./components/AlertConfirmPrompt/index.js";
 export * from "./components/AnimatedElipsis/index.js";
 export * from "./components/AppShell/index.js";
+export * from "./components/AssetsPreview/index.js";
 export * from "./components/AvatarInitials/index.js";
 export * from "./components/Backdrop/index.js";
 export * from "./components/Button/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.39.1",
+  "version": "2.41.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",