@prolibu-suite/cobalt-core 0.9.2 → 0.9.4

package/dist/collection/components/co-option-list/co-option-list.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { highlightMatch } from "../../utils/normalizeText";
 import { initOverlayScroll } from "../../utils/overlayScroll";
-import { buildRows, deriveMore, nextActiveIndex, orderItems, parseItems, parseValue, reorderIds, virtualSlice, VIRTUAL_ITEM_HEIGHT, VIRTUAL_VIEWPORT_ITEMS, } from "./optionListLogic";
+import { buildRows, deriveMore, listReorderIds, liveSelectedOrder, nextActiveIndex, orderItems, parseItems, parseValue, selectedActiveIndex, virtualSlice, VIRTUAL_ITEM_HEIGHT, VIRTUAL_VIEWPORT_ITEMS, } from "./optionListLogic";
 /**
  * Núcleo de lista de opciones — la única fuente del look & behavior de los
  * dropdowns Cobalt (co-ref-field, co-combobox, co-autocomplete,
@@ -30,6 +30,13 @@ export class CoOptionList {
         this.removableItems = false;
         /** Habilita reorder por drag del bloque de seleccionados (selected-first). */
         this.reorderable = false;
+        /** Botón push-pin por fila (siempre visible). Emite coPinToggle; el estado
+         *  pinned viene en item.pinned — el componente NO lo muta (controlado). */
+        this.pinnable = false;
+        /** Drag-reorder de la LISTA completa (no del bloque seleccionado): handle en
+         *  filas no-pineadas, emite coListReorder con el orden visible completo.
+         *  Independiente de multiple/selectedFirst. No soportado con `virtual`. */
+        this.listReorderable = false;
         // ── Search integrado (opcional) ────────────────────────────
         this.searchable = false;
         this.searchPlaceholder = 'Search…';
@@ -69,9 +76,13 @@ export class CoOptionList {
         this.overKey = '';
         /** Dirección del drop sobre overKey (true = el ítem cae DESPUÉS del target). */
         this.dropAfter = false;
+        /** Longitud de lista para la que ya se pidió un fill (ver fillViewport). */
+        this.lastFillLen = -1;
         /** Snapshot selected-first (ver snapshotOrder). */
         this.sortSnapshot = new Set();
         this.displaySnapshot = [];
+        /** Orden del live-preview en curso (drag por puntero del bloque seleccionado). */
+        this.previewOrder = [];
         /**
          * Enter sobre un control real (footer, fila clear) activa ese control
          * nativamente — nunca el highlight (regla heredada de CellRefPicker).
@@ -94,15 +105,95 @@ export class CoOptionList {
             const v = e.target.value;
             this.term = v;
             this.activeIndex = -1;
+            // Resultset nuevo: re-habilita fillViewport aunque venga del mismo largo.
+            this.lastFillLen = -1;
             if (this.debounceTimer)
                 clearTimeout(this.debounceTimer);
             this.debounceTimer = setTimeout(() => this.coSearch.emit(v), this.searchDebounce);
         };
+        this.onPtrMove = (e) => {
+            const d = this.ptrDrag;
+            if (!d)
+                return;
+            if (!d.started) {
+                if (Math.abs(e.clientY - d.startY) < 3)
+                    return; // umbral: no secuestrar clicks
+                d.started = true;
+                this.dragKey = d.id; // → clase --lifted
+                this.previewOrder = d.originOrder;
+                this.el.style.userSelect = 'none';
+                // Selección fresca fuera del bloque: entra al bloque al levantarla (FLIP),
+                // así la geometría de slots (blockTop + i×pitch) vale toda la sesión.
+                if (!this.sortSnapshot.has(d.id))
+                    this.applyPreview([...d.originOrder]);
+            }
+            e.preventDefault();
+            const n = this.previewOrder.length;
+            const min = d.blockTop;
+            const max = d.blockTop + (n - 1) * d.pitch;
+            d.desiredTop = Math.max(min, Math.min(max, e.clientY - d.grabDY));
+            this.positionLifted();
+            const i = this.previewOrder.indexOf(d.id);
+            const j = Math.max(0, Math.min(n - 1, Math.round((d.desiredTop - d.blockTop) / d.pitch)));
+            if (j !== i && i !== -1) {
+                const next = [...this.previewOrder];
+                next.splice(j, 0, next.splice(i, 1)[0]);
+                this.applyPreview(next);
+            }
+        };
+        this.onPtrUp = () => {
+            const d = this.ptrDrag;
+            this.removePtrListeners();
+            this.ptrDrag = undefined;
+            if (!d || !d.started)
+                return;
+            // El browser genera un click sintético tras el pointerup del drag; si cae
+            // sobre una fila dispara pick() y DESELECCIONA el ítem recién soltado.
+            // Supresor de un solo click, auto-removido en el próximo macrotask.
+            const suppress = (ev) => { ev.stopPropagation(); ev.preventDefault(); };
+            window.addEventListener('click', suppress, true);
+            setTimeout(() => window.removeEventListener('click', suppress, true), 0);
+            this.settleLifted(d);
+            if (this.previewOrder.length && this.previewOrder.join(' ') !== d.originOrder.join(' ')) {
+                const byId = new Map(this.displaySnapshot.map((x) => [x._id, x]));
+                this.coReorder.emit({ value: this.previewOrder, item: byId.get(d.id) });
+            }
+            this.previewOrder = [];
+        };
+        this.onPtrKey = (e) => {
+            var _a;
+            if (e.key !== 'Escape' || !this.ptrDrag)
+                return;
+            e.stopPropagation(); // el ESC del drag no debe cerrar el popover host
+            e.preventDefault();
+            const d = this.ptrDrag;
+            this.removePtrListeners();
+            this.ptrDrag = undefined;
+            if (!d.started)
+                return;
+            if (this.displaySnapshot !== d.originDisplay) {
+                // Hubo preview: restaurar snapshots originales — FLIP con spring para la
+                // fila que vuelve (captura ANTES de restaurar, incluye su transform actual).
+                this.pendingFlip = { tops: this.captureRowTops(), movedId: d.id, spring: true };
+                const row = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.co-option-list__option[data-id="${CSS.escape(d.id)}"]`);
+                if (row) {
+                    row.style.transition = 'none';
+                    row.style.transform = '';
+                }
+                this.displaySnapshot = d.originDisplay;
+                this.sortSnapshot = d.originSort;
+                this.dragKey = '';
+                this.el.style.userSelect = '';
+            }
+            else {
+                this.settleLifted(d);
+            }
+            this.previewOrder = [];
+        };
         this.handleRowDragEnd = () => { this.resetDragState(); };
         this.handleRowDragLeave = (e, id) => {
-            // Limpia el highlight al salir de la fila (evita drop-target stale al pasar sobre
-            // el bloque no-seleccionado, que no tiene onDragOver). Guard `contains`: dragleave
-            // también dispara al entrar a un hijo, no solo al salir de la fila.
+            // Limpia el highlight al salir de la fila (evita drop-target stale). Guard
+            // `contains`: dragleave también dispara al entrar a un hijo de la fila.
             if (this.overKey === id && !e.currentTarget.contains(e.relatedTarget)) {
                 this.overKey = '';
             }
@@ -148,6 +239,11 @@ export class CoOptionList {
                 this.maybeLoadMore(vp.scrollTop, vp.clientHeight, vp.scrollHeight);
             });
         }
+        this.fillViewport();
+        this.runFlip();
+        // Re-ancla la fila lifted tras cada re-render del preview: su slot de layout
+        // cambió, pero su posición visual la dicta el puntero.
+        this.positionLifted();
     }
     connectedCallback() {
         window.addEventListener('mouseup', this.disarmDrag);
@@ -159,6 +255,7 @@ export class CoOptionList {
         (_a = this.osInstance) === null || _a === void 0 ? void 0 : _a.destroy();
         this.osInstance = undefined;
         window.removeEventListener('mouseup', this.disarmDrag);
+        this.removePtrListeners();
     }
     onItemsChange() {
         // Nueva página / nuevos resultados: si autoHighlight, re-resalta la primera fila
@@ -199,6 +296,45 @@ export class CoOptionList {
             await new Promise((resolve) => requestAnimationFrame(() => resolve()));
         }
     }
+    /**
+     * Ancla la sesión del panel en la selección: highlight sobre la primera fila
+     * seleccionada y scroll hasta dejarla visible (paridad resetActiveIndex de
+     * co-select). El host la llama al ABRIR su panel — la lista queda montada
+     * entre aperturas y no sabe cuándo se abre (mismo contrato que
+     * focusSearch/snapshotOrder). Espera layout real igual que focusSearch: el
+     * panel se hace visible frames después y un scroll sobre subtree oculto se
+     * clampea a 0 en silencio.
+     */
+    async scrollToSelected() {
+        var _a, _b, _c, _d;
+        const idx = selectedActiveIndex(this.orderedItems, this.selectedIds);
+        if (idx === -1)
+            return;
+        this.activeIndex = idx;
+        for (let i = 0; i < 20; i++) {
+            const vp = (_b = (_a = this.osInstance) === null || _a === void 0 ? void 0 : _a.elements().viewport) !== null && _b !== void 0 ? _b : this.optionsEl;
+            if (vp && vp.clientHeight > 0) {
+                if (this.virtual) {
+                    // Fila fuera del slice virtual: no hay nodo al que hacer scrollIntoView —
+                    // misma matemática 'nearest' que co-select, sobre la ventana virtual.
+                    const rowTop = idx * VIRTUAL_ITEM_HEIGHT;
+                    let target = vp.scrollTop;
+                    if (rowTop < target)
+                        target = rowTop;
+                    else if (rowTop + VIRTUAL_ITEM_HEIGHT > target + vp.clientHeight) {
+                        target = rowTop + VIRTUAL_ITEM_HEIGHT - vp.clientHeight;
+                    }
+                    this.scrollTop = target;
+                    vp.scrollTop = target;
+                }
+                else {
+                    (_d = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.getElementById(`co-optlist-${idx}`)) === null || _d === void 0 ? void 0 : _d.scrollIntoView({ block: 'nearest' });
+                }
+                return;
+            }
+            await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+        }
+    }
     /** Navegación para hosts con input externo. true = tecla consumida (host hace preventDefault). */
     async handleKey(e) {
         return this.processKey(e.key);
@@ -269,6 +405,16 @@ export class CoOptionList {
         }
     }
     // ── Reorder (drag del bloque selected-first) ───────────────
+    /** true = drag de lista completa; el modo selected-block (chips multiple) tiene prioridad
+     *  si ambos están activos (no coexisten en la práctica). */
+    get listDragActive() {
+        return this.listReorderable && !(this.reorderable && this.selectedFirst);
+    }
+    /** Universo del drag de LISTA COMPLETA (listReorderable). El bloque
+     *  seleccionado usa `previewOrder` (live-preview, ver handleRowDragStart). */
+    dragOrderIds() {
+        return this.orderedItems.map((i) => i._id);
+    }
     handleRowDragStart(e, id) {
         if (this.armedKey !== id) {
             e.preventDefault();
@@ -289,22 +435,181 @@ export class CoOptionList {
         this.overKey = id;
         // Dirección: al arrastrar hacia abajo (from<to) el ítem cae DESPUÉS del target
         // (semántica de reorderIds) → el indicador va en el borde inferior; hacia arriba, superior.
-        const ids = this.displaySnapshot.map((d) => d._id);
+        const ids = this.dragOrderIds();
         this.dropAfter = ids.indexOf(this.dragKey) < ids.indexOf(id);
     }
+    // ── Drag por puntero (bloque seleccionado, estilo motion.dev) ──
+    // La fila agarrada sigue al puntero 1:1 (transform, sin el ghost nativo del
+    // browser) con lift (sombra + escala); las demás se apartan EN VIVO con FLIP.
+    // Soltar confirma (emite coReorder); ESC revierte con settle.
+    /** Aplica un orden de preview al bloque seleccionado con FLIP (todo ease-out;
+     *  la fila lifted queda fuera del FLIP — su posición la dicta el puntero). */
+    applyPreview(next) {
+        this.pendingFlip = { tops: this.captureRowTops(), movedId: this.dragKey, spring: false };
+        const byId = new Map(this.orderedItems.map((i) => [i._id, i]));
+        for (const d of this.displaySnapshot)
+            if (!byId.has(d._id))
+                byId.set(d._id, d);
+        this.sortSnapshot = new Set(next);
+        this.displaySnapshot = next.map((x) => byId.get(x)).filter(Boolean);
+        this.previewOrder = next;
+    }
+    startPointerDrag(e, id) {
+        var _a;
+        if (e.button !== 0 || this.ptrDrag)
+            return;
+        const order = liveSelectedOrder(this.orderedItems, this.selectedIds);
+        if (!order.includes(id))
+            return;
+        const row = e.currentTarget.closest('.co-option-list__option');
+        if (!row)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const rect = row.getBoundingClientRect();
+        // Pitch MEDIDO de la lista real (alto de fila + gap): las filas de este
+        // panel son content-driven (nombre + email ≈ 44px), NO el alto fijo de la
+        // lista virtual — asumir VIRTUAL_ITEM_HEIGHT desvía el slot y la fila
+        // aterriza fuera de lugar al soltar.
+        const rows = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.co-option-list__option[data-id]');
+        const first = rows === null || rows === void 0 ? void 0 : rows[0];
+        const pitch = (rows && rows.length >= 2)
+            ? rows[1].getBoundingClientRect().top - rows[0].getBoundingClientRect().top
+            : rect.height || VIRTUAL_ITEM_HEIGHT;
+        // Top geométrico del slot 0: primera fila renderizada − su índice × pitch
+        // (la fila agarrada puede vivir FUERA del bloque si es una selección
+        // fresca, por eso no sirve de ancla).
+        const firstIdx = first ? this.orderedItems.findIndex((i) => i._id === first.dataset.id) : 0;
+        const blockTop = first
+            ? first.getBoundingClientRect().top - Math.max(0, firstIdx) * pitch
+            : rect.top;
+        this.ptrDrag = {
+            id,
+            grabDY: e.clientY - rect.top,
+            blockTop,
+            pitch,
+            originOrder: order,
+            originDisplay: this.displaySnapshot,
+            originSort: this.sortSnapshot,
+            desiredTop: rect.top,
+            startY: e.clientY,
+            started: false,
+        };
+        window.addEventListener('pointermove', this.onPtrMove);
+        window.addEventListener('pointerup', this.onPtrUp);
+        window.addEventListener('keydown', this.onPtrKey, true);
+    }
+    /** Posiciona la fila lifted bajo el puntero (transform sobre su slot de layout). */
+    positionLifted() {
+        var _a;
+        const d = this.ptrDrag;
+        if (!d || !d.started)
+            return;
+        const row = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.co-option-list__option[data-id="${CSS.escape(d.id)}"]`);
+        if (!row)
+            return;
+        const idx = this.previewOrder.indexOf(d.id);
+        if (idx === -1)
+            return;
+        const layoutTop = d.blockTop + idx * d.pitch;
+        row.style.transition = 'none';
+        row.style.transform = `translateY(${d.desiredTop - layoutTop}px) scale(1.02)`;
+    }
+    /** Settle de la fila lifted: de su posición visual actual a su slot, con spring. */
+    settleLifted(d) {
+        var _a;
+        const row = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.co-option-list__option[data-id="${CSS.escape(d.id)}"]`);
+        const done = () => {
+            this.dragKey = '';
+            this.el.style.userSelect = '';
+        };
+        if (!row) {
+            done();
+            return;
+        }
+        void row.offsetHeight; // fija la posición visual actual antes de animar
+        row.style.transition = 'transform var(--co-motion-duration-base) var(--co-motion-ease-spring)';
+        row.style.transform = '';
+        row.addEventListener('transitionend', () => { row.style.transition = ''; done(); }, { once: true });
+    }
+    removePtrListeners() {
+        window.removeEventListener('pointermove', this.onPtrMove);
+        window.removeEventListener('pointerup', this.onPtrUp);
+        window.removeEventListener('keydown', this.onPtrKey, true);
+    }
     handleRowDrop(e, id) {
         e.preventDefault();
         e.stopPropagation();
         const fromId = this.dragKey;
-        const order = this.displaySnapshot.map((d) => d._id);
+        const order = this.dragOrderIds();
         this.resetDragState();
-        // Solo reordenar dentro del bloque seleccionado
         if (fromId === id || !order.includes(fromId) || !order.includes(id))
             return;
-        const next = reorderIds(order, fromId, id);
-        const byId = new Map(this.displaySnapshot.map((d) => [d._id, d]));
-        this.displaySnapshot = next.map((x) => byId.get(x)); // reflow en vivo del panel
-        this.coReorder.emit({ value: next, item: byId.get(fromId) });
+        const byId = new Map(this.orderedItems.map((i) => [i._id, i]));
+        const next = listReorderIds(order, fromId, id, (x) => { var _a; return !!((_a = byId.get(x)) === null || _a === void 0 ? void 0 : _a.pinned); });
+        if (next === order)
+            return; // extremo pineado o no-op
+        this.coListReorder.emit({ value: next, item: byId.get(fromId) });
+    }
+    captureRowTops() {
+        var _a;
+        const tops = new Map();
+        (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.co-option-list__option[data-id]').forEach((row) => tops.set(row.dataset.id, row.getBoundingClientRect().top));
+        return tops;
+    }
+    /**
+     * FLIP de cada reacomodo (swap del live-preview y revert): las filas arrancan
+     * desplazadas a su posición visual anterior (transform) y transicionan a la
+     * nueva. Solo transform, con tokens de motion (reduced-motion se resuelve
+     * global vía zeroing). Swaps mid-drag: todo ease-out (fluido, sin rebote);
+     * spring solo para la fila movida en el settle del revert.
+     * Batcheado (writes → reads → writes, un solo flush) y robusto a interrupciones:
+     * neutraliza transforms de un FLIP anterior ANTES de medir el layout nuevo.
+     */
+    runFlip() {
+        var _a, _b, _c;
+        if (!this.pendingFlip)
+            return;
+        const { tops, movedId, spring } = this.pendingFlip;
+        this.pendingFlip = undefined;
+        const rows = Array.from((_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.co-option-list__option[data-id]')) !== null && _b !== void 0 ? _b : []);
+        // La fila lifted (drag por puntero activo) queda FUERA del FLIP: su posición
+        // la dicta el puntero (positionLifted re-ancla tras el render).
+        const liftedId = ((_c = this.ptrDrag) === null || _c === void 0 ? void 0 : _c.started) ? this.ptrDrag.id : null;
+        for (const row of rows) {
+            if (row.dataset.id === liftedId)
+                continue;
+            row.style.transition = 'none';
+            row.style.transform = '';
+        }
+        const moves = [];
+        for (const row of rows) {
+            const id = row.dataset.id;
+            if (id === liftedId)
+                continue;
+            const first = tops.get(id);
+            if (first === undefined)
+                continue;
+            const delta = first - row.getBoundingClientRect().top;
+            if (delta)
+                moves.push({ row, delta, spring: spring && id === movedId });
+        }
+        for (const { row, delta } of moves)
+            row.style.transform = `translateY(${delta}px)`;
+        void this.el.offsetHeight; // flush único: fija el estado invertido antes de animar
+        for (const row of rows) {
+            if (row.dataset.id === liftedId)
+                continue;
+            const mv = moves.find((m) => m.row === row);
+            if (!mv) {
+                row.style.transition = '';
+                continue;
+            }
+            const ease = mv.spring ? 'var(--co-motion-ease-spring)' : 'var(--co-motion-ease-out)';
+            row.style.transition = `transform var(--co-motion-duration-base) ${ease}`;
+            row.style.transform = '';
+            row.addEventListener('transitionend', () => { row.style.transition = ''; }, { once: true });
+        }
     }
     resetDragState() {
         this.armedKey = '';
@@ -319,6 +624,30 @@ export class CoOptionList {
         if (hasMore && scrollTop + clientHeight >= scrollHeight - 40)
             this.coLoadMore.emit();
     }
+    /** El infinite scroll asume que cada página desborda el contenedor. Con
+     *  paneles altos (--co-option-list-max-height) una página puede caber entera
+     *  → sin overflow no hay evento de scroll y la paginación queda muerta. Tras
+     *  cada render, si el contenido no deja distancia scrolleable (mismo slack
+     *  de 40px que maybeLoadMore) y hay más resultados, pide otra página. Se
+     *  emite UNA vez por longitud de lista: si el host no responde no re-emite,
+     *  y el append de la página siguiente re-habilita el check. */
+    fillViewport() {
+        var _a, _b;
+        const count = this.parsedItems.length;
+        if (this.loading || count === 0 || count === this.lastFillLen)
+            return;
+        const { hasMore } = deriveMore(count, this.total, this.hasMore);
+        if (!hasMore)
+            return;
+        const vp = (_b = (_a = this.osInstance) === null || _a === void 0 ? void 0 : _a.elements().viewport) !== null && _b !== void 0 ? _b : this.optionsEl;
+        // clientHeight 0 = panel oculto/sin layout: las métricas mienten, no pedir.
+        if (!vp || vp.clientHeight === 0)
+            return;
+        if (vp.scrollHeight - vp.clientHeight <= 40) {
+            this.lastFillLen = count;
+            this.coLoadMore.emit();
+        }
+    }
     scrollActiveIntoView() {
         requestAnimationFrame(() => {
             var _a, _b;
@@ -343,18 +672,34 @@ export class CoOptionList {
             return label;
         return [seg.pre, h("span", { class: "co-option-list__match" }, seg.match), seg.post];
     }
+    /** Pill junto al label. Con `tooltip` va envuelto en un `co-tooltip` — el
+     *  label del badge se abrevia (3 letras en el de workspace) y sin el texto
+     *  completo al hover no hay forma de saber a qué se refiere. Sin `tooltip`
+     *  renderiza el span pelado, igual que antes (mismo patrón que la prop
+     *  `name` de co-avatar). */
+    renderBadge(badge) {
+        const pill = (h("span", { class: "co-option-list__badge", style: badge.color ? { backgroundColor: badge.color, color: 'var(--co-color-base-blanco, #fff)' } : undefined }, badge.label));
+        if (!badge.tooltip)
+            return pill;
+        return (h("co-tooltip", { class: "co-option-list__badge-tip", content: badge.tooltip }, pill));
+    }
     renderRow(item, index, selectedIds) {
         const isSelected = selectedIds.includes(item._id);
-        const canDrag = this.reorderable && this.selectedFirst && isSelected && !this.term;
+        // Dos modos de drag EXCLUYENTES: bloque seleccionado = drag por puntero
+        // (motion.dev-like); lista completa (listReorderable) = HTML5 DnD con
+        // indicador de línea.
+        const ptrDragRow = !this.listDragActive && this.reorderable && this.selectedFirst && isSelected && !this.term;
+        const listDragRow = this.listDragActive && !item.pinned && !this.term;
         return (h("div", { class: {
                 'co-option-list__option': true,
                 'co-option-list__option--selected': isSelected,
                 'co-option-list__option--active': index === this.activeIndex,
                 'co-option-list__option--disabled': !!item.disabled,
-                'co-option-list__option--dragging': this.dragKey === item._id,
-                'co-option-list__option--drop-before': this.overKey === item._id && !this.dropAfter,
-                'co-option-list__option--drop-after': this.overKey === item._id && this.dropAfter,
-            }, key: item._id, id: `co-optlist-${index}`, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', draggable: canDrag && this.armedKey === item._id, onClick: () => !item.disabled && this.pick(item), onMouseEnter: () => { this.activeIndex = index; }, onDragStart: canDrag ? (e) => this.handleRowDragStart(e, item._id) : undefined, onDragOver: canDrag ? (e) => this.handleRowDragOver(e, item._id) : undefined, onDrop: canDrag ? (e) => this.handleRowDrop(e, item._id) : undefined, onDragEnd: canDrag ? this.handleRowDragEnd : undefined, onDragLeave: canDrag ? (e) => this.handleRowDragLeave(e, item._id) : undefined }, canDrag && (h("span", { class: "co-option-list__drag-handle", part: "drag-handle", title: "Drag to reorder", onMouseDown: () => (this.armedKey = item._id), onClick: (e) => e.stopPropagation() }, h("co-icon", { name: "dots-six-vertical", size: 16 }))), this.renderLeading(item), h("div", { class: "co-option-list__text" }, h("span", { class: "co-option-list__title" }, h("span", { class: "co-option-list__label", style: item.labelColor ? { color: item.labelColor, fontWeight: '600' } : undefined }, this.renderLabelText(item.label)), item.suffix && h("span", { class: "co-option-list__suffix" }, "- ", item.suffix), item.badge && (h("span", { class: "co-option-list__badge", style: item.badge.color ? { backgroundColor: item.badge.color, color: 'var(--co-color-base-blanco, #fff)' } : undefined }, item.badge.label))), item.description && h("span", { class: "co-option-list__desc" }, item.description)), isSelected && this.removableItems && this.multiple && (h("button", { class: "co-option-list__row-action", type: "button", tabIndex: -1, "aria-label": `Remove ${item.label}`, onClick: (e) => { e.stopPropagation(); this.coRemoveItem.emit(item._id); } }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !this.removableItems && this.selectedAffordance === 'deselect' && (h("button", { class: "co-option-list__row-action", type: "button", tabIndex: -1, "aria-label": `Deselect ${item.label}`, onClick: (e) => { e.stopPropagation(); this.deselectItem(item); } }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !this.removableItems && this.selectedAffordance === 'check' && (h("co-icon", { name: "check", size: 16, class: "co-option-list__check" }))));
+                'co-option-list__option--dragging': this.listDragActive && this.dragKey === item._id,
+                'co-option-list__option--lifted': !this.listDragActive && this.dragKey === item._id,
+                'co-option-list__option--drop-before': this.listDragActive && this.overKey === item._id && !this.dropAfter,
+                'co-option-list__option--drop-after': this.listDragActive && this.overKey === item._id && this.dropAfter,
+            }, key: item._id, id: `co-optlist-${index}`, "data-id": item._id, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', draggable: listDragRow && this.armedKey === item._id, onClick: () => !item.disabled && this.pick(item), onMouseEnter: () => { this.activeIndex = index; }, onDragStart: listDragRow ? (e) => this.handleRowDragStart(e, item._id) : undefined, onDragOver: listDragRow ? (e) => this.handleRowDragOver(e, item._id) : undefined, onDrop: listDragRow ? (e) => this.handleRowDrop(e, item._id) : undefined, onDragEnd: listDragRow ? this.handleRowDragEnd : undefined, onDragLeave: listDragRow ? (e) => this.handleRowDragLeave(e, item._id) : undefined }, (ptrDragRow || listDragRow) && (h("span", { class: "co-option-list__drag-handle", part: "drag-handle", title: "Drag to reorder", onMouseDown: listDragRow ? () => (this.armedKey = item._id) : undefined, onPointerDown: ptrDragRow ? (e) => this.startPointerDrag(e, item._id) : undefined, onClick: (e) => e.stopPropagation() }, h("co-icon", { name: "dots-six-vertical", size: 16 }))), this.renderLeading(item), h("div", { class: "co-option-list__text" }, h("span", { class: "co-option-list__title" }, h("span", { class: "co-option-list__label", style: item.labelColor ? { color: item.labelColor, fontWeight: '600' } : undefined }, this.renderLabelText(item.label)), item.suffix && h("span", { class: "co-option-list__suffix" }, "- ", item.suffix), item.badge && this.renderBadge(item.badge)), item.description && h("span", { class: "co-option-list__desc" }, item.description)), this.pinnable && (h("button", { class: { 'co-option-list__pin': true, 'co-option-list__pin--active': !!item.pinned }, type: "button", tabIndex: -1, "aria-label": item.pinned ? `Unpin ${item.label}` : `Pin ${item.label}`, "aria-pressed": item.pinned ? 'true' : 'false', onClick: (e) => { e.stopPropagation(); this.coPinToggle.emit({ item }); } }, h("co-icon", { name: "push-pin", size: 16, weight: item.pinned ? 'fill' : 'regular' }))), isSelected && this.removableItems && this.multiple && (h("button", { class: "co-option-list__row-action", type: "button", tabIndex: -1, "aria-label": `Remove ${item.label}`, onClick: (e) => { e.stopPropagation(); this.coRemoveItem.emit(item._id); } }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !this.removableItems && this.selectedAffordance === 'deselect' && (h("button", { class: "co-option-list__row-action", type: "button", tabIndex: -1, "aria-label": `Deselect ${item.label}`, onClick: (e) => { e.stopPropagation(); this.deselectItem(item); } }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !this.removableItems && this.selectedAffordance === 'check' && (h("co-icon", { name: "check", size: 16, class: "co-option-list__check" }))));
     }
     renderVirtual(items, selectedIds) {
         const { totalHeight, startIdx, endIdx, offsetY } = virtualSlice(this.scrollTop, items.length);
@@ -365,11 +710,11 @@ export class CoOptionList {
         const selectedIds = this.selectedIds;
         const { hasMore, remaining } = deriveMore(this.parsedItems.length, this.total, this.hasMore);
         const showClear = !!this.clearOptionLabel && selectedIds.length > 0;
-        return (h("div", { key: '1002a1993d3a13db23898cba6b8bd14aade3d8ac', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: 'a3f6d8a19f4dc7d7aac1898b053de0ccabc5ce6d', class: "co-option-list__search", part: "search" }, h("co-icon", { key: 'a3972500879ae7e5941841a13bf03af6dccc10f0', name: "magnifying-glass", size: 16 }), h("input", { key: '37861b77d5848ad9b8d0cfaf7c7ac2699e51000f', class: "co-option-list__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.term, onInput: this.onSearchInput, ref: (el) => (this.searchInputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list" }))), h("div", { key: '652fbbbbb6145c8c6bffc354a1435c09bc3a4e62', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, h("div", { key: 'e0b68873c27f2d08a9edc0196384b3f75bd95e05', class: "co-option-list__inner" }, showClear && (h("button", { key: '7e4716349f9af4980fac732fdfe4013fc81e7b18', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '3d23e2a85e9387f364b0a5c705ca034020c83e43', name: "x-circle", size: 14 }), h("span", { key: '8fcc642763adbba7ca79507d53f18de157c61443' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '3ea9842f365d5e51338ff5799fccb27ca7bfe466', class: "co-option-list__loading" }, h("co-loader", { key: '306972ee829c41ae32ba69bd02b4dec839842a03', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: 'b184393bc7348370fc6fc84ff7a38584a7fc2fd5', class: "co-option-list__empty" }, h("co-icon", { key: '39e9e495a62f285d22bbb5197227d48a52dd5c40', name: "magnifying-glass", size: 20 }), h("span", { key: '6faefea453fbf0ce3083c863b9c822a1902466b3' }, this.emptyMessage))), items.length > 0 && this.virtual
+        return (h("div", { key: 'a5754821517230b914fd9f23b024afc523e4ee9d', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '9988f2e6834b5c8cf4c4832d609fb6665c9a46cc', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '8b8f2e72fb6f9aa9b498455757aefe943627af80', name: "magnifying-glass", size: 16 }), h("input", { key: 'e434b657655cb855ef77611671db90a7e8f78850', class: "co-option-list__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.term, onInput: this.onSearchInput, ref: (el) => (this.searchInputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list" }))), h("div", { key: '9e3c8ff1cb005274b74cf50b1c8db469958bbfc0', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, h("div", { key: '8087c3de1d857b562918a358f98a7a195cbe66d7', class: "co-option-list__inner" }, showClear && (h("button", { key: 'b067aedd7e0dbb29db12c35d0d217147359bc5f7', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '406e84a7bcc5d8509383527caa0f49d5f93fda53', name: "x-circle", size: 14 }), h("span", { key: '9347b010b58d51363a68aab65781cae7de31cca1' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '774fcb348a3553a945b70de822621ee24e410808', class: "co-option-list__loading" }, h("co-loader", { key: 'f760bf3ec0b27cfd0c57e2a56a613b8390faa935', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: 'f018550513d4057bdbddaf64846ba7d4cd016a45', class: "co-option-list__empty" }, h("co-icon", { key: '7925a8b7c385389b1d59548d5d550a0d7f0d163e', name: "magnifying-glass", size: 20 }), h("span", { key: 'b31e52eef274434599db7ff217a9bfc634ebdf7f' }, this.emptyMessage))), items.length > 0 && this.virtual
             ? this.renderVirtual(items, selectedIds)
             : buildRows(items).map((row) => row.kind === 'header'
                 ? h("div", { class: "co-option-list__group", role: "presentation" }, row.label)
-                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: '9a4cc5cf05196070febf62c6bf309b45fe8f5974', class: "co-option-list__loading-more" }, h("co-loader", { key: '0eb546749b37b5cd83d88bc6c40b34b3b5b04532', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '06c4deab21fe6c56dcda175ba9b4f37add4c2e8a', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: 'eaa788987749e25086a3be92df591e767c33c65b', name: "footer" })));
+                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: '7de231a83a96a2aca0cb240a68c3c9e6ab9b475c', class: "co-option-list__loading-more" }, h("co-loader", { key: '087234fb45c3cbea3bd3f2888957d3b2751753ad', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '456bc75bb53a3f0d01f7fd850ca4b8227baf326d', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '2935b1dd65ec2409c18c3f72e0200d5ed1c19323', name: "footer" })));
     }
     static get is() { return "co-option-list"; }
     static get encapsulation() { return "shadow"; }
@@ -559,6 +904,46 @@ export class CoOptionList {
                 "attribute": "reorderable",
                 "defaultValue": "false"
             },
+            "pinnable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Bot\u00F3n push-pin por fila (siempre visible). Emite coPinToggle; el estado\npinned viene en item.pinned \u2014 el componente NO lo muta (controlado)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pinnable",
+                "defaultValue": "false"
+            },
+            "listReorderable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Drag-reorder de la LISTA completa (no del bloque seleccionado): handle en\nfilas no-pineadas, emite coListReorder con el orden visible completo.\nIndependiente de multiple/selectedFirst. No soportado con `virtual`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "list-reorderable",
+                "defaultValue": "false"
+            },
             "searchable": {
                 "type": "boolean",
                 "mutable": false,
@@ -958,6 +1343,50 @@ export class CoOptionList {
                         }
                     }
                 }
+            }, {
+                "method": "coPinToggle",
+                "name": "coPinToggle",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggle de pin de una fila (pinnable)."
+                },
+                "complexType": {
+                    "original": "{ item: OptionListItem }",
+                    "resolved": "{ item: OptionListItem; }",
+                    "references": {
+                        "OptionListItem": {
+                            "location": "import",
+                            "path": "./optionListLogic",
+                            "id": "src/components/co-option-list/optionListLogic.ts::OptionListItem",
+                            "referenceLocation": "OptionListItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "coListReorder",
+                "name": "coListReorder",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Drag-reorder de lista completa (listReorderable): orden visible + \u00EDtem movido."
+                },
+                "complexType": {
+                    "original": "{ value: string[]; item: OptionListItem }",
+                    "resolved": "{ value: string[]; item: OptionListItem; }",
+                    "references": {
+                        "OptionListItem": {
+                            "location": "import",
+                            "path": "./optionListLogic",
+                            "id": "src/components/co-option-list/optionListLogic.ts::OptionListItem",
+                            "referenceLocation": "OptionListItem"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -996,6 +1425,27 @@ export class CoOptionList {
                     "tags": []
                 }
             },
+            "scrollToSelected": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Ancla la sesi\u00F3n del panel en la selecci\u00F3n: highlight sobre la primera fila\nseleccionada y scroll hasta dejarla visible (paridad resetActiveIndex de\nco-select). El host la llama al ABRIR su panel \u2014 la lista queda montada\nentre aperturas y no sabe cu\u00E1ndo se abre (mismo contrato que\nfocusSearch/snapshotOrder). Espera layout real igual que focusSearch: el\npanel se hace visible frames despu\u00E9s y un scroll sobre subtree oculto se\nclampea a 0 en silencio.",
+                    "tags": []
+                }
+            },
             "handleKey": {
                 "complexType": {
                     "signature": "(e: KeyboardEvent) => Promise<boolean>",