@tasknotes/calendar 0.1.7 → 0.1.10

package/dist/esm/index.js

@@ -7,7 +7,7 @@ import {
   TIMELINE_UNIT_DAYS,
   defaultOptions,
   localeFirstDay
-} from "./chunk-EDRCVOY7.js";
+} from "./chunk-5PHSJK36.js";
 import {
   DAY_MS,
   ItemStore,
@@ -91,6 +91,8 @@ var BASES_CALENDAR_DEFAULTS = {
   slotDuration: "00:30:00",
   snapDuration: "00:30:00",
   scrollTime: "08:00:00",
+  slotHeight: 24,
+  pinchZoom: true,
   nowIndicator: true,
   showTimeGrid: true,
   selectMirror: true,
@@ -155,6 +157,8 @@ function basesLayoutOptions(s, context = {}) {
     slotDuration,
     snapDuration: time("snapDuration") ?? slotDuration,
     scrollTime: time("scrollTime", 48) ?? d.scrollTime,
+    slotHeight: clamp(Math.round(num(s.slotHeight, d.slotHeight)), 5, 96),
+    pinchZoom: pick("pinchZoom") !== false,
     nowIndicator: pick("nowIndicator") !== false,
     timeGrid: showTimeGrid,
     selectMirror: pick("selectMirror") !== false,

package/dist/esm/react.js

@@ -1,6 +1,6 @@
 import {
   Calendar
-} from "./chunk-EDRCVOY7.js";
+} from "./chunk-5PHSJK36.js";
 import "./chunk-66A6EMCU.js";
 
 // src/react/index.tsx

package/dist/types/core/types.d.cts

@@ -25,6 +25,7 @@ export interface CalendarItem<D = unknown> {
     backgroundColor?: string;
     borderColor?: string;
     textColor?: string;
+    timeDisplay?: "start" | "range";
     className?: string | string[];
     /** Host-managed temporary placement: inert, mirror-styled and never hidden by event limits. */
     preview?: boolean;

package/dist/types/core/types.d.ts

@@ -25,6 +25,7 @@ export interface CalendarItem<D = unknown> {
     backgroundColor?: string;
     borderColor?: string;
     textColor?: string;
+    timeDisplay?: "start" | "range";
     className?: string | string[];
     /** Host-managed temporary placement: inert, mirror-styled and never hidden by event limits. */
     preview?: boolean;

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

@@ -37,6 +37,13 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
         scroll: number;
     };
     draggingId: string | null;
+    private listDragPreview;
+    private dragSources;
+    private dragWidth;
+    private dragScrollFrame;
+    private readonly dragScrollOrigins;
+    private readonly dragScrollEdges;
+    private readonly itemWriteStates;
     dragRow: {
         id: string;
         rowId: string;
@@ -44,6 +51,7 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
     strip: DateStrip<D> | null;
     private stripSize;
     private rebuilding;
+    private pinch;
     private readonly toolbarEl;
     private readonly viewHost;
     private current;
@@ -53,6 +61,7 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
     private session;
     private selection;
     private suppressClick;
+    private cancelledPointerId;
     private selectedIds;
     private popover;
     private timer;
@@ -136,7 +145,7 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
     suppressNextClick(): void;
     dayArg(day: Day): DayArg;
     dayClasses(day: Day): string[];
-    isEditable(n: NormalizedItem<D>, what: "start" | "duration"): boolean;
+    isEditable(n: NormalizedItem<D>, what: "start" | "duration", presentation?: boolean): boolean;
     navLink(day: Day, label: Node | string, cls: string): HTMLElement;
     navigate(day: Day, jsEvent: MouseEvent | KeyboardEvent, view?: "day" | "month"): void;
     createItemEl(meta: ElMeta<D>): HTMLElement;
@@ -197,13 +206,20 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
     private readonly onDocPointerDown;
     private readonly onPointerDown;
     private activate;
+    private startDragScroll;
+    private readonly onTouchStart;
     private readonly onTouchMove;
+    private readonly onTouchEnd;
+    /** Rescales the grid, keeping the anchored time under the fingers. */
+    private pinchTo;
+    private endPinch;
     private readonly onPointerMove;
     private readonly onPointerUp;
     private readonly onPointerCancel;
     private readonly onDocKeyDown;
     /** Proposal for the current pointer position. */
     private track;
+    private invalidateProposal;
     private trackExternal;
     private externalItem;
     private timelineSnap;
@@ -222,6 +238,7 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
     /** Ends the current pointer session, committing unless `cancel`. */
     private endSession;
     private commit;
+    private applyItemWriteState;
     /** Runs in the capture phase so the click ending a drag never reaches content inside the calendar, React portals included. */
     private readonly onClickCapture;
     private readonly onClick;

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

@@ -37,6 +37,13 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
         scroll: number;
     };
     draggingId: string | null;
+    private listDragPreview;
+    private dragSources;
+    private dragWidth;
+    private dragScrollFrame;
+    private readonly dragScrollOrigins;
+    private readonly dragScrollEdges;
+    private readonly itemWriteStates;
     dragRow: {
         id: string;
         rowId: string;
@@ -44,6 +51,7 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
     strip: DateStrip<D> | null;
     private stripSize;
     private rebuilding;
+    private pinch;
     private readonly toolbarEl;
     private readonly viewHost;
     private current;
@@ -53,6 +61,7 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
     private session;
     private selection;
     private suppressClick;
+    private cancelledPointerId;
     private selectedIds;
     private popover;
     private timer;
@@ -136,7 +145,7 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
     suppressNextClick(): void;
     dayArg(day: Day): DayArg;
     dayClasses(day: Day): string[];
-    isEditable(n: NormalizedItem<D>, what: "start" | "duration"): boolean;
+    isEditable(n: NormalizedItem<D>, what: "start" | "duration", presentation?: boolean): boolean;
     navLink(day: Day, label: Node | string, cls: string): HTMLElement;
     navigate(day: Day, jsEvent: MouseEvent | KeyboardEvent, view?: "day" | "month"): void;
     createItemEl(meta: ElMeta<D>): HTMLElement;
@@ -197,13 +206,20 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
     private readonly onDocPointerDown;
     private readonly onPointerDown;
     private activate;
+    private startDragScroll;
+    private readonly onTouchStart;
     private readonly onTouchMove;
+    private readonly onTouchEnd;
+    /** Rescales the grid, keeping the anchored time under the fingers. */
+    private pinchTo;
+    private endPinch;
     private readonly onPointerMove;
     private readonly onPointerUp;
     private readonly onPointerCancel;
     private readonly onDocKeyDown;
     /** Proposal for the current pointer position. */
     private track;
+    private invalidateProposal;
     private trackExternal;
     private externalItem;
     private timelineSnap;
@@ -222,6 +238,7 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
     /** Ends the current pointer session, committing unless `cancel`. */
     private endSession;
     private commit;
+    private applyItemWriteState;
     /** Runs in the capture phase so the click ending a drag never reaches content inside the calendar, React portals included. */
     private readonly onClickCapture;
     private readonly onClick;

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

@@ -1,10 +1,11 @@
 import { type Day } from "../core/date.cjs";
 /** Locale-aware labels. Formatting happens on UTC dates built from civil days, so zones never shift them. */
 export declare class Formatter {
+    private readonly formatTime?;
     private readonly cache;
     readonly locale: string | undefined;
     readonly hour12: boolean;
-    constructor(locale: string | undefined, hour12: boolean | undefined);
+    constructor(locale: string | undefined, hour12: boolean | undefined, formatTime?: ((minute: number) => string) | undefined);
     private fmt;
     private d;
     weekdayShort(day: Day): string;

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

@@ -1,10 +1,11 @@
 import { type Day } from "../core/date.js";
 /** Locale-aware labels. Formatting happens on UTC dates built from civil days, so zones never shift them. */
 export declare class Formatter {
+    private readonly formatTime?;
     private readonly cache;
     readonly locale: string | undefined;
     readonly hour12: boolean;
-    constructor(locale: string | undefined, hour12: boolean | undefined);
+    constructor(locale: string | undefined, hour12: boolean | undefined, formatTime?: ((minute: number) => string) | undefined);
     private fmt;
     private d;
     weekdayShort(day: Day): string;

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

@@ -16,7 +16,7 @@ export interface ViewInfo {
     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
+     * full window of days a date strip is showing so their dots are right. Load
      * items for this range; `onRangeChange` fires when it changes too.
      */
     dataRange: DateRange;
@@ -332,7 +332,7 @@ export interface CalendarOptions<D = unknown> {
      * the tap target: dots ignore the pointer and are hidden from assistive
      * technology, and the cell is labelled with its item count.
      */
-    monthDisplay: "full" | "dots";
+    monthDisplay: "full" | "dots" | "chips";
     /** "local" or an IANA name. */
     timeZone: string;
     locale: string | undefined;
@@ -340,6 +340,7 @@ export interface CalendarOptions<D = unknown> {
     firstDay: number | undefined;
     /** undefined = locale default. */
     hour12: boolean | undefined;
+    formatTime?: (minute: number) => string;
     weekNumbers: boolean;
     weekends: boolean;
     hiddenDays: number[];
@@ -356,11 +357,14 @@ export interface CalendarOptions<D = unknown> {
     scrollTime: string | number;
     /** Pixel height of one slot. */
     slotHeight: number;
+    /** A two-finger pinch on a time grid rescales `slotHeight`. False leaves the pinch to the browser. */
+    pinchZoom: boolean;
     /** Stretch slots to fill the available height ("fill" mode only). */
     expandRows: boolean;
     nowIndicator: boolean;
     selectMirror: boolean;
     slotEventOverlap: boolean;
+    overlapStackThreshold?: number;
     /** Minimum item height in px in time grids. */
     eventMinHeight: number;
     /** Max side-by-side items in a time-grid cluster before "+N". 0 = unlimited. */
@@ -392,6 +396,8 @@ export interface CalendarOptions<D = unknown> {
     selected: string | readonly string[] | null;
     onRangeChange?: (view: ViewInfo) => void;
     onViewChange?: (view: ViewInfo) => void;
+    /** A pinch settled on a new `slotHeight`, whole pixels. Store it to keep the scale across reloads. */
+    onSlotHeightChange?: (slotHeight: number) => void;
     onItemClick?: (arg: ItemPointerArg<D>) => void;
     onItemDoubleClick?: (arg: ItemPointerArg<D>) => void;
     onItemContextMenu?: (arg: ItemPointerArg<D>) => void;

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

@@ -16,7 +16,7 @@ export interface ViewInfo {
     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
+     * full window of days a date strip is showing so their dots are right. Load
      * items for this range; `onRangeChange` fires when it changes too.
      */
     dataRange: DateRange;
@@ -332,7 +332,7 @@ export interface CalendarOptions<D = unknown> {
      * the tap target: dots ignore the pointer and are hidden from assistive
      * technology, and the cell is labelled with its item count.
      */
-    monthDisplay: "full" | "dots";
+    monthDisplay: "full" | "dots" | "chips";
     /** "local" or an IANA name. */
     timeZone: string;
     locale: string | undefined;
@@ -340,6 +340,7 @@ export interface CalendarOptions<D = unknown> {
     firstDay: number | undefined;
     /** undefined = locale default. */
     hour12: boolean | undefined;
+    formatTime?: (minute: number) => string;
     weekNumbers: boolean;
     weekends: boolean;
     hiddenDays: number[];
@@ -356,11 +357,14 @@ export interface CalendarOptions<D = unknown> {
     scrollTime: string | number;
     /** Pixel height of one slot. */
     slotHeight: number;
+    /** A two-finger pinch on a time grid rescales `slotHeight`. False leaves the pinch to the browser. */
+    pinchZoom: boolean;
     /** Stretch slots to fill the available height ("fill" mode only). */
     expandRows: boolean;
     nowIndicator: boolean;
     selectMirror: boolean;
     slotEventOverlap: boolean;
+    overlapStackThreshold?: number;
     /** Minimum item height in px in time grids. */
     eventMinHeight: number;
     /** Max side-by-side items in a time-grid cluster before "+N". 0 = unlimited. */
@@ -392,6 +396,8 @@ export interface CalendarOptions<D = unknown> {
     selected: string | readonly string[] | null;
     onRangeChange?: (view: ViewInfo) => void;
     onViewChange?: (view: ViewInfo) => void;
+    /** A pinch settled on a new `slotHeight`, whole pixels. Store it to keep the scale across reloads. */
+    onSlotHeightChange?: (slotHeight: number) => void;
     onItemClick?: (arg: ItemPointerArg<D>) => void;
     onItemDoubleClick?: (arg: ItemPointerArg<D>) => void;
     onItemContextMenu?: (arg: ItemPointerArg<D>) => void;

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

@@ -13,11 +13,13 @@ export declare class DayGridView<D> implements View {
     private morePx;
     private topPx;
     private lastHeights;
-    private readonly dotsMode;
+    private dotsMode;
+    private dragPreviews;
     constructor(ctx: ViewContext<D>);
     private daysPerWeek;
     private sizeKey;
     render(_change: StoreChange | null): void;
+    private clearDragPreviews;
     /** Height of a "+N more" link as the host styles it (`--tnc-more-h`, or a taller min-height). */
     private measureMore;
     private limitFor;

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

@@ -13,11 +13,13 @@ export declare class DayGridView<D> implements View {
     private morePx;
     private topPx;
     private lastHeights;
-    private readonly dotsMode;
+    private dotsMode;
+    private dragPreviews;
     constructor(ctx: ViewContext<D>);
     private daysPerWeek;
     private sizeKey;
     render(_change: StoreChange | null): void;
+    private clearDragPreviews;
     /** Height of a "+N more" link as the host styles it (`--tnc-more-h`, or a taller min-height). */
     private measureMore;
     private limitFor;

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

@@ -22,6 +22,7 @@ export declare class ListView<D> implements View {
     private frame;
     /** A picked day stays marked until the list is scrolled by hand. */
     private pinned;
+    private pinnedTop;
     constructor(ctx: ViewContext<D>);
     private itemsOn;
     render(_change: StoreChange | null): void;

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

@@ -22,6 +22,7 @@ export declare class ListView<D> implements View {
     private frame;
     /** A picked day stays marked until the list is scrolled by hand. */
     private pinned;
+    private pinnedTop;
     constructor(ctx: ViewContext<D>);
     private itemsOn;
     render(_change: StoreChange | null): void;

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

@@ -12,6 +12,7 @@ export declare class DateStrip<D> {
     private readonly pick;
     /** Called when the days on show change, so their items can be loaded. */
     private readonly onShown;
+    private readonly onPage?;
     readonly el: HTMLElement;
     private readonly title;
     private readonly dows;
@@ -31,7 +32,7 @@ export declare class DateStrip<D> {
     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);
+    onShown: () => void, onPage?: ((day: Day) => void) | undefined);
     /** The list scrolled or the grid moved: mark the day and keep it in view. */
     setFocus(day: Day, range?: {
         start: Day;
@@ -55,6 +56,7 @@ export declare class DateStrip<D> {
     private readonly onClick;
     private readonly onKeyDown;
     private readonly onPointerDown;
+    private readonly ownTouch;
     private readonly onPointerUp;
     private readonly onPointerCancel;
     /** A swipe that ends on a day is not a pick. */

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

@@ -12,6 +12,7 @@ export declare class DateStrip<D> {
     private readonly pick;
     /** Called when the days on show change, so their items can be loaded. */
     private readonly onShown;
+    private readonly onPage?;
     readonly el: HTMLElement;
     private readonly title;
     private readonly dows;
@@ -31,7 +32,7 @@ export declare class DateStrip<D> {
     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);
+    onShown: () => void, onPage?: ((day: Day) => void) | undefined);
     /** The list scrolled or the grid moved: mark the day and keep it in view. */
     setFocus(day: Day, range?: {
         start: Day;
@@ -55,6 +56,7 @@ export declare class DateStrip<D> {
     private readonly onClick;
     private readonly onKeyDown;
     private readonly onPointerDown;
+    private readonly ownTouch;
     private readonly onPointerUp;
     private readonly onPointerCancel;
     /** A swipe that ends on a day is not a pick. */

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

@@ -26,7 +26,10 @@ export declare class TimeGridView<D> implements View {
     private get minutes();
     private build;
     private buildGutter;
-    private applyScale;
+    /** Slot height as drawn, which `expandRows` can stretch past the option. */
+    get drawnSlotHeight(): number;
+    /** Applies `slotHeight`. Items are placed in percentages, so they follow without a render. */
+    applyScale(): void;
     /** In fill mode with expandRows, stretches slots so the grid fills the height. */
     private fitRows;
     render(change: StoreChange | null): void;

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

@@ -26,7 +26,10 @@ export declare class TimeGridView<D> implements View {
     private get minutes();
     private build;
     private buildGutter;
-    private applyScale;
+    /** Slot height as drawn, which `expandRows` can stretch past the option. */
+    get drawnSlotHeight(): number;
+    /** Applies `slotHeight`. Items are placed in percentages, so they follow without a render. */
+    applyScale(): void;
     /** In fill mode with expandRows, stretches slots so the grid fills the height. */
     private fitRows;
     render(change: StoreChange | null): void;

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

@@ -21,6 +21,7 @@ export declare class YearView<D> implements View {
         top: number;
         left: number;
     }): void;
+    revealDay(day: Day): void;
     elementsFor(_id: string): HTMLElement[];
     destroy(): void;
 }

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

@@ -21,6 +21,7 @@ export declare class YearView<D> implements View {
         top: number;
         left: number;
     }): void;
+    revealDay(day: Day): void;
     elementsFor(_id: string): HTMLElement[];
     destroy(): void;
 }

package/dist/types/tasknotes/bases.d.cts

@@ -24,6 +24,8 @@ export interface BasesCalendarLayout {
     slotDuration?: string | null;
     snapDuration?: string | null;
     scrollTime?: string | null;
+    slotHeight?: number | null;
+    pinchZoom?: boolean | null;
     nowIndicator?: boolean | null;
     showTimeGrid?: boolean | null;
     selectMirror?: boolean | null;

package/dist/types/tasknotes/bases.d.ts

@@ -24,6 +24,8 @@ export interface BasesCalendarLayout {
     slotDuration?: string | null;
     snapDuration?: string | null;
     scrollTime?: string | null;
+    slotHeight?: number | null;
+    pinchZoom?: boolean | null;
     nowIndicator?: boolean | null;
     showTimeGrid?: boolean | null;
     selectMirror?: boolean | null;

package/package.json

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