@edc-motor/admin-kit 0.4.37 → 0.4.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/admin-kit",
-  "version": "0.4.37",
+  "version": "0.4.39",
   "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,7 +33,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@edc-motor/ui": "^0.4.37",
+    "@edc-motor/ui": "^0.4.39",
     "axios": "^1.7.0"
   },
   "peerDependencies": {

package/scss/components/_manager-card.scss

@@ -187,6 +187,14 @@
     width: 100%;
   }
 
+  // Sección del panel (divisoria + kicker + contenido) con el aire justo
+  // entre el kicker y lo suyo: reutilizable por cualquier panel derecho
+  // (la usa el panel de bloque de PageBlocks).
+  &__section {
+    display: grid;
+    gap: $space-2;
+  }
+
   // Botón-volver del panel (texto con flecha): del detalle de la card
   // seleccionada al estado sin selección (los filtros del listado).
   &__back {
@@ -360,21 +368,28 @@
 
   // Campos del bloque seleccionado: etiqueta + valor; los valores largos se
   // recortan a unas pocas líneas.
+  // Campo del panel de bloque: «Label: valor» EN LÍNEA; las imágenes van
+  // apiladas (is-stacked), con la miniatura debajo del label.
   &__field {
-    display: grid;
-    gap: 2px;
+    display: flex;
+    align-items: baseline;
+    gap: $space-1;
     min-width: 0;
     font-size: $fs-13;
 
     dt {
+      flex: none;
       color: $text-3;
       font-size: $fs-12;
       text-transform: uppercase;
       letter-spacing: 0.04em;
+
+      &::after { content: ':'; }
     }
 
     dd {
       margin: 0;
+      min-width: 0;
       color: $text-2;
       overflow-wrap: anywhere;
       display: -webkit-box;
@@ -383,6 +398,13 @@
       line-clamp: 4;
       overflow: hidden;
     }
+
+    &.is-stacked {
+      display: grid;
+      gap: 2px;
+
+      dt::after { content: none; }
+    }
   }
 
   &__fields {

package/scss/components/_menu-manager.scss

@@ -1,7 +1,7 @@
 @use "tokens" as *;
 
 // Configurador del menú público (doc 10 ampliado, rediseño sin grupos):
-// filas tipo PageBlocks (asa + icono + etiqueta + badges + acciones),
+// filas tipo PageBlocks (asa + 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.
@@ -30,10 +30,12 @@
     gap: $space-2;
   }
 
+  // SIN wrap: la fila entera cabe siempre en UNA línea — la etiqueta es lo
+  // único que encoge (min-width: 0 + ellipsis); en muy estrecho, además,
+  // baja de cuerpo (container query más abajo).
   &__item {
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
     gap: $space-2;
     border: 1px solid $border;
     border-radius: $radius-md;
@@ -88,12 +90,6 @@
     &:active { cursor: grabbing; }
   }
 
-  &__icon {
-    display: inline-flex;
-    color: $text-3;
-    flex: 0 0 auto;
-  }
-
   &__label {
     font-weight: $k-fw-semibold;
     min-width: 0;
@@ -103,6 +99,12 @@
     margin-right: auto;
   }
 
+  // En muy estrecho el título baja de cuerpo (y la elipsis remata si aún
+  // no cabe): la fila sigue siendo UNA línea.
+  @container content (max-width: #{$bp-sm - 1px}) {
+    &__label { font-size: $fs-13; }
+  }
+
   &__badges { display: flex; gap: $space-1; }
 
   &__moves {
@@ -136,6 +138,7 @@
     color: $success;
     cursor: pointer;
     padding: $space-1;
+    flex: 0 0 auto;
     transition: background-color 0.15s ease, border-color 0.15s ease;
 
     &.is-on {
@@ -143,5 +146,13 @@
       border-color: $success;
       @include contrast-text($success);
     }
+
+    // Entrada OCULTA: el botón en ámbar ($warning) — sin chip, el estado
+    // lo cuenta el propio color del botón.
+    &.is-off {
+      background: $warning;
+      border-color: $warning;
+      @include contrast-text($warning);
+    }
   }
 }

package/src/content/MenuManager.vue

@@ -1,17 +1,7 @@
 <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 { ArrowDown, ArrowUp, Eye, EyeOff, 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
@@ -27,7 +17,6 @@ import { BaseButton, useToast } from '@edc-motor/ui'
 
 export interface MenuManagerLabels {
   empty: string
-  hidden: string
   draft: string
   moveUp: string
   moveDown: string
@@ -41,7 +30,6 @@ export interface MenuManagerLabels {
 
 const defaultLabels: MenuManagerLabels = {
   empty: 'El menú aún no tiene elementos.',
-  hidden: 'Oculto',
   draft: 'Borrador',
   moveUp: 'Subir',
   moveDown: 'Bajar',
@@ -367,15 +355,11 @@ defineExpose({ isDirty })
       >
         <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>
 
+        <!-- Sin chip «Oculto»: el estado lo cuenta el color del botón de
+             visibilidad (ámbar = oculta) -->
         <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"

package/src/content/PageBlocks.vue

@@ -13,6 +13,7 @@ import {
   type RichTextLabels,
 } from '@edc-motor/ui'
 import SchemaFields, { type FieldSchema } from './SchemaFields.vue'
+import { blockPreview } from './blockPreview'
 import { collectImageUrls, deleteContentImage, uploadPendingImages } from './deferredImages'
 import { useRightSidebar } from '../composables/useRightSidebar'
 import { useCardDeselect } from '../composables/useCardDeselect'
@@ -244,18 +245,12 @@ function displayText(map: Record<string, string> | null | undefined): string {
   return map[props.displayLocale] || Object.values(map).find(Boolean) || ''
 }
 
-/** Resumen del bloque en la lista: el primer texto traducible con valor. */
+/** Resumen del bloque en la lista: preview depurado (`blockPreview`) — la
+ *  primera frase del primer campo con contenido (título > subtítulo >
+ *  contenido), completa en el index; card y paneles la truncan por CSS. */
 function summary(block: BlockRow): string {
   const type = types.value.find((t) => t.key === block.type)
-  for (const field of type?.fields ?? []) {
-    if (!['text', 'textarea', 'richtext'].includes(field.type)) continue
-    const value = block.settings?.[field.key]
-    if (field.translatable && value && typeof value === 'object') {
-      const text = displayText(value as Record<string, string>)
-      if (text) return text.replace(/<[^>]*>/g, '').slice(0, 80)
-    }
-  }
-  return ''
+  return blockPreview(block.settings, type?.fields ?? [], displayText)
 }
 
 /** URL de un campo imagen (traducible o no): la del locale actual. */
@@ -772,29 +767,20 @@ defineExpose({ reload: load })
             </BaseButton>
           </div>
 
-          <hr class="manager-panel__divider" />
-
-          <!-- El título del panel es el TIPO del bloque (el contenido va en
-               su sección, abajo) -->
+          <!-- El TIPO del bloque como título del panel (patrón de los
+               paneles de entidad), debajo del estado y fuera de secciones -->
           <h3 class="manager-detail__title">{{ typeName(selected.type) }}</h3>
 
-          <!-- Estado de los interruptores, en texto -->
-          <p class="manager-detail__meta">
-            <strong>{{ L.printable }}</strong> {{ selected.is_printable ? L.yes : L.no }}
-          </p>
-          <p class="manager-detail__meta">
-            <strong>{{ L.indexable }}</strong> {{ selected.is_indexable ? L.yes : L.no }}
-          </p>
-
           <!-- Contenido: cada campo del bloque con su valor (truncado) -->
-          <hr v-if="selectedFields.length" class="manager-panel__divider" />
-          <div v-if="selectedFields.length" class="manager-detail">
+          <section v-if="selectedFields.length" class="manager-panel__section">
+            <hr class="manager-panel__divider" />
             <p class="manager-panel__kicker">{{ L.panelContent }}</p>
             <dl class="manager-detail__fields">
               <div
                 v-for="entry in selectedFields"
                 :key="entry.field.key"
                 class="manager-detail__field"
+                :class="{ 'is-stacked': entry.field.type === 'image' }"
               >
                 <dt>{{ fieldLabel(entry.field) }}</dt>
                 <dd v-if="entry.field.type === 'image'">
@@ -807,7 +793,7 @@ defineExpose({ reload: load })
                 <dd v-else>{{ entry.value }}</dd>
               </div>
             </dl>
-          </div>
+          </section>
         </template>
       </div>
     </Teleport>

package/src/content/blockPreview.ts

@@ -0,0 +1,57 @@
+// Texto de preview de un bloque, DEPURADO y transversal (index de bloques,
+// card de bloque y paneles derechos): del PRIMER campo con contenido en el
+// orden título > subtítulo > contenido (el primer campo de texto restante
+// del esquema), SOLO la primera frase, sin HTML. Helpers puros: quien pinta
+// decide si además trunca por CSS (una línea con ellipsis en card/panel).
+
+/** Campo mínimo del esquema que el preview necesita conocer. */
+export interface BlockPreviewField {
+  key: string
+  type: string
+  translatable: boolean
+}
+
+// Tipos de campo con texto legible (mismo criterio que SchemaFields).
+const TEXT_TYPES = ['text', 'textarea', 'richtext']
+
+/**
+ * Primera frase de un texto: sin HTML, cortada en el primer signo de
+ * puntuación de cierre (. ! ? … : ;) — que se conserva — o salto de línea.
+ */
+export function firstSentence(text: string): string {
+  const plain = text.replace(/<[^>]*>/g, ' ')
+  const stop = /[.!?…:;\n]/.exec(plain)
+  const cut = stop ? plain.slice(0, stop.index + (stop[0] === '\n' ? 0 : 1)) : plain
+  return cut.replace(/\s+/g, ' ').trim()
+}
+
+/**
+ * Preview de un bloque: la primera frase (`firstSentence`) del primer campo
+ * de texto con contenido, priorizando `title`, luego `subtitle` y después el
+ * resto de campos de texto en el orden del esquema (el "contenido").
+ * `displayText` resuelve los traducibles (locale actual con fallback).
+ */
+export function blockPreview(
+  settings: Record<string, unknown> | null | undefined,
+  fields: BlockPreviewField[],
+  displayText: (map: Record<string, string> | null | undefined) => string,
+): string {
+  const textual = fields.filter((field) => TEXT_TYPES.includes(field.type))
+  const ordered = [
+    ...textual.filter((field) => field.key === 'title'),
+    ...textual.filter((field) => field.key === 'subtitle'),
+    ...textual.filter((field) => field.key !== 'title' && field.key !== 'subtitle'),
+  ]
+  for (const field of ordered) {
+    const raw = settings?.[field.key]
+    const text =
+      field.translatable && raw && typeof raw === 'object'
+        ? displayText(raw as Record<string, string>)
+        : typeof raw === 'string'
+          ? raw
+          : ''
+    const sentence = firstSentence(text)
+    if (sentence) return sentence
+  }
+  return ''
+}

package/src/index.ts

@@ -24,6 +24,10 @@ 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'
+// Preview depurado de un bloque (primera frase del primer campo con
+// contenido, título > subtítulo > contenido): lo usan PageBlocks y los
+// paneles de los cascarones.
+export { blockPreview, firstSentence, type BlockPreviewField } from './content/blockPreview'
 // 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'