@innertia-solutions/nuxt-theme-spark 0.1.137 → 0.1.139

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, IconAdjustmentsHorizontal, IconLayoutColumns, IconGripVertical, IconMinus, IconMaximize, IconX } 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)
@@ -61,6 +62,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 +78,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 +132,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 +215,7 @@ onMounted(async () => {
 })
 onBeforeUnmount(() => {
   window.removeEventListener('keydown', onEsc)
+  document.removeEventListener('mousedown', onDocMousedown)
   paginationObserver?.disconnect()
 })
 
@@ -224,7 +292,7 @@ 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>
@@ -332,6 +400,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
         >
           <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' }"
           >
@@ -343,9 +412,29 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
             <!-- Preview -->
             <div class="flex flex-col flex-1 overflow-hidden">
 
-              <!-- 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" />
+              <!-- 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>
+                <div class="flex items-center gap-1 shrink-0">
+                  <button
+                    type="button"
+                    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"
+                  >
+                    <IconMinus class="size-3.5" />
+                  </button>
+                  <button
+                    type="button"
+                    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"
+                  >
+                    <IconX class="size-3.5" />
+                  </button>
+                </div>
               </div>
 
               <!-- Scrollable content -->
@@ -395,6 +484,46 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
       </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>
+
     <!-- 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.137",
+  "version": "0.1.139",
   "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,
+  },
+})

package/spark.css

@@ -663,6 +663,24 @@
         scrollbar-gutter: stable;
     }
 
+    ::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+    }
+    ::-webkit-scrollbar-track {
+        background: var(--scrollbar-track);
+    }
+    ::-webkit-scrollbar-thumb {
+        background: var(--scrollbar-thumb);
+        border-radius: 9999px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background: var(--muted-foreground-2);
+    }
+    ::-webkit-scrollbar-corner {
+        background: var(--scrollbar-track);
+    }
+
     button:not(:disabled),
     [role="button"]:not(:disabled) {
         cursor: pointer;