@edc-motor/admin-kit 0.2.0

package/scss/components/_manager-card.scss

@@ -0,0 +1,329 @@
+@use "tokens" as *;
+
+// Piezas compartidas por los gestores del admin (previews y PDF).
+// Mobile-first: todo funciona en una columna estrecha; la rejilla pasa a dos
+// columnas según el ancho del contenedor `content` (el área de contenido del
+// AdminLayout), no del viewport.
+
+.manager-container {
+  display: grid;
+  gap: $space-5;
+  // Deja aire bajo las migas y esquiva el asa del panel derecho.
+  margin-top: $space-4;
+}
+
+.manager-bar {
+  display: flex;
+  justify-content: flex-end;
+  gap: $space-2;
+  flex-wrap: wrap;
+}
+
+.manager-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: $space-4;
+  align-items: start;
+
+  @container content (min-width: #{$bp-md}) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.manager-card {
+  background: $surface;
+  border: 1px solid $border;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-sm;
+  overflow: hidden;
+  min-width: 0;
+  cursor: pointer; // TODA la tarjeta selecciona (menos sus controles)
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  // La tarjeta es su propio contenedor `content`: los botones con icono se
+  // apilan según el ancho de la TARJETA, no de la página (patrón kontuan).
+  container-name: content;
+  container-type: inline-size;
+
+  &:hover {
+    border-color: $border-strong;
+    box-shadow: $shadow-md;
+
+    .manager-card__hint { color: $accent-500; }
+  }
+
+  &:focus-visible {
+    outline: 2px solid $accent-500;
+    outline-offset: 2px;
+  }
+
+  &.is-active {
+    border-color: $accent-500;
+  }
+
+  &__head {
+    display: flex;
+    align-items: center;
+    gap: $space-2;
+    color: $text-1;
+    padding: $space-3 $space-4;
+    min-width: 0;
+  }
+
+  &__title {
+    font-size: $fs-16;
+    font-weight: $k-fw-semibold;
+    min-width: 0;
+  }
+
+  // El aspecto lo pone el .chip unificado (@edc-motor/ui); aquí solo la posición.
+  &__chip {
+    margin-left: auto;
+    flex: 0 0 auto;
+  }
+
+  &__hint {
+    flex: 0 0 auto;
+    color: $text-3;
+
+    // Sin chip, el icono se va al borde derecho.
+    &:first-of-type { margin-left: auto; }
+    .manager-card__chip + & { margin-left: 0; }
+  }
+
+  &__meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: $space-1 $space-3;
+    padding: 0 $space-4 $space-3;
+  }
+
+  &__body {
+    border-top: 1px solid $border;
+    background: $surface-2;
+    padding: $space-3 $space-4;
+    display: grid;
+    gap: $space-3;
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: $space-2;
+    border-top: 1px solid $border;
+    padding: $space-3 $space-4;
+  }
+}
+
+.manager-stat {
+  font-size: $fs-13;
+  color: $text-2;
+
+  strong { color: $text-1; }
+  &.is-ok strong { color: $success; }
+  &.is-warn strong { color: $warning; }
+}
+
+// ---------------------------------------------------------------------------
+// Contenido del panel derecho de los gestores: selector con buscador +
+// detalle del elemento elegido.
+// ---------------------------------------------------------------------------
+
+.manager-panel {
+  display: grid;
+  gap: $space-3;
+
+  &__empty {
+    color: $text-3;
+    font-size: $fs-13;
+    margin: 0;
+  }
+
+  &__kicker {
+    color: $text-3;
+    font-size: $fs-12;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin: 0;
+  }
+
+  // Separador entre bloques del panel (acciones | sección | sección…):
+  // TODOS los paneles derechos siguen el mismo orden.
+  &__divider {
+    border: none;
+    border-top: 1px solid $border;
+    margin: $space-1 0;
+    width: 100%;
+  }
+}
+
+.manager-detail {
+  display: grid;
+  gap: $space-3;
+  border-top: 1px dashed $border;
+  padding-top: $space-3;
+
+  &__title {
+    margin: 0;
+    font-size: $fs-16;
+    overflow-wrap: anywhere;
+  }
+
+  &__row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: $space-1;
+  }
+
+  &__meta {
+    color: $text-2;
+    font-size: $fs-13;
+    margin: 0;
+  }
+
+  &__error {
+    color: $danger;
+    font-size: $fs-13;
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  &__figures {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: $space-2;
+  }
+
+  &__figure {
+    margin: 0;
+    display: grid;
+    gap: $space-1;
+    justify-items: center;
+
+    img,
+    .manager-detail__hole {
+      width: 100%;
+      border-radius: $radius-sm;
+      border: 1px solid $border;
+      background: $surface-2;
+    }
+
+    figcaption {
+      color: $text-3;
+      font-size: $fs-12;
+    }
+
+    &.is-missing figcaption { color: $warning; }
+  }
+
+  &__hole {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 72px;
+    color: $text-3;
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $space-2;
+
+    // Botones de acción del panel: TODOS con su color, en CONTORNO — borde
+    // y texto/stroke del color de la acción; en hover el color pasa al
+    // fondo y el texto al color de texto normal.
+    @each $variant, $color in (
+      primary: $accent-500,
+      info: $info,
+      warning: $warning,
+      success: $success,
+      danger: $danger,
+    ) {
+      .edc-button--#{$variant} {
+        background: transparent;
+        border-color: $color;
+        color: $color;
+
+        &:hover:not(:disabled) {
+          background: $color;
+          border-color: $color;
+          color: $text-1;
+        }
+      }
+    }
+  }
+
+  // Listado compacto del panel (p.ej. bloques de la página seleccionada):
+  // cada fila es UNA línea, con el resto truncado.
+  &__rows {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: $space-2;
+  }
+
+  &__row-line {
+    display: flex;
+    align-items: baseline;
+    gap: $space-2;
+    min-width: 0;
+    font-size: $fs-13;
+
+    strong {
+      flex: 0 0 auto;
+      color: $text-1;
+    }
+  }
+
+  &__row-text {
+    color: $text-3;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // Campos del bloque seleccionado: etiqueta + valor; los valores largos se
+  // recortan a unas pocas líneas.
+  &__field {
+    display: grid;
+    gap: 2px;
+    min-width: 0;
+    font-size: $fs-13;
+
+    dt {
+      color: $text-3;
+      font-size: $fs-12;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+
+    dd {
+      margin: 0;
+      color: $text-2;
+      overflow-wrap: anywhere;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 4;
+      line-clamp: 4;
+      overflow: hidden;
+    }
+  }
+
+  &__fields {
+    margin: 0;
+    display: grid;
+    gap: $space-2;
+  }
+
+  &__thumb {
+    max-width: 120px;
+    border-radius: $radius-sm;
+    border: 1px solid $border;
+    background: $surface-2;
+  }
+}

package/scss/components/_page-blocks.scss

@@ -0,0 +1,179 @@
+@use "tokens" as *;
+
+// Gestor de bloques de una página (PageBlocks) + renderer del DSL de campos.
+.page-blocks {
+  display: grid;
+  gap: $space-3;
+
+  &__bar {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &__palette { position: relative; }
+
+  &__menu {
+    position: absolute;
+    top: calc(100% + #{$space-1});
+    right: 0;
+    z-index: 40;
+    min-width: 220px;
+    background: $surface;
+    border: 1px solid $border-strong;
+    border-radius: $radius-md;
+    box-shadow: $shadow-md;
+    padding: $space-1;
+    display: grid;
+    gap: 1px;
+  }
+
+  &__menu-item {
+    background: none;
+    border: 0;
+    border-radius: $radius-sm;
+    color: $text-1;
+    cursor: pointer;
+    padding: $space-2 $space-3;
+    text-align: left;
+    font-size: $fs-13;
+
+    &:hover { background: $surface-2; }
+    // Los bloques con-datos del juego, marcados.
+    &.is-data { color: $accent-500; }
+  }
+
+  &__empty { color: $text-3; margin: 0; }
+
+  &__list {
+    display: grid;
+    gap: $space-2;
+  }
+
+  // Fila de bloque: SIN wrap por elemento — en estrecho TODAS las filas
+  // cambian a la vez a un layout apilado (grid-areas por container query).
+  &__item {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-areas:
+      "grip type    buttons"
+      "grip summary summary"
+      "grip flags   flags";
+    align-items: center;
+    gap: $space-1 $space-2;
+    border: 1px solid $border;
+    border-radius: $radius-md;
+    background: $surface;
+    padding: $space-2 $space-3;
+    min-width: 0;
+    cursor: pointer; // toda la fila selecciona (panel derecho)
+    transition: border-color 0.15s ease;
+
+    @container content (min-width: 640px) {
+      grid-template-columns: auto auto minmax(0, 1fr) auto auto;
+      grid-template-areas: "grip type summary flags buttons";
+    }
+
+    &:hover { border-color: $border-strong; }
+    &.is-active { border-color: $accent-500; }
+  }
+
+  &__grip {
+    grid-area: grip;
+    display: inline-flex;
+    color: $text-3;
+    cursor: grab;
+
+    &:active { cursor: grabbing; }
+  }
+
+  &__type { grid-area: type; font-weight: $k-fw-semibold; white-space: nowrap; }
+
+  &__summary {
+    grid-area: summary;
+    min-width: 0;
+    color: $text-3;
+    font-size: $fs-13;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__flags { grid-area: flags; display: flex; gap: $space-1; }
+
+  &__buttons {
+    grid-area: buttons;
+    margin-left: auto;
+    display: flex;
+    gap: $space-1;
+  }
+
+  &__common {
+    border-top: 1px dashed $border;
+    padding-top: $space-3;
+
+    summary {
+      cursor: pointer;
+      color: $text-2;
+      font-size: $fs-13;
+      margin-bottom: $space-3;
+    }
+
+    display: grid;
+    gap: $space-3;
+  }
+}
+
+.schema-fields {
+  display: grid;
+  gap: $space-4;
+
+  &__color,
+  &__image {
+    display: grid;
+    gap: $space-1;
+  }
+
+  // Anidados del DSL: group (fieldset) y repeater (filas numeradas con
+  // añadir/quitar/reordenar).
+  &__group,
+  &__row {
+    margin: 0;
+    border: 1px dashed $border;
+    border-radius: $radius-md;
+    padding: $space-3;
+    display: grid;
+    gap: $space-3;
+    min-width: 0;
+
+    legend {
+      padding: 0 $space-1;
+    }
+  }
+
+  &__repeater {
+    display: grid;
+    gap: $space-2;
+    justify-items: start;
+
+    > .form-field__label { justify-self: stretch; }
+  }
+
+  &__row { width: 100%; }
+
+  &__row-bar {
+    display: flex;
+    align-items: center;
+    gap: $space-1;
+    justify-content: flex-end;
+  }
+
+  &__row-index {
+    margin-right: auto;
+    color: $text-3;
+    font-size: $fs-12;
+    font-weight: 600;
+  }
+}
+
+// Item fantasma del drag (vue-draggable-plus / SortableJS).
+.sortable-ghost { opacity: 0.4; }

package/scss/components/_pdf-manager.scss

@@ -0,0 +1,46 @@
+@use "tokens" as *;
+
+// Gestor de PDF (PdfManager), sobre .manager-card / .manager-grid y el panel
+// derecho (ver _manager-card.scss). Cada PDF del panel es una entrada
+// compacta: idioma + estado + acciones, con fecha o error debajo.
+
+.pdf-entry {
+  border: 1px solid $border;
+  border-radius: $radius-md;
+  background: $surface;
+  padding: $space-2 $space-3;
+  display: grid;
+  gap: $space-1;
+
+  &__head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: $space-1 $space-2;
+  }
+
+  &__locale {
+    font-weight: $k-fw-bold;
+    min-width: 2.5em;
+  }
+
+  &__buttons {
+    margin-left: auto;
+    display: flex;
+    gap: $space-1;
+    align-items: center;
+  }
+
+  &__meta {
+    color: $text-3;
+    font-size: $fs-12;
+    margin: 0;
+  }
+
+  &__error {
+    color: $danger;
+    font-size: $fs-12;
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+}

package/scss/components/_preview-manager.scss

@@ -0,0 +1,5 @@
+@use "tokens" as *;
+
+// Gestor de previews PNG (PreviewManager): tarjetas fijas con estadísticas
+// (ver _manager-card.scss) y selector + detalle en el panel derecho. Aquí no
+// queda nada específico: todo vive en las piezas compartidas (.manager-*).

package/scss/components/_right-sidebar.scss

@@ -0,0 +1,152 @@
+@use "tokens" as *;
+
+// Panel lateral derecho contextual (portado de kontuan): lo registra cada
+// vista con useRightSidebar() y lo pinta <RightSidebar />, montado una vez
+// por AdminLayout. El comportamiento móvil usa la clase `is-mobile` que el
+// layout pone en su raíz.
+
+// En estrecho, con el drawer IZQUIERDO abierto, la barra derecha (panel,
+// asa y overlay) se esconde: nunca conviven los dos laterales superpuestos.
+.app-layout.left-drawer-open {
+  .right-sidebar,
+  .right-sidebar-handle,
+  .right-sidebar-overlay {
+    display: none;
+  }
+}
+
+.right-sidebar {
+  width: 320px;
+  flex-shrink: 0;
+  background: $surface;
+  border-left: 1px solid $border;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: width 0.2s ease, transform 0.25s ease;
+
+  &--collapsed {
+    width: 0;
+    border-left: 0;
+  }
+}
+
+.right-sidebar__header {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  height: 48px;
+  width: 100%;
+  border-bottom: 1px solid $border;
+  flex-shrink: 0;
+}
+
+.right-sidebar__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  width: 48px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-right: 1px solid $border;
+  color: $accent-500;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background: $surface-2;
+    color: $accent-600;
+  }
+}
+
+.right-sidebar__title {
+  flex: 1;
+  font-size: $fs-14;
+  font-weight: $k-fw-semibold;
+  color: $text-1;
+  margin: 0;
+  padding: 0 $space-3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.right-sidebar__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: $space-3;
+  // Contenedor `content`: los botones con icono pasan a modo vertical
+  // (mini-etiqueta bajo el icono) en el ancho del panel.
+  container-type: inline-size;
+  container-name: content;
+}
+
+.right-sidebar-handle {
+  position: fixed;
+  top: 64px;
+  right: 0;
+  z-index: 95;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 48px;
+  padding: 0;
+  background: $surface;
+  border: 1px solid $accent-500;
+  border-right: none;
+  border-radius: $radius-md 0 0 $radius-md;
+  color: $accent-500;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    background: $surface-2;
+    color: $accent-600;
+  }
+
+  &--flash {
+    animation: right-sidebar-handle-flash 1.1s ease-in-out;
+  }
+}
+
+@keyframes right-sidebar-handle-flash {
+  0%, 50%, 100% {
+    background: $surface;
+    color: $accent-500;
+  }
+  25%, 75% {
+    background: $accent-500;
+    color: white;
+  }
+}
+
+.right-sidebar-overlay {
+  position: fixed;
+  top: 56px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgb(0 0 0 / 40%);
+  z-index: 90;
+}
+
+// Modo drawer (por debajo del umbral del componente): superpuesto al
+// contenido para que el main nunca quede más estrecho que las barras.
+.right-sidebar--drawer {
+  position: fixed;
+  top: 56px;
+  right: 0;
+  bottom: 0;
+  height: auto;
+  z-index: 100;
+  width: min(320px, 100vw);
+  transform: translateX(100%);
+
+  &.right-sidebar--drawer-open {
+    transform: translateX(0);
+  }
+}