@tasknotes/calendar 0.1.5 → 0.1.7

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## Unreleased
+
+## 0.1.7
+
+### Added
+
+- Hosts can read collision column counts and the unobscured timed content width, choose views responsively, fill an empty list through a content hook, and translate the stack label with the `appointments` text.
+
+### Fixed
+
+- Collision stacks show appointment counts and open only the matching collision group, without unrelated all-day or timed items. Narrow time grids reveal the selected day on entry and view changes, not only after Today.
+- Crowded time-grid days use readable collision stacks without widening the entire week; stack contents retain drag-and-drop, including after moving the calendar into another window.
+- Today reveals the current day horizontally, with persistent day navigation when the grid is wider than its pane.
+- Overflow dialogs clamp to the visible viewport, reposition on resize and scroll, keep Close reachable, and provide touch-sized rows and keyboard navigation.
+- Collision stacks honour `eventMaxStack`, and overflow triggers stay stable across rerenders, so Escape returns focus to them.
+
+## 0.1.6
+
+### Changed
+
+- Time grids give tracked (`lane: "actual"`) items their narrow strip only where they overlap planned items. Elsewhere, planned and tracked items use the full column width, as before the side lane existed. The strip's width is the `--tnc-actual-w` custom property (default 22%).
+  - Reported by @RumiaKitinari in [TaskNotes issue 2494](https://github.com/callumalpass/tasknotes/issues/2494) and @mgreen3 in [TaskNotes issue 2498](https://github.com/callumalpass/tasknotes/issues/2498).
+- The toolbar's previous and next buttons draw their chevrons as icons, which are larger and clearer than the ‹ › glyphs.
+
 ## 0.1.5
 
 ### Added

package/README.md

@@ -69,8 +69,15 @@ to 00:00–24:00 in 30-minute slots, initially scrolled to 08:00.
 `text` supplies translated labels; `itemContent` and related hooks supply
 custom DOM. The exported `CalendarOptions<D>` type documents the full API.
 
+`toolbar.viewDisplay` defaults to `"auto"`: full view-name buttons become a
+native select when the toolbar cannot fit them. Use `"buttons"` or `"select"`
+to choose a fixed presentation. The select uses the same translated view names
+and changes views through the same navigation lifecycle as the buttons.
+
 ### Month and list
 
+- `listEmptyContent()` may return a host-owned DOM node for an empty list, such as an explanation and recovery action. The default translated empty message remains when omitted. The node is removed when the list gains items.
+
 - `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.
@@ -105,6 +112,30 @@ custom DOM. The exported `CalendarOptions<D>` type documents the full API.
 Set `--tnc-theme-*` variables on the host (they inherit into the calendar)
 or on `.tnc`. The stylesheet is scoped to `.tnc` and does not inject CSS.
 
+Time grids collapse crowded collision groups into labelled, expandable stacks
+instead of widening every day. `--tnc-event-min-width` sets the readable event
+width in pixels (default 128). Keep the day minimum independent of collisions:
+
+```css
+.my-calendar .tnc-tg {
+  --tnc-col-min: 128px;
+  --tnc-event-min-width: 128px;
+}
+```
+
+When the day minimums exceed a narrow viewport, persistent day buttons reveal
+offscreen dates, and Today reveals the current day. Headers, all-day rows and
+timed columns stay aligned. `--tnc-collision-columns` remains available as
+diagnostic metadata (respecting `eventMaxStack`), not a week-wide width multiplier.
+Overflow dialogs clamp to the visible calendar and viewport, scroll vertically,
+and support Tab, arrow keys, Home, End and Escape. Timed items dragged from
+overflow start at their actual time rather than the slot underneath the dialog.
+
+Timed events also expose `--tnc-event-readable-width`, the percentage of their
+width not covered by the next collision column. Hosts can use it as the
+`max-width` of `.tnc-item-main` to keep text readable while preserving the user's
+overlapping event backgrounds. It is `100%` for non-overlapping placements.
+
 ```css
 .my-calendar {
   --tnc-theme-bg: #181818;

package/dist/calendar.css

@@ -23,6 +23,8 @@
 	--tnc-off: color-mix(in srgb, var(--tnc-text) 3.5%, transparent);
 	--tnc-shadow: 0 8px 24px rgb(0 0 0 / 0.16);
 	--tnc-radius: 6px;
+	/* Time-grid share for tracked ("actual") items where they overlap planned ones. */
+	--tnc-actual-w: 22%;
 	--tnc-font-size: 12px;
 	--tnc-small: 11px;
 	--tnc-bar-h: 20px;
@@ -131,9 +133,21 @@
 }
 .tnc-btn-prev,
 .tnc-btn-next {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
 	min-width: 28px;
 	padding: 3px 6px;
-	font-size: 15px;
+}
+.tnc-btn-prev svg,
+.tnc-btn-next svg {
+	width: 16px;
+	height: 16px;
+	fill: none;
+	stroke: currentColor;
+	stroke-width: 2;
+	stroke-linecap: round;
+	stroke-linejoin: round;
 }
 .tnc-btn:focus-visible,
 .tnc-navlink:focus-visible,
@@ -453,6 +467,35 @@
 	overflow: auto;
 	overscroll-behavior: contain;
 }
+.tnc-tg-day-navigation {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 2px;
+	flex: none;
+}
+.tnc-tg-day-navigation[hidden] {
+	display: none;
+}
+.tnc-tg-day-navigation .is-offscreen {
+	text-decoration: underline;
+	text-underline-offset: 3px;
+}
+.tnc-more--collision {
+	display: flex;
+	align-items: start;
+	gap: 4px;
+	min-height: 40px;
+	white-space: normal;
+	text-align: start;
+}
+.tnc-collision-title {
+	flex: 1;
+	min-width: 0;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	overflow: hidden;
+}
 .tnc--height-auto .tnc-tg-scroll {
 	overflow: visible;
 }
@@ -612,31 +655,19 @@
 .tnc-col.is-today {
 	background-color: color-mix(in srgb, var(--tnc-accent) 5%, transparent);
 }
+/* Items position themselves within the column; see inLane in timegrid.ts. */
 .tnc-col-plan,
 .tnc-col-bg,
 .tnc-col-actual {
 	position: absolute;
-	top: 0;
-	bottom: 0;
-}
-.tnc-col-bg {
-	left: 0;
-	right: 0;
-}
-.tnc-col-plan {
-	left: 1px;
-	right: 8px;
+	inset: 0;
 }
+/* Above the plan layer, so it must not swallow clicks meant for plan items. */
 .tnc-col-actual {
-	display: none;
-	right: 2px;
-	width: 22%;
-}
-.tnc-col.has-actual .tnc-col-plan {
-	right: calc(22% + 4px);
+	pointer-events: none;
 }
-.tnc-col.has-actual .tnc-col-actual {
-	display: block;
+.tnc-col-actual > * {
+	pointer-events: auto;
 }
 .tnc-now {
 	position: absolute;
@@ -1618,6 +1649,7 @@
 	outline: none;
 }
 .tnc-popover-head {
+	flex: none;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -1627,6 +1659,7 @@
 	font-weight: 650;
 }
 .tnc-popover-close {
+	flex: none;
 	min-width: 28px;
 	min-height: 28px;
 	border: 0;
@@ -1640,6 +1673,7 @@
 	background: var(--tnc-surface-3);
 }
 .tnc-popover-body {
+	min-height: 0;
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
@@ -1650,6 +1684,27 @@
 	position: relative;
 	flex: none;
 }
+.tnc-popover-title {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.tnc-popover-body .tnc-item {
+	height: auto;
+	min-height: 40px;
+}
+.tnc-popover-body .tnc-item-main {
+	min-height: 40px;
+}
+.tnc-popover-body .tnc-item-title {
+	white-space: normal;
+	overflow-wrap: anywhere;
+}
+.tnc-popover-close:focus-visible {
+	outline: 2px solid var(--tnc-accent);
+	outline-offset: -2px;
+}
 
 @media (prefers-reduced-motion: reduce) {
 	.tnc * {

package/dist/cjs/core.cjs

@@ -520,7 +520,7 @@ function packTimed(segs, minMinutes, order = defaultOrder) {
       colEnds.push(0);
     }
     colEnds[col] = s.end;
-    const p = { ...s, col, cols: 1, span: 1, cluster: clusterIndex };
+    const p = { ...s, col, cols: 1, span: 1, cluster: clusterIndex, split: false };
     cluster.push(p);
     out.push(p);
     clusterEnd = Math.max(clusterEnd, s.end);
@@ -540,7 +540,24 @@ function layoutTimedDay(items, day, zone, minMinutes, order, window = [0, MINUTE
     else if (n.item.lane === "actual") actual.push(seg);
     else plan.push(seg);
   }
-  return { day, plan: packTimed(plan, minMinutes, order), actual: packTimed(actual, minMinutes, order), background };
+  const planPlaced = packTimed(plan, minMinutes, order);
+  const actualPlaced = packTimed(actual, minMinutes, order);
+  markSplit(planPlaced, actualPlaced, minMinutes);
+  markSplit(actualPlaced, planPlaced, minMinutes);
+  return { day, plan: planPlaced, actual: actualPlaced, background };
+}
+function markSplit(lane, other, minMinutes) {
+  if (!lane.length || !other.length) return;
+  const end = (p) => Math.max(p.endMin, p.startMin + minMinutes);
+  const ranges = /* @__PURE__ */ new Map();
+  for (const p of lane) {
+    const r = ranges.get(p.cluster);
+    if (r) r[1] = Math.max(r[1], end(p));
+    else ranges.set(p.cluster, [p.startMin, end(p)]);
+  }
+  const split = /* @__PURE__ */ new Set();
+  for (const [cluster, [s, e]] of ranges) if (other.some((o) => o.startMin < e && s < end(o))) split.add(cluster);
+  for (const p of lane) p.split = split.has(p.cluster);
 }
 function layoutRow(items, days, order = defaultOrder) {
   const first = days[0];