@tasknotes/calendar 0.1.6 → 0.1.8

package/dist/cjs/react.cjs

@@ -696,6 +696,7 @@ var DEFAULT_TEXT = {
   allDay: "All day",
   noItems: "Nothing scheduled",
   more: (n) => `+${n} more`,
+  appointments: (n) => `${n} appointments`,
   itemCount: (n) => n === 1 ? "1 item" : `${n} items`,
   weekNumber: (n) => `W${n}`,
   views: { week: "Week", day: "Day", days: "Days", month: "Month", list: "List", year: "Year", timeline: "Timeline" },
@@ -765,6 +766,7 @@ var LAYOUT_KEYS = /* @__PURE__ */ new Set([
   "dateStrip",
   "listLeadTitle",
   "listAddText",
+  "listEmptyContent",
   "monthDisplay",
   "timeZone",
   "locale",
@@ -980,8 +982,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();
@@ -1011,14 +1014,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 num = ctx.fmt.dayNumber(d);
-        const label = ymdOfDay(d).day === 1 ? `${ctx.fmt.monthShort(d)} ${num}` : num;
+        const label = !this.dotsMode && ymdOfDay(d).day === 1 ? `${ctx.fmt.monthShort(d)} ${num}` : num;
         cell.append(
           h(
             doc,
             "div",
             "tnc-dg-top",
             null,
-            opts.navLinks ? ctx.navLink(d, label, "tnc-dg-num") : h(doc, "span", "tnc-dg-num", null, label)
+            opts.navLinks && !this.dotsMode ? ctx.navLink(d, label, "tnc-dg-num") : h(doc, "span", "tnc-dg-num", null, label)
           )
         );
         dates.append(cell);
@@ -1032,20 +1035,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);
       });
@@ -1076,14 +1079,35 @@ var DayGridView = class {
   }
   render(_change) {
     const { ctx } = this;
+    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);
+      }
     }
   }
   /** Height of a "+N more" link as the host styles it (`--tnc-more-h`, or a taller min-height). */
@@ -1169,19 +1193,28 @@ var DayGridView = class {
       });
     }
     w.pool.end();
-    w.more.replaceChildren();
+    const existing = new Map(Array.from(w.more.children, (element) => [element.getAttribute("data-day"), element]));
     hidden.forEach((items, col) => {
       if (!items.length) return;
       const day = w.days[col];
-      const link = h(ctx.doc, "button", "tnc-more", { type: "button", "aria-haspopup": "dialog" }, ctx.text.more(items.length));
+      const key = String(day);
+      let link = existing.get(key);
+      if (!link) {
+        link = h(ctx.doc, "button", "tnc-more", { type: "button", "aria-haspopup": "dialog", "data-day": key });
+        const anchor = link;
+        link.addEventListener("click", (ev) => ctx.openMore(day, anchor, ev));
+        w.more.append(link);
+      }
+      existing.delete(key);
+      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)`,
         top: `calc(var(--tnc-dg-top-h) + ${visible(col)} * (var(--tnc-bar-h) + ${BAR_GAP}px))`
       });
-      link.addEventListener("click", (ev) => ctx.openMore(day, link, ev));
-      w.more.append(link);
     });
+    for (const link of existing.values()) link.remove();
     const step = this.barPx + BAR_GAP;
     let need = maxLevel >= 0 ? (maxLevel + 1) * step - BAR_GAP : 0;
     hidden.forEach((items, col) => {
@@ -1204,10 +1237,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;
@@ -1216,7 +1250,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();
@@ -1333,6 +1367,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);
@@ -1346,7 +1381,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);
@@ -1365,6 +1400,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);
@@ -1380,11 +1416,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);
-        this.body.append(empty);
+        const content = ctx.opts.listEmptyContent?.();
+        if (content) empty.replaceChildren(content);
+        if (this.sections.size === 1) this.sections.values().next().value.append(empty);
+        else this.body.prepend(empty);
       }
     } else empty?.remove();
     this.ctx.strip?.draw();
@@ -1442,7 +1481,7 @@ 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;
   }
@@ -1531,8 +1570,7 @@ 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);
@@ -1732,6 +1770,8 @@ var TimeGridView = class {
     this.el = h(doc, "div", "tnc-tg", { role: "table", "aria-label": ctx.view.title });
     this.el.classList.toggle("tnc-tg--no-grid", !showGrid);
     this.scroller = h(doc, "div", "tnc-tg-scroll");
+    this.dayNavigation = h(doc, "div", "tnc-tg-day-navigation", { role: "group", "aria-label": ctx.view.title });
+    this.scroller.addEventListener("scroll", () => this.updateDayNavigation());
     this.top = h(doc, "div", "tnc-tg-top");
     this.headRow = h(doc, "div", "tnc-tg-head tnc-tg-cols", { role: "row" });
     this.top.append(this.headRow);
@@ -1759,7 +1799,7 @@ var TimeGridView = class {
     } else {
       this.body = this.gutter = null;
     }
-    this.el.append(this.scroller);
+    this.el.append(this.dayNavigation, this.scroller);
     this.build();
     if (showGrid && opts.height === "fill") {
       const RO = ctx.win.ResizeObserver;
@@ -1772,6 +1812,7 @@ var TimeGridView = class {
   ctx;
   el;
   scroller;
+  dayNavigation;
   top;
   headRow;
   allDayRow;
@@ -1827,6 +1868,9 @@ var TimeGridView = class {
         head.append(cap);
       }
       this.headRow.append(head);
+      const dayButton = h(doc, "button", "tnc-btn", { type: "button", "aria-label": ctx.fmt.longDate(day) }, `${ctx.fmt.weekdayShort(day)} ${ctx.fmt.dayNumber(day)}`);
+      dayButton.addEventListener("click", () => this.revealDay(day));
+      this.dayNavigation.append(dayButton);
       opts.dayHeaderDidMount?.({ ...arg, el: head });
       const col = h(doc, "div", ["tnc-col", ...ctx.dayClasses(day)].join(" "), { role: "cell", "aria-label": ctx.fmt.longDate(day), "data-date": arg.dateStr });
       const bgLayer = h(doc, "div", "tnc-col-bg");
@@ -1843,6 +1887,7 @@ var TimeGridView = class {
       this.body?.append(col);
       return {
         day,
+        collisionColumns: 1,
         head,
         col,
         plan: new ItemPool(ctx, planLayer),
@@ -1899,12 +1944,17 @@ var TimeGridView = class {
   /* --------------------------------------------------------------- render */
   render(change) {
     this.renderAllDay();
-    if (!this.body) return;
+    if (!this.body) {
+      this.updateDayNavigation();
+      return;
+    }
     const dirty = change ? change.days : null;
     for (const c of this.cols) {
       if (dirty && !dirty.has(c.day) && !(this.ctx.slot.max > MINUTES_PER_DAY && dirty.has(c.day + 1))) continue;
       this.renderColumn(c);
     }
+    this.el.style.setProperty("--tnc-collision-columns", String(Math.max(1, ...this.cols.map((column) => column.collisionColumns))));
+    this.updateDayNavigation();
     this.renderCapacity();
     this.tick();
   }
@@ -2022,6 +2072,11 @@ var TimeGridView = class {
     }
     const minMinutes = opts.eventMinHeight / this.ppm;
     const layout = layoutTimedDay(items, c.day, zone, minMinutes, ctx.order, [slot.min, slot.max]);
+    c.collisionColumns = Math.max(
+      1,
+      ...layout.plan.map((placement) => opts.eventMaxStack > 0 ? Math.min(placement.cols, opts.eventMaxStack) : placement.cols),
+      ...layout.actual.filter((placement) => !placement.split).map((placement) => placement.cols)
+    );
     const total = this.minutes;
     const top = (m) => pct((m - slot.min) / total);
     const height = (s) => pct((s.endMin - s.startMin) / total);
@@ -2033,14 +2088,22 @@ var TimeGridView = class {
     c.bg.end();
     const hasActual = layout.actual.length > 0;
     c.col.classList.toggle("has-actual", hasActual);
+    for (const link of c.more.children) link.setAttribute("data-stale", "true");
     this.placeLane(c.plan, layout.plan, c, top, height, "plan");
     this.placeLane(c.actual, layout.actual, c, top, height, "actual");
+    for (const link of [...c.more.children]) if (link.hasAttribute("data-stale")) link.remove();
   }
   placeLane(pool, placements, c, top, height, lane) {
     const { ctx } = this;
     const { opts } = ctx;
-    const withMore = lane === "plan";
-    const maxStack = opts.eventMaxStack;
+    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 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 hiddenByCluster = /* @__PURE__ */ new Map();
     pool.begin();
     for (const p of placements) {
@@ -2066,21 +2129,46 @@ var TimeGridView = class {
         top: top(p.startMin),
         height: `max(${height(p)}, ${opts.eventMinHeight}px)`,
         ...inLane(lane, p.split, left, width),
+        "--tnc-event-readable-width": pct(span / cols / width),
         "z-index": String(p.col + 1)
       });
     }
     pool.end();
     if (!withMore) return;
-    c.more.replaceChildren();
-    for (const rec of hiddenByCluster.values()) {
-      const link = h(ctx.doc, "button", "tnc-more tnc-more--stack", { type: "button", "aria-haspopup": "dialog" }, `+${rec.count}`);
+    for (const [cluster, rec] of hiddenByCluster) {
+      const key = `${lane}-${cluster}`;
+      let link = c.more.querySelector(`[data-cluster="${key}"]`);
+      if (!link) {
+        link = h(ctx.doc, "button", "tnc-more tnc-more--stack", { type: "button", "aria-haspopup": "dialog", "data-cluster": key });
+        const anchor = link;
+        link.addEventListener("click", (ev) => ctx.openMore(c.day, anchor, ev, JSON.parse(anchor.dataset.itemIds ?? "[]")));
+        c.more.append(link);
+      }
+      link.removeAttribute("data-stale");
+      link.dataset.itemIds = JSON.stringify(placements.filter((placement) => placement.cluster === cluster).map((placement) => placement.item.id));
+      link.classList.toggle("tnc-more--collision", collapse);
+      link.textContent = `+${rec.count}`;
+      if (collapse) {
+        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");
+        link.removeAttribute("title");
+      }
       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)
       });
-      link.addEventListener("click", (ev) => ctx.openMore(c.day, link, ev));
-      c.more.append(link);
     }
   }
   meta(s, bg) {
@@ -2145,12 +2233,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) {
@@ -2191,6 +2277,26 @@ var TimeGridView = class {
   }
   resize() {
     this.fitRows();
+    this.render(null);
+  }
+  revealDay(day) {
+    const column = this.cols.find((candidate) => candidate.day === day);
+    if (!column) return;
+    const bounds = column.head.getBoundingClientRect();
+    const viewport = this.scroller.getBoundingClientRect();
+    this.scroller.scrollLeft += bounds.left - viewport.left - (viewport.width - bounds.width) / 2;
+    this.updateDayNavigation();
+  }
+  updateDayNavigation() {
+    this.dayNavigation.hidden = this.scroller.scrollWidth <= this.scroller.clientWidth + 1;
+    const viewport = this.scroller.getBoundingClientRect();
+    this.cols.forEach((column, index) => {
+      const bounds = column.head.getBoundingClientRect();
+      const visible = bounds.left >= viewport.left && bounds.right <= viewport.right;
+      const button = this.dayNavigation.children[index];
+      button?.classList.toggle("is-offscreen", !visible);
+      button?.setAttribute("aria-pressed", String(visible));
+    });
   }
   scrollToTime(minute) {
     if (!this.body) return;
@@ -2853,6 +2959,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.bottom - viewport.bottom;
+  }
   elementsFor(_id) {
     return [];
   }
@@ -2932,6 +3046,11 @@ 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 = [];
+  dragScrollFrame = null;
+  dragScrollOrigins = /* @__PURE__ */ new Map();
+  itemWriteStates = /* @__PURE__ */ new Map();
   dragRow = null;
   strip = null;
   stripSize = null;
@@ -2945,6 +3064,7 @@ var Calendar = class {
   session = null;
   selection = null;
   suppressClick = false;
+  cancelledPointerId = null;
   selectedIds = /* @__PURE__ */ new Set();
   popover = null;
   timer = null;
@@ -2956,8 +3076,13 @@ var Calendar = class {
     this.resizeObs?.disconnect();
     const RO = this.win.ResizeObserver;
     if (RO) {
-      this.resizeObs = new RO(() => this.current?.resize?.());
+      this.resizeObs = new RO(() => {
+        this.syncToolbarViewDisplay();
+        this.current?.resize?.();
+        this.positionMore();
+      });
       this.resizeObs.observe(this.root);
+      this.resizeObs.observe(this.toolbarEl);
     }
   }
   onAdoptCheck = () => {
@@ -2976,9 +3101,11 @@ var Calendar = class {
     if (this.frame !== null) old.cancelAnimationFrame(this.frame);
     this.timer = this.frame = null;
     this.doc.removeEventListener("pointerdown", this.onDocPointerDown, true);
+    this.listenMoreGeometry(false);
     this.doc = doc;
     this.win = doc.defaultView ?? old;
     this.doc.addEventListener("pointerdown", this.onDocPointerDown, true);
+    this.listenMoreGeometry(true);
     this.observeResize();
     this.rebuild(false);
     this.scheduleTick();
@@ -3082,7 +3209,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() {
@@ -3096,6 +3228,7 @@ var Calendar = class {
   goToday() {
     this.anchor = this.todayDay();
     this.rebuild(true);
+    if (this.current instanceof TimeGridView) this.current.revealDay(this.anchor);
   }
   /** The anchor date, as local midnight of that civil day in the calendar zone. */
   getDate() {
@@ -3114,6 +3247,7 @@ var Calendar = class {
   /** Re-measures (e.g. after the host was shown or resized by a parent). */
   updateSize() {
     this.current?.resize?.();
+    this.positionMore();
   }
   getScroll() {
     return this.current?.getScroll() ?? { top: 0, left: 0 };
@@ -3145,7 +3279,10 @@ var Calendar = class {
     }
     const view = this.current;
     if (view instanceof TimelineView) view.scrollToInstant(ms, opts.align ?? "center", opts.smooth ?? false);
-    else if (view instanceof TimeGridView && p.kind !== "day") view.scrollToTime(wallTime(ms, this.zone).minute);
+    else if (view instanceof TimeGridView) {
+      view.revealDay(day);
+      if (p.kind !== "day") view.scrollToTime(wallTime(ms, this.zone).minute);
+    }
   }
   /** What is under a client point: a time slot, a day, or a timeline row and date. Null outside the view. */
   hitTest(clientX, clientY) {
@@ -3223,7 +3360,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;
@@ -3263,13 +3401,14 @@ 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 (!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.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);
@@ -3286,6 +3425,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);
@@ -3298,6 +3438,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);
@@ -3320,9 +3461,10 @@ var Calendar = class {
     if (meta) this.opts.itemWillUnmount?.(this.itemArg(el, meta));
     el.remove();
   }
-  openMore(day, anchor, jsEvent) {
+  openMore(day, anchor, jsEvent, itemIds) {
     jsEvent.stopPropagation();
-    const items = this.store.inRange(day, day + 1).filter((n) => n.item.display !== "background" && (n.allDay || this.opts.view === "month" || !this.opts.timeGrid || this.opts.eventMaxStack > 0)).sort((a, b) => Number(b.allDay) - Number(a.allDay) || this.order(a, b));
+    const group = itemIds ? new Set(itemIds) : null;
+    const items = this.store.inRange(day, day + 1).filter((item) => !group || group.has(item.id)).filter((n) => n.item.display !== "background" && (n.allDay || anchor.classList.contains("tnc-more--stack") || this.opts.view === "month" || !this.opts.timeGrid || this.opts.eventMaxStack > 0)).sort((a, b) => Number(b.allDay) - Number(a.allDay) || this.order(a, b));
     const shown = new Set(
       [...this.viewHost.querySelectorAll(".tnc-item")].filter((el2) => this.meta.get(el2)?.day === day || (this.meta.get(el2)?.n.startDay ?? Infinity) <= day).map((el2) => el2.dataset.id ?? "")
     );
@@ -3351,15 +3493,7 @@ var Calendar = class {
     }
     pool.end();
     this.popover = { el, pool, anchor, day };
-    const rr = this.root.getBoundingClientRect();
-    const ar = anchor.getBoundingClientRect();
-    const w = Math.max(220, ar.width + 24);
-    let left = ar.left - rr.left - 12;
-    left = Math.max(4, Math.min(left, rr.width - w - 4));
-    let top = ar.top - rr.top - 40;
-    const height = el.offsetHeight;
-    top = Math.max(4, Math.min(top, rr.height - height - 4));
-    setStyle(el, { left, top, width: w });
+    this.positionMore();
     el.focus();
   }
   /* =============================================================== render */
@@ -3483,8 +3617,11 @@ var Calendar = class {
       this.current.setScroll({ top: keep.top, left: 0 });
       this.current.placeInstant(keep.ms, keep.vx);
     } else if (scroll) this.current.setScroll(scroll);
-    else if (this.current instanceof TimeGridView) this.current.scrollToTime(this.slot.scroll);
-    else if (this.current instanceof TimelineView) this.current.scrollToDay(this.anchor);
+    else if (this.current instanceof TimeGridView) {
+      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. */
@@ -3510,9 +3647,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) {
@@ -3559,20 +3698,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;
@@ -3655,17 +3798,44 @@ var Calendar = class {
     );
     const title = h(this.doc, "h2", "tnc-title", { "aria-live": "polite" }, this.view.title);
     const viewGroup = h(this.doc, "div", "tnc-toolbar-group tnc-toolbar-views", { role: "group" });
+    const viewSelect = h(this.doc, "select", "tnc-btn tnc-toolbar-view-select", {
+      "aria-label": this.text.viewHints[this.opts.view] ?? this.text.views[this.opts.view] ?? this.opts.view
+    });
     for (const v of views) {
       const label = v === "days" ? this.text.views.days ?? `${this.opts.dayCount} days` : this.text.views[v] ?? v;
       viewGroup.append(btn(label, this.text.viewHints[v] ?? label, `tnc-btn-view tnc-btn-view-${v}`, () => this.changeView(v), v === this.opts.view));
+      viewSelect.append(h(this.doc, "option", "", { value: v }, label));
     }
+    viewSelect.value = this.opts.view;
+    viewSelect.addEventListener("change", () => this.changeView(viewSelect.value));
     const start = h(this.doc, "div", "tnc-toolbar-start");
     const end = h(this.doc, "div", "tnc-toolbar-end");
     if (cfg.extraPlacement === "start") start.append(...extras);
     start.append(nav, title);
-    end.append(viewGroup);
+    end.append(viewGroup, viewSelect);
     if (cfg.extraPlacement !== "start") end.append(...extras);
     this.toolbarEl.append(start, end);
+    this.syncToolbarViewDisplay();
+  }
+  syncToolbarViewDisplay() {
+    const buttons = this.toolbarEl.querySelector(".tnc-toolbar-views");
+    const select = this.toolbarEl.querySelector(".tnc-toolbar-view-select");
+    const start = this.toolbarEl.querySelector(".tnc-toolbar-start");
+    if (!buttons || !select || !start) return;
+    const config = this.opts.toolbar;
+    const mode = typeof config === "object" ? config.viewDisplay ?? "auto" : "auto";
+    buttons.hidden = false;
+    select.hidden = true;
+    buttons.style.display = "flex";
+    select.style.display = "none";
+    const startWidth = Array.from(start.children).reduce((width, child) => width + child.scrollWidth, 0);
+    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;
@@ -3730,7 +3900,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) {
@@ -3746,7 +3916,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;
@@ -3774,7 +3945,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;
     }
@@ -3798,6 +3969,38 @@ var Calendar = class {
     }
   }
   /* ============================================================== popover */
+  onMoreGeometryChange = () => this.positionMore();
+  listenMoreGeometry(on) {
+    const method = on ? "addEventListener" : "removeEventListener";
+    this.doc[method]("scroll", this.onMoreGeometryChange, true);
+    this.win[method]("resize", this.onMoreGeometryChange);
+    this.win.visualViewport?.[method]("resize", this.onMoreGeometryChange);
+    this.win.visualViewport?.[method]("scroll", this.onMoreGeometryChange);
+  }
+  positionMore() {
+    const popover = this.popover;
+    if (!popover) return;
+    if (!popover.anchor.isConnected) {
+      this.closeMore();
+      return;
+    }
+    const viewport = this.win.visualViewport;
+    const root = this.root.getBoundingClientRect();
+    const anchor = popover.anchor.getBoundingClientRect();
+    const leftEdge = Math.max(root.left, viewport?.offsetLeft ?? 0) + 4;
+    const topEdge = Math.max(root.top, viewport?.offsetTop ?? 0) + 4;
+    const rightEdge = Math.min(root.right, (viewport?.offsetLeft ?? 0) + (viewport?.width ?? this.win.innerWidth)) - 4;
+    const bottomEdge = Math.min(root.bottom, (viewport?.offsetTop ?? 0) + (viewport?.height ?? this.win.innerHeight)) - 4;
+    if (rightEdge <= leftEdge || bottomEdge <= topEdge) {
+      this.closeMore();
+      return;
+    }
+    const width = Math.min(360, rightEdge - leftEdge);
+    setStyle(popover.el, { width, "max-height": Math.min(420, bottomEdge - topEdge) });
+    const left = Math.max(leftEdge, Math.min(anchor.left - 12, rightEdge - width));
+    const top = Math.max(topEdge, Math.min(anchor.top - 40, bottomEdge - popover.el.offsetHeight));
+    setStyle(popover.el, { left: left - root.left, top: top - root.top });
+  }
   refreshMore() {
     const p = this.popover;
     if (!p) return;
@@ -3807,6 +4010,7 @@ var Calendar = class {
       p.pool.place(n.id, { n, day: p.day, isStart: n.startDay >= p.day, isEnd: n.endDay <= p.day + 1, variant: n.allDay ? "bar" : "dot", mirror: false });
     }
     p.pool.end();
+    this.positionMore();
   }
   closeMore(restoreFocus = false) {
     const p = this.popover;
@@ -3834,6 +4038,7 @@ var Calendar = class {
     r.addEventListener("pointerover", this.onAdoptCheck);
     r.addEventListener("focusin", this.onAdoptCheck);
     this.doc.addEventListener("pointerdown", this.onDocPointerDown, true);
+    this.listenMoreGeometry(true);
   }
   unbindEvents() {
     const r = this.root;
@@ -3852,6 +4057,7 @@ var Calendar = class {
     r.removeEventListener("pointerover", this.onAdoptCheck);
     r.removeEventListener("focusin", this.onAdoptCheck);
     this.doc.removeEventListener("pointerdown", this.onDocPointerDown, true);
+    this.listenMoreGeometry(false);
     this.listenDoc(false);
   }
   listenDoc(on) {
@@ -3867,6 +4073,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();
@@ -3874,6 +4084,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;
@@ -3897,6 +4108,7 @@ var Calendar = class {
       mode = "select";
     }
     const touch = ev.pointerType === "touch";
+    const overflowOrigin = itemEl?.closest(".tnc-popover") && origin ? wallTime(origin.startMs, this.zone) : null;
     const s = {
       mode,
       pointerId: ev.pointerId,
@@ -3905,7 +4117,7 @@ var Calendar = class {
       y0: ev.clientY,
       active: false,
       origin,
-      grab: 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,
@@ -3930,16 +4142,79 @@ 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.opts.view !== "list" && 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) 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 (!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);
+        }
+      }
+      if (moved) this.track(session, pointer);
+      this.dragScrollFrame = this.win.requestAnimationFrame(tick);
+    };
+    this.dragScrollFrame = this.win.requestAnimationFrame(tick);
   }
   onTouchMove = (ev) => {
     if (this.session?.active) ev.preventDefault();
@@ -3969,6 +4244,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) {
@@ -3981,28 +4262,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;
@@ -4011,25 +4313,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;
@@ -4048,6 +4365,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) {
@@ -4240,7 +4561,18 @@ 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.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(
@@ -4309,10 +4641,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),
@@ -4328,19 +4666,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) => {
@@ -4350,6 +4701,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 ?? "");
@@ -4408,6 +4765,25 @@ var Calendar = class {
     if (el && meta) this.opts.onItemHover?.({ ...this.itemArg(el, meta), jsEvent: ev, entering: false });
   }
   onKeyDown = (ev) => {
+    if (this.popover && !ev.altKey && !ev.ctrlKey && !ev.metaKey && ["ArrowDown", "ArrowUp", "Home", "End"].includes(ev.key)) {
+      const rows = [...this.popover.el.querySelectorAll(".tnc-item")];
+      const index = rows.indexOf(this.doc.activeElement);
+      const next = ev.key === "Home" ? 0 : ev.key === "End" ? rows.length - 1 : ev.key === "ArrowDown" ? (index + 1) % rows.length : index <= 0 ? rows.length - 1 : index - 1;
+      ev.preventDefault();
+      ev.stopPropagation();
+      rows[next]?.focus();
+      rows[next]?.scrollIntoView({ block: "nearest", inline: "nearest" });
+      return;
+    }
+    if (ev.key === "Tab" && this.popover) {
+      const controls = [...this.popover.el.querySelectorAll('button, a[href], [tabindex="0"]')];
+      const index = controls.indexOf(this.doc.activeElement);
+      const next = ev.shiftKey ? index <= 0 ? controls.length - 1 : index - 1 : (index + 1) % controls.length;
+      ev.preventDefault();
+      ev.stopPropagation();
+      controls[next]?.focus();
+      return;
+    }
     if (ev.key === "Escape" && this.popover) {
       ev.preventDefault();
       ev.stopPropagation();
@@ -4419,7 +4795,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;
     }
@@ -4507,9 +4884,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;
@@ -4523,7 +4904,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);
@@ -4554,7 +4935,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/react/index.tsx