@edc-motor/admin-kit 0.4.27 → 0.4.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/admin-kit",
-  "version": "0.4.27",
+  "version": "0.4.28",
   "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.27",
+    "@edc-motor/ui": "^0.4.28",
     "axios": "^1.7.0"
   },
   "peerDependencies": {

package/scss/components/_page-blocks.scss

@@ -195,21 +195,57 @@
   // cuerpo del modal, no el viewport) se apilan, el select debajo.
   &__field--row {
     display: flex;
-    align-items: flex-end;
+    // ARRIBA (no al fondo): con un textarea alto (p. ej. el subtítulo) el
+    // select de alineación debe quedar a la altura de las etiquetas, no
+    // descolgado al fondo de la fila.
+    align-items: flex-start;
     gap: $space-3;
 
     .schema-fields__field-main { flex: 1 1 0; }
   }
 
-  &__field-align { flex: 0 0 180px; }
+  // Ancho justo para "Centrado"/"Izquierda" + etiqueta en es/en/eu sin
+  // cortarse (180px sobraba de aire).
+  &__field-align { flex: 0 0 140px; }
 
   // Imagen a dos columnas: el input a la izquierda, sus ajustes (posición,
-  // escalado, reparto de columnas) apilados a la derecha.
+  // escalado, reparto de columnas) apilados a la derecha. `stretch` (no
+  // `start`) para que la columna de la imagen pueda llenar el alto de la
+  // fila — la cadena de contenedores hasta el cuadro de arrastre lleva
+  // `flex: 1` para que la dropzone crezca con ella.
   &__field--image-group {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     gap: $space-3;
-    align-items: start;
+    align-items: stretch;
+
+    .schema-fields__field-main {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    // El campo imagen (label + ImageUpload) y el propio ImageUpload
+    // (`@edc-motor/ui`) se apuntan al `flex: 1` de la columna; SUELTO
+    // (form-modals normales, TranslatableImage) el componente no vive en
+    // esta cadena y conserva su tamaño natural (160×160).
+    .schema-fields__image {
+      display: flex;
+      flex-direction: column;
+      gap: $space-1;
+      flex: 1;
+      min-height: 0;
+    }
+
+    .image-upload {
+      flex: 1;
+      min-height: 0;
+    }
+
+    .image-upload__zone {
+      flex: 1;
+      width: 100%;
+    }
   }
 
   &__field-image-settings {

package/src/content/PageBlocks.vue

@@ -52,6 +52,9 @@ export interface PageBlocksLabels {
   panelContent: string
   parent: string
   parentNone: string
+  /** Título de la sección de interruptores (PDF/Índice) del panel, debajo
+   *  de las acciones de verdad (editar, borrar…). */
+  stateKicker: string
 }
 
 const defaultLabels: PageBlocksLabels = {
@@ -75,6 +78,7 @@ const defaultLabels: PageBlocksLabels = {
   panelContent: 'Contenido',
   parent: 'Bloque padre (índices indentados)',
   parentNone: '— Ninguno —',
+  stateKicker: 'Estado',
 }
 
 const props = withDefaults(
@@ -729,8 +733,23 @@ defineExpose({ reload: load })
         <template v-else>
           <p class="manager-panel__kicker">{{ L.panelTitle }}</p>
 
-          <!-- Acciones PRIMERO (los interruptores arriba); después,
-               secciones separadas (patrón panel) -->
+          <!-- Acciones de verdad (patrón panel): los interruptores
+               PDF/Índice van en su propia sección, debajo -->
+          <div class="manager-detail__actions">
+            <BaseButton variant="info" :disabled="busy" @click="openEdit(selected)">
+              <template #icon><SquarePen :size="14" /></template>
+              {{ L.edit }}
+            </BaseButton>
+            <BaseButton variant="danger" :disabled="busy" @click="remove(selected)">
+              <template #icon><Trash2 :size="14" /></template>
+              {{ L.delete }}
+            </BaseButton>
+          </div>
+
+          <!-- Estado: los interruptores (flags), separados de las
+               acciones de verdad -->
+          <hr class="manager-panel__divider" />
+          <p class="manager-panel__kicker">{{ L.stateKicker }}</p>
           <div class="manager-detail__actions">
             <BaseButton
               variant="success"
@@ -751,14 +770,6 @@ defineExpose({ reload: load })
               <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>
-            <BaseButton variant="danger" :disabled="busy" @click="remove(selected)">
-              <template #icon><Trash2 :size="14" /></template>
-              {{ L.delete }}
-            </BaseButton>
           </div>
 
           <hr class="manager-panel__divider" />