@edc-motor/admin-kit 0.4.26 → 0.4.27

package/package.json

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

package/scss/components/_menu-manager.scss

@@ -43,9 +43,13 @@
     position: relative;
     transition: border-color 0.15s ease, opacity 0.15s ease;
 
+    // Filas NO clickables (no seleccionan panel, solo se arrastran): el
+    // cursor invita a agarrar en cualquier punto de la fila.
+    cursor: grab;
+
     &:hover { border-color: $border-strong; }
     &.is-hidden { opacity: 0.65; }
-    &.is-dragging { opacity: 0.4; }
+    &.is-dragging { opacity: 0.4; cursor: grabbing; }
 
     // Indicador de inserción: línea antes/después de la fila.
     &.drop-before::before,
@@ -78,7 +82,9 @@
     flex: 0 0 auto;
     cursor: grab;
     touch-action: none;
+    transition: color 0.15s ease;
 
+    &:hover { color: $accent-500; }
     &:active { cursor: grabbing; }
   }
 

package/scss/components/_page-blocks.scss

@@ -105,7 +105,9 @@
     display: inline-flex;
     color: $text-3;
     cursor: grab;
+    transition: color 0.15s ease;
 
+    &:hover { color: $accent-500; }
     &:active { cursor: grabbing; }
   }
 
@@ -141,11 +143,13 @@
 
   &__flags { grid-area: flags; display: flex; gap: $space-1; }
 
-  // Sección de ajustes comunes: SIEMPRE visible al fondo del formulario
-  // (antes era un <details> plegado), con su titulito discreto.
+  // Sección "General": ARRIBA del formulario (antes al fondo, como "Ajustes
+  // comunes", y pasaba desapercibida), con su titulito discreto — fila 1:
+  // anchura + bloque padre; fila 2: los interruptores; fila 3: color de
+  // fondo + alineación general del bloque. Los campos del TIPO van después.
   &__common {
-    border-top: 1px dashed $border;
-    padding-top: $space-3;
+    border-bottom: 1px dashed $border;
+    padding-bottom: $space-4;
     display: grid;
     gap: $space-3;
 
@@ -153,15 +157,21 @@
       color: $text-2;
       font-size: $fs-13;
     }
+  }
+
+  // Cada fila de General: dos columnas iguales, apiladas en un modal
+  // angosto (container query sobre el cuerpo del modal, no el viewport).
+  &__common-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: $space-3;
+    align-items: start;
 
-    // El aire de los checkboxes (bajo el selector de color) y del select del
-    // padre va a mano, y cada checkbox en su propia línea.
-    > .checkbox {
-      display: flex;
-      margin-top: $space-2;
+    > .checkbox { display: flex; }
+
+    @container modal-body (max-width: #{$bp-sm - 1px}) {
+      grid-template-columns: 1fr;
     }
-    > .checkbox:first-of-type { margin-top: $space-4; }
-    > .form-field { margin-top: $space-3; }
   }
 
   // Bloques anidados (parent_id, sin límite de niveles): sangría por
@@ -173,6 +183,50 @@
   display: grid;
   gap: $space-4;
 
+  // Envoltorio de CADA campo (doc 03 ampliado): normalmente transparente
+  // (una columna, como siempre) — gana forma cuando el campo se agrupa con
+  // su alineación o con los ajustes de la imagen.
+  &__field { min-width: 0; }
+
+  &__field-main { min-width: 0; }
+
+  // Alineación junto a su campo: input flexible + select de ancho
+  // contenido (~180px). En un modal angosto (container query sobre el
+  // cuerpo del modal, no el viewport) se apilan, el select debajo.
+  &__field--row {
+    display: flex;
+    align-items: flex-end;
+    gap: $space-3;
+
+    .schema-fields__field-main { flex: 1 1 0; }
+  }
+
+  &__field-align { flex: 0 0 180px; }
+
+  // Imagen a dos columnas: el input a la izquierda, sus ajustes (posición,
+  // escalado, reparto de columnas) apilados a la derecha.
+  &__field--image-group {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: $space-3;
+    align-items: start;
+  }
+
+  &__field-image-settings {
+    display: grid;
+    gap: $space-3;
+  }
+
+  @container modal-body (max-width: #{$bp-sm - 1px}) {
+    &__field--row {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    &__field-align { flex-basis: auto; }
+
+    &__field--image-group { grid-template-columns: 1fr; }
+  }
+
   &__color,
   &__image {
     display: grid;

package/src/content/PageBlocks.vue

@@ -67,7 +67,7 @@ const defaultLabels: PageBlocksLabels = {
   indexableShort: 'Índice',
   yes: 'Sí',
   no: 'No',
-  common: 'Ajustes comunes',
+  common: 'General',
   confirmDelete: '¿Borrar este bloque?',
   error: 'No se ha podido completar la acción.',
   panelTitle: 'Bloque',
@@ -181,6 +181,39 @@ const formPrintable = ref(true)
 const formIndexable = ref(true)
 const formParent = ref<number | null>(null)
 
+// --- Formulario del modal: General ARRIBA + alineaciones junto a su campo -
+// `title_align`/`subtitle_align` son campos COMUNES del motor pero
+// title/subtitle son del TIPO: se inyectan aquí junto a su campo (SchemaFields
+// ya sabe emparejar un `<base>_align` con `<base>` con que ambos estén en la
+// misma lista) y se retiran de la sección general (author_align→author,
+// label_align→label y button_align→button_text ya viven en el propio tipo,
+// SchemaFields los empareja sin ayuda). El `align` general no tiene campo
+// objetivo: se queda en General, junto al color de fondo.
+function commonField(key: string): FieldSchema | undefined {
+  return modalType.value?.common.find((f) => f.key === key)
+}
+
+const typeFieldsWithAligns = computed<FieldSchema[]>(() => {
+  if (!modalType.value) return []
+  const injected = (['title_align', 'subtitle_align'] as const)
+    .map((key) => commonField(key))
+    .filter((f): f is FieldSchema => !!f)
+  return [...modalType.value.fields, ...injected]
+})
+
+const generalWidthFields = computed<FieldSchema[]>(() => {
+  const field = commonField('width')
+  return field ? [field] : []
+})
+const generalBackgroundFields = computed<FieldSchema[]>(() => {
+  const field = commonField('background')
+  return field ? [field] : []
+})
+const generalAlignFields = computed<FieldSchema[]>(() => {
+  const field = commonField('align')
+  return field ? [field] : []
+})
+
 // Padres elegibles: CUALQUIER bloque de la página (sin límite de niveles),
 // salvo uno mismo o uno de sus propios descendientes (crearía un ciclo).
 // Etiqueta con prefijo de rayas según su profundidad, para ver la jerarquía
@@ -614,46 +647,74 @@ defineExpose({ reload: load })
       </article>
     </div>
 
-    <!-- Modal generado desde el esquema del tipo -->
+    <!-- Modal generado desde el esquema del tipo: más ancho que el resto de
+         formularios del admin (más columnas por la sección de imagen y las
+         filas de alineación). -->
     <EditModal
       v-model="modalOpen"
       :title="modalType ? typeName(modalType.key) : ''"
+      size="wide"
       :submit-label="L.save"
       :cancel-label="L.cancel"
       :loading="busy"
       @submit="save"
     >
       <template v-if="modalType">
+        <!-- General ARRIBA del todo (antes iba al fondo, como "Ajustes
+             comunes", y pasaba desapercibida): anchura + bloque padre;
+             los interruptores; color de fondo + alineación general del
+             bloque. Los campos del tipo van DESPUÉS. -->
+        <div class="page-blocks__common">
+          <span class="page-blocks__common-title">{{ L.common }}</span>
+
+          <div class="page-blocks__common-row">
+            <SchemaFields
+              v-model="form"
+              :fields="generalWidthFields"
+              :locales="locales"
+              :api="api"
+              :translate="translate"
+            />
+            <BaseSelect
+              :model-value="formParent === null ? '' : String(formParent)"
+              :label="L.parent"
+              :options="[{ value: '', label: L.parentNone }, ...parentOptions]"
+              @update:model-value="(v: string) => (formParent = v ? Number(v) : null)"
+            />
+          </div>
+
+          <div class="page-blocks__common-row">
+            <BaseCheckbox v-model="formPrintable" :label="L.printable" />
+            <BaseCheckbox v-model="formIndexable" :label="L.indexable" />
+          </div>
+
+          <div class="page-blocks__common-row">
+            <SchemaFields
+              v-model="form"
+              :fields="generalBackgroundFields"
+              :locales="locales"
+              :api="api"
+              :translate="translate"
+            />
+            <SchemaFields
+              v-model="form"
+              :fields="generalAlignFields"
+              :locales="locales"
+              :api="api"
+              :translate="translate"
+            />
+          </div>
+        </div>
+
         <SchemaFields
           v-model="form"
-          :fields="modalType.fields"
+          :fields="typeFieldsWithAligns"
           :locales="locales"
           :api="api"
           :icons="icons"
           :rich-labels="richLabels"
           :translate="translate"
         />
-
-        <!-- Sección SIEMPRE visible al fondo del formulario (antes era un
-             details plegado y los ajustes pasaban desapercibidos) -->
-        <div class="page-blocks__common">
-          <span class="page-blocks__common-title">{{ L.common }}</span>
-          <SchemaFields
-            v-model="form"
-            :fields="modalType.common"
-            :locales="locales"
-            :api="api"
-            :translate="translate"
-          />
-          <BaseCheckbox v-model="formPrintable" :label="L.printable" />
-          <BaseCheckbox v-model="formIndexable" :label="L.indexable" />
-          <BaseSelect
-            :model-value="formParent === null ? '' : String(formParent)"
-            :label="L.parent"
-            :options="[{ value: '', label: L.parentNone }, ...parentOptions]"
-            @update:model-value="(v: string) => (formParent = v ? Number(v) : null)"
-          />
-        </div>
       </template>
     </EditModal>
 

package/src/content/SchemaFields.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { AxiosInstance } from 'axios'
 import { ArrowDown, ArrowUp, Plus, X } from '@lucide/vue'
 import {
@@ -62,6 +63,64 @@ const props = withDefaults(
 
 const emit = defineEmits<{ 'update:modelValue': [value: Record<string, unknown>] }>()
 
+// Convenciones genéricas de agrupado (doc 03 ampliado):
+//
+// 1) Alineaciones junto a su campo: un select `<base>_align` cuyo campo
+//    `<base>` (o `<base>_text`, caso de `button_align`/`button_text`) esté
+//    en la MISMA lista se pinta junto a él, en una fila de dos columnas
+//    (PageBlocks inyecta title_align/subtitle_align —comunes del motor—
+//    junto a title/subtitle antes de pasar la lista aquí). El `align`
+//    general del bloque no tiene campo objetivo ("align" no acaba en
+//    "_align" con un prefijo no vacío) y se queda fuera de esta pareja.
+// 2) Imagen a dos columnas: el campo `image` con alguno de sus ajustes
+//    (`image_position`, `image_fit`, `image_columns`) en la misma lista se
+//    agrupa con ellos — columna 1 la imagen, columna 2 los ajustes
+//    apilados.
+const IMAGE_SETTING_KEYS = ['image_position', 'image_fit', 'image_columns']
+
+interface LayoutItem {
+  field: FieldSchema
+  /** Select `<base>_align` que viaja junto a `field` en la misma fila. */
+  align?: FieldSchema
+  /** Ajustes de imagen (image_position/fit/columns) que viajan con `field`. */
+  imageSettings?: FieldSchema[]
+}
+
+const layout = computed<LayoutItem[]>(() => {
+  const byKey = new Map(props.fields.map((f) => [f.key, f]))
+  const alignOf = new Map<string, FieldSchema>() // clave del campo "base" => su _align
+  const consumed = new Set<string>() // claves ya emparejadas con otro campo
+
+  for (const field of props.fields) {
+    if (field.type !== 'select' || !field.key.endsWith('_align')) continue
+    const base = field.key.slice(0, -'_align'.length)
+    if (!base) continue // el "align" general no tiene prefijo
+    const baseKey = byKey.has(base) ? base : byKey.has(`${base}_text`) ? `${base}_text` : null
+    if (!baseKey) continue
+    alignOf.set(baseKey, field)
+    consumed.add(field.key)
+  }
+
+  const imageSettingsOf = new Map<string, FieldSchema[]>()
+  for (const field of props.fields) {
+    if (field.key !== 'image' || field.type !== 'image') continue
+    const settings = IMAGE_SETTING_KEYS.map((key) => byKey.get(key)).filter(
+      (f): f is FieldSchema => !!f,
+    )
+    if (!settings.length) continue
+    imageSettingsOf.set(field.key, settings)
+    settings.forEach((f) => consumed.add(f.key))
+  }
+
+  return props.fields
+    .filter((f) => !consumed.has(f.key))
+    .map((f) => ({
+      field: f,
+      align: alignOf.get(f.key),
+      imageSettings: imageSettingsOf.get(f.key),
+    }))
+})
+
 function label(field: FieldSchema): string {
   return props.translate?.(`blockFields.${field.key}`, field.label) ?? field.label
 }
@@ -152,166 +211,204 @@ function addLabel(): string {
 
 <template>
   <div class="schema-fields">
-    <template v-for="field in fields" :key="field.key">
-      <!-- Traducibles: text / textarea / richtext van al TranslatableInput -->
-      <TranslatableInput
-        v-if="field.translatable && ['text', 'textarea', 'richtext'].includes(field.type)"
-        :model-value="translations(field)"
-        :locales="locales"
-        :label="label(field)"
-        :required="field.required"
-        :type="
-          field.type === 'richtext' ? 'wysiwyg' : field.type === 'textarea' ? 'textarea' : 'text'
-        "
-        :icons="icons"
-        :rich-labels="richLabels"
-        @update:model-value="(v) => set(field.key, v)"
-      />
-
-      <BaseInput
-        v-else-if="field.type === 'text'"
-        :model-value="(modelValue[field.key] as string) ?? ''"
-        :label="label(field)"
-        :required="field.required"
-        @update:model-value="(v) => set(field.key, v)"
-      />
-
-      <BaseTextarea
-        v-else-if="field.type === 'textarea'"
-        :model-value="(modelValue[field.key] as string) ?? ''"
-        :label="label(field)"
-        @update:model-value="(v: string) => set(field.key, v)"
-      />
-
-      <RichTextInput
-        v-else-if="field.type === 'richtext'"
-        :model-value="(modelValue[field.key] as string) ?? ''"
-        :icons="icons"
-        :labels="richLabels"
-        @update:model-value="(v: string) => set(field.key, v)"
-      />
-
-      <NumericInput
-        v-else-if="field.type === 'number'"
-        :model-value="(modelValue[field.key] as number) ?? (field.default as number) ?? 0"
-        :label="label(field)"
-        :min="field.min ?? 0"
-        :max="field.max ?? undefined"
-        @update:model-value="(v) => set(field.key, v)"
-      />
-
-      <BaseCheckbox
-        v-else-if="field.type === 'boolean'"
-        :model-value="Boolean(modelValue[field.key] ?? field.default)"
-        :label="label(field)"
-        @update:model-value="(v) => set(field.key, v)"
-      />
-
-      <BaseSelect
-        v-else-if="field.type === 'select'"
-        :model-value="(modelValue[field.key] as string) ?? (field.default as string) ?? ''"
-        :label="label(field)"
-        :options="selectOptions(field)"
-        @update:model-value="(v) => set(field.key, v)"
-      />
-
-      <div v-else-if="field.type === 'color'" class="schema-fields__color">
-        <span class="form-field__label">{{ label(field) }}</span>
-        <PaletteColorPicker
-          :model-value="(modelValue[field.key] as string) ?? null"
-          @update:model-value="(v) => set(field.key, v)"
-        />
-      </div>
-
-      <!-- Grupo: objeto {subclave: valor} con los subcampos anidados -->
-      <fieldset v-else-if="field.type === 'group'" class="schema-fields__group">
-        <legend class="form-field__label">{{ label(field) }}</legend>
-        <SchemaFields
-          :fields="field.fields ?? []"
-          :model-value="groupValue(field)"
-          :locales="locales"
-          :api="api"
-          :icons="icons"
-          :rich-labels="richLabels"
-          :translate="translate"
-          @update:model-value="(v) => set(field.key, v)"
-        />
-      </fieldset>
-
-      <!-- Repeater: filas con los mismos subcampos (añadir/quitar/reordenar) -->
-      <div v-else-if="field.type === 'repeater'" class="schema-fields__repeater">
-        <span class="form-field__label">{{ label(field) }}</span>
-        <fieldset v-for="(row, index) in rows(field)" :key="index" class="schema-fields__row">
-          <div class="schema-fields__row-bar">
-            <span class="schema-fields__row-index">{{ index + 1 }}</span>
-            <IconButton
-              v-if="index > 0"
-              variant="neutral"
-              :title="'↑'"
-              @click="moveRow(field, index, -1)"
-              ><ArrowUp :size="14"
-            /></IconButton>
-            <IconButton
-              v-if="index < rows(field).length - 1"
-              variant="neutral"
-              :title="'↓'"
-              @click="moveRow(field, index, 1)"
-              ><ArrowDown :size="14"
-            /></IconButton>
-            <IconButton variant="danger" :title="'×'" @click="removeRow(field, index)"
-              ><X :size="14"
-            /></IconButton>
-          </div>
-          <SchemaFields
-            :fields="field.fields ?? []"
-            :model-value="row"
+    <template v-for="{ field, align, imageSettings } in layout" :key="field.key">
+      <div
+        class="schema-fields__field"
+        :class="{
+          'schema-fields__field--row': !!align,
+          'schema-fields__field--image-group': !!imageSettings,
+        }"
+      >
+        <div class="schema-fields__field-main">
+          <!-- Traducibles: text / textarea / richtext van al TranslatableInput -->
+          <TranslatableInput
+            v-if="field.translatable && ['text', 'textarea', 'richtext'].includes(field.type)"
+            :model-value="translations(field)"
             :locales="locales"
-            :api="api"
+            :label="label(field)"
+            :required="field.required"
+            :type="
+              field.type === 'richtext'
+                ? 'wysiwyg'
+                : field.type === 'textarea'
+                  ? 'textarea'
+                  : 'text'
+            "
             :icons="icons"
             :rich-labels="richLabels"
-            :translate="translate"
-            @update:model-value="(v) => setRow(field, index, v)"
+            @update:model-value="(v) => set(field.key, v)"
           />
-        </fieldset>
-        <BaseButton
-          v-if="field.max === null || rows(field).length < field.max"
-          variant="text"
-          @click="addRow(field)"
-        >
-          <template #icon><Plus :size="14" /></template>
-          {{ addLabel() }}
-        </BaseButton>
-      </div>
 
-      <!-- Referencia a una entidad del juego: buscador sobre su endpoint -->
-      <EntityRefSelect
-        v-else-if="field.type === 'entity' && field.options_url"
-        :model-value="(modelValue[field.key] as number) ?? null"
-        :label="label(field)"
-        :options-url="field.options_url"
-        :api="api"
-        @update:model-value="(v) => set(field.key, v)"
-      />
-
-      <!-- Imagen traducible: una por locale (fallback al default al renderizar).
+          <BaseInput
+            v-else-if="field.type === 'text'"
+            :model-value="(modelValue[field.key] as string) ?? ''"
+            :label="label(field)"
+            :required="field.required"
+            @update:model-value="(v) => set(field.key, v)"
+          />
+
+          <BaseTextarea
+            v-else-if="field.type === 'textarea'"
+            :model-value="(modelValue[field.key] as string) ?? ''"
+            :label="label(field)"
+            @update:model-value="(v: string) => set(field.key, v)"
+          />
+
+          <RichTextInput
+            v-else-if="field.type === 'richtext'"
+            :model-value="(modelValue[field.key] as string) ?? ''"
+            :icons="icons"
+            :labels="richLabels"
+            @update:model-value="(v: string) => set(field.key, v)"
+          />
+
+          <NumericInput
+            v-else-if="field.type === 'number'"
+            :model-value="(modelValue[field.key] as number) ?? (field.default as number) ?? 0"
+            :label="label(field)"
+            :min="field.min ?? 0"
+            :max="field.max ?? undefined"
+            @update:model-value="(v) => set(field.key, v)"
+          />
+
+          <BaseCheckbox
+            v-else-if="field.type === 'boolean'"
+            :model-value="Boolean(modelValue[field.key] ?? field.default)"
+            :label="label(field)"
+            @update:model-value="(v) => set(field.key, v)"
+          />
+
+          <BaseSelect
+            v-else-if="field.type === 'select'"
+            :model-value="(modelValue[field.key] as string) ?? (field.default as string) ?? ''"
+            :label="label(field)"
+            :options="selectOptions(field)"
+            @update:model-value="(v) => set(field.key, v)"
+          />
+
+          <div v-else-if="field.type === 'color'" class="schema-fields__color">
+            <span class="form-field__label">{{ label(field) }}</span>
+            <PaletteColorPicker
+              :model-value="(modelValue[field.key] as string) ?? null"
+              @update:model-value="(v) => set(field.key, v)"
+            />
+          </div>
+
+          <!-- Grupo: objeto {subclave: valor} con los subcampos anidados -->
+          <fieldset v-else-if="field.type === 'group'" class="schema-fields__group">
+            <legend class="form-field__label">{{ label(field) }}</legend>
+            <SchemaFields
+              :fields="field.fields ?? []"
+              :model-value="groupValue(field)"
+              :locales="locales"
+              :api="api"
+              :icons="icons"
+              :rich-labels="richLabels"
+              :translate="translate"
+              @update:model-value="(v) => set(field.key, v)"
+            />
+          </fieldset>
+
+          <!-- Repeater: filas con los mismos subcampos (añadir/quitar/reordenar) -->
+          <div v-else-if="field.type === 'repeater'" class="schema-fields__repeater">
+            <span class="form-field__label">{{ label(field) }}</span>
+            <fieldset v-for="(row, index) in rows(field)" :key="index" class="schema-fields__row">
+              <div class="schema-fields__row-bar">
+                <span class="schema-fields__row-index">{{ index + 1 }}</span>
+                <IconButton
+                  v-if="index > 0"
+                  variant="neutral"
+                  :title="'↑'"
+                  @click="moveRow(field, index, -1)"
+                  ><ArrowUp :size="14"
+                /></IconButton>
+                <IconButton
+                  v-if="index < rows(field).length - 1"
+                  variant="neutral"
+                  :title="'↓'"
+                  @click="moveRow(field, index, 1)"
+                  ><ArrowDown :size="14"
+                /></IconButton>
+                <IconButton variant="danger" :title="'×'" @click="removeRow(field, index)"
+                  ><X :size="14"
+                /></IconButton>
+              </div>
+              <SchemaFields
+                :fields="field.fields ?? []"
+                :model-value="row"
+                :locales="locales"
+                :api="api"
+                :icons="icons"
+                :rich-labels="richLabels"
+                :translate="translate"
+                @update:model-value="(v) => setRow(field, index, v)"
+              />
+            </fieldset>
+            <BaseButton
+              v-if="field.max === null || rows(field).length < field.max"
+              variant="text"
+              @click="addRow(field)"
+            >
+              <template #icon><Plus :size="14" /></template>
+              {{ addLabel() }}
+            </BaseButton>
+          </div>
+
+          <!-- Referencia a una entidad del juego: buscador sobre su endpoint -->
+          <EntityRefSelect
+            v-else-if="field.type === 'entity' && field.options_url"
+            :model-value="(modelValue[field.key] as number) ?? null"
+            :label="label(field)"
+            :options-url="field.options_url"
+            :api="api"
+            @update:model-value="(v) => set(field.key, v)"
+          />
+
+          <!-- 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="imageTranslations(field)"
-        :locales="locales"
-        :label="label(field)"
-        :required="field.required"
-        @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="imageFile(field)"
-          :current-url="imageCurrentUrl(field)"
-          @update:model-value="(f: File | null) => set(field.key, f)"
-          @remove="set(field.key, null)"
+          <TranslatableImage
+            v-else-if="field.type === 'image' && field.translatable"
+            :model-value="imageTranslations(field)"
+            :locales="locales"
+            :label="label(field)"
+            :required="field.required"
+            @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="imageFile(field)"
+              :current-url="imageCurrentUrl(field)"
+              @update:model-value="(f: File | null) => set(field.key, f)"
+              @remove="set(field.key, null)"
+            />
+          </div>
+        </div>
+
+        <!-- Alineación del campo (title_align/subtitle_align/author_align/…),
+         en la misma fila que su campo (columna de ancho contenido). -->
+        <BaseSelect
+          v-if="align"
+          class="schema-fields__field-align"
+          :model-value="(modelValue[align.key] as string) ?? (align.default as string) ?? ''"
+          :label="label(align)"
+          :options="selectOptions(align)"
+          @update:model-value="(v) => set(align!.key, v)"
         />
+
+        <!-- Ajustes de la imagen (image_position/image_fit/image_columns),
+         apilados en la segunda columna junto al input de imagen. -->
+        <div v-if="imageSettings" class="schema-fields__field-image-settings">
+          <BaseSelect
+            v-for="setting in imageSettings"
+            :key="setting.key"
+            :model-value="(modelValue[setting.key] as string) ?? (setting.default as string) ?? ''"
+            :label="label(setting)"
+            :options="selectOptions(setting)"
+            @update:model-value="(v) => set(setting.key, v)"
+          />
+        </div>
       </div>
     </template>
   </div>