@prolibu-suite/cobalt-core 0.10.3 → 0.11.0

package/dist/esm/co-document-editor.entry.js

@@ -0,0 +1,1159 @@
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, a as getElement } from './index-DJkaRtbb.js';
+import { g as getRichTextStrings } from './richTextI18n-xnrKkNWQ.js';
+import { b as parseFeatures, s as syncToolbarEditor } from './rich-text-host-BmdKHBZP.js';
+import { B as getImageLayoutMode, F as FIELD_SYNC_META, E as headerImageWidth, w as writePrintHtml, r as readPrintHtml, Q as resolvePageSize, s as sanitize, q as Pagination, x as collectFields, z as createEditor, W as setFieldValuesInHtml, I as IMAGE_LAYOUT_MODES, P as PAGE_GAP_PX, G as layoutBox } from './pagination-D9OfZUnY.js';
+import './purify.es-B2QLgWrz.js';
+
+/** Ventana de `coChange`: avisa como mucho cada 250 ms (nunca por tecla). */
+const DOC_CHANGE_THROTTLE_MS = 250;
+function createThrottle(ms, fn) {
+    let timer = null;
+    return {
+        run() {
+            if (timer)
+                return;
+            timer = setTimeout(() => {
+                timer = null;
+                fn();
+            }, ms);
+        },
+        flush() {
+            if (!timer)
+                return;
+            clearTimeout(timer);
+            timer = null;
+            fn();
+        },
+        cancel() {
+            if (timer)
+                clearTimeout(timer);
+            timer = null;
+        },
+        get pending() {
+            return timer !== null;
+        },
+    };
+}
+
+const DEFAULT_MARGINS = { top: 38, right: 38, bottom: 38, left: 38 };
+const NAMED = new Set(['letter', 'a4', 'legal']);
+/** `true` o `'true'`. Un `'false'` que dejó el multipart de V1 cuenta como falso (spec §3.6). */
+function toBoolIntent(v) {
+    return v === true || v === 'true';
+}
+function parsePageSize(v) {
+    if (typeof v === 'string') {
+        if (NAMED.has(v))
+            return v;
+        try {
+            return parsePageSize(JSON.parse(v));
+        }
+        catch (_a) {
+            return 'letter';
+        }
+    }
+    if (v && typeof v === 'object') {
+        const { width, height } = v;
+        if (Number(width) > 0 && Number(height) > 0)
+            return { width: Number(width), height: Number(height) };
+    }
+    return 'letter';
+}
+function parseMargins(v) {
+    let raw = v;
+    if (typeof v === 'string') {
+        try {
+            raw = JSON.parse(v);
+        }
+        catch (_a) {
+            return Object.assign({}, DEFAULT_MARGINS);
+        }
+    }
+    if (!raw || typeof raw !== 'object')
+        return Object.assign({}, DEFAULT_MARGINS);
+    const m = raw;
+    const pick = (k) => (Number.isFinite(Number(m[k])) && m[k] !== undefined ? Number(m[k]) : DEFAULT_MARGINS[k]);
+    return { top: pick('top'), right: pick('right'), bottom: pick('bottom'), left: pick('left') };
+}
+
+/**
+ * Acota el CSS de impresión del host (SharedContractUtils: editorCss + defaultCss)
+ * a UNA hoja: cada selector queda bajo `:where(scope)`; `*`, `html`, `body` y `:root`
+ * pasan a ser la hoja (el `*` global de defaultCss no puede escapar a la página).
+ * Se entra en @media/@supports, se conserva @keyframes y se descartan las
+ * reglas que no aplican a pantalla o traerían red (@page, @font-face, @import).
+ */
+const DROP_STATEMENTS = /@(import|charset|namespace)[^;]*;/gi;
+function scopePageStyles(css, scope) {
+    if (!css)
+        return '';
+    const src = css.replace(/\/\*[\s\S]*?\*\//g, '').replace(DROP_STATEMENTS, '');
+    return scopeBlock(src, scope).trim();
+}
+function matchingBrace(src, open) {
+    let depth = 0;
+    let quote = null;
+    for (let i = open; i < src.length; i += 1) {
+        const c = src[i];
+        if (quote) {
+            if (c === quote && src[i - 1] !== '\\')
+                quote = null;
+            continue;
+        }
+        if (c === '"' || c === "'")
+            quote = c;
+        else if (c === '{')
+            depth += 1;
+        else if (c === '}') {
+            depth -= 1;
+            if (depth === 0)
+                return i;
+        }
+    }
+    return -1;
+}
+/**
+ * El scope va dentro de `:where()`: especificidad 0. Cada regla del host conserva la
+ * especificidad que tenía en el PDF, y la geometría propia de la hoja (clases del
+ * componente, ≥ (0,1,0)) le gana a sus resets (`* { padding: 0 }`, `.tiptap table td`…).
+ *
+ * Excepción del `*`: en el PDF es CSS de autor y le gana a la UA de `pre`/`code`
+ * (`font-family: monospace`). En la app, el normalize global (Quasar: `code, kbd, pre, samp
+ * { font-family: monospace }`, (0,0,1)) es de autor y le ganaba al `:where(scope) *` (0,0,0):
+ * un bloque de código medía distinto en la hoja que en el PDF. `:where(scope) :is(pre, code)`
+ * sube el reset a (0,0,1): empata con el normalize y gana por orden (el `<style>` de la hoja
+ * vive dentro del documento, después de las hojas globales del `<head>`), y sigue perdiendo
+ * contra cualquier regla del host más específica o posterior (`.tiptap pre`, `pre {…}`), como en
+ * el PDF. `inherit` desde la hoja no sirve: un `pre` hijo directo de `.ProseMirror` heredaría la
+ * fuente del contenedor (Geist) y no la del `*` (Roboto) que ve el PDF.
+ */
+function scopeSelector(sel, scope) {
+    const s = sel.trim();
+    if (!s)
+        return '';
+    const root = `:where(${scope})`;
+    if (s === '*')
+        return `${root}, ${root} *, ${root} :is(pre, code)`;
+    const rest = s.replace(/^(?:(?:html|body|:root)(?=$|[\s>+~.#:[])\s*)+/i, '').trim();
+    return rest ? `${root} ${rest}` : root;
+}
+function scopeBlock(src, scope) {
+    let out = '';
+    let i = 0;
+    while (i < src.length) {
+        const open = src.indexOf('{', i);
+        if (open === -1)
+            break;
+        const close = matchingBrace(src, open);
+        if (close === -1)
+            break;
+        const prelude = src.slice(i, open).trim();
+        const body = src.slice(open + 1, close);
+        i = close + 1;
+        if (!prelude)
+            continue;
+        if (prelude.startsWith('@')) {
+            const at = prelude.slice(1).split(/[\s(]/)[0].toLowerCase();
+            if (at === 'media' || at === 'supports')
+                out += `${prelude}{${scopeBlock(body, scope)}}`;
+            else if (at.endsWith('keyframes'))
+                out += `${prelude}{${body}}`;
+            continue; // @page, @font-face y cualquier otra at-rule: fuera
+        }
+        const selectors = prelude.split(',').map((x) => scopeSelector(x, scope)).filter(Boolean);
+        if (selectors.length)
+            out += `${selectors.join(', ')}{${body}}`;
+    }
+    return out;
+}
+
+/** Aire lateral que se descuenta del lienzo al ajustar al ancho (2 × --co-spacing-lg). */
+const ZOOM_GUTTER_PX = 32;
+/** Escala para que la hoja entre en el ancho disponible: nunca agranda, nunca baja de 25 %. */
+function fitScale(available, pageWidth) {
+    if (!(available > 0) || !(pageWidth > 0))
+        return 1;
+    const s = Math.min(1, Math.max(0.25, available / pageWidth));
+    return Math.round(s * 1000) / 1000;
+}
+/** Tope del zoom libre (pinza / ctrl+rueda). El piso es el mismo de «Ajustar al ancho». */
+const ZOOM_MIN = 0.25;
+const ZOOM_MAX = 3;
+/** Acota la escala a [ZOOM_MIN, ZOOM_MAX] y la redondea a milésimas (NaN → 1). */
+function clampScale(scale) {
+    if (!Number.isFinite(scale))
+        return 1;
+    return Math.round(Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, scale)) * 1000) / 1000;
+}
+/**
+ * Nueva escala para un evento `wheel` con ctrlKey (la pinza del trackpad llega así en Chrome,
+ * Edge y Firefox; también ctrl+rueda del mouse). Exponencial: acercar y alejar el mismo delta
+ * vuelve al punto de partida, y la velocidad se siente igual a cualquier escala.
+ */
+function pinchScale(current, deltaY) {
+    if (!Number.isFinite(deltaY))
+        return current;
+    return clampScale(current * Math.exp(-deltaY * 0.01));
+}
+/**
+ * Punto del papel (px de layout, sin escala) bajo el cursor: `stageStart` es el borde de la hoja
+ * escalada en pantalla (getBoundingClientRect), `scale` la escala que el DOM refleja HOY.
+ */
+function paperPoint(client, stageStart, scale) {
+    if (!(scale > 0))
+        return 0;
+    return (client - stageStart) / scale;
+}
+/**
+ * Cuánto hay que correr el scroll para que el punto `paper` vuelva a quedar bajo el cursor,
+ * medido DESPUÉS del render con la escala nueva (la hoja está centrada y el lienzo tiene
+ * relleno fijo: predecir la posición falla, medirla no).
+ */
+function anchorCorrection(stageStart, paper, scale, client) {
+    return stageStart + paper * scale - client;
+}
+
+/**
+ * Herramientas de la banda del encabezado en edición (interruptor de número de
+ * página + ✓). La fila cuelga ENCIMA de la banda, dentro del margen superior de la
+ * hoja, y el papel tiene `overflow: clip`: tiene que entrar en el margen mínimo
+ * (10 mm = 38 px) o se recorta. `co-icon-button size="sm"` mide 48 px: el tamaño va
+ * por `box-size`. Fila = max(✓, switch de 24) + padding + borde (ver la prueba).
+ */
+const HEADER_TOOL_BOX_PX = 28;
+const HEADER_TOOL_ICON_PX = 16;
+
+/**
+ * Barra de diseño de imagen (4 modos de V1). Vive DENTRO del papel, que tiene
+ * `overflow: clip`: su posición se decide acá para que nunca quede recortada.
+ * Las medidas son las del CSS (`.co-doc-editor__image-bar` / `__image-mode`,
+ * ver la prueba): se calculan sin medir el DOM porque la barra todavía no existe
+ * cuando se decide dónde va.
+ */
+const IMAGE_MODE_ICONS = {
+    inline: 'image-square',
+    'wrap-left': 'text-align-left',
+    'wrap-right': 'text-align-right',
+    break: 'rows',
+};
+const IMAGE_MODE_ICON_PX = 16;
+/** 4 botones × 28 + 3 separaciones de 2 + relleno 2 × 2 + borde 1 × 2. */
+const IMAGE_BAR_SIZE = { width: 124, height: 34 };
+/** Aire entre la imagen y la barra. */
+const IMAGE_BAR_GAP_PX = 4;
+/**
+ * Debajo de la imagen (por defecto: una imagen pegada al margen superior no la
+ * saca por arriba); si no entra debajo (final del papel), encima; si tampoco,
+ * dentro de la imagen, sobre su borde inferior. En horizontal se acota al papel.
+ * Un papel sin medidas (0) no acota.
+ */
+function imageBarPosition(img, sheet, bar = IMAGE_BAR_SIZE, gap = IMAGE_BAR_GAP_PX) {
+    const below = img.top + img.height + gap;
+    const above = img.top - gap - bar.height;
+    let top = below;
+    let placement = 'below';
+    if (sheet.height > 0 && below + bar.height > sheet.height) {
+        if (above >= 0) {
+            top = above;
+            placement = 'above';
+        }
+        else {
+            top = Math.max(0, Math.min(img.top + img.height - gap - bar.height, sheet.height - bar.height));
+            placement = 'inside';
+        }
+    }
+    let left = img.left;
+    if (sheet.width > 0)
+        left = Math.max(0, Math.min(left, sheet.width - bar.width));
+    return { top, left, placement };
+}
+/** `offsetLeft` acumulado hasta `root` (par de `layoutBox`, que da el top). */
+function layoutLeft(el, root) {
+    let left = 0;
+    let node = el;
+    while (node && node !== root) {
+        left += node.offsetLeft;
+        node = node.offsetParent;
+    }
+    return left;
+}
+/**
+ * Ancho con el que nace una imagen insertada (nota T8 / plan B §6.4): sin `width`,
+ * V1 la abre a 800 px, más que la columna (≈740 en carta). Nunca pasa de la columna.
+ */
+function defaultImageWidth(naturalWidth, columnWidth) {
+    const natural = naturalWidth > 0 ? naturalWidth : 0;
+    const column = columnWidth > 0 ? columnWidth : 0;
+    const w = natural && column ? Math.min(natural, column) : natural || column;
+    return w ? Math.max(1, Math.round(w)) : null;
+}
+
+const coDocumentEditorCss = () => `co-document-editor{display:block;height:100%;min-height:0}.co-doc-editor{--co-doc-canvas:var(--co-semantic-surface-muted);--co-doc-sheet-shadow:0 1px 3px var(--co-color-opacity-negro-16), 0 0 0 1px var(--co-color-opacity-negro-8);display:flex;flex-direction:column;height:100%;min-height:0;background:var(--co-doc-canvas);color:var(--co-semantic-text-default);font-family:var(--co-font-family-primary)}.co-doc-editor__bar{display:flex;align-items:center;gap:var(--co-spacing-sm2);min-width:0;padding-inline:var(--co-spacing-md);background:var(--co-semantic-surface-page);border-bottom:1px solid var(--co-semantic-border-subtle)}.co-doc-editor__toolbar{flex:1 1 auto;min-width:0}.co-doc-editor__body{flex:1 1 auto;display:flex;min-height:0}.co-doc-editor__body>[slot='aside']{flex:0 0 var(--co-doc-aside-width, 320px);width:var(--co-doc-aside-width, 320px);min-width:0;min-height:0;box-sizing:border-box;border-left:1px solid var(--co-semantic-border-subtle)}.co-doc-editor__canvas{flex:1 1 auto;min-width:0;overflow:auto;box-sizing:border-box;padding:var(--co-spacing-2xl) var(--co-spacing-lg)}.co-doc-editor__content .ProseMirror{position:relative;outline:none}.co-doc-editor--loading .co-doc-editor__content{visibility:hidden}.co-doc-field{--co-doc-field-bg:var(--co-color-primary-amarillo);background:var(--co-doc-field-bg);box-shadow:0 0 0 2px var(--co-doc-field-bg);border-radius:var(--co-border-radius-xxs);color:var(--co-color-base-negro);cursor:pointer}.co-doc-field--empty{--co-doc-field-bg:color-mix(in srgb, var(--co-color-primary-amarillo) 55%, var(--co-color-base-blanco))}.co-doc-field--required.co-doc-field--empty{box-shadow:0 0 0 2px var(--co-doc-field-bg), inset 0 -2px 0 var(--co-color-status-error)}.co-doc-field__input{width:14ch;border:0;outline:1px solid var(--co-semantic-border-focus);background:var(--co-color-base-blanco);font:inherit}.co-doc-signature{display:inline-flex;align-items:center;justify-content:center;vertical-align:top;box-sizing:border-box;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);font-size:var(--co-font-size-12);user-select:none}.co-doc-hb{background:color-mix(in srgb, var(--co-color-primary-azul) 12%, transparent);border-radius:var(--co-border-radius-xxs)}.co-doc-editor__zoom{display:inline-flex;flex-shrink:0;align-items:center;gap:var(--co-spacing-xxs);margin-inline-start:auto}.co-doc-editor__zoom-level{min-width:5ch;padding-inline:var(--co-spacing-xs);font-size:var(--co-font-size-13);font-variant-numeric:tabular-nums;text-align:end;color:var(--co-semantic-text-secondary)}.co-doc-editor__zoom-btn{padding:var(--co-spacing-xs) var(--co-spacing-sm2);border:0;border-radius:var(--co-border-radius-xs);background:transparent;color:var(--co-semantic-text-secondary);font:inherit;font-size:var(--co-font-size-13);white-space:nowrap;cursor:pointer}.co-doc-editor__zoom-btn:hover{background:var(--co-semantic-surface-hover)}.co-doc-editor__zoom-btn--active{background:var(--co-semantic-surface-hover);color:var(--co-semantic-text-default)}.co-doc-editor__zoom-btn: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__zoom-frame{margin-inline:auto}.co-doc-editor__stage{width:var(--co-doc-page-w);transform-origin:top left}.co-doc-editor__sheet{--co-semantic-surface-page:var(--co-color-base-blanco);--co-semantic-surface-hover:var(--co-color-opacity-negro-8);--co-semantic-text-default:var(--co-color-base-negro);--co-semantic-text-secondary:var(--co-color-gray-600);--co-semantic-text-muted:var(--co-color-gray-500);--co-semantic-border-default:var(--co-color-opacity-negro-16);--co-semantic-border-subtle:var(--co-color-opacity-negro-8);--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);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));box-sizing:border-box;padding-top:calc(var(--co-doc-margin-top) + var(--co-doc-header-h, 0px));padding-right:var(--co-doc-margin-right);padding-bottom:var(--co-doc-margin-bottom);padding-left:var(--co-doc-margin-left);overflow:clip;background:var(--co-color-base-blanco);color:var(--co-color-base-negro);color-scheme:light;box-shadow:var(--co-doc-sheet-shadow)}.co-doc-editor__paper{display:contents;color:var(--co-semantic-text-default)}.co-doc-editor .co-doc-editor__sheet .co-doc-editor__content .ProseMirror.tiptap{padding:0 !important;min-height:1em}.co-doc-editor__header-band{position:absolute;top:var(--co-doc-margin-top);left:var(--co-doc-margin-left);right:var(--co-doc-margin-right);height:var(--co-doc-header-h);box-sizing:border-box}.co-doc-editor__header-band[hidden]{display:none}.co-doc-editor__header-band:hover{outline:1px dashed var(--co-color-opacity-negro-25)}.co-doc-editor__header-static{display:flex;align-items:center;justify-content:space-between;height:100%;overflow:hidden;font-size:var(--co-font-size-12);line-height:1.5;user-select:none}.co-doc-editor__header-html{flex:1 1 auto;min-width:0;max-height:100%;overflow:hidden}.co-doc-editor__page-number{flex-shrink:0;margin-inline-start:var(--co-spacing-sm2);white-space:nowrap;color:var(--co-color-gray-600)}.co-doc-page-gap,.co-doc-page-gap__foot,.co-doc-page-gap__between,.co-doc-page-gap__head{margin:0 !important;padding:0 !important;border-width:0 !important;box-sizing:border-box !important}.co-doc-editor__sheet .co-doc-page-gap{position:relative;margin-left:calc(-1 * var(--co-doc-margin-left)) !important;margin-right:calc(-1 * var(--co-doc-margin-right)) !important;user-select:none}.co-doc-page-gap__between{background:var(--co-doc-canvas);border-image:linear-gradient(var(--co-doc-canvas), var(--co-doc-canvas)) fill 0 / 0 / 0 100vmax;box-shadow:inset 0 1px 0 var(--co-color-opacity-negro-8),     inset 0 4px 3px -3px var(--co-color-opacity-negro-16),     inset 0 -1px 0 var(--co-color-opacity-negro-8)}:is(ul,ol)>.co-doc-page-gap{list-style:none}.co-doc-editor__sheet .co-doc-page-gap__head{padding-top:var(--co-doc-margin-top) !important;padding-left:var(--co-doc-margin-left) !important;padding-right:var(--co-doc-margin-right) !important}.co-doc-page-gap-row>td{padding:0 !important;border:0 !important;background:transparent !important}.co-doc-editor__header-band--editing,.co-doc-editor__header-band--editing:hover{outline:1px solid var(--co-semantic-border-focus);outline-offset:2px}.co-doc-editor__header-editing{display:flex;align-items:center;gap:var(--co-spacing-sm2);height:100%}.co-doc-editor__header-editor{flex:1 1 auto;min-width:0;max-height:100%;overflow:hidden;font-size:var(--co-font-size-12);line-height:1.5}.co-doc-editor__header-editor .ProseMirror{outline:none}.co-doc-editor__header-tools{position:absolute;right:0;bottom:100%;display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xxs) var(--co-spacing-xs);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)}.co-doc-editor__image-bar{position:absolute;z-index:2;display:flex;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);user-select:none}.co-doc-editor__image-bar co-tooltip{display:inline-flex}.co-doc-editor__image-mode{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--co-border-radius-xxs);background:transparent;color:var(--co-semantic-text-default);cursor:pointer}.co-doc-editor__image-mode:hover,.co-doc-editor__image-mode--active{background:var(--co-semantic-surface-hover)}.co-doc-editor__image-mode--active{box-shadow:inset 0 0 0 1px var(--co-semantic-border-focus)}.co-doc-editor__image-mode: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__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)}`;
+
+let instanceSeq = 0;
+const CoDocumentEditor = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coChange = createEvent(this, "coChange", 3);
+        this.coFieldsChange = createEvent(this, "coFieldsChange", 3);
+        this.coHeaderChange = createEvent(this, "coHeaderChange", 3);
+        this.coPagesChange = createEvent(this, "coPagesChange", 3);
+        this.coAction = createEvent(this, "coAction", 3);
+        this.coReady = createEvent(this, "coReady", 3);
+        /** 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 = '';
+        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 = layoutBox(dom, sheet);
+            const pos = imageBarPosition({ top: box.top, height: box.height, left: layoutLeft(dom, sheet)}, { width: sheet.offsetWidth, height: sheet.offsetHeight });
+            const mode = 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(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 = 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 ? '' : writePrintHtml(ed.state.doc, 'print-header', this.resolvedFeatures);
+            const showPageNumber = this.draftShowPageNumber;
+            this.teardownHeaderEditor();
+            this.currentHeaderHtml = html;
+            this.currentShowPageNumber = showPageNumber;
+            this.headerDoc = html ? 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 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 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 [
+            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 = collectFields(this.editor.state.doc);
+        const header = this.headerEditor ? this.headerEditor.state.doc : this.headerDoc;
+        if (header)
+            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 = 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 === 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 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;
+    }
+    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 = setFieldValuesInHtml(this.currentHeaderHtml, values, 'print-header', this.resolvedFeatures);
+        if (next === this.currentHeaderHtml)
+            return;
+        this.currentHeaderHtml = next;
+        this.headerDoc = readPrintHtml(next, 'print-header', this.resolvedFeatures);
+        if (!this.headerEditing) {
+            this.refreshPagination(); // las bandas de salto clonan el encabezado
+            forceUpdate(this);
+        }
+    }
+    async insertField(name, opts) {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.chain().focus().insertField(name, opts).run();
+    }
+    async insertSignatureSlot() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.chain().focus().insertSignatureSlot().run();
+    }
+    async focusEditor() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.focus();
+    }
+    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 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 ? readPrintHtml(this.currentHeaderHtml, 'print-header', this.resolvedFeatures) : null;
+    }
+    mountHeaderEditor() {
+        var _a, _b;
+        const editor = createEditor({
+            preset: 'print-header',
+            element: this.headerMountEl,
+            content: this.currentHeaderHtml ? 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() }, 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': `${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: '3a2671fec095ced83d7c345f817770833a3ea2c3', 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: '9f52b22003b54313cf5231804a476690778b22b6' }, h("div", { key: '88184e065b0f6184c3d06097c4243d1ebe7bc6c5', class: { 'co-doc-editor': true, 'co-doc-editor--readonly': this.readonly, 'co-doc-editor--loading': !this.ready }, part: "wrapper" }, h("div", { key: 'a1cf9f2eb7c23f8a4ca9b2f5098222f54d0168a8', class: "co-doc-editor__bar", part: "bar" }, !this.readonly && (h("co-rich-text-toolbar", { key: '889ae86009703a14bec362608e2e81770f963ff0', 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: 'ed349a7dd902fa1569e9efb4e77611835bfa4236', class: "co-doc-editor__zoom", role: "group", "aria-label": s.zoom }, this.zoomMode === 'custom' && h("span", { key: 'a80bfe10a8fea8822084935ed8dbf6b7c0835b2c', class: "co-doc-editor__zoom-level" }, `${Math.round(this.scale * 100)} %`), zoomButton('fit', s.zoomFit), zoomButton('actual', s.zoomActual))), h("div", { key: 'dd283d50eb5712d34e5568727be504aa972a3b2a', class: "co-doc-editor__body" }, h("div", { key: '972162fb86e9b560bcf9d86e50a548cb8fea1d7b', class: "co-doc-editor__canvas", part: "canvas", ref: (el) => (this.canvasEl = el) }, h("div", { key: '409e773a4ba786ea867816a8715585dce000d618', class: "co-doc-editor__zoom-frame", style: frameStyle }, h("div", { key: '0ad67ae01d7aebb0f7f7fd1cacbddc2db3c7c7cc', class: "co-doc-editor__stage", style: { transform: `scale(${this.scale})` }, ref: (el) => (this.stageEl = el) }, h("div", { key: 'e8ca10170b25ff5bd4ebf9382205c1b84bae844a', 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: '9a3f5af0b445a56513ac894ac7a6ff67314e611d', name: "aside" })))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }],
+        "readonly": [{
+                "onReadonlyChange": 0
+            }],
+        "pageSize": [{
+                "onPageGeometryChange": 0
+            }],
+        "margins": [{
+                "onPageGeometryChange": 0
+            }],
+        "headerHeight": [{
+                "onPageGeometryChange": 0
+            }],
+        "headerHtml": [{
+                "onHeaderPropsChange": 0
+            }],
+        "showPageNumber": [{
+                "onHeaderPropsChange": 0
+            }],
+        "pageStyles": [{
+                "onPageStylesChange": 0
+            }],
+        "label": [{
+                "onLabelChange": 0
+            }],
+        "locale": [{
+                "onLabelChange": 0
+            }, {
+                "onLocaleChange": 0
+            }]
+    }; }
+};
+CoDocumentEditor.style = coDocumentEditorCss();
+
+export { CoDocumentEditor as co_document_editor };