@prolibu-suite/cobalt-core 0.9.3 → 0.9.5

package/dist/esm/co-chip_2.entry.js

@@ -161,6 +161,17 @@ function buildRows(items) {
 }
 /** Mueve `fromId` a la posición de `toId` en `order`. No muta el input;
  *  devuelve el mismo array (referencia) si es no-op. */
+/**
+ * Universo del drag del bloque seleccionado: los ids seleccionados VIVOS en su
+ * orden visible. A diferencia del snapshot (congelado al abrir), incluye lo
+ * seleccionado durante la sesión del panel — sin esto, esos ítems renderizan
+ * handle pero el drop los rechaza, y un reorder del snapshot emitiría un value
+ * truncado (pierde las selecciones frescas).
+ */
+function liveSelectedOrder(items, selectedIds) {
+    const sel = new Set(selectedIds);
+    return items.filter((i) => sel.has(i._id)).map((i) => i._id);
+}
 function reorderIds(order, fromId, toId) {
     if (fromId === toId)
         return order;
@@ -172,6 +183,13 @@ function reorderIds(order, fromId, toId) {
     next.splice(to, 0, next.splice(from, 1)[0]);
     return next;
 }
+/** Reorder de lista completa: los extremos pineados son inválidos (ni origen ni
+ *  destino) — devuelve la misma referencia, señal de no-op para el caller. */
+function listReorderIds(order, fromId, toId, isPinned) {
+    if (isPinned(fromId) || isPinned(toId))
+        return order;
+    return reorderIds(order, fromId, toId);
+}
 /** Siguiente highlight: wrap, salta disabled. -1 = sin items navegables. */
 function nextActiveIndex(current, delta, items) {
     const positions = [];
@@ -186,6 +204,13 @@ function nextActiveIndex(current, delta, items) {
         return delta === 1 ? positions[0] : positions[positions.length - 1];
     return positions[(at + delta + positions.length) % positions.length];
 }
+/** Highlight inicial de la sesión del panel: primera fila seleccionada
+ *  NAVEGABLE en orden visible (contrato de scrollToSelected, paridad
+ *  resetActiveIndex de co-select). -1 = nada que anclar. */
+function selectedActiveIndex(items, selectedIds) {
+    const sel = new Set(selectedIds);
+    return items.findIndex((it) => sel.has(it._id) && !it.disabled);
+}
 /** `total > 0` tiene precedencia (deriva remaining); si no, vale `hasMoreProp`. */
 function deriveMore(count, total, hasMoreProp) {
     if (total > 0)
@@ -203,7 +228,7 @@ function virtualSlice(scrollTop, count) {
     return { totalHeight, startIdx, endIdx, offsetY: startIdx * VIRTUAL_ITEM_HEIGHT };
 }
 
-const coOptionListCss = () => `.os-size-observer,.os-size-observer-listener{scroll-behavior:auto !important;direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;top:0;right:0;bottom:0;left:0;transform:scale(0.1)}.os-size-observer::before{content:"";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(calc(1 / 0.1))}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty::before{content:"";width:100%;height:100%}.os-size-observer-listener:empty::before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{from{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0px;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}html[data-overlayscrollbars-body]{overflow:hidden}html[data-overlayscrollbars-body],html[data-overlayscrollbars-body]>body{width:100%;height:100%;margin:0}html[data-overlayscrollbars-body]>body{overflow:visible;margin:0}[data-overlayscrollbars]{position:relative}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{display:flex;align-items:stretch !important;flex-direction:row !important;flex-wrap:nowrap !important;scroll-behavior:auto !important}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){box-sizing:inherit;position:relative;flex:auto;height:auto;width:100%;min-width:0;padding:0;margin:0;border:none;z-index:0}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){--os-vaw:0;--os-vah:0;outline:none}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus{outline:none}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before{content:"";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah)}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{overflow:hidden !important}[data-overlayscrollbars~=host][data-overlayscrollbars~=noClipping],[data-overlayscrollbars-padding~=noClipping]{overflow:visible !important}[data-overlayscrollbars-viewport]{--os-viewport-overflow-x:hidden;--os-viewport-overflow-y:hidden;overflow-x:var(--os-viewport-overflow-x);overflow-y:var(--os-viewport-overflow-y)}[data-overlayscrollbars-viewport~=overflowXVisible]{--os-viewport-overflow-x:visible}[data-overlayscrollbars-viewport~=overflowXHidden]{--os-viewport-overflow-x:hidden}[data-overlayscrollbars-viewport~=overflowXScroll]{--os-viewport-overflow-x:scroll}[data-overlayscrollbars-viewport~=overflowYVisible]{--os-viewport-overflow-y:visible}[data-overlayscrollbars-viewport~=overflowYHidden]{--os-viewport-overflow-y:hidden}[data-overlayscrollbars-viewport~=overflowYScroll]{--os-viewport-overflow-y:scroll}[data-overlayscrollbars-viewport~=overflowImportant]{overflow-x:var(--os-viewport-overflow-x) !important;overflow-y:var(--os-viewport-overflow-y) !important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId){font-size:0 !important;line-height:0 !important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::before,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::after,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)>*:not(#osFakeId){display:none !important;position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}[data-overlayscrollbars-viewport~=measuring],[data-overlayscrollbars-viewport~=scrolling]{scroll-behavior:auto !important;scroll-snap-type:none !important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowXVisible]{overflow-x:hidden !important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowYVisible]{overflow-y:hidden !important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport]{height:auto !important;width:auto !important}@property --os-scroll-percent{syntax:"<number>";inherits:true;initial-value:0}@property --os-viewport-percent{syntax:"<number>";inherits:true;initial-value:0}.os-scrollbar{--os-viewport-percent:0;--os-scroll-percent:0;--os-scroll-direction:0;--os-scroll-percent-directional:calc(     var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) *       var(--os-scroll-direction)   )}.os-scrollbar{contain:size layout;contain:size layout style;transition:opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none !important}.os-scrollbar-track{position:relative;padding:0 !important;border:none !important}.os-scrollbar-handle{position:absolute}.os-scrollbar-track,.os-scrollbar-handle{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none !important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0 !important;transition:none !important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0;left:calc(var(--os-scroll-percent-directional) * 100%);transform:translateX(calc(var(--os-scroll-percent-directional) * -100%));width:calc(var(--os-viewport-percent) * 100%)}.os-scrollbar-vertical .os-scrollbar-handle{right:0;top:calc(var(--os-scroll-percent-directional) * 100%);transform:translateY(calc(var(--os-scroll-percent-directional) * -100%));height:calc(var(--os-viewport-percent) * 100%)}@supports (container-type: size){.os-scrollbar-track{container-type:size}.os-scrollbar-horizontal .os-scrollbar-handle{left:auto;transform:translateX(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-vertical .os-scrollbar-handle{top:auto;transform:translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle{right:auto;left:0}}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{right:auto;left:0}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}@media print{.os-scrollbar{display:none}}.os-scrollbar{--os-size:0;--os-padding-perpendicular:0;--os-padding-axis:0;--os-track-border-radius:0;--os-track-bg:none;--os-track-bg-hover:none;--os-track-bg-active:none;--os-track-border:none;--os-track-border-hover:none;--os-track-border-active:none;--os-handle-border-radius:0;--os-handle-bg:none;--os-handle-bg-hover:none;--os-handle-bg-active:none;--os-handle-border:none;--os-handle-border-hover:none;--os-handle-border-active:none;--os-handle-min-size:33px;--os-handle-max-size:none;--os-handle-perpendicular-size:100%;--os-handle-perpendicular-size-hover:100%;--os-handle-perpendicular-size-active:100%;--os-handle-interactive-area-offset:0}.os-scrollbar-track{border:var(--os-track-border);border-radius:var(--os-track-border-radius);background:var(--os-track-bg);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s}.os-scrollbar-track:hover{border:var(--os-track-border-hover);background:var(--os-track-bg-hover)}.os-scrollbar-track:active{border:var(--os-track-border-active);background:var(--os-track-bg-active)}.os-scrollbar-handle{border:var(--os-handle-border);border-radius:var(--os-handle-border-radius);background:var(--os-handle-bg)}.os-scrollbar-handle:hover{border:var(--os-handle-border-hover);background:var(--os-handle-bg-hover)}.os-scrollbar-handle:active{border:var(--os-handle-border-active);background:var(--os-handle-bg-active)}.os-scrollbar-track:before,.os-scrollbar-handle:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;display:block}.os-scrollbar-horizontal{padding:var(--os-padding-perpendicular) var(--os-padding-axis);right:var(--os-size);height:var(--os-size)}.os-scrollbar-horizontal.os-scrollbar-rtl{left:var(--os-size);right:0}.os-scrollbar-horizontal .os-scrollbar-track:before{top:calc(var(--os-padding-perpendicular) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal .os-scrollbar-handle{min-width:var(--os-handle-min-size);max-width:var(--os-handle-max-size);height:var(--os-handle-perpendicular-size);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s}.os-scrollbar-horizontal .os-scrollbar-handle:before{top:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal:hover .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-horizontal:active .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-active)}.os-scrollbar-vertical{padding:var(--os-padding-axis) var(--os-padding-perpendicular);bottom:var(--os-size);width:var(--os-size)}.os-scrollbar-vertical .os-scrollbar-track:before{left:calc(var(--os-padding-perpendicular) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical .os-scrollbar-handle{min-height:var(--os-handle-min-size);max-height:var(--os-handle-max-size);width:var(--os-handle-perpendicular-size);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s}.os-scrollbar-vertical .os-scrollbar-handle:before{left:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before{right:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);left:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical:hover .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-vertical:active .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-active)}[data-overlayscrollbars-viewport~=measuring]>.os-scrollbar,.os-theme-none.os-scrollbar{display:none !important}.os-theme-dark,.os-theme-light{box-sizing:border-box;--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-border-radius:10px;--os-handle-interactive-area-offset:4px;--os-handle-border-radius:10px}.os-theme-dark{--os-handle-bg:rgba(0, 0, 0, 0.44);--os-handle-bg-hover:rgba(0, 0, 0, 0.55);--os-handle-bg-active:rgba(0, 0, 0, 0.66)}.os-theme-light{--os-handle-bg:rgba(255, 255, 255, 0.44);--os-handle-bg-hover:rgba(255, 255, 255, 0.55);--os-handle-bg-active:rgba(255, 255, 255, 0.66)}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport]),[data-overlayscrollbars-viewport~=scrollbarHidden],html[data-overlayscrollbars-viewport~=scrollbarHidden]>body{scrollbar-width:none !important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar,[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar-corner,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar-corner{-webkit-appearance:none !important;appearance:none !important;display:none !important;width:0 !important;height:0 !important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}:host{display:block;font-family:var(--co-font-family-primary, 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)}.co-option-list{display:flex;flex-direction:column;min-width:0}.co-option-list__search{display:flex;align-items:center;gap:var(--co-spacing-sm, 6px);height:32px;box-sizing:border-box;margin:var(--co-spacing-md, 12px) var(--co-spacing-md, 12px) 0;padding:0 var(--co-spacing-sm2, 8px) 0 var(--co-spacing-xs, 4px);border:1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));border-radius:var(--co-border-radius-xs, 8px);color:var(--co-semantic-text-muted, #888888)}.co-option-list__search:focus-within{border-color:var(--co-semantic-border-focus, rgba(31, 28, 27, 0.25))}.co-option-list__search co-icon{flex-shrink:0;width:24px;display:flex;align-items:center;justify-content:center;opacity:0.7}.co-option-list__search-input{flex:1;min-width:0;border:0;outline:none;background:transparent;padding:0;font-family:var(--co-font-family-primary, 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);font-size:var(--co-font-size-14, 14px);font-weight:500;letter-spacing:var(--co-font-letter-spacing-body, -0.03em);line-height:1;color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__search-input::placeholder{color:var(--co-semantic-text-muted, #888888)}.co-option-list__options{max-height:280px;overflow-y:auto;overflow-x:hidden;padding:var(--co-spacing-md, 12px)}.co-option-list__inner{display:flex;flex-direction:column;gap:var(--co-spacing-xxs, 2px);min-width:0}.os-scrollbar.os-theme-co{--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-bg:transparent;--os-handle-border-radius:var(--co-border-radius-full, 9999px);--os-handle-bg:var(--co-color-opacity-negro-16, rgba(31, 28, 27, 0.16));--os-handle-bg-hover:var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));--os-handle-bg-active:var(--co-color-opacity-negro-50, rgba(31, 28, 27, 0.5));--os-handle-min-size:24px}.co-option-list__option{display:flex;align-items:center;gap:var(--co-spacing-sm2, 8px);min-width:0;min-height:32px;box-sizing:border-box;padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm2, 8px) var(--co-spacing-xs, 4px) var(--co-spacing-xs, 4px);border-radius:var(--co-border-radius-xs, 8px);cursor:pointer;font-size:var(--co-font-size-14, 14px);letter-spacing:var(--co-font-letter-spacing-body, -0.03em);color:var(--co-semantic-text-default, #1f1c1b);transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-option-list__spacer .co-option-list__option{height:32px;margin-bottom:var(--co-spacing-xxs, 2px)}.co-option-list__option--active{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-option-list__option--selected{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-option-list__option--disabled{opacity:0.5;cursor:not-allowed}.co-option-list__avatar,.co-option-list__icon{flex-shrink:0}.co-option-list__icon{margin:0 var(--co-spacing-xs, 4px)}.co-option-list__dot{flex-shrink:0;width:10px;height:10px;margin:0 7px;border-radius:var(--co-border-radius-full, 9999px)}.co-option-list__text{display:flex;flex-direction:column;gap:var(--co-spacing-xxs, 2px);flex:1;min-width:0}.co-option-list__title{display:flex;align-items:center;gap:var(--co-spacing-xs, 4px);min-width:0}.co-option-list__label{font-weight:400;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-option-list__suffix{color:var(--co-semantic-text-secondary, #585858);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1}.co-option-list__badge{flex-shrink:0;padding:0 var(--co-spacing-xs, 4px);border-radius:var(--co-border-radius-full, 9999px);background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04));color:var(--co-semantic-text-default, #1f1c1b);font-size:var(--co-font-size-10, 10px);font-weight:600;line-height:16px}.co-option-list__desc{font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-muted, #888888);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-option-list__match{color:var(--co-color-primary-azul, #2563eb);font-weight:700}.co-option-list__check{flex-shrink:0;color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__row-action{flex-shrink:0;display:inline-flex;align-items:center;border:0;background:transparent;padding:0;cursor:pointer;color:var(--co-semantic-text-muted, #888888);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-option-list__row-action:hover{color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__drag-handle{display:inline-flex;align-items:center;cursor:grab;color:var(--co-semantic-text-muted);margin-right:var(--co-spacing-xs);flex:0 0 auto}.co-option-list__drag-handle:active{cursor:grabbing}.co-option-list__option--dragging{opacity:0.5}.co-option-list__option--drop-before{box-shadow:inset 0 2px 0 0 var(--co-semantic-border-focus)}.co-option-list__option--drop-after{box-shadow:inset 0 -2px 0 0 var(--co-semantic-border-focus)}.co-option-list__group{padding:var(--co-spacing-sm2, 8px) var(--co-spacing-xs, 4px) var(--co-spacing-xs, 4px);font-family:var(--co-font-family-mono, 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace);font-size:var(--co-font-size-10, 10px);font-weight:400;text-transform:uppercase;letter-spacing:var(--co-font-letter-spacing-overline, 0.08em);line-height:1.1;color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__clear-row{display:flex;align-items:center;gap:var(--co-spacing-sm2, 8px);width:100%;min-height:32px;box-sizing:border-box;border:0;background:transparent;padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm2, 8px);border-radius:var(--co-border-radius-xs, 8px);cursor:pointer;text-align:left;font-family:var(--co-font-family-primary, 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);font-size:var(--co-font-size-14, 14px);letter-spacing:var(--co-font-letter-spacing-body, -0.03em);color:var(--co-semantic-text-secondary, #585858)}.co-option-list__clear-row:hover{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-option-list__loading,.co-option-list__loading-more{display:flex;justify-content:center;padding:var(--co-spacing-sm, 6px)}.co-option-list__empty{display:flex;align-items:center;gap:var(--co-spacing-sm2, 8px);padding:var(--co-spacing-md, 12px) var(--co-spacing-xs, 4px);font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-muted, #888888)}.co-option-list__more{padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm, 6px);font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-muted, #888888);text-align:center}.co-option-list__option:focus-visible,.co-option-list__clear-row:focus-visible{outline:2px solid var(--co-semantic-border-focus, rgba(31, 28, 27, 0.25));outline-offset:-2px}`;
+const coOptionListCss = () => `.os-size-observer,.os-size-observer-listener{scroll-behavior:auto !important;direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;top:0;right:0;bottom:0;left:0;transform:scale(0.1)}.os-size-observer::before{content:"";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(calc(1 / 0.1))}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty::before{content:"";width:100%;height:100%}.os-size-observer-listener:empty::before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{from{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0px;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}html[data-overlayscrollbars-body]{overflow:hidden}html[data-overlayscrollbars-body],html[data-overlayscrollbars-body]>body{width:100%;height:100%;margin:0}html[data-overlayscrollbars-body]>body{overflow:visible;margin:0}[data-overlayscrollbars]{position:relative}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{display:flex;align-items:stretch !important;flex-direction:row !important;flex-wrap:nowrap !important;scroll-behavior:auto !important}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){box-sizing:inherit;position:relative;flex:auto;height:auto;width:100%;min-width:0;padding:0;margin:0;border:none;z-index:0}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){--os-vaw:0;--os-vah:0;outline:none}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus{outline:none}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before{content:"";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah)}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{overflow:hidden !important}[data-overlayscrollbars~=host][data-overlayscrollbars~=noClipping],[data-overlayscrollbars-padding~=noClipping]{overflow:visible !important}[data-overlayscrollbars-viewport]{--os-viewport-overflow-x:hidden;--os-viewport-overflow-y:hidden;overflow-x:var(--os-viewport-overflow-x);overflow-y:var(--os-viewport-overflow-y)}[data-overlayscrollbars-viewport~=overflowXVisible]{--os-viewport-overflow-x:visible}[data-overlayscrollbars-viewport~=overflowXHidden]{--os-viewport-overflow-x:hidden}[data-overlayscrollbars-viewport~=overflowXScroll]{--os-viewport-overflow-x:scroll}[data-overlayscrollbars-viewport~=overflowYVisible]{--os-viewport-overflow-y:visible}[data-overlayscrollbars-viewport~=overflowYHidden]{--os-viewport-overflow-y:hidden}[data-overlayscrollbars-viewport~=overflowYScroll]{--os-viewport-overflow-y:scroll}[data-overlayscrollbars-viewport~=overflowImportant]{overflow-x:var(--os-viewport-overflow-x) !important;overflow-y:var(--os-viewport-overflow-y) !important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId){font-size:0 !important;line-height:0 !important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::before,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::after,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)>*:not(#osFakeId){display:none !important;position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}[data-overlayscrollbars-viewport~=measuring],[data-overlayscrollbars-viewport~=scrolling]{scroll-behavior:auto !important;scroll-snap-type:none !important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowXVisible]{overflow-x:hidden !important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowYVisible]{overflow-y:hidden !important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport]{height:auto !important;width:auto !important}@property --os-scroll-percent{syntax:"<number>";inherits:true;initial-value:0}@property --os-viewport-percent{syntax:"<number>";inherits:true;initial-value:0}.os-scrollbar{--os-viewport-percent:0;--os-scroll-percent:0;--os-scroll-direction:0;--os-scroll-percent-directional:calc(     var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) *       var(--os-scroll-direction)   )}.os-scrollbar{contain:size layout;contain:size layout style;transition:opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none !important}.os-scrollbar-track{position:relative;padding:0 !important;border:none !important}.os-scrollbar-handle{position:absolute}.os-scrollbar-track,.os-scrollbar-handle{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none !important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0 !important;transition:none !important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0;left:calc(var(--os-scroll-percent-directional) * 100%);transform:translateX(calc(var(--os-scroll-percent-directional) * -100%));width:calc(var(--os-viewport-percent) * 100%)}.os-scrollbar-vertical .os-scrollbar-handle{right:0;top:calc(var(--os-scroll-percent-directional) * 100%);transform:translateY(calc(var(--os-scroll-percent-directional) * -100%));height:calc(var(--os-viewport-percent) * 100%)}@supports (container-type: size){.os-scrollbar-track{container-type:size}.os-scrollbar-horizontal .os-scrollbar-handle{left:auto;transform:translateX(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-vertical .os-scrollbar-handle{top:auto;transform:translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle{right:auto;left:0}}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{right:auto;left:0}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}@media print{.os-scrollbar{display:none}}.os-scrollbar{--os-size:0;--os-padding-perpendicular:0;--os-padding-axis:0;--os-track-border-radius:0;--os-track-bg:none;--os-track-bg-hover:none;--os-track-bg-active:none;--os-track-border:none;--os-track-border-hover:none;--os-track-border-active:none;--os-handle-border-radius:0;--os-handle-bg:none;--os-handle-bg-hover:none;--os-handle-bg-active:none;--os-handle-border:none;--os-handle-border-hover:none;--os-handle-border-active:none;--os-handle-min-size:33px;--os-handle-max-size:none;--os-handle-perpendicular-size:100%;--os-handle-perpendicular-size-hover:100%;--os-handle-perpendicular-size-active:100%;--os-handle-interactive-area-offset:0}.os-scrollbar-track{border:var(--os-track-border);border-radius:var(--os-track-border-radius);background:var(--os-track-bg);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s}.os-scrollbar-track:hover{border:var(--os-track-border-hover);background:var(--os-track-bg-hover)}.os-scrollbar-track:active{border:var(--os-track-border-active);background:var(--os-track-bg-active)}.os-scrollbar-handle{border:var(--os-handle-border);border-radius:var(--os-handle-border-radius);background:var(--os-handle-bg)}.os-scrollbar-handle:hover{border:var(--os-handle-border-hover);background:var(--os-handle-bg-hover)}.os-scrollbar-handle:active{border:var(--os-handle-border-active);background:var(--os-handle-bg-active)}.os-scrollbar-track:before,.os-scrollbar-handle:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;display:block}.os-scrollbar-horizontal{padding:var(--os-padding-perpendicular) var(--os-padding-axis);right:var(--os-size);height:var(--os-size)}.os-scrollbar-horizontal.os-scrollbar-rtl{left:var(--os-size);right:0}.os-scrollbar-horizontal .os-scrollbar-track:before{top:calc(var(--os-padding-perpendicular) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal .os-scrollbar-handle{min-width:var(--os-handle-min-size);max-width:var(--os-handle-max-size);height:var(--os-handle-perpendicular-size);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s}.os-scrollbar-horizontal .os-scrollbar-handle:before{top:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal:hover .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-horizontal:active .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-active)}.os-scrollbar-vertical{padding:var(--os-padding-axis) var(--os-padding-perpendicular);bottom:var(--os-size);width:var(--os-size)}.os-scrollbar-vertical .os-scrollbar-track:before{left:calc(var(--os-padding-perpendicular) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical .os-scrollbar-handle{min-height:var(--os-handle-min-size);max-height:var(--os-handle-max-size);width:var(--os-handle-perpendicular-size);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s}.os-scrollbar-vertical .os-scrollbar-handle:before{left:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before{right:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);left:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical:hover .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-vertical:active .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-active)}[data-overlayscrollbars-viewport~=measuring]>.os-scrollbar,.os-theme-none.os-scrollbar{display:none !important}.os-theme-dark,.os-theme-light{box-sizing:border-box;--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-border-radius:10px;--os-handle-interactive-area-offset:4px;--os-handle-border-radius:10px}.os-theme-dark{--os-handle-bg:rgba(0, 0, 0, 0.44);--os-handle-bg-hover:rgba(0, 0, 0, 0.55);--os-handle-bg-active:rgba(0, 0, 0, 0.66)}.os-theme-light{--os-handle-bg:rgba(255, 255, 255, 0.44);--os-handle-bg-hover:rgba(255, 255, 255, 0.55);--os-handle-bg-active:rgba(255, 255, 255, 0.66)}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport]),[data-overlayscrollbars-viewport~=scrollbarHidden],html[data-overlayscrollbars-viewport~=scrollbarHidden]>body{scrollbar-width:none !important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar,[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar-corner,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar-corner{-webkit-appearance:none !important;appearance:none !important;display:none !important;width:0 !important;height:0 !important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}:host{display:block;font-family:var(--co-font-family-primary, 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)}.co-option-list{display:flex;flex-direction:column;min-width:0}.co-option-list__search{display:flex;align-items:center;gap:var(--co-spacing-sm, 6px);height:32px;box-sizing:border-box;margin:var(--co-spacing-md, 12px) var(--co-spacing-md, 12px) 0;padding:0 var(--co-spacing-sm2, 8px) 0 var(--co-spacing-xs, 4px);border:1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));border-radius:var(--co-border-radius-xs, 8px);color:var(--co-semantic-text-muted, #888888)}.co-option-list__search:focus-within{border-color:var(--co-semantic-border-focus, rgba(31, 28, 27, 0.25))}.co-option-list__search co-icon{flex-shrink:0;width:24px;display:flex;align-items:center;justify-content:center;opacity:0.7}.co-option-list__search-input{flex:1;min-width:0;border:0;outline:none;background:transparent;padding:0;font-family:var(--co-font-family-primary, 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);font-size:var(--co-font-size-14, 14px);font-weight:500;letter-spacing:var(--co-font-letter-spacing-body, -0.03em);line-height:1;color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__search-input::placeholder{color:var(--co-semantic-text-muted, #888888)}.co-option-list__options{max-height:var(--co-option-list-max-height, 280px);overflow-y:auto;overflow-x:hidden;padding:var(--co-spacing-md, 12px)}.co-option-list__inner{display:flex;flex-direction:column;gap:var(--co-spacing-xxs, 2px);min-width:0}.os-scrollbar.os-theme-co{--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-bg:transparent;--os-handle-border-radius:var(--co-border-radius-full, 9999px);--os-handle-bg:var(--co-color-opacity-negro-16, rgba(31, 28, 27, 0.16));--os-handle-bg-hover:var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));--os-handle-bg-active:var(--co-color-opacity-negro-50, rgba(31, 28, 27, 0.5));--os-handle-min-size:24px}.co-option-list__option{display:flex;align-items:center;gap:var(--co-spacing-sm2, 8px);min-width:0;min-height:32px;box-sizing:border-box;padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm2, 8px) var(--co-spacing-xs, 4px) var(--co-spacing-xs, 4px);border-radius:var(--co-border-radius-xs, 8px);cursor:pointer;font-size:var(--co-font-size-14, 14px);letter-spacing:var(--co-font-letter-spacing-body, -0.03em);color:var(--co-semantic-text-default, #1f1c1b);transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out),     opacity var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-option-list__spacer .co-option-list__option{height:32px;margin-bottom:var(--co-spacing-xxs, 2px)}.co-option-list__option--active{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-option-list__option--selected{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-option-list__option--disabled{opacity:0.5;cursor:not-allowed}.co-option-list__avatar,.co-option-list__icon{flex-shrink:0}.co-option-list__icon{margin:0 var(--co-spacing-xs, 4px)}.co-option-list__dot{flex-shrink:0;width:10px;height:10px;margin:0 7px;border-radius:var(--co-border-radius-full, 9999px)}.co-option-list__text{display:flex;flex-direction:column;gap:var(--co-spacing-xxs, 2px);flex:1;min-width:0}.co-option-list__title{display:flex;align-items:center;gap:var(--co-spacing-xs, 4px);min-width:0}.co-option-list__label{font-weight:400;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-option-list__suffix{color:var(--co-semantic-text-secondary, #585858);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1}.co-option-list__badge{flex-shrink:0;padding:0 var(--co-spacing-xs, 4px);border-radius:var(--co-border-radius-full, 9999px);background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04));color:var(--co-semantic-text-default, #1f1c1b);font-size:var(--co-font-size-10, 10px);font-weight:600;line-height:16px}.co-option-list__badge-tip{display:inline-flex;align-items:center;flex-shrink:0}.co-option-list__desc{font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-muted, #888888);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-option-list__match{color:var(--co-color-primary-azul, #2563eb);font-weight:700}.co-option-list__check{flex-shrink:0;color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__row-action{flex-shrink:0;display:inline-flex;align-items:center;border:0;background:transparent;padding:0;cursor:pointer;color:var(--co-semantic-text-muted, #888888);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-option-list__row-action:hover{color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__pin{flex-shrink:0;display:flex;align-items:center;justify-content:center;border:0;padding:var(--co-spacing-xxs, 2px);background:transparent;cursor:pointer;border-radius:var(--co-border-radius-xxs, 4px);color:var(--co-semantic-text-muted, #888888)}.co-option-list__pin:hover{color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__pin--active{color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__drag-handle{display:inline-flex;align-items:center;cursor:grab;color:var(--co-semantic-text-muted);margin-right:var(--co-spacing-xs);flex:0 0 auto}.co-option-list__drag-handle:active{cursor:grabbing}.co-option-list__drag-handle{touch-action:none}.co-option-list__option--dragging{opacity:0.5}.co-option-list__option--lifted{position:relative;z-index:2;background:var(--co-semantic-surface-page, #fff);box-shadow:var(--co-shadow-lg);cursor:grabbing}.co-option-list__option--drop-before{box-shadow:inset 0 2px 0 0 var(--co-semantic-border-focus)}.co-option-list__option--drop-after{box-shadow:inset 0 -2px 0 0 var(--co-semantic-border-focus)}.co-option-list__group{padding:var(--co-spacing-sm2, 8px) var(--co-spacing-xs, 4px) var(--co-spacing-xs, 4px);font-family:var(--co-font-family-mono, 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace);font-size:var(--co-font-size-10, 10px);font-weight:400;text-transform:uppercase;letter-spacing:var(--co-font-letter-spacing-overline, 0.08em);line-height:1.1;color:var(--co-semantic-text-default, #1f1c1b)}.co-option-list__clear-row{display:flex;align-items:center;gap:var(--co-spacing-sm2, 8px);width:100%;min-height:32px;box-sizing:border-box;border:0;background:transparent;padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm2, 8px);border-radius:var(--co-border-radius-xs, 8px);cursor:pointer;text-align:left;font-family:var(--co-font-family-primary, 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);font-size:var(--co-font-size-14, 14px);letter-spacing:var(--co-font-letter-spacing-body, -0.03em);color:var(--co-semantic-text-secondary, #585858)}.co-option-list__clear-row:hover{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-option-list__loading,.co-option-list__loading-more{display:flex;justify-content:center;padding:var(--co-spacing-sm, 6px)}.co-option-list__empty{display:flex;align-items:center;gap:var(--co-spacing-sm2, 8px);padding:var(--co-spacing-md, 12px) var(--co-spacing-xs, 4px);font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-muted, #888888)}.co-option-list__more{padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm, 6px);font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-muted, #888888);text-align:center}.co-option-list__option:focus-visible,.co-option-list__clear-row:focus-visible{outline:2px solid var(--co-semantic-border-focus, rgba(31, 28, 27, 0.25));outline-offset:-2px}`;
 
 const CoOptionList = class {
     constructor(hostRef) {
@@ -214,6 +239,8 @@ const CoOptionList = class {
         this.coClearSelection = createEvent(this, "coClearSelection", 1);
         this.coRemoveItem = createEvent(this, "coRemoveItem", 1);
         this.coReorder = createEvent(this, "coReorder", 1);
+        this.coPinToggle = createEvent(this, "coPinToggle", 1);
+        this.coListReorder = createEvent(this, "coListReorder", 1);
         // ── Data (controlada) ──────────────────────────────────────
         /** JSON string o array de OptionListItem. */
         this.items = '[]';
@@ -230,6 +257,13 @@ const CoOptionList = class {
         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…';
@@ -269,9 +303,13 @@ const CoOptionList = class {
         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).
@@ -294,15 +332,95 @@ const CoOptionList = class {
             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 = '';
             }
@@ -348,6 +466,11 @@ const CoOptionList = class {
                 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);
@@ -359,6 +482,7 @@ const CoOptionList = class {
         (_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
@@ -399,6 +523,45 @@ const CoOptionList = class {
             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);
@@ -469,6 +632,16 @@ const CoOptionList = class {
         }
     }
     // ── 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();
@@ -489,22 +662,179 @@ const CoOptionList = class {
         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;
+        }
+        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)`;
+        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 = '';
@@ -519,6 +849,30 @@ const CoOptionList = class {
         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;
@@ -543,18 +897,34 @@ const CoOptionList = class {
             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);
@@ -565,11 +935,11 @@ const CoOptionList = class {
         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" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {