@tasknotes/calendar 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.1.2
+
+### Changed
+
+- Year views narrower than 520px (phones, sidebars) show two compact months a row. Days are shaded by how busy they are, with no dots, and any day with items is visibly shaded.
+
+### Fixed
+
+- Clicking or tapping a day in the year view reports it through `onDateClick`. Before, only Enter or Space on a focused day did.
+- The calendar keeps its sticky headers and popovers in its own stacking context, so host overlays such as side sheets and dialogs draw above the week header and all-day row.
+
+## 0.1.1
+
+### Fixed
+
+- Calendars moved into another window after creation (e.g. Obsidian "Move to new window") rebind their listeners, timers and observers to that window, so dragging, selection and resizing keep working. `adopt()` is also public for hosts that move a calendar programmatically.
+- Time-grid day columns keep a minimum width (`--tnc-col-min`, 64px); narrow containers scroll sideways with the time axis pinned instead of crushing week views on phones.
+
 ## 0.1.0
 
 Initial public release.

package/dist/calendar.css

@@ -32,12 +32,16 @@
 	--tnc-dot-size: 8px;
 	--tnc-dot-gap: 3px;
 	--tnc-gutter-w: 52px;
+	/* Narrowest a time-grid day column gets; narrower containers scroll sideways. */
+	--tnc-col-min: 64px;
 	--tnc-weeknum-w: 32px;
 	--tnc-dg-top-h: 24px;
 	--tnc-day-min-h: 92px;
 	--tnc-item-c: var(--tnc-accent);
 
 	position: relative;
+	/* Keep the calendar's own layers (sticky headers, popovers) below host overlays. */
+	isolation: isolate;
 	display: flex;
 	flex-direction: column;
 	min-height: 0;
@@ -462,6 +466,18 @@
 	display: grid;
 	grid-template-columns: var(--tnc-cols);
 }
+.tnc-tg-top,
+.tnc-tg-body {
+	min-width: calc(var(--tnc-gutter-w) + var(--tnc-ncols, 1) * var(--tnc-col-min));
+}
+.tnc-gutter-head,
+.tnc-gutter-label,
+.tnc-gutter {
+	position: sticky;
+	left: 0;
+	z-index: 6;
+	background: var(--tnc-surface);
+}
 .tnc-gutter-head {
 	display: flex;
 	align-items: flex-end;
@@ -557,7 +573,6 @@
 	position: relative;
 }
 .tnc-gutter {
-	position: relative;
 	border-right: 1px solid var(--tnc-line);
 }
 .tnc-slot-label {
@@ -865,6 +880,8 @@
 	display: flex;
 	flex-direction: column;
 	min-height: 0;
+	/* Narrow calendars (phones, sidebars) use the compact year below. */
+	container-type: inline-size;
 }
 .tnc-year-scroll {
 	flex: 1 1 auto;
@@ -935,6 +952,35 @@
 	background: var(--tnc-c, var(--tnc-accent));
 }
 
+/* Two months a row: each day is a shaded square, and its count is in its label. */
+@container (max-width: 520px) {
+	.tnc-year-scroll {
+		padding: 8px 4px;
+	}
+	.tnc-year-grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 14px 12px;
+	}
+	.tnc-ym-title {
+		font-size: 12px;
+		padding-bottom: 4px;
+	}
+	.tnc-ym-days {
+		gap: 1px;
+	}
+	.tnc-ym-day {
+		border-radius: 4px;
+		font-size: 10px;
+	}
+	/* Without dots, one item must still read as busy. */
+	.tnc-ym-day.has-items {
+		background: color-mix(in srgb, var(--tnc-accent) calc((0.3 + var(--tnc-heat) * 0.7) * 50%), transparent);
+	}
+	.tnc-ym-dots {
+		display: none;
+	}
+}
+
 /* -------------------------------------------------------------- timeline */
 .tnc-tl {
 	display: flex;

package/dist/cjs/index.cjs

@@ -1515,8 +1515,9 @@ var TimeGridView = class {
     const { ctx } = this;
     const { doc, opts, days, today } = ctx;
     this.weights = days.map((d) => d === today && opts.todayWidth > 1 && days.length > 1 ? opts.todayWidth : 1);
-    const tpl = `var(--tnc-gutter-w) ${this.weights.map((w) => `minmax(0, ${w}fr)`).join(" ")}`;
+    const tpl = `var(--tnc-gutter-w) ${this.weights.map((w) => `minmax(var(--tnc-col-min), ${w}fr)`).join(" ")}`;
     this.el.style.setProperty("--tnc-cols", tpl);
+    this.el.style.setProperty("--tnc-ncols", String(days.length));
     const gutterHead = h(doc, "div", "tnc-gutter-head", { role: "columnheader" });
     if (opts.weekNumbers && days[0] !== void 0) gutterHead.textContent = ctx.text.weekNumber(isoWeekNumber(days[0]));
     this.headRow.replaceChildren(gutterHead);
@@ -2624,13 +2625,10 @@ var Calendar = class {
     this.bindEvents();
     this.rebuild(true);
     this.scheduleTick();
-    const RO = this.win.ResizeObserver;
-    if (RO) {
-      this.resizeObs = new RO(() => this.current?.resize?.());
-      this.resizeObs.observe(this.root);
-    }
+    this.observeResize();
   }
   host;
+  /** The document/window the calendar currently lives in; see `adopt()`. */
   doc;
   win;
   root;
@@ -2663,6 +2661,37 @@ var Calendar = class {
   destroyed = false;
   pendingChange = null;
   frame = null;
+  observeResize() {
+    this.resizeObs?.disconnect();
+    const RO = this.win.ResizeObserver;
+    if (RO) {
+      this.resizeObs = new RO(() => this.current?.resize?.());
+      this.resizeObs.observe(this.root);
+    }
+  }
+  onAdoptCheck = () => {
+    this.adopt();
+  };
+  /**
+   * Hosts may move a live calendar into another window (e.g. Obsidian's
+   * "Move to new window"). Listeners, timers and observers belong to a window,
+   * so rebind them to the root's current document and rebuild the view there.
+   */
+  adopt() {
+    const doc = this.root.ownerDocument;
+    if (this.destroyed || doc === this.doc || this.session) return;
+    const old = this.win;
+    if (this.timer !== null) old.clearTimeout(this.timer);
+    if (this.frame !== null) old.cancelAnimationFrame(this.frame);
+    this.timer = this.frame = null;
+    this.doc.removeEventListener("pointerdown", this.onDocPointerDown, true);
+    this.doc = doc;
+    this.win = doc.defaultView ?? old;
+    this.doc.addEventListener("pointerdown", this.onDocPointerDown, true);
+    this.observeResize();
+    this.rebuild(false);
+    this.scheduleTick();
+  }
   /* ================================================================ public */
   /** Replaces all items, re-rendering only what changed. */
   setItems(items) {
@@ -3227,6 +3256,7 @@ var Calendar = class {
   applyChange(change) {
     if (!change.added.length && !change.updated.length && !change.removed.length && !change.days.size && !change.spans) return;
     this.conflicts = dependencyConflicts(this.store);
+    this.adopt();
     this.pendingChange = this.pendingChange ? this.merge(this.pendingChange, change) : change;
     if (this.session?.active) {
       this.flush();
@@ -3387,6 +3417,8 @@ var Calendar = class {
     r.addEventListener("dragleave", this.onNativeDragLeave);
     r.addEventListener("drop", this.onNativeDrop);
     r.addEventListener("touchmove", this.onTouchMove, { passive: false });
+    r.addEventListener("pointerover", this.onAdoptCheck);
+    r.addEventListener("focusin", this.onAdoptCheck);
     this.doc.addEventListener("pointerdown", this.onDocPointerDown, true);
   }
   unbindEvents() {
@@ -3403,6 +3435,8 @@ var Calendar = class {
     r.removeEventListener("dragleave", this.onNativeDragLeave);
     r.removeEventListener("drop", this.onNativeDrop);
     r.removeEventListener("touchmove", this.onTouchMove);
+    r.removeEventListener("pointerover", this.onAdoptCheck);
+    r.removeEventListener("focusin", this.onAdoptCheck);
     this.doc.removeEventListener("pointerdown", this.onDocPointerDown, true);
     this.listenDoc(false);
   }
@@ -3900,6 +3934,12 @@ var Calendar = class {
     ev.preventDefault();
   };
   onClick = (ev) => {
+    const yearDay = ev.target.closest?.(".tnc-ym-day");
+    if (yearDay && this.root.contains(yearDay)) {
+      const day = parseDay(yearDay.dataset.date ?? "");
+      if (day !== null) this.clickSlot({ kind: "day", day }, ev, true);
+      return;
+    }
     const el = this.itemElFrom(ev.target);
     if (!el || ev.target.closest(".tnc-resize, .tnc-port")) return;
     const meta = this.meta.get(el);
@@ -3959,7 +3999,7 @@ var Calendar = class {
       return;
     }
     const target = ev.target;
-    if ((ev.key === "Enter" || ev.key === " ") && target.matches(".tnc-ym-day, .tnc-dg-day[tabindex]")) {
+    if ((ev.key === "Enter" || ev.key === " ") && target.matches(".tnc-dg-day[tabindex]")) {
       const day = parseDay(target.dataset.date ?? "");
       if (day !== null) {
         ev.preventDefault();

package/dist/cjs/react.cjs

@@ -1423,8 +1423,9 @@ var TimeGridView = class {
     const { ctx } = this;
     const { doc, opts, days, today } = ctx;
     this.weights = days.map((d) => d === today && opts.todayWidth > 1 && days.length > 1 ? opts.todayWidth : 1);
-    const tpl = `var(--tnc-gutter-w) ${this.weights.map((w) => `minmax(0, ${w}fr)`).join(" ")}`;
+    const tpl = `var(--tnc-gutter-w) ${this.weights.map((w) => `minmax(var(--tnc-col-min), ${w}fr)`).join(" ")}`;
     this.el.style.setProperty("--tnc-cols", tpl);
+    this.el.style.setProperty("--tnc-ncols", String(days.length));
     const gutterHead = h(doc, "div", "tnc-gutter-head", { role: "columnheader" });
     if (opts.weekNumbers && days[0] !== void 0) gutterHead.textContent = ctx.text.weekNumber(isoWeekNumber(days[0]));
     this.headRow.replaceChildren(gutterHead);
@@ -2532,13 +2533,10 @@ var Calendar = class {
     this.bindEvents();
     this.rebuild(true);
     this.scheduleTick();
-    const RO = this.win.ResizeObserver;
-    if (RO) {
-      this.resizeObs = new RO(() => this.current?.resize?.());
-      this.resizeObs.observe(this.root);
-    }
+    this.observeResize();
   }
   host;
+  /** The document/window the calendar currently lives in; see `adopt()`. */
   doc;
   win;
   root;
@@ -2571,6 +2569,37 @@ var Calendar = class {
   destroyed = false;
   pendingChange = null;
   frame = null;
+  observeResize() {
+    this.resizeObs?.disconnect();
+    const RO = this.win.ResizeObserver;
+    if (RO) {
+      this.resizeObs = new RO(() => this.current?.resize?.());
+      this.resizeObs.observe(this.root);
+    }
+  }
+  onAdoptCheck = () => {
+    this.adopt();
+  };
+  /**
+   * Hosts may move a live calendar into another window (e.g. Obsidian's
+   * "Move to new window"). Listeners, timers and observers belong to a window,
+   * so rebind them to the root's current document and rebuild the view there.
+   */
+  adopt() {
+    const doc = this.root.ownerDocument;
+    if (this.destroyed || doc === this.doc || this.session) return;
+    const old = this.win;
+    if (this.timer !== null) old.clearTimeout(this.timer);
+    if (this.frame !== null) old.cancelAnimationFrame(this.frame);
+    this.timer = this.frame = null;
+    this.doc.removeEventListener("pointerdown", this.onDocPointerDown, true);
+    this.doc = doc;
+    this.win = doc.defaultView ?? old;
+    this.doc.addEventListener("pointerdown", this.onDocPointerDown, true);
+    this.observeResize();
+    this.rebuild(false);
+    this.scheduleTick();
+  }
   /* ================================================================ public */
   /** Replaces all items, re-rendering only what changed. */
   setItems(items) {
@@ -3135,6 +3164,7 @@ var Calendar = class {
   applyChange(change) {
     if (!change.added.length && !change.updated.length && !change.removed.length && !change.days.size && !change.spans) return;
     this.conflicts = dependencyConflicts(this.store);
+    this.adopt();
     this.pendingChange = this.pendingChange ? this.merge(this.pendingChange, change) : change;
     if (this.session?.active) {
       this.flush();
@@ -3295,6 +3325,8 @@ var Calendar = class {
     r.addEventListener("dragleave", this.onNativeDragLeave);
     r.addEventListener("drop", this.onNativeDrop);
     r.addEventListener("touchmove", this.onTouchMove, { passive: false });
+    r.addEventListener("pointerover", this.onAdoptCheck);
+    r.addEventListener("focusin", this.onAdoptCheck);
     this.doc.addEventListener("pointerdown", this.onDocPointerDown, true);
   }
   unbindEvents() {
@@ -3311,6 +3343,8 @@ var Calendar = class {
     r.removeEventListener("dragleave", this.onNativeDragLeave);
     r.removeEventListener("drop", this.onNativeDrop);
     r.removeEventListener("touchmove", this.onTouchMove);
+    r.removeEventListener("pointerover", this.onAdoptCheck);
+    r.removeEventListener("focusin", this.onAdoptCheck);
     this.doc.removeEventListener("pointerdown", this.onDocPointerDown, true);
     this.listenDoc(false);
   }
@@ -3808,6 +3842,12 @@ var Calendar = class {
     ev.preventDefault();
   };
   onClick = (ev) => {
+    const yearDay = ev.target.closest?.(".tnc-ym-day");
+    if (yearDay && this.root.contains(yearDay)) {
+      const day = parseDay(yearDay.dataset.date ?? "");
+      if (day !== null) this.clickSlot({ kind: "day", day }, ev, true);
+      return;
+    }
     const el = this.itemElFrom(ev.target);
     if (!el || ev.target.closest(".tnc-resize, .tnc-port")) return;
     const meta = this.meta.get(el);
@@ -3867,7 +3907,7 @@ var Calendar = class {
       return;
     }
     const target = ev.target;
-    if ((ev.key === "Enter" || ev.key === " ") && target.matches(".tnc-ym-day, .tnc-dg-day[tabindex]")) {
+    if ((ev.key === "Enter" || ev.key === " ") && target.matches(".tnc-dg-day[tabindex]")) {
       const day = parseDay(target.dataset.date ?? "");
       if (day !== null) {
         ev.preventDefault();

package/dist/esm/{chunk-UWCSL5AN.js → chunk-ZJQMMA6W.js}

@@ -817,8 +817,9 @@ var TimeGridView = class {
     const { ctx } = this;
     const { doc, opts, days, today } = ctx;
     this.weights = days.map((d) => d === today && opts.todayWidth > 1 && days.length > 1 ? opts.todayWidth : 1);
-    const tpl = `var(--tnc-gutter-w) ${this.weights.map((w) => `minmax(0, ${w}fr)`).join(" ")}`;
+    const tpl = `var(--tnc-gutter-w) ${this.weights.map((w) => `minmax(var(--tnc-col-min), ${w}fr)`).join(" ")}`;
     this.el.style.setProperty("--tnc-cols", tpl);
+    this.el.style.setProperty("--tnc-ncols", String(days.length));
     const gutterHead = h(doc, "div", "tnc-gutter-head", { role: "columnheader" });
     if (opts.weekNumbers && days[0] !== void 0) gutterHead.textContent = ctx.text.weekNumber(isoWeekNumber(days[0]));
     this.headRow.replaceChildren(gutterHead);
@@ -1926,13 +1927,10 @@ var Calendar = class {
     this.bindEvents();
     this.rebuild(true);
     this.scheduleTick();
-    const RO = this.win.ResizeObserver;
-    if (RO) {
-      this.resizeObs = new RO(() => this.current?.resize?.());
-      this.resizeObs.observe(this.root);
-    }
+    this.observeResize();
   }
   host;
+  /** The document/window the calendar currently lives in; see `adopt()`. */
   doc;
   win;
   root;
@@ -1965,6 +1963,37 @@ var Calendar = class {
   destroyed = false;
   pendingChange = null;
   frame = null;
+  observeResize() {
+    this.resizeObs?.disconnect();
+    const RO = this.win.ResizeObserver;
+    if (RO) {
+      this.resizeObs = new RO(() => this.current?.resize?.());
+      this.resizeObs.observe(this.root);
+    }
+  }
+  onAdoptCheck = () => {
+    this.adopt();
+  };
+  /**
+   * Hosts may move a live calendar into another window (e.g. Obsidian's
+   * "Move to new window"). Listeners, timers and observers belong to a window,
+   * so rebind them to the root's current document and rebuild the view there.
+   */
+  adopt() {
+    const doc = this.root.ownerDocument;
+    if (this.destroyed || doc === this.doc || this.session) return;
+    const old = this.win;
+    if (this.timer !== null) old.clearTimeout(this.timer);
+    if (this.frame !== null) old.cancelAnimationFrame(this.frame);
+    this.timer = this.frame = null;
+    this.doc.removeEventListener("pointerdown", this.onDocPointerDown, true);
+    this.doc = doc;
+    this.win = doc.defaultView ?? old;
+    this.doc.addEventListener("pointerdown", this.onDocPointerDown, true);
+    this.observeResize();
+    this.rebuild(false);
+    this.scheduleTick();
+  }
   /* ================================================================ public */
   /** Replaces all items, re-rendering only what changed. */
   setItems(items) {
@@ -2529,6 +2558,7 @@ var Calendar = class {
   applyChange(change) {
     if (!change.added.length && !change.updated.length && !change.removed.length && !change.days.size && !change.spans) return;
     this.conflicts = dependencyConflicts(this.store);
+    this.adopt();
     this.pendingChange = this.pendingChange ? this.merge(this.pendingChange, change) : change;
     if (this.session?.active) {
       this.flush();
@@ -2689,6 +2719,8 @@ var Calendar = class {
     r.addEventListener("dragleave", this.onNativeDragLeave);
     r.addEventListener("drop", this.onNativeDrop);
     r.addEventListener("touchmove", this.onTouchMove, { passive: false });
+    r.addEventListener("pointerover", this.onAdoptCheck);
+    r.addEventListener("focusin", this.onAdoptCheck);
     this.doc.addEventListener("pointerdown", this.onDocPointerDown, true);
   }
   unbindEvents() {
@@ -2705,6 +2737,8 @@ var Calendar = class {
     r.removeEventListener("dragleave", this.onNativeDragLeave);
     r.removeEventListener("drop", this.onNativeDrop);
     r.removeEventListener("touchmove", this.onTouchMove);
+    r.removeEventListener("pointerover", this.onAdoptCheck);
+    r.removeEventListener("focusin", this.onAdoptCheck);
     this.doc.removeEventListener("pointerdown", this.onDocPointerDown, true);
     this.listenDoc(false);
   }
@@ -3202,6 +3236,12 @@ var Calendar = class {
     ev.preventDefault();
   };
   onClick = (ev) => {
+    const yearDay = ev.target.closest?.(".tnc-ym-day");
+    if (yearDay && this.root.contains(yearDay)) {
+      const day = parseDay(yearDay.dataset.date ?? "");
+      if (day !== null) this.clickSlot({ kind: "day", day }, ev, true);
+      return;
+    }
     const el = this.itemElFrom(ev.target);
     if (!el || ev.target.closest(".tnc-resize, .tnc-port")) return;
     const meta = this.meta.get(el);
@@ -3261,7 +3301,7 @@ var Calendar = class {
       return;
     }
     const target = ev.target;
-    if ((ev.key === "Enter" || ev.key === " ") && target.matches(".tnc-ym-day, .tnc-dg-day[tabindex]")) {
+    if ((ev.key === "Enter" || ev.key === " ") && target.matches(".tnc-dg-day[tabindex]")) {
       const day = parseDay(target.dataset.date ?? "");
       if (day !== null) {
         ev.preventDefault();

package/dist/esm/index.js

@@ -7,7 +7,7 @@ import {
   TIMELINE_UNIT_DAYS,
   defaultOptions,
   localeFirstDay
-} from "./chunk-UWCSL5AN.js";
+} from "./chunk-ZJQMMA6W.js";
 import {
   DAY_MS,
   ItemStore,

package/dist/esm/react.js

@@ -1,6 +1,6 @@
 import {
   Calendar
-} from "./chunk-UWCSL5AN.js";
+} from "./chunk-ZJQMMA6W.js";
 import "./chunk-DVMZ5OXN.js";
 
 // src/react/index.tsx

package/dist/types/dom/calendar.d.cts

@@ -12,8 +12,9 @@ import { type CalendarOptions, type CalendarText, type DayArg, type ExternalDrag
  */
 export declare class Calendar<D = unknown> implements ViewContext<D> {
     readonly host: HTMLElement;
-    readonly doc: Document;
-    readonly win: Window;
+    /** The document/window the calendar currently lives in; see `adopt()`. */
+    doc: Document;
+    win: Window;
     readonly root: HTMLElement;
     readonly store: ItemStore<D>;
     readonly meta: WeakMap<Element, ElMeta<D>>;
@@ -54,6 +55,14 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
     private pendingChange;
     private frame;
     constructor(host: HTMLElement, options?: Partial<CalendarOptions<D>>, items?: Iterable<CalendarItem<D>>);
+    private observeResize;
+    private readonly onAdoptCheck;
+    /**
+     * Hosts may move a live calendar into another window (e.g. Obsidian's
+     * "Move to new window"). Listeners, timers and observers belong to a window,
+     * so rebind them to the root's current document and rebuild the view there.
+     */
+    adopt(): void;
     /** Replaces all items, re-rendering only what changed. */
     setItems(items: Iterable<CalendarItem<D>>): void;
     upsertItems(items: Iterable<CalendarItem<D>>): void;

package/dist/types/dom/calendar.d.ts

@@ -12,8 +12,9 @@ import { type CalendarOptions, type CalendarText, type DayArg, type ExternalDrag
  */
 export declare class Calendar<D = unknown> implements ViewContext<D> {
     readonly host: HTMLElement;
-    readonly doc: Document;
-    readonly win: Window;
+    /** The document/window the calendar currently lives in; see `adopt()`. */
+    doc: Document;
+    win: Window;
     readonly root: HTMLElement;
     readonly store: ItemStore<D>;
     readonly meta: WeakMap<Element, ElMeta<D>>;
@@ -54,6 +55,14 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
     private pendingChange;
     private frame;
     constructor(host: HTMLElement, options?: Partial<CalendarOptions<D>>, items?: Iterable<CalendarItem<D>>);
+    private observeResize;
+    private readonly onAdoptCheck;
+    /**
+     * Hosts may move a live calendar into another window (e.g. Obsidian's
+     * "Move to new window"). Listeners, timers and observers belong to a window,
+     * so rebind them to the root's current document and rebuild the view there.
+     */
+    adopt(): void;
     /** Replaces all items, re-rendering only what changed. */
     setItems(items: Iterable<CalendarItem<D>>): void;
     upsertItems(items: Iterable<CalendarItem<D>>): void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tasknotes/calendar",
-	"version": "0.1.0",
+	"version": "0.1.2",
 	"description": "Task-native calendar engine for TaskNotes: incremental layout, time grid, month, list, year and timeline views.",
 	"license": "MIT",
 	"type": "module",