@tasknotes/calendar 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 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,6 +32,8 @@
 	--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;
@@ -462,6 +464,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 +571,6 @@
 	position: relative;
 }
 .tnc-gutter {
-	position: relative;
 	border-right: 1px solid var(--tnc-line);
 }
 .tnc-slot-label {

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);
   }

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);
   }

package/dist/esm/{chunk-UWCSL5AN.js → chunk-6RRDNLZM.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);
   }

package/dist/esm/index.js

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

package/dist/esm/react.js

@@ -1,6 +1,6 @@
 import {
   Calendar
-} from "./chunk-UWCSL5AN.js";
+} from "./chunk-6RRDNLZM.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.1",
 	"description": "Task-native calendar engine for TaskNotes: incremental layout, time grid, month, list, year and timeline views.",
 	"license": "MIT",
 	"type": "module",