@tasknotes/calendar 0.1.4 → 0.1.6

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # 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
+
+- Host-managed `CalendarItem.preview` placements for group drags. They use mirror styling, are non-interactive and hidden from assistive navigation, and remain visible beyond month/all-day event limits and timed stack limits. Multiple overflow previews stack separately.
+  - Supports the TaskNotes batch-scheduling workflow requested by @mnicolas94 in [Discussion 2435](https://github.com/callumalpass/tasknotes/discussions/2435), with the existing limitations clarified by @Thanatos9404.
+
+### Fixed
+
+- The dragged anchor remains visible when moving into a timed cluster limited by `eventMaxStack`.
+
 ## 0.1.4
 
 ### Added

package/README.md

@@ -41,6 +41,7 @@ The host persists changes; the calendar supplies optimistic updates and a
 - **Items** take `start`/`end` as `YYYY-MM-DD` (all-day) or `YYYY-MM-DDTHH:mm` (floating, read in the calendar's zone), ISO strings with an offset, or epoch ms. `end` is exclusive. Optional fields: `allDay`, `color`, `kind`, `lane` (`"plan"`/`"actual"`), `display: "background"`, `completed`, `dependsOn`, `rev` (cheap change signature), `data`.
 - **Updates** are incremental: `setItems` diffs against the previous set, and `upsertItems`/`removeItems` re-render only the days touched. Render hooks (`itemDidMount`, …) fire only for elements that actually change, but every callback's `item` is the object most recently passed in for that id, so `item.data` is never stale.
 - **Render hooks** (`itemContent`, `itemClassNames`, `itemDidMount`, `itemWillUnmount`, `listItemContent`) get `variant` (`"timed"`, `"bar"`, `"dot"`, `"indicator"`, `"list"`, `"timeline"`) and `timeText`, the time label in the calendar's locale and hour format (`"9am – 10:30am"` for timed, list and timeline items, the start for bars and dots, empty for all-day items).
+- **Preview items**: set `preview: true` on a temporary item passed through `upsertItems` to show a host-managed group-drag placement. Previews have mirror styling, are hidden from assistive navigation, cannot be activated or edited, and remain visible beyond month/all-day event limits and timed stack limits. Multiple overflow previews stack without covering each other. `itemDidMount` reports `isMirror: true`. Restore the original item (or remove the preview ID) on drop, cancellation, source refresh and teardown; this flag does not persist or automatically commit a group.
 - **Drags** move the item itself with the pointer in every view (time grid, all-day row, month, timeline), for mouse and touch; the dragged item is never folded into "+N more".
 - **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.

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,
@@ -224,9 +238,10 @@
 	opacity: 0.92;
 }
 .tnc-item.is-mirror {
+	z-index: 40 !important;
 	opacity: 0.8;
 	border-style: dashed !important;
-	pointer-events: none;
+	pointer-events: none !important;
 }
 
 /* timed (time grid) */
@@ -611,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];
@@ -1210,17 +1227,22 @@ var DayGridView = class {
     const n = w.days.length;
     const hidden = new Array(n).fill([]).map(() => []);
     w.pool.begin();
+    const previewLevels = new Array(n).fill(0);
     let maxLevel = -1;
     for (const p of row.placements) {
       let level = p.level;
       let room = Infinity;
       for (let c = p.startCol; c < p.endCol; c++) room = Math.min(room, visible(c));
       if (level >= room) {
-        if (p.item.id !== ctx.draggingId) {
+        if (!p.item.item.preview && p.item.id !== ctx.draggingId) {
           for (let c = p.startCol; c < p.endCol; c++) hidden[c].push(p.item);
           continue;
         }
-        level = Math.max(0, room - 1);
+        if (p.item.item.preview) {
+          level = 0;
+          for (let c = p.startCol; c < p.endCol; c++) level = Math.max(level, visible(c) + 1, previewLevels[c]);
+          for (let c = p.startCol; c < p.endCol; c++) previewLevels[c] = level + 1;
+        } else level = Math.max(0, room - 1);
       }
       maxLevel = Math.max(maxLevel, level);
       const single = !p.item.allDay && p.item.endDay - p.item.startDay <= 1;
@@ -1789,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;
@@ -2005,17 +2032,22 @@ var TimeGridView = class {
     const pool = this.allDayPool;
     pool.begin();
     const hidden = new Array(days.length).fill(0);
+    const previewLevels = new Array(days.length).fill(0);
     let maxLevel = -1;
     for (const p of row.placements) {
       let level = p.level;
       let room = Infinity;
       for (let c = p.startCol; c < p.endCol; c++) room = Math.min(room, visibleLevels(c));
       if (level >= room) {
-        if (p.item.id !== ctx.draggingId) {
+        if (!p.item.item.preview && p.item.id !== ctx.draggingId) {
           for (let c = p.startCol; c < p.endCol; c++) hidden[c]++;
           continue;
         }
-        level = Math.max(0, room - 1);
+        if (p.item.item.preview) {
+          level = 0;
+          for (let c = p.startCol; c < p.endCol; c++) level = Math.max(level, visibleLevels(c) + 1, previewLevels[c]);
+          for (let c = p.startCol; c < p.endCol; c++) previewLevels[c] = level + 1;
+        } else level = Math.max(0, room - 1);
       }
       maxLevel = Math.max(maxLevel, level);
       const el = pool.place(p.item.id, {
@@ -2093,18 +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) {
-      if (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 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, split: p.split, items: [] };
         rec.count++;
         rec.start = Math.min(rec.start, p.startMin);
         rec.end = Math.max(rec.end, p.endMin);
@@ -2112,7 +2146,7 @@ var TimeGridView = class {
         hiddenByCluster.set(p.cluster, rec);
         continue;
       }
-      const cols = withMore && maxStack > 0 ? Math.min(p.cols, maxStack) : p.cols;
+      const cols = !preview && withMore && maxStack > 0 ? Math.min(p.cols, maxStack) : p.cols;
       const span = Math.min(p.span, cols - p.col);
       const left = p.col / cols;
       let width = span / cols;
@@ -2123,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)
       });
     }
@@ -2136,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);
@@ -2923,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;
@@ -3283,7 +3316,7 @@ var Calendar = class {
     return out;
   }
   isEditable(n, what) {
-    if (n.id === EXTERNAL_ID || this.opts.view === "year") return false;
+    if (n.id === EXTERNAL_ID || n.item.preview || this.opts.view === "year") return false;
     if (this.opts.view === "list" && (!this.opts.listAgenda || what === "duration")) return false;
     const it = n.item;
     const base = it.editable ?? this.opts.editable;
@@ -3309,6 +3342,7 @@ var Calendar = class {
   createItemEl(meta) {
     const { n, variant } = meta;
     const it = n.item;
+    const preview = meta.mirror || it.preview === true;
     const el = h(this.doc, "div", "tnc-item");
     el.classList.add(`tnc-item--${variant}`);
     if (it.kind) el.classList.add(`tnc-k-${it.kind.replace(/[^\w-]/g, "-")}`);
@@ -3318,12 +3352,12 @@ var Calendar = class {
     if (!meta.isStart) el.classList.add("is-cont-start");
     if (!meta.isEnd) el.classList.add("is-cont-end");
     if (n.allDay) el.classList.add("is-all-day");
-    if (meta.mirror || n.id === EXTERNAL_ID) el.classList.add("is-mirror");
+    if (preview || n.id === EXTERNAL_ID) el.classList.add("is-mirror");
     if (this.conflicts.has(n.id)) el.classList.add("is-conflict");
     const indicator = variant === "indicator";
-    if (!meta.mirror && !indicator && (this.isEditable(n, "start") || this.isEditable(n, "duration"))) el.classList.add("is-draggable");
+    if (!preview && !indicator && (this.isEditable(n, "start") || this.isEditable(n, "duration"))) el.classList.add("is-draggable");
     if (this.draggingId === n.id) el.classList.add("is-dragging");
-    if (this.selectedIds.has(n.id) && !meta.mirror) el.classList.add("is-selected");
+    if (this.selectedIds.has(n.id) && !preview) el.classList.add("is-selected");
     el.classList.add(...classList(it.className));
     const arg = this.itemArg(el, meta);
     el.classList.add(...classList(this.opts.itemClassNames?.(arg)));
@@ -3334,7 +3368,7 @@ var Calendar = class {
     if (it.backgroundColor) el.style.setProperty("--tnc-bg", it.backgroundColor);
     if (it.borderColor) el.style.setProperty("--tnc-border", it.borderColor);
     if (it.textColor) el.style.setProperty("--tnc-fg", it.textColor);
-    if (indicator) el.setAttribute("aria-hidden", "true");
+    if (indicator || preview) el.setAttribute("aria-hidden", "true");
     else if (it.display !== "background") {
       el.tabIndex = 0;
       el.setAttribute("role", "button");
@@ -3351,7 +3385,7 @@ var Calendar = class {
     } else {
       el.append(this.defaultContent(meta));
     }
-    if (variant !== "list" && !indicator && it.display !== "background") this.addHandles(el, meta);
+    if (!preview && variant !== "list" && !indicator && it.display !== "background") this.addHandles(el, meta);
     this.opts.itemDidMount?.(arg);
     return el;
   }
@@ -3360,7 +3394,7 @@ var Calendar = class {
     if (time) this.fillTime(time, meta.n, meta.variant, meta.day);
     el.classList.toggle("is-dragging", this.draggingId === meta.n.id);
     el.classList.toggle("is-conflict", this.conflicts.has(meta.n.id));
-    el.classList.toggle("is-selected", this.selectedIds.has(meta.n.id) && !meta.mirror);
+    el.classList.toggle("is-selected", this.selectedIds.has(meta.n.id) && !meta.mirror && !meta.n.item.preview);
   }
   selectedSet() {
     const s = this.opts.selected;
@@ -3370,7 +3404,7 @@ var Calendar = class {
     this.selectedIds = this.selectedSet();
     for (const el of this.viewHost.querySelectorAll(".tnc-item")) {
       const meta = this.meta.get(el);
-      if (meta) el.classList.toggle("is-selected", this.selectedIds.has(meta.n.id) && !meta.mirror);
+      if (meta) el.classList.toggle("is-selected", this.selectedIds.has(meta.n.id) && !meta.mirror && !meta.n.item.preview);
     }
   }
   destroyItemEl(el) {
@@ -3690,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" });
@@ -3765,7 +3811,7 @@ var Calendar = class {
       day: meta.day,
       isStart: meta.isStart,
       isEnd: meta.isEnd,
-      isMirror: meta.mirror,
+      isMirror: meta.mirror || meta.n.item.preview === true,
       variant: meta.variant,
       timeText: meta.n.allDay ? "" : end ? `${start} \u2013 ${end}` : start
     };
@@ -3910,7 +3956,7 @@ var Calendar = class {
   }
   itemElFrom(target) {
     const el = target?.closest?.(".tnc-item");
-    return el && this.root.contains(el) && this.meta.has(el) ? el : null;
+    return el && this.root.contains(el) && this.meta.has(el) && !this.meta.get(el)?.n.item.preview ? el : null;
   }
   onDocPointerDown = (ev) => {
     const t = ev.target;

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];
@@ -1118,17 +1135,22 @@ var DayGridView = class {
     const n = w.days.length;
     const hidden = new Array(n).fill([]).map(() => []);
     w.pool.begin();
+    const previewLevels = new Array(n).fill(0);
     let maxLevel = -1;
     for (const p of row.placements) {
       let level = p.level;
       let room = Infinity;
       for (let c = p.startCol; c < p.endCol; c++) room = Math.min(room, visible(c));
       if (level >= room) {
-        if (p.item.id !== ctx.draggingId) {
+        if (!p.item.item.preview && p.item.id !== ctx.draggingId) {
           for (let c = p.startCol; c < p.endCol; c++) hidden[c].push(p.item);
           continue;
         }
-        level = Math.max(0, room - 1);
+        if (p.item.item.preview) {
+          level = 0;
+          for (let c = p.startCol; c < p.endCol; c++) level = Math.max(level, visible(c) + 1, previewLevels[c]);
+          for (let c = p.startCol; c < p.endCol; c++) previewLevels[c] = level + 1;
+        } else level = Math.max(0, room - 1);
       }
       maxLevel = Math.max(maxLevel, level);
       const single = !p.item.allDay && p.item.endDay - p.item.startDay <= 1;
@@ -1697,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;
@@ -1913,17 +1940,22 @@ var TimeGridView = class {
     const pool = this.allDayPool;
     pool.begin();
     const hidden = new Array(days.length).fill(0);
+    const previewLevels = new Array(days.length).fill(0);
     let maxLevel = -1;
     for (const p of row.placements) {
       let level = p.level;
       let room = Infinity;
       for (let c = p.startCol; c < p.endCol; c++) room = Math.min(room, visibleLevels(c));
       if (level >= room) {
-        if (p.item.id !== ctx.draggingId) {
+        if (!p.item.item.preview && p.item.id !== ctx.draggingId) {
           for (let c = p.startCol; c < p.endCol; c++) hidden[c]++;
           continue;
         }
-        level = Math.max(0, room - 1);
+        if (p.item.item.preview) {
+          level = 0;
+          for (let c = p.startCol; c < p.endCol; c++) level = Math.max(level, visibleLevels(c) + 1, previewLevels[c]);
+          for (let c = p.startCol; c < p.endCol; c++) previewLevels[c] = level + 1;
+        } else level = Math.max(0, room - 1);
       }
       maxLevel = Math.max(maxLevel, level);
       const el = pool.place(p.item.id, {
@@ -2001,18 +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) {
-      if (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 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, split: p.split, items: [] };
         rec.count++;
         rec.start = Math.min(rec.start, p.startMin);
         rec.end = Math.max(rec.end, p.endMin);
@@ -2020,7 +2054,7 @@ var TimeGridView = class {
         hiddenByCluster.set(p.cluster, rec);
         continue;
       }
-      const cols = withMore && maxStack > 0 ? Math.min(p.cols, maxStack) : p.cols;
+      const cols = !preview && withMore && maxStack > 0 ? Math.min(p.cols, maxStack) : p.cols;
       const span = Math.min(p.span, cols - p.col);
       const left = p.col / cols;
       let width = span / cols;
@@ -2031,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)
       });
     }
@@ -2044,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);
@@ -2831,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;
@@ -3191,7 +3224,7 @@ var Calendar = class {
     return out;
   }
   isEditable(n, what) {
-    if (n.id === EXTERNAL_ID || this.opts.view === "year") return false;
+    if (n.id === EXTERNAL_ID || n.item.preview || this.opts.view === "year") return false;
     if (this.opts.view === "list" && (!this.opts.listAgenda || what === "duration")) return false;
     const it = n.item;
     const base = it.editable ?? this.opts.editable;
@@ -3217,6 +3250,7 @@ var Calendar = class {
   createItemEl(meta) {
     const { n, variant } = meta;
     const it = n.item;
+    const preview = meta.mirror || it.preview === true;
     const el = h(this.doc, "div", "tnc-item");
     el.classList.add(`tnc-item--${variant}`);
     if (it.kind) el.classList.add(`tnc-k-${it.kind.replace(/[^\w-]/g, "-")}`);
@@ -3226,12 +3260,12 @@ var Calendar = class {
     if (!meta.isStart) el.classList.add("is-cont-start");
     if (!meta.isEnd) el.classList.add("is-cont-end");
     if (n.allDay) el.classList.add("is-all-day");
-    if (meta.mirror || n.id === EXTERNAL_ID) el.classList.add("is-mirror");
+    if (preview || n.id === EXTERNAL_ID) el.classList.add("is-mirror");
     if (this.conflicts.has(n.id)) el.classList.add("is-conflict");
     const indicator = variant === "indicator";
-    if (!meta.mirror && !indicator && (this.isEditable(n, "start") || this.isEditable(n, "duration"))) el.classList.add("is-draggable");
+    if (!preview && !indicator && (this.isEditable(n, "start") || this.isEditable(n, "duration"))) el.classList.add("is-draggable");
     if (this.draggingId === n.id) el.classList.add("is-dragging");
-    if (this.selectedIds.has(n.id) && !meta.mirror) el.classList.add("is-selected");
+    if (this.selectedIds.has(n.id) && !preview) el.classList.add("is-selected");
     el.classList.add(...classList(it.className));
     const arg = this.itemArg(el, meta);
     el.classList.add(...classList(this.opts.itemClassNames?.(arg)));
@@ -3242,7 +3276,7 @@ var Calendar = class {
     if (it.backgroundColor) el.style.setProperty("--tnc-bg", it.backgroundColor);
     if (it.borderColor) el.style.setProperty("--tnc-border", it.borderColor);
     if (it.textColor) el.style.setProperty("--tnc-fg", it.textColor);
-    if (indicator) el.setAttribute("aria-hidden", "true");
+    if (indicator || preview) el.setAttribute("aria-hidden", "true");
     else if (it.display !== "background") {
       el.tabIndex = 0;
       el.setAttribute("role", "button");
@@ -3259,7 +3293,7 @@ var Calendar = class {
     } else {
       el.append(this.defaultContent(meta));
     }
-    if (variant !== "list" && !indicator && it.display !== "background") this.addHandles(el, meta);
+    if (!preview && variant !== "list" && !indicator && it.display !== "background") this.addHandles(el, meta);
     this.opts.itemDidMount?.(arg);
     return el;
   }
@@ -3268,7 +3302,7 @@ var Calendar = class {
     if (time) this.fillTime(time, meta.n, meta.variant, meta.day);
     el.classList.toggle("is-dragging", this.draggingId === meta.n.id);
     el.classList.toggle("is-conflict", this.conflicts.has(meta.n.id));
-    el.classList.toggle("is-selected", this.selectedIds.has(meta.n.id) && !meta.mirror);
+    el.classList.toggle("is-selected", this.selectedIds.has(meta.n.id) && !meta.mirror && !meta.n.item.preview);
   }
   selectedSet() {
     const s = this.opts.selected;
@@ -3278,7 +3312,7 @@ var Calendar = class {
     this.selectedIds = this.selectedSet();
     for (const el of this.viewHost.querySelectorAll(".tnc-item")) {
       const meta = this.meta.get(el);
-      if (meta) el.classList.toggle("is-selected", this.selectedIds.has(meta.n.id) && !meta.mirror);
+      if (meta) el.classList.toggle("is-selected", this.selectedIds.has(meta.n.id) && !meta.mirror && !meta.n.item.preview);
     }
   }
   destroyItemEl(el) {
@@ -3598,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" });
@@ -3673,7 +3719,7 @@ var Calendar = class {
       day: meta.day,
       isStart: meta.isStart,
       isEnd: meta.isEnd,
-      isMirror: meta.mirror,
+      isMirror: meta.mirror || meta.n.item.preview === true,
       variant: meta.variant,
       timeText: meta.n.allDay ? "" : end ? `${start} \u2013 ${end}` : start
     };
@@ -3818,7 +3864,7 @@ var Calendar = class {
   }
   itemElFrom(target) {
     const el = target?.closest?.(".tnc-item");
-    return el && this.root.contains(el) && this.meta.has(el) ? el : null;
+    return el && this.root.contains(el) && this.meta.has(el) && !this.meta.get(el)?.n.item.preview ? el : null;
   }
   onDocPointerDown = (ev) => {
     const t = ev.target;

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-26DEUGQH.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 {
@@ -512,17 +512,22 @@ var DayGridView = class {
     const n = w.days.length;
     const hidden = new Array(n).fill([]).map(() => []);
     w.pool.begin();
+    const previewLevels = new Array(n).fill(0);
     let maxLevel = -1;
     for (const p of row.placements) {
       let level = p.level;
       let room = Infinity;
       for (let c = p.startCol; c < p.endCol; c++) room = Math.min(room, visible(c));
       if (level >= room) {
-        if (p.item.id !== ctx.draggingId) {
+        if (!p.item.item.preview && p.item.id !== ctx.draggingId) {
           for (let c = p.startCol; c < p.endCol; c++) hidden[c].push(p.item);
           continue;
         }
-        level = Math.max(0, room - 1);
+        if (p.item.item.preview) {
+          level = 0;
+          for (let c = p.startCol; c < p.endCol; c++) level = Math.max(level, visible(c) + 1, previewLevels[c]);
+          for (let c = p.startCol; c < p.endCol; c++) previewLevels[c] = level + 1;
+        } else level = Math.max(0, room - 1);
       }
       maxLevel = Math.max(maxLevel, level);
       const single = !p.item.allDay && p.item.endDay - p.item.startDay <= 1;
@@ -1091,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;
@@ -1307,17 +1317,22 @@ var TimeGridView = class {
     const pool = this.allDayPool;
     pool.begin();
     const hidden = new Array(days.length).fill(0);
+    const previewLevels = new Array(days.length).fill(0);
     let maxLevel = -1;
     for (const p of row.placements) {
       let level = p.level;
       let room = Infinity;
       for (let c = p.startCol; c < p.endCol; c++) room = Math.min(room, visibleLevels(c));
       if (level >= room) {
-        if (p.item.id !== ctx.draggingId) {
+        if (!p.item.item.preview && p.item.id !== ctx.draggingId) {
           for (let c = p.startCol; c < p.endCol; c++) hidden[c]++;
           continue;
         }
-        level = Math.max(0, room - 1);
+        if (p.item.item.preview) {
+          level = 0;
+          for (let c = p.startCol; c < p.endCol; c++) level = Math.max(level, visibleLevels(c) + 1, previewLevels[c]);
+          for (let c = p.startCol; c < p.endCol; c++) previewLevels[c] = level + 1;
+        } else level = Math.max(0, room - 1);
       }
       maxLevel = Math.max(maxLevel, level);
       const el = pool.place(p.item.id, {
@@ -1395,18 +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) {
-      if (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 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, split: p.split, items: [] };
         rec.count++;
         rec.start = Math.min(rec.start, p.startMin);
         rec.end = Math.max(rec.end, p.endMin);
@@ -1414,7 +1431,7 @@ var TimeGridView = class {
         hiddenByCluster.set(p.cluster, rec);
         continue;
       }
-      const cols = withMore && maxStack > 0 ? Math.min(p.cols, maxStack) : p.cols;
+      const cols = !preview && withMore && maxStack > 0 ? Math.min(p.cols, maxStack) : p.cols;
       const span = Math.min(p.span, cols - p.col);
       const left = p.col / cols;
       let width = span / cols;
@@ -1425,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)
       });
     }
@@ -1438,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);
@@ -2225,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;
@@ -2585,7 +2601,7 @@ var Calendar = class {
     return out;
   }
   isEditable(n, what) {
-    if (n.id === EXTERNAL_ID || this.opts.view === "year") return false;
+    if (n.id === EXTERNAL_ID || n.item.preview || this.opts.view === "year") return false;
     if (this.opts.view === "list" && (!this.opts.listAgenda || what === "duration")) return false;
     const it = n.item;
     const base = it.editable ?? this.opts.editable;
@@ -2611,6 +2627,7 @@ var Calendar = class {
   createItemEl(meta) {
     const { n, variant } = meta;
     const it = n.item;
+    const preview = meta.mirror || it.preview === true;
     const el = h(this.doc, "div", "tnc-item");
     el.classList.add(`tnc-item--${variant}`);
     if (it.kind) el.classList.add(`tnc-k-${it.kind.replace(/[^\w-]/g, "-")}`);
@@ -2620,12 +2637,12 @@ var Calendar = class {
     if (!meta.isStart) el.classList.add("is-cont-start");
     if (!meta.isEnd) el.classList.add("is-cont-end");
     if (n.allDay) el.classList.add("is-all-day");
-    if (meta.mirror || n.id === EXTERNAL_ID) el.classList.add("is-mirror");
+    if (preview || n.id === EXTERNAL_ID) el.classList.add("is-mirror");
     if (this.conflicts.has(n.id)) el.classList.add("is-conflict");
     const indicator = variant === "indicator";
-    if (!meta.mirror && !indicator && (this.isEditable(n, "start") || this.isEditable(n, "duration"))) el.classList.add("is-draggable");
+    if (!preview && !indicator && (this.isEditable(n, "start") || this.isEditable(n, "duration"))) el.classList.add("is-draggable");
     if (this.draggingId === n.id) el.classList.add("is-dragging");
-    if (this.selectedIds.has(n.id) && !meta.mirror) el.classList.add("is-selected");
+    if (this.selectedIds.has(n.id) && !preview) el.classList.add("is-selected");
     el.classList.add(...classList(it.className));
     const arg = this.itemArg(el, meta);
     el.classList.add(...classList(this.opts.itemClassNames?.(arg)));
@@ -2636,7 +2653,7 @@ var Calendar = class {
     if (it.backgroundColor) el.style.setProperty("--tnc-bg", it.backgroundColor);
     if (it.borderColor) el.style.setProperty("--tnc-border", it.borderColor);
     if (it.textColor) el.style.setProperty("--tnc-fg", it.textColor);
-    if (indicator) el.setAttribute("aria-hidden", "true");
+    if (indicator || preview) el.setAttribute("aria-hidden", "true");
     else if (it.display !== "background") {
       el.tabIndex = 0;
       el.setAttribute("role", "button");
@@ -2653,7 +2670,7 @@ var Calendar = class {
     } else {
       el.append(this.defaultContent(meta));
     }
-    if (variant !== "list" && !indicator && it.display !== "background") this.addHandles(el, meta);
+    if (!preview && variant !== "list" && !indicator && it.display !== "background") this.addHandles(el, meta);
     this.opts.itemDidMount?.(arg);
     return el;
   }
@@ -2662,7 +2679,7 @@ var Calendar = class {
     if (time) this.fillTime(time, meta.n, meta.variant, meta.day);
     el.classList.toggle("is-dragging", this.draggingId === meta.n.id);
     el.classList.toggle("is-conflict", this.conflicts.has(meta.n.id));
-    el.classList.toggle("is-selected", this.selectedIds.has(meta.n.id) && !meta.mirror);
+    el.classList.toggle("is-selected", this.selectedIds.has(meta.n.id) && !meta.mirror && !meta.n.item.preview);
   }
   selectedSet() {
     const s = this.opts.selected;
@@ -2672,7 +2689,7 @@ var Calendar = class {
     this.selectedIds = this.selectedSet();
     for (const el of this.viewHost.querySelectorAll(".tnc-item")) {
       const meta = this.meta.get(el);
-      if (meta) el.classList.toggle("is-selected", this.selectedIds.has(meta.n.id) && !meta.mirror);
+      if (meta) el.classList.toggle("is-selected", this.selectedIds.has(meta.n.id) && !meta.mirror && !meta.n.item.preview);
     }
   }
   destroyItemEl(el) {
@@ -2992,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" });
@@ -3067,7 +3096,7 @@ var Calendar = class {
       day: meta.day,
       isStart: meta.isStart,
       isEnd: meta.isEnd,
-      isMirror: meta.mirror,
+      isMirror: meta.mirror || meta.n.item.preview === true,
       variant: meta.variant,
       timeText: meta.n.allDay ? "" : end ? `${start} \u2013 ${end}` : start
     };
@@ -3212,7 +3241,7 @@ var Calendar = class {
   }
   itemElFrom(target) {
     const el = target?.closest?.(".tnc-item");
-    return el && this.root.contains(el) && this.meta.has(el) ? el : null;
+    return el && this.root.contains(el) && this.meta.has(el) && !this.meta.get(el)?.n.item.preview ? el : null;
   }
   onDocPointerDown = (ev) => {
     const t = ev.target;

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-26DEUGQH.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-26DEUGQH.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/dist/types/core/types.d.cts

@@ -26,6 +26,8 @@ export interface CalendarItem<D = unknown> {
     borderColor?: string;
     textColor?: string;
     className?: string | string[];
+    /** Host-managed temporary placement: inert, mirror-styled and never hidden by event limits. */
+    preview?: boolean;
     /** Overrides the calendar-wide `editable` option. */
     editable?: boolean;
     startEditable?: boolean;

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

@@ -26,6 +26,8 @@ export interface CalendarItem<D = unknown> {
     borderColor?: string;
     textColor?: string;
     className?: string | string[];
+    /** Host-managed temporary placement: inert, mirror-styled and never hidden by event limits. */
+    preview?: boolean;
     /** Overrides the calendar-wide `editable` option. */
     editable?: boolean;
     startEditable?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tasknotes/calendar",
-	"version": "0.1.4",
+	"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",