@tasknotes/calendar 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # 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
+
+- `listAgenda` turns the list view into a phone-style agenda. A date strip sits above a list of every day, and more days load as you scroll. The strip shows a week, or the month after a tap on its title. It marks busy days and follows the day at the top of the list. Picking a strip day scrolls the list to it. Rows can be dragged onto another day or a strip day.
+
+### Fixed
+
+- On touch screens, a swipe that starts on a draggable item scrolls whatever actually scrolls. At `height: "auto"` that is the page, which these swipes did not scroll before.
+
 ## 0.1.2
 
 ### Changed

package/README.md

@@ -73,6 +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. 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
 
@@ -161,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`) 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

@@ -875,6 +875,273 @@
 	color: var(--tnc-faint);
 }
 
+/* ---------------------------------------------------------------- agenda */
+.tnc-strip {
+	--tnc-strip-cell: 40px;
+	flex: none;
+	/* 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);
+	/* Vertical pans scroll the page; sideways swipes step the strip. */
+	touch-action: pan-y;
+	user-select: none;
+}
+/* At auto height the page scrolls, so the strip sticks below `--tnc-sticky-top`. */
+.tnc--height-auto .tnc-strip {
+	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));
+}
+.tnc--height-auto .tnc-list--agenda .tnc-list-section {
+	scroll-margin-top: calc(var(--tnc-sticky-top, 0px) + var(--tnc-strip-h, 0px));
+}
+.tnc-strip-head {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	padding: 0 6px 6px;
+}
+.tnc-strip-title {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	margin-right: auto;
+	padding: 4px 6px;
+	border: 0;
+	border-radius: var(--tnc-radius);
+	background: none;
+	color: var(--tnc-text);
+	font: inherit;
+	font-size: 15px;
+	font-weight: 650;
+	cursor: pointer;
+}
+.tnc-strip-caret {
+	width: 0;
+	height: 0;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-top: 6px solid currentColor;
+	transition: transform 0.15s;
+}
+.tnc-strip.is-expanded .tnc-strip-title {
+	color: var(--tnc-accent);
+}
+.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;
+}
+.tnc-strip-slot:empty {
+	display: none;
+}
+.tnc-strip-nav {
+	width: 32px;
+	height: 32px;
+	border: 0;
+	border-radius: var(--tnc-radius);
+	background: none;
+	color: var(--tnc-muted);
+	font-size: 20px;
+	line-height: 1;
+	cursor: pointer;
+}
+.tnc-strip-title:hover,
+.tnc-strip-nav:hover {
+	background: var(--tnc-surface-2);
+}
+.tnc-strip-dows,
+.tnc-strip-grid {
+	display: grid;
+	grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+.tnc-strip-dows span {
+	padding-bottom: 4px;
+	text-align: center;
+	color: var(--tnc-muted);
+	font-size: var(--tnc-small);
+	font-weight: 600;
+}
+.tnc-strip-day {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: calc(var(--tnc-strip-cell) + 10px);
+	padding: 0;
+	border: 0;
+	border-radius: var(--tnc-radius);
+	background: none;
+	color: var(--tnc-text);
+	font: inherit;
+	cursor: pointer;
+}
+.tnc-strip-num {
+	display: grid;
+	place-items: center;
+	width: min(var(--tnc-strip-cell), 100%);
+	aspect-ratio: 1;
+	border-radius: 50%;
+	font-size: 15px;
+	font-variant-numeric: tabular-nums;
+}
+.tnc-strip-month {
+	position: absolute;
+	top: 0;
+	color: var(--tnc-muted);
+	font-size: 10px;
+	font-weight: 650;
+	line-height: 1;
+}
+.tnc-strip-dot {
+	width: 5px;
+	height: 5px;
+	margin-top: 1px;
+	border-radius: 50%;
+	visibility: hidden;
+	background: var(--tnc-muted);
+}
+.tnc-strip-day.has-items .tnc-strip-dot {
+	visibility: visible;
+}
+.tnc-strip-day.is-past,
+.tnc-strip-day.is-other-month {
+	color: var(--tnc-faint);
+}
+.tnc-strip-day.is-today .tnc-strip-num {
+	color: var(--tnc-accent);
+	font-weight: 700;
+}
+.tnc-strip-day.is-focus .tnc-strip-num {
+	background: var(--tnc-accent);
+	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);
+}
+.tnc-strip-day.is-focus:hover .tnc-strip-num {
+	background: var(--tnc-accent);
+}
+.tnc-strip-day.is-drop-target .tnc-strip-num {
+	box-shadow: 0 0 0 2px var(--tnc-accent);
+	background: var(--tnc-accent-soft);
+}
+.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;
+}
+.tnc-strip-handle {
+	display: block;
+	width: 36px;
+	height: 14px;
+	margin: 0 auto;
+	padding: 0;
+	border: 0;
+	background: none;
+	cursor: pointer;
+}
+.tnc-strip-handle::before {
+	content: "";
+	display: block;
+	width: 36px;
+	height: 4px;
+	margin: 0 auto;
+	border-radius: 2px;
+	background: var(--tnc-line-strong);
+}
+.tnc-list--agenda .tnc-list-section.is-empty .tnc-list-day {
+	color: var(--tnc-faint);
+	font-weight: 600;
+}
+.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;
+}
+
 /* ------------------------------------------------------------------ year */
 .tnc-year {
 	display: flex;