@tasknotes/calendar 0.1.2 → 0.1.3

package/dist/cjs/react.cjs

@@ -708,6 +708,7 @@ function defaultOptions() {
     dayCount: 3,
     listDayCount: 7,
     listStart: "date",
+    listAgenda: false,
     monthDisplay: "full",
     timeZone: "local",
     locale: void 0,
@@ -757,6 +758,7 @@ var LAYOUT_KEYS = /* @__PURE__ */ new Set([
   "dayCount",
   "listDayCount",
   "listStart",
+  "listAgenda",
   "monthDisplay",
   "timeZone",
   "locale",
@@ -1246,15 +1248,225 @@ var DayGridView = class {
   }
 };
 
+// src/dom/views/strip.ts
+var SWIPE_PX = 40;
+var DateStrip = class {
+  constructor(ctx, pick, focus) {
+    this.ctx = ctx;
+    this.pick = pick;
+    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.slot = h(doc, "div", "tnc-strip-slot", { "data-tnc-no-drag": "" });
+    head.append(this.title, 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;
+  el;
+  title;
+  dows;
+  grid;
+  slot;
+  /** Day at the top of the list. */
+  focus;
+  /** First day of the week shown, or the month shown when expanded. */
+  shown;
+  target = null;
+  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);
+    this.draw();
+  }
+  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.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" : "",
+          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 });
+  }
+  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/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);
+    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;
@@ -1262,6 +1474,13 @@ var ListView = class {
   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);
@@ -1272,11 +1491,12 @@ var ListView = class {
   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) continue;
+      if (!items.length && !agenda) continue;
       keep.add(day);
       let section = this.sections.get(day);
       let pool = this.pools.get(day);
@@ -1293,6 +1513,7 @@ var ListView = class {
         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, {
@@ -1330,11 +1551,62 @@ var ListView = class {
         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) {
-    return null;
+  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 };
@@ -1346,6 +1618,12 @@ var ListView = class {
     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();
   }
@@ -2487,6 +2765,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;
@@ -2559,6 +2838,8 @@ var Calendar = class {
   viewHost;
   current = null;
   anchor = 0;
+  /** End of an agenda list grown past its `listDayCount`. */
+  listEnd = null;
   session = null;
   selection = null;
   suppressClick = false;
@@ -2751,6 +3032,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;
@@ -2834,7 +3119,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 +3317,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 +3356,27 @@ 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 rangeChanged = 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.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; true when the range moved. */
+  applyRange() {
     const { startDay, endDay } = this.computeRange();
     const hidden = new Set(this.opts.hiddenDays);
     if (!this.opts.weekends) {
@@ -3088,23 +3396,32 @@ var Calendar = class {
     const prevView = this.view;
     this.view = { type: this.opts.view, range, anchor: this.anchor, title: "" };
     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);
+    return !prevView || prevView.type !== this.view.type || prevView.range.startDay !== startDay || prevView.range.endDay !== endDay;
+  }
+  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.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 +3724,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 +3767,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;
       }
@@ -3749,6 +4067,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?.();
     if (!s.active) return;
     if (s.mode === "select") {
       if (cancel) this.unselectSilently();
@@ -4035,6 +4354,16 @@ 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;
+}
 
 // src/react/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");