@tasknotes/calendar 0.1.3 → 0.1.4

package/dist/cjs/react.cjs

@@ -709,6 +709,9 @@ function defaultOptions() {
     listDayCount: 7,
     listStart: "date",
     listAgenda: false,
+    dateStrip: false,
+    listLeadTitle: null,
+    listAddText: null,
     monthDisplay: "full",
     timeZone: "local",
     locale: void 0,
@@ -759,6 +762,9 @@ var LAYOUT_KEYS = /* @__PURE__ */ new Set([
   "listDayCount",
   "listStart",
   "listAgenda",
+  "dateStrip",
+  "listLeadTitle",
+  "listAddText",
   "monthDisplay",
   "timeZone",
   "locale",
@@ -1248,12 +1254,244 @@ var DayGridView = class {
   }
 };
 
+// src/dom/views/list.ts
+var LOAD_AHEAD = "0px 0px 600px 0px";
+var ListView = class {
+  constructor(ctx) {
+    this.ctx = ctx;
+    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);
+    const seen = new Set(out.map((n) => n.id));
+    for (const n of store.timedOn(day)) if (!seen.has(n.id)) out.push(n);
+    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, 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) {
+      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 = opts.dayHeaderContent?.(arg);
+        const label = custom ?? ctx.fmt.longDate(day);
+        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);
+      }
+      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);
+      }
+      prev = section;
+    }
+    for (const [day, section] of this.sections) {
+      if (keep.has(day)) continue;
+      this.pools.get(day)?.clear();
+      this.pools.delete(day);
+      section.remove();
+      this.sections.delete(day);
+    }
+    this.renderLead(leadItems);
+    let empty = this.body.querySelector(":scope > .tnc-list-empty");
+    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) {
+    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 };
+  }
+  setScroll(s) {
+    this.scroller.scrollTop = s.top;
+  }
+  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) {
+  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);
@@ -1265,8 +1503,10 @@ var DateStrip = class {
     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, prev, next, this.slot);
+    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" });
@@ -1283,27 +1523,45 @@ var DateStrip = class {
   }
   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: mark its top day and keep it in view. */
-  setFocus(day) {
-    if (day === this.focus) return;
-    this.focus = day;
-    if (!this.expanded) this.shown = startOfWeek(day, this.ctx.firstDay);
-    else if (startOfMonth(day) !== this.shown) this.shown = startOfMonth(day);
+  /** 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;
@@ -1341,6 +1599,7 @@ var DateStrip = class {
     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;
@@ -1357,6 +1616,7 @@ var DateStrip = class {
           "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" : ""
@@ -1376,6 +1636,11 @@ var DateStrip = class {
     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);
@@ -1430,205 +1695,6 @@ var DateStrip = class {
   }
 };
 
-// src/dom/views/list.ts
-var LOAD_AHEAD = "0px 0px 600px 0px";
-var ListView = class {
-  constructor(ctx) {
-    this.ctx = ctx;
-    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);
-    if (!opts.listAgenda) return;
-    this.el.classList.add("tnc-list--agenda");
-    this.strip = new DateStrip(ctx, (day, ev) => this.pick(day, ev), ctx.view.range.startDay);
-    this.el.prepend(this.strip.el);
-    this.sentinel = h(doc, "div", "tnc-list-more", { "aria-hidden": "true" });
-    this.scroller.append(this.sentinel);
-    const globals = win;
-    const IO = globals.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 }
-      );
-    }
-    const RO = globals.ResizeObserver;
-    if (RO) {
-      const strip = this.strip.el;
-      this.stripSize = new RO(() => this.el.style.setProperty("--tnc-strip-h", `${strip.offsetHeight}px`));
-      this.stripSize.observe(strip);
-    }
-    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;
-  pools = /* @__PURE__ */ new Map();
-  sections = /* @__PURE__ */ new Map();
-  strip = null;
-  sentinel = null;
-  loader = null;
-  stripSize = 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);
-    const seen = new Set(out.map((n) => n.id));
-    for (const n of store.timedOn(day)) if (!seen.has(n.id)) out.push(n);
-    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 agenda = !!this.strip;
-    const keep = /* @__PURE__ */ new Set();
-    let prev = null;
-    for (const day of days) {
-      const items = this.itemsOn(day);
-      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 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);
-        this.sections.set(day, section);
-        this.pools.set(day, pool);
-      }
-      section.classList.toggle("is-empty", !items.length);
-      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);
-      }
-      if (prev ? prev.nextSibling !== section : this.body.firstChild !== section) {
-        if (prev) prev.after(section);
-        else this.body.prepend(section);
-      }
-      prev = section;
-    }
-    for (const [day, section] of this.sections) {
-      if (keep.has(day)) continue;
-      this.pools.get(day)?.clear();
-      this.pools.delete(day);
-      section.remove();
-      this.sections.delete(day);
-    }
-    let empty = this.body.querySelector(":scope > .tnc-list-empty");
-    if (!keep.size) {
-      if (!empty) {
-        empty = h(doc, "div", "tnc-list-empty", { role: "listitem" }, ctx.text.noItems);
-        this.body.append(empty);
-      }
-    } else empty?.remove();
-    this.strip?.draw();
-    if (this.loader && this.sentinel) {
-      this.loader.unobserve(this.sentinel);
-      this.loader.observe(this.sentinel);
-    }
-  }
-  /** A strip day: the host hears of it, and the list brings it to the top. */
-  pick(day, ev) {
-    this.ctx.dateClick(day, ev);
-    this.ctx.showListDay(day);
-  }
-  /** Brings a day's section to the top, under the strip. */
-  scrollToDay(day) {
-    const section = this.sections.get(day);
-    if (!section) return;
-    if (this.strip) this.el.style.setProperty("--tnc-strip-h", `${this.strip.el.offsetHeight}px`);
-    section.scrollIntoView({ block: "start" });
-    this.strip?.setFocus(day);
-    this.pinned = true;
-  }
-  fold = () => {
-    this.pinned = false;
-    if (this.strip?.expanded) this.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() {
-    if (!this.strip || this.pinned) return;
-    const edge = this.strip.el.getBoundingClientRect().bottom + 1;
-    for (const day of this.ctx.days) {
-      const section = this.sections.get(day);
-      if (section && section.getBoundingClientRect().bottom > edge) {
-        this.strip.setFocus(day);
-        return;
-      }
-    }
-  }
-  showSelection(_sel) {
-  }
-  hit(x, y) {
-    const el = this.ctx.doc.elementFromPoint(x, y);
-    const stripDay = el && this.strip ? this.strip.dayAt(el) : null;
-    this.strip?.markTarget(stripDay !== null && this.ctx.draggingId ? stripDay : null);
-    if (stripDay !== null) return { kind: "day", day: stripDay };
-    const section = el?.closest(".tnc-list-section");
-    const day = section && this.body.contains(section) ? parseDay(section.dataset.date ?? "") : null;
-    return day === null ? null : { kind: "day", day };
-  }
-  dragEnded() {
-    this.strip?.markTarget(null);
-  }
-  getScroll() {
-    return { top: this.scroller.scrollTop, left: 0 };
-  }
-  setScroll(s) {
-    this.scroller.scrollTop = s.top;
-  }
-  elementsFor(id) {
-    return [...this.pools.values()].flatMap((p) => p.elementsFor(id));
-  }
-  destroy() {
-    const { win } = this.ctx;
-    win.removeEventListener("scroll", this.onScroll, { capture: true });
-    if (this.frame !== null) win.cancelAnimationFrame(this.frame);
-    this.loader?.disconnect();
-    this.stripSize?.disconnect();
-    this.strip?.destroy();
-    for (const p of this.pools.values()) p.clear();
-    this.el.remove();
-  }
-};
-
 // src/dom/views/timegrid.ts
 var BAR_GAP2 = 2;
 var TimeGridView = class {
@@ -2834,6 +2900,9 @@ 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;
@@ -3047,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) {
@@ -3089,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 */
@@ -3357,12 +3429,18 @@ var Calendar = class {
     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 rangeChanged = this.applyRange();
+    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);
@@ -3375,7 +3453,7 @@ var Calendar = class {
     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; true when the range moved. */
+  /** Sets the visible days and view info from the anchor. */
   applyRange() {
     const { startDay, endDay } = this.computeRange();
     const hidden = new Set(this.opts.hiddenDays);
@@ -3393,10 +3471,74 @@ 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);
-    return !prevView || prevView.type !== this.view.type || prevView.range.startDay !== startDay || prevView.range.endDay !== endDay;
+  }
+  /** 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;
@@ -3409,6 +3551,7 @@ var Calendar = class {
     this.listEnd = end;
     this.applyRange();
     this.current?.render(null);
+    this.strip?.draw();
     this.opts.onRangeChange?.(this.view);
   }
   showListDay(day) {
@@ -3806,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;
@@ -3932,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);
@@ -4067,7 +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.current?.dragEnded?.();
+    this.strip?.markTarget(null);
     if (!s.active) return;
     if (s.mode === "select") {
       if (cancel) this.unselectSilently();
@@ -4364,6 +4507,9 @@ 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;
+}
 
 // src/react/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");