@edc-motor/ui 0.2.0

package/README.md

@@ -0,0 +1,45 @@
+# @edc-motor/ui
+
+Componentes públicos de **EdC Motor** (Espadas de Ceniza Motor): la capa Vue 3
+de la web pública de un juego de mesa construido sobre
+[`edc-motor/core`](https://packagist.org/packages/edc-motor/core) — componentes
+base (botones, formularios, modales, chips, migas…), tokens SCSS con temas
+claro/oscuro, i18n, editor de texto rico (TipTap) y los composables del motor
+(API, head/SEO, tema).
+
+## Instalación
+
+```bash
+npm install @edc-motor/ui
+```
+
+Es un **paquete fuente** (`main: src/index.ts`): lo compila la app consumidora
+con Vite. El consumidor necesita:
+
+```bash
+npm install -D vite @vitejs/plugin-vue sass-embedded typescript vue-tsc
+```
+
+y en su `vite.config.ts`, los tokens SCSS del paquete en `loadPaths`:
+
+```ts
+css: {
+  preprocessorOptions: {
+    scss: {
+      additionalData: '@use "tokens" as *;\n',
+      loadPaths: ['node_modules/@edc-motor/ui/scss'],
+    },
+  },
+},
+```
+
+## Versionado
+
+Versión *de tren* con `edc-motor/core` y `@edc-motor/admin-kit`: los tres
+paquetes comparten número y se etiquetan juntos en el monorepo
+[`bildurre/boardgame_motor`](https://github.com/bildurre/boardgame_motor),
+donde viven el código, las guías, los issues y los pull requests.
+
+## Licencia
+
+[GPL-3.0-only](LICENSE).

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@edc-motor/ui",
+  "version": "0.2.0",
+  "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",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./scss/*": "./scss/*"
+  },
+  "files": [
+    "src",
+    "scss",
+    "LICENSE",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bildurre/boardgame_motor.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/bildurre/boardgame_motor/tree/main/packages/ui#readme",
+  "bugs": "https://github.com/bildurre/boardgame_motor/issues",
+  "keywords": [
+    "vue",
+    "boardgame",
+    "scss",
+    "edc-motor"
+  ],
+  "publishConfig": {
+    "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"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "@lucide/vue": "^1.0.0",
+    "vue-router": "^5.0.0"
+  }
+}

package/scss/_base.scss

@@ -0,0 +1,33 @@
+@use "tokens" as *;
+// =========================================================
+// Reset + base
+// =========================================================
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html {
+  font-size: 100%;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: $k-font-sans;
+  font-size: $fs-14;
+  line-height: $k-lh-body;
+  color: $text-1;
+  background-color: $bg;
+  overflow-x: hidden;
+  max-width: 100vw;
+  min-height: 100vh;
+}
+
+#app { min-height: 100vh; max-width: 100%; }
+
+h1, h2, h3, h4 { font-weight: $k-fw-semibold; line-height: $k-lh-tight; }
+h1 { font-size: $fs-28; }
+h2 { font-size: $fs-24; }
+h3 { font-size: $fs-20; }
+
+a { color: $accent-500; text-decoration: none; &:hover { color: $accent-600; } }

package/scss/_forms.scss

@@ -0,0 +1,33 @@
+@use "tokens" as *;
+// =========================================================
+// Inputs y formularios genéricos
+// =========================================================
+
+.form { display: flex; flex-direction: column; gap: $space-4; }
+.form-actions { margin-top: $space-2; display: flex; gap: $space-3; }
+
+.field { display: flex; flex-direction: column; gap: $space-1; }
+.field__label, .field label { font-size: $fs-13; color: $text-2; }
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="number"],
+select,
+textarea {
+  font: inherit;
+  width: 100%;
+  padding: 10px 12px;
+  background: $surface;
+  border: 1px solid $border;
+  border-radius: $radius-md;
+  color: $text-1;
+  &:hover { border-color: $border-strong; }
+  &:focus { outline: none; border-color: $accent-500; }
+}
+textarea { resize: vertical; }
+input[type="color"] { width: 44px; height: 36px; padding: 2px; cursor: pointer; }
+
+.error { color: $danger; margin: 0; }
+.ok { color: $success; margin: 0; }

package/scss/_shared-components.scss

@@ -0,0 +1 @@
+@use "components";

package/scss/_theme.scss

@@ -0,0 +1,74 @@
+// =========================================================
+// CSS Custom Properties (theming light/dark) — acento morado
+// El <html> arranca en data-theme="dark" (identidad EdC).
+// =========================================================
+
+:root {
+  color-scheme: light;
+
+  --accent-100: #ece9fb;
+  --accent-200: #cdc7f7;
+  --accent-300: #a99ff2;
+  --accent-400: #8577ec;
+  --accent-500: #6c5ce7;
+  --accent-600: #5b4bd6;
+  --accent-700: #4c3cc4;
+
+  --info: #6c8cff;
+  --success: #4ade80;
+  --warning: #fbbf24;
+  --danger: #ff6b6b;
+
+  --bg: #fafafa;
+  --surface: #ffffff;
+  --surface-2: #f2f3f4;
+  --surface-3: #eaecf0;
+  --text-1: #101216;
+  --text-2: #636a77;
+  --text-3: #7b8290;
+  --border: #e2e3e7;
+  --border-strong: #cfd2d9;
+
+  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.12);
+
+  --toast-success-bg: #ecfdf5;
+  --toast-warning-bg: #fffbeb;
+  --toast-danger-bg: #fef2f2;
+  --toast-info-bg: #eff6ff;
+
+  // CRM público (patrón CDL): el fondo de color de un bloque es un TINTE
+  // semitransparente del color elegido, y la imagen de fondo de la página
+  // va atenuada — en claro admiten más presencia que en oscuro.
+  --block-tint: 20%;
+  --page-bg-opacity: 0.2;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  --accent-100: #1e1b2e;
+
+  --bg: #0f1115;
+  --surface: #1a1d24;
+  --surface-2: #20242d;
+  --surface-3: #2b2f3a;
+  --text-1: #e6e8ee;
+  --text-2: #9aa0ad;
+  --text-3: #7b8290;
+  --border: #2b2f3a;
+  --border-strong: #3a4150;
+
+  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30);
+  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
+  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.45);
+
+  --toast-success-bg: #0d2818;
+  --toast-warning-bg: #2a2008;
+  --toast-danger-bg: #2a0e0e;
+  --toast-info-bg: #0e1a2e;
+
+  --block-tint: 12%;
+  --page-bg-opacity: 0.1;
+}

package/scss/_tokens.scss

@@ -0,0 +1,114 @@
+// =========================================================
+// EdC Tokens — adaptados de kontuan (acento morado)
+// =========================================================
+
+// Acento (CSS vars, ver _theme.scss) — un juego puede sobreescribirlas
+$accent-100: var(--accent-100);
+$accent-200: var(--accent-200);
+$accent-300: var(--accent-300);
+$accent-400: var(--accent-400);
+$accent-500: var(--accent-500);
+$accent-600: var(--accent-600);
+$accent-700: var(--accent-700);
+
+// Semánticos
+$info: #6c8cff;
+$success: #4ade80;
+$warning: #fbbf24;
+$danger: #ff6b6b;
+
+// Neutros (CSS vars, themed)
+$bg: var(--bg);
+$surface: var(--surface);
+$surface-2: var(--surface-2);
+$surface-3: var(--surface-3);
+$text-1: var(--text-1);
+$text-2: var(--text-2);
+$text-3: var(--text-3);
+$border: var(--border);
+$border-strong: var(--border-strong);
+
+// Tipografía
+$k-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+$k-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+$k-fw-regular: 400;
+$k-fw-medium: 500;
+$k-fw-semibold: 600;
+$k-fw-bold: 700;
+$k-lh-tight: 1.15;
+$k-lh-ui: 1.35;
+$k-lh-body: 1.55;
+$fs-11: 11px; $fs-12: 12px; $fs-13: 13px; $fs-14: 14px; $fs-16: 16px; $fs-18: 18px; $fs-20: 20px; $fs-24: 24px; $fs-28: 28px;
+
+// Espaciado (px, como kontuan)
+$space-0: 0;
+$space-1: 4px;
+$space-2: 8px;
+$space-3: 12px;
+$space-4: 16px;
+$space-5: 20px;
+$space-6: 24px;
+$space-7: 28px;
+$space-8: 32px;
+
+// Radios
+$radius-sm: 6px;
+$radius-md: 10px;
+$radius-lg: 14px;
+$radius-xl: 18px;
+$radius-pill: 999px;
+
+// Estados UI (hover, etc.)
+$ui-hover-bg: $surface-2;
+$ui-hover-bg-strong: $surface-3;
+
+// Tracking (letter-spacing)
+$k-track-wide: 0.02em;
+
+// Layout (igual que kontuan)
+$layout-sidebar-width: 280px;
+$layout-content-max: 1400px;
+$layout-page-padding: 24px;
+
+// Iconos (Lucide)
+$icon-stroke: 1.75;
+
+// Breakpoints (mobile-first, min-width)
+$bp-xs: 360px;
+$bp-sm: 480px;
+$bp-md: 768px;
+$bp-lg: 1024px;
+$bp-xl: 1280px;
+
+// ---------------------------------------------------------
+// Alias de compatibilidad (nombres antiguos -> tokens kontuan)
+// para no reescribir cada propiedad de los componentes ya hechos.
+// ---------------------------------------------------------
+$color-bg: $bg;
+$color-surface: $surface;
+$color-border: $border;
+$color-text: $text-1;
+$color-text-muted: $text-2;
+$color-accent: $accent-500;
+$color-accent-dark: $accent-600;
+$font-sans: $k-font-sans;
+
+// Sombras (CSS vars)
+$shadow-sm: var(--shadow-sm);
+$shadow-md: var(--shadow-md);
+$shadow-lg: var(--shadow-lg);
+
+// Formularios (elementos estilo kontuan)
+$focus-ring: 0 0 0 3px color-mix(in srgb, #{$accent-500} 25%, transparent);
+$disabled-opacity: 0.45;
+$input-height: 40px;
+$input-padding-x: 12px;
+$input-padding-y: 10px;
+$input-radius: $radius-md;
+$input-bg: $surface-2;
+$input-text: $text-1;
+$input-placeholder: $text-3;
+$input-border: $border;
+$input-border-hover: $border-strong;
+$input-border-focus: $accent-500;
+$input-focus-ring: $focus-ring;

package/scss/components/_base-button.scss

@@ -0,0 +1,113 @@
+@use "tokens" as *;
+
+.edc-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: $space-2;
+  padding: $space-2 $space-4;
+  border: 1px solid transparent;
+  border-radius: $radius-md;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  &__text {
+    display: inline-flex;
+    align-items: center;
+    gap: $space-2;
+    line-height: 1.2;
+  }
+
+  // Con slot de icono (patrón kontuan): fila por defecto en todas partes;
+  // SOLO cuando el contenedor `content` (el área de contenido) es estrecho,
+  // el texto pasa a mini-etiqueta bajo el icono.
+  &--has-icon:not(.edc-button--text):not(.edc-button--text-danger) {
+    @container content (max-width: #{$bp-sm - 1px}) {
+      flex-direction: column;
+      gap: 2px;
+      padding: $space-1 $space-2;
+
+      .edc-button__text {
+        font-size: 10px;
+        line-height: 1;
+      }
+    }
+  }
+
+  &--primary {
+    background: $color-accent;
+    color: #fff;
+
+    // Hover bien visible: accent-600 apenas se distingue del 500.
+    &:hover:not(:disabled) {
+      background: color-mix(in srgb, $color-accent 72%, black);
+    }
+  }
+
+  &--secondary {
+    background: transparent;
+    border-color: $color-border;
+    color: $color-text;
+
+    &:hover:not(:disabled) {
+      background: color-mix(in srgb, $color-accent 14%, transparent);
+      border-color: $color-accent;
+    }
+  }
+}
+
+// Botón tipo TEXTO (kontuan): sin fondo, sin borde ni padding; solo color.
+.edc-button--text {
+  background: transparent;
+  border-color: transparent;
+  padding: 0;
+  color: $accent-500;
+
+  &:hover:not(:disabled) { color: $accent-700; background: transparent; }
+}
+.edc-button--text-danger {
+  background: transparent;
+  border-color: transparent;
+  padding: 0;
+  color: $danger;
+
+  &:hover:not(:disabled) {
+    color: color-mix(in srgb, $danger 80%, black);
+    background: transparent;
+  }
+}
+
+.edc-button--danger {
+  background: $danger;
+  color: #fff;
+  &:hover:not(:disabled) { background: color-mix(in srgb, $danger 72%, black); }
+}
+.edc-button--success {
+  background: $success;
+  color: #06281a;
+  &:hover:not(:disabled) { background: color-mix(in srgb, $success 72%, black); }
+}
+.edc-button--info {
+  background: $info;
+  color: #fff;
+  &:hover:not(:disabled) { background: color-mix(in srgb, $info 72%, black); }
+}
+.edc-button--warning {
+  background: $warning;
+  color: #2b2005;
+  &:hover:not(:disabled) { background: color-mix(in srgb, $warning 72%, black); }
+}

package/scss/components/_blocks.scss

@@ -0,0 +1,211 @@
+@use "tokens" as *;
+
+// 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).
+  padding-block: $space-8 + $space-6; // 56px
+  background: var(--block-bg, transparent);
+
+  &__inner {
+    max-width: 960px; // 'wide' (por defecto)
+    margin: 0 auto;
+    padding: 0 $space-4;
+    display: grid;
+    gap: $space-5; // separación entre los elementos del bloque
+  }
+
+  // Anchura del contenido (campo común `width`): coherente entre bloques.
+  &--w-narrow .block__inner { max-width: 680px; }
+  &--w-full .block__inner { max-width: none; padding-inline: $space-6; }
+
+  &__title { margin: 0; }
+  &__subtitle { margin: 0; color: $text-2; font-size: $fs-18; }
+  &__text { color: $text-1; }
+
+  &__label {
+    display: inline-block;
+    justify-self: start;
+    font-size: $fs-12;
+    font-weight: $k-fw-semibold;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: $accent-500;
+    border: 1px solid color-mix(in srgb, $accent-500 45%, transparent);
+    border-radius: $radius-pill;
+    padding: 2px $space-3;
+  }
+
+  &__card {
+    // Semitransparente: la imagen de fondo de la página se ve a través
+    // (patrón CDL, rgba(surface, .5)); el blur mantiene el texto legible.
+    background: color-mix(in srgb, $surface 65%, transparent);
+    backdrop-filter: blur(8px);
+    border: 1px solid $border;
+    border-radius: $radius-lg;
+    box-shadow: $shadow-sm;
+    padding: $space-8;
+    display: grid;
+    gap: $space-4;
+
+    .edc-button { justify-self: start; text-decoration: none; }
+  }
+
+  &--header .block__title { font-size: $fs-28; }
+
+  &__media-layout { display: grid; gap: $space-4; }
+  &__image {
+    max-width: 100%;
+    border-radius: $radius-md;
+    justify-self: center;
+  }
+
+  &--image-left .block__media-layout,
+  &--image-right .block__media-layout {
+    @container content (min-width: #{$bp-sm}) {
+      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+      align-items: start;
+    }
+  }
+  &--image-right .block__media-layout .block__image { order: 2; }
+  &--image-bottom .block__media-layout .block__image { order: 2; }
+
+  // Imagen flotada: el texto la rodea y sigue por debajo (cleartext, como
+  // CDL). En estrecho la imagen va arriba a lo ancho, sin flotar.
+  &--image-clear-left .block__media-layout,
+  &--image-clear-right .block__media-layout {
+    display: block;
+
+    // Clearfix: el bloque no se corta si la imagen es más alta que el texto.
+    &::after { content: ""; display: table; clear: both; }
+
+    .block__image { margin-bottom: $space-3; }
+  }
+  &--image-clear-left .block__media-layout .block__image {
+    @container content (min-width: #{$bp-sm}) {
+      float: left;
+      max-width: 50%;
+      margin-right: $space-4;
+    }
+  }
+  &--image-clear-right .block__media-layout .block__image {
+    @container content (min-width: #{$bp-sm}) {
+      float: right;
+      max-width: 50%;
+      margin-left: $space-4;
+    }
+  }
+
+  // Banner de la cabecera (a lo ancho del bloque).
+  &__banner {
+    width: 100%;
+    border-radius: $radius-md;
+  }
+
+  // Retrato del autor de la cita.
+  &__avatar {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-bottom: $space-2;
+  }
+
+  // Cuerpo del CTA (texto + botón) dentro de su media-layout.
+  &__cta-body {
+    display: grid;
+    gap: $space-3;
+    justify-items: start;
+  }
+
+  &--quote .block__quote {
+    margin: 0;
+    border-left: 3px solid $accent-500;
+    padding-left: $space-4;
+    // 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-24;
+    font-style: italic;
+  }
+  &__author {
+    margin-top: $space-2;
+    color: $text-3;
+    // El autor no hereda la fuente especial de la cita.
+    font-family: var(--font-body, inherit);
+    font-style: normal;
+    font-size: $fs-14;
+  }
+}
+
+.block__index {
+  margin: 0;
+  padding-left: 1.2em;
+  display: grid;
+  gap: $space-1;
+
+  a { color: $accent-500; text-decoration: none; }
+  a:hover { text-decoration: underline; }
+}
+
+// FAQ (doc 03): acordeón nativo details/summary del bloque `faq`.
+.block__faq-item {
+  border: 1px solid $border;
+  border-radius: $radius-md;
+  background: color-mix(in srgb, $surface 65%, transparent);
+
+  & + & { margin-top: $space-2; }
+
+  &[open] .block__faq-question { color: $accent-500; }
+}
+
+.block__faq-question {
+  padding: $space-3 $space-4;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:hover { color: $accent-500; }
+}
+
+.block__faq-answer {
+  padding: 0 $space-4 $space-3;
+  color: $text-2;
+}
+
+
+// Botón de los bloques (CTA, doc 03): dos tipos con hover CRUZADO.
+// Normal: fondo de acento + texto del color del texto; al pasar, fondo del
+// color de fondo + texto de acento. Inverso: exactamente al revés.
+.block-button {
+  display: inline-flex;
+  align-items: center;
+  gap: $space-2;
+  padding: $space-2 $space-5;
+  border: 1px solid $accent-500;
+  border-radius: $radius-md;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+
+  // El "fondo" de los estados cruzados es la SUPERFICIE ($surface, el
+  // segundo tono), no el fondo de página puro: menos negro / menos blanco.
+  &--primary {
+    background: $accent-500;
+    color: $text-1;
+
+    &:hover {
+      background: $surface;
+      color: $accent-500;
+    }
+  }
+
+  &--secondary {
+    background: $surface;
+    color: $accent-500;
+
+    &:hover {
+      background: $accent-500;
+      color: $text-1;
+    }
+  }
+}

package/scss/components/_breadcrumbs.scss

@@ -0,0 +1,31 @@
+@use "tokens" as *;
+
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  column-gap: 2px;
+  font-size: $fs-12;
+  color: $text-3;
+  margin-bottom: $space-8; // aire doble entre la miga y el contenido
+}
+
+.breadcrumb-link {
+  color: $text-3;
+  text-decoration: none;
+  transition: color 0.15s ease;
+
+  &:hover {
+    color: $text-1;
+  }
+}
+
+.breadcrumb-current {
+  color: $text-1;
+  font-weight: $k-fw-medium;
+}
+
+.breadcrumb-separator {
+  color: $text-3;
+  flex-shrink: 0;
+}