@tasknotes/calendar 0.1.6 → 0.1.7

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## Unreleased
+
+## 0.1.7
+
+### Added
+
+- Hosts can read collision column counts and the unobscured timed content width, choose views responsively, fill an empty list through a content hook, and translate the stack label with the `appointments` text.
+
+### Fixed
+
+- Collision stacks show appointment counts and open only the matching collision group, without unrelated all-day or timed items. Narrow time grids reveal the selected day on entry and view changes, not only after Today.
+- Crowded time-grid days use readable collision stacks without widening the entire week; stack contents retain drag-and-drop, including after moving the calendar into another window.
+- Today reveals the current day horizontally, with persistent day navigation when the grid is wider than its pane.
+- Overflow dialogs clamp to the visible viewport, reposition on resize and scroll, keep Close reachable, and provide touch-sized rows and keyboard navigation.
+- Collision stacks honour `eventMaxStack`, and overflow triggers stay stable across rerenders, so Escape returns focus to them.
+
 ## 0.1.6
 
 ### Changed

package/README.md

@@ -69,8 +69,15 @@ to 00:00–24:00 in 30-minute slots, initially scrolled to 08:00.
 `text` supplies translated labels; `itemContent` and related hooks supply
 custom DOM. The exported `CalendarOptions<D>` type documents the full API.
 
+`toolbar.viewDisplay` defaults to `"auto"`: full view-name buttons become a
+native select when the toolbar cannot fit them. Use `"buttons"` or `"select"`
+to choose a fixed presentation. The select uses the same translated view names
+and changes views through the same navigation lifecycle as the buttons.
+
 ### Month and list
 
+- `listEmptyContent()` may return a host-owned DOM node for an empty list, such as an explanation and recovery action. The default translated empty message remains when omitted. The node is removed when the list gains items.
+
 - `monthDisplay: "dots"` draws every item in a month cell as a small dot (`--tnc-dot-size`, `--tnc-dot-gap`) that wraps across the cell, with "+N" when they do not fit; `dayMaxEvents` caps the dots (`false` lets cells grow). The day cell is the tap target: dots ignore the pointer, are `aria-hidden`, get no content hook, and the cell is labelled "<date>, N items" (`text.itemCount`). Items in dots have `variant: "indicator"`; colour them with `color` or `itemDidMount` setting `--tnc-c`.
 - **"+N more" height**: day rows (and the time grid's all-day row) make room for the link at its rendered height, so a host may give it a 44px touch target (`--tnc-more-h`, or any min-height) without overflowing the row.
 - `listStart: "date" | "week"`: the list view starts at the date (default; FullCalendar `duration: { days: n }` lists, as the TaskNotes plugin and app used) or at the start of its week (FullCalendar's stock `listWeek`); week-aligned lists step by whole weeks.
@@ -105,6 +112,30 @@ custom DOM. The exported `CalendarOptions<D>` type documents the full API.
 Set `--tnc-theme-*` variables on the host (they inherit into the calendar)
 or on `.tnc`. The stylesheet is scoped to `.tnc` and does not inject CSS.
 
+Time grids collapse crowded collision groups into labelled, expandable stacks
+instead of widening every day. `--tnc-event-min-width` sets the readable event
+width in pixels (default 128). Keep the day minimum independent of collisions:
+
+```css
+.my-calendar .tnc-tg {
+  --tnc-col-min: 128px;
+  --tnc-event-min-width: 128px;
+}
+```
+
+When the day minimums exceed a narrow viewport, persistent day buttons reveal
+offscreen dates, and Today reveals the current day. Headers, all-day rows and
+timed columns stay aligned. `--tnc-collision-columns` remains available as
+diagnostic metadata (respecting `eventMaxStack`), not a week-wide width multiplier.
+Overflow dialogs clamp to the visible calendar and viewport, scroll vertically,
+and support Tab, arrow keys, Home, End and Escape. Timed items dragged from
+overflow start at their actual time rather than the slot underneath the dialog.
+
+Timed events also expose `--tnc-event-readable-width`, the percentage of their
+width not covered by the next collision column. Hosts can use it as the
+`max-width` of `.tnc-item-main` to keep text readable while preserving the user's
+overlapping event backgrounds. It is `100%` for non-overlapping placements.
+
 ```css
 .my-calendar {
   --tnc-theme-bg: #181818;

package/dist/calendar.css

@@ -467,6 +467,35 @@
 	overflow: auto;
 	overscroll-behavior: contain;
 }
+.tnc-tg-day-navigation {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 2px;
+	flex: none;
+}
+.tnc-tg-day-navigation[hidden] {
+	display: none;
+}
+.tnc-tg-day-navigation .is-offscreen {
+	text-decoration: underline;
+	text-underline-offset: 3px;
+}
+.tnc-more--collision {
+	display: flex;
+	align-items: start;
+	gap: 4px;
+	min-height: 40px;
+	white-space: normal;
+	text-align: start;
+}
+.tnc-collision-title {
+	flex: 1;
+	min-width: 0;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	overflow: hidden;
+}
 .tnc--height-auto .tnc-tg-scroll {
 	overflow: visible;
 }
@@ -1620,6 +1649,7 @@
 	outline: none;
 }
 .tnc-popover-head {
+	flex: none;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -1629,6 +1659,7 @@
 	font-weight: 650;
 }
 .tnc-popover-close {
+	flex: none;
 	min-width: 28px;
 	min-height: 28px;
 	border: 0;
@@ -1642,6 +1673,7 @@
 	background: var(--tnc-surface-3);
 }
 .tnc-popover-body {
+	min-height: 0;
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
@@ -1652,6 +1684,27 @@
 	position: relative;
 	flex: none;
 }
+.tnc-popover-title {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.tnc-popover-body .tnc-item {
+	height: auto;
+	min-height: 40px;
+}
+.tnc-popover-body .tnc-item-main {
+	min-height: 40px;
+}
+.tnc-popover-body .tnc-item-title {
+	white-space: normal;
+	overflow-wrap: anywhere;
+}
+.tnc-popover-close:focus-visible {
+	outline: 2px solid var(--tnc-accent);
+	outline-offset: -2px;
+}
 
 @media (prefers-reduced-motion: reduce) {
 	.tnc * {

package/dist/cjs/index.cjs

@@ -953,6 +953,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" },
@@ -1022,6 +1023,7 @@ var LAYOUT_KEYS = /* @__PURE__ */ new Set([
   "dateStrip",
   "listLeadTitle",
   "listAddText",
+  "listEmptyContent",
   "monthDisplay",
   "timeZone",
   "locale",
@@ -1261,19 +1263,27 @@ 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.textContent = 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) => {
@@ -1476,6 +1486,8 @@ var ListView = class {
     if (!keep.size && !leadItems.length) {
       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);
       }
     } else empty?.remove();
@@ -1824,6 +1836,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);
@@ -1851,7 +1865,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;
@@ -1864,6 +1878,7 @@ var TimeGridView = class {
   ctx;
   el;
   scroller;
+  dayNavigation;
   top;
   headRow;
   allDayRow;
@@ -1919,6 +1934,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");
@@ -1935,6 +1953,7 @@ var TimeGridView = class {
       this.body?.append(col);
       return {
         day,
+        collisionColumns: 1,
         head,
         col,
         plan: new ItemPool(ctx, planLayer),
@@ -1991,12 +2010,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();
   }
@@ -2114,6 +2138,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);
@@ -2125,14 +2154,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) {
@@ -2158,21 +2195,38 @@ 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) {
+        link.textContent = ctx.text.appointments(rec.count);
+        link.setAttribute("aria-label", link.textContent);
+        link.title = link.getAttribute("aria-label");
+      } else {
+        link.removeAttribute("aria-label");
+        link.removeAttribute("title");
+      }
       const cols = maxStack;
       setStyle(link, {
         top: top(rec.start),
         ...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) {
@@ -2283,6 +2337,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;
@@ -3048,7 +3122,11 @@ 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);
     }
   }
@@ -3068,9 +3146,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();
@@ -3188,6 +3268,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() {
@@ -3206,6 +3287,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 };
@@ -3237,7 +3319,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) {
@@ -3412,9 +3497,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 ?? "")
     );
@@ -3443,15 +3529,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 */
@@ -3575,8 +3653,10 @@ 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);
     if (rangeChanged) this.opts.onRangeChange?.(this.view);
   }
   /** Sets the visible days and view info from the anchor. */
@@ -3747,17 +3827,42 @@ 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 compact = mode === "select" || mode === "auto" && startWidth + buttons.scrollWidth + 32 > this.root.clientWidth;
+    buttons.hidden = compact;
+    select.hidden = !compact;
+    buttons.style.display = compact ? "none" : "flex";
+    select.style.display = compact ? "" : "none";
   }
   applyChange(change) {
     if (!change.added.length && !change.updated.length && !change.removed.length && !change.days.size && !change.spans) return;
@@ -3890,6 +3995,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;
@@ -3899,6 +4036,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;
@@ -3926,6 +4064,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;
@@ -3944,6 +4083,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) {
@@ -3989,6 +4129,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,
@@ -3997,7 +4138,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 } : this.current?.hit(ev.clientX, ev.clientY) ?? null,
       proposal: null,
       denied: false,
       timer: null,
@@ -4500,6 +4641,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();