@edc-motor/ui 0.5.6 → 0.5.8

package/package.json

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

@@ -377,18 +377,25 @@
     }
   }
 
-  // Cita: sin adorno de borde, en GRANDE ($fs-32, el mismo tamaño que un
-  // título de bloque) y del color de acento.
+  // Cita: sin adorno de borde, en grande ($fs-28, el mismo cuerpo que un
+  // título de bloque; antes $fs-32 — un ~10% menos) y del color de acento,
+  // con interlineado propio (1.25: las citas de varias líneas respiraban
+  // de más con el line-height del cuerpo). En estrecho baja a $fs-24.
   &--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-32;
+    font-size: $fs-28;
+    line-height: 1.25;
     font-style: italic;
     font-weight: $k-fw-semibold;
     color: $accent-500;
 
+    @container content (max-width: #{$bp-sm - 1px}) {
+      font-size: $fs-24;
+    }
+
     // La cita llega como richtext y .rich-content fija su propio cuerpo
     // ($fs-16): aquí debe heredar el tamaño grande de la cita.
     .rich-content { font-size: inherit; }

package/scss/components/_form-row.scss

@@ -0,0 +1,125 @@
+@use "tokens" as *;
+
+// =========================================================
+// Sistema COMPARTIDO de filas y grupos de formulario
+// =========================================================
+// Un único lenguaje para TODOS los formularios modales del admin:
+// sustituye a los layouts ad hoc que había repartidos (el `__common-row` de
+// PageBlocks y las filas `--pair`/`--row`/`--image-group` de SchemaFields).
+//
+// PROHIBIDO auto-fit/auto-fill en todo el sistema: columnas FIJAS + cortes
+// EXPLÍCITOS de container query. Con auto-fit las pistas se re-resolvían
+// contra el ancho de `modal-body` (que depende de si hay scrollbar),
+// quedaban pistas fantasma a 0px y los `1fr` resultaban fraccionales
+// desiguales: al repintar con hover a DPI 125 %/150 % los campos vecinos
+// temblaban («baile» en modales largos). Con pistas fijas el layout es
+// idéntico en cada repintado.
+//
+// El contenedor `modal-body` lo define _modal.scss sobre el cuerpo del
+// modal: el patrón funciona en CUALQUIER modal y los cortes miden el ancho
+// REAL del formulario, no el del viewport.
+.form-row {
+  display: grid;
+  // Base: dos columnas fijas iguales.
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: $space-3;
+  align-items: start;
+
+  > * { min-width: 0; }
+
+  // Un checkbox como celda: flex para que se comporte como bloque de su
+  // celda junto a sus compañeros de fila.
+  > .checkbox { display: flex; }
+
+  // Tres columnas fijas iguales, para filas de 3 campos pequeños.
+  &--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+
+  // Columna izquierda MUCHO más ancha que la derecha (2:1): un textarea o
+  // wysiwyg a la izquierda con su campo pequeño natural al lado (p. ej. el
+  // select de alineación). 2fr y no 2.5fr: en el modal `md` (~520px útiles)
+  // 2:1 deja ~170px a la derecha — lo justo para un select con su etiqueta
+  // («Alineación del subtítulo»…) sin cortarse; con 2.5fr quedaría corto.
+  &--wide-left { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
+
+  // Fila de imagen (especial): la celda izquierda (el input de imagen, con
+  // su etiqueta) es UNA sola celda que llena TODO el alto de la fila; la
+  // derecha es una pila de filas (.form-row__stack) con los ajustes
+  // (posición, escalado, reparto de columnas…). El cuadro de arrastre NO se
+  // estira con la celda: conserva su tamaño natural y se centra en el
+  // espacio (margin-block auto en _image-upload.scss).
+  &--media {
+    align-items: stretch;
+
+    > :first-child {
+      display: flex;
+      flex-direction: column;
+      gap: $space-1;
+      min-width: 0;
+      min-height: 0;
+
+      // El input crece para llenar la celda (envoltorios de etiqueta
+      // incluidos: .form-field de TranslatableImage, etc.).
+      .image-upload {
+        flex: 1;
+        min-height: 0;
+      }
+    }
+  }
+
+  // Pila de filas apiladas dentro de una celda (la columna derecha de
+  // --media): mismo ritmo que la propia fila.
+  &__stack {
+    display: grid;
+    gap: $space-3;
+    align-content: start;
+  }
+
+  // Cortes explícitos (en vez del auto-fit):
+  // — la fila de 3 apila ANTES que el resto: por debajo de ~564px de
+  //   modal-body (3 campos de 180px mínimos cómodos + 2 gaps) ya no caben
+  //   tres columnas. Pasa DIRECTA a una columna, sin estadio intermedio
+  //   2+1 que dejaría una celda huérfana descolgada.
+  @container modal-body (max-width: 563px) {
+    &--3 { grid-template-columns: minmax(0, 1fr); }
+  }
+
+  // — TODAS las variantes apilan a una columna en el modal angosto.
+  @container modal-body (max-width: #{$bp-sm - 1px}) {
+    &,
+    &--3,
+    &--wide-left,
+    &--media {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+}
+
+// Separador de grupos de campos relacionados dentro de un formulario:
+//   <fieldset class="form-fieldset"><legend>…</legend>…</fieldset>
+// Raya superior dashed (el mismo lenguaje que tenía la divisoria de la
+// sección General del form de bloque); el navegador corta la raya donde
+// asienta el legend (comportamiento nativo de fieldset+legend).
+.form-fieldset {
+  margin: 0;
+  padding: $space-3 0 0; // aire entre la raya y el primer campo
+  border: 0;
+  border-top: 1px dashed $border;
+  min-width: 0; // los fieldset traen min-width min-content; aquí estorba
+  display: grid;
+  gap: $space-4; // el mismo ritmo que .edit-modal__body
+
+  // Legend discreto asentado sobre la raya: pegado al borde izquierdo y
+  // con un poco de aire antes de que sigan los guiones.
+  > legend {
+    padding-inline: 0 $space-2;
+    font-size: $fs-13;
+    color: $text-2;
+  }
+
+  // El PRIMER grupo del formulario no lleva raya superior (el formulario
+  // empieza directamente con él; su legend hace de título).
+  &:first-child {
+    border-top: 0;
+    padding-top: 0;
+  }
+}

package/scss/components/_index.scss

@@ -3,6 +3,7 @@
 @use "icon-button";
 @use "motor-badge";
 @use "form-field";
+@use "form-row";
 @use "base-select";
 @use "base-pagination";
 @use "search-select";

package/scss/components/_page-background.scss

@@ -6,11 +6,16 @@
 // evita que compita con el contenido.
 .page-background {
   position: fixed;
-  top: 0;
+  // El TOP de la imagen queda justo debajo del header de la página: el
+  // LAYOUT (cascarón) define --page-background-top con la altura real de su
+  // site-header (si es estable por CSS, en scss; si no, medida con JS).
+  // Sin definirla vale 0px: comportamiento de siempre (toda la ventana).
+  top: var(--page-background-top, 0px);
   left: 0;
   width: 100%;
-  height: 100vh; // fallback
-  height: 100lvh; // altura SIN la barra del navegador móvil
+  height: calc(100vh - var(--page-background-top, 0px)); // fallback
+  // altura SIN la barra del navegador móvil
+  height: calc(100lvh - var(--page-background-top, 0px));
   background-size: cover;
   background-position: top;
   background-repeat: no-repeat;

package/scss/components/_palette-color-picker.scss

@@ -52,6 +52,21 @@
 
     &--selected { box-shadow: 0 0 0 2px $surface, 0 0 0 4px var(--swatch-color); }
 
+    // Preset DINÁMICO del tema (token:* → var(--token), resuelto con el
+    // tema ACTUAL): borde siempre visible (su color puede confundirse con
+    // la superficie del formulario) y check en color de texto del tema (el
+    // blanco fijo desaparecía sobre las superficies claras). El anillo de
+    // selección en color de texto, como el custom: con el swatch del color
+    // del fondo, el anillo del propio color no se veía.
+    &--dynamic {
+      border-color: $border-strong;
+      color: $text-1;
+    }
+
+    &--dynamic#{&}--selected {
+      box-shadow: 0 0 0 2px $surface, 0 0 0 4px $text-1;
+    }
+
     &--custom { overflow: hidden; }
 
     &--custom-idle {

package/scss/components/_tabs.scss

@@ -29,10 +29,11 @@
     min-width: 0;
     justify-content: center;
 
-    // Estrecho: las tabs con icono se apilan (icono + etiqueta pequeña)
+    // Estrecho: las tabs con icono se quedan SOLO con el icono — el texto
+    // desaparece (la etiqueta, visually hidden más abajo, sigue en el DOM
+    // accesible y el botón lleva title; antes se apilaban icono + etiqueta
+    // pequeña).
     &--has-icon {
-      flex-direction: column;
-      gap: 2px;
       padding: $space-1;
     }
 
@@ -42,7 +43,6 @@
       padding: $space-2;
 
       &--has-icon {
-        flex-direction: row;
         gap: $space-1;
         padding: $space-2;
       }
@@ -78,17 +78,24 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 
+    // En estrecho, la etiqueta de una tab CON icono desaparece VISUALMENTE
+    // (patrón visually-hidden, no display:none: sigue en el árbol de
+    // accesibilidad y da nombre al botón; el title del botón cubre el
+    // hover). De $bp-sm para arriba vuelve al flujo, en línea con el icono.
     .tabs__tab--has-icon & {
-      font-size: 10px;
-      line-height: 1;
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      clip-path: inset(50%);
 
       @container content (min-width: #{$bp-sm}) {
-        font-size: $fs-12;
-        line-height: inherit;
-      }
-
-      @container content (min-width: #{$bp-md}) {
-        font-size: $fs-14;
+        position: static;
+        width: auto;
+        height: auto;
+        margin: 0;
+        clip-path: none;
       }
     }
   }

package/src/blocks/BlockShell.vue

@@ -19,6 +19,17 @@ const headingAlign = (key: 'title_align' | 'subtitle_align', prefix: string) =>
   return value && value !== 'inherit' ? `block--${prefix}-${value}` : ''
 }
 
+// El color de fondo puede ser un hex fijo o un preset DINÁMICO del tema
+// serializado como `token:<nombre>` (p. ej. token:surface): se resuelve a
+// su custom property (var(--surface)) — color-mix admite vars — y así el
+// tinte sigue al tema claro/oscuro. El nombre se sanea a [a-z0-9-] (el
+// value viene del admin, pero un token roto no debe inyectar CSS).
+const TOKEN_PREFIX = 'token:'
+function resolveColor(value: string): string {
+  if (!value.startsWith(TOKEN_PREFIX)) return value
+  return `var(--${value.slice(TOKEN_PREFIX.length).replace(/[^a-z0-9-]/gi, '')})`
+}
+
 // 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).
@@ -26,7 +37,7 @@ 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)`
+      ? `color-mix(in srgb, ${resolveColor(background)} var(--block-tint, 15%), transparent)`
       : 'transparent',
   }
 })

package/src/blocks/PageBackground.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-// Imagen de fondo de la página (patrón CDL): capa FIJA a toda la ventana,
-// detrás del contenido, atenuada según el tema (--page-bg-opacity) y con un
-// desaturado suave para que el texto siga siendo legible. Decorativa.
+// Imagen de fondo de la página (patrón CDL): capa FIJA detrás del
+// contenido — desde justo debajo del header (--page-background-top, la
+// define el layout del cascarón; 0 si no existe) hasta abajo —, atenuada
+// según el tema (--page-bg-opacity) y con un desaturado suave para que el
+// texto siga siendo legible. Decorativa.
 defineProps<{ image?: string | null }>()
 </script>
 

package/src/components/BaseTabs.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
 
+// Una tab CON icono lleva además title con su etiqueta: en estrecho el
+// texto desaparece y queda solo el icono (la etiqueta sigue en el DOM
+// accesible, visually hidden — ver _tabs.scss).
 interface Tab {
   key: string
   label: string
@@ -20,6 +23,7 @@ defineEmits<{ 'update:modelValue': [string] }>()
       type="button"
       class="tabs__tab"
       :class="{ 'tabs__tab--active': modelValue === tab.key, 'tabs__tab--has-icon': !!tab.icon }"
+      :title="tab.icon ? tab.label : undefined"
       @click="$emit('update:modelValue', tab.key)"
     >
       <component :is="tab.icon" v-if="tab.icon" class="tabs__icon" :size="16" />

package/src/components/PaletteColorPicker.vue

@@ -2,16 +2,29 @@
 import { computed, ref, watch } from 'vue'
 import { Check, Pipette } from '@lucide/vue'
 
+/** Preset DINÁMICO del tema: value `token:<nombre>` (p. ej. token:surface),
+ *  que se resuelve a la custom property `var(--<nombre>)` del tema ACTIVO
+ *  (los tokens del tema son CSS vars también en el admin). */
+export interface ColorPreset {
+  value: string
+  label: string
+}
+
 // Selector de color (portado/adaptado de kontuan). A diferencia de kontuan
 // (que guarda la clave de la paleta), aquí emite el HEX directamente, para
-// campos de color guardados como cadena hexadecimal.
+// campos de color guardados como cadena hexadecimal. Además de la paleta
+// fija puede ofrecer presets DINÁMICOS (`presets`, valores token:* — el
+// fondo de bloque del CRM los usa): se pintan resueltos con el tema actual,
+// con title descriptivo, y se seleccionan/deseleccionan igual que un hex.
 const props = withDefaults(
   defineProps<{
     modelValue: string | null
     label?: string
     allowCustom?: boolean
+    /** Presets dinámicos del tema, delante de la paleta (vacío = como siempre). */
+    presets?: ColorPreset[]
   }>(),
-  { allowCustom: true },
+  { allowCustom: true, presets: () => [] },
 )
 
 const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
@@ -31,15 +44,32 @@ const PALETTE = [
   { name: 'Gris', hex: '#64748B' },
 ]
 
+const TOKEN_PREFIX = 'token:'
+
+/** CSS del swatch de un preset: token:x => var(--x); un hex pasa tal cual. */
+function swatchColor(value: string): string {
+  if (!value.startsWith(TOKEN_PREFIX)) return value
+  return `var(--${value.slice(TOKEN_PREFIX.length).replace(/[^a-z0-9-]/gi, '')})`
+}
+
 const norm = (v: string | null) => (v ?? '').toLowerCase()
-const isPreset = computed(() => PALETTE.some((c) => norm(c.hex) === norm(props.modelValue)))
-const isCustom = computed(() => !!props.modelValue && !isPreset.value)
+const isPreset = computed(
+  () =>
+    PALETTE.some((c) => norm(c.hex) === norm(props.modelValue)) ||
+    props.presets.some((p) => norm(p.value) === norm(props.modelValue)),
+)
+// Un token desconocido tampoco es "custom": el input color solo entiende hex.
+const isCustom = computed(
+  () => !!props.modelValue && !isPreset.value && !props.modelValue.startsWith(TOKEN_PREFIX),
+)
 
 const customHex = ref(isCustom.value ? (props.modelValue as string) : '#FF7A00')
 watch(
   () => props.modelValue,
   (v) => {
-    if (v && !PALETTE.some((c) => norm(c.hex) === norm(v))) customHex.value = v
+    if (v && !v.startsWith(TOKEN_PREFIX) && !PALETTE.some((c) => norm(c.hex) === norm(v))) {
+      customHex.value = v
+    }
   },
 )
 
@@ -54,6 +84,26 @@ function onCustomInput(event: Event) {
   <div class="palette-color-picker">
     <label v-if="label" class="palette-color-picker__label">{{ label }}</label>
     <div class="palette-color-picker__grid">
+      <!-- Presets dinámicos del tema (token:*), resueltos con el tema actual -->
+      <button
+        v-for="preset in presets"
+        :key="preset.value"
+        type="button"
+        class="palette-color-picker__swatch palette-color-picker__swatch--dynamic"
+        :class="{
+          'palette-color-picker__swatch--selected': norm(modelValue) === norm(preset.value),
+        }"
+        :style="{ '--swatch-color': swatchColor(preset.value) }"
+        :title="preset.label"
+        @click="emit('update:modelValue', preset.value)"
+      >
+        <Check
+          v-if="norm(modelValue) === norm(preset.value)"
+          class="palette-color-picker__swatch-check"
+          :size="14"
+        />
+      </button>
+
       <button
         v-for="opt in PALETTE"
         :key="opt.hex"

package/src/index.ts

@@ -12,7 +12,10 @@ export { default as BaseSelect, type SelectOption } from './components/BaseSelec
 export { default as SearchSelect, type SearchSelectOption } from './components/SearchSelect.vue'
 export { default as BaseCheckbox } from './components/BaseCheckbox.vue'
 export { default as NumericInput } from './components/NumericInput.vue'
-export { default as PaletteColorPicker } from './components/PaletteColorPicker.vue'
+export {
+  default as PaletteColorPicker,
+  type ColorPreset,
+} from './components/PaletteColorPicker.vue'
 export { default as TranslatableInput } from './components/TranslatableInput.vue'
 export { default as TranslatableImage } from './components/TranslatableImage.vue'
 // Locale global de un formulario: EditModal lo provee solo (selector compacto