@tasknotes/calendar 0.1.2 → 0.1.4

package/dist/cjs/react.cjs

@@ -708,6 +708,10 @@ function defaultOptions() {
     dayCount: 3,
     listDayCount: 7,
     listStart: "date",
+    listAgenda: false,
+    dateStrip: false,
+    listLeadTitle: null,
+    listAddText: null,
     monthDisplay: "full",
     timeZone: "local",
     locale: void 0,
@@ -757,6 +761,10 @@ var LAYOUT_KEYS = /* @__PURE__ */ new Set([
   "dayCount",
   "listDayCount",
   "listStart",
+  "listAgenda",
+  "dateStrip",
+  "listLeadTitle",
+  "listAddText",
   "monthDisplay",
   "timeZone",
   "locale",
@@ -1247,21 +1255,48 @@ var DayGridView = class {
 };
 
 // src/dom/views/list.ts
+var LOAD_AHEAD = "0px 0px 600px 0px";
 var ListView = class {
   constructor(ctx) {
     this.ctx = ctx;
-    this.el = h(ctx.doc, "div", "tnc-list");
-    this.scroller = h(ctx.doc, "div", "tnc-list-scroll");
-    this.body = h(ctx.doc, "div", "tnc-list-body", { role: "list", "aria-label": ctx.view.title });
+    const { doc, win, opts } = ctx;
+    this.el = h(doc, "div", "tnc-list");
+    this.scroller = h(doc, "div", "tnc-list-scroll");
+    this.body = h(doc, "div", "tnc-list-body", { role: "list", "aria-label": ctx.view.title });
     this.scroller.append(this.body);
     this.el.append(this.scroller);
+    this.agenda = opts.listAgenda;
+    if (!this.agenda) return;
+    this.el.classList.add("tnc-list--agenda");
+    this.sentinel = h(doc, "div", "tnc-list-more", { "aria-hidden": "true" });
+    this.scroller.append(this.sentinel);
+    const IO = win.IntersectionObserver;
+    if (IO) {
+      this.loader = new IO(
+        (entries) => {
+          if (entries.some((e) => e.isIntersecting)) ctx.extendList(ctx.view.range.endDay + Math.max(7, opts.listDayCount));
+        },
+        // Auto height scrolls the page, so watch the viewport; fixed height scrolls the list.
+        { root: opts.height === "auto" ? null : this.scroller, rootMargin: LOAD_AHEAD }
+      );
+    }
+    win.addEventListener("scroll", this.onScroll, { capture: true, passive: true });
+    this.scroller.addEventListener("wheel", this.fold, { passive: true });
+    this.scroller.addEventListener("touchmove", this.fold, { passive: true });
   }
   ctx;
   el;
   scroller;
   body;
+  agenda;
   pools = /* @__PURE__ */ new Map();
   sections = /* @__PURE__ */ new Map();
+  lead = null;
+  sentinel = null;
+  loader = null;
+  frame = null;
+  /** A picked day stays marked until the list is scrolled by hand. */
+  pinned = false;
   itemsOn(day) {
     const { store, opts } = this.ctx;
     const out = store.spanningIn(day, day + 1, true);
@@ -1270,46 +1305,45 @@ var ListView = class {
     return out.filter((n) => n.item.display !== "background" && n.item.display !== "none" && (opts.allDaySlot || !n.allDay)).sort((a, b) => Number(b.allDay) - Number(a.allDay) || this.ctx.order(a, b));
   }
   render(_change) {
-    const { ctx } = this;
-    const { doc, days } = ctx;
+    const { ctx, agenda } = this;
+    const { doc, days, opts } = ctx;
+    const includes = agenda && opts.listLeadTitle !== null ? opts.listLeadIncludes : void 0;
+    const leadItems = [];
+    const inLead = /* @__PURE__ */ new Set();
     const keep = /* @__PURE__ */ new Set();
     let prev = null;
     for (const day of days) {
-      const items = this.itemsOn(day);
-      if (!items.length) continue;
+      let items = this.itemsOn(day);
+      if (includes) {
+        items = items.filter((n) => {
+          if (!includes(n.item)) return true;
+          if (!inLead.has(n.id)) {
+            inLead.add(n.id);
+            leadItems.push(n);
+          }
+          return false;
+        });
+      }
+      if (!items.length && !agenda) continue;
       keep.add(day);
       let section = this.sections.get(day);
       let pool = this.pools.get(day);
       if (!section || !pool) {
         const arg = ctx.dayArg(day);
         const heading = h(doc, "div", ["tnc-list-day", ...ctx.dayClasses(day)].join(" "), { "data-date": arg.dateStr });
-        const custom = ctx.opts.dayHeaderContent?.(arg);
+        const custom = opts.dayHeaderContent?.(arg);
         const label = custom ?? ctx.fmt.longDate(day);
-        heading.append(ctx.opts.navLinks ? ctx.navLink(day, label, "tnc-list-day-link") : label);
-        const rows2 = h(doc, "div", "tnc-list-rows", { role: "group" });
-        section = h(doc, "div", "tnc-list-section", { role: "listitem", "aria-label": ctx.fmt.longDate(day), "data-date": arg.dateStr }, heading, rows2);
-        ctx.opts.dayHeaderDidMount?.({ ...arg, el: heading });
-        pool = new ItemPool(ctx, rows2);
+        heading.append(opts.navLinks ? ctx.navLink(day, label, "tnc-list-day-link") : label);
+        const rows = h(doc, "div", "tnc-list-rows", { role: "group" });
+        section = h(doc, "div", "tnc-list-section", { role: "listitem", "aria-label": ctx.fmt.longDate(day), "data-date": arg.dateStr }, heading, rows);
+        if (agenda && opts.listAddText !== null) section.append(this.addRow(day));
+        opts.dayHeaderDidMount?.({ ...arg, el: heading });
+        pool = new ItemPool(ctx, rows);
         this.sections.set(day, section);
         this.pools.set(day, pool);
       }
-      pool.begin();
-      for (const n of items) {
-        pool.place(n.id, {
-          n,
-          day,
-          isStart: n.startDay === day,
-          isEnd: n.endDay === day + 1,
-          variant: "list",
-          mirror: false
-        });
-      }
-      pool.end();
-      const rows = pool.container;
-      for (const n of items) {
-        const el = pool.elementsFor(n.id)[0];
-        if (el) rows.append(el);
-      }
+      section.classList.toggle("is-empty", !items.length);
+      this.fill(pool, items, () => day);
       if (prev ? prev.nextSibling !== section : this.body.firstChild !== section) {
         if (prev) prev.after(section);
         else this.body.prepend(section);
@@ -1323,18 +1357,111 @@ var ListView = class {
       section.remove();
       this.sections.delete(day);
     }
+    this.renderLead(leadItems);
     let empty = this.body.querySelector(":scope > .tnc-list-empty");
-    if (!keep.size) {
+    if (!keep.size && !leadItems.length) {
       if (!empty) {
         empty = h(doc, "div", "tnc-list-empty", { role: "listitem" }, ctx.text.noItems);
         this.body.append(empty);
       }
     } else empty?.remove();
+    this.ctx.strip?.draw();
+    if (this.loader && this.sentinel) {
+      this.loader.unobserve(this.sentinel);
+      this.loader.observe(this.sentinel);
+    }
+  }
+  /** Places items in a pool, keeping DOM order equal to item order. */
+  fill(pool, items, dayFor) {
+    pool.begin();
+    for (const n of items) {
+      const d = dayFor(n);
+      pool.place(n.id, { n, day: d, isStart: n.startDay === d, isEnd: n.endDay === d + 1, variant: "list", mirror: false });
+    }
+    pool.end();
+    for (const n of items) {
+      const el = pool.elementsFor(n.id)[0];
+      if (el) pool.container.append(el);
+    }
+  }
+  renderLead(items) {
+    const { ctx } = this;
+    const { doc, opts } = ctx;
+    if (!items.length || opts.listLeadTitle === null) {
+      if (!this.lead) return;
+      opts.listLeadWillUnmount?.({ el: this.lead.slot });
+      this.lead.pool.clear();
+      this.lead.section.remove();
+      this.lead = null;
+      return;
+    }
+    if (!this.lead) {
+      const title = opts.listLeadTitle;
+      const slot = h(doc, "div", "tnc-list-lead-slot", { "data-tnc-no-drag": "" });
+      const heading = h(doc, "div", "tnc-list-day tnc-list-lead-head", null, h(doc, "span", "tnc-list-lead-title", null, title), slot);
+      const rows = h(doc, "div", "tnc-list-rows", { role: "group" });
+      const section = h(doc, "div", "tnc-list-section tnc-list-lead", { role: "listitem", "aria-label": title }, heading, rows);
+      this.lead = { section, slot, pool: new ItemPool(ctx, rows) };
+      opts.listLeadDidMount?.({ el: slot });
+    }
+    if (this.body.firstChild !== this.lead.section) this.body.prepend(this.lead.section);
+    const first = ctx.days[0] ?? ctx.view.range.startDay;
+    this.fill(this.lead.pool, items, (n) => Math.max(n.startDay, first));
+  }
+  addRow(day) {
+    const { ctx } = this;
+    const label = ctx.opts.listAddText ?? "";
+    const btn = h(ctx.doc, "button", "tnc-list-add", { type: "button", "aria-label": `${label}, ${ctx.fmt.longDate(day)}` }, label);
+    btn.addEventListener("click", (ev) => ctx.opts.onListAdd?.({ ...ctx.dayArg(day), jsEvent: ev }));
+    return btn;
+  }
+  /** Brings a day's section to the top, under the strip; the first day brings the lead section too. */
+  scrollToDay(day) {
+    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.ctx.strip?.setFocus(day);
+    this.pinned = true;
+  }
+  fold = () => {
+    this.pinned = false;
+    const strip = this.ctx.strip;
+    if (strip?.expanded) strip.setExpanded(false);
+  };
+  onScroll = () => {
+    if (this.frame !== null) return;
+    this.frame = this.ctx.win.requestAnimationFrame(() => {
+      this.frame = null;
+      this.followTop();
+    });
+  };
+  /** Marks the first day not hidden under the strip. */
+  followTop() {
+    const strip = this.ctx.strip;
+    if (!strip || this.pinned) return;
+    const edge = strip.el.getBoundingClientRect().bottom + 1;
+    for (const day of this.ctx.days) {
+      const section = this.sections.get(day);
+      if (section && section.getBoundingClientRect().bottom > edge) {
+        strip.setFocus(day);
+        return;
+      }
+    }
   }
   showSelection(_sel) {
   }
-  hit(_x, _y) {
-    return null;
+  hit(x, y) {
+    const el = this.ctx.doc.elementFromPoint(x, y);
+    const section = el?.closest(".tnc-list-section");
+    if (!section || !this.body.contains(section)) return null;
+    if (section === this.lead?.section) {
+      const item = el?.closest(".tnc-item");
+      const meta = item ? this.ctx.meta.get(item) : void 0;
+      return { kind: "day", day: meta?.day ?? this.ctx.days[0] ?? this.ctx.view.range.startDay };
+    }
+    const day = parseDay(section.dataset.date ?? "");
+    return day === null ? null : { kind: "day", day };
   }
   getScroll() {
     return { top: this.scroller.scrollTop, left: 0 };
@@ -1343,14 +1470,231 @@ var ListView = class {
     this.scroller.scrollTop = s.top;
   }
   elementsFor(id) {
-    return [...this.pools.values()].flatMap((p) => p.elementsFor(id));
+    const pools = [...this.pools.values(), ...this.lead ? [this.lead.pool] : []];
+    return pools.flatMap((p) => p.elementsFor(id));
   }
   destroy() {
+    const { win, opts } = this.ctx;
+    win.removeEventListener("scroll", this.onScroll, { capture: true });
+    if (this.frame !== null) win.cancelAnimationFrame(this.frame);
+    this.loader?.disconnect();
+    if (this.lead) opts.listLeadWillUnmount?.({ el: this.lead.slot });
+    this.lead?.pool.clear();
     for (const p of this.pools.values()) p.clear();
     this.el.remove();
   }
 };
 
+// src/dom/views/strip.ts
+var SWIPE_PX = 40;
+var DateStrip = class {
+  constructor(ctx, pick, focus, onShown) {
+    this.ctx = ctx;
+    this.pick = pick;
+    this.onShown = onShown;
+    const { doc, text } = ctx;
+    this.focus = focus;
+    this.shown = startOfWeek(focus, ctx.firstDay);
+    this.el = h(doc, "div", "tnc-strip");
+    const head = h(doc, "div", "tnc-strip-head");
+    this.title = h(doc, "button", "tnc-strip-title", { type: "button", "aria-expanded": "false" });
+    this.title.addEventListener("click", () => this.setExpanded(!this.expanded));
+    const prev = h(doc, "button", "tnc-strip-nav tnc-strip-prev", { type: "button", "aria-label": text.prev, title: text.prev }, "\u2039");
+    const next = h(doc, "button", "tnc-strip-nav tnc-strip-next", { type: "button", "aria-label": text.next, title: text.next }, "\u203A");
+    prev.addEventListener("click", () => this.step(-1));
+    next.addEventListener("click", () => this.step(1));
+    this.todayBtn = h(doc, "button", "tnc-strip-today", { type: "button" }, text.today);
+    this.todayBtn.addEventListener("click", (ev) => this.pick(ctx.today, ev));
+    this.slot = h(doc, "div", "tnc-strip-slot", { "data-tnc-no-drag": "" });
+    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));
+    this.el.append(head, this.dows, this.grid, handle);
+    this.grid.addEventListener("click", this.onClick);
+    this.grid.addEventListener("keydown", this.onKeyDown);
+    this.el.addEventListener("pointerdown", this.onPointerDown);
+    this.el.addEventListener("pointerup", this.onPointerUp);
+    this.el.addEventListener("pointercancel", this.onPointerCancel);
+    this.el.addEventListener("click", this.onClickCapture, true);
+    this.draw();
+    ctx.opts.stripSlotDidMount?.({ el: this.slot });
+  }
+  ctx;
+  pick;
+  onShown;
+  el;
+  title;
+  dows;
+  grid;
+  slot;
+  todayBtn;
+  /** Day at the top of the list. */
+  focus;
+  /** First day of the week shown, or the month shown when expanded. */
+  shown;
+  target = null;
+  /** Days tinted as on screen besides the focus (a time grid's range). */
+  range = null;
+  shownKey = "";
+  swipe = null;
+  swallowClick = false;
+  expanded = false;
+  /** The list scrolled or the grid moved: mark the day and keep it in view. */
+  setFocus(day, range = this.range) {
+    const sameRange = range?.start === this.range?.start && range?.end === this.range?.end;
+    if (day === this.focus && sameRange) return;
+    this.range = range;
+    if (day !== this.focus) {
+      this.focus = day;
+      if (!this.expanded) this.shown = startOfWeek(day, this.ctx.firstDay);
+      else if (startOfMonth(day) !== this.shown) this.shown = startOfMonth(day);
+    }
+    this.draw();
+  }
+  /** Publishes the strip's height as `--tnc-strip-h`, for what sticks below it. */
+  measure() {
+    this.el.parentElement?.style.setProperty("--tnc-strip-h", `${this.el.offsetHeight}px`);
+  }
+  /** First day and end (exclusive) of the days on show. */
+  window() {
+    const days = this.days();
+    return { start: days[0], end: days[days.length - 1] + 1 };
+  }
+  setExpanded(on) {
+    if (on === this.expanded) return;
+    this.expanded = on;
+    this.shown = on ? startOfMonth(this.focus) : startOfWeek(this.focus, this.ctx.firstDay);
+    this.draw();
+  }
+  /** Highlights the day a dragged item would land on. */
+  markTarget(day) {
+    if (day === this.target) return;
+    this.target = day;
+    for (const cell of this.grid.querySelectorAll(".tnc-strip-day"))
+      cell.classList.toggle("is-drop-target", day !== null && cell.dataset.date === this.ctx.dayArg(day).dateStr);
+  }
+  dayAt(el) {
+    const cell = el.closest(".tnc-strip-day");
+    return cell && this.grid.contains(cell) ? parseDay(cell.dataset.date ?? "") : null;
+  }
+  step(dir) {
+    this.shown = this.expanded ? addMonths(this.shown, dir) : this.shown + 7 * dir;
+    this.draw();
+  }
+  days() {
+    if (!this.expanded) return Array.from({ length: 7 }, (_, i) => this.shown + i);
+    const first = startOfWeek(this.shown, this.ctx.firstDay);
+    const end = addMonths(this.shown, 1);
+    const weeks = Math.ceil((end - first) / 7);
+    return Array.from({ length: weeks * 7 }, (_, i) => first + i);
+  }
+  /** Redraws the cells; also called on every list render to refresh the dots. */
+  draw() {
+    const { ctx } = this;
+    const { doc, fmt, store } = ctx;
+    const days = this.days();
+    const titleDay = this.expanded ? this.shown : days.includes(this.focus) ? this.focus : this.shown + 3;
+    this.title.replaceChildren(fmt.monthYear(titleDay), h(doc, "span", "tnc-strip-caret", { "aria-hidden": "true" }));
+    this.title.setAttribute("aria-expanded", String(this.expanded));
+    this.el.classList.toggle("is-expanded", this.expanded);
+    this.todayBtn.hidden = this.focus === ctx.today;
+    this.dows.replaceChildren(...days.slice(0, 7).map((d) => h(doc, "span", null, null, fmt.weekdayNarrow(d))));
+    const focused = this.grid.contains(doc.activeElement) ? doc.activeElement.dataset.date : void 0;
+    const month = ymdOfDay(this.shown).month;
+    const tabDay = days.includes(this.focus) ? this.focus : days[0];
+    const cells = days.map((d) => {
+      const arg = ctx.dayArg(d);
+      const count = store.inRange(d, d + 1).filter((n) => n.item.display !== "background" && n.item.display !== "none").length;
+      const first = ymdOfDay(d).day === 1 && d !== days[0] && !this.expanded;
+      const label = fmt.longDate(d);
+      const cell = h(
+        doc,
+        "button",
+        [
+          "tnc-strip-day",
+          ...ctx.dayClasses(d),
+          d === this.focus ? "is-focus" : "",
+          d !== this.focus && this.range && d >= this.range.start && d < this.range.end ? "is-in-range" : "",
+          count ? "has-items" : "",
+          this.expanded && ymdOfDay(d).month !== month ? "is-other-month" : "",
+          d === this.target ? "is-drop-target" : ""
+        ].filter(Boolean).join(" "),
+        {
+          type: "button",
+          "data-date": arg.dateStr,
+          "aria-label": count ? `${label}, ${ctx.text.itemCount(count)}` : label,
+          "aria-pressed": String(d === this.focus),
+          tabindex: d === tabDay ? "0" : "-1"
+        }
+      );
+      if (first) cell.append(h(doc, "span", "tnc-strip-month", { "aria-hidden": "true" }, fmt.monthShort(d)));
+      cell.append(h(doc, "span", "tnc-strip-num", null, fmt.dayNumber(d)), h(doc, "span", "tnc-strip-dot", { "aria-hidden": "true" }));
+      return cell;
+    });
+    this.grid.replaceChildren(...cells);
+    this.grid.setAttribute("aria-label", fmt.monthYear(titleDay));
+    if (focused) this.grid.querySelector(`[data-date="${focused}"]`)?.focus({ preventScroll: true });
+    const key = `${days[0]}:${days.length}`;
+    if (key !== this.shownKey) {
+      this.shownKey = key;
+      this.onShown();
+    }
+  }
+  onClick = (ev) => {
+    const day = this.dayAt(ev.target);
+    if (day === null) return;
+    if (this.expanded) this.setExpanded(false);
+    this.pick(day, ev);
+  };
+  onKeyDown = (ev) => {
+    const day = this.dayAt(ev.target);
+    if (day === null) return;
+    const move = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[ev.key];
+    if (move === void 0) return;
+    ev.preventDefault();
+    const next = day + move;
+    const days = this.days();
+    if (next < days[0] || next > days[days.length - 1]) {
+      this.shown = this.expanded ? startOfMonth(next) : startOfWeek(next, this.ctx.firstDay);
+      this.draw();
+    }
+    const cell = this.grid.querySelector(`[data-date="${this.ctx.dayArg(next).dateStr}"]`);
+    if (!cell) return;
+    for (const c of this.grid.querySelectorAll("[tabindex='0']")) c.setAttribute("tabindex", "-1");
+    cell.setAttribute("tabindex", "0");
+    cell.focus();
+  };
+  onPointerDown = (ev) => {
+    if (ev.button !== 0 || this.ctx.draggingId) return;
+    this.swipe = { id: ev.pointerId, x: ev.clientX, y: ev.clientY };
+  };
+  onPointerUp = (ev) => {
+    const s = this.swipe;
+    this.swipe = null;
+    if (!s || s.id !== ev.pointerId) return;
+    const dx = ev.clientX - s.x;
+    if (Math.abs(dx) < SWIPE_PX || Math.abs(dx) < Math.abs(ev.clientY - s.y)) return;
+    this.swallowClick = true;
+    this.step(dx < 0 ? 1 : -1);
+  };
+  onPointerCancel = () => {
+    this.swipe = null;
+  };
+  /** A swipe that ends on a day is not a pick. */
+  onClickCapture = (ev) => {
+    if (!this.swallowClick) return;
+    this.swallowClick = false;
+    ev.stopPropagation();
+    ev.preventDefault();
+  };
+  destroy() {
+    this.ctx.opts.stripSlotWillUnmount?.({ el: this.slot });
+    this.el.remove();
+  }
+};
+
 // src/dom/views/timegrid.ts
 var BAR_GAP2 = 2;
 var TimeGridView = class {
@@ -2487,6 +2831,7 @@ ${this.ctx.text.more(items.length - 8)}` : ""}` : label;
 
 // src/dom/calendar.ts
 var EXTERNAL_ID = "__tnc_external__";
+var MAX_AGENDA_DAYS = 366;
 function sameOption(a, b, depth = 0) {
   if (a === b) return true;
   if (typeof a === "function" && typeof b === "function") return true;
@@ -2555,10 +2900,15 @@ var Calendar = class {
   slot = { min: 0, max: MINUTES_PER_DAY, duration: 30, snap: 30, scroll: 480 };
   draggingId = null;
   dragRow = null;
+  strip = null;
+  stripSize = null;
+  rebuilding = false;
   toolbarEl;
   viewHost;
   current = null;
   anchor = 0;
+  /** End of an agenda list grown past its `listDayCount`. */
+  listEnd = null;
   session = null;
   selection = null;
   suppressClick = false;
@@ -2751,6 +3101,10 @@ var Calendar = class {
     if (!p) return;
     const day = p.kind === "day" ? p.day : dayOf(p.ms, this.zone);
     const ms = p.kind === "day" ? toInstant(p.day, 0, this.zone) : p.ms;
+    if (this.agendaList()) {
+      this.showListDay(day);
+      return;
+    }
     const { startDay, endDay } = this.view.range;
     if (day < startDay || day >= endDay) {
       this.anchor = day;
@@ -2762,7 +3116,7 @@ var Calendar = class {
   }
   /** What is under a client point: a time slot, a day, or a timeline row and date. Null outside the view. */
   hitTest(clientX, clientY) {
-    return this.current?.hit(clientX, clientY) ?? null;
+    return this.hitAt(clientX, clientY);
   }
   /** Item elements currently rendered for an id. */
   elementsFor(id) {
@@ -2804,6 +3158,9 @@ var Calendar = class {
     this.unbindEvents();
     this.current?.destroy();
     this.current = null;
+    this.stripSize?.disconnect();
+    this.strip?.destroy();
+    this.strip = null;
     this.root.remove();
   }
   /* ========================================================== view context */
@@ -2834,7 +3191,8 @@ var Calendar = class {
     return out;
   }
   isEditable(n, what) {
-    if (n.id === EXTERNAL_ID || this.opts.view === "list" || this.opts.view === "year") return false;
+    if (n.id === EXTERNAL_ID || this.opts.view === "year") return false;
+    if (this.opts.view === "list" && (!this.opts.listAgenda || what === "duration")) return false;
     const it = n.item;
     const base = it.editable ?? this.opts.editable;
     const specific = what === "start" ? it.startEditable : it.durationEditable;
@@ -3031,7 +3389,8 @@ var Calendar = class {
       }
       case "list": {
         const s = this.opts.listStart === "week" ? startOfWeek(a, this.firstDay) : a;
-        return { startDay: s, endDay: s + Math.max(1, listDayCount) };
+        const end = s + Math.max(1, listDayCount);
+        return { startDay: s, endDay: this.opts.listAgenda && this.listEnd !== null ? Math.max(end, this.listEnd) : end };
       }
       case "month": {
         const s = startOfWeek(startOfMonth(a), this.firstDay);
@@ -3069,6 +3428,33 @@ var Calendar = class {
     const duration = Math.max(1, parseDurationMinutes(this.opts.slotDuration, 30));
     const snap = Math.max(1, parseDurationMinutes(this.opts.snapDuration ?? null, duration));
     this.slot = { min, max, duration, snap, scroll: parseDurationMinutes(this.opts.scrollTime, 480) };
+    if (navigated) this.listEnd = null;
+    const prev = this.view;
+    this.applyRange();
+    this.conflicts = dependencyConflicts(this.store);
+    this.root.className = "tnc";
+    this.root.classList.add(`tnc--${this.opts.view}`, `tnc--height-${this.opts.height}`);
+    if (!this.opts.timeGrid) this.root.classList.add("tnc--no-time-grid");
+    this.renderToolbar();
+    this.rebuilding = true;
+    this.syncStrip(navigated);
+    this.rebuilding = false;
+    this.view.dataRange = this.dataRangeFor(this.view.range);
+    const rangeChanged = rangeMoved(prev, this.view);
+    this.current?.destroy();
+    this.current = this.createView();
+    this.viewHost.replaceChildren(this.current.el);
+    this.current.render(null);
+    if (keep && this.current instanceof TimelineView) {
+      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);
+    if (rangeChanged) this.opts.onRangeChange?.(this.view);
+  }
+  /** Sets the visible days and view info from the anchor. */
+  applyRange() {
     const { startDay, endDay } = this.computeRange();
     const hidden = new Set(this.opts.hiddenDays);
     if (!this.opts.weekends) {
@@ -3085,26 +3471,100 @@ var Calendar = class {
       start: new Date(toInstant(startDay, 0, this.zone)),
       end: new Date(toInstant(endDay, 0, this.zone))
     };
-    const prevView = this.view;
-    this.view = { type: this.opts.view, range, anchor: this.anchor, title: "" };
+    this.view = { type: this.opts.view, range, anchor: this.anchor, title: "", dataRange: this.dataRangeFor(range) };
     this.view.title = this.computeTitle(startDay, endDay);
-    this.conflicts = dependencyConflicts(this.store);
-    this.root.className = "tnc";
-    this.root.classList.add(`tnc--${this.opts.view}`, `tnc--height-${this.opts.height}`);
-    if (!this.opts.timeGrid) this.root.classList.add("tnc--no-time-grid");
-    this.renderToolbar();
-    this.current?.destroy();
-    this.current = this.createView();
-    this.viewHost.replaceChildren(this.current.el);
-    this.current.render(null);
-    if (keep && this.current instanceof TimelineView) {
-      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);
-    const rangeChanged = !prevView || prevView.type !== this.view.type || prevView.range.startDay !== startDay || prevView.range.endDay !== endDay;
-    if (rangeChanged) this.opts.onRangeChange?.(this.view);
+  }
+  /** 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)) };
+  }
+  /** Adds, updates or removes the date strip for the current view. */
+  syncStrip(navigated) {
+    const { view, listAgenda, dateStrip } = this.opts;
+    const list = view === "list";
+    const want = list ? listAgenda : dateStrip && (view === "day" || view === "days" || view === "week");
+    if (!want) {
+      if (!this.strip) return;
+      this.stripSize?.disconnect();
+      this.stripSize = null;
+      this.strip.destroy();
+      this.strip = null;
+      this.root.style.removeProperty("--tnc-strip-h");
+      return;
+    }
+    this.root.classList.add("tnc--has-strip");
+    const { startDay, endDay } = this.view.range;
+    if (!this.strip) {
+      const strip = new DateStrip(this, (day, ev) => this.pickStripDay(day, ev), startDay, () => this.stripShown());
+      this.strip = strip;
+      this.root.insertBefore(strip.el, this.viewHost);
+      const RO = this.win.ResizeObserver;
+      if (RO) {
+        this.stripSize = new RO(() => strip.measure());
+        this.stripSize.observe(strip.el);
+      }
+    }
+    if (!list) this.strip.setFocus(startDay, { start: startDay, end: endDay });
+    else if (navigated) this.strip.setFocus(startDay, null);
+    this.strip.draw();
+  }
+  pickStripDay(day, ev) {
+    this.dateClick(day, ev);
+    if (this.agendaList()) {
+      this.showListDay(day);
+      return;
+    }
+    const { startDay, endDay } = this.view.range;
+    if (this.opts.view === "week" && day >= startDay && day < endDay) return;
+    this.anchor = day;
+    this.rebuild(true);
+  }
+  /** The strip moved to other days: load theirs too. */
+  stripShown() {
+    if (!this.strip || this.rebuilding || !this.view) return;
+    const next = this.dataRangeFor(this.view.range);
+    if (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 strip = this.strip;
+    if (strip) {
+      const el = this.doc.elementFromPoint(x, y);
+      const day = el ? strip.dayAt(el) : null;
+      strip.markTarget(day !== null && this.draggingId ? day : null);
+      if (day !== null) return { kind: "day", day };
+    }
+    return this.current?.hit(x, y) ?? null;
+  }
+  agendaList() {
+    return this.opts.view === "list" && this.opts.listAgenda && this.current instanceof ListView ? this.current : null;
+  }
+  extendList(endDay) {
+    if (!this.agendaList()) return;
+    const { startDay, endDay: current } = this.view.range;
+    const end = Math.min(endDay, startDay + MAX_AGENDA_DAYS);
+    if (end <= current) return;
+    this.listEnd = end;
+    this.applyRange();
+    this.current?.render(null);
+    this.strip?.draw();
+    this.opts.onRangeChange?.(this.view);
+  }
+  showListDay(day) {
+    if (!this.agendaList()) return;
+    if (day < this.view.range.startDay || day - this.view.range.startDay >= MAX_AGENDA_DAYS) {
+      this.anchor = day;
+      this.rebuild(true);
+    }
+    this.extendList(day + 2 * Math.max(7, this.opts.listDayCount));
+    this.agendaList()?.scrollToDay(day);
+  }
+  dateClick(day, jsEvent) {
+    this.clickSlot({ kind: "day", day }, jsEvent, true);
   }
   createView() {
     switch (this.opts.view) {
@@ -3407,8 +3867,9 @@ var Calendar = class {
     };
     this.session = s;
     if (touch && itemEl?.classList.contains("is-draggable")) {
-      const el = itemEl.closest(".tnc-tg-scroll, .tnc-dg-scroll, .tnc-tl-scroll, .tnc-list-scroll, .tnc-year-scroll");
-      if (el) s.pan = { el, left: el.scrollLeft, top: el.scrollTop, active: false };
+      const x = scrollerOf(itemEl, "x");
+      const y = scrollerOf(itemEl, "y");
+      s.pan = { x, y, left: x?.scrollLeft ?? 0, top: y?.scrollTop ?? 0, active: false };
     }
     if (touch) {
       s.timer = this.win.setTimeout(() => {
@@ -3449,8 +3910,8 @@ var Calendar = class {
           if (!pan.active && s.timer !== null) this.win.clearTimeout(s.timer);
           s.timer = null;
           pan.active = true;
-          pan.el.scrollLeft = pan.left - (ev.clientX - s.x0);
-          pan.el.scrollTop = pan.top - (ev.clientY - s.y0);
+          if (pan.x) pan.x.scrollLeft = pan.left - (ev.clientX - s.x0);
+          if (pan.y) pan.y.scrollTop = pan.top - (ev.clientY - s.y0);
         } else if (dist > 8) this.endSession(null, true);
         return;
       }
@@ -3488,7 +3949,7 @@ var Calendar = class {
   };
   /** Proposal for the current pointer position. */
   track(s, ev) {
-    const hit = this.current?.hit(ev.clientX, ev.clientY) ?? null;
+    const hit = this.hitAt(ev.clientX, ev.clientY);
     if (s.mode === "external") {
       this.trackExternal(s, hit);
       return;
@@ -3614,7 +4075,7 @@ var Calendar = class {
       return this.dayProposal(hit.day, hit.day + this.opts.defaultAllDayDays);
     }
     if (hit.kind === "day") {
-      const dd = hit.day - (grab.kind === "day" ? grab.day : hit.day);
+      const dd = hit.day - (grab.kind === "timeline" ? hit.day : grab.day);
       if (o.allDay) return this.dayProposal(o.startDay + dd, o.startDay + dd + days);
       const startMs2 = this.civilToMs(this.civil(o.startMs) + dd * MINUTES_PER_DAY);
       const endMs = this.civilToMs(this.civil(o.endMs) + dd * MINUTES_PER_DAY);
@@ -3749,6 +4210,7 @@ var Calendar = class {
     this.draggingId = null;
     this.dragRow = null;
     if (draggedId) for (const el of this.elementsFor(draggedId)) el.classList.remove("is-dragging");
+    this.strip?.markTarget(null);
     if (!s.active) return;
     if (s.mode === "select") {
       if (cancel) this.unselectSilently();
@@ -4035,6 +4497,19 @@ var Calendar = class {
     });
   };
 };
+function scrollerOf(el, axis) {
+  const doc = el.ownerDocument;
+  const win = doc.defaultView;
+  for (let p = el.parentElement; p && p !== doc.body && p !== doc.documentElement; p = p.parentElement) {
+    const overflow = win?.getComputedStyle(p)[axis === "x" ? "overflowX" : "overflowY"] ?? "";
+    const room = axis === "x" ? p.scrollWidth > p.clientWidth : p.scrollHeight > p.clientHeight;
+    if (room && /auto|scroll|overlay/.test(overflow)) return p;
+  }
+  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;
+}
 
 // src/react/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");