@tasknotes/calendar 0.1.2 → 0.1.3

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

@@ -283,6 +283,14 @@ 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;
     /**
      * 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 +401,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 agenda 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. */
+    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,7 +1,12 @@
+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, a date strip follows the day at the top, and more days
+ * load as the list nears its end.
+ */
 export declare class ListView<D> implements View {
     private readonly ctx;
     readonly el: HTMLElement;
@@ -9,11 +14,27 @@ export declare class ListView<D> implements View {
     private readonly body;
     private pools;
     private sections;
+    private readonly strip;
+    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. */
+    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;
+    dragEnded(): void;
     getScroll(): {
         top: number;
         left: number;

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

@@ -1,7 +1,12 @@
+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, a date strip follows the day at the top, and more days
+ * load as the list nears its end.
+ */
 export declare class ListView<D> implements View {
     private readonly ctx;
     readonly el: HTMLElement;
@@ -9,11 +14,27 @@ export declare class ListView<D> implements View {
     private readonly body;
     private pools;
     private sections;
+    private readonly strip;
+    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. */
+    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;
+    dragEnded(): void;
     getScroll(): {
         top: number;
         left: number;

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

@@ -0,0 +1,43 @@
+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).
+ */
+export declare class DateStrip<D> {
+    private readonly ctx;
+    private readonly pick;
+    readonly el: HTMLElement;
+    private readonly title;
+    private readonly dows;
+    private readonly grid;
+    private readonly slot;
+    /** 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;
+    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;
+    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,43 @@
+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).
+ */
+export declare class DateStrip<D> {
+    private readonly ctx;
+    private readonly pick;
+    readonly el: HTMLElement;
+    private readonly title;
+    private readonly dows;
+    private readonly grid;
+    private readonly slot;
+    /** 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;
+    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;
+    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.3",
 	"description": "Task-native calendar engine for TaskNotes: incremental layout, time grid, month, list, year and timeline views.",
 	"license": "MIT",
 	"type": "module",