@tasknotes/calendar 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 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
+
+- Year views narrower than 520px (phones, sidebars) show two compact months a row. Days are shaded by how busy they are, with no dots, and any day with items is visibly shaded.
+
+### Fixed
+
+- Clicking or tapping a day in the year view reports it through `onDateClick`. Before, only Enter or Space on a focused day did.
+- The calendar keeps its sticky headers and popovers in its own stacking context, so host overlays such as side sheets and dialogs draw above the week header and all-day row.
+
 ## 0.1.1
 
 ### Fixed

package/README.md

@@ -73,6 +73,7 @@ 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.
 
 ### Timeline
 
@@ -161,4 +162,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`) and exposes `window.tnc` for scripted checks.

package/dist/calendar.css

@@ -40,6 +40,8 @@
 	--tnc-item-c: var(--tnc-accent);
 
 	position: relative;
+	/* Keep the calendar's own layers (sticky headers, popovers) below host overlays. */
+	isolation: isolate;
 	display: flex;
 	flex-direction: column;
 	min-height: 0;
@@ -873,11 +875,209 @@
 	color: var(--tnc-faint);
 }
 
+/* ---------------------------------------------------------------- agenda */
+.tnc-list--agenda {
+	--tnc-strip-cell: 40px;
+}
+.tnc-strip {
+	flex: none;
+	z-index: 3;
+	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-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-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: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-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 .tnc-list-rows {
+	min-height: 28px;
+}
+.tnc-list-more {
+	height: 1px;
+}
+
 /* ------------------------------------------------------------------ year */
 .tnc-year {
 	display: flex;
 	flex-direction: column;
 	min-height: 0;
+	/* Narrow calendars (phones, sidebars) use the compact year below. */
+	container-type: inline-size;
 }
 .tnc-year-scroll {
 	flex: 1 1 auto;
@@ -948,6 +1148,35 @@
 	background: var(--tnc-c, var(--tnc-accent));
 }
 
+/* Two months a row: each day is a shaded square, and its count is in its label. */
+@container (max-width: 520px) {
+	.tnc-year-scroll {
+		padding: 8px 4px;
+	}
+	.tnc-year-grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 14px 12px;
+	}
+	.tnc-ym-title {
+		font-size: 12px;
+		padding-bottom: 4px;
+	}
+	.tnc-ym-days {
+		gap: 1px;
+	}
+	.tnc-ym-day {
+		border-radius: 4px;
+		font-size: 10px;
+	}
+	/* Without dots, one item must still read as busy. */
+	.tnc-ym-day.has-items {
+		background: color-mix(in srgb, var(--tnc-accent) calc((0.3 + var(--tnc-heat) * 0.7) * 50%), transparent);
+	}
+	.tnc-ym-dots {
+		display: none;
+	}
+}
+
 /* -------------------------------------------------------------- timeline */
 .tnc-tl {
 	display: flex;