@tasknotes/calendar 0.1.8 → 0.1.11

package/CHANGELOG.md

@@ -1,6 +1,28 @@
 # Changelog
 
-## Unreleased
+## 0.1.11
+
+- Hour-long timed items keep their time in narrow columns. Only single-row short items drop the time label when narrow; in the stacked layout the title is clamped to the lines left above the time (callumalpass/tasknotes#2528).
+- Back-to-back timed items no longer count as overlapping: an item starting exactly where a short item ends stays in the same column instead of going side by side or into a collision stack, and the short item is drawn at its real height (callumalpass/tasknotes#2529).
+
+## 0.1.10
+
+- Freeze Month source layout during a move and draw an inert target placeholder; preserve timed drag width across collision layouts.
+- Contain date-strip touch gestures, reveal the complete target month in Year view, and allow dense collision stacks independently of the overlap preference.
+- Require a short pause at a drag edge before scrolling, so passing through the edge does not shift the grid. Cancellation still restores the original scroll position.
+- Keep the whole requested hour label visible below the sticky day and all-day headers when scrolling to a time.
+- Agenda strip paging moves the list to the focused day; scrollbar and keyboard scrolling update the date highlight after a day is picked. Activity dots show up to three appointments in their configured colours.
+- Hosts can supply one wall-clock `formatTime` callback for event, stack, selection, accessibility and slot labels.
+- Hosts can set `overlapStackThreshold` to group dense overlapping appointments into the existing collision stack even in wide columns. Explicit side-by-side layouts remain unchanged.
+
+## 0.1.9
+
+Not published to npm (the release check failed); these changes ship in 0.1.10.
+
+### Added
+
+- Pinching a time grid on touch rescales its slots around the time under the fingers. `onSlotHeightChange` reports the settled height for hosts to store, and `pinchZoom: false` turns the gesture off.
+- `basesLayoutOptions` reads `slotHeight` and `pinchZoom` from Bases calendar settings.
 
 ## 0.1.8
 

package/README.md

@@ -46,6 +46,7 @@ The host persists changes; the calendar supplies optimistic updates and a
 - **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.
 - **Input**: mouse drag after 4px, touch long press (`longPressDelay`), keyboard (Enter/Space, Shift+F10, Alt+Arrow to move, Alt+Shift+Arrow to resize), external drags via `beginExternalDrag` or native HTML5 drops.
+- **Pinch**: two fingers on a time grid rescale `slotHeight` between 16 and 96px, keeping the time under the fingers in place. `onSlotHeightChange` reports the settled height for the host to store; `pinchZoom: false` leaves the gesture to the browser.
 - **Popouts**: all listeners, timers and observers use the host element's `ownerDocument`; bare `window`/`document` are lint errors in `src`.
 
 ### Views and options

package/dist/calendar.css

@@ -293,8 +293,42 @@
 .tnc-item--timed.is-short .tnc-item-time {
 	flex: none;
 }
-@container (max-height: 50px) and (max-width: 239px) {
-	.tnc-item--timed .tnc-item-time {
+/* Stacked layout: the time keeps its line and the title gets the lines left over
+   (11px text: n title lines need 13.75 * (n + 1) + 1px). Single-row short items drop the time when narrow. */
+.tnc-item--timed:not(.is-short) .tnc-item-title {
+	flex: 0 1 auto;
+	min-height: 0;
+}
+.tnc-item--timed:not(.is-short) .tnc-item-time {
+	flex: none;
+}
+@container (max-height: 97.2px) {
+	.tnc-item--timed:not(.is-short) .tnc-item-title {
+		-webkit-line-clamp: 5;
+	}
+}
+@container (max-height: 83.4px) {
+	.tnc-item--timed:not(.is-short) .tnc-item-title {
+		-webkit-line-clamp: 4;
+	}
+}
+@container (max-height: 69.7px) {
+	.tnc-item--timed:not(.is-short) .tnc-item-title {
+		-webkit-line-clamp: 3;
+	}
+}
+@container (max-height: 55.9px) {
+	.tnc-item--timed:not(.is-short) .tnc-item-title {
+		-webkit-line-clamp: 2;
+	}
+}
+@container (max-height: 42.2px) {
+	.tnc-item--timed:not(.is-short) .tnc-item-title {
+		-webkit-line-clamp: 1;
+	}
+}
+@container (max-width: 239px) {
+	.tnc-item--timed.is-short .tnc-item-time {
 		display: none;
 	}
 }
@@ -707,6 +741,10 @@
 .tnc-tg-body {
 	position: relative;
 }
+.tnc-tg--pinch .tnc-tg-body {
+	/* Pinches rescale the grid rather than zoom the page. */
+	touch-action: pan-x pan-y;
+}
 .tnc-gutter {
 	border-right: 1px solid var(--tnc-line);
 }
@@ -1196,6 +1234,12 @@
 	font-weight: 650;
 	line-height: 1;
 }
+.tnc-strip-dots {
+	display: flex;
+	justify-content: center;
+	gap: 2px;
+	min-height: 5px;
+}
 .tnc-strip-dot {
 	width: 5px;
 	height: 5px;
@@ -1906,6 +1950,22 @@
 	outline: 1px solid var(--tnc-focus);
 	outline-offset: -1px;
 }
+.tnc .tnc-item--timed.is-dragging {
+	min-width: var(--tnc-drag-width);
+	max-width: var(--tnc-drag-width);
+}
+.tnc .tnc-dg .tnc-item.is-dragging:not(.is-mirror) {
+	opacity: var(--tnc-drag-opacity);
+	box-shadow: none;
+	outline: none;
+}
+.tnc .tnc-month-preview {
+	position: absolute;
+	pointer-events: none;
+	outline: 2px dashed var(--tnc-accent);
+	outline-offset: -2px;
+	z-index: 10;
+}
 .tnc .tnc-item--list.is-dragging:not(.tnc-drag-preview) {
 	opacity: var(--tnc-drag-opacity);
 	box-shadow: none;

package/dist/cjs/core.cjs

@@ -490,43 +490,44 @@ function segmentInWindow(n, day, minMinute, maxMinute, zone) {
   };
 }
 var defaultOrder = (a, b) => a.startMs - b.startMs || b.endMs - b.startMs - (a.endMs - a.startMs) || Number(b.allDay) - Number(a.allDay) || a.item.title.localeCompare(b.item.title);
+function collides(a, b, minMinutes) {
+  if (b.startMin < a.endMin) return true;
+  if (b.startMin === a.endMin && a.endMin > a.startMin) return false;
+  return b.startMin < a.startMin + minMinutes;
+}
+function overlaps(a, b, minMinutes) {
+  return a.startMin <= b.startMin ? collides(a, b, minMinutes) : collides(b, a, minMinutes);
+}
 function packTimed(segs, minMinutes, order = defaultOrder) {
-  const sorted = segs.map((s) => ({ ...s, end: Math.max(s.endMin, s.startMin + minMinutes) })).sort((a, b) => a.startMin - b.startMin || b.end - a.end || order(a.item, b.item));
+  const sorted = [...segs].sort((a, b) => a.startMin - b.startMin || Math.max(b.endMin, b.startMin + minMinutes) - Math.max(a.endMin, a.startMin + minMinutes) || order(a.item, b.item));
   const out = [];
   let cluster = [];
-  let colEnds = [];
-  let clusterEnd = -Infinity;
+  let colLast = [];
   let clusterIndex = 0;
   const flush = () => {
     if (cluster.length) clusterIndex++;
-    const cols = colEnds.length;
+    const cols = colLast.length;
     for (const p of cluster) {
       p.cols = cols;
       let span = 1;
-      while (p.col + span < cols && !cluster.some((o) => o.col === p.col + span && o.startMin < p.end && p.startMin < o.end)) span++;
+      while (p.col + span < cols && !cluster.some((o) => o.col === p.col + span && overlaps(o, p, minMinutes))) span++;
       p.span = span;
     }
     cluster = [];
-    colEnds = [];
+    colLast = [];
   };
   for (const s of sorted) {
-    if (s.startMin >= clusterEnd) {
-      flush();
-      clusterEnd = -Infinity;
-    }
-    let col = colEnds.findIndex((end) => end <= s.startMin);
-    if (col < 0) {
-      col = colEnds.length;
-      colEnds.push(0);
-    }
-    colEnds[col] = s.end;
+    if (!cluster.some((o) => collides(o, s, minMinutes))) flush();
+    let col = colLast.findIndex((last) => !collides(last, s, minMinutes));
+    if (col < 0) col = colLast.length;
     const p = { ...s, col, cols: 1, span: 1, cluster: clusterIndex, split: false };
+    colLast[col] = p;
     cluster.push(p);
     out.push(p);
-    clusterEnd = Math.max(clusterEnd, s.end);
   }
   flush();
-  for (const p of out) delete p.end;
+  const starts = new Set(out.map((p) => p.startMin));
+  for (const p of out) if (p.endMin > p.startMin && p.startMin + minMinutes > p.endMin && starts.has(p.endMin)) p.abutted = true;
   return out;
 }
 function layoutTimedDay(items, day, zone, minMinutes, order, window = [0, MINUTES_PER_DAY]) {
@@ -548,15 +549,8 @@ function layoutTimedDay(items, day, zone, minMinutes, order, window = [0, MINUTE
 }
 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) if (!split.has(p.cluster) && other.some((o) => overlaps(p, o, minMinutes))) split.add(p.cluster);
   for (const p of lane) p.split = split.has(p.cluster);
 }
 function layoutRow(items, days, order = defaultOrder) {