@tasknotes/calendar 0.1.10 → 0.1.12

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.1.12
+
+- Hosts can pass a `tooltip(el, text)` option to show hover tooltips their own way (Obsidian's `setTooltip`, say). Without it, tooltips stay as `title` attributes.
+
+## 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) {
@@ -1063,6 +1057,7 @@ var LAYOUT_KEYS = /* @__PURE__ */ new Set([
   "text",
   "timeline",
   "editable",
+  "tooltip",
   "itemContent",
   "itemClassNames",
   "listItemContent",
@@ -1699,8 +1694,10 @@ var DateStrip = class {
     const head = h(doc, "div", "tnc-strip-head");
     this.title = h(doc, "button", "tnc-strip-title", { type: "button", "aria-expanded": "false" });
     this.title.addEventListener("click", () => this.setExpanded(!this.expanded));
-    const prev = h(doc, "button", "tnc-strip-nav tnc-strip-prev", { type: "button", "aria-label": text.prev, title: text.prev }, "\u2039");
-    const next = h(doc, "button", "tnc-strip-nav tnc-strip-next", { type: "button", "aria-label": text.next, title: text.next }, "\u203A");
+    const prev = h(doc, "button", "tnc-strip-nav tnc-strip-prev", { type: "button", "aria-label": text.prev }, "\u2039");
+    const next = h(doc, "button", "tnc-strip-nav tnc-strip-next", { type: "button", "aria-label": text.next }, "\u203A");
+    ctx.tooltip(prev, text.prev);
+    ctx.tooltip(next, text.next);
     prev.addEventListener("click", () => this.step(-1));
     next.addEventListener("click", () => this.step(1));
     this.todayBtn = h(doc, "button", "tnc-strip-today", { type: "button" }, text.today);
@@ -2292,7 +2289,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)
@@ -2324,10 +2321,10 @@ var TimeGridView = class {
           h(ctx.doc, "span", "tnc-collision-title", { "aria-hidden": "true" }, items.join(" \xB7 "))
         );
         link.setAttribute("aria-label", `${count}, ${interval}: ${items.join(", ")}`);
-        link.title = link.getAttribute("aria-label");
+        ctx.tooltip(link, link.getAttribute("aria-label"));
       } else {
+        ctx.tooltip(link, "");
         link.removeAttribute("aria-label");
-        link.removeAttribute("title");
       }
       const cols = maxStack;
       setStyle(link, {
@@ -3105,9 +3102,9 @@ var YearView = class {
       );
       const label = this.ctx.fmt.longDate(c.day);
       c.el.setAttribute("aria-label", items.length ? `${label}, ${this.ctx.text.itemCount(items.length)}` : label);
-      c.el.title = items.length ? `${label}
+      this.ctx.tooltip(c.el, items.length ? `${label}
 ${items.slice(0, 8).map((n) => `\u2022 ${n.item.title}`).join("\n")}${items.length > 8 ? `
-${this.ctx.text.more(items.length - 8)}` : ""}` : label;
+${this.ctx.text.more(items.length - 8)}` : ""}` : label);
     }
   }
   showSelection(_sel) {
@@ -3542,6 +3539,11 @@ var Calendar = class {
     const specific = what === "start" ? it.startEditable : it.durationEditable;
     return specific ?? base;
   }
+  tooltip(el, text) {
+    if (this.opts.tooltip) this.opts.tooltip(el, text);
+    else if (text) el.title = text;
+    else el.removeAttribute("title");
+  }
   navLink(day, label, cls) {
     const btn = h(this.doc, "button", `tnc-navlink ${cls}`, { type: "button", "data-nav-date": formatDay(day) }, label);
     btn.addEventListener("click", (ev) => {
@@ -3943,7 +3945,8 @@ var Calendar = class {
     const cfg = tb === true ? {} : tb;
     const views = cfg.views ?? ["month", "week", "days", "day", "list", "year"];
     const btn = (label, hint, cls, onClick, pressed) => {
-      const b = h(this.doc, "button", `tnc-btn ${cls}`, { type: "button", title: hint, "aria-label": hint }, label);
+      const b = h(this.doc, "button", `tnc-btn ${cls}`, { type: "button", "aria-label": hint }, label);
+      this.tooltip(b, hint);
       if (pressed !== void 0) b.setAttribute("aria-pressed", String(pressed));
       b.addEventListener("click", onClick);
       return b;
@@ -4143,7 +4146,9 @@ var Calendar = class {
   addPorts(el, n) {
     const edges = n.item.kind === "milestone" ? ["finish"] : ["start", "finish"];
     for (const edge of edges) {
-      el.append(h(this.doc, "span", `tnc-port tnc-port-${edge}`, { "aria-hidden": "true", "data-edge": edge, title: "Drag to link" }));
+      const port = h(this.doc, "span", `tnc-port tnc-port-${edge}`, { "aria-hidden": "true", "data-edge": edge });
+      this.tooltip(port, "Drag to link");
+      el.append(port);
     }
   }
   /* ============================================================== popover */

package/dist/cjs/react.cjs

@@ -806,6 +806,7 @@ var LAYOUT_KEYS = /* @__PURE__ */ new Set([
   "text",
   "timeline",
   "editable",
+  "tooltip",
   "itemContent",
   "itemClassNames",
   "listItemContent",
@@ -838,43 +839,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 +898,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) {
@@ -1607,8 +1602,10 @@ var DateStrip = class {
     const head = h(doc, "div", "tnc-strip-head");
     this.title = h(doc, "button", "tnc-strip-title", { type: "button", "aria-expanded": "false" });
     this.title.addEventListener("click", () => this.setExpanded(!this.expanded));
-    const prev = h(doc, "button", "tnc-strip-nav tnc-strip-prev", { type: "button", "aria-label": text.prev, title: text.prev }, "\u2039");
-    const next = h(doc, "button", "tnc-strip-nav tnc-strip-next", { type: "button", "aria-label": text.next, title: text.next }, "\u203A");
+    const prev = h(doc, "button", "tnc-strip-nav tnc-strip-prev", { type: "button", "aria-label": text.prev }, "\u2039");
+    const next = h(doc, "button", "tnc-strip-nav tnc-strip-next", { type: "button", "aria-label": text.next }, "\u203A");
+    ctx.tooltip(prev, text.prev);
+    ctx.tooltip(next, text.next);
     prev.addEventListener("click", () => this.step(-1));
     next.addEventListener("click", () => this.step(1));
     this.todayBtn = h(doc, "button", "tnc-strip-today", { type: "button" }, text.today);
@@ -2200,7 +2197,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)
@@ -2232,10 +2229,10 @@ var TimeGridView = class {
           h(ctx.doc, "span", "tnc-collision-title", { "aria-hidden": "true" }, items.join(" \xB7 "))
         );
         link.setAttribute("aria-label", `${count}, ${interval}: ${items.join(", ")}`);
-        link.title = link.getAttribute("aria-label");
+        ctx.tooltip(link, link.getAttribute("aria-label"));
       } else {
+        ctx.tooltip(link, "");
         link.removeAttribute("aria-label");
-        link.removeAttribute("title");
       }
       const cols = maxStack;
       setStyle(link, {
@@ -3013,9 +3010,9 @@ var YearView = class {
       );
       const label = this.ctx.fmt.longDate(c.day);
       c.el.setAttribute("aria-label", items.length ? `${label}, ${this.ctx.text.itemCount(items.length)}` : label);
-      c.el.title = items.length ? `${label}
+      this.ctx.tooltip(c.el, items.length ? `${label}
 ${items.slice(0, 8).map((n) => `\u2022 ${n.item.title}`).join("\n")}${items.length > 8 ? `
-${this.ctx.text.more(items.length - 8)}` : ""}` : label;
+${this.ctx.text.more(items.length - 8)}` : ""}` : label);
     }
   }
   showSelection(_sel) {
@@ -3450,6 +3447,11 @@ var Calendar = class {
     const specific = what === "start" ? it.startEditable : it.durationEditable;
     return specific ?? base;
   }
+  tooltip(el, text) {
+    if (this.opts.tooltip) this.opts.tooltip(el, text);
+    else if (text) el.title = text;
+    else el.removeAttribute("title");
+  }
   navLink(day, label, cls) {
     const btn = h(this.doc, "button", `tnc-navlink ${cls}`, { type: "button", "data-nav-date": formatDay(day) }, label);
     btn.addEventListener("click", (ev) => {
@@ -3851,7 +3853,8 @@ var Calendar = class {
     const cfg = tb === true ? {} : tb;
     const views = cfg.views ?? ["month", "week", "days", "day", "list", "year"];
     const btn = (label, hint, cls, onClick, pressed) => {
-      const b = h(this.doc, "button", `tnc-btn ${cls}`, { type: "button", title: hint, "aria-label": hint }, label);
+      const b = h(this.doc, "button", `tnc-btn ${cls}`, { type: "button", "aria-label": hint }, label);
+      this.tooltip(b, hint);
       if (pressed !== void 0) b.setAttribute("aria-pressed", String(pressed));
       b.addEventListener("click", onClick);
       return b;
@@ -4051,7 +4054,9 @@ var Calendar = class {
   addPorts(el, n) {
     const edges = n.item.kind === "milestone" ? ["finish"] : ["start", "finish"];
     for (const edge of edges) {
-      el.append(h(this.doc, "span", `tnc-port tnc-port-${edge}`, { "aria-hidden": "true", "data-edge": edge, title: "Drag to link" }));
+      const port = h(this.doc, "span", `tnc-port tnc-port-${edge}`, { "aria-hidden": "true", "data-edge": edge });
+      this.tooltip(port, "Drag to link");
+      el.append(port);
     }
   }
   /* ============================================================== popover */

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

@@ -27,7 +27,7 @@ import {
   wallTime,
   weekdayOf,
   ymdOfDay
-} from "./chunk-66A6EMCU.js";
+} from "./chunk-JWORVABV.js";
 
 // src/dom/format.ts
 var Formatter = class {
@@ -262,6 +262,7 @@ var LAYOUT_KEYS = /* @__PURE__ */ new Set([
   "text",
   "timeline",
   "editable",
+  "tooltip",
   "itemContent",
   "itemClassNames",
   "listItemContent",
@@ -984,8 +985,10 @@ var DateStrip = class {
     const head = h(doc, "div", "tnc-strip-head");
     this.title = h(doc, "button", "tnc-strip-title", { type: "button", "aria-expanded": "false" });
     this.title.addEventListener("click", () => this.setExpanded(!this.expanded));
-    const prev = h(doc, "button", "tnc-strip-nav tnc-strip-prev", { type: "button", "aria-label": text.prev, title: text.prev }, "\u2039");
-    const next = h(doc, "button", "tnc-strip-nav tnc-strip-next", { type: "button", "aria-label": text.next, title: text.next }, "\u203A");
+    const prev = h(doc, "button", "tnc-strip-nav tnc-strip-prev", { type: "button", "aria-label": text.prev }, "\u2039");
+    const next = h(doc, "button", "tnc-strip-nav tnc-strip-next", { type: "button", "aria-label": text.next }, "\u203A");
+    ctx.tooltip(prev, text.prev);
+    ctx.tooltip(next, text.next);
     prev.addEventListener("click", () => this.step(-1));
     next.addEventListener("click", () => this.step(1));
     this.todayBtn = h(doc, "button", "tnc-strip-today", { type: "button" }, text.today);
@@ -1577,7 +1580,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)
@@ -1609,10 +1612,10 @@ var TimeGridView = class {
           h(ctx.doc, "span", "tnc-collision-title", { "aria-hidden": "true" }, items.join(" \xB7 "))
         );
         link.setAttribute("aria-label", `${count}, ${interval}: ${items.join(", ")}`);
-        link.title = link.getAttribute("aria-label");
+        ctx.tooltip(link, link.getAttribute("aria-label"));
       } else {
+        ctx.tooltip(link, "");
         link.removeAttribute("aria-label");
-        link.removeAttribute("title");
       }
       const cols = maxStack;
       setStyle(link, {
@@ -2390,9 +2393,9 @@ var YearView = class {
       );
       const label = this.ctx.fmt.longDate(c.day);
       c.el.setAttribute("aria-label", items.length ? `${label}, ${this.ctx.text.itemCount(items.length)}` : label);
-      c.el.title = items.length ? `${label}
+      this.ctx.tooltip(c.el, items.length ? `${label}
 ${items.slice(0, 8).map((n) => `\u2022 ${n.item.title}`).join("\n")}${items.length > 8 ? `
-${this.ctx.text.more(items.length - 8)}` : ""}` : label;
+${this.ctx.text.more(items.length - 8)}` : ""}` : label);
     }
   }
   showSelection(_sel) {
@@ -2827,6 +2830,11 @@ var Calendar = class {
     const specific = what === "start" ? it.startEditable : it.durationEditable;
     return specific ?? base;
   }
+  tooltip(el, text) {
+    if (this.opts.tooltip) this.opts.tooltip(el, text);
+    else if (text) el.title = text;
+    else el.removeAttribute("title");
+  }
   navLink(day, label, cls) {
     const btn = h(this.doc, "button", `tnc-navlink ${cls}`, { type: "button", "data-nav-date": formatDay(day) }, label);
     btn.addEventListener("click", (ev) => {
@@ -3228,7 +3236,8 @@ var Calendar = class {
     const cfg = tb === true ? {} : tb;
     const views = cfg.views ?? ["month", "week", "days", "day", "list", "year"];
     const btn = (label, hint, cls, onClick, pressed) => {
-      const b = h(this.doc, "button", `tnc-btn ${cls}`, { type: "button", title: hint, "aria-label": hint }, label);
+      const b = h(this.doc, "button", `tnc-btn ${cls}`, { type: "button", "aria-label": hint }, label);
+      this.tooltip(b, hint);
       if (pressed !== void 0) b.setAttribute("aria-pressed", String(pressed));
       b.addEventListener("click", onClick);
       return b;
@@ -3428,7 +3437,9 @@ var Calendar = class {
   addPorts(el, n) {
     const edges = n.item.kind === "milestone" ? ["finish"] : ["start", "finish"];
     for (const edge of edges) {
-      el.append(h(this.doc, "span", `tnc-port tnc-port-${edge}`, { "aria-hidden": "true", "data-edge": edge, title: "Drag to link" }));
+      const port = h(this.doc, "span", `tnc-port tnc-port-${edge}`, { "aria-hidden": "true", "data-edge": edge });
+      this.tooltip(port, "Drag to link");
+      el.append(port);
     }
   }
   /* ============================================================== popover */

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/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-AACI7SZC.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-AACI7SZC.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/dist/types/dom/calendar.d.cts

@@ -146,6 +146,7 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
     dayArg(day: Day): DayArg;
     dayClasses(day: Day): string[];
     isEditable(n: NormalizedItem<D>, what: "start" | "duration", presentation?: boolean): boolean;
+    tooltip(el: HTMLElement, text: string): void;
     navLink(day: Day, label: Node | string, cls: string): HTMLElement;
     navigate(day: Day, jsEvent: MouseEvent | KeyboardEvent, view?: "day" | "month"): void;
     createItemEl(meta: ElMeta<D>): HTMLElement;

package/dist/types/dom/calendar.d.ts

@@ -146,6 +146,7 @@ export declare class Calendar<D = unknown> implements ViewContext<D> {
     dayArg(day: Day): DayArg;
     dayClasses(day: Day): string[];
     isEditable(n: NormalizedItem<D>, what: "start" | "duration", presentation?: boolean): boolean;
+    tooltip(el: HTMLElement, text: string): void;
     navLink(day: Day, label: Node | string, cls: string): HTMLElement;
     navigate(day: Day, jsEvent: MouseEvent | KeyboardEvent, view?: "day" | "month"): void;
     createItemEl(meta: ElMeta<D>): HTMLElement;

package/dist/types/dom/context.d.cts

@@ -59,6 +59,8 @@ export interface ViewContext<D = unknown> {
     /** Refreshes parts of an item element that depend on position (time label). */
     refreshItemEl(el: HTMLElement, meta: ElMeta<D>): void;
     destroyItemEl(el: HTMLElement): void;
+    /** Sets or clears (empty `text`) an element's hover tooltip through `opts.tooltip`. */
+    tooltip(el: HTMLElement, text: string): void;
     /** Builds a nav link (day number / header) for a day. */
     navLink(day: Day, label: Node | string, cls: string): HTMLElement;
     openMore(day: Day, anchor: HTMLElement, jsEvent: MouseEvent | KeyboardEvent, itemIds?: readonly string[]): void;

package/dist/types/dom/context.d.ts

@@ -59,6 +59,8 @@ export interface ViewContext<D = unknown> {
     /** Refreshes parts of an item element that depend on position (time label). */
     refreshItemEl(el: HTMLElement, meta: ElMeta<D>): void;
     destroyItemEl(el: HTMLElement): void;
+    /** Sets or clears (empty `text`) an element's hover tooltip through `opts.tooltip`. */
+    tooltip(el: HTMLElement, text: string): void;
     /** Builds a nav link (day number / header) for a day. */
     navLink(day: Day, label: Node | string, cls: string): HTMLElement;
     openMore(day: Day, anchor: HTMLElement, jsEvent: MouseEvent | KeyboardEvent, itemIds?: readonly string[]): void;

package/dist/types/dom/options.d.cts

@@ -433,6 +433,12 @@ export interface CalendarOptions<D = unknown> {
     }) => void;
     /** Return false to skip the built-in popover. */
     onMoreClick?: (arg: MoreArg<D>) => boolean | void;
+    /**
+     * Shows `text` as `el`'s hover tooltip; an empty `text` clears it. Default:
+     * the `title` attribute. Hosts with their own tooltips (Obsidian's
+     * `setTooltip`, say) pass them here.
+     */
+    tooltip?: (el: HTMLElement, text: string) => void;
     itemContent?: (arg: ItemArg<D>) => Node | string | null | undefined;
     itemClassNames?: (arg: ItemArg<D>) => string[] | string | undefined;
     itemDidMount?: (arg: ItemArg<D>) => void;

package/dist/types/dom/options.d.ts

@@ -433,6 +433,12 @@ export interface CalendarOptions<D = unknown> {
     }) => void;
     /** Return false to skip the built-in popover. */
     onMoreClick?: (arg: MoreArg<D>) => boolean | void;
+    /**
+     * Shows `text` as `el`'s hover tooltip; an empty `text` clears it. Default:
+     * the `title` attribute. Hosts with their own tooltips (Obsidian's
+     * `setTooltip`, say) pass them here.
+     */
+    tooltip?: (el: HTMLElement, text: string) => void;
     itemContent?: (arg: ItemArg<D>) => Node | string | null | undefined;
     itemClassNames?: (arg: ItemArg<D>) => string[] | string | undefined;
     itemDidMount?: (arg: ItemArg<D>) => void;

package/package.json

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