@r2digisolutions/ui 0.26.11 → 0.27.0

package/dist/components/container/DataTable/DataTable.svelte

@@ -44,6 +44,7 @@
 		filterFields
 	}: Props<T> = $props();
 
+	// Layout constants
 	const CHECK_W = 64;
 	const ACTION_W = 56;
 	const EXPAND_W = 40;
@@ -60,18 +61,21 @@
 		density === 'compact' ? 'py-2' : density === 'comfortable' ? 'py-4' : 'py-3'
 	);
 
-	await manager.load();
+	// Importante: dejamos que el propio manager se encargue de la carga
+	// vía su efecto interno en el constructor. No hacemos `await manager.load()` aquí.
 
+	// Ajustar ancho reservado para checkbox / expand / actions
 	$effect(() => {
 		const hasActions = !!rowActions;
 		const reserved =
 			CHECK_W +
 			(expandIconPosition === 'end' && !hasActions ? EXPAND_W : 0) +
 			(hasActions ? ACTION_W : 0);
+
 		manager.setReservedWidth(reserved);
 	});
 
-	// Reflow ancho
+	// Reflow ancho por ResizeObserver
 	$effect(() => {
 		if (!container) return;
 		const ro = new ResizeObserver((entries) => {
@@ -82,29 +86,42 @@
 		return () => ro.disconnect();
 	});
 
-	// Medir DOM
+	// Medir DOM para calcular anchos de columnas
 	const SAMPLE_ROWS = 10;
+
 	async function measureColumns() {
 		await tick();
 		if (!container) return;
+
 		const widths: Record<string, number> = {};
+
 		for (const c of manager.columns) {
 			const head = container.querySelector(`[data-dt-head="${c.id}"]`) as HTMLElement | null;
+
 			let maxW = head ? head.offsetWidth : 0;
+
 			const cells = Array.from(
 				container.querySelectorAll(`[data-dt-cell="1"][data-col-id="${c.id}"]`)
 			).slice(0, SAMPLE_ROWS) as HTMLElement[];
-			for (const el of cells) maxW = Math.max(maxW, el.offsetWidth);
+
+			for (const el of cells) {
+				maxW = Math.max(maxW, el.offsetWidth);
+			}
+
 			if (c.minWidth != null) maxW = Math.max(maxW, c.minWidth);
 			if (c.width != null) maxW = Math.max(maxW, c.width);
+
 			widths[c.id] = Math.ceil(maxW + 16);
 		}
+
 		manager.setMeasuredWidths(widths);
+
 		const rect = container.getBoundingClientRect();
 		manager.reflowForWidth(Math.floor(rect.width));
 		measuring = false;
 	}
 
+	// Lanzar medición cuando ya haya datos cargados
 	$effect(() => {
 		if (!manager.state.ready) return;
 		measuring = true;
@@ -124,8 +141,10 @@
 	) {
 		e.preventDefault();
 		const columnIndex = columnId ? manager.state.visibleColumns.indexOf(columnId) : null;
-		// Reset menu state and set new coordinates
+
+		// Reset del menú para evitar glitches de posición
 		rightMenu = { open: false, x: 0, y: 0 };
+
 		tick().then(() => {
 			rightMenu = { open: true, x: e.clientX, y: e.clientY };
 			rightClickContext = {
@@ -144,12 +163,10 @@
 		return manager.state.items.filter((r) => ids.has(rowId(r)));
 	}
 
-	const selectedRowsItems = $derived.by(() => {
-		return selectedRows();
-	});
+	const selectedRowsItems = $derived.by(() => selectedRows());
 
-	function colTrack(cId: string, measuring: boolean) {
-		if (measuring) return 'max-content';
+	function colTrack(cId: string, isMeasuring: boolean) {
+		if (isMeasuring) return 'max-content';
 		const c = manager.getColumn(cId);
 		const w = manager.measured[cId] ?? c.width ?? c.minWidth ?? 160;
 		return `${Math.max(40, Math.ceil(Number(w)))}px`;
@@ -167,42 +184,64 @@
 	const colsForRender = $derived(
 		measuring ? manager.columns.map((c) => c.id) : manager.state.visibleColumns
 	);
+
 	const endExtras = $derived(
 		expandIconPosition === 'end' && !rowActions && manager.state.hiddenColumns.length > 0
 	);
+
+	const allSelected = $derived.by(() => {
+		const items = manager.state.items;
+		if (items.length === 0) return false;
+		return items.every((r) => manager.state.selected.has(rowId(r)));
+	});
+
+	const hasHiddenColumns = $derived.by(() => manager.state.hiddenColumns.length > 0);
 </script>
 
-<div class={`space-y-3 ${measuring ? 'overflow-x-hidden' : ''}`} bind:this={container}>
+<div bind:this={container} class={`space-y-3 ${measuring ? 'overflow-x-hidden' : ''}`}>
+	<!-- Toolbar filtros / acciones -->
 	<div class="flex flex-wrap items-center justify-between gap-3">
-		{@render filters?.()}
-		{#if filterFields && filterFields.length}
-			<FilterPanel
-				fields={filterFields}
-				values={filterValues}
-				onapply={(defs) => manager.setFilters(defs)}
-				onclear={() => manager.clearFilters()}
-			/>
-		{/if}
-		{#if showColumnToggle}
-			<ColumnVisibilityToggle
-				columns={manager.columns}
-				visible={manager.state.visibleColumns}
-				onToggle={(id, show) => manager.setColumnVisibility(id, show)}
-			/>
-		{/if}
+		<div class="flex flex-wrap items-center gap-2">
+			{@render filters?.()}
+			{#if filterFields && filterFields.length}
+				<FilterPanel
+					fields={filterFields}
+					values={filterValues}
+					onapply={(defs) => manager.setFilters(defs)}
+					onclear={() => manager.clearFilters()}
+				/>
+			{/if}
+		</div>
+
+		<div class="flex items-center gap-2">
+			{#if showColumnToggle}
+				<ColumnVisibilityToggle
+					columns={manager.columns}
+					visible={manager.state.visibleColumns}
+					onToggle={(id, show) => manager.setColumnVisibility(id, show)}
+				/>
+			{/if}
+		</div>
 	</div>
 
-	<div class="rounded-2xl border border-gray-200 shadow-sm dark:border-gray-800">
+	<!-- Tabla -->
+	<div
+		class="rounded-2xl border border-neutral-200/80 bg-white/70 shadow-sm shadow-black/5 backdrop-blur-sm
+		       dark:border-neutral-800/80 dark:bg-neutral-950/80"
+	>
 		<!-- HEADER -->
 		<div
-			class={`grid items-center border-b border-gray-200 text-sm font-medium dark:border-gray-800 ${stickyHeader ? 'sticky top-0 z-10 bg-white/90 backdrop-blur dark:bg-gray-950/80' : ''}`}
+			class={`grid items-center border-b border-neutral-200/80 text-xs font-semibold tracking-wide text-neutral-500
+			        uppercase dark:border-neutral-800/80 dark:text-neutral-400
+			        ${stickyHeader ? 'sticky top-0 z-10 bg-white/90 backdrop-blur-md dark:bg-neutral-950/90' : ''}`}
 			style={`grid-template-columns:${headerTemplateCols(colsForRender, endExtras)};`}
 		>
-			<div class="flex h-12 items-center px-3">
+			<!-- checkbox global -->
+			<div class="flex h-11 items-center px-3">
 				<input
 					type="checkbox"
-					checked={manager.state.items.length > 0 &&
-						manager.state.items.every((r) => manager.state.selected.has(rowId(r)))}
+					class="h-4 w-4 rounded border-neutral-300 text-neutral-800 shadow-sm focus-visible:ring-2 focus-visible:ring-neutral-500 focus-visible:outline-none dark:border-neutral-700 dark:bg-neutral-900"
+					checked={allSelected}
 					onclick={(e) =>
 						(e.currentTarget as HTMLInputElement).checked
 							? manager.selectAllCurrentPage(rowId)
@@ -210,23 +249,21 @@
 				/>
 			</div>
 
+			<!-- headers -->
 			{#each colsForRender as cid}
+				{@const col = manager.getColumn(cid)}
 				<div
 					data-dt-head={cid}
-					class="flex h-12 items-center px-3 select-none"
-					class:cursor-pointer={manager.getColumn(cid).sortable}
-					onclick={() => headerClick(manager.getColumn(cid))}
+					class="flex h-11 items-center px-3 select-none"
+					class:cursor-pointer={col.sortable}
+					onclick={() => headerClick(col)}
 					oncontextmenu={(e) => onCellContext(e, null, cid, null)}
 				>
-					<div class="truncate">
-						{manager.getColumn(cid).header}
-						{#if manager.state.sortBy === cid}
-							<span class="ml-1 text-xs opacity-60">
-								{manager.state.sortDir === 'asc'
-									? '▲'
-									: manager.state.sortDir === 'desc'
-										? '▼'
-										: ''}
+					<div class="flex items-center gap-1 truncate">
+						<span>{col.header}</span>
+						{#if manager.state.sortBy === cid && manager.state.sortDir}
+							<span class="text-[10px] opacity-70">
+								{manager.state.sortDir === 'asc' ? '▲' : '▼'}
 							</span>
 						{/if}
 					</div>
@@ -234,48 +271,57 @@
 			{/each}
 
 			{#if rowActions}
-				<div class="h-12 px-3"></div>
+				<div class="h-11 px-3"></div>
 			{:else if endExtras}
-				<div class="h-12 px-3"></div>
+				<div class="h-11 px-3"></div>
 			{/if}
 		</div>
 
 		<!-- BODY -->
 		<div>
 			{#if manager.state.loading}
-				<div class="p-6 text-center opacity-70">Cargando…</div>
+				<div class="p-6 text-center text-sm text-neutral-500 dark:text-neutral-400">Cargando…</div>
 			{:else if manager.state.error}
-				<div class="p-6 text-center text-red-600">{manager.state.error}</div>
+				<div class="p-6 text-center text-sm text-red-600 dark:text-red-400">
+					{manager.state.error}
+				</div>
 			{:else if manager.state.items.length === 0}
-				<div class="p-6 text-center opacity-70">Sin resultados</div>
+				<div class="p-6 text-center text-sm text-neutral-500 dark:text-neutral-400">
+					Sin resultados
+				</div>
 			{:else}
 				{#each manager.state.items as row, i (rowId(row))}
 					<!-- ROW -->
 					<div
-						class={`grid items-center border-b border-gray-100 last:border-b-0 dark:border-gray-900 ${sizeRow}`}
+						class={`grid items-stretch border-b border-neutral-100/60 last:border-b-0
+						        dark:border-neutral-900 ${sizeRow}
+						        transition-colors hover:bg-neutral-50/80 dark:hover:bg-neutral-900/60`}
 						style={`grid-template-columns:${headerTemplateCols(colsForRender, endExtras)};`}
 					>
-						<!-- col 0: check + expand -->
+						<!-- col 0: check + expand (start) -->
 						<div class="px-3 py-2">
 							<div class="flex items-center gap-2">
 								<input
 									type="checkbox"
+									class="h-4 w-4 rounded border-neutral-300 text-neutral-800 shadow-sm focus-visible:ring-2 focus-visible:ring-neutral-500 focus-visible:outline-none dark:border-neutral-700 dark:bg-neutral-900"
 									checked={manager.state.selected.has(rowId(row))}
 									onclick={() => manager.toggleSelect(rowId(row))}
 									oncontextmenu={(e) => onCellContext(e, row, '_check', i)}
 								/>
-								{#if manager.state.hiddenColumns.length > 0}
-									{#if expandIconPosition === 'start'}
-										<button
-											class="cursor-pointer rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-800"
-											title={manager.isExpanded(rowId(row)) ? 'Ocultar detalles' : 'Ver detalles'}
-											onclick={() => manager.toggleExpand(rowId(row))}
-										>
-											{#if manager.isExpanded(rowId(row))}<ChevronDown
-													class="h-4 w-4"
-												/>{:else}<ChevronRight class="h-4 w-4" />{/if}
-										</button>
-									{/if}
+
+								{#if hasHiddenColumns && expandIconPosition === 'start'}
+									<button
+										type="button"
+										class="inline-flex h-7 w-7 items-center justify-center rounded-lg border border-transparent text-neutral-500 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:bg-neutral-800"
+										title={manager.isExpanded(rowId(row)) ? 'Ocultar detalles' : 'Ver detalles'}
+										onclick={() => manager.toggleExpand(rowId(row))}
+									>
+										{#if manager.isExpanded(rowId(row))}
+											<ChevronDown class="h-4 w-4" />
+										{:else}
+											<ChevronRight class="h-4 w-4" />
+										{/if}
+									</button>
 								{/if}
 							</div>
 						</div>
@@ -284,13 +330,12 @@
 						{#each colsForRender as cid}
 							{@const col = manager.getColumn(cid)}
 							<div
-								onkeydown={(e) => console.log('KEYDOWN', e)}
-								tabindex="0"
-								role="button"
 								data-dt-cell="1"
 								data-col-id={cid}
 								data-row-index={i}
-								class="flex h-full w-full items-center px-3"
+								tabindex="0"
+								role="button"
+								class="flex h-full w-full items-center px-3 text-sm text-neutral-800 outline-none focus-visible:ring-2 focus-visible:ring-neutral-500/70 dark:text-neutral-100"
 								onclick={() => onRowClick?.(row)}
 								oncontextmenu={(e) => onCellContext(e, row, cid, i)}
 							>
@@ -306,15 +351,18 @@
 						{#if rowActions}
 							<div class="px-3 text-right">
 								<div class="inline-flex items-center gap-2">
-									{#if expandIconPosition === 'end' && manager.state.hiddenColumns.length > 0}
+									{#if expandIconPosition === 'end' && hasHiddenColumns}
 										<button
-											class="cursor-pointer rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-800"
+											type="button"
+											class="inline-flex h-7 w-7 items-center justify-center rounded-lg border border-transparent text-neutral-500 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:bg-neutral-800"
 											title={manager.isExpanded(rowId(row)) ? 'Ocultar detalles' : 'Ver detalles'}
 											onclick={() => manager.toggleExpand(rowId(row))}
 										>
-											{#if manager.isExpanded(rowId(row))}<ChevronDown
-													class="h-4 w-4"
-												/>{:else}<ChevronRight class="h-4 w-4" />{/if}
+											{#if manager.isExpanded(rowId(row))}
+												<ChevronDown class="h-4 w-4" />
+											{:else}
+												<ChevronRight class="h-4 w-4" />
+											{/if}
 										</button>
 									{/if}
 									{@render rowActions(row)}
@@ -323,7 +371,8 @@
 						{:else if endExtras}
 							<div class="px-3 text-right">
 								<button
-									class="rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-800"
+									type="button"
+									class="inline-flex h-7 w-7 items-center justify-center rounded-lg border border-transparent text-neutral-500 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:bg-neutral-800"
 									title={manager.isExpanded(rowId(row)) ? 'Ocultar detalles' : 'Ver detalles'}
 									onclick={() => manager.toggleExpand(rowId(row))}
 								>
@@ -337,17 +386,23 @@
 						{/if}
 
 						{#if manager.isExpanded(rowId(row))}
-							<div class="col-span-full px-3 pt-1 pb-3">
+							<!-- Detalles colapsados en modo "cards" -->
+							<div class="col-span-full bg-neutral-50/60 px-3 pt-1 pb-3 dark:bg-neutral-950/60">
 								<div class="grid gap-3 sm:grid-cols-2 md:grid-cols-3">
 									{#each manager.state.hiddenColumns as hid}
 										{#key hid}
 											{@const col = manager.columns.find((cc) => cc.id === hid)}
 											{#if col}
-												<div class="rounded-xl border border-gray-200 p-3 dark:border-gray-800">
-													<div class="mb-1 text-[11px] tracking-wide uppercase opacity-60">
+												<div
+													class="rounded-xl border border-neutral-200/70 bg-white/70 p-3 text-sm
+													       dark:border-neutral-800/70 dark:bg-neutral-900/70"
+												>
+													<div
+														class="mb-1 text-[11px] font-medium tracking-wide text-neutral-500 uppercase dark:text-neutral-400"
+													>
 														{col.responsiveLabel ?? col.header}
 													</div>
-													<div class="text-sm">
+													<div class="text-sm text-neutral-800 dark:text-neutral-100">
 														{#if col.renderCollapsed}
 															{@render col.renderCollapsed(row)}
 														{:else if col.renderCell}
@@ -369,6 +424,7 @@
 		</div>
 	</div>
 
+	<!-- Paginación -->
 	<Pagination
 		page={manager.state.page}
 		perPage={manager.state.perPage}
@@ -378,6 +434,7 @@
 		onperpage={(n) => manager.setPerPage(n)}
 	/>
 
+	<!-- Context menu -->
 	<ContextMenu
 		bind:open={rightMenu.open}
 		x={rightMenu.x}

package/dist/components/container/DataTable/DataTable.svelte.d.ts

@@ -16,21 +16,21 @@ interface Props<T> {
 }
 declare function $$render<T extends {
     id?: any;
-}>(): Promise<{
+}>(): {
     props: Props<T>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
-}>;
+};
 declare class __sveltets_Render<T extends {
     id?: any;
 }> {
-    props(): Awaited<ReturnType<typeof $$render<T>>>['props'];
-    events(): Awaited<ReturnType<typeof $$render<T>>>['events'];
-    slots(): Awaited<ReturnType<typeof $$render<T>>>['slots'];
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
-    exports(): Promise<{}>;
+    exports(): {};
 }
 interface $$IsomorphicComponent {
     new <T extends {

package/dist/components/container/DataTable/core/DataTableManager.svelte.js

@@ -8,7 +8,7 @@ export class DataTableManager {
         multiSelect: true,
         columns: [],
         loadMode: 'local',
-        data: [],
+        data: []
     });
     state = $state({
         ready: false,
@@ -34,18 +34,19 @@ export class DataTableManager {
     constructor(options) {
         const opts = options();
         const columns = normalize(opts.columns);
-        this.options = ({
+        this.options = {
             ...opts,
             columns
-        });
-        this.state = ({
+        };
+        this.state = {
             ...this.state,
             perPage: this.options.perPage,
             sortBy: opts.initialSortBy ?? null,
             sortDir: opts.initialSortDir ?? null,
             filters: opts.initialFilters ?? [],
-            visibleColumns: columns.map((c) => c.id),
-        });
+            visibleColumns: columns.map((c) => c.id)
+        };
+        // Sincroniza con cambios en options() (columnas, fetcher, etc.)
         $effect(() => {
             const new_options = options();
             untrack(() => {
@@ -54,6 +55,7 @@ export class DataTableManager {
                     ...new_options,
                     columns
                 };
+                // Lógica: si cambian opciones, recargamos data con los nuevos ajustes
                 this.load();
             });
         });
@@ -62,10 +64,21 @@ export class DataTableManager {
         this.measured = map;
         this.reflow();
     }
-    get columns() { return this.options.columns; }
-    getColumn(id) { return this.columns.find((c) => c.id === id); }
-    isExpanded(id) { return this.expanded.has(id); }
-    toggleExpand(id) { this.isExpanded(id) ? this.expanded.delete(id) : this.expanded.add(id); }
+    get columns() {
+        return this.options.columns;
+    }
+    getColumn(id) {
+        return this.columns.find((c) => c.id === id);
+    }
+    isExpanded(id) {
+        return this.expanded.has(id);
+    }
+    toggleExpand(id) {
+        if (this.isExpanded(id))
+            this.expanded.delete(id);
+        else
+            this.expanded.add(id);
+    }
     setColumnVisibility(id, show) {
         if (show) {
             this.forcedVisible.add(id);
@@ -101,20 +114,20 @@ export class DataTableManager {
         // columnas que siempre se ocultan en móvil, aunque quepan
         const mustHide = new Set();
         if (available < 640) {
-            for (const c of cols)
+            for (const c of cols) {
                 if (c.hideOnMobile)
                     mustHide.add(c.id);
+            }
         }
         // empezamos conservando el orden original
         let visible = origOrder.filter((id) => !mustHide.has(id));
         const totalNeed = () => visible.reduce((sum, id) => sum + needOf(id), 0);
+        // Caso: no caben todas → ocultamos por prioridad
         if (totalNeed() > available) {
-            // hay que ocultar: orden de descarte por prioridad (más alta => se quita antes)
-            // empate: quitamos antes las columnas que están más a la derecha (idx más alto)
             const dropOrder = cols
                 .map((c, idx) => ({ id: c.id, pr: c.priority ?? 999, idx }))
                 .filter((x) => !mustHide.has(x.id))
-                .sort((a, b) => (b.pr - a.pr) || (b.idx - a.idx));
+                .sort((a, b) => b.pr - a.pr || b.idx - a.idx);
             const hidden = new Set([...mustHide]);
             for (const d of dropOrder) {
                 if (totalNeed() <= available)
@@ -125,7 +138,6 @@ export class DataTableManager {
                     hidden.add(d.id);
                 }
             }
-            // overrides manuales
             const visSet = new Set(visible);
             for (const id of this.forcedHidden)
                 visSet.delete(id);
@@ -136,7 +148,7 @@ export class DataTableManager {
             const finalHidden = origOrder.filter((id) => !finalVisible.includes(id));
             return { visible: finalVisible, hidden: finalHidden };
         }
-        // TODO cabe: respetamos tu orden original
+        // Caso: caben todas → respetamos orden original + overrides manuales
         const visSet = new Set(visible);
         for (const id of this.forcedHidden)
             visSet.delete(id);
@@ -164,46 +176,79 @@ export class DataTableManager {
         this.state.visibleColumns = plan.visible;
         this.state.hiddenColumns = plan.hidden;
     }
-    // NUEVO: para usar desde el ResizeObserver
     reflowForWidth(width) {
         this.lastWidth = width;
         const base = this.visibilityPlan(width);
         this.applyVisibility(this.mergeWithOverrides(base));
     }
-    // NUEVO: reflow con el último ancho conocido (o infinito si no hay)
     reflow() {
         const width = this.lastWidth ?? Number.POSITIVE_INFINITY;
         const base = this.visibilityPlan(width);
         this.applyVisibility(this.mergeWithOverrides(base));
     }
-    // Selección / paginación / sort / filtros (sin cambios relevantes)
-    setPerPage(n) { this.state.perPage = n; this.state.page = 1; return this.load(); }
-    setPage(p) { this.state.page = p; return this.load(); }
+    // Selección / paginación / sort / filtros
+    setPerPage(n) {
+        this.state.perPage = n;
+        this.state.page = 1;
+        return this.load();
+    }
+    setPage(p) {
+        this.state.page = p;
+        return this.load();
+    }
     setSort(id) {
         if (this.state.sortBy !== id) {
             this.state.sortBy = id;
             this.state.sortDir = 'asc';
         }
         else {
-            this.state.sortDir = this.state.sortDir === 'asc' ? 'desc' : (this.state.sortDir === 'desc' ? null : 'asc');
+            this.state.sortDir =
+                this.state.sortDir === 'asc'
+                    ? 'desc'
+                    : this.state.sortDir === 'desc'
+                        ? null
+                        : 'asc';
         }
         this.state.page = 1;
         return this.load();
     }
-    setFilters(filters) { this.state.filters = filters; this.state.page = 1; return this.load(); }
-    clearFilters() { this.state.filters = []; this.state.page = 1; return this.load(); }
-    toggleSelect(rowId) { const s = this.state.selected; s.has(rowId) ? s.delete(rowId) : s.add(rowId); }
-    clearSelection() { this.state.selected.clear(); }
-    selectAllCurrentPage(getId = (r) => r.id) { this.state.items.forEach((r) => this.state.selected.add(getId(r))); }
+    setFilters(filters) {
+        this.state.filters = filters;
+        this.state.page = 1;
+        return this.load();
+    }
+    clearFilters() {
+        this.state.filters = [];
+        this.state.page = 1;
+        return this.load();
+    }
+    toggleSelect(rowId) {
+        const s = this.state.selected;
+        if (s.has(rowId))
+            s.delete(rowId);
+        else
+            s.add(rowId);
+    }
+    clearSelection() {
+        this.state.selected.clear();
+    }
+    selectAllCurrentPage(getId = (r) => r.id) {
+        this.state.items.forEach((r) => this.state.selected.add(getId(r)));
+    }
+    // --------- CARGA DE DATOS ---------
     async load() {
         const { loadMode } = this.options;
         this.state.loading = true;
         this.state.error = undefined;
         try {
-            if (loadMode === 'local')
-                return await this.loadLocal();
-            else
-                return await this.loadRemote();
+            if (loadMode === 'local') {
+                await this.loadLocal();
+            }
+            else {
+                await this.loadRemote();
+            }
+            // Después de tener items, recalculamos visibilidad de columnas
+            this.reflow();
         }
         catch (e) {
             this.state.error = e?.message ?? 'Error al cargar';
@@ -212,7 +257,6 @@ export class DataTableManager {
             this.state.loading = false;
             this.state.ready = true;
         }
-        this.reflow(); // asegura visibilidad coherente tras cargar
     }
     async loadRemote() {
         const { fetcher } = this.options;
@@ -234,13 +278,19 @@ export class DataTableManager {
     async loadLocal() {
         const data = this.options.data ?? [];
         let rows = [...data];
+        // Filtros locales
         for (const f of this.state.filters) {
             const col = f.columnId ? this.getColumn(f.columnId) : undefined;
             rows = rows.filter((r) => {
-                const value = col ? (col.accessor ? col.accessor(r) : r[col.id]) : r;
+                const value = col
+                    ? col.accessor
+                        ? col.accessor(r)
+                        : r[col.id]
+                    : r;
                 return applyFilterOp(value, f.op, f.value);
             });
         }
+        // Orden
         if (this.state.sortBy && this.state.sortDir) {
             const col = this.getColumn(this.state.sortBy);
             rows.sort((a, b) => {
@@ -250,6 +300,7 @@ export class DataTableManager {
                 return this.state.sortDir === 'asc' ? cmp : -cmp;
             });
         }
+        // Paginación
         const start = (this.state.page - 1) * this.state.perPage;
         const end = start + this.state.perPage;
         this.state.total = rows.length;

package/dist/components/container/DataTable/core/types.d.ts

@@ -4,43 +4,74 @@ export type TDataTableColumnKey<T> = Extract<keyof T, string>;
 export type TDataTableAccessor<T, R = any> = (row: T) => R;
 export type TDataTableColumnType = 'text' | 'number' | 'currency' | 'date' | 'datetime' | 'boolean' | 'badge' | 'link' | 'code';
 type TDataTableBaseColumn<T> = {
+    /** Título mostrado en el header */
     header: string;
+    /** Ancho fijo en px (si lo quieres forzar) */
     width?: number;
+    /** Ancho mínimo en px (usado también como fallback para auto-medición) */
     minWidth?: number;
+    /** Prioridad para ocultar en responsive (más alto = se oculta antes) */
     priority?: number;
+    /** Alineación del contenido de la celda */
     align?: 'left' | 'center' | 'right';
+    /** Si la columna es ordenable */
     sortable?: boolean;
+    /** Forzar ocultar en mobile, incluso si cabe */
     hideOnMobile?: boolean;
+    /** Label a usar cuando la columna se muestra en el panel colapsado (expand) */
     responsiveLabel?: string;
+    /** Clases extra para esta columna (celdas) */
     class?: string;
+    /** Tipo semántico de columna (para Cell: formateo, badge, boolean, etc.) */
     type?: TDataTableColumnType;
+    /** Opciones de Intl para number/date según el type */
     format?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions;
+    /** Labels personalizados para boolean true/false */
     trueLabel?: string;
     falseLabel?: string;
 };
 /** Columna ligada a una key existente de T (autocomplete de keys) */
 export type TDataTableKeyColumn<T, K extends TDataTableColumnKey<T> = TDataTableColumnKey<T>> = TDataTableBaseColumn<T> & {
+    /** ID de la columna, atado a una key real de T */
     id: K;
+    /** Accessor opcional, si quieres derivar el valor a partir de la key */
     accessor?: (row: T) => T[K];
+    /** Render personalizado para la celda en vista normal */
     renderCell?: (row: T) => any;
+    /** Render personalizado para la celda en vista colapsada (expand) */
     renderCollapsed?: (row: T) => any;
 };
-/** Columna virtual (id libre), requiere accessor explícito */
+/** Columna virtual (id libre), pensada para valores derivados o acciones */
 export type TDataTableVirtualColumn<T> = TDataTableBaseColumn<T> & {
+    /** ID de la columna, no está restringido a keyof T */
     id: string;
+    /** Accessor requerido: cómo obtener el valor a mostrar en esta columna */
     accessor: TDataTableAccessor<T>;
+    /** Render personalizado para la celda en vista normal */
     renderCell?: (row: T) => any;
+    /** Render personalizado para la celda en vista colapsada (expand) */
     renderCollapsed?: (row: T) => any;
 };
-export type TDataTableColumnDef<T> = TDataTableKeyColumn<T>;
+/**
+ * Definición de columna: puede ser una columna ligada a una key real de T
+ * o una columna virtual con accessor obligatorio.
+ */
+export type TDataTableColumnDef<T> = TDataTableKeyColumn<T> | TDataTableVirtualColumn<T>;
 export type TDataTableFilterOp = 'equals' | 'not_equals' | 'contains' | 'starts_with' | 'ends_with' | 'gt' | 'lt' | 'gte' | 'lte' | 'in' | 'not_in' | 'is_empty' | 'is_not_empty';
 export type TDataTableFilterDef<T> = {
+    /** ID interno del filtro (para guardarlo, etc.) */
     id: string;
+    /** Label visible del filtro (UI) */
     label: string;
-    columnId?: string;
+    /**
+     * ID de columna a la que aplica el filtro.
+     * Puede ser una key de T o una columna virtual (string).
+     */
+    columnId?: TDataTableColumnKey<T> | string;
     op: TDataTableFilterOp;
     value?: any;
-    meta?: Record<string, any>;
+    /** Metadata auxiliar para la UI del filtro (select options, etc.) */
+    meta?: Record<string, unknown>;
 };
 export type TDataTableFetchResult<T> = {
     items: T[];
@@ -57,17 +88,29 @@ export type TDataTableFetchParams = {
 };
 export type TDataTableLoadMode = 'local' | 'remote' | 'cursor';
 export type TDataTableTableOptions<T> = {
+    /** ID lógico de la tabla (por si quieres guardar preferencias de usuario, etc.) */
     id?: string;
+    /** Definición de columnas */
     columns: TDataTableColumnDef<T>[];
+    /** Modo de carga de datos: local / remoto / cursor */
     loadMode: TDataTableLoadMode;
+    /** Datos en memoria para loadMode = 'local' */
     data?: T[];
+    /** Función fetcher para loadMode = 'remote' | 'cursor' */
     fetcher?: (params: TDataTableFetchParams) => Promise<TDataTableFetchResult<T>>;
+    /** Tamaño de página por defecto */
     perPage?: number;
+    /** Opciones disponibles de tamaño de página */
     perPageOptions?: number[];
+    /** Permitir selección múltiple */
     multiSelect?: boolean;
+    /** Mantener selección al cambiar de página */
     keepSelectionOnPageChange?: boolean;
+    /** Sort inicial (id de columna) */
     initialSortBy?: string | null;
+    /** Dirección de sort inicial */
     initialSortDir?: TDataTableSortDir;
+    /** Filtros iniciales */
     initialFilters?: TDataTableFilterDef<T>[];
 };
 export type TDataTableTableState<T> = {

package/dist/components/container/TabsStepper/TabsStepper.svelte

@@ -23,7 +23,7 @@
 		canGoPrev?: (idx: number) => Promise<boolean> | boolean;
 
 		mode?: Mode;
-		forwardTabBehavior?: ForwardTabBehavior; // NUEVO
+		forwardTabBehavior?: ForwardTabBehavior;
 		stickyFooter?: boolean;
 		showHeader?: boolean;
 		showProgressBar?: boolean;
@@ -51,12 +51,10 @@
 
 	let maxReached = $state(current);
 
-	// Si avanzamos, actualizamos maxReached
 	$effect(() => {
 		if (current > maxReached) maxReached = current;
 	});
 
-	// Ajustar si la cantidad de pasos cambia
 	$effect(() => {
 		if (maxReached > steps.length) maxReached = steps.length;
 		if (current > steps.length) current = steps.length;
@@ -146,12 +144,12 @@
 					<button
 						type="button"
 						class={[
-							'group relative inline-flex items-center gap-3 rounded-xl border px-3 py-2 transition',
+							'group relative inline-flex items-center gap-3 rounded-xl border px-3 py-2 text-sm transition-all duration-150',
 							state === 'active'
-								? 'border-purple-600 bg-purple-50 text-purple-700 shadow-sm'
+								? 'border-indigo-500/80 bg-white/95 text-neutral-900 shadow-sm shadow-indigo-500/20 dark:border-indigo-400/80 dark:bg-neutral-900/95 dark:text-neutral-50'
 								: state === 'done'
-									? 'border-emerald-500/50 bg-emerald-50 text-emerald-700'
-									: 'border-gray-300 bg-white text-gray-600 hover:bg-gray-50',
+									? 'border-neutral-300 bg-neutral-50 text-neutral-800 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100'
+									: 'border-transparent bg-transparent text-neutral-500 hover:border-neutral-300 hover:bg-neutral-50 dark:text-neutral-400 dark:hover:border-neutral-700 dark:hover:bg-neutral-900/80',
 							allowed ? 'cursor-pointer' : 'pointer-events-none cursor-not-allowed opacity-60'
 						].join(' ')}
 						aria-current={state === 'active' ? 'step' : undefined}
@@ -162,46 +160,51 @@
 					>
 						<div
 							class={[
-								'flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-semibold',
+								'flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-xs font-semibold',
 								state === 'active'
-									? 'border-purple-600 bg-white text-purple-700'
+									? 'border-indigo-500 bg-indigo-500/10 text-indigo-600 dark:border-indigo-400 dark:bg-indigo-500/15 dark:text-indigo-300'
 									: state === 'done'
-										? 'border-emerald-500 bg-white text-emerald-700'
-										: 'border-gray-300 bg-white text-gray-600'
+										? 'border-emerald-500 bg-emerald-500/5 text-emerald-600 dark:border-emerald-400 dark:bg-emerald-500/10 dark:text-emerald-300'
+										: 'border-neutral-300 bg-white text-neutral-500 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-400'
 							].join(' ')}
 						>
 							{#if state === 'done'}
 								<svg viewBox="0 0 20 20" class="h-4 w-4" aria-hidden="true">
-									<path d="M7.5 11.5l-2-2 -1 1 3 3 7-7 -1-1 -6 6z" />
+									<path d="M7.5 11.5l-2-2 -1 1 3 3 7-7 -1-1 -6 6z" class="fill-current" />
 								</svg>
 							{:else}
 								{idx}
 							{/if}
 						</div>
 
-						<!-- Texto -->
 						<div class="min-w-0 text-left">
-							<div class="truncate text-sm font-medium">{s.label}</div>
+							<div class="truncate text-sm font-medium text-neutral-900 dark:text-neutral-50">
+								{s.label}
+							</div>
 							{#if state === 'active'}
-								<div class="truncate text-xs text-purple-700/70">En curso</div>
+								<div class="truncate text-xs text-indigo-500 dark:text-indigo-300">En curso</div>
 							{:else if state === 'done'}
-								<div class="truncate text-xs text-emerald-700/70">Completado</div>
+								<div class="truncate text-xs text-emerald-600 dark:text-emerald-300">
+									Completado
+								</div>
 							{:else}
-								<div class="truncate text-xs text-gray-500">Pendiente</div>
+								<div class="truncate text-xs text-neutral-500 dark:text-neutral-500">Pendiente</div>
 							{/if}
 						</div>
 					</button>
 
 					{#if showConnectors && i < steps.length - 1}
-						<div class="h-px w-6 bg-gradient-to-r from-gray-300 to-gray-200 sm:w-8"></div>
+						<div
+							class="hidden h-px w-6 rounded-full bg-neutral-200/80 sm:block sm:w-8 dark:bg-neutral-800/80"
+						></div>
 					{/if}
 				{/each}
 			</div>
 
 			{#if showProgressBar}
-				<div class="mt-3 h-1.5 w-full rounded-full bg-gray-200">
+				<div class="mt-3 h-1.5 w-full rounded-full bg-neutral-200/80 dark:bg-neutral-800/80">
 					<div
-						class="h-1.5 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 transition-all duration-300"
+						class="h-1.5 rounded-full bg-linear-to-r from-indigo-500 via-violet-500 to-blue-500 transition-all duration-300"
 						style:width={`${pct}%`}
 					></div>
 				</div>
@@ -224,14 +227,16 @@
 
 	<div
 		class={stickyFooter
-			? 'sticky right-0 bottom-0 left-0 bg-gradient-to-t from-white via-white to-transparent pt-4'
+			? 'sticky right-0 bottom-0 left-0 bg-linear-to-t from-neutral-50 via-neutral-50/95 to-transparent pt-4 dark:from-neutral-950 dark:via-neutral-950/95 dark:to-transparent'
 			: 'mt-6'}
 	>
-		<div class="flex w-full gap-3 border-t border-gray-200 pt-4">
+		<div class="flex w-full gap-3 border-t border-neutral-200 pt-4 dark:border-neutral-800">
 			{#if footer}
 				{@render footer({ current, total, next, prev, goTo })}
 			{:else}
-				<Button type="button" onclick={prev} disabled={current === 1}>Anterior</Button>
+				<Button type="button" variant="outline" onclick={prev} disabled={current === 1}>
+					Anterior
+				</Button>
 				<Button type="button" onclick={next} disabled={current === total}>Siguiente</Button>
 			{/if}
 		</div>

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './stores/I18n.svelte.js';
+export * from './stores/FormStatus.svelte.js';
 export * from './settings/index.js';
 export * from './types/index.js';
 export * from './components/index.js';

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './stores/I18n.svelte.js';
+export * from './stores/FormStatus.svelte.js';
 export * from './settings/index.js';
 export * from './types/index.js';
 export * from './components/index.js';

package/dist/stores/FormStatus.svelte.d.ts

@@ -0,0 +1,61 @@
+type BuiltinFormTypes = 'delete' | 'duplicate' | 'change_status' | 'preview' | 'download' | 'create' | 'update' | 'error';
+type ActionKeys<P extends Record<string, any>> = keyof P | BuiltinFormTypes;
+type Payloads<P extends Record<string, any>> = {
+    [K in ActionKeys<P>]: K extends keyof P ? P[K] : unknown;
+};
+export interface IFormStatusStore<P extends Record<string, any> = {}> {
+    open<K extends ActionKeys<P>>(...args: Payloads<P>[K] extends void ? [type: K] : [type: K, data: Payloads<P>[K]]): void;
+    close(): void;
+    readonly type: ActionKeys<P> | null;
+    readonly data: Payloads<P>[ActionKeys<P>] | null;
+    readonly isOpen: boolean;
+    is<K extends ActionKeys<P>>(type: K): this is {
+        type: K;
+        data: Payloads<P>[K];
+    };
+    isSome<K extends ActionKeys<P>>(type: K[]): this is {
+        type: K;
+        data: Payloads<P>[K];
+    };
+    isNone<K extends ActionKeys<P>>(type: K[]): this is {
+        type: K;
+        data: Payloads<P>[K];
+    };
+    match<R>(handlers: Partial<{
+        [K in ActionKeys<P>]: (data: Payloads<P>[K]) => R;
+    }> & {
+        _: () => R;
+    }): R;
+    get<K extends keyof P>(type: K): P[K] | undefined;
+    expect<K extends keyof P>(type: K, msg?: string): P[K];
+    select<K extends keyof P, R>(type: K, map: (data: P[K]) => R, fallback?: R): R | undefined;
+}
+export declare class StoreFormStatus<P extends Record<string, any> = {}> implements IFormStatusStore<P> {
+    #private;
+    open<K extends ActionKeys<P>>(...args: Payloads<P>[K] extends void ? [type: K] : [type: K, data: Payloads<P>[K]]): void;
+    close: () => void;
+    get type(): ActionKeys<P> | null;
+    get data(): Payloads<P>[ActionKeys<P>] | null;
+    get isOpen(): boolean;
+    is<K extends ActionKeys<P>>(type: K): this is {
+        type: K;
+        data: Payloads<P>[K];
+    };
+    isSome<K extends ActionKeys<P>>(type: K[]): this is {
+        type: K;
+        data: Payloads<P>[K];
+    };
+    isNone<K extends ActionKeys<P>>(type: K[]): this is {
+        type: K;
+        data: Payloads<P>[K];
+    };
+    match<R>(handlers: Partial<{
+        [K in ActionKeys<P>]: (data: Payloads<P>[K]) => R;
+    }> & {
+        _: () => R;
+    }): R;
+    get<K extends keyof P>(type: K): P[K] | undefined;
+    expect<K extends keyof P>(type: K, msg?: string): P[K];
+    select<K extends keyof P, R>(type: K, map: (data: P[K]) => R, fallback?: R): R | undefined;
+}
+export {};

package/dist/stores/FormStatus.svelte.js

@@ -0,0 +1,45 @@
+export class StoreFormStatus {
+    #type = $state(null);
+    #data = $state(null);
+    open(...args) {
+        const [type, maybeData] = args;
+        this.#type = type;
+        this.#data = (maybeData ?? null);
+    }
+    close = () => {
+        this.#type = null;
+        this.#data = null;
+    };
+    get type() { return this.#type; }
+    get data() { return this.#data; }
+    get isOpen() { return this.#type !== null; }
+    is(type) {
+        return this.#type === type;
+    }
+    isSome(type) {
+        return this.#type !== null && type.includes(this.#type);
+    }
+    isNone(type) {
+        return this.#type === null || !type.includes(this.#type);
+    }
+    match(handlers) {
+        if (!this.isOpen || this.#type === null)
+            return handlers._();
+        const fn = handlers[this.#type];
+        return fn ? fn(this.#data) : handlers._();
+    }
+    get(type) {
+        return this.#type === type
+            ? (this.#data ?? undefined)
+            : undefined;
+    }
+    expect(type, msg = `Expected state '${String(type)}'`) {
+        const value = this.get(type);
+        if (value === undefined)
+            throw new Error(msg);
+        return value;
+    }
+    select(type, map, fallback) {
+        return this.#type === type ? map(this.#data) : fallback;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.26.11",
+	"version": "0.27.0",
 	"private": false,
 	"packageManager": "bun@1.3.2",
 	"publishConfig": {
@@ -49,41 +49,41 @@
 	"devDependencies": {
 		"@changesets/cli": "2.29.7",
 		"@chromatic-com/storybook": "4.1.2",
-		"@eslint/compat": "1.4.1",
+		"@eslint/compat": "2.0.0",
 		"@playwright/test": "1.56.1",
 		"@storybook/addon-essentials": "8.6.14",
 		"@storybook/addon-interactions": "8.6.14",
 		"@storybook/addon-svelte-csf": "5.0.10",
 		"@storybook/blocks": "8.6.14",
-		"@storybook/svelte": "10.0.6",
-		"@storybook/sveltekit": "10.0.6",
+		"@storybook/svelte": "10.0.7",
+		"@storybook/sveltekit": "10.0.7",
 		"@storybook/test": "8.6.14",
 		"@sveltejs/adapter-static": "3.0.10",
-		"@sveltejs/kit": "2.48.4",
+		"@sveltejs/kit": "2.48.5",
 		"@sveltejs/package": "2.5.4",
 		"@sveltejs/vite-plugin-svelte": "6.2.1",
 		"@tailwindcss/postcss": "4.1.17",
-		"@testing-library/svelte": "5.2.8",
-		"@vitest/browser": "4.0.8",
+		"@testing-library/svelte": "5.2.9",
+		"@vitest/browser": "4.0.9",
 		"changeset": "0.2.6",
 		"eslint": "9.39.1",
 		"eslint-config-prettier": "10.1.8",
 		"eslint-plugin-svelte": "3.13.0",
 		"globals": "16.5.0",
-		"jsdom": "27.1.0",
+		"jsdom": "27.2.0",
 		"lucide-svelte": "0.553.0",
 		"prettier": "3.6.2",
 		"prettier-plugin-svelte": "3.4.0",
 		"prettier-plugin-tailwindcss": "0.7.1",
 		"publint": "0.3.15",
-		"storybook": "10.0.6",
+		"storybook": "10.0.7",
 		"svelte": "5.43.6",
 		"svelte-check": "4.3.4",
 		"tailwindcss": "4.1.17",
 		"typescript": "5.9.3",
 		"typescript-eslint": "8.46.4",
 		"vite": "7.2.2",
-		"vitest": "4.0.8"
+		"vitest": "4.0.9"
 	},
 	"dependencies": {
 		"@tailwindcss/container-queries": "0.1.1",