@prolibu-suite/cobalt-core 0.7.0 → 0.8.0

package/dist/collection/components/co-calendar-timegrid/co-calendar-timegrid.js

@@ -0,0 +1,1305 @@
+import { h } from "@stencil/core";
+import { parseISO, compareYMD, todayYMD, getWeekdayLabels } from "@prolibu-suite/cobalt-date-utils";
+import { layoutTimeGrid, layoutAllDay, minutesToFraction, snapMinutes, clampMinutes, zonedMinutesOfDay, zonedDateKey, wallClockToEpoch, toUtcISO, } from "@prolibu-suite/cobalt-calendar-utils";
+import { readableTextToken } from "../../utils/eventColor";
+const ALLDAY_LANE_H = 22; // px per all-day lane (bar 20px + 2px gap)
+// Distancia (px) que el puntero debe recorrer tras el pointerdown para que un drag
+// de evento se comprometa. Por debajo de esto el gesto es un CLICK: el drag no
+// arranca, el chip conserva sus pointer-events y su click abre el popover. Sin este
+// umbral, `startMove` entraba en modo interacting (pointer-events:none en los chips)
+// en el pointerdown mismo y se comía el click de un evento arrastrable.
+const DRAG_THRESHOLD_PX = 5;
+/**
+ * co-calendar-timegrid — the Week/Day time-grid. The shell renders it with
+ * `dates` = 7 day-keys (week) or 1 (day). Presentation + interaction only; the
+ * host owns data (CONTROLLED). All instant math is delegated to the engine — the
+ * only timezone boundary is the `timeZone` prop (wall-clock render).
+ */
+export class CoCalendarTimegrid {
+    constructor() {
+        this.events = [];
+        /** Visible day keys "YYYY-MM-DD" (7 = week, 1 = day). */
+        this.dates = [];
+        this.locale = 'es-CO';
+        this.editable = true;
+        this.selectable = true;
+        this.slotMinutes = 15;
+        this.snapMinutes = 15;
+        this.defaultDurationMinutes = 60;
+        this.scrollTime = '07:00';
+        this.nowIndicator = true;
+        /** Cargando: en vez de los eventos pinta bloques skeleton en las columnas.
+         *  La grilla (eje de horas, líneas, cabecera de días, franja de todo-el-día)
+         *  se mantiene: lo único que todavía no se sabe son los eventos. */
+        this.loading = false;
+        this.allDaySlot = true;
+        this.minTime = '00:00';
+        this.maxTime = '24:00';
+        /** Minute of "now" for the indicator; refreshed on a 60s timer. */
+        this.nowMinutes = 0;
+        this.nowDay = '';
+        /** Roving-tabindex focus position for keyboard navigation over slots. */
+        this.focusDate = '';
+        this.focusMin = 0;
+        this.selDate = null;
+        this.selStartMin = 0;
+        this.selEndMin = 0;
+        this.selecting = false;
+        /** Coords crudas del último pointermove: el getBoundingClientRect corre UNA vez
+         * por frame, dentro del rAF (antes corría a ~120Hz, en el move crudo). */
+        this.pendingSel = null;
+        this.selRaf = 0;
+        this.pendingDrag = null;
+        this.dragRaf = 0;
+        this.onWindowPointerUp = () => this.finishSelection();
+        this.dragId = null;
+        this.dragMode = null;
+        this.dragGrabOffsetMin = 0; // minutes between event start and the grab point (move)
+        this.dragDurationMin = 0; // preserved duration in minutes (move)
+        this.dragDate = null; // current target day (move can change columns)
+        this.dragStartMin = 0; // provisional new start (move) / fixed start (resize)
+        this.dragEndMin = 0; // provisional new end
+        this.origStartMin = 0; // pre-drag start minute (no-op comparison)
+        this.origEndMin = 0; // pre-drag end minute (no-op comparison)
+        this.origDate = null; // pre-drag day (no-op comparison)
+        this.suppressNextClick = false; // set right before coEventDrop so the trailing click no-ops
+        // Drag ARMADO pero aún no comprometido: `startMove`/`startResize` guardan el id y
+        // el punto de agarre acá; el drag pasa a activo (`dragId`) recién cuando el puntero
+        // cruza DRAG_THRESHOLD_PX. Así un click simple en un evento arrastrable no arranca
+        // drag y su popover abre.
+        this.dragArmedId = null;
+        this.dragStartPointer = null;
+        this.onWindowPointerMove = (e) => this.trackDrag(e);
+        this.onWindowPointerUpDrag = () => this.finishDrag();
+        /** Rects de las columnas cacheados AL AGARRAR: con esto el frame de drag es
+         * aritmética pura (antes: ~9 getBoundingClientRect + 2 querySelector/frame,
+         * que además forzaban reflow síncrono al escribir estilos en el mismo rAF). */
+        this.colRects = [];
+        this.gridRect = null;
+        this.onDragViewportChange = () => this.captureDragRects();
+        this.startSelection = (e, dateKey, colEl) => {
+            if (!this.selectable || !this.isDayInteractable(dateKey))
+                return;
+            // ignore clicks that land on an event box (those are handled in Task 4/5)
+            if (e.target.closest('.tg__event, .tg__allday-bar'))
+                return;
+            e.preventDefault();
+            const m = this.minutesFromPointer(e.clientY, colEl);
+            this.selecting = true;
+            this.selDate = dateKey;
+            this.selStartMin = m;
+            this.selEndMin = m;
+            this.setInteracting(true);
+        };
+        // pointermove llega ~120Hz y cada @State re-renderiza la grilla entera: sin
+        // batching el ghost persigue al puntero con lag. Un update por frame — el
+        // estado intermedio nunca se pinta, así que no se pierde nada. El gBCR (vía
+        // minutesFromPointer) también vive DENTRO del rAF: 1 por frame, no 1 por move.
+        this.extendSelection = (e, colEl) => {
+            if (!this.selecting)
+                return;
+            this.pendingSel = { y: e.clientY, colEl };
+            if (this.selRaf)
+                return;
+            this.selRaf = requestAnimationFrame(() => {
+                this.selRaf = 0;
+                const p = this.pendingSel;
+                this.pendingSel = null;
+                if (!p || !this.selecting)
+                    return;
+                const min = this.minutesFromPointer(p.y, p.colEl);
+                if (min !== this.selEndMin)
+                    this.selEndMin = min; // snap: la mayoría de los moves no cambian nada
+            });
+        };
+        this.startMove = (e, id) => {
+            const ev = this.eventById(id);
+            if (!ev || ev.allDay || !this.editable || ev.editable === false || ev.startEditable === false)
+                return;
+            // Sin preventDefault: en pointerdown CANCELA el click de compatibilidad del
+            // navegador, y entonces un evento ARRASTRABLE nunca podía abrir su popover
+            // (solo los externos, que no arrancan drag). Lo que preventDefault daba —no
+            // seleccionar texto, no scrollear en touch— lo dan `user-select`/
+            // `touch-action` en el CSS del bloque. El click POSTERIOR a un drag real
+            // sigue anulado por `suppressNextClick`.
+            e.stopPropagation();
+            const dateKey = zonedDateKey(ev.startMs, this.timeZone);
+            this.captureDragRects();
+            if (!this.gridRect || !this.colRects.some((c) => c.d === dateKey))
+                return;
+            const grabMin = this.minutesFromCachedY(e.clientY);
+            const startMin = zonedMinutesOfDay(ev.startMs, this.timeZone);
+            this.dragArmedId = id;
+            this.dragMode = 'move';
+            this.dragDate = dateKey;
+            this.dragGrabOffsetMin = grabMin - startMin;
+            this.dragDurationMin = Math.round((ev.endMs - ev.startMs) / 60000);
+            this.dragStartMin = startMin;
+            this.dragEndMin = startMin + this.dragDurationMin;
+            this.origStartMin = startMin;
+            this.origEndMin = startMin + this.dragDurationMin;
+            this.origDate = dateKey;
+            this.dragStartPointer = { x: e.clientX, y: e.clientY };
+        };
+        this.startResize = (e, id) => {
+            const ev = this.eventById(id);
+            if (!ev || ev.allDay || !this.editable || ev.editable === false || ev.durationEditable === false)
+                return;
+            e.stopPropagation();
+            const dateKey = zonedDateKey(ev.startMs, this.timeZone);
+            this.captureDragRects();
+            if (!this.gridRect || !this.colRects.some((c) => c.d === dateKey))
+                return;
+            this.dragArmedId = id;
+            this.dragMode = 'resize';
+            this.dragDate = dateKey;
+            this.dragStartMin = zonedMinutesOfDay(ev.startMs, this.timeZone);
+            this.dragEndMin = zonedMinutesOfDay(ev.endMs, this.timeZone);
+            this.origStartMin = this.dragStartMin;
+            this.origEndMin = this.dragEndMin;
+            this.origDate = dateKey;
+            this.dragStartPointer = { x: e.clientX, y: e.clientY };
+        };
+        /** Roving-tabindex keyboard nav: ↑/↓ by slot, ←/→ by day, Enter/Space to select. */
+        this.handleKeyDown = (e) => {
+            const step = this.slotMinutes;
+            let handled = true;
+            switch (e.key) {
+                case 'ArrowUp':
+                    this.focusMin = clampMinutes(this.focusMin - step, this.minM, this.maxM - step);
+                    break;
+                case 'ArrowDown':
+                    this.focusMin = clampMinutes(this.focusMin + step, this.minM, this.maxM - step);
+                    break;
+                case 'ArrowLeft':
+                    this.focusDate = this.shiftFocusDate(-1);
+                    break;
+                case 'ArrowRight':
+                    this.focusDate = this.shiftFocusDate(1);
+                    break;
+                case 'Enter':
+                case ' ': {
+                    if (!this.isDayInteractable(this.focusDate))
+                        break;
+                    const start = this.toInstant(this.focusDate, this.focusMin);
+                    const end = this.toInstant(this.focusDate, Math.min(this.focusMin + this.defaultDurationMinutes, this.maxM));
+                    if (new Date(start).getTime() >= Date.now())
+                        this.coRangeSelect.emit({ start, end });
+                    break;
+                }
+                default:
+                    handled = false;
+            }
+            if (handled) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+    }
+    componentWillLoad() {
+        this.refreshNow();
+        this.focusDate = (this.dates && this.dates[0]) || todayYMD();
+        this.focusMin = hhmmToMinutes(this.scrollTime, 420);
+    }
+    componentDidLoad() {
+        this.scrollToInitial();
+        this.nowTimer = window.setInterval(() => this.refreshNow(), 60000);
+        window.addEventListener('pointerup', this.onWindowPointerUp);
+        window.addEventListener('pointermove', this.onWindowPointerMove);
+        window.addEventListener('pointerup', this.onWindowPointerUpDrag);
+    }
+    disconnectedCallback() {
+        if (this.nowTimer)
+            window.clearInterval(this.nowTimer);
+        if (this.selRaf)
+            cancelAnimationFrame(this.selRaf);
+        if (this.dragRaf)
+            cancelAnimationFrame(this.dragRaf);
+        window.removeEventListener('pointerup', this.onWindowPointerUp);
+        window.removeEventListener('pointermove', this.onWindowPointerMove);
+        window.removeEventListener('pointerup', this.onWindowPointerUpDrag);
+        this.bindDragViewportListeners(false);
+        this.hideGhost();
+        this.colRects = [];
+        this.gridRect = null;
+    }
+    /** Limpia el resaltado persistente de selección (lo llama el host al cerrar
+     * su bubble/form de creación). */
+    async clearSelection() {
+        this.selDate = null;
+    }
+    /** Un refetch (post-save) invalida la referencia visual de la selección. */
+    onEventsChange() {
+        if (!this.selecting)
+            this.selDate = null;
+    }
+    refreshNow() {
+        const ms = Date.now();
+        this.nowDay = zonedDateKey(ms, this.timeZone);
+        this.nowMinutes = zonedMinutesOfDay(ms, this.timeZone);
+    }
+    get minM() {
+        return hhmmToMinutes(this.minTime, 0);
+    }
+    get maxM() {
+        return hhmmToMinutes(this.maxTime, 1440);
+    }
+    scrollToInitial() {
+        var _a, _b, _c;
+        const scroller = (_a = this.scrollEl) !== null && _a !== void 0 ? _a : (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.tg__scroll');
+        const body = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.tg__body');
+        if (!scroller || !body)
+            return;
+        const frac = minutesToFraction(hhmmToMinutes(this.scrollTime, 420), this.minM, this.maxM);
+        scroller.scrollTop = frac * body.offsetHeight;
+    }
+    /** Visible day keys, with the same fallback the render uses. */
+    visibleDates() {
+        return this.dates.length ? this.dates : [todayYMD()];
+    }
+    /** Slot size guarded: ahora alimenta un `calc()` (un 0/NaN dejaría la grilla
+     * sin altura, silenciosamente). */
+    get slotM() {
+        return this.slotMinutes > 0 ? this.slotMinutes : 15;
+    }
+    /** Number of slot rows in the visible window (drives the body height). */
+    slotCount() {
+        return Math.max(1, Math.ceil((this.maxM - this.minM) / this.slotM));
+    }
+    /** Hour marks inside the visible window — one axis label each (was 1 div per
+     * slot with a label only on the hour). */
+    hourList() {
+        const out = [];
+        const first = Math.ceil(this.minM / 60) * 60;
+        for (let m = first; m < this.maxM; m += 60)
+            out.push(m);
+        return out;
+    }
+    /** Minutes-of-day at a clientY within a column element, snapped and clamped. */
+    minutesFromPointer(clientY, colEl) {
+        const rect = colEl.getBoundingClientRect();
+        return this.minutesAtFraction((clientY - rect.top) / rect.height);
+    }
+    /** Same math as minutesFromPointer but over the cached grid rect (drag path):
+     * cero lecturas de layout por frame. */
+    minutesFromCachedY(clientY) {
+        const g = this.gridRect;
+        if (!g || !g.height)
+            return this.minM;
+        return this.minutesAtFraction((clientY - g.top) / g.height);
+    }
+    minutesAtFraction(frac) {
+        const raw = this.minM + frac * (this.maxM - this.minM);
+        return clampMinutes(snapMinutes(raw, this.snapMinutes), this.minM, this.maxM);
+    }
+    /** Snapshot de la geometría de columnas al empezar un drag. Se re-toma solo
+     * cuando el viewport cambia (scroll del body / resize), nunca por frame. */
+    captureDragRects() {
+        const shadow = this.el.shadowRoot;
+        const colsEl = shadow === null || shadow === void 0 ? void 0 : shadow.querySelector('.tg__cols');
+        const cols = shadow === null || shadow === void 0 ? void 0 : shadow.querySelectorAll('.tg__col');
+        if (!colsEl || !cols || !cols.length) {
+            this.colRects = [];
+            this.gridRect = null;
+            return;
+        }
+        const box = colsEl.getBoundingClientRect();
+        this.gridRect = { top: box.top, height: box.height };
+        this.colRects = Array.from(cols).map((c) => {
+            var _a;
+            const r = c.getBoundingClientRect();
+            return { d: (_a = c.dataset.colDate) !== null && _a !== void 0 ? _a : '', left: r.left, right: r.right };
+        });
+    }
+    bindDragViewportListeners(on) {
+        const scroller = this.scrollEl;
+        if (on) {
+            scroller === null || scroller === void 0 ? void 0 : scroller.addEventListener('scroll', this.onDragViewportChange, { passive: true });
+            window.addEventListener('resize', this.onDragViewportChange);
+        }
+        else {
+            scroller === null || scroller === void 0 ? void 0 : scroller.removeEventListener('scroll', this.onDragViewportChange);
+            window.removeEventListener('resize', this.onDragViewportChange);
+        }
+    }
+    /** Marca la interacción en el root (hover/hit-testing off en los chips). No es
+     * @State a propósito: no debe disparar un render por drag. */
+    setInteracting(on) {
+        var _a;
+        (_a = this.rootEl) === null || _a === void 0 ? void 0 : _a.classList.toggle('tg--interacting', on);
+    }
+    /** Build an ISO instant (UTC) for a wall-clock minute-of-day on a given day. */
+    toInstant(dateKey, minutes) {
+        const [year, month, day] = dateKey.split('-').map(Number);
+        const epoch = wallClockToEpoch({ year, month, day, hour: Math.floor(minutes / 60), minute: minutes % 60, second: 0 }, this.timeZone);
+        return toUtcISO(epoch);
+    }
+    isDayInteractable(dateKey) {
+        if (this.minDate && dateKey < this.minDate)
+            return false;
+        if (this.maxDate && dateKey > this.maxDate)
+            return false;
+        return true;
+    }
+    finishSelection() {
+        if (!this.selecting)
+            return;
+        // Flush del frame pendiente: sin esto el rango emitido se quedaría un
+        // pointermove atrás del punto donde el usuario soltó.
+        if (this.selRaf) {
+            cancelAnimationFrame(this.selRaf);
+            this.selRaf = 0;
+        }
+        const pending = this.pendingSel;
+        this.pendingSel = null;
+        if (pending) {
+            const min = this.minutesFromPointer(pending.y, pending.colEl);
+            if (min !== this.selEndMin)
+                this.selEndMin = min;
+        }
+        this.selecting = false;
+        this.setInteracting(false);
+        const dateKey = this.selDate;
+        let a = Math.min(this.selStartMin, this.selEndMin);
+        let b = Math.max(this.selStartMin, this.selEndMin);
+        if (b - a < this.snapMinutes)
+            b = a + this.defaultDurationMinutes; // simple click → default duration
+        b = Math.min(b, this.maxM);
+        const rect = dateKey ? this.selectionRect(dateKey, a, b) : undefined;
+        if (!dateKey)
+            return;
+        const start = this.toInstant(dateKey, a);
+        const end = this.toInstant(dateKey, b);
+        if (new Date(start).getTime() < Date.now()) {
+            this.selDate = null; // past-block: no habrá create, limpiar el ghost
+            return;
+        }
+        // El ghost PERSISTE tras soltar (rango FINAL ajustado — un click simple muestra
+        // el bloque de duración default): referencia visual mientras el host tiene la
+        // bubble/form abiertos (paridad Google). Se limpia vía clearSelection() del
+        // host, al cambiar `events` (refetch post-save) o al iniciar otra selección.
+        this.selStartMin = a;
+        this.selEndMin = b;
+        this.coRangeSelect.emit({ start, end, rect });
+    }
+    /** Viewport rect of the selected span, mirroring the `.tg__selection` ghost's
+     * fraction math over the column's own bounding box. Never throws: falls back to
+     * the whole-column rect, or undefined if the column isn't in the DOM. */
+    selectionRect(dateKey, startMin, endMin) {
+        var _a;
+        const colEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-col-date="${dateKey}"]`);
+        if (!colEl)
+            return undefined;
+        const colRect = colEl.getBoundingClientRect();
+        try {
+            const fracStart = minutesToFraction(startMin, this.minM, this.maxM);
+            const fracEnd = minutesToFraction(endMin, this.minM, this.maxM);
+            return {
+                top: colRect.top + fracStart * colRect.height,
+                left: colRect.left,
+                width: colRect.width,
+                height: (fracEnd - fracStart) * colRect.height,
+            };
+        }
+        catch (_b) {
+            return colRect;
+        }
+    }
+    eventById(id) {
+        return this.events.find((e) => e.id === id);
+    }
+    /** The day column under a clientX (week can drop across days) — resuelto por
+     * aritmética sobre los rects cacheados, sin tocar el DOM. */
+    dateKeyAtX(clientX) {
+        for (const c of this.colRects) {
+            if (clientX >= c.left && clientX < c.right)
+                return c.d || null;
+        }
+        return null;
+    }
+    beginDragInteraction() {
+        this.setInteracting(true);
+        this.bindDragViewportListeners(true);
+        this.paintGhost();
+    }
+    /** Ghost del drag escrito DIRECTO al DOM: el vdom no participa (los campos del
+     * drag son privados a propósito — promoverlos a @State volvería a re-renderizar
+     * la grilla entera por frame). */
+    paintGhost() {
+        const g = this.ghostEl;
+        if (!g)
+            return;
+        const nCols = this.colRects.length;
+        const idx = this.dragDate ? this.colRects.findIndex((c) => c.d === this.dragDate) : -1;
+        if (!nCols || idx < 0) {
+            g.style.display = 'none';
+            return;
+        }
+        const span = this.maxM - this.minM || 1;
+        const fracTop = (this.dragStartMin - this.minM) / span;
+        const fracH = (this.dragEndMin - this.dragStartMin) / span;
+        g.style.display = 'block';
+        g.style.left = `${(idx / nCols) * 100}%`;
+        g.style.width = `calc(${100 / nCols}% - 2px)`;
+        g.style.top = `${fracTop * 100}%`;
+        g.style.height = `${fracH * 100}%`;
+    }
+    hideGhost() {
+        if (this.ghostEl)
+            this.ghostEl.style.display = 'none';
+    }
+    /** Igual que extendSelection: un solo apply por frame (ver comentario allí). */
+    trackDrag(e) {
+        // Fase armado → activo: el drag se compromete recién al cruzar el umbral.
+        // Antes de eso NO se toca interacting/ghost, así el click de un evento
+        // arrastrable llega a su onClick y abre el popover.
+        if (this.dragArmedId && !this.dragId) {
+            const sp = this.dragStartPointer;
+            if (!sp)
+                return;
+            if (Math.hypot(e.clientX - sp.x, e.clientY - sp.y) < DRAG_THRESHOLD_PX)
+                return;
+            this.dragId = this.dragArmedId;
+            this.dragArmedId = null;
+            this.beginDragInteraction();
+        }
+        if (!this.dragId || !this.dragMode || !this.dragDate)
+            return;
+        this.pendingDrag = { x: e.clientX, y: e.clientY };
+        if (this.dragRaf)
+            return;
+        this.dragRaf = requestAnimationFrame(() => {
+            this.dragRaf = 0;
+            const p = this.pendingDrag;
+            this.pendingDrag = null;
+            if (p && this.dragId && this.dragMode && this.dragDate)
+                this.applyDrag(p.x, p.y);
+        });
+    }
+    applyDrag(clientX, clientY) {
+        var _a;
+        if (!this.dragId || !this.dragMode || !this.dragDate)
+            return;
+        if (!this.gridRect)
+            return;
+        const ptr = this.minutesFromCachedY(clientY);
+        if (this.dragMode === 'move') {
+            const targetDay = (_a = this.dateKeyAtX(clientX)) !== null && _a !== void 0 ? _a : this.dragDate;
+            let newStart = ptr - this.dragGrabOffsetMin;
+            newStart = clampMinutes(snapMinutes(newStart, this.snapMinutes), this.minM, this.maxM - this.dragDurationMin);
+            this.dragDate = targetDay;
+            this.dragStartMin = newStart;
+            this.dragEndMin = newStart + this.dragDurationMin;
+        }
+        else {
+            this.dragEndMin = Math.max(this.dragStartMin + this.slotMinutes, ptr);
+        }
+        this.paintGhost();
+    }
+    finishDrag() {
+        // pointerup habiendo solo ARMADO (sin cruzar el umbral) = fue un click, no un
+        // drag: desarmar en silencio y dejar pasar el click nativo → abre el popover.
+        if (this.dragArmedId && !this.dragId) {
+            this.dragArmedId = null;
+            this.dragStartPointer = null;
+            this.dragMode = null;
+            this.dragDate = null;
+            this.origDate = null;
+            return;
+        }
+        if (!this.dragId)
+            return; // pointerup sin drag activo (el listener es global)
+        // Flush del frame pendiente (mismo motivo que en finishSelection).
+        if (this.dragRaf) {
+            cancelAnimationFrame(this.dragRaf);
+            this.dragRaf = 0;
+        }
+        const pending = this.pendingDrag;
+        this.pendingDrag = null;
+        if (pending && this.dragMode && this.dragDate)
+            this.applyDrag(pending.x, pending.y);
+        this.setInteracting(false);
+        this.bindDragViewportListeners(false);
+        this.hideGhost();
+        this.colRects = [];
+        this.gridRect = null;
+        const id = this.dragId;
+        const mode = this.dragMode;
+        const date = this.dragDate;
+        const newStartMin = this.dragStartMin;
+        const newEndMin = this.dragEndMin;
+        const oStartMin = this.origStartMin;
+        const oEndMin = this.origEndMin;
+        const oDate = this.origDate;
+        this.dragId = null;
+        this.dragMode = null;
+        this.dragDate = null;
+        this.origDate = null;
+        this.dragStartPointer = null;
+        if (!id || !mode || !date)
+            return;
+        const ev = this.eventById(id);
+        if (!ev)
+            return;
+        // No-op detection by minutes/day (avoids ISO-canonicalization false negatives).
+        const changed = mode === 'move'
+            ? newStartMin !== oStartMin || date !== oDate
+            : newEndMin !== oEndMin;
+        if (!changed)
+            return;
+        const start = mode === 'move' ? this.toInstant(date, newStartMin) : ev.start;
+        const end = this.toInstant(date, newEndMin);
+        // Past-block on the edge actually being changed (move→start, resize→end).
+        const pastRef = mode === 'move' ? start : end;
+        if (new Date(pastRef).getTime() < Date.now())
+            return;
+        if (!this.isDayInteractable(date))
+            return;
+        this.suppressNextClick = true;
+        // Clear on the next macrotask: a same-target synthetic click fires before this
+        // (and is suppressed); a later unrelated click is not.
+        setTimeout(() => { this.suppressNextClick = false; }, 0);
+        this.coEventDrop.emit({
+            id,
+            start,
+            end,
+            oldStart: ev.start,
+            oldEnd: ev.end,
+            allDay: false,
+        });
+    }
+    shiftFocusDate(dir) {
+        const idx = this.dates.indexOf(this.focusDate);
+        const next = idx + dir;
+        if (next < 0 || next >= this.dates.length)
+            return this.focusDate;
+        return this.dates[next];
+    }
+    renderSelectionGhost() {
+        const a = Math.min(this.selStartMin, this.selEndMin);
+        const b = Math.max(this.selStartMin, this.selEndMin);
+        const top = minutesToFraction(a, this.minM, this.maxM);
+        const bottom = minutesToFraction(Math.max(b, a + this.snapMinutes), this.minM, this.maxM);
+        return (h("div", { class: "tg__selection", style: { top: `${top * 100}%`, height: `${(bottom - top) * 100}%` } }));
+    }
+    renderEventBox(box) {
+        var _a;
+        const ev = box.event;
+        const isPast = ev.endMs <= Date.now();
+        const isExternal = ((_a = ev.extendedProps) === null || _a === void 0 ? void 0 : _a.isExternal) === true;
+        const locked = !this.editable || ev.editable === false;
+        const widthPct = 100 / box.columnCount;
+        const leftPct = box.columnIndex * widthPct;
+        const style = {
+            top: `${box.topFraction * 100}%`,
+            height: `${box.heightFraction * 100}%`,
+            left: `${leftPct}%`,
+            width: `calc(${widthPct}% - 2px)`,
+        };
+        if (ev.backgroundColor) {
+            style['--co-cal-event-bg'] = ev.backgroundColor;
+            const textToken = readableTextToken(this.rootEl, ev.backgroundColor);
+            if (textToken)
+                style['--co-cal-event-text'] = textToken;
+        }
+        return (h("button", { type: "button", key: `${ev.id}-${box.dateKey}`, "data-event-id": ev.id, "data-date": box.dateKey, class: {
+                tg__event: true,
+                'tg__event--past': isPast,
+                'tg__event--external': isExternal,
+                'tg__event--locked': locked,
+                'tg__event--dragging': this.dragId === ev.id,
+                'tg__event--tentative': ev.responseState === 'tentative',
+                'tg__event--cancelled': ev.responseState === 'cancelled' || ev.responseState === 'declined',
+            }, style: style, title: ev.title, "aria-label": ev.title, onClick: (e) => {
+                e.stopPropagation();
+                if (this.suppressNextClick) {
+                    this.suppressNextClick = false;
+                    return;
+                }
+                this.coEventClick.emit({ id: ev.id, rect: e.currentTarget.getBoundingClientRect() });
+            }, onDblClick: (e) => {
+                e.stopPropagation();
+                this.coEventDblClick.emit({ id: ev.id, rect: e.currentTarget.getBoundingClientRect() });
+            }, onPointerDown: (e) => {
+                if (!locked)
+                    this.startMove(e, ev.id);
+            } }, box.isStart && (h("span", { class: "tg__event-time" }, minutesToLabel(box.startMinutes, this.locale))), h("span", { class: "tg__event-title" }, ev.title || '—'), isExternal && (providerBrand(ev)
+            ? h("co-provider-logo", { provider: providerBrand(ev), size: 11, plated: true, class: "tg__event-ext" })
+            : h("co-icon", { name: "link", size: 11, class: "tg__event-ext" })), box.isEnd && !locked && ev.durationEditable !== false && (h("span", { class: "tg__event-resize", onPointerDown: (e) => this.startResize(e, ev.id) }))));
+    }
+    renderAllDayBar(seg, cols, byId) {
+        const ev = byId.get(seg.eventId);
+        if (!ev)
+            return null;
+        const left = (seg.startCol / cols) * 100;
+        const width = ((seg.endCol - seg.startCol + 1) / cols) * 100;
+        const style = {
+            left: `${left}%`,
+            width: `${width}%`,
+            top: `${seg.lane * ALLDAY_LANE_H}px`,
+        };
+        if (ev.backgroundColor) {
+            style['--co-cal-event-bg'] = ev.backgroundColor;
+            const textToken = readableTextToken(this.rootEl, ev.backgroundColor);
+            if (textToken)
+                style['--co-cal-event-text'] = textToken;
+        }
+        return (h("button", { type: "button", key: ev.id, "data-event-id": ev.id, class: {
+                'tg__allday-bar': true,
+                'tg__allday-bar--continues-before': seg.continuesBefore,
+                'tg__allday-bar--continues-after': seg.continuesAfter,
+                'tg__allday-bar--tentative': ev.responseState === 'tentative',
+                'tg__allday-bar--cancelled': ev.responseState === 'cancelled' || ev.responseState === 'declined',
+            }, style: style, title: ev.title, onClick: (e) => {
+                e.stopPropagation();
+                this.coEventClick.emit({ id: ev.id, rect: e.currentTarget.getBoundingClientRect() });
+            }, onDblClick: (e) => {
+                e.stopPropagation();
+                this.coEventDblClick.emit({ id: ev.id, rect: e.currentTarget.getBoundingClientRect() });
+            } }, ev.title || '—'));
+    }
+    /** Los 3 cómputos de layout del render, memoizados por IDENTIDAD de inputs
+     * (`events` llega memoizado del shell): un re-render por drag/now-tick/focus
+     * no vuelve a empaquetar la semana. */
+    getLayouts(dates) {
+        const datesKey = dates.join(',');
+        const c = this.layoutCache;
+        if (c &&
+            c.events === this.events &&
+            c.datesKey === datesKey &&
+            c.tz === this.timeZone &&
+            c.minM === this.minM &&
+            c.maxM === this.maxM) {
+            return c;
+        }
+        const layout = layoutTimeGrid(this.events, dates, {
+            timeZone: this.timeZone,
+            minMinutes: this.minM,
+            maxMinutes: this.maxM,
+        });
+        const allDay = layoutAllDay(this.events, dates, { timeZone: this.timeZone });
+        const byId = new Map(this.events.map((e) => [e.id, e]));
+        this.layoutCache = {
+            events: this.events,
+            datesKey,
+            tz: this.timeZone,
+            minM: this.minM,
+            maxM: this.maxM,
+            layout,
+            allDay,
+            byId,
+        };
+        return this.layoutCache;
+    }
+    render() {
+        const dates = this.visibleDates();
+        const { layout, allDay, byId } = this.getLayouts(dates);
+        const short = getWeekdayLabels(this.locale, 0, 'short');
+        const colsTemplate = `repeat(${dates.length}, 1fr)`;
+        const today = todayYMD();
+        // La grilla ya no se dibuja con divs por slot: la altura es explícita y las
+        // líneas de hora salen de un background repetido (ver .tg__col en el CSS).
+        const bodyHeight = `calc(${this.slotCount()} * var(--co-cal-slot-h))`;
+        const hourVars = {
+            '--co-cal-hour-h': `calc(${60 / this.slotM} * var(--co-cal-slot-h))`,
+            '--co-cal-hour-offset': `calc(${((60 - (this.minM % 60)) % 60) / this.slotM} * var(--co-cal-slot-h))`,
+        };
+        return (h("div", { key: '6714fb717616dff758156f0fcf6d50370bcc52e0', class: "tg", tabIndex: 0, onKeyDown: this.handleKeyDown, ref: (el) => (this.rootEl = el) }, h("div", { key: '86aa3ebcc5c8c3e66fc200b25819b8806a8883fa', class: "tg__head" }, h("div", { key: '63353e0fb0765f90ecaf6942bad3323497638a17', class: "tg__head-spacer" }), h("div", { key: '842770c40be192de75e8e3d8635d2f78976ee492', class: "tg__head-days", style: { gridTemplateColumns: colsTemplate } }, dates.map((d) => {
+            const ymd = parseISO(d);
+            const dow = utcDayOfWeek(d);
+            return (h("div", { class: { 'tg__head-day': true, 'tg__head-day--today': compareYMD(d, today) === 0 } }, h("span", { class: "tg__head-dow" }, short[dow]), h("span", { class: "tg__head-num" }, ymd.day)));
+        }))), this.allDaySlot && (h("div", { key: 'f78e9159e84ecc4a0259c296e1120830b2a2513b', class: "tg__allday" }, h("div", { key: '255ad5c8e6a8c93377c2898acb8ecc06e0a0eb6d', class: "tg__allday-axis" }, gmtLabel(this.timeZone, dates[0])), h("div", { key: '5023271e34910ac5dead15f4b4a4bd4c588b6594', class: "tg__allday-lane", style: { height: `${Math.max(1, allDay.laneCount) * ALLDAY_LANE_H + 4}px` } }, allDay.segments.map((seg) => this.renderAllDayBar(seg, dates.length, byId))))), h("div", { key: '5d37824151562d8a53906ecb059d96afdee93d3e', class: "tg__scroll", ref: (el) => (this.scrollEl = el) }, h("div", { key: 'ebeac3733271bd3ebcaca2343a9f5f01285a7f05', class: "tg__body" }, h("div", { key: '9eed6c09dfe67a9613c0641dbc305ba594312166', class: "tg__axis", style: { height: bodyHeight } }, this.hourList().map((m) => (h("span", { class: "tg__axis-hour", style: { top: `${minutesToFraction(m, this.minM, this.maxM) * 100}%` } }, hourLabel(m, this.locale))))), h("div", { key: 'bc8f8c0e5bf00c8fc92bb6c823fa9ba6c321ad2c', class: "tg__cols", style: Object.assign({ gridTemplateColumns: colsTemplate, height: bodyHeight }, hourVars) }, dates.map((d, i) => {
+            var _a;
+            const isToday = compareYMD(d, today) === 0;
+            return (h("div", { class: { tg__col: true, 'tg__col--today': isToday }, "data-col-date": d, onPointerDown: (e) => this.startSelection(e, d, e.currentTarget), onPointerMove: (e) => this.extendSelection(e, e.currentTarget) }, this.loading
+                ? SKELETON_BOXES[i % SKELETON_BOXES.length].map(([top, height]) => (h("div", { class: "tg__event-skeleton", "aria-hidden": "true", style: { top: `${top}%`, height: `${height}%` } }, h("co-skeleton", { variant: "rect", width: "100%", height: "100%" }))))
+                : ((_a = layout.timed[d]) !== null && _a !== void 0 ? _a : []).map((box) => this.renderEventBox(box)), this.selDate === d && this.renderSelectionGhost(), this.focusDate === d && (h("div", { class: "tg__focus", style: {
+                    top: `${minutesToFraction(this.focusMin, this.minM, this.maxM) * 100}%`,
+                    height: `${(minutesToFraction(this.focusMin + this.slotMinutes, this.minM, this.maxM) - minutesToFraction(this.focusMin, this.minM, this.maxM)) * 100}%`,
+                } })), this.nowIndicator && this.nowDay === d && this.nowMinutes >= this.minM && this.nowMinutes < this.maxM && (h("div", { class: "tg__now", style: { top: `${minutesToFraction(this.nowMinutes, this.minM, this.maxM) * 100}%` } }))));
+        }), h("div", { class: "tg__drag-ghost", key: "tg-drag-ghost", ref: (el) => (this.ghostEl = el) }))))));
+    }
+    static get is() { return "co-calendar-timegrid"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-calendar-timegrid.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-calendar-timegrid.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "events": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "NormalizedEvent[]",
+                    "resolved": "NormalizedEvent[]",
+                    "references": {
+                        "NormalizedEvent": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-calendar-utils",
+                            "id": "../calendar-utils/dist/index.d.ts::NormalizedEvent",
+                            "referenceLocation": "NormalizedEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "dates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible day keys \"YYYY-MM-DD\" (7 = week, 1 = day)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "'es-CO'"
+            },
+            "timeZone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "time-zone"
+            },
+            "editable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "editable",
+                "defaultValue": "true"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "true"
+            },
+            "minDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-date"
+            },
+            "maxDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-date"
+            },
+            "slotMinutes": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slot-minutes",
+                "defaultValue": "15"
+            },
+            "snapMinutes": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "snap-minutes",
+                "defaultValue": "15"
+            },
+            "defaultDurationMinutes": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-duration-minutes",
+                "defaultValue": "60"
+            },
+            "scrollTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll-time",
+                "defaultValue": "'07:00'"
+            },
+            "nowIndicator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "now-indicator",
+                "defaultValue": "true"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cargando: en vez de los eventos pinta bloques skeleton en las columnas.\nLa grilla (eje de horas, l\u00EDneas, cabecera de d\u00EDas, franja de todo-el-d\u00EDa)\nse mantiene: lo \u00FAnico que todav\u00EDa no se sabe son los eventos."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "allDaySlot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "all-day-slot",
+                "defaultValue": "true"
+            },
+            "minTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-time",
+                "defaultValue": "'00:00'"
+            },
+            "maxTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-time",
+                "defaultValue": "'24:00'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "nowMinutes": {},
+            "nowDay": {},
+            "focusDate": {},
+            "focusMin": {},
+            "selDate": {},
+            "selStartMin": {},
+            "selEndMin": {},
+            "dragId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coRangeSelect",
+                "name": "coRangeSelect",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A time range was selected on an empty area (create request)."
+                },
+                "complexType": {
+                    "original": "{\n    start: string;\n    end: string;\n    /** Viewport-anchored rect of the selected area, for the host to anchor a quick-create bubble. */\n    rect?: { top: number; left: number; width: number; height: number };\n  }",
+                    "resolved": "{ start: string; end: string; rect?: { top: number; left: number; width: number; height: number; } | undefined; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coEventClick",
+                "name": "coEventClick",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ id: string; rect?: DOMRect }",
+                    "resolved": "{ id: string; rect?: DOMRect | undefined; }",
+                    "references": {
+                        "DOMRect": {
+                            "location": "global",
+                            "id": "global::DOMRect"
+                        }
+                    }
+                }
+            }, {
+                "method": "coEventDrop",
+                "name": "coEventDrop",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    id: string; start: string; end: string; oldStart: string; oldEnd: string; allDay: boolean;\n  }",
+                    "resolved": "{ id: string; start: string; end: string; oldStart: string; oldEnd: string; allDay: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coEventDblClick",
+                "name": "coEventDblClick",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Doble activaci\u00F3n de un chip (direct-edit request del host)."
+                },
+                "complexType": {
+                    "original": "{ id: string; rect?: DOMRect }",
+                    "resolved": "{ id: string; rect?: DOMRect | undefined; }",
+                    "references": {
+                        "DOMRect": {
+                            "location": "global",
+                            "id": "global::DOMRect"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Limpia el resaltado persistente de selecci\u00F3n (lo llama el host al cerrar\nsu bubble/form de creaci\u00F3n).",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "events",
+                "methodName": "onEventsChange"
+            }];
+    }
+}
+// ── helpers ─────────────────────────────────────────────────────────────────
+function hhmmToMinutes(hhmm, fallback) {
+    const m = /^(\d{1,2}):(\d{2})$/.exec(hhmm);
+    if (!m)
+        return fallback;
+    return Number(m[1]) * 60 + Number(m[2]);
+}
+/** UTC day-of-week (0=Sun) of a date-only key — tz-independent. */
+function utcDayOfWeek(dateKey) {
+    const [y, mo, d] = dateKey.split('-').map(Number);
+    return new Date(Date.UTC(y, mo - 1, d)).getUTCDay();
+}
+// Intl.DateTimeFormat es caro de construir y estos tres labels se recalculan por
+// frame sobre un dominio ACOTADO (≤96 minutos distintos, ≤24 horas, 1-2 locales):
+// cacheamos el RESULTADO (y el formatter, para el miss). Higiene: clear a las 2000
+// entradas — inalcanzable en uso normal, solo protege de iteración patológica.
+const MINUTE_LABEL_CACHE = new Map();
+const MINUTE_FMT_CACHE = new Map();
+const HOUR_LABEL_CACHE = new Map();
+const HOUR_FMT_CACHE = new Map();
+const GMT_LABEL_CACHE = new Map();
+function minutesToLabel(minutes, locale) {
+    const key = `${locale}|${minutes}`;
+    const hit = MINUTE_LABEL_CACHE.get(key);
+    if (hit !== undefined)
+        return hit;
+    let fmt = MINUTE_FMT_CACHE.get(locale);
+    if (!fmt) {
+        fmt = new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit' });
+        MINUTE_FMT_CACHE.set(locale, fmt);
+    }
+    const h = Math.floor(minutes / 60);
+    const m = minutes % 60;
+    const out = fmt.format(new Date(2000, 0, 1, h, m));
+    if (MINUTE_LABEL_CACHE.size > 2000)
+        MINUTE_LABEL_CACHE.clear();
+    MINUTE_LABEL_CACHE.set(key, out);
+    return out;
+}
+/** Bloques del skeleton por columna, `[top%, alto%]` sobre el alto del día.
+ *  Patrón FIJO (jamás random: tiene que verse igual entre renders) y desparejo
+ *  entre columnas, como una agenda de verdad. */
+const SKELETON_BOXES = [
+    [[26, 8], [42, 12]],
+    [[30, 14]],
+    [[24, 6], [38, 9], [56, 7]],
+    [[34, 11], [52, 6]],
+    [[28, 9]],
+    [[40, 13], [60, 8]],
+    [[32, 7], [46, 10]],
+];
+/** Marca del evento externo (`co-provider-logo`), o '' si no se reconoce — el
+ *  llamador cae al ícono genérico de enlace. */
+function providerBrand(ev) {
+    var _a, _b;
+    const p = String((_b = (_a = ev.extendedProps) === null || _a === void 0 ? void 0 : _a.provider) !== null && _b !== void 0 ? _b : '').toLowerCase();
+    if (p.includes('google'))
+        return 'google';
+    if (p.includes('microsoft') || p.includes('outlook'))
+        return 'microsoft';
+    return '';
+}
+/** Hour-only 12h label for the time axis, e.g. "10 a. m." / "1 p. m." (Google style).
+ * hour12 forzado: locales 24h (p.ej. "es" pelado) darían números sueltos sin am/pm. */
+function hourLabel(minutes, locale) {
+    const key = `${locale}|${minutes}`;
+    const hit = HOUR_LABEL_CACHE.get(key);
+    if (hit !== undefined)
+        return hit;
+    let fmt = HOUR_FMT_CACHE.get(locale);
+    if (!fmt) {
+        fmt = new Intl.DateTimeFormat(locale, { hour: 'numeric', hour12: true });
+        HOUR_FMT_CACHE.set(locale, fmt);
+    }
+    const h = Math.floor(minutes / 60);
+    const out = fmt.format(new Date(2000, 0, 1, h, 0));
+    if (HOUR_LABEL_CACHE.size > 2000)
+        HOUR_LABEL_CACHE.clear();
+    HOUR_LABEL_CACHE.set(key, out);
+    return out;
+}
+/** Timezone offset label for the axis corner, e.g. "GMT-05" (like Google Calendar). */
+function gmtLabel(timeZone, refYMD) {
+    if (!timeZone)
+        return '';
+    const key = `${timeZone}|${refYMD !== null && refYMD !== void 0 ? refYMD : ''}`;
+    const hit = GMT_LABEL_CACHE.get(key);
+    if (hit !== undefined)
+        return hit;
+    const out = computeGmtLabel(timeZone, refYMD);
+    if (GMT_LABEL_CACHE.size > 2000)
+        GMT_LABEL_CACHE.clear();
+    GMT_LABEL_CACHE.set(key, out);
+    return out;
+}
+function computeGmtLabel(timeZone, refYMD) {
+    var _a, _b;
+    try {
+        const d = new Date(`${refYMD !== null && refYMD !== void 0 ? refYMD : '2026-01-01'}T12:00:00Z`);
+        const parts = new Intl.DateTimeFormat('en-US', {
+            timeZone,
+            timeZoneName: 'shortOffset',
+        }).formatToParts(d);
+        const raw = (_b = (_a = parts.find((p) => p.type === 'timeZoneName')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+        const m = raw.match(/GMT([+-])(\d{1,2})(?::(\d{2}))?/);
+        if (!m)
+            return raw;
+        const hh = m[2].padStart(2, '0');
+        return m[3] ? `GMT${m[1]}${hh}:${m[3]}` : `GMT${m[1]}${hh}`;
+    }
+    catch (_c) {
+        return '';
+    }
+}