@tasknotes/calendar 0.1.7 → 0.1.8

package/dist/cjs/react.cjs

@@ -982,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();
@@ -1013,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);
@@ -1034,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);
       });
@@ -1078,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). */
@@ -1184,7 +1206,8 @@ var DayGridView = class {
         w.more.append(link);
       }
       existing.delete(key);
-      link.textContent = ctx.text.more(items.length);
+      link.setAttribute("aria-label", ctx.text.more(items.length));
+      link.textContent = w.row.clientWidth / n < 72 ? `+${new Intl.NumberFormat(ctx.opts.locale).format(items.length)}` : ctx.text.more(items.length);
       setStyle(link, {
         left: `calc(${pct(col / n)} + 2px)`,
         width: `calc(${pct(1 / n)} - 4px)`,
@@ -1214,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;
@@ -1226,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();
@@ -1343,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);
@@ -1356,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);
@@ -1375,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);
@@ -1390,13 +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);
         const content = ctx.opts.listEmptyContent?.();
         if (content) empty.replaceChildren(content);
-        this.body.append(empty);
+        if (this.sections.size === 1) this.sections.values().next().value.append(empty);
+        else this.body.prepend(empty);
       }
     } else empty?.remove();
     this.ctx.strip?.draw();
@@ -1454,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;
   }
@@ -1543,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);
@@ -2123,8 +2149,15 @@ var TimeGridView = class {
       link.classList.toggle("tnc-more--collision", collapse);
       link.textContent = `+${rec.count}`;
       if (collapse) {
-        link.textContent = ctx.text.appointments(rec.count);
-        link.setAttribute("aria-label", link.textContent);
+        const items = placements.filter((placement) => placement.cluster === cluster).map((placement) => placement.item.item.title);
+        const count = ctx.text.appointments(rec.count);
+        const interval = `${ctx.fmt.time(rec.start)} \u2013 ${ctx.fmt.time(rec.end)}`;
+        link.replaceChildren(
+          h(ctx.doc, "span", "tnc-collision-count", null, String(rec.count)),
+          h(ctx.doc, "span", "tnc-collision-range", null, interval),
+          h(ctx.doc, "span", "tnc-collision-title", { "aria-hidden": "true" }, items.join(" \xB7 "))
+        );
+        link.setAttribute("aria-label", `${count}, ${interval}: ${items.join(", ")}`);
         link.title = link.getAttribute("aria-label");
       } else {
         link.removeAttribute("aria-label");
@@ -2133,6 +2166,7 @@ var TimeGridView = class {
       const cols = maxStack;
       setStyle(link, {
         top: top(rec.start),
+        height: collapse ? pct((rec.end - rec.start) / this.minutes) : "",
         ...inLane(lane, rec.split, (cols - 1) / cols, 1 / cols)
       });
     }
@@ -2199,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) {
@@ -2927,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 [];
   }
@@ -3006,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;
@@ -3019,6 +3064,7 @@ var Calendar = class {
   session = null;
   selection = null;
   suppressClick = false;
+  cancelledPointerId = null;
   selectedIds = /* @__PURE__ */ new Set();
   popover = null;
   timer = null;
@@ -3036,6 +3082,7 @@ var Calendar = class {
         this.positionMore();
       });
       this.resizeObs.observe(this.root);
+      this.resizeObs.observe(this.toolbarEl);
     }
   }
   onAdoptCheck = () => {
@@ -3162,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() {
@@ -3308,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;
@@ -3348,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);
@@ -3371,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);
@@ -3383,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);
@@ -3565,6 +3621,7 @@ var Calendar = class {
       this.current.scrollToTime(this.slot.scroll);
       this.current.revealDay(this.anchor);
     } else if (this.current instanceof TimelineView) this.current.scrollToDay(this.anchor);
+    else if (this.current instanceof YearView) this.current.revealDay(this.anchor);
     if (rangeChanged) this.opts.onRangeChange?.(this.view);
   }
   /** Sets the visible days and view info from the anchor. */
@@ -3590,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) {
@@ -3639,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;
@@ -3766,11 +3829,13 @@ var Calendar = class {
     buttons.style.display = "flex";
     select.style.display = "none";
     const startWidth = Array.from(start.children).reduce((width, child) => width + child.scrollWidth, 0);
-    const compact = mode === "select" || mode === "auto" && startWidth + buttons.scrollWidth + 32 > this.root.clientWidth;
+    const availableWidth = Math.min(this.root.clientWidth, this.toolbarEl.clientWidth);
+    const compact = mode === "select" || mode === "auto" && startWidth + buttons.scrollWidth + 32 > availableWidth;
     buttons.hidden = compact;
     select.hidden = !compact;
     buttons.style.display = compact ? "none" : "flex";
     select.style.display = compact ? "" : "none";
+    select.parentElement?.classList.toggle("tnc-toolbar-end--compact", compact);
   }
   applyChange(change) {
     if (!change.added.length && !change.updated.length && !change.removed.length && !change.days.size && !change.spans) return;
@@ -3835,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) {
@@ -3851,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;
@@ -3879,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;
     }
@@ -4007,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();
@@ -4014,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;
@@ -4046,7 +4117,7 @@ var Calendar = class {
       y0: ev.clientY,
       active: false,
       origin,
-      grab: overflowOrigin && this.current instanceof TimeGridView && !origin?.allDay ? { kind: "time", day: overflowOrigin.day, minute: overflowOrigin.minute } : this.current?.hit(ev.clientX, ev.clientY) ?? null,
+      grab: overflowOrigin ? this.current instanceof TimeGridView && !origin?.allDay ? { kind: "time", day: overflowOrigin.day, minute: overflowOrigin.minute } : { kind: "day", day: this.meta.get(itemEl).day } : this.current?.hit(ev.clientX, ev.clientY) ?? null,
       proposal: null,
       denied: false,
       timer: null,
@@ -4071,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();
@@ -4110,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) {
@@ -4122,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;
@@ -4152,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;
@@ -4189,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) {
@@ -4381,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(
@@ -4450,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),
@@ -4469,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) => {
@@ -4491,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 ?? "");
@@ -4579,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;
     }
@@ -4667,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;
@@ -4683,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);
@@ -4714,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