@innertia-solutions/nuxt-theme-spark 0.1.138 → 0.1.140

package/components/Admin/Page.vue

@@ -25,10 +25,13 @@ const iconColorClass = computed(() => ({
 </script>
 
 <template>
-  <div class="space-y-4">
+  <div class="relative space-y-2">
 
     <!-- Page header card -->
     <div v-if="title" class="sticky top-0 z-20 -mx-3 -mt-3 px-3 pt-3 bg-background-1">
+    <div v-if="$slots.breadcrumb" class="flex items-center gap-x-1 px-1 pt-2 pb-0.5">
+      <slot name="breadcrumb" />
+    </div>
     <div class="flex items-center justify-between bg-card border border-card-line rounded-2xl shadow-sm px-4 py-3">
       <div class="flex items-center gap-x-4 min-w-0">
         <div v-if="iconComponent" class="shrink-0 size-10 rounded-xl flex items-center justify-center border border-current/15" :class="iconColorClass">
@@ -42,9 +45,6 @@ const iconColorClass = computed(() => ({
               <p class="text-sm text-muted-foreground">{{ description }}</p>
             </template>
           </div>
-          <div v-if="$slots.breadcrumb" class="flex items-center gap-x-1 mt-0.5">
-            <slot name="breadcrumb" />
-          </div>
         </div>
       </div>
       <div v-if="$slots.actions" class="flex items-center gap-x-2 shrink-0 ms-4">
@@ -59,7 +59,7 @@ const iconColorClass = computed(() => ({
     </div>
 
     <!-- Page content -->
-    <slot />
+    <div class="relative"><slot /></div>
 
   </div>
 </template>

package/components/App/Button.vue

@@ -22,22 +22,22 @@ const iconSizeClasses = computed(() => ({ xs:"size-2", sm:"size-3", md:"size-4",
 
 const severityClasses = computed(() => {
   if (props.variant === "dropdown") {
-    const d = { primary:"text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20", secondary:"text-foreground hover:bg-muted-hover", success:"text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-900/20", danger:"text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20", warning:"text-yellow-600 hover:bg-yellow-50 dark:text-yellow-400 dark:hover:bg-yellow-900/20", info:"text-cyan-600 hover:bg-cyan-50 dark:text-cyan-400 dark:hover:bg-cyan-900/20" }
+    const d = { primary: "text-primary hover:bg-primary/10", secondary:"text-foreground hover:bg-muted-hover", success:"text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-900/20", danger:"text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20", warning:"text-yellow-600 hover:bg-yellow-50 dark:text-yellow-400 dark:hover:bg-yellow-900/20", info:"text-cyan-600 hover:bg-cyan-50 dark:text-cyan-400 dark:hover:bg-cyan-900/20" }
     return d[props.severity] || d.secondary
   }
   const base = "rounded-lg border transition-colors"
-  const v = { primary:"border-blue-600 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-500 dark:bg-blue-900/20 dark:text-blue-300 dark:hover:bg-blue-900/35", secondary:"border-slate-300 bg-slate-50 text-slate-700 hover:bg-muted-hover dark:border-card-line dark:bg-card dark:text-muted-foreground-1 dark:hover:bg-muted-hover", success:"border-emerald-600 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-500 dark:bg-emerald-900/20 dark:text-emerald-300 dark:hover:bg-emerald-900/35", danger:"border-red-600 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-500 dark:bg-red-900/20 dark:text-red-300 dark:hover:bg-red-900/35", warning:"border-yellow-600 bg-yellow-50 text-yellow-700 hover:bg-yellow-100 dark:border-yellow-500 dark:bg-yellow-900/20 dark:text-yellow-300 dark:hover:bg-yellow-900/35", info:"border-cyan-600 bg-cyan-50 text-cyan-700 hover:bg-cyan-100 dark:border-cyan-500 dark:bg-cyan-900/20 dark:text-cyan-300 dark:hover:bg-cyan-900/35" }
+  const v = { primary: "border-primary bg-primary/10 text-primary hover:bg-primary/20 dark:bg-primary/15 dark:hover:bg-primary/25", secondary:"border-slate-300 bg-slate-50 text-slate-700 hover:bg-muted-hover dark:border-card-line dark:bg-card dark:text-muted-foreground-1 dark:hover:bg-muted-hover", success:"border-emerald-600 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-500 dark:bg-emerald-900/20 dark:text-emerald-300 dark:hover:bg-emerald-900/35", danger:"border-red-600 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-500 dark:bg-red-900/20 dark:text-red-300 dark:hover:bg-red-900/35", warning:"border-yellow-600 bg-yellow-50 text-yellow-700 hover:bg-yellow-100 dark:border-yellow-500 dark:bg-yellow-900/20 dark:text-yellow-300 dark:hover:bg-yellow-900/35", info:"border-cyan-600 bg-cyan-50 text-cyan-700 hover:bg-cyan-100 dark:border-cyan-500 dark:bg-cyan-900/20 dark:text-cyan-300 dark:hover:bg-cyan-900/35" }
   return `${base} ${v[props.severity] || v.primary}`
 })
 
 const buttonClasses = computed(() => {
   if (props.variant === "dropdown") {
     const dis = props.type === "button" ? "disabled:opacity-50 disabled:pointer-events-none" : isDisabled.value ? "opacity-50 pointer-events-none" : ""
-    return `w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm transition-colors text-left ${severityClasses.value} ${dis} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 ${props.class}`
+    return `w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm transition-colors text-left ${severityClasses.value} ${dis} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/40 dark:focus:ring-offset-gray-800 ${props.class}`
   }
   const dis = props.type === "button" ? "disabled:opacity-50 disabled:pointer-events-none" : isDisabled.value ? "opacity-50 pointer-events-none" : ""
   const cursor = props.type === "link" ? "cursor-pointer" : ""
-  return `${sizeClasses.value} ${severityClasses.value} ${dis} focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 ${cursor} inline-flex justify-center items-center gap-x-2 whitespace-nowrap ${props.class}`
+  return `${sizeClasses.value} ${severityClasses.value} ${dis} focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-primary/40 dark:focus:ring-offset-gray-800 ${cursor} inline-flex justify-center items-center gap-x-2 whitespace-nowrap ${props.class}`
 })
 
 const displayText = computed(() => props.loading ? props.loadingText : props.text)

package/components/App/PreviewDock.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { IconX } from '@tabler/icons-vue'
+
+const { docked, undock, expandDock, activeDockId } = useDockedPreviews()
+const router = useRouter()
+const route  = useRoute()
+
+async function open(item, event) {
+  // Misma ruta → la tabla está montada, mostrar float encima del tab
+  if (route.path === item.route) {
+    const rect = event.currentTarget.getBoundingClientRect()
+    expandDock(item.id, rect)
+    return
+  }
+  // Ruta diferente → navegar y restaurar como preview completo
+  await router.push(item.route)
+  await nextTick()
+  useNuxtApp().hooks.callHook('preview:restore', item)
+}
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition ease-out duration-200"
+    enter-from-class="opacity-0 translate-y-4"
+    enter-to-class="opacity-100 translate-y-0"
+    leave-active-class="transition ease-in duration-150"
+    leave-from-class="opacity-100 translate-y-0"
+    leave-to-class="opacity-0 translate-y-4"
+  >
+    <div
+      v-if="docked.length"
+      class="fixed bottom-0 left-0 right-0 z-50 flex items-center gap-2 px-4 py-2 bg-card/95 backdrop-blur-md border-t border-card-line shadow-lg"
+    >
+      <span class="text-xs text-muted-foreground shrink-0 mr-1">Minimizados</span>
+
+      <div class="flex items-center gap-2 flex-1 overflow-x-auto">
+        <button
+          v-for="item in docked"
+          :key="item.id"
+          type="button"
+          class="group inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm transition-all shrink-0"
+          :class="activeDockId === item.id
+            ? 'border-primary/50 bg-primary/10 text-primary shadow-sm'
+            : 'border-card-line bg-surface hover:bg-muted-hover text-foreground'"
+          @click="open(item, $event)"
+        >
+          <span class="size-5 rounded-full bg-primary flex items-center justify-center text-[10px] font-bold text-primary-foreground shrink-0">
+            {{ (item.label?.[0] ?? '?').toUpperCase() }}
+          </span>
+          <span class="font-medium max-w-32 truncate">{{ item.label }}</span>
+          <span v-if="item.subtitle" class="text-muted-foreground text-xs max-w-28 truncate hidden sm:inline">{{ item.subtitle }}</span>
+
+          <span
+            class="size-4 inline-flex items-center justify-center rounded hover:bg-red-100 dark:hover:bg-red-900/30 hover:text-red-600 dark:hover:text-red-400 transition-colors ml-0.5"
+            @click.stop="undock(item.id)"
+          >
+            <IconX class="size-3" />
+          </span>
+        </button>
+      </div>
+    </div>
+  </Transition>
+</template>

package/components/Table/Standard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { IconSearch, IconAdjustmentsHorizontal, IconLayoutColumns, IconGripVertical } from '@tabler/icons-vue'
+import { IconSearch, IconLayoutColumns, IconGripVertical, IconMinus, IconMaximize, IconX, IconPlus, IconChevronLeft, IconCheck, IconChevronDown } from '@tabler/icons-vue'
 
 const props = defineProps({
   table:             { type: Object,  default: null },
@@ -17,6 +17,7 @@ const props = defineProps({
   showExport:        { type: Boolean, default: true },
   filters:           { type: Array,   default: () => [] },
   splitRatio:        { type: Number,  default: 60 },
+  autoClosePreview:  { type: Boolean, default: true },
 })
 
 const resolvedEndpoint = computed(() => props.table?.endpoint ?? props.endpoint)
@@ -29,11 +30,9 @@ const forwardedSlots = computed(() => {
   return Object.fromEntries(Object.entries(slots).filter(([k]) => !excluded.has(k)))
 })
 
-const search       = ref('')
+const search        = ref('')
 const activeFilters = ref({})
-const showFilterPanel = ref(false)
-const filterPanelRef  = ref(null)
-const tableRef     = ref(null)
+const tableRef      = ref(null)
 
 // ─── Filter config ─────────────────────────────────────────────────────────────
 const filtersConfig = computed(() =>
@@ -42,15 +41,125 @@ const filtersConfig = computed(() =>
 
 const hasFilterableColumns = computed(() => filtersConfig.value.length > 0)
 
-const activeFilterCount = computed(() =>
-  Object.values(activeFilters.value).filter(v => v !== null && v !== undefined && v !== '').length
+// ─── Notion-style filter ───────────────────────────────────────────────────────
+const showFilterPanel  = ref(false)
+const filterMenuStep   = ref('columns') // 'columns' | 'value'
+const pendingCol       = ref(null)
+const pendingValue     = ref(null)   // string for text/select, { singleDate, from, to } for daterange
+const pendingDateOp    = ref('before') // 'before' | 'after' | 'between'
+const filterMenuRef    = ref(null)
+const filterAddBtnRef  = ref(null)
+const filterMenuStyle  = ref({})
+
+const dateOps = [
+  { value: 'before',  label: 'antes de' },
+  { value: 'after',   label: 'después de' },
+  { value: 'between', label: 'entre' },
+]
+
+const activeFilterList = computed(() =>
+  filtersConfig.value
+    .filter(col => {
+      const v = activeFilters.value[col.key]
+      if (col.filterType === 'daterange') return v?.from || v?.to
+      return v !== null && v !== undefined && v !== ''
+    })
+    .map(col => {
+      const v = activeFilters.value[col.key]
+      let displayOp = '', displayVal = ''
+      if (col.filterType === 'daterange') {
+        if (v.from && v.to) { displayOp = 'entre'; displayVal = `${v.from} y ${v.to}` }
+        else if (v.from) { displayOp = 'después de'; displayVal = v.from }
+        else { displayOp = 'antes de'; displayVal = v.to }
+      } else if (col.filterType === 'select') {
+        displayOp = 'es'
+        displayVal = col.filterOptions?.find(o => o.value === v)?.label ?? v
+      } else {
+        displayOp = 'contiene'; displayVal = v
+      }
+      return { key: col.key, label: col.label, displayOp, displayVal, col }
+    })
 )
 
+const activeFilterCount = computed(() => activeFilterList.value.length)
+
 const mergedParams = computed(() => ({
   ...props.params,
   ...activeFilters.value,
 }))
 
+const removeFilter = (key) => {
+  const u = { ...activeFilters.value }; delete u[key]; activeFilters.value = u
+}
+
+const openFilterMenu = async () => {
+  filterMenuStep.value = 'columns'
+  pendingCol.value = null
+  showFilterPanel.value = true
+  await nextTick()
+  const rect = filterAddBtnRef.value?.getBoundingClientRect()
+  if (rect) filterMenuStyle.value = { top: rect.bottom + 4 + 'px', left: rect.left + 'px' }
+}
+
+const toggleFilterMenu = async () => {
+  if (showFilterPanel.value) { closeFilterMenu() } else { await openFilterMenu() }
+}
+
+const closeFilterMenu = () => {
+  showFilterPanel.value = false
+  filterMenuStep.value = 'columns'
+  pendingCol.value = null
+  pendingValue.value = null
+}
+
+const selectFilterColumn = (col) => {
+  pendingCol.value = col
+  const existing = activeFilters.value[col.key]
+  if (col.filterType === 'daterange') {
+    if (existing?.from && existing?.to) { pendingDateOp.value = 'between'; pendingValue.value = { from: existing.from, to: existing.to, singleDate: '' } }
+    else if (existing?.from) { pendingDateOp.value = 'after'; pendingValue.value = { singleDate: existing.from, from: '', to: '' } }
+    else if (existing?.to) { pendingDateOp.value = 'before'; pendingValue.value = { singleDate: existing.to, from: '', to: '' } }
+    else { pendingDateOp.value = 'before'; pendingValue.value = { singleDate: '', from: '', to: '' } }
+  } else {
+    pendingValue.value = existing ?? ''
+  }
+  filterMenuStep.value = 'value'
+}
+
+const applyPendingFilter = () => {
+  if (!pendingCol.value) return
+  const col = pendingCol.value
+  let v
+  if (col.filterType === 'daterange') {
+    if (pendingDateOp.value === 'between') v = { from: pendingValue.value.from, to: pendingValue.value.to }
+    else if (pendingDateOp.value === 'after') v = { from: pendingValue.value.singleDate }
+    else v = { to: pendingValue.value.singleDate }
+  } else {
+    v = pendingValue.value
+  }
+  activeFilters.value = { ...activeFilters.value, [col.key]: v || null }
+  closeFilterMenu()
+}
+
+const openEditFilter = async (col) => {
+  selectFilterColumn(col)
+  showFilterPanel.value = true
+  await nextTick()
+  const rect = filterAddBtnRef.value?.getBoundingClientRect()
+  if (rect) filterMenuStyle.value = { top: rect.bottom + 4 + 'px', left: rect.left + 'px' }
+}
+
+const onFilterMenuOutsideClick = (e) => {
+  if (filterMenuRef.value && !filterMenuRef.value.contains(e.target) &&
+      filterAddBtnRef.value && !filterAddBtnRef.value.contains(e.target)) {
+    closeFilterMenu()
+  }
+}
+watch(showFilterPanel, v => {
+  if (v) document.addEventListener('mousedown', onFilterMenuOutsideClick)
+  else document.removeEventListener('mousedown', onFilterMenuOutsideClick)
+})
+
 // ─── Preview panel ─────────────────────────────────────────────────────────────
 const previewRow      = ref(null)
 const currentRatio    = ref(props.splitRatio)
@@ -61,6 +170,7 @@ const paginationHeight = ref(0)
 const previewCacheKey = computed(() => `table-preview-${resolvedName.value}`)
 
 const previewFromCache = ref(false)
+const previewPanelRef = ref(null)
 const closePreview = () => { previewRow.value = null }
 
 const previewTab  = ref('datos')
@@ -76,6 +186,7 @@ watch(previewRow, () => { previewTab.value = 'datos' })
 
 const handleRowClick = (row) => {
   if (previewEnabled.value) {
+    collapseDock()
     previewRow.value = previewRow.value?.id === row.id ? null : row
   } else {
     emit('row-click', row)
@@ -129,10 +240,74 @@ const startResize = (e) => {
   window.addEventListener('mouseup', onUp)
 }
 
-const onEsc = (e) => { if (e.key === 'Escape' && previewRow.value) closePreview() }
+const onEsc = (e) => { if (e.key === 'Escape') { if (previewRow.value) closePreview(); else collapseDock() } }
+
+// ─── Auto-close preview on outside click ──────────────────────────────────────
+const onDocMousedown = (e) => {
+  if (props.autoClosePreview && previewRow.value && previewPanelRef.value && !previewPanelRef.value.contains(e.target)) {
+    closePreview()
+  }
+}
+
+// ─── Dock (minimizar preview) ──────────────────────────────────────────────────
+const {
+  docked,
+  dock, undock: undockItem, isActive,
+  activeDockId, activeDockRect,
+  expandDock, collapseDock,
+} = useDockedPreviews()
+const route = useRoute()
+
+function minimizePreview() {
+  if (!previewRow.value) return
+  const label    = previewRow.value.name ?? previewRow.value.title ?? previewRow.value.email ?? String(previewRow.value.id)
+  const subtitle = previewRow.value.email ?? previewRow.value.description ?? null
+  dock({
+    id:        `${resolvedName.value}-${previewRow.value.id}`,
+    label,
+    subtitle,
+    row:       { ...previewRow.value },
+    tableName: resolvedName.value,
+    route:     route.path,
+  })
+  closePreview()
+}
+
+// Item que debe mostrarse como mini-preview flotante (pertenece a esta tabla)
+const floatingItem = computed(() =>
+  activeDockId.value
+    ? docked.value.find(d => d.id === activeDockId.value && d.tableName === resolvedName.value) ?? null
+    : null
+)
+
+// Posición del panel flotante: centrado sobre el tab que lo abrió
+const floatingPanelStyle = computed(() => {
+  const rect   = activeDockRect.value
+  const panelW = 384
+  const bottom = 52
+  if (!rect || typeof window === 'undefined') return { bottom: bottom + 'px', right: '16px' }
+  const tabCenter = rect.left + rect.width / 2
+  let right = window.innerWidth - tabCenter - panelW / 2
+  right = Math.max(8, Math.min(right, window.innerWidth - panelW - 8))
+  return { bottom: bottom + 'px', right: right + 'px' }
+})
+
+function expandToFull(item) {
+  previewRow.value = item.row
+  undockItem(item.id)
+}
+
+// Escuchar evento de restauración (fallback cuando la tabla no estaba montada)
+onMounted(() => {
+  useNuxtApp().hooks.hook('preview:restore', (item) => {
+    if (item.tableName === resolvedName.value) previewRow.value = item.row
+  })
+})
+
 onMounted(async () => {
   previewEnabled.value = !!slots.preview
   window.addEventListener('keydown', onEsc)
+  document.addEventListener('mousedown', onDocMousedown)
   // Restore preview from session cache — mark as from-cache to skip enter animation
   if (props.cached && previewEnabled.value) {
     try {
@@ -148,6 +323,7 @@ onMounted(async () => {
 })
 onBeforeUnmount(() => {
   window.removeEventListener('keydown', onEsc)
+  document.removeEventListener('mousedown', onDocMousedown)
   paginationObserver?.disconnect()
 })
 
@@ -192,11 +368,6 @@ const onColumnPanelOutsideClick = (e) => {
     showColumnPanel.value = false
   }
 }
-const onFilterPanelOutsideClick = (e) => {
-  if (filterPanelRef.value && !filterPanelRef.value.contains(e.target)) {
-    showFilterPanel.value = false
-  }
-}
 
 watch(showColumnPanel, async (v) => {
   if (v) {
@@ -213,10 +384,6 @@ watch(showColumnPanel, async (v) => {
     document.removeEventListener('mousedown', onColumnPanelOutsideClick)
   }
 })
-watch(showFilterPanel, (v) => {
-  if (v) document.addEventListener('mousedown', onFilterPanelOutsideClick)
-  else document.removeEventListener('mousedown', onFilterPanelOutsideClick)
-})
 
 // ─── Expose ───────────────────────────────────────────────────────────────────
 const getSelectedRows = () => tableRef.value?.getSelectedRows()
@@ -224,177 +391,366 @@ const reload          = () => tableRef.value?.reload()
 const clearCache      = () => tableRef.value?.clearCache()
 const exportTable     = (format, allPages, filteredRows) => tableRef.value?.exportTable(format, allPages, filteredRows)
 
-defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
+defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, closePreview })
 </script>
 
 <template>
   <div class="relative" ref="containerRef">
 
-    <!-- Card único -->
-    <div class="bg-card border border-card-line rounded-2xl shadow-sm overflow-hidden">
-
-      <!-- Toolbar -->
-      <div class="flex flex-wrap items-center gap-3 px-4 py-3 border-b border-card-line">
-        <div v-if="showSearch" class="flex-1 min-w-48">
-          <Forms.Input v-model="search" type="search" :placeholder="searchPlaceholder" :icon-left="IconSearch" size="sm" />
-        </div>
+    <!-- Toolbar row (no card) -->
+    <div class="flex flex-wrap items-center gap-2 mb-2">
 
-        <div v-if="showFilters && hasFilterableColumns" class="relative">
-          <button
-            type="button"
-            @click="showFilterPanel = !showFilterPanel"
-            :class="[
-              'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
-              showFilterPanel || activeFilterCount > 0
-                ? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:border-blue-500 dark:text-blue-300'
-                : 'border-card-line bg-card text-muted-foreground-1 hover:bg-muted-hover'
-            ]"
-          >
-            <IconAdjustmentsHorizontal class="size-4" stroke="1.5" />
-            Filtros{{ activeFilterCount > 0 ? ` (${activeFilterCount})` : '' }}
-          </button>
-
-          <!-- Filter panel — anchored below button -->
-          <Transition
-            enter-active-class="transition ease-out duration-150"
-            enter-from-class="opacity-0 translate-y-1 scale-95"
-            enter-to-class="opacity-100 translate-y-0 scale-100"
-            leave-active-class="transition ease-in duration-100"
-            leave-from-class="opacity-100 translate-y-0 scale-100"
-            leave-to-class="opacity-0 translate-y-1 scale-95"
-          >
-            <div
-              v-if="showFilterPanel"
-              ref="filterPanelRef"
-              class="absolute top-full left-0 z-50 mt-1.5 bg-dropdown border border-dropdown-line rounded-xl shadow-2xl p-3 min-w-56 max-h-96 overflow-y-auto"
-            >
-              <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest mb-3 px-1">Filtros</p>
-              <TableFilter v-model="activeFilters" :columns="filtersConfig" />
-            </div>
-          </Transition>
-        </div>
-
-        <slot name="toolbar" />
+      <!-- Search -->
+      <div v-if="showSearch" class="flex-1 min-w-48 max-w-xs">
+        <Forms.Input v-model="search" type="search" :placeholder="searchPlaceholder" :icon-left="IconSearch" size="sm" />
+      </div>
 
+      <!-- + Filtros button -->
+      <div v-if="showFilters && hasFilterableColumns" ref="filterAddBtnRef" class="relative">
         <button
-          ref="columnButtonRef"
           type="button"
-          @click="showColumnPanel = !showColumnPanel"
+          @click="toggleFilterMenu"
           :class="[
-            'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
-            showColumnPanel
-              ? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:border-blue-500 dark:text-blue-300'
+            'inline-flex items-center gap-1.5 py-1.5 px-3 text-sm font-medium rounded-lg border transition-colors',
+            activeFilterList.length
+              ? 'border-indigo-300 bg-indigo-50 text-indigo-700 dark:bg-indigo-900/20 dark:border-indigo-700 dark:text-indigo-300'
               : 'border-card-line bg-card text-muted-foreground-1 hover:bg-muted-hover'
           ]"
         >
-          <IconLayoutColumns class="size-4" />
-          Columnas
+          <IconPlus class="size-3.5" />
+          Filtros{{ activeFilterList.length ? ` (${activeFilterList.length})` : '' }}
         </button>
-
-        <TableExportable v-if="showExport" :table-ref="tableRef" :name="resolvedName" :columns="columns" />
       </div>
 
-      <!-- Contenido: tabla siempre full width + preview overlay -->
-      <div class="relative overflow-hidden">
-
-        <!-- Tabla -->
-        <Table
-          ref="tableRef"
-          :endpoint="resolvedEndpoint"
-          :columns="columns"
-          :name="resolvedName"
-          :params="mergedParams"
-          :search="search"
-          :checkable="checkable"
-          :cached="cached"
-          :show-reload-button="showReloadButton"
-          :click-row-to-open="clickRowToOpen"
-          :preview-row-id="previewRow?.id ?? null"
-          :preview-mode="!!previewEnabled"
-          @row-click="handleRowClick"
-          @loaded="handleLoaded"
-          @page-change="closePreview"
-          @per-page-change="closePreview"
+      <!-- Slot for custom toolbar buttons -->
+      <slot name="toolbar" />
+
+      <!-- Columnas button -->
+      <button
+        ref="columnButtonRef"
+        type="button"
+        @click="showColumnPanel = !showColumnPanel"
+        :class="[
+          'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
+          showColumnPanel
+            ? 'border-indigo-300 bg-indigo-50 text-indigo-700 dark:bg-indigo-900/20 dark:border-indigo-700 dark:text-indigo-300'
+            : 'border-card-line bg-card text-muted-foreground-1 hover:bg-muted-hover'
+        ]"
+      >
+        <IconLayoutColumns class="size-4" />
+        Columnas
+      </button>
+
+      <TableExportable v-if="showExport" :table-ref="tableRef" :name="resolvedName" :columns="columns" />
+    </div>
+
+    <!-- Filter chips row (shown when filters active) -->
+    <div v-if="activeFilterList.length" class="flex flex-wrap items-center gap-1.5 mb-2">
+      <div
+        v-for="chip in activeFilterList"
+        :key="chip.key"
+        class="inline-flex items-center text-xs rounded-lg border border-card-line bg-card overflow-hidden"
+      >
+        <span class="px-2.5 py-1 text-foreground font-medium border-r border-card-line bg-surface">{{ chip.label }}</span>
+        <span class="px-2 py-1 text-muted-foreground">{{ chip.displayOp }}</span>
+        <button
+          type="button"
+          @click.stop="openEditFilter(chip.col)"
+          class="inline-flex items-center gap-1 px-2 py-1 text-indigo-600 dark:text-indigo-400 font-medium hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-colors border-x border-card-line"
         >
-          <template v-for="(_, name) in forwardedSlots" #[name]="slotProps">
-            <slot :name="name" v-bind="slotProps ?? {}" />
-          </template>
-        </Table>
-
-        <!-- Preview panel overlay — slides in from right, tapa la tabla -->
-        <Transition
-          :enter-active-class="previewFromCache ? '' : 'transition ease-out duration-200'"
-          :enter-from-class="previewFromCache ? '' : 'opacity-0 translate-x-6'"
-          :enter-to-class="previewFromCache ? '' : 'opacity-100 translate-x-0'"
-          leave-active-class="transition ease-in duration-150"
-          leave-from-class="opacity-100 translate-x-0"
-          leave-to-class="opacity-0 translate-x-6"
+          {{ chip.displayVal }}
+          <IconChevronDown class="size-3 opacity-60" />
+        </button>
+        <button
+          type="button"
+          @click.stop="removeFilter(chip.key)"
+          class="px-1.5 py-1 text-muted-foreground hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
         >
-          <div
-            v-if="previewRow && previewEnabled"
-            class="absolute top-0 right-0 z-30 flex bg-card border-l border-card-line shadow-[-4px_0_16px_rgba(0,0,0,0.06)]"
-            :style="{ width: (100 - currentRatio) + '%', bottom: paginationHeight + 'px' }"
-          >
-            <!-- Resize handle -->
-            <div
-              class="w-1 shrink-0 cursor-col-resize bg-surface hover:bg-indigo-300 dark:hover:bg-indigo-600 transition-colors"
-              @mousedown="startResize"
-            />
-            <!-- Preview -->
-            <div class="flex flex-col flex-1 overflow-hidden">
+          <IconX class="size-3" />
+        </button>
+      </div>
+    </div>
 
-              <!-- Fixed header — always visible regardless of active tab -->
-              <div v-if="$slots['preview-header']" class="shrink-0 border-b border-card-line">
-                <slot name="preview-header" :row="previewRow" :close="closePreview" />
-              </div>
+    <!-- Table + preview overlay inside a minimal border box -->
+    <div class="relative overflow-hidden rounded-xl border border-card-line">
+
+      <!-- Tabla -->
+      <Table
+        ref="tableRef"
+        :endpoint="resolvedEndpoint"
+        :columns="columns"
+        :name="resolvedName"
+        :params="mergedParams"
+        :search="search"
+        :checkable="checkable"
+        :cached="cached"
+        :show-reload-button="showReloadButton"
+        :click-row-to-open="clickRowToOpen"
+        :preview-row-id="previewRow?.id ?? null"
+        :preview-mode="!!previewEnabled"
+        @row-click="handleRowClick"
+        @loaded="handleLoaded"
+        @page-change="closePreview"
+        @per-page-change="closePreview"
+      >
+        <template v-for="(_, name) in forwardedSlots" #[name]="slotProps">
+          <slot :name="name" v-bind="slotProps ?? {}" />
+        </template>
+      </Table>
 
-              <!-- Scrollable content -->
-              <div class="flex-1 overflow-y-auto min-h-0">
-                <slot v-if="previewTab === 'datos'" name="preview" :row="previewRow" :close="closePreview" />
-                <Table.PreviewTimeline
-                  v-else-if="previewTab === 'bitacora' && resolvedHistoryEndpoint"
-                  :endpoint="resolvedHistoryEndpoint"
-                />
+      <!-- Preview panel overlay — slides in from right, tapa la tabla -->
+      <Transition
+        :enter-active-class="previewFromCache ? '' : 'transition ease-out duration-200'"
+        :enter-from-class="previewFromCache ? '' : 'opacity-0 translate-x-6'"
+        :enter-to-class="previewFromCache ? '' : 'opacity-100 translate-x-0'"
+        leave-active-class="transition ease-in duration-150"
+        leave-from-class="opacity-100 translate-x-0"
+        leave-to-class="opacity-0 translate-x-6"
+      >
+        <div
+          v-if="previewRow && previewEnabled"
+          ref="previewPanelRef"
+          class="absolute top-0 right-0 z-30 flex bg-card border-l border-card-line shadow-[-4px_0_16px_rgba(0,0,0,0.06)]"
+          :style="{ width: (100 - currentRatio) + '%', bottom: paginationHeight + 'px' }"
+        >
+          <!-- Resize handle -->
+          <div
+            class="w-1 shrink-0 cursor-col-resize bg-surface hover:bg-indigo-300 dark:hover:bg-indigo-600 transition-colors"
+            @mousedown="startResize"
+          />
+          <!-- Preview -->
+          <div class="flex flex-col flex-1 overflow-hidden">
+
+            <!-- Barra de acciones del preview -->
+            <div class="shrink-0 flex items-center justify-between gap-2 px-3 py-2 border-b border-card-line">
+              <div class="flex-1 min-w-0">
+                <slot name="preview-header" :row="previewRow" :close="closePreview" />
               </div>
-
-              <!-- Tabs — bottom -->
-              <div v-if="hasHistory" class="shrink-0 flex border-t border-card-line">
+              <div class="flex items-center gap-1 shrink-0">
                 <button
                   type="button"
-                  @click="previewTab = 'datos'"
-                  :class="[
-                    'flex-1 py-2.5 text-xs font-semibold transition-colors border-r border-card-line border-t-2 -mt-px',
-                    previewTab === 'datos'
-                      ? 'border-t-card text-foreground'
-                      : 'border-t-transparent text-muted-foreground hover:text-foreground hover:bg-muted-hover'
-                  ]"
+                  class="inline-flex items-center justify-center size-6 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
+                  title="Minimizar"
+                  @click.stop="minimizePreview"
                 >
-                  Datos
+                  <IconMinus class="size-3.5" />
                 </button>
                 <button
                   type="button"
-                  @click="resolvedHistoryEndpoint && (previewTab = 'bitacora')"
-                  :disabled="!resolvedHistoryEndpoint"
-                  :class="[
-                    'flex-1 py-2.5 text-xs font-semibold transition-colors border-t-2 -mt-px',
-                    !resolvedHistoryEndpoint
-                      ? 'border-t-transparent text-muted-foreground/40 cursor-not-allowed'
-                      : previewTab === 'bitacora'
-                        ? 'border-t-card text-foreground'
-                        : 'border-t-transparent text-muted-foreground hover:text-foreground hover:bg-muted-hover'
-                  ]"
+                  class="inline-flex items-center justify-center size-6 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
+                  title="Cerrar"
+                  @click.stop="closePreview"
                 >
-                  Bitácora
+                  <IconX class="size-3.5" />
                 </button>
               </div>
+            </div>
 
+            <!-- Scrollable content -->
+            <div class="flex-1 overflow-y-auto min-h-0">
+              <slot v-if="previewTab === 'datos'" name="preview" :row="previewRow" :close="closePreview" />
+              <Table.PreviewTimeline
+                v-else-if="previewTab === 'bitacora' && resolvedHistoryEndpoint"
+                :endpoint="resolvedHistoryEndpoint"
+              />
             </div>
+
+            <!-- Tabs — bottom -->
+            <div v-if="hasHistory" class="shrink-0 flex border-t border-card-line">
+              <button
+                type="button"
+                @click="previewTab = 'datos'"
+                :class="[
+                  'flex-1 py-2.5 text-xs font-semibold transition-colors border-r border-card-line border-t-2 -mt-px',
+                  previewTab === 'datos'
+                    ? 'border-t-card text-foreground'
+                    : 'border-t-transparent text-muted-foreground hover:text-foreground hover:bg-muted-hover'
+                ]"
+              >
+                Datos
+              </button>
+              <button
+                type="button"
+                @click="resolvedHistoryEndpoint && (previewTab = 'bitacora')"
+                :disabled="!resolvedHistoryEndpoint"
+                :class="[
+                  'flex-1 py-2.5 text-xs font-semibold transition-colors border-t-2 -mt-px',
+                  !resolvedHistoryEndpoint
+                    ? 'border-t-transparent text-muted-foreground/40 cursor-not-allowed'
+                    : previewTab === 'bitacora'
+                      ? 'border-t-card text-foreground'
+                      : 'border-t-transparent text-muted-foreground hover:text-foreground hover:bg-muted-hover'
+                ]"
+              >
+                Bitácora
+              </button>
+            </div>
+
           </div>
-        </Transition>
+        </div>
+      </Transition>
 
-      </div>
     </div>
 
+    <!-- ── Floating mini-preview (dock expand, estilo Gmail) ── -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition ease-out duration-200"
+        enter-from-class="opacity-0 translate-y-4"
+        enter-to-class="opacity-100 translate-y-0"
+        leave-active-class="transition ease-in duration-150"
+        leave-from-class="opacity-100 translate-y-0"
+        leave-to-class="opacity-0 translate-y-4"
+      >
+        <div
+          v-if="floatingItem"
+          class="fixed z-[60] w-96 flex flex-col bg-card border border-card-line rounded-t-xl shadow-2xl overflow-hidden"
+          :style="{ ...floatingPanelStyle, maxHeight: 'min(480px, calc(100vh - 60px))' }"
+        >
+          <div class="flex items-center gap-2 px-3 py-2.5 border-b border-card-line shrink-0 bg-surface select-none">
+            <span class="size-6 rounded-full bg-primary flex items-center justify-center text-[10px] font-bold text-primary-foreground shrink-0">
+              {{ (floatingItem.label?.[0] ?? '?').toUpperCase() }}
+            </span>
+            <div class="flex-1 min-w-0">
+              <p class="text-sm font-semibold text-foreground truncate leading-tight">{{ floatingItem.label }}</p>
+              <p v-if="floatingItem.subtitle" class="text-xs text-muted-foreground truncate">{{ floatingItem.subtitle }}</p>
+            </div>
+            <button type="button" title="Expandir" class="inline-flex items-center justify-center size-6 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors" @click.stop="expandToFull(floatingItem)">
+              <IconMaximize class="size-3.5" />
+            </button>
+            <button type="button" title="Minimizar" class="inline-flex items-center justify-center size-6 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors" @click.stop="collapseDock()">
+              <IconMinus class="size-3.5" />
+            </button>
+            <button type="button" title="Cerrar" class="inline-flex items-center justify-center size-6 rounded-md text-muted-foreground hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors" @click.stop="undockItem(floatingItem.id)">
+              <IconX class="size-3.5" />
+            </button>
+          </div>
+          <div class="flex-1 overflow-y-auto min-h-0">
+            <slot name="preview" :row="floatingItem.row" :close="() => undockItem(floatingItem.id)" />
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- Filter menu — teleported to body -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition ease-out duration-150"
+        enter-from-class="opacity-0 translate-y-1 scale-95"
+        enter-to-class="opacity-100 translate-y-0 scale-100"
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100 translate-y-0 scale-100"
+        leave-to-class="opacity-0 translate-y-1 scale-95"
+      >
+        <div
+          v-if="showFilterPanel"
+          ref="filterMenuRef"
+          class="fixed z-[60] bg-dropdown border border-dropdown-line rounded-xl shadow-2xl min-w-52 overflow-hidden"
+          :style="filterMenuStyle"
+        >
+
+          <!-- Step 1: column picker -->
+          <template v-if="filterMenuStep === 'columns'">
+            <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest px-3 pt-2.5 pb-1">Filtrar por</p>
+            <div class="pb-1.5">
+              <button
+                v-for="col in filtersConfig"
+                :key="col.key"
+                type="button"
+                @click.stop="selectFilterColumn(col)"
+                class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-muted-hover transition-colors"
+              >
+                <span class="flex-1 text-left text-foreground">{{ col.label }}</span>
+                <span v-if="activeFilters[col.key]" class="text-[10px] font-semibold text-indigo-500 uppercase">activo</span>
+              </button>
+            </div>
+          </template>
+
+          <!-- Step 2: value input -->
+          <template v-else-if="filterMenuStep === 'value' && pendingCol">
+            <div class="flex items-center gap-2 px-3 py-2 border-b border-card-line bg-surface">
+              <button
+                type="button"
+                @click.stop="filterMenuStep = 'columns'"
+                class="text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <IconChevronLeft class="size-4" />
+              </button>
+              <span class="text-sm font-medium text-foreground">{{ pendingCol.label }}</span>
+            </div>
+            <div class="p-3 space-y-2.5">
+
+              <!-- text -->
+              <input
+                v-if="pendingCol.filterType === 'text'"
+                v-model="pendingValue"
+                type="text"
+                autofocus
+                @keydown.enter.stop="applyPendingFilter"
+                @keydown.escape.stop="closeFilterMenu"
+                placeholder="Buscar..."
+                class="w-full rounded-lg border border-card-line bg-card text-foreground py-1.5 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
+              />
+
+              <!-- select -->
+              <div v-else-if="pendingCol.filterType === 'select'" class="space-y-0.5">
+                <button
+                  v-for="opt in pendingCol.filterOptions"
+                  :key="opt.value"
+                  type="button"
+                  @click.stop="pendingValue = opt.value; applyPendingFilter()"
+                  :class="[
+                    'w-full flex items-center gap-2 px-2.5 py-1.5 text-sm rounded-lg transition-colors text-left',
+                    pendingValue === opt.value
+                      ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/20 dark:text-indigo-300'
+                      : 'hover:bg-muted-hover text-foreground'
+                  ]"
+                >
+                  <span class="flex-1">{{ opt.label }}</span>
+                  <IconCheck v-if="pendingValue === opt.value" class="size-3.5 shrink-0 text-indigo-500" />
+                </button>
+              </div>
+
+              <!-- daterange -->
+              <div v-else-if="pendingCol.filterType === 'daterange'" class="space-y-2">
+                <div class="flex gap-1">
+                  <button
+                    v-for="op in dateOps"
+                    :key="op.value"
+                    type="button"
+                    @click.stop="pendingDateOp = op.value"
+                    :class="[
+                      'flex-1 py-1 text-xs rounded-lg border transition-colors',
+                      pendingDateOp === op.value
+                        ? 'border-indigo-400 bg-indigo-50 text-indigo-700 dark:bg-indigo-900/20 dark:text-indigo-300'
+                        : 'border-card-line text-muted-foreground hover:bg-muted-hover'
+                    ]"
+                  >
+                    {{ op.label }}
+                  </button>
+                </div>
+                <template v-if="pendingDateOp === 'between'">
+                  <input type="date" v-model="pendingValue.from" class="w-full rounded-lg border border-card-line bg-card text-foreground py-1.5 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500" />
+                  <input type="date" v-model="pendingValue.to" class="w-full rounded-lg border border-card-line bg-card text-foreground py-1.5 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500" />
+                </template>
+                <input v-else type="date" v-model="pendingValue.singleDate" class="w-full rounded-lg border border-card-line bg-card text-foreground py-1.5 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500" />
+              </div>
+
+              <button
+                v-if="pendingCol.filterType !== 'select'"
+                type="button"
+                @click.stop="applyPendingFilter"
+                class="w-full py-1.5 text-sm font-medium text-center rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors"
+              >
+                Aplicar
+              </button>
+            </div>
+          </template>
+
+        </div>
+      </Transition>
+    </Teleport>
+
     <!-- Column panel — teleported to body to escape overflow-hidden -->
     <Teleport to="body">
       <Transition

package/nuxt.config.ts

@@ -2,6 +2,10 @@ import tailwindcss from '@tailwindcss/vite'
 
 export default defineNuxtConfig({
   extends: ['@innertia-solutions/nuxt-core'],
+  modules: [
+    '@pinia/nuxt',
+    'pinia-plugin-persistedstate/nuxt', // required for dockedPreviews store persistence
+  ],
   css: ['@innertia-solutions/nuxt-theme-spark/spark.css'],
   components: [
     { path: './components', pathPrefix: true, prefix: '' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/nuxt-theme-spark",
-  "version": "0.1.138",
+  "version": "0.1.140",
   "description": "Innertia Solutions — Spark theme: backoffice, landing and mobile components and layouts",
   "keywords": [
     "nuxt",
@@ -29,6 +29,8 @@
   },
   "dependencies": {
     "@innertia-solutions/nuxt-core": "^0.1.4",
+    "@pinia/nuxt": "^0.11.3",
+    "pinia-plugin-persistedstate": "^4.7.1",
     "@tabler/icons-vue": "^3.44.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.10",

package/plugins/dockedPreviewsSync.client.js

@@ -0,0 +1,17 @@
+/**
+ * Sincroniza el store de previews minimizados entre pestañas del navegador.
+ * Escucha los eventos `storage` que dispara localStorage cuando otra pestaña escribe.
+ */
+export default defineNuxtPlugin(() => {
+  const store = useDockedPreviewsStore()
+
+  window.addEventListener('storage', (event) => {
+    if (event.key !== 'docked-previews' || !event.newValue) return
+    try {
+      const persisted = JSON.parse(event.newValue)
+      store.hydrate(persisted.items ?? [])
+    } catch {
+      // JSON inválido — ignorar
+    }
+  })
+})

package/shared/composables/useDockedPreviews.js

@@ -0,0 +1,56 @@
+/**
+ * Composable para manejar los previews minimizados.
+ *
+ * - `docked` / `dock` / `undock` / `isActive` → Pinia store (persiste en localStorage, sync entre tabs)
+ * - `activeDockId` / `activeDockRect` / expand / collapse → estado de UI efímero (no persistido)
+ */
+export function useDockedPreviews() {
+  const store = useDockedPreviewsStore()
+
+  // ─── UI state (no persiste) ───────────────────────────────────────────────────
+  const activeDockId     = useState('docked-active-id',   () => null)
+  const activeDockRect   = useState('docked-active-rect',  () => null)
+
+  // ─── Acceso reactivo a los items persistidos ──────────────────────────────────
+  const docked = computed(() => store.items)
+
+  // ─── Dock / undock ────────────────────────────────────────────────────────────
+  const dock = (payload) => store.add(payload)
+
+  const undock = (id) => {
+    store.remove(id)
+    if (activeDockId.value === id) {
+      activeDockId.value   = null
+      activeDockRect.value = null
+    }
+  }
+
+  const isActive = (id) => !!store.items.find(d => d.id === id)
+
+  // ─── Panel flotante ───────────────────────────────────────────────────────────
+  const expandDock = (id, rect = null) => {
+    if (activeDockId.value === id) {
+      activeDockId.value   = null
+      activeDockRect.value = null
+    } else {
+      activeDockId.value   = id
+      activeDockRect.value = rect ? { left: rect.left, width: rect.width } : null
+    }
+  }
+
+  const collapseDock = () => {
+    activeDockId.value   = null
+    activeDockRect.value = null
+  }
+
+  return {
+    docked,
+    activeDockId,
+    activeDockRect,
+    dock,
+    undock,
+    isActive,
+    expandDock,
+    collapseDock,
+  }
+}

package/shared/stores/dockedPreviews.js

@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia'
+
+// Storage SSR-safe: null en servidor, localStorage en cliente
+const clientStorage = typeof window !== 'undefined' ? window.localStorage : null
+
+/**
+ * Store persistido en localStorage para los previews minimizados.
+ * Sobrevive recargas y se sincroniza entre pestañas (via plugin dockedPreviewsSync).
+ */
+export const useDockedPreviewsStore = defineStore('docked-previews', {
+  state: () => ({
+    items: [],
+  }),
+
+  actions: {
+    add({ id, label, subtitle, row, tableName, route }) {
+      if (this.items.find(d => d.id === id)) return
+      this.items.push({ id, label, subtitle: subtitle ?? null, row, tableName, route })
+    },
+
+    remove(id) {
+      this.items = this.items.filter(d => d.id !== id)
+    },
+
+    /** Sincroniza el estado desde otra pestaña (llamado por el plugin de storage). */
+    hydrate(items) {
+      this.items = items
+    },
+  },
+
+  persist: {
+    storage: clientStorage,
+  },
+})