@tasknotes/calendar 0.0.0-stage → 0.1.0

package/dist/esm/chunk-UWCSL5AN.js

@@ -0,0 +1,3401 @@
+import {
+  DAY_MS,
+  ItemStore,
+  MINUTES_PER_DAY,
+  addMonths,
+  dayOf,
+  daysInMonth,
+  dependencyConflicts,
+  dependencyType,
+  formatDay,
+  formatFloating,
+  getTimeZone,
+  isoWeekNumber,
+  itemDependencies,
+  layoutLane,
+  layoutRow,
+  layoutTimedDay,
+  parseDateInput,
+  parseDay,
+  parseDurationMinutes,
+  parseOrder,
+  plannedMinutes,
+  startOfMonth,
+  startOfWeek,
+  startOfYear,
+  toInstant,
+  wallTime,
+  weekdayOf,
+  ymdOfDay
+} from "./chunk-DVMZ5OXN.js";
+
+// src/dom/format.ts
+var Formatter = class {
+  cache = /* @__PURE__ */ new Map();
+  locale;
+  hour12;
+  constructor(locale, hour12) {
+    this.locale = locale;
+    const probe = new Intl.DateTimeFormat(locale, { hour: "numeric" }).resolvedOptions();
+    this.hour12 = hour12 ?? (probe.hour12 === true || probe.hourCycle === "h12" || probe.hourCycle === "h11");
+  }
+  fmt(key, opts) {
+    let f = this.cache.get(key);
+    if (!f) {
+      f = new Intl.DateTimeFormat(this.locale, { timeZone: "UTC", ...opts });
+      this.cache.set(key, f);
+    }
+    return f;
+  }
+  d(day) {
+    return new Date(day * DAY_MS);
+  }
+  weekdayShort(day) {
+    return this.fmt("wds", { weekday: "short" }).format(this.d(day));
+  }
+  weekdayLong(day) {
+    return this.fmt("wdl", { weekday: "long" }).format(this.d(day));
+  }
+  weekdayNarrow(day) {
+    return this.fmt("wdn", { weekday: "narrow" }).format(this.d(day));
+  }
+  dayNumber(day) {
+    return this.fmt("dn", { day: "numeric" }).format(this.d(day));
+  }
+  monthShort(day) {
+    return this.fmt("ms", { month: "short" }).format(this.d(day));
+  }
+  monthLong(day) {
+    return this.fmt("ml", { month: "long" }).format(this.d(day));
+  }
+  monthYear(day) {
+    return this.fmt("my", { month: "long", year: "numeric" }).format(this.d(day));
+  }
+  year(day) {
+    return this.fmt("y", { year: "numeric" }).format(this.d(day));
+  }
+  fullDate(day) {
+    return this.fmt("fd", { year: "numeric", month: "long", day: "numeric" }).format(this.d(day));
+  }
+  longDate(day) {
+    return this.fmt("ld", { weekday: "long", year: "numeric", month: "long", day: "numeric" }).format(this.d(day));
+  }
+  listDay(day) {
+    return this.fmt("lst", { weekday: "short", month: "short", day: "numeric" }).format(this.d(day));
+  }
+  /** "Oct 19 – 25, 2026" style. */
+  range(startDay, lastDay) {
+    if (startDay === lastDay) return this.fullDate(startDay);
+    const f = this.fmt("rng", { year: "numeric", month: "short", day: "numeric" });
+    try {
+      return f.formatRange(this.d(startDay), this.d(lastDay));
+    } catch {
+      return `${f.format(this.d(startDay))} \u2013 ${f.format(this.d(lastDay))}`;
+    }
+  }
+  /** Wall-clock minutes to a label. `compact` drops ":00" in 12-hour formats ("9am"). */
+  time(minute, compact = false) {
+    const m = (Math.round(minute) % 1440 + 1440) % 1440;
+    const date = new Date(Date.UTC(2e3, 0, 1, Math.floor(m / 60), m % 60));
+    if (this.hour12) {
+      const parts = this.fmt("t12", { hour: "numeric", minute: "2-digit", hour12: true }).formatToParts(date);
+      const english = (this.fmt("t12", {}).resolvedOptions().locale ?? "en").startsWith("en");
+      const out = [];
+      parts.forEach((p, i) => {
+        const prev = parts[i - 1];
+        if (compact && p.type === "minute" && p.value === "00") {
+          if (prev?.type === "literal") out.pop();
+          return;
+        }
+        if (compact && english && p.type === "dayPeriod") {
+          if (prev?.type === "literal" && /^\s+$/.test(prev.value)) out.pop();
+          out.push(p.value.toLowerCase().replace(/\./g, ""));
+          return;
+        }
+        out.push(p.value);
+      });
+      return out.join("").trim();
+    }
+    return this.fmt("t24", { hour: "2-digit", minute: "2-digit", hourCycle: "h23" }).format(date);
+  }
+  /** Hour labels for the gutter. */
+  slotLabel(minute) {
+    return this.time(minute, true);
+  }
+  isoDate(day) {
+    const { year, month, day: d } = ymdOfDay(day);
+    return `${year}-${String(month).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+  }
+};
+function localeFirstDay(locale) {
+  try {
+    const loc = new Intl.Locale(locale ?? new Intl.DateTimeFormat().resolvedOptions().locale);
+    const info = loc.getWeekInfo?.() ?? loc.weekInfo;
+    if (info) return info.firstDay % 7;
+  } catch {
+  }
+  return 0;
+}
+
+// src/dom/options.ts
+var TIMELINE_UNIT_DAYS = {
+  hour: 1 / 24,
+  day: 1,
+  week: 7,
+  month: 30.44,
+  quarter: 91.31
+};
+var DEFAULT_TEXT = {
+  today: "Today",
+  prev: "Previous",
+  next: "Next",
+  allDay: "All day",
+  noItems: "Nothing scheduled",
+  more: (n) => `+${n} more`,
+  itemCount: (n) => n === 1 ? "1 item" : `${n} items`,
+  weekNumber: (n) => `W${n}`,
+  views: { week: "Week", day: "Day", days: "Days", month: "Month", list: "List", year: "Year", timeline: "Timeline" },
+  viewHints: {}
+};
+function defaultOptions() {
+  return {
+    view: "week",
+    date: Date.now(),
+    dayCount: 3,
+    listDayCount: 7,
+    listStart: "date",
+    monthDisplay: "full",
+    timeZone: "local",
+    locale: void 0,
+    firstDay: void 0,
+    hour12: void 0,
+    weekNumbers: false,
+    weekends: true,
+    hiddenDays: [],
+    allDaySlot: true,
+    timeGrid: true,
+    todayHighlight: true,
+    todayWidth: 1,
+    slotMinTime: "00:00",
+    slotMaxTime: "24:00",
+    slotDuration: "00:30",
+    snapDuration: void 0,
+    scrollTime: "08:00",
+    slotHeight: 24,
+    expandRows: false,
+    nowIndicator: true,
+    selectMirror: true,
+    slotEventOverlap: true,
+    eventMinHeight: 15,
+    eventMaxStack: 0,
+    dayMaxEvents: true,
+    dayMaxEventRows: 0,
+    eventOrder: "start,-duration,allDay,title",
+    height: "fill",
+    editable: true,
+    selectable: true,
+    navLinks: true,
+    resizableFromStart: false,
+    longPressDelay: 350,
+    defaultTimedMinutes: 60,
+    defaultAllDayDays: 1,
+    capacityMinutes: null,
+    planning: false,
+    toolbar: true,
+    text: {},
+    timeline: null,
+    acceptNativeDrop: null,
+    selected: null
+  };
+}
+var LAYOUT_KEYS = /* @__PURE__ */ new Set([
+  "view",
+  "dayCount",
+  "listDayCount",
+  "listStart",
+  "monthDisplay",
+  "timeZone",
+  "locale",
+  "firstDay",
+  "hour12",
+  "weekNumbers",
+  "weekends",
+  "hiddenDays",
+  "allDaySlot",
+  "timeGrid",
+  "todayHighlight",
+  "todayWidth",
+  "slotMinTime",
+  "slotMaxTime",
+  "slotDuration",
+  "snapDuration",
+  "slotHeight",
+  "expandRows",
+  "nowIndicator",
+  "slotEventOverlap",
+  "eventMinHeight",
+  "eventMaxStack",
+  "dayMaxEvents",
+  "dayMaxEventRows",
+  "eventOrder",
+  "height",
+  "capacityMinutes",
+  "planning",
+  "toolbar",
+  "text",
+  "timeline",
+  "editable",
+  "itemContent",
+  "itemClassNames",
+  "listItemContent",
+  "dayHeaderContent",
+  "dayClassNames"
+]);
+
+// src/dom/context.ts
+function focusKey(el) {
+  const cls = [...el.classList].filter((c) => c.startsWith("tnc-"));
+  return cls.length ? cls.map((c) => `.${CSS.escape(c)}`).join("") : "";
+}
+var ItemPool = class {
+  constructor(ctx, container) {
+    this.ctx = ctx;
+    this.container = container;
+  }
+  ctx;
+  container;
+  recs = /* @__PURE__ */ new Map();
+  used = /* @__PURE__ */ new Set();
+  begin() {
+    this.used = /* @__PURE__ */ new Set();
+  }
+  place(key, meta) {
+    const sig = `${meta.n.sig}|${meta.variant}|${meta.isStart ? 1 : 0}${meta.isEnd ? 1 : 0}|${meta.mirror ? 1 : 0}`;
+    let rec = this.recs.get(key);
+    let refocus = null;
+    if (rec && rec.sig !== sig) {
+      const active = this.ctx.doc.activeElement;
+      if (active && rec.el.contains(active)) refocus = active === rec.el ? "" : focusKey(active);
+      this.ctx.destroyItemEl(rec.el);
+      rec = void 0;
+    }
+    if (!rec) {
+      rec = { el: this.ctx.createItemEl(meta), sig };
+      this.recs.set(key, rec);
+      this.container.append(rec.el);
+      if (refocus !== null) (refocus ? rec.el.querySelector(refocus) : rec.el)?.focus({ preventScroll: true });
+    } else {
+      this.ctx.meta.set(rec.el, meta);
+      this.ctx.refreshItemEl(rec.el, meta);
+      if (rec.el.parentNode !== this.container) this.container.append(rec.el);
+    }
+    this.used.add(key);
+    return rec.el;
+  }
+  end() {
+    for (const [key, rec] of this.recs) {
+      if (this.used.has(key)) continue;
+      this.ctx.destroyItemEl(rec.el);
+      this.recs.delete(key);
+    }
+  }
+  clear() {
+    this.begin();
+    this.end();
+  }
+  elementsFor(id) {
+    const out = [];
+    for (const rec of this.recs.values()) if (this.ctx.meta.get(rec.el)?.n.id === id) out.push(rec.el);
+    return out;
+  }
+};
+
+// src/dom/dom.ts
+function h(doc, tag, cls, attrs, ...children) {
+  const el = doc.createElement(tag);
+  if (cls) el.className = cls;
+  if (attrs) setAttrs(el, attrs);
+  for (const c of children) if (c !== null && c !== void 0 && c !== false) el.append(c);
+  return el;
+}
+function setAttrs(el, attrs) {
+  for (const [k, v] of Object.entries(attrs)) {
+    if (v === null || v === void 0 || v === false) el.removeAttribute(k);
+    else el.setAttribute(k, v === true ? "" : String(v));
+  }
+}
+function classList(value) {
+  if (!value) return [];
+  return (Array.isArray(value) ? value : value.split(/\s+/)).filter(Boolean);
+}
+function setStyle(el, props) {
+  for (const [k, v] of Object.entries(props)) {
+    if (v === null) el.style.removeProperty(k);
+    else el.style.setProperty(k, typeof v === "number" ? `${v}px` : v);
+  }
+}
+function pct(n) {
+  return `${Math.round(n * 1e4) / 100}%`;
+}
+
+// src/dom/views/daygrid.ts
+var BAR_GAP = 2;
+var CELL_PAD = 6;
+function px(cs, name, fallback) {
+  const v = parseFloat(cs.getPropertyValue(name));
+  return Number.isFinite(v) ? v : fallback;
+}
+var DayGridView = class {
+  constructor(ctx) {
+    this.ctx = ctx;
+    const { doc, opts, days } = ctx;
+    this.dotsMode = opts.monthDisplay === "dots";
+    this.el = h(doc, "div", this.dotsMode ? "tnc-dg tnc-dg--dots" : "tnc-dg");
+    this.scroller = h(doc, "div", "tnc-dg-scroll");
+    this.grid = h(doc, "div", "tnc-dg-grid", { role: "grid", "aria-label": ctx.view.title });
+    const perWeek = this.daysPerWeek();
+    const cols = `${opts.weekNumbers ? "var(--tnc-weeknum-w) " : ""}repeat(${perWeek}, minmax(0, 1fr))`;
+    this.el.style.setProperty("--tnc-cols", cols);
+    const head = h(doc, "div", "tnc-dg-head", { role: "row" });
+    if (opts.weekNumbers) head.append(h(doc, "div", "tnc-weeknum-head"));
+    for (const d of days.slice(0, perWeek)) {
+      const arg = ctx.dayArg(d);
+      const cell = h(doc, "div", "tnc-dg-dow", { role: "columnheader", "aria-label": ctx.fmt.weekdayLong(d) });
+      const custom = opts.dayHeaderContent?.(arg);
+      cell.append(custom ?? ctx.fmt.weekdayShort(d));
+      head.append(cell);
+      opts.dayHeaderDidMount?.({ ...arg, el: cell });
+    }
+    this.grid.append(head);
+    const anchorMonth = ymdOfDay(ctx.view.anchor).month;
+    for (let i = 0; i < days.length; i += perWeek) {
+      const wdays = days.slice(i, i + perWeek);
+      const row = h(doc, "div", "tnc-dg-week", { role: "rowgroup" });
+      const dates = h(doc, "div", "tnc-dg-dates", { role: "row" });
+      if (opts.weekNumbers) dates.append(h(doc, "div", "tnc-weeknum", { role: "rowheader" }, ctx.text.weekNumber(isoWeekNumber(wdays[0]))));
+      const cells = wdays.map((d) => {
+        const arg = ctx.dayArg(d);
+        const cls = ["tnc-dg-day", ...ctx.dayClasses(d)];
+        if (ymdOfDay(d).month !== anchorMonth) cls.push("is-other-month");
+        const cell = h(doc, "div", cls.join(" "), { role: "gridcell", "aria-label": ctx.fmt.longDate(d), "data-date": arg.dateStr });
+        if (this.dotsMode) cell.tabIndex = 0;
+        const num = ctx.fmt.dayNumber(d);
+        const label = ymdOfDay(d).day === 1 ? `${ctx.fmt.monthShort(d)} ${num}` : num;
+        cell.append(
+          h(
+            doc,
+            "div",
+            "tnc-dg-top",
+            null,
+            opts.navLinks ? ctx.navLink(d, label, "tnc-dg-num") : h(doc, "span", "tnc-dg-num", null, label)
+          )
+        );
+        dates.append(cell);
+        return cell;
+      });
+      const layer = h(doc, "div", "tnc-dg-layer", { role: "row" });
+      const content = h(doc, "div", "tnc-dg-content", { role: "gridcell", "aria-colspan": String(perWeek), "aria-label": ctx.fmt.range(wdays[0], wdays[wdays.length - 1]) });
+      const sel = h(doc, "div", "tnc-sel-layer");
+      const more = h(doc, "div", "tnc-more-layer");
+      content.append(sel, more);
+      layer.append(content);
+      row.append(dates, layer);
+      this.grid.append(row);
+      const dots = this.dotsMode ? cells.map((cell) => {
+        const box = h(doc, "div", "tnc-dg-dots", { "aria-hidden": "true" });
+        if (opts.dayMaxEvents === false) box.classList.add("is-unlimited");
+        const count = h(doc, "span", "tnc-dg-dots-more");
+        cell.append(box);
+        return { box, pool: new ItemPool(ctx, box), count };
+      }) : null;
+      this.weeks.push({ days: wdays, row, cells, layer, sel, more, pool: new ItemPool(ctx, content), dots });
+    }
+    this.scroller.append(this.grid);
+    this.el.append(this.scroller);
+    this.el.classList.toggle("tnc-dg--auto", opts.height === "auto");
+    const RO = ctx.win.ResizeObserver;
+    if (RO && (opts.dayMaxEvents === true || this.dotsMode && opts.dayMaxEvents !== false)) {
+      this.resizeObs = new RO(() => {
+        if (this.sizeKey() !== this.lastHeights) this.render(null);
+      });
+      this.resizeObs.observe(this.grid);
+    }
+  }
+  ctx;
+  el;
+  scroller;
+  grid;
+  weeks = [];
+  resizeObs = null;
+  barPx = 20;
+  morePx = 20;
+  topPx = 24;
+  lastHeights = "";
+  dotsMode;
+  daysPerWeek() {
+    const { days } = this.ctx;
+    const first = days[0];
+    if (first === void 0) return 7;
+    let n = 0;
+    while (n < days.length && days[n] < first + 7) n++;
+    return n || 7;
+  }
+  sizeKey() {
+    return `${this.grid.clientWidth}|${this.weeks.map((w) => w.row.clientHeight).join(",")}`;
+  }
+  render(_change) {
+    const { ctx } = this;
+    const cs = ctx.win.getComputedStyle(this.el);
+    this.barPx = px(cs, "--tnc-bar-h", 20);
+    this.topPx = this.weeks[0]?.cells[0]?.querySelector(".tnc-dg-top")?.offsetHeight || px(cs, "--tnc-dg-top-h", 24);
+    this.morePx = this.measureMore(cs);
+    this.lastHeights = this.sizeKey();
+    for (const w of this.weeks) {
+      if (w.dots) this.renderDots(w);
+      else this.renderWeek(w);
+    }
+  }
+  /** Height of a "+N more" link as the host styles it (`--tnc-more-h`, or a taller min-height). */
+  measureMore(cs) {
+    const fallback = px(cs, "--tnc-more-h", this.barPx);
+    const layer = this.weeks[0]?.more;
+    if (this.dotsMode || !layer) return fallback;
+    const probe = h(this.ctx.doc, "button", "tnc-more", { type: "button", tabindex: "-1", "aria-hidden": "true" }, "+0");
+    probe.style.visibility = "hidden";
+    layer.append(probe);
+    const measured = probe.offsetHeight;
+    probe.remove();
+    return Math.max(fallback, measured);
+  }
+  limitFor(w) {
+    const { dayMaxEvents, dayMaxEventRows, height } = this.ctx.opts;
+    const rows = (n) => ({ fit: n, withMore: n - 1 });
+    if (dayMaxEventRows > 0) return rows(dayMaxEventRows);
+    if (typeof dayMaxEvents === "number" && dayMaxEvents > 0) return rows(dayMaxEvents + 1);
+    if (dayMaxEvents !== true) return null;
+    if (height === "auto") return rows(5);
+    const step = this.barPx + BAR_GAP;
+    const avail = w.row.clientHeight - this.topPx - CELL_PAD;
+    return {
+      fit: Math.max(1, Math.floor((avail + BAR_GAP) / step)),
+      withMore: Math.max(0, Math.floor((avail - this.morePx) / step))
+    };
+  }
+  itemsFor(w) {
+    const { store } = this.ctx;
+    const first = w.days[0];
+    const last = w.days[w.days.length - 1];
+    const out = store.spanningIn(first, last + 1, true).filter((n) => n.item.display !== "background");
+    const seen = new Set(out.map((n) => n.id));
+    for (const d of w.days) {
+      for (const n of store.timedOn(d)) {
+        if (seen.has(n.id) || n.item.display === "background") continue;
+        seen.add(n.id);
+        out.push(n);
+      }
+    }
+    return out;
+  }
+  renderWeek(w) {
+    const { ctx } = this;
+    const row = layoutRow(this.itemsFor(w), w.days, ctx.order);
+    const limit = this.limitFor(w);
+    const visible = (col) => !limit ? Infinity : (row.countByCol[col] ?? 0) > limit.fit ? limit.withMore : limit.fit;
+    const n = w.days.length;
+    const hidden = new Array(n).fill([]).map(() => []);
+    w.pool.begin();
+    let maxLevel = -1;
+    for (const p of row.placements) {
+      let level = p.level;
+      let room = Infinity;
+      for (let c = p.startCol; c < p.endCol; c++) room = Math.min(room, visible(c));
+      if (level >= room) {
+        if (p.item.id !== ctx.draggingId) {
+          for (let c = p.startCol; c < p.endCol; c++) hidden[c].push(p.item);
+          continue;
+        }
+        level = Math.max(0, room - 1);
+      }
+      maxLevel = Math.max(maxLevel, level);
+      const single = !p.item.allDay && p.item.endDay - p.item.startDay <= 1;
+      const el = w.pool.place(p.item.id, {
+        n: p.item,
+        day: w.days[p.startCol],
+        isStart: p.isStart,
+        isEnd: p.isEnd,
+        variant: single ? "dot" : "bar",
+        mirror: false
+      });
+      setStyle(el, {
+        left: `calc(${pct(p.startCol / n)} + 2px)`,
+        width: `calc(${pct((p.endCol - p.startCol) / n)} - 4px)`,
+        top: `calc(var(--tnc-dg-top-h) + ${level} * (var(--tnc-bar-h) + ${BAR_GAP}px))`
+      });
+    }
+    w.pool.end();
+    w.more.replaceChildren();
+    hidden.forEach((items, col) => {
+      if (!items.length) return;
+      const day = w.days[col];
+      const link = h(ctx.doc, "button", "tnc-more", { type: "button", "aria-haspopup": "dialog" }, ctx.text.more(items.length));
+      setStyle(link, {
+        left: `calc(${pct(col / n)} + 2px)`,
+        width: `calc(${pct(1 / n)} - 4px)`,
+        top: `calc(var(--tnc-dg-top-h) + ${visible(col)} * (var(--tnc-bar-h) + ${BAR_GAP}px))`
+      });
+      link.addEventListener("click", (ev) => ctx.openMore(day, link, ev));
+      w.more.append(link);
+    });
+    const step = this.barPx + BAR_GAP;
+    let need = maxLevel >= 0 ? (maxLevel + 1) * step - BAR_GAP : 0;
+    hidden.forEach((items, col) => {
+      if (items.length) need = Math.max(need, visible(col) * step + this.morePx);
+    });
+    w.row.style.setProperty("--tnc-levels", String(maxLevel + 1));
+    w.row.style.setProperty("--tnc-dg-need", `${this.topPx + need + CELL_PAD}px`);
+  }
+  /** Items touching one day, all-day first, as a dot cell lists them. */
+  itemsOn(day) {
+    const { store } = this.ctx;
+    const out = store.spanningIn(day, day + 1, true);
+    const seen = new Set(out.map((n) => n.id));
+    for (const n of store.timedOn(day)) if (!seen.has(n.id)) out.push(n);
+    return out.filter((n) => n.item.display !== "background" && n.item.display !== "none").sort((a, b) => Number(b.allDay) - Number(a.allDay) || this.ctx.order(a, b));
+  }
+  /** `monthDisplay: "dots"`: each cell wraps one dot per item, then "+N" for the rest. */
+  renderDots(w) {
+    const { ctx } = this;
+    const { dayMaxEvents } = ctx.opts;
+    const first = w.dots[0].box;
+    const cs = ctx.win.getComputedStyle(first);
+    const size = px(cs, "--tnc-dot-size", 8);
+    const gap = px(cs, "--tnc-dot-gap", 3);
+    const step = size + gap;
+    const perRow = Math.max(1, Math.floor((first.clientWidth + gap) / step));
+    const rows = Math.max(1, Math.floor((first.clientHeight + gap) / step));
+    const fits = dayMaxEvents === false ? Infinity : perRow * rows;
+    const cap = typeof dayMaxEvents === "number" && dayMaxEvents > 0 ? Math.min(dayMaxEvents, fits) : fits;
+    w.row.style.setProperty("--tnc-levels", "0");
+    w.row.style.removeProperty("--tnc-dg-need");
+    w.days.forEach((day, i) => {
+      const cell = w.dots[i];
+      const items = this.itemsOn(day);
+      const shown = items.length <= cap ? items.length : cap >= fits ? Math.max(0, cap - 2) : cap;
+      cell.pool.begin();
+      const els = items.slice(0, shown).map((n) => cell.pool.place(n.id, { n, day, isStart: n.startDay >= day, isEnd: n.endDay <= day + 1, variant: "indicator", mirror: false }));
+      cell.pool.end();
+      els.forEach((el, k) => {
+        if (cell.box.children[k] !== el) cell.box.insertBefore(el, cell.box.children[k] ?? null);
+      });
+      const rest = items.length - shown;
+      cell.count.textContent = rest > 0 ? `+${rest}` : "";
+      if (rest > 0) cell.box.append(cell.count);
+      else cell.count.remove();
+      const label = ctx.fmt.longDate(day);
+      w.cells[i].setAttribute("aria-label", items.length ? `${label}, ${ctx.text.itemCount(items.length)}` : label);
+    });
+  }
+  showSelection(sel) {
+    for (const w of this.weeks) {
+      w.sel.replaceChildren();
+      if (!sel) continue;
+      const n = w.days.length;
+      const startCol = w.days.findIndex((d) => d >= sel.startDay);
+      if (startCol < 0) continue;
+      let endCol = w.days.findIndex((d) => d >= sel.endDay);
+      if (endCol < 0) endCol = n;
+      if (endCol <= startCol) continue;
+      const box = h(this.ctx.doc, "div", "tnc-sel");
+      setStyle(box, { left: pct(startCol / n), width: pct((endCol - startCol) / n), top: "0", bottom: "0" });
+      w.sel.append(box);
+    }
+  }
+  hit(x, y) {
+    for (const w of this.weeks) {
+      const r = w.row.getBoundingClientRect();
+      if (y < r.top || y >= r.bottom) continue;
+      for (let i = 0; i < w.cells.length; i++) {
+        const cr = w.cells[i].getBoundingClientRect();
+        if (x >= cr.left && x < cr.right) return { kind: "day", day: w.days[i] };
+      }
+    }
+    return null;
+  }
+  getScroll() {
+    return { top: this.scroller.scrollTop, left: 0 };
+  }
+  setScroll(s) {
+    this.scroller.scrollTop = s.top;
+  }
+  elementsFor(id) {
+    return this.weeks.flatMap((w) => [...w.pool.elementsFor(id), ...(w.dots ?? []).flatMap((c) => c.pool.elementsFor(id))]);
+  }
+  destroy() {
+    this.resizeObs?.disconnect();
+    for (const w of this.weeks) {
+      w.pool.clear();
+      for (const c of w.dots ?? []) c.pool.clear();
+    }
+    this.el.remove();
+  }
+};
+
+// src/dom/views/list.ts
+var ListView = class {
+  constructor(ctx) {
+    this.ctx = ctx;
+    this.el = h(ctx.doc, "div", "tnc-list");
+    this.scroller = h(ctx.doc, "div", "tnc-list-scroll");
+    this.body = h(ctx.doc, "div", "tnc-list-body", { role: "list", "aria-label": ctx.view.title });
+    this.scroller.append(this.body);
+    this.el.append(this.scroller);
+  }
+  ctx;
+  el;
+  scroller;
+  body;
+  pools = /* @__PURE__ */ new Map();
+  sections = /* @__PURE__ */ new Map();
+  itemsOn(day) {
+    const { store, opts } = this.ctx;
+    const out = store.spanningIn(day, day + 1, true);
+    const seen = new Set(out.map((n) => n.id));
+    for (const n of store.timedOn(day)) if (!seen.has(n.id)) out.push(n);
+    return out.filter((n) => n.item.display !== "background" && n.item.display !== "none" && (opts.allDaySlot || !n.allDay)).sort((a, b) => Number(b.allDay) - Number(a.allDay) || this.ctx.order(a, b));
+  }
+  render(_change) {
+    const { ctx } = this;
+    const { doc, days } = ctx;
+    const keep = /* @__PURE__ */ new Set();
+    let prev = null;
+    for (const day of days) {
+      const items = this.itemsOn(day);
+      if (!items.length) continue;
+      keep.add(day);
+      let section = this.sections.get(day);
+      let pool = this.pools.get(day);
+      if (!section || !pool) {
+        const arg = ctx.dayArg(day);
+        const heading = h(doc, "div", ["tnc-list-day", ...ctx.dayClasses(day)].join(" "), { "data-date": arg.dateStr });
+        const custom = ctx.opts.dayHeaderContent?.(arg);
+        const label = custom ?? ctx.fmt.longDate(day);
+        heading.append(ctx.opts.navLinks ? ctx.navLink(day, label, "tnc-list-day-link") : label);
+        const rows2 = h(doc, "div", "tnc-list-rows", { role: "group" });
+        section = h(doc, "div", "tnc-list-section", { role: "listitem", "aria-label": ctx.fmt.longDate(day), "data-date": arg.dateStr }, heading, rows2);
+        ctx.opts.dayHeaderDidMount?.({ ...arg, el: heading });
+        pool = new ItemPool(ctx, rows2);
+        this.sections.set(day, section);
+        this.pools.set(day, pool);
+      }
+      pool.begin();
+      for (const n of items) {
+        pool.place(n.id, {
+          n,
+          day,
+          isStart: n.startDay === day,
+          isEnd: n.endDay === day + 1,
+          variant: "list",
+          mirror: false
+        });
+      }
+      pool.end();
+      const rows = pool.container;
+      for (const n of items) {
+        const el = pool.elementsFor(n.id)[0];
+        if (el) rows.append(el);
+      }
+      if (prev ? prev.nextSibling !== section : this.body.firstChild !== section) {
+        if (prev) prev.after(section);
+        else this.body.prepend(section);
+      }
+      prev = section;
+    }
+    for (const [day, section] of this.sections) {
+      if (keep.has(day)) continue;
+      this.pools.get(day)?.clear();
+      this.pools.delete(day);
+      section.remove();
+      this.sections.delete(day);
+    }
+    let empty = this.body.querySelector(":scope > .tnc-list-empty");
+    if (!keep.size) {
+      if (!empty) {
+        empty = h(doc, "div", "tnc-list-empty", { role: "listitem" }, ctx.text.noItems);
+        this.body.append(empty);
+      }
+    } else empty?.remove();
+  }
+  showSelection(_sel) {
+  }
+  hit(_x, _y) {
+    return null;
+  }
+  getScroll() {
+    return { top: this.scroller.scrollTop, left: 0 };
+  }
+  setScroll(s) {
+    this.scroller.scrollTop = s.top;
+  }
+  elementsFor(id) {
+    return [...this.pools.values()].flatMap((p) => p.elementsFor(id));
+  }
+  destroy() {
+    for (const p of this.pools.values()) p.clear();
+    this.el.remove();
+  }
+};
+
+// src/dom/views/timegrid.ts
+var BAR_GAP2 = 2;
+var TimeGridView = class {
+  constructor(ctx) {
+    this.ctx = ctx;
+    const { doc, opts } = ctx;
+    const showGrid = opts.timeGrid;
+    this.el = h(doc, "div", "tnc-tg", { role: "table", "aria-label": ctx.view.title });
+    this.el.classList.toggle("tnc-tg--no-grid", !showGrid);
+    this.scroller = h(doc, "div", "tnc-tg-scroll");
+    this.top = h(doc, "div", "tnc-tg-top");
+    this.headRow = h(doc, "div", "tnc-tg-head tnc-tg-cols", { role: "row" });
+    this.top.append(this.headRow);
+    if (opts.allDaySlot || !showGrid) {
+      this.allDayRow = h(doc, "div", "tnc-tg-allday tnc-tg-cols", { role: "row" });
+      const label = h(doc, "div", "tnc-gutter-label", { role: "rowheader" }, showGrid ? ctx.text.allDay : "");
+      this.allDayLayer = h(doc, "div", "tnc-allday-layer", { role: "cell", "aria-colspan": String(ctx.days.length) });
+      this.allDaySel = h(doc, "div", "tnc-sel-layer");
+      this.allDayMore = h(doc, "div", "tnc-more-layer");
+      this.allDayLayer.append(this.allDaySel, this.allDayMore);
+      this.allDayRow.append(label, this.allDayLayer);
+      this.allDayPool = new ItemPool(ctx, this.allDayLayer);
+      this.top.append(this.allDayRow);
+    } else {
+      this.allDayRow = this.allDayLayer = this.allDaySel = this.allDayMore = null;
+      this.allDayPool = null;
+    }
+    this.scroller.append(this.top);
+    if (showGrid) {
+      this.body = h(doc, "div", "tnc-tg-body tnc-tg-cols", { role: "row" });
+      this.gutter = h(doc, "div", "tnc-gutter", { "aria-hidden": "true" });
+      this.body.append(this.gutter);
+      this.nowGutter = h(doc, "div", "tnc-now-label");
+      this.scroller.append(this.body);
+    } else {
+      this.body = this.gutter = null;
+    }
+    this.el.append(this.scroller);
+    this.build();
+    if (showGrid && opts.height === "fill") {
+      const RO = ctx.win.ResizeObserver;
+      if (RO) {
+        this.resizeObs = new RO(() => this.fitRows());
+        this.resizeObs.observe(this.scroller);
+      }
+    }
+  }
+  ctx;
+  el;
+  scroller;
+  top;
+  headRow;
+  allDayRow;
+  allDayLayer;
+  allDaySel;
+  allDayMore;
+  allDayPool;
+  body;
+  gutter;
+  nowGutter = null;
+  cols = [];
+  weights = [];
+  ppm = 1;
+  resizeObs = null;
+  get minutes() {
+    return this.ctx.slot.max - this.ctx.slot.min;
+  }
+  /* ------------------------------------------------------------ structure */
+  build() {
+    const { ctx } = this;
+    const { doc, opts, days, today } = ctx;
+    this.weights = days.map((d) => d === today && opts.todayWidth > 1 && days.length > 1 ? opts.todayWidth : 1);
+    const tpl = `var(--tnc-gutter-w) ${this.weights.map((w) => `minmax(0, ${w}fr)`).join(" ")}`;
+    this.el.style.setProperty("--tnc-cols", tpl);
+    const gutterHead = h(doc, "div", "tnc-gutter-head", { role: "columnheader" });
+    if (opts.weekNumbers && days[0] !== void 0) gutterHead.textContent = ctx.text.weekNumber(isoWeekNumber(days[0]));
+    this.headRow.replaceChildren(gutterHead);
+    const capacity = opts.capacityMinutes;
+    this.cols = days.map((day) => {
+      const arg = ctx.dayArg(day);
+      const head = h(doc, "div", ["tnc-dh", ...ctx.dayClasses(day)].join(" "), {
+        role: "columnheader",
+        "data-date": arg.dateStr,
+        "aria-label": ctx.fmt.longDate(day)
+      });
+      const custom = opts.dayHeaderContent?.(arg);
+      if (custom != null) head.append(custom);
+      else {
+        const label = h(
+          doc,
+          "span",
+          "tnc-dh-label",
+          null,
+          h(doc, "span", "tnc-dh-dow", null, ctx.fmt.weekdayShort(day)),
+          h(doc, "span", "tnc-dh-num", null, ctx.fmt.dayNumber(day))
+        );
+        head.append(opts.navLinks ? ctx.navLink(day, label, "tnc-dh-link") : label);
+      }
+      let cap = null;
+      if (capacity !== null) {
+        cap = h(doc, "div", "tnc-cap", null, h(doc, "i"), h(doc, "span", "tnc-cap-txt"));
+        head.append(cap);
+      }
+      this.headRow.append(head);
+      opts.dayHeaderDidMount?.({ ...arg, el: head });
+      const col = h(doc, "div", ["tnc-col", ...ctx.dayClasses(day)].join(" "), { role: "cell", "aria-label": ctx.fmt.longDate(day), "data-date": arg.dateStr });
+      const bgLayer = h(doc, "div", "tnc-col-bg");
+      const planLayer = h(doc, "div", "tnc-col-plan");
+      const actualLane = h(doc, "div", "tnc-col-actual");
+      const more = h(doc, "div", "tnc-more-layer");
+      const sel = h(doc, "div", "tnc-sel-layer");
+      col.append(bgLayer, sel, planLayer, actualLane, more);
+      let now = null;
+      if (opts.nowIndicator && day === today) {
+        now = h(doc, "div", "tnc-now", { "aria-hidden": "true" });
+        col.append(now);
+      }
+      this.body?.append(col);
+      return {
+        day,
+        head,
+        col,
+        plan: new ItemPool(ctx, planLayer),
+        actual: new ItemPool(ctx, actualLane),
+        bg: new ItemPool(ctx, bgLayer),
+        actualLane,
+        more,
+        sel,
+        now,
+        cap
+      };
+    });
+    if (this.gutter) this.buildGutter();
+    this.applyScale();
+  }
+  buildGutter() {
+    const { ctx } = this;
+    const gutter = this.gutter;
+    gutter.replaceChildren();
+    const { min, max, duration } = ctx.slot;
+    const interval = duration >= 60 ? duration : 60;
+    const first = Math.ceil(min / interval) * interval;
+    for (let m = first; m < max; m += interval) {
+      if (m === min) continue;
+      const label = h(ctx.doc, "div", "tnc-slot-label", null, ctx.fmt.slotLabel(m));
+      label.style.top = pct((m - min) / this.minutes);
+      gutter.append(label);
+    }
+    if (this.nowGutter) gutter.append(this.nowGutter);
+  }
+  applyScale() {
+    const { opts, slot } = this.ctx;
+    this.ppm = opts.slotHeight / slot.duration;
+    this.fitRows(false);
+    this.el.style.setProperty("--tnc-slot-px", `${slot.duration * this.ppm}px`);
+    this.el.style.setProperty("--tnc-hour-px", `${60 * this.ppm}px`);
+    this.el.style.setProperty("--tnc-grid-offset", `${-(slot.min % 60 * this.ppm)}px`);
+    if (this.body) this.body.style.height = `${this.minutes * this.ppm}px`;
+  }
+  /** In fill mode with expandRows, stretches slots so the grid fills the height. */
+  fitRows(rerender = true) {
+    const { opts, slot } = this.ctx;
+    if (!this.body || opts.height !== "fill" || !opts.expandRows) return;
+    const avail = this.scroller.clientHeight - this.top.offsetHeight;
+    const base = opts.slotHeight / slot.duration;
+    const next = avail > 0 ? Math.max(base, avail / this.minutes) : base;
+    if (Math.abs(next - this.ppm) < 1e-3) return;
+    this.ppm = next;
+    this.body.style.height = `${this.minutes * this.ppm}px`;
+    this.el.style.setProperty("--tnc-slot-px", `${slot.duration * this.ppm}px`);
+    this.el.style.setProperty("--tnc-hour-px", `${60 * this.ppm}px`);
+    if (rerender) this.render(null);
+  }
+  /* --------------------------------------------------------------- render */
+  render(change) {
+    this.renderAllDay();
+    if (!this.body) return;
+    const dirty = change ? change.days : null;
+    for (const c of this.cols) {
+      if (dirty && !dirty.has(c.day) && !(this.ctx.slot.max > MINUTES_PER_DAY && dirty.has(c.day + 1))) continue;
+      this.renderColumn(c);
+    }
+    this.renderCapacity();
+    this.tick();
+  }
+  renderCapacity() {
+    const cap = this.ctx.opts.capacityMinutes;
+    if (cap === null) return;
+    const planned = plannedMinutes(this.ctx.store, this.cols.map((c) => c.day));
+    for (const c of this.cols) {
+      if (!c.cap) continue;
+      const limit = typeof cap === "function" ? cap(c.day) : cap;
+      const used = planned.get(c.day) ?? 0;
+      const ratio = limit > 0 ? used / limit : 0;
+      const bar = c.cap.firstElementChild;
+      bar.style.width = pct(Math.min(1, ratio));
+      c.cap.classList.toggle("is-warn", ratio > 0.85 && ratio <= 1);
+      c.cap.classList.toggle("is-over", ratio > 1);
+      const hours = (m) => `${Math.round(m / 60 * 10) / 10}h`;
+      c.cap.lastElementChild.textContent = limit > 0 ? `${hours(used)} / ${hours(limit)}` : hours(used);
+    }
+  }
+  renderAllDay() {
+    const { ctx } = this;
+    if (!this.allDayLayer || !this.allDayPool || !this.allDayMore) return;
+    const { days, store, opts } = ctx;
+    const first = days[0];
+    const last = days[days.length - 1];
+    if (first === void 0 || last === void 0) return;
+    const items = opts.timeGrid ? store.spanningIn(first, last + 1, false) : store.inRange(first, last + 1).filter((n) => n.item.display !== "background");
+    const row = layoutRow(items.filter((n) => n.item.display !== "background"), days, ctx.order);
+    const limit = this.allDayLimit();
+    const visibleLevels = (col) => limit && (row.countByCol[col] ?? 0) > limit ? limit - 1 : limit || Infinity;
+    const offsets = this.colOffsets();
+    const pool = this.allDayPool;
+    pool.begin();
+    const hidden = new Array(days.length).fill(0);
+    let maxLevel = -1;
+    for (const p of row.placements) {
+      let level = p.level;
+      let room = Infinity;
+      for (let c = p.startCol; c < p.endCol; c++) room = Math.min(room, visibleLevels(c));
+      if (level >= room) {
+        if (p.item.id !== ctx.draggingId) {
+          for (let c = p.startCol; c < p.endCol; c++) hidden[c]++;
+          continue;
+        }
+        level = Math.max(0, room - 1);
+      }
+      maxLevel = Math.max(maxLevel, level);
+      const el = pool.place(p.item.id, {
+        n: p.item,
+        day: days[p.startCol],
+        isStart: p.isStart,
+        isEnd: p.isEnd,
+        variant: "bar",
+        mirror: false
+      });
+      setStyle(el, {
+        left: `calc(${pct(offsets[p.startCol])} + 2px)`,
+        width: `calc(${pct(offsets[p.endCol] - offsets[p.startCol])} - 4px)`,
+        top: `calc(${level} * (var(--tnc-bar-h) + ${BAR_GAP2}px) + 3px)`
+      });
+    }
+    pool.end();
+    this.allDayMore.replaceChildren();
+    let anyMore = false;
+    hidden.forEach((count, col) => {
+      if (!count) return;
+      anyMore = true;
+      const day = days[col];
+      const link = h(ctx.doc, "button", "tnc-more", { type: "button", "aria-haspopup": "dialog" }, ctx.text.more(count));
+      setStyle(link, {
+        left: `calc(${pct(offsets[col])} + 2px)`,
+        width: `calc(${pct(offsets[col + 1] - offsets[col])} - 4px)`,
+        top: `calc(${visibleLevels(col)} * (var(--tnc-bar-h) + ${BAR_GAP2}px) + 3px)`
+      });
+      link.addEventListener("click", (ev) => ctx.openMore(day, link, ev));
+      this.allDayMore.append(link);
+    });
+    const bars = `calc(${Math.max(1, maxLevel + 1)} * (var(--tnc-bar-h) + ${BAR_GAP2}px) + 6px)`;
+    if (!anyMore) {
+      this.allDayLayer.style.height = bars;
+      return;
+    }
+    const moreH = this.allDayMore.querySelector(".tnc-more")?.offsetHeight ?? 0;
+    const moreTop = Math.max(...hidden.map((count, col) => count ? visibleLevels(col) : 0));
+    this.allDayLayer.style.height = `max(${bars}, calc(${moreTop} * (var(--tnc-bar-h) + ${BAR_GAP2}px) + ${moreH}px + 6px))`;
+  }
+  allDayLimit() {
+    const { dayMaxEvents, dayMaxEventRows } = this.ctx.opts;
+    if (dayMaxEventRows > 0) return dayMaxEventRows;
+    if (typeof dayMaxEvents === "number" && dayMaxEvents > 0) return dayMaxEvents + 1;
+    if (dayMaxEvents === true && this.ctx.opts.timeGrid) return 4;
+    return 0;
+  }
+  /** Fractional left edge of each column (length n + 1). */
+  colOffsets() {
+    const total = this.weights.reduce((a, b) => a + b, 0) || 1;
+    const out = [0];
+    let acc = 0;
+    for (const w of this.weights) out.push((acc += w) / total);
+    return out;
+  }
+  renderColumn(c) {
+    const { ctx } = this;
+    const { store, opts, slot, zone } = ctx;
+    const items = store.timedOn(c.day);
+    if (slot.max > MINUTES_PER_DAY) {
+      const seen = new Set(items.map((n) => n.id));
+      for (const n of store.timedOn(c.day + 1)) if (!seen.has(n.id)) items.push(n);
+    }
+    const minMinutes = opts.eventMinHeight / this.ppm;
+    const layout = layoutTimedDay(items, c.day, zone, minMinutes, ctx.order, [slot.min, slot.max]);
+    const total = this.minutes;
+    const top = (m) => pct((m - slot.min) / total);
+    const height = (s) => pct((s.endMin - s.startMin) / total);
+    c.bg.begin();
+    for (const s of layout.background) {
+      const el = c.bg.place(s.item.id, this.meta(s, true));
+      setStyle(el, { top: top(s.startMin), height: height(s) });
+    }
+    c.bg.end();
+    const hasActual = layout.actual.length > 0;
+    c.col.classList.toggle("has-actual", hasActual);
+    this.placeLane(c.plan, layout.plan, c, top, height, true);
+    this.placeLane(c.actual, layout.actual, c, top, height, false);
+  }
+  placeLane(pool, placements, c, top, height, withMore) {
+    const { ctx } = this;
+    const { opts } = ctx;
+    const maxStack = opts.eventMaxStack;
+    const hiddenByCluster = /* @__PURE__ */ new Map();
+    pool.begin();
+    for (const p of placements) {
+      if (withMore && maxStack > 0 && p.cols > maxStack && p.col >= maxStack - 1) {
+        const rec = hiddenByCluster.get(p.cluster) ?? { count: 0, start: p.startMin, end: p.endMin, items: [] };
+        rec.count++;
+        rec.start = Math.min(rec.start, p.startMin);
+        rec.end = Math.max(rec.end, p.endMin);
+        rec.items.push(p);
+        hiddenByCluster.set(p.cluster, rec);
+        continue;
+      }
+      const cols = withMore && maxStack > 0 ? Math.min(p.cols, maxStack) : p.cols;
+      const span = Math.min(p.span, cols - p.col);
+      const left = p.col / cols;
+      let width = span / cols;
+      if (opts.slotEventOverlap && cols > 1 && p.col + span < cols) width = Math.min(1 - left, width * 1.7);
+      const el = pool.place(p.item.id, this.meta(p, false));
+      const short = (p.endMin - p.startMin) * this.ppm < 34;
+      el.classList.toggle("is-short", short);
+      setStyle(el, {
+        top: top(p.startMin),
+        height: `max(${height(p)}, ${opts.eventMinHeight}px)`,
+        left: pct(left),
+        width: `calc(${pct(width)} - 1px)`,
+        "z-index": String(p.col + 1)
+      });
+    }
+    pool.end();
+    if (!withMore) return;
+    c.more.replaceChildren();
+    for (const rec of hiddenByCluster.values()) {
+      const link = h(ctx.doc, "button", "tnc-more tnc-more--stack", { type: "button", "aria-haspopup": "dialog" }, `+${rec.count}`);
+      const cols = maxStack;
+      setStyle(link, {
+        top: top(rec.start),
+        left: pct((cols - 1) / cols),
+        width: `calc(${pct(1 / cols)} - 1px)`
+      });
+      link.addEventListener("click", (ev) => ctx.openMore(c.day, link, ev));
+      c.more.append(link);
+    }
+  }
+  meta(s, bg) {
+    return {
+      n: s.item,
+      day: s.day,
+      isStart: s.isStart,
+      isEnd: s.isEnd,
+      variant: bg ? "bar" : "timed",
+      mirror: false
+    };
+  }
+  /* ------------------------------------------------------------ selection */
+  showSelection(sel) {
+    const { ctx } = this;
+    const offsets = this.colOffsets();
+    if (this.allDaySel) {
+      this.allDaySel.replaceChildren();
+      if (sel?.allDay) {
+        const startCol = this.cols.findIndex((c) => c.day >= sel.startDay);
+        let endCol = this.cols.findIndex((c) => c.day >= sel.endDay);
+        if (endCol < 0) endCol = this.cols.length;
+        if (startCol >= 0 && endCol > startCol) {
+          const box = h(ctx.doc, "div", "tnc-sel");
+          setStyle(box, {
+            left: pct(offsets[startCol]),
+            width: pct(offsets[endCol] - offsets[startCol]),
+            top: "0",
+            bottom: "0"
+          });
+          this.allDaySel.append(box);
+        }
+      }
+    }
+    for (const c of this.cols) {
+      c.sel.replaceChildren();
+      if (!sel || sel.allDay) continue;
+      const winStart = toInstant(c.day, ctx.slot.min, ctx.zone);
+      const winEnd = toInstant(c.day, ctx.slot.max, ctx.zone);
+      const s = Math.max(sel.startMs, winStart);
+      const e = Math.min(sel.endMs, winEnd);
+      if (e <= s) continue;
+      const rel = (ms) => {
+        const w = wallTime(ms, ctx.zone);
+        return (w.day - c.day) * MINUTES_PER_DAY + w.minute;
+      };
+      const sm = s === winStart ? ctx.slot.min : rel(s);
+      const em = e === winEnd ? ctx.slot.max : rel(e);
+      const box = h(ctx.doc, "div", "tnc-sel");
+      if (ctx.opts.selectMirror) {
+        box.classList.add("tnc-sel--mirror");
+        box.textContent = `${ctx.fmt.time(sm)} \u2013 ${ctx.fmt.time(em)}`;
+      }
+      setStyle(box, { top: pct((sm - ctx.slot.min) / this.minutes), height: pct((em - sm) / this.minutes) });
+      c.sel.append(box);
+    }
+  }
+  /* ------------------------------------------------------------- hit test */
+  hit(x, y) {
+    const colIndex = (cells) => {
+      for (let i2 = 0; i2 < cells.length; i2++) {
+        const r2 = cells[i2].getBoundingClientRect();
+        if (x >= r2.left && x < r2.right) return i2;
+      }
+      const firstR = cells[0]?.getBoundingClientRect();
+      const lastR = cells[cells.length - 1]?.getBoundingClientRect();
+      if (firstR && x < firstR.left) return 0;
+      if (lastR && x >= lastR.right) return cells.length - 1;
+      return -1;
+    };
+    if (this.allDayRow) {
+      const r2 = this.allDayRow.getBoundingClientRect();
+      if (y >= r2.top && y < r2.bottom || !this.body && y >= r2.top) {
+        const i2 = colIndex(this.cols.map((c2) => c2.head));
+        return i2 >= 0 ? { kind: "allDay", day: this.cols[i2].day } : null;
+      }
+    }
+    if (!this.body) return null;
+    const i = colIndex(this.cols.map((c2) => c2.col));
+    if (i < 0) return null;
+    const c = this.cols[i];
+    const r = c.col.getBoundingClientRect();
+    const scrollerR = this.scroller.getBoundingClientRect();
+    const topR = this.top.getBoundingClientRect();
+    if (y < Math.max(topR.bottom, scrollerR.top)) {
+      if (y < topR.top) return null;
+      return this.allDayRow ? { kind: "allDay", day: c.day } : null;
+    }
+    const ratio = Math.min(1, Math.max(0, (y - r.top) / r.height));
+    return { kind: "time", day: c.day, minute: this.ctx.slot.min + ratio * this.minutes };
+  }
+  /* ----------------------------------------------------------------- misc */
+  tick() {
+    const { ctx } = this;
+    const nowMs = ctx.now();
+    const w = wallTime(nowMs, ctx.zone);
+    for (const c of this.cols) {
+      if (!c.now) continue;
+      const minute = (w.day - c.day) * MINUTES_PER_DAY + w.minute;
+      const visible = minute >= ctx.slot.min && minute <= ctx.slot.max;
+      c.now.hidden = !visible;
+      if (visible) c.now.style.top = pct((minute - ctx.slot.min) / this.minutes);
+      if (this.nowGutter) {
+        this.nowGutter.hidden = !visible;
+        if (visible) this.nowGutter.style.top = pct((minute - ctx.slot.min) / this.minutes);
+      }
+    }
+  }
+  resize() {
+    this.fitRows();
+  }
+  scrollToTime(minute) {
+    if (!this.body) return;
+    const y = (minute - this.ctx.slot.min) * this.ppm;
+    this.scroller.scrollTop = Math.max(0, y);
+  }
+  getScroll() {
+    return { top: this.scroller.scrollTop, left: this.scroller.scrollLeft };
+  }
+  setScroll(s) {
+    this.scroller.scrollTop = s.top;
+    this.scroller.scrollLeft = s.left;
+  }
+  elementsFor(id) {
+    const out = this.allDayPool?.elementsFor(id) ?? [];
+    for (const c of this.cols) out.push(...c.plan.elementsFor(id), ...c.actual.elementsFor(id), ...c.bg.elementsFor(id));
+    return out;
+  }
+  destroy() {
+    this.resizeObs?.disconnect();
+    this.allDayPool?.clear();
+    for (const c of this.cols) {
+      c.plan.clear();
+      c.actual.clear();
+      c.bg.clear();
+    }
+    this.el.remove();
+  }
+};
+
+// src/dom/views/timeline.ts
+var SVG = "http://www.w3.org/2000/svg";
+var COMPACT_PX = 28;
+var NARROW_PX = 20;
+var MILESTONE_R = 7;
+function sameRow(a, b) {
+  return a === b || a.id === b.id && a.title === b.title && a.depth === b.depth && a.group === b.group && a.color === b.color && a.collapsed === b.collapsed;
+}
+var TimelineView = class {
+  constructor(ctx) {
+    this.ctx = ctx;
+    const { doc } = ctx;
+    const given = this.tl.scale ?? {};
+    const unit = given.unit ?? "day";
+    this.dayWidth = given.dayWidth ?? (given.unitWidth ?? 36) / TIMELINE_UNIT_DAYS[unit];
+    this.scale = { snapMinutes: MINUTES_PER_DAY, ...given, unit, unitWidth: this.dayWidth * TIMELINE_UNIT_DAYS[unit] };
+    this.startDay = ctx.view.range.startDay;
+    this.endDay = ctx.view.range.endDay;
+    this.labelWidth = this.tl.labelWidth ?? 240;
+    this.rowHeight = this.tl.rowHeight ?? 32;
+    this.el = h(doc, "div", "tnc-tl");
+    this.el.style.setProperty("--tnc-tl-label-w", `${this.labelWidth}px`);
+    this.el.style.setProperty("--tnc-tl-row-h", `${this.rowHeight}px`);
+    this.el.style.setProperty("--tnc-tl-day-w", `${this.dayWidth}px`);
+    this.scroller = h(doc, "div", "tnc-tl-scroll");
+    this.canvas = h(doc, "div", "tnc-tl-canvas", { role: "table", "aria-label": ctx.view.title });
+    this.canvas.style.width = `${this.labelWidth + this.trackWidth()}px`;
+    this.head = h(doc, "div", "tnc-tl-head");
+    this.ticks = h(doc, "div", "tnc-tl-ticks");
+    this.rowsEl = h(doc, "div", "tnc-tl-rows", { role: "rowgroup" });
+    this.svg = doc.createElementNS(SVG, "svg");
+    this.svg.classList.add("tnc-tl-deps");
+    this.svg.setAttribute("aria-hidden", "true");
+    this.todayLine = h(doc, "div", "tnc-tl-today", { "aria-hidden": "true" });
+    this.todayTag = this.tl.todayLabel ? h(doc, "div", "tnc-tl-today-label", { "aria-hidden": "true" }, this.tl.todayLabel) : null;
+    this.selLayer = h(doc, "div", "tnc-tl-sel");
+    this.canvas.append(this.head, this.rowsEl);
+    this.scroller.append(this.canvas);
+    this.el.append(this.scroller);
+    this.buildHead();
+    this.el.addEventListener("pointerdown", this.onLinkDown, true);
+  }
+  ctx;
+  el;
+  scroller;
+  canvas;
+  head;
+  ticks;
+  rowsEl;
+  svg;
+  todayLine;
+  todayTag;
+  selLayer;
+  rows = [];
+  scale;
+  dayWidth;
+  startDay;
+  endDay;
+  labelWidth;
+  rowHeight;
+  link = null;
+  get tl() {
+    return this.ctx.opts.timeline ?? { rows: [], rowOf: () => null };
+  }
+  /* ------------------------------------------------------------- geometry */
+  trackWidth() {
+    return (this.endDay - this.startDay) * this.dayWidth;
+  }
+  /** X offset (within the track) of an instant. */
+  x(ms) {
+    const w = wallTime(ms, this.ctx.zone);
+    return (w.day - this.startDay + w.minute / MINUTES_PER_DAY) * this.dayWidth;
+  }
+  xDay(day) {
+    return (day - this.startDay) * this.dayWidth;
+  }
+  /** Instant at a track x offset. */
+  msAt(x) {
+    const civil = this.startDay * MINUTES_PER_DAY + x / this.dayWidth * MINUTES_PER_DAY;
+    const day = Math.floor(civil / MINUTES_PER_DAY);
+    return toInstant(day, civil - day * MINUTES_PER_DAY, this.ctx.zone);
+  }
+  /** Viewport x (from the scroller's left edge) where the track starts showing, and its visible width. */
+  trackViewport() {
+    return { left: this.labelWidth, width: Math.max(0, this.scroller.clientWidth - this.labelWidth) };
+  }
+  /** Instant under a viewport x, measured from the scroller's left edge. */
+  instantAt(viewportX) {
+    return this.msAt(this.scroller.scrollLeft + viewportX - this.labelWidth);
+  }
+  /** Viewport x of an instant at the current scroll. */
+  viewportXOf(ms) {
+    return this.labelWidth + this.x(ms) - this.scroller.scrollLeft;
+  }
+  /** Scrolls so `ms` sits at `viewportX`. */
+  placeInstant(ms, viewportX, smooth = false) {
+    this.scrollLeftTo(this.labelWidth + this.x(ms) - viewportX, smooth);
+  }
+  scrollToInstant(ms, align, smooth) {
+    const vp = this.trackViewport();
+    const vx = vp.left + (align === "start" ? 0 : align === "end" ? vp.width : vp.width / 2);
+    this.placeInstant(ms, vx, smooth);
+  }
+  /** Viewport x of the middle of the visible track. */
+  viewportCentre() {
+    const vp = this.trackViewport();
+    return vp.left + vp.width / 2;
+  }
+  /** The scroller's left edge in client coordinates. */
+  viewportLeft() {
+    return this.scroller.getBoundingClientRect().left;
+  }
+  scrollLeftTo(left, smooth) {
+    const max = Math.max(0, this.scroller.scrollWidth - this.scroller.clientWidth);
+    const target = Math.max(0, Math.min(max || left, left));
+    if (typeof this.scroller.scrollTo === "function") this.scroller.scrollTo({ left: target, behavior: smooth ? "smooth" : "auto" });
+    else this.scroller.scrollLeft = target;
+  }
+  buildHead() {
+    const { doc, fmt, today } = this.ctx;
+    const top = h(doc, "div", "tnc-tl-tier tnc-tl-tier--major");
+    const bottom = h(doc, "div", "tnc-tl-tier tnc-tl-tier--minor");
+    const corner = h(doc, "div", "tnc-tl-corner");
+    const ticks = this.ticks;
+    ticks.append(top, bottom);
+    if (this.todayTag) ticks.append(this.todayTag);
+    this.head.append(corner, ticks);
+    const unit = this.scale.unit;
+    const add = (tier, x0, x1, label, cls = "") => {
+      const t = h(doc, "div", `tnc-tl-tick ${cls}`, null, h(doc, "span", null, null, label));
+      setStyle(t, { left: x0, width: Math.max(0, x1 - x0) });
+      tier.append(t);
+    };
+    const s = this.startDay;
+    const e = this.endDay;
+    if (unit === "hour") {
+      for (let d = s; d < e; d++) add(top, this.xDay(d), this.xDay(d + 1), fmt.longDate(d), d === today ? "is-today" : "");
+    } else if (unit === "month" || unit === "quarter") {
+      for (let d = startOfYear(s); d < e; d = startOfYear(addMonths(d, 12))) {
+        add(top, this.xDay(Math.max(d, s)), this.xDay(Math.min(startOfYear(addMonths(d, 12)), e)), fmt.year(d));
+      }
+    } else {
+      for (let d = startOfMonth(s); d < e; d = addMonths(d, 1)) {
+        add(top, this.xDay(Math.max(d, s)), this.xDay(Math.min(addMonths(d, 1), e)), fmt.monthYear(d));
+      }
+    }
+    if (unit === "hour") {
+      const step = this.scale.unitWidth >= 28 ? 1 : this.scale.unitWidth >= 14 ? 2 : 6;
+      for (let d = s; d < e; d++) {
+        for (let hr = 0; hr < 24; hr += step) {
+          const x0 = this.xDay(d) + hr / 24 * this.dayWidth;
+          add(bottom, x0, x0 + step / 24 * this.dayWidth, fmt.slotLabel(hr * 60));
+        }
+      }
+    } else if (unit === "day") {
+      for (let d = s; d < e; d++) {
+        const narrow = this.dayWidth < 26;
+        add(bottom, this.xDay(d), this.xDay(d + 1), narrow ? fmt.dayNumber(d) : `${fmt.weekdayNarrow(d)} ${fmt.dayNumber(d)}`, [
+          d === today ? "is-today" : "",
+          ...this.ctx.dayClasses(d).filter((c) => c === "is-weekend")
+        ].join(" "));
+      }
+    } else if (unit === "week") {
+      for (let d = startOfWeek(s, this.ctx.firstDay); d < e; d += 7) {
+        add(bottom, this.xDay(Math.max(d, s)), this.xDay(Math.min(d + 7, e)), `${fmt.monthShort(d)} ${fmt.dayNumber(d)}`);
+      }
+    } else {
+      const step = unit === "quarter" ? 3 : 1;
+      for (let d = startOfMonth(s); d < e; d = addMonths(d, step)) {
+        const label = unit === "quarter" ? `Q${Math.floor((ymdOfDay(d).month - 1) / 3) + 1}` : fmt.monthShort(d);
+        add(bottom, this.xDay(Math.max(d, s)), this.xDay(Math.min(addMonths(d, step), e)), label);
+      }
+    }
+    const colPx = unit === "hour" ? this.dayWidth / 24 : unit === "day" ? this.dayWidth : this.dayWidth * 7;
+    this.el.style.setProperty("--tnc-tl-col-w", `${colPx}px`);
+    this.el.style.setProperty("--tnc-tl-day-px", `${this.dayWidth}px`);
+  }
+  /* --------------------------------------------------------------- render */
+  mountRow(row) {
+    const { ctx } = this;
+    const { doc } = ctx;
+    const el = h(doc, "div", `tnc-tl-row${row.group ? " is-group" : ""}`, { role: "row", "data-row": row.id });
+    const label = h(doc, "div", "tnc-tl-label", { role: "rowheader" });
+    label.style.paddingLeft = `${10 + (row.depth ?? 0) * 16}px`;
+    if (row.color) label.style.setProperty("--tnc-c", row.color);
+    const tl = this.tl;
+    if (tl.rowLabelDidMount) tl.rowLabelDidMount({ row, el: label });
+    else if (tl.rowContent) tl.rowContent(row, label);
+    else label.append(h(doc, "span", "tnc-tl-label-text", null, row.title));
+    if (tl.onRowClick) label.addEventListener("click", (ev) => this.tl.onRowClick?.(row, ev));
+    const track = h(doc, "div", "tnc-tl-track", { role: "cell" });
+    el.append(label, track);
+    return { row, el, label, track, pool: row.group ? null : new ItemPool(ctx, track), top: 0, height: this.rowHeight };
+  }
+  unmountRow(rec) {
+    rec.pool?.clear();
+    this.tl.rowLabelWillUnmount?.({ row: rec.row, el: rec.label });
+    rec.el.remove();
+  }
+  render(_change) {
+    const { ctx } = this;
+    const { store } = ctx;
+    const byRow = /* @__PURE__ */ new Map();
+    for (const n of store.inRange(this.startDay, this.endDay)) {
+      if (n.item.display === "none") continue;
+      const rowId = ctx.dragRow?.id === n.id ? ctx.dragRow.rowId : this.tl.rowOf(n.item);
+      if (rowId == null) continue;
+      const list = byRow.get(rowId) ?? [];
+      list.push(n);
+      byRow.set(rowId, list);
+    }
+    const old = new Map(this.rows.map((r) => [r.row.id, r]));
+    const next = [];
+    let y = 0;
+    for (const row of this.tl.rows) {
+      let rec = old.get(row.id);
+      if (rec && !sameRow(rec.row, row)) {
+        this.unmountRow(rec);
+        rec = void 0;
+      }
+      rec ??= this.mountRow(row);
+      old.delete(row.id);
+      const items = byRow.get(row.id) ?? [];
+      const lane = layoutLane(items, Number.NEGATIVE_INFINITY, Number.POSITIVE_INFINITY);
+      const levels = Math.max(1, lane.levels);
+      rec.height = this.rowHeight * levels;
+      rec.el.style.height = `${rec.height}px`;
+      rec.top = y;
+      y += rec.height;
+      if (rec.pool) {
+        rec.pool.begin();
+        for (const bar of lane.bars) this.placeBar(rec.pool, bar.item, bar.level);
+        rec.pool.end();
+      }
+      next.push(rec);
+    }
+    for (const rec of old.values()) this.unmountRow(rec);
+    let prev = null;
+    for (const rec of next) {
+      if (prev ? prev.nextSibling !== rec.el : this.rowsEl.firstChild !== rec.el) {
+        if (prev) prev.after(rec.el);
+        else this.rowsEl.prepend(rec.el);
+      }
+      prev = rec.el;
+    }
+    this.rows = next;
+    this.rowsEl.style.height = `${y}px`;
+    this.rowsEl.append(this.svg, this.selLayer, this.todayLine);
+    this.drawDependencies();
+    this.tick();
+  }
+  placeBar(pool, n, level) {
+    const { ctx } = this;
+    const milestone = n.item.kind === "milestone";
+    const el = pool.place(n.id, { n, day: n.startDay, isStart: true, isEnd: true, variant: "timeline", mirror: false });
+    const x0 = n.allDay ? this.xDay(n.startDay) : this.x(n.startMs);
+    const x1 = n.allDay ? this.xDay(n.endDay) : this.x(n.endMs);
+    el.classList.toggle("is-milestone", milestone);
+    el.classList.toggle("is-conflict", ctx.conflicts.has(n.id));
+    if (milestone) {
+      const cx = n.allDay ? this.xDay(n.startDay) + this.dayWidth / 2 : x0;
+      setStyle(el, { left: cx, width: null, top: level * this.rowHeight, "--tnc-grip": null });
+      return;
+    }
+    const width = Math.max(4, x1 - x0);
+    el.classList.toggle("is-compact", width < COMPACT_PX);
+    el.classList.toggle("is-narrow", width < NARROW_PX);
+    const grip = Math.min(8, Math.floor((width - 12) / 2));
+    setStyle(el, { left: x0, width, top: level * this.rowHeight, "--tnc-grip": width < NARROW_PX ? null : `${grip}px` });
+  }
+  rowOfItem(id) {
+    for (const r of this.rows) if (r.pool?.elementsFor(id).length) return r;
+    return void 0;
+  }
+  /** Track x of a bar's start or finish edge. */
+  edgeX(el, edge) {
+    if (el.classList.contains("is-milestone")) return el.offsetLeft + (edge === "start" ? -MILESTONE_R : MILESTONE_R);
+    return edge === "start" ? el.offsetLeft : el.offsetLeft + el.offsetWidth;
+  }
+  drawDependencies() {
+    const { ctx } = this;
+    this.svg.replaceChildren();
+    if (!this.tl.dependencies) return;
+    this.svg.setAttribute("width", String(this.trackWidth()));
+    this.svg.setAttribute("height", this.rowsEl.style.height.replace("px", "") || "0");
+    this.svg.style.left = `${this.labelWidth}px`;
+    for (const n of ctx.store.all()) {
+      if (!n.item.dependsOn?.length) continue;
+      const toRow = this.rowOfItem(n.id);
+      const toEl = toRow?.pool?.elementsFor(n.id)[0];
+      if (!toRow || !toEl) continue;
+      for (const dep of itemDependencies(n.item)) {
+        const fromRow = this.rowOfItem(dep.id);
+        const fromEl = fromRow?.pool?.elementsFor(dep.id)[0];
+        if (!fromRow || !fromEl) continue;
+        const path = this.ctx.doc.createElementNS(SVG, "path");
+        path.setAttribute(
+          "d",
+          dependencyPath(
+            dep.type,
+            this.edgeX(fromEl, dep.type[0] === "S" ? "start" : "finish"),
+            fromRow.top + fromEl.offsetTop + fromEl.offsetHeight / 2,
+            this.edgeX(toEl, dep.type[1] === "S" ? "start" : "finish"),
+            toRow.top + toEl.offsetTop + toEl.offsetHeight / 2
+          )
+        );
+        path.setAttribute("marker-end", "url(#tnc-arrow)");
+        path.dataset.from = dep.id;
+        path.dataset.to = n.id;
+        path.dataset.type = dep.type;
+        if (ctx.conflicts.get(n.id)?.includes(dep.id)) path.classList.add("is-conflict");
+        this.svg.append(path);
+      }
+    }
+    const defs = this.ctx.doc.createElementNS(SVG, "defs");
+    defs.innerHTML = '<marker id="tnc-arrow" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,0 L8,4 L0,8 z" fill="currentColor"/></marker>';
+    this.svg.prepend(defs);
+  }
+  /* ---------------------------------------------------------------- links */
+  linkTargetAt(clientX, clientY, from) {
+    const under = this.ctx.doc.elementFromPoint(clientX, clientY);
+    const el = under?.closest(".tnc-item--timeline");
+    if (!el || !this.el.contains(el)) return null;
+    const meta = this.ctx.meta.get(el);
+    if (!meta || meta.mirror || meta.n.id === from.id) return null;
+    const port = under?.closest(".tnc-port") ?? null;
+    let edge;
+    if (port) edge = port.dataset.edge === "start" ? "start" : "finish";
+    else if (el.classList.contains("is-milestone")) edge = "start";
+    else {
+      const r = el.getBoundingClientRect();
+      edge = clientX < r.left + r.width / 2 ? "start" : "finish";
+    }
+    return { n: meta.n, el, edge, port };
+  }
+  /** Centre of a target edge's port, in track coordinates. */
+  targetPoint(t) {
+    const port = t.port ?? t.el.querySelector(`.tnc-port[data-edge="${t.edge}"]`);
+    const rowsR = this.rowsEl.getBoundingClientRect();
+    const r = (port ?? t.el).getBoundingClientRect();
+    return { x: r.left + r.width / 2 - rowsR.left - this.labelWidth, y: r.top + r.height / 2 - rowsR.top };
+  }
+  linkArg(from, fromEdge, t) {
+    return { from: from.item, to: t.n.item, fromEdge, toEdge: t.edge, type: dependencyType(fromEdge, t.edge) };
+  }
+  linkState(s, phase, linked = false) {
+    const t = s.target;
+    return {
+      phase,
+      from: s.from.item,
+      fromEdge: s.fromEdge,
+      to: t?.n.item ?? null,
+      toEdge: t?.edge ?? null,
+      type: t ? dependencyType(s.fromEdge, t.edge) : null,
+      valid: s.valid,
+      reason: s.reason,
+      linked
+    };
+  }
+  markTarget(t, on, invalid = false) {
+    if (!t) return;
+    t.el.classList.toggle("is-link-target", on);
+    t.el.classList.toggle("is-link-invalid", on && invalid);
+    for (const p of t.el.querySelectorAll(".tnc-port")) {
+      const hit = on && p.dataset.edge === t.edge;
+      p.classList.toggle("is-target", hit);
+      p.classList.toggle("is-invalid", hit && invalid);
+    }
+  }
+  onLinkDown = (ev) => {
+    const port = ev.target.closest?.(".tnc-port");
+    if (!port || !this.tl.onLink || ev.button !== 0 || this.link) return;
+    const barEl = port.closest(".tnc-item");
+    const meta = barEl ? this.ctx.meta.get(barEl) : void 0;
+    if (!meta) return;
+    ev.stopPropagation();
+    ev.preventDefault();
+    const rowsR = this.rowsEl.getBoundingClientRect();
+    const pr = port.getBoundingClientRect();
+    const x = pr.left + pr.width / 2 - rowsR.left - this.labelWidth;
+    const y = pr.top + pr.height / 2 - rowsR.top;
+    const path = this.ctx.doc.createElementNS(SVG, "path");
+    path.classList.add("is-linking");
+    path.setAttribute("d", `M${x},${y}`);
+    this.svg.append(path);
+    const doc = this.ctx.doc;
+    const move = (e) => {
+      const s = this.link;
+      if (!s || e.pointerId !== s.pointerId) return;
+      e.preventDefault();
+      const t = this.linkTargetAt(e.clientX, e.clientY, s.from);
+      const r = this.rowsEl.getBoundingClientRect();
+      const end = t ? this.targetPoint(t) : { x: e.clientX - r.left - this.labelWidth, y: e.clientY - r.top };
+      s.path.setAttribute("d", `M${s.x},${s.y} L${end.x},${end.y}`);
+      if (t?.n.id === s.target?.n.id && t?.edge === s.target?.edge) return;
+      this.markTarget(s.target, false);
+      s.target = t;
+      s.valid = true;
+      s.reason = null;
+      if (t) {
+        const verdict = this.tl.canLink?.(this.linkArg(s.from, s.fromEdge, t)) ?? true;
+        s.valid = verdict === true;
+        s.reason = typeof verdict === "string" ? verdict : null;
+      }
+      s.path.classList.toggle("is-invalid", !s.valid);
+      this.markTarget(t, true, !s.valid);
+      this.tl.onLinkDrag?.(this.linkState(s, "over"));
+    };
+    const finish = (e) => {
+      const s = this.link;
+      if (!s) return;
+      if (e) move(e);
+      this.endLink(e !== null);
+    };
+    const up = (e) => {
+      if (this.link && e.pointerId === this.link.pointerId) finish(e);
+    };
+    const cancel = (e) => {
+      if (this.link && e.pointerId === this.link.pointerId) finish(null);
+    };
+    const key = (e) => {
+      if (e.key !== "Escape") return;
+      e.preventDefault();
+      e.stopPropagation();
+      finish(null);
+    };
+    doc.addEventListener("pointermove", move);
+    doc.addEventListener("pointerup", up);
+    doc.addEventListener("pointercancel", cancel);
+    doc.addEventListener("keydown", key, true);
+    this.link = {
+      from: meta.n,
+      fromEdge: port.dataset.edge === "start" ? "start" : "finish",
+      path,
+      x,
+      y,
+      pointerId: ev.pointerId,
+      target: null,
+      valid: true,
+      reason: null,
+      cleanup: () => {
+        doc.removeEventListener("pointermove", move);
+        doc.removeEventListener("pointerup", up);
+        doc.removeEventListener("pointercancel", cancel);
+        doc.removeEventListener("keydown", key, true);
+      }
+    };
+    this.el.classList.add("is-linking");
+    this.tl.onLinkDrag?.(this.linkState(this.link, "start"));
+  };
+  endLink(commit) {
+    const s = this.link;
+    if (!s) return;
+    this.link = null;
+    s.cleanup();
+    s.path.remove();
+    this.markTarget(s.target, false);
+    this.el.classList.remove("is-linking");
+    if (commit) this.ctx.suppressNextClick();
+    else s.target = null;
+    const linked = commit && !!s.target && s.valid;
+    if (linked && s.target) this.tl.onLink?.(this.linkArg(s.from, s.fromEdge, s.target));
+    this.tl.onLinkDrag?.(this.linkState(s, "end", linked));
+  }
+  /* ------------------------------------------------------------ selection */
+  showSelection(sel) {
+    this.selLayer.replaceChildren();
+    if (!sel) return;
+    const row = sel.rowId ? this.rows.find((r) => r.row.id === sel.rowId) : void 0;
+    if (sel.rowId && !row) return;
+    const x0 = sel.allDay ? this.xDay(sel.startDay) : this.x(sel.startMs);
+    const x1 = sel.allDay ? this.xDay(sel.endDay) : this.x(sel.endMs);
+    const box = h(this.ctx.doc, "div", `tnc-sel${row ? "" : " is-column"}`);
+    const height = row ? row.height : parseFloat(this.rowsEl.style.height) || 0;
+    setStyle(box, { left: this.labelWidth + x0, width: Math.max(2, x1 - x0), top: row ? row.top : 0, height });
+    this.selLayer.append(box);
+  }
+  /* ------------------------------------------------------------- hit test */
+  hit(x, y) {
+    const vr = this.scroller.getBoundingClientRect();
+    const right = vr.left + (this.scroller.clientWidth || vr.width);
+    const bottom = vr.top + (this.scroller.clientHeight || vr.height);
+    if (x < vr.left || x >= right || y < vr.top || y >= bottom) return null;
+    const r = this.rowsEl.getBoundingClientRect();
+    const px2 = x - r.left - this.labelWidth;
+    const days = px2 / this.dayWidth;
+    const day = this.startDay + Math.floor(days);
+    const minute = (days - Math.floor(days)) * MINUTES_PER_DAY;
+    const inLabel = x < vr.left + this.labelWidth;
+    const inHead = y < this.head.getBoundingClientRect().bottom;
+    const rel = y - r.top;
+    const row = inHead ? void 0 : this.rows.find((rec) => rel >= rec.top && rel < rec.top + rec.height);
+    let area;
+    if (inLabel) area = "label";
+    else if (inHead) area = px2 < this.trackWidth() ? "header" : "outside";
+    else area = row && px2 >= 0 && px2 < this.trackWidth() ? "track" : "outside";
+    return { kind: "timeline", rowId: row?.row.id ?? null, day, minute, area, overTrack: area === "track" && !!row && !row.row.group };
+  }
+  tick() {
+    const x = this.x(this.ctx.now());
+    const inRange = x >= 0 && x <= this.trackWidth();
+    this.todayLine.hidden = !inRange;
+    this.todayLine.style.left = `${this.labelWidth + x}px`;
+    if (this.todayTag) {
+      this.todayTag.hidden = !inRange;
+      this.todayTag.style.left = `${x}px`;
+    }
+  }
+  /** Scrolls so `day` sits a little in from the left edge. */
+  scrollToDay(day) {
+    this.scroller.scrollLeft = Math.max(0, this.xDay(day) - this.dayWidth * 2);
+  }
+  getScroll() {
+    return { top: this.scroller.scrollTop, left: this.scroller.scrollLeft };
+  }
+  setScroll(s) {
+    this.scroller.scrollTop = s.top;
+    this.scroller.scrollLeft = s.left;
+  }
+  elementsFor(id) {
+    return this.rows.flatMap((r) => r.pool?.elementsFor(id) ?? []);
+  }
+  destroy() {
+    this.endLink(false);
+    this.el.removeEventListener("pointerdown", this.onLinkDown, true);
+    for (const r of this.rows) this.unmountRow(r);
+    this.rows = [];
+    this.el.remove();
+  }
+};
+function dependencyPath(type, x1, y1, x2, y2) {
+  const gap = 10;
+  const out = type[0] === "S" ? -1 : 1;
+  const side = type[1] === "S" ? -1 : 1;
+  const xa = x1 + out * gap;
+  const xb = x2 + side * gap;
+  const xEnd = x2 + side * 2;
+  if (out === side) {
+    const xe = out < 0 ? Math.min(xa, xb) : Math.max(xa, xb);
+    return `M${x1},${y1} H${xe} V${y2} H${xEnd}`;
+  }
+  if (out > 0 ? xa <= xb : xa >= xb) {
+    const mid = (x1 + x2) / 2;
+    return `M${x1},${y1} H${mid} V${y2} H${xEnd}`;
+  }
+  return `M${x1},${y1} H${xa} V${(y1 + y2) / 2} H${xb} V${y2} H${xEnd}`;
+}
+
+// src/dom/views/year.ts
+var YearView = class {
+  constructor(ctx) {
+    this.ctx = ctx;
+    const { doc, fmt, opts } = ctx;
+    this.el = h(doc, "div", "tnc-year");
+    this.scroller = h(doc, "div", "tnc-year-scroll");
+    const grid = h(doc, "div", "tnc-year-grid");
+    let month = ctx.view.range.startDay;
+    for (let i = 0; i < 12; i++) {
+      const { year, month: m } = ymdOfDay(month);
+      const box = h(doc, "section", "tnc-ym", { "aria-label": fmt.monthYear(month) });
+      const title = opts.navLinks ? h(doc, "button", "tnc-ym-title", { type: "button", "data-month": `${year}-${m}` }, fmt.monthLong(month)) : h(doc, "div", "tnc-ym-title", null, fmt.monthLong(month));
+      const first = month;
+      if (opts.navLinks) title.addEventListener("click", (ev) => this.ctx.navigate(first, ev, "month"));
+      box.append(title);
+      const days = h(doc, "div", "tnc-ym-days", { role: "group", "aria-label": fmt.monthYear(month) });
+      const start = startOfWeek(month, ctx.firstDay);
+      for (let d = start; d < start + 7; d++) days.append(h(doc, "div", "tnc-ym-dow", { "aria-hidden": "true" }, fmt.weekdayNarrow(d)));
+      const len = daysInMonth(year, m);
+      for (let d = start; d < month; d++) days.append(h(doc, "div", "tnc-ym-pad"));
+      for (let d = month; d < month + len; d++) {
+        const arg = ctx.dayArg(d);
+        const cell = h(doc, "button", ["tnc-ym-day", ...ctx.dayClasses(d)].join(" "), {
+          type: "button",
+          "data-date": arg.dateStr,
+          "aria-label": fmt.longDate(d)
+        });
+        const dots = h(doc, "span", "tnc-ym-dots", { "aria-hidden": "true" });
+        cell.append(h(doc, "span", "tnc-ym-num", null, fmt.dayNumber(d)), dots);
+        days.append(cell);
+        this.cells.push({ day: d, el: cell, dots });
+      }
+      box.append(days);
+      grid.append(box);
+      month = addMonths(month, 1);
+    }
+    this.scroller.append(grid);
+    this.el.append(this.scroller);
+  }
+  ctx;
+  el;
+  scroller;
+  cells = [];
+  render(_change) {
+    const { store } = this.ctx;
+    const doc = this.ctx.doc;
+    for (const c of this.cells) {
+      const items = store.inRange(c.day, c.day + 1).filter((n) => n.item.display !== "background").sort(this.ctx.order);
+      c.el.dataset.count = String(items.length);
+      c.el.classList.toggle("has-items", items.length > 0);
+      c.el.style.setProperty("--tnc-heat", String(Math.min(1, items.length / 6)));
+      c.dots.replaceChildren(
+        ...items.slice(0, 3).map((n) => {
+          const dot = h(doc, "i");
+          const color = n.item.color ?? n.item.borderColor ?? n.item.backgroundColor;
+          if (color) dot.style.setProperty("--tnc-c", color);
+          return dot;
+        })
+      );
+      const label = this.ctx.fmt.longDate(c.day);
+      c.el.setAttribute("aria-label", items.length ? `${label}, ${this.ctx.text.itemCount(items.length)}` : label);
+      c.el.title = items.length ? `${label}
+${items.slice(0, 8).map((n) => `\u2022 ${n.item.title}`).join("\n")}${items.length > 8 ? `
+${this.ctx.text.more(items.length - 8)}` : ""}` : label;
+    }
+  }
+  showSelection(_sel) {
+  }
+  hit(x, y) {
+    const el = this.ctx.doc.elementFromPoint(x, y)?.closest(".tnc-ym-day");
+    const c = el ? this.cells.find((cell) => cell.el === el) : void 0;
+    return c ? { kind: "day", day: c.day } : null;
+  }
+  dayAt(el) {
+    const btn = el.closest(".tnc-ym-day");
+    return this.cells.find((c) => c.el === btn)?.day ?? null;
+  }
+  getScroll() {
+    return { top: this.scroller.scrollTop, left: 0 };
+  }
+  setScroll(s) {
+    this.scroller.scrollTop = s.top;
+  }
+  elementsFor(_id) {
+    return [];
+  }
+  destroy() {
+    this.el.remove();
+  }
+};
+
+// src/dom/calendar.ts
+var EXTERNAL_ID = "__tnc_external__";
+function sameOption(a, b, depth = 0) {
+  if (a === b) return true;
+  if (typeof a === "function" && typeof b === "function") return true;
+  if (depth > 4 || !a || !b || typeof a !== "object" || typeof b !== "object") return false;
+  if (Array.isArray(a) || Array.isArray(b)) {
+    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false;
+    return a.every((v, i) => sameOption(v, b[i], depth + 1));
+  }
+  if (Object.getPrototypeOf(a) !== Object.prototype || Object.getPrototypeOf(b) !== Object.prototype) return false;
+  const ka = Object.keys(a);
+  const kb = Object.keys(b);
+  if (ka.length !== kb.length) return false;
+  return ka.every((k) => sameOption(a[k], b[k], depth + 1));
+}
+function timelineSansRows(t) {
+  return t ? { ...t, rows: null } : t;
+}
+function sameProposal(a, b) {
+  return !!a && !!b && a.startMs === b.startMs && a.endMs === b.endMs && a.allDay === b.allDay && a.rowId === b.rowId;
+}
+var Calendar = class {
+  constructor(host, options = {}, items = []) {
+    this.host = host;
+    this.doc = host.ownerDocument;
+    this.win = this.doc.defaultView ?? globalThis;
+    this.opts = { ...defaultOptions(), ...options };
+    this.zone = getTimeZone(this.opts.timeZone);
+    this.fmt = new Formatter(this.opts.locale, this.opts.hour12);
+    this.text = this.resolveText();
+    this.order = parseOrder(this.opts.eventOrder);
+    this.store = new ItemStore(this.zone, {
+      defaultTimedMinutes: this.opts.defaultTimedMinutes,
+      defaultAllDayDays: this.opts.defaultAllDayDays
+    });
+    this.store.setAll(items);
+    this.conflicts = dependencyConflicts(this.store);
+    this.anchor = this.toDay(this.opts.date) ?? this.todayDay();
+    this.selectedIds = this.selectedSet();
+    this.root = h(this.doc, "div", "tnc", { "data-tnc": "" });
+    this.toolbarEl = h(this.doc, "div", "tnc-toolbar", { role: "toolbar" });
+    this.viewHost = h(this.doc, "div", "tnc-view");
+    this.root.append(this.toolbarEl, this.viewHost);
+    host.append(this.root);
+    this.bindEvents();
+    this.rebuild(true);
+    this.scheduleTick();
+    const RO = this.win.ResizeObserver;
+    if (RO) {
+      this.resizeObs = new RO(() => this.current?.resize?.());
+      this.resizeObs.observe(this.root);
+    }
+  }
+  host;
+  doc;
+  win;
+  root;
+  store;
+  meta = /* @__PURE__ */ new WeakMap();
+  opts;
+  zone;
+  fmt;
+  text;
+  order;
+  view;
+  firstDay = 0;
+  days = [];
+  today = 0;
+  conflicts = /* @__PURE__ */ new Map();
+  slot = { min: 0, max: MINUTES_PER_DAY, duration: 30, snap: 30, scroll: 480 };
+  draggingId = null;
+  dragRow = null;
+  toolbarEl;
+  viewHost;
+  current = null;
+  anchor = 0;
+  session = null;
+  selection = null;
+  suppressClick = false;
+  selectedIds = /* @__PURE__ */ new Set();
+  popover = null;
+  timer = null;
+  resizeObs = null;
+  destroyed = false;
+  pendingChange = null;
+  frame = null;
+  /* ================================================================ public */
+  /** Replaces all items, re-rendering only what changed. */
+  setItems(items) {
+    const drag = this.session?.active && this.session.origin ? this.store.get(this.session.origin.id) : void 0;
+    const change = this.store.setAll(items);
+    if (drag && this.session?.origin) {
+      const fresh = this.store.get(drag.id);
+      if (fresh) this.session.origin = fresh;
+      this.merge(change, this.store.upsert([drag.item]));
+    }
+    this.applyChange(change);
+  }
+  upsertItems(items) {
+    this.applyChange(this.store.upsert(items));
+  }
+  removeItems(ids) {
+    this.applyChange(this.store.remove(ids));
+  }
+  getItem(id) {
+    return this.store.get(id)?.item;
+  }
+  /**
+   * Updates options. Only what the change affects is rebuilt.
+   *
+   * In the timeline, a new `date`, range or scale keeps what is on screen
+   * instead of jumping back to the anchor date: a scale change keeps the
+   * instant at the middle of the visible track, other changes keep the left
+   * edge. Pass `anchor` to pin a different instant, e.g. the one under the
+   * pointer when zooming with the wheel.
+   */
+  setOptions(next, how = {}) {
+    const prev = this.opts;
+    this.opts = { ...prev, ...next };
+    const changed = Object.keys(next).filter(
+      (k) => !sameOption(next[k], prev[k])
+    );
+    if (!changed.length) return;
+    const has = (k) => changed.includes(k);
+    if (has("selected")) this.applySelected();
+    const rest = changed.filter((k) => k !== "selected");
+    if (!rest.length) return;
+    if (rest.length === 1 && has("timeline") && this.current instanceof TimelineView && sameOption(timelineSansRows(this.opts.timeline), timelineSansRows(prev.timeline))) {
+      this.current.render(null);
+      if (this.selection) this.current.showSelection(this.selection);
+      return;
+    }
+    if (has("timeZone") || has("defaultTimedMinutes") || has("defaultAllDayDays")) {
+      this.zone = getTimeZone(this.opts.timeZone);
+      this.store.reconfigure(this.zone, {
+        defaultTimedMinutes: this.opts.defaultTimedMinutes,
+        defaultAllDayDays: this.opts.defaultAllDayDays
+      });
+    }
+    if (has("locale") || has("hour12")) this.fmt = new Formatter(this.opts.locale, this.opts.hour12);
+    if (has("text") || has("locale")) this.text = this.resolveText();
+    if (has("eventOrder")) this.order = parseOrder(this.opts.eventOrder);
+    if (has("date")) this.anchor = this.toDay(this.opts.date) ?? this.anchor;
+    const needsRebuild = changed.some((k) => LAYOUT_KEYS.has(k)) || has("date");
+    if (!needsRebuild) return;
+    const keep = !has("view") && this.opts.view === "timeline" ? this.timelineKeep(prev, how.anchor) : null;
+    if (keep) this.rebuild(false, keep);
+    else this.rebuild(has("view") || has("date"));
+  }
+  /** What a timeline rebuild should keep on screen. */
+  timelineKeep(prev, anchor) {
+    const view = this.current;
+    if (!(view instanceof TimelineView)) return null;
+    const top = view.getScroll().top;
+    if (anchor) {
+      const date = anchor.date !== void 0 ? this.toMs(anchor.date) : null;
+      if (anchor.clientX !== void 0) {
+        const vx2 = anchor.clientX - view.viewportLeft();
+        return { ms: date ?? view.instantAt(vx2), vx: vx2, top };
+      }
+      if (date !== null) return { ms: date, vx: view.viewportXOf(date), top };
+    }
+    const before = prev.timeline?.scale;
+    const after = this.opts.timeline?.scale;
+    const rescaled = !sameOption(before, after) || prev.timeline?.labelWidth !== this.opts.timeline?.labelWidth;
+    const vx = rescaled ? view.viewportCentre() : this.opts.timeline?.labelWidth ?? 240;
+    return { ms: view.instantAt(vx), vx, top };
+  }
+  /** Re-renders everything, e.g. after render hooks start returning different content. */
+  rerender() {
+    this.rebuild(false);
+  }
+  getOptions() {
+    return this.opts;
+  }
+  changeView(view, date) {
+    if (date !== void 0) this.anchor = this.toDay(date) ?? this.anchor;
+    if (view === this.opts.view && date === void 0) return;
+    this.opts = { ...this.opts, view };
+    this.rebuild(true);
+    this.opts.onViewChange?.(this.view);
+  }
+  gotoDate(date) {
+    const day = this.toDay(date);
+    if (day === null) return;
+    this.anchor = day;
+    this.rebuild(true);
+  }
+  prev() {
+    this.anchor = this.step(-1);
+    this.rebuild(true);
+  }
+  next() {
+    this.anchor = this.step(1);
+    this.rebuild(true);
+  }
+  goToday() {
+    this.anchor = this.todayDay();
+    this.rebuild(true);
+  }
+  /** The anchor date, as local midnight of that civil day in the calendar zone. */
+  getDate() {
+    return new Date(toInstant(this.anchor, 0, this.zone));
+  }
+  getView() {
+    return this.view;
+  }
+  /** Clears the current selection. */
+  unselect() {
+    if (!this.selection) return;
+    this.selection = null;
+    this.current?.showSelection(null);
+    this.opts.onUnselect?.();
+  }
+  /** Re-measures (e.g. after the host was shown or resized by a parent). */
+  updateSize() {
+    this.current?.resize?.();
+  }
+  getScroll() {
+    return this.current?.getScroll() ?? { top: 0, left: 0 };
+  }
+  setScroll(s) {
+    this.current?.setScroll(s);
+  }
+  scrollToTime(time) {
+    this.current?.scrollToTime?.(parseDurationMinutes(time, this.slot.scroll));
+  }
+  /**
+   * Scrolls a date (or instant) into view. In the timeline `align` places it
+   * at the start, middle or end of the visible track; other views move to
+   * the date if it is outside the range, and time grids scroll to its time.
+   */
+  scrollToDate(date, opts = {}) {
+    const p = parseDateInput(date, this.zone);
+    if (!p) return;
+    const day = p.kind === "day" ? p.day : dayOf(p.ms, this.zone);
+    const ms = p.kind === "day" ? toInstant(p.day, 0, this.zone) : p.ms;
+    const { startDay, endDay } = this.view.range;
+    if (day < startDay || day >= endDay) {
+      this.anchor = day;
+      this.rebuild(true);
+    }
+    const view = this.current;
+    if (view instanceof TimelineView) view.scrollToInstant(ms, opts.align ?? "center", opts.smooth ?? false);
+    else if (view instanceof TimeGridView && p.kind !== "day") view.scrollToTime(wallTime(ms, this.zone).minute);
+  }
+  /** What is under a client point: a time slot, a day, or a timeline row and date. Null outside the view. */
+  hitTest(clientX, clientY) {
+    return this.current?.hit(clientX, clientY) ?? null;
+  }
+  /** Item elements currently rendered for an id. */
+  elementsFor(id) {
+    return this.current?.elementsFor(id) ?? [];
+  }
+  /**
+   * Starts dragging something from outside the calendar (a task tray, an
+   * unscheduled list). Call from a pointerdown handler; the calendar follows
+   * the pointer and fires `onExternalDrop` on release.
+   */
+  beginExternalDrag(ev, source) {
+    this.endSession(null, true);
+    this.session = {
+      mode: "external",
+      pointerId: ev.pointerId,
+      pointerType: ev.pointerType,
+      x0: ev.clientX,
+      y0: ev.clientY,
+      active: true,
+      origin: null,
+      grab: null,
+      proposal: null,
+      denied: false,
+      timer: null,
+      lastEvent: ev,
+      source
+    };
+    this.root.classList.add("tnc-dragging", "tnc-dragging-external");
+    this.listenDoc(true);
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.endSession(null, true);
+    this.closeMore();
+    if (this.timer !== null) this.win.clearTimeout(this.timer);
+    if (this.frame !== null) this.win.cancelAnimationFrame(this.frame);
+    this.resizeObs?.disconnect();
+    this.unbindEvents();
+    this.current?.destroy();
+    this.current = null;
+    this.root.remove();
+  }
+  /* ========================================================== view context */
+  now() {
+    return Date.now();
+  }
+  suppressNextClick() {
+    this.suppressClick = true;
+    this.win.setTimeout(() => this.suppressClick = false, 0);
+  }
+  dayArg(day) {
+    return {
+      day,
+      date: new Date(toInstant(day, 0, this.zone)),
+      dateStr: formatDay(day),
+      view: this.view,
+      isToday: day === this.today,
+      isPast: day < this.today
+    };
+  }
+  dayClasses(day) {
+    const out = [];
+    const wd = weekdayOf(day);
+    if (wd === 0 || wd === 6) out.push("is-weekend");
+    if (day === this.today && this.opts.todayHighlight) out.push("is-today");
+    if (day < this.today) out.push("is-past");
+    out.push(...classList(this.opts.dayClassNames?.(this.dayArg(day))));
+    return out;
+  }
+  isEditable(n, what) {
+    if (n.id === EXTERNAL_ID || this.opts.view === "list" || this.opts.view === "year") return false;
+    const it = n.item;
+    const base = it.editable ?? this.opts.editable;
+    const specific = what === "start" ? it.startEditable : it.durationEditable;
+    return specific ?? base;
+  }
+  navLink(day, label, cls) {
+    const btn = h(this.doc, "button", `tnc-navlink ${cls}`, { type: "button", "data-nav-date": formatDay(day) }, label);
+    btn.addEventListener("click", (ev) => {
+      ev.stopPropagation();
+      this.navigate(day, ev);
+    });
+    btn.addEventListener("pointerdown", (ev) => ev.stopPropagation());
+    return btn;
+  }
+  navigate(day, jsEvent, view = "day") {
+    if (this.opts.onNavLink) {
+      this.opts.onNavLink({ ...this.dayArg(day), target: view, jsEvent });
+      return;
+    }
+    this.changeView(view, formatDay(day));
+  }
+  createItemEl(meta) {
+    const { n, variant } = meta;
+    const it = n.item;
+    const el = h(this.doc, "div", "tnc-item");
+    el.classList.add(`tnc-item--${variant}`);
+    if (it.kind) el.classList.add(`tnc-k-${it.kind.replace(/[^\w-]/g, "-")}`);
+    if (it.completed) el.classList.add("is-completed");
+    if (it.display === "background") el.classList.add("is-background");
+    if (it.lane === "actual") el.classList.add("is-actual");
+    if (!meta.isStart) el.classList.add("is-cont-start");
+    if (!meta.isEnd) el.classList.add("is-cont-end");
+    if (n.allDay) el.classList.add("is-all-day");
+    if (meta.mirror || n.id === EXTERNAL_ID) el.classList.add("is-mirror");
+    if (this.conflicts.has(n.id)) el.classList.add("is-conflict");
+    const indicator = variant === "indicator";
+    if (!meta.mirror && !indicator && (this.isEditable(n, "start") || this.isEditable(n, "duration"))) el.classList.add("is-draggable");
+    if (this.draggingId === n.id) el.classList.add("is-dragging");
+    if (this.selectedIds.has(n.id) && !meta.mirror) el.classList.add("is-selected");
+    el.classList.add(...classList(it.className));
+    const arg = this.itemArg(el, meta);
+    el.classList.add(...classList(this.opts.itemClassNames?.(arg)));
+    el.dataset.id = n.id;
+    if (it.kind) el.dataset.kind = it.kind;
+    const color = it.color ?? it.borderColor;
+    if (color) el.style.setProperty("--tnc-c", color);
+    if (it.backgroundColor) el.style.setProperty("--tnc-bg", it.backgroundColor);
+    if (it.borderColor) el.style.setProperty("--tnc-border", it.borderColor);
+    if (it.textColor) el.style.setProperty("--tnc-fg", it.textColor);
+    if (indicator) el.setAttribute("aria-hidden", "true");
+    else if (it.display !== "background") {
+      el.tabIndex = 0;
+      el.setAttribute("role", "button");
+      el.setAttribute("aria-label", this.ariaLabel(n));
+    }
+    this.meta.set(el, meta);
+    const custom = variant === "list" ? this.opts.listItemContent?.(arg) : null;
+    const content = indicator ? null : custom ?? this.opts.itemContent?.(arg);
+    if (indicator) {
+    } else if (content != null) {
+      const wrap = h(this.doc, "div", "tnc-item-main");
+      wrap.append(content);
+      el.append(wrap);
+    } else {
+      el.append(this.defaultContent(meta));
+    }
+    if (variant !== "list" && !indicator && it.display !== "background") this.addHandles(el, meta);
+    this.opts.itemDidMount?.(arg);
+    return el;
+  }
+  refreshItemEl(el, meta) {
+    const time = el.querySelector(":scope .tnc-item-time");
+    if (time) this.fillTime(time, meta.n, meta.variant, meta.day);
+    el.classList.toggle("is-dragging", this.draggingId === meta.n.id);
+    el.classList.toggle("is-conflict", this.conflicts.has(meta.n.id));
+    el.classList.toggle("is-selected", this.selectedIds.has(meta.n.id) && !meta.mirror);
+  }
+  selectedSet() {
+    const s = this.opts.selected;
+    return new Set(s == null ? [] : typeof s === "string" ? [s] : s);
+  }
+  applySelected() {
+    this.selectedIds = this.selectedSet();
+    for (const el of this.viewHost.querySelectorAll(".tnc-item")) {
+      const meta = this.meta.get(el);
+      if (meta) el.classList.toggle("is-selected", this.selectedIds.has(meta.n.id) && !meta.mirror);
+    }
+  }
+  destroyItemEl(el) {
+    const meta = this.meta.get(el);
+    if (meta) this.opts.itemWillUnmount?.(this.itemArg(el, meta));
+    el.remove();
+  }
+  openMore(day, anchor, jsEvent) {
+    jsEvent.stopPropagation();
+    const items = this.store.inRange(day, day + 1).filter((n) => n.item.display !== "background" && (n.allDay || this.opts.view === "month" || !this.opts.timeGrid || this.opts.eventMaxStack > 0)).sort((a, b) => Number(b.allDay) - Number(a.allDay) || this.order(a, b));
+    const shown = new Set(
+      [...this.viewHost.querySelectorAll(".tnc-item")].filter((el2) => this.meta.get(el2)?.day === day || (this.meta.get(el2)?.n.startDay ?? Infinity) <= day).map((el2) => el2.dataset.id ?? "")
+    );
+    const res = this.opts.onMoreClick?.({
+      day,
+      date: new Date(toInstant(day, 0, this.zone)),
+      items: items.map((n) => n.item),
+      hidden: items.filter((n) => !shown.has(n.id)).map((n) => n.item),
+      jsEvent,
+      el: anchor,
+      view: this.view
+    });
+    if (res === false) return;
+    this.closeMore();
+    const el = h(this.doc, "div", "tnc-popover", { role: "dialog", "aria-label": this.fmt.longDate(day), tabindex: "-1" });
+    const close = h(this.doc, "button", "tnc-popover-close", { type: "button", "aria-label": "Close" }, "\xD7");
+    close.addEventListener("click", () => this.closeMore(true));
+    const title = this.opts.navLinks ? this.navLink(day, this.fmt.longDate(day), "tnc-popover-title") : h(this.doc, "div", "tnc-popover-title", null, this.fmt.longDate(day));
+    const body = h(this.doc, "div", "tnc-popover-body");
+    el.append(h(this.doc, "div", "tnc-popover-head", null, title, close), body);
+    this.root.append(el);
+    const pool = new ItemPool(this, body);
+    pool.begin();
+    for (const n of items) {
+      pool.place(n.id, { n, day, isStart: n.startDay >= day, isEnd: n.endDay <= day + 1, variant: n.allDay ? "bar" : "dot", mirror: false });
+    }
+    pool.end();
+    this.popover = { el, pool, anchor, day };
+    const rr = this.root.getBoundingClientRect();
+    const ar = anchor.getBoundingClientRect();
+    const w = Math.max(220, ar.width + 24);
+    let left = ar.left - rr.left - 12;
+    left = Math.max(4, Math.min(left, rr.width - w - 4));
+    let top = ar.top - rr.top - 40;
+    const height = el.offsetHeight;
+    top = Math.max(4, Math.min(top, rr.height - height - 4));
+    setStyle(el, { left, top, width: w });
+    el.focus();
+  }
+  /* =============================================================== render */
+  resolveText() {
+    const t = this.opts.text;
+    return {
+      ...DEFAULT_TEXT,
+      ...t,
+      views: { ...DEFAULT_TEXT.views, ...t.views },
+      viewHints: { ...DEFAULT_TEXT.viewHints, ...t.viewHints }
+    };
+  }
+  todayDay() {
+    return dayOf(this.now(), this.zone);
+  }
+  toDay(date) {
+    if (date === void 0 || date === null) return null;
+    const p = parseDateInput(date, this.zone);
+    if (!p) return null;
+    return p.kind === "day" ? p.day : dayOf(p.ms, this.zone);
+  }
+  toMs(date) {
+    const p = parseDateInput(date, this.zone);
+    if (!p) return null;
+    return p.kind === "day" ? toInstant(p.day, 0, this.zone) : p.ms;
+  }
+  step(dir) {
+    const { view, dayCount, listDayCount } = this.opts;
+    switch (view) {
+      case "day":
+        return this.anchor + dir;
+      case "days":
+        return this.anchor + dir * Math.max(1, dayCount);
+      case "week":
+        return this.anchor + dir * 7;
+      case "list": {
+        const n = Math.max(1, listDayCount);
+        return this.anchor + dir * (this.opts.listStart === "week" ? Math.ceil(n / 7) * 7 : n);
+      }
+      case "month":
+        return addMonths(startOfMonth(this.anchor), dir);
+      case "year":
+        return addMonths(startOfYear(this.anchor), 12 * dir);
+      case "timeline": {
+        const len = this.opts.timeline?.days ?? 120;
+        return this.anchor + dir * Math.max(7, Math.round(len / 3));
+      }
+    }
+  }
+  computeRange() {
+    const { view, dayCount, listDayCount } = this.opts;
+    const a = this.anchor;
+    switch (view) {
+      case "day":
+        return { startDay: a, endDay: a + 1 };
+      case "days":
+        return { startDay: a, endDay: a + Math.max(1, dayCount) };
+      case "week": {
+        const s = startOfWeek(a, this.firstDay);
+        return { startDay: s, endDay: s + 7 };
+      }
+      case "list": {
+        const s = this.opts.listStart === "week" ? startOfWeek(a, this.firstDay) : a;
+        return { startDay: s, endDay: s + Math.max(1, listDayCount) };
+      }
+      case "month": {
+        const s = startOfWeek(startOfMonth(a), this.firstDay);
+        return { startDay: s, endDay: s + 42 };
+      }
+      case "year": {
+        const s = startOfYear(a);
+        return { startDay: s, endDay: addMonths(s, 12) };
+      }
+      case "timeline": {
+        const lead = this.opts.timeline?.leadDays ?? 14;
+        const len = this.opts.timeline?.days ?? 120;
+        return { startDay: a - lead, endDay: a - lead + len };
+      }
+    }
+  }
+  computeTitle(startDay, endDay) {
+    const { view } = this.opts;
+    if (view === "month") return this.fmt.monthYear(this.anchor);
+    if (view === "year") return this.fmt.year(this.anchor);
+    if (view === "day") return this.fmt.fullDate(this.anchor);
+    const visible = this.days;
+    const first = visible[0] ?? startDay;
+    const last = visible[visible.length - 1] ?? endDay - 1;
+    return this.fmt.range(first, last);
+  }
+  rebuild(navigated, keep) {
+    const scroll = navigated || keep ? null : this.current?.getScroll();
+    this.closeMore();
+    this.unselectSilently();
+    this.firstDay = this.opts.firstDay ?? localeFirstDay(this.opts.locale);
+    this.today = this.todayDay();
+    const min = parseDurationMinutes(this.opts.slotMinTime, 0);
+    const max = Math.max(min + 30, parseDurationMinutes(this.opts.slotMaxTime, MINUTES_PER_DAY));
+    const duration = Math.max(1, parseDurationMinutes(this.opts.slotDuration, 30));
+    const snap = Math.max(1, parseDurationMinutes(this.opts.snapDuration ?? null, duration));
+    this.slot = { min, max, duration, snap, scroll: parseDurationMinutes(this.opts.scrollTime, 480) };
+    const { startDay, endDay } = this.computeRange();
+    const hidden = new Set(this.opts.hiddenDays);
+    if (!this.opts.weekends) {
+      hidden.add(0);
+      hidden.add(6);
+    }
+    const days = [];
+    const listLike = this.opts.view === "year" || this.opts.view === "timeline" || this.opts.view === "day";
+    for (let d = startDay; d < endDay; d++) if (listLike || !hidden.has(weekdayOf(d))) days.push(d);
+    this.days = days.length ? days : [startDay];
+    const range = {
+      startDay,
+      endDay,
+      start: new Date(toInstant(startDay, 0, this.zone)),
+      end: new Date(toInstant(endDay, 0, this.zone))
+    };
+    const prevView = this.view;
+    this.view = { type: this.opts.view, range, anchor: this.anchor, title: "" };
+    this.view.title = this.computeTitle(startDay, endDay);
+    this.conflicts = dependencyConflicts(this.store);
+    this.root.className = "tnc";
+    this.root.classList.add(`tnc--${this.opts.view}`, `tnc--height-${this.opts.height}`);
+    if (!this.opts.timeGrid) this.root.classList.add("tnc--no-time-grid");
+    this.renderToolbar();
+    this.current?.destroy();
+    this.current = this.createView();
+    this.viewHost.replaceChildren(this.current.el);
+    this.current.render(null);
+    if (keep && this.current instanceof TimelineView) {
+      this.current.setScroll({ top: keep.top, left: 0 });
+      this.current.placeInstant(keep.ms, keep.vx);
+    } else if (scroll) this.current.setScroll(scroll);
+    else if (this.current instanceof TimeGridView) this.current.scrollToTime(this.slot.scroll);
+    else if (this.current instanceof TimelineView) this.current.scrollToDay(this.anchor);
+    const rangeChanged = !prevView || prevView.type !== this.view.type || prevView.range.startDay !== startDay || prevView.range.endDay !== endDay;
+    if (rangeChanged) this.opts.onRangeChange?.(this.view);
+  }
+  createView() {
+    switch (this.opts.view) {
+      case "month":
+        return new DayGridView(this);
+      case "list":
+        return new ListView(this);
+      case "year":
+        return new YearView(this);
+      case "timeline":
+        return new TimelineView(this);
+      default:
+        return new TimeGridView(this);
+    }
+  }
+  renderToolbar() {
+    const tb = this.opts.toolbar;
+    this.toolbarEl.replaceChildren();
+    this.toolbarEl.hidden = !tb;
+    if (!tb) return;
+    const cfg = tb === true ? {} : tb;
+    const views = cfg.views ?? ["month", "week", "days", "day", "list", "year"];
+    const btn = (label, hint, cls, onClick, pressed) => {
+      const b = h(this.doc, "button", `tnc-btn ${cls}`, { type: "button", title: hint, "aria-label": hint }, label);
+      if (pressed !== void 0) b.setAttribute("aria-pressed", String(pressed));
+      b.addEventListener("click", onClick);
+      return b;
+    };
+    const extras = (cfg.extraButtons ?? []).map((e) => {
+      const b = btn(e.text, e.hint ?? e.text, `tnc-btn-extra tnc-btn-${e.id}`, (ev) => e.onClick(ev));
+      if (e.icon) b.replaceChildren(e.icon());
+      return b;
+    });
+    const nav = h(
+      this.doc,
+      "div",
+      "tnc-toolbar-group tnc-toolbar-nav",
+      null,
+      btn("\u2039", this.text.prev, "tnc-btn-prev", () => this.prev()),
+      btn(this.text.today, this.text.today, "tnc-btn-today", () => this.goToday()),
+      btn("\u203A", this.text.next, "tnc-btn-next", () => this.next())
+    );
+    const title = h(this.doc, "h2", "tnc-title", { "aria-live": "polite" }, this.view.title);
+    const viewGroup = h(this.doc, "div", "tnc-toolbar-group tnc-toolbar-views", { role: "group" });
+    for (const v of views) {
+      const label = v === "days" ? this.text.views.days ?? `${this.opts.dayCount} days` : this.text.views[v] ?? v;
+      viewGroup.append(btn(label, this.text.viewHints[v] ?? label, `tnc-btn-view tnc-btn-view-${v}`, () => this.changeView(v), v === this.opts.view));
+    }
+    const start = h(this.doc, "div", "tnc-toolbar-start");
+    const end = h(this.doc, "div", "tnc-toolbar-end");
+    if (cfg.extraPlacement === "start") start.append(...extras);
+    start.append(nav, title);
+    end.append(viewGroup);
+    if (cfg.extraPlacement !== "start") end.append(...extras);
+    this.toolbarEl.append(start, end);
+  }
+  applyChange(change) {
+    if (!change.added.length && !change.updated.length && !change.removed.length && !change.days.size && !change.spans) return;
+    this.conflicts = dependencyConflicts(this.store);
+    this.pendingChange = this.pendingChange ? this.merge(this.pendingChange, change) : change;
+    if (this.session?.active) {
+      this.flush();
+      return;
+    }
+    if (this.frame === null) this.frame = this.win.requestAnimationFrame(() => this.flush());
+  }
+  /** Renders pending changes now. Called automatically on the next frame. */
+  flush() {
+    if (this.frame !== null) {
+      this.win.cancelAnimationFrame(this.frame);
+      this.frame = null;
+    }
+    const change = this.pendingChange;
+    this.pendingChange = null;
+    if (!change || !this.current) return;
+    this.current.render(change);
+    if (this.selection) this.current.showSelection(this.selection);
+    if (this.popover) this.refreshMore();
+  }
+  merge(a, b) {
+    for (const d of b.days) a.days.add(d);
+    a.added.push(...b.added);
+    a.updated.push(...b.updated);
+    a.removed.push(...b.removed);
+    a.spans ||= b.spans;
+    return a;
+  }
+  scheduleTick() {
+    const delay = 6e4 - this.now() % 6e4 + 50;
+    this.timer = this.win.setTimeout(() => {
+      if (this.destroyed) return;
+      if (this.todayDay() !== this.today) this.rebuild(false);
+      else this.current?.tick?.();
+      this.scheduleTick();
+    }, delay);
+  }
+  /* ========================================================= item content */
+  itemArg(el, meta) {
+    const item = this.store.get(meta.n.id)?.item ?? meta.n.item;
+    const { start, end } = this.timeLabel(meta.n, meta.variant, meta.day);
+    return {
+      item,
+      el,
+      view: this.view,
+      day: meta.day,
+      isStart: meta.isStart,
+      isEnd: meta.isEnd,
+      isMirror: meta.mirror,
+      variant: meta.variant,
+      timeText: meta.n.allDay ? "" : end ? `${start} \u2013 ${end}` : start
+    };
+  }
+  /** Start and (for timed and list items) end labels; the end is hidden on short items by CSS. */
+  timeLabel(n, variant, day) {
+    if (n.allDay) return { start: variant === "list" ? this.text.allDay : "", end: "" };
+    const s = wallTime(n.startMs, this.zone);
+    const start = this.fmt.time(s.minute, true);
+    if (variant === "dot" || variant === "bar" || variant === "indicator") return { start: s.day === day ? start : "", end: "" };
+    if (n.startMs === n.endMs) return { start, end: "" };
+    return { start, end: this.fmt.time(wallTime(n.endMs, this.zone).minute, true) };
+  }
+  fillTime(el, n, variant, day) {
+    const { start, end } = this.timeLabel(n, variant, day);
+    el.textContent = start;
+    if (end) el.append(h(this.doc, "span", "tnc-item-time-end", null, ` \u2013 ${end}`));
+    return start !== "";
+  }
+  ariaLabel(n) {
+    if (n.allDay) {
+      const last = n.endDay - 1;
+      return `${n.item.title}, ${last > n.startDay ? this.fmt.range(n.startDay, last) : this.fmt.longDate(n.startDay)}`;
+    }
+    const s = wallTime(n.startMs, this.zone);
+    const e = wallTime(n.endMs, this.zone);
+    return `${n.item.title}, ${this.fmt.longDate(s.day)} ${this.fmt.time(s.minute)} \u2013 ${this.fmt.time(e.minute)}`;
+  }
+  defaultContent(meta) {
+    const { n, variant, day } = meta;
+    const doc = this.doc;
+    const main = h(doc, "div", "tnc-item-main");
+    const title = h(doc, "span", "tnc-item-title", null, n.item.title);
+    const time = h(doc, "span", "tnc-item-time");
+    const label = this.fillTime(time, n, variant, day);
+    switch (variant) {
+      case "timed":
+        main.append(title, time);
+        break;
+      case "dot":
+        main.append(h(doc, "span", "tnc-item-dot", { "aria-hidden": "true" }), time, title);
+        break;
+      case "list":
+        main.append(time, h(doc, "span", "tnc-item-dot", { "aria-hidden": "true" }), title);
+        break;
+      default:
+        if (label) main.append(time);
+        main.append(title);
+    }
+    return main;
+  }
+  addHandles(el, meta) {
+    const { n, variant } = meta;
+    const ports = variant === "timeline" && !meta.mirror && n.id !== EXTERNAL_ID && !!this.opts.timeline?.onLink;
+    if (variant === "dot" || !this.isEditable(n, "duration")) {
+      if (ports) this.addPorts(el, n);
+      return;
+    }
+    const vertical = variant === "timed";
+    const milestone = variant === "timeline" && n.item.kind === "milestone";
+    const handleLabel = variant === "timeline" ? this.opts.timeline?.resizeHandleLabel : void 0;
+    const handle = (edge) => {
+      const label = handleLabel?.({ item: n.item, edge: edge === "start" ? "start" : "finish" });
+      const attrs = label ? { role: "button", tabindex: "0", "aria-label": label } : { "aria-hidden": "true" };
+      el.append(h(this.doc, "div", `tnc-resize tnc-resize-${edge} ${vertical ? "is-v" : "is-h"}`, attrs));
+    };
+    if (meta.isStart && (this.opts.resizableFromStart || variant === "timeline") && !milestone) handle("start");
+    if (meta.isEnd && !milestone) handle("end");
+    if (ports) this.addPorts(el, n);
+  }
+  /** Start and finish link handles (a milestone has one). */
+  addPorts(el, n) {
+    const edges = n.item.kind === "milestone" ? ["finish"] : ["start", "finish"];
+    for (const edge of edges) {
+      el.append(h(this.doc, "span", `tnc-port tnc-port-${edge}`, { "aria-hidden": "true", "data-edge": edge, title: "Drag to link" }));
+    }
+  }
+  /* ============================================================== popover */
+  refreshMore() {
+    const p = this.popover;
+    if (!p) return;
+    const items = this.store.inRange(p.day, p.day + 1).filter((n) => n.item.display !== "background").sort((a, b) => Number(b.allDay) - Number(a.allDay) || this.order(a, b));
+    p.pool.begin();
+    for (const n of items) {
+      p.pool.place(n.id, { n, day: p.day, isStart: n.startDay >= p.day, isEnd: n.endDay <= p.day + 1, variant: n.allDay ? "bar" : "dot", mirror: false });
+    }
+    p.pool.end();
+  }
+  closeMore(restoreFocus = false) {
+    const p = this.popover;
+    if (!p) return;
+    this.popover = null;
+    p.pool.clear();
+    p.el.remove();
+    if (restoreFocus && p.anchor.isConnected) p.anchor.focus();
+  }
+  /* =========================================================== interaction */
+  bindEvents() {
+    const r = this.root;
+    r.addEventListener("pointerdown", this.onPointerDown);
+    r.addEventListener("click", this.onClickCapture, true);
+    r.addEventListener("click", this.onClick);
+    r.addEventListener("dblclick", this.onDblClick);
+    r.addEventListener("contextmenu", this.onContextMenu);
+    r.addEventListener("mouseover", this.onMouseOver);
+    r.addEventListener("mouseout", this.onMouseOut);
+    r.addEventListener("keydown", this.onKeyDown);
+    r.addEventListener("dragover", this.onNativeDragOver);
+    r.addEventListener("dragleave", this.onNativeDragLeave);
+    r.addEventListener("drop", this.onNativeDrop);
+    r.addEventListener("touchmove", this.onTouchMove, { passive: false });
+    this.doc.addEventListener("pointerdown", this.onDocPointerDown, true);
+  }
+  unbindEvents() {
+    const r = this.root;
+    r.removeEventListener("pointerdown", this.onPointerDown);
+    r.removeEventListener("click", this.onClickCapture, true);
+    r.removeEventListener("click", this.onClick);
+    r.removeEventListener("dblclick", this.onDblClick);
+    r.removeEventListener("contextmenu", this.onContextMenu);
+    r.removeEventListener("mouseover", this.onMouseOver);
+    r.removeEventListener("mouseout", this.onMouseOut);
+    r.removeEventListener("keydown", this.onKeyDown);
+    r.removeEventListener("dragover", this.onNativeDragOver);
+    r.removeEventListener("dragleave", this.onNativeDragLeave);
+    r.removeEventListener("drop", this.onNativeDrop);
+    r.removeEventListener("touchmove", this.onTouchMove);
+    this.doc.removeEventListener("pointerdown", this.onDocPointerDown, true);
+    this.listenDoc(false);
+  }
+  listenDoc(on) {
+    const d = this.doc;
+    const fn = on ? d.addEventListener.bind(d) : d.removeEventListener.bind(d);
+    fn("pointermove", this.onPointerMove);
+    fn("pointerup", this.onPointerUp);
+    fn("pointercancel", this.onPointerCancel);
+    fn("keydown", this.onDocKeyDown, true);
+  }
+  itemElFrom(target) {
+    const el = target?.closest?.(".tnc-item");
+    return el && this.root.contains(el) && this.meta.has(el) ? el : null;
+  }
+  onDocPointerDown = (ev) => {
+    const t = ev.target;
+    if (this.popover && !this.popover.el.contains(t) && !this.popover.anchor.contains(t)) this.closeMore();
+    if (this.selection && !this.root.contains(t)) this.unselect();
+  };
+  onPointerDown = (ev) => {
+    if (ev.button !== 0 || this.session) return;
+    const target = ev.target;
+    if (target.closest("button, a, input, select, textarea, .tnc-toolbar, .tnc-port, [data-tnc-no-drag]")) {
+      if (!target.closest(".tnc-item")) return;
+      if (target.closest(".tnc-port, [data-tnc-no-drag], input, select, textarea")) return;
+    }
+    const itemEl = this.itemElFrom(target);
+    let mode = null;
+    let origin = null;
+    if (itemEl) {
+      const meta = this.meta.get(itemEl);
+      origin = this.store.get(meta.n.id) ?? null;
+      if (!origin || origin.id === EXTERNAL_ID) return;
+      if (target.closest(".tnc-resize-end")) mode = this.isEditable(origin, "duration") ? "resize-end" : null;
+      else if (target.closest(".tnc-resize-start")) mode = this.isEditable(origin, "duration") ? "resize-start" : null;
+      else mode = this.isEditable(origin, "start") ? "move" : null;
+      if (!mode) return;
+    } else {
+      if (!this.opts.selectable || !this.current) return;
+      if (target.closest(".tnc-popover, .tnc-more")) return;
+      const hit = this.current.hit(ev.clientX, ev.clientY);
+      if (!hit || hit.kind === "timeline" && !hit.overTrack) return;
+      mode = "select";
+    }
+    const touch = ev.pointerType === "touch";
+    const s = {
+      mode,
+      pointerId: ev.pointerId,
+      pointerType: ev.pointerType,
+      x0: ev.clientX,
+      y0: ev.clientY,
+      active: false,
+      origin,
+      grab: this.current?.hit(ev.clientX, ev.clientY) ?? null,
+      proposal: null,
+      denied: false,
+      timer: null,
+      lastEvent: ev
+    };
+    this.session = s;
+    if (touch && itemEl?.classList.contains("is-draggable")) {
+      const el = itemEl.closest(".tnc-tg-scroll, .tnc-dg-scroll, .tnc-tl-scroll, .tnc-list-scroll, .tnc-year-scroll");
+      if (el) s.pan = { el, left: el.scrollLeft, top: el.scrollTop, active: false };
+    }
+    if (touch) {
+      s.timer = this.win.setTimeout(() => {
+        if (this.session !== s) return;
+        this.activate(s);
+        navigator.vibrate?.(10);
+      }, this.opts.longPressDelay);
+    } else if (mode !== "select") {
+      ev.preventDefault();
+    }
+    this.listenDoc(true);
+  };
+  activate(s) {
+    s.active = true;
+    if (s.timer !== null) this.win.clearTimeout(s.timer);
+    s.timer = null;
+    if (s.origin) {
+      this.draggingId = s.origin.id;
+      for (const el of this.elementsFor(s.origin.id)) el.classList.add("is-dragging");
+    }
+    this.closeMore();
+    if (s.mode !== "select") this.unselectSilently();
+    this.root.classList.add("tnc-dragging", `tnc-dragging-${s.mode}`);
+    if (s.lastEvent) this.track(s, s.lastEvent);
+  }
+  onTouchMove = (ev) => {
+    if (this.session?.active) ev.preventDefault();
+  };
+  onPointerMove = (ev) => {
+    const s = this.session;
+    if (!s || ev.pointerId !== s.pointerId) return;
+    s.lastEvent = ev;
+    if (!s.active) {
+      const dist = Math.hypot(ev.clientX - s.x0, ev.clientY - s.y0);
+      if (s.pointerType === "touch") {
+        const pan = s.pan;
+        if (pan && (pan.active || dist > 8)) {
+          if (!pan.active && s.timer !== null) this.win.clearTimeout(s.timer);
+          s.timer = null;
+          pan.active = true;
+          pan.el.scrollLeft = pan.left - (ev.clientX - s.x0);
+          pan.el.scrollTop = pan.top - (ev.clientY - s.y0);
+        } else if (dist > 8) this.endSession(null, true);
+        return;
+      }
+      if (dist < 4) return;
+      this.activate(s);
+      return;
+    }
+    ev.preventDefault();
+    this.track(s, ev);
+  };
+  onPointerUp = (ev) => {
+    const s = this.session;
+    if (!s || ev.pointerId !== s.pointerId) return;
+    if (!s.active) {
+      this.endSession(null, true);
+      if (s.pan?.active) {
+        this.suppressNextClick();
+        return;
+      }
+      if (s.mode === "select" && s.grab) this.clickSlot(s.grab, ev, s.pointerType === "touch");
+      return;
+    }
+    this.suppressNextClick();
+    this.endSession(ev, false);
+  };
+  onPointerCancel = (ev) => {
+    if (this.session && ev.pointerId === this.session.pointerId) this.endSession(null, true);
+  };
+  onDocKeyDown = (ev) => {
+    if (ev.key === "Escape" && this.session) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      this.endSession(null, true);
+    }
+  };
+  /** Proposal for the current pointer position. */
+  track(s, ev) {
+    const hit = this.current?.hit(ev.clientX, ev.clientY) ?? null;
+    if (s.mode === "external") {
+      this.trackExternal(s, hit);
+      return;
+    }
+    if (!s.grab) s.grab = hit;
+    if (!hit || !s.grab) return;
+    if (s.mode === "select") {
+      const sel = this.selectionFor(s.grab, hit);
+      if (!sel) return;
+      this.selection = sel;
+      this.current?.showSelection(sel);
+      return;
+    }
+    const origin = s.origin;
+    const p = s.mode === "move" ? this.moveProposal(origin, s.grab, hit) : this.resizeProposal(origin, hit, s.mode === "resize-start");
+    if (!p) return;
+    const allowed = this.opts.canDrop?.({ item: origin.item, start: new Date(p.startMs), end: new Date(p.endMs), allDay: p.allDay, rowId: p.rowId }) ?? true;
+    s.denied = !allowed;
+    this.root.classList.toggle("tnc-drop-denied", !allowed);
+    if (!allowed || sameProposal(p, s.proposal)) return;
+    s.proposal = p;
+    this.dragRow = p.rowId !== void 0 ? { id: origin.id, rowId: p.rowId } : null;
+    this.applyChange(this.store.upsert([this.withProposal(origin, p)]));
+  }
+  trackExternal(s, raw) {
+    const src = s.source;
+    const hit = raw?.kind === "timeline" && raw.area !== "track" && raw.area !== "header" ? null : raw;
+    s.hit = hit;
+    if (!hit) {
+      if (s.proposal) {
+        s.proposal = null;
+        this.applyChange(this.store.remove([EXTERNAL_ID]));
+      }
+      this.unselectSilently();
+      return;
+    }
+    const dur = src.durationMinutes ?? this.opts.defaultTimedMinutes;
+    let p;
+    if (hit.kind === "time" || hit.kind === "timeline" && this.timelineSnap() < MINUTES_PER_DAY) {
+      const snap = hit.kind === "time" ? this.slot.snap : this.timelineSnap();
+      const startCivil = Math.floor((hit.day * MINUTES_PER_DAY + hit.minute) / snap) * snap;
+      const startMs = this.civilToMs(startCivil);
+      const endMs = this.civilToMs(startCivil + dur);
+      p = { startMs, endMs, allDay: false, startDay: dayOf(startMs, this.zone), endDay: dayOf(endMs - 1, this.zone) + 1 };
+    } else {
+      const day = hit.day;
+      p = this.dayProposal(day, day + 1);
+    }
+    if (hit.kind === "timeline" && hit.overTrack && hit.rowId !== null) p.rowId = hit.rowId;
+    const allowed = this.opts.canDrop?.({ item: this.externalItem(src, p), start: new Date(p.startMs), end: new Date(p.endMs), allDay: p.allDay, rowId: p.rowId }) ?? true;
+    s.denied = !allowed;
+    this.root.classList.toggle("tnc-drop-denied", !allowed);
+    if (sameProposal(p, s.proposal)) return;
+    s.proposal = p;
+    if (hit.kind === "timeline" && p.rowId === void 0) {
+      this.selection = { ...p };
+      this.current?.showSelection(this.selection);
+    } else this.unselectSilently();
+    this.dragRow = p.rowId !== void 0 ? { id: EXTERNAL_ID, rowId: p.rowId } : null;
+    this.applyChange(this.store.upsert([this.externalItem(src, p)]));
+  }
+  externalItem(src, p) {
+    return {
+      id: EXTERNAL_ID,
+      title: src.title,
+      kind: src.kind,
+      color: src.color,
+      start: p.allDay ? formatDay(p.startDay) : p.startMs,
+      end: p.allDay ? formatDay(p.endDay) : p.endMs,
+      allDay: p.allDay,
+      editable: false,
+      data: src.data,
+      rev: `${p.startMs}:${p.endMs}:${p.allDay ? 1 : 0}:${p.rowId ?? ""}`
+    };
+  }
+  timelineSnap() {
+    return this.opts.timeline?.scale?.snapMinutes ?? MINUTES_PER_DAY;
+  }
+  civil(ms) {
+    const w = wallTime(ms, this.zone);
+    return w.day * MINUTES_PER_DAY + w.minute;
+  }
+  civilToMs(c) {
+    const day = Math.floor(c / MINUTES_PER_DAY);
+    return toInstant(day, c - day * MINUTES_PER_DAY, this.zone);
+  }
+  hitCivil(hit) {
+    return hit.kind === "time" || hit.kind === "timeline" ? hit.day * MINUTES_PER_DAY + hit.minute : hit.day * MINUTES_PER_DAY;
+  }
+  dayProposal(startDay, endDay) {
+    return {
+      startMs: toInstant(startDay, 0, this.zone),
+      endMs: toInstant(endDay, 0, this.zone),
+      allDay: true,
+      startDay,
+      endDay
+    };
+  }
+  timedProposal(startMs, endMs) {
+    return { startMs, endMs, allDay: false, startDay: dayOf(startMs, this.zone), endDay: dayOf(Math.max(startMs, endMs - 1), this.zone) + 1 };
+  }
+  moveProposal(o, grab, hit) {
+    const days = o.endDay - o.startDay;
+    if (hit.kind === "timeline") {
+      const snap2 = o.allDay ? Math.max(MINUTES_PER_DAY, this.timelineSnap()) : this.timelineSnap();
+      const delta2 = Math.round((this.hitCivil(hit) - this.hitCivil(grab)) / snap2) * snap2;
+      let p;
+      if (o.allDay) {
+        const dd = Math.round(delta2 / MINUTES_PER_DAY);
+        p = this.dayProposal(o.startDay + dd, o.endDay + dd);
+      } else {
+        const startMs2 = this.civilToMs(this.civil(o.startMs) + delta2);
+        p = this.timedProposal(startMs2, startMs2 + (o.endMs - o.startMs));
+      }
+      p.rowId = (hit.overTrack ? hit.rowId : null) ?? this.dragRow?.rowId ?? this.opts.timeline?.rowOf(o.item) ?? void 0;
+      return p;
+    }
+    if (hit.kind === "allDay") {
+      if (o.allDay) {
+        const dd = hit.day - (grab.kind === "allDay" || grab.kind === "day" ? grab.day : hit.day);
+        return this.dayProposal(o.startDay + dd, o.endDay + dd);
+      }
+      return this.dayProposal(hit.day, hit.day + this.opts.defaultAllDayDays);
+    }
+    if (hit.kind === "day") {
+      const dd = hit.day - (grab.kind === "day" ? grab.day : hit.day);
+      if (o.allDay) return this.dayProposal(o.startDay + dd, o.startDay + dd + days);
+      const startMs2 = this.civilToMs(this.civil(o.startMs) + dd * MINUTES_PER_DAY);
+      const endMs = this.civilToMs(this.civil(o.endMs) + dd * MINUTES_PER_DAY);
+      return this.timedProposal(startMs2, endMs);
+    }
+    const snap = this.slot.snap;
+    if (o.allDay || grab.kind !== "time") {
+      const c = Math.floor((hit.day * MINUTES_PER_DAY + hit.minute) / snap) * snap;
+      const startMs2 = this.civilToMs(c);
+      return this.timedProposal(startMs2, this.civilToMs(c + this.opts.defaultTimedMinutes));
+    }
+    const delta = Math.round((this.hitCivil(hit) - this.hitCivil(grab)) / snap) * snap;
+    const startCivil = this.civil(o.startMs) + delta;
+    const startMs = this.civilToMs(startCivil);
+    return this.timedProposal(startMs, startMs + (o.endMs - o.startMs));
+  }
+  resizeProposal(o, hit, fromStart) {
+    if (o.allDay || hit.kind === "allDay" || hit.kind === "day") {
+      if (hit.kind === "time") return null;
+      const pointerDay = hit.kind === "timeline" ? Math.round(this.hitCivil(hit) / MINUTES_PER_DAY) : fromStart ? hit.day : hit.day + 1;
+      if (!o.allDay) {
+        const end = wallTime(o.endMs - 1, this.zone);
+        const dd = (fromStart ? 0 : pointerDay - 1) - end.day;
+        if (fromStart) return null;
+        const endMs = Math.max(o.startMs + 6e4 * this.slot.snap, this.civilToMs(this.civil(o.endMs) + dd * MINUTES_PER_DAY));
+        return this.timedProposal(o.startMs, endMs);
+      }
+      const p2 = fromStart ? this.dayProposal(Math.min(o.endDay - 1, pointerDay), o.endDay) : this.dayProposal(o.startDay, Math.max(o.startDay + 1, pointerDay));
+      if (hit.kind === "timeline") p2.rowId = this.opts.timeline?.rowOf(o.item) ?? void 0;
+      return p2;
+    }
+    const snap = hit.kind === "timeline" ? this.timelineSnap() : this.slot.snap;
+    const c = Math.round(this.hitCivil(hit) / snap) * snap;
+    const ms = this.civilToMs(c);
+    const min = snap * 6e4;
+    const p = fromStart ? this.timedProposal(Math.min(ms, o.endMs - min), o.endMs) : this.timedProposal(o.startMs, Math.max(ms, o.startMs + min));
+    if (hit.kind === "timeline") p.rowId = this.opts.timeline?.rowOf(o.item) ?? void 0;
+    return p;
+  }
+  withProposal(o, p) {
+    return {
+      ...o.item,
+      start: p.allDay ? formatDay(p.startDay) : p.startMs,
+      end: p.allDay ? formatDay(p.endDay) : p.endMs,
+      allDay: p.allDay,
+      // Unique per proposal, so the store redraws the item wherever the pointer takes it.
+      rev: `drag:${p.startMs}:${p.endMs}:${p.allDay ? 1 : 0}:${p.rowId ?? ""}:${o.sig}`
+    };
+  }
+  selectionFor(a, b) {
+    if (a.kind !== b.kind) {
+      if (!(a.kind === "allDay" && b.kind === "time") && !(a.kind === "time" && b.kind === "allDay")) return null;
+      b = a.kind === "allDay" ? { kind: "allDay", day: b.day } : { kind: "time", day: b.day, minute: a.minute };
+    }
+    if (a.kind === "time" || a.kind === "timeline" && this.timelineSnap() < MINUTES_PER_DAY) {
+      const snap = a.kind === "time" ? this.slot.snap : this.timelineSnap();
+      const ca = Math.floor(this.hitCivil(a) / snap) * snap;
+      const cb = Math.floor(this.hitCivil(b) / snap) * snap;
+      const startMs = this.civilToMs(Math.min(ca, cb));
+      const endMs = this.civilToMs(Math.max(ca, cb) + snap);
+      const sel2 = { ...this.timedProposal(startMs, endMs) };
+      if (a.kind === "timeline" && a.overTrack && a.rowId !== null) sel2.rowId = a.rowId;
+      return sel2;
+    }
+    const da = a.day;
+    const db = b.day;
+    const sel = this.dayProposal(Math.min(da, db), Math.max(da, db) + 1);
+    if (a.kind === "timeline" && a.overTrack && a.rowId !== null) sel.rowId = a.rowId;
+    return sel;
+  }
+  clickSlot(hit, ev, touch) {
+    if (hit.kind === "timeline" && !hit.overTrack) return;
+    const day = hit.day;
+    if (this.opts.onDateClick) {
+      let minute = null;
+      if (hit.kind === "time") minute = Math.floor(hit.minute / this.slot.duration) * this.slot.duration;
+      else if (hit.kind === "timeline" && this.timelineSnap() < MINUTES_PER_DAY) minute = Math.floor(hit.minute / this.timelineSnap()) * this.timelineSnap();
+      const civil = day * MINUTES_PER_DAY + (minute ?? 0);
+      const at = Math.floor(civil / MINUTES_PER_DAY);
+      const startStr = minute === null ? formatDay(day) : formatFloating(this.civilToMs(civil), this.zone);
+      this.opts.onDateClick({
+        ...this.dayArg(minute === null ? day : at),
+        minute: minute === null ? null : civil - at * MINUTES_PER_DAY,
+        allDay: minute === null,
+        startStr,
+        jsEvent: ev
+      });
+    }
+    if (touch || !this.opts.selectable) return;
+    const sel = hit.kind === "time" ? (() => {
+      const c = Math.floor(this.hitCivil(hit) / this.slot.duration) * this.slot.duration;
+      return this.timedProposal(this.civilToMs(c), this.civilToMs(c + this.slot.duration));
+    })() : this.selectionFor(hit, hit);
+    if (!sel) return;
+    this.selection = sel;
+    this.current?.showSelection(sel);
+    this.fireSelect(sel, ev);
+  }
+  fireSelect(sel, ev) {
+    this.opts.onSelect?.({
+      start: new Date(sel.startMs),
+      end: new Date(sel.endMs),
+      allDay: sel.allDay,
+      startStr: sel.allDay ? formatDay(sel.startDay) : formatFloating(sel.startMs, this.zone),
+      endStr: sel.allDay ? formatDay(sel.endDay) : formatFloating(sel.endMs, this.zone),
+      jsEvent: ev,
+      view: this.view,
+      rowId: sel.rowId
+    });
+  }
+  unselectSilently() {
+    this.selection = null;
+    this.current?.showSelection(null);
+  }
+  /** Ends the current pointer session, committing unless `cancel`. */
+  endSession(ev, cancel) {
+    const s = this.session;
+    if (!s) return;
+    this.session = null;
+    if (s.timer !== null) this.win.clearTimeout(s.timer);
+    this.listenDoc(false);
+    this.root.classList.remove(
+      "tnc-dragging",
+      "tnc-drop-denied",
+      "tnc-dragging-move",
+      "tnc-dragging-resize-end",
+      "tnc-dragging-resize-start",
+      "tnc-dragging-select",
+      "tnc-dragging-external"
+    );
+    const draggedId = this.draggingId;
+    this.draggingId = null;
+    this.dragRow = null;
+    if (draggedId) for (const el of this.elementsFor(draggedId)) el.classList.remove("is-dragging");
+    if (!s.active) return;
+    if (s.mode === "select") {
+      if (cancel) this.unselectSilently();
+      else if (this.selection) this.fireSelect(this.selection, ev);
+      return;
+    }
+    if (s.mode === "external") {
+      const p2 = s.proposal;
+      if (p2) this.applyChange(this.store.remove([EXTERNAL_ID]));
+      this.unselectSilently();
+      const dropped = !cancel && !!p2 && !s.denied && !!ev;
+      const hit = s.hit ?? null;
+      const ended = () => {
+        if (s.source) this.opts.onExternalDragEnd?.({ source: s.source, dropped, hit, jsEvent: ev });
+      };
+      if (!dropped || !p2 || !ev) {
+        ended();
+        return;
+      }
+      this.flush();
+      this.opts.onExternalDrop?.({
+        start: new Date(p2.startMs),
+        end: new Date(p2.endMs),
+        allDay: p2.allDay,
+        startStr: p2.allDay ? formatDay(p2.startDay) : formatFloating(p2.startMs, this.zone),
+        endStr: p2.allDay ? formatDay(p2.endDay) : formatFloating(p2.endMs, this.zone),
+        jsEvent: ev,
+        view: this.view,
+        rowId: p2.rowId,
+        source: s.source ?? null,
+        hit,
+        dataTransfer: null
+      });
+      ended();
+      return;
+    }
+    const origin = s.origin;
+    const p = s.proposal;
+    const revert = () => {
+      const cur = this.store.get(origin.id);
+      if (cur && cur.sig !== origin.sig) this.applyChange(this.store.upsert([origin.item]));
+      this.flush();
+    };
+    if (cancel || s.denied || !p) {
+      revert();
+      return;
+    }
+    const changed = p.startMs !== origin.startMs || p.endMs !== origin.endMs || p.allDay !== origin.allDay || p.rowId !== void 0 && p.rowId !== this.opts.timeline?.rowOf(origin.item);
+    if (!changed) {
+      revert();
+      return;
+    }
+    this.flush();
+    this.commit(s.mode === "move" ? "drop" : "resize", origin, p, ev, revert);
+  }
+  commit(kind, origin, p, ev, revert) {
+    const arg = {
+      item: origin.item,
+      start: new Date(p.startMs),
+      end: new Date(p.endMs),
+      allDay: p.allDay,
+      startStr: p.allDay ? formatDay(p.startDay) : formatFloating(p.startMs, this.zone),
+      endStr: p.allDay ? formatDay(p.endDay) : formatFloating(p.endMs, this.zone),
+      oldStart: new Date(origin.startMs),
+      oldEnd: new Date(origin.endMs),
+      oldAllDay: origin.allDay,
+      delta: p.startMs - origin.startMs,
+      rowId: p.rowId,
+      jsEvent: ev,
+      source: ev && "key" in ev ? "keyboard" : "pointer",
+      view: this.view,
+      revert
+    };
+    const handler = kind === "drop" ? this.opts.onItemDrop : this.opts.onItemResize;
+    try {
+      const res = handler?.(arg);
+      if (res && typeof res.then === "function") {
+        Promise.resolve(res).catch(() => revert());
+      }
+    } catch (err) {
+      revert();
+      throw err;
+    }
+  }
+  /* --------------------------------------------------------- click / keys */
+  /** Runs in the capture phase so the click ending a drag never reaches content inside the calendar, React portals included. */
+  onClickCapture = (ev) => {
+    if (!this.suppressClick) return;
+    this.suppressClick = false;
+    ev.stopPropagation();
+    ev.preventDefault();
+  };
+  onClick = (ev) => {
+    const el = this.itemElFrom(ev.target);
+    if (!el || ev.target.closest(".tnc-resize, .tnc-port")) return;
+    const meta = this.meta.get(el);
+    if (meta.n.id === EXTERNAL_ID) return;
+    this.opts.onItemClick?.({ ...this.itemArg(el, meta), jsEvent: ev });
+  };
+  onDblClick = (ev) => {
+    const el = this.itemElFrom(ev.target);
+    if (!el) return;
+    const meta = this.meta.get(el);
+    this.opts.onItemDoubleClick?.({ ...this.itemArg(el, meta), jsEvent: ev });
+  };
+  onContextMenu = (ev) => {
+    const el = this.itemElFrom(ev.target);
+    if (!el) return;
+    if (this.session?.active) {
+      ev.preventDefault();
+      return;
+    }
+    if (!this.opts.onItemContextMenu) return;
+    ev.preventDefault();
+    const meta = this.meta.get(el);
+    this.opts.onItemContextMenu({ ...this.itemArg(el, meta), jsEvent: ev });
+  };
+  hoverId = null;
+  onMouseOver = (ev) => {
+    const el = this.itemElFrom(ev.target);
+    const id = el ? this.meta.get(el).n.id : null;
+    if (id === this.hoverId) return;
+    this.leaveHover(ev);
+    if (!el || !id || this.session?.active) return;
+    this.hoverId = id;
+    for (const other of this.elementsFor(id)) other.classList.add("is-hover");
+    this.opts.onItemHover?.({ ...this.itemArg(el, this.meta.get(el)), jsEvent: ev, entering: true });
+  };
+  onMouseOut = (ev) => {
+    const to = ev.relatedTarget;
+    const toEl = to ? this.itemElFrom(to) : null;
+    if (toEl && this.meta.get(toEl)?.n.id === this.hoverId) return;
+    this.leaveHover(ev);
+  };
+  leaveHover(ev) {
+    const id = this.hoverId;
+    if (!id) return;
+    this.hoverId = null;
+    const els = this.elementsFor(id);
+    for (const el2 of els) el2.classList.remove("is-hover");
+    const el = els[0];
+    const meta = el ? this.meta.get(el) : void 0;
+    if (el && meta) this.opts.onItemHover?.({ ...this.itemArg(el, meta), jsEvent: ev, entering: false });
+  }
+  onKeyDown = (ev) => {
+    if (ev.key === "Escape" && this.popover) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      this.closeMore(true);
+      return;
+    }
+    const target = ev.target;
+    if ((ev.key === "Enter" || ev.key === " ") && target.matches(".tnc-ym-day, .tnc-dg-day[tabindex]")) {
+      const day = parseDay(target.dataset.date ?? "");
+      if (day !== null) {
+        ev.preventDefault();
+        this.clickSlot({ kind: "day", day }, ev, true);
+      }
+      return;
+    }
+    const el = this.itemElFrom(ev.target);
+    if (!el) return;
+    const grip = ev.target.closest?.(".tnc-resize[tabindex]");
+    if (grip && el.contains(grip) && (ev.key === "ArrowLeft" || ev.key === "ArrowRight") && !ev.ctrlKey && !ev.metaKey) {
+      ev.preventDefault();
+      this.nudge(this.meta.get(el).n.id, ev, grip.classList.contains("tnc-resize-start") ? "start" : "end");
+      return;
+    }
+    if (ev.target !== el) return;
+    const meta = this.meta.get(el);
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.preventDefault();
+      this.opts.onItemClick?.({ ...this.itemArg(el, meta), jsEvent: ev });
+      return;
+    }
+    if (ev.key === "ContextMenu" || ev.key === "F10" && ev.shiftKey) {
+      ev.preventDefault();
+      this.opts.onItemContextMenu?.({ ...this.itemArg(el, meta), jsEvent: ev });
+      return;
+    }
+    if (ev.altKey && ev.key.startsWith("Arrow")) {
+      ev.preventDefault();
+      this.nudge(meta.n.id, ev);
+    }
+  };
+  /** Alt+Arrow moves an item; Alt+Shift+Arrow changes its end; arrows on a focused grip move that edge. */
+  nudge(id, ev, edge = null) {
+    const o = this.store.get(id);
+    if (!o) return;
+    const resize = edge !== null || ev.shiftKey;
+    const fromStart = edge === "start";
+    if (!this.isEditable(o, resize ? "duration" : "start")) return;
+    const view = this.opts.view;
+    const timeStep = view === "timeline" ? this.timelineSnap() : this.slot.snap;
+    let dMin = 0;
+    switch (ev.key) {
+      case "ArrowLeft":
+        dMin = view === "timeline" ? -Math.max(timeStep, o.allDay ? MINUTES_PER_DAY : 0) : -MINUTES_PER_DAY;
+        break;
+      case "ArrowRight":
+        dMin = view === "timeline" ? Math.max(timeStep, o.allDay ? MINUTES_PER_DAY : 0) : MINUTES_PER_DAY;
+        break;
+      case "ArrowUp":
+        dMin = view === "month" ? -7 * MINUTES_PER_DAY : o.allDay ? 0 : -timeStep;
+        break;
+      case "ArrowDown":
+        dMin = view === "month" ? 7 * MINUTES_PER_DAY : o.allDay ? 0 : timeStep;
+        break;
+    }
+    if (!dMin) return;
+    let p;
+    if (o.allDay) {
+      const dd = Math.round(dMin / MINUTES_PER_DAY);
+      if (!dd) return;
+      if (fromStart) p = this.dayProposal(Math.min(o.endDay - 1, o.startDay + dd), o.endDay);
+      else if (resize) p = this.dayProposal(o.startDay, Math.max(o.startDay + 1, o.endDay + dd));
+      else p = this.dayProposal(o.startDay + dd, o.endDay + dd);
+    } else if (fromStart) {
+      p = this.timedProposal(Math.min(o.endMs - timeStep * 6e4, this.civilToMs(this.civil(o.startMs) + dMin)), o.endMs);
+    } else if (resize) {
+      p = this.timedProposal(o.startMs, Math.max(o.startMs + timeStep * 6e4, this.civilToMs(this.civil(o.endMs) + dMin)));
+    } else {
+      const startMs = this.civilToMs(this.civil(o.startMs) + dMin);
+      p = this.timedProposal(startMs, startMs + (o.endMs - o.startMs));
+    }
+    const allowed = this.opts.canDrop?.({ item: o.item, start: new Date(p.startMs), end: new Date(p.endMs), allDay: p.allDay }) ?? true;
+    if (!allowed) return;
+    const revert = () => {
+      this.applyChange(this.store.upsert([o.item]));
+      this.flush();
+    };
+    if (p.startMs === o.startMs && p.endMs === o.endMs) return;
+    this.applyChange(this.store.upsert([this.withProposal(o, p)]));
+    this.flush();
+    const next = this.elementsFor(id)[0];
+    const grip = edge ? next?.querySelector(`.tnc-resize-${edge}[tabindex]`) : null;
+    (grip ?? next)?.focus();
+    this.commit(resize ? "resize" : "drop", o, p, ev, revert);
+  }
+  /* ---------------------------------------------------------- native drop */
+  onNativeDragOver = (ev) => {
+    const dt = ev.dataTransfer;
+    if (!dt || !this.opts.acceptNativeDrop?.(dt) || !this.current) return;
+    ev.preventDefault();
+    dt.dropEffect = "copy";
+    const hit = this.current.hit(ev.clientX, ev.clientY);
+    if (!hit || hit.kind === "timeline" && hit.area !== "track" && hit.area !== "header") return;
+    const sel = this.selectionFor(hit, hit);
+    if (!sel) return;
+    this.selection = sel;
+    this.current.showSelection(sel);
+  };
+  onNativeDragLeave = (ev) => {
+    if (ev.relatedTarget && this.root.contains(ev.relatedTarget)) return;
+    this.unselectSilently();
+  };
+  onNativeDrop = (ev) => {
+    const dt = ev.dataTransfer;
+    if (!dt || !this.opts.acceptNativeDrop?.(dt) || !this.current) return;
+    ev.preventDefault();
+    const hit = this.current.hit(ev.clientX, ev.clientY);
+    this.unselectSilently();
+    if (!hit || hit.kind === "timeline" && hit.area !== "track" && hit.area !== "header") return;
+    const sel = this.selectionFor(hit, hit);
+    if (!sel) return;
+    this.opts.onExternalDrop?.({
+      start: new Date(sel.startMs),
+      end: new Date(sel.endMs),
+      allDay: sel.allDay,
+      startStr: sel.allDay ? formatDay(sel.startDay) : formatFloating(sel.startMs, this.zone),
+      endStr: sel.allDay ? formatDay(sel.endDay) : formatFloating(sel.endMs, this.zone),
+      jsEvent: null,
+      view: this.view,
+      rowId: sel.rowId,
+      source: null,
+      hit,
+      dataTransfer: dt
+    });
+  };
+};
+
+export {
+  Formatter,
+  localeFirstDay,
+  TIMELINE_UNIT_DAYS,
+  DEFAULT_TEXT,
+  defaultOptions,
+  LAYOUT_KEYS,
+  Calendar
+};