@tasknotes/calendar 0.1.10 → 0.1.11

package/CHANGELOG.md

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

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;
 	}
 }

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) {

package/dist/cjs/index.cjs

@@ -502,43 +502,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]) {
@@ -560,15 +561,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) {
@@ -2292,7 +2286,7 @@ var TimeGridView = class {
       el.classList.toggle("is-short", short);
       setStyle(el, {
         top: top(p.startMin),
-        height: `max(${height(p)}, ${opts.eventMinHeight}px)`,
+        height: p.abutted ? height(p) : `max(${height(p)}, ${opts.eventMinHeight}px)`,
         ...inLane(lane, p.split, left, width),
         "--tnc-event-readable-width": pct(span / cols / width),
         "z-index": String(p.col + 1)

package/dist/cjs/react.cjs

@@ -838,43 +838,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]) {
@@ -896,15 +897,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) {
@@ -2200,7 +2194,7 @@ var TimeGridView = class {
       el.classList.toggle("is-short", short);
       setStyle(el, {
         top: top(p.startMin),
-        height: `max(${height(p)}, ${opts.eventMinHeight}px)`,
+        height: p.abutted ? height(p) : `max(${height(p)}, ${opts.eventMinHeight}px)`,
         ...inLane(lane, p.split, left, width),
         "--tnc-event-readable-width": pct(span / cols / width),
         "z-index": String(p.col + 1)

package/dist/esm/{chunk-66A6EMCU.js → chunk-JWORVABV.js}

@@ -425,43 +425,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]) {
@@ -483,15 +484,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) {

package/dist/esm/{chunk-5PHSJK36.js → chunk-TTM45UAN.js}

@@ -27,7 +27,7 @@ import {
   wallTime,
   weekdayOf,
   ymdOfDay
-} from "./chunk-66A6EMCU.js";
+} from "./chunk-JWORVABV.js";
 
 // src/dom/format.ts
 var Formatter = class {
@@ -1577,7 +1577,7 @@ var TimeGridView = class {
       el.classList.toggle("is-short", short);
       setStyle(el, {
         top: top(p.startMin),
-        height: `max(${height(p)}, ${opts.eventMinHeight}px)`,
+        height: p.abutted ? height(p) : `max(${height(p)}, ${opts.eventMinHeight}px)`,
         ...inLane(lane, p.split, left, width),
         "--tnc-event-readable-width": pct(span / cols / width),
         "z-index": String(p.col + 1)

package/dist/esm/core.js

@@ -40,7 +40,7 @@ import {
   wallTime,
   weekdayOf,
   ymdOfDay
-} from "./chunk-66A6EMCU.js";
+} from "./chunk-JWORVABV.js";
 export {
   DAY_MS,
   ItemStore,

package/dist/esm/index.js

@@ -7,7 +7,7 @@ import {
   TIMELINE_UNIT_DAYS,
   defaultOptions,
   localeFirstDay
-} from "./chunk-5PHSJK36.js";
+} from "./chunk-TTM45UAN.js";
 import {
   DAY_MS,
   ItemStore,
@@ -49,7 +49,7 @@ import {
   wallTime,
   weekdayOf,
   ymdOfDay
-} from "./chunk-66A6EMCU.js";
+} from "./chunk-JWORVABV.js";
 
 // src/tasknotes/bases.ts
 var FROM_BASES = {

package/dist/esm/react.js

@@ -1,7 +1,7 @@
 import {
   Calendar
-} from "./chunk-5PHSJK36.js";
-import "./chunk-66A6EMCU.js";
+} from "./chunk-TTM45UAN.js";
+import "./chunk-JWORVABV.js";
 
 // src/react/index.tsx
 import { useEffect, useLayoutEffect, useRef } from "react";

package/dist/types/core/layout.d.cts

@@ -24,6 +24,11 @@ export interface TimedPlacement<D = unknown> extends TimedSegment<D> {
      * Only then does the item keep to its lane's share of the column.
      */
     split: boolean;
+    /**
+     * Another item starts exactly where this short one ends, so it is drawn at
+     * its real height instead of being stretched to the minimum height.
+     */
+    abutted?: boolean;
 }
 export interface TimedDayLayout<D = unknown> {
     day: Day;

package/dist/types/core/layout.d.ts

@@ -24,6 +24,11 @@ export interface TimedPlacement<D = unknown> extends TimedSegment<D> {
      * Only then does the item keep to its lane's share of the column.
      */
     split: boolean;
+    /**
+     * Another item starts exactly where this short one ends, so it is drawn at
+     * its real height instead of being stretched to the minimum height.
+     */
+    abutted?: boolean;
 }
 export interface TimedDayLayout<D = unknown> {
     day: Day;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tasknotes/calendar",
-	"version": "0.1.10",
+	"version": "0.1.11",
 	"description": "Task-native calendar engine for TaskNotes: incremental layout, time grid, month, list, year and timeline views.",
 	"license": "MIT",
 	"type": "module",