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

package/components/Admin/Base.vue

@@ -1,96 +1,73 @@
 <script setup lang="ts">
-import * as icons from '@tabler/icons-vue'
+const isOpen = ref(false)
+const open = () => { isOpen.value = true }
+const close = () => { isOpen.value = false }
 
-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]
-}
+provide('vantage:sidebar', { isOpen, open, close })
 </script>
 
 <template>
-  <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>
+  <div class="bg-slate-50 dark:bg-slate-900 min-h-screen">
 
-      <!-- Search slot -->
-      <div v-if="$slots.search" class="px-4 py-2 shrink-0">
-        <slot name="search" />
-      </div>
+    <!-- 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>
 
-      <!-- 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>
+    <!-- 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">
 
-      <!-- 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 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>
+        <!-- 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>
-          <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>
+        </header>
+
+        <!-- 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" />
         </div>
 
-        <!-- Env bar -->
-        <div class="px-3 pb-3">
-          <App.DevEnvironmentBar sidebar />
+        <!-- User footer -->
+        <div class="shrink-0 border-t border-slate-200 dark:border-slate-700 p-5">
+          <slot name="user-footer" />
         </div>
+
       </div>
-    </div>
-  </aside>
+    </aside>
+
+    <!-- Main content -->
+    <slot />
 
-  <!-- Main content -->
-  <slot />
+  </div>
 </template>

package/components/Admin/Header.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+}>()
+
+const sidebar = inject('vantage:sidebar', null) as any
+</script>
+
+<template>
+  <header class="sticky top-0 z-40 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-4 lg:px-6 h-14 flex items-center gap-x-3">
+    <!-- Hamburger mobile -->
+    <button type="button"
+      class="lg:hidden size-8 flex items-center justify-center text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
+      @click="sidebar?.open()">
+      <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+      </svg>
+    </button>
+
+    <!-- Left slot -->
+    <div class="flex-1 flex items-center gap-x-3">
+      <slot name="left">
+        <span v-if="title" class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ title }}</span>
+      </slot>
+    </div>
+
+    <!-- Right slot -->
+    <div class="flex items-center gap-x-2">
+      <slot name="right" />
+    </div>
+  </header>
+</template>

package/components/Admin/Page.vue

@@ -1,73 +1,7 @@
-<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>
+<script setup></script>
 
 <template>
-  <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 -->
+  <div class="lg:ps-65">
     <slot />
-
   </div>
 </template>

package/components/App/PageLoadingSpinner.vue

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

package/components/Layout/Admin.vue

@@ -1,8 +1,4 @@
 <script setup>
-const props = defineProps({
-  floating: { type: Boolean, default: false },
-})
-
 const showAnimation = ref(false)
 onMounted(() => {
   const seen = sessionStorage.getItem('auth-entered')
@@ -15,57 +11,12 @@ onMounted(() => {
 
 <template>
   <div :class="{ 'animate-entrance': showAnimation }">
-    <!-- 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">
+    <AdminBase>
       <template #logo><slot name="logo" /></template>
       <template #menu><slot name="menu" /></template>
       <template #user-footer><slot name="user-footer" /></template>
 
-      <div :class="floating ? 'lg:ps-70 pt-14' : 'lg:ps-65 pt-14'">
+      <div class="lg:ps-65">
         <slot />
       </div>
     </AdminBase>

package/components/Nav/Tabs.vue

@@ -10,26 +10,11 @@ interface Tab {
 
 const props = withDefaults(defineProps<{
   tabs: Tab[]
-  color?: string
   activeClass?: string
 }>(), {
-  color: 'blue',
+  activeClass: 'bg-white dark:bg-slate-800 text-blue-600 dark:text-blue-400 shadow-sm',
 })
 
-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) =>
@@ -37,14 +22,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-800">
+  <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">
     <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)
-        ? resolvedActiveClass
+        ? activeClass
         : '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,10 +3,9 @@ import { IconSearch, IconLoader2, IconCheck, IconX } from '@tabler/icons-vue'
 
 // Dense database view with inline cell editing — click cell → input → blur → mutation
 const props = defineProps({
-  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 },
+  endpoint: { type: String, required: true },
+  columns: { type: Array, required: true }, // [{ key, label, editable?, type?: 'text'|'number'|'select', options?: [] }]
+  name: { type: String, required: true },
   params: { type: Object, default: () => ({}) },
   updateMutation: { type: Function, default: null }, // (id, field, value) => Promise
   cached: { type: Boolean, default: false },
@@ -16,9 +15,6 @@ 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 ───────────────────────────────────────────────────────────
@@ -101,9 +97,9 @@ defineExpose({ reload })
     <div class="overflow-x-auto border border-slate-200 dark:border-slate-700 rounded-xl">
       <Table
         ref="tableRef"
-        :endpoint="resolvedEndpoint"
+        :endpoint="endpoint"
         :columns="columns"
-        :name="resolvedName"
+        :name="name"
         :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-900 dark:border-slate-800 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-800 dark:border-slate-700 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-800 dark:bg-slate-900 dark:border dark:border-slate-800 border-t border-slate-200 dark:border-slate-800"
+      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"
       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-900 dark:border-slate-600"
+            class="shrink-0 border-slate-300 rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-slate-800 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-900 dark:border-slate-600"
+            class="shrink-0 border-slate-300 rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-slate-800 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-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";
+    "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";
   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-900 border border-slate-200 dark:border-slate-800 rounded-xl shadow-xl max-h-60 overflow-auto',
+          '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',
           menuClass,
         ]"
       >

package/components/Table/Grid.vue

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

package/components/Table/Kanban.vue

@@ -6,9 +6,8 @@ import { useQueryClient } from '@tanstack/vue-query'
 // Usage: <TableKanban endpoint="..." :states="[{key:'todo',label:'Pendiente',color:'slate'}]" state-key="status" ... />
 
 const props = defineProps({
-  table:    { type: Object, default: null },
-  endpoint: { type: String, default: undefined },
-  name:     { type: String, default: undefined },
+  endpoint: { type: String, required: true },     // POST endpoint returning paginated list
+  name: { type: String, required: true },          // used as queryKey base
   params: { type: Object, default: () => ({}) },
   stateKey: { type: String, default: 'status' },   // field in row that holds the state key
   states: {                                         // column definitions
@@ -26,22 +25,6 @@ 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([])
@@ -49,7 +32,7 @@ const rows = ref([])
 const fetchAll = async () => {
   loading.value = true
   try {
-    const res = await api.post(resolvedEndpoint.value, { perPage: props.perPage, ...props.params })
+    const res = await api.post(props.endpoint, { 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,9 +4,8 @@ import { useInfiniteQuery } from '@tanstack/vue-query'
 
 // Infinite scroll list — fetches next page when sentinel enters viewport
 const props = defineProps({
-  table:    { type: Object, default: null },
-  endpoint: { type: String, default: undefined },
-  name:     { type: String, default: undefined },
+  endpoint: { type: String, required: true },
+  name: { type: String, required: true },
   params: { type: Object, default: () => ({}) },
   searchPlaceholder: { type: String, default: 'Buscar...' },
   showSearch: { type: Boolean, default: true },
@@ -16,10 +15,6 @@ 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)
 
@@ -30,12 +25,12 @@ watch(search, (v) => {
   searchTimeout = setTimeout(() => { debouncedSearch.value = v }, 400)
 })
 
-const queryKey = computed(() => ['table', resolvedName.value, 'infinite', debouncedSearch.value, props.params])
+const queryKey = computed(() => [props.name, 'infinite', debouncedSearch.value, props.params])
 
 const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, refetch } = useInfiniteQuery({
   queryKey,
   queryFn: ({ pageParam = 1 }) =>
-    api.post(resolvedEndpoint.value, {
+    api.post(props.endpoint, {
       search: debouncedSearch.value,
       page: pageParam,
       perPage: props.perPage,