@tasknotes/calendar 0.1.3 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 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

@@ -73,7 +73,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 +166,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

@@ -876,12 +876,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 +894,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 +938,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 +1046,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 +1061,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 +1089,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;
 }