@tasknotes/calendar 0.1.8 → 0.1.10

package/CHANGELOG.md

@@ -1,6 +1,23 @@
 # Changelog
 
-## Unreleased
+## 0.1.10
+
+- Freeze Month source layout during a move and draw an inert target placeholder; preserve timed drag width across collision layouts.
+- Contain date-strip touch gestures, reveal the complete target month in Year view, and allow dense collision stacks independently of the overlap preference.
+- Require a short pause at a drag edge before scrolling, so passing through the edge does not shift the grid. Cancellation still restores the original scroll position.
+- Keep the whole requested hour label visible below the sticky day and all-day headers when scrolling to a time.
+- Agenda strip paging moves the list to the focused day; scrollbar and keyboard scrolling update the date highlight after a day is picked. Activity dots show up to three appointments in their configured colours.
+- Hosts can supply one wall-clock `formatTime` callback for event, stack, selection, accessibility and slot labels.
+- Hosts can set `overlapStackThreshold` to group dense overlapping appointments into the existing collision stack even in wide columns. Explicit side-by-side layouts remain unchanged.
+
+## 0.1.9
+
+Not published to npm (the release check failed); these changes ship in 0.1.10.
+
+### Added
+
+- Pinching a time grid on touch rescales its slots around the time under the fingers. `onSlotHeightChange` reports the settled height for hosts to store, and `pinchZoom: false` turns the gesture off.
+- `basesLayoutOptions` reads `slotHeight` and `pinchZoom` from Bases calendar settings.
 
 ## 0.1.8
 

package/README.md

@@ -46,6 +46,7 @@ The host persists changes; the calendar supplies optimistic updates and a
 - **Changes** (`onItemDrop`, `onItemResize`, `onSelect`, `onExternalDrop`) report TaskNotes storage strings (`startStr`/`endStr`), `revert()`, and `source: "pointer" | "keyboard"`. Returning a rejected promise reverts.
 - **Clicks**: `onDateClick` reports `minute` (the slot's wall-clock minute, snapped to `slotDuration`; null for day cells and the all-day row), `allDay` and `startStr` (`"YYYY-MM-DD"` or `"YYYY-MM-DDTHH:mm"`), so a tap on a slot can prefill a time.
 - **Input**: mouse drag after 4px, touch long press (`longPressDelay`), keyboard (Enter/Space, Shift+F10, Alt+Arrow to move, Alt+Shift+Arrow to resize), external drags via `beginExternalDrag` or native HTML5 drops.
+- **Pinch**: two fingers on a time grid rescale `slotHeight` between 16 and 96px, keeping the time under the fingers in place. `onSlotHeightChange` reports the settled height for the host to store; `pinchZoom: false` leaves the gesture to the browser.
 - **Popouts**: all listeners, timers and observers use the host element's `ownerDocument`; bare `window`/`document` are lint errors in `src`.
 
 ### Views and options

package/dist/calendar.css

@@ -707,6 +707,10 @@
 .tnc-tg-body {
 	position: relative;
 }
+.tnc-tg--pinch .tnc-tg-body {
+	/* Pinches rescale the grid rather than zoom the page. */
+	touch-action: pan-x pan-y;
+}
 .tnc-gutter {
 	border-right: 1px solid var(--tnc-line);
 }
@@ -1196,6 +1200,12 @@
 	font-weight: 650;
 	line-height: 1;
 }
+.tnc-strip-dots {
+	display: flex;
+	justify-content: center;
+	gap: 2px;
+	min-height: 5px;
+}
 .tnc-strip-dot {
 	width: 5px;
 	height: 5px;
@@ -1906,6 +1916,22 @@
 	outline: 1px solid var(--tnc-focus);
 	outline-offset: -1px;
 }
+.tnc .tnc-item--timed.is-dragging {
+	min-width: var(--tnc-drag-width);
+	max-width: var(--tnc-drag-width);
+}
+.tnc .tnc-dg .tnc-item.is-dragging:not(.is-mirror) {
+	opacity: var(--tnc-drag-opacity);
+	box-shadow: none;
+	outline: none;
+}
+.tnc .tnc-month-preview {
+	position: absolute;
+	pointer-events: none;
+	outline: 2px dashed var(--tnc-accent);
+	outline-offset: -2px;
+	z-index: 10;
+}
 .tnc .tnc-item--list.is-dragging:not(.tnc-drag-preview) {
 	opacity: var(--tnc-drag-opacity);
 	box-shadow: none;

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",
@@ -1158,6 +1165,7 @@ var DayGridView = class {
   topPx = 24;
   lastHeights = "";
   dotsMode;
+  dragPreviews = [];
   daysPerWeek() {
     const { days } = this.ctx;
     const first = days[0];
@@ -1171,6 +1179,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");
@@ -1202,6 +1240,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);
@@ -1393,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();
@@ -1445,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);
@@ -1576,6 +1620,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;
@@ -1583,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;
@@ -1593,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) {
@@ -1641,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);
@@ -1668,6 +1715,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();
@@ -1676,6 +1727,7 @@ var DateStrip = class {
   ctx;
   pick;
   onShown;
+  onPage;
   el;
   title;
   dows;
@@ -1734,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);
@@ -1758,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(
@@ -1782,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);
@@ -1822,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;
@@ -1861,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());
@@ -2010,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;
@@ -2190,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: [] };
@@ -2211,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));
@@ -2226,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) {
@@ -2393,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 };
@@ -3057,7 +3133,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 [];
@@ -3071,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;
@@ -3098,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, {
@@ -3140,13 +3218,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;
@@ -3255,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;
@@ -3494,7 +3575,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);
@@ -3762,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;
@@ -4126,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);
@@ -4145,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);
@@ -4240,7 +4332,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");
@@ -4293,24 +4389,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;
@@ -4660,6 +4828,7 @@ var Calendar = class {
       scroller.scrollLeft = position.left;
     }
     this.dragScrollOrigins.clear();
+    this.dragScrollEdges.clear();
     this.session = null;
     this.listDragPreview?.element.remove();
     this.listDragPreview = null;
@@ -4678,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);
@@ -5070,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,
@@ -5134,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,