@edc-motor/admin-kit 0.4.14 → 0.4.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/admin-kit",
-  "version": "0.4.14",
+  "version": "0.4.16",
   "description": "EdC Motor — kit del panel de administración: layout, gestores CRUD, imágenes, PDF, páginas, configuración, usuarios y copias (paquete fuente: lo compila el consumidor con Vite)",
   "license": "GPL-3.0-only",
   "type": "module",
@@ -33,7 +33,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@edc-motor/ui": "^0.4.14",
+    "@edc-motor/ui": "^0.4.16",
     "axios": "^1.7.0",
     "vue-draggable-plus": "^0.6.1"
   },

package/scss/components/_entity-card.scss

@@ -18,7 +18,14 @@
     &:hover { border-color: $border-strong; box-shadow: $shadow-md; }
   }
   &--muted { opacity: 0.65; }
-  &.is-active { border-color: $accent-500; }
+  // Seleccionada: acento del tema, borde doblado con un anillo (sin mover
+  // el layout) y una sombra suave para despegarla de la rejilla.
+  &.is-active {
+    border-color: $accent-500;
+    box-shadow:
+      0 0 0 1px $accent-500,
+      0 2px 10px color-mix(in srgb, $accent-500 30%, transparent);
+  }
 
   // Borde teñido con el color de la entidad (prop accentColor, p. ej. su
   // facción). El color viene de los datos del juego, así que en reposo nunca
@@ -30,8 +37,10 @@
     &.entity-card--clickable:hover {
       border-color: color-mix(in srgb, var(--entity-card-accent) 75%, $border-strong);
     }
+    // La selección manda sobre el tinte de la entidad: mismo acento del
+    // tema que cualquier otra card seleccionada.
     &.is-active {
-      border-color: var(--entity-card-accent);
+      border-color: $accent-500;
     }
   }
 

package/scss/components/_filter-bar.scss

@@ -16,17 +16,20 @@
 
   &__search-icon {
     position: absolute;
-    right: $input-padding-x;
+    left: $input-padding-x;
     top: 50%;
     transform: translateY(-50%);
     color: $text-3;
     pointer-events: none;
   }
 
-  &__search-input {
+  // Doble clase: gana al input[type="search"] genérico de _forms.scss
+  // (0,1,1) sin depender del orden de carga — si no, el padding de la lupa
+  // no se aplica y el texto se monta con el icono.
+  &__search #{&}__search-input {
     width: 100%;
     height: $input-height;
-    padding: 0 34px 0 $input-padding-x; // hueco a la derecha para la lupa
+    padding: 0 $input-padding-x 0 34px; // hueco a la izquierda para la lupa
     background: $surface-2;
     color: $text-1;
     border: 1px solid $border;

package/scss/components/_grid.scss

@@ -43,4 +43,16 @@
     @container content (min-width: #{$bp-lg}) { grid-template-columns: repeat(4, 1fr); }
     @container content (min-width: #{$bp-xl}) { grid-template-columns: repeat(5, 1fr); }
   }
+
+  // Preset `cards-dense` (piezas pequeñas, p. ej. el gestor de iconos): el
+  // DOBLE de columnas que `cards` en todos los breakpoints — 2 → 4 → 6 → 8
+  // → 10 con los mismos escalones del contenedor `content`.
+  &--cards-dense {
+    grid-template-columns: repeat(2, 1fr);
+
+    @container content (min-width: #{$bp-sm}) { grid-template-columns: repeat(4, 1fr); }
+    @container content (min-width: #{$bp-md}) { grid-template-columns: repeat(6, 1fr); }
+    @container content (min-width: #{$bp-lg}) { grid-template-columns: repeat(8, 1fr); }
+    @container content (min-width: #{$bp-xl}) { grid-template-columns: repeat(10, 1fr); }
+  }
 }

package/scss/components/_manager-card.scss

@@ -19,15 +19,18 @@
   flex-wrap: wrap;
 }
 
+// Mismos escalones que el preset `cards` de BaseGrid (1 → 2 → 3 → 4 → 5 con
+// los breakpoints canónicos del contenedor `content`).
 .manager-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: $space-4;
   align-items: start;
 
-  @container content (min-width: #{$bp-md}) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+  @container content (min-width: #{$bp-sm}) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  @container content (min-width: #{$bp-md}) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  @container content (min-width: #{$bp-lg}) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  @container content (min-width: #{$bp-xl}) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
 }
 
 .manager-card {
@@ -58,14 +61,19 @@
 
   &.is-active {
     border-color: $accent-500;
+    box-shadow:
+      0 0 0 1px $accent-500,
+      0 2px 10px color-mix(in srgb, $accent-500 30%, transparent);
   }
 
+  // Cabecera con divisoria, como la de EntityCard.
   &__head {
     display: flex;
     align-items: center;
     gap: $space-2;
     color: $text-1;
-    padding: $space-3 $space-4;
+    padding: $space-3 $space-4 $space-2;
+    border-bottom: 1px solid $border;
     min-width: 0;
   }
 
@@ -90,12 +98,27 @@
     .manager-card__chip + & { margin-left: 0; }
   }
 
+  // Contenido como el de EntityCard: badges (chips) arriba, meta debajo.
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: $space-2;
+    padding: $space-2 $space-4 $space-3;
+  }
+
+  &__badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $space-1;
+  }
+
   &__meta {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: $space-1 $space-3;
-    padding: 0 $space-4 $space-3;
+    font-size: $fs-13;
+    color: $text-3;
   }
 
   &__body {
@@ -185,6 +208,13 @@
   border-top: 1px dashed $border;
   padding-top: $space-3;
 
+  // Tras un divider del panel, la divisoria dashed propia sobra (quedaba un
+  // doble separador — línea + "puntos suspensivos"): fuera.
+  .manager-panel__divider + & {
+    border-top: 0;
+    padding-top: 0;
+  }
+
   &__title {
     margin: 0;
     font-size: $fs-16;
@@ -272,6 +302,19 @@
           border-color: $color;
           color: $text-1;
         }
+
+        // Interruptores (aria-pressed): encendido = RELLENO del color (como
+        // el hover); apagado = contorno ATENUADO — el estado se ve de un
+        // vistazo junto a los botones de acción normales.
+        &.is-on {
+          background: $color;
+          border-color: $color;
+          color: $text-1;
+        }
+
+        &.is-off {
+          border-color: color-mix(in srgb, $color 45%, transparent);
+        }
       }
     }
   }

package/scss/components/_page-blocks.scss

@@ -53,11 +53,11 @@
   // cambian a la vez a un layout apilado (grid-areas por container query).
   &__item {
     display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-columns: auto auto minmax(0, 1fr);
     grid-template-areas:
-      "grip type    buttons"
-      "grip summary summary"
-      "grip flags   flags";
+      "grip edit type"
+      "grip edit summary"
+      "grip edit flags";
     align-items: center;
     gap: $space-1 $space-2;
     border: 1px solid $border;
@@ -69,8 +69,8 @@
     transition: border-color 0.15s ease;
 
     @container content (min-width: 640px) {
-      grid-template-columns: auto auto minmax(0, 1fr) auto auto;
-      grid-template-areas: "grip type summary flags buttons";
+      grid-template-columns: auto auto auto minmax(0, 1fr) auto;
+      grid-template-areas: "grip edit type summary flags";
     }
 
     &:hover { border-color: $border-strong; }
@@ -86,6 +86,24 @@
     &:active { cursor: grabbing; }
   }
 
+  // Editar a la IZQUIERDA de cada fila: abre el form del bloque sin pasar
+  // por el panel (mismo lenguaje que .card-enter del cascarón).
+  &__edit {
+    grid-area: edit;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    border-radius: $radius-sm;
+    padding: $space-1;
+    color: $accent-500;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+    &:hover { background: color-mix(in srgb, $accent-500 12%, transparent); }
+  }
+
   &__type { grid-area: type; font-weight: $k-fw-semibold; white-space: nowrap; }
 
   &__summary {
@@ -100,13 +118,6 @@
 
   &__flags { grid-area: flags; display: flex; gap: $space-1; }
 
-  &__buttons {
-    grid-area: buttons;
-    margin-left: auto;
-    display: flex;
-    gap: $space-1;
-  }
-
   &__common {
     border-top: 1px dashed $border;
     padding-top: $space-3;

package/src/components/ManagerCard.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { PanelRight } from '@lucide/vue'
 
-// Tarjeta de los gestores del admin (previews y PDF): NO colapsa. Muestra el
-// título (+ chip opcional), el resumen (slot meta) y las acciones "de todas"
-// en el pie (slot actions). TODA la tarjeta selecciona (excepto los botones,
-// enlaces e inputs interiores): su detalle —selector de elementos, etc.— se
-// abre en el panel derecho del layout.
-// Se coloca dentro de .manager-grid (1-2 columnas según el contenedor).
+// Tarjeta de los gestores del admin (previews y PDF): NO colapsa. Mismo
+// lenguaje visual que EntityCard: cabecera con el título (+ chip opcional) y
+// divisoria; debajo, las BADGES (chips de estado, slot badges) y el meta
+// (datos secundarios) en ese orden; acciones "de todas" en el pie (slot
+// actions). TODA la tarjeta selecciona (excepto los botones, enlaces e
+// inputs interiores): su detalle —selector de elementos, etc.— se abre en el
+// panel derecho del layout.
+// Se coloca dentro de .manager-grid (preset cards: 1 → 5 columnas).
 
 defineProps<{
   title: string
@@ -42,8 +44,14 @@ function onClick(event: MouseEvent) {
       <PanelRight :size="16" class="manager-card__hint" />
     </div>
 
-    <div v-if="$slots.meta" class="manager-card__meta">
-      <slot name="meta" />
+    <!-- Como EntityCard: badges (chips) arriba, meta debajo -->
+    <div v-if="$slots.badges || $slots.meta" class="manager-card__content">
+      <div v-if="$slots.badges" class="manager-card__badges">
+        <slot name="badges" />
+      </div>
+      <div v-if="$slots.meta" class="manager-card__meta">
+        <slot name="meta" />
+      </div>
     </div>
 
     <div v-if="$slots.default" class="manager-card__body">

package/src/content/PageBlocks.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import type { AxiosInstance } from 'axios'
-import { GripVertical, Plus, SquarePen, Trash2 } from '@lucide/vue'
+import { GripVertical, List, Plus, Printer, SquarePen, Trash2 } from '@lucide/vue'
 import { VueDraggable } from 'vue-draggable-plus'
 import {
   BaseButton,
@@ -14,7 +14,9 @@ import {
   type RichTextLabels,
 } from '@edc-motor/ui'
 import SchemaFields, { type FieldSchema } from './SchemaFields.vue'
+import { collectImageUrls, deleteContentImage, uploadPendingImages } from './deferredImages'
 import { useRightSidebar } from '../composables/useRightSidebar'
+import { useCardDeselect } from '../composables/useCardDeselect'
 
 // Gestor de bloques de una página (doc 03): paleta de tipos (motor + juego),
 // lista reordenable con drag (DC-17) y modal de edición GENERADO desde el
@@ -29,7 +31,11 @@ export interface PageBlocksLabels {
   cancel: string
   empty: string
   printable: string
+  printableShort: string
   indexable: string
+  indexableShort: string
+  yes: string
+  no: string
   common: string
   confirmDelete: string
   error: string
@@ -48,7 +54,11 @@ const defaultLabels: PageBlocksLabels = {
   cancel: 'Cancelar',
   empty: 'La página aún no tiene bloques.',
   printable: 'Entra en el PDF de la página',
+  printableShort: 'PDF',
   indexable: 'Aparece en el índice',
+  indexableShort: 'Índice',
+  yes: 'Sí',
+  no: 'No',
   common: 'Ajustes comunes',
   confirmDelete: '¿Borrar este bloque?',
   error: 'No se ha podido completar la acción.',
@@ -114,6 +124,10 @@ function selectBlock(block: BlockRow, event: MouseEvent) {
   sidebar.reveal()
 }
 
+// Click en la zona vacía del contenido (fuera de una fila o control):
+// deselecciona, como en los index (patrón useCardDeselect).
+useCardDeselect(() => (selectedId.value = null), '.page-blocks__item, .page-blocks__menu')
+
 /** Acción rápida del panel: alterna un flag sin abrir el modal. */
 async function toggleFlag(flag: 'is_printable' | 'is_indexable', value: boolean) {
   if (!selected.value) return
@@ -127,6 +141,26 @@ async function toggleFlag(flag: 'is_printable' | 'is_indexable', value: boolean)
 const busy = ref(false)
 const paletteOpen = ref(false)
 
+// La paleta de "añadir bloque" se cierra con Escape y clicando fuera (los
+// clicks dentro — el propio botón incluido — no la tocan).
+function onDocumentClick(event: MouseEvent) {
+  if (!paletteOpen.value) return
+  const target = event.target instanceof Element ? event.target : null
+  if (target?.closest('.page-blocks__palette')) return
+  paletteOpen.value = false
+}
+function onDocumentKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && paletteOpen.value) paletteOpen.value = false
+}
+onMounted(() => {
+  document.addEventListener('click', onDocumentClick)
+  document.addEventListener('keydown', onDocumentKeydown)
+})
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onDocumentClick)
+  document.removeEventListener('keydown', onDocumentKeydown)
+})
+
 // Modal de edición (crear/editar comparten formulario).
 const modalOpen = ref(false)
 const editing = ref<BlockRow | null>(null)
@@ -271,13 +305,22 @@ function openEdit(block: BlockRow) {
   modalOpen.value = true
 }
 
+// Guardado DIFERIDO de las imágenes del bloque: los inputs dejan el File en
+// `form` y NADA viaja hasta aquí — se suben los pendientes, se persiste el
+// bloque con las URLs resueltas y solo entonces se borran del disco las
+// imágenes que el bloque ya no referencia. Si algo falla, las subidas nuevas
+// se deshacen (el form conserva los File para reintentar) y cancelar el
+// modal no deja rastro en el servidor.
 async function save() {
   if (!modalType.value) return
   busy.value = true
+  const fields = [...modalType.value.fields, ...modalType.value.common]
+  const uploaded: string[] = []
   try {
+    const settings = await uploadPendingImages(props.api, fields, form.value, uploaded)
     const payload = {
       type: modalType.value.key,
-      settings: form.value,
+      settings,
       is_printable: formPrintable.value,
       is_indexable: formIndexable.value,
       parent_id: formParent.value,
@@ -287,9 +330,17 @@ async function save() {
     } else {
       await props.api.post(`/admin/pages/${props.pageId}/blocks`, payload)
     }
+    // Guardado en firme: fuera del disco lo que el bloque ya no referencia
+    // (sustituidas y quitadas), robusto ante filas de repeater reordenadas.
+    const kept = new Set(collectImageUrls(fields, settings))
+    const before = collectImageUrls(fields, editing.value?.settings ?? {})
+    await Promise.all(
+      before.filter((url) => !kept.has(url)).map((url) => deleteContentImage(props.api, url)),
+    )
     modalOpen.value = false
     await load()
   } catch {
+    await Promise.all(uploaded.map((url) => deleteContentImage(props.api, url)))
     toast.danger(L.error)
   } finally {
     busy.value = false
@@ -374,11 +425,20 @@ defineExpose({ reload: load })
         @click="(e) => selectBlock(block, e)"
       >
         <span class="page-blocks__grip"><GripVertical :size="16" /></span>
+        <button
+          type="button"
+          class="page-blocks__edit"
+          :title="L.edit"
+          :aria-label="L.edit"
+          @click="openEdit(block)"
+        >
+          <SquarePen :size="15" />
+        </button>
         <span class="page-blocks__type">{{ typeName(block.type) }}</span>
         <span class="page-blocks__summary">{{ summary(block) }}</span>
         <span class="page-blocks__flags">
-          <span v-if="block.is_printable" class="chip is-ok">PDF</span>
-          <span v-if="block.is_indexable" class="chip">IDX</span>
+          <span v-if="block.is_printable" class="chip is-ok">{{ L.printableShort }}</span>
+          <span v-if="block.is_indexable" class="chip">{{ L.indexableShort }}</span>
         </span>
       </article>
     </VueDraggable>
@@ -433,11 +493,31 @@ defineExpose({ reload: load })
           <p class="manager-panel__empty">{{ L.panelEmpty }}</p>
         </slot>
         <template v-else>
-          <p class="manager-panel__kicker">{{ typeName(selected.type) }}</p>
+          <p class="manager-panel__kicker">{{ L.panelTitle }}</p>
 
-          <!-- Acciones PRIMERO; después, secciones separadas (patrón panel) -->
+          <!-- Acciones PRIMERO (los interruptores arriba); después,
+               secciones separadas (patrón panel) -->
           <div class="manager-detail__actions">
-            <BaseButton :disabled="busy" @click="openEdit(selected)">
+            <BaseButton
+              variant="success"
+              :class="selected.is_printable ? 'is-on' : 'is-off'"
+              :aria-pressed="selected.is_printable"
+              :disabled="busy"
+              @click="toggleFlag('is_printable', !selected.is_printable)"
+            >
+              <template #icon><Printer :size="14" /></template>
+              {{ L.printableShort }}
+            </BaseButton>
+            <BaseButton
+              :class="selected.is_indexable ? 'is-on' : 'is-off'"
+              :aria-pressed="selected.is_indexable"
+              :disabled="busy"
+              @click="toggleFlag('is_indexable', !selected.is_indexable)"
+            >
+              <template #icon><List :size="14" /></template>
+              {{ L.indexableShort }}
+            </BaseButton>
+            <BaseButton variant="info" :disabled="busy" @click="openEdit(selected)">
               <template #icon><SquarePen :size="14" /></template>
               {{ L.edit }}
             </BaseButton>
@@ -449,19 +529,17 @@ defineExpose({ reload: load })
 
           <hr class="manager-panel__divider" />
 
-          <h3 class="manager-detail__title">{{ summary(selected) || typeName(selected.type) }}</h3>
-
-          <!-- Acciones rápidas sin modal -->
-          <BaseCheckbox
-            :model-value="selected.is_printable"
-            :label="L.printable"
-            @update:model-value="(v) => toggleFlag('is_printable', v)"
-          />
-          <BaseCheckbox
-            :model-value="selected.is_indexable"
-            :label="L.indexable"
-            @update:model-value="(v) => toggleFlag('is_indexable', v)"
-          />
+          <!-- El título del panel es el TIPO del bloque (el contenido va en
+               su sección, abajo) -->
+          <h3 class="manager-detail__title">{{ typeName(selected.type) }}</h3>
+
+          <!-- Estado de los interruptores, en texto -->
+          <p class="manager-detail__meta">
+            <strong>{{ L.printable }}</strong> {{ selected.is_printable ? L.yes : L.no }}
+          </p>
+          <p class="manager-detail__meta">
+            <strong>{{ L.indexable }}</strong> {{ selected.is_indexable ? L.yes : L.no }}
+          </p>
 
           <!-- Contenido: cada campo del bloque con su valor (truncado) -->
           <hr v-if="selectedFields.length" class="manager-panel__divider" />

package/src/content/SchemaFields.vue

@@ -49,7 +49,7 @@ const props = withDefaults(
     fields: FieldSchema[]
     modelValue: Record<string, unknown>
     locales: { code: string; name: string }[]
-    /** Cliente de la API del admin (sube las imágenes de contenido). */
+    /** Cliente de la API del admin (opciones de los campos `entity`). */
     api: AxiosInstance
     /** Iconos del juego para el WYSIWYG. */
     icons?: RichIcon[]
@@ -77,36 +77,33 @@ function translations(field: FieldSchema): Record<string, string> {
   return value as Record<string, string>
 }
 
-function selectOptions(field: FieldSchema): SelectOption[] {
-  return Object.entries(field.options ?? {}).map(([value, text]) => ({
-    value,
-    label: props.translate?.(`blockOptions.${field.key}.${value}`, text) ?? text,
-  }))
+// --- Imágenes DIFERIDAS: elegir fichero deja el File en el modelo (URL al
+// guardar: PageBlocks los sube en el submit con uploadPendingImages) ---
+
+/** File pendiente de un campo imagen no traducible (si lo hay). */
+function imageFile(field: FieldSchema): File | null {
+  const value = props.modelValue[field.key]
+  return value instanceof File ? value : null
 }
 
-/** Sube la imagen al momento; en settings queda la URL pública. */
-async function upload(file: File, replaces?: string | null): Promise<string> {
-  const form = new FormData()
-  form.append('image', file)
-  // El backend borra el fichero sustituido: sin huérfanos.
-  if (replaces) form.append('replaces', replaces)
-  const { data } = await props.api.post('/admin/content/uploads', form)
-  return data.url
+/** URL guardada de un campo imagen no traducible (si la hay). */
+function imageCurrentUrl(field: FieldSchema): string | null {
+  const value = props.modelValue[field.key]
+  return typeof value === 'string' && value ? value : null
 }
 
-/** Borra la subida del disco (el botón "quitar"); en silencio si falla. */
-async function removeUpload(url: string): Promise<void> {
-  await props.api.delete('/admin/content/uploads', { data: { url } }).catch(() => {})
+/** Mapa locale => URL guardada o File pendiente de una imagen traducible. */
+function imageTranslations(field: FieldSchema): Record<string, string | File> {
+  const value = props.modelValue[field.key]
+  if (!value || typeof value !== 'object') return {}
+  return value as Record<string, string | File>
 }
 
-async function uploadImage(field: FieldSchema, file: File | null) {
-  const current = (props.modelValue[field.key] as string | null) ?? null
-  if (!file) {
-    if (current) removeUpload(current)
-    set(field.key, null)
-    return
-  }
-  set(field.key, await upload(file, current))
+function selectOptions(field: FieldSchema): SelectOption[] {
+  return Object.entries(field.options ?? {}).map(([value, text]) => ({
+    value,
+    label: props.translate?.(`blockOptions.${field.key}.${value}`, text) ?? text,
+  }))
 }
 
 // --- Anidados (group / repeater) ---
@@ -296,25 +293,24 @@ function addLabel(): string {
         @update:model-value="(v) => set(field.key, v)"
       />
 
-      <!-- Imagen traducible: una URL por locale (fallback al default al renderizar) -->
+      <!-- Imagen traducible: una por locale (fallback al default al renderizar).
+           Diferida: el mapa lleva File pendientes hasta el guardar -->
       <TranslatableImage
         v-else-if="field.type === 'image' && field.translatable"
-        :model-value="translations(field)"
+        :model-value="imageTranslations(field)"
         :locales="locales"
         :label="label(field)"
         :required="field.required"
-        :upload="upload"
-        :remove-file="removeUpload"
         @update:model-value="(v) => set(field.key, v)"
       />
 
       <div v-else-if="field.type === 'image'" class="schema-fields__image">
         <span class="form-field__label">{{ label(field) }}</span>
         <ImageUpload
-          :model-value="null"
-          :current-url="(modelValue[field.key] as string) ?? null"
-          @update:model-value="(f: File | null) => uploadImage(field, f)"
-          @remove="uploadImage(field, null)"
+          :model-value="imageFile(field)"
+          :current-url="imageCurrentUrl(field)"
+          @update:model-value="(f: File | null) => set(field.key, f)"
+          @remove="set(field.key, null)"
         />
       </div>
     </template>

package/src/content/deferredImages.ts

@@ -0,0 +1,104 @@
+import type { AxiosInstance } from 'axios'
+import type { FieldSchema } from './SchemaFields.vue'
+
+// Subidas de imagen DIFERIDAS (CRM y configuración): los inputs de imagen
+// retienen el File en el estado del formulario y NADA viaja al servidor hasta
+// el submit. Al guardar: (1) se suben los File pendientes, (2) se persiste el
+// formulario con las URLs resueltas y (3) SOLO si el guardado fue bien se
+// borran del disco las imágenes que el registro ya no referencia. Si el
+// guardado falla, se borran las subidas recién hechas (sin huérfanos de
+// formularios cancelados o fallidos).
+
+/** Sube una imagen de contenido (`POST /admin/content/uploads`) y devuelve su URL pública. */
+export async function uploadContentImage(api: AxiosInstance, file: File): Promise<string> {
+  const form = new FormData()
+  form.append('image', file)
+  const { data } = await api.post('/admin/content/uploads', form)
+  return data.url as string
+}
+
+/** Borra una subida de contenido del disco; en silencio si falla. */
+export async function deleteContentImage(api: AxiosInstance, url: string): Promise<void> {
+  await api.delete('/admin/content/uploads', { data: { url } }).catch(() => {})
+}
+
+/**
+ * Sube los File pendientes de los campos imagen de unos settings (recursivo
+ * en group/repeater) y devuelve el valor resuelto, con URLs donde había
+ * Files. Las URLs recién subidas se van APUNTANDO en `uploaded` (parámetro
+ * de salida): si una subida o el guardado posterior fallan, el llamador
+ * puede deshacerlas aunque el proceso quedara a medias.
+ */
+export async function uploadPendingImages(
+  api: AxiosInstance,
+  fields: FieldSchema[],
+  value: Record<string, unknown>,
+  uploaded: string[],
+): Promise<Record<string, unknown>> {
+  const out: Record<string, unknown> = { ...value }
+  for (const field of fields) {
+    const raw = out[field.key]
+    if (field.type === 'image') {
+      if (raw instanceof File) {
+        const url = await uploadContentImage(api, raw)
+        uploaded.push(url)
+        out[field.key] = url
+      } else if (field.translatable && raw && typeof raw === 'object') {
+        const map: Record<string, string> = {}
+        for (const [code, entry] of Object.entries(raw as Record<string, string | File>)) {
+          if (entry instanceof File) {
+            const url = await uploadContentImage(api, entry)
+            uploaded.push(url)
+            map[code] = url
+          } else if (entry) {
+            map[code] = entry
+          }
+        }
+        out[field.key] = map
+      }
+    } else if (field.type === 'group' && raw && typeof raw === 'object' && !Array.isArray(raw)) {
+      out[field.key] = await uploadPendingImages(
+        api,
+        field.fields ?? [],
+        raw as Record<string, unknown>,
+        uploaded,
+      )
+    } else if (field.type === 'repeater' && Array.isArray(raw)) {
+      const rows: Record<string, unknown>[] = []
+      for (const row of raw as Record<string, unknown>[]) {
+        rows.push(await uploadPendingImages(api, field.fields ?? [], row ?? {}, uploaded))
+      }
+      out[field.key] = rows
+    }
+  }
+  return out
+}
+
+/**
+ * URLs de imagen presentes en unos settings según su esquema (recursivo).
+ * Comparar las de ANTES de guardar con las de DESPUÉS da las que borrar del
+ * disco (robusto ante reordenar/quitar filas de un repeater: una URL que siga
+ * en cualquier posición no se toca).
+ */
+export function collectImageUrls(fields: FieldSchema[], value: Record<string, unknown>): string[] {
+  const urls: string[] = []
+  for (const field of fields) {
+    const raw = value?.[field.key]
+    if (field.type === 'image') {
+      if (typeof raw === 'string' && raw) {
+        urls.push(raw)
+      } else if (raw && typeof raw === 'object' && !(raw instanceof File)) {
+        for (const entry of Object.values(raw as Record<string, unknown>)) {
+          if (typeof entry === 'string' && entry) urls.push(entry)
+        }
+      }
+    } else if (field.type === 'group' && raw && typeof raw === 'object' && !Array.isArray(raw)) {
+      urls.push(...collectImageUrls(field.fields ?? [], raw as Record<string, unknown>))
+    } else if (field.type === 'repeater' && Array.isArray(raw)) {
+      for (const row of raw as Record<string, unknown>[]) {
+        urls.push(...collectImageUrls(field.fields ?? [], row ?? {}))
+      }
+    }
+  }
+  return urls
+}

package/src/crud/BaseGrid.vue

@@ -10,7 +10,8 @@ const props = withDefaults(
   defineProps<{
     cols?: number | ResponsiveCols
     gap?: 'sm' | 'md' | 'lg'
-    preset?: 'cards' | 'cards-wide' | 'cards-narrow' | 'cards-full' | 'halves' | 'thirds'
+    preset?:
+      'cards' | 'cards-dense' | 'cards-wide' | 'cards-narrow' | 'cards-full' | 'halves' | 'thirds'
   }>(),
   { cols: () => ({ base: 1, sm: 2, lg: 3 }), gap: 'md' },
 )
@@ -26,9 +27,11 @@ const presetCols: Record<string, ResponsiveCols> = {
 const gridClasses = computed(() => {
   const classes = ['grid', `grid--gap-${props.gap}`]
   // Los index de entidades escalan 1 → 2 → 3 → 4 → 5 con los breakpoints
-  // canónicos del contenedor `content` (ver .grid--cards en _grid.scss).
-  if (props.preset === 'cards') {
-    classes.push('grid--cards')
+  // canónicos del contenedor `content` (ver .grid--cards en _grid.scss);
+  // `cards-dense` (piezas pequeñas, p. ej. iconos) dobla cada escalón:
+  // 2 → 4 → 6 → 8 → 10.
+  if (props.preset === 'cards' || props.preset === 'cards-dense') {
+    classes.push(`grid--${props.preset}`)
     return classes
   }
   const cols = props.preset ? presetCols[props.preset] : props.cols

package/src/crud/FilterBar.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { Search } from '@lucide/vue'
 
-// Barra de filtros (estilo kontuan): caja de búsqueda con icono de lupa.
-// Controlada por v-model; se compone por encima de las tabs. Slot por defecto
-// para filtros extra (selects, fechas, …) a la derecha de la búsqueda.
+// Barra de filtros (estilo kontuan): caja de búsqueda con icono de lupa a la
+// izquierda (el texto empieza tras ella). Controlada por v-model; se compone
+// por encima de las tabs. Slot por defecto para filtros extra (selects,
+// fechas, …) a la derecha de la búsqueda.
 defineProps<{
   modelValue: string
   placeholder?: string
@@ -14,6 +15,7 @@ defineEmits<{ 'update:modelValue': [value: string] }>()
 <template>
   <div class="filter-bar">
     <div class="filter-bar__search">
+      <Search :size="16" class="filter-bar__search-icon" />
       <input
         type="search"
         :value="modelValue"
@@ -21,7 +23,6 @@ defineEmits<{ 'update:modelValue': [value: string] }>()
         class="filter-bar__search-input"
         @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
       />
-      <Search :size="16" class="filter-bar__search-icon" />
     </div>
     <div v-if="$slots.default" class="filter-bar__extra"><slot /></div>
   </div>

package/src/index.ts

@@ -24,3 +24,11 @@ export { useResource, type ResourceMeta } from './crud/useResource'
 // CRM de páginas y bloques (doc 03): editor dirigido por esquema.
 export { default as SchemaFields, type FieldSchema } from './content/SchemaFields.vue'
 export { default as PageBlocks, type PageBlocksLabels } from './content/PageBlocks.vue'
+// Subidas de imagen diferidas al guardar (uploads de contenido sin huérfanos):
+// las usan PageBlocks y las vistas del cascarón (Ajustes, form de página).
+export {
+  uploadContentImage,
+  deleteContentImage,
+  uploadPendingImages,
+  collectImageUrls,
+} from './content/deferredImages'

package/src/pdf/PdfManager.vue

@@ -127,6 +127,12 @@ function typeName(exp: ExportInfo): string {
   return props.typeLabels[exp.type] ?? exp.type
 }
 
+// Criterio de los selects del admin: sin un orden explícito, ALFABÉTICO.
+// Vale también para las tarjetas, que hacen de selector de export.
+const sortedExports = computed(() =>
+  [...exports.value].sort((a, b) => typeName(a).localeCompare(typeName(b))),
+)
+
 /** Quedan piezas por generar (algún idioma por debajo del total). */
 function hasMissing(exp: ExportInfo): boolean {
   return Object.values(exp.stats.locales).some((ready) => ready < exp.stats.total)
@@ -134,13 +140,17 @@ function hasMissing(exp: ExportInfo): boolean {
 
 const activeExport = computed(() => exports.value.find((e) => e.type === activeType.value) ?? null)
 
-/** Fuentes filtradas por el buscador del panel (filtro en cliente). */
+/**
+ * Fuentes del combobox del panel: filtradas por el buscador (en cliente) y
+ * ALFABÉTICAS (criterio general de los selects del admin sin orden propio).
+ */
 const filteredSources = computed(() => {
   if (!activeExport.value) return []
   const q = sourceSearch.value.trim().toLowerCase()
-  return q
+  const sources = q
     ? activeExport.value.sources.filter((s) => s.label.toLowerCase().includes(q))
     : activeExport.value.sources
+  return [...sources].sort((a, b) => a.label.localeCompare(b.label))
 })
 
 /** Filas visibles en el panel: las del export global o las de la dueña elegida. */
@@ -169,6 +179,9 @@ async function loadCatalog() {
     exports.value = data.data
     // Los globales cargan sus filas ya (el panel las pinta directamente).
     await Promise.all(exports.value.filter((e) => e.global).map((e) => loadRows(e.type, null)))
+    // El selector de export (las tarjetas) arranca con el PRIMERO seleccionado,
+    // no vacío (sin abrir el panel: eso lo hace el click del usuario).
+    if (!activeType.value && sortedExports.value.length) activate(sortedExports.value[0])
   } catch {
     toast.danger(L.error)
   } finally {
@@ -176,12 +189,23 @@ async function loadCatalog() {
   }
 }
 
+/**
+ * Activa un export: resetea el buscador y, en los exports por entidad, deja
+ * el select de la dueña con el PRIMER elemento (alfabético) seleccionado —
+ * nunca vacío — cargando sus filas.
+ */
+function activate(exp: ExportInfo) {
+  activeType.value = exp.type
+  sourceSearch.value = ''
+  selectedSourceId.value = null
+  const first = exp.global
+    ? null
+    : [...exp.sources].sort((a, b) => a.label.localeCompare(b.label))[0]
+  if (first) selectSource(first.id)
+}
+
 function select(exp: ExportInfo) {
-  if (activeType.value !== exp.type) {
-    activeType.value = exp.type
-    sourceSearch.value = ''
-    selectedSourceId.value = null
-  }
+  if (activeType.value !== exp.type) activate(exp)
   sidebar.reveal()
 }
 
@@ -298,18 +322,15 @@ defineExpose({ refreshAll })
 
     <div class="manager-grid">
       <ManagerCard
-        v-for="exp in exports"
+        v-for="exp in sortedExports"
         :key="exp.type"
         :title="typeName(exp)"
         :chip="exp.layout"
         :active="activeType === exp.type"
         @select="select(exp)"
       >
-        <!-- Resumen como el de las previews: total + listos por idioma -->
-        <template #meta>
-          <span class="manager-stat"
-            >{{ L.total }} <strong>{{ exp.stats.total }}</strong></span
-          >
+        <!-- Como EntityCard: badges (listos por idioma) arriba, meta (total) debajo -->
+        <template #badges>
           <span
             v-for="(ready, locale) in exp.stats.locales"
             :key="locale"
@@ -317,6 +338,11 @@ defineExpose({ refreshAll })
             >{{ String(locale).toUpperCase() }} {{ ready }}/{{ exp.stats.total }}</span
           >
         </template>
+        <template #meta>
+          <span class="manager-stat"
+            >{{ L.total }} <strong>{{ exp.stats.total }}</strong></span
+          >
+        </template>
       </ManagerCard>
     </div>
 

package/src/previews/PreviewManager.vue

@@ -109,6 +109,12 @@ function typeName(type: TypeStatus): string {
   return props.typeLabels[type.key] ?? type.model
 }
 
+// Criterio de los selects del admin: sin un orden explícito, ALFABÉTICO.
+// Vale también para las tarjetas, que hacen de selector de tipo.
+const sortedTypes = computed(() =>
+  [...types.value].sort((a, b) => typeName(a).localeCompare(typeName(b))),
+)
+
 // Tipo activo (tarjeta seleccionada) y su selector en el panel.
 const activeType = ref<string | null>(null)
 const search = ref('')
@@ -116,6 +122,14 @@ const items = ref<PreviewItem[]>([])
 const page = ref({ current: 1, last: 1 })
 const selectedId = ref<number | null>(null)
 
+// Opciones del combobox del panel: el servidor manda por id; aquí salen
+// ALFABÉTICAS (criterio general de los selects del admin sin orden propio).
+const itemOptions = computed(() =>
+  items.value
+    .map((i) => ({ id: i.id, label: i.label }))
+    .sort((a, b) => a.label.localeCompare(b.label)),
+)
+
 const activeStatus = computed(() => types.value.find((t) => t.key === activeType.value) ?? null)
 const selectedItem = computed(() => items.value.find((i) => i.id === selectedId.value) ?? null)
 const missingLocales = computed(() =>
@@ -131,6 +145,9 @@ async function loadStatus() {
   try {
     const { data } = await props.api.get('/admin/previews')
     types.value = data.data
+    // El selector de tipo (las tarjetas) arranca con el PRIMERO seleccionado,
+    // no vacío (sin abrir el panel: eso lo hace el click del usuario).
+    if (!activeType.value && sortedTypes.value.length) activate(sortedTypes.value[0].key)
   } catch {
     toast.danger(L.error)
   } finally {
@@ -146,19 +163,32 @@ async function loadItems(pageNumber = 1) {
     })
     items.value = pageNumber === 1 ? data.data : [...items.value, ...data.data]
     page.value = { current: data.meta.current_page, last: data.meta.last_page }
+    // El select de elemento arranca con el PRIMERO (alfabético) seleccionado,
+    // no vacío; buscando o con algo ya elegido, no se toca.
+    if (
+      pageNumber === 1 &&
+      !search.value &&
+      selectedId.value === null &&
+      itemOptions.value.length
+    ) {
+      selectedId.value = Number(itemOptions.value[0].id)
+    }
   } catch {
     toast.danger(L.error)
   }
 }
 
+/** Activa un tipo: resetea búsqueda y selección y carga sus elementos. */
+function activate(key: string) {
+  activeType.value = key
+  search.value = ''
+  items.value = []
+  selectedId.value = null
+  loadItems()
+}
+
 function select(type: TypeStatus) {
-  if (activeType.value !== type.key) {
-    activeType.value = type.key
-    search.value = ''
-    items.value = []
-    selectedId.value = null
-    loadItems()
-  }
+  if (activeType.value !== type.key) activate(type.key)
   sidebar.reveal()
 }
 
@@ -295,17 +325,14 @@ defineExpose({ refreshAll })
 
     <div class="manager-grid">
       <ManagerCard
-        v-for="type in types"
+        v-for="type in sortedTypes"
         :key="type.key"
         :title="typeName(type)"
         :active="activeType === type.key"
         @select="select(type)"
       >
-        <!-- Total + generadas por idioma, de un vistazo -->
-        <template #meta>
-          <span class="manager-stat"
-            >{{ L.total }} <strong>{{ type.total }}</strong></span
-          >
+        <!-- Como EntityCard: badges (generadas por idioma) arriba, meta (total) debajo -->
+        <template #badges>
           <span
             v-for="(count, locale) in type.locales"
             :key="locale"
@@ -313,6 +340,11 @@ defineExpose({ refreshAll })
             >{{ String(locale).toUpperCase() }} {{ count }}/{{ type.total }}</span
           >
         </template>
+        <template #meta>
+          <span class="manager-stat"
+            >{{ L.total }} <strong>{{ type.total }}</strong></span
+          >
+        </template>
       </ManagerCard>
     </div>
 
@@ -346,7 +378,7 @@ defineExpose({ refreshAll })
 
           <SearchSelect
             :model-value="selectedId"
-            :options="items.map((i) => ({ id: i.id, label: i.label }))"
+            :options="itemOptions"
             :placeholder="L.selectItem"
             :search-placeholder="L.searchPlaceholder"
             :no-results="L.noResults"