@joewinke/jatui 0.21.0 → 0.23.0

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

@@ -1,20 +1,30 @@
 /**
- * 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.
+     */
+import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 export interface KeyboardShortcut {
     key: string;
     description: string;
@@ -37,6 +47,11 @@ 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;
     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;