@edc-motor/ui 0.4.31 → 4.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.31",
+  "version": "4.0.29",
   "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",

package/scss/components/_blocks.scss

@@ -39,17 +39,14 @@
   &--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í); título y subtítulo calcan la cabecera
-  // clásica de índices y fichas de CDL: título $fs-28 compacto (line-height
-  // 1.1, el h1 de base) y subtítulo atenuado AL TAMAÑO del cuerpo — la
-  // jerarquía la da el color, no otro escalón de tamaño. Vale para TODOS
-  // los bloques (la cabecera ya no sube a 40/28). Los títulos nunca se
-  // justifican.
+  // 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-28; line-height: 1.1; width: 100%; }
+  &__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: $fs-16; white-space: pre-line; width: 100%; }
+  &__subtitle { margin: 0; color: $text-2; font-size: $fs-24; white-space: pre-line; width: 100%; }
   &__text { color: $text-1; font-size: $fs-16; }
 
   // Alineación del bloque (campo común `align`): por CLASE (BlockShell ya
@@ -121,6 +118,9 @@
     .edc-button { justify-self: start; text-decoration: none; }
   }
 
+  &--header .block__title { font-size: $fs-40; }
+  &--header .block__subtitle { font-size: $fs-28; }
+
   &__media-layout { display: grid; gap: $space-4; }
   &__image {
     max-width: 100%;

package/scss/components/_image-upload.scss

@@ -17,12 +17,7 @@
   &__zone {
     position: relative;
     display: flex;
-    // Centrado EN EL CAMPO: horizontal siempre, y vertical cuando el
-    // contenedor le da alto extra (p. ej. el grupo a dos columnas del form
-    // de bloque) — los márgenes auto solo absorben espacio si lo hay.
-    align-self: center;
-    margin-block: auto;
-    flex-shrink: 0;
+    align-self: flex-start;
     align-items: center;
     justify-content: center;
     width: 160px;
@@ -86,10 +81,8 @@
   &__icon { width: 32px; height: 32px; color: $text-3; }
   &__text { font-size: $fs-12; color: $text-2; }
 
-  // Nombre del fichero (pendiente o guardado) bajo la miniatura, centrado
-  // con ella.
+  // Nombre del fichero (pendiente o guardado) bajo la miniatura.
   &__name {
-    align-self: center;
     max-width: 160px;
     overflow: hidden;
     font-size: $fs-12;

package/scss/components/_rich-content.scss

@@ -34,14 +34,13 @@
   > :first-child { margin-block-start: 0; }
   > :last-child { margin-block-end: 0; }
 
-  // Escala del wysiwyg, POR DEBAJO del título de bloque ($fs-28 desde que
-  // los bloques calcan la cabecera clásica): h2 24 · h3 20 · h4 18 · h5 16
-  // (como el cuerpo, se distingue por el peso) · h6 14.
-  h2 { font-size: $fs-24; }
-  h3 { font-size: $fs-20; }
-  h4 { font-size: $fs-18; }
-  h5 { font-size: $fs-16; }
-  h6 { font-size: $fs-14; }
+  // 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: 22px; }
+  h5 { font-size: $fs-20; }
+  h6 { font-size: $fs-18; }
 
   ul,
   ol {

package/scss/components/_rich-text.scss

@@ -69,21 +69,34 @@
     outline: none;
   }
 
-  // Franjas del editor (URL del enlace, iconos): EN FLUJO entre la toolbar y
-  // el contenido — nada flota, así que dentro de un modal quedan siempre a la
-  // vista enteras. Mismo fondo que la toolbar, de la que son una extensión.
-  &__link-bar {
+  // 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;
-    border-bottom: 1px solid $border;
-    background: $surface-2;
+    background: $surface;
+    border: 1px solid $border;
+    border-radius: $radius-md;
+    box-shadow: $shadow-md;
   }
 
   &__link-input {
-    flex: 1;
-    min-width: 0;
+    width: 220px;
     height: 30px;
     padding: 0 $space-2;
     border: 1px solid $input-border;
@@ -100,16 +113,21 @@
   }
 
   &__icons {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    z-index: 100;
     display: grid;
-    // A todo el ancho del editor: caben muchos más iconos por fila que en el
-    // popover de 5 columnas de antes; si aun así no entran, scroll propio.
-    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
+    grid-template-columns: repeat(5, 1fr);
     gap: 2px;
+    max-width: 220px;
     max-height: 200px;
     overflow-y: auto;
     padding: $space-1;
-    border-bottom: 1px solid $border;
-    background: $surface-2;
+    background: $surface;
+    border: 1px solid $border;
+    border-radius: $radius-md;
+    box-shadow: $shadow-md;
   }
 
   &__icon {

package/src/components/RichTextInput.vue

@@ -3,6 +3,7 @@ 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 { useDropdownPanel } from '../composables/useDropdownPanel'
 import UnderlineExtension from '@tiptap/extension-underline'
 import LinkExtension from '@tiptap/extension-link'
 import TableExtension from '@tiptap/extension-table'
@@ -330,23 +331,25 @@ function insertTable() {
 }
 
 // --- Selector de iconos ---
-// Los paneles del editor (iconos y enlace) NO flotan: son franjas EN FLUJO
-// entre la toolbar y el contenido — dentro de un modal quedan siempre a la
-// vista (nada que recortar ni que anclar por coordenadas).
 const pickerOpen = ref(false)
 const pickerRef = ref<HTMLElement | null>(null)
 const iconsPanelRef = ref<HTMLElement | null>(null)
+// Top layer (popover): dentro de un modal, el overflow del cuerpo recortaba
+// el panel y no se podían elegir todos los iconos. Ancho propio, sin igualar
+// al trigger.
+useDropdownPanel(pickerRef, iconsPanelRef, pickerOpen, { matchWidth: false })
 
 function insertIcon(icon: RichIcon) {
   editor.value?.chain().focus().setImage({ src: icon.url, alt: icon.name, title: icon.name }).run()
   pickerOpen.value = false
 }
 
-// --- Enlaces: franja con la URL (mismo patrón que el selector de iconos:
-// botón + franja bajo la toolbar, cierra con Escape o click fuera) ---
+// --- 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 | null>(null)
 const linkPanelRef = ref<HTMLElement | null>(null)
+useDropdownPanel(linkPickerRef, linkPanelRef, linkPopoverOpen, { matchWidth: false })
 const linkInputRef = ref<HTMLInputElement>()
 const linkUrlInput = ref('')
 
@@ -374,12 +377,8 @@ function removeLink() {
 
 function onClickOutside(e: MouseEvent) {
   const target = e.target as Node
-  // Botón y franja son elementos hermanos: un click en cualquiera de los dos
-  // mantiene el panel abierto (insertar icono / escribir la URL).
-  if (!pickerRef.value?.contains(target) && !iconsPanelRef.value?.contains(target))
-    pickerOpen.value = false
-  if (!linkPickerRef.value?.contains(target) && !linkPanelRef.value?.contains(target))
-    linkPopoverOpen.value = false
+  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(() => {
@@ -448,18 +447,38 @@ function onSourceInput(value: string) {
 
         <span class="rich-text__sep" />
 
-        <!-- Enlace: botón que abre la franja de la URL bajo la toolbar -->
-        <button
-          ref="linkPickerRef"
-          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>
+        <!-- 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"
+            ref="linkPanelRef"
+            class="rich-text__link-popover"
+            popover="manual"
+          >
+            <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"
@@ -518,20 +537,33 @@ function onSourceInput(value: string) {
           <Redo2 :size="16" />
         </button>
 
-        <!-- Selector de iconos del juego: abre la franja bajo la toolbar -->
+        <!-- Selector de iconos del juego -->
         <template v-if="icons.length">
           <span class="rich-text__sep" />
-          <button
-            ref="pickerRef"
-            type="button"
-            class="rich-text__tool"
-            :class="{ 'rich-text__tool--active': pickerOpen }"
-            :title="t.insertIcon"
-            :disabled="disabled"
-            @click="pickerOpen = !pickerOpen"
-          >
-            <Smile :size="16" />
-          </button>
+          <div ref="pickerRef" class="rich-text__picker">
+            <button
+              type="button"
+              class="rich-text__tool"
+              :class="{ 'rich-text__tool--active': pickerOpen }"
+              :title="t.insertIcon"
+              :disabled="disabled"
+              @click="pickerOpen = !pickerOpen"
+            >
+              <Smile :size="16" />
+            </button>
+            <div v-if="pickerOpen" ref="iconsPanelRef" class="rich-text__icons" popover="manual">
+              <button
+                v-for="icon in icons"
+                :key="icon.url"
+                type="button"
+                class="rich-text__icon"
+                :title="icon.name"
+                @click="insertIcon(icon)"
+              >
+                <img :src="icon.url" :alt="icon.name" />
+              </button>
+            </div>
+          </div>
         </template>
       </template>
 
@@ -548,38 +580,6 @@ function onSourceInput(value: string) {
       </button>
     </div>
 
-    <!-- Franja del enlace: EN FLUJO bajo la toolbar (dentro de un modal queda
-         siempre a la vista; los popovers flotantes se recortaban o quedaban
-         descolgados del editor) -->
-    <div v-if="linkPopoverOpen && !source" ref="linkPanelRef" class="rich-text__link-bar">
-      <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>
-
-    <!-- Franja de iconos: misma idea, a todo el ancho del editor -->
-    <div v-if="pickerOpen && !source" ref="iconsPanelRef" class="rich-text__icons">
-      <button
-        v-for="icon in icons"
-        :key="icon.url"
-        type="button"
-        class="rich-text__icon"
-        :title="icon.name"
-        @click="insertIcon(icon)"
-      >
-        <img :src="icon.url" :alt="icon.name" />
-      </button>
-    </div>
-
     <textarea
       v-if="source"
       class="rich-text__source"

package/src/composables/useDropdownPanel.ts

@@ -20,7 +20,14 @@ export function useDropdownPanel(
   anchor: Ref<HTMLElement | null>,
   panel: Ref<HTMLElement | null>,
   open: Ref<boolean>,
+  options: {
+    /** Igualar el ancho del panel al del trigger (los select). Los popovers
+     *  con ancho propio (selector de iconos, popover del enlace) lo apagan:
+     *  conservan su ancho y solo se CLAMPEA su left para no salirse. */
+    matchWidth?: boolean
+  } = {},
 ) {
+  const { matchWidth = true } = options
   const GAP = 4 // $space-1: aire entre trigger y panel, como el CSS absolute
 
   /** Ancla el panel bajo el trigger (o encima, si abajo no cabe y arriba sí). */
@@ -29,8 +36,11 @@ export function useDropdownPanel(
     const p = panel.value
     if (!a || !p) return
     const r = a.getBoundingClientRect()
-    p.style.width = `${r.width}px`
-    p.style.left = `${r.left}px`
+    if (matchWidth) p.style.width = `${r.width}px`
+    const left = matchWidth
+      ? r.left
+      : Math.max(GAP, Math.min(r.left, window.innerWidth - p.offsetWidth - GAP))
+    p.style.left = `${left}px`
     const height = p.offsetHeight
     const below = window.innerHeight - r.bottom - GAP
     const openUp = height > below && r.top > window.innerHeight - r.bottom