@joewinke/jatui 0.21.0 → 0.23.0

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

@@ -0,0 +1,36 @@
+/** What a finished recording hands back to the host — mirrors MediaCaptureResult's shape for the audio kind. */
+export interface AudioRecordingResult {
+    blob: Blob;
+    mimeType: string;
+    durationSeconds: number;
+    sizeBytes: number;
+}
+/** m:ss zero-padded seconds — shared format for the timer display. */
+export declare function formatDuration(totalSeconds: number): string;
+/** 1.2 KB / 3.4 MB style byte formatting for the size readout. */
+export declare function formatFileSize(bytes: number): string;
+interface Props {
+    /** `small` — inline chat-style pill (default). `large` — full recorder panel with waveform canvas. */
+    variant?: 'small' | 'large';
+    /** Auto-stop ceiling in ms. 0 (default) records until stopped manually. */
+    maxDurationMs?: number;
+    disabled?: boolean;
+    /** Fired once the mic stream is live and recording has started. */
+    onRecordStart?: () => void;
+    onRecordPause?: () => void;
+    onRecordResume?: () => void;
+    /** Fired with the finished recording. May return a Promise — the
+     * component stays in "processing" until it settles, so hosts can
+     * upload/transcribe without the user re-triggering a recording. */
+    onRecordStop?: (result: AudioRecordingResult) => void | Promise<void>;
+    /** Fired when the user cancels — no blob is produced. */
+    onRecordCancel?: () => void;
+    /** Fired on recorder errors (permission denied, no mic, start failure). */
+    onError?: (message: string) => void;
+    class?: string;
+}
+declare const AudioRecorder: import("svelte").Component<Props, {
+    reset: () => void;
+}, "">;
+type AudioRecorder = ReturnType<typeof AudioRecorder>;
+export default AudioRecorder;

package/dist/components/IconSelector.svelte

@@ -0,0 +1,417 @@
+<script lang="ts" module>
+	/**
+	 * IconSelector — searchable, paged icon picker for assigning an icon to an item.
+	 *
+	 * Ported from chimaro's IconSelector.svelte and generalized: the icon set is
+	 * fully prop-driven (no hardcoded list, no icon-library dependency). Pass any
+	 * array of `IconSelectorOption`s — for lucide-svelte consumers that is simply
+	 *
+	 *   const icons = Object.entries(lucideIconMap).map(([name, component]) => ({
+	 *     name, component,
+	 *   }));
+	 *   <IconSelector {icons} bind:selectedIcon={value} />
+	 *
+	 * Icons without a `component` (or all icons, via the `icon` snippet) can be
+	 * rendered with the optional `icon` snippet for full control.
+	 */
+	import type { Component, Snippet } from 'svelte';
+
+	/** Props an icon component receives when rendered by the grid/trigger. */
+	export interface IconComponentProps {
+		size?: number;
+		class?: string;
+	}
+
+	export interface IconSelectorOption {
+		/** Stable identifier — this is the value stored/selected. */
+		name: string;
+		/** Human-readable label; defaults to `name`. Also searched. */
+		label?: string;
+		/** Extra search terms (e.g. synonyms). */
+		keywords?: string[];
+		/** Svelte component rendering the icon; receives `{ size, class }`. */
+		component?: Component<IconComponentProps>;
+	}
+</script>
+
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+
+	interface Props {
+		/** Name of the currently selected icon (from `IconSelectorOption.name`). */
+		selectedIcon?: string | null;
+		/** The icon set to pick from — replaces chimaro's hardcoded list. */
+		icons: IconSelectorOption[];
+		/** Fires with the chosen name, or `null` when cleared. */
+		onSelect?: (icon: string | null) => void;
+		/** Extra class forwarded to the rendered icon components (e.g. a text color). */
+		colorClass?: string;
+		/** Trigger row label. */
+		label?: string;
+		/** Auto-close the panel shortly after a selection is made. */
+		compact?: boolean;
+		/** Grid columns per page. */
+		columns?: number;
+		/** Icons shown per page (default: 4 rows of 8). */
+		perPage?: number;
+		/** Optional custom renderer; overrides `option.component` when provided. */
+		icon?: Snippet<[IconSelectorOption]>;
+		class?: string;
+	}
+
+	let {
+		selectedIcon = $bindable(null),
+		icons,
+		onSelect = () => {},
+		colorClass = '',
+		label = 'Icon',
+		compact = false,
+		columns = 8,
+		perPage = 32,
+		icon,
+		class: className = ''
+	}: Props = $props();
+
+	let showSelector = $state(false);
+	let currentPage = $state(0);
+	let searchQuery = $state('');
+	let selectionAnimating = $state(false);
+	let lastSelectedIcon = $state<string | null>(null);
+	let searchInputEl: HTMLInputElement | undefined = $state(undefined);
+	let gridEl: HTMLElement | undefined = $state(undefined);
+
+	const filteredIcons = $derived.by(() => {
+		const q = searchQuery.trim().toLowerCase();
+		if (!q) return icons;
+		return icons.filter((i) => {
+			const haystack = `${i.label ?? i.name} ${i.name} ${(i.keywords ?? []).join(' ')}`.toLowerCase();
+			return haystack.includes(q);
+		});
+	});
+	const totalPages = $derived(Math.max(1, Math.ceil(filteredIcons.length / perPage)));
+
+	function nextPage() {
+		if (currentPage < totalPages - 1) currentPage++;
+	}
+	function prevPage() {
+		if (currentPage > 0) currentPage--;
+	}
+
+	function handleIconSelect(option: IconSelectorOption) {
+		if (option.name !== selectedIcon) {
+			lastSelectedIcon = option.name;
+			selectionAnimating = true;
+			selectedIcon = option.name;
+			onSelect(option.name);
+			setTimeout(() => {
+				selectionAnimating = false;
+				if (compact) setTimeout(() => (showSelector = false), 800);
+			}, 500);
+		} else {
+			onSelect(option.name);
+		}
+	}
+
+	function clearIcon() {
+		selectedIcon = null;
+		onSelect(null);
+	}
+
+	function focusGridStart() {
+		const btn = gridEl?.querySelector<HTMLButtonElement>('.active-page button.icon-btn');
+		btn?.focus();
+	}
+
+	/** Roving-focus keyboard nav over the visible page's icon buttons. */
+	function handleGridKeydown(e: KeyboardEvent) {
+		const page = gridEl?.querySelector('.active-page');
+		const buttons = Array.from(page?.querySelectorAll<HTMLButtonElement>('button.icon-btn') ?? []);
+		if (!buttons.length) return;
+		const idx = buttons.indexOf(document.activeElement as HTMLButtonElement);
+		let next: number | null = null;
+		switch (e.key) {
+			case 'ArrowRight':
+				next = idx < 0 ? 0 : idx + 1;
+				break;
+			case 'ArrowLeft':
+				next = idx <= 0 ? 0 : idx - 1;
+				break;
+			case 'ArrowDown':
+				next = idx < 0 ? 0 : idx + columns;
+				break;
+			case 'ArrowUp':
+				next = idx < 0 ? 0 : idx - columns;
+				break;
+			case 'Home':
+				next = 0;
+				break;
+			case 'End':
+				next = buttons.length - 1;
+				break;
+			case 'PageDown':
+				e.preventDefault();
+				nextPage();
+				return;
+			case 'PageUp':
+				e.preventDefault();
+				prevPage();
+				return;
+			case 'Escape':
+				showSelector = false;
+				return;
+			case 'Enter':
+				// Explicit so Enter selects reliably even where the native button
+				// default is unavailable (synthetic/test key events).
+				if (document.activeElement?.classList.contains('icon-btn')) {
+					e.preventDefault();
+					(document.activeElement as HTMLElement).click();
+				}
+				return;
+			default:
+				return;
+		}
+		e.preventDefault();
+		buttons[Math.max(0, Math.min(next, buttons.length - 1))]?.focus();
+	}
+
+	// Reset pagination when the search query changes
+	$effect(() => {
+		void searchQuery;
+		currentPage = 0;
+	});
+
+	// Reset search when the selector is closed and reopened
+	$effect(() => {
+		if (!showSelector) searchQuery = '';
+	});
+
+	// Focus the search input when the panel opens
+	$effect(() => {
+		if (showSelector) requestAnimationFrame(() => searchInputEl?.focus());
+	});
+</script>
+
+<div class="form-control {className}">
+	<button
+		type="button"
+		class="flex w-full items-center justify-between rounded-lg px-2 py-3 transition-colors hover:bg-base-200"
+		onclick={() => (showSelector = !showSelector)}
+		aria-expanded={showSelector}
+	>
+		<span class="label flex cursor-pointer items-center gap-2">
+			<span class="label-text font-medium">{label}</span>
+			{#if selectedIcon}
+				{@const selected = icons.find((i) => i.name === selectedIcon)}
+				<span class="icon-preview ml-5 inline-flex">
+					{#if icon}
+						{@render icon(selected!)}
+					{:else if selected?.component}
+						<selected.component size={22} class={colorClass} />
+					{/if}
+				</span>
+			{/if}
+		</span>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="18"
+			height="18"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			class="chevron-icon transition-transform duration-300 {showSelector ? 'rotate-180' : ''}"
+		>
+			<polyline points="6 9 12 15 18 9"></polyline>
+		</svg>
+	</button>
+
+	{#if showSelector}
+		<div class="icon-selector-wrapper pt-2" transition:slide={{ duration: 200 }}>
+			<!-- Search bar -->
+			<div class="relative mb-3">
+				<input
+					bind:this={searchInputEl}
+					type="text"
+					bind:value={searchQuery}
+					placeholder="Search icons..."
+					class="input input-sm input-bordered focus:outline-none w-full pr-8"
+					aria-label="Search icons"
+					onkeydown={(e) => {
+						if (e.key === 'Escape') showSelector = false;
+						if (e.key === 'ArrowDown') {
+							e.preventDefault();
+							focusGridStart();
+						}
+					}}
+				/>
+				{#if searchQuery}
+					<button
+						type="button"
+						class="absolute top-1/2 right-3 -translate-y-1/2 text-base-content/50 transition-colors hover:text-base-content"
+						onclick={() => (searchQuery = '')}
+						aria-label="Clear search"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="14"
+							height="14"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path d="M18 6 6 18"></path>
+							<path d="m6 6 12 12"></path>
+						</svg>
+					</button>
+				{/if}
+			</div>
+
+			<!-- Icons grid with overflow hidden for the pagination slide -->
+			<div
+				bind:this={gridEl}
+				class="icon-grid-container overflow-hidden rounded-lg bg-base-200"
+				onkeydown={handleGridKeydown}
+			>
+				<div
+					class="icon-grid-slider flex transition-transform duration-300"
+					style="transform: translateX(-{currentPage * 100}%)"
+				>
+					{#each Array(totalPages) as _, pageIndex (pageIndex)}
+						<div
+							class="icon-grid-page min-w-full shrink-0"
+							class:active-page={pageIndex === currentPage}
+						>
+							<div class="grid gap-2 p-4" style="grid-template-columns: repeat({columns}, minmax(0, 1fr))">
+								{#each filteredIcons.slice(pageIndex * perPage, (pageIndex + 1) * perPage) as option (option.name)}
+									<button
+										type="button"
+										class="icon-btn flex aspect-square items-center justify-center rounded-lg p-1 transition-all duration-200 hover:scale-105 hover:bg-base-300
+											{selectedIcon === option.name ? 'bg-base-300 ring-2 ring-primary/50' : ''}
+											{selectionAnimating && lastSelectedIcon === option.name ? 'selecting' : ''}"
+										onclick={() => handleIconSelect(option)}
+										aria-label="Select {option.label ?? option.name} icon"
+										aria-pressed={selectedIcon === option.name}
+										title={option.label ?? option.name}
+									>
+										{#if icon}
+											{@render icon(option)}
+										{:else if option.component}
+											<option.component size={24} class={colorClass} />
+										{/if}
+									</button>
+								{:else}
+									<div class="col-span-full py-6 text-center text-base-content/50">
+										No icons match your search
+									</div>
+								{/each}
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Pagination controls -->
+			<div class="mt-3 flex items-center justify-between">
+				<div class="text-base-content/70 text-xs">
+					{#if filteredIcons.length > 0}
+						Showing {Math.min(filteredIcons.length, currentPage * perPage + 1)}-{Math.min(
+							filteredIcons.length,
+							(currentPage + 1) * perPage
+						)} of {filteredIcons.length} icons
+					{:else}
+						No icons found
+					{/if}
+				</div>
+
+				<div class="flex gap-2">
+					<button
+						type="button"
+						class="btn btn-ghost btn-sm btn-circle {currentPage === 0 ? 'opacity-30' : ''}"
+						onclick={prevPage}
+						disabled={currentPage === 0}
+						aria-label="Previous page"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path d="m15 18-6-6 6-6"></path>
+						</svg>
+					</button>
+
+					<button
+						type="button"
+						class="btn btn-ghost btn-sm btn-circle {currentPage >= totalPages - 1 ? 'opacity-30' : ''}"
+						onclick={nextPage}
+						disabled={currentPage >= totalPages - 1}
+						aria-label="Next page"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path d="m9 18 6-6-6-6"></path>
+						</svg>
+					</button>
+				</div>
+			</div>
+
+			{#if selectedIcon}
+				<div class="mt-2 flex justify-end">
+					<button
+						type="button"
+						class="text-base-content/60 hover:bg-base-200 hover:text-base-content rounded px-2 py-1 text-xs transition-colors"
+						onclick={clearIcon}
+					>
+						Clear icon
+					</button>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.icon-btn {
+		position: relative;
+	}
+
+	.icon-btn.selecting {
+		transform: scale(1.15);
+		box-shadow:
+			0 0 0 4px oklch(var(--color-base-100) / 0.3),
+			0 0 15px oklch(var(--color-primary) / 0.5);
+		animation: icon-pulse 0.5s ease;
+	}
+
+	@keyframes icon-pulse {
+		0% {
+			transform: scale(1);
+		}
+		50% {
+			transform: scale(1.15);
+		}
+		100% {
+			transform: scale(1.1);
+		}
+	}
+</style>

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

@@ -0,0 +1,55 @@
+/**
+ * IconSelector — searchable, paged icon picker for assigning an icon to an item.
+ *
+ * Ported from chimaro's IconSelector.svelte and generalized: the icon set is
+ * fully prop-driven (no hardcoded list, no icon-library dependency). Pass any
+ * array of `IconSelectorOption`s — for lucide-svelte consumers that is simply
+ *
+ *   const icons = Object.entries(lucideIconMap).map(([name, component]) => ({
+ *     name, component,
+ *   }));
+ *   <IconSelector {icons} bind:selectedIcon={value} />
+ *
+ * Icons without a `component` (or all icons, via the `icon` snippet) can be
+ * rendered with the optional `icon` snippet for full control.
+ */
+import type { Component, Snippet } from 'svelte';
+/** Props an icon component receives when rendered by the grid/trigger. */
+export interface IconComponentProps {
+    size?: number;
+    class?: string;
+}
+export interface IconSelectorOption {
+    /** Stable identifier — this is the value stored/selected. */
+    name: string;
+    /** Human-readable label; defaults to `name`. Also searched. */
+    label?: string;
+    /** Extra search terms (e.g. synonyms). */
+    keywords?: string[];
+    /** Svelte component rendering the icon; receives `{ size, class }`. */
+    component?: Component<IconComponentProps>;
+}
+interface Props {
+    /** Name of the currently selected icon (from `IconSelectorOption.name`). */
+    selectedIcon?: string | null;
+    /** The icon set to pick from — replaces chimaro's hardcoded list. */
+    icons: IconSelectorOption[];
+    /** Fires with the chosen name, or `null` when cleared. */
+    onSelect?: (icon: string | null) => void;
+    /** Extra class forwarded to the rendered icon components (e.g. a text color). */
+    colorClass?: string;
+    /** Trigger row label. */
+    label?: string;
+    /** Auto-close the panel shortly after a selection is made. */
+    compact?: boolean;
+    /** Grid columns per page. */
+    columns?: number;
+    /** Icons shown per page (default: 4 rows of 8). */
+    perPage?: number;
+    /** Optional custom renderer; overrides `option.component` when provided. */
+    icon?: Snippet<[IconSelectorOption]>;
+    class?: string;
+}
+declare const IconSelector: Component<Props, {}, "selectedIcon">;
+type IconSelector = ReturnType<typeof IconSelector>;
+export default IconSelector;