@tasknotes/calendar 0.1.8 → 0.1.10

package/dist/cjs/react.cjs

@@ -575,14 +575,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) {
@@ -640,6 +642,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);
@@ -731,6 +734,7 @@ function defaultOptions() {
     snapDuration: void 0,
     scrollTime: "08:00",
     slotHeight: 24,
+    pinchZoom: true,
     expandRows: false,
     nowIndicator: true,
     selectMirror: true,
@@ -772,6 +776,7 @@ var LAYOUT_KEYS = /* @__PURE__ */ new Set([
   "locale",
   "firstDay",
   "hour12",
+  "formatTime",
   "weekNumbers",
   "weekends",
   "hiddenDays",
@@ -784,9 +789,11 @@ var LAYOUT_KEYS = /* @__PURE__ */ new Set([
   "slotDuration",
   "snapDuration",
   "slotHeight",
+  "pinchZoom",
   "expandRows",
   "nowIndicator",
   "slotEventOverlap",
+  "overlapStackThreshold",
   "eventMinHeight",
   "eventMaxStack",
   "dayMaxEvents",
@@ -1066,6 +1073,7 @@ var DayGridView = class {
   topPx = 24;
   lastHeights = "";
   dotsMode;
+  dragPreviews = [];
   daysPerWeek() {
     const { days } = this.ctx;
     const first = days[0];
@@ -1079,6 +1087,36 @@ 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");
@@ -1110,6 +1148,10 @@ var DayGridView = class {
       }
     }
   }
+  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);
@@ -1301,6 +1343,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();
@@ -1353,6 +1396,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);
@@ -1484,6 +1528,7 @@ var ListView = class {
     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;
@@ -1491,6 +1536,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;
@@ -1501,7 +1547,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) {
@@ -1549,10 +1595,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);
@@ -1576,6 +1623,10 @@ var DateStrip = class {
     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();
@@ -1584,6 +1635,7 @@ var DateStrip = class {
   ctx;
   pick;
   onShown;
+  onPage;
   el;
   title;
   dows;
@@ -1642,6 +1694,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);
@@ -1666,7 +1719,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(
@@ -1690,7 +1744,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);
@@ -1730,6 +1792,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;
@@ -1769,6 +1834,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());
@@ -1918,6 +1984,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;
@@ -2098,15 +2169,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: [] };
@@ -2119,7 +2192,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));
@@ -2134,8 +2207,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) {
@@ -2301,7 +2375,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 };
@@ -2965,7 +3041,7 @@ ${this.ctx.text.more(items.length - 8)}` : ""}` : label;
     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.bottom - viewport.bottom;
+    else if (bounds.bottom > viewport.bottom) this.scroller.scrollTop += bounds.top - viewport.top;
   }
   elementsFor(_id) {
     return [];
@@ -2979,6 +3055,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;
@@ -3006,7 +3084,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, {
@@ -3048,13 +3126,16 @@ var Calendar = class {
   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;
@@ -3163,7 +3244,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;
@@ -3402,7 +3483,10 @@ var Calendar = class {
     if (this.conflicts.has(n.id)) el.classList.add("is-conflict");
     const indicator = variant === "indicator";
     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 (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);
@@ -3670,7 +3754,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;
@@ -4034,7 +4120,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);
@@ -4053,7 +4142,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);
@@ -4148,7 +4240,11 @@ var Calendar = class {
     if (s.origin) {
       this.draggingId = s.origin.id;
       for (const el of this.elementsFor(s.origin.id)) {
-        if (this.opts.view !== "list" && s.mode === "move") {
+        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");
@@ -4201,24 +4297,96 @@ var Calendar = class {
           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) continue;
+          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) continue;
+          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;
@@ -4568,6 +4736,7 @@ var Calendar = class {
       scroller.scrollLeft = position.left;
     }
     this.dragScrollOrigins.clear();
+    this.dragScrollEdges.clear();
     this.session = null;
     this.listDragPreview?.element.remove();
     this.listDragPreview = null;
@@ -4586,10 +4755,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);