@edc-motor/admin-kit 0.4.23 → 0.4.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/admin-kit",
-  "version": "0.4.23",
+  "version": "0.4.25",
   "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",
@@ -33,9 +33,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@edc-motor/ui": "^0.4.23",
-    "axios": "^1.7.0",
-    "vue-draggable-plus": "^0.6.1"
+    "@edc-motor/ui": "^0.4.25",
+    "axios": "^1.7.0"
   },
   "peerDependencies": {
     "@lucide/vue": "^1.0.0",

package/scss/_admin-kit.scss

@@ -8,3 +8,4 @@
 @use "components/preview-manager";
 @use "components/pdf-manager";
 @use "components/page-blocks";
+@use "components/menu-manager";

package/scss/components/_menu-manager.scss

@@ -0,0 +1,141 @@
+@use "tokens" as *;
+
+// Configurador del menú público (doc 10 ampliado, rediseño sin grupos):
+// filas tipo PageBlocks (asa + icono + etiqueta + badges + acciones),
+// arrastrables (drag & drop nativo) además de las flechas. Nada se persiste
+// hasta "Guardar": la barra superior trae el aviso de cambios sin guardar y
+// Descartar/Guardar.
+.menu-manager {
+  display: grid;
+  gap: $space-3;
+
+  &__bar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: $space-3;
+  }
+
+  &__dirty {
+    color: $warning;
+    font-size: $fs-13;
+    font-weight: $k-fw-semibold;
+    margin-right: auto;
+  }
+
+  &__empty { color: $text-3; margin: 0; }
+
+  &__list {
+    display: grid;
+    gap: $space-2;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: $space-2;
+    border: 1px solid $border;
+    border-radius: $radius-md;
+    background: $surface;
+    padding: $space-2 $space-3;
+    min-width: 0;
+    position: relative;
+    transition: border-color 0.15s ease, opacity 0.15s ease;
+
+    &:hover { border-color: $border-strong; }
+    &.is-hidden { opacity: 0.65; }
+    &.is-dragging { opacity: 0.4; }
+
+    // Indicador de inserción: línea antes/después de la fila.
+    &.drop-before::before,
+    &.drop-after::after {
+      content: "";
+      position: absolute;
+      left: $space-2;
+      right: $space-2;
+      height: 2px;
+      background: $accent-500;
+      border-radius: $radius-pill;
+    }
+    &.drop-before::before { top: -$space-1; }
+    &.drop-after::after { bottom: -$space-1; }
+
+    // Destino válido para anidar: resalta toda la fila.
+    &.drop-inside {
+      border-color: $accent-500;
+      background: color-mix(in srgb, $accent-500 10%, $surface);
+    }
+  }
+
+  // Hijas de una página: sangradas justo debajo de ella (mismo lenguaje que
+  // los bloques hijos de PageBlocks).
+  &__item.is-child { margin-left: $space-7; }
+
+  &__grip {
+    display: inline-flex;
+    color: $text-3;
+    flex: 0 0 auto;
+    cursor: grab;
+    touch-action: none;
+
+    &:active { cursor: grabbing; }
+  }
+
+  &__icon {
+    display: inline-flex;
+    color: $text-3;
+    flex: 0 0 auto;
+  }
+
+  &__label {
+    font-weight: $k-fw-semibold;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-right: auto;
+  }
+
+  &__badges { display: flex; gap: $space-1; }
+
+  &__moves {
+    display: flex;
+    gap: 2px;
+  }
+
+  &__move {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: 1px solid $border;
+    border-radius: $radius-sm;
+    color: $text-2;
+    cursor: pointer;
+    padding: $space-1;
+    transition: background-color 0.15s ease;
+
+    &:hover:not(:disabled) { background: $surface-2; }
+    &:disabled { opacity: 0.4; cursor: default; }
+  }
+
+  &__visibility {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: 1px solid color-mix(in srgb, $success 45%, transparent);
+    border-radius: $radius-sm;
+    color: $success;
+    cursor: pointer;
+    padding: $space-1;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+
+    &.is-on {
+      background: $success;
+      border-color: $success;
+      @include contrast-text($success);
+    }
+  }
+}

package/scss/components/_page-blocks.scss

@@ -65,8 +65,9 @@
     background: $surface;
     padding: $space-2 $space-3;
     min-width: 0;
+    position: relative;
     cursor: pointer; // toda la fila selecciona (panel derecho)
-    transition: border-color 0.15s ease;
+    transition: border-color 0.15s ease, opacity 0.15s ease;
 
     @container content (min-width: 640px) {
       grid-template-columns: auto auto auto minmax(0, 1fr) auto;
@@ -75,6 +76,28 @@
 
     &:hover { border-color: $border-strong; }
     &.is-active { border-color: $accent-500; }
+    &.is-dragging { opacity: 0.4; }
+
+    // Indicador de inserción (antes/después) y de destino válido (encima,
+    // anida bajo esa fila) del drag & drop nativo — mismo lenguaje que el
+    // MenuManager.
+    &.drop-before::before,
+    &.drop-after::after {
+      content: "";
+      position: absolute;
+      left: $space-2;
+      right: $space-2;
+      height: 2px;
+      background: $accent-500;
+      border-radius: $radius-pill;
+    }
+    &.drop-before::before { top: -$space-1; }
+    &.drop-after::after { bottom: -$space-1; }
+
+    &.drop-inside {
+      border-color: $accent-500;
+      background: color-mix(in srgb, $accent-500 10%, $surface);
+    }
   }
 
   &__grip {
@@ -141,8 +164,9 @@
     > .form-field { margin-top: $space-3; }
   }
 
-  // Bloques hijos (parent_id): tarjeta sangrada bajo su padre.
-  &__item.is-child { margin-left: $space-7; }
+  // Bloques anidados (parent_id, sin límite de niveles): sangría por
+  // profundidad REAL — `--depth` lo pone el componente en línea.
+  &__item.is-child { margin-left: calc(var(--depth, 1) * #{$space-7}); }
 }
 
 .schema-fields {
@@ -196,6 +220,3 @@
     font-weight: 600;
   }
 }
-
-// Item fantasma del drag (vue-draggable-plus / SortableJS).
-.sortable-ghost { opacity: 0.4; }

package/src/content/MenuManager.vue

@@ -0,0 +1,424 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+import type { AxiosInstance } from 'axios'
+import {
+  ArrowDown,
+  ArrowUp,
+  Compass,
+  Eye,
+  EyeOff,
+  File,
+  GripVertical,
+  RotateCcw,
+  Save,
+} from '@lucide/vue'
+import { BaseButton, useToast } from '@edc-motor/ui'
+
+// Configurador del menú de la web pública (doc 10 ampliado, rediseño sin
+// grupos): "si quieres un grupo, haz una página" — la jerarquía SIEMPRE es
+// la del CRM (una página con hijas hace de desplegable); una ruta también
+// puede colgar de una página raíz. El gestor trabaja sobre una copia LOCAL
+// del árbol (flechas, drag & drop nativo y el interruptor de visibilidad
+// solo mutan el estado local) y no persiste NADA hasta pulsar "Guardar",
+// que manda el árbol entero con `PUT /admin/menu`. "Descartar" recarga del
+// servidor. Agnóstico de i18n (DC-29): textos por prop; `routeLabels` los
+// pone el juego y `displayLocale` el idioma actual del admin (con fallback
+// al primer valor no vacío, patrón `firstText` del AppHeader público).
+
+export interface MenuManagerLabels {
+  empty: string
+  hidden: string
+  draft: string
+  moveUp: string
+  moveDown: string
+  visible: string
+  save: string
+  discard: string
+  unsaved: string
+  saved: string
+  error: string
+}
+
+const defaultLabels: MenuManagerLabels = {
+  empty: 'El menú aún no tiene elementos.',
+  hidden: 'Oculto',
+  draft: 'Borrador',
+  moveUp: 'Subir',
+  moveDown: 'Bajar',
+  visible: 'Visible',
+  save: 'Guardar',
+  discard: 'Descartar',
+  unsaved: 'Cambios sin guardar',
+  saved: 'Menú guardado.',
+  error: 'No se ha podido completar la acción.',
+}
+
+const props = withDefaults(
+  defineProps<{
+    api: AxiosInstance
+    /** Etiqueta visible de cada route_key que el juego ofrece al menú. */
+    routeLabels?: Record<string, string>
+    /** Idioma actual del admin (vue-i18n): pinta los títulos de página en él. */
+    displayLocale: string
+    labels?: Partial<MenuManagerLabels>
+  }>(),
+  { routeLabels: () => ({}), labels: () => ({}) },
+)
+
+const L = reactive({ ...defaultLabels, ...props.labels }) as MenuManagerLabels
+
+const toast = useToast()
+
+interface MenuPageInfo {
+  id: number
+  title: Record<string, string>
+  is_published: boolean
+}
+
+interface MenuNode {
+  id: number
+  type: 'page' | 'route'
+  is_visible: boolean
+  order: number
+  route_key: string | null
+  page: MenuPageInfo | null
+  children: MenuNode[]
+}
+
+const tree = ref<MenuNode[]>([])
+const busy = ref(false)
+const saving = ref(false)
+// Foto del último estado GUARDADO (servidor): compara contra el árbol local
+// para saber si hay cambios sin guardar (badge + aviso al salir).
+const savedSnapshot = ref('')
+
+/** Aplana el árbol (padre seguido de sus hijas) al formato del PUT. */
+function flatten(
+  nodes: MenuNode[],
+  parentId: number | null,
+): { id: number; parent_id: number | null; is_visible: boolean }[] {
+  const out: { id: number; parent_id: number | null; is_visible: boolean }[] = []
+  for (const node of nodes) {
+    out.push({ id: node.id, parent_id: parentId, is_visible: node.is_visible })
+    out.push(...flatten(node.children, node.id))
+  }
+  return out
+}
+
+const isDirty = computed(() => JSON.stringify(flatten(tree.value, null)) !== savedSnapshot.value)
+
+async function load() {
+  busy.value = true
+  try {
+    const { data } = await props.api.get('/admin/menu')
+    tree.value = data.data
+    savedSnapshot.value = JSON.stringify(flatten(tree.value, null))
+  } catch {
+    toast.danger(L.error)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function save() {
+  saving.value = true
+  try {
+    const { data } = await props.api.put('/admin/menu', { items: flatten(tree.value, null) })
+    tree.value = data.data
+    savedSnapshot.value = JSON.stringify(flatten(tree.value, null))
+    toast.success(L.saved)
+  } catch {
+    toast.danger(L.error)
+  } finally {
+    saving.value = false
+  }
+}
+
+function discard() {
+  load()
+}
+
+// Filas aplanadas para pintar (profundidad máxima 1: hijas de una página
+// raíz, indentadas justo debajo de ella — una ruta nunca es madre).
+interface Row {
+  node: MenuNode
+  depth: 0 | 1
+  parentId: number | null
+}
+const rows = computed<Row[]>(() => {
+  const out: Row[] = []
+  function walk(nodes: MenuNode[], depth: 0 | 1, parentId: number | null) {
+    for (const node of nodes) {
+      out.push({ node, depth, parentId })
+      if (node.children.length) walk(node.children, 1, node.id)
+    }
+  }
+  walk(tree.value, 0, null)
+  return out
+})
+
+function listFor(parentId: number | null): MenuNode[] | null {
+  if (parentId === null) return tree.value
+  const parent = findNode(tree.value, parentId)
+  return parent ? parent.children : null
+}
+
+function findNode(nodes: MenuNode[], id: number): MenuNode | null {
+  for (const node of nodes) {
+    if (node.id === id) return node
+    const found = findNode(node.children, id)
+    if (found) return found
+  }
+  return null
+}
+
+function siblingIndex(row: Row): number {
+  return (listFor(row.parentId) ?? []).findIndex((n) => n.id === row.node.id)
+}
+function canMoveUp(row: Row): boolean {
+  return siblingIndex(row) > 0
+}
+function canMoveDown(row: Row): boolean {
+  const list = listFor(row.parentId)
+  if (!list) return false
+  const idx = siblingIndex(row)
+  return idx >= 0 && idx < list.length - 1
+}
+
+/** Subir/bajar: solo reordena dentro del mismo nivel (no cambia de madre). */
+function move(row: Row, direction: 'up' | 'down') {
+  const list = listFor(row.parentId)
+  if (!list) return
+  const idx = list.findIndex((n) => n.id === row.node.id)
+  const swapWith = direction === 'up' ? idx - 1 : idx + 1
+  if (idx < 0 || swapWith < 0 || swapWith >= list.length) return
+  ;[list[idx], list[swapWith]] = [list[swapWith], list[idx]]
+}
+
+function toggleVisible(row: Row) {
+  row.node.is_visible = !row.node.is_visible
+}
+
+/** Primer texto disponible en `displayLocale`, con fallback al primero que haya. */
+function displayText(map: Record<string, string> | null | undefined): string {
+  if (!map) return ''
+  return map[props.displayLocale] || Object.values(map).find(Boolean) || ''
+}
+
+function labelOf(node: MenuNode): string {
+  if (node.type === 'page') return node.page ? displayText(node.page.title) : ''
+  return props.routeLabels[node.route_key ?? ''] ?? node.route_key ?? ''
+}
+
+// --- Drag & drop nativo (HTML5, sin dependencias) --------------------------
+// Fila arrastrable con asa (GripVertical): soltar en el tercio superior/
+// inferior de otra fila la reordena como hermana (antes/después) en el
+// nivel de la fila destino; soltar en el tercio central de una página RAÍZ
+// la convierte en su madre (si es válido). Arrastrar una hija hasta el
+// hueco entre filas raíz la saca a la raíz (es "antes/después" de una fila
+// con depth 0). Restricciones de un nivel: una página CON hijas no puede
+// pasar a ser hija de nadie; una ruta nunca es madre.
+const dragged = ref<{ node: MenuNode; parentId: number | null } | null>(null)
+const dropTarget = ref<{
+  id: number
+  parentId: number | null
+  position: 'before' | 'after' | 'inside'
+} | null>(null)
+
+function canNestInside(row: Row): boolean {
+  if (!dragged.value) return false
+  if (row.node.type !== 'page' || row.depth !== 0) return false
+  if (row.node.id === dragged.value.node.id) return false
+  return dragged.value.node.children.length === 0
+}
+
+function canPlaceSibling(row: Row): boolean {
+  if (!dragged.value) return false
+  if (row.node.id === dragged.value.node.id) return false
+  // Hija de nadie si el arrastrado tiene sus propias hijas (un solo nivel).
+  if (row.depth === 1 && dragged.value.node.children.length > 0) return false
+  return true
+}
+
+function onDragStart(row: Row, event: DragEvent) {
+  dragged.value = { node: row.node, parentId: row.parentId }
+  event.dataTransfer?.setData('text/plain', String(row.node.id))
+  if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'
+}
+
+function onDragOver(row: Row, event: DragEvent) {
+  if (!dragged.value || dragged.value.node.id === row.node.id) {
+    dropTarget.value = null
+    return
+  }
+  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
+  const ratio = (event.clientY - rect.top) / rect.height
+  const nestable = canNestInside(row)
+
+  let position: 'before' | 'after' | 'inside'
+  if (nestable && ratio > 0.3 && ratio < 0.7) {
+    position = 'inside'
+  } else {
+    if (!canPlaceSibling(row)) {
+      dropTarget.value = null
+      return
+    }
+    position = ratio < 0.5 ? 'before' : 'after'
+  }
+  dropTarget.value = { id: row.node.id, parentId: row.parentId, position }
+}
+
+function onDragLeave(row: Row, event: DragEvent) {
+  const related = event.relatedTarget as Node | null
+  const current = event.currentTarget as HTMLElement
+  if (related && current.contains(related)) return
+  if (dropTarget.value?.id === row.node.id) dropTarget.value = null
+}
+
+function onDrop(row: Row, event: DragEvent) {
+  event.preventDefault()
+  const target = dropTarget.value
+  const source = dragged.value
+  cleanupDrag()
+  if (!target || !source || target.id !== row.node.id) return
+  applyDrop(source, target)
+}
+
+function onDragEnd() {
+  cleanupDrag()
+}
+
+function cleanupDrag() {
+  dragged.value = null
+  dropTarget.value = null
+}
+
+function applyDrop(
+  source: { node: MenuNode; parentId: number | null },
+  target: { id: number; parentId: number | null; position: 'before' | 'after' | 'inside' },
+) {
+  const sourceList = listFor(source.parentId)
+  if (!sourceList) return
+  const sourceIdx = sourceList.findIndex((n) => n.id === source.node.id)
+  if (sourceIdx === -1) return
+  sourceList.splice(sourceIdx, 1)
+
+  if (target.position === 'inside') {
+    const targetNode = findNode(tree.value, target.id)
+    targetNode?.children.push(source.node)
+    return
+  }
+
+  const destList = listFor(target.parentId)
+  if (!destList) {
+    // No debería pasar (el destino existe); por si acaso, no se pierde el nodo.
+    sourceList.splice(sourceIdx, 0, source.node)
+    return
+  }
+  let destIdx = destList.findIndex((n) => n.id === target.id)
+  if (destIdx === -1) {
+    destList.push(source.node)
+    return
+  }
+  if (target.position === 'after') destIdx += 1
+  destList.splice(destIdx, 0, source.node)
+}
+
+onMounted(load)
+
+defineExpose({ isDirty })
+</script>
+
+<template>
+  <div class="menu-manager">
+    <div class="menu-manager__bar">
+      <span v-if="isDirty" class="menu-manager__dirty">{{ L.unsaved }}</span>
+      <BaseButton variant="secondary" :disabled="!isDirty || saving || busy" @click="discard">
+        <template #icon><RotateCcw :size="16" /></template>
+        {{ L.discard }}
+      </BaseButton>
+      <BaseButton :disabled="!isDirty || saving || busy" @click="save">
+        <template #icon><Save :size="16" /></template>
+        {{ L.save }}
+      </BaseButton>
+    </div>
+
+    <p v-if="!busy && !rows.length" class="menu-manager__empty">{{ L.empty }}</p>
+
+    <div class="menu-manager__list">
+      <article
+        v-for="row in rows"
+        :key="row.node.id"
+        class="menu-manager__item"
+        draggable="true"
+        :class="{
+          'is-child': row.depth === 1,
+          'is-hidden': !row.node.is_visible,
+          'is-dragging': dragged?.node.id === row.node.id,
+          'drop-before': dropTarget?.id === row.node.id && dropTarget.position === 'before',
+          'drop-after': dropTarget?.id === row.node.id && dropTarget.position === 'after',
+          'drop-inside': dropTarget?.id === row.node.id && dropTarget.position === 'inside',
+        }"
+        @dragstart="onDragStart(row, $event)"
+        @dragover.prevent="onDragOver(row, $event)"
+        @dragleave="onDragLeave(row, $event)"
+        @drop="onDrop(row, $event)"
+        @dragend="onDragEnd"
+      >
+        <span class="menu-manager__grip"><GripVertical :size="15" /></span>
+
+        <span class="menu-manager__icon">
+          <File v-if="row.node.type === 'page'" :size="16" />
+          <Compass v-else :size="16" />
+        </span>
+
+        <span class="menu-manager__label">{{ labelOf(row.node) }}</span>
+
+        <span class="menu-manager__badges">
+          <span v-if="!row.node.is_visible" class="chip is-missing">{{ L.hidden }}</span>
+          <span
+            v-if="row.node.type === 'page' && row.node.page && !row.node.page.is_published"
+            class="chip is-missing"
+          >
+            {{ L.draft }}
+          </span>
+        </span>
+
+        <span class="menu-manager__moves">
+          <button
+            type="button"
+            class="menu-manager__move"
+            :title="L.moveUp"
+            :aria-label="L.moveUp"
+            :disabled="!canMoveUp(row)"
+            @click="move(row, 'up')"
+          >
+            <ArrowUp :size="14" />
+          </button>
+          <button
+            type="button"
+            class="menu-manager__move"
+            :title="L.moveDown"
+            :aria-label="L.moveDown"
+            :disabled="!canMoveDown(row)"
+            @click="move(row, 'down')"
+          >
+            <ArrowDown :size="14" />
+          </button>
+        </span>
+
+        <button
+          type="button"
+          class="menu-manager__visibility"
+          :class="row.node.is_visible ? 'is-on' : 'is-off'"
+          :aria-pressed="row.node.is_visible"
+          :title="L.visible"
+          @click="toggleVisible(row)"
+        >
+          <Eye v-if="row.node.is_visible" :size="15" />
+          <EyeOff v-else :size="15" />
+        </button>
+      </article>
+    </div>
+  </div>
+</template>

package/src/content/PageBlocks.vue

@@ -2,7 +2,6 @@
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import type { AxiosInstance } from 'axios'
 import { GripVertical, List, Plus, Printer, SquarePen, Trash2 } from '@lucide/vue'
-import { VueDraggable } from 'vue-draggable-plus'
 import {
   BaseButton,
   BaseCheckbox,
@@ -19,9 +18,18 @@ import { useRightSidebar } from '../composables/useRightSidebar'
 import { useCardDeselect } from '../composables/useCardDeselect'
 
 // Gestor de bloques de una página (doc 03): paleta de tipos (motor + juego),
-// lista reordenable con drag (DC-17) y modal de edición GENERADO desde el
-// esquema de campos del tipo. Añadir un tipo de bloque no toca este código.
-// Agnóstico de i18n (DC-29): textos por prop; gancho translate para nombres.
+// lista reordenable con drag & drop NATIVO (HTML5, sin dependencias) y modal
+// de edición GENERADO desde el esquema de campos del tipo. Añadir un tipo de
+// bloque no toca este código. Anidado en VARIOS niveles, sin límite (solo se
+// prohíben los ciclos): el drag persiste al soltar (sin botón Guardar, a
+// diferencia del MenuManager) — soltar entre filas reordena
+// (`POST .../blocks/reorder`, la lista aplanada en preorden); soltar ENCIMA
+// de cualquier fila anida el bloque bajo ella (con sus propios
+// descendientes, que se mueven en bloque) vía `PUT /admin/blocks/{id}`,
+// mismas reglas que el select "Bloque padre": nunca uno mismo ni un
+// descendiente propio. Agnóstico de i18n (DC-29): textos por prop; gancho
+// translate para nombres; `displayLocale` (idioma actual del admin) para
+// los textos traducibles del resumen/campos.
 
 export interface PageBlocksLabels {
   add: string
@@ -74,6 +82,9 @@ const props = withDefaults(
     api: AxiosInstance
     pageId: number
     locales: { code: string; name: string }[]
+    /** Idioma actual del admin (vue-i18n): textos traducibles en él, con
+     *  fallback al primer valor no vacío (patrón `firstText` del AppHeader). */
+    displayLocale: string
     icons?: RichIcon[]
     richLabels?: Partial<RichTextLabels>
     labels?: Partial<PageBlocksLabels>
@@ -170,13 +181,18 @@ const formPrintable = ref(true)
 const formIndexable = ref(true)
 const formParent = ref<number | null>(null)
 
-// Padres elegibles: bloques raíz de la página (un solo nivel de anidado),
-// nunca uno mismo.
+// Padres elegibles: CUALQUIER bloque de la página (sin límite de niveles),
+// salvo uno mismo o uno de sus propios descendientes (crearía un ciclo).
+// Etiqueta con prefijo de rayas según su profundidad, para ver la jerarquía
+// en un <select> nativo (no admite sangría real por opción).
 const parentOptions = computed(() => {
   const self = editing.value?.id
   return blocks.value
-    .filter((b) => !b.parent_id && b.id !== self)
-    .map((b) => ({ value: String(b.id), label: `${typeName(b.type)} — ${summary(b) || b.id}` }))
+    .filter((b) => b.id !== self && !(self !== undefined && isDescendant(b.id, self)))
+    .map((b) => ({
+      value: String(b.id),
+      label: `${'— '.repeat(depthOf(b))}${typeName(b.type)} — ${summary(b) || b.id}`,
+    }))
 })
 
 function typeName(key: string): string {
@@ -185,6 +201,12 @@ function typeName(key: string): string {
   return props.translate?.(`blockTypes.${key}`, fallback) ?? fallback
 }
 
+/** Texto en `displayLocale`, con fallback al primer valor no vacío. */
+function displayText(map: Record<string, string> | null | undefined): string {
+  if (!map) return ''
+  return map[props.displayLocale] || Object.values(map).find(Boolean) || ''
+}
+
 /** Resumen del bloque en la lista: el primer texto traducible con valor. */
 function summary(block: BlockRow): string {
   const type = types.value.find((t) => t.key === block.type)
@@ -192,18 +214,18 @@ function summary(block: BlockRow): string {
     if (!['text', 'textarea', 'richtext'].includes(field.type)) continue
     const value = block.settings?.[field.key]
     if (field.translatable && value && typeof value === 'object') {
-      const text = Object.values(value as Record<string, string>).find(Boolean)
+      const text = displayText(value as Record<string, string>)
       if (text) return text.replace(/<[^>]*>/g, '').slice(0, 80)
     }
   }
   return ''
 }
 
-/** URL de un campo imagen (traducible o no): la primera con valor. */
+/** URL de un campo imagen (traducible o no): la del locale actual. */
 function imageUrl(field: FieldSchema, block: BlockRow): string {
   const raw = block.settings?.[field.key]
   if (raw && typeof raw === 'object') {
-    return Object.values(raw as Record<string, string>).find(Boolean) ?? ''
+    return displayText(raw as Record<string, string>)
   }
   return raw ? String(raw) : ''
 }
@@ -218,7 +240,7 @@ function fieldValue(field: FieldSchema, block: BlockRow): string {
   const raw = block.settings?.[field.key]
   if (raw === null || raw === undefined || raw === '') return ''
   if (field.translatable && typeof raw === 'object') {
-    const text = Object.values(raw as Record<string, string>).find(Boolean) ?? ''
+    const text = displayText(raw as Record<string, string>)
     return text
       .replace(/<[^>]*>/g, ' ')
       .replace(/\s+/g, ' ')
@@ -255,18 +277,58 @@ const selectedFields = computed(() => {
     .filter((entry) => entry.value)
 })
 
-/** Hijos justo debajo de su padre (en su orden relativo): anidado visible. */
+/** Preorden del árbol (sin límite de niveles): cada bloque, seguido AL
+ *  MOMENTO de todos sus descendientes (recursivo), en su orden relativo. El
+ *  reorder del servidor persiste exactamente este orden aplanado, así que
+ *  `order` ya es un preorden — el índice público (IndexBlock) no necesita
+ *  reordenar, solo calcular la profundidad. */
 function arrange(list: BlockRow[]): BlockRow[] {
-  const parents = list.filter((b) => !b.parent_id)
+  const byParent = new Map<number | null, BlockRow[]>()
+  for (const block of list) {
+    const key = block.parent_id
+    if (!byParent.has(key)) byParent.set(key, [])
+    byParent.get(key)!.push(block)
+  }
   const out: BlockRow[] = []
-  for (const parent of parents) {
-    out.push(parent, ...list.filter((b) => b.parent_id === parent.id))
+  function walk(parentId: number | null) {
+    for (const block of byParent.get(parentId) ?? []) {
+      out.push(block)
+      walk(block.id)
+    }
   }
-  // Huérfanos (padre borrado en otra sesión): al final, sin perderse.
+  walk(null)
+  // Huérfanos (padre borrado en otra sesión, o un ciclo residual): al final.
   out.push(...list.filter((b) => !out.includes(b)))
   return out
 }
 
+/** Profundidad real del bloque, subiendo por la cadena de padres. */
+function depthOf(block: BlockRow): number {
+  let depth = 0
+  let current: BlockRow | undefined = block
+  const seen = new Set<number>()
+  while (current?.parent_id) {
+    if (seen.has(current.id)) break
+    seen.add(current.id)
+    current = blocks.value.find((b) => b.id === current!.parent_id)
+    if (current) depth++
+  }
+  return depth
+}
+
+/** ¿`candidateId` cuelga (a cualquier profundidad) de `ancestorId`? */
+function isDescendant(candidateId: number, ancestorId: number): boolean {
+  let current = blocks.value.find((b) => b.id === candidateId)
+  const seen = new Set<number>()
+  while (current?.parent_id) {
+    if (current.parent_id === ancestorId) return true
+    if (seen.has(current.id)) break
+    seen.add(current.id)
+    current = blocks.value.find((b) => b.id === current!.parent_id)
+  }
+  return false
+}
+
 async function load() {
   try {
     const [palette, list] = await Promise.all([
@@ -364,8 +426,7 @@ async function remove(block: BlockRow) {
   }
 }
 
-/** El drag reordena en cliente; los hijos se recolocan bajo su padre y se
- *  persiste la lista de ids resultante. */
+/** Persiste el orden actual (la lista completa de ids, ya reagrupada). */
 async function persistOrder() {
   blocks.value = arrange(blocks.value)
   try {
@@ -378,6 +439,108 @@ async function persistOrder() {
   }
 }
 
+// --- Drag & drop nativo (HTML5, sin dependencias) --------------------------
+// Fila arrastrable con asa (GripVertical): soltar en el tercio superior/
+// inferior de otra fila reordena como hermana; soltar en el tercio central
+// de CUALQUIER fila la convierte en su padre — sin límite de niveles, solo
+// se prohíbe soltar sobre uno mismo o un descendiente propio (ciclo). Al
+// mover un bloque se mueve con él TODO su subárbol (persiste al momento,
+// sin botón Guardar).
+const dragged = ref<BlockRow | null>(null)
+const dropTarget = ref<{ id: number; position: 'before' | 'after' | 'inside' } | null>(null)
+
+/** Único requisito para soltar sobre `target`: no ser el arrastrado ni un descendiente suyo. */
+function canDropOn(target: BlockRow): boolean {
+  if (!dragged.value) return false
+  if (target.id === dragged.value.id) return false
+  return !isDescendant(target.id, dragged.value.id)
+}
+
+function onDragStart(block: BlockRow, event: DragEvent) {
+  dragged.value = block
+  event.dataTransfer?.setData('text/plain', String(block.id))
+  if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'
+}
+
+function onDragOver(block: BlockRow, event: DragEvent) {
+  if (!canDropOn(block)) {
+    dropTarget.value = null
+    return
+  }
+  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
+  const ratio = (event.clientY - rect.top) / rect.height
+  const position: 'before' | 'after' | 'inside' =
+    ratio > 0.3 && ratio < 0.7 ? 'inside' : ratio < 0.5 ? 'before' : 'after'
+  dropTarget.value = { id: block.id, position }
+}
+
+function onDragLeave(block: BlockRow, event: DragEvent) {
+  const related = event.relatedTarget as Node | null
+  const current = event.currentTarget as HTMLElement
+  if (related && current.contains(related)) return
+  if (dropTarget.value?.id === block.id) dropTarget.value = null
+}
+
+function onDragEnd() {
+  dragged.value = null
+  dropTarget.value = null
+}
+
+async function onDrop(block: BlockRow, event: DragEvent) {
+  event.preventDefault()
+  const target = dropTarget.value
+  const source = dragged.value
+  dragged.value = null
+  dropTarget.value = null
+  if (!target || !source || target.id !== block.id) return
+  if (source.id === target.id || isDescendant(target.id, source.id)) return
+
+  const oldParentId = source.parent_id
+  const sourceIdx = blocks.value.findIndex((b) => b.id === source.id)
+  if (sourceIdx === -1) return
+  const sourceDepth = depthOf(source)
+
+  // Extrae el subárbol completo (el bloque + todos sus descendientes: la
+  // tirada contigua que le sigue con más profundidad que él, ya que el
+  // array se mantiene en preorden) para moverlo en bloque.
+  let end = sourceIdx + 1
+  while (end < blocks.value.length && depthOf(blocks.value[end]) > sourceDepth) end++
+  const subtree = blocks.value.splice(sourceIdx, end - sourceIdx)
+
+  let newParentId: number | null
+  if (target.position === 'inside') {
+    newParentId = target.id
+    const targetBlock = blocks.value.find((b) => b.id === target.id)
+    const targetDepth = targetBlock ? depthOf(targetBlock) : 0
+    let insertAt = blocks.value.findIndex((b) => b.id === target.id) + 1
+    while (insertAt < blocks.value.length && depthOf(blocks.value[insertAt]) > targetDepth) {
+      insertAt++
+    }
+    subtree[0].parent_id = newParentId
+    blocks.value.splice(insertAt, 0, ...subtree)
+  } else {
+    const targetIdx = blocks.value.findIndex((b) => b.id === target.id)
+    newParentId = targetIdx >= 0 ? blocks.value[targetIdx].parent_id : null
+    subtree[0].parent_id = newParentId
+    const insertAt = target.position === 'after' ? targetIdx + 1 : targetIdx
+    blocks.value.splice(insertAt < 0 ? blocks.value.length : insertAt, 0, ...subtree)
+  }
+
+  busy.value = true
+  try {
+    if (newParentId !== oldParentId) {
+      await props.api.put(`/admin/blocks/${source.id}`, { parent_id: newParentId })
+    }
+    await persistOrder()
+    await load()
+  } catch {
+    toast.danger(L.error)
+    await load()
+  } finally {
+    busy.value = false
+  }
+}
+
 const presentation = computed(() => types.value.filter((t) => t.category === 'presentation'))
 const dataTypes = computed(() => types.value.filter((t) => t.category !== 'presentation'))
 
@@ -410,19 +573,27 @@ defineExpose({ reload: load })
 
     <p v-if="!blocks.length" class="page-blocks__empty">{{ L.empty }}</p>
 
-    <VueDraggable
-      v-model="blocks"
-      class="page-blocks__list"
-      handle=".page-blocks__grip"
-      :animation="150"
-      @end="persistOrder"
-    >
+    <div class="page-blocks__list">
       <article
         v-for="block in blocks"
         :key="block.id"
         class="page-blocks__item"
-        :class="{ 'is-active': selectedId === block.id, 'is-child': block.parent_id }"
+        draggable="true"
+        :style="{ '--depth': depthOf(block) }"
+        :class="{
+          'is-active': selectedId === block.id,
+          'is-child': depthOf(block) > 0,
+          'is-dragging': dragged?.id === block.id,
+          'drop-before': dropTarget?.id === block.id && dropTarget.position === 'before',
+          'drop-after': dropTarget?.id === block.id && dropTarget.position === 'after',
+          'drop-inside': dropTarget?.id === block.id && dropTarget.position === 'inside',
+        }"
         @click="(e) => selectBlock(block, e)"
+        @dragstart="onDragStart(block, $event)"
+        @dragover.prevent="onDragOver(block, $event)"
+        @dragleave="onDragLeave(block, $event)"
+        @drop="onDrop(block, $event)"
+        @dragend="onDragEnd"
       >
         <span class="page-blocks__grip"><GripVertical :size="16" /></span>
         <button
@@ -441,7 +612,7 @@ defineExpose({ reload: load })
           <span v-if="block.is_indexable" class="chip">{{ L.indexableShort }}</span>
         </span>
       </article>
-    </VueDraggable>
+    </div>
 
     <!-- Modal generado desde el esquema del tipo -->
     <EditModal

package/src/index.ts

@@ -24,6 +24,9 @@ export { useResource, type ResourceMeta } from './crud/useResource'
 // CRM de páginas y bloques (doc 03): editor dirigido por esquema.
 export { default as SchemaFields, type FieldSchema } from './content/SchemaFields.vue'
 export { default as PageBlocks, type PageBlocksLabels } from './content/PageBlocks.vue'
+// Configurador del menú público (doc 10 ampliado): páginas del CRM + rutas
+// del juego, reordenables y agrupables. Agnóstico de i18n (DC-29).
+export { default as MenuManager, type MenuManagerLabels } from './content/MenuManager.vue'
 // Subidas de imagen diferidas al guardar (uploads de contenido sin huérfanos):
 // las usan PageBlocks y las vistas del cascarón (Ajustes, form de página).
 export {