@joewinke/jatui 0.22.0 → 0.24.0

package/dist/components/InputDialog.svelte

@@ -23,7 +23,10 @@
 	function handleSubmit() {
 		if (opts?.validate) {
 			const msg = opts.validate(value);
-			if (msg !== null) { error = msg; return; }
+			if (msg !== null) {
+				error = msg;
+				return;
+			}
 		}
 		error = null;
 		submitInput(value);
@@ -80,7 +83,6 @@
 			<input
 				bind:this={inputRef}
 				bind:value
-				oninput={() => { if (error) error = null; }}
 				type="text"
 				class="id-input"
 				class:id-input-error={error !== null}
@@ -88,7 +90,10 @@
 				maxlength={opts.maxLength}
 				autocomplete="off"
 				spellcheck="false"
+				oninput={() => { if (error) error = null; }}
 			/>
+
+			<!-- Error / char count -->
 			{#if error !== null || opts.maxLength}
 				<div class="id-field-footer">
 					{#if error !== null}
@@ -127,10 +132,15 @@
 {/if}
 
 <style>
+	/* Theme tokens (jatui-is2ow.3): every colour derives from var(--color-*) —
+	   relative-color `oklch(from var(--x) l c h / a)` keeps the token's hue/chroma
+	   and only swaps alpha, so light and dark themes both render correctly.
+	   --n-00 (pure black) is a jat-IDE neutral; the inline fallback keeps
+	   standalone consumers (no app.css) rendering the same value. */
 	.id-scrim {
 		position: fixed;
 		inset: 0;
-		background: oklch(0 0 0 / 0.45);
+		background: oklch(from var(--n-00, oklch(0 0 0)) l c h / 0.45);
 		z-index: 9991;
 		backdrop-filter: blur(2px);
 	}
@@ -151,12 +161,12 @@
 		flex-direction: column;
 		gap: 0.625rem;
 		padding: 1rem 1.125rem 0.625rem;
-		background: oklch(0.17 0.02 250 / 0.98);
-		border: 1px solid oklch(0.32 0.03 250);
+		background: oklch(from var(--color-base-200) l c h / 98%);
+		border: 1px solid var(--color-base-100);
 		border-radius: 0.875rem;
 		box-shadow:
-			0 20px 60px oklch(0 0 0 / 0.55),
-			0 0 0 1px oklch(0.28 0.03 250 / 0.5);
+			0 20px 60px oklch(from var(--n-00, oklch(0 0 0)) l c h / 0.55),
+			0 0 0 1px oklch(from var(--color-base-100) l c h / 50%);
 		backdrop-filter: blur(16px);
 	}
 
@@ -174,9 +184,9 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: oklch(0.30 0.06 200 / 0.35);
-		border: 1px solid oklch(0.45 0.10 200 / 0.4);
-		color: oklch(0.75 0.12 200);
+		background: color-mix(in oklch, var(--color-info) 20%, transparent);
+		border: 1px solid color-mix(in oklch, var(--color-info) 30%, transparent);
+		color: var(--color-info);
 	}
 
 	.id-icon svg {
@@ -196,14 +206,14 @@
 		margin: 0;
 		font-size: 0.9375rem;
 		font-weight: 600;
-		color: oklch(0.92 0.04 250);
+		color: var(--color-base-content);
 		line-height: 1.3;
 	}
 
 	.id-body {
 		margin: 0;
 		font-size: 0.8rem;
-		color: oklch(0.60 0.03 250);
+		color: oklch(from var(--color-base-content) l c h / 70%);
 		line-height: 1.5;
 	}
 
@@ -211,51 +221,52 @@
 		width: 100%;
 		padding: 0.4375rem 0.75rem;
 		font-size: 0.875rem;
-		background: oklch(0.13 0.02 250);
-		border: 1px solid oklch(0.32 0.03 250);
+		background: var(--color-base-300);
+		border: 1px solid var(--color-base-100);
 		border-radius: 0.5rem;
-		color: oklch(0.92 0.04 250);
+		color: var(--color-base-content);
 		outline: none;
 		transition: border-color 0.1s ease;
 		box-sizing: border-box;
 	}
 
 	.id-input::placeholder {
-		color: oklch(0.45 0.03 250);
+		color: oklch(from var(--color-base-content) l c h / 50%);
 	}
 
 	.id-input:focus {
-		border-color: oklch(0.55 0.12 250);
-		box-shadow: 0 0 0 2px oklch(0.55 0.12 250 / 0.2);
+		border-color: var(--color-primary);
+		box-shadow: 0 0 0 2px oklch(from var(--color-primary) l c h / 20%);
+	}
+
+	.id-input-error {
+		border-color: var(--color-error);
 	}
 
-	.id-input-error,
 	.id-input-error:focus {
-		border-color: oklch(0.55 0.20 25);
-		box-shadow: 0 0 0 2px oklch(0.55 0.20 25 / 0.2);
+		border-color: var(--color-error);
+		box-shadow: 0 0 0 2px oklch(from var(--color-error) l c h / 20%);
 	}
 
 	.id-field-footer {
 		display: flex;
-		align-items: center;
 		justify-content: space-between;
+		align-items: flex-start;
 		gap: 0.5rem;
 		margin-top: -0.125rem;
-		min-height: 1rem;
 	}
 
 	.id-error {
 		margin: 0;
 		font-size: 0.75rem;
-		color: oklch(0.65 0.18 25);
+		color: var(--color-error);
 		line-height: 1.4;
 	}
 
 	.id-char-count {
 		margin-left: auto;
 		font-size: 0.75rem;
-		color: oklch(0.50 0.03 250);
-		font-variant-numeric: tabular-nums;
+		color: oklch(from var(--color-base-content) l c h / 55%);
 		white-space: nowrap;
 		flex-shrink: 0;
 	}
@@ -277,34 +288,34 @@
 		border-radius: 0.5rem;
 		border: 1px solid transparent;
 		background: transparent;
-		color: oklch(0.80 0.04 250);
+		color: oklch(from var(--color-base-content) l c h / 95%);
 		cursor: pointer;
 		transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
 		white-space: nowrap;
 	}
 
 	.id-btn:hover {
-		background: oklch(0.24 0.03 250);
-		border-color: oklch(0.32 0.04 250);
+		background: var(--color-base-100);
+		border-color: var(--color-base-100);
 	}
 
 	.id-btn-cancel:focus-visible {
-		outline: 2px solid oklch(0.60 0.10 250);
+		outline: 2px solid var(--color-primary);
 		outline-offset: 2px;
 	}
 
 	.id-btn-confirm {
-		background: oklch(0.28 0.04 250 / 0.6);
-		border-color: oklch(0.40 0.05 250);
+		background: oklch(from var(--color-base-100) l c h / 60%);
+		border-color: oklch(from var(--color-base-content) l c h / 25%);
 	}
 
 	.id-btn-confirm:hover {
-		background: oklch(0.34 0.06 250);
-		border-color: oklch(0.50 0.08 250);
+		background: color-mix(in oklch, var(--color-primary) 20%, var(--color-base-300));
+		border-color: color-mix(in oklch, var(--color-primary) 40%, transparent);
 	}
 
 	.id-btn-confirm:focus-visible {
-		outline: 2px solid oklch(0.60 0.10 250);
+		outline: 2px solid var(--color-primary);
 		outline-offset: 2px;
 	}
 
@@ -312,11 +323,11 @@
 		font-family: ui-monospace, monospace;
 		font-size: 0.65rem;
 		padding: 0.0625rem 0.3125rem;
-		background: oklch(0.22 0.02 250);
-		border: 1px solid oklch(0.30 0.03 250);
+		background: var(--color-base-100);
+		border: 1px solid var(--color-base-100);
 		border-bottom-width: 2px;
 		border-radius: 0.25rem;
-		color: oklch(0.75 0.04 250);
+		color: oklch(from var(--color-base-content) l c h / 85%);
 		line-height: 1.6;
 	}
 

package/dist/components/KeyboardShortcutsOverlay.svelte

@@ -15,7 +15,33 @@
 	 *     { key: 'k / ↑', description: 'Focus previous item' },
 	 *     { key: 'Enter', description: 'Open detail' },
 	 *   ]} />
+	 *
+	 * Or feed it from a shortcut registry (createShortcutRegistry) — the
+	 * overlay lists whatever can fire right now, grouped by context, and
+	 * pushes a modal context while open so page shortcuts don't fire behind it:
+	 *
+	 *   <KeyboardShortcutsOverlay {registry} />
+	 *
+	 * Precedence: `sections` > `registry` > `shortcuts`. The overlay owns `?` —
+	 * don't register it in the registry too.
+	 *
+	 * App-specific sections (marks, list motions, cockpit panels…) that the
+	 * overlay itself doesn't know about come in via `extraSections` — they
+	 * render after the primary content, before the meta rows, in EVERY mode:
+	 *
+	 *   <KeyboardShortcutsOverlay {registry} extraSections={[
+	 *     { title: 'Marks & jumps (Vim)', shortcuts: [{ key: "m{a-z}", description: 'Drop a mark' }] },
+	 *   ]} />
+	 *
+	 * For content the section renderer can't express, an `extra` snippet is
+	 * rendered last (just above the meta rows):
+	 *
+	 *   <KeyboardShortcutsOverlay {registry}>
+	 *     {#snippet extra()}<div>…custom footer…</div>{/snippet}
+	 *   </KeyboardShortcutsOverlay>
 	 */
+	import type { Snippet } from 'svelte';
+	import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 
 	export interface KeyboardShortcut {
 		key: string;
@@ -37,6 +63,9 @@
 	let {
 		shortcuts = [],
 		sections,
+		registry,
+		extraSections,
+		extra,
 		title = 'Keyboard Shortcuts',
 		open = $bindable(false)
 	}: {
@@ -47,6 +76,25 @@
 		 * precedence over the flat `shortcuts` prop.
 		 */
 		sections?: ShortcutSection[];
+		/**
+		 * Shortcut registry to read sections from (active contexts, top of
+		 * the stack first). Ignored when `sections` is given.
+		 */
+		registry?: ShortcutRegistry;
+		/**
+		 * Extra app-provided sections (e.g. marks, list motions, cockpit
+		 * panels) appended after the primary content and before the meta
+		 * rows, regardless of whether the primary content came from
+		 * `sections`, `registry` or the flat `shortcuts` list. Same shape
+		 * as `sections`, with per-key `color` tinting supported.
+		 */
+		extraSections?: ShortcutSection[];
+		/**
+		 * Fully custom footer content, rendered after `extraSections` and
+		 * just above the built-in meta rows. Use when the section renderer
+		 * (title + key/description rows) can't express the markup.
+		 */
+		extra?: Snippet;
 		title?: string;
 		open?: boolean;
 	} = $props();
@@ -60,6 +108,19 @@
 		open = isOpen;
 	});
 
+	// Registry sections are snapshotted on open — BEFORE pushing the overlay's
+	// own modal context, which would otherwise hide every page context.
+	let registrySections = $state<ShortcutSection[] | null>(null);
+	$effect(() => {
+		if (!isOpen || !registry) return;
+		registrySections = registry.toSections();
+		return registry.pushContext('keyboard-shortcuts-overlay', { modal: true });
+	});
+
+	const shownSections = $derived(
+		sections && sections.length > 0 ? sections : registry ? registrySections : null
+	);
+
 	// Track which key label is currently depressed
 	let depressedKey = $state<string | null>(null);
 	let depressTimer: ReturnType<typeof setTimeout> | null = null;
@@ -104,7 +165,15 @@
 		if (!pressed) return false;
 		// Match single-char labels directly
 		const parts = keyLabel.split(/\s*\/\s*/);
-		return parts.some(p => p.trim() === pressed || p.trim().toLowerCase() === pressed.toLowerCase());
+		const p = pressed.toLowerCase();
+		return parts.some((part) => {
+			const t = part.trim();
+			if (t === pressed || t.toLowerCase() === p) return true;
+			// Combo labels ("Ctrl+K", "⇧⌘K") — match on the key itself.
+			const base = (t.length > 1 && t.includes('+') ? t.slice(t.lastIndexOf('+', t.length - 2) + 1) : t)
+				.replace(/^[⌃⌥⇧⌘]+/, '');
+			return base !== t && base.toLowerCase() === p;
+		});
 	}
 
 	$effect(() => {
@@ -143,8 +212,8 @@
 				</button>
 			</div>
 			<div class="kso-list">
-				{#if sections && sections.length > 0}
-					{#each sections as section, sIdx (section.title + '::' + sIdx)}
+				{#if shownSections && shownSections.length > 0}
+					{#each shownSections as section, sIdx (section.title + '::' + sIdx)}
 						<div class="kso-section-title">{section.title}</div>
 						{#each section.shortcuts as { key, description, color }, i (section.title + '::' + key + '::' + i)}
 							<div class="kso-row">
@@ -172,6 +241,28 @@
 						</div>
 					{/each}
 				{/if}
+				{#if extraSections}
+					{#each extraSections as section, sIdx (section.title + '::extra::' + sIdx)}
+						<div class="kso-section-title">{section.title}</div>
+						{#each section.shortcuts as { key, description, color }, i (section.title + '::extra::' + key + '::' + i)}
+							<div class="kso-row">
+								<kbd
+									class="kso-key"
+									class:kso-key-pressed={keyMatchesPressed(key, depressedKey)}
+									style={color
+										? `color:${color};border-color:color-mix(in oklch,${color} 50%,oklch(0.35 0.02 250));background:color-mix(in oklch,${color} 12%,oklch(0.25 0.02 250))`
+										: ''}
+								>
+									{key}
+								</kbd>
+								<span class="kso-description">{description}</span>
+							</div>
+						{/each}
+					{/each}
+				{/if}
+				{#if extra}
+					{@render extra()}
+				{/if}
 				<div class="kso-row kso-row-meta">
 					<kbd class="kso-key" class:kso-key-pressed={keyMatchesPressed('?', depressedKey)}>?</kbd>
 					<span class="kso-description">Toggle this overlay</span>

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

@@ -1,20 +1,46 @@
 /**
- * KeyboardShortcutsOverlay — press `?` to toggle a modal listing the
- * keyboard shortcuts available on the current page. Press `?` again or
- * `Escape` to dismiss. Input/contenteditable fields and Ctrl/Meta/Alt
- * combos are ignored so the shortcut never interferes with typing.
- *
- * While open, physical keydown events depress the matching on-screen keycap
- * with a brief translateY(1px) + tint (var(--motion-instant)).
- *
- * Usage:
- *
- *   <KeyboardShortcutsOverlay shortcuts={[
- *     { key: 'j / ↓', description: 'Focus next item' },
- *     { key: 'k / ↑', description: 'Focus previous item' },
- *     { key: 'Enter', description: 'Open detail' },
- *   ]} />
- */
+     * KeyboardShortcutsOverlay — press `?` to toggle a modal listing the
+     * keyboard shortcuts available on the current page. Press `?` again or
+     * `Escape` to dismiss. Input/contenteditable fields and Ctrl/Meta/Alt
+     * combos are ignored so the shortcut never interferes with typing.
+     *
+     * While open, physical keydown events depress the matching on-screen keycap
+     * with a brief translateY(1px) + tint (var(--motion-instant)).
+     *
+     * Usage:
+     *
+     *   <KeyboardShortcutsOverlay shortcuts={[
+     *     { key: 'j / ↓', description: 'Focus next item' },
+     *     { key: 'k / ↑', description: 'Focus previous item' },
+     *     { key: 'Enter', description: 'Open detail' },
+     *   ]} />
+     *
+     * Or feed it from a shortcut registry (createShortcutRegistry) — the
+     * overlay lists whatever can fire right now, grouped by context, and
+     * pushes a modal context while open so page shortcuts don't fire behind it:
+     *
+     *   <KeyboardShortcutsOverlay {registry} />
+     *
+     * Precedence: `sections` > `registry` > `shortcuts`. The overlay owns `?` —
+     * don't register it in the registry too.
+     *
+     * App-specific sections (marks, list motions, cockpit panels…) that the
+     * overlay itself doesn't know about come in via `extraSections` — they
+     * render after the primary content, before the meta rows, in EVERY mode:
+     *
+     *   <KeyboardShortcutsOverlay {registry} extraSections={[
+     *     { title: 'Marks & jumps (Vim)', shortcuts: [{ key: "m{a-z}", description: 'Drop a mark' }] },
+     *   ]} />
+     *
+     * For content the section renderer can't express, an `extra` snippet is
+     * rendered last (just above the meta rows):
+     *
+     *   <KeyboardShortcutsOverlay {registry}>
+     *     {#snippet extra()}<div>…custom footer…</div>{/snippet}
+     *   </KeyboardShortcutsOverlay>
+     */
+import type { Snippet } from 'svelte';
+import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 export interface KeyboardShortcut {
     key: string;
     description: string;
@@ -37,6 +63,25 @@ type $$ComponentProps = {
      * precedence over the flat `shortcuts` prop.
      */
     sections?: ShortcutSection[];
+    /**
+     * Shortcut registry to read sections from (active contexts, top of
+     * the stack first). Ignored when `sections` is given.
+     */
+    registry?: ShortcutRegistry;
+    /**
+     * Extra app-provided sections (e.g. marks, list motions, cockpit
+     * panels) appended after the primary content and before the meta
+     * rows, regardless of whether the primary content came from
+     * `sections`, `registry` or the flat `shortcuts` list. Same shape
+     * as `sections`, with per-key `color` tinting supported.
+     */
+    extraSections?: ShortcutSection[];
+    /**
+     * Fully custom footer content, rendered after `extraSections` and
+     * just above the built-in meta rows. Use when the section renderer
+     * (title + key/description rows) can't express the markup.
+     */
+    extra?: Snippet;
     title?: string;
     open?: boolean;
 };

package/dist/components/MediaCaptureIcon.svelte

@@ -21,6 +21,8 @@
 			| 'trash'
 			| 'plus'
 			| 'type'
+			| 'pause'
+			| 'play'
 		size?: number
 		class?: string
 	} = $props()
@@ -83,6 +85,27 @@
 	>
 		<rect width="18" height="18" x="3" y="3" rx="2" />
 	</svg>
+{:else if name === 'pause'}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="currentColor"
+		class={className}
+	>
+		<rect x="6" y="4" width="4" height="16" rx="1" />
+		<rect x="14" y="4" width="4" height="16" rx="1" />
+	</svg>
+{:else if name === 'play'}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="currentColor"
+		class={className}
+	>
+		<path d="M8 5.14v13.72a1 1 0 0 0 1.5.87l11-6.86a1 1 0 0 0 0-1.74l-11-6.86a1 1 0 0 0-1.5.87Z" />
+	</svg>
 {:else if name === 'loader'}
 	<svg
 		width={size}

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

@@ -1,5 +1,5 @@
 type $$ComponentProps = {
-    name: 'mic' | 'video' | 'monitor' | 'square' | 'loader' | 'x' | 'file' | 'trash' | 'plus' | 'type';
+    name: 'mic' | 'video' | 'monitor' | 'square' | 'loader' | 'x' | 'file' | 'trash' | 'plus' | 'type' | 'pause' | 'play';
     size?: number;
     class?: string;
 };

package/dist/components/ThumbnailGrid.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * Generic thumbnail item — the decoupled chimaro shape. Unlike chimaro's
+	 * UnifiedMediaItem this carries only what a thumbnail needs; callers with
+	 * richer records pass a projection ({ id, url, alt }) or render a `cell`
+	 * snippet for full control.
+	 */
+	export interface ThumbnailItem {
+		id: string;
+		/** Image URL; when absent the alt text renders as a text tile. */
+		url?: string | null;
+		/** Alt text / display label. */
+		alt: string;
+	}
+
+	interface Props {
+		items: ThumbnailItem[];
+		/** How many thumbnails to show before collapsing the rest into a +N counter. Default 8. */
+		max?: number;
+		/** Tile size. Default 'md'. */
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		/** Show remove (×) buttons on hover; requires `onRemove`. */
+		removable?: boolean;
+		/** Show the dashed add tile at the end; requires `onAdd`. */
+		addable?: boolean;
+		/** Tooltip / aria-label for the add tile. Default 'Add items'. */
+		addLabel?: string;
+		/** Fired when a thumbnail is clicked. */
+		onSelect?: (item: ThumbnailItem) => void;
+		/** Fired when a remove (×) button is clicked. */
+		onRemove?: (item: ThumbnailItem) => void;
+		/** Fired when the add tile is clicked. */
+		onAdd?: () => void;
+		/**
+		 * Replace the default image/text tile rendering for each item — e.g. a
+		 * video poster, an initials avatar, a FileThumbnail. The snippet renders
+		 * inside the clickable tile, so it should fill it (`h-full w-full`).
+		 */
+		cell?: Snippet<[ThumbnailItem]>;
+	}
+
+	let {
+		items,
+		max = 8,
+		size = 'md',
+		removable = false,
+		addable = false,
+		addLabel = 'Add items',
+		onSelect,
+		onRemove,
+		onAdd,
+		cell
+	}: Props = $props();
+
+	const sizeClasses: Record<NonNullable<Props['size']>, string> = {
+		xs: 'h-8 w-8',
+		sm: 'h-12 w-12',
+		md: 'h-16 w-16',
+		lg: 'h-20 w-20'
+	};
+
+	const visible = $derived(items.slice(0, max));
+	const overflow = $derived(Math.max(0, items.length - max));
+
+	function shortLabel(alt: string): string {
+		return alt.length > 14 ? `${alt.slice(0, 14)}…` : alt;
+	}
+</script>
+
+<div class="flex flex-wrap items-center gap-2">
+	{#each visible as item (item.id)}
+		<div class="group relative">
+			<button
+				type="button"
+				class="{sizeClasses[size]} cursor-pointer overflow-hidden rounded border transition-all duration-200
+					{removable ? 'border-2 border-accent' : 'border-base-300 hover:border-primary'}"
+				onclick={() => onSelect?.(item)}
+				title={item.alt}
+				aria-label={item.alt}
+			>
+				{#if cell}
+					{@render cell(item)}
+				{:else if item.url}
+					<img src={item.url} alt={item.alt} class="h-full w-full object-cover" loading="lazy" />
+				{:else}
+					<div class="flex h-full w-full items-center justify-center bg-base-200 p-1">
+						<span class="text-2xs text-center font-semibold leading-tight break-all text-base-content/80">
+							{shortLabel(item.alt)}
+						</span>
+					</div>
+				{/if}
+			</button>
+
+			{#if removable && onRemove}
+				<button
+					type="button"
+					class="absolute -top-1 -right-1 z-10 flex h-4 w-4 items-center justify-center rounded-full bg-error text-error-content opacity-0 transition-opacity group-hover:opacity-100"
+					onclick={(e) => {
+						e.stopPropagation();
+						onRemove(item);
+					}}
+					title="Remove"
+					aria-label="Remove {item.alt}"
+				>
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" class="h-2.5 w-2.5">
+						<path d="M18 6 6 18M6 6l12 12" />
+					</svg>
+				</button>
+			{/if}
+		</div>
+	{/each}
+
+	{#if overflow > 0}
+		<div
+			class="{sizeClasses[size]} flex items-center justify-center rounded border border-base-300 bg-base-200"
+			title="{overflow} more item{overflow === 1 ? '' : 's'}"
+		>
+			<span class="text-xs opacity-70">+{overflow}</span>
+		</div>
+	{/if}
+
+	{#if addable && onAdd}
+		<button
+			type="button"
+			class="{sizeClasses[size]} flex scale-90 cursor-pointer items-center justify-center rounded border-2 border-dashed border-primary/30 bg-primary/5 transition-all duration-200 hover:border-primary/50 hover:bg-primary/10"
+			onclick={onAdd}
+			title={addLabel}
+			aria-label={addLabel}
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="h-4 w-4 text-primary/70">
+				<path d="M12 5v14M5 12h14" />
+			</svg>
+		</button>
+	{/if}
+</div>

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

@@ -0,0 +1,42 @@
+import type { Snippet } from 'svelte';
+/**
+ * Generic thumbnail item — the decoupled chimaro shape. Unlike chimaro's
+ * UnifiedMediaItem this carries only what a thumbnail needs; callers with
+ * richer records pass a projection ({ id, url, alt }) or render a `cell`
+ * snippet for full control.
+ */
+export interface ThumbnailItem {
+    id: string;
+    /** Image URL; when absent the alt text renders as a text tile. */
+    url?: string | null;
+    /** Alt text / display label. */
+    alt: string;
+}
+interface Props {
+    items: ThumbnailItem[];
+    /** How many thumbnails to show before collapsing the rest into a +N counter. Default 8. */
+    max?: number;
+    /** Tile size. Default 'md'. */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Show remove (×) buttons on hover; requires `onRemove`. */
+    removable?: boolean;
+    /** Show the dashed add tile at the end; requires `onAdd`. */
+    addable?: boolean;
+    /** Tooltip / aria-label for the add tile. Default 'Add items'. */
+    addLabel?: string;
+    /** Fired when a thumbnail is clicked. */
+    onSelect?: (item: ThumbnailItem) => void;
+    /** Fired when a remove (×) button is clicked. */
+    onRemove?: (item: ThumbnailItem) => void;
+    /** Fired when the add tile is clicked. */
+    onAdd?: () => void;
+    /**
+     * Replace the default image/text tile rendering for each item — e.g. a
+     * video poster, an initials avatar, a FileThumbnail. The snippet renders
+     * inside the clickable tile, so it should fill it (`h-full w-full`).
+     */
+    cell?: Snippet<[ThumbnailItem]>;
+}
+declare const ThumbnailGrid: import("svelte").Component<Props, {}, "">;
+type ThumbnailGrid = ReturnType<typeof ThumbnailGrid>;
+export default ThumbnailGrid;