@tasknotes/calendar 0.1.2 → 0.1.4

package/dist/esm/index.js

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

package/dist/esm/react.js

@@ -1,6 +1,6 @@
 import {
   Calendar
-} from "./chunk-ZJQMMA6W.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,10 +41,15 @@ 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;
     private anchor;
+    /** End of an agenda list grown past its `listDayCount`. */
+    private listEnd;
     private session;
     private selection;
     private suppressClick;
@@ -147,6 +153,21 @@ 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. */
+    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;
+    dateClick(day: Day, jsEvent: MouseEvent | KeyboardEvent): void;
     private createView;
     private renderToolbar;
     private applyChange;

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,10 +41,15 @@ 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;
     private anchor;
+    /** End of an agenda list grown past its `listDayCount`. */
+    private listEnd;
     private session;
     private selection;
     private suppressClick;
@@ -147,6 +153,21 @@ 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. */
+    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;
+    dateClick(day: Day, jsEvent: MouseEvent | KeyboardEvent): void;
     private createView;
     private renderToolbar;
     private applyChange;

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,6 +71,14 @@ export interface ViewContext<D = unknown> {
         id: string;
         rowId: string;
     } | null;
+    /** 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. */
+    showListDay(day: Day): void;
 }
 export interface View {
     readonly el: HTMLElement;

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,6 +71,14 @@ export interface ViewContext<D = unknown> {
         id: string;
         rowId: string;
     } | null;
+    /** 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. */
+    showListDay(day: Day): void;
 }
 export interface View {
     readonly el: HTMLElement;

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 = {
@@ -283,6 +289,39 @@ export interface CalendarOptions<D = unknown> {
      * start of its week ("week", like FullCalendar's stock `listWeek`).
      */
     listStart: "date" | "week";
+    /**
+     * Turns the "list" view into a phone-style agenda: a date strip (one week,
+     * or the month when expanded) above a list of every day, empty ones
+     * included, that loads more days as it nears its end. The strip marks the
+     * day at the top of the list, picking a day scrolls to it, and items
+     * 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
@@ -393,6 +432,17 @@ export interface CalendarOptions<D = unknown> {
     listItemContent?: (arg: ItemArg<D>) => Node | null | undefined;
     dayHeaderContent?: (arg: DayArg) => Node | string | null | undefined;
     dayHeaderDidMount?: (arg: DayHeaderArg) => void;
+    /**
+     * 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 date strip's slot is about to be removed. */
+    stripSlotWillUnmount?: (arg: {
+        el: HTMLElement;
+    }) => void;
     dayClassNames?: (arg: DayArg) => string[] | string | undefined;
 }
 export declare const DEFAULT_TEXT: CalendarText;

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 = {
@@ -283,6 +289,39 @@ export interface CalendarOptions<D = unknown> {
      * start of its week ("week", like FullCalendar's stock `listWeek`).
      */
     listStart: "date" | "week";
+    /**
+     * Turns the "list" view into a phone-style agenda: a date strip (one week,
+     * or the month when expanded) above a list of every day, empty ones
+     * included, that loads more days as it nears its end. The strip marks the
+     * day at the top of the list, picking a day scrolls to it, and items
+     * 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
@@ -393,6 +432,17 @@ export interface CalendarOptions<D = unknown> {
     listItemContent?: (arg: ItemArg<D>) => Node | null | undefined;
     dayHeaderContent?: (arg: DayArg) => Node | string | null | undefined;
     dayHeaderDidMount?: (arg: DayHeaderArg) => void;
+    /**
+     * 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 date strip's slot is about to be removed. */
+    stripSlotWillUnmount?: (arg: {
+        el: HTMLElement;
+    }) => void;
     dayClassNames?: (arg: DayArg) => string[] | string | undefined;
 }
 export declare const DEFAULT_TEXT: CalendarText;

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

@@ -1,19 +1,42 @@
+import { type Day } from "../../core/date.cjs";
 import type { StoreChange } from "../../core/store.cjs";
 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. */
+/**
+ * N-day agenda: one section per day that has items. With `listAgenda`, every
+ * 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 lead;
+    private readonly sentinel;
+    private readonly loader;
+    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;
+    /** 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;
+    /** Marks the first day not hidden under the strip. */
+    private followTop;
     showSelection(_sel: Selection | null): void;
-    hit(_x: number, _y: number): Hit | null;
+    hit(x: number, y: number): Hit | null;
     getScroll(): {
         top: number;
         left: number;

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

@@ -1,19 +1,42 @@
+import { type Day } from "../../core/date.js";
 import type { StoreChange } from "../../core/store.js";
 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. */
+/**
+ * N-day agenda: one section per day that has items. With `listAgenda`, every
+ * 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 lead;
+    private readonly sentinel;
+    private readonly loader;
+    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;
+    /** 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;
+    /** Marks the first day not hidden under the strip. */
+    private followTop;
     showSelection(_sel: Selection | null): void;
-    hit(_x: number, _y: number): Hit | null;
+    hit(x: number, y: number): Hit | null;
     getScroll(): {
         top: number;
         left: number;

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

@@ -0,0 +1,63 @@
+import { type Day } from "../../core/date.cjs";
+import type { ViewContext } from "../context.cjs";
+/**
+ * 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, 
+    /** 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;
+    dayAt(el: Element): Day | null;
+    private step;
+    private days;
+    /** Redraws the cells; also called on every list render to refresh the dots. */
+    draw(): void;
+    private readonly onClick;
+    private readonly onKeyDown;
+    private readonly onPointerDown;
+    private readonly onPointerUp;
+    private readonly onPointerCancel;
+    /** A swipe that ends on a day is not a pick. */
+    private readonly onClickCapture;
+    destroy(): void;
+}

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

@@ -0,0 +1,63 @@
+import { type Day } from "../../core/date.js";
+import type { ViewContext } from "../context.js";
+/**
+ * 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, 
+    /** 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;
+    dayAt(el: Element): Day | null;
+    private step;
+    private days;
+    /** Redraws the cells; also called on every list render to refresh the dots. */
+    draw(): void;
+    private readonly onClick;
+    private readonly onKeyDown;
+    private readonly onPointerDown;
+    private readonly onPointerUp;
+    private readonly onPointerCancel;
+    /** A swipe that ends on a day is not a pick. */
+    private readonly onClickCapture;
+    destroy(): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tasknotes/calendar",
-	"version": "0.1.2",
+	"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",