@r2digisolutions/components 0.17.1 → 0.17.3

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import { tick, type Snippet } from 'svelte';
 	import IconButton from '../../atoms/IconButton/IconButton.svelte';
 	import {
 		Sparkles,
@@ -10,7 +10,9 @@
 		Volume2,
 		VolumeX,
 		LoaderCircle,
-		RotateCcw
+		RotateCcw,
+		Copy,
+		Check
 	} from '@lucide/svelte';
 
 	export interface AssistantMessage {
@@ -30,7 +32,7 @@
 		draft?: string;
 		loading?: boolean;
 		loadingLabel?: string;
-		/** When false, input stays disabled via `loading` but the spinner bubble is hidden (parent paints status in a message). */
+		/** When false, the spinner bubble is hidden (parent paints status in a message). */
 		showLoadingBubble?: boolean;
 		error?: string | null;
 		voiceEnabled?: boolean;
@@ -43,12 +45,15 @@
 		stopMicLabel?: string;
 		voiceOnLabel?: string;
 		voiceOffLabel?: string;
+		copyChatLabel?: string;
+		copiedChatLabel?: string;
 		class?: string;
 		result?: Snippet<[AssistantMessage]>;
 		footerExtra?: Snippet;
 		onsend?: () => void;
 		onclose?: () => void;
 		onnewchat?: () => void;
+		oncopychat?: () => void | Promise<void>;
 		onmicclick?: () => void;
 		onvoiceoutputchange?: (on: boolean) => void;
 		onsuggestion?: (text: string) => void;
@@ -77,21 +82,46 @@
 		stopMicLabel = 'Detener micrófono',
 		voiceOnLabel = 'Voz activada',
 		voiceOffLabel = 'Voz desactivada',
+		copyChatLabel = 'Copiar chat',
+		copiedChatLabel = 'Copiado',
 		class: className = '',
 		result,
 		footerExtra,
 		onsend,
 		onclose,
 		onnewchat,
+		oncopychat,
 		onmicclick,
 		onvoiceoutputchange,
 		onsuggestion
 	}: AssistantChatProps = $props();
 
 	let scrollEl = $state<HTMLDivElement | null>(null);
+	let inputEl: HTMLInputElement | null = null;
+	/** Restore the composer after send / SvelteKit form focus reset. */
+	let retainComposerFocus = false;
+	let copiedFlash = $state(false);
 
 	const isEmpty = $derived(messages.length === 0 && !loading);
 	const canSend = $derived(draft.trim().length > 0 && !loading);
+	const pendingAssistantId = $derived.by(() => {
+		if (!loading || messages.length === 0) return null;
+		const last = messages[messages.length - 1];
+		if (last?.role === 'assistant' && !last.content.trim()) return last.id;
+		return null;
+	});
+	const showTrailingLoader = $derived(loading && showLoadingBubble && !pendingAssistantId);
+
+	function focusComposer() {
+		inputEl?.focus({ preventScroll: true });
+	}
+
+	/** Parent can call this after client-side navigation (goto). */
+	export function focus() {
+		retainComposerFocus = true;
+		focusComposer();
+		void tick().then(focusComposer);
+	}
 
 	$effect(() => {
 		void messages.length;
@@ -104,14 +134,26 @@
 		return () => cancelAnimationFrame(raf);
 	});
 
+	$effect(() => {
+		if (!open || loading || !retainComposerFocus) return;
+		const id = requestAnimationFrame(() => {
+			if (open && retainComposerFocus) focusComposer();
+			if (!loading) retainComposerFocus = false;
+		});
+		return () => cancelAnimationFrame(id);
+	});
+
 	function handleClose() {
+		retainComposerFocus = false;
 		open = false;
 		onclose?.();
 	}
 
 	function handleSend() {
 		if (!canSend) return;
+		retainComposerFocus = true;
 		onsend?.();
+		void tick().then(focusComposer);
 	}
 
 	function handleKeydown(e: KeyboardEvent) {
@@ -130,6 +172,15 @@
 		voiceOutput = !voiceOutput;
 		onvoiceoutputchange?.(voiceOutput);
 	}
+
+	async function handleCopyChat() {
+		if (!oncopychat || messages.length === 0) return;
+		await oncopychat();
+		copiedFlash = true;
+		window.setTimeout(() => {
+			copiedFlash = false;
+		}, 1600);
+	}
 </script>
 
 <div
@@ -154,6 +205,19 @@
 				<p class="text-xs text-muted truncate">{statusLabel}</p>
 			{/if}
 		</div>
+		<IconButton
+			variant="ghost"
+			size="xs"
+			label={copiedFlash ? copiedChatLabel : copyChatLabel}
+			disabled={messages.length === 0 || !oncopychat}
+			onclick={() => void handleCopyChat()}
+		>
+			{#if copiedFlash}
+				<Check size={14} strokeWidth={2} />
+			{:else}
+				<Copy size={14} strokeWidth={2} />
+			{/if}
+		</IconButton>
 		<IconButton variant="ghost" size="xs" label={newChatLabel} onclick={() => onnewchat?.()}>
 			<RotateCcw size={14} strokeWidth={2} />
 		</IconButton>
@@ -193,7 +257,7 @@
 					{#if message.role === 'user'}
 						<div class="flex justify-end">
 							<div
-								class="rounded-2xl rounded-br-sm bg-brand-600 px-3.5 py-2.5 text-sm leading-relaxed text-white max-w-[80%]"
+								class="rounded-2xl rounded-br-sm bg-brand-600 px-3.5 py-2.5 text-sm leading-relaxed text-white max-w-[80%] whitespace-pre-wrap"
 							>
 								{message.content}
 							</div>
@@ -208,9 +272,16 @@
 									<Sparkles size={12} strokeWidth={2} />
 								</span>
 								<div
-									class="rounded-2xl rounded-bl-sm bg-surface-overlay px-3.5 py-2.5 text-sm leading-relaxed text-primary max-w-[calc(100%-2rem)]"
+									class="rounded-2xl rounded-bl-sm bg-surface-overlay px-3.5 py-2.5 text-sm leading-relaxed text-primary max-w-[calc(100%-2rem)] whitespace-pre-wrap"
 								>
-									{message.content}
+									{#if message.id === pendingAssistantId}
+										<span class="gap-2 text-muted flex items-center">
+											<LoaderCircle size={14} strokeWidth={2} class="animate-spin shrink-0" />
+											<span class="text-xs">{loadingLabel}</span>
+										</span>
+									{:else}
+										{message.content}
+									{/if}
 								</div>
 							</div>
 							{#if result}
@@ -222,7 +293,7 @@
 					{/if}
 				{/each}
 
-				{#if loading && showLoadingBubble}
+				{#if showTrailingLoader}
 					<div class="gap-2 flex items-center">
 						<span
 							class="h-6 w-6 bg-brand-100 text-brand-600 dark:bg-brand-900/40 dark:text-brand-400 flex shrink-0 items-center justify-center rounded-full"
@@ -246,6 +317,17 @@
 	<footer class="border-border px-3 py-2.5 shrink-0 border-t">
 		<div class="gap-1.5 flex items-center">
 			<input
+				{@attach (node) => {
+					inputEl = node;
+					$effect(() => {
+						if (!open || loading || !retainComposerFocus) return;
+						node.focus();
+						retainComposerFocus = false;
+					});
+					return () => {
+						if (inputEl === node) inputEl = null;
+					};
+				}}
 				type="text"
 				bind:value={draft}
 				placeholder={listening ? statusLabel || placeholder : placeholder}
@@ -253,7 +335,6 @@
 					'h-9 min-w-0 rounded-xl bg-surface px-3 text-sm text-primary placeholder:text-muted focus:border-brand-400 focus:ring-brand-500/20 flex-1 border transition-shadow outline-none focus:ring-2',
 					listening ? 'border-red-400 ring-red-500/20 ring-2' : 'border-border'
 				]}
-				disabled={loading}
 				onkeydown={handleKeydown}
 				aria-label={placeholder}
 			/>

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

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 export interface AssistantMessage {
     id: string;
     role: 'user' | 'assistant';
@@ -15,7 +15,7 @@ interface AssistantChatProps {
     draft?: string;
     loading?: boolean;
     loadingLabel?: string;
-    /** When false, input stays disabled via `loading` but the spinner bubble is hidden (parent paints status in a message). */
+    /** When false, the spinner bubble is hidden (parent paints status in a message). */
     showLoadingBubble?: boolean;
     error?: string | null;
     voiceEnabled?: boolean;
@@ -28,16 +28,21 @@ interface AssistantChatProps {
     stopMicLabel?: string;
     voiceOnLabel?: string;
     voiceOffLabel?: string;
+    copyChatLabel?: string;
+    copiedChatLabel?: string;
     class?: string;
     result?: Snippet<[AssistantMessage]>;
     footerExtra?: Snippet;
     onsend?: () => void;
     onclose?: () => void;
     onnewchat?: () => void;
+    oncopychat?: () => void | Promise<void>;
     onmicclick?: () => void;
     onvoiceoutputchange?: (on: boolean) => void;
     onsuggestion?: (text: string) => void;
 }
-declare const AssistantChat: import("svelte").Component<AssistantChatProps, {}, "open" | "draft" | "voiceOutput">;
+declare const AssistantChat: import("svelte").Component<AssistantChatProps, {
+    focus: () => void;
+}, "open" | "draft" | "voiceOutput">;
 type AssistantChat = ReturnType<typeof AssistantChat>;
 export default AssistantChat;

package/dist/components/organisms/DashboardGrid/DashboardGrid.stories.js

@@ -4,7 +4,12 @@ const meta = {
     component: DashboardGridStory,
     tags: ['autodocs'],
     parameters: {
-        layout: 'padded'
+        layout: 'padded',
+        docs: {
+            description: {
+                component: 'Responsive dashboard grid. Use `stackBelow` (default `960`, or `false` to disable) to collapse into a single-column reading-order stack when the **grid container** is narrow (ResizeObserver; sidebar-aware). Drag/resize are disabled while stacked.'
+            }
+        }
     },
     argTypes: {
         example: {

package/dist/components/organisms/DashboardGrid/DashboardGrid.svelte

@@ -89,6 +89,12 @@
 		onreset?: () => void;
 		/** Label shown in the drop placeholder while dragging */
 		dropLabel?: string;
+		/**
+		 * Container width (px) below which the grid stacks into a single column.
+		 * Measured on the grid itself (sidebar-aware). Pass `false` to disable.
+		 * Default `960`.
+		 */
+		stackBelow?: number | false;
 	}
 
 	let {
@@ -118,13 +124,15 @@
 		onremove,
 		onadd,
 		onreset,
-		dropLabel = 'Drop here'
+		dropLabel = 'Drop here',
+		stackBelow = 960
 	}: DashboardGridProps = $props();
 
 	const DRAG_THRESHOLD = 6;
 
 	let containerEl: HTMLDivElement | null = null;
 	let ghostEl: HTMLDivElement | null = null;
+	let stacked = $state(false);
 	let draggingId = $state<string | null>(null);
 	let resizingId = $state<string | null>(null);
 	let resizeEdge = $state<WidgetResizeEdge>('se');
@@ -158,6 +166,11 @@
 
 	const contentRows = $derived(layoutBounds(layout).rows);
 	const rows = $derived(Math.max(contentRows + (editable ? padRows : 0), minRows));
+	const displayLayout = $derived.by((): GridItem[] => {
+		if (!stacked) return layout;
+		return [...layout].sort((a, b) => a.y - b.y || a.x - b.x);
+	});
+	const interactionsEnabled = $derived(!stacked);
 	const draggingItem = $derived(layout.find((it) => it.id === draggingId) ?? null);
 	const snapPreview = $derived.by((): GridItem | null => {
 		if (!draggingItem || !dragMoved) return null;
@@ -276,9 +289,36 @@
 		};
 	}
 
+	function syncStacked(width: number) {
+		if (stackBelow === false) {
+			if (stacked) {
+				resetInteraction();
+				stacked = false;
+			}
+			return;
+		}
+		const next = width < stackBelow;
+		if (next === stacked) return;
+		if (next) resetInteraction();
+		stacked = next;
+	}
+
 	function attachContainer(node: HTMLElement) {
 		containerEl = node as HTMLDivElement;
+		if (typeof ResizeObserver === 'undefined') {
+			syncStacked(node.clientWidth);
+			return () => {
+				if (containerEl === node) containerEl = null;
+			};
+		}
+		const ro = new ResizeObserver((entries) => {
+			const w = entries[0]?.contentRect.width ?? node.clientWidth;
+			syncStacked(w);
+		});
+		ro.observe(node);
+		syncStacked(node.clientWidth);
 		return () => {
+			ro.disconnect();
 			if (containerEl === node) containerEl = null;
 		};
 	}
@@ -300,11 +340,12 @@
 		const target = e.target as HTMLElement | null;
 		if (target?.closest('button, a, [data-resize-handle], [data-widget-toolbar]')) return;
 		onselect?.(id);
-		if (draggable) onDragStart(id, e);
+		if (!interactionsEnabled || !draggable) return;
+		onDragStart(id, e);
 	}
 
 	function onDragStart(id: string, e: PointerEvent) {
-		if (!editable || !draggable) return;
+		if (!editable || !draggable || !interactionsEnabled) return;
 		e.preventDefault();
 		e.stopPropagation();
 		const item = layout.find((it) => it.id === id);
@@ -341,7 +382,7 @@
 	}
 
 	function onResizeStart(id: string, e: PointerEvent, edge: WidgetResizeEdge) {
-		if (!editable) return;
+		if (!editable || !interactionsEnabled) return;
 		e.preventDefault();
 		e.stopPropagation();
 		const item = layout.find((it) => it.id === id);
@@ -440,6 +481,11 @@
 	}
 
 	function styleFor(item: GridItem): string {
+		if (stacked) {
+			// Prefer content height; keep a floor from the saved desktop span.
+			const minH = Math.max(item.h * rowHeight, 160);
+			return `width:100%;min-height:${minH}px;height:auto;`;
+		}
 		const x = item.x + 1;
 		const y = item.y + 1;
 		return `grid-column: ${x} / span ${item.w}; grid-row: ${y} / span ${item.h};`;
@@ -455,10 +501,26 @@
 	}
 
 	const gridStyle = $derived(
-		`display:grid;grid-template-columns:repeat(${cols},minmax(0,1fr));grid-auto-rows:${rowHeight}px;gap:${gap}px;min-height:${rows * rowHeight + Math.max(0, rows - 1) * gap}px;`
+		stacked
+			? `display:flex;flex-direction:column;gap:${gap}px;`
+			: `display:grid;grid-template-columns:repeat(${cols},minmax(0,1fr));grid-auto-rows:${rowHeight}px;gap:${gap}px;min-height:${rows * rowHeight + Math.max(0, rows - 1) * gap}px;`
 	);
 
 	const guideRows = $derived(Math.max(rows, minRows));
+	const showGuides = $derived(editable && showGrid && !stacked);
+	const containerOverflowClass = $derived.by(() => {
+		if (stacked) {
+			return editable && showGrid ? 'pt-3 overflow-visible' : 'overflow-visible';
+		}
+		return editable ? 'pt-3 overflow-visible' : 'overflow-hidden';
+	});
+
+	$effect(() => {
+		// Re-evaluate when the breakpoint prop changes (ResizeObserver handles width).
+		void stackBelow;
+		if (containerEl) syncStacked(containerEl.clientWidth);
+		else if (stackBelow === false) syncStacked(0);
+	});
 
 	onDestroy(() => {
 		resetInteraction();
@@ -497,13 +559,13 @@
 			{@attach attachContainer}
 			class={[
 				'rounded-xl relative w-full',
-				editable ? 'pt-3 overflow-visible' : 'overflow-hidden',
-				editable && showGrid && 'ring-border ring-1',
-				editable && 'select-none'
+				containerOverflowClass,
+				showGuides && 'ring-border ring-1',
+				editable && !stacked && 'select-none'
 			]}
 			style={gridStyle}
 		>
-			{#if editable && showGrid}
+			{#if showGuides}
 				{#each Array.from({ length: cols * guideRows }, (_, i) => i) as cell (cell)}
 					{@const cx = cell % cols}
 					{@const cy = Math.floor(cell / cols)}
@@ -516,7 +578,7 @@
 				{/each}
 			{/if}
 
-			{#if draggable && originPreview}
+			{#if interactionsEnabled && draggable && originPreview}
 				<div
 					class="pointer-events-none z-[2] rounded-xl border-2 border-dashed border-muted/60 bg-muted/10"
 					style={styleFor(originPreview)}
@@ -524,7 +586,7 @@
 				></div>
 			{/if}
 
-			{#if draggable && snapPreview}
+			{#if interactionsEnabled && draggable && snapPreview}
 				<div
 					class="pointer-events-none z-[3] rounded-xl border-2 border-dashed border-brand-500 bg-brand-500/20 shadow-[inset_0_0_0_1px_rgba(var(--color-brand-500),0.25)]"
 					style={styleFor(snapPreview)}
@@ -538,16 +600,18 @@
 				</div>
 			{/if}
 
-			{#each layout as item (item.id)}
+			{#each displayLayout as item (item.id)}
 				{@const meta = widgetMeta(item)}
 				{@const clamped = clampItem(item, cols)}
 				{@const selected = selectedId === item.id}
+				{@const canDrag = editable && interactionsEnabled && draggable && !item.static}
+				{@const canResize = editable && interactionsEnabled && !item.static}
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
 					data-grid-id={item.id}
 					class={[
 						'min-h-0 min-w-0 relative z-[1] flex flex-col',
-						editable && draggable && !item.static && 'cursor-grab',
+						canDrag && 'cursor-grab',
 						(draggingId === item.id || resizingId === item.id) && 'z-20',
 						draggingId === item.id && dragMoved && 'pointer-events-none opacity-30',
 						selected && !dragMoved && 'ring-brand-500 ring-offset-surface ring-2 ring-offset-2'
@@ -596,13 +660,13 @@
 						flush={meta.flush ?? false}
 						collapsible={meta.collapsible ?? false}
 						{editable}
-						draggable={editable && draggable && !item.static}
-						resizable={editable && !item.static}
-						resizeEdges={editable ? (['s', 'e', 'se'] as const) : undefined}
+						draggable={canDrag}
+						resizable={canResize}
+						resizeEdges={canResize ? (['s', 'e', 'se'] as const) : undefined}
 						loading={meta.loading}
 						empty={meta.empty}
 						onreload={meta.onReload}
-						class="h-full w-full"
+						class={stacked ? 'min-h-full w-full' : 'h-full w-full'}
 						ondragstart={(e) => onDragStart(item.id, e)}
 						onresizestart={(e, edge) => onResizeStart(item.id, e, edge)}
 					>
@@ -633,7 +697,7 @@
 	{/if}
 </div>
 
-{#if draggable && ghostBox}
+{#if interactionsEnabled && draggable && ghostBox}
 	<div
 		{@attach attachGhost}
 		class="pointer-events-none fixed z-[500]"

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

@@ -61,6 +61,12 @@ interface DashboardGridProps {
     onreset?: () => void;
     /** Label shown in the drop placeholder while dragging */
     dropLabel?: string;
+    /**
+     * Container width (px) below which the grid stacks into a single column.
+     * Measured on the grid itself (sidebar-aware). Pass `false` to disable.
+     * Default `960`.
+     */
+    stackBelow?: number | false;
 }
 declare const DashboardGrid: import("svelte").Component<DashboardGridProps, {
     GridItem: typeof GridItem;

package/package.json

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