@tasknotes/calendar 0.1.7 → 0.1.10

package/dist/cjs/index.cjs

@@ -832,14 +832,16 @@ function pct(n) {
 
 // src/dom/format.ts
 var Formatter = class {
-  cache = /* @__PURE__ */ new Map();
-  locale;
-  hour12;
-  constructor(locale, hour12) {
+  constructor(locale, hour12, formatTime) {
+    this.formatTime = formatTime;
     this.locale = locale;
     const probe = new Intl.DateTimeFormat(locale, { hour: "numeric" }).resolvedOptions();
     this.hour12 = hour12 ?? (probe.hour12 === true || probe.hourCycle === "h12" || probe.hourCycle === "h11");
   }
+  formatTime;
+  cache = /* @__PURE__ */ new Map();
+  locale;
+  hour12;
   fmt(key, opts) {
     let f = this.cache.get(key);
     if (!f) {
@@ -897,6 +899,7 @@ var Formatter = class {
   /** 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;
+    if (this.formatTime) return this.formatTime(m);
     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);
@@ -988,6 +991,7 @@ function defaultOptions() {
     snapDuration: void 0,
     scrollTime: "08:00",
     slotHeight: 24,
+    pinchZoom: true,
     expandRows: false,
     nowIndicator: true,
     selectMirror: true,
@@ -1029,6 +1033,7 @@ var LAYOUT_KEYS = /* @__PURE__ */ new Set([
   "locale",
   "firstDay",
   "hour12",
+  "formatTime",
   "weekNumbers",
   "weekends",
   "hiddenDays",
@@ -1041,9 +1046,11 @@ var LAYOUT_KEYS = /* @__PURE__ */ new Set([
   "slotDuration",
   "snapDuration",
   "slotHeight",
+  "pinchZoom",
   "expandRows",
   "nowIndicator",
   "slotEventOverlap",
+  "overlapStackThreshold",
   "eventMinHeight",
   "eventMaxStack",
   "dayMaxEvents",
@@ -1074,8 +1081,9 @@ var DayGridView = class {
   constructor(ctx) {
     this.ctx = ctx;
     const { doc, opts, days } = ctx;
-    this.dotsMode = opts.monthDisplay === "dots";
+    this.dotsMode = opts.monthDisplay === "dots" || opts.monthDisplay === "chips";
     this.el = h(doc, "div", this.dotsMode ? "tnc-dg tnc-dg--dots" : "tnc-dg");
+    this.el.classList.toggle("tnc-dg--chips", opts.monthDisplay === "chips");
     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();
@@ -1105,14 +1113,14 @@ var DayGridView = class {
         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 num2 = ctx.fmt.dayNumber(d);
-        const label = ymdOfDay(d).day === 1 ? `${ctx.fmt.monthShort(d)} ${num2}` : num2;
+        const label = !this.dotsMode && ymdOfDay(d).day === 1 ? `${ctx.fmt.monthShort(d)} ${num2}` : num2;
         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)
+            opts.navLinks && !this.dotsMode ? ctx.navLink(d, label, "tnc-dg-num") : h(doc, "span", "tnc-dg-num", null, label)
           )
         );
         dates.append(cell);
@@ -1126,20 +1134,20 @@ var DayGridView = class {
       layer.append(content);
       row.append(dates, layer);
       this.grid.append(row);
-      const dots = this.dotsMode ? cells.map((cell) => {
+      const dots = 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)) {
+    if (RO) {
       this.resizeObs = new RO(() => {
         if (this.sizeKey() !== this.lastHeights) this.render(null);
       });
@@ -1157,6 +1165,7 @@ var DayGridView = class {
   topPx = 24;
   lastHeights = "";
   dotsMode;
+  dragPreviews = [];
   daysPerWeek() {
     const { days } = this.ctx;
     const first = days[0];
@@ -1170,16 +1179,71 @@ var DayGridView = class {
   }
   render(_change) {
     const { ctx } = this;
+    this.clearDragPreviews();
+    const dragged = ctx.draggingId ? ctx.store.get(ctx.draggingId) : void 0;
+    const source = dragged ? this.elementsFor(dragged.id)[0] : void 0;
+    if (dragged && source && this.el.closest(".tnc-dragging-move")) {
+      const proposals = [dragged, ...[...ctx.store.all()].filter((item) => item.id !== dragged.id && item.item.preview)];
+      for (const proposal of proposals) {
+        const original = this.elementsFor(proposal.id)[0] ?? source;
+        const bounds = original.getBoundingClientRect();
+        const sourceWeek = original.closest(".tnc-dg-week");
+        const offset = bounds.top - sourceWeek.getBoundingClientRect().top;
+        for (const week of this.weeks) {
+          const start = week.days.findIndex((day) => day >= proposal.startDay && day < proposal.endDay);
+          if (start < 0) continue;
+          let end = start + 1;
+          while (!this.dotsMode && end < week.days.length && week.days[end] < proposal.endDay) end++;
+          const preview = ctx.createItemEl({ n: proposal, day: week.days[start], isStart: proposal.startDay >= week.days[start], isEnd: proposal.endDay <= week.days[end - 1] + 1, variant: ctx.meta.get(original).variant, mirror: true });
+          preview.classList.add("tnc-month-preview");
+          preview.inert = true;
+          setStyle(preview, {
+            left: `calc(${pct(start / week.days.length)} + 2px)`,
+            width: `calc(${pct((end - start) / week.days.length)} - 4px)`,
+            top: `${Math.max(this.topPx, Math.min(offset, week.row.clientHeight - bounds.height - 4))}px`,
+            height: `${bounds.height}px`
+          });
+          week.layer.append(preview);
+          this.dragPreviews.push(preview);
+        }
+      }
+      return;
+    }
+    this.dotsMode = ctx.opts.monthDisplay !== "full" || this.grid.clientWidth / this.daysPerWeek() < 72;
+    this.el.classList.toggle("tnc-dg--dots", this.dotsMode);
+    this.el.classList.toggle("tnc-dg--compact", this.dotsMode && ctx.opts.monthDisplay === "full");
+    this.el.classList.toggle("tnc-dg--chips", ctx.opts.monthDisplay === "chips" && this.weeks[0].dots[0].box.clientHeight >= 44);
     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);
+      for (const cell of w.cells) {
+        if (this.dotsMode) cell.tabIndex = 0;
+        else cell.removeAttribute("tabindex");
+        if (this.dotsMode && ctx.opts.monthDisplay === "full") cell.setAttribute("aria-haspopup", "dialog");
+        else cell.removeAttribute("aria-haspopup");
+      }
+      for (const cell of w.dots) cell.box.hidden = !this.dotsMode;
+      if (this.dotsMode) {
+        w.pool.begin();
+        w.pool.end();
+        w.more.replaceChildren();
+        this.renderDots(w);
+      } else {
+        for (const cell of w.dots) {
+          cell.pool.begin();
+          cell.pool.end();
+        }
+        this.renderWeek(w);
+      }
     }
   }
+  clearDragPreviews() {
+    for (const preview of this.dragPreviews) this.ctx.destroyItemEl(preview);
+    this.dragPreviews = [];
+  }
   /** 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);
@@ -1276,7 +1340,8 @@ var DayGridView = class {
         w.more.append(link);
       }
       existing.delete(key);
-      link.textContent = ctx.text.more(items.length);
+      link.setAttribute("aria-label", ctx.text.more(items.length));
+      link.textContent = w.row.clientWidth / n < 72 ? `+${new Intl.NumberFormat(ctx.opts.locale).format(items.length)}` : ctx.text.more(items.length);
       setStyle(link, {
         left: `calc(${pct(col / n)} + 2px)`,
         width: `calc(${pct(1 / n)} - 4px)`,
@@ -1306,10 +1371,11 @@ var DayGridView = class {
     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 chips = this.el.classList.contains("tnc-dg--chips");
+    const size = chips ? px(cs, "--tnc-chip-h", 14) : 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 perRow = chips ? 1 : 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;
@@ -1318,7 +1384,7 @@ var DayGridView = class {
     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;
+      const shown = items.length <= cap ? items.length : cap >= fits ? Math.max(1, cap - (chips ? 1 : 2)) : Math.max(1, 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();
@@ -1369,6 +1435,7 @@ var DayGridView = class {
     return this.weeks.flatMap((w) => [...w.pool.elementsFor(id), ...(w.dots ?? []).flatMap((c) => c.pool.elementsFor(id))]);
   }
   destroy() {
+    this.clearDragPreviews();
     this.resizeObs?.disconnect();
     for (const w of this.weeks) {
       w.pool.clear();
@@ -1421,6 +1488,7 @@ var ListView = class {
   frame = null;
   /** A picked day stays marked until the list is scrolled by hand. */
   pinned = false;
+  pinnedTop = 0;
   itemsOn(day) {
     const { store, opts } = this.ctx;
     const out = store.spanningIn(day, day + 1, true);
@@ -1435,6 +1503,7 @@ var ListView = class {
     const leadItems = [];
     const inLead = /* @__PURE__ */ new Set();
     const keep = /* @__PURE__ */ new Set();
+    let itemCount = 0;
     let prev = null;
     for (const day of days) {
       let items = this.itemsOn(day);
@@ -1448,7 +1517,7 @@ var ListView = class {
           return false;
         });
       }
-      if (!items.length && !agenda) continue;
+      if (!items.length && !agenda && opts.listDayCount !== 1) continue;
       keep.add(day);
       let section = this.sections.get(day);
       let pool = this.pools.get(day);
@@ -1467,6 +1536,7 @@ var ListView = class {
         this.pools.set(day, pool);
       }
       section.classList.toggle("is-empty", !items.length);
+      itemCount += items.length;
       this.fill(pool, items, () => day);
       if (prev ? prev.nextSibling !== section : this.body.firstChild !== section) {
         if (prev) prev.after(section);
@@ -1482,13 +1552,14 @@ var ListView = class {
       this.sections.delete(day);
     }
     this.renderLead(leadItems);
-    let empty = this.body.querySelector(":scope > .tnc-list-empty");
-    if (!keep.size && !leadItems.length) {
+    let empty = this.body.querySelector(".tnc-list-empty");
+    if (!itemCount && !leadItems.length && (!agenda || opts.listEmptyContent)) {
       if (!empty) {
         empty = h(doc, "div", "tnc-list-empty", { role: "listitem" }, ctx.text.noItems);
         const content = ctx.opts.listEmptyContent?.();
         if (content) empty.replaceChildren(content);
-        this.body.append(empty);
+        if (this.sections.size === 1) this.sections.values().next().value.append(empty);
+        else this.body.prepend(empty);
       }
     } else empty?.remove();
     this.ctx.strip?.draw();
@@ -1546,9 +1617,10 @@ var ListView = class {
     const section = day === this.ctx.days[0] && this.lead ? this.lead.section : this.sections.get(day);
     if (!section) return;
     this.ctx.strip?.measure();
-    section.scrollIntoView({ block: "start" });
+    this.scroller.scrollTop += section.getBoundingClientRect().top - this.scroller.getBoundingClientRect().top;
     this.ctx.strip?.setFocus(day);
     this.pinned = true;
+    this.pinnedTop = this.scroller.scrollTop;
   }
   fold = () => {
     this.pinned = false;
@@ -1556,6 +1628,7 @@ var ListView = class {
     if (strip?.expanded) strip.setExpanded(false);
   };
   onScroll = () => {
+    if (this.pinned && Math.abs(this.scroller.scrollTop - this.pinnedTop) > 1) this.pinned = false;
     if (this.frame !== null) return;
     this.frame = this.ctx.win.requestAnimationFrame(() => {
       this.frame = null;
@@ -1566,7 +1639,7 @@ var ListView = class {
   followTop() {
     const strip = this.ctx.strip;
     if (!strip || this.pinned) return;
-    const edge = strip.el.getBoundingClientRect().bottom + 1;
+    const edge = Math.max(strip.el.getBoundingClientRect().bottom, this.scroller.getBoundingClientRect().top) + 1;
     for (const day of this.ctx.days) {
       const section = this.sections.get(day);
       if (section && section.getBoundingClientRect().bottom > edge) {
@@ -1614,10 +1687,11 @@ var ListView = class {
 // src/dom/views/strip.ts
 var SWIPE_PX = 40;
 var DateStrip = class {
-  constructor(ctx, pick, focus, onShown) {
+  constructor(ctx, pick, focus, onShown, onPage) {
     this.ctx = ctx;
     this.pick = pick;
     this.onShown = onShown;
+    this.onPage = onPage;
     const { doc, text } = ctx;
     this.focus = focus;
     this.shown = startOfWeek(focus, ctx.firstDay);
@@ -1635,13 +1709,16 @@ var DateStrip = class {
     head.append(this.title, this.todayBtn, prev, next, this.slot);
     this.dows = h(doc, "div", "tnc-strip-dows", { "aria-hidden": "true" });
     this.grid = h(doc, "div", "tnc-strip-grid", { role: "group" });
-    const handle = h(doc, "button", "tnc-strip-handle", { type: "button", tabindex: "-1", "aria-hidden": "true" });
-    handle.addEventListener("click", () => this.setExpanded(!this.expanded));
+    const handle = h(doc, "div", "tnc-strip-handle", { "aria-hidden": "true" });
     this.el.append(head, this.dows, this.grid, handle);
     this.grid.addEventListener("click", this.onClick);
     this.grid.addEventListener("keydown", this.onKeyDown);
     this.el.addEventListener("pointerdown", this.onPointerDown);
     this.el.addEventListener("pointerup", this.onPointerUp);
+    this.el.addEventListener("touchstart", this.ownTouch, { passive: true });
+    this.el.addEventListener("touchmove", this.ownTouch, { passive: true });
+    this.el.addEventListener("touchend", this.ownTouch, { passive: true });
+    this.el.addEventListener("touchcancel", this.ownTouch, { passive: true });
     this.el.addEventListener("pointercancel", this.onPointerCancel);
     this.el.addEventListener("click", this.onClickCapture, true);
     this.draw();
@@ -1650,6 +1727,7 @@ var DateStrip = class {
   ctx;
   pick;
   onShown;
+  onPage;
   el;
   title;
   dows;
@@ -1708,6 +1786,7 @@ var DateStrip = class {
   step(dir) {
     this.shown = this.expanded ? addMonths(this.shown, dir) : this.shown + 7 * dir;
     this.draw();
+    this.onPage?.(this.expanded ? this.shown : this.focus + 7 * dir);
   }
   days() {
     if (!this.expanded) return Array.from({ length: 7 }, (_, i) => this.shown + i);
@@ -1732,7 +1811,8 @@ var DateStrip = class {
     const tabDay = days.includes(this.focus) ? this.focus : days[0];
     const cells = days.map((d) => {
       const arg = ctx.dayArg(d);
-      const count = store.inRange(d, d + 1).filter((n) => n.item.display !== "background" && n.item.display !== "none").length;
+      const items = store.inRange(d, d + 1).filter((n) => n.item.display !== "background" && n.item.display !== "none");
+      const count = items.length;
       const first = ymdOfDay(d).day === 1 && d !== days[0] && !this.expanded;
       const label = fmt.longDate(d);
       const cell = h(
@@ -1756,7 +1836,15 @@ var DateStrip = class {
         }
       );
       if (first) cell.append(h(doc, "span", "tnc-strip-month", { "aria-hidden": "true" }, fmt.monthShort(d)));
-      cell.append(h(doc, "span", "tnc-strip-num", null, fmt.dayNumber(d)), h(doc, "span", "tnc-strip-dot", { "aria-hidden": "true" }));
+      cell.append(h(doc, "span", "tnc-strip-num", null, fmt.dayNumber(d)));
+      const dots = h(doc, "span", "tnc-strip-dots", { "aria-hidden": "true" });
+      for (const item of items.slice(0, 3)) {
+        const dot = h(doc, "span", "tnc-strip-dot");
+        const color = item.item.color || item.item.borderColor || item.item.backgroundColor;
+        if (color) dot.style.backgroundColor = color;
+        dots.append(dot);
+      }
+      cell.append(dots);
       return cell;
     });
     this.grid.replaceChildren(...cells);
@@ -1796,6 +1884,9 @@ var DateStrip = class {
     if (ev.button !== 0 || this.ctx.draggingId) return;
     this.swipe = { id: ev.pointerId, x: ev.clientX, y: ev.clientY };
   };
+  ownTouch = (event) => {
+    event.stopPropagation();
+  };
   onPointerUp = (ev) => {
     const s = this.swipe;
     this.swipe = null;
@@ -1835,6 +1926,7 @@ var TimeGridView = class {
     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.el.classList.toggle("tnc-tg--pinch", showGrid && opts.pinchZoom);
     this.scroller = h(doc, "div", "tnc-tg-scroll");
     this.dayNavigation = h(doc, "div", "tnc-tg-day-navigation", { role: "group", "aria-label": ctx.view.title });
     this.scroller.addEventListener("scroll", () => this.updateDayNavigation());
@@ -1984,6 +2076,11 @@ var TimeGridView = class {
     }
     if (this.nowGutter) gutter.append(this.nowGutter);
   }
+  /** Slot height as drawn, which `expandRows` can stretch past the option. */
+  get drawnSlotHeight() {
+    return this.ctx.slot.duration * this.ppm;
+  }
+  /** Applies `slotHeight`. Items are placed in percentages, so they follow without a render. */
   applyScale() {
     const { opts, slot } = this.ctx;
     this.ppm = opts.slotHeight / slot.duration;
@@ -2164,15 +2261,17 @@ var TimeGridView = class {
     const { opts } = ctx;
     const readableWidth = Number.parseFloat(ctx.win.getComputedStyle(this.el).getPropertyValue("--tnc-event-min-width")) || 128;
     const laneWidth = c.col.clientWidth * (lane === "actual" && placements.some((placement) => placement.split) ? 0.22 : 1);
-    const collapse = placements.some((placement) => {
+    const overlapThreshold = opts.overlapStackThreshold ?? 0;
+    const collapsedClusters = new Set(placements.filter((placement) => {
       const columns = opts.eventMaxStack > 0 ? Math.min(placement.cols, opts.eventMaxStack) : placement.cols;
-      return columns > 1 && columns * readableWidth > laneWidth;
-    });
-    const withMore = lane === "plan" || collapse;
-    const maxStack = collapse ? 1 : opts.eventMaxStack;
+      const denseOverlap = overlapThreshold > 1 && placement.cols >= overlapThreshold;
+      return columns > 1 && (columns * readableWidth > laneWidth || denseOverlap);
+    }).map((placement) => placement.cluster));
     const hiddenByCluster = /* @__PURE__ */ new Map();
     pool.begin();
     for (const p of placements) {
+      const withMore = lane === "plan" || collapsedClusters.has(p.cluster);
+      const maxStack = collapsedClusters.has(p.cluster) ? 1 : opts.eventMaxStack;
       const preview = p.item.item.preview || p.item.id === ctx.draggingId;
       if (!preview && withMore && maxStack > 0 && p.cols > maxStack && p.col >= maxStack - 1) {
         const rec = hiddenByCluster.get(p.cluster) ?? { count: 0, start: p.startMin, end: p.endMin, split: p.split, items: [] };
@@ -2185,7 +2284,7 @@ var TimeGridView = class {
       }
       const cols = !preview && withMore && maxStack > 0 ? Math.min(p.cols, maxStack) : p.cols;
       const span = Math.min(p.span, cols - p.col);
-      const left = p.col / cols;
+      const left = p.item.id === ctx.draggingId ? 0 : 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));
@@ -2200,8 +2299,9 @@ var TimeGridView = class {
       });
     }
     pool.end();
-    if (!withMore) return;
     for (const [cluster, rec] of hiddenByCluster) {
+      const collapse = collapsedClusters.has(cluster);
+      const maxStack = collapse ? 1 : opts.eventMaxStack;
       const key = `${lane}-${cluster}`;
       let link = c.more.querySelector(`[data-cluster="${key}"]`);
       if (!link) {
@@ -2215,8 +2315,15 @@ var TimeGridView = class {
       link.classList.toggle("tnc-more--collision", collapse);
       link.textContent = `+${rec.count}`;
       if (collapse) {
-        link.textContent = ctx.text.appointments(rec.count);
-        link.setAttribute("aria-label", link.textContent);
+        const items = placements.filter((placement) => placement.cluster === cluster).map((placement) => placement.item.item.title);
+        const count = ctx.text.appointments(rec.count);
+        const interval = `${ctx.fmt.time(rec.start)} \u2013 ${ctx.fmt.time(rec.end)}`;
+        link.replaceChildren(
+          h(ctx.doc, "span", "tnc-collision-count", null, String(rec.count)),
+          h(ctx.doc, "span", "tnc-collision-range", null, interval),
+          h(ctx.doc, "span", "tnc-collision-title", { "aria-hidden": "true" }, items.join(" \xB7 "))
+        );
+        link.setAttribute("aria-label", `${count}, ${interval}: ${items.join(", ")}`);
         link.title = link.getAttribute("aria-label");
       } else {
         link.removeAttribute("aria-label");
@@ -2225,6 +2332,7 @@ var TimeGridView = class {
       const cols = maxStack;
       setStyle(link, {
         top: top(rec.start),
+        height: collapse ? pct((rec.end - rec.start) / this.minutes) : "",
         ...inLane(lane, rec.split, (cols - 1) / cols, 1 / cols)
       });
     }
@@ -2291,12 +2399,10 @@ var TimeGridView = class {
         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;
     };
+    const bounds = this.scroller.getBoundingClientRect();
+    if (x < bounds.left || x >= bounds.right || y < bounds.top || y >= bounds.bottom) return null;
     if (this.allDayRow) {
       const r2 = this.allDayRow.getBoundingClientRect();
       if (y >= r2.top && y < r2.bottom || !this.body && y >= r2.top) {
@@ -2361,7 +2467,9 @@ var TimeGridView = class {
   scrollToTime(minute) {
     if (!this.body) return;
     const y = (minute - this.ctx.slot.min) * this.ppm;
-    this.scroller.scrollTop = Math.max(0, y);
+    const label = this.gutter?.querySelector(".tnc-slot-label");
+    const inset = label ? Math.ceil(label.getBoundingClientRect().height / 2) + 2 : 0;
+    this.scroller.scrollTop = Math.max(0, y - inset);
   }
   getScroll() {
     return { top: this.scroller.scrollTop, left: this.scroller.scrollLeft };
@@ -3019,6 +3127,14 @@ ${this.ctx.text.more(items.length - 8)}` : ""}` : label;
   setScroll(s) {
     this.scroller.scrollTop = s.top;
   }
+  revealDay(day) {
+    const month = this.cells.find((cell) => cell.day === day)?.el.closest(".tnc-ym");
+    if (!month) return;
+    const bounds = month.getBoundingClientRect();
+    const viewport = this.scroller.getBoundingClientRect();
+    if (bounds.top < viewport.top) this.scroller.scrollTop += bounds.top - viewport.top;
+    else if (bounds.bottom > viewport.bottom) this.scroller.scrollTop += bounds.top - viewport.top;
+  }
   elementsFor(_id) {
     return [];
   }
@@ -3031,6 +3147,8 @@ ${this.ctx.text.more(items.length - 8)}` : ""}` : label;
 var EXTERNAL_ID = "__tnc_external__";
 var SVG_NS = "http://www.w3.org/2000/svg";
 var MAX_AGENDA_DAYS = 366;
+var PINCH_MIN_SLOT = 16;
+var PINCH_MAX_SLOT = 96;
 function sameOption(a, b, depth = 0) {
   if (a === b) return true;
   if (typeof a === "function" && typeof b === "function") return true;
@@ -3058,7 +3176,7 @@ var Calendar = class {
     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.fmt = new Formatter(this.opts.locale, this.opts.hour12, this.opts.formatTime);
     this.text = this.resolveText();
     this.order = parseOrder(this.opts.eventOrder);
     this.store = new ItemStore(this.zone, {
@@ -3098,10 +3216,18 @@ var Calendar = class {
   conflicts = /* @__PURE__ */ new Map();
   slot = { min: 0, max: MINUTES_PER_DAY, duration: 30, snap: 30, scroll: 480 };
   draggingId = null;
+  listDragPreview = null;
+  dragSources = [];
+  dragWidth = null;
+  dragScrollFrame = null;
+  dragScrollOrigins = /* @__PURE__ */ new Map();
+  dragScrollEdges = /* @__PURE__ */ new Map();
+  itemWriteStates = /* @__PURE__ */ new Map();
   dragRow = null;
   strip = null;
   stripSize = null;
   rebuilding = false;
+  pinch = null;
   toolbarEl;
   viewHost;
   current = null;
@@ -3111,6 +3237,7 @@ var Calendar = class {
   session = null;
   selection = null;
   suppressClick = false;
+  cancelledPointerId = null;
   selectedIds = /* @__PURE__ */ new Set();
   popover = null;
   timer = null;
@@ -3128,6 +3255,7 @@ var Calendar = class {
         this.positionMore();
       });
       this.resizeObs.observe(this.root);
+      this.resizeObs.observe(this.toolbarEl);
     }
   }
   onAdoptCheck = () => {
@@ -3208,7 +3336,7 @@ var Calendar = class {
         defaultAllDayDays: this.opts.defaultAllDayDays
       });
     }
-    if (has("locale") || has("hour12")) this.fmt = new Formatter(this.opts.locale, this.opts.hour12);
+    if (has("locale") || has("hour12") || has("formatTime")) this.fmt = new Formatter(this.opts.locale, this.opts.hour12, this.opts.formatTime);
     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;
@@ -3254,7 +3382,12 @@ var Calendar = class {
   gotoDate(date) {
     const day = this.toDay(date);
     if (day === null) return;
+    const sameMonth = this.opts.view === "month" && startOfMonth(day) === startOfMonth(this.anchor);
     this.anchor = day;
+    if (sameMonth) {
+      this.view = { ...this.view, anchor: day };
+      return;
+    }
     this.rebuild(true);
   }
   prev() {
@@ -3400,7 +3533,8 @@ var Calendar = class {
     out.push(...classList(this.opts.dayClassNames?.(this.dayArg(day))));
     return out;
   }
-  isEditable(n, what) {
+  isEditable(n, what, presentation = false) {
+    if (!presentation && this.itemWriteStates.get(n.id) === "pending") return false;
     if (n.id === EXTERNAL_ID || n.item.preview || this.opts.view === "year") return false;
     if (this.opts.view === "list" && (!this.opts.listAgenda || what === "duration")) return false;
     const it = n.item;
@@ -3440,13 +3574,17 @@ var Calendar = class {
     if (preview || 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 (!preview && !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 (!preview && !indicator && (this.isEditable(n, "start", true) || this.isEditable(n, "duration", true))) el.classList.add("is-draggable");
+    if (this.draggingId === n.id) {
+      el.classList.add("is-dragging");
+      if (variant === "timed" && this.dragWidth !== null) el.style.setProperty("--tnc-drag-width", `${this.dragWidth}px`);
+    }
     if (this.selectedIds.has(n.id) && !preview) 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;
+    this.applyItemWriteState(el, n.id);
     if (it.kind) el.dataset.kind = it.kind;
     const color = it.color ?? it.borderColor;
     if (color) el.style.setProperty("--tnc-c", color);
@@ -3463,6 +3601,7 @@ var Calendar = class {
     const custom = variant === "list" ? this.opts.listItemContent?.(arg) : null;
     const content = indicator ? null : custom ?? this.opts.itemContent?.(arg);
     if (indicator) {
+      if (this.opts.monthDisplay === "chips") el.append(h(this.doc, "span", "tnc-item-title", null, it.title));
     } else if (content != null) {
       const wrap = h(this.doc, "div", "tnc-item-main");
       wrap.append(content);
@@ -3475,6 +3614,7 @@ var Calendar = class {
     return el;
   }
   refreshItemEl(el, meta) {
+    this.applyItemWriteState(el, meta.n.id);
     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);
@@ -3657,6 +3797,7 @@ var Calendar = class {
       this.current.scrollToTime(this.slot.scroll);
       this.current.revealDay(this.anchor);
     } else if (this.current instanceof TimelineView) this.current.scrollToDay(this.anchor);
+    else if (this.current instanceof YearView) this.current.revealDay(this.anchor);
     if (rangeChanged) this.opts.onRangeChange?.(this.view);
   }
   /** Sets the visible days and view info from the anchor. */
@@ -3682,9 +3823,11 @@ var Calendar = class {
   }
   /** The range, run on to the end of the strip's days so their dots are right. */
   dataRangeFor(range) {
-    const end = this.strip ? Math.max(range.endDay, this.strip.window().end) : range.endDay;
-    if (end === range.endDay) return range;
-    return { ...range, endDay: end, end: new Date(toInstant(end, 0, this.zone)) };
+    const window = this.strip?.window();
+    const start = window ? Math.min(range.startDay, window.start) : range.startDay;
+    const end = window ? Math.max(range.endDay, window.end) : range.endDay;
+    if (start === range.startDay && end === range.endDay) return range;
+    return { ...range, startDay: start, start: new Date(toInstant(start, 0, this.zone)), endDay: end, end: new Date(toInstant(end, 0, this.zone)) };
   }
   /** Adds, updates or removes the date strip for the current view. */
   syncStrip(navigated) {
@@ -3703,7 +3846,9 @@ var Calendar = class {
     this.root.classList.add("tnc--has-strip");
     const { startDay, endDay } = this.view.range;
     if (!this.strip) {
-      const strip = new DateStrip(this, (day, ev) => this.pickStripDay(day, ev), startDay, () => this.stripShown());
+      const strip = new DateStrip(this, (day, ev) => this.pickStripDay(day, ev), startDay, () => this.stripShown(), (day) => {
+        if (this.agendaList()) this.showListDay(day);
+      });
       this.strip = strip;
       this.root.insertBefore(strip.el, this.viewHost);
       const RO = this.win.ResizeObserver;
@@ -3731,20 +3876,24 @@ var Calendar = class {
   stripShown() {
     if (!this.strip || this.rebuilding || !this.view) return;
     const next = this.dataRangeFor(this.view.range);
-    if (next.endDay === this.view.dataRange.endDay) return;
+    if (next.startDay === this.view.dataRange.startDay && next.endDay === this.view.dataRange.endDay) return;
     this.view = { ...this.view, dataRange: next };
     this.opts.onRangeChange?.(this.view);
   }
   /** What is under a point, the date strip included. */
   hitAt(x, y) {
+    const target = this.doc.elementFromPoint(x, y);
+    if (!target || !this.root.contains(target)) {
+      this.strip?.markTarget(null);
+      return null;
+    }
     const strip = this.strip;
     if (strip) {
-      const el = this.doc.elementFromPoint(x, y);
-      const day = el ? strip.dayAt(el) : null;
+      const day = strip.dayAt(target);
       strip.markTarget(day !== null && this.draggingId ? day : null);
       if (day !== null) return { kind: "day", day };
     }
-    return this.current?.hit(x, y) ?? null;
+    return this.current?.el.contains(target) ? this.current.hit(x, y) : null;
   }
   agendaList() {
     return this.opts.view === "list" && this.opts.listAgenda && this.current instanceof ListView ? this.current : null;
@@ -3858,11 +4007,13 @@ var Calendar = class {
     buttons.style.display = "flex";
     select.style.display = "none";
     const startWidth = Array.from(start.children).reduce((width, child) => width + child.scrollWidth, 0);
-    const compact = mode === "select" || mode === "auto" && startWidth + buttons.scrollWidth + 32 > this.root.clientWidth;
+    const availableWidth = Math.min(this.root.clientWidth, this.toolbarEl.clientWidth);
+    const compact = mode === "select" || mode === "auto" && startWidth + buttons.scrollWidth + 32 > availableWidth;
     buttons.hidden = compact;
     select.hidden = !compact;
     buttons.style.display = compact ? "none" : "flex";
     select.style.display = compact ? "" : "none";
+    select.parentElement?.classList.toggle("tnc-toolbar-end--compact", compact);
   }
   applyChange(change) {
     if (!change.added.length && !change.updated.length && !change.removed.length && !change.days.size && !change.spans) return;
@@ -3927,7 +4078,7 @@ var Calendar = class {
     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: "" };
+    if (n.startMs === n.endMs || n.item.timeDisplay === "start") return { start, end: "" };
     return { start, end: this.fmt.time(wallTime(n.endMs, this.zone).minute, true) };
   }
   fillTime(el, n, variant, day) {
@@ -3943,7 +4094,8 @@ var Calendar = class {
     }
     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)}`;
+    const start = `${n.item.title}, ${this.fmt.longDate(s.day)} ${this.fmt.time(s.minute)}`;
+    return n.item.timeDisplay === "start" || n.startMs === n.endMs ? start : `${start} \u2013 ${this.fmt.time(e.minute)}`;
   }
   defaultContent(meta) {
     const { n, variant, day } = meta;
@@ -3971,7 +4123,7 @@ var Calendar = class {
   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 (variant === "dot" || !this.isEditable(n, "duration", true)) {
       if (ports) this.addPorts(el, n);
       return;
     }
@@ -4060,7 +4212,10 @@ var Calendar = class {
     r.addEventListener("dragover", this.onNativeDragOver);
     r.addEventListener("dragleave", this.onNativeDragLeave);
     r.addEventListener("drop", this.onNativeDrop);
+    r.addEventListener("touchstart", this.onTouchStart, { passive: true });
     r.addEventListener("touchmove", this.onTouchMove, { passive: false });
+    r.addEventListener("touchend", this.onTouchEnd);
+    r.addEventListener("touchcancel", this.onTouchEnd);
     r.addEventListener("pointerover", this.onAdoptCheck);
     r.addEventListener("focusin", this.onAdoptCheck);
     this.doc.addEventListener("pointerdown", this.onDocPointerDown, true);
@@ -4079,7 +4234,10 @@ var Calendar = class {
     r.removeEventListener("dragover", this.onNativeDragOver);
     r.removeEventListener("dragleave", this.onNativeDragLeave);
     r.removeEventListener("drop", this.onNativeDrop);
+    r.removeEventListener("touchstart", this.onTouchStart);
     r.removeEventListener("touchmove", this.onTouchMove);
+    r.removeEventListener("touchend", this.onTouchEnd);
+    r.removeEventListener("touchcancel", this.onTouchEnd);
     r.removeEventListener("pointerover", this.onAdoptCheck);
     r.removeEventListener("focusin", this.onAdoptCheck);
     this.doc.removeEventListener("pointerdown", this.onDocPointerDown, true);
@@ -4099,6 +4257,10 @@ var Calendar = class {
     return el && this.root.contains(el) && this.meta.has(el) && !this.meta.get(el)?.n.item.preview ? el : null;
   }
   onDocPointerDown = (ev) => {
+    if (this.cancelledPointerId !== null) {
+      this.cancelledPointerId = null;
+      this.listenDoc(false);
+    }
     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();
@@ -4106,6 +4268,7 @@ var Calendar = class {
   onPointerDown = (ev) => {
     if (ev.button !== 0 || this.session) return;
     const target = ev.target;
+    if (target.closest(".tnc-dg--compact .tnc-dg-day")) return;
     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;
@@ -4138,7 +4301,7 @@ var Calendar = class {
       y0: ev.clientY,
       active: false,
       origin,
-      grab: overflowOrigin && this.current instanceof TimeGridView && !origin?.allDay ? { kind: "time", day: overflowOrigin.day, minute: overflowOrigin.minute } : this.current?.hit(ev.clientX, ev.clientY) ?? null,
+      grab: overflowOrigin ? this.current instanceof TimeGridView && !origin?.allDay ? { kind: "time", day: overflowOrigin.day, minute: overflowOrigin.minute } : { kind: "day", day: this.meta.get(itemEl).day } : this.current?.hit(ev.clientX, ev.clientY) ?? null,
       proposal: null,
       denied: false,
       timer: null,
@@ -4163,20 +4326,159 @@ var Calendar = class {
   };
   activate(s) {
     s.active = true;
+    if (s.lastEvent) this.leaveHover(s.lastEvent);
     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");
+      for (const el of this.elementsFor(s.origin.id)) {
+        if (this.meta.get(el)?.variant === "timed" && s.mode === "move") {
+          this.dragWidth = el.getBoundingClientRect().width;
+          el.style.setProperty("--tnc-drag-width", `${this.dragWidth}px`);
+        }
+        if (this.opts.view !== "list" && !(this.current instanceof DayGridView) && s.mode === "move") {
+          const source = el.cloneNode(true);
+          source.classList.remove("is-selected");
+          source.classList.add("tnc-drag-source");
+          source.setAttribute("aria-hidden", "true");
+          source.inert = true;
+          for (const node of [source, ...source.querySelectorAll("[id], [data-id], [data-task-path]")]) {
+            node.removeAttribute("id");
+            node.removeAttribute("data-id");
+            node.removeAttribute("data-task-path");
+          }
+          el.before(source);
+          this.dragSources.push(source);
+        }
+        if (this.opts.view === "list" && !this.listDragPreview && s.mode === "move") {
+          const bounds = el.getBoundingClientRect();
+          const preview = el.cloneNode(true);
+          preview.classList.add("tnc-drag-preview", "is-dragging");
+          preview.removeAttribute("data-id");
+          preview.removeAttribute("data-task-path");
+          preview.setAttribute("aria-hidden", "true");
+          preview.inert = true;
+          preview.style.width = `${bounds.width}px`;
+          this.root.append(preview);
+          this.listDragPreview = { element: preview, offsetX: s.x0 - bounds.left, offsetY: s.y0 - bounds.top, width: bounds.width, height: bounds.height };
+        }
+        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);
+    this.startDragScroll();
+  }
+  startDragScroll() {
+    if (this.dragScrollFrame !== null) return;
+    const tick = () => {
+      this.dragScrollFrame = null;
+      const session = this.session;
+      const pointer = session?.lastEvent;
+      if (!session?.active || !pointer) return;
+      const origin = session.origin ? this.elementsFor(session.origin.id)[0] : this.viewHost;
+      const underPointer = this.doc.elementFromPoint(pointer.clientX, pointer.clientY);
+      let moved = false;
+      if (origin && underPointer && this.root.contains(underPointer)) {
+        for (const axis of ["x", "y"]) {
+          const scroller = scrollerOf(origin, axis);
+          if (!scroller) continue;
+          const viewport = scroller === this.doc.scrollingElement ? { left: 0, top: 0, right: this.win.innerWidth, bottom: this.win.innerHeight } : scroller.getBoundingClientRect();
+          const coordinate = axis === "x" ? pointer.clientX : pointer.clientY;
+          const lower = Math.max(0, axis === "x" ? viewport.left : viewport.top);
+          const upper = Math.min(axis === "x" ? this.win.innerWidth : this.win.innerHeight, axis === "x" ? viewport.right : viewport.bottom);
+          if (coordinate < lower || coordinate > upper) {
+            this.dragScrollEdges.delete(axis);
+            continue;
+          }
+          const delta = coordinate < lower + 32 ? -Math.min(12, (lower + 32 - coordinate) / 2) : coordinate > upper - 32 ? Math.min(12, (coordinate - upper + 32) / 2) : 0;
+          if (!delta) {
+            this.dragScrollEdges.delete(axis);
+            continue;
+          }
+          const edge = this.dragScrollEdges.get(axis);
+          const direction = Math.sign(delta);
+          const now = this.win.performance.now();
+          if (!edge || edge.scroller !== scroller || edge.direction !== direction) {
+            this.dragScrollEdges.set(axis, { scroller, direction, since: now });
+            continue;
+          }
+          if (now - edge.since < 180) continue;
+          if (!this.dragScrollOrigins.has(scroller)) this.dragScrollOrigins.set(scroller, { top: scroller.scrollTop, left: scroller.scrollLeft });
+          const before = axis === "x" ? scroller.scrollLeft : scroller.scrollTop;
+          if (axis === "x") scroller.scrollLeft += delta;
+          else scroller.scrollTop += delta;
+          moved ||= before !== (axis === "x" ? scroller.scrollLeft : scroller.scrollTop);
+        }
+      } else this.dragScrollEdges.clear();
+      if (moved) this.track(session, pointer);
+      this.dragScrollFrame = this.win.requestAnimationFrame(tick);
+    };
+    this.dragScrollFrame = this.win.requestAnimationFrame(tick);
   }
+  onTouchStart = (ev) => {
+    const first = ev.touches[0];
+    const second = ev.touches[1];
+    if (!first || !second) {
+      this.endPinch();
+      return;
+    }
+    const view = this.current;
+    if (this.session?.active || !this.opts.pinchZoom || !(view instanceof TimeGridView)) return;
+    const body = first.target.closest(".tnc-tg-body");
+    if (!body?.contains(second.target)) return;
+    this.endSession(null, true);
+    if (this.pinch) return;
+    const { top, height } = body.getBoundingClientRect();
+    const y = (first.clientY + second.clientY) / 2;
+    this.pinch = {
+      body,
+      distance: Math.max(1, Math.hypot(first.clientX - second.clientX, first.clientY - second.clientY)),
+      y,
+      anchor: (y - top) / height,
+      drawn: view.drawnSlotHeight,
+      option: this.opts.slotHeight
+    };
+  };
   onTouchMove = (ev) => {
     if (this.session?.active) ev.preventDefault();
+    const p = this.pinch;
+    const first = ev.touches[0];
+    const second = ev.touches[1];
+    if (!p || !first || !second) return;
+    if (!ev.cancelable) {
+      this.endPinch();
+      return;
+    }
+    ev.preventDefault();
+    const height = p.drawn * Math.hypot(first.clientX - second.clientX, first.clientY - second.clientY) / p.distance;
+    p.y = (first.clientY + second.clientY) / 2;
+    this.pinchTo(p, Math.min(Math.max(p.drawn, PINCH_MAX_SLOT), Math.max(Math.min(p.drawn, PINCH_MIN_SLOT), height)));
+  };
+  onTouchEnd = (ev) => {
+    if (ev.touches.length < 2) this.endPinch();
   };
+  /** Rescales the grid, keeping the anchored time under the fingers. */
+  pinchTo(p, slotHeight) {
+    this.opts = { ...this.opts, slotHeight };
+    if (!(this.current instanceof TimeGridView)) return;
+    this.current.applyScale();
+    const { top, height } = p.body.getBoundingClientRect();
+    const scroller = scrollerOf(p.body, "y");
+    if (scroller) scroller.scrollTop += top + height * p.anchor - p.y;
+  }
+  endPinch() {
+    const p = this.pinch;
+    this.pinch = null;
+    if (!p?.body.isConnected) return;
+    const settled = Math.round(this.opts.slotHeight);
+    const slotHeight = settled === Math.round(p.drawn) ? p.option : settled;
+    this.pinchTo(p, slotHeight);
+    this.current?.render(null);
+    if (slotHeight !== p.option) this.opts.onSlotHeightChange?.(slotHeight);
+  }
   onPointerMove = (ev) => {
     const s = this.session;
     if (!s || ev.pointerId !== s.pointerId) return;
@@ -4202,6 +4504,12 @@ var Calendar = class {
     this.track(s, ev);
   };
   onPointerUp = (ev) => {
+    if (ev.pointerId === this.cancelledPointerId) {
+      this.cancelledPointerId = null;
+      this.suppressNextClick();
+      this.listenDoc(false);
+      return;
+    }
     const s = this.session;
     if (!s || ev.pointerId !== s.pointerId) return;
     if (!s.active) {
@@ -4214,28 +4522,49 @@ var Calendar = class {
       return;
     }
     this.suppressNextClick();
+    this.track(s, ev);
     this.endSession(ev, false);
   };
   onPointerCancel = (ev) => {
+    if (ev.pointerId === this.cancelledPointerId) {
+      this.cancelledPointerId = null;
+      this.listenDoc(false);
+    }
     if (this.session && ev.pointerId === this.session.pointerId) this.endSession(null, true);
   };
   onDocKeyDown = (ev) => {
     if (ev.key === "Escape" && this.session) {
       ev.preventDefault();
       ev.stopPropagation();
+      const pointerId = this.session.active ? this.session.pointerId : null;
       this.endSession(null, true);
+      if (pointerId !== null) {
+        this.cancelledPointerId = pointerId;
+        this.listenDoc(true);
+      }
     }
   };
   /** Proposal for the current pointer position. */
   track(s, ev) {
+    if (this.listDragPreview) {
+      const preview = this.listDragPreview;
+      const bounds = this.root.getBoundingClientRect();
+      preview.element.style.left = `${Math.max(8, Math.min(this.win.innerWidth - preview.width - 8, ev.clientX - preview.offsetX)) - bounds.left}px`;
+      preview.element.style.top = `${Math.max(8, Math.min(this.win.innerHeight - preview.height - 8, ev.clientY - preview.offsetY)) - bounds.top}px`;
+    }
     const hit = this.hitAt(ev.clientX, ev.clientY);
     if (s.mode === "external") {
       this.trackExternal(s, hit);
       return;
     }
     if (!s.grab) s.grab = hit;
-    if (!hit || !s.grab) return;
+    if (!hit || !s.grab) {
+      this.invalidateProposal(s);
+      return;
+    }
     if (s.mode === "select") {
+      s.denied = false;
+      this.root.classList.remove("tnc-drop-denied");
       const sel = this.selectionFor(s.grab, hit);
       if (!sel) return;
       this.selection = sel;
@@ -4244,25 +4573,40 @@ var Calendar = class {
     }
     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;
+    if (!p) {
+      this.invalidateProposal(s);
+      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;
+    if (!allowed) {
+      this.invalidateProposal(s);
+      return;
+    }
+    if (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)]));
+    if (this.opts.view !== "list") this.applyChange(this.store.upsert([this.withProposal(origin, p)]));
+  }
+  invalidateProposal(s) {
+    const hadProposal = s.proposal !== null;
+    s.proposal = null;
+    s.hit = null;
+    s.denied = true;
+    this.dragRow = null;
+    this.root.classList.add("tnc-drop-denied");
+    this.strip?.markTarget(null);
+    this.unselectSilently();
+    if (s.mode === "external") this.applyChange(this.store.remove([EXTERNAL_ID]));
+    else if (hadProposal && s.origin) this.applyChange(this.store.upsert([s.origin.item]));
   }
   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();
+      this.invalidateProposal(s);
       return;
     }
     const dur = src.durationMinutes ?? this.opts.defaultTimedMinutes;
@@ -4281,6 +4625,10 @@ var Calendar = class {
     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 (!allowed) {
+      this.invalidateProposal(s);
+      return;
+    }
     if (sameProposal(p, s.proposal)) return;
     s.proposal = p;
     if (hit.kind === "timeline" && p.rowId === void 0) {
@@ -4473,7 +4821,19 @@ var Calendar = class {
   endSession(ev, cancel) {
     const s = this.session;
     if (!s) return;
+    if (this.dragScrollFrame !== null) this.win.cancelAnimationFrame(this.dragScrollFrame);
+    this.dragScrollFrame = null;
+    if (cancel || s.denied) for (const [scroller, position] of this.dragScrollOrigins) {
+      scroller.scrollTop = position.top;
+      scroller.scrollLeft = position.left;
+    }
+    this.dragScrollOrigins.clear();
+    this.dragScrollEdges.clear();
     this.session = null;
+    this.listDragPreview?.element.remove();
+    this.listDragPreview = null;
+    for (const source of this.dragSources) source.remove();
+    this.dragSources = [];
     if (s.timer !== null) this.win.clearTimeout(s.timer);
     this.listenDoc(false);
     this.root.classList.remove(
@@ -4487,10 +4847,15 @@ var Calendar = class {
     );
     const draggedId = this.draggingId;
     this.draggingId = null;
+    this.dragWidth = null;
     this.dragRow = null;
-    if (draggedId) for (const el of this.elementsFor(draggedId)) el.classList.remove("is-dragging");
+    if (draggedId) for (const el of this.elementsFor(draggedId)) {
+      el.classList.remove("is-dragging");
+      el.style.removeProperty("--tnc-drag-width");
+    }
     this.strip?.markTarget(null);
     if (!s.active) return;
+    if (this.current instanceof DayGridView) this.current.render(null);
     if (s.mode === "select") {
       if (cancel) this.unselectSilently();
       else if (this.selection) this.fireSelect(this.selection, ev);
@@ -4542,10 +4907,16 @@ var Calendar = class {
       revert();
       return;
     }
+    if (this.opts.view === "list") this.applyChange(this.store.upsert([this.withProposal(origin, p)]));
     this.flush();
     this.commit(s.mode === "move" ? "drop" : "resize", origin, p, ev, revert);
   }
   commit(kind, origin, p, ev, revert) {
+    let reverted = false;
+    const mark = (state) => {
+      this.itemWriteStates.set(origin.id, state);
+      for (const element of this.elementsFor(origin.id)) this.applyItemWriteState(element, origin.id);
+    };
     const arg = {
       item: origin.item,
       start: new Date(p.startMs),
@@ -4561,19 +4932,32 @@ var Calendar = class {
       jsEvent: ev,
       source: ev && "key" in ev ? "keyboard" : "pointer",
       view: this.view,
-      revert
+      revert: () => {
+        reverted = true;
+        revert();
+        mark("failed");
+      }
     };
     const handler = kind === "drop" ? this.opts.onItemDrop : this.opts.onItemResize;
     try {
+      mark("pending");
       const res = handler?.(arg);
       if (res && typeof res.then === "function") {
-        Promise.resolve(res).catch(() => revert());
-      }
+        void Promise.resolve(res).then(() => {
+          if (!reverted) mark("changed");
+        }, () => arg.revert());
+      } else if (!reverted) mark("changed");
     } catch (err) {
-      revert();
+      arg.revert();
       throw err;
     }
   }
+  applyItemWriteState(element, id) {
+    const state = this.itemWriteStates.get(id);
+    for (const name of ["pending", "failed", "changed"]) element.classList.toggle(`is-write-${name}`, state === name);
+    if (state === "pending") element.setAttribute("aria-busy", "true");
+    else element.removeAttribute("aria-busy");
+  }
   /* --------------------------------------------------------- click / keys */
   /** Runs in the capture phase so the click ending a drag never reaches content inside the calendar, React portals included. */
   onClickCapture = (ev) => {
@@ -4583,6 +4967,12 @@ var Calendar = class {
     ev.preventDefault();
   };
   onClick = (ev) => {
+    const compactDay = ev.target.closest?.(".tnc-dg--compact .tnc-dg-day");
+    if (compactDay && this.root.contains(compactDay) && !ev.target.closest(".tnc-navlink")) {
+      const day = parseDay(compactDay.dataset.date ?? "");
+      if (day !== null) this.openMore(day, compactDay, ev);
+      return;
+    }
     const yearDay = ev.target.closest?.(".tnc-ym-day");
     if (yearDay && this.root.contains(yearDay)) {
       const day = parseDay(yearDay.dataset.date ?? "");
@@ -4671,7 +5061,8 @@ var Calendar = class {
       const day = parseDay(target.dataset.date ?? "");
       if (day !== null) {
         ev.preventDefault();
-        this.clickSlot({ kind: "day", day }, ev, true);
+        if (target.closest(".tnc-dg--compact")) this.openMore(day, target, ev);
+        else this.clickSlot({ kind: "day", day }, ev, true);
       }
       return;
     }
@@ -4759,9 +5150,13 @@ var Calendar = class {
     const dt = ev.dataTransfer;
     if (!dt || !this.opts.acceptNativeDrop?.(dt) || !this.current) return;
     ev.preventDefault();
+    const hit = this.hitAt(ev.clientX, ev.clientY);
+    if (!hit || hit.kind === "timeline" && hit.area !== "track" && hit.area !== "header") {
+      dt.dropEffect = "none";
+      this.unselectSilently();
+      return;
+    }
     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;
@@ -4775,7 +5170,7 @@ var Calendar = class {
     const dt = ev.dataTransfer;
     if (!dt || !this.opts.acceptNativeDrop?.(dt) || !this.current) return;
     ev.preventDefault();
-    const hit = this.current.hit(ev.clientX, ev.clientY);
+    const hit = this.hitAt(ev.clientX, ev.clientY);
     this.unselectSilently();
     if (!hit || hit.kind === "timeline" && hit.area !== "track" && hit.area !== "header") return;
     const sel = this.selectionFor(hit, hit);
@@ -4806,7 +5201,7 @@ function scrollerOf(el, axis) {
   return doc.scrollingElement;
 }
 function rangeMoved(prev, next) {
-  return !prev || prev.type !== next.type || prev.range.startDay !== next.range.startDay || prev.range.endDay !== next.range.endDay || prev.dataRange.endDay !== next.dataRange.endDay;
+  return !prev || prev.type !== next.type || prev.range.startDay !== next.range.startDay || prev.range.endDay !== next.range.endDay || prev.dataRange.startDay !== next.dataRange.startDay || prev.dataRange.endDay !== next.dataRange.endDay;
 }
 
 // src/tasknotes/bases.ts
@@ -4849,6 +5244,8 @@ var BASES_CALENDAR_DEFAULTS = {
   slotDuration: "00:30:00",
   snapDuration: "00:30:00",
   scrollTime: "08:00:00",
+  slotHeight: 24,
+  pinchZoom: true,
   nowIndicator: true,
   showTimeGrid: true,
   selectMirror: true,
@@ -4913,6 +5310,8 @@ function basesLayoutOptions(s, context = {}) {
     slotDuration,
     snapDuration: time("snapDuration") ?? slotDuration,
     scrollTime: time("scrollTime", 48) ?? d.scrollTime,
+    slotHeight: clamp(Math.round(num(s.slotHeight, d.slotHeight)), 5, 96),
+    pinchZoom: pick("pinchZoom") !== false,
     nowIndicator: pick("nowIndicator") !== false,
     timeGrid: showTimeGrid,
     selectMirror: pick("selectMirror") !== false,