@tasknotes/calendar 0.1.3 → 0.1.5

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 0.1.5
+
+### Added
+
+- Host-managed `CalendarItem.preview` placements for group drags. They use mirror styling, are non-interactive and hidden from assistive navigation, and remain visible beyond month/all-day event limits and timed stack limits. Multiple overflow previews stack separately.
+  - Supports the TaskNotes batch-scheduling workflow requested by @mnicolas94 in [Discussion 2435](https://github.com/callumalpass/tasknotes/discussions/2435), with the existing limitations clarified by @Thanatos9404.
+
+### Fixed
+
+- The dragged anchor remains visible when moving into a timed cluster limited by `eventMaxStack`.
+
+## 0.1.4
+
+### Added
+
+- `dateStrip` puts the agenda's date strip above day, multi-day and week views. Picking a strip day moves the grid there, and items can be dropped on strip days.
+- Agenda lists can show a lead section above the first day (`listLeadTitle`, `listLeadIncludes`, `listLeadDidMount`) and an add row under every day (`listAddText`, `onListAdd`).
+- The strip shows a Today chip when it is away from today.
+- `ViewInfo.dataRange` covers the days a strip shows past the visible range, so hosts can load items for every strip dot.
+
+### Changed
+
+- The date strip belongs to the calendar rather than the list, so it keeps its state (and any host controls in its slot) across navigation and view changes.
+
 ## 0.1.3
 
 ### Added

package/README.md

@@ -41,6 +41,7 @@ The host persists changes; the calendar supplies optimistic updates and a
 - **Items** take `start`/`end` as `YYYY-MM-DD` (all-day) or `YYYY-MM-DDTHH:mm` (floating, read in the calendar's zone), ISO strings with an offset, or epoch ms. `end` is exclusive. Optional fields: `allDay`, `color`, `kind`, `lane` (`"plan"`/`"actual"`), `display: "background"`, `completed`, `dependsOn`, `rev` (cheap change signature), `data`.
 - **Updates** are incremental: `setItems` diffs against the previous set, and `upsertItems`/`removeItems` re-render only the days touched. Render hooks (`itemDidMount`, …) fire only for elements that actually change, but every callback's `item` is the object most recently passed in for that id, so `item.data` is never stale.
 - **Render hooks** (`itemContent`, `itemClassNames`, `itemDidMount`, `itemWillUnmount`, `listItemContent`) get `variant` (`"timed"`, `"bar"`, `"dot"`, `"indicator"`, `"list"`, `"timeline"`) and `timeText`, the time label in the calendar's locale and hour format (`"9am – 10:30am"` for timed, list and timeline items, the start for bars and dots, empty for all-day items).
+- **Preview items**: set `preview: true` on a temporary item passed through `upsertItems` to show a host-managed group-drag placement. Previews have mirror styling, are hidden from assistive navigation, cannot be activated or edited, and remain visible beyond month/all-day event limits and timed stack limits. Multiple overflow previews stack without covering each other. `itemDidMount` reports `isMirror: true`. Restore the original item (or remove the preview ID) on drop, cancellation, source refresh and teardown; this flag does not persist or automatically commit a group.
 - **Drags** move the item itself with the pointer in every view (time grid, all-day row, month, timeline), for mouse and touch; the dragged item is never folded into "+N more".
 - **Changes** (`onItemDrop`, `onItemResize`, `onSelect`, `onExternalDrop`) report TaskNotes storage strings (`startStr`/`endStr`), `revert()`, and `source: "pointer" | "keyboard"`. Returning a rejected promise reverts.
 - **Clicks**: `onDateClick` reports `minute` (the slot's wall-clock minute, snapped to `slotDuration`; null for day cells and the all-day row), `allDay` and `startStr` (`"YYYY-MM-DD"` or `"YYYY-MM-DDTHH:mm"`), so a tap on a slot can prefill a time.
@@ -73,7 +74,11 @@ custom DOM. The exported `CalendarOptions<D>` type documents the full API.
 - `monthDisplay: "dots"` draws every item in a month cell as a small dot (`--tnc-dot-size`, `--tnc-dot-gap`) that wraps across the cell, with "+N" when they do not fit; `dayMaxEvents` caps the dots (`false` lets cells grow). The day cell is the tap target: dots ignore the pointer, are `aria-hidden`, get no content hook, and the cell is labelled "<date>, N items" (`text.itemCount`). Items in dots have `variant: "indicator"`; colour them with `color` or `itemDidMount` setting `--tnc-c`.
 - **"+N more" height**: day rows (and the time grid's all-day row) make room for the link at its rendered height, so a host may give it a 44px touch target (`--tnc-more-h`, or any min-height) without overflowing the row.
 - `listStart: "date" | "week"`: the list view starts at the date (default; FullCalendar `duration: { days: n }` lists, as the TaskNotes plugin and app used) or at the start of its week (FullCalendar's stock `listWeek`); week-aligned lists step by whole weeks.
-- `listAgenda: boolean`: turns the list view into a phone-style agenda. A date strip shows one week, or the whole month after a tap on its title, with a dot on busy days and the day at the top of the list marked. Below it, every day gets a section, empty days included, and more days load as the list nears its end. Picking a strip day scrolls the list to it and reports it through `onDateClick`. Rows can be dragged onto another day's section or a strip day; timed items keep their time. At `height: "auto"` the strip sticks to the top of the page; set `--tnc-sticky-top` to keep it below a fixed host header.
+- `listAgenda: boolean`: turns the list view into a phone-style agenda. A date strip shows one week, or the whole month after a tap on its title, with a dot on busy days and the day at the top of the list marked. Below it, every day gets a section, empty days included, and more days load as the list nears its end. Picking a strip day scrolls the list to it and reports it through `onDateClick`. Rows can be dragged onto another day's section or a strip day; timed items keep their time. At `height: "auto"` the strip sticks to the top of the page; set `--tnc-sticky-top` to keep it below a fixed host header. A Today chip appears in the strip's header when the list is away from today. Hosts can mount controls after the strip's arrows with `stripSlotDidMount`.
+- `dateStrip: boolean`: puts the same strip above the `day`, `days` and `week` views. Picking a day moves the grid to it, the rest of the grid's range is tinted, and items dragged onto a strip day move there at the same time.
+- `listLeadTitle: string | null` and `listLeadIncludes(item)`: in an agenda, a section above the first day holds the items `listLeadIncludes` picks out (overdue work, say) instead of their days. `listLeadDidMount` gives hosts a slot in its header for actions.
+- `listAddText: string | null` and `onListAdd(arg)`: in an agenda, an add row under every day, reported with that day.
+- `ViewInfo.dataRange`: the visible range, run on to the end of the days a strip shows. Load items for `dataRange` so every strip day gets its dot; `onRangeChange` also fires when only it changes.
 
 ### Timeline
 
@@ -162,4 +167,4 @@ Append `-- --update-snapshots` to the test command to regenerate baselines
 the date, timezone, locale, viewport, colour scheme and motion preference.
 Keep the image version and the exact `@playwright/test` pin in sync.
 
-The playground reads URL parameters (`view`, `tz`, `locale`, `date`, `theme`, `stress`, `height`, `capacity`, `display=dots`, `listStart=week`, `agenda=1`) and exposes `window.tnc` for scripted checks.
+The playground reads URL parameters (`view`, `tz`, `locale`, `date`, `theme`, `stress`, `height`, `capacity`, `display=dots`, `listStart=week`, `agenda=1` (agenda list and day strips with add rows), `lead=1` (a Due lead section)) and exposes `window.tnc` for scripted checks.

package/dist/calendar.css

@@ -224,9 +224,10 @@
 	opacity: 0.92;
 }
 .tnc-item.is-mirror {
+	z-index: 40 !important;
 	opacity: 0.8;
 	border-style: dashed !important;
-	pointer-events: none;
+	pointer-events: none !important;
 }
 
 /* timed (time grid) */
@@ -876,12 +877,12 @@
 }
 
 /* ---------------------------------------------------------------- agenda */
-.tnc-list--agenda {
-	--tnc-strip-cell: 40px;
-}
 .tnc-strip {
+	--tnc-strip-cell: 40px;
 	flex: none;
-	z-index: 3;
+	/* Above a time grid's sticky header and now line; popovers stay on top. */
+	position: relative;
+	z-index: 55;
 	padding: 6px 4px 0;
 	background: var(--tnc-surface);
 	border-bottom: 1px solid var(--tnc-line);
@@ -894,6 +895,9 @@
 	position: sticky;
 	top: var(--tnc-sticky-top, 0px);
 }
+.tnc--height-auto.tnc--has-strip .tnc-tg-top {
+	top: calc(var(--tnc-sticky-top, 0px) + var(--tnc-strip-h, 0px));
+}
 .tnc--height-auto .tnc-list--agenda .tnc-list-day {
 	top: calc(var(--tnc-sticky-top, 0px) + var(--tnc-strip-h, 0px));
 }
@@ -935,6 +939,24 @@
 .tnc-strip.is-expanded .tnc-strip-caret {
 	transform: rotate(180deg);
 }
+.tnc-strip-today {
+	margin-right: 4px;
+	padding: 4px 10px;
+	border: 1px solid var(--tnc-line-strong);
+	border-radius: 999px;
+	background: none;
+	color: var(--tnc-text);
+	font: inherit;
+	font-size: var(--tnc-small);
+	font-weight: 600;
+	cursor: pointer;
+}
+.tnc-strip-today[hidden] {
+	display: none;
+}
+.tnc-strip-today:hover {
+	background: var(--tnc-surface-2);
+}
 .tnc-strip-slot {
 	display: flex;
 	align-items: center;
@@ -1025,6 +1047,9 @@
 	color: var(--tnc-accent-text);
 	font-weight: 700;
 }
+.tnc-strip-day.is-in-range .tnc-strip-num {
+	background: var(--tnc-accent-soft);
+}
 .tnc-strip-day:hover .tnc-strip-num {
 	background: var(--tnc-surface-2);
 }
@@ -1037,6 +1062,7 @@
 }
 .tnc-strip-day:focus-visible,
 .tnc-strip-title:focus-visible,
+.tnc-strip-today:focus-visible,
 .tnc-strip-nav:focus-visible {
 	outline: 2px solid var(--tnc-accent);
 	outline-offset: -2px;
@@ -1064,9 +1090,55 @@
 	color: var(--tnc-faint);
 	font-weight: 600;
 }
-.tnc-list--agenda .tnc-list-section.is-empty .tnc-list-rows {
+.tnc-list--agenda .tnc-list-section.is-empty:not(:has(.tnc-list-add)) .tnc-list-rows {
 	min-height: 28px;
 }
+.tnc-list-lead-head {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	color: var(--tnc-text);
+}
+.tnc-list-lead-title {
+	margin-right: auto;
+}
+.tnc-list-lead-slot {
+	display: flex;
+	align-items: center;
+	font-weight: 400;
+}
+.tnc-list-lead-slot:empty {
+	display: none;
+}
+.tnc-list-add {
+	display: block;
+	width: 100%;
+	padding: 6px 10px;
+	border: 0;
+	background: none;
+	color: var(--tnc-muted);
+	font: inherit;
+	font-size: var(--tnc-small);
+	text-align: left;
+	cursor: pointer;
+}
+.tnc-list-add::before {
+	content: "+";
+	display: inline-block;
+	width: 1em;
+	margin-right: 6px;
+	color: var(--tnc-accent);
+	font-weight: 700;
+	text-align: center;
+}
+.tnc-list-add:hover {
+	color: var(--tnc-accent);
+	background: var(--tnc-surface-2);
+}
+.tnc-list-add:focus-visible {
+	outline: 2px solid var(--tnc-accent);
+	outline-offset: -2px;
+}
 .tnc-list-more {
 	height: 1px;
 }