@caribeng/ui 22.1.1 → 22.4.0

package/types/caribeng-ui-editor.d.ts

@@ -1,26 +1,333 @@
 import * as _caribeng_ui from '@caribeng/ui';
+import { CbTranslation } from '@caribeng/ui';
 import * as _angular_core from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
+interface CbCharGroup {
+    label: (t: CbTranslation) => string;
+    chars: readonly string[];
+}
+
+/** Color de una paleta del editor: valor CSS y nombre traducido. */
+interface CbEditorColor {
+    value: string;
+    label: (t: CbTranslation) => string;
+}
+
+/** Alineación de una imagen: `left`/`right` (flotante, el texto la rodea) o `center` (bloque centrado). */
+type CbImageAlign = 'left' | 'center' | 'right';
+/** Bordes de una tabla: todos, solo líneas horizontales o ninguno. */
+type CbTableBorders = 'all' | 'horizontal' | 'none';
+interface CbSanitizeOptions {
+    /** Permite imágenes (por defecto true). */
+    images?: boolean;
+    /**
+     * Tipografías permitidas (pilas CSS, p. ej. `"'Open Sans', sans-serif"`). Una tipografía
+     * se reconoce por su primer nombre; las demás se quitan. Por defecto, las del editor.
+     */
+    fonts?: readonly string[];
+}
+/** Devuelve el HTML saneado y normalizado; `''` si no hay texto ni imágenes. */
+declare function cbSanitizeHtml(html: string | null | undefined, options?: CbSanitizeOptions): string;
+/** Texto plano del HTML (para contar caracteres o guardar un resumen). */
+declare function cbHtmlToText(html: string | null | undefined): string;
+
+/** Recuadro de recorte en fracciones de la imagen (0–1). */
+interface CbCropRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+
+/** Una tipografía del selector: nombre visible y pila CSS que se guarda en el HTML (`''` = predeterminada). */
+interface CbEditorFont {
+    name: string;
+    value: string;
+}
+/** Grupo del selector de tipografía (`<optgroup>`). */
+interface CbEditorFontGroup {
+    label: string | ((t: CbTranslation) => string);
+    fonts: readonly CbEditorFont[];
+}
 /**
- * Editor de CaribeNG: editor de texto enriquecido sin dependencias de terceros,
- * con barra de herramientas accesible (encabezados, formato, listas, cita,
- * alineación, enlaces, deshacer/rehacer) e integración CVA.
+ * Tipografías por defecto, todas libres (Google Fonts). Las "clásicas de Office" son
+ * métricamente compatibles con Arial, Times New Roman y Courier New, y Carlito con Calibri,
+ * así un documento conserva su maquetación.
+ */
+declare const CB_EDITOR_FONTS: readonly CbEditorFontGroup[];
+/** Hoja de Google Fonts con las tipografías por defecto (regular, negrita y sus cursivas). */
+declare const CB_EDITOR_FONTS_HREF: string;
+
+/** Herramientas de la barra; `'|'` es un separador y `'-'` empieza una fila nueva. */
+type CbEditorTool = 'heading' | 'fontFamily' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'strike' | 'code' | 'subscript' | 'superscript' | 'textColor' | 'highlight' | 'bulletList' | 'orderedList' | 'taskList' | 'indent' | 'outdent' | 'quote' | 'codeBlock' | 'alignment' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'link' | 'image' | 'table' | 'horizontalRule' | 'clear' | 'undo' | 'redo' | 'source' | 'fullscreen' | 'specialChars' | 'findReplace' | '|' | '-';
+/**
+ * Barra por defecto, en dos filas: arriba el texto (bloque, fuente, tamaño, estilos y color);
+ * abajo la estructura (listas, alineación, inserciones, buscar y vistas).
+ */
+declare const CB_EDITOR_DEFAULT_TOOLBAR: readonly CbEditorTool[];
+/** Sube una imagen y devuelve su URL pública (p. ej. a tu servidor o a un bucket). */
+type CbEditorImageUpload = (file: File) => Promise<string>;
+/** Motivo por el que no se insertó una imagen. */
+interface CbEditorImageError {
+    file: File;
+    reason: 'type' | 'size' | 'upload';
+    error?: unknown;
+}
+/** Bloques que se insertan escribiendo `/` (filtrables por nombre o por palabras clave). */
+interface SlashItem {
+    id: string;
+    icon: string;
+    label: (t: CbTranslation) => string;
+    keywords: string;
+}
+interface EditorState {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strike: boolean;
+    code: boolean;
+    bulletList: boolean;
+    orderedList: boolean;
+    quote: boolean;
+    codeBlock: boolean;
+    subscript: boolean;
+    superscript: boolean;
+    taskList: boolean;
+    alignLeft: boolean;
+    alignCenter: boolean;
+    alignRight: boolean;
+    alignJustify: boolean;
+    link: boolean;
+    block: string;
+    fontSize: string;
+    fontFamily: string;
+}
+/**
+ * Editor de CaribeNG: editor de texto enriquecido sin dependencias de terceros.
+ *
+ * - **Valor**: HTML saneado y normalizado (lista blanca de etiquetas, sin scripts,
+ *   eventos ni URLs peligrosas; igual en todos los navegadores; `''` si está vacío).
+ *   El mismo saneado se aplica al cargar un valor y al pegar.
+ * - Barra configurable (`toolbar`) con estado activo, panel de enlaces con
+ *   validación, imágenes con `imageUpload` (o data URL con límite de tamaño),
+ *   pegado limpio desde Word y Google Docs, atajos de escritura (`# `, `* `,
+ *   `1. `, `> `), contador con `maxLength`, vista de HTML y modo `readonly`.
+ * - Integración con Angular Forms (`ControlValueAccessor`).
+ *
+ * @example
+ * ```html
+ * <cb-editor formControlName="descripcion" [maxLength]="2000" [imageUpload]="subirImagen" />
+ * <cb-editor [value]="html" readonly />
+ * ```
  */
 declare class CbEditor implements ControlValueAccessor {
-    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<CbTranslation>;
+    private readonly document;
+    private readonly injector;
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    /** Nombre accesible del área de texto. Por defecto, "Editor de texto" del idioma activo. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Alto mínimo del área de texto. */
     readonly height: _angular_core.InputSignal<string>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Alto máximo: a partir de él, el área hace scroll (la barra queda fija). Sin él, crece con el contenido. */
+    readonly maxHeight: _angular_core.InputSignal<string | undefined>;
+    /** Muestra el número de palabras y caracteres al pie. */
+    readonly wordCount: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Muestra el contenido (saneado) sin barra ni edición. */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Marca visual y ARIA de estado inválido (también se activa con Angular Forms). */
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Herramientas de la barra y su orden (`'|'` separa grupos). */
+    readonly toolbar: _angular_core.InputSignal<readonly CbEditorTool[]>;
+    /** Máximo de caracteres de texto (sin contar las etiquetas). Muestra un contador. */
+    readonly maxLength: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /** Permite imágenes (botón, pegar y soltar). */
+    readonly images: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Sube la imagen y devuelve su URL; así el HTML guarda una URL y no la imagen.
+     * Sin él, la imagen se inserta como data URL si no supera `maxImageSize`.
+     */
+    readonly imageUpload: _angular_core.InputSignal<CbEditorImageUpload | undefined>;
+    /** Tamaño máximo (bytes) de una imagen insertada como data URL. Por defecto 1 MB. */
+    readonly maxImageSize: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Pega siempre como texto plano (sin formato). */
+    readonly pastePlainText: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Tipografías del selector, por grupos. La primera opción con valor `''` es la predeterminada. */
+    readonly fonts: _angular_core.InputSignal<readonly CbEditorFontGroup[]>;
+    /**
+     * Hoja de estilos que carga las tipografías (por defecto, Google Fonts). Usa `''` si
+     * las sirves tú (o si tu CSP no permite fuentes externas).
+     */
+    readonly fontsHref: _angular_core.InputSignal<string>;
+    /** Menú flotante con formato rápido al seleccionar texto. */
+    readonly bubbleMenu: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Escribir `/` al inicio de una línea (o tras un espacio) abre un menú para insertar bloques. */
+    readonly slashCommands: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Convierte en enlace las URL (`https://…`, `www.…`) al escribir un espacio después. */
+    readonly autolink: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Corrección tipográfica al escribir: `(c)` → ©, `...` → …, `->` → →, ` -- ` → –, `1/2` → ½. */
+    readonly typography: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** HTML del contenido (saneado y normalizado; `''` si está vacío). */
+    readonly value: _angular_core.ModelSignal<string>;
+    /** Una imagen no se pudo insertar (tipo, tamaño o error de subida). */
+    readonly imageError: _angular_core.OutputEmitterRef<CbEditorImageError>;
     /** Estado de validación: inputs manuales + estado de Angular Forms. */
     protected readonly fieldState: _caribeng_ui.CbFieldState;
-    readonly value: _angular_core.ModelSignal<string>;
+    protected readonly surfaceId: string;
+    protected readonly countId: string;
+    protected readonly linkErrorId: string;
     private readonly cvaDisabled;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
+    protected readonly state: _angular_core.WritableSignal<EditorState>;
+    protected readonly sourceMode: _angular_core.WritableSignal<boolean>;
+    protected readonly sourceText: _angular_core.WritableSignal<string>;
+    protected readonly message: _angular_core.WritableSignal<string>;
+    protected readonly length: _angular_core.WritableSignal<number>;
+    protected readonly linkPanel: _angular_core.WritableSignal<{
+        url: string;
+        newTab: boolean;
+        editing: boolean;
+    } | null>;
+    protected readonly linkUrl: _angular_core.WritableSignal<string>;
+    protected readonly linkNewTab: _angular_core.WritableSignal<boolean>;
+    protected readonly linkError: _angular_core.WritableSignal<boolean>;
+    protected readonly isEmpty: _angular_core.Signal<boolean>;
+    protected readonly invalidState: _angular_core.Signal<boolean>;
+    protected readonly countText: _angular_core.Signal<string>;
+    protected readonly words: _angular_core.WritableSignal<number>;
+    protected readonly wordsText: _angular_core.Signal<string>;
+    /** Pie: palabras y caracteres (con `maxLength`, "N de M caracteres"). */
+    protected readonly countLine: _angular_core.Signal<string>;
+    protected readonly fullscreen: _angular_core.WritableSignal<boolean>;
+    protected readonly openMenu: _angular_core.WritableSignal<CbEditorTool | null>;
+    protected readonly lastTextColor: _angular_core.WritableSignal<string>;
+    protected readonly lastHighlight: _angular_core.WritableSignal<string>;
+    protected readonly textColors: readonly CbEditorColor[];
+    protected readonly highlightColors: readonly CbEditorColor[];
+    protected readonly fontSizes: readonly [10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48];
+    protected readonly specialChars: readonly CbCharGroup[];
+    protected readonly bubbleTools: readonly CbEditorTool[];
+    /** Pilas CSS permitidas al sanear (las del selector). */
+    private readonly fontStackList;
+    protected readonly alignments: readonly ("alignLeft" | "alignCenter" | "alignRight" | "alignJustify")[];
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    protected readonly toolbarItems: _angular_core.Signal<CbEditorTool[]>;
+    /** Filas de la barra (`'-'` empieza una nueva). */
+    protected readonly toolbarRows: _angular_core.Signal<CbEditorTool[][]>;
+    /** Menú flotante de formato: posición respecto al área (encima o debajo de la selección). */
+    protected readonly bubble: _angular_core.WritableSignal<{
+        left: number;
+        top: number;
+        below: boolean;
+    } | null>;
+    /** Se está seleccionando con el ratón (el menú flotante espera a soltar). */
+    protected pointerSelecting: boolean;
+    /** Menú `/`: texto escrito tras la barra, opción activa y posición. */
+    protected readonly slash: _angular_core.WritableSignal<{
+        query: string;
+        active: number;
+        left: number;
+        top: number;
+    } | null>;
+    private slashAnchor;
+    protected readonly slashListId: string;
+    protected readonly slashItems: _angular_core.Signal<SlashItem[]>;
+    /** Buscar y reemplazar. */
+    protected readonly findOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly findQuery: _angular_core.WritableSignal<string>;
+    protected readonly replaceText: _angular_core.WritableSignal<string>;
+    protected readonly findCase: _angular_core.WritableSignal<boolean>;
+    protected readonly findWhole: _angular_core.WritableSignal<boolean>;
+    protected readonly findTotal: _angular_core.WritableSignal<number>;
+    protected readonly findIndex: _angular_core.WritableSignal<number>;
+    /** Aviso tras "Reemplazar todo" (sustituye al contador hasta la siguiente búsqueda). */
+    private readonly findNote;
+    private findRanges;
+    private readonly findInputRef;
+    protected readonly findStatus: _angular_core.Signal<string>;
     private readonly surfaceRef;
     private readonly imageInputRef;
+    private readonly toolbarRef;
+    private readonly linkInputRef;
+    private readonly bodyRef;
+    private readonly tableRowsRef;
+    private readonly tableColsRef;
+    private readonly tableHeaderRef;
+    private readonly altInputRef;
     private savedRange;
+    private editingLink;
+    /** Celda de tabla donde está el cursor (muestra la barra de tabla). */
+    protected readonly tableCell: _angular_core.WritableSignal<HTMLTableCellElement | null>;
+    protected readonly tableHasHeader: _angular_core.Signal<boolean>;
+    protected readonly tablePanel: _angular_core.WritableSignal<boolean>;
+    protected readonly tableHeader: _angular_core.WritableSignal<boolean>;
+    protected readonly pickerRows: number[];
+    protected readonly pickerCols: number[];
+    protected readonly pickerHover: _angular_core.WritableSignal<{
+        r: number;
+        c: number;
+    } | null>;
+    protected readonly pickerFocus: _angular_core.WritableSignal<{
+        r: number;
+        c: number;
+    }>;
+    /** Se incrementa al cambiar los bordes (viven en el DOM de las celdas). */
+    private readonly tableTick;
+    protected readonly tableBorders: _angular_core.Signal<{
+        borders: CbTableBorders;
+        color: string | null;
+    }>;
+    protected readonly borderColors: {
+        value: string;
+        label: (t: CbTranslation) => string;
+    }[];
+    protected readonly crop: _angular_core.WritableSignal<{
+        src: string;
+        rect: CbCropRect;
+        ratio: number | null;
+        natural: {
+            w: number;
+            h: number;
+        };
+        busy: boolean;
+        error: boolean;
+    } | null>;
+    protected readonly cropRatios: {
+        label: string;
+        value: number | null;
+    }[];
+    protected readonly cropCorners: readonly ["nw", "ne", "sw", "se"];
+    protected readonly cropHelpId: string;
+    private readonly cropStageRef;
+    protected readonly cropValueText: _angular_core.Signal<string>;
+    /** Imagen seleccionada con un clic (muestra su barra y el tirador de tamaño). */
+    protected readonly selectedImage: _angular_core.WritableSignal<HTMLImageElement | null>;
+    /** Se incrementa al cambiar la imagen seleccionada (su estilo vive en el DOM, no en una señal). */
+    private readonly imageTick;
+    protected readonly imageState: _angular_core.Signal<{
+        width: string | null;
+        align: CbImageAlign | null;
+    }>;
+    protected readonly imageFrame: _angular_core.WritableSignal<{
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    } | null>;
+    protected readonly altPanel: _angular_core.WritableSignal<boolean>;
+    private resizing;
+    protected readonly imageWidths: string[];
+    protected readonly imageAligns: {
+        align: CbImageAlign | null;
+        icon: string;
+        label: (t: CbTranslation) => string;
+    }[];
+    /** Último HTML emitido o cargado: evita reescribir el DOM (y mover el cursor) con su propio valor. */
+    private lastHtml;
     private onChange;
     private onTouched;
     constructor();
@@ -28,22 +335,188 @@ declare class CbEditor implements ControlValueAccessor {
     registerOnChange(fn: (val: string) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
+    private tools;
+    /** Deja solo `active` en el orden de tabulación de la barra. */
+    protected setActiveTool(active: HTMLElement | undefined): void;
+    /** Flechas, Inicio y Fin mueven el foco entre las herramientas (de forma circular). */
+    protected onToolbarKeydown(event: KeyboardEvent): void;
+    protected toolIcon(tool: CbEditorTool): string;
+    protected toolLabel(tool: CbEditorTool): string;
+    protected toolKeys(tool: CbEditorTool): string;
+    /** Tooltip: nombre y atajo, p. ej. "Negrita (Ctrl+B)". */
+    protected toolTitle(tool: CbEditorTool): string;
+    protected ariaKeys(tool: CbEditorTool): string | null;
+    protected isMenu(tool: CbEditorTool): boolean;
+    protected groupLabel(group: CbEditorFontGroup): string;
+    /** Icono del botón de un menú: el de la alineación actual, o el de la herramienta. */
+    protected menuIcon(tool: CbEditorTool): string;
+    protected toggleMenu(tool: CbEditorTool): void;
+    /** Flecha abajo, Enter o Espacio en el botón abren el menú y enfocan su primera opción. */
+    protected onMenuTriggerKeydown(event: KeyboardEvent, tool: CbEditorTool): void;
+    /** Flechas (en la paleta, en cuadrícula de 5), Inicio, Fin, Escape y Tab dentro de un menú. */
+    protected onMenuKeydown(event: KeyboardEvent): void;
+    /** Aplica la opción elegida de un menú y lo cierra. */
+    protected applyMenu(tool: CbEditorTool, value: string | null): void;
+    protected pressable(tool: CbEditorTool): boolean;
+    protected isActive(tool: CbEditorTool): boolean;
     /** Evita que el botón robe la selección del área editable. */
     protected hold(event: MouseEvent): void;
-    exec(command: string, value?: string): void;
+    protected run(tool: CbEditorTool): void;
+    exec(command: string, value?: string, css?: boolean): void;
+    /** Ejecuta el comando sin emitir el valor (para retocar el resultado antes). */
+    private command;
     /** Aplica un bloque (encabezado, párrafo o cita). */
     protected format(tag: string): void;
-    /** Inserta un enlace sobre la selección actual. */
-    protected insertLink(): void;
+    /** Quita el formato en línea y vuelve el bloque a párrafo. */
+    protected clearFormat(): void;
+    private selectionRange;
+    /** Color del texto seleccionado; `null` = automático (quita el color). */
+    setTextColor(color: string | null): void;
+    /** Resaltado (color de fondo) del texto seleccionado; `null` lo quita. */
+    setHighlight(color: string | null): void;
+    /** Tamaño de letra de la selección en px (`''` = normal). */
+    setFontSize(value: string): void;
+    /** Tipografía de la selección (pila CSS; `''` = la predeterminada). */
+    setFontFamily(value: string): void;
+    /** Sangría: anida en listas; en párrafos y títulos, margen en pasos de 2rem. */
+    changeIndent(delta: 1 | -1): void;
+    /** Lista de tareas: crea una, convierte la lista actual o la quita. */
+    toggleTaskList(): void;
+    /** Pantalla completa (Escape sale). */
+    toggleFullscreen(): void;
+    /** Envuelve la selección en `<code>` o la saca de él. */
+    private toggleCode;
+    /** Abre el panel de enlace (Ctrl + K); si el cursor está en un enlace, lo edita. */
+    protected openLink(): void;
+    protected closeLink(): void;
+    protected applyLink(event: Event): void;
+    protected removeLink(): void;
     /** Abre el selector de archivos guardando la posición del cursor. */
     protected pickImage(): void;
-    /** Inserta la imagen elegida (como data URL) donde estaba el cursor. */
     protected onImageFile(event: Event): void;
-    protected onSurfaceInput(): void;
+    /** Sube (o lee) la imagen y la inserta donde estaba el cursor. */
+    insertImage(file: File): Promise<void>;
+    protected onPaste(event: ClipboardEvent): void;
+    protected onDrop(event: DragEvent): void;
+    /** Inserta lo pegado: HTML saneado o texto plano, recortado si supera `maxLength`. */
+    private insertClipboard;
+    /** Impide escribir más allá de `maxLength`. */
+    protected onBeforeInput(event: InputEvent): void;
+    protected onSurfaceInput(event?: Event): void;
+    /** Texto (nodo y posición) donde está el cursor, si no es código ni una selección. */
+    private caretText;
+    private setCaret;
+    /** Al escribir un espacio tras una URL, la convierte en enlace. */
+    private autolinkAtCaret;
+    /** Corrección tipográfica del texto recién escrito (`(c)` → ©, `...` → …). */
+    private fixTypography;
+    /** Tras escribir `/` al inicio de una línea o después de un espacio, abre el menú de bloques. */
+    private openSlash;
+    /** Filtra con lo escrito tras la `/`; se cierra si el cursor sale de ahí o se escribe un espacio. */
+    private updateSlash;
+    protected closeSlash(): void;
+    protected slashOptionId(index: number): string;
+    /** Quita la `/` y lo escrito tras ella, y aplica el bloque elegido. */
+    protected applySlash(item: SlashItem): void;
+    /** Flechas, Enter / Tab y Escape mientras el menú `/` está abierto. */
+    private onSlashKeydown;
+    /** Posición del cursor (o de la selección) respecto al área, para colocar menús. */
+    private caretPosition;
+    /** Muestra el menú de formato rápido sobre una selección de texto (o lo oculta). */
+    private updateBubble;
+    /** Una herramienta del menú flotante: la aplica y recoloca el menú. */
+    protected runBubble(tool: CbEditorTool): void;
+    /** Abre el panel (Ctrl + F); el texto seleccionado se usa como búsqueda. */
+    openFind(): void;
+    /** Cierra el panel y deja seleccionada la coincidencia actual en el texto. */
+    closeFind(): void;
+    protected setFindQuery(query: string): void;
+    protected setFindOption(option: 'case' | 'whole'): void;
+    /** Recalcula las coincidencias y marca la actual (`index`, limitado al total). */
+    private refreshFind;
+    /** Siguiente (1) o anterior (-1) coincidencia, de forma circular. */
+    findStep(step: 1 | -1): void;
+    /** Resalta todas las coincidencias y la actual (sin tocar el contenido) y la hace visible. */
+    private paintFind;
+    private clearFindHighlight;
+    /** Reemplaza la coincidencia actual y pasa a la siguiente. */
+    replaceCurrent(): void;
+    /** Reemplaza todas las coincidencias (cada una se puede deshacer con Ctrl + Z). */
+    replaceAllMatches(): void;
+    /** Sustituye el texto de los rangos (del último al primero, para no desplazar los demás). */
+    private replaceRanges;
+    /** Enter: siguiente; Mayús + Enter: anterior (en el campo de reemplazo, reemplaza); Escape: cerrar. */
+    protected onFindKeydown(event: KeyboardEvent): void;
+    /** Atajos de teclado: Ctrl + K enlace; Ctrl + Mayús + 7 / 8 listas; Ctrl + Alt + 0–3 bloques. */
+    protected onSurfaceKeydown(event: KeyboardEvent): void;
+    /**
+     * Formato al escribir (como Markdown): al pulsar espacio tras `#`, `##`, `###`,
+     * `*`, `-`, `1.` o `>` al inicio de un párrafo, se convierte el bloque.
+     */
+    private autoformat;
+    protected openTablePanel(): void;
+    protected closeTablePanel(): void;
+    protected pickerOn(r: number, c: number): boolean;
+    protected tableSizeLabel(r: number, c: number): string;
+    /** Flechas en la cuadrícula de tamaño; Enter inserta. */
+    protected onPickerKeydown(event: KeyboardEvent, r: number, c: number): void;
+    /** Inserta una tabla de filas × columnas con bordes grises (se ven igual fuera del editor). */
+    insertTable(rows: number, cols: number): void;
+    /** Bordes de toda la tabla: todos, solo horizontales o ninguno; y su color. */
+    setTableBorders(borders: CbTableBorders | null, color: string | null): void;
+    /** Acciones de la barra de tabla sobre la celda actual. */
+    protected tableAction(id: string): void;
+    private deleteTable;
+    /** Tab / Mayús + Tab: celda siguiente o anterior; en la última, añade una fila. */
+    private moveCell;
+    /** Pone el cursor al inicio de un elemento. */
+    private placeCaret;
+    protected onSurfaceClick(event: MouseEvent): void;
+    private deselectImage;
+    /** Coloca el marco y el tirador sobre la imagen seleccionada. */
+    protected refreshFrame(): void;
+    protected imageWidthLabel(width: string): string;
+    private applyImageStyle;
+    /** Alineación: en línea (`null`), izquierda o derecha (el texto la rodea) o centrada. */
+    setImageAlign(align: CbImageAlign | null): void;
+    /** Ancho en % o px; `null` vuelve al tamaño original. */
+    setImageWidth(width: string | null): void;
+    protected deleteImage(): void;
+    protected openAlt(): void;
+    protected closeAlt(): void;
+    protected applyAlt(event: Event): void;
+    protected openCrop(): void;
+    protected closeCrop(): void;
+    /** Proporción fija (ancho / alto) o libre (`null`). */
+    setCropRatio(ratio: number | null): void;
+    /** Mueve (`corner` null) o redimensiona el recuadro arrastrando. */
+    protected startCropDrag(event: PointerEvent, corner: 'nw' | 'ne' | 'sw' | 'se' | null): void;
+    /** Flechas: mover un 2 %; Mayús + flechas: cambiar el tamaño desde la esquina inferior derecha; Enter: aplicar. */
+    protected onCropKeydown(event: KeyboardEvent): void;
+    /** Recorta los píxeles y sustituye la imagen (subiéndola con `imageUpload` si lo hay). */
+    applyCrop(): Promise<void>;
+    /** Arrastrar el tirador cambia el ancho (en % del área, para que se adapte a la pantalla). */
+    protected startResize(event: PointerEvent): void;
+    /** Flechas, Inicio y Fin en las barras de tabla e imagen (patrón *toolbar*). */
+    protected onContextKeydown(event: KeyboardEvent): void;
+    private toggleSource;
+    /** Saneado con las opciones del editor (imágenes y tipografías permitidas). */
+    private sanitize;
+    /** Emite el HTML saneado sin tocar el DOM (no se pierde la posición del cursor). */
+    private emit;
     protected onBlur(): void;
+    private textLength;
+    private remaining;
+    private saveSelection;
+    private restoreSelection;
+    private closest;
+    private closestBlock;
+    /** Lee el formato de la selección para marcar las herramientas activas. */
+    private updateState;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbEditor, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbEditor, "cb-editor", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbEditor, "cb-editor", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "wordCount": { "alias": "wordCount"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "images": { "alias": "images"; "required": false; "isSignal": true; }; "imageUpload": { "alias": "imageUpload"; "required": false; "isSignal": true; }; "maxImageSize": { "alias": "maxImageSize"; "required": false; "isSignal": true; }; "pastePlainText": { "alias": "pastePlainText"; "required": false; "isSignal": true; }; "fonts": { "alias": "fonts"; "required": false; "isSignal": true; }; "fontsHref": { "alias": "fontsHref"; "required": false; "isSignal": true; }; "bubbleMenu": { "alias": "bubbleMenu"; "required": false; "isSignal": true; }; "slashCommands": { "alias": "slashCommands"; "required": false; "isSignal": true; }; "autolink": { "alias": "autolink"; "required": false; "isSignal": true; }; "typography": { "alias": "typography"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "imageError": "imageError"; }, never, never, true, never>;
 }
 
-export { CbEditor };
+export { CB_EDITOR_DEFAULT_TOOLBAR, CB_EDITOR_FONTS, CB_EDITOR_FONTS_HREF, CbEditor, cbHtmlToText, cbSanitizeHtml };
+export type { CbEditorFont, CbEditorFontGroup, CbEditorImageError, CbEditorImageUpload, CbEditorTool, CbSanitizeOptions };
 //# sourceMappingURL=caribeng-ui-editor.d.ts.map

package/types/caribeng-ui-empty.d.ts

@@ -0,0 +1,34 @@
+import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+
+/**
+ * Empty de CaribeNG: estado vacío con icono o imagen, mensaje y acciones
+ * opcionales (proyectadas). Úsalo cuando una lista, búsqueda o tabla no tiene
+ * datos.
+ *
+ * @example
+ * ```html
+ * <cb-empty title="Aún no tienes movimientos" description="Cuando hagas tu primera compra aparecerá aquí.">
+ *   <cb-button size="sm">Hacer una transferencia</cb-button>
+ * </cb-empty>
+ * ```
+ */
+declare class CbEmpty {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    /** Mensaje principal. Por defecto, "Sin datos" del idioma activo. */
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    /** Texto de apoyo opcional. */
+    readonly description: _angular_core.InputSignal<string>;
+    /** Icono (se ignora si hay `image`). */
+    readonly icon: _angular_core.InputSignal<string>;
+    /** Ilustración opcional (decorativa). */
+    readonly image: _angular_core.InputSignal<string>;
+    /** `sm` para tablas, listas y paneles pequeños. */
+    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbEmpty, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbEmpty, "cb-empty", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { CbEmpty };
+//# sourceMappingURL=caribeng-ui-empty.d.ts.map

package/types/caribeng-ui-file-card.d.ts

@@ -1,17 +1,27 @@
 import * as _angular_core from '@angular/core';
+import * as _caribeng_ui from '@caribeng/ui';
+import { CbMenuItem } from '@caribeng/ui/menu';
 
 /**
  * Tarjeta de categoría/almacenamiento de CaribeNG: icono con tinte, título y
  * subtítulo a la izquierda; dos valores alineados a la derecha. Útil para
  * resúmenes de media, almacenamiento o métricas de categoría.
  *
+ * Como `cb-folder-card`: con `actions` muestra un botón ⋮ con un menú
+ * (`actionSelect`) y con `clickable` toda la tarjeta emite `open`.
+ *
  * @example
  * ```html
  * <cb-file-card icon="image" color="#10b981" title="Imágenes"
- *   subtitle="17% usado" value="245 archivos" valueSub="26.4 GB" />
+ *   subtitle="17% usado" value="245 archivos" valueSub="26.4 GB"
+ *   clickable (open)="verImagenes()" />
  * ```
  */
 declare class CbFileCard {
+    /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+    protected readonly t: _angular_core.Signal<_caribeng_ui.CbTranslation>;
+    private readonly menu;
+    private readonly trigger;
     /** Nombre del icono (del set de CaribeNG). */
     readonly icon: _angular_core.InputSignal<string>;
     /** Color del icono (CSS). El fondo del recuadro se deriva con transparencia. */
@@ -24,10 +34,25 @@ declare class CbFileCard {
     readonly value: _angular_core.InputSignal<string>;
     /** Valor secundario a la derecha (p. ej. "26.4 GB"). */
     readonly valueSub: _angular_core.InputSignal<string>;
-    /** Fondo tintado derivado del color (con alpha). */
+    /** Acciones del menú ⋮. Sin acciones no se muestra el botón. */
+    readonly actions: _angular_core.InputSignal<readonly CbMenuItem[]>;
+    /** Nombre del botón ⋮ y del menú. Por defecto, "Más acciones: {título}" del idioma activo. */
+    readonly actionsAriaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Toda la tarjeta es pulsable y emite `open` (clic, Enter o Espacio). */
+    readonly clickable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Acción elegida en el menú ⋮. */
+    readonly actionSelect: _angular_core.OutputEmitterRef<CbMenuItem>;
+    /** Se pulsó la tarjeta (solo con `clickable`). */
+    readonly open: _angular_core.OutputEmitterRef<MouseEvent>;
+    protected readonly menuOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly menuLabel: _angular_core.Signal<string>;
+    /** Fondo tintado derivado del color (cualquier color CSS: hex, rgb(), var(--…)). */
     protected tintBg(): string | null;
+    /** Abre o cierra el menú de acciones anclado al botón ⋮. */
+    toggleMenu(): void;
+    protected openFromKeyboard(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CbFileCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbFileCard, "cb-file-card", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueSub": { "alias": "valueSub"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CbFileCard, "cb-file-card", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueSub": { "alias": "valueSub"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "actionsAriaLabel": { "alias": "actionsAriaLabel"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "actionSelect": "actionSelect"; "open": "open"; }, never, never, true, never>;
 }
 
 export { CbFileCard };