@edc-motor/admin-kit 0.2.0

package/README.md

@@ -0,0 +1,37 @@
+# @edc-motor/admin-kit
+
+Kit del panel de administración de **EdC Motor** (Espadas de Ceniza Motor):
+layout completo (sidebar colapsable, panel derecho contextual, migas), gestores
+CRUD declarativos (`defineResource`), y los gestores del motor listos para
+montar — imágenes/previews, PDF, páginas y bloques, configuración de la web,
+usuarios y copias de seguridad. Habla con la API de
+[`edc-motor/core`](https://packagist.org/packages/edc-motor/core) y se apoya en
+[`@edc-motor/ui`](https://www.npmjs.com/package/@edc-motor/ui).
+
+## Instalación
+
+```bash
+npm install @edc-motor/admin-kit
+```
+
+Es un **paquete fuente** (`main: src/index.ts`): lo compila la app consumidora
+con Vite (necesita `sass-embedded` y `@vitejs/plugin-vue`, ver el README de
+`@edc-motor/ui`). En el `vite.config.ts` del admin, añade también su SCSS:
+
+```ts
+loadPaths: [
+  'node_modules/@edc-motor/ui/scss',
+  'node_modules/@edc-motor/admin-kit/scss',
+],
+```
+
+## Versionado
+
+Versión *de tren* con `edc-motor/core` y `@edc-motor/ui`: 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,45 @@
+{
+  "name": "@edc-motor/admin-kit",
+  "version": "0.2.0",
+  "description": "EdC Motor — kit del panel de administración: layout, gestores CRUD, imágenes, PDF, páginas, configuración, usuarios y copias (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/admin-kit"
+  },
+  "homepage": "https://github.com/bildurre/boardgame_motor/tree/main/packages/admin-kit#readme",
+  "bugs": "https://github.com/bildurre/boardgame_motor/issues",
+  "keywords": [
+    "vue",
+    "admin",
+    "boardgame",
+    "edc-motor"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@edc-motor/ui": "^0.2.0",
+    "axios": "^1.7.0",
+    "vue-draggable-plus": "^0.6.1"
+  },
+  "peerDependencies": {
+    "@lucide/vue": "^1.0.0",
+    "vue": "^3.5.0",
+    "vue-router": "^5.0.0"
+  }
+}

package/scss/_admin-kit.scss

@@ -0,0 +1,10 @@
+@use "components/admin-layout";
+@use "components/grid";
+@use "components/entity-card";
+@use "components/filter-bar";
+@use "components/empty-state";
+@use "components/right-sidebar";
+@use "components/manager-card";
+@use "components/preview-manager";
+@use "components/pdf-manager";
+@use "components/page-blocks";

package/scss/components/_admin-layout.scss

@@ -0,0 +1,310 @@
+@use "tokens" as *;
+
+// Portado de kontuan (_app-layout.scss) y adaptado al motor.
+
+.app-layout {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+  background: $bg;
+  color: $text-1;
+}
+
+.sidebar {
+  width: $layout-sidebar-width;
+  background: $surface;
+  border-right: 1px solid $border;
+  display: flex;
+  flex-direction: column;
+  transition: width 0.2s ease;
+  flex-shrink: 0;
+  height: 100vh;
+}
+
+.sidebar-collapsed .sidebar {
+  width: 64px;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  padding: 0;
+  border-bottom: 1px solid $border;
+  height: 56px;
+
+  &--collapsed {
+    justify-content: center;
+  }
+}
+
+.sidebar-logo-link {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  flex: 1;
+  min-width: 0;
+  padding: 0 $space-3;
+}
+
+.sidebar-header .sidebar-toggle {
+  flex-shrink: 0;
+  width: auto;
+  aspect-ratio: 1;
+  height: 100%;
+  border-radius: 0;
+  border: none;
+  border-left: 1px solid $border;
+}
+
+.sidebar-header--collapsed .sidebar-toggle {
+  width: 100%;
+  aspect-ratio: auto;
+  border-left: none;
+}
+
+.sidebar-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: 1px solid $border;
+  border-radius: $radius-sm;
+  color: $accent-500;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    background: $surface-2;
+    color: $accent-600;
+  }
+}
+
+.sidebar-preferences {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $space-2;
+  padding: 0 $space-3;
+}
+
+.sidebar-divider {
+  border: none;
+  border-top: 1px solid $border;
+  margin: $space-3;
+}
+
+.sidebar-nav {
+  flex: 1;
+  padding: $space-3 $space-2;
+  overflow-y: auto;
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.sidebar-items {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+// Enlaces de navegación (los rellena el slot #nav).
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: $space-3;
+  padding: $space-2 $space-3;
+  border-radius: $radius-md;
+  color: $text-2;
+  text-decoration: none;
+  font-size: $fs-14;
+  font-weight: $k-fw-medium;
+  transition: all 0.15s ease;
+
+  .nav-icon,
+  svg {
+    flex-shrink: 0;
+  }
+
+  &:hover {
+    background: $ui-hover-bg;
+    color: $text-1;
+  }
+
+  &.router-link-active,
+  &.active {
+    background: $accent-100;
+    color: $accent-600;
+  }
+}
+
+.sidebar-user {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 56px;
+  padding: $space-2 $space-3;
+  border-top: 1px solid $border;
+  gap: $space-2;
+  flex-shrink: 0;
+
+  &--collapsed {
+    justify-content: center;
+    padding: $space-2;
+  }
+}
+
+.main-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.main-body {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  position: relative;
+}
+
+.navbar {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 $space-6;
+  background: $surface;
+  border-bottom: 1px solid $border;
+  flex-shrink: 0;
+  gap: $space-3;
+}
+
+.navbar-left {
+  display: flex;
+  align-items: center;
+  gap: $space-2;
+  min-width: 0;
+}
+
+// La marca en la barra superior (solo móvil: el sidebar está oculto).
+.navbar-brand {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  flex-shrink: 0;
+}
+
+.navbar-title {
+  font-size: $fs-16;
+  font-weight: $k-fw-semibold;
+  color: $text-1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.navbar-right {
+  display: flex;
+  align-items: center;
+  gap: $space-3;
+  flex-shrink: 0;
+}
+
+.main-content {
+  flex: 1;
+  padding: $layout-page-padding;
+  width: 100%;
+  min-width: 0;
+  overflow-y: auto;
+  container-type: inline-size;
+  container-name: content;
+}
+
+.sidebar-overlay {
+  position: fixed;
+  top: 56px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 90;
+}
+
+.hamburger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: $space-1;
+  color: $text-2;
+  border-radius: $radius-md;
+
+  &:hover {
+    background: $ui-hover-bg;
+    color: $text-1;
+  }
+}
+
+// ---- Colapsado (escritorio): solo iconos centrados ----
+.sidebar-collapsed:not(.is-mobile) {
+  .nav-item {
+    justify-content: center;
+    gap: 0;
+  }
+  .nav-label {
+    display: none;
+  }
+}
+
+// ---- Modo móvil (< bp-md): el sidebar se vuelve drawer ----
+.is-mobile {
+  .sidebar {
+    position: fixed;
+    top: 56px;
+    left: 0;
+    bottom: 0;
+    height: auto;
+    z-index: 100;
+    width: $layout-sidebar-width;
+    max-width: 100%;
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+
+    &--mobile-open {
+      transform: translateX(0);
+    }
+  }
+
+  .sidebar-header {
+    display: none;
+  }
+
+  .sidebar-toggle {
+    display: none;
+  }
+
+  .navbar {
+    padding: 0 $space-3;
+  }
+
+  .navbar-right {
+    gap: $space-2;
+    flex-shrink: 0;
+  }
+
+  .main-content {
+    padding: $space-4;
+  }
+}

package/scss/components/_empty-state.scss

@@ -0,0 +1,32 @@
+@use "tokens" as *;
+
+// Estado vacío (portado de kontuan; tokens adaptados a EdC).
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: $space-8 $space-4;
+  text-align: center;
+
+  &__icon {
+    margin-bottom: $space-4;
+    color: $text-3;
+    svg { width: 40px; height: 40px; }
+  }
+
+  &__title {
+    font-size: $fs-18;
+    font-weight: $k-fw-semibold;
+    color: $text-1;
+    margin: 0 0 $space-1;
+  }
+
+  &__description {
+    font-size: $fs-14;
+    color: $text-3;
+    max-width: 360px;
+  }
+
+  &__action { margin-top: $space-5; }
+}

package/scss/components/_entity-card.scss

@@ -0,0 +1,86 @@
+@use "tokens" as *;
+
+// Tarjeta de entidad: mezcla kontuan (contenedor + hover) y CDL (cabecera con
+// acciones + divisoria, contenido con badges/meta).
+.entity-card {
+  display: flex;
+  flex-direction: column;
+  background: $surface;
+  border: 1px solid $border;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-sm;
+  overflow: hidden;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  min-width: 0;
+
+  &--clickable {
+    cursor: pointer;
+    &:hover { border-color: $border-strong; box-shadow: $shadow-md; }
+  }
+  &--muted { opacity: 0.65; }
+  &.is-active { border-color: $accent-500; }
+
+  // Franja superior opcional (emblema/imagen).
+  &__media {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    background: $surface-2;
+
+    img { width: 100%; height: 100%; object-fit: cover; }
+  }
+
+  // Cabecera: título + acciones, con divisoria (CDL).
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: $space-2;
+    padding: $space-3 $space-4;
+    border-bottom: 1px solid $border;
+    min-width: 0;
+  }
+
+  &__title {
+    flex: 1;
+    margin: 0;
+    font-size: $fs-16;
+    font-weight: $k-fw-semibold;
+    color: $text-1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    flex-shrink: 0;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: $space-2;
+    padding: $space-3 $space-4;
+  }
+
+  &__badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $space-1;
+  }
+
+  &__meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: $space-3;
+    font-size: $fs-13;
+    color: $text-3;
+  }
+}

package/scss/components/_filter-bar.scss

@@ -0,0 +1,53 @@
+@use "tokens" as *;
+
+// Barra de filtros estilo kontuan (búsqueda con icono). Va por encima de las tabs.
+.filter-bar {
+  display: flex;
+  align-items: center;
+  gap: $space-3;
+  flex-wrap: wrap;
+  margin-bottom: $space-4;
+
+  &__search {
+    position: relative;
+    flex: 1;
+    min-width: 200px;
+  }
+
+  &__search-icon {
+    position: absolute;
+    right: $space-3;
+    top: 50%;
+    transform: translateY(-50%);
+    color: $text-3;
+    pointer-events: none;
+  }
+
+  &__search-input {
+    width: 100%;
+    height: 40px;
+    padding: 0 36px 0 $space-3;
+    background: $surface-2;
+    color: $text-1;
+    border: 1px solid $border;
+    border-radius: $radius-md;
+    font-family: $k-font-sans;
+    font-size: $fs-14;
+    transition: border-color 0.15s, box-shadow 0.15s;
+
+    &::placeholder { color: $text-3; }
+    &:hover:not(:focus) { border-color: $border-strong; }
+    &:focus {
+      outline: none;
+      border-color: $accent-500;
+      box-shadow: 0 0 0 3px color-mix(in srgb, $accent-500 25%, transparent);
+    }
+  }
+
+  &__extra {
+    display: flex;
+    align-items: center;
+    gap: $space-2;
+    flex-shrink: 0;
+  }
+}

package/scss/components/_grid.scss

@@ -0,0 +1,31 @@
+@use "tokens" as *;
+
+// Grid responsive (portado de kontuan). Columnas por breakpoint del contenedor
+// `content` para que coincida con el ancho real disponible.
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+
+  &--gap-sm { gap: $space-3; }
+  &--gap-md { gap: $space-4; }
+  &--gap-lg { gap: $space-5; }
+
+  @for $i from 1 through 6 {
+    &--base-#{$i} { grid-template-columns: repeat(#{$i}, 1fr); }
+  }
+  @for $i from 1 through 6 {
+    &--sm-#{$i} {
+      @container content (min-width: #{$bp-sm}) { grid-template-columns: repeat(#{$i}, 1fr); }
+    }
+  }
+  @for $i from 1 through 6 {
+    &--md-#{$i} {
+      @container content (min-width: #{$bp-md}) { grid-template-columns: repeat(#{$i}, 1fr); }
+    }
+  }
+  @for $i from 1 through 6 {
+    &--lg-#{$i} {
+      @container content (min-width: #{$bp-lg}) { grid-template-columns: repeat(#{$i}, 1fr); }
+    }
+  }
+}