@edc-motor/ui 0.4.26 → 0.4.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.26",
+  "version": "0.4.28",
   "description": "EdC Motor — componentes públicos Vue 3 + tokens SCSS para webs de juegos de mesa (paquete fuente: lo compila el consumidor con Vite)",
   "license": "GPL-3.0-only",
   "type": "module",
@@ -33,15 +33,21 @@
     "access": "public"
   },
   "dependencies": {
-    "axios": "^1.7.0",
-    "@tiptap/vue-3": "^2.11.0",
-    "@tiptap/starter-kit": "^2.11.0",
     "@tiptap/extension-image": "^2.11.0",
-    "@tiptap/pm": "^2.11.0"
+    "@tiptap/extension-link": "^2.11.0",
+    "@tiptap/extension-table": "^2.11.0",
+    "@tiptap/extension-table-cell": "^2.11.0",
+    "@tiptap/extension-table-header": "^2.11.0",
+    "@tiptap/extension-table-row": "^2.11.0",
+    "@tiptap/extension-underline": "^2.11.0",
+    "@tiptap/pm": "^2.11.0",
+    "@tiptap/starter-kit": "^2.11.0",
+    "@tiptap/vue-3": "^2.11.0",
+    "axios": "^1.7.0"
   },
   "peerDependencies": {
-    "vue": "^3.5.0",
     "@lucide/vue": "^1.0.0",
+    "vue": "^3.5.0",
     "vue-router": "^5.0.0"
   }
 }

package/scss/components/_block-related.scss

@@ -1,7 +1,7 @@
 @use "tokens" as *;
 
 // Bloque `related` (BlockRelated.vue): cabecera en rejilla (títulos + botón
-// al índice a la derecha en ≥sm, patrón del relateds de CDL) sobre una
+// al índice a la derecha en ≥600, patrón del relateds de CDL) sobre una
 // PreviewGrid compacta.
 .block--related {
   .block__related-header {
@@ -9,7 +9,11 @@
     grid-template-columns: 1fr;
     gap: $space-4;
 
-    @media (min-width: $bp-sm) {
+    // 600px es un umbral PROPIO de esta cabecera (sin token: no encaja en
+    // $bp-sm/$bp-md) — por debajo, título + subtítulo + botón caen en TRES
+    // filas (una columna); container query sobre `content` (el ancho real
+    // del bloque), coherente con el resto de bloques con imagen.
+    @container content (min-width: 600px) {
       grid-template-columns: 1fr auto;
       align-items: center;
     }
@@ -24,14 +28,14 @@
   .block__related-button {
     justify-self: center; // estrecho: los botones de bloque van centrados
 
-    @media (min-width: $bp-sm) {
+    @container content (min-width: 600px) {
       justify-self: end;
     }
   }
 
   // Centrado/derecha del campo común `align`: la cabecera acompaña.
   &.block--align-center .block__related-header {
-    @media (min-width: $bp-sm) {
+    @container content (min-width: 600px) {
       grid-template-columns: 1fr;
     }
   }

package/scss/components/_blocks.scss

@@ -2,8 +2,14 @@
 
 // Bloques públicos del CRM (doc 03): estilos base, cada juego los ajusta.
 .block {
-  // Aire vertical entre bloques (CDL usa 4rem; aquí algo más contenido).
+  // Aire vertical entre bloques (CDL usa 4rem; aquí algo más contenido). En
+  // estrecho (contenedor `content') baja un poco: los bloques respiran
+  // menos apretados en pantallas pequeñas.
   padding-block: $space-8 + $space-6; // 56px
+
+  @container content (max-width: #{$bp-sm - 1px}) {
+    padding-block: $space-8 + $space-2; // 40px
+  }
   background: var(--block-bg, transparent);
 
   &__inner {
@@ -15,22 +21,46 @@
   }
 
   // Anchura del contenido (campo común `width`): coherente entre bloques.
-  &--w-narrow .block__inner { max-width: 800px; }
+  &--w-narrow .block__inner { max-width: 880px; }
   &--w-full .block__inner { max-width: none; padding-inline: $space-6; }
 
-  // Tipografía de bloque, escalada ~×1.125 sobre la original para que el
-  // texto BASE sea de 18px: texto $fs-18, subtítulo 22, título $fs-32 (la
-  // cabecera sube a 36/28). Los títulos nunca se justifican.
+  // Las tarjetas (CTA, tarjeta de texto y cita) son algo más angostas que el
+  // resto en cada preset (wide/narrow), con la diferencia PROPORCIONAL (no
+  // un recorte fijo que desaparece de golpe): min(tope, 90%) — 90% ≈ la
+  // relación 1080/1200 del preset ancho, así que en pantallas grandes manda
+  // el tope (120px/100px más angosto que el resto) y, según se estrecha,
+  // manda el porcentaje y la diferencia decrece sin saltos. "Ancho
+  // completo" no lleva tope: full es full.
+  &--cta.block--w-wide .block__inner,
+  &--text-card.block--w-wide .block__inner,
+  &--quote.block--w-wide .block__inner { max-width: min(1080px, 90%); }
+  &--cta.block--w-narrow .block__inner,
+  &--text-card.block--w-narrow .block__inner,
+  &--quote.block--w-narrow .block__inner { max-width: min(780px, 90%); }
+
+  // Tipografía de bloque: texto BASE $fs-16 (el mismo cuerpo que el wysiwyg
+  // por defecto — sin override aquí), subtítulo $fs-24 (entre el título y
+  // la base), título $fs-32 (la cabecera sube a 40/28). Los títulos nunca
+  // se justifican.
   // width 100%: en grids con justify-items start (el cuerpo del CTA) el
   // elemento encoge a su contenido y el text-align no se vería.
   &__title { margin: 0; font-size: $fs-32; width: 100%; }
   // pre-line: el subtítulo es un textarea — sus saltos de línea cuentan.
-  &__subtitle { margin: 0; color: $text-2; font-size: 22px; white-space: pre-line; width: 100%; }
-  &__text { color: $text-1; font-size: $fs-18; }
+  &__subtitle { margin: 0; color: $text-2; font-size: $fs-24; white-space: pre-line; width: 100%; }
+  &__text { color: $text-1; font-size: $fs-16; }
 
-  // El wysiwyg fija su propio cuerpo ($fs-16): dentro de un bloque manda la
-  // base de bloque (18px). La cita lo re-sube luego a su tamaño.
-  .rich-content { font-size: $fs-18; }
+  // Alineación del bloque (campo común `align`): por CLASE (BlockShell ya
+  // no la mete como style en línea) para poder pisarla en estrecho.
+  &--align-left { text-align: left; }
+  &--align-center { text-align: center; }
+  &--align-right { text-align: right; }
+  &--align-justify { text-align: justify; }
+
+  // Justificado, a la IZQUIERDA por debajo de $bp-sm — mismo criterio (y
+  // mismo mecanismo, @media de viewport) que título/subtítulo, más abajo.
+  @media (max-width: $bp-sm - 1px) {
+    &--align-justify { text-align: left; }
+  }
 
   &--align-justify &__title,
   &--align-justify &__subtitle { text-align: left; }
@@ -88,7 +118,7 @@
     .edc-button { justify-self: start; text-decoration: none; }
   }
 
-  &--header .block__title { font-size: $fs-36; }
+  &--header .block__title { font-size: $fs-40; }
   &--header .block__subtitle { font-size: $fs-28; }
 
   &__media-layout { display: grid; gap: $space-4; }
@@ -122,8 +152,11 @@
     }
   }
 
-  // Marco de la imagen en columnas: el ALTO lo marca el texto de al lado
-  // (la imagen absoluta no aporta altura) y el modo de escalado hace el resto.
+  // Marco de la imagen en columnas: por defecto (cubrir/rellenar) el ALTO
+  // lo marca el texto de al lado (la imagen absoluta no aporta altura) y el
+  // modo de escalado hace el resto — object-position top: con el marco
+  // estirado, "cubrir" centraba la imagen en vertical, SIEMPRE anclada
+  // arriba.
   &__image-frame {
     position: relative;
     min-height: 200px; // que no colapse con textos muy cortos
@@ -136,13 +169,30 @@
       max-width: none;
     }
   }
-
-  // object-position top: con el marco estirado a la altura del texto,
-  // "contain" centraba la imagen en vertical — SIEMPRE anclada arriba.
-  &--fit-contain &__image-frame .block__image { object-fit: contain; object-position: top; }
   &--fit-cover &__image-frame .block__image { object-fit: cover; object-position: top; }
   &--fit-fill &__image-frame .block__image { object-fit: fill; }
 
+  // "Contener" es la excepción: la imagen respeta su tamaño NATURAL — ancho
+  // de columna, alto según su propia proporción — sin ampliarse ni
+  // encogerse para casar con el marco (si es más alta que el texto la fila
+  // crece; si es más baja, queda aire debajo). Por eso escapa del marco
+  // absoluto: vuelve al flujo normal, anclada arriba (align-self) del grid
+  // de columnas.
+  &--fit-contain &__image-frame {
+    @container content (min-width: #{$bp-md}) {
+      position: static;
+      min-height: 0;
+      align-self: start;
+
+      .block__image {
+        position: static;
+        width: 100%;
+        height: auto;
+        max-width: none;
+      }
+    }
+  }
+
   // En una columna (vertical, < 768) la imagen vuelve al flujo normal.
   @container content (max-width: #{$bp-md}) {
     &__image-frame {
@@ -175,10 +225,9 @@
     @container content (min-width: #{$bp-md}) {
       float: left;
       max-width: 50%;
-      margin-right: $space-4;
-      // Anclada ARRIBA mientras el texto la rodea (sin hueco previo ni
-      // alineación heredada que la descuelgue).
-      margin-top: 0;
+      // Respiro de $space-4 (16px) por arriba, abajo y hacia el texto
+      // (derecha); pegada a su lado exterior (izquierda, sin margen).
+      margin: $space-4 $space-4 $space-4 0;
       vertical-align: top;
     }
   }
@@ -186,8 +235,7 @@
     @container content (min-width: #{$bp-md}) {
       float: right;
       max-width: 50%;
-      margin-left: $space-4;
-      margin-top: 0;
+      margin: $space-4 0 $space-4 $space-4;
       vertical-align: top;
     }
   }
@@ -234,10 +282,10 @@
   }
 
   // La imagen del CTA sangra hasta el borde de la tarjeta según su posición:
-  // en columnas toca abajo y su lateral (título y subtítulo van SIEMPRE a
-  // ancho completo por encima del grid; solo si la tarjeta ABRE con la
-  // imagen sangra también por arriba); arriba/abajo toca los laterales.
-  // Esquinas siguiendo el radio de la tarjeta.
+  // en columnas toca TODA la altura (arriba, abajo y su lateral — título y
+  // subtítulo viven dentro de `.block__cta-body`, junto al texto, en la
+  // columna de contenido); arriba/abajo toca los laterales. Esquinas
+  // siguiendo el radio de la tarjeta.
   // Las tarjetas del CTA y de la tarjeta de texto llevan un halo SUTIL del
   // acento, igual por los cuatro bordes, además de su sombra normal.
   &--cta .block__card,
@@ -256,27 +304,13 @@
   }
   &--cta.block--image-right .block__media-layout .block__image-frame {
     @container content (min-width: #{$bp-md}) {
-      margin: 0 (-$space-8) (-$space-8) 0;
-      border-radius: 0 0 $radius-lg 0;
-    }
-  }
-  &--cta.block--image-left .block__media-layout .block__image-frame {
-    @container content (min-width: #{$bp-md}) {
-      margin: 0 0 (-$space-8) (-$space-8);
-      border-radius: 0 0 0 $radius-lg;
-    }
-  }
-  // Sin nada por encima (el media-layout abre la tarjeta): sangra también
-  // por arriba, con el radio completo de su lateral.
-  &--cta.block--image-right .block__card > .block__media-layout:first-child .block__image-frame {
-    @container content (min-width: #{$bp-md}) {
-      margin-top: -$space-8;
+      margin: (-$space-8) (-$space-8) (-$space-8) 0;
       border-radius: 0 $radius-lg $radius-lg 0;
     }
   }
-  &--cta.block--image-left .block__card > .block__media-layout:first-child .block__image-frame {
+  &--cta.block--image-left .block__media-layout .block__image-frame {
     @container content (min-width: #{$bp-md}) {
-      margin-top: -$space-8;
+      margin: (-$space-8) 0 (-$space-8) (-$space-8);
       border-radius: $radius-lg 0 0 $radius-lg;
     }
   }
@@ -343,14 +377,14 @@
     }
   }
 
-  // Cita: sin adorno de borde, en GRANDE ($fs-36, la escala de bloque
-  // subida ~×1.125) y del color de acento.
+  // Cita: sin adorno de borde, en GRANDE ($fs-32, el mismo tamaño que un
+  // título de bloque) y del color de acento.
   &--quote .block__quote {
     margin: 0;
     // Fuente "especial" de la configuración de la web (doc 10); las fuentes
     // decorativas piden un cuerpo mayor.
     font-family: var(--font-special, inherit);
-    font-size: $fs-36;
+    font-size: $fs-32;
     font-style: italic;
     font-weight: $k-fw-semibold;
     color: $accent-500;
@@ -365,7 +399,7 @@
     // El autor no hereda la fuente especial de la cita.
     font-family: var(--font-body, inherit);
     font-style: italic;
-    font-size: $fs-16;
+    font-size: $fs-14;
 
     &--left { text-align: left; }
     &--center { text-align: center; }
@@ -396,11 +430,11 @@
     font-variant-numeric: tabular-nums;
   }
 
-  // Tamaño por nivel, en la escala de bloque (~×1.125): 27 → 25 → 22
-  // (el 3 agrupa "3 o más").
-  .block__index-level-1 { font-size: 27px; }
-  .block__index-level-2 { font-size: 25px; }
-  .block__index-level-3 { font-size: 22px; }
+  // Tamaño por nivel: 24 → 22 (no hay token entre 20 y 24) → 20 (el 3
+  // agrupa "3 o más").
+  .block__index-level-1 { font-size: $fs-24; }
+  .block__index-level-2 { font-size: 22px; }
+  .block__index-level-3 { font-size: $fs-20; }
 
   // Entradas anidadas: sangría POR NIVEL (profundidad real, sin límite) —
   // `--depth` lo pone BlockIndex.vue en línea; el tamaño de letra sí se
@@ -421,7 +455,6 @@
 
 .block__faq-question {
   padding: $space-3 $space-4;
-  font-size: $fs-18;
   font-weight: 600;
   cursor: pointer;
 
@@ -447,7 +480,7 @@
   &--large { padding: $space-4 $space-8; }
   border: 1px solid $accent-500;
   border-radius: $radius-md;
-  font-size: $fs-20;
+  font-size: $fs-18;
   font-weight: 600;
   text-decoration: none;
   cursor: pointer;

package/scss/components/_form-field.scss

@@ -1,5 +1,10 @@
 @use "tokens" as *;
 
+// Chevron de lucide (`chevron-down`) como máscara: el color lo pone
+// `background-color` (mask solo usa el canal alfa del SVG), así que
+// funciona igual en claro/oscuro y en cualquier tema de juego.
+$icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+
 // Estilo compartido de los elementos de formulario (portado de kontuan):
 // BaseInput, BaseTextarea, BaseSelect y TranslatableInput.
 .form-field {
@@ -49,6 +54,9 @@
     resize: vertical;
   }
 
+  // Indicador del select: chevron (lucide `chevron-down`) pintado por
+  // máscara — así toma el color de $text-3 (claro/oscuro y temas de
+  // juego) sin depender de un SVG con el color grabado.
   &__select-wrapper {
     position: relative;
     &::after {
@@ -56,12 +64,18 @@
       position: absolute;
       right: $input-padding-x;
       top: 50%;
+      width: 16px;
+      height: 16px;
       transform: translateY(-50%);
-      width: 0;
-      height: 0;
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-top: 5px solid $text-3;
+      background-color: $text-3;
+      -webkit-mask-image: $icon-chevron-down;
+      mask-image: $icon-chevron-down;
+      -webkit-mask-repeat: no-repeat;
+      mask-repeat: no-repeat;
+      -webkit-mask-position: center;
+      mask-position: center;
+      -webkit-mask-size: contain;
+      mask-size: contain;
       pointer-events: none;
     }
   }

package/scss/components/_modal.scss

@@ -26,6 +26,9 @@
   &--sm { max-width: 380px; }
   &--md { max-width: 560px; }
   &--lg { max-width: 820px; }
+  // Formularios con más columnas (el modal de bloque, EditModal): más ancho
+  // que el resto, pero sin llegar a ocupar toda la pantalla.
+  &--wide { max-width: 940px; }
 
   &__header {
     flex-shrink: 0;
@@ -50,11 +53,16 @@
   }
 
   // El cuerpo es la única zona que scrollea (cabecera y pie quedan fijos).
+  // Contenedor con nombre (container query, no viewport): los formularios de
+  // dentro (SchemaFields/PageBlocks) apilan sus filas de dos columnas según
+  // el ANCHO REAL del modal, no el del viewport.
   &__body {
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
     padding: $space-5;
+    container-type: inline-size;
+    container-name: modal-body;
   }
 
   &__footer {

package/scss/components/_rich-content.scss

@@ -34,12 +34,13 @@
   > :first-child { margin-block-start: 0; }
   > :last-child { margin-block-end: 0; }
 
-  // Escala del wysiwyg: h2 28 · h3 24 · h4 20 · h5 18 · h6 16.
-  h2 { font-size: $fs-28; }
+  // Escala del wysiwyg: h2 32 (el mismo tamaño que un título de bloque) ·
+  // h3 24 · h4 22 (no hay token entre 20 y 24) · h5 20 · h6 18.
+  h2 { font-size: $fs-32; }
   h3 { font-size: $fs-24; }
-  h4 { font-size: $fs-20; }
-  h5 { font-size: $fs-18; }
-  h6 { font-size: $fs-16; }
+  h4 { font-size: 22px; }
+  h5 { font-size: $fs-20; }
+  h6 { font-size: $fs-18; }
 
   ul,
   ol {
@@ -48,6 +49,15 @@
     li + li { margin-block-start: $space-1; }
   }
 
+  // Cita: borde a la izquierda + texto atenuado en cursiva (mismo criterio
+  // que la vista de edición de RichTextInput).
+  blockquote {
+    padding-left: $space-4;
+    border-left: 3px solid $border-strong;
+    color: $text-2;
+    font-style: italic;
+  }
+
   // Iconos del juego insertados en línea por el editor (<img class="rt-icon">).
   img.rt-icon {
     display: inline-block;
@@ -56,4 +66,29 @@
     vertical-align: -0.24em;
     margin: 0 1px;
   }
+
+  // Tabla del wysiwyg: ancho completo, bordes finos y cabecera destacada.
+  // `display: block` + `overflow-x: auto` en la propia tabla (no en un
+  // envoltorio aparte: menos marcado extra) evita que desborde en estrecho
+  // sin perder el ancho completo cuando sí cabe. Las clases de fila que
+  // use cada juego (p. ej. `green-bg`) las estila el JUEGO, no el motor.
+  table {
+    display: block;
+    overflow-x: auto;
+    width: 100%;
+    margin-block: $space-3;
+    border-collapse: collapse;
+
+    td,
+    th {
+      padding: $space-2 $space-3;
+      border: 1px solid $border;
+      text-align: left;
+    }
+
+    th {
+      font-weight: $k-fw-semibold;
+      background: $surface-2;
+    }
+  }
 }

package/scss/components/_rich-text.scss

@@ -69,9 +69,49 @@
     outline: none;
   }
 
-  // Selector de iconos del juego.
+  // Selector de iconos del juego (y el mismo contenedor sirve de anclaje
+  // para el mini-popover del enlace).
   &__picker { position: relative; display: inline-flex; }
 
+  // Mini-popover del enlace: input de URL + botón de aplicar, misma
+  // posición/estética que el panel de iconos.
+  &__link-popover {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    // `width: max-content` (no simplemente `auto`): dentro de un ancla tan
+    // angosta como el propio botón (`.rich-text__picker`), el algoritmo de
+    // shrink-to-fit de un absoluto con solo `left` fijado lo recorta al
+    // ancho del ancla — el input de 220px quedaba aplastado a ~35px.
+    width: max-content;
+    padding: $space-1;
+    background: $surface;
+    border: 1px solid $border;
+    border-radius: $radius-md;
+    box-shadow: $shadow-md;
+  }
+
+  &__link-input {
+    width: 220px;
+    height: 30px;
+    padding: 0 $space-2;
+    border: 1px solid $input-border;
+    border-radius: $radius-sm;
+    background: $input-bg;
+    color: $input-text;
+    font-size: $fs-13;
+
+    &:focus {
+      outline: none;
+      border-color: $input-border-focus;
+      box-shadow: $input-focus-ring;
+    }
+  }
+
   &__icons {
     position: absolute;
     top: calc(100% + 4px);
@@ -118,10 +158,44 @@
 
       > * + * { margin-top: 0.6em; }
       h2 { font-size: $fs-18; font-weight: $k-fw-semibold; }
+      h3 { font-size: $fs-16; font-weight: $k-fw-semibold; }
+      h4, h5 { font-size: $fs-14; font-weight: $k-fw-semibold; }
       ul, ol { padding-left: 1.4em; }
       ul { list-style: disc; }
       ol { list-style: decimal; }
       a { color: $accent-500; text-decoration: underline; }
+      blockquote {
+        padding-left: $space-3;
+        border-left: 3px solid $border-strong;
+        color: $text-2;
+        font-style: italic;
+      }
+
+      // Tabla: visible y editable (bordes finos, cabecera destacada). Sin
+      // resize de columnas (Table.configure resizable:false), así que no
+      // hace falta CSS para la asa.
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        table-layout: fixed;
+
+        td, th {
+          min-width: 1em;
+          padding: $space-1 $space-2;
+          border: 1px solid $border-strong;
+          vertical-align: top;
+        }
+
+        th {
+          background: $surface-2;
+          font-weight: $k-fw-semibold;
+          text-align: left;
+        }
+
+        .selectedCell {
+          background: color-mix(in srgb, $accent-500 12%, transparent);
+        }
+      }
 
       // Iconos insertados: en línea con el texto.
       img.rt-icon {

package/src/blocks/BlockCta.vue

@@ -27,16 +27,24 @@ const layoutStyle = computed(() => {
     ]"
   >
     <div class="block__card">
-      <!-- Título y subtítulo SIEMPRE a ancho completo, encima del grid: el
-           reparto en columnas es solo entre la imagen y el contenido. -->
-      <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
-      <p v-if="settings.subtitle" class="block__subtitle">{{ settings.subtitle }}</p>
+      <!-- En columnas, título y subtítulo viajan a la columna de texto para
+           que la imagen pueda sangrar a TODA la altura de la tarjeta (a
+           todo ancho, en todos los anchos de pantalla: es una decisión de
+           plantilla por settings, no por el ancho del contenedor). -->
+      <template v-if="!inColumns">
+        <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
+        <p v-if="settings.subtitle" class="block__subtitle">{{ settings.subtitle }}</p>
+      </template>
       <div class="block__media-layout" :style="layoutStyle">
         <span v-if="settings.image && inColumns" class="block__image-frame">
           <img class="block__image" :src="String(settings.image)" alt="" />
         </span>
         <img v-else-if="settings.image" class="block__image" :src="String(settings.image)" alt="" />
         <div class="block__cta-body">
+          <template v-if="inColumns">
+            <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
+            <p v-if="settings.subtitle" class="block__subtitle">{{ settings.subtitle }}</p>
+          </template>
           <div v-if="settings.body" class="block__text rich-content" v-html="settings.body" />
           <!-- Alineación propia (button_align; en estrecho el CSS centra
                siempre) y tamaño grande opcional (button_large) -->

package/src/blocks/BlockShell.vue

@@ -19,13 +19,15 @@ const headingAlign = (key: 'title_align' | 'subtitle_align', prefix: string) =>
   return value && value !== 'inherit' ? `block--${prefix}-${value}` : ''
 }
 
+// La alineación va por CLASE (block--align-*, _blocks.scss), no por style en
+// línea: un style inline no se puede pisar desde CSS (bloqueaba el cambio a
+// izquierda del justificado en estrecho, DC-03 ampliado).
 const style = computed<CSSProperties>(() => {
   const background = props.settings.background as string | undefined
   return {
     '--block-bg': background
       ? `color-mix(in srgb, ${background} var(--block-tint, 15%), transparent)`
       : 'transparent',
-    textAlign: ((props.settings.align as string) || 'justify') as CSSProperties['textAlign'],
   }
 })
 </script>
@@ -33,7 +35,12 @@ const style = computed<CSSProperties>(() => {
 <template>
   <section
     class="block"
-    :class="[width, align, headingAlign('title_align', 'title'), headingAlign('subtitle_align', 'subtitle')]"
+    :class="[
+      width,
+      align,
+      headingAlign('title_align', 'title'),
+      headingAlign('subtitle_align', 'subtitle'),
+    ]"
     :style="style"
   >
     <div class="block__inner">

package/src/components/BaseModal.vue

@@ -11,7 +11,7 @@ const props = withDefaults(
   defineProps<{
     modelValue: boolean
     title?: string
-    size?: 'sm' | 'md' | 'lg'
+    size?: 'sm' | 'md' | 'lg' | 'wide'
     closeLabel?: string
   }>(),
   { size: 'md', closeLabel: 'Cerrar' },

package/src/components/EditModal.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import BaseModal from './BaseModal.vue'
 import { Save, X } from '@lucide/vue'
 import BaseButton from './BaseButton.vue'
@@ -11,7 +12,8 @@ const props = withDefaults(
   defineProps<{
     modelValue: boolean
     title: string
-    size?: 'sm' | 'md' | 'lg'
+    /** 'wide' para formularios con más columnas (el modal de bloque). */
+    size?: 'normal' | 'wide'
     loading?: boolean
     submitLabel?: string
     cancelLabel?: string
@@ -20,7 +22,7 @@ const props = withDefaults(
     localeSwitchLabel?: string
   }>(),
   {
-    size: 'md',
+    size: 'normal',
     loading: false,
     submitLabel: 'Guardar',
     cancelLabel: 'Cancelar',
@@ -29,6 +31,11 @@ const props = withDefaults(
   },
 )
 
+// EditModal tiene su propia escala de tamaño (normal/wide, sobre el
+// contenido del FORMULARIO); BaseModal sigue con la suya (sm/md/lg/wide,
+// genérica) — normal se apoya en su 'md' por defecto.
+const modalSize = computed(() => (props.size === 'wide' ? 'wide' : 'md'))
+
 const emit = defineEmits<{ 'update:modelValue': [boolean]; submit: [] }>()
 
 // Locale global del formulario: los campos traducibles del slot (Translatable*
@@ -46,7 +53,7 @@ function close() {
   <BaseModal
     :model-value="modelValue"
     :title="title"
-    :size="size"
+    :size="modalSize"
     @update:model-value="(v) => !loading && emit('update:modelValue', v)"
   >
     <!-- Cabecera propia: título + selector de locale global (si hay campos

package/src/components/RichTextInput.vue

@@ -1,15 +1,37 @@
 <script setup lang="ts">
-import { computed, ref, watch, onBeforeUnmount, onMounted } from 'vue'
+import { computed, ref, watch, onBeforeUnmount, onMounted, nextTick } from 'vue'
 import { useEditor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Image from '@tiptap/extension-image'
+import UnderlineExtension from '@tiptap/extension-underline'
+import LinkExtension from '@tiptap/extension-link'
+import TableExtension from '@tiptap/extension-table'
+import TableRow from '@tiptap/extension-table-row'
+import TableHeader from '@tiptap/extension-table-header'
+import TableCell from '@tiptap/extension-table-cell'
 import {
   Bold,
   Italic,
   Strikethrough,
+  Underline as UnderlineIcon,
   Heading2,
+  Heading3,
+  Heading4,
+  Heading5,
   List,
   ListOrdered,
+  Quote,
+  Indent,
+  Outdent,
+  Link as LinkIcon,
+  Unlink,
+  Table as TableIcon,
+  Rows3,
+  TableRowsSplit,
+  Columns3,
+  TableColumnsSplit,
+  TableProperties,
+  Trash2,
   Undo2,
   Redo2,
   Smile,
@@ -19,7 +41,10 @@ import {
 // Editor de texto enriquecido (WYSIWYG) basado en TipTap (DC-09).
 // v-model = HTML. Agnóstico de i18n. Si se pasan `icons`, muestra un selector
 // para insertar iconos del juego (como en CDL): se insertan como <img.rt-icon>.
-// Incluye un toggle para editar en modo visual o directamente el HTML.
+// Incluye un toggle para editar en modo visual o directamente el HTML (para
+// pegar HTML ya hecho, p. ej. una tabla) y soporte de tablas completo
+// (insertar, filas/columnas, cabecera, borrar). El HTML que sale de aquí NO
+// se sanea en cliente: pasa por `HtmlSanitizer` (core) al guardar.
 export interface RichIcon {
   name: string
   url: string
@@ -30,9 +55,27 @@ export interface RichTextLabels {
   bold: string
   italic: string
   strike: string
-  heading: string
+  underline: string
+  heading2: string
+  heading3: string
+  heading4: string
+  heading5: string
   bulletList: string
   orderedList: string
+  blockquote: string
+  indent: string
+  outdent: string
+  link: string
+  unlink: string
+  linkUrl: string
+  linkApply: string
+  insertTable: string
+  addRow: string
+  removeRow: string
+  addColumn: string
+  removeColumn: string
+  toggleHeaderRow: string
+  deleteTable: string
   undo: string
   redo: string
   insertIcon: string
@@ -43,9 +86,27 @@ const defaultLabels: RichTextLabels = {
   bold: 'Negrita',
   italic: 'Cursiva',
   strike: 'Tachado',
-  heading: 'Título',
+  underline: 'Subrayado',
+  heading2: 'Título 2',
+  heading3: 'Título 3',
+  heading4: 'Título 4',
+  heading5: 'Título 5',
   bulletList: 'Lista',
   orderedList: 'Lista numerada',
+  blockquote: 'Cita',
+  indent: 'Sangrar',
+  outdent: 'Quitar sangría',
+  link: 'Enlace',
+  unlink: 'Quitar enlace',
+  linkUrl: 'URL del enlace',
+  linkApply: 'Aplicar',
+  insertTable: 'Insertar tabla',
+  addRow: 'Añadir fila',
+  removeRow: 'Quitar fila',
+  addColumn: 'Añadir columna',
+  removeColumn: 'Quitar columna',
+  toggleHeaderRow: 'Alternar cabecera',
+  deleteTable: 'Borrar tabla',
   undo: 'Deshacer',
   redo: 'Rehacer',
   insertIcon: 'Insertar icono',
@@ -74,7 +135,23 @@ const editor = useEditor({
   content: props.modelValue,
   editable: !props.disabled,
   extensions: [
-    StarterKit,
+    StarterKit.configure({ heading: { levels: [2, 3, 4, 5] } }),
+    UnderlineExtension,
+    // Enlaces: no se navega al hacer click dentro del editor (openOnClick),
+    // y TODOS llevan target="_blank" + rel="noopener noreferrer" por
+    // defecto (también los mailto: — ahí son inocuos, pero así no hace
+    // falta distinguir el esquema al aplicarlos).
+    LinkExtension.configure({
+      openOnClick: false,
+      autolink: false,
+      HTMLAttributes: { target: '_blank', rel: 'noopener noreferrer' },
+    }),
+    // Tablas: sin resize de columnas (el asa de arrastre metía ruido visual
+    // y no hace falta para el caso de uso del editor).
+    TableExtension.configure({ resizable: false }),
+    TableRow,
+    TableHeader,
+    TableCell,
     // Los iconos son la única imagen que se inserta: en línea y con clase fija.
     Image.configure({ inline: true, HTMLAttributes: { class: 'rt-icon' } }),
   ],
@@ -98,6 +175,34 @@ watch(
   (d) => editor.value?.setEditable(!d),
 )
 
+/** Alterna un nivel de título (o vuelve a párrafo si ya lo era). */
+function toggleHeading(level: 2 | 3 | 4 | 5) {
+  editor.value?.chain().focus().toggleHeading({ level }).run()
+}
+
+/** Sangrar: solo tiene sentido dentro de un item de lista (anida la sublista). */
+function indent() {
+  editor.value?.chain().focus().sinkListItem('listItem').run()
+}
+function canIndent(): boolean {
+  return !!editor.value?.can().sinkListItem('listItem')
+}
+
+/** Quitar sangría: en una lista, la saca un nivel; si no, saca de la cita. */
+function outdent() {
+  const e = editor.value
+  if (!e) return
+  if (e.isActive('listItem')) e.chain().focus().liftListItem('listItem').run()
+  else if (e.isActive('blockquote')) e.chain().focus().lift('blockquote').run()
+}
+function canOutdent(): boolean {
+  const e = editor.value
+  if (!e) return false
+  if (e.isActive('listItem')) return e.can().liftListItem('listItem')
+  if (e.isActive('blockquote')) return e.can().lift('blockquote')
+  return false
+}
+
 const tools = computed(() => [
   {
     key: 'bold',
@@ -120,13 +225,41 @@ const tools = computed(() => [
     run: () => editor.value?.chain().focus().toggleStrike().run(),
     active: () => editor.value?.isActive('strike'),
   },
+  {
+    key: 'underline',
+    icon: UnderlineIcon,
+    title: t.value.underline,
+    run: () => editor.value?.chain().focus().toggleUnderline().run(),
+    active: () => editor.value?.isActive('underline'),
+  },
   {
     key: 'h2',
     icon: Heading2,
-    title: t.value.heading,
-    run: () => editor.value?.chain().focus().toggleHeading({ level: 2 }).run(),
+    title: t.value.heading2,
+    run: () => toggleHeading(2),
     active: () => editor.value?.isActive('heading', { level: 2 }),
   },
+  {
+    key: 'h3',
+    icon: Heading3,
+    title: t.value.heading3,
+    run: () => toggleHeading(3),
+    active: () => editor.value?.isActive('heading', { level: 3 }),
+  },
+  {
+    key: 'h4',
+    icon: Heading4,
+    title: t.value.heading4,
+    run: () => toggleHeading(4),
+    active: () => editor.value?.isActive('heading', { level: 4 }),
+  },
+  {
+    key: 'h5',
+    icon: Heading5,
+    title: t.value.heading5,
+    run: () => toggleHeading(5),
+    active: () => editor.value?.isActive('heading', { level: 5 }),
+  },
   {
     key: 'ul',
     icon: List,
@@ -141,8 +274,61 @@ const tools = computed(() => [
     run: () => editor.value?.chain().focus().toggleOrderedList().run(),
     active: () => editor.value?.isActive('orderedList'),
   },
+  {
+    key: 'blockquote',
+    icon: Quote,
+    title: t.value.blockquote,
+    run: () => editor.value?.chain().focus().toggleBlockquote().run(),
+    active: () => editor.value?.isActive('blockquote'),
+  },
+])
+
+// Controles de tabla contextuales: solo con el cursor DENTRO de una tabla
+// (salvo "insertar", que se deshabilita si ya lo está — no hay tablas
+// anidadas).
+const tableTools = computed(() => [
+  {
+    key: 'addRow',
+    icon: Rows3,
+    title: t.value.addRow,
+    run: () => editor.value?.chain().focus().addRowAfter().run(),
+  },
+  {
+    key: 'removeRow',
+    icon: TableRowsSplit,
+    title: t.value.removeRow,
+    run: () => editor.value?.chain().focus().deleteRow().run(),
+  },
+  {
+    key: 'addColumn',
+    icon: Columns3,
+    title: t.value.addColumn,
+    run: () => editor.value?.chain().focus().addColumnAfter().run(),
+  },
+  {
+    key: 'removeColumn',
+    icon: TableColumnsSplit,
+    title: t.value.removeColumn,
+    run: () => editor.value?.chain().focus().deleteColumn().run(),
+  },
+  {
+    key: 'toggleHeaderRow',
+    icon: TableProperties,
+    title: t.value.toggleHeaderRow,
+    run: () => editor.value?.chain().focus().toggleHeaderRow().run(),
+  },
+  {
+    key: 'deleteTable',
+    icon: Trash2,
+    title: t.value.deleteTable,
+    run: () => editor.value?.chain().focus().deleteTable().run(),
+  },
 ])
 
+function insertTable() {
+  editor.value?.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+}
+
 // --- Selector de iconos ---
 const pickerOpen = ref(false)
 const pickerRef = ref<HTMLElement>()
@@ -151,8 +337,40 @@ function insertIcon(icon: RichIcon) {
   editor.value?.chain().focus().setImage({ src: icon.url, alt: icon.name, title: icon.name }).run()
   pickerOpen.value = false
 }
+
+// --- Enlaces: mini-popover con la URL (mismo patrón que el selector de
+// iconos: botón + panel flotante, cierra con Escape o click fuera) ---
+const linkPopoverOpen = ref(false)
+const linkPickerRef = ref<HTMLElement>()
+const linkInputRef = ref<HTMLInputElement>()
+const linkUrlInput = ref('')
+
+function toggleLinkPopover() {
+  if (linkPopoverOpen.value) {
+    linkPopoverOpen.value = false
+    return
+  }
+  linkUrlInput.value = (editor.value?.getAttributes('link').href as string) ?? ''
+  pickerOpen.value = false
+  linkPopoverOpen.value = true
+  void nextTick(() => linkInputRef.value?.focus())
+}
+
+function applyLink() {
+  const url = linkUrlInput.value.trim()
+  if (url) editor.value?.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+  else editor.value?.chain().focus().extendMarkRange('link').unsetLink().run()
+  linkPopoverOpen.value = false
+}
+
+function removeLink() {
+  editor.value?.chain().focus().extendMarkRange('link').unsetLink().run()
+}
+
 function onClickOutside(e: MouseEvent) {
-  if (pickerRef.value && !pickerRef.value.contains(e.target as Node)) pickerOpen.value = false
+  const target = e.target as Node
+  if (pickerRef.value && !pickerRef.value.contains(target)) pickerOpen.value = false
+  if (linkPickerRef.value && !linkPickerRef.value.contains(target)) linkPopoverOpen.value = false
 }
 onMounted(() => document.addEventListener('click', onClickOutside))
 onBeforeUnmount(() => {
@@ -168,11 +386,13 @@ function toggleSource() {
     // Entrar a modo HTML: cargar el HTML actual.
     sourceHtml.value = editor.value?.isEmpty ? '' : (editor.value?.getHTML() ?? '')
   } else {
-    // Volver a visual: aplicar el HTML editado al editor.
+    // Volver a visual: aplicar el HTML editado al editor (pasará por el
+    // saneador del servidor al guardar; aquí no hace falta sanear).
     editor.value?.commands.setContent(sourceHtml.value || '', false)
   }
   source.value = !source.value
   pickerOpen.value = false
+  linkPopoverOpen.value = false
 }
 
 function onSourceInput(value: string) {
@@ -197,6 +417,93 @@ function onSourceInput(value: string) {
         >
           <component :is="tool.icon" :size="16" />
         </button>
+
+        <button
+          type="button"
+          class="rich-text__tool"
+          :title="t.indent"
+          :disabled="disabled || !canIndent()"
+          @click="indent"
+        >
+          <Indent :size="16" />
+        </button>
+        <button
+          type="button"
+          class="rich-text__tool"
+          :title="t.outdent"
+          :disabled="disabled || !canOutdent()"
+          @click="outdent"
+        >
+          <Outdent :size="16" />
+        </button>
+
+        <span class="rich-text__sep" />
+
+        <!-- Enlace: botón + mini-popover con la URL -->
+        <div ref="linkPickerRef" class="rich-text__picker">
+          <button
+            type="button"
+            class="rich-text__tool"
+            :class="{ 'rich-text__tool--active': editor?.isActive('link') || linkPopoverOpen }"
+            :title="t.link"
+            :disabled="disabled"
+            @click="toggleLinkPopover"
+          >
+            <LinkIcon :size="16" />
+          </button>
+          <div v-if="linkPopoverOpen" class="rich-text__link-popover">
+            <input
+              ref="linkInputRef"
+              v-model="linkUrlInput"
+              type="text"
+              class="rich-text__link-input"
+              :placeholder="t.linkUrl"
+              @keydown.enter.prevent="applyLink"
+              @keydown.escape.prevent="linkPopoverOpen = false"
+            />
+            <button type="button" class="rich-text__tool" :title="t.linkApply" @click="applyLink">
+              <LinkIcon :size="14" />
+            </button>
+          </div>
+        </div>
+        <button
+          v-if="editor?.isActive('link')"
+          type="button"
+          class="rich-text__tool"
+          :title="t.unlink"
+          :disabled="disabled"
+          @click="removeLink"
+        >
+          <Unlink :size="16" />
+        </button>
+
+        <span class="rich-text__sep" />
+
+        <!-- Tabla: insertar siempre visible (deshabilitado dentro de otra
+             tabla); el resto de controles solo con el cursor DENTRO -->
+        <button
+          type="button"
+          class="rich-text__tool"
+          :title="t.insertTable"
+          :disabled="disabled || editor?.isActive('table')"
+          @click="insertTable"
+        >
+          <TableIcon :size="16" />
+        </button>
+        <template v-if="editor?.isActive('table')">
+          <button
+            v-for="tool in tableTools"
+            :key="tool.key"
+            type="button"
+            class="rich-text__tool"
+            :title="tool.title"
+            :disabled="disabled"
+            @click="tool.run()"
+          >
+            <component :is="tool.icon" :size="16" />
+          </button>
+        </template>
+
         <span class="rich-text__sep" />
         <button
           type="button"