@edc-motor/ui 0.2.0

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

@@ -0,0 +1,69 @@
+@use "tokens" as *;
+
+// Selector de color (portado de kontuan).
+.palette-color-picker {
+  display: flex;
+  flex-direction: column;
+  gap: $space-1;
+
+  &__label {
+    font-size: $fs-13;
+    font-weight: $k-fw-medium;
+    color: $text-2;
+  }
+
+  &__grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $space-2;
+  }
+
+  &__swatch {
+    --swatch-color: #64748b;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: 2px solid transparent;
+    border-radius: $radius-sm;
+    background: var(--swatch-color);
+    color: #fff;
+    cursor: pointer;
+    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
+
+    &:hover { transform: scale(1.06); }
+
+    &--selected { box-shadow: 0 0 0 2px $surface, 0 0 0 4px var(--swatch-color); }
+
+    &--custom { overflow: hidden; }
+
+    &--custom-idle {
+      background: linear-gradient(135deg, #facc15 0%, #3b82f6 50%, #ef4444 100%);
+    }
+
+    &--custom-idle#{&}--selected {
+      box-shadow: 0 0 0 2px $surface, 0 0 0 4px $text-1;
+    }
+  }
+
+  &__swatch-check {
+    position: absolute;
+    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.35));
+  }
+
+  &__swatch-pipette { color: #000; pointer-events: none; }
+
+  &__swatch-input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+  }
+}

package/scss/components/_rich-text.scss

@@ -0,0 +1,144 @@
+@use "tokens" as *;
+
+// Editor WYSIWYG (TipTap). Enmarcado como los demás campos de formulario.
+.rich-text {
+  border: 1px solid $input-border;
+  border-radius: $input-radius;
+  background: $input-bg;
+  overflow: hidden;
+  transition: border-color 0.15s, box-shadow 0.15s;
+
+  &:focus-within {
+    border-color: $input-border-focus;
+    box-shadow: $input-focus-ring;
+  }
+
+  &--disabled { opacity: $disabled-opacity; pointer-events: none; }
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: $space-1;
+    border-bottom: 1px solid $border;
+    background: $surface-2;
+  }
+
+  &__tool {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border: none;
+    border-radius: $radius-sm;
+    background: transparent;
+    color: $text-2;
+    cursor: pointer;
+    transition: background-color 0.15s, color 0.15s;
+
+    &:hover:not(:disabled) { background: $ui-hover-bg; color: $text-1; }
+    &--active { background: $accent-100; color: $accent-600; }
+    &:disabled { opacity: 0.5; cursor: not-allowed; }
+  }
+
+  &__sep {
+    width: 1px;
+    height: 20px;
+    background: $border;
+    margin: 0 $space-1;
+  }
+
+  // El toggle de HTML se ancla a la derecha de la barra.
+  &__tool--source { margin-left: auto; }
+
+  // Modo HTML: edición directa del código.
+  &__source {
+    display: block;
+    width: 100%;
+    min-height: 160px;
+    padding: $input-padding-y $input-padding-x;
+    border: none;
+    background: $surface;
+    color: $text-1;
+    font-family: $k-font-mono;
+    font-size: $fs-13;
+    line-height: 1.5;
+    resize: vertical;
+    outline: none;
+  }
+
+  // Selector de iconos del juego.
+  &__picker { position: relative; display: inline-flex; }
+
+  &__icons {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    z-index: 100;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 2px;
+    max-width: 220px;
+    max-height: 200px;
+    overflow-y: auto;
+    padding: $space-1;
+    background: $surface;
+    border: 1px solid $border;
+    border-radius: $radius-md;
+    box-shadow: $shadow-md;
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 4px;
+    border: none;
+    border-radius: $radius-sm;
+    background: transparent;
+    cursor: pointer;
+    transition: background-color 0.15s;
+
+    &:hover { background: $ui-hover-bg; }
+    img { width: 100%; height: 100%; object-fit: contain; }
+  }
+
+  &__content {
+    .ProseMirror {
+      min-height: 120px;
+      padding: $input-padding-y $input-padding-x;
+      color: $input-text;
+      font-size: $fs-14;
+      line-height: $k-lh-body;
+      outline: none;
+
+      > * + * { margin-top: 0.6em; }
+      h2 { font-size: $fs-18; 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; }
+
+      // Iconos insertados: en línea con el texto.
+      img.rt-icon {
+        display: inline-block;
+        width: 1.25em;
+        height: 1.25em;
+        vertical-align: -0.25em;
+        margin: 0 1px;
+      }
+
+      p.is-editor-empty:first-child::before {
+        content: attr(data-placeholder);
+        color: $input-placeholder;
+        float: left;
+        height: 0;
+        pointer-events: none;
+      }
+    }
+  }
+}

package/scss/components/_search-select.scss

@@ -0,0 +1,138 @@
+@use "tokens" as *;
+
+// Select con buscador (combobox): cerrado parece un input; desplegado, un
+// panel flotante con búsqueda y opciones (lista larga => scroll interno).
+.search-select {
+  position: relative;
+  width: 100%;
+
+  &__trigger {
+    display: flex;
+    align-items: center;
+    gap: $space-2;
+    width: 100%;
+    background: $input-bg;
+    border: 1px solid $input-border;
+    border-radius: $input-radius;
+    color: $input-text;
+    cursor: pointer;
+    padding: $space-2 $space-3;
+    text-align: left;
+    font: inherit;
+
+    &:hover { border-color: $input-border-hover; }
+  }
+
+  &.is-open &__trigger {
+    border-color: $input-border-focus;
+  }
+
+  &__value {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &.is-placeholder { color: $input-placeholder; }
+  }
+
+  &__chevron {
+    flex: 0 0 auto;
+    color: $text-3;
+    transition: transform 0.15s ease;
+  }
+
+  &.is-open &__chevron { transform: rotate(180deg); }
+
+  &__dropdown {
+    position: absolute;
+    top: calc(100% + #{$space-1});
+    left: 0;
+    right: 0;
+    z-index: 50;
+    background: $surface;
+    border: 1px solid $border-strong;
+    border-radius: $radius-md;
+    box-shadow: $shadow-md;
+    overflow: hidden;
+    display: grid;
+  }
+
+  &__input {
+    width: 100%;
+    background: $input-bg;
+    border: 0;
+    border-bottom: 1px solid $border;
+    color: $input-text;
+    padding: $space-2 $space-3;
+    font: inherit;
+    outline: none;
+
+    &::placeholder { color: $input-placeholder; }
+  }
+
+  &__options {
+    list-style: none;
+    margin: 0;
+    padding: $space-1;
+    display: grid;
+    gap: 1px;
+    max-height: 240px;
+    overflow-y: auto;
+  }
+
+  &__option {
+    display: flex;
+    align-items: center;
+    gap: $space-2;
+    width: 100%;
+    background: none;
+    border: 0;
+    border-radius: $radius-sm;
+    color: $text-1;
+    cursor: pointer;
+    padding: $space-2 $space-2;
+    text-align: left;
+    font-size: $fs-13;
+
+    &:hover,
+    &.is-highlighted { background: $surface-2; }
+
+    &.is-active {
+      background: color-mix(in srgb, $accent-500 14%, transparent);
+      color: $accent-500;
+      font-weight: $k-fw-semibold;
+    }
+  }
+
+  &__label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__empty {
+    color: $text-3;
+    font-size: $fs-13;
+    padding: $space-2 $space-2;
+  }
+
+  &__more {
+    display: flex;
+    justify-content: center;
+
+    button {
+      background: none;
+      border: 0;
+      color: $accent-500;
+      cursor: pointer;
+      font-size: $fs-13;
+      padding: $space-2;
+
+      &:hover { text-decoration: underline; }
+    }
+  }
+}

package/scss/components/_tabs.scss

@@ -0,0 +1,120 @@
+@use "tokens" as *;
+
+.tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid $border;
+  margin-bottom: $space-5;
+
+  @container content (min-width: #{$bp-sm}) {
+    gap: $space-1;
+  }
+
+  &__tab {
+    display: inline-flex;
+    align-items: center;
+    gap: $space-1;
+    padding: $space-1 $space-2;
+    border: none;
+    background: none;
+    font-family: $k-font-sans;
+    font-size: $fs-12;
+    font-weight: $k-fw-medium;
+    color: $text-3;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    transition: color 0.15s, border-color 0.15s;
+    flex: 1;
+    min-width: 0;
+    justify-content: center;
+
+    // Estrecho: las tabs con icono se apilan (icono + etiqueta pequeña)
+    &--has-icon {
+      flex-direction: column;
+      gap: 2px;
+      padding: $space-1;
+    }
+
+    @container content (min-width: #{$bp-sm}) {
+      flex: none;
+      min-width: auto;
+      padding: $space-2;
+
+      &--has-icon {
+        flex-direction: row;
+        gap: $space-1;
+        padding: $space-2;
+      }
+    }
+
+    @container content (min-width: #{$bp-md}) {
+      font-size: $fs-14;
+      gap: $space-2;
+      padding: $space-2 $space-3;
+
+      &--has-icon {
+        gap: $space-2;
+        padding: $space-2 $space-3;
+      }
+    }
+
+    &:hover {
+      color: $text-1;
+    }
+
+    &--active {
+      color: $accent-600;
+      border-bottom-color: $accent-500;
+    }
+  }
+
+  &__icon {
+    flex-shrink: 0;
+  }
+
+  &__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    .tabs__tab--has-icon & {
+      font-size: 10px;
+      line-height: 1;
+
+      @container content (min-width: #{$bp-sm}) {
+        font-size: $fs-12;
+        line-height: inherit;
+      }
+
+      @container content (min-width: #{$bp-md}) {
+        font-size: $fs-14;
+      }
+    }
+  }
+
+  &__count {
+    font-size: $fs-12;
+    font-weight: $k-fw-semibold;
+    background: $surface-2;
+    color: $text-2;
+    padding: 0 $space-2;
+    border-radius: $radius-pill;
+    line-height: 1.6;
+    flex-shrink: 0;
+
+    // En estrecho con iconos, oculta el contador
+    .tabs__tab--has-icon & {
+      display: none;
+
+      @container content (min-width: #{$bp-sm}) {
+        display: inline;
+      }
+    }
+
+    .tabs__tab--active & {
+      background: $accent-100;
+      color: $accent-600;
+    }
+  }
+}

package/scss/components/_theme-selector.scss

@@ -0,0 +1,34 @@
+@use "tokens" as *;
+
+.theme-selector {
+  display: flex;
+  background: $surface-2;
+  border-radius: $radius-sm;
+  padding: 2px;
+  gap: 2px;
+}
+
+.theme-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 24px;
+  border: none;
+  border-radius: $radius-sm;
+  background: transparent;
+  cursor: pointer;
+  font-size: $fs-13;
+  color: $text-3;
+  transition: all 0.15s ease;
+
+  &:hover {
+    color: $text-1;
+  }
+
+  &.active {
+    background: $surface;
+    color: $text-1;
+    box-shadow: $shadow-sm;
+  }
+}

package/scss/components/_toast-container.scss

@@ -0,0 +1,16 @@
+@use "tokens" as *;
+
+.toast-container {
+  position: fixed;
+  top: $space-4;
+  right: $space-4;
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+  gap: $space-2;
+  max-width: 400px;
+}
+
+.toast-enter-active, .toast-leave-active { transition: all 0.3s ease; }
+.toast-enter-from, .toast-leave-to { opacity: 0; transform: translateX(20px); }
+.toast-move { transition: transform 0.3s ease; }

package/scss/components/_toast.scss

@@ -0,0 +1,25 @@
+@use "tokens" as *;
+
+.toast {
+  display: flex;
+  align-items: center;
+  gap: $space-3;
+  padding: $space-3 $space-4;
+  border-radius: $radius-md;
+  border: 1px solid transparent;
+  box-shadow: $shadow-md;
+  font-size: $fs-14;
+
+  &--success { background: var(--toast-success-bg); color: $success; border-color: $success; }
+  &--warning { background: var(--toast-warning-bg); color: $warning; border-color: $warning; }
+  &--danger  { background: var(--toast-danger-bg);  color: $danger;  border-color: $danger; }
+  &--info    { background: var(--toast-info-bg);    color: $info;    border-color: $info; }
+
+  &__message { flex: 1; }
+  &__close {
+    display: flex; align-items: center; justify-content: center;
+    width: 24px; height: 24px; border: none; border-radius: $radius-sm;
+    background: transparent; color: currentColor; cursor: pointer; opacity: 0.7; flex-shrink: 0;
+    &:hover { opacity: 1; }
+  }
+}

package/scss/components/_translatable-input.scss

@@ -0,0 +1,73 @@
+@use "tokens" as *;
+
+// Cabecera y selector de locale del TranslatableInput (portado de kontuan).
+// El input/textarea en sí usa las clases `.form-field__*`.
+.translatable-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .form-field__label { margin-bottom: 0; }
+}
+
+.translatable-selector { position: relative; }
+
+.translatable-trigger {
+  display: flex;
+  align-items: center;
+  gap: $space-1;
+  background: $surface-2;
+  border: 1px solid $border;
+  border-radius: $radius-sm;
+  padding: 1px $space-2;
+  cursor: pointer;
+  transition: all 0.15s;
+
+  &:hover { background: $surface-3; border-color: $border-strong; }
+
+  &__code {
+    font-size: $fs-11;
+    font-weight: $k-fw-bold;
+    color: $text-1;
+    letter-spacing: $k-track-wide;
+  }
+  &__count { font-size: $fs-11; color: $text-3; font-variant-numeric: tabular-nums; }
+  &__chevron { color: $text-3; flex-shrink: 0; }
+}
+
+.translatable-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  background: $surface;
+  border: 1px solid $border;
+  border-radius: $radius-md;
+  box-shadow: $shadow-md;
+  min-width: 160px;
+  padding: 4px;
+  z-index: 100;
+}
+
+.translatable-option {
+  display: flex;
+  align-items: center;
+  gap: $space-2;
+  width: 100%;
+  padding: $space-1 $space-3;
+  border: none;
+  border-radius: $radius-sm;
+  background: transparent;
+  font-size: $fs-13;
+  color: $text-2;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.1s;
+
+  &:hover { background: $ui-hover-bg; color: $text-1; }
+  &--active { color: $accent-600; font-weight: $k-fw-semibold; }
+  &--empty:not(&--active) { color: $text-3; }
+
+  &__code { font-weight: $k-fw-bold; font-size: $fs-12; min-width: 24px; }
+  &__label { flex: 1; }
+  &__filled { width: 6px; height: 6px; border-radius: 50%; background: $success; flex-shrink: 0; }
+}

package/src/blocks/BlockCta.vue

@@ -0,0 +1,32 @@
+<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--cta"
+    :class="settings.image ? `block--image-${settings.image_position || 'top'}` : ''"
+  >
+    <div class="block__card">
+      <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__cta-body">
+          <div v-if="settings.body" class="block__text rich-content" v-html="settings.body" />
+          <a
+            v-if="settings.button_text && settings.button_url"
+            class="block-button"
+            :class="`block-button--${settings.button_variant || 'primary'}`"
+            :href="String(settings.button_url)"
+          >
+            {{ settings.button_text }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </BlockShell>
+</template>

package/src/blocks/BlockFaq.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import BlockShell from './BlockShell.vue'
+
+// Preguntas frecuentes (doc 03): acordeón nativo (details/summary). Cada
+// fila viene ya localizada del repeater {question, answer}.
+defineProps<{
+  settings: {
+    title?: string
+    items?: { question?: string; answer?: string }[]
+    [key: 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--faq">
+    <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
+    <details v-for="(item, i) in settings.items ?? []" :key="i" class="block__faq-item">
+      <summary class="block__faq-question">{{ item.question }}</summary>
+      <div v-if="item.answer" class="block__faq-answer rich-content" v-html="item.answer" />
+    </details>
+  </BlockShell>
+</template>

package/src/blocks/BlockHeader.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import BlockShell from './BlockShell.vue'
+
+defineProps<{ settings: Record<string, unknown>; data?: Record<string, unknown> }>()
+</script>
+
+<template>
+  <BlockShell :settings="settings" class="block--header">
+    <h1 class="block__title">{{ settings.title }}</h1>
+    <p v-if="settings.subtitle" class="block__subtitle">{{ settings.subtitle }}</p>
+    <img v-if="settings.image" class="block__banner" :src="String(settings.image)" alt="" />
+  </BlockShell>
+</template>