@innertia-solutions/innertia-nuxt 0.1.11 → 0.1.13

package/components/Modal/Host.vue

@@ -0,0 +1,58 @@
+<script setup>
+/**
+ * <ModalHost /> — Mount-once en el layout root para habilitar useModal().
+ *
+ * Renderiza la cola de modales programáticos del store. Cada entry sabe
+ * dispatchar al componente adecuado según su `kind`.
+ */
+import { useModalStore } from '../../stores/modal'
+
+const store = useModalStore()
+
+const closeWith = (id, value) => store.resolve(id, value)
+</script>
+
+<template>
+  <template v-for="entry in store.queue" :key="entry.id">
+    <!-- Confirm -->
+    <ModalConfirm
+      v-if="entry.kind === 'confirm'"
+      :model-value="true"
+      v-bind="entry.props"
+      @confirm="closeWith(entry.id, true)"
+      @cancel="closeWith(entry.id, false)"
+      @update:model-value="v => !v && closeWith(entry.id, false)"
+    />
+
+    <!-- Alert (confirm sin cancel) -->
+    <ModalConfirm
+      v-else-if="entry.kind === 'alert'"
+      :model-value="true"
+      hide-cancel
+      v-bind="entry.props"
+      @confirm="closeWith(entry.id, undefined)"
+      @cancel="closeWith(entry.id, undefined)"
+      @update:model-value="v => !v && closeWith(entry.id, undefined)"
+    />
+
+    <!-- Prompt -->
+    <ModalPrompt
+      v-else-if="entry.kind === 'prompt'"
+      :model-value="true"
+      v-bind="entry.props"
+      @submit="value => closeWith(entry.id, value)"
+      @cancel="closeWith(entry.id, null)"
+      @update:model-value="v => !v && closeWith(entry.id, null)"
+    />
+
+    <!-- Custom component — recibe modelValue + props + emite close(value) -->
+    <component
+      v-else-if="entry.kind === 'component' && entry.component"
+      :is="entry.component"
+      :model-value="true"
+      v-bind="entry.props"
+      @close="value => closeWith(entry.id, value)"
+      @update:model-value="v => !v && closeWith(entry.id, undefined)"
+    />
+  </template>
+</template>

package/components/Modal/Prompt.vue

@@ -0,0 +1,74 @@
+<script setup>
+/**
+ * <ModalPrompt> — Diálogo para capturar un string del usuario.
+ *
+ * Usado principalmente por useModal().prompt(). Emite 'submit' con el valor
+ * y 'cancel' al cerrar.
+ */
+const props = defineProps({
+  modelValue:   { type: Boolean, default: false },
+  title:        { type: String,  default: 'Ingresar valor' },
+  message:      { type: String,  default: '' },
+  placeholder:  { type: String,  default: '' },
+  defaultValue: { type: String,  default: '' },
+  confirmText:  { type: String,  default: 'Aceptar' },
+  cancelText:   { type: String,  default: 'Cancelar' },
+  required:     { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'submit', 'cancel'])
+
+const value = ref(props.defaultValue)
+const inputRef = ref(null)
+
+watch(() => props.modelValue, async (v) => {
+  if (v) {
+    value.value = props.defaultValue
+    await nextTick()
+    inputRef.value?.focus()
+  }
+})
+
+const cancel = () => {
+  emit('update:modelValue', false)
+  emit('cancel')
+}
+
+const submit = () => {
+  if (props.required && !value.value.trim()) return
+  emit('submit', value.value)
+}
+</script>
+
+<template>
+  <Modal
+    :model-value="modelValue"
+    :title="title"
+    size="sm"
+    :show-footer="true"
+    padding="md"
+    @update:model-value="emit('update:modelValue', $event)"
+    @close="cancel"
+  >
+    <p v-if="message" class="text-sm text-muted-foreground mb-3">{{ message }}</p>
+    <input
+      ref="inputRef"
+      v-model="value"
+      type="text"
+      :placeholder="placeholder"
+      class="innertia-field w-full"
+      @keydown.enter="submit"
+    />
+
+    <template #footer>
+      <AppButton :text="cancelText" severity="secondary" size="sm" @click="cancel" />
+      <AppButton
+        :text="confirmText"
+        severity="primary"
+        size="sm"
+        :disabled="required && !value.trim()"
+        @click="submit"
+      />
+    </template>
+  </Modal>
+</template>

package/components/Modal.vue

@@ -1,23 +1,69 @@
 <script setup>
+import { IconX } from '@tabler/icons-vue'
+
+/**
+ * <Modal> — Core modal. Sigue tokens semánticos (rounded-modal, bg-card,
+ * border-card-line). Variantes: center (default), drawer-right, drawer-left,
+ * fullscreen. Tamaños xs..3xl.
+ *
+ * No tiene lógica de negocio. Para casos típicos preferir:
+ *   - <ModalConfirm>  → confirmaciones con severities
+ *   - <ModalForm>     → modal con form, scroll y footer sticky
+ *   - useModal()      → API promise-based (alert/confirm/prompt/open)
+ */
 const props = defineProps({
-  modelValue: { type: Boolean, default: false },
-  title:      { type: String, default: '' },
-  size:       { type: String, default: 'md', validator: v => ['xs','sm','md','lg','xl','2xl','3xl','fullscreen'].includes(v) },
-  closable:   { type: Boolean, default: true },
+  modelValue:      { type: Boolean, default: false },
+  title:           { type: String,  default: '' },
+  size:            { type: String,  default: 'md', validator: v => ['xs','sm','md','lg','xl','2xl','3xl','fullscreen'].includes(v) },
+  variant:         { type: String,  default: 'center', validator: v => ['center','drawer-right','drawer-left','fullscreen'].includes(v) },
+  closable:        { type: Boolean, default: true },
   backdropDismiss: { type: Boolean, default: true },
-  showHeader: { type: Boolean, default: true },
-  showFooter: { type: Boolean, default: false },
+  showHeader:      { type: Boolean, default: true },
+  showFooter:      { type: Boolean, default: false },
+  /** Hace el body scrollable con el header/footer sticky. */
+  scrollBody:      { type: Boolean, default: true },
+  /** Padding del body. 'none' para que el slot controle su propio padding. */
+  padding:         { type: String,  default: 'md', validator: v => ['none','sm','md','lg'].includes(v) },
 })
 
 const emit = defineEmits(['update:modelValue', 'close'])
 
 const modalId = `modal-${Math.random().toString(36).slice(2, 9)}`
 
-const sizeClass = computed(() => ({
-  xs: 'max-w-xs', sm: 'max-w-sm', md: 'max-w-md',
-  lg: 'max-w-lg', xl: 'max-w-xl', '2xl': 'max-w-2xl',
-  '3xl': 'max-w-3xl', fullscreen: 'max-w-full',
-}[props.size] ?? 'max-w-md'))
+const isDrawer = computed(() => props.variant.startsWith('drawer'))
+const isFullscreen = computed(() => props.variant === 'fullscreen' || props.size === 'fullscreen')
+
+const sizeClass = computed(() => {
+  if (isFullscreen.value) return 'max-w-full w-full h-full'
+  return ({
+    xs: 'max-w-xs', sm: 'max-w-sm', md: 'max-w-md',
+    lg: 'max-w-lg', xl: 'max-w-xl', '2xl': 'max-w-2xl', '3xl': 'max-w-3xl',
+  }[props.size] ?? 'max-w-md')
+})
+
+const paddingClass = computed(() => ({
+  none: 'p-0', sm: 'p-3', md: 'p-5', lg: 'p-6',
+}[props.padding] ?? 'p-5'))
+
+const containerClass = computed(() => {
+  if (isFullscreen.value) return 'inset-0'
+  if (props.variant === 'drawer-right') return 'inset-y-0 right-0'
+  if (props.variant === 'drawer-left')  return 'inset-y-0 left-0'
+  return 'inset-0 items-center justify-center p-4'
+})
+
+const panelClass = computed(() => {
+  if (isFullscreen.value) return 'w-full h-full rounded-none'
+  if (isDrawer.value)     return `h-full ${sizeClass.value} rounded-none`
+  return `w-full ${sizeClass.value} rounded-modal`
+})
+
+const transitionName = computed(() => {
+  if (isFullscreen.value)             return 'modal-fade'
+  if (props.variant === 'drawer-right') return 'modal-slide-right'
+  if (props.variant === 'drawer-left')  return 'modal-slide-left'
+  return 'modal-pop'
+})
 
 const close = () => {
   emit('update:modelValue', false)
@@ -31,54 +77,67 @@ const onBackdrop = (e) => {
 const onEsc = (e) => { if (e.key === 'Escape' && props.modelValue && props.closable) close() }
 
 watch(() => props.modelValue, v => {
-  document.body.style.overflow = v ? 'hidden' : ''
+  if (typeof document !== 'undefined') {
+    document.body.style.overflow = v ? 'hidden' : ''
+  }
 })
 
 onMounted(() => document.addEventListener('keydown', onEsc))
 onUnmounted(() => {
   document.removeEventListener('keydown', onEsc)
-  document.body.style.overflow = ''
+  if (typeof document !== 'undefined') document.body.style.overflow = ''
 })
 </script>
 
 <template>
   <Teleport v-if="modelValue" to="body">
-    <Transition name="modal" appear>
+    <Transition :name="transitionName" appear>
       <div
-        class="fixed inset-0 z-[9999] bg-black/40 dark:bg-black/60 backdrop-blur-sm flex items-center justify-center p-4"
+        class="fixed z-[9999] bg-black/40 dark:bg-black/60 backdrop-blur-sm flex"
+        :class="containerClass"
         role="dialog"
         tabindex="-1"
         :aria-labelledby="`${modalId}-label`"
         @click="onBackdrop"
       >
         <div
-          :class="['bg-card border border-card-line rounded-xl shadow-xl w-full modal-content', sizeClass]"
+          :class="['bg-card border border-card-line shadow-xl flex flex-col modal-panel max-h-full', panelClass]"
           @click.stop
         >
           <!-- Header -->
-          <div v-if="showHeader" class="flex items-center justify-between px-5 py-4 border-b border-card-line">
-            <h3 :id="`${modalId}-label`" class="text-sm font-semibold text-foreground">
+          <div
+            v-if="showHeader"
+            class="shrink-0 flex items-center justify-between px-5 py-4 border-b border-card-line"
+          >
+            <h3 :id="`${modalId}-label`" class="text-sm font-semibold text-foreground truncate">
               <slot name="header">{{ title }}</slot>
             </h3>
             <button
               v-if="closable"
               type="button"
-              class="size-7 flex items-center justify-center rounded-lg text-muted-foreground hover:text-muted-foreground-1 hover:bg-muted-hover transition-colors"
+              class="size-7 flex items-center justify-center rounded-control text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors shrink-0"
               @click="close"
+              aria-label="Cerrar"
             >
-              <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                <path d="M18 6 6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />
-              </svg>
+              <IconX class="size-4" />
             </button>
           </div>
 
           <!-- Body -->
-          <div class="p-5">
+          <div
+            :class="[
+              paddingClass,
+              scrollBody ? 'flex-1 min-h-0 overflow-y-auto' : '',
+            ]"
+          >
             <slot />
           </div>
 
           <!-- Footer -->
-          <div v-if="showFooter" class="flex items-center justify-end gap-2 px-5 py-4 border-t border-card-line">
+          <div
+            v-if="showFooter"
+            class="shrink-0 flex items-center justify-end gap-2 px-5 py-4 border-t border-card-line bg-card"
+          >
             <slot name="footer">
               <AppButton v-if="closable" text="Cerrar" severity="secondary" size="sm" @click="close" />
             </slot>
@@ -90,14 +149,40 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.modal-enter-active,
-.modal-leave-active { transition: opacity 0.15s ease; }
-.modal-enter-from,
-.modal-leave-to      { opacity: 0; }
-
-.modal-enter-from .modal-content,
-.modal-leave-to .modal-content  { transform: scale(0.97) translateY(-8px); opacity: 0; }
-.modal-enter-to .modal-content,
-.modal-leave-from .modal-content { transform: scale(1) translateY(0); opacity: 1; }
-.modal-content { transition: transform 0.15s ease, opacity 0.15s ease; }
+/* Center pop */
+.modal-pop-enter-active,
+.modal-pop-leave-active { transition: opacity 0.15s ease; }
+.modal-pop-enter-from,
+.modal-pop-leave-to     { opacity: 0; }
+.modal-pop-enter-from .modal-panel,
+.modal-pop-leave-to .modal-panel    { transform: scale(0.97) translateY(-8px); opacity: 0; }
+.modal-pop-enter-to .modal-panel,
+.modal-pop-leave-from .modal-panel  { transform: scale(1) translateY(0); opacity: 1; }
+.modal-panel { transition: transform 0.18s cubic-bezier(.2,.8,.2,1), opacity 0.18s ease; }
+
+/* Fade fullscreen */
+.modal-fade-enter-active,
+.modal-fade-leave-active { transition: opacity 0.2s ease; }
+.modal-fade-enter-from,
+.modal-fade-leave-to     { opacity: 0; }
+
+/* Drawer right */
+.modal-slide-right-enter-active,
+.modal-slide-right-leave-active { transition: opacity 0.2s ease; }
+.modal-slide-right-enter-from,
+.modal-slide-right-leave-to     { opacity: 0; }
+.modal-slide-right-enter-from .modal-panel,
+.modal-slide-right-leave-to .modal-panel   { transform: translateX(100%); }
+.modal-slide-right-enter-to .modal-panel,
+.modal-slide-right-leave-from .modal-panel { transform: translateX(0); }
+
+/* Drawer left */
+.modal-slide-left-enter-active,
+.modal-slide-left-leave-active { transition: opacity 0.2s ease; }
+.modal-slide-left-enter-from,
+.modal-slide-left-leave-to     { opacity: 0; }
+.modal-slide-left-enter-from .modal-panel,
+.modal-slide-left-leave-to .modal-panel    { transform: translateX(-100%); }
+.modal-slide-left-enter-to .modal-panel,
+.modal-slide-left-leave-from .modal-panel  { transform: translateX(0); }
 </style>

package/components/Organization/Picker.vue

@@ -10,12 +10,12 @@
  */
 import { IconBuildingSkyscraper, IconArrowRight } from '@tabler/icons-vue'
 
-const { current: currentApp } = useApp()
+const { current: currentContext } = useContext()
 const { available, switchTo } = useOrganization()
 
 const title = computed(() =>
-  currentApp.value
-    ? `Elige una organización para continuar en ${currentApp.value.label}`
+  currentContext.value
+    ? `Elige una organización para continuar en ${currentContext.value.label}`
     : 'Elige una organización'
 )
 

package/components/Table/Standard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { IconSearch, IconLayoutColumns, IconGripVertical, IconX, IconPlus, IconChevronLeft, IconCheck, IconChevronDown } from '@tabler/icons-vue'
+import { IconSearch, IconLayoutColumns, IconGripVertical, IconX, IconPlus, IconChevronLeft, IconCheck, IconChevronDown, IconTable, IconLayoutGrid, IconDatabase, IconLayoutSidebarRight } from '@tabler/icons-vue'
 import Table from './index.vue'
 
 const props = defineProps({
@@ -16,6 +16,12 @@ const props = defineProps({
   showSearch:              { type: Boolean, default: true },
   showFilters:             { type: Boolean, default: true },
   showExport:              { type: Boolean, default: true },
+  showColumns:             { type: Boolean, default: true },
+  /** Mostrar selector "Filas por página" en el footer. Default false. */
+  showPerPage:             { type: Boolean, default: false },
+
+  // Tamaño visible (wrap + overflow auto). 'sm' | 'md' (default) | 'lg' | 'fit'.
+  size:                    { type: String, default: 'md' },
   filters:                 { type: Array,   default: () => [] },
   splitRatio:              { type: Number,           default: 60 },
   autoClosePreview:        { type: Boolean,          default: true },
@@ -23,13 +29,103 @@ const props = defineProps({
   previewDeletable:        { type: Boolean,          default: false },
   defaultPinnedColumns:    { type: Object,  default: null }, // { left?: string[], right?: string[] }
   persistPreferences:      { type: Boolean, default: true }, // persist column prefs in backend
+
+  // bordered=false → quita border + rounded-card del wrapper exterior
+  bordered:                { type: Boolean, default: true },
+
+  // 'bottom' (default) | 'top' | 'none'
+  //   'bottom' → footer + pagination debajo
+  //   'top'    → mismo footer + pagination, arriba (vía CSS order)
+  //   'none'   → sin footer/pagination; reload + instant compactos junto a columns
+  infoPosition:            { type: String, default: 'bottom' },
+
+  // View switcher
+  showViewSwitcher:        { type: Boolean, default: false },
+  defaultViewType:         { type: String,  default: 'table' },
+  /** Page size when in cards view (default 12 for clean grid layouts). */
+  cardsPageSize:           { type: Number,  default: 12 },
+  /** Mutation function for database inline editing: async (row, colKey, value) => void */
+  updateMutation:          { type: Function, default: null },
 })
 
 const resolvedEndpoint = computed(() => props.table?.endpoint ?? props.endpoint)
 const resolvedName     = computed(() => props.table?.name     ?? props.name)
 
+// ─── View switcher state ──────────────────────────────────────────────────────
+const STORAGE_KEY_VIEW = computed(() => `table-view-${resolvedName.value || 'default'}`)
+const viewType = ref(props.defaultViewType)
+
+const viewModes = [
+  { id: 'table',    icon: IconTable,             label: 'Tabla' },
+  { id: 'cards',    icon: IconLayoutGrid,         label: 'Tarjetas' },
+  { id: 'database', icon: IconDatabase,           label: 'Base de datos' },
+  { id: 'divider',  icon: IconLayoutSidebarRight, label: 'Vista dividida' },
+]
+
+onMounted(() => {
+  if (resolvedName.value && props.showViewSwitcher) {
+    const stored = localStorage.getItem(STORAGE_KEY_VIEW.value)
+    if (stored && ['table', 'cards', 'database', 'divider'].includes(stored)) {
+      viewType.value = stored
+    }
+  }
+})
+
+watch(viewType, (newView, oldView) => {
+  if (resolvedName.value && props.showViewSwitcher) {
+    localStorage.setItem(STORAGE_KEY_VIEW.value, newView)
+  }
+  // Adjust page size when entering/leaving cards view
+  if (newView === 'cards') {
+    nextTick(() => tableRef.value?.setPageSize(props.cardsPageSize))
+  } else if (oldView === 'cards') {
+    nextTick(() => tableRef.value?.setPageSize(10))
+  }
+})
+
+// ─── Resizable divider ────────────────────────────────────────────────────────
+const localSplitRatio = ref(props.splitRatio)
+let _dividerAnimFrame = null
+
+const startDividerDrag = (e) => {
+  e.preventDefault()
+  const startX = e.clientX
+  const startRatio = localSplitRatio.value
+  const containerWidth = containerRef.value?.getBoundingClientRect().width ?? window.innerWidth
+
+  const onMove = (ev) => {
+    if (_dividerAnimFrame) cancelAnimationFrame(_dividerAnimFrame)
+    _dividerAnimFrame = requestAnimationFrame(() => {
+      const dx = ev.clientX - startX
+      localSplitRatio.value = Math.min(80, Math.max(20, startRatio + (dx / containerWidth) * 100))
+    })
+  }
+
+  const onUp = () => {
+    document.removeEventListener('mousemove', onMove)
+    document.removeEventListener('mouseup', onUp)
+    document.body.style.cursor = ''
+    document.body.style.userSelect = ''
+  }
+
+  document.body.style.cursor = 'col-resize'
+  document.body.style.userSelect = 'none'
+  document.addEventListener('mousemove', onMove)
+  document.addEventListener('mouseup', onUp)
+}
+
 // ─── Table preferences (column pinning, visibility, order) ───────────────────
 const tablePrefName = computed(() => resolvedName.value || 'default')
+
+const sizeStyle = computed(() => {
+  switch (props.size) {
+    case 'sm':  return { minHeight: '18rem', maxHeight: '24rem', overflow: 'auto' }
+    case 'lg':  return { minHeight: '45rem', maxHeight: '75vh', overflow: 'auto' }
+    case 'fit': return {}
+    case 'md':
+    default:    return {}
+  }
+})
 const { preferences: tablePrefs, load: loadPrefs, save: savePrefs } = useTablePreferences(tablePrefName.value)
 
 // Resolved initial pinned columns: merge defaultPinnedColumns with saved preferences
@@ -562,7 +658,36 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
 
       <!-- Secondary actions: pushed to the right, icon-only style -->
       <div class="ml-auto flex items-center gap-1">
+        <!-- Reload + Instant compactos cuando infoPosition === 'none' -->
+        <InfoToolbar
+          v-if="infoPosition === 'none'"
+          :show-reload="showReloadButton"
+          :is-fetching="tableRef?.isFetching ?? false"
+          :show-instant="tableRef?.isDataFromCache ?? false"
+          @reload="() => tableRef?.reload?.()"
+        />
+
+        <!-- View switcher -->
+        <div v-if="showViewSwitcher" class="flex items-center gap-0.5 p-0.5 bg-surface rounded-control border border-card-line">
+          <button
+            v-for="mode in viewModes"
+            :key="mode.id"
+            type="button"
+            @click="viewType = mode.id"
+            :title="mode.label"
+            :class="[
+              'p-1 inline-flex items-center justify-center rounded transition-colors',
+              viewType === mode.id
+                ? 'bg-card shadow-sm text-foreground'
+                : 'text-muted-foreground hover:text-foreground'
+            ]"
+          >
+            <component :is="mode.icon" :size="14" :stroke="1.75" />
+          </button>
+        </div>
+
         <button
+          v-if="showColumns"
           ref="columnButtonRef"
           type="button"
           @click="showColumnPanel = !showColumnPanel"
@@ -608,35 +733,83 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
       </div>
     </div>
 
-    <!-- Tabla -->
-    <div class="overflow-hidden border border-card-line rounded-card">
-      <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"
-        :pinned-columns="resolvedPinnedColumns"
-        @row-click="handleRowClick"
-        @loaded="handleLoaded"
-        @page-change="closePreview"
-        @per-page-change="closePreview"
+    <!-- Tabla — normal or split layout -->
+    <div
+      :class="[
+        bordered ? 'overflow-hidden border border-card-line rounded-card' : '',
+        viewType === 'divider' ? 'flex' : '',
+      ]"
+      :style="viewType === 'divider' ? { ...sizeStyle, minHeight: sizeStyle.minHeight ?? '28rem' } : sizeStyle"
+    >
+      <!-- Table panel -->
+      <div
+        :class="viewType === 'divider' ? 'overflow-hidden min-w-0' : ''"
+        :style="viewType === 'divider' ? { width: localSplitRatio + '%', minWidth: '280px' } : {}"
+      >
+        <Table
+          ref="tableRef"
+          :endpoint="resolvedEndpoint"
+          :columns="columns"
+          :name="resolvedName"
+          :params="mergedParams"
+          :search="search"
+          :checkable="checkable"
+          :cached="cached"
+          :show-reload-button="showReloadButton"
+          :info-position="infoPosition"
+          :show-per-page="showPerPage"
+          :click-row-to-open="clickRowToOpen"
+          :preview-row-id="previewRow?.id ?? null"
+          :preview-mode="!!previewEnabled"
+          :pinned-columns="resolvedPinnedColumns"
+          :view-mode="viewType === 'divider' ? 'table' : viewType"
+          :update-mutation="updateMutation"
+          :bordered="bordered"
+          @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>
+      </div>
+
+      <!-- Resizable drag handle (divider mode only) -->
+      <div
+        v-if="viewType === 'divider'"
+        class="w-1 shrink-0 bg-card-line hover:bg-primary/40 active:bg-primary/60 cursor-col-resize transition-colors relative group select-none"
+        @mousedown="startDividerDrag"
       >
-        <template v-for="(_, name) in forwardedSlots" #[name]="slotProps">
-          <slot :name="name" v-bind="slotProps ?? {}" />
+        <!-- Visual pill indicator -->
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-1 h-8 rounded-full bg-card-line group-hover:bg-primary/50 transition-colors" />
+      </div>
+
+      <!-- Preview panel (divider mode only) -->
+      <div v-if="viewType === 'divider'" class="flex-1 min-w-0 overflow-auto">
+        <template v-if="previewRow">
+          <div class="flex items-center justify-between px-4 py-3 border-b border-card-line">
+            <slot name="preview-header" :row="previewRow" :close="closePreview" />
+            <button
+              @click="closePreview"
+              class="p-1 rounded-control text-muted-foreground hover:text-foreground hover:bg-muted-hover ml-auto"
+            >
+              <IconX :size="16" />
+            </button>
+          </div>
+          <slot name="preview" :row="previewRow" :close="closePreview" />
         </template>
-      </Table>
+        <div v-else class="flex flex-col items-center justify-center h-full gap-3 text-muted-foreground py-16">
+          <IconLayoutSidebarRight :size="32" :stroke="1.25" class="opacity-30" />
+          <p class="text-sm">Seleccioná un elemento para ver el detalle</p>
+        </div>
+      </div>
     </div>
 
-    <!-- Preview compartido (panel overlay + chip flotante + history tab) -->
+    <!-- Preview compartido (panel overlay + chip flotante + history tab) — only when NOT in divider mode -->
     <DataPreview
+      v-if="viewType !== 'divider'"
       ref="dataPreviewRef"
       v-model:row="previewRow"
       :enabled="previewEnabled"