@tasknotes/calendar 0.1.4 → 0.1.5

package/CHANGELOG.md

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

@@ -224,9 +224,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) */

package/dist/cjs/index.cjs

@@ -1210,17 +1210,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;
@@ -2005,17 +2010,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, {
@@ -2103,7 +2113,8 @@ var TimeGridView = class {
     const hiddenByCluster = /* @__PURE__ */ new Map();
     pool.begin();
     for (const p of placements) {
-      if (withMore && maxStack > 0 && p.cols > maxStack && p.col >= maxStack - 1) {
+      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: [] };
         rec.count++;
         rec.start = Math.min(rec.start, p.startMin);
@@ -2112,7 +2123,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;
@@ -3283,7 +3294,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 +3320,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 +3330,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 +3346,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 +3363,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 +3372,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 +3382,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) {
@@ -3765,7 +3777,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 +3922,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

@@ -1118,17 +1118,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;
@@ -1913,17 +1918,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, {
@@ -2011,7 +2021,8 @@ var TimeGridView = class {
     const hiddenByCluster = /* @__PURE__ */ new Map();
     pool.begin();
     for (const p of placements) {
-      if (withMore && maxStack > 0 && p.cols > maxStack && p.col >= maxStack - 1) {
+      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: [] };
         rec.count++;
         rec.start = Math.min(rec.start, p.startMin);
@@ -2020,7 +2031,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;
@@ -3191,7 +3202,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 +3228,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 +3238,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 +3254,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 +3271,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 +3280,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 +3290,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) {
@@ -3673,7 +3685,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 +3830,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-26DEUGQH.js → chunk-25TY2UVR.js}

@@ -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;
@@ -1307,17 +1312,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, {
@@ -1405,7 +1415,8 @@ var TimeGridView = class {
     const hiddenByCluster = /* @__PURE__ */ new Map();
     pool.begin();
     for (const p of placements) {
-      if (withMore && maxStack > 0 && p.cols > maxStack && p.col >= maxStack - 1) {
+      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: [] };
         rec.count++;
         rec.start = Math.min(rec.start, p.startMin);
@@ -1414,7 +1425,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;
@@ -2585,7 +2596,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 +2622,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 +2632,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 +2648,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 +2665,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 +2674,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 +2684,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) {
@@ -3067,7 +3079,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 +3224,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/index.js

@@ -7,7 +7,7 @@ import {
   TIMELINE_UNIT_DAYS,
   defaultOptions,
   localeFirstDay
-} from "./chunk-26DEUGQH.js";
+} from "./chunk-25TY2UVR.js";
 import {
   DAY_MS,
   ItemStore,

package/dist/esm/react.js

@@ -1,6 +1,6 @@
 import {
   Calendar
-} from "./chunk-26DEUGQH.js";
+} from "./chunk-25TY2UVR.js";
 import "./chunk-DVMZ5OXN.js";
 
 // src/react/index.tsx

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.5",
 	"description": "Task-native calendar engine for TaskNotes: incremental layout, time grid, month, list, year and timeline views.",
 	"license": "MIT",
 	"type": "module",