@tasknotes/calendar 0.1.3 → 0.1.4

package/dist/esm/index.js

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

package/dist/esm/react.js

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

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

@@ -6,6 +6,7 @@ import { type TimeZone } from "../core/zone.cjs";
 import { type ElMeta, type ViewContext } from "./context.cjs";
 import { Formatter } from "./format.cjs";
 import { type CalendarOptions, type CalendarText, type DayArg, type ExternalDragSource, type Hit, type TimelineAnchor, type ViewInfo, type ViewType } from "./options.cjs";
+import { DateStrip } from "./views/strip.cjs";
 /**
  * A calendar bound to one element. Works in any document, including Obsidian
  * popout windows: all listeners, timers and observers use the element's window.
@@ -40,6 +41,9 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
         id: string;
         rowId: string;
     } | null;
+    strip: DateStrip<D> | null;
+    private stripSize;
+    private rebuilding;
     private readonly toolbarEl;
     private readonly viewHost;
     private current;
@@ -149,8 +153,17 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
     private computeRange;
     private computeTitle;
     private rebuild;
-    /** 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. */
     private applyRange;
+    /** The range, run on to the end of the strip's days so their dots are right. */
+    private dataRangeFor;
+    /** Adds, updates or removes the date strip for the current view. */
+    private syncStrip;
+    private pickStripDay;
+    /** The strip moved to other days: load theirs too. */
+    private stripShown;
+    /** What is under a point, the date strip included. */
+    private hitAt;
     private agendaList;
     extendList(endDay: Day): void;
     showListDay(day: Day): void;

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

@@ -6,6 +6,7 @@ import { type TimeZone } from "../core/zone.js";
 import { type ElMeta, type ViewContext } from "./context.js";
 import { Formatter } from "./format.js";
 import { type CalendarOptions, type CalendarText, type DayArg, type ExternalDragSource, type Hit, type TimelineAnchor, type ViewInfo, type ViewType } from "./options.js";
+import { DateStrip } from "./views/strip.js";
 /**
  * A calendar bound to one element. Works in any document, including Obsidian
  * popout windows: all listeners, timers and observers use the element's window.
@@ -40,6 +41,9 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
         id: string;
         rowId: string;
     } | null;
+    strip: DateStrip<D> | null;
+    private stripSize;
+    private rebuilding;
     private readonly toolbarEl;
     private readonly viewHost;
     private current;
@@ -149,8 +153,17 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
     private computeRange;
     private computeTitle;
     private rebuild;
-    /** 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. */
     private applyRange;
+    /** The range, run on to the end of the strip's days so their dots are right. */
+    private dataRangeFor;
+    /** Adds, updates or removes the date strip for the current view. */
+    private syncStrip;
+    private pickStripDay;
+    /** The strip moved to other days: load theirs too. */
+    private stripShown;
+    /** What is under a point, the date strip included. */
+    private hitAt;
     private agendaList;
     extendList(endDay: Day): void;
     showListDay(day: Day): void;

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

@@ -5,6 +5,7 @@ import type { NormalizedItem } from "../core/types.cjs";
 import type { TimeZone } from "../core/zone.cjs";
 import type { Formatter } from "./format.cjs";
 import type { CalendarOptions, CalendarText, DayArg, Hit, ItemVariant, ViewInfo } from "./options.cjs";
+import type { DateStrip } from "./views/strip.cjs";
 export type Variant = ItemVariant;
 export interface ElMeta<D = unknown> {
     n: NormalizedItem<D>;
@@ -70,8 +71,10 @@ export interface ViewContext<D = unknown> {
         id: string;
         rowId: string;
     } | null;
-    /** Reports a day picked outside the grid (year days, the agenda strip) through `onDateClick`. */
+    /** Reports a day picked outside the grid (year days) through `onDateClick`. */
     dateClick(day: Day, jsEvent: MouseEvent | KeyboardEvent): void;
+    /** The date strip, when the view has one. */
+    readonly strip: DateStrip<D> | null;
     /** Agenda lists: grows the range to end at `endDay`. */
     extendList(endDay: Day): void;
     /** Agenda lists: brings `day` to the top, moving the range to reach it. */
@@ -97,8 +100,6 @@ export interface View {
     scrollToTime?(minute: number): void;
     /** Item elements currently shown for an id. */
     elementsFor(id: string): HTMLElement[];
-    /** A drag ended, dropped or not. */
-    dragEnded?(): void;
     destroy(): void;
 }
 export declare class ItemPool<D> {

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

@@ -5,6 +5,7 @@ import type { NormalizedItem } from "../core/types.js";
 import type { TimeZone } from "../core/zone.js";
 import type { Formatter } from "./format.js";
 import type { CalendarOptions, CalendarText, DayArg, Hit, ItemVariant, ViewInfo } from "./options.js";
+import type { DateStrip } from "./views/strip.js";
 export type Variant = ItemVariant;
 export interface ElMeta<D = unknown> {
     n: NormalizedItem<D>;
@@ -70,8 +71,10 @@ export interface ViewContext<D = unknown> {
         id: string;
         rowId: string;
     } | null;
-    /** Reports a day picked outside the grid (year days, the agenda strip) through `onDateClick`. */
+    /** Reports a day picked outside the grid (year days) through `onDateClick`. */
     dateClick(day: Day, jsEvent: MouseEvent | KeyboardEvent): void;
+    /** The date strip, when the view has one. */
+    readonly strip: DateStrip<D> | null;
     /** Agenda lists: grows the range to end at `endDay`. */
     extendList(endDay: Day): void;
     /** Agenda lists: brings `day` to the top, moving the range to reach it. */
@@ -97,8 +100,6 @@ export interface View {
     scrollToTime?(minute: number): void;
     /** Item elements currently shown for an id. */
     elementsFor(id: string): HTMLElement[];
-    /** A drag ended, dropped or not. */
-    dragEnded?(): void;
     destroy(): void;
 }
 export declare class ItemPool<D> {

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

@@ -14,6 +14,12 @@ export interface ViewInfo {
     /** Anchor date the view was built around. */
     anchor: Day;
     title: string;
+    /**
+     * The days whose items the calendar can show: `range`, extended to the
+     * end of the days a date strip is showing so their dots are right. Load
+     * items for this range; `onRangeChange` fires when it changes too.
+     */
+    dataRange: DateRange;
 }
 /** Where a pointer is over the calendar. */
 export type Hit = {
@@ -291,6 +297,31 @@ export interface CalendarOptions<D = unknown> {
      * dragged onto a strip day or another day's section move there.
      */
     listAgenda: boolean;
+    /**
+     * Puts the agenda's date strip above the "day", "days" and "week" views
+     * too. Picking a strip day moves the grid to it, and items dragged onto a
+     * strip day move there at the same time.
+     */
+    dateStrip: boolean;
+    /**
+     * Agenda lists: a section above the first day, titled with this text, for
+     * items `listLeadIncludes` picks out (overdue work, say). Those items show
+     * there instead of under their day. Null for none.
+     */
+    listLeadTitle: string | null;
+    listLeadIncludes?: (item: CalendarItem<D>) => boolean;
+    /** The lead section's header has an empty slot for host controls (a "Reschedule" button, say). */
+    listLeadDidMount?: (arg: {
+        el: HTMLElement;
+    }) => void;
+    listLeadWillUnmount?: (arg: {
+        el: HTMLElement;
+    }) => void;
+    /** Agenda lists: an add row with this label under every day, reported through `onListAdd`. Null for none. */
+    listAddText: string | null;
+    onListAdd?: (arg: DayArg & {
+        jsEvent: MouseEvent | KeyboardEvent;
+    }) => void;
     /**
      * Month cells: "full" draws bars and titled entries; "dots" draws every
      * item as a small dot that wraps across the cell, with a "+N" count when
@@ -402,13 +433,13 @@ export interface CalendarOptions<D = unknown> {
     dayHeaderContent?: (arg: DayArg) => Node | string | null | undefined;
     dayHeaderDidMount?: (arg: DayHeaderArg) => void;
     /**
-     * The agenda strip's header has an empty slot after its arrows. Mount host
+     * The date strip's header has an empty slot after its arrows. Mount host
      * controls (a layout menu, say) into `el`; the calendar leaves it alone.
      */
     stripSlotDidMount?: (arg: {
         el: HTMLElement;
     }) => void;
-    /** The agenda strip's slot is about to be removed. */
+    /** The date strip's slot is about to be removed. */
     stripSlotWillUnmount?: (arg: {
         el: HTMLElement;
     }) => void;

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

@@ -14,6 +14,12 @@ export interface ViewInfo {
     /** Anchor date the view was built around. */
     anchor: Day;
     title: string;
+    /**
+     * The days whose items the calendar can show: `range`, extended to the
+     * end of the days a date strip is showing so their dots are right. Load
+     * items for this range; `onRangeChange` fires when it changes too.
+     */
+    dataRange: DateRange;
 }
 /** Where a pointer is over the calendar. */
 export type Hit = {
@@ -291,6 +297,31 @@ export interface CalendarOptions<D = unknown> {
      * dragged onto a strip day or another day's section move there.
      */
     listAgenda: boolean;
+    /**
+     * Puts the agenda's date strip above the "day", "days" and "week" views
+     * too. Picking a strip day moves the grid to it, and items dragged onto a
+     * strip day move there at the same time.
+     */
+    dateStrip: boolean;
+    /**
+     * Agenda lists: a section above the first day, titled with this text, for
+     * items `listLeadIncludes` picks out (overdue work, say). Those items show
+     * there instead of under their day. Null for none.
+     */
+    listLeadTitle: string | null;
+    listLeadIncludes?: (item: CalendarItem<D>) => boolean;
+    /** The lead section's header has an empty slot for host controls (a "Reschedule" button, say). */
+    listLeadDidMount?: (arg: {
+        el: HTMLElement;
+    }) => void;
+    listLeadWillUnmount?: (arg: {
+        el: HTMLElement;
+    }) => void;
+    /** Agenda lists: an add row with this label under every day, reported through `onListAdd`. Null for none. */
+    listAddText: string | null;
+    onListAdd?: (arg: DayArg & {
+        jsEvent: MouseEvent | KeyboardEvent;
+    }) => void;
     /**
      * Month cells: "full" draws bars and titled entries; "dots" draws every
      * item as a small dot that wraps across the cell, with a "+N" count when
@@ -402,13 +433,13 @@ export interface CalendarOptions<D = unknown> {
     dayHeaderContent?: (arg: DayArg) => Node | string | null | undefined;
     dayHeaderDidMount?: (arg: DayHeaderArg) => void;
     /**
-     * The agenda strip's header has an empty slot after its arrows. Mount host
+     * The date strip's header has an empty slot after its arrows. Mount host
      * controls (a layout menu, say) into `el`; the calendar leaves it alone.
      */
     stripSlotDidMount?: (arg: {
         el: HTMLElement;
     }) => void;
-    /** The agenda strip's slot is about to be removed. */
+    /** The date strip's slot is about to be removed. */
     stripSlotWillUnmount?: (arg: {
         el: HTMLElement;
     }) => void;

package/dist/types/dom/views/list.d.cts

@@ -4,29 +4,32 @@ import { type Selection, type View, type ViewContext } from "../context.cjs";
 import type { Hit } from "../options.cjs";
 /**
  * N-day agenda: one section per day that has items. With `listAgenda`, every
- * day gets a section, a date strip follows the day at the top, and more days
- * load as the list nears its end.
+ * day gets a section, the calendar's date strip follows the day at the top,
+ * and more days load as the list nears its end. A lead section above the
+ * first day can collect items such as overdue work.
  */
 export declare class ListView<D> implements View {
     private readonly ctx;
     readonly el: HTMLElement;
     private readonly scroller;
     private readonly body;
+    private readonly agenda;
     private pools;
     private sections;
-    private readonly strip;
+    private lead;
     private readonly sentinel;
     private readonly loader;
-    private readonly stripSize;
     private frame;
     /** A picked day stays marked until the list is scrolled by hand. */
     private pinned;
     constructor(ctx: ViewContext<D>);
     private itemsOn;
     render(_change: StoreChange | null): void;
-    /** A strip day: the host hears of it, and the list brings it to the top. */
-    private pick;
-    /** Brings a day's section to the top, under the strip. */
+    /** Places items in a pool, keeping DOM order equal to item order. */
+    private fill;
+    private renderLead;
+    private addRow;
+    /** Brings a day's section to the top, under the strip; the first day brings the lead section too. */
     scrollToDay(day: Day): void;
     private readonly fold;
     private readonly onScroll;
@@ -34,7 +37,6 @@ export declare class ListView<D> implements View {
     private followTop;
     showSelection(_sel: Selection | null): void;
     hit(x: number, y: number): Hit | null;
-    dragEnded(): void;
     getScroll(): {
         top: number;
         left: number;

package/dist/types/dom/views/list.d.ts

@@ -4,29 +4,32 @@ import { type Selection, type View, type ViewContext } from "../context.js";
 import type { Hit } from "../options.js";
 /**
  * N-day agenda: one section per day that has items. With `listAgenda`, every
- * day gets a section, a date strip follows the day at the top, and more days
- * load as the list nears its end.
+ * day gets a section, the calendar's date strip follows the day at the top,
+ * and more days load as the list nears its end. A lead section above the
+ * first day can collect items such as overdue work.
  */
 export declare class ListView<D> implements View {
     private readonly ctx;
     readonly el: HTMLElement;
     private readonly scroller;
     private readonly body;
+    private readonly agenda;
     private pools;
     private sections;
-    private readonly strip;
+    private lead;
     private readonly sentinel;
     private readonly loader;
-    private readonly stripSize;
     private frame;
     /** A picked day stays marked until the list is scrolled by hand. */
     private pinned;
     constructor(ctx: ViewContext<D>);
     private itemsOn;
     render(_change: StoreChange | null): void;
-    /** A strip day: the host hears of it, and the list brings it to the top. */
-    private pick;
-    /** Brings a day's section to the top, under the strip. */
+    /** Places items in a pool, keeping DOM order equal to item order. */
+    private fill;
+    private renderLead;
+    private addRow;
+    /** Brings a day's section to the top, under the strip; the first day brings the lead section too. */
     scrollToDay(day: Day): void;
     private readonly fold;
     private readonly onScroll;
@@ -34,7 +37,6 @@ export declare class ListView<D> implements View {
     private followTop;
     showSelection(_sel: Selection | null): void;
     hit(x: number, y: number): Hit | null;
-    dragEnded(): void;
     getScroll(): {
         top: number;
         left: number;

package/dist/types/dom/views/strip.d.cts

@@ -1,29 +1,49 @@
 import { type Day } from "../../core/date.cjs";
 import type { ViewContext } from "../context.cjs";
 /**
- * The agenda's date strip: one week, or the whole month when expanded. Days
- * with items carry a dot; the day at the top of the list is marked. Picking a
- * day hands it to the list, and swipes step a week (or a month).
+ * A date strip above the agenda or a time grid: one week, or the whole month
+ * when expanded. Days with items carry a dot; the focus day (the top of the
+ * list, or the grid's first day) is marked, and the rest of a grid's range is
+ * tinted. Picking a day hands it to the calendar, and swipes step a week (or
+ * a month).
  */
 export declare class DateStrip<D> {
     private readonly ctx;
     private readonly pick;
+    /** Called when the days on show change, so their items can be loaded. */
+    private readonly onShown;
     readonly el: HTMLElement;
     private readonly title;
     private readonly dows;
     private readonly grid;
     private readonly slot;
+    private readonly todayBtn;
     /** Day at the top of the list. */
     private focus;
     /** First day of the week shown, or the month shown when expanded. */
     private shown;
     private target;
+    /** Days tinted as on screen besides the focus (a time grid's range). */
+    private range;
+    private shownKey;
     private swipe;
     private swallowClick;
     expanded: boolean;
-    constructor(ctx: ViewContext<D>, pick: (day: Day, ev: MouseEvent | KeyboardEvent) => void, focus: Day);
-    /** The list scrolled: mark its top day and keep it in view. */
-    setFocus(day: Day): void;
+    constructor(ctx: ViewContext<D>, pick: (day: Day, ev: MouseEvent | KeyboardEvent) => void, focus: Day, 
+    /** Called when the days on show change, so their items can be loaded. */
+    onShown: () => void);
+    /** The list scrolled or the grid moved: mark the day and keep it in view. */
+    setFocus(day: Day, range?: {
+        start: Day;
+        end: Day;
+    } | null): void;
+    /** Publishes the strip's height as `--tnc-strip-h`, for what sticks below it. */
+    measure(): void;
+    /** First day and end (exclusive) of the days on show. */
+    window(): {
+        start: Day;
+        end: Day;
+    };
     setExpanded(on: boolean): void;
     /** Highlights the day a dragged item would land on. */
     markTarget(day: Day | null): void;

package/dist/types/dom/views/strip.d.ts

@@ -1,29 +1,49 @@
 import { type Day } from "../../core/date.js";
 import type { ViewContext } from "../context.js";
 /**
- * The agenda's date strip: one week, or the whole month when expanded. Days
- * with items carry a dot; the day at the top of the list is marked. Picking a
- * day hands it to the list, and swipes step a week (or a month).
+ * A date strip above the agenda or a time grid: one week, or the whole month
+ * when expanded. Days with items carry a dot; the focus day (the top of the
+ * list, or the grid's first day) is marked, and the rest of a grid's range is
+ * tinted. Picking a day hands it to the calendar, and swipes step a week (or
+ * a month).
  */
 export declare class DateStrip<D> {
     private readonly ctx;
     private readonly pick;
+    /** Called when the days on show change, so their items can be loaded. */
+    private readonly onShown;
     readonly el: HTMLElement;
     private readonly title;
     private readonly dows;
     private readonly grid;
     private readonly slot;
+    private readonly todayBtn;
     /** Day at the top of the list. */
     private focus;
     /** First day of the week shown, or the month shown when expanded. */
     private shown;
     private target;
+    /** Days tinted as on screen besides the focus (a time grid's range). */
+    private range;
+    private shownKey;
     private swipe;
     private swallowClick;
     expanded: boolean;
-    constructor(ctx: ViewContext<D>, pick: (day: Day, ev: MouseEvent | KeyboardEvent) => void, focus: Day);
-    /** The list scrolled: mark its top day and keep it in view. */
-    setFocus(day: Day): void;
+    constructor(ctx: ViewContext<D>, pick: (day: Day, ev: MouseEvent | KeyboardEvent) => void, focus: Day, 
+    /** Called when the days on show change, so their items can be loaded. */
+    onShown: () => void);
+    /** The list scrolled or the grid moved: mark the day and keep it in view. */
+    setFocus(day: Day, range?: {
+        start: Day;
+        end: Day;
+    } | null): void;
+    /** Publishes the strip's height as `--tnc-strip-h`, for what sticks below it. */
+    measure(): void;
+    /** First day and end (exclusive) of the days on show. */
+    window(): {
+        start: Day;
+        end: Day;
+    };
     setExpanded(on: boolean): void;
     /** Highlights the day a dragged item would land on. */
     markTarget(day: Day | null): void;

package/package.json

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