@r2digisolutions/components 0.15.3 → 0.16.0

package/dist/components/molecules/Popover/Popover.svelte

@@ -230,7 +230,7 @@
 			ontoggle={onToggle}
 			style={panelStyle}
 			class={[
-				'popover-panel m-0 rounded-xl border-border bg-surface-elevated p-3 shadow-xl max-w-[min(20rem,calc(100vw-1rem))] border outline-none',
+				'popover-panel m-0 rounded-xl border-border bg-surface-elevated p-3 shadow-xl max-w-[min(26rem,calc(100vw-1rem))] border outline-none',
 				panelClass
 			]}
 		>

package/dist/components/organisms/AssistantChat/AssistantChat.svelte

@@ -0,0 +1,308 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
+	import {
+		Sparkles,
+		X,
+		Send,
+		Mic,
+		MicOff,
+		Volume2,
+		VolumeX,
+		LoaderCircle,
+		RotateCcw
+	} from '@lucide/svelte';
+
+	export interface AssistantMessage {
+		id: string;
+		role: 'user' | 'assistant';
+		content: string;
+	}
+
+	interface AssistantChatProps {
+		open?: boolean;
+		title?: string;
+		statusLabel?: string;
+		placeholder?: string;
+		emptyHint?: string;
+		suggestions?: string[];
+		messages?: AssistantMessage[];
+		draft?: string;
+		loading?: boolean;
+		error?: string | null;
+		voiceEnabled?: boolean;
+		voiceOutput?: boolean;
+		listening?: boolean;
+		newChatLabel?: string;
+		closeLabel?: string;
+		sendLabel?: string;
+		micLabel?: string;
+		stopMicLabel?: string;
+		voiceOnLabel?: string;
+		voiceOffLabel?: string;
+		class?: string;
+		result?: Snippet<[AssistantMessage]>;
+		footerExtra?: Snippet;
+		onsend?: () => void;
+		onclose?: () => void;
+		onnewchat?: () => void;
+		onmicclick?: () => void;
+		onvoiceoutputchange?: (on: boolean) => void;
+		onsuggestion?: (text: string) => void;
+	}
+
+	let {
+		open = $bindable(false),
+		title = 'Asistente',
+		statusLabel,
+		placeholder = 'Escribe un mensaje…',
+		emptyHint = '¿En qué puedo ayudarte?',
+		suggestions = [],
+		messages = [],
+		draft = $bindable(''),
+		loading = false,
+		error = null,
+		voiceEnabled = true,
+		voiceOutput = $bindable(true),
+		listening = false,
+		newChatLabel = 'Nueva conversación',
+		closeLabel = 'Cerrar',
+		sendLabel = 'Enviar',
+		micLabel = 'Activar micrófono',
+		stopMicLabel = 'Detener micrófono',
+		voiceOnLabel = 'Voz activada',
+		voiceOffLabel = 'Voz desactivada',
+		class: className = '',
+		result,
+		footerExtra,
+		onsend,
+		onclose,
+		onnewchat,
+		onmicclick,
+		onvoiceoutputchange,
+		onsuggestion
+	}: AssistantChatProps = $props();
+
+	let scrollEl = $state<HTMLDivElement | null>(null);
+
+	const isEmpty = $derived(messages.length === 0 && !loading);
+	const canSend = $derived(draft.trim().length > 0 && !loading);
+
+	$effect(() => {
+		void messages.length;
+		void loading;
+		const el = scrollEl;
+		if (!el) return;
+		const raf = requestAnimationFrame(() => {
+			if (el) el.scrollTop = el.scrollHeight;
+		});
+		return () => cancelAnimationFrame(raf);
+	});
+
+	function handleClose() {
+		open = false;
+		onclose?.();
+	}
+
+	function handleSend() {
+		if (!canSend) return;
+		onsend?.();
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' && !e.shiftKey) {
+			e.preventDefault();
+			handleSend();
+		}
+	}
+
+	function handleSuggestion(text: string) {
+		draft = text;
+		onsuggestion?.(text);
+	}
+
+	function toggleVoice() {
+		voiceOutput = !voiceOutput;
+		onvoiceoutputchange?.(voiceOutput);
+	}
+</script>
+
+<div
+	class={[
+		'flex flex-col overflow-hidden rounded-2xl border border-border bg-surface-elevated shadow-xl',
+		'h-[min(560px,70vh)] w-full min-w-[320px] max-w-[420px]',
+		className
+	]}
+	role="complementary"
+	aria-label={title}
+>
+	<!-- Header -->
+	<header class="flex shrink-0 items-center gap-2 border-b border-border px-3 py-2.5">
+		<span
+			class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-brand-100 text-brand-600 dark:bg-brand-900/40 dark:text-brand-400"
+			aria-hidden="true"
+		>
+			<Sparkles size={15} strokeWidth={2} />
+		</span>
+		<div class="min-w-0 flex-1">
+			<p class="truncate text-sm font-semibold text-primary">{title}</p>
+			{#if statusLabel}
+				<p class="truncate text-xs text-muted">{statusLabel}</p>
+			{/if}
+		</div>
+		<IconButton variant="ghost" size="xs" label={newChatLabel} onclick={() => onnewchat?.()}>
+			<RotateCcw size={14} strokeWidth={2} />
+		</IconButton>
+		<IconButton variant="ghost" size="xs" label={closeLabel} onclick={handleClose}>
+			<X size={14} strokeWidth={2} />
+		</IconButton>
+	</header>
+
+	<!-- Body -->
+	<div bind:this={scrollEl} class="min-h-0 flex-1 overflow-y-auto px-3 py-3">
+		{#if isEmpty}
+			<div class="flex flex-col items-center justify-center gap-4 py-8 text-center">
+				<span
+					class="flex h-12 w-12 items-center justify-center rounded-2xl bg-brand-50 text-brand-500 dark:bg-brand-950/30 dark:text-brand-400"
+					aria-hidden="true"
+				>
+					<Sparkles size={24} strokeWidth={1.5} />
+				</span>
+				<p class="text-sm text-muted">{emptyHint}</p>
+				{#if suggestions.length}
+					<div class="flex flex-wrap justify-center gap-2">
+						{#each suggestions as suggestion (suggestion)}
+							<button
+								type="button"
+								class="rounded-full border border-border bg-surface px-3 py-1.5 text-xs text-secondary transition-colors hover:border-brand-400 hover:text-brand-600 dark:hover:text-brand-400"
+								onclick={() => handleSuggestion(suggestion)}
+							>
+								{suggestion}
+							</button>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{:else}
+			<div class="flex flex-col gap-3">
+				{#each messages as message (message.id)}
+					{#if message.role === 'user'}
+						<div class="flex justify-end">
+							<div
+								class="max-w-[80%] rounded-2xl rounded-br-sm bg-brand-600 px-3.5 py-2.5 text-sm leading-relaxed text-white"
+							>
+								{message.content}
+							</div>
+						</div>
+					{:else}
+						<div class="flex flex-col gap-1.5">
+							<div class="flex items-start gap-2">
+								<span
+									class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-brand-100 text-brand-600 dark:bg-brand-900/40 dark:text-brand-400"
+									aria-hidden="true"
+								>
+									<Sparkles size={12} strokeWidth={2} />
+								</span>
+								<div
+									class="max-w-[calc(100%-2rem)] rounded-2xl rounded-bl-sm bg-surface-overlay px-3.5 py-2.5 text-sm leading-relaxed text-primary"
+								>
+									{message.content}
+								</div>
+							</div>
+							{#if result}
+								<div class="ml-8">
+									{@render result(message)}
+								</div>
+							{/if}
+						</div>
+					{/if}
+				{/each}
+
+				{#if loading}
+					<div class="flex items-center gap-2">
+						<span
+							class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-brand-100 text-brand-600 dark:bg-brand-900/40 dark:text-brand-400"
+							aria-hidden="true"
+						>
+							<Sparkles size={12} strokeWidth={2} />
+						</span>
+						<div
+							class="flex items-center gap-2 rounded-2xl rounded-bl-sm bg-surface-overlay px-3.5 py-2.5"
+						>
+							<LoaderCircle size={14} strokeWidth={2} class="animate-spin text-muted" />
+							<span class="text-xs text-muted">Procesando…</span>
+						</div>
+					</div>
+				{/if}
+
+				{#if error}
+					<div
+						class="rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-600 dark:border-red-800/40 dark:bg-red-950/20 dark:text-red-400"
+					>
+						{error}
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Footer -->
+	<footer class="shrink-0 border-t border-border px-3 py-2.5">
+		<div class="flex items-center gap-2">
+			{#if voiceEnabled}
+				<IconButton
+					variant="ghost"
+					size="sm"
+					label={listening ? stopMicLabel : micLabel}
+					onclick={() => onmicclick?.()}
+					class={listening ? 'text-red-500 hover:text-red-600' : ''}
+				>
+					{#if listening}
+						<MicOff size={16} strokeWidth={2} />
+					{:else}
+						<Mic size={16} strokeWidth={2} />
+					{/if}
+				</IconButton>
+			{/if}
+
+			<input
+				type="text"
+				bind:value={draft}
+				{placeholder}
+				class="h-9 min-w-0 flex-1 rounded-xl border border-border bg-surface px-3 text-sm text-primary outline-none transition-shadow placeholder:text-muted focus:border-brand-400 focus:ring-2 focus:ring-brand-500/20"
+				disabled={loading}
+				onkeydown={handleKeydown}
+				aria-label={placeholder}
+			/>
+
+			{#if voiceEnabled}
+				<IconButton
+					variant="ghost"
+					size="sm"
+					label={voiceOutput ? voiceOnLabel : voiceOffLabel}
+					onclick={toggleVoice}
+				>
+					{#if voiceOutput}
+						<Volume2 size={16} strokeWidth={2} />
+					{:else}
+						<VolumeX size={16} strokeWidth={2} />
+					{/if}
+				</IconButton>
+			{/if}
+
+			<IconButton
+				variant={canSend ? 'primary' : 'ghost'}
+				size="sm"
+				label={sendLabel}
+				disabled={!canSend}
+				onclick={handleSend}
+			>
+				<Send size={16} strokeWidth={2} />
+			</IconButton>
+		</div>
+
+		{#if footerExtra}
+			{@render footerExtra()}
+		{/if}
+	</footer>
+</div>

package/dist/components/organisms/AssistantChat/AssistantChat.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { Snippet } from 'svelte';
+export interface AssistantMessage {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+}
+interface AssistantChatProps {
+    open?: boolean;
+    title?: string;
+    statusLabel?: string;
+    placeholder?: string;
+    emptyHint?: string;
+    suggestions?: string[];
+    messages?: AssistantMessage[];
+    draft?: string;
+    loading?: boolean;
+    error?: string | null;
+    voiceEnabled?: boolean;
+    voiceOutput?: boolean;
+    listening?: boolean;
+    newChatLabel?: string;
+    closeLabel?: string;
+    sendLabel?: string;
+    micLabel?: string;
+    stopMicLabel?: string;
+    voiceOnLabel?: string;
+    voiceOffLabel?: string;
+    class?: string;
+    result?: Snippet<[AssistantMessage]>;
+    footerExtra?: Snippet;
+    onsend?: () => void;
+    onclose?: () => void;
+    onnewchat?: () => void;
+    onmicclick?: () => void;
+    onvoiceoutputchange?: (on: boolean) => void;
+    onsuggestion?: (text: string) => void;
+}
+declare const AssistantChat: import("svelte").Component<AssistantChatProps, {}, "open" | "draft" | "voiceOutput">;
+type AssistantChat = ReturnType<typeof AssistantChat>;
+export default AssistantChat;

package/dist/components/organisms/AssistantFab/AssistantFab.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
+	import { Sparkles } from '@lucide/svelte';
+
+	interface AssistantFabProps {
+		label?: string;
+		onclick?: () => void;
+		class?: string;
+	}
+
+	let {
+		label = 'Abrir asistente',
+		onclick,
+		class: className = ''
+	}: AssistantFabProps = $props();
+</script>
+
+<IconButton
+	variant="primary"
+	size="xl"
+	rounded
+	{label}
+	onclick={() => onclick?.()}
+	class={['shadow-lg shadow-brand-500/30', className].filter(Boolean).join(' ')}
+>
+	<Sparkles size={22} strokeWidth={2} />
+</IconButton>

package/dist/components/organisms/AssistantFab/AssistantFab.svelte.d.ts

@@ -0,0 +1,8 @@
+interface AssistantFabProps {
+    label?: string;
+    onclick?: () => void;
+    class?: string;
+}
+declare const AssistantFab: import("svelte").Component<AssistantFabProps, {}, "">;
+type AssistantFab = ReturnType<typeof AssistantFab>;
+export default AssistantFab;

package/dist/components/organisms/CommandPalette/CommandPalette.svelte

@@ -48,6 +48,11 @@
 
 	let query = $state('');
 	let activeIndex = $state(0);
+	let dialogEl = $state<HTMLDialogElement | null>(null);
+	let listEl = $state<HTMLDivElement | null>(null);
+	/** El click que abre la paleta llega al ::backdrop y la cerraría al instante. */
+	let ignoreBackdropUntil = 0;
+	const listId = 'command-palette-list';
 
 	const resolvedPlaceholder = $derived(placeholder ?? i18n.t('commandPalettePlaceholder'));
 	const resolvedEmpty = $derived(emptyLabel ?? i18n.t('noResults'));
@@ -72,36 +77,89 @@
 	});
 
 	const groups = $derived.by(() => {
-		const map = new Map<string, CommandItem[]>();
-		for (const item of filtered) {
+		const map = new Map<string, { item: CommandItem; index: number }[]>();
+		filtered.forEach((item, index) => {
 			const key = item.group || dialogLabel;
 			const list = map.get(key) ?? [];
-			list.push(item);
+			list.push({ item, index });
 			map.set(key, list);
-		}
+		});
 		return [...map.entries()];
 	});
 
 	const flat = $derived(filtered);
 	const showIconColumn = $derived(flat.some((item) => item.icon));
+	const activeItem = $derived(flat[activeIndex] ?? null);
+	const activeOptionId = $derived(activeItem ? optionId(activeItem.id) : undefined);
+
+	function optionId(id: string) {
+		return `${listId}-${id}`;
+	}
+
+	function firstEnabledIndex() {
+		return flat.findIndex((item) => !item.disabled);
+	}
+
+	function nextEnabled(from: number, dir: 1 | -1) {
+		if (!flat.length) return 0;
+		let i = from;
+		for (let n = 0; n < flat.length; n++) {
+			i = (i + dir + flat.length) % flat.length;
+			if (!flat[i]?.disabled) return i;
+		}
+		return from;
+	}
+
+	/** Desplaza solo el listado, no el <dialog> (scrollIntoView arrastra ancestros). */
+	function keepVisible(node: HTMLElement) {
+		const frame = requestAnimationFrame(() => {
+			const list = listEl;
+			if (!list) return;
+			const listRect = list.getBoundingClientRect();
+			const rect = node.getBoundingClientRect();
+			if (rect.bottom > listRect.bottom) {
+				list.scrollTop += rect.bottom - listRect.bottom;
+			} else if (rect.top < listRect.top) {
+				list.scrollTop -= listRect.top - rect.top;
+			}
+		});
+		return () => cancelAnimationFrame(frame);
+	}
 
 	$effect(() => {
-		if (open) {
+		if (!dialogEl) return;
+		if (open && !dialogEl.open) {
 			query = '';
-			activeIndex = 0;
+			activeIndex = Math.max(0, firstEnabledIndex());
 			untrack(() => onquery?.(''));
+			ignoreBackdropUntil = Date.now() + 400;
+			dialogEl.showModal();
+		} else if (!open && dialogEl.open) {
+			dialogEl.close();
 		}
 	});
 
-	function focusInput(node: HTMLInputElement) {
-		queueMicrotask(() => node.focus());
-	}
-
 	function close() {
 		open = false;
 		onclose?.();
 	}
 
+	function handleDialogClose() {
+		if (open) close();
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		if (!dialogEl) return;
+		if (Date.now() < ignoreBackdropUntil) return;
+		const rect = dialogEl.getBoundingClientRect();
+		const inside =
+			event.clientX >= rect.left &&
+			event.clientX <= rect.right &&
+			event.clientY >= rect.top &&
+			event.clientY <= rect.bottom;
+		if (!inside) close();
+	}
+
 	function choose(item: CommandItem) {
 		if (item.disabled) return;
 		onselect?.(item);
@@ -109,18 +167,19 @@
 	}
 
 	function onKeydown(e: KeyboardEvent) {
-		if (!open) return;
-		if (e.key === 'Escape') {
-			e.preventDefault();
-			close();
-			return;
-		}
+		if (!open || !flat.length) return;
 		if (e.key === 'ArrowDown') {
 			e.preventDefault();
-			activeIndex = Math.min(Math.max(flat.length - 1, 0), activeIndex + 1);
+			activeIndex = nextEnabled(activeIndex, 1);
 		} else if (e.key === 'ArrowUp') {
 			e.preventDefault();
-			activeIndex = Math.max(0, activeIndex - 1);
+			activeIndex = nextEnabled(activeIndex, -1);
+		} else if (e.key === 'Home') {
+			e.preventDefault();
+			activeIndex = nextEnabled(-1, 1);
+		} else if (e.key === 'End') {
+			e.preventDefault();
+			activeIndex = nextEnabled(flat.length, -1);
 		} else if (e.key === 'Enter') {
 			e.preventDefault();
 			const item = flat[activeIndex];
@@ -129,128 +188,175 @@
 	}
 
 	function onInput() {
-		activeIndex = 0;
+		activeIndex = Math.max(0, firstEnabledIndex());
 		onquery?.(query);
 	}
 </script>
 
-{#if open}
-	<button
-		type="button"
-		class="inset-0 bg-black/60 p-0 dark:bg-black/70 backdrop-blur-sm fixed z-50 border-0"
-		aria-label={i18n.t('close')}
-		onclick={close}
-	></button>
-
+<dialog
+	bind:this={dialogEl}
+	class={['command-palette', className]}
+	aria-label={dialogLabel}
+	onclose={handleDialogClose}
+	onclick={handleBackdropClick}
+>
 	<div
-		class="px-4 inset-0 pointer-events-none fixed z-[51] flex items-start justify-center pt-[12vh]"
+		class="rounded-2xl border-border bg-surface-elevated shadow-2xl w-full overflow-hidden border"
 	>
-		<div
-			role="dialog"
-			aria-modal="true"
-			aria-label={dialogLabel}
-			tabindex="-1"
-			class={[
-				'max-w-xl rounded-2xl border-border bg-surface-elevated shadow-2xl pointer-events-auto w-full overflow-hidden border',
-				className
-			]}
-			onkeydown={onKeydown}
-		>
-			<div class="gap-2 border-border px-3 flex items-center border-b">
-				<svg
-					class="h-4 w-4 text-muted shrink-0"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					aria-hidden="true"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="M21 21l-4.35-4.35M11 18a7 7 0 100-14 7 7 0 000 14z"
-					/>
-				</svg>
-				<input
-					bind:value={query}
-					{@attach focusInput}
-					placeholder={resolvedPlaceholder}
-					class="h-12 text-sm text-primary placeholder:text-muted w-full bg-transparent outline-none"
-					autocomplete="off"
-					spellcheck="false"
-					aria-autocomplete="list"
-					oninput={onInput}
+		<div class="gap-2 border-border px-3 flex items-center border-b">
+			<svg
+				class="h-4 w-4 text-muted shrink-0"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				aria-hidden="true"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M21 21l-4.35-4.35M11 18a7 7 0 100-14 7 7 0 000 14z"
 				/>
-				{#if loading}
-					<span
-						class="h-4 w-4 animate-spin border-border border-t-brand-500 shrink-0 rounded-full border-2"
-						aria-hidden="true"
-					></span>
-				{/if}
-				<Kbd keys={['Esc']} size="sm" />
-			</div>
+			</svg>
+			<input
+				bind:value={query}
+				placeholder={resolvedPlaceholder}
+				class="h-12 text-sm text-primary placeholder:text-muted w-full bg-transparent outline-none"
+				autocomplete="off"
+				spellcheck="false"
+				role="combobox"
+				aria-autocomplete="list"
+				aria-expanded="true"
+				aria-controls={listId}
+				aria-activedescendant={activeOptionId}
+				oninput={onInput}
+				onkeydown={onKeydown}
+			/>
+			{#if loading}
+				<span
+					class="h-4 w-4 animate-spin border-border border-t-brand-500 shrink-0 rounded-full border-2"
+					aria-hidden="true"
+				></span>
+			{/if}
+			<Kbd keys={['Esc']} size="sm" />
+		</div>
 
-			<div class="max-h-80 p-2 overflow-y-auto">
-				{#if flat.length === 0}
-					<p class="px-3 py-6 text-sm text-muted text-center">{resolvedEmpty}</p>
-				{:else}
-					{#each groups as [groupName, groupItems] (groupName)}
-						<p class="px-2 py-1.5 font-semibold tracking-wide text-muted text-[11px] uppercase">
-							{groupName}
-						</p>
-						<ul class="mb-2 gap-0.5 flex flex-col">
-							{#each groupItems as item (item.id)}
-								{@const index = flat.findIndex((f) => f.id === item.id)}
-								{@const Icon = item.icon}
-								<li>
-									<button
-										type="button"
-										disabled={item.disabled}
-										onclick={() => choose(item)}
-										onmouseenter={() => (activeIndex = index)}
-										class={[
-											'gap-3 rounded-xl px-3 py-2 text-sm flex w-full items-center justify-between text-left transition-colors',
-											index === activeIndex
-												? 'bg-brand-50 text-brand-700 dark:bg-brand-950/40 dark:text-brand-300'
-												: 'text-primary hover:bg-surface-overlay',
-											item.disabled && 'cursor-not-allowed opacity-40'
-										]}
-									>
-										<span class="gap-3 min-w-0 flex flex-1 items-center">
-											{#if showIconColumn}
-												<span
-													class={[
-														'h-8 w-8 rounded-lg flex shrink-0 items-center justify-center',
-														index === activeIndex
-															? 'bg-brand-100/80 text-brand-700 dark:bg-brand-900/50 dark:text-brand-300'
-															: 'bg-surface-overlay text-muted'
-													]}
-													aria-hidden="true"
-												>
-													{#if Icon}
-														<Icon size={16} strokeWidth={2} />
-													{/if}
-												</span>
-											{/if}
-											<span class="min-w-0 flex-1">
-												<span class="block truncate">{item.label}</span>
-												{#if item.subtitle}
-													<span class="mt-0.5 text-xs text-muted block truncate"
-														>{item.subtitle}</span
-													>
+		<div bind:this={listEl} id={listId} class="max-h-80 p-2 overflow-y-auto" role="listbox">
+			{#if flat.length === 0}
+				<p class="px-3 py-6 text-sm text-muted text-center">{resolvedEmpty}</p>
+			{:else}
+				{#each groups as [groupName, groupItems] (groupName)}
+					<p class="px-2 py-1.5 font-semibold tracking-wide text-muted text-[11px] uppercase">
+						{groupName}
+					</p>
+					<ul class="mb-2 gap-0.5 flex flex-col">
+						{#each groupItems as { item, index } (item.id)}
+							{@const Icon = item.icon}
+							{@const active = index === activeIndex}
+							<li>
+								<button
+									id={optionId(item.id)}
+									type="button"
+									role="option"
+									tabindex="-1"
+									aria-selected={active}
+									disabled={item.disabled}
+									onclick={() => choose(item)}
+									onmouseenter={() => {
+										if (!item.disabled) activeIndex = index;
+									}}
+									{@attach active ? keepVisible : undefined}
+									class={[
+										'gap-3 rounded-xl px-3 py-2 text-sm flex w-full items-center justify-between text-left transition-colors',
+										active
+											? 'bg-brand-50 text-brand-700 dark:bg-brand-950/40 dark:text-brand-300'
+											: 'text-primary hover:bg-surface-overlay',
+										item.disabled && 'cursor-not-allowed opacity-40'
+									]}
+								>
+									<span class="gap-3 min-w-0 flex flex-1 items-center">
+										{#if showIconColumn}
+											<span
+												class={[
+													'h-8 w-8 rounded-lg flex shrink-0 items-center justify-center',
+													active
+														? 'bg-brand-100/80 text-brand-700 dark:bg-brand-900/50 dark:text-brand-300'
+														: 'bg-surface-overlay text-muted'
+												]}
+												aria-hidden="true"
+											>
+												{#if Icon}
+													<Icon size={16} strokeWidth={2} />
 												{/if}
 											</span>
-										</span>
-										{#if item.shortcut?.length}
-											<Kbd keys={item.shortcut} size="sm" />
 										{/if}
-									</button>
-								</li>
-							{/each}
-						</ul>
-					{/each}
-				{/if}
-			</div>
+										<span class="min-w-0 flex-1">
+											<span class="block truncate">{item.label}</span>
+											{#if item.subtitle}
+												<span class="mt-0.5 text-xs text-muted block truncate">{item.subtitle}</span
+												>
+											{/if}
+										</span>
+									</span>
+									{#if item.shortcut?.length}
+										<Kbd keys={item.shortcut} size="sm" />
+									{/if}
+								</button>
+							</li>
+						{/each}
+					</ul>
+				{/each}
+			{/if}
 		</div>
 	</div>
-{/if}
+</dialog>
+
+<style>
+	.command-palette {
+		margin: 12vh auto auto;
+		padding: 0;
+		border: none;
+		background: transparent;
+		color: inherit;
+		width: calc(100% - 2rem);
+		max-width: 36rem;
+		overflow: visible;
+	}
+
+	.command-palette::backdrop {
+		background: oklch(15% 0.02 265 / 0.45);
+		backdrop-filter: blur(6px);
+	}
+
+	:global(.dark) .command-palette::backdrop {
+		background: oklch(0% 0 0 / 0.65);
+	}
+
+	.command-palette[open] {
+		animation: palette-in 140ms ease-out;
+	}
+
+	.command-palette[open]::backdrop {
+		animation: palette-backdrop-in 140ms ease-out;
+	}
+
+	@keyframes palette-in {
+		from {
+			opacity: 0;
+			transform: translateY(6px) scale(0.98);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+
+	@keyframes palette-backdrop-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+</style>

package/dist/index.d.ts

@@ -698,6 +698,9 @@ export { default as RegisterForm } from './components/organisms/RegisterForm/Reg
 export { default as ForgotPasswordForm } from './components/organisms/ForgotPasswordForm/ForgotPasswordForm.svelte';
 export { default as OtpVerify } from './components/organisms/OtpVerify/OtpVerify.svelte';
 export { default as ChatWindow } from './components/organisms/ChatWindow/ChatWindow.svelte';
+export { default as AssistantChat } from './components/organisms/AssistantChat/AssistantChat.svelte';
+export type { AssistantMessage } from './components/organisms/AssistantChat/AssistantChat.svelte';
+export { default as AssistantFab } from './components/organisms/AssistantFab/AssistantFab.svelte';
 export { default as CommentThread } from './components/organisms/CommentThread/CommentThread.svelte';
 export type { CommentItem } from './components/organisms/CommentThread/CommentThread.svelte';
 export { default as ActivityFeed } from './components/organisms/ActivityFeed/ActivityFeed.svelte';

package/dist/index.js

@@ -483,6 +483,8 @@ export { default as RegisterForm } from './components/organisms/RegisterForm/Reg
 export { default as ForgotPasswordForm } from './components/organisms/ForgotPasswordForm/ForgotPasswordForm.svelte';
 export { default as OtpVerify } from './components/organisms/OtpVerify/OtpVerify.svelte';
 export { default as ChatWindow } from './components/organisms/ChatWindow/ChatWindow.svelte';
+export { default as AssistantChat } from './components/organisms/AssistantChat/AssistantChat.svelte';
+export { default as AssistantFab } from './components/organisms/AssistantFab/AssistantFab.svelte';
 export { default as CommentThread } from './components/organisms/CommentThread/CommentThread.svelte';
 export { default as ActivityFeed } from './components/organisms/ActivityFeed/ActivityFeed.svelte';
 export { default as SettingsLayout } from './components/organisms/SettingsLayout/SettingsLayout.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.15.3",
+	"version": "0.16.0",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",