@prolibu-suite/cobalt-core 0.7.0 → 0.9.0

package/dist/cjs/co-calendar-month_2.cjs.entry.js

@@ -0,0 +1,1601 @@
+'use strict';
+
+var index = require('./index-DK-2Lzmf.js');
+var dates = require('./dates-TQLHlFd2.js');
+var tz = require('./tz-Dgom0W69.js');
+var time = require('./time-LBHtzLHe.js');
+
+/**
+ * interval.ts — overlap detection, greedy column packing, and day splitting.
+ *
+ * This is the math a calendar library would give you "for free" and the part the
+ * pre-mortem flagged as the main build-own risk — so it lives in pure TS with
+ * pathological-case tests rather than inside a component.
+ *
+ * All ranges are END-EXCLUSIVE: [start, end). Touching ranges (a.end === b.start)
+ * do NOT overlap.
+ */
+/**
+ * Greedy column packing for overlapping timed events (time-grid layout).
+ *
+ * Events are grouped into collision clusters (transitively-overlapping sets) and
+ * within each cluster placed into the first column whose previous occupant has
+ * already ended. Every event in a cluster shares the cluster's column count, so
+ * widths are `1 / columnCount`. Deterministic and order-stable.
+ */
+function packColumns(items, getStart, getEnd) {
+    const sorted = [...items].sort((a, b) => getStart(a) - getStart(b) || getEnd(a) - getEnd(b));
+    const result = [];
+    let clusterIndices = []; // indices into `result` for the open cluster
+    let columnEnds = []; // last end time per open column
+    let clusterMaxEnd = -Infinity;
+    const flush = () => {
+        const count = columnEnds.length;
+        for (const i of clusterIndices)
+            result[i].columnCount = count;
+        clusterIndices = [];
+        columnEnds = [];
+        clusterMaxEnd = -Infinity;
+    };
+    for (const item of sorted) {
+        const start = getStart(item);
+        const end = getEnd(item);
+        // No active column still running past `start` → the cluster is closed.
+        if (clusterIndices.length && start >= clusterMaxEnd)
+            flush();
+        let col = -1;
+        for (let i = 0; i < columnEnds.length; i++) {
+            if (columnEnds[i] <= start) {
+                col = i;
+                break;
+            }
+        }
+        if (col === -1) {
+            col = columnEnds.length;
+            columnEnds.push(end);
+        }
+        else {
+            columnEnds[col] = end;
+        }
+        result.push({ event: item, columnIndex: col, columnCount: 1 });
+        clusterIndices.push(result.length - 1);
+        clusterMaxEnd = Math.max(clusterMaxEnd, end);
+    }
+    flush();
+    return result;
+}
+/**
+ * Split a timed instant range into per-wall-clock-day segments in `timeZone`,
+ * each clamped to that day's [0,1440] minute window. An event crossing midnight
+ * yields one segment per day. End-exclusive: an event ending exactly at midnight
+ * does NOT produce an empty trailing segment.
+ */
+function splitByDay(start, end, timeZone) {
+    const startMs = tz.toEpoch(start);
+    const endMs = tz.toEpoch(end);
+    if (endMs <= startMs)
+        return [];
+    const segments = [];
+    let dateKey = tz.zonedDateKey(startMs, timeZone);
+    let dayStartMs = midnightMs(dateKey, timeZone);
+    // Safety cap: a single event spanning >366 days is almost certainly a bug.
+    for (let guard = 0; guard < 366 && dayStartMs < endMs; guard++) {
+        const nextKey = dates.addDays(dateKey, 1);
+        const nextDayStartMs = midnightMs(nextKey, timeZone);
+        const segStartMs = Math.max(startMs, dayStartMs);
+        const segEndMs = Math.min(endMs, nextDayStartMs);
+        segments.push({
+            dateKey,
+            startMinutes: segStartMs === dayStartMs ? 0 : tz.zonedMinutesOfDay(segStartMs, timeZone),
+            endMinutes: segEndMs === nextDayStartMs ? 1440 : tz.zonedMinutesOfDay(segEndMs, timeZone),
+            isStart: segStartMs === startMs,
+            isEnd: segEndMs === endMs,
+        });
+        dateKey = nextKey;
+        dayStartMs = nextDayStartMs;
+    }
+    return segments;
+}
+/**
+ * Local-midnight epoch for a "YYYY-MM-DD" wall-clock day in `timeZone`.
+ *
+ * Memoized module-level: a midnight for a given (timeZone, dateKey) pair is an
+ * immutable fact, but `splitByDay` recomputes it once per event AND once per day
+ * of that event's span — a week view re-derives the same ~8 unique midnights
+ * dozens of times per render. Each miss costs a `wallClockToEpoch` call (2-3
+ * `formatToParts` round-trips), so caching turns O(events × days) Intl work into
+ * O(unique days).
+ */
+const MIDNIGHT_CACHE = new Map();
+function midnightMs(dateKey, timeZone) {
+    const key = `${timeZone}|${dateKey}`;
+    let ms = MIDNIGHT_CACHE.get(key);
+    if (ms === undefined) {
+        const [year, month, day] = dateKey.split('-').map(Number);
+        ms = tz.wallClockToEpoch({ year, month, day, hour: 0, minute: 0, second: 0 }, timeZone);
+        // Hygiene cap, not an LRU: bounds unbounded growth from pathological callers
+        // (e.g. programmatic iteration over years of dates) without adding eviction
+        // bookkeeping cost to the hot path. Legitimate usage (calendar views) touches
+        // a few dozen unique days per session, far under this ceiling.
+        if (MIDNIGHT_CACHE.size > 1000)
+            MIDNIGHT_CACHE.clear();
+        MIDNIGHT_CACHE.set(key, ms);
+    }
+    return ms;
+}
+
+/**
+ * layout-month.ts — lane assignment for the month grid.
+ *
+ * Multi-day (all-day) events render as continuous bars spanning day cells; they
+ * must keep a stable vertical lane across the days they cover, and overlapping
+ * events must not share a lane. Single-day chips (timed events, single all-day)
+ * are degenerate one-column bars. Days exceeding `maxLanes` report an overflow
+ * count for the "+N more" affordance.
+ *
+ * Days are addressed by a week matrix of "YYYY-MM-DD" keys (e.g. from
+ * `getMonthMatrix` in `@prolibu-suite/cobalt-date-utils`). Lexicographic string
+ * comparison is correct for ISO dates, so no Date objects are needed here.
+ */
+/** Inclusive day span of an event in calendar days. */
+function eventDaySpan(event, timeZone) {
+    if (event.allDay) {
+        // end is exclusive → last visible day is end - 1.
+        const firstDay = event.start.slice(0, 10);
+        const lastDay = dates.addDays(event.end.slice(0, 10), -1);
+        if (dates.compareYMD(lastDay, firstDay) < 0)
+            return { event, firstDay, lastDay: firstDay };
+        return { event, firstDay, lastDay };
+    }
+    // Timed events occupy their (wall-clock) start day in the month grid.
+    const day = timeZone ? tz.zonedDateKey(event.startMs, timeZone) : event.start.slice(0, 10);
+    return { event, firstDay: day, lastDay: day };
+}
+function layoutMonth(events, weeks, options = {}) {
+    const maxLanes = options.maxLanes ?? Infinity;
+    const segments = [];
+    const overflow = {};
+    let laneCount = 0;
+    const spans = events
+        .map((e) => eventDaySpan(e, options.timeZone))
+        .filter((s) => s !== null);
+    weeks.forEach((days, weekIndex) => {
+        if (!days.length)
+            return;
+        const weekStart = days[0];
+        const weekEnd = days[days.length - 1];
+        const colOf = new Map(days.map((d, i) => [d, i]));
+        // Candidate segments intersecting this week.
+        const candidates = spans
+            .filter((s) => dates.compareYMD(s.firstDay, weekEnd) <= 0 && dates.compareYMD(weekStart, s.lastDay) <= 0)
+            .map((s) => {
+            const segFirst = dates.compareYMD(s.firstDay, weekStart) >= 0 ? s.firstDay : weekStart;
+            const segLast = dates.compareYMD(s.lastDay, weekEnd) <= 0 ? s.lastDay : weekEnd;
+            return {
+                span: s,
+                startCol: colOf.get(segFirst) ?? 0,
+                endCol: colOf.get(segLast) ?? days.length - 1,
+            };
+        })
+            // Multi-day/earlier events claim lanes first → stable, readable bars.
+            .sort((a, b) => a.startCol - b.startCol ||
+            b.endCol - b.startCol - (a.endCol - a.startCol) ||
+            a.span.event.startMs - b.span.event.startMs ||
+            (a.span.event.id < b.span.event.id ? -1 : 1));
+        const placed = [];
+        for (const cand of candidates) {
+            let lane = 0;
+            while (placed.some((p) => p.lane === lane && !(cand.endCol < p.startCol || cand.startCol > p.endCol))) {
+                lane++;
+            }
+            placed.push({ lane, startCol: cand.startCol, endCol: cand.endCol });
+            laneCount = Math.max(laneCount, lane + 1);
+            segments.push({
+                eventId: cand.span.event.id,
+                weekIndex,
+                lane,
+                startCol: cand.startCol,
+                endCol: cand.endCol,
+                isStart: dates.compareYMD(cand.span.firstDay, weekStart) >= 0,
+                isEnd: dates.compareYMD(cand.span.lastDay, weekEnd) <= 0,
+                continuesBefore: dates.compareYMD(cand.span.firstDay, weekStart) < 0,
+                continuesAfter: dates.compareYMD(cand.span.lastDay, weekEnd) > 0,
+            });
+        }
+    });
+    if (Number.isFinite(maxLanes)) {
+        for (const seg of segments) {
+            if (seg.lane >= maxLanes) {
+                for (let c = seg.startCol; c <= seg.endCol; c++) {
+                    const dk = weeks[seg.weekIndex][c];
+                    overflow[dk] = (overflow[dk] ?? 0) + 1;
+                }
+            }
+        }
+    }
+    return { segments, overflow, laneCount };
+}
+
+/**
+ * layout-allday.ts — lane assignment for the time-grid all-day band.
+ *
+ * The all-day band is a single row spanning the visible `dateKeys` (7 for week,
+ * 1 for day). Multi-day all-day events render as continuous bars across the days
+ * they cover, keeping a stable lane and never sharing a lane with an overlapping
+ * bar. Reuses `layoutMonth` with a single "week" = `dateKeys`; timed events are
+ * excluded (they live in the time grid, not the band).
+ */
+function layoutAllDay(events, dateKeys, options = {}) {
+    const allDayEvents = events.filter((e) => e.allDay);
+    const m = layoutMonth(allDayEvents, [dateKeys], options);
+    return {
+        segments: m.segments.map((s) => ({
+            eventId: s.eventId,
+            lane: s.lane,
+            startCol: s.startCol,
+            endCol: s.endCol,
+            isStart: s.isStart,
+            isEnd: s.isEnd,
+            continuesBefore: s.continuesBefore,
+            continuesAfter: s.continuesAfter,
+        })),
+        overflow: m.overflow,
+        laneCount: m.laneCount,
+    };
+}
+
+/**
+ * layout-timegrid.ts — positions timed events on the Week/Day time-grid.
+ *
+ * Pure composition of the engine's existing primitives: splitByDay (tz-aware,
+ * DST-safe, per-day segments) + packColumns (overlap → columns) + minutesToFraction
+ * (px positioning). All-day events are routed to a separate per-day bucket.
+ * No DOM, no framework, no new timezone math.
+ */
+function layoutTimeGrid(events, dateKeys, options) {
+    const minM = options.minMinutes ?? 0;
+    const maxM = options.maxMinutes ?? time.MINUTES_PER_DAY;
+    const visible = new Set(dateKeys);
+    const timed = {};
+    const allDay = {};
+    const segsByDay = {};
+    for (const k of dateKeys) {
+        timed[k] = [];
+        allDay[k] = [];
+        segsByDay[k] = [];
+    }
+    for (const ev of events) {
+        if (ev.allDay) {
+            const startDay = ev.start.slice(0, 10);
+            const endDay = ev.end.slice(0, 10); // end-exclusive
+            for (const k of dateKeys) {
+                if (k >= startDay && k < endDay)
+                    allDay[k].push(ev);
+            }
+            continue;
+        }
+        for (const s of splitByDay(ev.start, ev.end, options.timeZone)) {
+            if (!visible.has(s.dateKey))
+                continue;
+            const startMinutes = time.clampMinutes(s.startMinutes, minM, maxM);
+            const endMinutes = time.clampMinutes(s.endMinutes, minM, maxM);
+            if (endMinutes <= startMinutes)
+                continue; // fully outside the window
+            segsByDay[s.dateKey].push({
+                event: ev,
+                startMinutes,
+                endMinutes,
+                isStart: s.isStart && startMinutes === s.startMinutes,
+                isEnd: s.isEnd && endMinutes === s.endMinutes,
+            });
+        }
+    }
+    for (const k of dateKeys) {
+        const packed = packColumns(segsByDay[k], (s) => s.startMinutes, (s) => s.endMinutes);
+        timed[k] = packed.map((p) => {
+            const top = time.minutesToFraction(p.event.startMinutes, minM, maxM);
+            const bottom = time.minutesToFraction(p.event.endMinutes, minM, maxM);
+            return {
+                event: p.event.event,
+                dateKey: k,
+                startMinutes: p.event.startMinutes,
+                endMinutes: p.event.endMinutes,
+                topFraction: top,
+                heightFraction: bottom - top,
+                columnIndex: p.columnIndex,
+                columnCount: p.columnCount,
+                isStart: p.event.isStart,
+                isEnd: p.event.isEnd,
+            };
+        });
+    }
+    return { timed, allDay };
+}
+
+/**
+ * Color de texto legible sobre el fondo de un evento de calendario.
+ *
+ * El host pinta los estados con TOKENS (`var(--co-color-primary-azul)`), no con
+ * hex — es la regla del design system. El cálculo de contraste necesita un color
+ * REAL, así que el token se resuelve contra el host antes de medir luminancia.
+ */
+/** Cache token→hex. La clave incluye el tema: light y dark pueden resolver
+ *  distinto el MISMO token, y servir el valor viejo daría texto ilegible. */
+const RESOLVED = new Map();
+function currentTheme() {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = document.documentElement) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.theme) !== null && _c !== void 0 ? _c : '';
+}
+/**
+ * Resuelve `var(--x)` / `var(--x, fallback)` contra `host`. Un valor que no es
+ * `var(...)` (hex, rgb, nombre CSS) vuelve tal cual.
+ */
+function resolveCssColor(host, value) {
+    const raw = (value !== null && value !== void 0 ? value : '').trim();
+    if (!raw.startsWith('var(') || !host)
+        return raw;
+    const key = `${currentTheme()}|${raw}`;
+    const hit = RESOLVED.get(key);
+    if (hit !== undefined)
+        return hit;
+    const inner = raw.slice(4, raw.lastIndexOf(')'));
+    const [name, ...fallback] = inner.split(',');
+    const resolved = getComputedStyle(host).getPropertyValue(name.trim()).trim() || fallback.join(',').trim();
+    RESOLVED.set(key, resolved);
+    return resolved;
+}
+/**
+ * Token de color de texto legible sobre `bg` (luminancia YIQ), o `''` cuando el
+ * color no se puede medir — en ese caso el llamador NO debe escribir la
+ * variable: pisarla con un `var(--co-cal-event-text)` la vuelve
+ * AUTORREFERENTE, la declaración se invalida y el texto termina heredando el
+ * color del calendario (negro sobre un chip de color).
+ */
+function readableTextToken(host, bg) {
+    const hex = resolveCssColor(host, bg).replace('#', '').trim();
+    if (hex.length !== 3 && hex.length !== 6)
+        return '';
+    const full = hex.length === 3 ? hex.split('').map((c) => c + c).join('') : hex;
+    const r = parseInt(full.slice(0, 2), 16);
+    const g = parseInt(full.slice(2, 4), 16);
+    const b = parseInt(full.slice(4, 6), 16);
+    if ([r, g, b].some((n) => Number.isNaN(n)))
+        return '';
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq >= 150 ? 'var(--co-cal-event-text-dark)' : 'var(--co-cal-event-text-light)';
+}
+
+const coCalendarMonthCss = () => `:host{display:block;font-family:var(--co-font-family-primary);--co-cal-daynum-h:24px;--co-cal-lane-h:22px;--co-cal-min-week-h:92px;--co-cal-gap:2px;--co-cal-surface:var(--co-semantic-surface-page);--co-cal-border:var(--co-semantic-border-default);--co-cal-text:var(--co-semantic-text-default);--co-cal-text-muted:var(--co-semantic-text-muted);--co-cal-hover:var(--co-semantic-surface-hover);--co-cal-today-ring:var(--co-color-primary-azul);--co-cal-event-radius:6px;--co-cal-elevation-hover:var(--co-shadow-lg);--co-cal-event-bg:var(--co-color-primary-azul);--co-cal-event-border:transparent;--co-cal-event-text:var(--co-color-base-blanco, #fff);--co-cal-event-text-light:var(--co-color-base-blanco, #fff);--co-cal-event-text-dark:var(--co-semantic-text-default)}.cal-month{display:flex;flex-direction:column;height:100%;border-radius:var(--co-border-radius-xs);overflow:hidden;background:var(--co-cal-surface)}.cal-month__dow{display:grid;grid-template-columns:repeat(7, 1fr);border-bottom:1px solid var(--co-cal-border)}.cal-month__dow-cell{padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-10, 10px);font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--co-cal-text-muted);text-align:right}.cal-month__week{position:relative;min-height:var(--co-cal-min-week-h);flex:1 0 auto}.cal-month__week:not(:last-child){border-bottom:1px solid var(--co-cal-border)}.cal-month__days{display:grid;grid-template-columns:repeat(7, 1fr);height:100%;position:absolute;inset:0}.cal-month__day{border-right:1px solid var(--co-cal-border);padding:var(--co-spacing-xxs);cursor:pointer;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.cal-month__day:last-child{border-right:0}.cal-month__day:hover{background:var(--co-cal-hover)}.cal-month__day:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:-2px}.cal-month__day--outside .cal-month__daynum{color:var(--co-cal-text-muted)}.cal-month__day--disabled{cursor:not-allowed;background:color-mix(in srgb, var(--co-cal-border) 20%, transparent)}.cal-month__day--drag-over{background:color-mix(in srgb, var(--co-cal-today-ring) 14%, transparent);box-shadow:inset 0 0 0 2px var(--co-cal-today-ring)}.cal-month__day--selected{background:color-mix(in srgb, var(--co-cal-today-ring) 10%, transparent)}.cal-month__daynum{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-left:auto;float:right;font-size:var(--co-font-size-12, 12px);color:var(--co-cal-text);border-radius:var(--co-border-radius-full)}.cal-month__day--today .cal-month__daynum{background:var(--co-cal-today-ring);color:var(--co-color-base-blanco, #fff);font-weight:600}.cal-month__events{position:absolute;inset:0;pointer-events:none;}.cal-chip,.cal-month__more{position:absolute;height:calc(var(--co-cal-lane-h) - 3px);box-sizing:border-box;pointer-events:auto;display:flex;align-items:center;gap:var(--co-spacing-xxs);margin:0 3px;padding:0 var(--co-spacing-xs);border:1px solid var(--co-cal-event-border);border-radius:var(--co-cal-event-radius);font-family:inherit;font-size:var(--co-font-size-12, 12px);line-height:1;text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap}.cal-chip{background:var(--co-cal-event-bg);color:var(--co-cal-event-text);user-select:none;-webkit-user-select:none;touch-action:none}.cal-month__chip-skeleton{position:absolute;height:calc(var(--co-cal-lane-h) - 3px);box-sizing:border-box;margin:0 3px;border-radius:var(--co-cal-event-radius);overflow:hidden;pointer-events:none}.cal-month__chip-skeleton co-skeleton{display:block;block-size:100%}.cal-chip--all-day:hover{filter:brightness(0.95);box-shadow:var(--co-cal-elevation-hover)}.cal-chip:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.cal-chip--all-day{font-weight:500}.cal-chip__dot{flex:0 0 auto;width:7px;height:7px;border-radius:var(--co-border-radius-full);background:var(--co-cal-event-bg)}.cal-chip:not(.cal-chip--all-day){background:transparent;color:var(--co-cal-text);border-color:transparent}.cal-chip:not(.cal-chip--all-day):hover{background:var(--co-cal-hover);filter:none}.cal-chip__time{flex:0 0 auto;color:var(--co-cal-text-muted);font-variant-numeric:tabular-nums}.cal-chip__title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.cal-chip__ext{flex:0 0 auto;margin-inline-start:auto;opacity:0.8}.cal-chip--past{opacity:0.55}.cal-chip--locked{cursor:default}.cal-chip--external{border-style:dashed}.cal-chip--dragging{opacity:0.4}.cal-month--interacting .cal-chip{pointer-events:none}.cal-chip--all-day.cal-chip--tentative{background-image:repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0 4px, transparent 4px 8px)}.cal-chip--cancelled{opacity:0.6}.cal-chip--cancelled .cal-chip__title{text-decoration:line-through}.cal-chip--continues-before{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0}.cal-chip--continues-after{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}.cal-month__more{background:transparent;color:var(--co-cal-text-muted);border-color:transparent;font-weight:600;font-size:var(--co-font-size-11, 11px)}.cal-month__more:hover{background:var(--co-cal-hover);color:var(--co-cal-text)}`;
+
+const CoCalendarMonth = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coDaySelect = index.createEvent(this, "coDaySelect", 1);
+        this.coEventClick = index.createEvent(this, "coEventClick", 1);
+        this.coEventDrop = index.createEvent(this, "coEventDrop", 1);
+        this.coMoreClick = index.createEvent(this, "coMoreClick", 1);
+        this.coEventDblClick = index.createEvent(this, "coEventDblClick", 1);
+        /** Normalized events to render (from the engine's `normalizeEvents`). */
+        this.events = [];
+        /** BCP-47 locale for weekday labels. */
+        this.locale = 'es-CO';
+        /** First day of week, 0=Sun..6=Sat. */
+        this.firstDayOfWeek = 1;
+        /** Master interaction gate. */
+        this.editable = true;
+        /** Allow empty-day click to request a create. */
+        this.selectable = true;
+        /** Max event lanes per day before "+N more". */
+        this.maxLanes = 3;
+        /** Cargando: en vez de los chips pinta bloques skeleton en sus carriles. La
+         *  grilla del mes (cabecera de días, celdas, números, bordes) no se toca. */
+        this.loading = false;
+        /** Day currently hovered while dragging an event. */
+        this.dragOverDate = null;
+        /** Id of the event being dragged. */
+        this.dragId = null;
+        /** Epoch ms of "now", refreshed on a 60s timer so `past` styling stays live. */
+        this.nowMs = 0;
+        this.onPointerUp = () => this.finishDrag();
+        // ── Selection / activation ──────────────────────────────────────────────
+        /** Día seleccionado que PERSISTE resaltado mientras el host tiene abierto su
+         * form/bubble de creación (referencia visual, paridad Google). */
+        this.selectedDate = null;
+        this.handleKeyDown = (e) => {
+            const cur = this.focused;
+            let handled = true;
+            switch (e.key) {
+                case 'ArrowLeft':
+                    this.moveFocus(dates.addDays(cur, -1));
+                    break;
+                case 'ArrowRight':
+                    this.moveFocus(dates.addDays(cur, 1));
+                    break;
+                case 'ArrowUp':
+                    this.moveFocus(dates.addDays(cur, -7));
+                    break;
+                case 'ArrowDown':
+                    this.moveFocus(dates.addDays(cur, 7));
+                    break;
+                case 'Enter':
+                case ' ':
+                    this.selectDay(cur);
+                    break;
+                default:
+                    handled = false;
+            }
+            if (handled) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+    }
+    componentWillLoad() {
+        this.focused = this.defaultFocus();
+        this.nowMs = Date.now();
+    }
+    componentDidLoad() {
+        // setInterval acá (no en connectedCallback): componentDidLoad corre una sola
+        // vez por instancia → sin timer duplicado en reconexión (espeja co-calendar-timegrid).
+        this.nowTimer = window.setInterval(() => (this.nowMs = Date.now()), 60000);
+    }
+    connectedCallback() {
+        window.addEventListener('pointerup', this.onPointerUp);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('pointerup', this.onPointerUp);
+        if (this.nowTimer)
+            window.clearInterval(this.nowTimer);
+    }
+    defaultFocus() {
+        const first = `${pad4(this.year)}-${pad2(this.month)}-01`;
+        const today = dates.todayYMD();
+        const t = dates.parseISO(today);
+        return t.year === this.year && t.month === this.month ? today : first;
+    }
+    eventById(id) {
+        var _a, _b;
+        return (_b = (_a = this._layoutCache) === null || _a === void 0 ? void 0 : _a.byId.get(id)) !== null && _b !== void 0 ? _b : this.events.find((e) => e.id === id);
+    }
+    isDayInteractable(date) {
+        return !dates.isDisabled(date, { min: this.minDate, max: this.maxDate });
+    }
+    selectDay(date, rect) {
+        if (!this.selectable || !this.isDayInteractable(date))
+            return;
+        this.selectedDate = date;
+        this.coDaySelect.emit({ date, rect });
+    }
+    /** Limpia el resaltado persistente (lo llama el host al cerrar su form). */
+    async clearSelection() {
+        this.selectedDate = null;
+    }
+    /** Un refetch (post-save) invalida la referencia visual. */
+    onEventsChange() {
+        this.selectedDate = null;
+    }
+    activateEvent(id, rect) {
+        this.coEventClick.emit({ id, rect });
+    }
+    // ── Keyboard (WAI-ARIA grid, forked from co-calendar) ───────────────────
+    moveFocus(next) {
+        this.focused = next;
+        requestAnimationFrame(() => this.focusCell());
+    }
+    focusCell() {
+        var _a, _b;
+        (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-date="${this.focused}"]`)) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+    // ── Drag-move (day granularity) ─────────────────────────────────────────
+    /** Marca la interacción en el root (pointer-events:none en los chips durante el
+     * drag — mata el hover/hit-testing de las barras all-day barridas en cada
+     * celda cruzada). No es @State a propósito: no debe disparar un render. */
+    setInteracting(on) {
+        var _a;
+        (_a = this.rootEl) === null || _a === void 0 ? void 0 : _a.classList.toggle('cal-month--interacting', on);
+    }
+    startDrag(e, id) {
+        const ev = this.eventById(id);
+        if (!ev || !this.editable || ev.editable === false || ev.startEditable === false)
+            return;
+        // Ver la nota en co-calendar-timegrid#startMove: preventDefault en
+        // pointerdown mata el click y el chip arrastrable no podía activarse.
+        e.stopPropagation();
+        this.dragId = id;
+        this.dragOverDate = null;
+        this.setInteracting(true);
+    }
+    finishDrag() {
+        const id = this.dragId;
+        const target = this.dragOverDate;
+        this.dragId = null;
+        this.dragOverDate = null;
+        this.setInteracting(false);
+        if (!id || !target)
+            return;
+        const ev = this.eventById(id);
+        if (!ev)
+            return;
+        const originDay = ev.allDay
+            ? ev.start.slice(0, 10)
+            : tz.zonedDateKey(ev.startMs, this.timeZone);
+        const deltaDays = daysBetween(originDay, target);
+        if (deltaDays === 0)
+            return;
+        if (!this.isDayInteractable(target))
+            return;
+        const shifted = shiftEventByDays(ev, deltaDays, this.timeZone);
+        this.coEventDrop.emit({
+            id,
+            start: shifted.start,
+            end: shifted.end,
+            oldStart: ev.start,
+            oldEnd: ev.end,
+            allDay: ev.allDay,
+        });
+    }
+    // ── Render ──────────────────────────────────────────────────────────────
+    getLayouts() {
+        var _a;
+        const c = this._layoutCache;
+        if (c &&
+            c.events === this.events &&
+            c.year === this.year &&
+            c.month === this.month &&
+            c.firstDayOfWeek === this.firstDayOfWeek &&
+            c.timeZone === this.timeZone &&
+            c.maxLanes === this.maxLanes) {
+            return c;
+        }
+        const matrix = dates.getMonthMatrix(this.year, this.month, this.firstDayOfWeek).map((row) => row.map((cell) => cell.value));
+        const layout = layoutMonth(this.events, matrix, {
+            maxLanes: this.maxLanes,
+            timeZone: this.timeZone,
+        });
+        const segByWeek = new Map();
+        for (const seg of layout.segments) {
+            if (seg.lane >= this.maxLanes)
+                continue;
+            const arr = (_a = segByWeek.get(seg.weekIndex)) !== null && _a !== void 0 ? _a : [];
+            arr.push(seg);
+            segByWeek.set(seg.weekIndex, arr);
+        }
+        const byId = new Map(this.events.map((e) => [e.id, e]));
+        this._layoutCache = {
+            events: this.events,
+            year: this.year,
+            month: this.month,
+            firstDayOfWeek: this.firstDayOfWeek,
+            timeZone: this.timeZone,
+            maxLanes: this.maxLanes,
+            matrix,
+            layout,
+            segByWeek,
+            byId,
+        };
+        return this._layoutCache;
+    }
+    renderChip(seg, weekDays) {
+        var _a;
+        const ev = this.eventById(seg.eventId);
+        if (!ev)
+            return null;
+        const cols = weekDays.length;
+        const left = (seg.startCol / cols) * 100;
+        const width = ((seg.endCol - seg.startCol + 1) / cols) * 100;
+        const isPast = ev.endMs <= this.nowMs;
+        const isExternal = ((_a = ev.extendedProps) === null || _a === void 0 ? void 0 : _a.isExternal) === true;
+        const locked = !this.editable || ev.editable === false;
+        const timeText = ev.allDay || !seg.isStart
+            ? ''
+            : minutesToLabel$1(tz.zonedMinutesOfDay(ev.startMs, this.timeZone), this.locale);
+        const style = {
+            left: `${left}%`,
+            width: `${width}%`,
+            top: `calc(var(--co-cal-daynum-h) + ${seg.lane} * var(--co-cal-lane-h))`,
+        };
+        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;
+        }
+        if (ev.borderColor)
+            style['--co-cal-event-border'] = ev.borderColor;
+        return (index.h("button", { type: "button", key: `${seg.eventId}-${seg.weekIndex}`, class: {
+                'cal-chip': true,
+                'cal-chip--all-day': ev.allDay,
+                'cal-chip--past': isPast,
+                'cal-chip--external': isExternal,
+                'cal-chip--locked': locked,
+                'cal-chip--dragging': this.dragId === ev.id,
+                'cal-chip--continues-before': seg.continuesBefore,
+                'cal-chip--continues-after': seg.continuesAfter,
+                'cal-chip--tentative': ev.responseState === 'tentative',
+                'cal-chip--cancelled': ev.responseState === 'cancelled' || ev.responseState === 'declined',
+            }, style: style, title: ev.title, "aria-label": ev.title, onClick: (e) => {
+                e.stopPropagation();
+                this.activateEvent(ev.id, e.currentTarget.getBoundingClientRect());
+            }, onDblClick: (e) => {
+                e.stopPropagation();
+                this.coEventDblClick.emit({ id: ev.id, rect: e.currentTarget.getBoundingClientRect() });
+            }, onPointerDown: (e) => this.startDrag(e, ev.id) }, !ev.allDay && index.h("span", { class: "cal-chip__dot", "aria-hidden": "true" }), timeText && index.h("span", { class: "cal-chip__time" }, timeText), index.h("span", { class: "cal-chip__title" }, ev.title || '—'), isExternal && (providerBrand$1(ev)
+            ? index.h("co-provider-logo", { provider: providerBrand$1(ev), size: 11, plated: true, class: "cal-chip__ext" })
+            : index.h("co-icon", { name: "link", size: 11, class: "cal-chip__ext" }))));
+    }
+    render() {
+        const { matrix, layout, segByWeek } = this.getLayouts();
+        const short = dates.getWeekdayLabels(this.locale, this.firstDayOfWeek, 'short');
+        const long = dates.getWeekdayLabels(this.locale, this.firstDayOfWeek, 'long');
+        const today = dates.todayYMD();
+        return (index.h("div", { key: '2ed94ebcddb0f595f740adf3859dc4dcaff49b3c', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown, ref: (el) => (this.rootEl = el) }, index.h("div", { key: '7348dc62431ab4a27295529ac8d596798eee87b5', class: "cal-month__dow", role: "row" }, short.map((lbl, i) => (index.h("span", { class: "cal-month__dow-cell", role: "columnheader", "aria-label": long[i] }, lbl)))), matrix.map((week, wi) => {
+            var _a;
+            return (index.h("div", { class: "cal-month__week", role: "row" }, index.h("div", { class: "cal-month__days" }, week.map((date) => {
+                const ymd = dates.parseISO(date);
+                const inMonth = ymd.month === this.month;
+                const isToday = dates.compareYMD(date, today) === 0;
+                const isFocused = dates.compareYMD(date, this.focused) === 0;
+                const interactable = this.isDayInteractable(date);
+                return (index.h("div", { role: "gridcell", "data-date": date, tabIndex: isFocused ? 0 : -1, "aria-current": isToday ? 'date' : undefined, "aria-disabled": interactable ? undefined : 'true', class: {
+                        'cal-month__day': true,
+                        'cal-month__day--outside': !inMonth,
+                        'cal-month__day--today': isToday,
+                        'cal-month__day--disabled': !interactable,
+                        'cal-month__day--drag-over': this.dragId !== null && this.dragOverDate === date,
+                        'cal-month__day--selected': this.selectedDate === date,
+                    }, onClick: (e) => this.selectDay(date, e.currentTarget.getBoundingClientRect()), onPointerEnter: () => {
+                        if (this.dragId)
+                            this.dragOverDate = date;
+                    } }, index.h("span", { class: "cal-month__daynum" }, ymd.day)));
+            })), index.h("div", { class: "cal-month__events" }, this.loading && SKELETON_CHIPS[wi % SKELETON_CHIPS.length].map(([col, span, lane]) => (index.h("div", { class: "cal-month__chip-skeleton", "aria-hidden": "true", style: {
+                    left: `${(col / week.length) * 100}%`,
+                    width: `${(span / week.length) * 100}%`,
+                    top: `calc(var(--co-cal-daynum-h) + ${lane} * var(--co-cal-lane-h))`,
+                } }, index.h("co-skeleton", { variant: "rect", width: "100%", height: "100%" })))), !this.loading && ((_a = segByWeek.get(wi)) !== null && _a !== void 0 ? _a : []).map((seg) => this.renderChip(seg, week)), !this.loading && week.map((date, col) => {
+                var _a;
+                const more = (_a = layout.overflow[date]) !== null && _a !== void 0 ? _a : 0;
+                if (more <= 0)
+                    return null;
+                return (index.h("button", { type: "button", class: "cal-month__more", style: {
+                        left: `${(col / week.length) * 100}%`,
+                        width: `${(1 / week.length) * 100}%`,
+                        top: `calc(var(--co-cal-daynum-h) + ${this.maxLanes} * var(--co-cal-lane-h))`,
+                    }, onClick: (e) => {
+                        e.stopPropagation();
+                        this.coMoreClick.emit({ date });
+                    } }, "+", more));
+            }))));
+        })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "events": [{
+                "onEventsChange": 0
+            }]
+    }; }
+};
+// ── helpers ─────────────────────────────────────────────────────────────────
+/** Chips del skeleton por semana: `[columna, ancho en días, carril]`. Patrón
+ *  FIJO (nada de random) y desparejo, como se ve un mes real. */
+const SKELETON_CHIPS = [
+    [[0, 2, 0], [3, 1, 0], [5, 1, 1]],
+    [[1, 1, 0], [2, 3, 1]],
+    [[0, 1, 0], [2, 1, 0], [4, 2, 1], [6, 1, 0]],
+    [[1, 2, 0], [4, 1, 1]],
+    [[2, 1, 0], [3, 2, 1], [6, 1, 0]],
+    [[0, 3, 0], [5, 1, 1]],
+];
+function pad2(n) {
+    return String(n).padStart(2, '0');
+}
+function pad4(n) {
+    return String(n).padStart(4, '0');
+}
+/** Whole-day delta between two "YYYY-MM-DD" using UTC-midnight arithmetic. */
+function daysBetween(a, b) {
+    const [ay, am, ad] = a.split('-').map(Number);
+    const [by, bm, bd] = b.split('-').map(Number);
+    return Math.round((Date.UTC(by, bm - 1, bd) - Date.UTC(ay, am - 1, ad)) / 86400000);
+}
+/** Shift an event by N days, preserving wall-clock time (DST-correct for timed). */
+function shiftEventByDays(ev, deltaDays, timeZone) {
+    if (ev.allDay) {
+        return {
+            start: dates.addDays(ev.start.slice(0, 10), deltaDays),
+            end: dates.addDays(ev.end.slice(0, 10), deltaDays),
+        };
+    }
+    return {
+        start: tz.toUtcISO(shiftInstant(ev.startMs, deltaDays, timeZone)),
+        end: tz.toUtcISO(shiftInstant(ev.endMs, deltaDays, timeZone)),
+    };
+}
+function shiftInstant(ms, deltaDays, timeZone) {
+    const wc = tz.getWallClock(ms, timeZone);
+    const newDate = dates.addDays(`${pad4(wc.year)}-${pad2(wc.month)}-${pad2(wc.day)}`, deltaDays);
+    const [y, m, d] = newDate.split('-').map(Number);
+    return tz.wallClockToEpoch({ year: y, month: m, day: d, hour: wc.hour, minute: wc.minute, second: wc.second }, timeZone);
+}
+// Intl.DateTimeFormat es caro de construir y este label se recalcula por chip
+// por render sobre un dominio ACOTADO (≤96 minutos distintos, 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. Mismo patrón que co-calendar-timegrid.tsx (duplicado a propósito:
+// componentes Stencil separados, consistencia > DRY entre ellos).
+const MINUTE_LABEL_CACHE$1 = new Map();
+const MINUTE_FMT_CACHE$1 = new Map();
+/** Short localized time label, e.g. "9:00 a. m." / "09:00". */
+function minutesToLabel$1(minutes, locale) {
+    const key = `${locale}|${minutes}`;
+    const hit = MINUTE_LABEL_CACHE$1.get(key);
+    if (hit !== undefined)
+        return hit;
+    let fmt = MINUTE_FMT_CACHE$1.get(locale);
+    if (!fmt) {
+        fmt = new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit' });
+        MINUTE_FMT_CACHE$1.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$1.size > 2000)
+        MINUTE_LABEL_CACHE$1.clear();
+    MINUTE_LABEL_CACHE$1.set(key, out);
+    return out;
+}
+/** Marca del evento externo (`co-provider-logo`), o '' si no se reconoce — el
+ *  llamador cae al ícono genérico de enlace. */
+function providerBrand$1(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 '';
+}
+CoCalendarMonth.style = coCalendarMonthCss();
+
+const coCalendarTimegridCss = () => `:host{display:flex;flex-direction:column;min-block-size:0;font-family:var(--co-font-family-primary);--co-cal-slot-h:12px;--co-cal-axis-w:56px;--co-cal-surface:var(--co-semantic-surface-page);--co-cal-border:var(--co-semantic-border-default);--co-cal-grid-line:color-mix(in srgb, var(--co-cal-border) 60%, transparent);--co-cal-text:var(--co-semantic-text-default);--co-cal-text-muted:var(--co-semantic-text-muted);--co-cal-hover:var(--co-semantic-surface-hover);--co-cal-today-ring:var(--co-color-primary-azul);--co-cal-now-color:var(--co-color-status-error, #AA2E1B);--co-cal-allday-h:28px;--co-cal-event-radius:6px;--co-cal-elevation-hover:var(--co-shadow-lg);--co-cal-event-bg:var(--co-color-primary-azul);--co-cal-event-border:transparent;--co-cal-event-text:var(--co-color-base-blanco, #fff);--co-cal-event-text-light:var(--co-color-base-blanco, #fff);--co-cal-event-text-dark:var(--co-semantic-text-default)}.tg{display:flex;flex-direction:column;min-block-size:0;border-radius:var(--co-border-radius-xs);overflow:hidden;background:var(--co-cal-surface)}.tg__head{display:grid;grid-template-columns:var(--co-cal-axis-w) 1fr;border-bottom:1px solid var(--co-cal-border)}.tg__head-spacer{border-right:1px solid var(--co-cal-border)}.tg__head-days{display:grid}.tg__head-day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--co-spacing-xs)}.tg__head-dow{font-size:var(--co-font-size-11, 11px);text-transform:uppercase;letter-spacing:0.04em;color:var(--co-cal-text-muted)}.tg__head-num{font-size:var(--co-font-size-20, 20px);color:var(--co-cal-text);min-width:34px;height:34px;line-height:34px;text-align:center;border-radius:var(--co-border-radius-full)}.tg__head-day--today .tg__head-dow{color:var(--co-cal-today-ring)}.tg__head-day--today .tg__head-num{background:var(--co-cal-today-ring);color:var(--co-color-base-blanco, #fff);font-weight:500}.tg__allday{display:grid;grid-template-columns:var(--co-cal-axis-w) 1fr;min-height:var(--co-cal-allday-h);border-bottom:1px solid var(--co-cal-border)}.tg__allday-axis{border-right:1px solid var(--co-cal-border);font-size:var(--co-font-size-10, 10px);color:var(--co-cal-text-muted);padding:var(--co-spacing-xxs)}.tg__allday-lane{position:relative;min-height:var(--co-cal-allday-h);padding:2px 0}.tg__allday-bar{position:absolute;height:20px;box-sizing:border-box;padding:0 var(--co-spacing-xs);border:0;border-radius:var(--co-cal-event-radius);background:var(--co-cal-event-bg);color:var(--co-cal-event-text);font:500 var(--co-font-size-11, 11px)/20px var(--co-font-family-primary);text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.tg__allday-bar:hover{box-shadow:var(--co-cal-elevation-hover);z-index:2}.tg__allday-bar--continues-before{border-top-left-radius:0;border-bottom-left-radius:0}.tg__allday-bar--continues-after{border-top-right-radius:0;border-bottom-right-radius:0}.tg__allday-bar--tentative{background-image:repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0 4px, transparent 4px 8px)}.tg__allday-bar--cancelled{opacity:0.6;text-decoration:line-through}.tg__allday-bar:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.tg__scroll{flex:1 1 auto;min-block-size:0;overflow-y:auto}.tg__body{display:grid;grid-template-columns:var(--co-cal-axis-w) 1fr;position:relative}.tg__axis{border-right:1px solid var(--co-cal-border);position:relative}.tg__axis-hour{position:absolute;right:var(--co-spacing-xs);transform:translateY(-50%);font-size:var(--co-font-size-11, 11px);color:var(--co-cal-text-muted);white-space:nowrap}.tg__cols{display:grid;grid-auto-rows:100%;position:relative}.tg__col{position:relative;border-right:1px solid var(--co-cal-border);background-image:linear-gradient(     to bottom,     var(--co-cal-border) 0,     var(--co-cal-border) 1px,     transparent 1px   );background-size:100% var(--co-cal-hour-h, calc(4 * var(--co-cal-slot-h)));background-position:0 var(--co-cal-hour-offset, 0px);background-repeat:repeat-y}.tg__col:last-child{border-right:0}.tg--interacting .tg__event{pointer-events:none}.tg--interacting .tg__col{contain:layout}.tg__event{position:absolute;user-select:none;-webkit-user-select:none;touch-action:none;box-sizing:border-box;border-radius:var(--co-cal-event-radius);background:var(--co-cal-event-bg);color:var(--co-cal-event-text);border:1px solid var(--co-cal-event-border);padding:2px var(--co-spacing-xs);font-size:var(--co-font-size-11, 11px);line-height:1.15;overflow:hidden;cursor:pointer;text-align:left}.tg__event-skeleton{position:absolute;inset-inline:0 2px;box-sizing:border-box;border-radius:var(--co-cal-event-radius);overflow:hidden;pointer-events:none}.tg__event-skeleton co-skeleton{display:block;block-size:100%}.tg__event:hover{box-shadow:var(--co-cal-elevation-hover);z-index:5}.tg__event--dragging:hover{box-shadow:none}.tg__event:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.tg__event-time{display:block;font-variant-numeric:tabular-nums;opacity:0.85}.tg__event-title{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tg__event-ext{position:absolute;top:3px;right:3px;opacity:0.9}.tg__event--past{opacity:0.55}.tg__event--external{border-style:dashed}.tg__event--locked{cursor:default}.tg__event--dragging{opacity:0.5}.tg__event--tentative{background-image:repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0 4px, transparent 4px 8px)}.tg__event--cancelled{opacity:0.6}.tg__event--cancelled .tg__event-title{text-decoration:line-through}.tg__event-resize{position:absolute;left:0;right:0;bottom:0;height:6px;cursor:ns-resize}.tg__selection{position:absolute;left:0;right:0;box-sizing:border-box;z-index:2;background:color-mix(in srgb, var(--co-cal-today-ring) 22%, transparent);border:1px solid var(--co-cal-today-ring);border-radius:var(--co-border-radius-xxs);pointer-events:none}.tg__drag-ghost{position:absolute;display:none;box-sizing:border-box;z-index:4;pointer-events:none;background:color-mix(in srgb, var(--co-cal-today-ring) 22%, transparent);border:1px solid var(--co-cal-today-ring);border-radius:var(--co-border-radius-xxs);will-change:transform}.tg__focus{position:absolute;left:0;right:0;z-index:1;pointer-events:none;box-sizing:border-box;outline:2px solid var(--co-semantic-border-focus);outline-offset:-2px;border-radius:var(--co-border-radius-xxs)}.tg__now{position:absolute;left:0;right:0;height:0;z-index:3;pointer-events:none}.tg__now::before{content:'';position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--co-cal-now-color)}.tg__now::after{content:'';position:absolute;left:0;right:0;top:0;border-top:2px solid var(--co-cal-now-color)}`;
+
+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;
+const CoCalendarTimegrid = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coRangeSelect = index.createEvent(this, "coRangeSelect", 1);
+        this.coEventClick = index.createEvent(this, "coEventClick", 1);
+        this.coEventDrop = index.createEvent(this, "coEventDrop", 1);
+        this.coEventDblClick = index.createEvent(this, "coEventDblClick", 1);
+        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 = tz.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 = tz.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 = tz.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 = tz.zonedMinutesOfDay(ev.startMs, this.timeZone);
+            this.dragEndMin = tz.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 = time.clampMinutes(this.focusMin - step, this.minM, this.maxM - step);
+                    break;
+                case 'ArrowDown':
+                    this.focusMin = time.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]) || dates.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 = tz.zonedDateKey(ms, this.timeZone);
+        this.nowMinutes = tz.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 = time.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 : [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 time.clampMinutes(time.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 = tz.wallClockToEpoch({ year, month, day, hour: Math.floor(minutes / 60), minute: minutes % 60, second: 0 }, this.timeZone);
+        return tz.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 = time.minutesToFraction(startMin, this.minM, this.maxM);
+            const fracEnd = time.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 = time.clampMinutes(time.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 = time.minutesToFraction(a, this.minM, this.maxM);
+        const bottom = time.minutesToFraction(Math.max(b, a + this.snapMinutes), this.minM, this.maxM);
+        return (index.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 (index.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 && (index.h("span", { class: "tg__event-time" }, minutesToLabel(box.startMinutes, this.locale))), index.h("span", { class: "tg__event-title" }, ev.title || '—'), isExternal && (providerBrand(ev)
+            ? index.h("co-provider-logo", { provider: providerBrand(ev), size: 11, plated: true, class: "tg__event-ext" })
+            : index.h("co-icon", { name: "link", size: 11, class: "tg__event-ext" })), box.isEnd && !locked && ev.durationEditable !== false && (index.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 (index.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$1 = this.visibleDates();
+        const { layout, allDay, byId } = this.getLayouts(dates$1);
+        const short = dates.getWeekdayLabels(this.locale, 0, 'short');
+        const colsTemplate = `repeat(${dates$1.length}, 1fr)`;
+        const today = dates.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 (index.h("div", { key: '57f7c14647a8dbca49f999bfc256cf4dd58c6d5c', class: "tg", tabIndex: 0, onKeyDown: this.handleKeyDown, ref: (el) => (this.rootEl = el) }, index.h("div", { key: 'f50ac115f074e8749c19d57d47b3bb3486ae68c1', class: "tg__head" }, index.h("div", { key: 'adf1e34eae02f86ae7eb3721374660ff4c1e4fe8', class: "tg__head-spacer" }), index.h("div", { key: '5907deb540459a618374a1eb42736ddd3f3d23f6', class: "tg__head-days", style: { gridTemplateColumns: colsTemplate } }, dates$1.map((d) => {
+            const ymd = dates.parseISO(d);
+            const dow = utcDayOfWeek(d);
+            return (index.h("div", { class: { 'tg__head-day': true, 'tg__head-day--today': dates.compareYMD(d, today) === 0 } }, index.h("span", { class: "tg__head-dow" }, short[dow]), index.h("span", { class: "tg__head-num" }, ymd.day)));
+        }))), this.allDaySlot && (index.h("div", { key: 'e517b7a6418d50c418d5d799d0bc623b5946cafd', class: "tg__allday" }, index.h("div", { key: 'b470f6f08482c15459f05a95508c66f0e2244860', class: "tg__allday-axis" }, gmtLabel(this.timeZone, dates$1[0])), index.h("div", { key: '50f2a093550f7320b602cc81dcfd1d1438071539', class: "tg__allday-lane", style: { height: `${Math.max(1, allDay.laneCount) * ALLDAY_LANE_H + 4}px` } }, allDay.segments.map((seg) => this.renderAllDayBar(seg, dates$1.length, byId))))), index.h("div", { key: 'fc2f4ad9bf8ab22930907c6ca2f7239ed4a57659', class: "tg__scroll", ref: (el) => (this.scrollEl = el) }, index.h("div", { key: 'db4a5798f1d587485b31884ebaa2ed853417c031', class: "tg__body" }, index.h("div", { key: '168e7a54caee97f7219a26d46e6b42b51ac86f88', class: "tg__axis", style: { height: bodyHeight } }, this.hourList().map((m) => (index.h("span", { class: "tg__axis-hour", style: { top: `${time.minutesToFraction(m, this.minM, this.maxM) * 100}%` } }, hourLabel(m, this.locale))))), index.h("div", { key: 'e0f1a5558b07db8abb5586d01cdf3f30eb5f0e3f', class: "tg__cols", style: Object.assign({ gridTemplateColumns: colsTemplate, height: bodyHeight }, hourVars) }, dates$1.map((d, i) => {
+            var _a;
+            const isToday = dates.compareYMD(d, today) === 0;
+            return (index.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]) => (index.h("div", { class: "tg__event-skeleton", "aria-hidden": "true", style: { top: `${top}%`, height: `${height}%` } }, index.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 && (index.h("div", { class: "tg__focus", style: {
+                    top: `${time.minutesToFraction(this.focusMin, this.minM, this.maxM) * 100}%`,
+                    height: `${(time.minutesToFraction(this.focusMin + this.slotMinutes, this.minM, this.maxM) - time.minutesToFraction(this.focusMin, this.minM, this.maxM)) * 100}%`,
+                } })), this.nowIndicator && this.nowDay === d && this.nowMinutes >= this.minM && this.nowMinutes < this.maxM && (index.h("div", { class: "tg__now", style: { top: `${time.minutesToFraction(this.nowMinutes, this.minM, this.maxM) * 100}%` } }))));
+        }), index.h("div", { class: "tg__drag-ghost", key: "tg-drag-ghost", ref: (el) => (this.ghostEl = el) }))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "events": [{
+                "onEventsChange": 0
+            }]
+    }; }
+};
+// ── 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 '';
+    }
+}
+CoCalendarTimegrid.style = coCalendarTimegridCss();
+
+exports.co_calendar_month = CoCalendarMonth;
+exports.co_calendar_timegrid = CoCalendarTimegrid;