@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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

@@ -0,0 +1,1549 @@
+import { forceUpdate, h, Host } from "@stencil/core";
+import * as RichText from "@prolibu-suite/cobalt-rich-text";
+import { getRichTextStrings } from "../../utils/richTextI18n";
+import { parseFeatures, syncToolbarEditor } from "../../utils/rich-text-host";
+import { createThrottle, DOC_CHANGE_THROTTLE_MS } from "./change-throttle";
+import { parseMargins, parsePageSize, toBoolIntent } from "./document-props";
+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";
+let instanceSeq = 0;
+/**
+ * Editor de documentos paginado: hoja fija, encabezado en banda, campos y
+ * firmas (spec contracts-v2-contract-editor §4.2). Recibe y devuelve SOLO el
+ * cuerpo (HTML de impresión) y el HTML del encabezado; no sabe de contratos.
+ * Nunca serializa por tecla: `coChange` solo avisa y el host pide
+ * `getPrintHtml()` cuando lo necesita.
+ *
+ * `shadow: false` (como co-rich-text-editor): ProseMirror arma su DOM de forma
+ * imperativa y el CSS de impresión del host tiene que alcanzarlo.
+ *
+ * @slot aside - Panel lateral del host (ancho fijo del componente: `--co-doc-aside-width`, 320px por defecto). Mantener el hijo siempre montado (v-show).
+ * @part wrapper - Contenedor externo
+ * @part bar - Fila de la barra
+ * @part toolbar - Barra de formato
+ * @part canvas - Superficie donde se centran las hojas
+ * @part sheet - El papel
+ * @part header-band - Banda del encabezado de la primera hoja *
+ * Wrapper Vue: `CoDocumentEditor` de `@prolibu-suite/cobalt-vue`.
+ */
+export class CoDocumentEditor {
+    constructor() {
+        /** Cuerpo: HTML de impresión (tolera el que guardó V1) o JSON de ProseMirror como string. */
+        this.value = null;
+        /** HTML del encabezado (banda superior de cada hoja). Vacío = sin encabezado. */
+        this.headerHtml = '';
+        /** Número de página en la banda. Se lee como intención: `true` o `'true'`. */
+        this.showPageNumber = false;
+        /** `letter` | `a4` | `legal` o `{width, height}` en px a 96 dpi (objeto o JSON). */
+        this.pageSize = 'letter';
+        /** Alto de la banda del encabezado en px (cuando hay encabezado). */
+        this.headerHeight = 45;
+        /** CSS de impresión del host; se acota a la hoja. */
+        this.pageStyles = '';
+        /** Solo lectura: sin barra ni edición (el encabezado tampoco se puede editar). */
+        this.readonly = false;
+        /** BCP-47 para los textos de la UI ('es', 'en', 'pt-BR'…). */
+        this.locale = 'en';
+        this.ready = false;
+        this.pageCount = 1;
+        /** `custom` = zoom libre por gesto (pinza del trackpad / ctrl+rueda); la escala queda donde la dejó el usuario. */
+        this.zoomMode = 'fit';
+        this.scale = 1;
+        this.stageHeight = 0;
+        /** La banda del encabezado está en edición (editor `print-header` montado). */
+        this.headerEditing = false;
+        /** Interruptor de número de página mientras se edita (se confirma con el encabezado). */
+        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;
+        /** Encabezado vigente (confirmado). La Task 16 lo cambia al confirmar la banda. */
+        this.currentHeaderHtml = '';
+        this.currentShowPageNumber = false;
+        /** JSON del encabezado confirmado (lista de campos sin montar un editor). */
+        this.headerDoc = null;
+        this.instanceId = String(++instanceSeq);
+        this.applyingExternal = false;
+        this.lastAppliedValue = null;
+        this.userDirty = false;
+        this.lastFieldsKey = '';
+        /** src de imágenes insertadas por el usuario sin `width`: al cargar reciben uno (nota T8). */
+        this.pendingImageSrcs = new Set();
+        this.changeThrottle = createThrottle(DOC_CHANGE_THROTTLE_MS, () => this.emitPendingChange());
+        /**
+         * Barra bajo la imagen seleccionada (corre en cada transacción del cuerpo). Solo
+         * cambia el estado si cambió algo: sin re-render por tecla ni bucles.
+         */
+        this.updateImageBar = () => {
+            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 !== 'image') {
+                if (this.imageBar)
+                    this.imageBar = null;
+                return;
+            }
+            const dom = ed.view.nodeDOM(sel.from);
+            const sheet = this.el.querySelector('.co-doc-editor__sheet');
+            if (!dom || !sheet) {
+                if (this.imageBar)
+                    this.imageBar = null;
+                return;
+            }
+            // 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 });
+            const mode = RichText.getImageLayoutMode({ wrapperStyle: node.attrs.wrapperStyle, containerStyle: node.attrs.containerStyle });
+            const cur = this.imageBar;
+            if (!cur || cur.mode !== mode || cur.top !== pos.top || cur.left !== pos.left)
+                this.imageBar = { mode, 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;
+            const ed = this.editor;
+            if (!ed || !img || img.tagName !== 'IMG')
+                return;
+            const src = img.getAttribute('src') || '';
+            if (!this.pendingImageSrcs.has(src))
+                return;
+            let target = -1;
+            ed.state.doc.descendants((n, pos) => {
+                if (target >= 0)
+                    return false;
+                if (n.type.name === 'image' && !n.attrs.width && n.attrs.src === src)
+                    target = pos;
+                return true;
+            });
+            const node = target >= 0 ? ed.state.doc.nodeAt(target) : null;
+            if (!node)
+                return;
+            const m = this.marginsPx;
+            const width = defaultImageWidth(img.naturalWidth, this.pageSizePx.width - m.left - m.right);
+            if (!width)
+                return;
+            // Quedan otras del mismo src sin ancho: su propio `load` las toma.
+            let more = false;
+            ed.state.doc.descendants((n, pos) => {
+                if (pos !== target && n.type.name === 'image' && !n.attrs.width && n.attrs.src === src)
+                    more = true;
+                return !more;
+            });
+            if (!more)
+                this.pendingImageSrcs.delete(src);
+            const wasSelected = ed.state.selection.node && ed.state.selection.from === target;
+            ed.view.dispatch(ed.state.tr.setNodeMarkup(target, undefined, Object.assign(Object.assign({}, node.attrs), { width })));
+            if (wasSelected)
+                ed.commands.setNodeSelection(target);
+        };
+        /** Al salir del editor (p. ej. mousedown en «Cerrar») el aviso no espera la ventana. */
+        this.onEditorBlur = () => {
+            this.changeThrottle.flush();
+        };
+        this.onHostKeydown = (e) => {
+            if (e.key === 'Escape')
+                this.changeThrottle.flush();
+        };
+        this.onTransaction = ({ transaction }) => {
+            if (!transaction.docChanged)
+                return;
+            const external = this.applyingExternal || !!transaction.getMeta(RichText.FIELD_SYNC_META);
+            if (!external) {
+                this.userDirty = true;
+                this.trackInsertedImages(transaction);
+            }
+            this.changeThrottle.run();
+        };
+        /** La barra emite coAction burbujeante: se corta acá y solo salen los botones del host. */
+        this.handleToolbarAction = (e) => {
+            e.stopPropagation();
+            const { action, payload } = e.detail || {};
+            // Se reemite EXACTAMENTE el detalle de la barra para los botones del host; las
+            // acciones propias de la barra (bold…) no salen del componente. `documentHeader`
+            // abre la banda y tampoco se reemite.
+            if (payload && payload.extra === true)
+                this.coAction.emit({ action, payload: { extra: true } });
+            else if (action === 'documentHeader')
+                this.startHeaderEdit();
+        };
+        /* ── Banda del encabezado en edición (como V1: doble clic o «Encabezado»; clic afuera o ✓ confirma; Esc cancela) ── */
+        this.startHeaderEdit = () => {
+            if (this.readonly || this.headerEditing || !this.editor)
+                return;
+            this.draftShowPageNumber = this.currentShowPageNumber;
+            this.headerEditing = true; // el render monta .co-doc-editor__header-editor y componentDidRender el editor
+            this.refreshPagination(); // sin encabezado previo, la banda aparece y corre el cuerpo
+        };
+        /** Cambios en la banda: solo la lista de campos (decisión 16: el encabezado no emite coChange). */
+        this.onHeaderTransaction = ({ transaction }) => {
+            if (transaction.docChanged)
+                this.changeThrottle.run();
+        };
+        /** Como fitHeaderImage de V1: una imagen sin ancho se ajusta a la banda (40×400) al cargar. */
+        this.onHeaderImageLoad = (e) => {
+            const img = e.target;
+            const ed = this.headerEditor;
+            if (!ed || !img || img.tagName !== 'IMG')
+                return;
+            const width = RichText.headerImageWidth({ w: img.naturalWidth, h: img.naturalHeight });
+            if (!width)
+                return;
+            let target = -1;
+            try {
+                const pos = ed.view.posAtDOM(img, 0);
+                const node = ed.state.doc.nodeAt(pos);
+                if (node && node.type.name === 'image')
+                    target = pos;
+            }
+            catch (_a) {
+                /* el img ya no está en el editor */
+            }
+            if (target < 0) {
+                const src = img.getAttribute('src');
+                ed.state.doc.descendants((node, pos) => {
+                    if (target >= 0)
+                        return false;
+                    if (node.type.name === 'image' && !node.attrs.width && node.attrs.src === src)
+                        target = pos;
+                    return true;
+                });
+            }
+            const node = target >= 0 ? ed.state.doc.nodeAt(target) : null;
+            if (!node || node.attrs.width)
+                return;
+            ed.view.dispatch(ed.state.tr.setNodeMarkup(target, undefined, Object.assign(Object.assign({}, node.attrs), { width })));
+        };
+        /** Clic afuera de la banda (y de la barra, que la edita) confirma. */
+        this.onDocumentPointer = (e) => {
+            const path = e.composedPath();
+            if (this.headerBandEl && path.includes(this.headerBandEl))
+                return;
+            if (this.toolbarEl && path.includes(this.toolbarEl))
+                return;
+            this.commitHeader();
+        };
+        /**
+         * Esc cancela y NO sigue hasta el editor ni burbujea al host (no cierra el overlay
+         * de abajo). Convive con `onHostKeydown`: el host captura antes (es ancestro) y
+         * solo adelanta el coChange pendiente del cuerpo.
+         */
+        this.onHeaderKeydown = (e) => {
+            var _a;
+            if (e.key !== 'Escape' || e.isComposing)
+                return;
+            // Desde la barra: si tiene un panel abierto (color, enlace, tamaño…) el Esc es suyo y lo cierra.
+            const toolbar = this.toolbarEl;
+            if (toolbar && e.currentTarget === toolbar && ((_a = toolbar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[aria-expanded="true"]')))
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this.cancelHeader(true);
+        };
+        /**
+         * `restoreFocus`: confirmar con el ✓ (teclado o clic) desmonta el botón enfocado →
+         * el foco vuelve al cuerpo. El clic afuera NO lo toca: el foco ya se fue adonde se hizo clic.
+         */
+        this.commitHeader = (restoreFocus = false) => {
+            var _a;
+            const ed = this.headerEditor;
+            if (!ed)
+                return;
+            const refocus = restoreFocus && this.focusIsInBandOrLost();
+            const html = ed.isEmpty ? '' : RichText.writePrintHtml(ed.state.doc, 'print-header', this.resolvedFeatures);
+            const showPageNumber = this.draftShowPageNumber;
+            this.teardownHeaderEditor();
+            this.currentHeaderHtml = html;
+            this.currentShowPageNumber = showPageNumber;
+            this.headerDoc = html ? RichText.readPrintHtml(html, 'print-header', this.resolvedFeatures) : null;
+            this.headerEditing = false;
+            this.refreshPagination();
+            this.coHeaderChange.emit({ html, showPageNumber });
+            this.emitFieldsIfChanged();
+            if (refocus)
+                (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.focus();
+        };
+        /** `restoreFocus` solo para la cancelación del usuario (Esc); un cambio de prop no roba el foco. */
+        this.cancelHeader = (restoreFocus = false) => {
+            var _a;
+            if (!this.headerEditing)
+                return;
+            this.teardownHeaderEditor();
+            this.headerEditing = false;
+            this.refreshPagination();
+            this.emitFieldsIfChanged();
+            if (restoreFocus)
+                (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.focus();
+        };
+        /** Escala que refleja el DOM (se actualiza en componentDidRender). */
+        this.renderedScale = 1;
+        this.onCanvasWheel = (e) => {
+            // ctrlKey = pinza del trackpad (Chrome/Edge/Firefox) o ctrl+rueda; ⌘+rueda en mac también.
+            if (!e.ctrlKey && !e.metaKey)
+                return;
+            e.preventDefault();
+            // deltaMode 1 = líneas (rueda de mouse clásica): ~16px por línea.
+            const delta = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaY;
+            this.zoomTo(pinchScale(this.scale, delta), e.clientX, e.clientY);
+        };
+        /** Safari no manda la pinza como ctrl+wheel sino como GestureEvent (escala acumulada desde el inicio). */
+        this.gestureBase = 1;
+        this.onGestureStart = (e) => {
+            e.preventDefault();
+            this.gestureBase = this.scale;
+        };
+        this.onGestureChange = (e) => {
+            var _a, _b, _c, _d;
+            e.preventDefault();
+            const rect = (_a = this.canvasEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const cx = (_b = e.clientX) !== null && _b !== void 0 ? _b : (rect ? rect.left + rect.width / 2 : 0);
+            const cy = (_c = e.clientY) !== null && _c !== void 0 ? _c : (rect ? rect.top + rect.height / 2 : 0);
+            this.zoomTo(clampScale(this.gestureBase * ((_d = e.scale) !== null && _d !== void 0 ? _d : 1)), cx, cy);
+        };
+    }
+    get s() {
+        return getRichTextStrings(this.locale);
+    }
+    get resolvedFeatures() {
+        var _a;
+        return (_a = parseFeatures(this.features)) !== null && _a !== void 0 ? _a : {};
+    }
+    get parsedExtraItems() {
+        const v = parseFeatures(this.extraItems);
+        return Array.isArray(v) ? v : [];
+    }
+    get pageSizePx() {
+        return RichText.resolvePageSize(parsePageSize(this.pageSize));
+    }
+    get marginsPx() {
+        return parseMargins(this.margins);
+    }
+    /** Con la banda en edición hay banda aunque el encabezado confirmado esté vacío. */
+    get hasHeader() {
+        return !!this.currentHeaderHtml || this.headerEditing;
+    }
+    get sanitizedHeaderHtml() {
+        return RichText.sanitize(this.currentHeaderHtml, 'print-header');
+    }
+    get pageScope() {
+        return `.co-doc-editor__sheet[data-co-doc="${this.instanceId}"]`;
+    }
+    /** Editor que maneja la barra: el del encabezado mientras la banda está en edición. */
+    get activeEditor() {
+        var _a;
+        return (_a = this.headerEditor) !== null && _a !== void 0 ? _a : this.editor;
+    }
+    /** «Encabezado» en la barra: apagado en solo lectura y con la banda ya abierta. */
+    get documentHeaderEnabled() {
+        return !this.readonly && !this.headerEditing;
+    }
+    /** Paginación del cuerpo: tamaño, márgenes y banda del encabezado. */
+    buildCustomExtensions() {
+        return [
+            RichText.Pagination.configure({
+                page: this.pageSizePx,
+                margins: this.marginsPx,
+                header: { height: this.hasHeader ? this.headerHeight : 0 },
+                footer: { height: 0 },
+                renderHeader: (page, count) => this.buildHeaderClone(page, count),
+                onPagesChange: (n) => {
+                    this.pageCount = n;
+                    this.coPagesChange.emit(n);
+                },
+            }),
+        ];
+    }
+    /** Campos del cuerpo y, detrás, los del encabezado (el que se edita o el confirmado). */
+    collectAllFields() {
+        if (!this.editor)
+            return [];
+        const list = RichText.collectFields(this.editor.state.doc);
+        const header = this.headerEditor ? this.headerEditor.state.doc : this.headerDoc;
+        if (header)
+            RichText.collectFields(header, list);
+        return list;
+    }
+    connectedCallback() {
+        // Captura sobre el host: el Escape pasa por acá antes que el listener del drawer/modal
+        // que cierra. No se frena la propagación: solo se adelanta el coChange pendiente.
+        this.el.addEventListener('keydown', this.onHostKeydown, true);
+    }
+    componentWillLoad() {
+        // H3: el harness de specs no aplica los defaults de clase de @State.
+        this.ready = false;
+        this.pageCount = 1;
+        this.zoomMode = 'fit';
+        this.scale = 1;
+        this.stageHeight = 0;
+        this.headerEditing = false;
+        this.draftShowPageNumber = false;
+        this.imageBar = null;
+    }
+    componentDidLoad() {
+        var _a, _b, _c;
+        if (!this.contentEl)
+            return;
+        this.syncHeaderFromProps();
+        this.editor = RichText.createEditor({
+            preset: 'print',
+            element: this.contentEl,
+            // Nota T14: el contenido inicial pasa por readPrintHtml (parseBody), igual que todo setContent posterior.
+            content: this.value ? this.parseBody(this.value) : null,
+            editable: !this.readonly,
+            features: this.resolvedFeatures,
+            labels: { signature: (n) => `${this.s.signature} ${n}`, fieldName: this.s.fieldNamePlaceholder },
+            customExtensions: this.buildCustomExtensions(),
+            imageUpload: this.imageUpload,
+        });
+        this.lastAppliedValue = this.value;
+        this.wireEditor(this.editor);
+        this.applyPageStyles();
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.updateScale());
+            if (this.canvasEl)
+                this.resizeObserver.observe(this.canvasEl);
+            if (this.stageEl)
+                this.resizeObserver.observe(this.stageEl);
+        }
+        // passive:false — sin preventDefault la pinza hace zoom de TODA la página del navegador.
+        (_a = this.canvasEl) === null || _a === void 0 ? void 0 : _a.addEventListener('wheel', this.onCanvasWheel, { passive: false });
+        (_b = this.canvasEl) === null || _b === void 0 ? void 0 : _b.addEventListener('gesturestart', this.onGestureStart);
+        (_c = this.canvasEl) === null || _c === void 0 ? void 0 : _c.addEventListener('gesturechange', this.onGestureChange);
+        this.updateScale();
+        this.syncToolbar();
+        this.ready = true;
+        this.emitFieldsIfChanged();
+        this.coReady.emit();
+    }
+    componentDidRender() {
+        this.applyPendingAnchor();
+        if (this.headerEditing && !this.headerEditor && this.headerMountEl)
+            this.mountHeaderEditor();
+        this.syncToolbar();
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        this.el.removeEventListener('keydown', this.onHostKeydown, true);
+        this.changeThrottle.cancel();
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
+        (_b = this.canvasEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('wheel', this.onCanvasWheel);
+        (_c = this.canvasEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('gesturestart', this.onGestureStart);
+        (_d = this.canvasEl) === null || _d === void 0 ? void 0 : _d.removeEventListener('gesturechange', this.onGestureChange);
+        // H9: soltar la barra ANTES de destruir, o re-renderiza con un editor destruido.
+        if (this.toolbarEl)
+            this.toolbarEl.editor = undefined;
+        this.teardownHeaderEditor(false);
+        this.headerEditing = false;
+        if (this.editor) {
+            this.editor.off('transaction', this.onTransaction);
+            this.editor.off('blur', this.onEditorBlur);
+            this.editor.off('transaction', this.updateImageBar);
+            this.editor.view.dom.removeEventListener('load', this.onBodyImageLoad, true);
+            this.editor.destroy();
+        }
+        this.editor = undefined;
+        this.pendingImageSrcs.clear();
+        this.imageBar = null;
+    }
+    onValueChange(next) {
+        if (next === this.lastAppliedValue)
+            return;
+        // Eco del host: devolvió por `value` lo que getPrintHtml() dio. Re-aplicarlo movería el cursor.
+        // Solo corre cuando cambia la prop (nunca por tecla).
+        if (this.editor && next && next === RichText.writePrintHtml(this.editor.state.doc, 'print', this.resolvedFeatures)) {
+            this.lastAppliedValue = next;
+            return;
+        }
+        this.applyBody(next);
+    }
+    onReadonlyChange() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.setEditable(!this.readonly);
+        if (this.readonly && this.headerEditing)
+            this.cancelHeader();
+        this.updateImageBar();
+    }
+    onPageGeometryChange() {
+        this.refreshPagination();
+        this.updateScale();
+    }
+    onHeaderPropsChange() {
+        if (this.headerEditing)
+            return; // lo que se está editando manda hasta confirmar o cancelar
+        this.syncHeaderFromProps();
+        this.refreshPagination();
+        this.emitFieldsIfChanged();
+    }
+    onPageStylesChange() {
+        this.applyPageStyles();
+    }
+    onLabelChange() {
+        if (this.editor)
+            this.editor.view.dom.setAttribute('aria-label', this.label || this.s.documentEditor);
+    }
+    /** «Página N / M» de las bandas de salto sale del idioma: redibujarlas. */
+    onLocaleChange() {
+        if (this.currentShowPageNumber)
+            this.refreshPagination();
+    }
+    /* ── Métodos públicos ── */
+    /** Cuerpo en la forma canónica de impresión (spec §3.4). */
+    async getPrintHtml() {
+        if (!this.editor)
+            return '';
+        return RichText.writePrintHtml(this.editor.state.doc, 'print', this.resolvedFeatures);
+    }
+    /**
+     * HTML del encabezado confirmado: el de la prop tal cual, o la forma canónica
+     * si pasó por la banda o por `setFieldValues`. Lo que se está editando en la
+     * banda sin confirmar NO cuenta.
+     */
+    async getHeaderHtml() {
+        return this.currentHeaderHtml;
+    }
+    /** Cuerpo como JSON de ProseMirror, o `null` si todavía no montó. */
+    async getJSON() {
+        return this.editor ? this.editor.getJSON() : null;
+    }
+    /**
+     * Emite YA el `coChange` pendiente (no-op si no hay). El host lo llama antes de
+     * decidir «cambios sin aplicar» (cerrar, navegar): `coChange` sale al final de
+     * la ventana de 250 ms y una edición recién tipeada todavía no avisó.
+     * El blur del editor y un Escape dentro del componente lo hacen solos.
+     */
+    async flushChange() {
+        this.changeThrottle.flush();
+    }
+    /**
+     * ¿Cuerpo vacío? En print un documento vacío NO serializa a `''`
+     * (`<p><br class="ProseMirror-trailingBreak"></p>`): el host pregunta acá.
+     */
+    async isEmpty() {
+        return this.editor ? this.editor.isEmpty : true;
+    }
+    /** Reemplaza el cuerpo (HTML de impresión, V1 incluido). A diferencia del RTE, NO emite coChange. */
+    async setContent(html) {
+        this.applyBody(html);
+    }
+    /**
+     * Valores de los campos (cuerpo y encabezado) en UNA transacción por editor; no
+     * cuenta como edición del usuario ni emite coHeaderChange. Con la banda abierta
+     * se aplican también al confirmado, así cancelar no los pierde.
+     */
+    async setFieldValues(values) {
+        var _a, _b;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.setFieldValues(values);
+        (_b = this.headerEditor) === null || _b === void 0 ? void 0 : _b.commands.setFieldValues(values);
+        if (!this.currentHeaderHtml)
+            return;
+        const next = RichText.setFieldValuesInHtml(this.currentHeaderHtml, values, 'print-header', this.resolvedFeatures);
+        if (next === this.currentHeaderHtml)
+            return;
+        this.currentHeaderHtml = next;
+        this.headerDoc = RichText.readPrintHtml(next, 'print-header', this.resolvedFeatures);
+        if (!this.headerEditing) {
+            this.refreshPagination(); // las bandas de salto clonan el encabezado
+            forceUpdate(this);
+        }
+    }
+    /** Inserta un campo `[[name]]` en el cursor; `opts`: `required`, `type`, `enum`, `value`. */
+    async insertField(name, opts) {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.chain().focus().insertField(name, opts).run();
+    }
+    /** Inserta el siguiente marcador de firma libre (`⟦sig:N⟧`) en el cursor. */
+    async insertSignatureSlot() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.chain().focus().insertSignatureSlot().run();
+    }
+    /** Enfoca el cuerpo del documento. */
+    async focusEditor() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.focus();
+    }
+    /** Instancia Tiptap del cuerpo (escape hatch), o `null` antes de montar. */
+    async getEditorInstance() {
+        var _a;
+        return (_a = this.editor) !== null && _a !== void 0 ? _a : null;
+    }
+    /* ── internos ── */
+    /** Listeners y atributos del editor del cuerpo. */
+    wireEditor(editor) {
+        const dom = editor.view.dom;
+        dom.classList.add('tiptap');
+        dom.setAttribute('aria-label', this.label || this.s.documentEditor);
+        dom.setAttribute('aria-multiline', 'true');
+        editor.on('transaction', this.onTransaction);
+        editor.on('transaction', this.updateImageBar);
+        editor.on('blur', this.onEditorBlur);
+        // `load` no burbujea: se escucha en captura.
+        dom.addEventListener('load', this.onBodyImageLoad, true);
+    }
+    imageModeLabel(mode) {
+        const s = this.s;
+        return { inline: s.imageLayoutInline, 'wrap-left': s.imageLayoutWrapLeft, 'wrap-right': s.imageLayoutWrapRight, break: s.imageLayoutBreak }[mode];
+    }
+    /**
+     * Sin `.focus()`: con el mouse el mousedown de la barra ya no le quita el foco al
+     * editor, y con el teclado el foco se queda en el botón (se puede seguir en la barra).
+     * H7: el comando re-selecciona el nodo, así la barra sigue tras el cambio.
+     */
+    setImageMode(mode) {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.setImageLayoutMode(mode);
+        this.updateImageBar();
+    }
+    /** Imágenes que entran por una transacción del usuario sin `width` (barra, pegar, soltar, subida). */
+    trackInsertedImages(transaction) {
+        var _a, _b, _c;
+        // Deshacer/rehacer REPONE una imagen que ya existía (p. ej. una de V1 sin ancho): no es
+        // una inserción, y estamparle ancho cambiaría el HTML de V1 y vaciaría la pila de rehacer.
+        // `history$` = PluginKey('history') de prosemirror-history (el undoRedo de StarterKit).
+        if (transaction.getMeta('history$'))
+            return;
+        const found = [];
+        for (const step of transaction.steps) {
+            (_c = (_b = (_a = step.slice) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.descendants) === null || _c === void 0 ? void 0 : _c.call(_b, (n) => {
+                if (n.type.name === 'image' && !n.attrs.width && n.attrs.src)
+                    found.push(n.attrs.src);
+            });
+        }
+        if (!found.length)
+            return;
+        // Un cambio de modo (setNodeMarkup) reescribe la MISMA imagen: la que ya estaba no es nueva.
+        const before = new Set();
+        transaction.before.descendants((n) => {
+            if (n.type.name === 'image' && !n.attrs.width)
+                before.add(n.attrs.src);
+        });
+        found.forEach((src) => {
+            if (!before.has(src))
+                this.pendingImageSrcs.add(src);
+        });
+    }
+    /** JSON de ProseMirror como string, o HTML de impresión (V1 incluido) por el lector tolerante. */
+    parseBody(v) {
+        const t = v.trim();
+        if (t.startsWith('{')) {
+            try {
+                return JSON.parse(t);
+            }
+            catch (_a) {
+                /* no era JSON: se lee como HTML */
+            }
+        }
+        return RichText.readPrintHtml(v, 'print', this.resolvedFeatures);
+    }
+    applyBody(v) {
+        if (!this.editor)
+            return;
+        // Otro cuerpo: lo pendiente del anterior ya no es «insertado» (una V1 con la misma src no se toca).
+        this.pendingImageSrcs.clear();
+        this.applyingExternal = true;
+        try {
+            if (!v)
+                this.editor.commands.clearContent(false);
+            else
+                this.editor.commands.setContent(this.parseBody(v), { emitUpdate: false });
+        }
+        finally {
+            this.applyingExternal = false;
+            this.lastAppliedValue = v;
+        }
+    }
+    emitPendingChange() {
+        if (!this.editor)
+            return;
+        this.emitFieldsIfChanged();
+        if (this.userDirty) {
+            this.userDirty = false;
+            this.coChange.emit();
+        }
+    }
+    emitFieldsIfChanged() {
+        const fields = this.collectAllFields();
+        const key = JSON.stringify(fields);
+        if (key === this.lastFieldsKey)
+            return;
+        this.lastFieldsKey = key;
+        this.coFieldsChange.emit(fields);
+    }
+    syncToolbar() {
+        syncToolbarEditor(this.toolbarEl, this.activeEditor, this.imageUpload);
+    }
+    syncHeaderFromProps() {
+        this.currentHeaderHtml = this.headerHtml || '';
+        this.currentShowPageNumber = toBoolIntent(this.showPageNumber);
+        this.headerDoc = this.currentHeaderHtml ? RichText.readPrintHtml(this.currentHeaderHtml, 'print-header', this.resolvedFeatures) : null;
+    }
+    mountHeaderEditor() {
+        var _a, _b;
+        const editor = RichText.createEditor({
+            preset: 'print-header',
+            element: this.headerMountEl,
+            content: this.currentHeaderHtml ? RichText.readPrintHtml(this.currentHeaderHtml, 'print-header', this.resolvedFeatures) : null,
+            editable: true,
+            features: { fields: this.resolvedFeatures.fields },
+            labels: { fieldName: this.s.fieldNamePlaceholder },
+            imageUpload: this.imageUpload,
+        });
+        this.headerEditor = editor;
+        const dom = editor.view.dom;
+        dom.classList.add('tiptap');
+        dom.setAttribute('aria-label', this.s.documentHeader);
+        editor.on('transaction', this.onHeaderTransaction);
+        // `load` no burbujea: se escucha en captura.
+        dom.addEventListener('load', this.onHeaderImageLoad, true);
+        document.addEventListener('mousedown', this.onDocumentPointer, true);
+        (_a = this.headerBandEl) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', this.onHeaderKeydown, true);
+        // Con la banda abierta la barra edita el encabezado: su Esc también cancela la banda.
+        (_b = this.toolbarEl) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.onHeaderKeydown, true);
+        editor.commands.focus('end');
+        this.syncToolbar();
+    }
+    /** `resync`: devolverle la barra al cuerpo (no al desconectar: la barra ya se soltó). */
+    teardownHeaderEditor(resync = true) {
+        var _a, _b;
+        document.removeEventListener('mousedown', this.onDocumentPointer, true);
+        (_a = this.headerBandEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.onHeaderKeydown, true);
+        (_b = this.toolbarEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', this.onHeaderKeydown, true);
+        const ed = this.headerEditor;
+        this.headerEditor = undefined;
+        // H9: la barra suelta el editor del encabezado ANTES de que se destruya.
+        if (resync)
+            this.syncToolbar();
+        else if (this.toolbarEl && ed && this.toolbarEl.editor === ed)
+            this.toolbarEl.editor = undefined;
+        if (ed) {
+            ed.off('transaction', this.onHeaderTransaction);
+            ed.view.dom.removeEventListener('load', this.onHeaderImageLoad, true);
+            ed.destroy();
+        }
+    }
+    /** ¿El foco está en la banda (editor, interruptor, ✓) o se perdió al `<body>`? */
+    focusIsInBandOrLost() {
+        const active = document.activeElement;
+        return !active || active === document.body || !!(this.headerBandEl && this.headerBandEl.contains(active));
+    }
+    /** Tamaño, márgenes o banda cambiaron: la extensión redibuja bandas y vuelve a medir. */
+    refreshPagination() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.setPaginationOptions({
+            page: this.pageSizePx,
+            margins: this.marginsPx,
+            header: { height: this.hasHeader ? this.headerHeight : 0 },
+        });
+    }
+    applyPageStyles() {
+        if (this.styleEl)
+            this.styleEl.textContent = scopePageStyles(this.pageStyles, this.pageScope);
+    }
+    /** Cabecera de la hoja `page` dentro de una banda de salto (DOM imperativo: la pinta un widget). */
+    buildHeaderClone(page, count) {
+        if (!this.currentHeaderHtml)
+            return null;
+        const el = document.createElement('div');
+        el.className = 'co-doc-editor__header-static';
+        el.style.height = `${this.headerHeight}px`;
+        const html = document.createElement('div');
+        html.className = 'co-doc-editor__header-html';
+        html.innerHTML = this.sanitizedHeaderHtml;
+        el.appendChild(html);
+        if (this.currentShowPageNumber) {
+            const n = document.createElement('span');
+            n.className = 'co-doc-editor__page-number';
+            n.textContent = `${this.s.page} ${page} / ${count}`;
+            el.appendChild(n);
+        }
+        return el;
+    }
+    updateScale() {
+        var _a, _b, _c, _d;
+        if (this.zoomMode !== 'custom') {
+            const next = this.zoomMode === 'actual' ? 1 : fitScale(((_b = (_a = this.canvasEl) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0) - ZOOM_GUTTER_PX, this.pageSizePx.width);
+            if (next !== this.scale)
+                this.scale = next;
+        }
+        const h = (_d = (_c = this.stageEl) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0;
+        if (h !== this.stageHeight)
+            this.stageHeight = h;
+    }
+    /**
+     * Zoom libre anclado al cursor: guarda el punto del PAPEL bajo el puntero (con la escala que el
+     * DOM muestra ahora) y, tras el render, corrige el scroll midiendo dónde quedó. Varios eventos
+     * antes de un render reusan el mismo punto: la hoja todavía no se movió.
+     */
+    zoomTo(next, clientX, clientY) {
+        if (!this.canvasEl || !this.stageEl || next === this.scale)
+            return;
+        if (!this.pendingAnchor) {
+            const r = this.stageEl.getBoundingClientRect();
+            this.pendingAnchor = {
+                px: paperPoint(clientX, r.left, this.renderedScale),
+                py: paperPoint(clientY, r.top, this.renderedScale),
+                cx: clientX,
+                cy: clientY,
+            };
+        }
+        else {
+            this.pendingAnchor.cx = clientX;
+            this.pendingAnchor.cy = clientY;
+        }
+        this.zoomMode = 'custom';
+        this.scale = next;
+    }
+    applyPendingAnchor() {
+        const a = this.pendingAnchor;
+        const canvas = this.canvasEl;
+        this.renderedScale = this.scale;
+        if (!a || !canvas || !this.stageEl)
+            return;
+        this.pendingAnchor = undefined;
+        const r = this.stageEl.getBoundingClientRect();
+        canvas.scrollLeft += anchorCorrection(r.left, a.px, this.scale, a.cx);
+        canvas.scrollTop += anchorCorrection(r.top, a.py, this.scale, a.cy);
+    }
+    setZoom(mode) {
+        this.zoomMode = mode;
+        this.updateScale();
+    }
+    /**
+     * Banda de la primera hoja. Siempre montada (oculta con `hidden`); doble clic la
+     * vuelve un editor `print-header` con el interruptor de número de página.
+     */
+    renderHeaderBand() {
+        const s = this.s;
+        return (h("div", { key: "header-band", class: { 'co-doc-editor__header-band': true, 'co-doc-editor__header-band--editing': this.headerEditing }, part: "header-band", hidden: !this.hasHeader, ref: (el) => (this.headerBandEl = el), onDblClick: () => this.startHeaderEdit() }, this.headerEditing ? (h("div", { key: "header-editing", class: "co-doc-editor__header-editing" }, h("div", { class: "co-doc-editor__header-editor", ref: (el) => (this.headerMountEl = el) }), h("div", { class: "co-doc-editor__header-tools" }, h("co-switch", { checked: this.draftShowPageNumber, label: s.pageNumber, disabled: false, required: false, status: "default", onCoChange: (e) => {
+                e.stopPropagation(); // su coChange burbujea: no es el coChange del documento
+                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. */
+    renderOverlays() {
+        const bar = this.imageBar;
+        if (!bar || this.readonly || this.headerEditing)
+            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);
+            const active = bar.mode === mode;
+            // <button> nativo (no co-icon-button): necesita aria-pressed, que ningún co-* reenvía.
+            return (h("co-tooltip", { key: mode, content: label }, h("button", { type: "button", class: { 'co-doc-editor__image-mode': true, 'co-doc-editor__image-mode--active': active }, "data-mode": mode, "aria-label": label, "aria-pressed": String(active), onClick: () => this.setImageMode(mode) }, h("co-icon", { name: IMAGE_MODE_ICONS[mode], size: IMAGE_MODE_ICON_PX, "aria-hidden": "true" }))));
+        })));
+    }
+    render() {
+        const s = this.s;
+        const page = this.pageSizePx;
+        const m = this.marginsPx;
+        const headerH = this.hasHeader ? this.headerHeight : 0;
+        const sheetVars = {
+            '--co-doc-page-w': `${page.width}px`,
+            '--co-doc-page-h': `${page.height}px`,
+            '--co-doc-margin-top': `${m.top}px`,
+            '--co-doc-margin-right': `${m.right}px`,
+            '--co-doc-margin-bottom': `${m.bottom}px`,
+            '--co-doc-margin-left': `${m.left}px`,
+            '--co-doc-header-h': `${headerH}px`,
+            '--co-doc-pages': String(this.pageCount),
+            '--co-doc-gap': `${RichText.PAGE_GAP_PX}px`,
+        };
+        const frameStyle = {
+            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" })))));
+    }
+    static get is() { return "co-document-editor"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-document-editor.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-document-editor.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cuerpo: HTML de impresi\u00F3n (tolera el que guard\u00F3 V1) o JSON de ProseMirror como string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            },
+            "headerHtml": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML del encabezado (banda superior de cada hoja). Vac\u00EDo = sin encabezado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header-html",
+                "defaultValue": "''"
+            },
+            "showPageNumber": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | string",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "N\u00FAmero de p\u00E1gina en la banda. Se lee como intenci\u00F3n: `true` o `'true'`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-page-number",
+                "defaultValue": "false"
+            },
+            "pageSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | DocumentPageSize",
+                    "resolved": "string | { width: number; height: number; }",
+                    "references": {
+                        "DocumentPageSize": {
+                            "location": "local",
+                            "path": "/Users/agox/worktrees/cobalt-docs-2026-09-24/packages/core/src/components/co-document-editor/co-document-editor.tsx",
+                            "id": "src/components/co-document-editor/co-document-editor.tsx::DocumentPageSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`letter` | `a4` | `legal` o `{width, height}` en px a 96 dpi (objeto o JSON)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-size",
+                "defaultValue": "'letter'"
+            },
+            "margins": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | DocumentMargins",
+                    "resolved": "DocumentMargins | string | undefined",
+                    "references": {
+                        "DocumentMargins": {
+                            "location": "local",
+                            "path": "/Users/agox/worktrees/cobalt-docs-2026-09-24/packages/core/src/components/co-document-editor/co-document-editor.tsx",
+                            "id": "src/components/co-document-editor/co-document-editor.tsx::DocumentMargins"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "M\u00E1rgenes en px (objeto o JSON). Default 38 px por lado (10 mm)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "margins"
+            },
+            "headerHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alto de la banda del encabezado en px (cuando hay encabezado)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header-height",
+                "defaultValue": "45"
+            },
+            "pageStyles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS de impresi\u00F3n del host; se acota a la hoja."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-styles",
+                "defaultValue": "''"
+            },
+            "features": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | DocumentFeatures",
+                    "resolved": "DocumentFeatures | string | undefined",
+                    "references": {
+                        "DocumentFeatures": {
+                            "location": "local",
+                            "path": "/Users/agox/worktrees/cobalt-docs-2026-09-24/packages/core/src/components/co-document-editor/co-document-editor.tsx",
+                            "id": "src/components/co-document-editor/co-document-editor.tsx::DocumentFeatures"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "`{fields, signatureSlots}` (objeto o JSON)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "features"
+            },
+            "imageUpload": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ImageUploadHandler",
+                    "resolved": "((file: File) => Promise<string | ImageUploadResult>) | undefined",
+                    "references": {
+                        "ImageUploadHandler": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-rich-text",
+                            "id": "../rich-text/dist/index.d.ts::ImageUploadHandler",
+                            "referenceLocation": "ImageUploadHandler"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "`(file) => Promise<{src, fileId?}>` (propiedad JS)."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Solo lectura: sin barra ni edici\u00F3n (el encabezado tampoco se puede editar)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "BCP-47 para los textos de la UI ('es', 'en', 'pt-BR'\u2026)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "'en'"
+            },
+            "extraItems": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ToolbarExtraItem[]",
+                    "resolved": "ToolbarExtraItem[] | string | undefined",
+                    "references": {
+                        "ToolbarExtraItem": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-rich-text",
+                            "id": "../rich-text/dist/index.d.ts::ToolbarExtraItem",
+                            "referenceLocation": "ToolbarExtraItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Botones del host al final de la barra (objeto o JSON): `[{id, label, icon?}]`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "extra-items"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre accesible del \u00E1rea de edici\u00F3n."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "ready": {},
+            "pageCount": {},
+            "zoomMode": {},
+            "scale": {},
+            "stageHeight": {},
+            "headerEditing": {},
+            "draftShowPageNumber": {},
+            "imageBar": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coChange",
+                "name": "coChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Hubo un cambio del usuario en el cuerpo (sin HTML; como mucho cada 250 ms)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coFieldsChange",
+                "name": "coFieldsChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Lista de campos (cuerpo + encabezado) cuando cambia."
+                },
+                "complexType": {
+                    "original": "FieldInfo[]",
+                    "resolved": "FieldDefinition[]",
+                    "references": {
+                        "FieldInfo": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-rich-text",
+                            "id": "../rich-text/dist/index.d.ts::FieldInfo",
+                            "referenceLocation": "FieldInfo"
+                        }
+                    }
+                }
+            }, {
+                "method": "coHeaderChange",
+                "name": "coHeaderChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Encabezado confirmado."
+                },
+                "complexType": {
+                    "original": "DocumentHeaderDetail",
+                    "resolved": "DocumentHeaderDetail",
+                    "references": {
+                        "DocumentHeaderDetail": {
+                            "location": "local",
+                            "path": "/Users/agox/worktrees/cobalt-docs-2026-09-24/packages/core/src/components/co-document-editor/co-document-editor.tsx",
+                            "id": "src/components/co-document-editor/co-document-editor.tsx::DocumentHeaderDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "coPagesChange",
+                "name": "coPagesChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Cantidad de p\u00E1ginas."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "coAction",
+                "name": "coAction",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Clic en un bot\u00F3n del host (`extraItems`): `{ action: <id>, payload: { extra: true } }`."
+                },
+                "complexType": {
+                    "original": "DocumentActionDetail",
+                    "resolved": "DocumentActionDetail",
+                    "references": {
+                        "DocumentActionDetail": {
+                            "location": "local",
+                            "path": "/Users/agox/worktrees/cobalt-docs-2026-09-24/packages/core/src/components/co-document-editor/co-document-editor.tsx",
+                            "id": "src/components/co-document-editor/co-document-editor.tsx::DocumentActionDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "coReady",
+                "name": "coReady",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "El editor termin\u00F3 de montar. No burbujea."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getPrintHtml": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Cuerpo en la forma can\u00F3nica de impresi\u00F3n (spec \u00A73.4).",
+                    "tags": []
+                }
+            },
+            "getHeaderHtml": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "HTML del encabezado confirmado: el de la prop tal cual, o la forma can\u00F3nica\nsi pas\u00F3 por la banda o por `setFieldValues`. Lo que se est\u00E1 editando en la\nbanda sin confirmar NO cuenta.",
+                    "tags": []
+                }
+            },
+            "getJSON": {
+                "complexType": {
+                    "signature": "() => Promise<object | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<object | null>"
+                },
+                "docs": {
+                    "text": "Cuerpo como JSON de ProseMirror, o `null` si todav\u00EDa no mont\u00F3.",
+                    "tags": []
+                }
+            },
+            "flushChange": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Emite YA el `coChange` pendiente (no-op si no hay). El host lo llama antes de\ndecidir \u00ABcambios sin aplicar\u00BB (cerrar, navegar): `coChange` sale al final de\nla ventana de 250 ms y una edici\u00F3n reci\u00E9n tipeada todav\u00EDa no avis\u00F3.\nEl blur del editor y un Escape dentro del componente lo hacen solos.",
+                    "tags": []
+                }
+            },
+            "isEmpty": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "\u00BFCuerpo vac\u00EDo? En print un documento vac\u00EDo NO serializa a `''`\n(`<p><br class=\"ProseMirror-trailingBreak\"></p>`): el host pregunta ac\u00E1.",
+                    "tags": []
+                }
+            },
+            "setContent": {
+                "complexType": {
+                    "signature": "(html: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "html",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Reemplaza el cuerpo (HTML de impresi\u00F3n, V1 incluido). A diferencia del RTE, NO emite coChange.",
+                    "tags": []
+                }
+            },
+            "setFieldValues": {
+                "complexType": {
+                    "signature": "(values: Record<string, string>) => Promise<void>",
+                    "parameters": [{
+                            "name": "values",
+                            "type": "{ [x: string]: string; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Valores de los campos (cuerpo y encabezado) en UNA transacci\u00F3n por editor; no\ncuenta como edici\u00F3n del usuario ni emite coHeaderChange. Con la banda abierta\nse aplican tambi\u00E9n al confirmado, as\u00ED cancelar no los pierde.",
+                    "tags": []
+                }
+            },
+            "insertField": {
+                "complexType": {
+                    "signature": "(name: string, opts?: Partial<Omit<MergeFieldAttributes, \"name\">>) => Promise<void>",
+                    "parameters": [{
+                            "name": "name",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "opts",
+                            "type": "Partial<Omit<MergeFieldAttributes, \"name\">> | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "Omit": {
+                            "location": "global",
+                            "id": "global::Omit"
+                        },
+                        "MergeFieldAttributes": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-rich-text",
+                            "id": "../rich-text/dist/index.d.ts::MergeFieldAttributes",
+                            "referenceLocation": "MergeFieldAttributes"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Inserta un campo `[[name]]` en el cursor; `opts`: `required`, `type`, `enum`, `value`.",
+                    "tags": []
+                }
+            },
+            "insertSignatureSlot": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Inserta el siguiente marcador de firma libre (`\u27E6sig:N\u27E7`) en el cursor.",
+                    "tags": []
+                }
+            },
+            "focusEditor": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Enfoca el cuerpo del documento.",
+                    "tags": []
+                }
+            },
+            "getEditorInstance": {
+                "complexType": {
+                    "signature": "() => Promise<Editor | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Editor": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-rich-text",
+                            "id": "../rich-text/dist/index.d.ts::Editor",
+                            "referenceLocation": "Editor"
+                        }
+                    },
+                    "return": "Promise<Editor | null>"
+                },
+                "docs": {
+                    "text": "Instancia Tiptap del cuerpo (escape hatch), o `null` antes de montar.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "readonly",
+                "methodName": "onReadonlyChange"
+            }, {
+                "propName": "pageSize",
+                "methodName": "onPageGeometryChange"
+            }, {
+                "propName": "margins",
+                "methodName": "onPageGeometryChange"
+            }, {
+                "propName": "headerHeight",
+                "methodName": "onPageGeometryChange"
+            }, {
+                "propName": "headerHtml",
+                "methodName": "onHeaderPropsChange"
+            }, {
+                "propName": "showPageNumber",
+                "methodName": "onHeaderPropsChange"
+            }, {
+                "propName": "pageStyles",
+                "methodName": "onPageStylesChange"
+            }, {
+                "propName": "label",
+                "methodName": "onLabelChange"
+            }, {
+                "propName": "locale",
+                "methodName": "onLabelChange"
+            }, {
+                "propName": "locale",
+                "methodName": "onLocaleChange"
+            }];
+    }
+}