@edc-motor/ui 0.2.0

package/src/blocks/BlockIndex.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import BlockShell from './BlockShell.vue'
+
+// Índice automático: enlaces de ancla a los bloques posteriores de la página.
+defineProps<{
+  settings: Record<string, unknown>
+  data: { items?: { id: number; label: string }[] }
+}>()
+</script>
+
+<template>
+  <BlockShell :settings="settings" class="block--index">
+    <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
+    <component :is="settings.numbered ? 'ol' : 'ul'" class="block__index">
+      <li v-for="item in data.items ?? []" :key="item.id">
+        <a :href="`#block-${item.id}`">{{ item.label }}</a>
+      </li>
+    </component>
+  </BlockShell>
+</template>

package/src/blocks/BlockQuote.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import BlockShell from './BlockShell.vue'
+
+defineProps<{ settings: Record<string, unknown>; data?: Record<string, unknown> }>()
+</script>
+
+<!-- eslint-disable vue/no-v-html -- HTML saneado en servidor (DC-09) -->
+<template>
+  <BlockShell :settings="settings" class="block--quote">
+    <blockquote class="block__quote">
+      <img v-if="settings.image" class="block__avatar" :src="String(settings.image)" alt="" />
+      <div class="rich-content" v-html="settings.quote" />
+      <footer v-if="settings.author" class="block__author">— {{ settings.author }}</footer>
+    </blockquote>
+  </BlockShell>
+</template>

package/src/blocks/BlockShell.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+
+// Envoltorio común de todos los bloques públicos: aplica los campos comunes
+// (align, width, background) que el motor añade a cada tipo. El color de
+// fondo NO se aplica opaco: es un tinte semitransparente (--block-tint,
+// distinto por tema, patrón CDL) para que la imagen de fondo de la página se
+// vea a través. La anchura del CONTENIDO (full/wide/narrow) va por clase.
+const props = defineProps<{ settings: Record<string, unknown> }>()
+
+const width = computed(() => `block--w-${(props.settings.width as string) || 'wide'}`)
+
+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) || 'left') as CSSProperties['textAlign'],
+  }
+})
+</script>
+
+<template>
+  <section class="block" :class="width" :style="style">
+    <div class="block__inner">
+      <slot />
+    </div>
+  </section>
+</template>

package/src/blocks/BlockText.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import BlockShell from './BlockShell.vue'
+
+defineProps<{ settings: Record<string, unknown>; data?: Record<string, unknown> }>()
+</script>
+
+<!-- eslint-disable vue/no-v-html -- HTML saneado en servidor (DC-09) -->
+<template>
+  <BlockShell
+    :settings="settings"
+    class="block--text"
+    :class="settings.image ? `block--image-${settings.image_position || 'top'}` : ''"
+  >
+    <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
+    <div class="block__media-layout">
+      <img v-if="settings.image" class="block__image" :src="String(settings.image)" alt="" />
+      <div class="block__text rich-content" v-html="settings.body" />
+    </div>
+  </BlockShell>
+</template>

package/src/blocks/BlockTextCard.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import BlockShell from './BlockShell.vue'
+
+defineProps<{ settings: Record<string, unknown>; data?: Record<string, unknown> }>()
+</script>
+
+<!-- eslint-disable vue/no-v-html -- HTML saneado en servidor (DC-09) -->
+<template>
+  <BlockShell
+    :settings="settings"
+    class="block--text-card"
+    :class="settings.image ? `block--image-${settings.image_position || 'top'}` : ''"
+  >
+    <div class="block__card">
+      <span v-if="settings.label" class="block__label">{{ settings.label }}</span>
+      <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
+      <div class="block__media-layout">
+        <img v-if="settings.image" class="block__image" :src="String(settings.image)" alt="" />
+        <div class="block__text rich-content" v-html="settings.body" />
+      </div>
+    </div>
+  </BlockShell>
+</template>

package/src/blocks/PageBackground.vue

@@ -0,0 +1,15 @@
+<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.
+defineProps<{ image?: string | null }>()
+</script>
+
+<template>
+  <div
+    v-if="image"
+    class="page-background"
+    :style="{ backgroundImage: `url('${image}')` }"
+    aria-hidden="true"
+  />
+</template>

package/src/blocks/index.ts

@@ -0,0 +1,25 @@
+// Componentes de render de los bloques de PRESENTACIÓN del motor (doc 03).
+// La app del juego los mezcla con los suyos en su blockRegistry.
+import type { Component } from 'vue'
+import BlockCta from './BlockCta.vue'
+import BlockFaq from './BlockFaq.vue'
+import BlockHeader from './BlockHeader.vue'
+import BlockIndex from './BlockIndex.vue'
+import BlockQuote from './BlockQuote.vue'
+import BlockText from './BlockText.vue'
+import BlockTextCard from './BlockTextCard.vue'
+
+export { BlockCta, BlockFaq, BlockHeader, BlockIndex, BlockQuote, BlockText, BlockTextCard }
+export { default as BlockShell } from './BlockShell.vue'
+export { default as PageBackground } from './PageBackground.vue'
+
+/** Clave del BlockType => componente (los cinco de presentación). */
+export const motorBlockComponents: Record<string, Component> = {
+  header: BlockHeader,
+  text: BlockText,
+  'text-card': BlockTextCard,
+  quote: BlockQuote,
+  index: BlockIndex,
+  cta: BlockCta,
+  faq: BlockFaq,
+}

package/src/components/AppBreadcrumbs.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, RouterLink, type RouteLocationRaw } from 'vue-router'
+import { ChevronRight } from '@lucide/vue'
+
+// Migas de pan. Adaptado de kontuan sin vue-i18n: cada ruta declara en su
+// `meta.breadcrumbs` un array de { label, to? }. Se antepone una miga "home".
+export interface Crumb {
+  label: string
+  to?: RouteLocationRaw
+}
+
+const props = withDefaults(
+  defineProps<{
+    home?: Crumb | null
+    /**
+     * Migas ya resueltas/traducidas. Si se pasan, mandan sobre
+     * `route.meta.breadcrumbs` (útil para i18n desde la app).
+     */
+    crumbs?: Crumb[] | null
+  }>(),
+  { home: () => ({ label: 'Inicio', to: { name: 'dashboard' } }), crumbs: null },
+)
+
+const route = useRoute()
+
+const items = computed<Crumb[]>(() => {
+  const source = props.crumbs ?? (route.meta.breadcrumbs as Crumb[] | undefined) ?? []
+  if (!source.length) return []
+  const head = props.home ? [props.home] : []
+  // La última miga nunca es navegable (es la página actual).
+  return [...head, ...source].map((c, i, arr) => (i === arr.length - 1 ? { label: c.label } : c))
+})
+</script>
+
+<template>
+  <nav v-if="items.length" class="breadcrumbs" aria-label="Breadcrumbs">
+    <template v-for="(item, i) in items" :key="i">
+      <ChevronRight v-if="i > 0" class="breadcrumb-separator" :size="14" />
+      <RouterLink v-if="item.to" :to="item.to" class="breadcrumb-link">{{ item.label }}</RouterLink>
+      <span v-else class="breadcrumb-current">{{ item.label }}</span>
+    </template>
+  </nav>
+</template>

package/src/components/BaseButton.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// Botón base. El slot `icon` (opcional, patrón kontuan) coloca un icono a la
+// izquierda; en contenedores estrechos el texto pasa a mini-etiqueta bajo el
+// icono (ver _base-button.scss) y en anchos vuelve a la fila.
+withDefaults(
+  defineProps<{
+    variant?:
+      'primary' | 'secondary' | 'danger' | 'success' | 'info' | 'warning' | 'text' | 'text-danger'
+    type?: 'button' | 'submit'
+  }>(),
+  { variant: 'primary', type: 'button' },
+)
+</script>
+
+<template>
+  <button
+    :type="type"
+    class="edc-button"
+    :class="[`edc-button--${variant}`, { 'edc-button--has-icon': !!$slots.icon }]"
+  >
+    <span v-if="$slots.icon" class="edc-button__icon"><slot name="icon" /></span>
+    <span v-if="$slots.default" class="edc-button__text"><slot /></span>
+  </button>
+</template>

package/src/components/BaseCheckbox.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { Check } from '@lucide/vue'
+
+// Checkbox de formulario (portado de kontuan).
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    label?: string
+    disabled?: boolean
+    id?: string
+  }>(),
+  { modelValue: false, disabled: false },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
+
+const checkboxId = props.id || `checkbox-${Math.random().toString(36).slice(2, 9)}`
+</script>
+
+<template>
+  <label :for="checkboxId" class="checkbox" :class="{ 'checkbox--disabled': disabled }">
+    <input
+      :id="checkboxId"
+      type="checkbox"
+      :checked="modelValue"
+      :disabled="disabled"
+      class="checkbox__input"
+      @change="emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
+    />
+    <span class="checkbox__box">
+      <Check v-if="modelValue" class="checkbox__icon" :size="14" />
+    </span>
+    <span v-if="$slots.default || label" class="checkbox__label"
+      ><slot>{{ label }}</slot></span
+    >
+  </label>
+</template>

package/src/components/BaseInput.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+// Input de formulario (portado de kontuan). Estilo compartido `.form-field`.
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number | null
+    label?: string
+    placeholder?: string
+    type?:
+      | 'text'
+      | 'email'
+      | 'password'
+      | 'number'
+      | 'tel'
+      | 'url'
+      | 'search'
+      | 'date'
+      | 'datetime-local'
+      | 'time'
+    error?: string
+    hint?: string
+    disabled?: boolean
+    required?: boolean
+    id?: string
+  }>(),
+  { modelValue: '', type: 'text', disabled: false, required: false },
+)
+
+// El DOM siempre entrega string: no se declara `number` para no mentir al
+// consumidor (para números está NumericInput).
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+
+const inputId = props.id || `input-${Math.random().toString(36).slice(2, 9)}`
+</script>
+
+<template>
+  <div class="form-field" :class="{ 'form-field--error': error }">
+    <label v-if="label" :for="inputId" class="form-field__label">
+      {{ label }}<span v-if="required" class="form-field__required">*</span>
+    </label>
+    <input
+      :id="inputId"
+      :type="type"
+      :value="modelValue ?? ''"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :required="required"
+      class="form-field__input"
+      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    />
+    <p v-if="error" class="form-field__error">{{ error }}</p>
+    <p v-else-if="hint" class="form-field__hint">{{ hint }}</p>
+  </div>
+</template>

package/src/components/BaseModal.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, watch, ref } from 'vue'
+import { X } from '@lucide/vue'
+
+// Pila de modales abiertos compartida entre instancias: el bloqueo del scroll
+// del body dura mientras haya ALGÚN modal abierto, y Escape solo cierra el de
+// arriba (no todos a la vez cuando hay modal + confirmación superpuestos).
+const openStack: symbol[] = []
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    title?: string
+    size?: 'sm' | 'md' | 'lg'
+    closeLabel?: string
+  }>(),
+  { size: 'md', closeLabel: 'Cerrar' },
+)
+const emit = defineEmits<{ 'update:modelValue': [boolean] }>()
+
+const stackId = Symbol('modal')
+
+function pushOpen() {
+  openStack.push(stackId)
+  document.body.style.overflow = 'hidden'
+}
+
+function popOpen() {
+  const i = openStack.indexOf(stackId)
+  if (i > -1) openStack.splice(i, 1)
+  if (openStack.length === 0) document.body.style.overflow = ''
+}
+
+function close() {
+  emit('update:modelValue', false)
+}
+
+// Cierre por overlay robusto: solo si el pointer bajó Y subió sobre el propio
+// overlay. Evita el bug de que, al pulsar un botón interno que se desmonta
+// (quitar imagen, borrar contenido…), el click se re-dirija al overlay y cierre.
+const downOnOverlay = ref(false)
+function onOverlayDown(e: MouseEvent) {
+  downOnOverlay.value = e.target === e.currentTarget
+}
+function onOverlayClick(e: MouseEvent) {
+  if (downOnOverlay.value && e.target === e.currentTarget) close()
+  downOnOverlay.value = false
+}
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && props.modelValue && openStack[openStack.length - 1] === stackId) {
+    close()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', onKeydown)
+  if (props.modelValue) pushOpen()
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeydown)
+  // Si se desmonta con el modal abierto (navegación atrás…), libera el scroll.
+  popOpen()
+})
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (typeof document === 'undefined') return
+    if (open) pushOpen()
+    else popOpen()
+  },
+)
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div
+        v-if="modelValue"
+        class="modal-overlay"
+        @mousedown="onOverlayDown"
+        @click="onOverlayClick"
+      >
+        <div class="modal" :class="`modal--${props.size}`" role="dialog" aria-modal="true">
+          <div v-if="title || $slots.header" class="modal__header">
+            <slot name="header"
+              ><h3 class="modal__title">{{ title }}</h3></slot
+            >
+            <button class="modal__close" :aria-label="closeLabel" @click="close">
+              <X :size="18" />
+            </button>
+          </div>
+          <div class="modal__body"><slot /></div>
+          <div v-if="$slots.footer" class="modal__footer"><slot name="footer" /></div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/src/components/BaseSelect.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+// Select de formulario (portado de kontuan).
+export interface SelectOption {
+  value: string | number
+  label: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number
+    label?: string
+    options: SelectOption[]
+    placeholder?: string
+    error?: string
+    hint?: string
+    disabled?: boolean
+    required?: boolean
+    id?: string
+  }>(),
+  { modelValue: '', disabled: false, required: false },
+)
+
+// El DOM siempre entrega string: no se declara `number` para no mentir al
+// consumidor (que convierta él si guarda ids numéricos).
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+
+const selectId = props.id || `select-${Math.random().toString(36).slice(2, 9)}`
+</script>
+
+<template>
+  <div class="form-field" :class="{ 'form-field--error': error }">
+    <label v-if="label" :for="selectId" class="form-field__label">
+      {{ label }}<span v-if="required" class="form-field__required">*</span>
+    </label>
+    <div class="form-field__select-wrapper">
+      <select
+        :id="selectId"
+        :value="modelValue"
+        :disabled="disabled"
+        :required="required"
+        class="form-field__select"
+        @change="emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
+      >
+        <option v-if="placeholder" value="" disabled>{{ placeholder }}</option>
+        <option v-for="option in options" :key="option.value" :value="option.value">
+          {{ option.label }}
+        </option>
+      </select>
+    </div>
+    <p v-if="error" class="form-field__error">{{ error }}</p>
+    <p v-else-if="hint" class="form-field__hint">{{ hint }}</p>
+  </div>
+</template>

package/src/components/BaseTabs.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+interface Tab {
+  key: string
+  label: string
+  count?: number
+  icon?: Component
+}
+
+defineProps<{ tabs: Tab[]; modelValue: string }>()
+defineEmits<{ 'update:modelValue': [string] }>()
+</script>
+
+<template>
+  <div class="tabs">
+    <button
+      v-for="tab in tabs"
+      :key="tab.key"
+      type="button"
+      class="tabs__tab"
+      :class="{ 'tabs__tab--active': modelValue === tab.key, 'tabs__tab--has-icon': !!tab.icon }"
+      @click="$emit('update:modelValue', tab.key)"
+    >
+      <component :is="tab.icon" v-if="tab.icon" class="tabs__icon" :size="16" />
+      <span class="tabs__label">{{ tab.label }}</span>
+      <span v-if="tab.count !== undefined" class="tabs__count">{{ tab.count }}</span>
+    </button>
+  </div>
+</template>

package/src/components/BaseTextarea.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// Textarea de formulario (portado de kontuan).
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    label?: string
+    placeholder?: string
+    rows?: number
+    error?: string
+    hint?: string
+    disabled?: boolean
+    required?: boolean
+    id?: string
+  }>(),
+  { modelValue: '', rows: 4, disabled: false, required: false },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  keydown: [event: KeyboardEvent]
+}>()
+
+const textareaId = props.id || `textarea-${Math.random().toString(36).slice(2, 9)}`
+</script>
+
+<template>
+  <div class="form-field" :class="{ 'form-field--error': error }">
+    <label v-if="label" :for="textareaId" class="form-field__label">
+      {{ label }}<span v-if="required" class="form-field__required">*</span>
+    </label>
+    <textarea
+      :id="textareaId"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :rows="rows"
+      :disabled="disabled"
+      :required="required"
+      class="form-field__textarea"
+      @input="emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+      @keydown="emit('keydown', $event)"
+    />
+    <p v-if="error" class="form-field__error">{{ error }}</p>
+    <p v-else-if="hint" class="form-field__hint">{{ hint }}</p>
+  </div>
+</template>

package/src/components/BaseToast.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted } from 'vue'
+import { X } from '@lucide/vue'
+
+const props = withDefaults(
+  defineProps<{
+    variant?: 'success' | 'warning' | 'danger' | 'info'
+    message: string
+    duration?: number
+    closeLabel?: string
+  }>(),
+  { variant: 'info', duration: 4000, closeLabel: 'Cerrar' },
+)
+const emit = defineEmits<{ close: [] }>()
+
+let timer: ReturnType<typeof setTimeout> | undefined
+
+onMounted(() => {
+  if (props.duration > 0) timer = setTimeout(() => emit('close'), props.duration)
+})
+onBeforeUnmount(() => clearTimeout(timer))
+</script>
+
+<template>
+  <div :class="['toast', `toast--${variant}`]" role="alert">
+    <span class="toast__message">{{ message }}</span>
+    <button class="toast__close" :aria-label="closeLabel" @click="emit('close')">
+      <X :size="16" />
+    </button>
+  </div>
+</template>

package/src/components/ConfirmDialog.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import BaseModal from './BaseModal.vue'
+import { Check, X } from '@lucide/vue'
+import BaseButton from './BaseButton.vue'
+import { useConfirm } from '../composables/useConfirm'
+
+// Diálogo global de confirmación. Se monta una vez (junto a ToastContainer) y
+// responde a useConfirm().confirm({...}). Sustituye al confirm() nativo.
+const { state, resolve } = useConfirm()
+</script>
+
+<template>
+  <BaseModal
+    :model-value="state.open"
+    :title="state.title || 'Confirmar'"
+    size="sm"
+    @update:model-value="
+      (v: boolean) => {
+        if (!v) resolve(false)
+      }
+    "
+  >
+    <p class="confirm__message">{{ state.message }}</p>
+    <template #footer>
+      <BaseButton variant="secondary" @click="resolve(false)">
+        <template #icon><X :size="16" /></template>
+        {{ state.cancelLabel }}
+      </BaseButton>
+      <BaseButton :variant="state.variant" @click="resolve(true)">
+        <template #icon><Check :size="16" /></template>
+        {{ state.confirmLabel }}
+      </BaseButton>
+    </template>
+  </BaseModal>
+</template>