@tasknotes/calendar 0.1.5 → 0.1.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 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/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,
@@ -612,31 +626,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;

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

package/dist/cjs/index.cjs

@@ -532,7 +532,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);
@@ -552,7 +552,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];
@@ -1794,6 +1811,11 @@ var DateStrip = class {
 
 // src/dom/views/timegrid.ts
 var BAR_GAP2 = 2;
+function inLane(lane, split, left, width) {
+  const [x, w] = !split ? ["1px", "100% - 9px"] : lane === "plan" ? ["1px", "100% - var(--tnc-actual-w) - 5px"] : ["100% - var(--tnc-actual-w) - 2px", "var(--tnc-actual-w)"];
+  const f = (n) => Math.round(n * 1e4) / 1e4;
+  return { left: `calc(${x} + (${w}) * ${f(left)})`, width: `calc((${w}) * ${f(width)} - 1px)` };
+}
 var TimeGridView = class {
   constructor(ctx) {
     this.ctx = ctx;
@@ -2103,19 +2125,20 @@ var TimeGridView = class {
     c.bg.end();
     const hasActual = layout.actual.length > 0;
     c.col.classList.toggle("has-actual", hasActual);
-    this.placeLane(c.plan, layout.plan, c, top, height, true);
-    this.placeLane(c.actual, layout.actual, c, top, height, false);
+    this.placeLane(c.plan, layout.plan, c, top, height, "plan");
+    this.placeLane(c.actual, layout.actual, c, top, height, "actual");
   }
-  placeLane(pool, placements, c, top, height, withMore) {
+  placeLane(pool, placements, c, top, height, lane) {
     const { ctx } = this;
     const { opts } = ctx;
+    const withMore = lane === "plan";
     const maxStack = opts.eventMaxStack;
     const hiddenByCluster = /* @__PURE__ */ new Map();
     pool.begin();
     for (const p of placements) {
       const preview = p.item.item.preview || p.item.id === ctx.draggingId;
       if (!preview && withMore && maxStack > 0 && p.cols > maxStack && p.col >= maxStack - 1) {
-        const rec = hiddenByCluster.get(p.cluster) ?? { count: 0, start: p.startMin, end: p.endMin, items: [] };
+        const rec = hiddenByCluster.get(p.cluster) ?? { count: 0, start: p.startMin, end: p.endMin, split: p.split, items: [] };
         rec.count++;
         rec.start = Math.min(rec.start, p.startMin);
         rec.end = Math.max(rec.end, p.endMin);
@@ -2134,8 +2157,7 @@ var TimeGridView = class {
       setStyle(el, {
         top: top(p.startMin),
         height: `max(${height(p)}, ${opts.eventMinHeight}px)`,
-        left: pct(left),
-        width: `calc(${pct(width)} - 1px)`,
+        ...inLane(lane, p.split, left, width),
         "z-index": String(p.col + 1)
       });
     }
@@ -2147,8 +2169,7 @@ var TimeGridView = class {
       const cols = maxStack;
       setStyle(link, {
         top: top(rec.start),
-        left: pct((cols - 1) / cols),
-        width: `calc(${pct(1 / cols)} - 1px)`
+        ...inLane(lane, rec.split, (cols - 1) / cols, 1 / cols)
       });
       link.addEventListener("click", (ev) => ctx.openMore(c.day, link, ev));
       c.more.append(link);
@@ -2934,6 +2955,7 @@ ${this.ctx.text.more(items.length - 8)}` : ""}` : label;
 
 // src/dom/calendar.ts
 var EXTERNAL_ID = "__tnc_external__";
+var SVG_NS = "http://www.w3.org/2000/svg";
 var MAX_AGENDA_DAYS = 366;
 function sameOption(a, b, depth = 0) {
   if (a === b) return true;
@@ -3702,14 +3724,26 @@ var Calendar = class {
       if (e.icon) b.replaceChildren(e.icon());
       return b;
     });
+    const chevron = (d) => {
+      const svg = this.doc.createElementNS(SVG_NS, "svg");
+      setAttrs(svg, { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" });
+      const path = this.doc.createElementNS(SVG_NS, "path");
+      path.setAttribute("d", d);
+      svg.append(path);
+      return svg;
+    };
+    const prev = btn("", this.text.prev, "tnc-btn-prev", () => this.prev());
+    prev.append(chevron("m15 18-6-6 6-6"));
+    const next = btn("", this.text.next, "tnc-btn-next", () => this.next());
+    next.append(chevron("m9 18 6-6-6-6"));
     const nav = h(
       this.doc,
       "div",
       "tnc-toolbar-group tnc-toolbar-nav",
       null,
-      btn("\u2039", this.text.prev, "tnc-btn-prev", () => this.prev()),
+      prev,
       btn(this.text.today, this.text.today, "tnc-btn-today", () => this.goToday()),
-      btn("\u203A", this.text.next, "tnc-btn-next", () => this.next())
+      next
     );
     const title = h(this.doc, "h2", "tnc-title", { "aria-live": "polite" }, this.view.title);
     const viewGroup = h(this.doc, "div", "tnc-toolbar-group tnc-toolbar-views", { role: "group" });

package/dist/cjs/react.cjs

@@ -859,7 +859,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);
@@ -879,7 +879,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];
@@ -1702,6 +1719,11 @@ var DateStrip = class {
 
 // src/dom/views/timegrid.ts
 var BAR_GAP2 = 2;
+function inLane(lane, split, left, width) {
+  const [x, w] = !split ? ["1px", "100% - 9px"] : lane === "plan" ? ["1px", "100% - var(--tnc-actual-w) - 5px"] : ["100% - var(--tnc-actual-w) - 2px", "var(--tnc-actual-w)"];
+  const f = (n) => Math.round(n * 1e4) / 1e4;
+  return { left: `calc(${x} + (${w}) * ${f(left)})`, width: `calc((${w}) * ${f(width)} - 1px)` };
+}
 var TimeGridView = class {
   constructor(ctx) {
     this.ctx = ctx;
@@ -2011,19 +2033,20 @@ var TimeGridView = class {
     c.bg.end();
     const hasActual = layout.actual.length > 0;
     c.col.classList.toggle("has-actual", hasActual);
-    this.placeLane(c.plan, layout.plan, c, top, height, true);
-    this.placeLane(c.actual, layout.actual, c, top, height, false);
+    this.placeLane(c.plan, layout.plan, c, top, height, "plan");
+    this.placeLane(c.actual, layout.actual, c, top, height, "actual");
   }
-  placeLane(pool, placements, c, top, height, withMore) {
+  placeLane(pool, placements, c, top, height, lane) {
     const { ctx } = this;
     const { opts } = ctx;
+    const withMore = lane === "plan";
     const maxStack = opts.eventMaxStack;
     const hiddenByCluster = /* @__PURE__ */ new Map();
     pool.begin();
     for (const p of placements) {
       const preview = p.item.item.preview || p.item.id === ctx.draggingId;
       if (!preview && withMore && maxStack > 0 && p.cols > maxStack && p.col >= maxStack - 1) {
-        const rec = hiddenByCluster.get(p.cluster) ?? { count: 0, start: p.startMin, end: p.endMin, items: [] };
+        const rec = hiddenByCluster.get(p.cluster) ?? { count: 0, start: p.startMin, end: p.endMin, split: p.split, items: [] };
         rec.count++;
         rec.start = Math.min(rec.start, p.startMin);
         rec.end = Math.max(rec.end, p.endMin);
@@ -2042,8 +2065,7 @@ var TimeGridView = class {
       setStyle(el, {
         top: top(p.startMin),
         height: `max(${height(p)}, ${opts.eventMinHeight}px)`,
-        left: pct(left),
-        width: `calc(${pct(width)} - 1px)`,
+        ...inLane(lane, p.split, left, width),
         "z-index": String(p.col + 1)
       });
     }
@@ -2055,8 +2077,7 @@ var TimeGridView = class {
       const cols = maxStack;
       setStyle(link, {
         top: top(rec.start),
-        left: pct((cols - 1) / cols),
-        width: `calc(${pct(1 / cols)} - 1px)`
+        ...inLane(lane, rec.split, (cols - 1) / cols, 1 / cols)
       });
       link.addEventListener("click", (ev) => ctx.openMore(c.day, link, ev));
       c.more.append(link);
@@ -2842,6 +2863,7 @@ ${this.ctx.text.more(items.length - 8)}` : ""}` : label;
 
 // src/dom/calendar.ts
 var EXTERNAL_ID = "__tnc_external__";
+var SVG_NS = "http://www.w3.org/2000/svg";
 var MAX_AGENDA_DAYS = 366;
 function sameOption(a, b, depth = 0) {
   if (a === b) return true;
@@ -3610,14 +3632,26 @@ var Calendar = class {
       if (e.icon) b.replaceChildren(e.icon());
       return b;
     });
+    const chevron = (d) => {
+      const svg = this.doc.createElementNS(SVG_NS, "svg");
+      setAttrs(svg, { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" });
+      const path = this.doc.createElementNS(SVG_NS, "path");
+      path.setAttribute("d", d);
+      svg.append(path);
+      return svg;
+    };
+    const prev = btn("", this.text.prev, "tnc-btn-prev", () => this.prev());
+    prev.append(chevron("m15 18-6-6 6-6"));
+    const next = btn("", this.text.next, "tnc-btn-next", () => this.next());
+    next.append(chevron("m9 18 6-6-6-6"));
     const nav = h(
       this.doc,
       "div",
       "tnc-toolbar-group tnc-toolbar-nav",
       null,
-      btn("\u2039", this.text.prev, "tnc-btn-prev", () => this.prev()),
+      prev,
       btn(this.text.today, this.text.today, "tnc-btn-today", () => this.goToday()),
-      btn("\u203A", this.text.next, "tnc-btn-next", () => this.next())
+      next
     );
     const title = h(this.doc, "h2", "tnc-title", { "aria-live": "polite" }, this.view.title);
     const viewGroup = h(this.doc, "div", "tnc-toolbar-group tnc-toolbar-views", { role: "group" });

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

@@ -455,7 +455,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);
@@ -475,7 +475,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];

package/dist/esm/{chunk-25TY2UVR.js → chunk-URE7QLU3.js}

@@ -27,7 +27,7 @@ import {
   wallTime,
   weekdayOf,
   ymdOfDay
-} from "./chunk-DVMZ5OXN.js";
+} from "./chunk-66A6EMCU.js";
 
 // src/dom/format.ts
 var Formatter = class {
@@ -1096,6 +1096,11 @@ var DateStrip = class {
 
 // src/dom/views/timegrid.ts
 var BAR_GAP2 = 2;
+function inLane(lane, split, left, width) {
+  const [x, w] = !split ? ["1px", "100% - 9px"] : lane === "plan" ? ["1px", "100% - var(--tnc-actual-w) - 5px"] : ["100% - var(--tnc-actual-w) - 2px", "var(--tnc-actual-w)"];
+  const f = (n) => Math.round(n * 1e4) / 1e4;
+  return { left: `calc(${x} + (${w}) * ${f(left)})`, width: `calc((${w}) * ${f(width)} - 1px)` };
+}
 var TimeGridView = class {
   constructor(ctx) {
     this.ctx = ctx;
@@ -1405,19 +1410,20 @@ var TimeGridView = class {
     c.bg.end();
     const hasActual = layout.actual.length > 0;
     c.col.classList.toggle("has-actual", hasActual);
-    this.placeLane(c.plan, layout.plan, c, top, height, true);
-    this.placeLane(c.actual, layout.actual, c, top, height, false);
+    this.placeLane(c.plan, layout.plan, c, top, height, "plan");
+    this.placeLane(c.actual, layout.actual, c, top, height, "actual");
   }
-  placeLane(pool, placements, c, top, height, withMore) {
+  placeLane(pool, placements, c, top, height, lane) {
     const { ctx } = this;
     const { opts } = ctx;
+    const withMore = lane === "plan";
     const maxStack = opts.eventMaxStack;
     const hiddenByCluster = /* @__PURE__ */ new Map();
     pool.begin();
     for (const p of placements) {
       const preview = p.item.item.preview || p.item.id === ctx.draggingId;
       if (!preview && withMore && maxStack > 0 && p.cols > maxStack && p.col >= maxStack - 1) {
-        const rec = hiddenByCluster.get(p.cluster) ?? { count: 0, start: p.startMin, end: p.endMin, items: [] };
+        const rec = hiddenByCluster.get(p.cluster) ?? { count: 0, start: p.startMin, end: p.endMin, split: p.split, items: [] };
         rec.count++;
         rec.start = Math.min(rec.start, p.startMin);
         rec.end = Math.max(rec.end, p.endMin);
@@ -1436,8 +1442,7 @@ var TimeGridView = class {
       setStyle(el, {
         top: top(p.startMin),
         height: `max(${height(p)}, ${opts.eventMinHeight}px)`,
-        left: pct(left),
-        width: `calc(${pct(width)} - 1px)`,
+        ...inLane(lane, p.split, left, width),
         "z-index": String(p.col + 1)
       });
     }
@@ -1449,8 +1454,7 @@ var TimeGridView = class {
       const cols = maxStack;
       setStyle(link, {
         top: top(rec.start),
-        left: pct((cols - 1) / cols),
-        width: `calc(${pct(1 / cols)} - 1px)`
+        ...inLane(lane, rec.split, (cols - 1) / cols, 1 / cols)
       });
       link.addEventListener("click", (ev) => ctx.openMore(c.day, link, ev));
       c.more.append(link);
@@ -2236,6 +2240,7 @@ ${this.ctx.text.more(items.length - 8)}` : ""}` : label;
 
 // src/dom/calendar.ts
 var EXTERNAL_ID = "__tnc_external__";
+var SVG_NS = "http://www.w3.org/2000/svg";
 var MAX_AGENDA_DAYS = 366;
 function sameOption(a, b, depth = 0) {
   if (a === b) return true;
@@ -3004,14 +3009,26 @@ var Calendar = class {
       if (e.icon) b.replaceChildren(e.icon());
       return b;
     });
+    const chevron = (d) => {
+      const svg = this.doc.createElementNS(SVG_NS, "svg");
+      setAttrs(svg, { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" });
+      const path = this.doc.createElementNS(SVG_NS, "path");
+      path.setAttribute("d", d);
+      svg.append(path);
+      return svg;
+    };
+    const prev = btn("", this.text.prev, "tnc-btn-prev", () => this.prev());
+    prev.append(chevron("m15 18-6-6 6-6"));
+    const next = btn("", this.text.next, "tnc-btn-next", () => this.next());
+    next.append(chevron("m9 18 6-6-6-6"));
     const nav = h(
       this.doc,
       "div",
       "tnc-toolbar-group tnc-toolbar-nav",
       null,
-      btn("\u2039", this.text.prev, "tnc-btn-prev", () => this.prev()),
+      prev,
       btn(this.text.today, this.text.today, "tnc-btn-today", () => this.goToday()),
-      btn("\u203A", this.text.next, "tnc-btn-next", () => this.next())
+      next
     );
     const title = h(this.doc, "h2", "tnc-title", { "aria-live": "polite" }, this.view.title);
     const viewGroup = h(this.doc, "div", "tnc-toolbar-group tnc-toolbar-views", { role: "group" });

package/dist/esm/core.js

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

package/dist/esm/index.js

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

package/dist/esm/react.js

@@ -1,7 +1,7 @@
 import {
   Calendar
-} from "./chunk-25TY2UVR.js";
-import "./chunk-DVMZ5OXN.js";
+} from "./chunk-URE7QLU3.js";
+import "./chunk-66A6EMCU.js";
 
 // src/react/index.tsx
 import { useEffect, useLayoutEffect, useRef } from "react";

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

@@ -19,6 +19,11 @@ export interface TimedPlacement<D = unknown> extends TimedSegment<D> {
     span: number;
     /** Index of the overlap cluster within the day. */
     cluster: number;
+    /**
+     * Whether the cluster overlaps an item in the other lane (plan vs actual).
+     * Only then does the item keep to its lane's share of the column.
+     */
+    split: boolean;
 }
 export interface TimedDayLayout<D = unknown> {
     day: Day;

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

@@ -19,6 +19,11 @@ export interface TimedPlacement<D = unknown> extends TimedSegment<D> {
     span: number;
     /** Index of the overlap cluster within the day. */
     cluster: number;
+    /**
+     * Whether the cluster overlaps an item in the other lane (plan vs actual).
+     * Only then does the item keep to its lane's share of the column.
+     */
+    split: boolean;
 }
 export interface TimedDayLayout<D = unknown> {
     day: Day;

package/package.json

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