@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

package/dist/collection/utils/color.js

@@ -120,13 +120,17 @@ export function parseCssColor(input) {
     }
     return null;
 }
-/** WCAG sRGB relative luminance (0–1). */
+/** WCAG sRGB relative luminance (0–1) a partir de canales 0–255 (pueden venir
+ *  con decimales — p.ej. un color compuesto sobre blanco — sin pasar por hex). */
+export function luminanceRgb({ r, g, b }) {
+    const [rs, gs, bs] = [r / 255, g / 255, b / 255].map((v) => v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+/** WCAG sRGB relative luminance (0–1). Wrapper fino de `luminanceRgb` para
+ *  un hex de 3/6 dígitos; lo que no es hex da 0 (comportamiento de siempre). */
 export function luminance(hex) {
     const c = parseHex(hex);
-    if (!c)
-        return 0;
-    const [rs, gs, bs] = [c.r / 255, c.g / 255, c.b / 255].map((v) => v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
-    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+    return c ? luminanceRgb(c) : 0;
 }
 /** Returns true when the color is perceptually light (needs dark foreground). */
 export function isLightColor(hex) {

package/dist/collection/utils/dragMove.js

@@ -0,0 +1,95 @@
+/**
+ * Núcleo puro de "arrastrar para mover un panel flotante" (Task D1).
+ *
+ * Solo aritmética: el desplazamiento acumulado del gesto y su acotado al
+ * viewport. Quien lo use aporta la cáscara (pointer events, escritura del
+ * estilo) — así el contrato se testea sin layout, que jsdom no calcula.
+ *
+ * El editor (Design Studio) tiene su propio gemelo de estas funciones en
+ * `lib/dragOffset.ts`: son dos paquetes sin dependencia entre sí y el núcleo
+ * son ~20 líneas; si alguna regla cambia, hay que cambiar las dos.
+ */
+/** Px del panel que SIEMPRE quedan dentro del viewport (un panel más chico no exige más de lo que mide). */
+export const DRAG_MIN_VISIBLE = 48;
+/**
+ * Desplazamiento del gesto: lo ya acumulado (`base`) más lo que se movió el
+ * puntero desde que empezó. `base` existe porque el gesto siguiente arranca
+ * donde quedó el anterior.
+ */
+export function dragOffsetOf(base, start, current) {
+    return { x: base.x + current.x - start.x, y: base.y + current.y - start.y };
+}
+/** Acota `value` a [min, max] con el 0 SIEMPRE dentro del rango — ver `clampDragOffset`. */
+function clampAxis(value, min, max) {
+    const lo = Math.min(min, 0);
+    const hi = Math.max(max, 0);
+    return Math.min(Math.max(value, lo), hi);
+}
+/**
+ * Acota el desplazamiento para que el panel no se pierda de pantalla:
+ *
+ * - Horizontal: siempre quedan `minVisible` px del panel dentro del viewport
+ *   (por cualquiera de los dos lados).
+ * - Vertical: el borde SUPERIOR nunca sube del borde del viewport (el header
+ *   —la zona de agarre— queda siempre alcanzable) y por abajo rige el mismo
+ *   `minVisible`.
+ *
+ * El rango incluye el 0 por construcción: un panel que ya nace fuera (más alto
+ * que el viewport) no debe SALTAR al agarrarlo; solo no se puede empeorar.
+ *
+ * `rect` es la caja del panel medida UNA vez, al empezar el gesto: medir en
+ * cada `pointermove` fuerza layout síncrono en cada frame.
+ */
+export function clampDragOffset(offset, rect, viewport, minVisible = DRAG_MIN_VISIBLE) {
+    const visibleX = Math.min(minVisible, rect.width);
+    const visibleY = Math.min(minVisible, rect.height);
+    return {
+        x: clampAxis(offset.x, visibleX - rect.left - rect.width, viewport.width - visibleX - rect.left),
+        y: clampAxis(offset.y, -rect.top, viewport.height - visibleY - rect.top),
+    };
+}
+/**
+ * Controles que NO arrastran aunque vivan en la zona de agarre: el ✕, los
+ * botones/enlaces y los campos. Lista gemela de la del editor
+ * (`apps/web/src/lib/dragOffset.ts`): las dos se mantienen en sincronía.
+ */
+const INTERACTIVE_SELECTOR = [
+    'button',
+    'a[href]',
+    'input',
+    'select',
+    'textarea',
+    '[role="button"]',
+    '[role="checkbox"]',
+    '[role="radio"]',
+    '[role="switch"]',
+    '[role="combobox"]',
+    '[role="option"]',
+    '[role="menuitem"]',
+    '[role="slider"]',
+    '[role="tab"]',
+    '[role="separator"]',
+    '[data-no-drag]',
+].join(', ');
+/**
+ * `true` si el evento nació en un control interactivo DENTRO de la zona de
+ * agarre. Recorre el `composedPath` (no `closest`) porque el origen puede venir
+ * de otro shadow root — el `<svg>` dentro del ✕, un control del consumidor
+ * proyectado en un slot.
+ *
+ * `handle` acota el recorrido: se corta al llegar al asa. Sin ese tope, un
+ * flotante montado dentro de un `<button>` o de un `[role=…]` del consumidor
+ * dejaba de arrastrar entero y sin diagnóstico (el ancestro matcheaba).
+ */
+export function isInteractiveDragTarget(event, handle) {
+    const path = typeof event.composedPath === 'function' ? event.composedPath() : [event.target];
+    for (const node of path) {
+        if (handle && node === handle)
+            return false;
+        if (node && typeof node.matches === 'function') {
+            if (node.matches(INTERACTIVE_SELECTOR))
+                return true;
+        }
+    }
+    return false;
+}

package/dist/collection/utils/gradientBarI18n.js

@@ -0,0 +1,24 @@
+/**
+ * Diccionario de strings de co-gradient-bar (aria labels). Misma estrategia
+ * que carouselI18n/dateI18n: es/en/pt resueltos por la prop `locale`. Las
+ * plantillas usan `{i}` / `{n}` / `{p}`.
+ */
+import { langFromLocale } from "./dateI18n";
+const DICT = {
+    es: {
+        barLabel: 'Degradado',
+        stopLabel: 'Parada {i} de {n}, {p}%',
+    },
+    en: {
+        barLabel: 'Gradient',
+        stopLabel: 'Stop {i} of {n}, {p}%',
+    },
+    pt: {
+        barLabel: 'Degradê',
+        stopLabel: 'Parada {i} de {n}, {p}%',
+    },
+};
+/** Resuelve los strings integrados para un locale. */
+export function getGradientBarStrings(locale) {
+    return DICT[langFromLocale(locale)];
+}

package/dist/collection/utils/gradientStops.js

@@ -0,0 +1,142 @@
+/**
+ * Matemática pura de co-gradient-bar y co-swatch-grid: parseo de colores
+ * (hex/rgb/rgba), interpolación entre paradas, CSS del degradado y la
+ * geometría puntero → posición. Sin DOM ni estado: se testea en el proyecto
+ * `unit` (node).
+ */
+import { luminanceRgb } from "./color";
+import { clamp, hexToRgb, rgbToHex } from "./hsv";
+/**
+ * Lee un color CSS a canales. Soporta hex de 3/4/6/8 dígitos (vía
+ * `hsv.hexToRgb`, único parser de hex del picker) y rgb()/rgba() (con comas
+ * o con la sintaxis `/ alpha`). Tokens (`var(--x)`) y nombres (`red`)
+ * devuelven null: el llamador decide cómo degradar.
+ */
+export function parseColor(color) {
+    var _a;
+    if (!color || typeof color !== 'string')
+        return null;
+    const s = color.trim();
+    if (s.startsWith('#')) {
+        const c = hexToRgb(s);
+        return c ? { r: c.r, g: c.g, b: c.b, a: (_a = c.a) !== null && _a !== void 0 ? _a : 1 } : null;
+    }
+    const m = /^rgba?\(\s*([^)]*?)\s*\)$/i.exec(s);
+    if (!m)
+        return null;
+    // "10, 20, 30, 0.5" · "10 20 30 / 25%" · "10 20 30"
+    const parts = m[1].split(/\s*[,/]\s*|\s+/).filter(Boolean);
+    if (parts.length < 3 || parts.length > 4)
+        return null;
+    const [r, g, b] = parts.slice(0, 3).map((p) => Number(p));
+    if ([r, g, b].some((v) => Number.isNaN(v)))
+        return null;
+    const a = parts[3] === undefined ? 1 : parseAlpha(parts[3]);
+    if (a === null)
+        return null;
+    return { r: clamp(r, 0, 255), g: clamp(g, 0, 255), b: clamp(b, 0, 255), a };
+}
+function parseAlpha(raw) {
+    const pct = raw.endsWith('%');
+    const n = Number(pct ? raw.slice(0, -1) : raw);
+    if (Number.isNaN(n))
+        return null;
+    return clamp(pct ? n / 100 : n, 0, 1);
+}
+const round = (n, decimals) => Math.round(n * 10 ** decimals) / 10 ** decimals;
+/** Opaco → `#rrggbb` (minúsculas, vía `hsv.rgbToHex`); con alpha → `rgba(r, g, b, a)`. */
+export function formatColor({ r, g, b, a }) {
+    if (a >= 1)
+        return rgbToHex({ r, g, b });
+    return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${round(a, 3)})`;
+}
+/**
+ * El mismo color con alpha 1 (`#rrggbb`), para la mitad "sólida" del chip de
+ * un stop translúcido. Un color ilegible se devuelve tal cual.
+ */
+export function opaqueColor(color) {
+    const c = parseColor(color);
+    return c ? formatColor(Object.assign(Object.assign({}, c), { a: 1 })) : color;
+}
+const byPosition = (stops) => [...stops].sort((a, b) => a.position - b.position);
+/**
+ * Color que tiene el degradado en `position`: mezcla lineal (sRGB, con alpha)
+ * entre las dos paradas que la rodean. Fuera del rango devuelve el color del
+ * extremo. Si alguna parada vecina no se puede parsear, devuelve el string de
+ * la parada más cercana tal cual (no inventa un color).
+ */
+export function interpolateStopColor(stops, position) {
+    if (stops.length === 0)
+        return 'rgba(0, 0, 0, 0)';
+    const sorted = byPosition(stops);
+    const p = clamp(position, 0, 100);
+    if (p <= sorted[0].position)
+        return sorted[0].color;
+    const last = sorted[sorted.length - 1];
+    if (p >= last.position)
+        return last.color;
+    let i = 1;
+    while (sorted[i].position < p)
+        i++;
+    const from = sorted[i - 1];
+    const to = sorted[i];
+    const span = to.position - from.position;
+    const t = span === 0 ? 0 : (p - from.position) / span;
+    const nearest = t < 0.5 ? from : to;
+    const c0 = parseColor(from.color);
+    const c1 = parseColor(to.color);
+    if (!c0 || !c1)
+        return nearest.color;
+    return formatColor({
+        r: c0.r + (c1.r - c0.r) * t,
+        g: c0.g + (c1.g - c0.g) * t,
+        b: c0.b + (c1.b - c0.b) * t,
+        a: c0.a + (c1.a - c0.a) * t,
+    });
+}
+/** `linear-gradient(to right, …)` con las paradas ordenadas; sin paradas → `transparent`. */
+export function gradientCss(stops) {
+    if (stops.length === 0)
+        return 'transparent';
+    if (stops.length === 1) {
+        const { color } = stops[0];
+        return `linear-gradient(to right, ${color} 0%, ${color} 100%)`;
+    }
+    const parts = byPosition(stops).map((s) => `${s.color} ${clamp(s.position, 0, 100)}%`);
+    return `linear-gradient(to right, ${parts.join(', ')})`;
+}
+/** true si alguna parada tiene alpha < 1 (la barra necesita el damero debajo). */
+export function hasTransparentStop(stops) {
+    return stops.some((s) => {
+        const c = parseColor(s.color);
+        return !!c && c.a < 1;
+    });
+}
+/**
+ * Posición (0–100, entera) de un puntero sobre el track. `trackWidth` 0 (sin
+ * medir, display:none, jsdom) → 0, nunca NaN.
+ */
+export function positionFromPointer(clientX, trackLeft, trackWidth) {
+    if (trackWidth <= 0)
+        return 0;
+    return Math.round(clamp(((clientX - trackLeft) / trackWidth) * 100, 0, 100));
+}
+/** Paso de teclado: posición + delta, acotado a 0–100. */
+export function stepPosition(position, delta) {
+    return clamp(position + delta, 0, 100);
+}
+/**
+ * Swatch "claro" (necesita borde para no fundirse con el fondo): luminancia
+ * WCAG > 0,85 tras componer el alpha sobre blanco. Umbral distinto al
+ * `isLightColor` de `utils/color.ts` (0,4, pensado para elegir el color del
+ * texto), por eso vive aparte y no cambia aquel default.
+ */
+export function isLightSwatch(color) {
+    const c = parseColor(color);
+    if (!c)
+        return false;
+    // Compone sobre blanco y mide directo sobre los canales (sin re-codificar a
+    // hex — fix I-6): `luminanceRgb` acepta decimales.
+    const over = (v) => v * c.a + 255 * (1 - c.a);
+    return luminanceRgb({ r: over(c.r), g: over(c.g), b: over(c.b) }) > 0.85;
+}

package/dist/collection/utils/hsv.js

@@ -0,0 +1,114 @@
+/**
+ * Conversiones puras HSV ⇄ RGB ⇄ HEX para el picker de color del editor
+ * (`co-color-area` + `co-color-slider`).
+ *
+ * Convención de rangos (la misma que exponen los componentes):
+ *   h ∈ [0, 360)   s ∈ [0, 100]   v ∈ [0, 100]   r/g/b ∈ [0, 255]   a ∈ [0, 1]
+ *
+ * `hexToHsv` NO redondea: la ida y vuelta hex → hsv → hex solo es estable con
+ * los decimales (p.ej. #008ff0 es h=204.25, v=94.117…; redondeado a enteros
+ * vuelve como #0090f0). Quien muestre números redondea en la UI.
+ *
+ * Sin dependencias de DOM: corre en el proyecto `unit` (node) de vitest.
+ */
+/** Acota `n` a [min, max]. NaN cae a `min` para no propagar basura aguas abajo. */
+export function clamp(n, min, max) {
+    if (Number.isNaN(n))
+        return min;
+    return Math.min(max, Math.max(min, n));
+}
+/** Normaliza un tono a [0, 360): 360 → 0, −120 → 240. */
+function wrapHue(h) {
+    if (Number.isNaN(h))
+        return 0;
+    return ((h % 360) + 360) % 360;
+}
+/** HSV → RGB (0–255, redondeado). Algoritmo estándar por sectores de 60°. */
+export function hsvToRgb({ h, s, v }) {
+    const hue = wrapHue(h);
+    const sat = clamp(s, 0, 100) / 100;
+    const val = clamp(v, 0, 100) / 100;
+    const c = val * sat;
+    const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+    const m = val - c;
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    if (hue < 60)
+        [r, g] = [c, x];
+    else if (hue < 120)
+        [r, g] = [x, c];
+    else if (hue < 180)
+        [g, b] = [c, x];
+    else if (hue < 240)
+        [g, b] = [x, c];
+    else if (hue < 300)
+        [r, b] = [x, c];
+    else
+        [r, b] = [c, x];
+    return {
+        r: Math.round((r + m) * 255),
+        g: Math.round((g + m) * 255),
+        b: Math.round((b + m) * 255),
+    };
+}
+/** RGB (0–255) → HSV sin redondear. El gris devuelve h=0, s=0 (nunca NaN). */
+export function rgbToHsv({ r, g, b }) {
+    const rr = clamp(r, 0, 255) / 255;
+    const gg = clamp(g, 0, 255) / 255;
+    const bb = clamp(b, 0, 255) / 255;
+    const max = Math.max(rr, gg, bb);
+    const min = Math.min(rr, gg, bb);
+    const d = max - min;
+    let h = 0;
+    if (d !== 0) {
+        if (max === rr)
+            h = 60 * (((gg - bb) / d) % 6);
+        else if (max === gg)
+            h = 60 * ((bb - rr) / d + 2);
+        else
+            h = 60 * ((rr - gg) / d + 4);
+        if (h < 0)
+            h += 360;
+    }
+    return { h, s: max === 0 ? 0 : (d / max) * 100, v: max * 100 };
+}
+const HEX_RE = /^#?([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+/**
+ * `#rgb` / `#rgba` / `#rrggbb` / `#rrggbbaa` (con o sin `#`, cualquier caja)
+ * → RGB. `a` viene en 0–1 (1 cuando el hex no trae alpha). `null` si no es
+ * un hex. Es el ÚNICO parser de hex del picker: `gradientStops.parseColor`
+ * delega acá su rama hex (fix I-6).
+ */
+export function hexToRgb(hex) {
+    if (typeof hex !== 'string')
+        return null;
+    const m = HEX_RE.exec(hex.trim());
+    if (!m)
+        return null;
+    let h = m[1];
+    // Forma corta (#rgb / #rgba): cada dígito se duplica.
+    if (h.length <= 4)
+        h = h.split('').map((ch) => ch + ch).join('');
+    const int = (i) => parseInt(h.slice(i, i + 2), 16);
+    return {
+        r: int(0),
+        g: int(2),
+        b: int(4),
+        a: h.length === 8 ? int(6) / 255 : 1,
+    };
+}
+/** RGB → `#rrggbb` en minúscula (el alpha, si viene, se omite). */
+export function rgbToHex({ r, g, b }) {
+    const part = (n) => Math.round(clamp(n, 0, 255)).toString(16).padStart(2, '0');
+    return `#${part(r)}${part(g)}${part(b)}`;
+}
+/** HSV → `#rrggbb`. */
+export function hsvToHex(hsv) {
+    return rgbToHex(hsvToRgb(hsv));
+}
+/** HEX → HSV sin redondear (ver nota de cabecera). `null` si no es un hex. */
+export function hexToHsv(hex) {
+    const rgb = hexToRgb(hex);
+    return rgb ? rgbToHsv(rgb) : null;
+}

package/dist/collection/utils/kbdI18n.js

@@ -0,0 +1,29 @@
+/**
+ * Diccionario embebido de `co-kbd` para las etiquetas de texto de los
+ * modificadores en plataformas sin teclas dedicadas (Windows/Linux): sin
+ * los glifos de Mac (⌘/⇧/⌥/⌃) el modificador se rotula con texto.
+ *
+ * Mismo patrón que `fileI18n.ts`: un mapa por locale + un getter. A
+ * diferencia de `fileI18n`, acá el locale no llega tipado por componente —
+ * `co-kbd` expone un `locale?: string` opcional (BCP-47, p.ej. "es-CO") y
+ * este util lo resuelve al lenguaje soportado más cercano, igual que
+ * `langFromLocale` en `fileI18n.ts`.
+ */
+const DICT = {
+    es: { ctrl: 'Ctrl', shift: 'Shift', alt: 'Alt', win: 'Win' },
+    en: { ctrl: 'Ctrl', shift: 'Shift', alt: 'Alt', win: 'Win' },
+    pt: { ctrl: 'Ctrl', shift: 'Shift', alt: 'Alt', win: 'Win' },
+};
+/** Map any BCP-47 locale (e.g. "es-CO") to a supported language; fallback 'en'. */
+export function langFromLocale(locale) {
+    const l = (locale || '').toLowerCase();
+    if (l.startsWith('es'))
+        return 'es';
+    if (l.startsWith('pt'))
+        return 'pt';
+    return 'en';
+}
+/** Resolve the built-in win-label strings for a locale. */
+export function getKbdStrings(locale) {
+    return DICT[langFromLocale(locale)];
+}

package/dist/collection/utils/positioning.js

@@ -10,9 +10,15 @@
  * Calculate top/left for a fixed-position panel relative to a trigger.
  */
 export function computePosition(triggerRect, panelRect, options) {
+    var _a, _b;
     const { offset, flip } = options;
     const viewportH = window.innerHeight;
     const viewportW = window.innerWidth;
+    const shift = (_a = options.shift) !== null && _a !== void 0 ? _a : 0;
+    // Task C10 (Fase 2 Cobalt): con `anchor`, TODA la matemática (flip incluido)
+    // se hace contra el rect del anchor en vez del trigger. Sin `anchorRect`,
+    // `referenceRect === triggerRect` — cero cambio de comportamiento.
+    const referenceRect = (_b = options.anchorRect) !== null && _b !== void 0 ? _b : triggerRect;
     let placement = options.placement;
     // Auto-flip if needed
     if (flip) {
@@ -21,29 +27,29 @@ export function computePosition(triggerRect, panelRect, options) {
         const isRight = placement.startsWith('right');
         const isLeft = placement.startsWith('left');
         if (isBottom) {
-            const spaceBelow = viewportH - triggerRect.bottom - offset;
-            const spaceAbove = triggerRect.top - offset;
+            const spaceBelow = viewportH - referenceRect.bottom - offset;
+            const spaceAbove = referenceRect.top - offset;
             if (spaceBelow < panelRect.height && spaceAbove > spaceBelow) {
                 placement = placement.replace('bottom', 'top');
             }
         }
         else if (isTop) {
-            const spaceAbove = triggerRect.top - offset;
-            const spaceBelow = viewportH - triggerRect.bottom - offset;
+            const spaceAbove = referenceRect.top - offset;
+            const spaceBelow = viewportH - referenceRect.bottom - offset;
             if (spaceAbove < panelRect.height && spaceBelow > spaceAbove) {
                 placement = placement.replace('top', 'bottom');
             }
         }
         else if (isRight) {
-            const spaceRight = viewportW - triggerRect.right - offset;
-            const spaceLeft = triggerRect.left - offset;
+            const spaceRight = viewportW - referenceRect.right - offset;
+            const spaceLeft = referenceRect.left - offset;
             if (spaceRight < panelRect.width && spaceLeft > spaceRight) {
                 placement = placement.replace('right', 'left');
             }
         }
         else if (isLeft) {
-            const spaceLeft = triggerRect.left - offset;
-            const spaceRight = viewportW - triggerRect.right - offset;
+            const spaceLeft = referenceRect.left - offset;
+            const spaceRight = viewportW - referenceRect.right - offset;
             if (spaceLeft < panelRect.width && spaceRight > spaceLeft) {
                 placement = placement.replace('left', 'right');
             }
@@ -58,29 +64,33 @@ export function computePosition(triggerRect, panelRect, options) {
     const isHorizontal = isRight || isLeft;
     if (isHorizontal) {
         if (isRight)
-            left = triggerRect.right + offset;
+            left = referenceRect.right + offset;
         else
-            left = triggerRect.left - panelRect.width - offset;
+            left = referenceRect.left - panelRect.width - offset;
         const align = placement.split('-')[1] || 'center';
         if (align === 'start')
-            top = triggerRect.top;
+            top = referenceRect.top;
         else if (align === 'end')
-            top = triggerRect.bottom - panelRect.height;
+            top = referenceRect.bottom - panelRect.height;
         else
-            top = triggerRect.top + (triggerRect.height - panelRect.height) / 2;
+            top = referenceRect.top + (referenceRect.height - panelRect.height) / 2;
+        // Eje cruzado de un placement horizontal (left*/right*) es vertical.
+        top += shift;
     }
     else {
         if (isTop)
-            top = triggerRect.top - panelRect.height - offset;
+            top = referenceRect.top - panelRect.height - offset;
         else
-            top = triggerRect.bottom + offset;
+            top = referenceRect.bottom + offset;
         const align = placement.split('-')[1] || 'center';
         if (align === 'start')
-            left = triggerRect.left;
+            left = referenceRect.left;
         else if (align === 'end')
-            left = triggerRect.right - panelRect.width;
+            left = referenceRect.right - panelRect.width;
         else
-            left = triggerRect.left + (triggerRect.width - panelRect.width) / 2;
+            left = referenceRect.left + (referenceRect.width - panelRect.width) / 2;
+        // Eje cruzado de un placement vertical (top*/bottom*) es horizontal.
+        left += shift;
     }
     // Clamp to viewport edges (4px margin)
     if (left < 4)
@@ -209,3 +219,19 @@ export function findScrollParents(start) {
     }
     return out;
 }
+/**
+ * ¿El ancla (trigger) se ve todavía? Tiene que tener caja y cortar el viewport Y
+ * cada uno de sus scrollers (`clipRects`, del más cercano al más lejano — lo que
+ * devuelve `findScrollParents`, medido). Basta con que UNO la recorte entera para
+ * que no se vea: el kebab de una card que el scroll de su columna sacó por arriba
+ * sigue dentro del viewport, pero ya no es visible.
+ *
+ * Asomada en un borde cuenta como visible: el panel todavía tiene de qué colgar.
+ */
+export function isAnchorVisible(anchor, clipRects) {
+    if (!anchor.width && !anchor.height)
+        return false;
+    const viewport = { top: 0, left: 0, bottom: window.innerHeight, right: window.innerWidth };
+    return [viewport, ...clipRects].every((clip) => anchor.bottom > clip.top && anchor.top < clip.bottom
+        && anchor.right > clip.left && anchor.left < clip.right);
+}

package/dist/collection/utils/rich-text-host.js

@@ -0,0 +1,109 @@
+/**
+ * Cableado común de los componentes que montan un editor de cobalt-rich-text
+ * (co-rich-text-editor y co-document-editor). Extraído del RTE sin cambiar su
+ * comportamiento (spec contracts-v2-contract-editor §4.4; caracterización en
+ * co-rich-text-editor.characterization.spec.tsx). El menú flotante NO vive acá.
+ */
+/** `features` llega como objeto (propiedad JS) o como JSON (atributo HTML). */
+export function parseFeatures(features) {
+    if (!features)
+        return undefined;
+    if (typeof features === 'string') {
+        try {
+            return JSON.parse(features);
+        }
+        catch (_a) {
+            return undefined;
+        }
+    }
+    return features;
+}
+/** `value` puede ser JSON de ProseMirror o HTML; vacío = documento vacío. */
+export function parseEditorValue(v) {
+    if (!v)
+        return '';
+    try {
+        return JSON.parse(v);
+    }
+    catch (_a) {
+        return v;
+    }
+}
+/**
+ * Guarda anti-eco: el padre suele devolver por `value` lo mismo que el editor
+ * acaba de emitir (en JSON o en HTML). Re-aplicarlo reinicia el editor y el
+ * cursor salta: se ignora.
+ */
+export class EchoGuard {
+    constructor() {
+        this.json = null;
+        this.html = '';
+    }
+    /** Tras aplicar un valor externo (o al montar): ese valor pasa a ser el "último". */
+    seed(v) {
+        this.json = v;
+        this.html = '';
+    }
+    markEmitted(out) {
+        this.json = out.json ? JSON.stringify(out.json) : null;
+        this.html = out.html;
+    }
+    isEcho(incoming) {
+        return incoming === this.json || incoming === this.html;
+    }
+}
+/** Aplica un `value` externo sin emitir update. */
+export function applyExternalValue(editor, incoming) {
+    if (incoming === '' || incoming === null) {
+        editor.commands.clearContent(false);
+    }
+    else {
+        editor.commands.setContent(parseEditorValue(incoming), { emitUpdate: false });
+    }
+}
+/** Salida `{json, html, text}` del RTE. `sanitizeHtml` lo pone el componente (preset + features). */
+export function buildOutput(editor, sanitizeHtml) {
+    const empty = editor.isEmpty;
+    return {
+        json: empty ? null : editor.getJSON(),
+        html: empty ? '' : sanitizeHtml(editor.getHTML()),
+        text: editor.getText(),
+    };
+}
+/** Pasa el editor activo y el handler de imágenes a `co-rich-text-toolbar`. */
+export function syncToolbarEditor(toolbarEl, editor, imageUpload) {
+    if (toolbarEl && editor && toolbarEl.editor !== editor) {
+        toolbarEl.editor = editor;
+    }
+    if (toolbarEl) {
+        toolbarEl.imageUpload = imageUpload;
+    }
+}
+/**
+ * Marca cada contenedor de imagen con su modo (`data-image-layout`) para que
+ * apliquen las reglas del CSS, y limpia el posicionamiento absoluto heredado del
+ * modelo de página fija. El NodeView de resize nunca refleja cambios de attrs en
+ * el DOM: se lee del state y se escribe el atributo a mano.
+ */
+export function syncImageLayouts(editor) {
+    const view = editor.view;
+    editor.state.doc.descendants((node, pos) => {
+        var _a;
+        if (node.type.name !== 'image')
+            return true;
+        const dom = view.nodeDOM(pos);
+        const c = (((_a = dom === null || dom === void 0 ? void 0 : dom.closest) === null || _a === void 0 ? void 0 : _a.call(dom, '[data-resize-container]')) || dom);
+        if (!c)
+            return true;
+        const layout = node.attrs.imageLayout || 'inline';
+        c.dataset.imageLayout = layout;
+        c.style.position = '';
+        c.style.left = '';
+        c.style.top = '';
+        c.style.zIndex = '';
+        // El NodeView de resize fija `display: inline-flex` inline, que le gana al
+        // `display: block` del CSS en `center` / `full-width` (2026-09-17).
+        c.style.display = layout === 'center' || layout === 'full-width' ? '' : 'inline-flex';
+        return true;
+    });
+}