@r2digisolutions/components 0.8.0 → 0.8.2

package/dist/components/molecules/Select/Select.svelte

@@ -5,6 +5,8 @@
 	export interface SelectOption {
 		value: string;
 		label: string;
+		/** Secondary line under the label (e.g. email). Also included in search. */
+		hint?: string;
 		disabled?: boolean;
 		children?: SelectOption[];
 	}
@@ -139,7 +141,9 @@
 			const q = searchQuery.toLowerCase();
 			return leafOptions.filter(
 				(o) =>
-					o.label.toLowerCase().includes(q) || (o.breadcrumb?.toLowerCase().includes(q) ?? false)
+					o.label.toLowerCase().includes(q) ||
+					(o.hint?.toLowerCase().includes(q) ?? false) ||
+					(o.breadcrumb?.toLowerCase().includes(q) ?? false)
 			);
 		}
 		return currentLevel.options;
@@ -587,6 +591,8 @@
 						{@const isHighlighted = highlightedIndex === index}
 						{@const hasChildren = Boolean(option.children?.length) && !isSearching}
 						{@const breadcrumb = 'breadcrumb' in option ? option.breadcrumb : undefined}
+						{@const hint = option.hint?.trim() || undefined}
+						{@const secondary = hint ?? breadcrumb}
 						<!-- svelte-ignore a11y_click_events_have_key_events -->
 						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div
@@ -641,7 +647,7 @@
 								<span class={['block truncate', isSelected && 'font-medium']}>
 									{option.label}
 								</span>
-								{#if breadcrumb}
+								{#if secondary}
 									<span
 										class={[
 											'mt-0.5 block truncate text-[11px]',
@@ -650,7 +656,7 @@
 												: 'text-secondary'
 										]}
 									>
-										{breadcrumb}
+										{secondary}
 									</span>
 								{/if}
 							</span>

package/dist/components/molecules/Select/Select.svelte.d.ts

@@ -1,6 +1,8 @@
 export interface SelectOption {
     value: string;
     label: string;
+    /** Secondary line under the label (e.g. email). Also included in search. */
+    hint?: string;
     disabled?: boolean;
     children?: SelectOption[];
 }

package/dist/components/molecules/WidgetFrame/WidgetFrame.svelte

@@ -49,11 +49,12 @@
 		showChrome?: boolean;
 		/** Remove body padding so media/text fill the frame. */
 		flush?: boolean;
-		/**
-		 * Selection chrome for canva: true = selected (border on; handles on hover),
+		/** Selection chrome for canva: true = selected (border on; handles on hover),
 		 * false = hide handles. Default: handles on hover.
 		 */
 		handlesVisible?: boolean;
+		/** Limit which resize edges are shown (grid mode). Default: all edges. */
+		resizeEdges?: WidgetResizeEdge[];
 		/**
 		 * Raise z-index while selected (`handlesVisible`). Canvas layers should
 		 * set `false` so stacking order stays truthful; drag still raises via `mode`.
@@ -106,6 +107,7 @@
 		showChrome = true,
 		flush = false,
 		handlesVisible,
+		resizeEdges,
 		raiseOnSelect = true,
 		stackIndex,
 		transform: frameTransform,
@@ -151,7 +153,14 @@
 	/** Tamaño local cuando resizable sin freeform (EditableChrome, etc.) */
 	let localW = $state<number | null>(null);
 	let localH = $state<number | null>(null);
-	let rootEl = $state<HTMLDivElement | null>(null);
+	let rootEl: HTMLDivElement | null = null;
+
+	function attachRoot(node: HTMLElement) {
+		rootEl = node as HTMLDivElement;
+		return () => {
+			if (rootEl === node) rootEl = null;
+		};
+	}
 
 	const showDragHandle = $derived(showChrome && (editable || freeform) && draggable);
 	const showResizeHandle = $derived((editable || freeform) && resizable && !collapsed);
@@ -379,28 +388,54 @@
 	];
 
 	const freeformEdgesCanva: { edge: WidgetResizeEdge; class: string }[] = [
-		{ edge: 'n', class: 'left-1/2 top-0 h-3 w-3 -translate-x-1/2 -translate-y-1/2 cursor-n-resize' },
-		{ edge: 's', class: 'left-1/2 bottom-0 h-3 w-3 -translate-x-1/2 translate-y-1/2 cursor-s-resize' },
-		{ edge: 'e', class: 'top-1/2 right-0 h-3 w-3 translate-x-1/2 -translate-y-1/2 cursor-e-resize' },
-		{ edge: 'w', class: 'top-1/2 left-0 h-3 w-3 -translate-x-1/2 -translate-y-1/2 cursor-w-resize' },
-		{ edge: 'nw', class: 'left-0 top-0 h-3 w-3 -translate-x-1/2 -translate-y-1/2 cursor-nw-resize' },
-		{ edge: 'ne', class: 'right-0 top-0 h-3 w-3 translate-x-1/2 -translate-y-1/2 cursor-ne-resize' },
-		{ edge: 'sw', class: 'bottom-0 left-0 h-3 w-3 -translate-x-1/2 translate-y-1/2 cursor-sw-resize' },
-		{ edge: 'se', class: 'bottom-0 right-0 h-3 w-3 translate-x-1/2 translate-y-1/2 cursor-se-resize' }
+		{
+			edge: 'n',
+			class: 'left-1/2 top-0 h-3 w-3 -translate-x-1/2 -translate-y-1/2 cursor-n-resize'
+		},
+		{
+			edge: 's',
+			class: 'left-1/2 bottom-0 h-3 w-3 -translate-x-1/2 translate-y-1/2 cursor-s-resize'
+		},
+		{
+			edge: 'e',
+			class: 'top-1/2 right-0 h-3 w-3 translate-x-1/2 -translate-y-1/2 cursor-e-resize'
+		},
+		{
+			edge: 'w',
+			class: 'top-1/2 left-0 h-3 w-3 -translate-x-1/2 -translate-y-1/2 cursor-w-resize'
+		},
+		{
+			edge: 'nw',
+			class: 'left-0 top-0 h-3 w-3 -translate-x-1/2 -translate-y-1/2 cursor-nw-resize'
+		},
+		{
+			edge: 'ne',
+			class: 'right-0 top-0 h-3 w-3 translate-x-1/2 -translate-y-1/2 cursor-ne-resize'
+		},
+		{
+			edge: 'sw',
+			class: 'bottom-0 left-0 h-3 w-3 -translate-x-1/2 translate-y-1/2 cursor-sw-resize'
+		},
+		{
+			edge: 'se',
+			class: 'bottom-0 right-0 h-3 w-3 translate-x-1/2 translate-y-1/2 cursor-se-resize'
+		}
 	];
 
 	const freeformEdges = $derived(isCanva ? freeformEdgesCanva : freeformEdgesDefault);
+	const visibleResizeEdges = $derived.by(() => {
+		const allowed = resizeEdges ?? freeformEdges.map((h) => h.edge);
+		const set = new Set(allowed);
+		return freeformEdges.filter((h) => set.has(h.edge));
+	});
 
 	const rootStyle = $derived.by(() => {
 		if (freeform) {
-			const xf = frameTransform
-				? `transform:${frameTransform};transform-origin:0 0;`
-				: '';
+			const xf = frameTransform ? `transform:${frameTransform};transform-origin:0 0;` : '';
 			return `left:${rect.x}px;top:${rect.y}px;width:${rect.w}px;height:${collapsed ? 'auto' : `${rect.h}px`};z-index:${paintZ};${xf}`;
 		}
 		if (localW != null) {
-			const h =
-				collapsed || localH == null ? 'auto' : `${localH}px`;
+			const h = collapsed || localH == null ? 'auto' : `${localH}px`;
 			return `width:${localW}px;height:${h};`;
 		}
 		return undefined;
@@ -427,7 +462,7 @@
 		return [
 			'absolute z-10 touch-none rounded-sm bg-transparent transition-colors',
 			'hover:bg-brand-500/70 focus-visible:bg-brand-500/70 focus-visible:outline-none',
-			mode === 'resize'
+			mode === 'resize' || handlesVisible === true
 				? 'pointer-events-auto bg-brand-500/40'
 				: 'pointer-events-none group-hover/widget:pointer-events-auto group-hover/widget:bg-brand-500/35'
 		].join(' ');
@@ -436,23 +471,34 @@
 	const canvaBorder = $derived(
 		isCanva && (handlesVisible === true || mode === 'resize' || mode === 'move')
 	);
+
+	/** `h-full` from parents must not win when collapsed — otherwise the card shell fills the grid cell empty. */
+	const frameClassName = $derived.by(() => {
+		if (!collapsed) return className;
+		const base = className
+			? String(className)
+					.split(/\s+/)
+					.filter((token) => token && token !== 'h-full' && token !== 'min-h-0')
+			: [];
+		return [...base, 'h-auto', 'max-h-fit', 'self-start', 'shrink-0'].join(' ');
+	});
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	bind:this={rootEl}
+	{@attach attachRoot}
 	class={[
-		'group/widget flex min-h-0 min-w-0 flex-col overflow-visible',
-		!isCanva && 'overflow-hidden rounded-xl border border-border bg-surface-elevated',
+		'group/widget min-h-0 min-w-0 flex flex-col overflow-visible',
+		!isCanva && showChrome && 'rounded-xl border-border bg-surface-elevated overflow-hidden border',
+		!isCanva && !showChrome && 'bg-transparent',
 		isCanva && 'bg-transparent',
 		canvaBorder && 'outline outline-2 outline-[#3b82f6]',
-		freeform ? 'absolute shadow-md' : 'relative',
+		freeform ? 'shadow-md absolute' : 'relative',
 		isCanva && 'shadow-none',
-		collapsed && 'h-auto self-start',
 		mode === 'move' && 'cursor-grabbing opacity-95',
-		mode === 'resize' && !isCanva && 'ring-1 ring-brand-500/40',
+		mode === 'resize' && !isCanva && 'ring-brand-500/40 ring-1',
 		!showChrome && freeform && draggable && 'cursor-move',
-		className
+		frameClassName
 	]}
 	style={rootStyle}
 	onpointerdown={(e) => {
@@ -470,16 +516,14 @@
 	{#if showHeader}
 		<div
 			class={[
-				'flex shrink-0 items-center gap-2 border-b border-border px-3 py-2.5',
+				'gap-2 border-border px-3 py-2.5 flex shrink-0 items-center border-b',
 				showDragHandle && 'touch-none',
 				collapsed && 'border-b-0'
 			]}
 			onpointerdown={(e) => {
-				// En freeform, permite arrastrar desde el header completo.
-				// Excluimos botones para no interferir con reload/collapse/remove.
-				if (!freeform || !showDragHandle) return;
+				if (!showDragHandle) return;
 				const target = e.target as HTMLElement;
-				if (target?.closest('button')) return;
+				if (target?.closest('button, a, [data-resize-handle]')) return;
 				beginMove(e);
 			}}
 		>
@@ -492,23 +536,20 @@
 						beginMove(e);
 					}}
 				>
-					<DragHandle
-						size={freeform ? 'md' : 'sm'}
-						label={`Drag ${title ?? 'widget'}`}
-					/>
+					<DragHandle size={freeform ? 'md' : 'sm'} label={`Drag ${title ?? 'widget'}`} />
 				</div>
 			{/if}
 
 			<div class="min-w-0 flex-1">
 				{#if title}
-					<h3 class="truncate text-sm font-semibold leading-none text-primary">{title}</h3>
+					<h3 class="text-sm font-semibold text-primary truncate leading-none">{title}</h3>
 				{/if}
 				{#if description}
-					<p class="mt-0.5 truncate text-[11px] leading-none text-muted">{description}</p>
+					<p class="mt-0.5 text-muted truncate text-[11px] leading-none">{description}</p>
 				{/if}
 			</div>
 
-			<div class="flex shrink-0 items-center gap-0.5">
+			<div class="gap-0.5 flex shrink-0 items-center">
 				{#if actions}
 					{@render actions()}
 				{/if}
@@ -521,10 +562,7 @@
 						disabled={busy}
 						onclick={() => handleReload()}
 					>
-						<RefreshCw
-							class={['h-3.5 w-3.5', busy && 'animate-spin']}
-							aria-hidden="true"
-						/>
+						<RefreshCw class={['h-3.5 w-3.5', busy && 'animate-spin']} aria-hidden="true" />
 					</button>
 				{/if}
 
@@ -552,7 +590,11 @@
 						type="button"
 						class={[btnClass, 'hover:bg-red-500/10 hover:text-red-600']}
 						aria-label={`Remove ${title ?? 'widget'}`}
-						onclick={() => onremove?.()}
+						onpointerdown={(e) => e.stopPropagation()}
+						onclick={(e) => {
+							e.stopPropagation();
+							onremove?.();
+						}}
 					>
 						<X class="h-3.5 w-3.5" aria-hidden="true" />
 					</button>
@@ -562,16 +604,11 @@
 	{/if}
 
 	{#if !collapsed}
-		<div
-			class={[
-				'relative min-h-0 flex-1',
-				flush ? 'overflow-hidden p-0' : 'overflow-auto p-3'
-			]}
-		>
+		<div class={['min-h-0 relative flex-1', flush ? 'p-0 overflow-hidden' : 'p-3 overflow-auto']}>
 			{#if busy}
 				{#if loadingMode === 'spinner'}
 					<div
-						class="flex min-h-32 flex-col items-center justify-center gap-2"
+						class="min-h-32 gap-2 flex flex-col items-center justify-center"
 						aria-busy="true"
 						aria-live="polite"
 					>
@@ -588,10 +625,10 @@
 				{/if}
 			{:else if empty}
 				<div
-					class="flex h-full min-h-32 flex-col items-center justify-center rounded-lg border border-dashed border-border bg-surface/50 px-4 py-6 text-center"
+					class="min-h-32 rounded-lg border-border bg-surface/50 px-4 py-6 flex h-full flex-col items-center justify-center border border-dashed text-center"
 				>
 					<div
-						class="mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-brand-50 text-brand-600 dark:bg-brand-950/50 dark:text-brand-400"
+						class="mb-3 h-10 w-10 rounded-xl bg-brand-50 text-brand-600 dark:bg-brand-950/50 dark:text-brand-400 flex items-center justify-center"
 					>
 						<svg
 							viewBox="0 0 24 24"
@@ -614,8 +651,7 @@
 	{/if}
 
 	{#if showResizeHandle}
-		{#each freeformEdges as h (h.edge)}
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
+		{#each visibleResizeEdges as h (h.edge)}
 			<div
 				data-resize-handle
 				class={[edgeAccent, h.class]}
@@ -630,12 +666,18 @@
 			<!-- SE grip (visual only, small) -->
 			<div
 				class={[
-					'pointer-events-none absolute bottom-0.5 right-0.5 z-20 flex h-2.5 w-2.5 items-center justify-center',
-					'text-muted/60 transition-colors group-hover/widget:text-brand-500'
+					'bottom-0.5 right-0.5 h-2.5 w-2.5 pointer-events-none absolute z-20 flex items-center justify-center',
+					'text-muted/60 group-hover/widget:text-brand-500 transition-colors'
 				]}
 				aria-hidden="true"
 			>
-				<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.75" class="h-2.5 w-2.5">
+				<svg
+					viewBox="0 0 12 12"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1.75"
+					class="h-2.5 w-2.5"
+				>
 					<path stroke-linecap="round" d="M7 11L11 7M4 11L11 4" />
 				</svg>
 			</div>

package/dist/components/molecules/WidgetFrame/WidgetFrame.svelte.d.ts

@@ -33,11 +33,12 @@ interface WidgetFrameProps {
     showChrome?: boolean;
     /** Remove body padding so media/text fill the frame. */
     flush?: boolean;
-    /**
-     * Selection chrome for canva: true = selected (border on; handles on hover),
+    /** Selection chrome for canva: true = selected (border on; handles on hover),
      * false = hide handles. Default: handles on hover.
      */
     handlesVisible?: boolean;
+    /** Limit which resize edges are shown (grid mode). Default: all edges. */
+    resizeEdges?: WidgetResizeEdge[];
     /**
      * Raise z-index while selected (`handlesVisible`). Canvas layers should
      * set `false` so stacking order stays truthful; drag still raises via `mode`.

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

@@ -1,11 +1,14 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import { onDestroy, type Snippet } from 'svelte';
+	import Pencil from '@lucide/svelte/icons/pencil';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
 	import WidgetFrame from '../../molecules/WidgetFrame/WidgetFrame.svelte';
 	import type { WidgetResizeEdge } from '../../molecules/WidgetFrame/WidgetFrame.svelte';
 	import DashboardGridToolbar from '../../molecules/DashboardGridToolbar/DashboardGridToolbar.svelte';
 	import EmptyState from '../../molecules/EmptyState/EmptyState.svelte';
 	import Button from '../../atoms/Button/Button.svelte';
 	import Badge from '../../atoms/Badge/Badge.svelte';
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
 	import {
 		type GridItem,
 		type GridDensity,
@@ -31,6 +34,14 @@
 		type?: string;
 		loading?: boolean;
 		empty?: boolean;
+		/** When false, no card border/header (frameless body). Default true. */
+		showChrome?: boolean;
+		/** Remove body padding (often with frameless). */
+		flush?: boolean;
+		/** Show collapse control in header. Ignored when showChrome is false. */
+		collapsible?: boolean;
+		/** Called when the user clicks reload in the header. */
+		onReload?: () => void | Promise<void>;
 	}
 
 	export interface DashboardGridSettings {
@@ -51,6 +62,8 @@
 		rowHeight?: number;
 		gap?: number;
 		editable?: boolean;
+		/** Allow drag-to-move (off = use config panel / toolbar instead) */
+		draggable?: boolean;
 		compact?: boolean;
 		/** Draw dashed cell guides */
 		showGrid?: boolean;
@@ -68,9 +81,14 @@
 		render?: Snippet<[DashboardWidgetMeta, GridItem]>;
 		onchange?: (layout: GridItem[]) => void;
 		onsettingschange?: (settings: DashboardGridSettings) => void;
+		onselect?: (id: string) => void;
+		onedit?: (id: string) => void;
+		selectedId?: string | null;
 		onremove?: (id: string) => void;
 		onadd?: () => void;
 		onreset?: () => void;
+		/** Label shown in the drop placeholder while dragging */
+		dropLabel?: string;
 	}
 
 	let {
@@ -80,6 +98,7 @@
 		rowHeight = $bindable(DEFAULT_ROW_HEIGHT),
 		gap = $bindable(DEFAULT_GAP),
 		editable = $bindable(false),
+		draggable = true,
 		compact = $bindable(true),
 		showGrid = $bindable(true),
 		showToolbar = false,
@@ -93,30 +112,65 @@
 		render,
 		onchange,
 		onsettingschange,
+		onselect,
+		onedit,
+		selectedId = null,
 		onremove,
 		onadd,
-		onreset
+		onreset,
+		dropLabel = 'Drop here'
 	}: DashboardGridProps = $props();
 
-	let containerEl = $state<HTMLDivElement | null>(null);
+	const DRAG_THRESHOLD = 6;
+
+	let containerEl: HTMLDivElement | null = null;
+	let ghostEl: HTMLDivElement | null = null;
 	let draggingId = $state<string | null>(null);
 	let resizingId = $state<string | null>(null);
 	let resizeEdge = $state<WidgetResizeEdge>('se');
 	let origin = $state({ x: 0, y: 0, itemX: 0, itemY: 0, itemW: 0, itemH: 0 });
+	let dragMoved = $state(false);
+	let listening = $state(false);
+	let snapX = $state(0);
+	let snapY = $state(0);
+	let ghostBox = $state<{
+		left: number;
+		top: number;
+		width: number;
+		height: number;
+		title: string;
+	} | null>(null);
+	let lastDx = 0;
+	let lastDy = 0;
 
-	const metaById = $derived.by(() => {
-		const map = new Map<string, DashboardWidgetMeta>();
-		for (const w of widgets) map.set(w.id, w);
+	const metaById = $derived.by((): Record<string, DashboardWidgetMeta> => {
+		const map: Record<string, DashboardWidgetMeta> = {};
+		for (const w of widgets) map[w.id] = w;
 		for (const it of layout) {
-			if (!map.has(it.id)) map.set(it.id, { id: it.id, title: it.id });
+			if (!map[it.id]) map[it.id] = { id: it.id, title: it.id };
 		}
 		return map;
 	});
 
+	function widgetMeta(item: GridItem): DashboardWidgetMeta {
+		return metaById[item.id] ?? { id: item.id, title: item.id };
+	}
+
 	const contentRows = $derived(layoutBounds(layout).rows);
-	const rows = $derived(
-		Math.max(contentRows + (editable ? padRows : 0), minRows)
-	);
+	const rows = $derived(Math.max(contentRows + (editable ? padRows : 0), minRows));
+	const draggingItem = $derived(layout.find((it) => it.id === draggingId) ?? null);
+	const snapPreview = $derived.by((): GridItem | null => {
+		if (!draggingItem || !dragMoved) return null;
+		return clampItem({ ...draggingItem, x: snapX, y: snapY }, cols);
+	});
+	const originPreview = $derived.by((): GridItem | null => {
+		if (!draggingItem || !dragMoved) return null;
+		if (snapX === origin.itemX && snapY === origin.itemY) return null;
+		return clampItem(
+			{ ...draggingItem, x: origin.itemX, y: origin.itemY },
+			cols
+		);
+	});
 
 	function cellSize(): { cw: number; rh: number } {
 		const width = containerEl?.clientWidth ?? 0;
@@ -160,13 +214,107 @@
 		emitSettings();
 	}
 
-	function onDragStart(id: string, e: PointerEvent) {
+	function attachWindowListeners() {
+		if (listening || typeof window === 'undefined') return;
+		listening = true;
+		window.addEventListener('pointermove', onPointerMove);
+		window.addEventListener('pointerup', onPointerUp);
+		window.addEventListener('pointercancel', onPointerUp);
+		window.addEventListener('keydown', onKeyDown);
+	}
+
+	function detachWindowListeners() {
+		if (!listening || typeof window === 'undefined') return;
+		listening = false;
+		window.removeEventListener('pointermove', onPointerMove);
+		window.removeEventListener('pointerup', onPointerUp);
+		window.removeEventListener('pointercancel', onPointerUp);
+		window.removeEventListener('keydown', onKeyDown);
+	}
+
+	function unlockPointerChrome() {
+		if (typeof document === 'undefined') return;
+		document.body.style.userSelect = '';
+		document.body.style.cursor = '';
+	}
+
+	function lockPointerChrome() {
+		if (typeof document === 'undefined') return;
+		document.body.style.userSelect = 'none';
+		document.body.style.cursor = 'grabbing';
+	}
+
+	function mountGhostClone(node: HTMLDivElement) {
+		node.replaceChildren();
+		const cell = draggingId
+			? containerEl?.querySelector(`[data-grid-id="${CSS.escape(draggingId)}"]`)
+			: null;
+		if (cell instanceof HTMLElement) {
+			const clone = cell.cloneNode(true) as HTMLElement;
+			clone.querySelector('[data-widget-toolbar]')?.remove();
+			clone.style.pointerEvents = 'none';
+			clone.classList.add('shadow-none', 'ring-0');
+			node.appendChild(clone);
+		}
+		return () => {
+			node.replaceChildren();
+		};
+	}
+
+	function applyGhostTransform(dx: number, dy: number) {
+		lastDx = dx;
+		lastDy = dy;
+		if (!ghostEl) return;
+		ghostEl.style.transform = `translate(${dx}px, ${dy}px) rotate(-1deg) scale(1.02)`;
+	}
+
+	function attachGhost(node: HTMLElement) {
+		ghostEl = node as HTMLDivElement;
+		applyGhostTransform(lastDx, lastDy);
+		return () => {
+			if (ghostEl === node) ghostEl = null;
+		};
+	}
+
+	function attachContainer(node: HTMLElement) {
+		containerEl = node as HTMLDivElement;
+		return () => {
+			if (containerEl === node) containerEl = null;
+		};
+	}
+
+	function resetInteraction() {
+		draggingId = null;
+		resizingId = null;
+		dragMoved = false;
+		ghostBox = null;
+		lastDx = 0;
+		lastDy = 0;
+		unlockPointerChrome();
+		detachWindowListeners();
+	}
+
+	function onCellPointerDown(id: string, e: PointerEvent) {
 		if (!editable) return;
+		if (e.button !== 0 && e.pointerType === 'mouse') return;
+		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);
+	}
+
+	function onDragStart(id: string, e: PointerEvent) {
+		if (!editable || !draggable) return;
 		e.preventDefault();
 		e.stopPropagation();
 		const item = layout.find((it) => it.id === id);
 		if (!item || item.static) return;
+		onselect?.(id);
 		draggingId = id;
+		dragMoved = false;
+		ghostBox = null;
+		snapX = item.x;
+		snapY = item.y;
 		origin = {
 			x: e.clientX,
 			y: e.clientY,
@@ -175,7 +323,21 @@
 			itemW: item.w,
 			itemH: item.h
 		};
-		(e.currentTarget as HTMLElement | null)?.setPointerCapture?.(e.pointerId);
+		attachWindowListeners();
+	}
+
+	function beginLift(id: string) {
+		const cell = containerEl?.querySelector(`[data-grid-id="${CSS.escape(id)}"]`);
+		if (!(cell instanceof HTMLElement)) return;
+		const r = cell.getBoundingClientRect();
+		ghostBox = {
+			left: r.left,
+			top: r.top,
+			width: r.width,
+			height: r.height,
+			title: metaById[id]?.title ?? id
+		};
+		lockPointerChrome();
 	}
 
 	function onResizeStart(id: string, e: PointerEvent, edge: WidgetResizeEdge) {
@@ -184,8 +346,10 @@
 		e.stopPropagation();
 		const item = layout.find((it) => it.id === id);
 		if (!item || item.static) return;
+		onselect?.(id);
 		resizingId = id;
 		resizeEdge = edge;
+		dragMoved = false;
 		origin = {
 			x: e.clientX,
 			y: e.clientY,
@@ -195,29 +359,43 @@
 			itemH: item.h
 		};
 		(e.target as HTMLElement)?.setPointerCapture?.(e.pointerId);
+		attachWindowListeners();
 	}
 
 	function onPointerMove(e: PointerEvent) {
-		const { cw, rh } = cellSize();
-		if (cw <= 0) return;
-
 		if (draggingId) {
-			const dx = Math.round((e.clientX - origin.x) / (cw + gap));
-			const dy = Math.round((e.clientY - origin.y) / (rh + gap));
-			emit(
-				updateItem(
-					layout,
-					draggingId,
-					{ x: origin.itemX + dx, y: origin.itemY + dy },
-					{ cols, compact }
-				)
+			const dx = e.clientX - origin.x;
+			const dy = e.clientY - origin.y;
+			if (!dragMoved) {
+				if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+				dragMoved = true;
+				beginLift(draggingId);
+			}
+			applyGhostTransform(dx, dy);
+			const { cw, rh } = cellSize();
+			if (cw <= 0) return;
+			const colDx = Math.round(dx / (cw + gap));
+			const rowDy = Math.round(dy / (rh + gap));
+			const item = layout.find((it) => it.id === draggingId);
+			if (!item) return;
+			const snapped = clampItem(
+				{ ...item, x: origin.itemX + colDx, y: origin.itemY + rowDy },
+				cols
 			);
+			if (snapped.x !== snapX || snapped.y !== snapY) {
+				snapX = snapped.x;
+				snapY = snapped.y;
+			}
 			return;
 		}
 
+		const { cw, rh } = cellSize();
+		if (cw <= 0) return;
+
 		if (resizingId) {
 			const dx = Math.round((e.clientX - origin.x) / (cw + gap));
 			const dy = Math.round((e.clientY - origin.y) / (rh + gap));
+			if (dx !== 0 || dy !== 0) dragMoved = true;
 			const current = layout.find((it) => it.id === resizingId);
 			if (!current) return;
 			const next = resizeItemByEdge(
@@ -236,18 +414,29 @@
 				dy,
 				cols
 			);
-			// No compact while resizing — west/north must keep the anchored edge stable
 			emit(updateItem(layout, resizingId, next, { cols, compact: false }));
 		}
 	}
 
 	function onPointerUp() {
+		const id = draggingId;
+		const moved = dragMoved;
 		const wasResizing = !!resizingId;
-		draggingId = null;
-		resizingId = null;
+		if (id && moved) {
+			emit(updateItem(layout, id, { x: snapX, y: snapY }, { cols, compact }));
+		}
 		if (wasResizing && compact) {
 			emit(compactLayout(layout, cols));
 		}
+		resetInteraction();
+	}
+
+	function onKeyDown(e: KeyboardEvent) {
+		if (e.key !== 'Escape') return;
+		if (draggingId || resizingId) {
+			e.preventDefault();
+			resetInteraction();
+		}
 	}
 
 	function styleFor(item: GridItem): string {
@@ -257,11 +446,8 @@
 	}
 
 	function handleRemove(id: string) {
-		if (onremove) {
-			onremove(id);
-			return;
-		}
 		emit(removeItem(layout, id, { cols, compact }));
+		onremove?.(id);
 	}
 
 	function handleCompactNow() {
@@ -273,9 +459,13 @@
 	);
 
 	const guideRows = $derived(Math.max(rows, minRows));
+
+	onDestroy(() => {
+		resetInteraction();
+	});
 </script>
 
-<div class={['w-full space-y-4', className]}>
+<div class={['space-y-4 w-full', className]}>
 	{#if showToolbar}
 		<DashboardGridToolbar
 			{cols}
@@ -286,7 +476,7 @@
 			{showGrid}
 			{density}
 			oncompact={handleCompactNow}
-			onreset={onreset}
+			{onreset}
 			onchange={applySettings}
 		/>
 	{/if}
@@ -304,15 +494,14 @@
 	{:else}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
-			bind:this={containerEl}
+			{@attach attachContainer}
 			class={[
-				'relative w-full overflow-hidden rounded-xl',
-				editable && showGrid && 'ring-1 ring-border'
+				'rounded-xl relative w-full',
+				editable ? 'pt-3 overflow-visible' : 'overflow-hidden',
+				editable && showGrid && 'ring-border ring-1',
+				editable && 'select-none'
 			]}
 			style={gridStyle}
-			onpointermove={onPointerMove}
-			onpointerup={onPointerUp}
-			onpointercancel={onPointerUp}
 		>
 			{#if editable && showGrid}
 				{#each Array.from({ length: cols * guideRows }, (_, i) => i) as cell (cell)}
@@ -320,55 +509,112 @@
 					{@const cy = Math.floor(cell / cols)}
 					{@const cellStyle = `grid-column:${cx + 1};grid-row:${cy + 1};`}
 					<div
-						class="pointer-events-none rounded-lg border border-dashed border-border/50 bg-surface-overlay/25"
+						class="rounded-lg border-border/50 bg-surface-overlay/25 pointer-events-none border border-dashed"
 						style={cellStyle}
 						aria-hidden="true"
 					></div>
 				{/each}
 			{/if}
 
+			{#if draggable && originPreview}
+				<div
+					class="pointer-events-none z-[2] rounded-xl border-2 border-dashed border-muted/60 bg-muted/10"
+					style={styleFor(originPreview)}
+					aria-hidden="true"
+				></div>
+			{/if}
+
+			{#if 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)}
+					aria-hidden="true"
+				>
+					<div
+						class="flex h-full items-center justify-center rounded-[inherit] bg-brand-500/10 text-xs font-semibold tracking-wide text-brand-600 uppercase"
+					>
+						{dropLabel}
+					</div>
+				</div>
+			{/if}
+
 			{#each layout as item (item.id)}
-				{@const meta = metaById.get(item.id)!}
+				{@const meta = widgetMeta(item)}
 				{@const clamped = clampItem(item, cols)}
+				{@const selected = selectedId === item.id}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
+					data-grid-id={item.id}
 					class={[
-						'relative z-[1] min-h-0 min-w-0',
-						(draggingId === item.id || resizingId === item.id) && 'z-10 opacity-95'
+						'min-h-0 min-w-0 relative z-[1] flex flex-col',
+						editable && draggable && !item.static && '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'
 					]}
 					style={styleFor(clamped)}
+					onpointerdown={(e) => onCellPointerDown(item.id, e)}
 				>
-					{#if editable && showSizeBadge}
-						<span class="pointer-events-none absolute right-2 top-2 z-20">
-							<Badge size="sm" variant="secondary" class="tabular-nums">
-								{clamped.w}×{clamped.h}
-								{#if item.static}
-									· locked
-								{/if}
-							</Badge>
-						</span>
+					{#if editable && !item.static}
+						<div
+							data-widget-toolbar
+							class="-top-3 right-2 gap-0.5 absolute z-30 flex items-center"
+							onpointerdown={(e) => e.stopPropagation()}
+						>
+							{#if showSizeBadge}
+								<Badge size="sm" variant="secondary" class="shadow-sm tabular-nums">
+									{clamped.w}×{clamped.h}
+								</Badge>
+							{/if}
+							<IconButton
+								size="xs"
+								variant={selected ? 'primary' : 'secondary'}
+								label={`Edit ${meta.title ?? 'widget'}`}
+								class="shadow-sm"
+								onclick={() => {
+									onselect?.(item.id);
+									onedit?.(item.id);
+								}}
+							>
+								<Pencil />
+							</IconButton>
+							<IconButton
+								size="xs"
+								variant="destructive"
+								label={`Remove ${meta.title ?? 'widget'}`}
+								class="shadow-sm"
+								onclick={() => handleRemove(item.id)}
+							>
+								<Trash2 />
+							</IconButton>
+						</div>
 					{/if}
 					<WidgetFrame
 						title={meta.title}
 						description={meta.description}
+						showChrome={meta.showChrome ?? true}
+						flush={meta.flush ?? false}
+						collapsible={meta.collapsible ?? false}
 						{editable}
-						draggable={editable && !item.static}
+						draggable={editable && draggable && !item.static}
 						resizable={editable && !item.static}
+						resizeEdges={editable ? (['s', 'e', 'se'] as const) : undefined}
 						loading={meta.loading}
 						empty={meta.empty}
+						onreload={meta.onReload}
 						class="h-full"
 						ondragstart={(e) => onDragStart(item.id, e)}
 						onresizestart={(e, edge) => onResizeStart(item.id, e, edge)}
-						onremove={editable && !item.static ? () => handleRemove(item.id) : undefined}
 					>
 						{#if render}
 							{@render render(meta, clamped)}
 						{:else}
-							<div class="flex h-full flex-col justify-between gap-2 p-3">
+							<div class="gap-2 p-3 flex h-full flex-col justify-between">
 								<p class="text-sm text-muted">
 									Widget “{meta.type ?? meta.id}”
 								</p>
 								{#if editable}
-									<p class="text-[11px] tabular-nums text-muted">
+									<p class="text-muted text-[11px] tabular-nums">
 										col {clamped.x + 1} · row {clamped.y + 1}
 									</p>
 								{/if}
@@ -386,3 +632,17 @@
 		{/if}
 	{/if}
 </div>
+
+{#if draggable && ghostBox}
+	<div
+		{@attach attachGhost}
+		class="pointer-events-none fixed z-[500]"
+		style={`left:${ghostBox.left}px;top:${ghostBox.top}px;width:${ghostBox.width}px;height:${ghostBox.height}px;transform-origin:center;`}
+		aria-hidden="true"
+	>
+		<div
+			{@attach mountGhostClone}
+			class="h-full w-full overflow-hidden rounded-xl border-2 border-brand-500 bg-surface-elevated shadow-2xl"
+		></div>
+	</div>
+{/if}

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

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import { type GridItem, type GridDensity } from '../../../utils/layoutGrid.js';
 export type DashboardGridDensity = GridDensity;
 export interface DashboardWidgetMeta {
@@ -8,6 +8,14 @@ export interface DashboardWidgetMeta {
     type?: string;
     loading?: boolean;
     empty?: boolean;
+    /** When false, no card border/header (frameless body). Default true. */
+    showChrome?: boolean;
+    /** Remove body padding (often with frameless). */
+    flush?: boolean;
+    /** Show collapse control in header. Ignored when showChrome is false. */
+    collapsible?: boolean;
+    /** Called when the user clicks reload in the header. */
+    onReload?: () => void | Promise<void>;
 }
 export interface DashboardGridSettings {
     cols: number;
@@ -26,6 +34,8 @@ interface DashboardGridProps {
     rowHeight?: number;
     gap?: number;
     editable?: boolean;
+    /** Allow drag-to-move (off = use config panel / toolbar instead) */
+    draggable?: boolean;
     compact?: boolean;
     /** Draw dashed cell guides */
     showGrid?: boolean;
@@ -43,9 +53,14 @@ interface DashboardGridProps {
     render?: Snippet<[DashboardWidgetMeta, GridItem]>;
     onchange?: (layout: GridItem[]) => void;
     onsettingschange?: (settings: DashboardGridSettings) => void;
+    onselect?: (id: string) => void;
+    onedit?: (id: string) => void;
+    selectedId?: string | null;
     onremove?: (id: string) => void;
     onadd?: () => void;
     onreset?: () => void;
+    /** Label shown in the drop placeholder while dragging */
+    dropLabel?: string;
 }
 declare const DashboardGrid: import("svelte").Component<DashboardGridProps, {
     GridItem: typeof GridItem;

package/dist/utils/layoutGrid.d.ts

@@ -24,7 +24,7 @@ export declare const DEFAULT_GAP = 12;
 export declare function clampItem(item: GridItem, cols?: number): GridItem;
 export declare function rectsOverlap(a: GridItem, b: GridItem): boolean;
 export declare function findCollisions(layout: GridItem[], item: GridItem): GridItem[];
-/** Push colliding items down (simple collision resolution). */
+/** Push colliding items down (simple collision resolution). The moved item keeps its target slot. */
 export declare function resolveCollisions(layout: GridItem[], moved: GridItem, cols?: number): GridItem[];
 /** Compact items upward to remove vertical gaps. */
 export declare function compactLayout(layout: GridItem[], cols?: number): GridItem[];

package/dist/utils/layoutGrid.js

@@ -24,29 +24,31 @@ export function rectsOverlap(a, b) {
 export function findCollisions(layout, item) {
     return layout.filter((other) => other.id !== item.id && rectsOverlap(item, other));
 }
-/** Push colliding items down (simple collision resolution). */
+/** Push colliding items down (simple collision resolution). The moved item keeps its target slot. */
 export function resolveCollisions(layout, moved, cols = DEFAULT_COLS) {
-    const next = layout.map((it) => (it.id === moved.id ? clampItem(moved, cols) : { ...it }));
-    const idx = next.findIndex((it) => it.id === moved.id);
-    if (idx < 0)
-        return next;
-    const sorted = [...next].sort((a, b) => a.y - b.y || a.x - b.x);
-    const result = [];
-    for (const item of sorted) {
-        let current = clampItem(item, cols);
-        if (current.static) {
-            result.push(current);
-            continue;
-        }
+    const target = clampItem(moved, cols);
+    const others = layout
+        .filter((it) => it.id !== target.id)
+        .map((it) => clampItem(it, cols))
+        .sort((a, b) => a.y - b.y || a.x - b.x);
+    const placed = [];
+    const pushUntilClear = (item) => {
+        if (item.static)
+            return item;
+        let current = item;
         let safety = 0;
-        while (result.some((other) => rectsOverlap(current, other)) && safety < 200) {
-            const blocker = result.find((other) => rectsOverlap(current, other));
+        while (placed.some((other) => rectsOverlap(current, other)) && safety < 200) {
+            const blocker = placed.find((other) => rectsOverlap(current, other));
             current = { ...current, y: blocker.y + blocker.h };
             safety++;
         }
-        result.push(current);
+        return current;
+    };
+    placed.push(target.static ? target : pushUntilClear(target));
+    for (const item of others) {
+        placed.push(item.static ? item : pushUntilClear(item));
     }
-    return result;
+    return placed;
 }
 /** Compact items upward to remove vertical gaps. */
 export function compactLayout(layout, cols = DEFAULT_COLS) {

package/package.json

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