@prolibu-suite/cobalt-core 0.11.6 → 0.11.8

package/dist/collection/components/co-document-editor/co-document-editor.css

@@ -120,9 +120,22 @@ co-document-editor {
   outline: 1px dashed var(--co-color-primary-azul);
   outline-offset: -1px;
   background: color-mix(in srgb, var(--co-color-primary-azul) 6%, transparent);
-  color: var(--co-color-primary-azul);
+  /* Tinta por text-link (la hoja la re-ancla a la primitiva: el papel es isla clara). */
+  color: var(--co-semantic-text-link, var(--co-color-primary-azul));
   font-size: var(--co-font-size-12);
   user-select: none;
+  /* draggable (signature-slot.ts): se mueve de un gesto; ⌥/Ctrl + arrastrar copia. */
+  cursor: grab;
+}
+
+.co-doc-signature:active {
+  cursor: grabbing;
+}
+
+/* Seleccionada (clic): la barra de firma actúa sobre ESTA — tras «Duplicar» es la copia. */
+.co-doc-signature.ProseMirror-selectednode {
+  outline-style: solid;
+  background: color-mix(in srgb, var(--co-color-primary-azul) 14%, transparent);
 }
 
 .co-doc-hb {
@@ -204,6 +217,8 @@ co-document-editor {
   --co-semantic-border-field: var(--co-color-opacity-negro-25);
   --co-semantic-border-focus: var(--co-color-opacity-negro-50);
   --co-semantic-border-focus-ring: var(--co-color-opacity-negro-8);
+  /* La firma (tinta text-link) vive en el papel: en oscuro text-link sería azul-500 sobre blanco (2,9:1). */
+  --co-semantic-text-link: var(--co-color-primary-azul);
   position: relative;
   width: var(--co-doc-page-w);
   min-height: calc(var(--co-doc-pages, 1) * var(--co-doc-page-h) + (var(--co-doc-pages, 1) - 1) * var(--co-doc-gap));
@@ -436,3 +451,99 @@ co-document-editor {
 .co-doc-editor__image-mode--active:focus-visible {
   box-shadow: inset 0 0 0 1px var(--co-semantic-border-focus), 0 0 0 2px var(--co-semantic-border-focus-ring);
 }
+
+/*
+ * Barra de la firma seleccionada (2026-10-01): «Duplicar» + ‹ Firma N ›, mismo marco que la
+ * barra de imagen. Medidas fijas en SIGNATURE_BAR_SIZE (prueba en signature-bar.test.ts):
+ * se posiciona con imageBarPosition antes de existir. Sin transición (Motion regla 2, H15).
+ */
+.co-doc-editor__sig-bar {
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xxs);
+  padding: var(--co-spacing-xxs);
+  box-sizing: border-box;
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-semantic-border-default);
+  border-radius: var(--co-border-radius-xs);
+  color: var(--co-semantic-text-default);
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-12);
+  user-select: none;
+}
+
+.co-doc-editor__sig-bar co-tooltip {
+  display: inline-flex;
+}
+
+/* Base común en UNA línea: la prueba de medidas toma la primera regla que EMPIEZA con el selector. */
+.co-doc-editor__sig-duplicate, .co-doc-editor__sig-step {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--co-border-radius-xxs);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.co-doc-editor__sig-duplicate {
+  width: 96px;
+  height: 28px;
+  gap: var(--co-spacing-xs);
+  padding: 0 var(--co-spacing-sm);
+}
+
+.co-doc-editor__sig-duplicate co-icon {
+  flex-shrink: 0;
+}
+
+.co-doc-editor__sig-duplicate-text {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.co-doc-editor__sig-step {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+}
+
+.co-doc-editor__sig-duplicate:hover,
+.co-doc-editor__sig-step:hover:not(:disabled) {
+  background: var(--co-semantic-surface-hover);
+}
+
+.co-doc-editor__sig-step:disabled {
+  color: var(--co-semantic-text-muted);
+  cursor: default;
+}
+
+.co-doc-editor__sig-duplicate:focus-visible,
+.co-doc-editor__sig-step:focus-visible {
+  outline: 1px solid var(--co-semantic-border-focus);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
+.co-doc-editor__sig-sep {
+  width: 1px;
+  align-self: stretch;
+  background: var(--co-semantic-border-default);
+}
+
+.co-doc-editor__sig-label {
+  width: 88px;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-variant-numeric: tabular-nums;
+}

package/dist/collection/components/co-document-editor/co-document-editor.js

@@ -8,6 +8,7 @@ import { scopePageStyles } from "./page-styles";
 import { anchorCorrection, clampScale, fitScale, paperPoint, pinchScale, ZOOM_GUTTER_PX } from "./zoom";
 import { HEADER_TOOL_BOX_PX, HEADER_TOOL_ICON_PX } from "./header-tools";
 import { defaultImageWidth, IMAGE_MODE_ICON_PX, IMAGE_MODE_ICONS, imageBarPosition, layoutLeft } from "./image-bar";
+import { SIGNATURE_BAR_SIZE, signerStepRange } from "./signature-bar";
 let instanceSeq = 0;
 /**
  * Editor de documentos paginado: hoja fija, encabezado en banda, campos y
@@ -58,6 +59,8 @@ export class CoDocumentEditor {
         this.draftShowPageNumber = false;
         /** Barra de diseño de la imagen seleccionada en el cuerpo (null = no hay). Posición en px del papel. */
         this.imageBar = null;
+        /** Barra de la firma seleccionada: su firmante N, el rango del ‹ › y la posición en px del papel. */
+        this.signatureBar = null;
         /** Encabezado vigente (confirmado). La Task 16 lo cambia al confirmar la banda. */
         this.currentHeaderHtml = '';
         this.currentShowPageNumber = false;
@@ -99,6 +102,42 @@ export class CoDocumentEditor {
             if (!cur || cur.mode !== mode || cur.top !== pos.top || cur.left !== pos.left)
                 this.imageBar = { mode, top: pos.top, left: pos.left };
         };
+        /**
+         * Barra bajo la firma seleccionada (corre en cada transacción del cuerpo, como la de
+         * imagen). El recorrido del documento para el rango del ‹ › solo ocurre con una firma
+         * seleccionada como nodo: al tipear la selección es de texto y sale en el primer `if`.
+         */
+        this.updateSignatureBar = () => {
+            const ed = this.editor;
+            const sel = ed === null || ed === void 0 ? void 0 : ed.state.selection;
+            const node = sel === null || sel === void 0 ? void 0 : sel.node;
+            if (!ed || this.readonly || !node || node.type.name !== 'signatureSlot') {
+                if (this.signatureBar)
+                    this.signatureBar = null;
+                return;
+            }
+            const dom = ed.view.nodeDOM(sel.from);
+            const sheet = this.el.querySelector('.co-doc-editor__sheet');
+            if (!dom || !sheet) {
+                if (this.signatureBar)
+                    this.signatureBar = null;
+                return;
+            }
+            const others = [];
+            ed.state.doc.descendants((n, pos) => {
+                if (n.type.name === 'signatureSlot' && pos !== sel.from)
+                    others.push(n.attrs.slot);
+            });
+            const { min, max } = signerStepRange(others);
+            // px de layout (no los altera el zoom: la barra vive dentro del escenario escalado).
+            const box = RichText.layoutBox(dom, sheet);
+            const pos = imageBarPosition({ top: box.top, height: box.height, left: layoutLeft(dom, sheet), width: dom.offsetWidth }, { width: sheet.offsetWidth, height: sheet.offsetHeight }, SIGNATURE_BAR_SIZE);
+            const slot = node.attrs.slot;
+            const cur = this.signatureBar;
+            if (!cur || cur.slot !== slot || cur.min !== min || cur.max !== max || cur.top !== pos.top || cur.left !== pos.left) {
+                this.signatureBar = { slot, min, max, top: pos.top, left: pos.left };
+            }
+        };
         /** Una imagen insertada sin ancho nace acotada a la columna (V1 la abriría a 800 px). */
         this.onBodyImageLoad = (e) => {
             const img = e.target;
@@ -378,6 +417,7 @@ export class CoDocumentEditor {
         this.headerEditing = false;
         this.draftShowPageNumber = false;
         this.imageBar = null;
+        this.signatureBar = null;
     }
     componentDidLoad() {
         var _a, _b, _c;
@@ -439,12 +479,14 @@ export class CoDocumentEditor {
             this.editor.off('transaction', this.onTransaction);
             this.editor.off('blur', this.onEditorBlur);
             this.editor.off('transaction', this.updateImageBar);
+            this.editor.off('transaction', this.updateSignatureBar);
             this.editor.view.dom.removeEventListener('load', this.onBodyImageLoad, true);
             this.editor.destroy();
         }
         this.editor = undefined;
         this.pendingImageSrcs.clear();
         this.imageBar = null;
+        this.signatureBar = null;
     }
     onValueChange(next) {
         if (next === this.lastAppliedValue)
@@ -463,6 +505,7 @@ export class CoDocumentEditor {
         if (this.readonly && this.headerEditing)
             this.cancelHeader();
         this.updateImageBar();
+        this.updateSignatureBar();
     }
     onPageGeometryChange() {
         this.refreshPagination();
@@ -576,6 +619,7 @@ export class CoDocumentEditor {
         dom.setAttribute('aria-multiline', 'true');
         editor.on('transaction', this.onTransaction);
         editor.on('transaction', this.updateImageBar);
+        editor.on('transaction', this.updateSignatureBar);
         editor.on('blur', this.onEditorBlur);
         // `load` no burbujea: se escucha en captura.
         dom.addEventListener('load', this.onBodyImageLoad, true);
@@ -594,6 +638,27 @@ export class CoDocumentEditor {
         (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.setImageLayoutMode(mode);
         this.updateImageBar();
     }
+    /**
+     * Sin `.focus()`, como `setImageMode`: con el mouse la barra no le quita el foco al editor y
+     * con el teclado el foco se queda en el botón. Los comandos dejan la firma seleccionada
+     * (la copia, al duplicar), así la barra sigue.
+     */
+    duplicateSignature() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.duplicateSignatureSlot();
+        this.updateSignatureBar();
+    }
+    stepSigner(delta) {
+        var _a;
+        const bar = this.signatureBar;
+        if (!bar)
+            return;
+        const next = bar.slot + delta;
+        if (next < bar.min || next > bar.max)
+            return;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.setSignatureSlot(next);
+        this.updateSignatureBar();
+    }
     /** Imágenes que entran por una transacción del usuario sin `width` (barra, pegar, soltar, subida). */
     trackInsertedImages(transaction) {
         var _a, _b, _c;
@@ -819,10 +884,25 @@ export class CoDocumentEditor {
                 this.draftShowPageNumber = !!e.detail;
             } }), h("co-tooltip", { content: s.confirmHeader }, h("co-icon-button", { icon: "check", variant: "ghost", size: "xs", boxSize: HEADER_TOOL_BOX_PX, iconSize: HEADER_TOOL_ICON_PX, label: s.confirmHeader, onClick: () => this.commitHeader(true) }))))) : (h("div", { key: "header-static", class: "co-doc-editor__header-static" }, h("div", { class: "co-doc-editor__header-html", innerHTML: this.sanitizedHeaderHtml }), this.currentShowPageNumber && h("span", { class: "co-doc-editor__page-number" }, `${s.page} 1 / ${this.pageCount}`)))));
     }
-    /** Controles flotantes sobre la hoja: la barra de diseño de la imagen seleccionada. */
+    /** Controles flotantes sobre la hoja: la barra de la imagen o de la firma seleccionada. */
     renderOverlays() {
+        if (this.readonly || this.headerEditing)
+            return null;
+        return [this.renderImageBar(), this.renderSignatureBar()];
+    }
+    renderSignatureBar() {
+        const bar = this.signatureBar;
+        if (!bar)
+            return null;
+        const s = this.s;
+        // <button> nativos (no co-icon-button): mismo marco que la barra de imagen, y el
+        // aria-label tiene que llegar al botón real (ningún co-* reenvía los aria-* del host).
+        const step = (dir, label, icon, delta, disabled) => (h("co-tooltip", { key: dir, content: label }, h("button", { type: "button", class: "co-doc-editor__sig-step", "data-dir": dir, "aria-label": label, disabled: disabled, onClick: () => this.stepSigner(delta) }, h("co-icon", { name: icon, size: IMAGE_MODE_ICON_PX, "aria-hidden": "true" }))));
+        return (h("div", { key: "signature-bar", class: "co-doc-editor__sig-bar", role: "toolbar", "aria-label": s.signatureToolsLabel, style: { top: `${bar.top}px`, left: `${bar.left}px` }, onMouseDown: (e) => e.preventDefault() }, h("button", { key: "duplicate", type: "button", class: "co-doc-editor__sig-duplicate", onClick: () => this.duplicateSignature() }, h("co-icon", { name: "copy", size: IMAGE_MODE_ICON_PX, "aria-hidden": "true" }), h("span", { class: "co-doc-editor__sig-duplicate-text" }, s.signatureDuplicate)), h("span", { key: "sep", class: "co-doc-editor__sig-sep", "aria-hidden": "true" }), step('prev', s.signaturePrevSigner, 'caret-left', -1, bar.slot <= bar.min), h("span", { key: "label", class: "co-doc-editor__sig-label", "aria-live": "polite" }, `${s.signature} ${bar.slot}`), step('next', s.signatureNextSigner, 'caret-right', 1, bar.slot >= bar.max)));
+    }
+    renderImageBar() {
         const bar = this.imageBar;
-        if (!bar || this.readonly || this.headerEditing)
+        if (!bar)
             return null;
         return (h("div", { key: "image-bar", class: "co-doc-editor__image-bar", role: "toolbar", "aria-label": this.s.imageLayoutLabel, style: { top: `${bar.top}px`, left: `${bar.left}px` }, onMouseDown: (e) => e.preventDefault() }, RichText.IMAGE_LAYOUT_MODES.map((mode) => {
             const label = this.imageModeLabel(mode);
@@ -851,8 +931,8 @@ export class CoDocumentEditor {
             width: `${page.width * this.scale}px`,
             height: this.stageHeight ? `${this.stageHeight * this.scale}px` : 'auto',
         };
-        const zoomButton = (mode, label) => (h("button", { key: 'da1c68e89c973899e18720d3cf25b861d158f7c1', type: "button", class: { 'co-doc-editor__zoom-btn': true, 'co-doc-editor__zoom-btn--active': this.zoomMode === mode }, "aria-pressed": String(this.zoomMode === mode), onClick: () => this.setZoom(mode) }, label));
-        return (h(Host, { key: '254d9df102441f867dc46eb71039df92d99ad102' }, h("div", { key: '29723bbee5dd3eae004c6df4c330e8589388636d', class: { 'co-doc-editor': true, 'co-doc-editor--readonly': this.readonly, 'co-doc-editor--loading': !this.ready }, part: "wrapper" }, h("div", { key: '9257d370d8547f08402fbaaed2d4a6aa30d94e70', class: "co-doc-editor__bar", part: "bar" }, !this.readonly && (h("co-rich-text-toolbar", { key: '8fff97e80464889cb0e6e60d8d9f69308f987e9f', class: "co-doc-editor__toolbar", part: "toolbar", variant: "document", position: "top", disabled: false, locale: this.locale, attachmentsEnabled: false, documentHeaderEnabled: this.documentHeaderEnabled, extraItems: this.parsedExtraItems, onCoAction: this.handleToolbarAction, ref: (el) => (this.toolbarEl = el) })), h("div", { key: '00ff09c93887815f84bbb9c68e9485fd64c3c0b6', class: "co-doc-editor__zoom", role: "group", "aria-label": s.zoom }, this.zoomMode === 'custom' && h("span", { key: '956f0fa4e803a0e27fa32a28116d1e397a2dc402', class: "co-doc-editor__zoom-level" }, `${Math.round(this.scale * 100)} %`), zoomButton('fit', s.zoomFit), zoomButton('actual', s.zoomActual))), h("div", { key: '4a44bc41d6a641a5f4543422bd7263f2bd962f99', class: "co-doc-editor__body" }, h("div", { key: '467491e684b9487d507861d54c37b06b752216f4', class: "co-doc-editor__canvas", part: "canvas", ref: (el) => (this.canvasEl = el) }, h("div", { key: '66653efbda8e0dffb7bc1fdb07d0be31b4f5c8a9', class: "co-doc-editor__zoom-frame", style: frameStyle }, h("div", { key: '06407fc5177c21f4edc60b900a17a8c44ef193ab', class: "co-doc-editor__stage", style: { transform: `scale(${this.scale})` }, ref: (el) => (this.stageEl = el) }, h("div", { key: '440f1ced158d76650618bc0f153c3201503550a1', class: "co-doc-editor__sheet", part: "sheet", "data-co-doc": this.instanceId, style: sheetVars }, h("style", { key: "page-styles", "data-co-doc-page-styles": "", ref: (el) => (this.styleEl = el) }), h("div", { key: "paper", class: "co-doc-editor__paper", "data-theme": "light" }, this.renderHeaderBand(), h("div", { key: "content", class: "co-doc-editor__content", ref: (el) => (this.contentEl = el) }), this.renderOverlays()))))), h("slot", { key: '1478889436471ed2707db4e361d878faf7c56f2e', name: "aside" })))));
+        const zoomButton = (mode, label) => (h("button", { key: '3364440e585cbfdfdc33580aa28001f7563f6fa6', type: "button", class: { 'co-doc-editor__zoom-btn': true, 'co-doc-editor__zoom-btn--active': this.zoomMode === mode }, "aria-pressed": String(this.zoomMode === mode), onClick: () => this.setZoom(mode) }, label));
+        return (h(Host, { key: '2cc578822013cc07eeeebd0949cbbd2bb09acbc1' }, h("div", { key: '5aebe4e657d01b03c5fdf719b87c1c4a08f121a6', class: { 'co-doc-editor': true, 'co-doc-editor--readonly': this.readonly, 'co-doc-editor--loading': !this.ready }, part: "wrapper" }, h("div", { key: '93f7d60fffd9e9e902ac25d9fa8a971e96b39ec5', class: "co-doc-editor__bar", part: "bar" }, !this.readonly && (h("co-rich-text-toolbar", { key: 'df82ee73a50e8283244afb38532803a13b4d6db9', class: "co-doc-editor__toolbar", part: "toolbar", variant: "document", position: "top", disabled: false, locale: this.locale, attachmentsEnabled: false, documentHeaderEnabled: this.documentHeaderEnabled, extraItems: this.parsedExtraItems, onCoAction: this.handleToolbarAction, ref: (el) => (this.toolbarEl = el) })), h("div", { key: 'a49cc3a01fc203b3bcf3e158ce186fefd607577e', class: "co-doc-editor__zoom", role: "group", "aria-label": s.zoom }, this.zoomMode === 'custom' && h("span", { key: '47f0c8d5c6bd3c0e51d75ad70103644def66b333', class: "co-doc-editor__zoom-level" }, `${Math.round(this.scale * 100)} %`), zoomButton('fit', s.zoomFit), zoomButton('actual', s.zoomActual))), h("div", { key: 'd28e02e78c8171b0366f7b3ec74e60cfd9f3d21b', class: "co-doc-editor__body" }, h("div", { key: '450bbf0712838a9213a08288148f5365a1d6766b', class: "co-doc-editor__canvas", part: "canvas", ref: (el) => (this.canvasEl = el) }, h("div", { key: '3585da3d1f7b0311cb036246f20340b2eb34e45d', class: "co-doc-editor__zoom-frame", style: frameStyle }, h("div", { key: 'ce70286c7205f29115d4e9049c3d43775657abfb', class: "co-doc-editor__stage", style: { transform: `scale(${this.scale})` }, ref: (el) => (this.stageEl = el) }, h("div", { key: '81c7e68d4d8593b21be0f14045965b1e7230657e', class: "co-doc-editor__sheet", part: "sheet", "data-co-doc": this.instanceId, style: sheetVars }, h("style", { key: "page-styles", "data-co-doc-page-styles": "", ref: (el) => (this.styleEl = el) }), h("div", { key: "paper", class: "co-doc-editor__paper", "data-theme": "light" }, this.renderHeaderBand(), h("div", { key: "content", class: "co-doc-editor__content", ref: (el) => (this.contentEl = el) }), this.renderOverlays()))))), h("slot", { key: '3808aa0d8bae35da687e9757ca39ffced996a795', name: "aside" })))));
     }
     static get is() { return "co-document-editor"; }
     static get originalStyleUrls() {
@@ -936,7 +1016,7 @@ export class CoDocumentEditor {
                     "references": {
                         "DocumentPageSize": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-document-editor/co-document-editor.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-document-editor/co-document-editor.tsx",
                             "id": "src/components/co-document-editor/co-document-editor.tsx::DocumentPageSize"
                         }
                     }
@@ -962,7 +1042,7 @@ export class CoDocumentEditor {
                     "references": {
                         "DocumentMargins": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-document-editor/co-document-editor.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-document-editor/co-document-editor.tsx",
                             "id": "src/components/co-document-editor/co-document-editor.tsx::DocumentMargins"
                         }
                     }
@@ -1027,7 +1107,7 @@ export class CoDocumentEditor {
                     "references": {
                         "DocumentFeatures": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-document-editor/co-document-editor.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-document-editor/co-document-editor.tsx",
                             "id": "src/components/co-document-editor/co-document-editor.tsx::DocumentFeatures"
                         }
                     }
@@ -1163,7 +1243,8 @@ export class CoDocumentEditor {
             "stageHeight": {},
             "headerEditing": {},
             "draftShowPageNumber": {},
-            "imageBar": {}
+            "imageBar": {},
+            "signatureBar": {}
         };
     }
     static get events() {
@@ -1220,7 +1301,7 @@ export class CoDocumentEditor {
                     "references": {
                         "DocumentHeaderDetail": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-document-editor/co-document-editor.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-document-editor/co-document-editor.tsx",
                             "id": "src/components/co-document-editor/co-document-editor.tsx::DocumentHeaderDetail"
                         }
                     }
@@ -1256,7 +1337,7 @@ export class CoDocumentEditor {
                     "references": {
                         "DocumentActionDetail": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-document-editor/co-document-editor.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-document-editor/co-document-editor.tsx",
                             "id": "src/components/co-document-editor/co-document-editor.tsx::DocumentActionDetail"
                         }
                     }

package/dist/collection/components/co-document-editor/signature-bar.js

@@ -0,0 +1,26 @@
+/**
+ * Barra de la firma seleccionada (2026-10-01): «Duplicar» (otra posición del MISMO
+ * firmante) y ‹ Firma N › (a qué firmante va). Como la barra de imagen, se posiciona
+ * ANTES de existir con `imageBarPosition`: sus medidas son fijas en el CSS
+ * (`.co-doc-editor__sig-*`) y la prueba las ata a estas constantes.
+ */
+/** «Duplicar» con icono y texto (cabe «Duplicate», el más largo de es/en/pt). */
+export const SIGNATURE_DUPLICATE_PX = 96;
+/** Botón ‹ / › (ancho = alto). */
+export const SIGNATURE_STEP_PX = 28;
+/** Etiqueta «Firma N» (cabe «Assinatura 12»; más largo recorta con elipsis). */
+export const SIGNATURE_LABEL_PX = 88;
+/** duplicar 96 + separador 1 + ‹ 28 + etiqueta 88 + › 28 + 4 separaciones de 2 + relleno 2 × 2 + borde 1 × 2. */
+export const SIGNATURE_BAR_SIZE = { width: 255, height: 34 };
+/**
+ * Rango del ‹ ›: de 1 a una más que la mayor de las OTRAS firmas del documento. El N de
+ * un marcador es el N-ésimo firmante, así que saltar a «Firma 7» sin 2..6 pediría firmantes
+ * que no tienen posición; un hueco que igual quede lo avisa el envío (posiciones faltantes).
+ */
+export function signerStepRange(otherSlots) {
+    let top = 0;
+    for (const n of otherSlots)
+        if (n > top)
+            top = n;
+    return { min: 1, max: top + 1 };
+}

package/dist/collection/components/co-drawer/co-drawer.css

@@ -97,6 +97,9 @@
   display: flex;
   flex-direction: column;
   font-family: var(--co-font-family-primary);
+  /* El aside modeless es [popover]: la UA le pone `color: CanvasText` (#000
+     también en oscuro). Contenedor de paso — la card fija su propia tinta. */
+  color: inherit;
   transition: transform var(--co-motion-duration-slow) var(--co-motion-ease-in-out);
   will-change: transform; /* se conserva (E2): capa compuesta propia para el slide */
   z-index: 1;
@@ -179,6 +182,9 @@
   display: flex;
   flex-direction: column;
   background: var(--co-semantic-surface-page);
+  /* Tinta pareja con el fondo: lo que no declara color propio no hereda el
+     del contexto (ni el CanvasText del top layer). */
+  color: var(--co-semantic-text-default);
 }
 
 /* ─── Header ──────────────────────────────────────────────── */
@@ -278,8 +284,10 @@
   scrollbar-color: transparent transparent;
 }
 
+/* Pulgar por semánticos de borde (mismo valor en claro): opacity-negro fijo
+   era un pulgar invisible sobre la card oscura. */
 .co-drawer__body:hover {
-  scrollbar-color: var(--co-color-opacity-negro-16) transparent;
+  scrollbar-color: var(--co-semantic-border-default) transparent;
 }
 
 .co-drawer__body::-webkit-scrollbar {
@@ -296,15 +304,15 @@
 }
 
 .co-drawer__body:hover::-webkit-scrollbar-thumb {
-  background: var(--co-color-opacity-negro-16);
+  background: var(--co-semantic-border-default);
 }
 
 .co-drawer__body:hover::-webkit-scrollbar-thumb:hover {
-  background: var(--co-color-opacity-negro-25);
+  background: var(--co-semantic-border-field);
 }
 
 .co-drawer__body:hover::-webkit-scrollbar-thumb:active {
-  background: var(--co-color-opacity-negro-50);
+  background: var(--co-semantic-border-strong);
 }
 
 /* ─── Footer ──────────────────────────────────────────────── */

package/dist/collection/components/co-drawer/co-drawer.js

@@ -1,6 +1,8 @@
 import { h } from "@stencil/core";
 import { afterEventFor } from "../co-overlay/overlayAfterClose";
+import { isTopEscapeLayer, pushEscapeLayer, removeEscapeLayer } from "../co-overlay/escapeLayers";
 import { slotHasContent } from "../../utils/slotContent";
+import { isPopoverOpen } from "../../utils/popoverApi";
 /**
  * Panel lateral (derecha, izquierda o abajo) sobre un scrim, con header, pestañas,
  * cuerpo scrolleable y footer. Es controlado: la ✕, el scrim y Escape emiten
@@ -98,7 +100,7 @@ export class CoDrawer {
             if (!this.modeless || !aside || typeof aside.showPopover !== 'function')
                 return;
             try {
-                if (!aside.matches(':popover-open'))
+                if (!isPopoverOpen(aside))
                     aside.showPopover();
             }
             catch (_a) {
@@ -128,9 +130,20 @@ export class CoDrawer {
         return this.heading ? 'co-drawer-heading' : undefined;
     }
     onOpenChange(next, prev) {
+        if (next)
+            pushEscapeLayer(this);
+        else
+            removeEscapeLayer(this);
         if (next && !prev)
             this.coOpen.emit();
     }
+    connectedCallback() {
+        if (this.open)
+            pushEscapeLayer(this);
+    }
+    disconnectedCallback() {
+        removeEscapeLayer(this);
+    }
     handleKey(e) {
         if (!this.open || !this.closeOnEscape || e.key !== 'Escape')
             return;
@@ -139,6 +152,10 @@ export class CoDrawer {
         // Hosts are light-DOM with reflected props, so a document query works.
         if (this.modeless && document.querySelector('co-drawer[open]:not([modeless]), co-modal[open]'))
             return;
+        // Escape en cascada: solo la capa de ARRIBA (la última abierta: otro drawer, un co-modal)
+        // atiende la tecla — el drawer de abajo no se cierra llevándose el modal con él.
+        if (!isTopEscapeLayer(this))
+            return;
         this.coClose.emit();
     }
     componentDidLoad() {

package/dist/collection/components/co-drive-card/co-drive-card.css

@@ -3,6 +3,11 @@
 }
 
 /* ─── Shared surface ─────────────────────────────────────────── */
+/* Superficie, tinta y anillos por semánticos de MISMO valor en claro (base-blanco→surface-page,
+   negro-8/25→border-subtle/field, base-negro→text-default, gray-100→surface-control,
+   gray-400→text-disabled): la tarjeta era solo clara y cambiar únicamente los anillos a border-*
+   (blancos en oscuro) los borraba sobre el blanco. Quedan fijos el chip de selección y la estrella
+   superpuesta: flotan sobre la miniatura (imagen), no sobre la superficie. */
 .co-drive-card {
   --dc-accent: var(--co-color-primary-azul, #2563eb);
   position: relative;
@@ -12,8 +17,8 @@
   cursor: pointer;
   outline: none;
   font-family: var(--co-font-family-primary);
-  background: var(--co-color-base-blanco, #fff);
-  box-shadow: inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+  background: var(--co-semantic-surface-page, #fff);
+  box-shadow: inset 0 0 0 1px var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));
 }
 
 .co-drive-card:focus-visible {
@@ -38,11 +43,12 @@
 
 .co-drive-card--folder:hover:not(.co-drive-card--selected) {
   box-shadow: var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),
-    inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+    inset 0 0 0 1px var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));
 }
 
 .co-drive-card--folder.co-drive-card--selected {
-  background: color-mix(in srgb, var(--dc-accent) 7%, white);
+  /* El tinte se mezcla con la superficie (blanco en claro), no con blanco fijo. */
+  background: color-mix(in srgb, var(--dc-accent) 7%, var(--co-semantic-surface-page, white));
   box-shadow: inset 0 0 0 1.5px var(--dc-accent);
 }
 
@@ -53,7 +59,7 @@
   align-items: center;
   justify-content: center;
   border-radius: 11px;
-  background: color-mix(in srgb, var(--dc-accent) 12%, white);
+  background: color-mix(in srgb, var(--dc-accent) 12%, var(--co-semantic-surface-page, white));
   color: var(--dc-accent);
 }
 
@@ -80,7 +86,7 @@
   font-size: 14px;
   font-weight: 500;
   line-height: 1.3;
-  color: var(--co-color-base-negro, #1f1c1b);
+  color: var(--co-semantic-text-default, #1f1c1b);
   letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
   white-space: nowrap;
   overflow: hidden;
@@ -90,7 +96,7 @@
 .co-drive-card__meta {
   font-family: var(--co-font-family-primary);
   font-size: 12px;
-  color: var(--co-color-gray-500, #888888);
+  color: var(--co-semantic-text-muted, #888888);
   margin-top: 2px;
   letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
   white-space: nowrap;
@@ -129,11 +135,11 @@
 
 .co-drive-card--file:hover:not(.co-drive-card--selected):not(.co-drive-card--active) {
   box-shadow: var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),
-    inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+    inset 0 0 0 1px var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));
 }
 
 .co-drive-card--file.co-drive-card--active:not(.co-drive-card--selected) {
-  box-shadow: inset 0 0 0 1.5px var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));
+  box-shadow: inset 0 0 0 1.5px var(--co-semantic-border-field, rgba(31, 28, 27, 0.25));
 }
 
 .co-drive-card--file.co-drive-card--selected {
@@ -145,7 +151,7 @@
   display: block;
   border-radius: 10px;
   overflow: hidden;
-  background: var(--co-color-gray-100, #f6f6f6);
+  background: var(--co-semantic-surface-control, #f6f6f6);
 }
 
 .co-drive-card--comfy .co-drive-card__thumb {
@@ -174,7 +180,7 @@
 .co-drive-card__sub {
   font-family: var(--co-font-family-primary);
   font-size: 11.5px;
-  color: var(--co-color-gray-500, #888888);
+  color: var(--co-semantic-text-muted, #888888);
   margin-top: 1px;
   letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
   white-space: nowrap;
@@ -207,7 +213,7 @@
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
-  color: var(--co-color-gray-400, #a0a0a0);
+  color: var(--co-semantic-text-disabled, #a0a0a0);
   opacity: 0;
   transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }

package/dist/collection/components/co-drive-card/co-drive-card.js

@@ -87,7 +87,7 @@ export class CoDriveCard {
     }
     render() {
         const isFile = this.variant === 'file';
-        return (h("div", { key: '35d58b53bd6f000c2c0e6fb4f16cc4914bd8ece9', class: {
+        return (h("div", { key: '18b61cf2abfaa8772eccfdd6eef97b02031ecf03', class: {
                 'co-drive-card': true,
                 [`co-drive-card--${this.variant}`]: true,
                 [`co-drive-card--${this.density}`]: true,

package/dist/collection/components/co-drop-zone/co-drop-zone.js

@@ -63,7 +63,7 @@ export class CoDropZone {
         this.coDragStateChange.emit(next);
     }
     render() {
-        return (h(Host, { key: '5c7232e2bc5fe0f1cc24181d1758fcd0369c47cb', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("slot", { key: 'efdf82946b7396ddf88e7f440aa6c460cb15821b' }), this.active && (h("div", { key: '3b9a9f2e78275fbf4a4fb240beafd6725b06f36f', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: '3a540d077413199f63904a3b8f2a82d01306927a', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: '224941558e33dddb16ae7d98b63f63a0f4d41c5e', name: this.icon, size: 34 })), h("span", { key: '256aa058549937ab0cf0bdc31337d22fa860da75', class: "co-drop-zone__label", part: "label" }, this.label)))));
+        return (h(Host, { key: '67d960d753b29ed1c365312dc7295df325a8a722', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("slot", { key: 'da400ae3fd805ab0e12e832445f7921a2cf9a378' }), this.active && (h("div", { key: 'a10b22b0b965668b62100f3736bd0b1f373536bf', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: 'ea8e3f27d9c8b9717d8bd7867e756782e863eeff', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: '9fe0f6d884b9adab786cb641b799da67cc3551f7', name: this.icon, size: 34 })), h("span", { key: 'b413d86783086497f90afb0fbd24c10f1f7a9e7d', class: "co-drop-zone__label", part: "label" }, this.label)))));
     }
     static get is() { return "co-drop-zone"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-emoji-picker/co-emoji-picker.js

@@ -392,14 +392,14 @@ export class CoEmojiPicker {
         const stripCategories = hasRecent
             ? [RECENT_CATEGORY, ...EMOJI_CATEGORIES]
             : [...EMOJI_CATEGORIES];
-        return (h("div", { key: '3f45e20684cb31d39feabb1e9a431001153badc4', class: "co-emoji-picker", part: "panel", role: "group", "aria-label": this.label || s.pickerLabel, style: { '--co-emoji-picker-columns': String(Math.max(1, this.columns)) }, onKeyDown: this.handleKeyDown }, this.searchable && (h("div", { key: 'e7e0345d77fc03813f87c2cc119b205f2da67807', class: "co-emoji-picker__search", part: "search" }, h("co-icon", { key: '631f7a147601969961941f0f63a080e75a4ade41', name: "magnifying-glass", size: 16 }), h("input", { key: 'e216e1bf3898d4c747c247aa86df348eca1eb906', class: "co-emoji-picker__input", part: "input", type: "text", value: this.term, placeholder: this.searchPlaceholder || s.searchPlaceholder, onInput: this.handleInput, ref: (el) => (this.inputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list", "aria-controls": CoEmojiPicker.GRID_ID, "aria-activedescendant": activeCellId }), this.renderTones())), this.showCategories && (h("div", { key: '0d212f4c661651e51503e82ad2e4c81af9e89d55', class: "co-emoji-picker__categories", part: "categories", "aria-label": s.categoriesLabel }, !this.searchable && this.renderTones(), stripCategories.map((category) => {
+        return (h("div", { key: '002e48d3ddf42599235dcbb899db1402b082623b', class: "co-emoji-picker", part: "panel", role: "group", "aria-label": this.label || s.pickerLabel, style: { '--co-emoji-picker-columns': String(Math.max(1, this.columns)) }, onKeyDown: this.handleKeyDown }, this.searchable && (h("div", { key: '80b5ac6d85764a8634fad32f37b57a08c9b660ce', class: "co-emoji-picker__search", part: "search" }, h("co-icon", { key: '176b1fc29d0706ac53f0b3c6dc80baf83da8a5b3', name: "magnifying-glass", size: 16 }), h("input", { key: '80c64915e50e4f32a0fa696de34b02552a695e43', class: "co-emoji-picker__input", part: "input", type: "text", value: this.term, placeholder: this.searchPlaceholder || s.searchPlaceholder, onInput: this.handleInput, ref: (el) => (this.inputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list", "aria-controls": CoEmojiPicker.GRID_ID, "aria-activedescendant": activeCellId }), this.renderTones())), this.showCategories && (h("div", { key: '185790638cf64b8744b22dbacc290849841c14d7', class: "co-emoji-picker__categories", part: "categories", "aria-label": s.categoriesLabel }, !this.searchable && this.renderTones(), stripCategories.map((category) => {
             var _a, _b;
             const name = (_a = s.categories[category]) !== null && _a !== void 0 ? _a : category;
             return (h("button", { type: "button", key: category, class: {
                     'co-emoji-picker__category': true,
                     'co-emoji-picker__category--active': category === activeCategory,
                 }, "aria-label": name, "aria-current": category === activeCategory ? 'true' : undefined, title: name, onClick: () => this.jumpToCategory(category) }, h("co-icon", { name: (_b = EMOJI_CATEGORY_ICONS[category]) !== null && _b !== void 0 ? _b : 'circle', size: 16 })));
-        }))), h("div", { key: '9d75f1c71e8162708bff7ff3d3e8ac50d2ae8506', class: "co-emoji-picker__scroll", part: "grid", id: CoEmojiPicker.GRID_ID, role: "listbox", "aria-label": s.gridLabel, ref: (el) => (this.scrollEl = el), onScroll: this.handleScroll }, isEmpty ? (h("div", { class: "co-emoji-picker__empty" }, h("co-icon", { name: "magnifying-glass", size: 20 }), h("span", null, this.emptyMessage || s.emptyMessage))) : (this.renderRows(rows)))));
+        }))), h("div", { key: 'f630309a995d22234dc5f7acdc723586f6181499', class: "co-emoji-picker__scroll", part: "grid", id: CoEmojiPicker.GRID_ID, role: "listbox", "aria-label": s.gridLabel, ref: (el) => (this.scrollEl = el), onScroll: this.handleScroll }, isEmpty ? (h("div", { class: "co-emoji-picker__empty" }, h("co-icon", { name: "magnifying-glass", size: 20 }), h("span", null, this.emptyMessage || s.emptyMessage))) : (this.renderRows(rows)))));
     }
     static get is() { return "co-emoji-picker"; }
     static get encapsulation() { return "shadow"; }