@nomideusz/svelte-calendar 0.16.0 → 0.20.0

package/dist/views/planner/PlannerScroll.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { TimelineEvent } from '../../core/types.js';
+interface Props {
+    mondayStart?: boolean;
+    locale?: string;
+    height?: number | null;
+    events?: TimelineEvent[];
+    style?: string;
+    focusDate?: Date;
+    /** `anchor` is the chip's viewport rect — a host positions a panel beside it. */
+    oneventclick?: (event: TimelineEvent, anchor?: DOMRect) => void;
+    oneventcreate?: (range: {
+        start: Date;
+        end: Date;
+    }) => void;
+    /** An HTML5 drag from outside the calendar dropped on a day. */
+    onexternaldrop?: (info: {
+        start: Date;
+        dataTransfer: DataTransfer;
+    }) => void;
+    selectedEventId?: string | null;
+    readOnly?: boolean;
+    /** Visible hour range [startHour, endHour) — start hour seeds empty-cell creation */
+    visibleHours?: [number, number];
+    [key: string]: unknown;
+}
+declare const PlannerScroll: import("svelte").Component<Props, {}, "">;
+type PlannerScroll = ReturnType<typeof PlannerScroll>;
+export default PlannerScroll;

package/dist/views/planner/PlannerWeek.svelte

@@ -18,10 +18,11 @@
 import { useCalendarContext } from "../shared/context.svelte.js";
 import EventContent from "../shared/EventContent.svelte";
 import { createClock } from "../../core/clock.svelte.js";
+import { fitParts } from "../../text-fit.js";
 import { DAY_MS, HOUR_MS, sod, addDaysMs } from "../../core/time.js";
 import { startOfWeek as sowFn, isAllDay, isMultiDay, segmentForDay } from "../../core/time.js";
 import { fmtH, fmtTime, fmtDuration, weekdayShort, weekdayLong } from "../../core/locale.js";
-let { mode = "week", mondayStart = true, locale, height = 520, events = [], style = "", focusDate, oneventclick, oneventcreate, selectedEventId = null, readOnly = false, visibleHours } = $props();
+let { mode = "week", mondayStart = true, locale, height = 520, events = [], style = "", focusDate, oneventclick, oneventcreate, onexternaldrop, selectedEventId = null, readOnly = false, visibleHours } = $props();
 // ── Context ────────────────────────────────────────
 const ctx = useCalendarContext();
 const L = $derived(ctx.labels);
@@ -326,6 +327,40 @@ function blockedRangeLabel(dayMs, slotStart, slotEnd) {
 	return `${fmtTime(new Date(dayMs + slotStart * HOUR_MS), locale)} – ${fmtTime(new Date(dayMs + slotEnd * HOUR_MS), locale)}`;
 }
 // ── Status label (aria) ────────────────────────────
+// ─── Block parts ────────────────────────────────
+// A block stacks time, title and room, and a short one cannot hold all
+// three. The same ladder the scroller runs on width runs here on height:
+// time and title are anchors, the room is given up first. The line costs
+// are .tw-ev-body's — 3px padding each side, 1px gaps, the parts' own
+// line-heights — so the threshold is derived rather than picked. ROOM_AIR
+// keeps the old breathing room: a block that fits the room to the pixel
+// looked crammed, and the hand-set cutoff it replaces (56px) allowed for it.
+const BODY_PAD_Y = 6;
+const LINE_GAP = 1;
+const TIME_LINE = 11 * 1.1;
+const TITLE_LINE = 12 * 1.2;
+const ROOM_LINE = 10 * 1.2;
+const ROOM_AIR = 9;
+function blockParts(ev, height) {
+	return fitParts([
+		{
+			key: "time",
+			size: TIME_LINE,
+			priority: 0
+		},
+		{
+			key: "title",
+			size: TITLE_LINE + LINE_GAP,
+			priority: 0
+		},
+		{
+			key: "room",
+			text: ev.location ?? "",
+			size: ROOM_LINE + LINE_GAP + ROOM_AIR,
+			priority: 1
+		}
+	], height - BODY_PAD_Y);
+}
 function statusText(ev) {
 	if (ev.status === "cancelled") return ` (${L.cancelled})`;
 	if (ev.status === "tentative") return ` (${L.tentative})`;
@@ -354,6 +389,13 @@ function ghostForDay(dayMs) {
 		showTime: cs === Math.max(s, dayMs)
 	};
 }
+/** The drag as the time axis sees it: the segment holding its start. */
+const axisGhost = $derived.by(() => {
+	if (!drag?.active || !drag.payload) return null;
+	const s = drag.payload.start.getTime();
+	const day = dayCols.find((d) => s >= d.ms && s < d.ms + 24 * HOUR_MS);
+	return day ? ghostForDay(day.ms) : null;
+});
 // ── Drag-to-create (mouse: sweep; touch: long-press) ──
 // Mouse movement below CREATE_THRESHOLD stays a plain click. On touch a
 // vertical drag must remain a scroll, so create only arms after a ~350ms
@@ -392,6 +434,26 @@ function startColsCreate() {
 	drag.beginCreate(new Date(crAnchorMs), new Date(crAnchorMs + SNAP_MS));
 	addTouchScrollBlock();
 }
+// ── External drop (HTML5 DnD) ──────────────────────
+function onColsDragOver(e) {
+	if (!onexternaldrop || readOnly) return;
+	const day = dayCols[pointerDayIndex(e.clientX)];
+	if (!day || day.isDisabled) return;
+	e.preventDefault();
+	if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+}
+function onColsDrop(e) {
+	if (!onexternaldrop || readOnly || !e.dataTransfer) return;
+	const day = dayCols[pointerDayIndex(e.clientX)];
+	if (!day || day.isDisabled) return;
+	e.preventDefault();
+	const raw = clampToDayBand(day.ms + pointerHour(e.clientY) * HOUR_MS, day.ms);
+	const snapped = day.ms + Math.floor((raw - day.ms) / SNAP_MS) * SNAP_MS;
+	onexternaldrop({
+		start: new Date(snapped),
+		dataTransfer: e.dataTransfer
+	});
+}
 function onColsPointerDown(e) {
 	if (e.button !== 0 || !drag || !oneventcreate || readOnly) return;
 	if (e.target.closest(".tw-ev, .tw-ghost")) return;
@@ -736,8 +798,13 @@ function onWindowKeydown(e) {
 							<span class="tw-gutter-lb" style:top="{i * HOUR_H}px">{fmtH(startHour + i, locale)}</span>
 						{/if}
 					{/each}
+					{#if axisGhost}
+						<!-- The axis reads the drag to the minute, at both edges. -->
+						<span class="tw-gutter-drag" style:top="{axisGhost.top}px">{fmtTime(axisGhost.start, locale)}</span>
+						<span class="tw-gutter-drag" style:top="{axisGhost.top + axisGhost.height}px">{fmtTime(axisGhost.end, locale)}</span>
+					{/if}
 					{#if nowY !== null && weekHasToday}
-						<span class="tw-gutter-now" style:top="{nowY}px"></span>
+						<span class="tw-gutter-now" style:top="{nowY}px">{fmtTime(new Date(clock.tick), locale)}</span>
 					{/if}
 				</div>
 
@@ -748,6 +815,8 @@ function onWindowKeydown(e) {
 					bind:this={colsEl}
 					onclick={handleColsClick}
 					onpointerdown={onColsPointerDown}
+					ondragover={onColsDragOver}
+					ondrop={onColsDrop}
 					oncontextmenu={onColsContextMenu}
 					role="presentation"
 				>
@@ -808,6 +877,7 @@ function onWindowKeydown(e) {
 									class:tw-ev--tentative={p.ev.status === 'tentative'}
 									class:tw-ev--full={p.ev.status === 'full'}
 									class:tw-ev--limited={p.ev.status === 'limited'}
+									class:tw-ev--past={p.ev.end.getTime() < clock.tick}
 									class:tw-ev--short={p.height < 44}
 									class:tw-ev--compact={p.height < 34}
 									style:top="{p.top}px"
@@ -827,9 +897,10 @@ function onWindowKeydown(e) {
 									<div class="tw-ev-stripe" aria-hidden="true"></div>
 									<div class="tw-ev-body">
 										<EventContent event={p.ev}>
+											{@const parts = blockParts(p.ev, p.height)}
 											<span class="tw-ev-time">{fmtTime(p.ev.start, locale)} – {fmtTime(p.ev.end, locale)}</span>
 											<span class="tw-ev-title">{p.ev.title}</span>
-											{#if p.ev.location && p.height > 56}
+											{#if parts.room}
 												<span class="tw-ev-loc">{p.ev.location}</span>
 											{/if}
 										</EventContent>
@@ -1137,13 +1208,23 @@ function onWindowKeydown(e) {
 		white-space: nowrap;
 	}
 
-	.tw-gutter-now {
+	/* The clock beside the now line, and the drag's edges while it lasts —
+	   both sit on the surface so they cover the hour label beneath. */
+	.tw-gutter-now,
+	.tw-gutter-drag {
 		position: absolute;
-		right: -3px;
-		width: 6px;
-		height: 6px;
-		border-radius: 50%;
-		background: var(--dt-accent, #2563eb);
+		right: 3px;
+		transform: translateY(-50%);
+		padding: 1px 3px;
+		border-radius: 3px;
+		background: var(--dt-surface, var(--dt-bg, #fff));
+		font: 600 10px/1.2 var(--dt-mono, ui-monospace, monospace);
+		color: var(--dt-accent, #2563eb);
+		white-space: nowrap;
+		z-index: 2;
+	}
+	.tw-gutter-now {
+		opacity: 0.75;
 		transform: translateY(-50%);
 		z-index: 2;
 	}
@@ -1187,7 +1268,11 @@ function onWindowKeydown(e) {
 	.tw-col--today { background: var(--dt-today-bg, rgba(37, 99, 235, 0.04)); }
 	/* Dim past days with a wash, never a subtree opacity (event contrast) */
 	.tw-col--past {
-		background: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 2.5%, transparent);
+		background: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent);
+	}
+	/* What has already happened steps back; a cancelled block keeps its own look. */
+	.tw-ev--past:not(.tw-ev--cancelled) {
+		opacity: 0.6;
 	}
 	.tw-col--weekend:not(.tw-col--today):not(.tw-col--past) {
 		background: var(--dt-weekend-bg, rgba(0, 0, 0, 0.012));
@@ -1235,9 +1320,9 @@ function onWindowKeydown(e) {
 		position: absolute;
 		left: 0;
 		right: 0;
-		height: 2px;
-		background: var(--dt-accent, #2563eb);
-		box-shadow: 0 0 6px var(--dt-glow, rgba(37, 99, 235, 0.25));
+		height: 0;
+		border-top: 1px dotted var(--dt-accent, #2563eb);
+		opacity: 0.7;
 		z-index: 12;
 		pointer-events: none;
 		transform: translateY(-1px);

package/dist/views/planner/PlannerWeek.svelte.d.ts

@@ -13,6 +13,13 @@ interface Props {
         start: Date;
         end: Date;
     }) => void;
+    /** Something dragged in from OUTSIDE the calendar (HTML5 drag and drop —
+     *  a class chip, a template) dropped on the grid: `start` is the pointer's
+     *  time snapped to the grid, `dataTransfer` whatever the source set. */
+    onexternaldrop?: (info: {
+        start: Date;
+        dataTransfer: DataTransfer;
+    }) => void;
     selectedEventId?: string | null;
     readOnly?: boolean;
     /** Visible hour range [startHour, endHour) */

package/dist/views/shared/chip-fit.svelte.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The measuring half of chip labels: one ResizeObserver for a whole view, the
+ * fonts read from a hidden probe so they are known before the first chip of a
+ * kind renders, and a width cache cleared when webfonts settle.
+ *
+ * The deciding half is `fitParts` (pure, in text-fit.ts). A view owns the
+ * ladder — which parts it could show, in which order it gives them up.
+ */
+import { type ChipPart } from '../../text-fit.js';
+export interface ChipFitOptions {
+    /** Selector for the box one chip gets; its content width is the budget. */
+    slot: string;
+    /** Font key → selector. Point these at a hidden probe, not at a live chip:
+     *  a chip that is currently dropped cannot tell anyone what font it wanted. */
+    fonts: Record<string, string>;
+}
+export interface ChipFit {
+    /** Content width of one slot, px. 0 until measured (SSR, first paint). */
+    readonly width: number;
+    /** The probed fonts, as canvas font strings, by key. */
+    readonly fonts: Record<string, string>;
+    /** `{@attach fit.watch}` on the element whose resize resizes the chips. */
+    watch(root: HTMLElement): () => void;
+    /** Which parts fit; `reserve` is what the chip spends on itself (padding). */
+    parts(list: readonly ChipPart[], reserve?: number): Record<string, boolean>;
+}
+export declare function createChipFit(options: ChipFitOptions): ChipFit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nomideusz/svelte-calendar",
-  "version": "0.16.0",
+  "version": "0.20.0",
   "description": "A themeable Svelte 5 calendar with Day and Week views — Planner and Agenda.",
   "type": "module",
   "sideEffects": [
@@ -45,19 +45,19 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "8.0.0-next.3",
-    "@sveltejs/adapter-vercel": "7.0.0-next.6",
-    "@sveltejs/kit": "3.0.0-next.23",
+    "@sveltejs/adapter-auto": "8.0.0-next.4",
+    "@sveltejs/adapter-vercel": "7.0.0-next.9",
+    "@sveltejs/kit": "3.0.0-next.27",
     "@sveltejs/package": "3.0.0-next.7",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@types/node": "^22.20.0",
     "@vercel/analytics": "^1.6.1",
     "jsdom": "^29.1.1",
     "marked": "^17.0.6",
-    "svelte": "^5.56.9",
+    "svelte": "^5.57.0",
     "svelte-check": "^4.7.1",
     "typescript": "^6.0.3",
-    "vite": "^8.2.1",
+    "vite": "^8.3.0",
     "vitest": "^4.1.10"
   },
   "dependencies": {