@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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

@@ -0,0 +1,30 @@
+/** Ventana de `coChange`: avisa como mucho cada 250 ms (nunca por tecla). */
+export const DOC_CHANGE_THROTTLE_MS = 250;
+export 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;
+        },
+    };
+}

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

@@ -0,0 +1,438 @@
+/* shadow:false — todo en light DOM con BEM + tokens --co-* (patrón co-rich-text-editor). */
+co-document-editor {
+  display: block;
+  height: 100%;
+  min-height: 0;
+}
+
+.co-doc-editor {
+  /*
+   * Se resuelve ACÁ (fuera de la isla del papel) para pintar el hueco entre hojas. Gris, como el
+   * escritorio de Word: `surface-secondary` es BLANCO en tema claro y la hoja se fundía con el
+   * lienzo (sin bordes de página ni márgenes visibles).
+   */
+  --co-doc-canvas: var(--co-semantic-surface-muted);
+  /* Sombra de la hoja: negro también en oscuro (sobre el lienzo gris la sombra siempre oscurece). */
+  --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;
+}
+
+/*
+ * Panel lateral del host (slot `aside`): ancho FIJO que da el componente, no el hijo. Sin esto el
+ * hijo es un flex item sin base y un `width:100%` suyo se come el body entero — el lienzo queda en
+ * ~200px y «Ajustar al ancho» baja la hoja al 25 %. El host lo ajusta con --co-doc-aside-width.
+ */
+.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;
+}
+
+/* Campos y firmas en el editor (nota T5→T14): MISMA caja que en el PDF (sin relleno ni
+   borde; resaltado por fondo/sombra). Bloque tomado de la Task 17 del plan: T17 no lo repite. */
+/*
+ * Campo del contrato: amarillo como en V1 (la variable se ve SIEMPRE, vacía o llena). Solo en el
+ * editor: el PDF lo imprime sin resaltado (decisión de spec). El «padding» de V1 (2px 4px) va
+ * como box-shadow: rellenar de verdad correría el texto y la paginación dejaría de coincidir
+ * con el PDF. El borde redondeado de V1 se mantiene.
+ */
+.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;
+}
+
+/* Vacío ([[nombre]]): mismo amarillo, apenas más claro, para distinguirlo del ya completado. */
+.co-doc-field--empty {
+  --co-doc-field-bg: color-mix(in srgb, var(--co-color-primary-amarillo) 55%, var(--co-color-base-blanco));
+}
+
+/* Obligatorio sin valor: subrayado rojo encima del amarillo. */
+.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;
+}
+
+/* Porcentaje del zoom libre (pinza / ctrl+rueda). */
+.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);
+}
+
+/* Sin transición: el cambio de fondo es instantáneo (Motion regla 2, H15). */
+.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);
+}
+
+/* El marco ocupa el ancho ESCALADO: la hoja escalada no genera scroll horizontal. */
+.co-doc-editor__zoom-frame {
+  margin-inline: auto;
+}
+
+.co-doc-editor__stage {
+  width: var(--co-doc-page-w);
+  transform-origin: top left;
+}
+
+/*
+ * El papel: una isla clara también en tema oscuro (el PDF es blanco). Los tokens
+ * semánticos se redefinen DENTRO de la hoja (y `.co-doc-editor__paper` lleva
+ * data-theme="light" para el set completo cuando el host carga tokens-light.css);
+ * el hueco entre hojas usa --co-doc-canvas, resuelto afuera.
+ * overflow: clip — lo posicionado en absoluto que deja pasar el sanitizer print
+ * (sin tope) no puede salirse del papel (Minor de T10).
+ */
+.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);
+}
+
+/* No genera caja: no cambia el containing block ni las medidas de la paginación. */
+.co-doc-editor__paper {
+  display: contents;
+  color: var(--co-semantic-text-default);
+}
+
+/*
+ * El padding del CSS de impresión lo ponen los márgenes de la hoja. El host lo manda con
+ * !important (`.tiptap.ProseMirror { padding: 10mm !important }`, acotado = (0,2,0)): acá
+ * !important con (0,5,0) gana. Sin esto el primer corte se corre ~38 px respecto del PDF.
+ */
+.co-doc-editor .co-doc-editor__sheet .co-doc-editor__content .ProseMirror.tiptap {
+  padding: 0 !important;
+  min-height: 1em;
+}
+
+/* Banda del encabezado de la primera hoja, dentro del margen superior. */
+.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);
+}
+
+/* Misma caja que el headerTemplate del PDF: 12px/1.5, flex space-between. */
+.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);
+}
+
+/*
+ * Bandas de salto (widgets de la extensión pagination): cruzan la hoja de lado a lado.
+ * Su geometría la mide la paginación con alturas FIJAS (inline): ninguna regla del host
+ * (`* { margin: 0; padding: 0 }`, `.tiptap table td { border; padding }`, `.tiptap div`…)
+ * puede tocar márgenes, rellenos ni bordes → !important en cada parte.
+ * (No `border` abreviado: reiniciaría el border-image del hueco.)
+ */
+.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;
+}
+
+/*
+ * Dentro de una lista (la banda es un <div> hijo de ul/ol, Minor de T4) o de una
+ * celda, el ancestro puede tener sangría y la banda no llega a los bordes: el
+ * hueco se extiende a los lados con border-image (pinta, no ocupa layout) y el
+ * overflow: clip de la hoja lo recorta al ancho del papel.
+ */
+.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;
+  /* Borde de las dos hojas que separa (la sombra de la hoja no cruza el hueco: es una sola caja). */
+  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;
+}
+
+/* padding-top: el mismo margen superior que la extensión pone inline (sobrevive a un !important del host). */
+.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;
+}
+
+/* Fila de banda en una tabla: `.tiptap table td` del host ((0,1,2), borde + 6px 8px) no la toca. */
+.co-doc-page-gap-row > td {
+  padding: 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+}
+
+/* ── Banda del encabezado en edición (Task 16) ── */
+.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%;
+}
+
+/* Misma caja que el headerTemplate del PDF: 12px/1.5 por defecto. */
+.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;
+}
+
+/* Las herramientas cuelgan por encima de la banda: no cambian su alto (paridad con el PDF). */
+.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);
+}
+
+/*
+ * Barra de diseño de imagen (Task 17): cuelga bajo la imagen seleccionada, dentro de la
+ * isla clara. Top/left los decide imageBarPosition (image-bar.ts) para que el
+ * overflow: clip del papel nunca la recorte; sus medidas están fijadas en
+ * IMAGE_BAR_SIZE (prueba en image-bar.test.ts). Sin margin: la separación va en la cuenta.
+ */
+.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;
+}
+
+/* Sin transición: el cambio de fondo es instantáneo (Motion regla 2, H15). */
+.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);
+}
+
+/* El modo pulsado se distingue del hover (no solo un 8 % de fondo): trazo de foco. */
+.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);
+}