@innertia-solutions/nuxt-theme-spark 0.1.85 → 0.1.87

package/components/Admin/Base.vue

@@ -1,73 +1,96 @@
 <script setup lang="ts">
-const isOpen = ref(false)
-const open = () => { isOpen.value = true }
-const close = () => { isOpen.value = false }
+import * as icons from '@tabler/icons-vue'
 
-provide('vantage:sidebar', { isOpen, open, close })
+const props = defineProps({
+  floating: { type: Boolean, default: false },
+  user:     { type: Object as () => { name?: string; email?: string } | null, default: null },
+})
+
+const emit = defineEmits(['logout'])
+
+const getInitials = (name?: string) => {
+  if (!name) return 'U'
+  const parts = name.split(' ')
+  return parts.length > 1 ? parts[0][0] + parts[1][0] : parts[0][0]
+}
 </script>
 
 <template>
-  <div class="bg-slate-50 dark:bg-slate-900 min-h-screen">
-
-    <!-- Backdrop mobile -->
-    <Transition enter-from-class="opacity-0" enter-active-class="transition-opacity duration-300"
-                leave-to-class="opacity-0"   leave-active-class="transition-opacity duration-300">
-      <div v-if="isOpen" class="lg:hidden fixed inset-0 z-50 bg-black/40 backdrop-blur-sm" @click="close" />
-    </Transition>
+  <aside
+    id="hs-pro-sidebar"
+    :class="[
+      'hs-overlay [--auto-close:lg]',
+      'hs-overlay-open:translate-x-0 -translate-x-full transition-transform duration-300 transform',
+      'w-65 hidden fixed z-60',
+      'lg:block lg:translate-x-0 lg:inset-e-auto',
+      floating
+        ? 'inset-y-3 start-3 rounded-2xl shadow-sm border border-sidebar-line bg-sidebar'
+        : 'inset-y-0 inset-s-0 h-full border-e border-sidebar-line bg-sidebar lg:bottom-0',
+    ]"
+    tabindex="-1"
+    aria-label="Sidebar"
+  >
+    <div class="relative flex flex-col h-full max-h-full pt-3">
+      <!-- Logo + close button (mobile) -->
+      <header class="h-11.5 ps-2 pe-2 lg:ps-5 flex items-center gap-x-1 shrink-0">
+        <slot name="logo" />
+        <div class="lg:hidden ms-auto">
+          <button
+            type="button"
+            class="w-6 h-7 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-md bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus"
+            data-hs-overlay="#hs-pro-sidebar"
+          >
+            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="7 8 3 12 7 16" />
+              <line x1="21" x2="11" y1="12" y2="12" />
+              <line x1="21" x2="11" y1="6" y2="6" />
+              <line x1="21" x2="11" y1="18" y2="18" />
+            </svg>
+          </button>
+        </div>
+      </header>
 
-    <!-- Sidebar -->
-    <aside
-      tabindex="-1"
-      aria-label="Sidebar"
-      :class="[
-        'fixed inset-y-0 start-0 z-60 w-65 h-full',
-        'bg-white dark:bg-slate-800 border-e border-slate-200 dark:border-slate-700',
-        'transition-transform duration-300',
-        'lg:translate-x-0',
-        isOpen ? 'translate-x-0' : 'max-lg:-translate-x-full',
-      ]"
-    >
-      <div class="flex flex-col h-full pt-3 lg:pt-6">
+      <!-- Search slot -->
+      <div v-if="$slots.search" class="px-4 py-2 shrink-0">
+        <slot name="search" />
+      </div>
 
-        <!-- Logo + close mobile -->
-        <header class="h-11.5 ps-2 pe-2 lg:ps-5 flex items-center gap-x-1 shrink-0">
-          <slot name="logo" />
-          <div class="lg:hidden ms-auto">
-            <button type="button"
-              class="w-6 h-7 inline-flex justify-center items-center rounded-md border border-slate-200 bg-white text-slate-500 hover:bg-slate-50 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-700"
-              @click="close">
-              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="7 8 3 12 7 16" />
-                <line x1="21" x2="11" y1="12" y2="12" />
-                <line x1="21" x2="11" y1="6"  y2="6"  />
-                <line x1="21" x2="11" y1="18" y2="18" />
-              </svg>
-            </button>
-          </div>
-        </header>
+      <!-- Nav content - scrollable -->
+      <div class="flex-1 min-h-0 mt-1.5 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
+        <slot name="menu" />
+      </div>
 
-        <!-- Menu scrollable -->
-        <div class="flex-1 min-h-0 mt-1.5 overflow-y-auto
-          [&::-webkit-scrollbar]:w-2
-          [&::-webkit-scrollbar-thumb]:rounded-full
-          [&::-webkit-scrollbar-track]:bg-slate-100
-          [&::-webkit-scrollbar-thumb]:bg-slate-300
-          dark:[&::-webkit-scrollbar-track]:bg-slate-700
-          dark:[&::-webkit-scrollbar-thumb]:bg-slate-500">
-          <slot name="menu" />
+      <!-- Sidebar footer -->
+      <div class="shrink-0">
+        <!-- Controls slot (dark mode, alerts, etc.) -->
+        <div v-if="$slots['user-controls']" class="flex items-center gap-x-2 px-3 pt-2.5">
+          <slot name="user-controls" />
         </div>
 
-        <!-- User footer -->
-        <div class="shrink-0 border-t border-slate-200 dark:border-slate-700 p-5">
-          <slot name="user-footer" />
+        <!-- User info -->
+        <div class="flex items-center gap-x-2.5 px-3 py-5">
+          <div class="size-8 rounded-full bg-blue-600 text-white text-xs font-semibold flex items-center justify-center uppercase shrink-0">
+            {{ getInitials(user?.name) }}
+          </div>
+          <div class="min-w-0 flex-1">
+            <p class="text-sm font-medium text-slate-800 dark:text-slate-200 truncate leading-tight">{{ user?.name ?? 'Usuario' }}</p>
+            <p class="text-xs text-slate-400 dark:text-slate-500 truncate leading-tight">{{ user?.email ?? '—' }}</p>
+          </div>
+          <button type="button" @click="emit('logout')" title="Cerrar sesión"
+            class="shrink-0 inline-flex items-center justify-center size-7 rounded-lg text-slate-400 dark:text-slate-500 hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-500/10 dark:hover:text-red-400 transition-colors"
+          >
+            <icons.IconLogout class="size-4" />
+          </button>
         </div>
 
+        <!-- Env bar -->
+        <div class="px-3 pb-3">
+          <App.DevEnvironmentBar sidebar />
+        </div>
       </div>
-    </aside>
-
-    <!-- Main content -->
-    <slot />
+    </div>
+  </aside>
 
-  </div>
+  <!-- Main content -->
+  <slot />
 </template>

package/components/Admin/Page.vue

@@ -1,7 +1,73 @@
-<script setup></script>
+<script setup lang="ts">
+import * as icons from '@tabler/icons-vue'
+
+const props = defineProps({
+  title:       { type: String, default: '' },
+  description: { type: String, default: '' },
+  icon:        { type: String, default: '' },
+  color:       { type: String, default: 'gray' },
+  sticky:      { type: Boolean, default: true },
+})
+
+const colorMap: Record<string, { icon: string; bg: string; border: string }> = {
+  gray:   { icon: 'text-slate-500 dark:text-slate-400',   bg: 'bg-slate-100 dark:bg-slate-800',      border: 'border-slate-200 dark:border-slate-700'       },
+  blue:   { icon: 'text-blue-600 dark:text-blue-400',     bg: 'bg-blue-50 dark:bg-blue-500/10',      border: 'border-blue-200 dark:border-blue-500/30'      },
+  green:  { icon: 'text-green-600 dark:text-green-400',   bg: 'bg-green-50 dark:bg-green-500/10',    border: 'border-green-200 dark:border-green-500/30'    },
+  red:    { icon: 'text-red-600 dark:text-red-400',       bg: 'bg-red-50 dark:bg-red-500/10',        border: 'border-red-200 dark:border-red-500/30'        },
+  amber:  { icon: 'text-amber-600 dark:text-amber-400',   bg: 'bg-amber-50 dark:bg-amber-500/10',    border: 'border-amber-200 dark:border-amber-500/30'    },
+  purple: { icon: 'text-purple-600 dark:text-purple-400', bg: 'bg-purple-50 dark:bg-purple-500/10',  border: 'border-purple-200 dark:border-purple-500/30'  },
+  teal:   { icon: 'text-teal-600 dark:text-teal-400',     bg: 'bg-teal-50 dark:bg-teal-500/10',      border: 'border-teal-200 dark:border-teal-500/30'      },
+}
+
+const accent = computed(() => colorMap[props.color] ?? colorMap.gray)
+const iconComponent = computed(() => props.icon ? (icons as any)[props.icon] : null)
+</script>
 
 <template>
-  <div class="lg:ps-65">
+  <div class="space-y-4">
+
+    <!-- Page header card -->
+    <div :class="sticky ? 'sticky top-3 z-20' : ''">
+      <div class="flex items-center justify-between bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-sm px-4 py-3">
+        <div class="flex items-center gap-x-4">
+
+          <!-- Icon -->
+          <div v-if="iconComponent"
+            class="shrink-0 size-10 rounded-xl flex items-center justify-center border"
+            :class="[accent.bg, accent.border]"
+          >
+            <component :is="iconComponent" class="size-5" :class="accent.icon" />
+          </div>
+
+          <!-- Title + description -->
+          <div>
+            <div class="flex items-baseline gap-x-2">
+              <h1 class="text-lg font-semibold text-slate-800 dark:text-slate-100">{{ title }}</h1>
+              <template v-if="description">
+                <span class="size-1 rounded-full bg-slate-300 dark:bg-slate-600 shrink-0 self-center"></span>
+                <p class="text-sm text-slate-400 dark:text-slate-500">{{ 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>
+
+        <!-- Actions -->
+        <div v-if="$slots.actions" class="flex items-center gap-x-2">
+          <slot name="actions" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Tabs -->
+    <div v-if="$slots.tabs">
+      <slot name="tabs" :color="color" />
+    </div>
+
+    <!-- Content -->
     <slot />
+
   </div>
 </template>

package/components/App/DevEnvironmentBar.vue

@@ -0,0 +1,43 @@
+<script setup>
+const props = defineProps({ sidebar: { type: Boolean, default: false } })
+
+const config = useRuntimeConfig()
+const appEnv = config.public.appEnv
+
+const isVisible = computed(() => appEnv && appEnv !== 'production')
+
+useHead({
+  htmlAttrs: { class: (!props.sidebar && isVisible.value) ? 'has-env-bar' : '' },
+  style: [{ children: (!props.sidebar && isVisible.value) ? ':root { --env-bar-height: 1.5rem; }' : ':root { --env-bar-height: 0px; }' }],
+})
+
+const envColor = computed(() => {
+  const env = appEnv.toLowerCase()
+  if (env === 'staging') return props.sidebar ? 'bg-amber-50 text-amber-600 border border-amber-200 dark:bg-amber-500/10 dark:text-amber-400 dark:border-amber-500/30' : 'bg-amber-500 text-white'
+  if (env === 'local' || env === 'dev') return props.sidebar ? 'bg-blue-50 text-blue-600 border border-blue-200 dark:bg-blue-500/10 dark:text-blue-400 dark:border-blue-500/30' : 'bg-blue-600 text-white'
+  return props.sidebar ? 'bg-red-50 text-red-600 border border-red-200 dark:bg-red-500/10 dark:text-red-400 dark:border-red-500/30' : 'bg-red-600 text-white'
+})
+</script>
+
+<template>
+  <!-- Sidebar inline variant -->
+  <div v-if="isVisible && sidebar"
+    :class="['w-full rounded-lg px-3 py-1.5 flex items-center justify-center gap-x-1.5 select-none', envColor]"
+  >
+    <span class="text-[9px] font-black tracking-widest uppercase">ENTORNO: {{ appEnv }}</span>
+  </div>
+
+  <!-- Full-width fixed bar -->
+  <div v-else-if="isVisible && !sidebar"
+    class="fixed bottom-0 left-0 right-0 z-[100] h-6 overflow-hidden select-none pointer-events-none"
+  >
+    <div
+      class="flex items-center justify-center w-full h-full text-[10px] font-bold tracking-widest uppercase opacity-90 shadow-lg border-t border-white/10"
+      :class="envColor"
+    >
+      <span class="mr-2">━━━━━</span>
+      ENTORNO: {{ appEnv }}
+      <span class="ml-2">━━━━━</span>
+    </div>
+  </div>
+</template>

package/components/App/PageLoadingSpinner.vue

@@ -57,7 +57,7 @@ onBeforeUnmount(() => {
 <style scoped>
 .page-loading-spinner {
   position: fixed;
-  top: 0.625rem;
+  bottom: 0.625rem;
   right: 0.5rem;
   z-index: 2147483647;
   display: flex;

package/components/Layout/Admin.vue

@@ -1,4 +1,8 @@
 <script setup>
+const props = defineProps({
+  floating: { type: Boolean, default: false },
+})
+
 const showAnimation = ref(false)
 onMounted(() => {
   const seen = sessionStorage.getItem('auth-entered')
@@ -11,12 +15,57 @@ onMounted(() => {
 
 <template>
   <div :class="{ 'animate-entrance': showAnimation }">
-    <AdminBase>
+    <!-- Header - matches Preline exactly -->
+    <header class="lg:ms-65 fixed top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-50 bg-navbar border-b border-navbar-line">
+      <div class="flex justify-between xl:grid xl:grid-cols-3 basis-full items-center w-full py-2.5 px-2 sm:px-5">
+
+        <!-- Left col: mobile toggle + desktop search -->
+        <div class="xl:col-span-1 flex items-center md:gap-x-3">
+          <!-- Mobile sidebar toggle -->
+          <div class="lg:hidden">
+            <button
+              type="button"
+              class="w-7 h-9.5 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus"
+              aria-haspopup="dialog"
+              aria-expanded="false"
+              aria-controls="hs-pro-sidebar"
+              aria-label="Toggle navigation"
+              data-hs-overlay="#hs-pro-sidebar"
+            >
+              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M17 8L21 12L17 16M3 12H13M3 6H13M3 18H13" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Desktop search -->
+          <div class="hidden lg:block min-w-80 xl:w-full">
+            <slot name="header-left" />
+          </div>
+        </div>
+
+        <!-- Right col: actions -->
+        <div class="xl:col-span-2 flex justify-end items-center gap-x-2">
+          <div class="flex items-center">
+            <!-- Mobile search icon -->
+            <div class="lg:hidden">
+              <slot name="header-search-mobile" />
+            </div>
+
+            <slot name="header-right" />
+          </div>
+        </div>
+
+      </div>
+    </header>
+
+    <!-- Sidebar + main content -->
+    <AdminBase :floating="floating">
       <template #logo><slot name="logo" /></template>
       <template #menu><slot name="menu" /></template>
       <template #user-footer><slot name="user-footer" /></template>
 
-      <div class="lg:ps-65">
+      <div :class="floating ? 'lg:ps-70 pt-14' : 'lg:ps-65 pt-14'">
         <slot />
       </div>
     </AdminBase>

package/components/Nav/Tabs.vue

@@ -10,11 +10,26 @@ interface Tab {
 
 const props = withDefaults(defineProps<{
   tabs: Tab[]
+  color?: string
   activeClass?: string
 }>(), {
-  activeClass: 'bg-white dark:bg-slate-800 text-blue-600 dark:text-blue-400 shadow-sm',
+  color: 'blue',
 })
 
+const colorMap: Record<string, string> = {
+  gray:   'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 shadow-sm',
+  blue:   'bg-white dark:bg-slate-800 text-blue-600 dark:text-blue-400 shadow-sm',
+  green:  'bg-white dark:bg-slate-800 text-green-600 dark:text-green-400 shadow-sm',
+  red:    'bg-white dark:bg-slate-800 text-red-600 dark:text-red-400 shadow-sm',
+  amber:  'bg-white dark:bg-slate-800 text-amber-600 dark:text-amber-400 shadow-sm',
+  purple: 'bg-white dark:bg-slate-800 text-purple-600 dark:text-purple-400 shadow-sm',
+  teal:   'bg-white dark:bg-slate-800 text-teal-600 dark:text-teal-400 shadow-sm',
+}
+
+const resolvedActiveClass = computed(() =>
+  props.activeClass ?? colorMap[props.color] ?? colorMap.blue
+)
+
 const route = useRoute()
 
 const isActive = (tab: Tab) =>
@@ -22,14 +37,14 @@ const isActive = (tab: Tab) =>
 </script>
 
 <template>
-  <div class="flex items-center gap-x-1 p-1 bg-slate-100 dark:bg-slate-900/50 rounded-xl w-fit border border-slate-200 dark:border-slate-700">
+  <div class="flex items-center gap-x-1 p-1 bg-slate-100 dark:bg-slate-900/50 rounded-xl w-fit border border-slate-200 dark:border-slate-800">
     <NuxtLink
       v-for="tab in tabs"
       :key="tab.to"
       :to="tab.to"
       class="flex items-center gap-x-2 px-4 py-2 text-xs font-bold rounded-lg transition-all"
       :class="isActive(tab)
-        ? activeClass
+        ? resolvedActiveClass
         : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'"
     >
       <component :is="tab.icon" v-if="tab.icon" class="size-4" />

package/components/Table/Database.vue

@@ -3,9 +3,10 @@ import { IconSearch, IconLoader2, IconCheck, IconX } from '@tabler/icons-vue'
 
 // Dense database view with inline cell editing — click cell → input → blur → mutation
 const props = defineProps({
-  endpoint: { type: String, required: true },
-  columns: { type: Array, required: true }, // [{ key, label, editable?, type?: 'text'|'number'|'select', options?: [] }]
-  name: { type: String, required: true },
+  table:    { type: Object, default: null },
+  endpoint: { type: String, default: undefined },
+  columns:  { type: Array,  required: true }, // [{ key, label, editable?, type?: 'text'|'number'|'select', options?: [] }]
+  name:     { type: String, default: undefined },
   params: { type: Object, default: () => ({}) },
   updateMutation: { type: Function, default: null }, // (id, field, value) => Promise
   cached: { type: Boolean, default: false },
@@ -15,6 +16,9 @@ const props = defineProps({
 
 const emit = defineEmits(['row-click', 'cell-save'])
 
+const resolvedEndpoint = computed(() => props.table?.endpoint ?? props.endpoint)
+const resolvedName     = computed(() => props.table?.name     ?? props.name)
+
 const tableRef = ref(null)
 
 // ─── Inline editing ───────────────────────────────────────────────────────────
@@ -97,9 +101,9 @@ defineExpose({ reload })
     <div class="overflow-x-auto border border-slate-200 dark:border-slate-700 rounded-xl">
       <Table
         ref="tableRef"
-        :endpoint="endpoint"
+        :endpoint="resolvedEndpoint"
         :columns="columns"
-        :name="name"
+        :name="resolvedName"
         :params="mergedParams"
         :search="search"
         :cached="cached"

package/components/Table/DownloadDropdown.vue

@@ -31,7 +31,7 @@ const exportTable = (format) => {
     <button
       id="hs-as-table-table-export-dropdown"
       type="button"
-      class="py-1.5 sm:py-2 px-2.5 inline-flex items-center gap-x-1.5 text-sm sm:text-xs font-medium rounded-lg border border-slate-200 bg-white text-slate-800 shadow-2xs hover:bg-slate-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-slate-50 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-700 dark:focus:bg-slate-700"
+      class="py-1.5 sm:py-2 px-2.5 inline-flex items-center gap-x-1.5 text-sm sm:text-xs font-medium rounded-lg border border-slate-200 bg-white text-slate-800 shadow-2xs hover:bg-slate-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-slate-50 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-300 dark:hover:bg-slate-700 dark:focus:bg-slate-700"
       aria-haspopup="menu"
       aria-expanded="false"
       aria-label="Dropdown"
@@ -40,7 +40,7 @@ const exportTable = (format) => {
       Exportar
     </button>
     <div
-      class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden divide-y divide-slate-200 min-w-48 z-10 bg-white shadow-md rounded-lg p-2 mt-2 dark:divide-slate-700 dark:bg-slate-800 dark:border dark:border-slate-700 border-t border-slate-200 dark:border-slate-700"
+      class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden divide-y divide-slate-200 min-w-48 z-10 bg-white shadow-md rounded-lg p-2 mt-2 dark:divide-slate-800 dark:bg-slate-900 dark:border dark:border-slate-800 border-t border-slate-200 dark:border-slate-800"
       role="menu"
       aria-orientation="vertical"
       aria-labelledby="hs-as-table-table-export-dropdown"
@@ -90,7 +90,7 @@ const exportTable = (format) => {
           <input
             type="checkbox"
             v-model="exportAllPages"
-            class="shrink-0 border-slate-300 rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-slate-800 dark:border-slate-600"
+            class="shrink-0 border-slate-300 rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-slate-900 dark:border-slate-600"
           />
           Todas las páginas
         </label>
@@ -101,7 +101,7 @@ const exportTable = (format) => {
           <input
             type="checkbox"
             v-model="exportFilteredRows"
-            class="shrink-0 border-slate-300 rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-slate-800 dark:border-slate-600"
+            class="shrink-0 border-slate-300 rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-slate-900 dark:border-slate-600"
           />
           Solo filas filtradas
         </label>

package/components/Table/FilterDropdown.vue

@@ -55,8 +55,8 @@ const displayText = computed(() => {
 
 const selectClasses = computed(() => {
   const base =
-    "relative w-full rounded-lg border bg-white dark:bg-slate-800 transition-colors cursor-pointer text-slate-900 dark:text-white py-2 px-3 text-sm focus:outline-none focus:ring-0 focus:border-gray-400";
-  const validation = "border-gray-200 dark:border-slate-700";
+    "relative w-full rounded-lg border bg-white dark:bg-slate-900 transition-colors cursor-pointer text-slate-900 dark:text-white py-2 px-3 text-sm focus:outline-none focus:ring-0 focus:border-gray-400";
+  const validation = "border-gray-200 dark:border-slate-800";
   const disabled = props.disabled ? "opacity-50 cursor-not-allowed" : "";
   return `${base} ${validation} ${disabled}`;
 });
@@ -169,7 +169,7 @@ onUnmounted(() => document.removeEventListener("mousedown", handleClickOutside))
       <div
         v-show="isOpen"
         :class="[
-          'absolute z-50 w-full mt-1 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-xl max-h-60 overflow-auto',
+          'absolute z-50 w-full mt-1 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl shadow-xl max-h-60 overflow-auto',
           menuClass,
         ]"
       >

package/components/Table/Grid.vue

@@ -3,9 +3,10 @@ import { IconSearch } from '@tabler/icons-vue'
 
 // Grid / card layout view — wraps DataTable with viewMode="grid"
 const props = defineProps({
-  endpoint: { type: String, required: true },
-  columns: { type: Array, required: true },
-  name: { type: String, required: true },
+  table:    { type: Object, default: null },
+  endpoint: { type: String, default: undefined },
+  columns:  { type: Array,  required: true },
+  name:     { type: String, default: undefined },
   params: { type: Object, default: () => ({}) },
   cached: { type: Boolean, default: true },
   searchPlaceholder: { type: String, default: 'Buscar...' },
@@ -16,6 +17,9 @@ const props = defineProps({
 
 const emit = defineEmits(['row-click', 'loaded'])
 
+const resolvedEndpoint = computed(() => props.table?.endpoint ?? props.endpoint)
+const resolvedName     = computed(() => props.table?.name     ?? props.name)
+
 const search = ref('')
 const tableRef = ref(null)
 
@@ -41,9 +45,9 @@ defineExpose({ reload, clearCache })
 
     <DataTable
       ref="tableRef"
-      :endpoint="endpoint"
+      :endpoint="resolvedEndpoint"
       :columns="columns"
-      :name="name"
+      :name="resolvedName"
       :params="params"
       :search="search"
       :cached="cached"

package/components/Table/Kanban.vue

@@ -6,8 +6,9 @@ import { useQueryClient } from '@tanstack/vue-query'
 // Usage: <TableKanban endpoint="..." :states="[{key:'todo',label:'Pendiente',color:'slate'}]" state-key="status" ... />
 
 const props = defineProps({
-  endpoint: { type: String, required: true },     // POST endpoint returning paginated list
-  name: { type: String, required: true },          // used as queryKey base
+  table:    { type: Object, default: null },
+  endpoint: { type: String, default: undefined },
+  name:     { type: String, default: undefined },
   params: { type: Object, default: () => ({}) },
   stateKey: { type: String, default: 'status' },   // field in row that holds the state key
   states: {                                         // column definitions
@@ -25,6 +26,22 @@ const emit = defineEmits(['move', 'card-click'])
 const api = useApi()
 const queryClient = useQueryClient()
 
+const resolvedEndpoint = computed(() => props.table?.endpoint ?? props.endpoint)
+const resolvedName     = computed(() => props.table?.name     ?? props.name)
+
+// ─── TanStack invalidation signal ─────────────────────────────────────────────
+const { data: _invalidateSignal } = useQuery({
+  queryKey: computed(() => ['table', resolvedName.value]),
+  queryFn: () => Date.now(),
+  initialData: 0,
+  staleTime: Infinity,
+  refetchOnWindowFocus: false,
+  refetchOnMount: false,
+})
+let _signalReady = false
+onMounted(() => { _signalReady = true })
+watch(_invalidateSignal, () => { if (_signalReady) fetchAll() })
+
 // ─── Fetch all rows ───────────────────────────────────────────────────────────
 const loading = ref(false)
 const rows = ref([])
@@ -32,7 +49,7 @@ const rows = ref([])
 const fetchAll = async () => {
   loading.value = true
   try {
-    const res = await api.post(props.endpoint, { perPage: props.perPage, ...props.params })
+    const res = await api.post(resolvedEndpoint.value, { perPage: props.perPage, ...props.params })
     rows.value = Array.isArray(res?.data) ? res.data : (Array.isArray(res) ? res : [])
   } catch (e) {
     console.error('[Kanban] fetch error', e)

package/components/Table/List.vue

@@ -4,8 +4,9 @@ import { useInfiniteQuery } from '@tanstack/vue-query'
 
 // Infinite scroll list — fetches next page when sentinel enters viewport
 const props = defineProps({
-  endpoint: { type: String, required: true },
-  name: { type: String, required: true },
+  table:    { type: Object, default: null },
+  endpoint: { type: String, default: undefined },
+  name:     { type: String, default: undefined },
   params: { type: Object, default: () => ({}) },
   searchPlaceholder: { type: String, default: 'Buscar...' },
   showSearch: { type: Boolean, default: true },
@@ -15,6 +16,10 @@ const props = defineProps({
 const emit = defineEmits(['row-click'])
 
 const api = useApi()
+
+const resolvedEndpoint = computed(() => props.table?.endpoint ?? props.endpoint)
+const resolvedName     = computed(() => props.table?.name     ?? props.name)
+
 const search = ref('')
 const sentinel = ref(null)
 
@@ -25,12 +30,12 @@ watch(search, (v) => {
   searchTimeout = setTimeout(() => { debouncedSearch.value = v }, 400)
 })
 
-const queryKey = computed(() => [props.name, 'infinite', debouncedSearch.value, props.params])
+const queryKey = computed(() => ['table', resolvedName.value, 'infinite', debouncedSearch.value, props.params])
 
 const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, refetch } = useInfiniteQuery({
   queryKey,
   queryFn: ({ pageParam = 1 }) =>
-    api.post(props.endpoint, {
+    api.post(resolvedEndpoint.value, {
       search: debouncedSearch.value,
       page: pageParam,
       perPage: props.perPage,