@edc-motor/admin-kit 0.4.24 → 0.4.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/admin-kit",
-  "version": "0.4.24",
+  "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.24",
-    "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/components/_menu-manager.scss

@@ -1,15 +1,26 @@
 @use "tokens" as *;
 
-// Configurador del menú público (doc 10 ampliado): filas tipo PageBlocks
-// (icono + etiqueta + badges + acciones), sin drag — el orden se mueve con
-// flechas, dentro de cada nivel (raíz o hijos de un grupo).
+// 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; }
@@ -29,16 +40,48 @@
     background: $surface;
     padding: $space-2 $space-3;
     min-width: 0;
-    transition: border-color 0.15s ease;
+    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);
+    }
   }
 
-  // Hijos de un grupo: sangrados justo debajo de él (mismo lenguaje que los
-  // bloques hijos de PageBlocks).
+  // 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;
@@ -94,40 +137,5 @@
       border-color: $success;
       @include contrast-text($success);
     }
-    &:disabled { opacity: 0.6; cursor: default; }
-  }
-
-  &__group-select {
-    min-width: 160px;
-
-    .form-field__select { min-height: 34px; }
-  }
-
-  &__group-actions {
-    display: flex;
-    gap: $space-1;
-  }
-
-  &__edit,
-  &__delete {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    border-radius: $radius-sm;
-    padding: $space-1;
-    cursor: pointer;
-    transition: background-color 0.15s ease;
-  }
-
-  &__edit {
-    color: $accent-500;
-    &:hover { background: color-mix(in srgb, $accent-500 12%, transparent); }
-  }
-
-  &__delete {
-    color: $danger;
-    &:hover { background: color-mix(in srgb, $danger 12%, transparent); }
   }
 }

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

@@ -8,74 +8,58 @@ import {
   Eye,
   EyeOff,
   File,
-  Folder,
-  Plus,
-  SquarePen,
-  Trash2,
+  GripVertical,
+  RotateCcw,
+  Save,
 } from '@lucide/vue'
-import {
-  BaseButton,
-  BaseSelect,
-  EditModal,
-  TranslatableInput,
-  useConfirm,
-  useToast,
-} from '@edc-motor/ui'
-
-// Configurador del menú de la web pública (doc 10 ampliado): mezcla páginas
-// del CRM y "rutas" propias del juego bajo un árbol de UN nivel (los grupos
-// son carpetas del admin; una página o ruta puede colgar de un grupo, un
-// grupo no puede colgar de otro). Filas tipo PageBlocks (no cards):
-// subir/bajar dentro de su nivel, interruptor de visibilidad, select de
-// grupo y, en grupos, editar label + borrar. Agnóstico de i18n (DC-29):
-// todos los textos por prop; `routeLabels` los pone el juego.
+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 {
-  newGroup: string
-  newGroupTitle: string
-  editGroupTitle: string
-  groupLabel: string
-  save: string
-  cancel: string
-  delete: string
-  confirmDelete: string
   empty: string
-  root: string
   hidden: string
   draft: string
   moveUp: string
   moveDown: string
   visible: string
-  group: string
+  save: string
+  discard: string
+  unsaved: string
+  saved: string
   error: string
 }
 
 const defaultLabels: MenuManagerLabels = {
-  newGroup: 'Nuevo grupo',
-  newGroupTitle: 'Nuevo grupo',
-  editGroupTitle: 'Editar grupo',
-  groupLabel: 'Nombre del grupo',
-  save: 'Guardar',
-  cancel: 'Cancelar',
-  delete: 'Borrar',
-  confirmDelete: '¿Borrar este grupo? Sus elementos pasarán a la raíz.',
   empty: 'El menú aún no tiene elementos.',
-  root: '— Raíz —',
   hidden: 'Oculto',
   draft: 'Borrador',
   moveUp: 'Subir',
   moveDown: 'Bajar',
   visible: 'Visible',
-  group: 'Grupo',
+  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
-    locales: { code: string; name: string }[]
     /** 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: () => ({}) },
@@ -84,7 +68,6 @@ const props = withDefaults(
 const L = reactive({ ...defaultLabels, ...props.labels }) as MenuManagerLabels
 
 const toast = useToast()
-const { confirm } = useConfirm()
 
 interface MenuPageInfo {
   id: number
@@ -94,29 +77,69 @@ interface MenuPageInfo {
 
 interface MenuNode {
   id: number
-  type: 'page' | 'route' | 'group'
+  type: 'page' | 'route'
   is_visible: boolean
   order: number
   route_key: string | null
-  label: Record<string, 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
   }
 }
 
-// Filas aplanadas para pintar (profundidad máxima 1: hijos de un grupo,
-// indentados justo debajo de él — un grupo no puede colgar de otro).
+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
@@ -124,170 +147,229 @@ interface Row {
 }
 const rows = computed<Row[]>(() => {
   const out: Row[] = []
-  for (const node of tree.value) {
-    out.push({ node, depth: 0, parentId: null })
-    if (node.type === 'group') {
-      for (const child of node.children) out.push({ node: child, depth: 1, parentId: node.id })
+  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
 })
 
-const groups = computed(() => tree.value.filter((n) => n.type === 'group'))
+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 siblingIds(parentId: number | null): number[] {
-  if (parentId === null) return tree.value.map((n) => n.id)
-  return groups.value.find((g) => g.id === parentId)?.children.map((c) => c.id) ?? []
+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 siblingIds(row.parentId).indexOf(row.node.id)
+  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 ids = siblingIds(row.parentId)
+  const list = listFor(row.parentId)
+  if (!list) return false
   const idx = siblingIndex(row)
-  return idx >= 0 && idx < ids.length - 1
+  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 (agnóstico de locale, patrón EntityRefSelect). */
-function firstText(map: Record<string, string> | null | undefined): string {
+/** Primer texto disponible en `displayLocale`, con fallback al primero que haya. */
+function displayText(map: Record<string, string> | null | undefined): string {
   if (!map) return ''
-  return Object.values(map).find(Boolean) ?? ''
+  return map[props.displayLocale] || Object.values(map).find(Boolean) || ''
 }
 
 function labelOf(node: MenuNode): string {
-  if (node.type === 'page') return node.page ? firstText(node.page.title) : ''
-  if (node.type === 'route') return props.routeLabels[node.route_key ?? ''] ?? node.route_key ?? ''
-  return firstText(node.label)
+  if (node.type === 'page') return node.page ? displayText(node.page.title) : ''
+  return props.routeLabels[node.route_key ?? ''] ?? node.route_key ?? ''
 }
 
-async function move(row: Row, direction: 'up' | 'down') {
-  const ids = siblingIds(row.parentId)
-  const idx = ids.indexOf(row.node.id)
-  const swapWith = direction === 'up' ? idx - 1 : idx + 1
-  if (idx < 0 || swapWith < 0 || swapWith >= ids.length) return
-  const next = [...ids]
-  ;[next[idx], next[swapWith]] = [next[swapWith], next[idx]]
-  busy.value = true
-  try {
-    await props.api.post('/admin/menu/reorder', { ids: next })
-    await load()
-  } catch {
-    toast.danger(L.error)
-  } finally {
-    busy.value = false
-  }
+// --- 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
 }
 
-async function toggleVisible(row: Row) {
-  busy.value = true
-  try {
-    await props.api.patch(`/admin/menu/${row.node.id}`, { is_visible: !row.node.is_visible })
-    await load()
-  } catch {
-    toast.danger(L.error)
-  } finally {
-    busy.value = false
-  }
+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
 }
 
-async function setGroup(row: Row, value: string) {
-  busy.value = true
-  try {
-    await props.api.patch(`/admin/menu/${row.node.id}`, {
-      parent_id: value ? Number(value) : null,
-    })
-    await load()
-  } catch {
-    toast.danger(L.error)
-  } finally {
-    busy.value = false
+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 }
 }
 
-// Modal de grupo (crear / editar label), compartido.
-const modalOpen = ref(false)
-const editingGroup = ref<MenuNode | null>(null)
-const groupLabelForm = ref<Record<string, string>>({})
-const saving = ref(false)
+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 openCreateGroup() {
-  editingGroup.value = null
-  groupLabelForm.value = {}
-  modalOpen.value = true
+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 openEditGroup(node: MenuNode) {
-  editingGroup.value = node
-  groupLabelForm.value = { ...(node.label ?? {}) }
-  modalOpen.value = true
+function onDragEnd() {
+  cleanupDrag()
 }
 
-async function saveGroup() {
-  saving.value = true
-  try {
-    if (editingGroup.value) {
-      await props.api.patch(`/admin/menu/${editingGroup.value.id}`, { label: groupLabelForm.value })
-    } else {
-      await props.api.post('/admin/menu/groups', { label: groupLabelForm.value })
-    }
-    modalOpen.value = false
-    await load()
-  } catch {
-    toast.danger(L.error)
-  } finally {
-    saving.value = false
-  }
+function cleanupDrag() {
+  dragged.value = null
+  dropTarget.value = null
 }
 
-async function removeGroup(node: MenuNode) {
-  const ok = await confirm({
-    message: L.confirmDelete,
-    confirmLabel: L.delete,
-    cancelLabel: L.cancel,
-    variant: 'danger',
-  })
-  if (!ok) return
-  busy.value = true
-  try {
-    await props.api.delete(`/admin/menu/${node.id}`)
-    await load()
-  } catch {
-    toast.danger(L.error)
-  } finally {
-    busy.value = false
+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">
-      <BaseButton :disabled="busy" @click="openCreateGroup">
-        <template #icon><Plus :size="16" /></template>
-        {{ L.newGroup }}
+      <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="!rows.length" class="menu-manager__empty">{{ L.empty }}</p>
+    <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"
-        :class="{ 'is-child': row.depth === 1, 'is-hidden': !row.node.is_visible }"
+        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-if="row.node.type === 'route'" :size="16" />
-          <Folder v-else :size="16" />
+          <Compass v-else :size="16" />
         </span>
 
         <span class="menu-manager__label">{{ labelOf(row.node) }}</span>
@@ -308,7 +390,7 @@ onMounted(load)
             class="menu-manager__move"
             :title="L.moveUp"
             :aria-label="L.moveUp"
-            :disabled="busy || !canMoveUp(row)"
+            :disabled="!canMoveUp(row)"
             @click="move(row, 'up')"
           >
             <ArrowUp :size="14" />
@@ -318,7 +400,7 @@ onMounted(load)
             class="menu-manager__move"
             :title="L.moveDown"
             :aria-label="L.moveDown"
-            :disabled="busy || !canMoveDown(row)"
+            :disabled="!canMoveDown(row)"
             @click="move(row, 'down')"
           >
             <ArrowDown :size="14" />
@@ -331,61 +413,12 @@ onMounted(load)
           :class="row.node.is_visible ? 'is-on' : 'is-off'"
           :aria-pressed="row.node.is_visible"
           :title="L.visible"
-          :disabled="busy"
           @click="toggleVisible(row)"
         >
           <Eye v-if="row.node.is_visible" :size="15" />
           <EyeOff v-else :size="15" />
         </button>
-
-        <BaseSelect
-          v-if="row.node.type !== 'group'"
-          class="menu-manager__group-select"
-          :model-value="row.parentId === null ? '' : String(row.parentId)"
-          :options="[
-            { value: '', label: L.root },
-            ...groups.map((g) => ({ value: String(g.id), label: labelOf(g) })),
-          ]"
-          @update:model-value="(v: string) => setGroup(row, v)"
-        />
-
-        <span v-if="row.node.type === 'group'" class="menu-manager__group-actions">
-          <button
-            type="button"
-            class="menu-manager__edit"
-            :title="L.editGroupTitle"
-            :aria-label="L.editGroupTitle"
-            @click="openEditGroup(row.node)"
-          >
-            <SquarePen :size="15" />
-          </button>
-          <button
-            type="button"
-            class="menu-manager__delete"
-            :title="L.delete"
-            :aria-label="L.delete"
-            @click="removeGroup(row.node)"
-          >
-            <Trash2 :size="15" />
-          </button>
-        </span>
       </article>
     </div>
-
-    <EditModal
-      v-model="modalOpen"
-      :title="editingGroup ? L.editGroupTitle : L.newGroupTitle"
-      :submit-label="L.save"
-      :cancel-label="L.cancel"
-      :loading="saving"
-      @submit="saveGroup"
-    >
-      <TranslatableInput
-        v-model="groupLabelForm"
-        :locales="locales"
-        :label="L.groupLabel"
-        required
-      />
-    </EditModal>
   </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