@nomideusz/svelte-calendar 0.13.0 → 0.14.0

package/README.md

@@ -1,5 +1,7 @@
 # @nomideusz/svelte-calendar
 
+[![npm](https://badgen.net/npm/v/@nomideusz/svelte-calendar)](https://www.npmjs.com/package/@nomideusz/svelte-calendar) [![license](https://badgen.net/badge/license/MIT/blue)](https://github.com/nomideusz/svelte-calendar/blob/main/LICENSE)
+
 A themeable **Svelte 5** calendar with **Day/Week Planner & Agenda** views, touch-first mobile views, and a smart auto-theme that adapts to any page.
 
 **[Live demo → svelte-calendar.xyz](https://svelte-calendar.xyz/)**

package/dist/calendar/Calendar.svelte

@@ -57,6 +57,7 @@ let {
   visibleHours,
   initialDate,
   snapInterval = 15,
+  minColumnWidth = 110,
   showModePills = true,
   showNavigation = true,
   equalDays = false,
@@ -132,7 +133,7 @@ const effectiveTheme = $derived(theme === auto && autoTheme !== false ? probedTh
 const effectiveAdapter = $derived(
   timezone ? wrapAdapterWithTimezone(adapter, timezone) : adapter
 );
-const store = $derived(createEventStore(effectiveAdapter));
+const store = createEventStore(() => effectiveAdapter);
 const viewState = createViewState(untrack(() => ({
   view: activeViewId ?? views[0]?.id,
   mondayStart,
@@ -256,6 +257,9 @@ setContext("calendar", {
   get snapInterval() {
     return snapInterval;
   },
+  get minColumnWidth() {
+    return minColumnWidth;
+  },
   get eventSnippet() {
     return eventSnippet;
   },

package/dist/calendar/Calendar.svelte.d.ts

@@ -57,6 +57,13 @@ interface Props {
     initialDate?: Date;
     /** Drag snap interval in minutes (default: 15) */
     snapInterval?: number;
+    /**
+     * Minimum width (px) of a day column in planner views (default: 110).
+     * Below the resulting total the grid scrolls horizontally. Lower it when
+     * the calendar shares its row with a sidebar and the whole week must stay
+     * visible without scrolling.
+     */
+    minColumnWidth?: number;
     /** Show the Day/Week mode pills (default: true) */
     showModePills?: boolean;
     /** Show prev/next/today navigation controls (default: true) */

package/dist/engine/event-store.svelte.d.ts

@@ -26,5 +26,11 @@ export interface EventStore {
 }
 /**
  * Create a reactive event store backed by a CalendarAdapter.
+ *
+ * Pass a getter instead of an adapter when the adapter identity can change
+ * (a `$derived` adapter, a host that rebuilds it to force a refetch): the
+ * store then stays alive across the swap and reloads, instead of being torn
+ * down and rebuilt with an empty event map — which reads as every event
+ * blinking out and reappearing.
  */
-export declare function createEventStore(adapter: CalendarAdapter): EventStore;
+export declare function createEventStore(adapter: CalendarAdapter | (() => CalendarAdapter)): EventStore;

package/dist/engine/event-store.svelte.js

@@ -19,11 +19,20 @@ import { SvelteMap } from 'svelte/reactivity';
 import { sod, DAY_MS } from '../core/time.js';
 /**
  * Create a reactive event store backed by a CalendarAdapter.
+ *
+ * Pass a getter instead of an adapter when the adapter identity can change
+ * (a `$derived` adapter, a host that rebuilds it to force a refetch): the
+ * store then stays alive across the swap and reloads, instead of being torn
+ * down and rebuilt with an empty event map — which reads as every event
+ * blinking out and reappearing.
  */
 export function createEventStore(adapter) {
+    const getAdapter = typeof adapter === 'function' ? adapter : () => adapter;
     let eventMap = new SvelteMap();
     let loading = $state(false);
     let error = $state(null);
+    /** Guards against an older in-flight load pruning a newer one's result */
+    let loadSeq = 0;
     // Derived array view of the map — consumers read this.
     const eventArray = $derived([...eventMap.values()]);
     // ── Internal helpers ──
@@ -48,11 +57,21 @@ export function createEventStore(adapter) {
             return error;
         },
         async load(range) {
+            const seq = ++loadSeq;
             loading = true;
             error = null;
             try {
-                const fetched = await adapter.fetchEvents(range);
-                // Merge: upsert fetched, don't blow away events outside this range
+                const fetched = await getAdapter().fetchEvents(range);
+                if (seq !== loadSeq)
+                    return; // superseded by a newer load
+                // Merge: upsert fetched, don't blow away events outside this range.
+                // Inside the range the adapter is authoritative — drop what it no
+                // longer returns, or deleted/moved events linger until remount.
+                const keep = new Set(fetched.map((ev) => ev.id));
+                for (const ev of [...eventMap.values()]) {
+                    if (!keep.has(ev.id) && overlaps(ev, range.start, range.end))
+                        removeEvent(ev.id);
+                }
                 for (const ev of fetched) {
                     upsertEvent(ev);
                 }
@@ -61,7 +80,8 @@ export function createEventStore(adapter) {
                 error = e instanceof Error ? e.message : String(e);
             }
             finally {
-                loading = false;
+                if (seq === loadSeq)
+                    loading = false;
             }
         },
         forRange(start, end) {
@@ -76,12 +96,12 @@ export function createEventStore(adapter) {
             return eventMap.get(id);
         },
         async add(eventData) {
-            if (!adapter.createEvent)
+            if (!getAdapter().createEvent)
                 throw new Error('Adapter is read-only: createEvent not implemented');
             loading = true;
             error = null;
             try {
-                const created = await adapter.createEvent(eventData);
+                const created = await getAdapter().createEvent(eventData);
                 upsertEvent(created);
                 return created;
             }
@@ -94,12 +114,12 @@ export function createEventStore(adapter) {
             }
         },
         async update(id, patch) {
-            if (!adapter.updateEvent)
+            if (!getAdapter().updateEvent)
                 throw new Error('Adapter is read-only: updateEvent not implemented');
             loading = true;
             error = null;
             try {
-                const updated = await adapter.updateEvent(id, patch);
+                const updated = await getAdapter().updateEvent(id, patch);
                 upsertEvent(updated);
             }
             catch (e) {
@@ -111,12 +131,12 @@ export function createEventStore(adapter) {
             }
         },
         async remove(id) {
-            if (!adapter.deleteEvent)
+            if (!getAdapter().deleteEvent)
                 throw new Error('Adapter is read-only: deleteEvent not implemented');
             loading = true;
             error = null;
             try {
-                await adapter.deleteEvent(id);
+                await getAdapter().deleteEvent(id);
                 removeEvent(id);
             }
             catch (e) {
@@ -138,8 +158,12 @@ export function createEventStore(adapter) {
                 await this.update(id, { start: newStart, end: newEnd });
             }
             catch (e) {
-                // Revert optimistic update on failure
-                if (existing)
+                // Revert optimistic update on failure — except for a read-only
+                // adapter, where the HOST owns persistence (Calendar forwards to
+                // oneventmove). Reverting there snaps the block back to its old
+                // slot for the length of the host's round-trip.
+                const msg = e instanceof Error ? e.message : '';
+                if (existing && !msg.includes('read-only'))
                     upsertEvent(existing);
                 throw e;
             }

package/dist/views/planner/PlannerWeek.svelte

@@ -53,7 +53,7 @@ const disabledSet = $derived(ctx.disabledSet);
 const SNAP_MS = $derived(ctx.snapInterval * 6e4);
 const HOUR_H = 48;
 const GUTTER_W = 48;
-const MIN_COL_W = 110;
+const MIN_COL_W = $derived(ctx.minColumnWidth);
 const ALLDAY_MAX = 3;
 const startHour = $derived(visibleHours?.[0] ?? 0);
 const endHour = $derived(visibleHours?.[1] ?? 24);
@@ -135,7 +135,6 @@ const layoutByDay = $derived.by(() => {
     const infos = [];
     for (const ev of events) {
       if (isAllDay(ev) || isMultiDay(ev)) continue;
-      if (ev.id === movingId) continue;
       const isResizing = rsP?.eventId === ev.id;
       const s0 = isResizing ? rsP.start.getTime() : ev.start.getTime();
       const e0 = isResizing ? rsP.end.getTime() : ev.end.getTime();
@@ -143,7 +142,7 @@ const layoutByDay = $derived.by(() => {
       const sMs = Math.max(s0, bandStart);
       const eMs = Math.min(e0, bandEnd);
       if (eMs <= sMs) continue;
-      infos.push({ ev, startMs: sMs, endMs: eMs, isResizing, col: 0, totalCols: 1 });
+      infos.push({ ev, startMs: sMs, endMs: eMs, isResizing, isMoving: ev.id === movingId, col: 0, totalCols: 1 });
     }
     infos.sort((a, b) => a.startMs - b.startMs || b.endMs - a.endMs);
     const par = infos.map((_, i) => i);
@@ -185,7 +184,8 @@ const layoutByDay = $derived.by(() => {
         height: Math.max(24, (inf.endMs - inf.startMs) / HOUR_MS * HOUR_H),
         col: inf.col,
         totalCols: inf.totalCols,
-        isResizing: inf.isResizing
+        isResizing: inf.isResizing,
+        isMoving: inf.isMoving
       }))
     );
   }
@@ -222,8 +222,41 @@ $effect(() => {
     el.scrollTop = (targetHour - startHour) * HOUR_H;
   });
 });
+let rafId = 0;
+let rafRun = null;
+let rectCache = null;
+function perFrame(handler) {
+  return (e) => {
+    rafRun = () => {
+      rectCache = colsEl?.getBoundingClientRect() ?? null;
+      try {
+        handler(e);
+      } finally {
+        rectCache = null;
+      }
+    };
+    if (rafId) return;
+    rafId = requestAnimationFrame(flushFrame);
+  };
+}
+function flushFrame() {
+  if (rafId) {
+    cancelAnimationFrame(rafId);
+    rafId = 0;
+  }
+  const run = rafRun;
+  rafRun = null;
+  run?.();
+}
+function cancelFrame() {
+  if (rafId) {
+    cancelAnimationFrame(rafId);
+    rafId = 0;
+  }
+  rafRun = null;
+}
 function colsRect() {
-  return colsEl.getBoundingClientRect();
+  return rectCache ?? colsEl.getBoundingClientRect();
 }
 function pointerDayIndex(clientX) {
   const r = colsRect();
@@ -339,7 +372,7 @@ function onColsPointerDown(e) {
   window.addEventListener("pointerup", onColsCreateUp, { once: true });
   window.addEventListener("pointercancel", onColsCreateCancel, { once: true });
 }
-function onColsCreateMove(e) {
+const onColsCreateMove = perFrame((e) => {
   if (!drag) return;
   if (!crStarted) {
     if (longPressTimer !== null) {
@@ -357,8 +390,9 @@ function onColsCreateMove(e) {
     new Date(Math.min(crAnchorMs, snapped)),
     new Date(Math.max(crAnchorMs + SNAP_MS, snapped))
   );
-}
+});
 function cleanupColsCreate() {
+  cancelFrame();
   clearLongPress();
   removeTouchScrollBlock();
   window.removeEventListener("pointermove", onColsCreateMove);
@@ -367,6 +401,7 @@ function cleanupColsCreate() {
   crStarted = false;
 }
 function onColsCreateUp() {
+  if (crStarted) flushFrame();
   if (drag && crStarted) {
     suppressColsClick = true;
     commitDragCtx?.();
@@ -421,7 +456,7 @@ function onEventPointerDown(e, ev) {
   window.addEventListener("pointerup", onEvUp, { once: true });
   window.addEventListener("pointercancel", onEvCancel, { once: true });
 }
-function onEvMove(e) {
+const onEvMove = perFrame((e) => {
   const ev = evDragEvent;
   if (!drag || !ev || !evDragMovable) return;
   if (!evDragStarted) {
@@ -434,8 +469,9 @@ function onEvMove(e) {
   const raw = pointerTimeMs(e.clientX, e.clientY) - evGrabOffsetMs;
   const snapped = Math.round(raw / SNAP_MS) * SNAP_MS;
   drag.updatePointer(new Date(snapped), new Date(snapped + duration));
-}
+});
 function cleanupEvDrag() {
+  cancelFrame();
   window.removeEventListener("pointermove", onEvMove);
   window.removeEventListener("pointerup", onEvUp);
   window.removeEventListener("pointercancel", onEvCancel);
@@ -444,6 +480,7 @@ function cleanupEvDrag() {
   evDragEvent = null;
 }
 function onEvUp() {
+  if (evDragStarted) flushFrame();
   if (!evDragStarted && evDragEvent) {
     oneventclick?.(evDragEvent);
   } else if (evDragStarted && drag) {
@@ -474,7 +511,7 @@ function onResizePointerDown(e, ev, edge) {
   window.addEventListener("pointerup", onResizeUp, { once: true });
   window.addEventListener("pointercancel", onResizeCancel, { once: true });
 }
-function onResizeMove(e) {
+const onResizeMove = perFrame((e) => {
   const ev = rsEvent;
   if (!drag || !ev) return;
   if (!rsStarted) {
@@ -493,8 +530,9 @@ function onResizeMove(e) {
     const start = Math.min(snapped, ev.end.getTime() - SNAP_MS);
     drag.updatePointer(new Date(start), ev.end);
   }
-}
+});
 function cleanupResize() {
+  cancelFrame();
   removeTouchScrollBlock();
   window.removeEventListener("pointermove", onResizeMove);
   window.removeEventListener("pointerup", onResizeUp);
@@ -503,6 +541,7 @@ function cleanupResize() {
   rsEvent = null;
 }
 function onResizeUp() {
+  if (rsStarted) flushFrame();
   if (drag && rsStarted) {
     suppressColsClick = true;
     commitDragCtx?.();
@@ -568,6 +607,7 @@ function onWindowKeydown(e) {
 	class="tw"
 	class:tw--auto={autoHeight}
 	style={style || undefined}
+	style:--tw-col-min="{MIN_COL_W}px"
 	style:height={autoHeight ? undefined : (height ? `${height}px` : '100%')}
 	role="region"
 	aria-label={L.weekAhead}
@@ -703,6 +743,7 @@ function onWindowKeydown(e) {
 									class:tw-ev--selected={selectedEventId === p.ev.id}
 									class:tw-ev--current={isCurrent}
 									class:tw-ev--resizing={p.isResizing}
+									class:tw-ev--moving={p.isMoving}
 									class:tw-ev--readonly={p.ev.data?.readOnly}
 									class:tw-ev--cancelled={p.ev.status === 'cancelled'}
 									class:tw-ev--tentative={p.ev.status === 'tentative'}
@@ -857,7 +898,7 @@ function onWindowKeydown(e) {
 
 	.tw-hd {
 		flex: 1 1 0;
-		min-width: 110px;
+		min-width: var(--tw-col-min, 110px);
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -923,7 +964,7 @@ function onWindowKeydown(e) {
 
 	.tw-ad-cell {
 		flex: 1 1 0;
-		min-width: 110px;
+		min-width: var(--tw-col-min, 110px);
 		display: flex;
 		flex-direction: column;
 		gap: 2px;
@@ -1075,7 +1116,7 @@ function onWindowKeydown(e) {
 	/* ─── Day column ─────────────────────────────────── */
 	.tw-col {
 		flex: 1 1 0;
-		min-width: 110px;
+		min-width: var(--tw-col-min, 110px);
 		position: relative;
 		border-left: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
 		box-sizing: border-box;
@@ -1197,6 +1238,12 @@ function onWindowKeydown(e) {
 		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
 		cursor: ns-resize;
 	}
+	/* Origin of an in-flight move: still there, clearly no longer the subject. */
+	.tw-ev--moving {
+		opacity: 0.3;
+		pointer-events: none;
+		box-shadow: none;
+	}
 	/* Status treatments: token-level dims + a non-opacity signal
 	   (strikethrough / border style) — consistent with the other views. */
 	.tw-ev--cancelled {

package/dist/views/shared/context.svelte.d.ts

@@ -8,6 +8,7 @@ export interface CalendarContext {
     readonly drag: DragState | undefined;
     readonly commitDrag: (() => void) | undefined;
     readonly snapInterval: number;
+    readonly minColumnWidth: number;
     readonly equalDays: boolean;
     readonly showDates: boolean;
     readonly hideDays: number[] | undefined;

package/dist/views/shared/context.svelte.js

@@ -28,6 +28,7 @@ export function useCalendarContext() {
         get drag() { return raw?.drag; },
         get commitDrag() { return raw?.commitDrag; },
         get snapInterval() { return raw?.snapInterval ?? 15; },
+        get minColumnWidth() { return raw?.minColumnWidth ?? 110; },
         get equalDays() { return raw?.equalDays ?? false; },
         get showDates() { return raw?.showDates ?? true; },
         get hideDays() { return raw?.hideDays; },

package/package.json

@@ -1,74 +1,75 @@
 {
-	"name": "@nomideusz/svelte-calendar",
-	"version": "0.13.0",
-	"description": "A themeable Svelte 5 calendar with Day and Week views — Planner and Agenda.",
-	"type": "module",
-	"license": "MIT",
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js",
-			"default": "./dist/index.js"
-		},
-		"./widget": "./widget/widget.js"
-	},
-	"files": [
-		"dist",
-		"widget",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"package": "svelte-kit sync && svelte-package",
-		"package:watch": "svelte-kit sync && svelte-package --watch",
-		"build:widget": "vite build --config vite.config.widget.ts",
-		"prepublishOnly": "npm run package",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync && svelte-package",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"test": "vitest run",
-		"test:watch": "vitest"
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^7.0.1",
-		"@sveltejs/kit": "^2.69.1",
-		"@sveltejs/package": "^2.5.8",
-		"@sveltejs/vite-plugin-svelte": "^6.2.4",
-		"@types/node": "^22.20.0",
-		"@vercel/analytics": "^1.6.1",
-		"jsdom": "^29.1.1",
-		"marked": "^17.0.6",
-		"svelte": "^5.56.4",
-		"svelte-check": "^4.7.1",
-		"typescript": "^5.9.3",
-		"vite": "^7.3.6",
-		"vitest": "^4.1.9"
-	},
-	"dependencies": {
-		"date-fns": "^4.4.0",
-		"date-fns-tz": "^3.2.0"
-	},
-	"keywords": [
-		"svelte",
-		"calendar",
-		"scheduler",
-		"timeline",
-		"week",
-		"day",
-		"booking",
-		"svelte5"
-	],
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/nomideusz/svelte-calendar"
-	},
-	"homepage": "https://svelte-calendar.xyz/"
+  "name": "@nomideusz/svelte-calendar",
+  "version": "0.14.0",
+  "description": "A themeable Svelte 5 calendar with Day and Week views — Planner and Agenda.",
+  "type": "module",
+  "sideEffects": false,
+  "license": "MIT",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./widget": "./widget/widget.js"
+  },
+  "files": [
+    "dist",
+    "widget",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "package": "svelte-kit sync && svelte-package",
+    "package:watch": "svelte-kit sync && svelte-package --watch",
+    "build:widget": "vite build --config vite.config.widget.ts",
+    "prepublishOnly": "npm run package",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync && svelte-package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/kit": "^2.69.1",
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@types/node": "^22.20.0",
+    "@vercel/analytics": "^1.6.1",
+    "jsdom": "^29.1.1",
+    "marked": "^17.0.6",
+    "svelte": "^5.56.4",
+    "svelte-check": "^4.7.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.6",
+    "vitest": "^4.1.9"
+  },
+  "dependencies": {
+    "date-fns": "^4.4.0",
+    "date-fns-tz": "^3.2.0"
+  },
+  "keywords": [
+    "svelte",
+    "calendar",
+    "scheduler",
+    "timeline",
+    "week",
+    "day",
+    "booking",
+    "svelte5"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nomideusz/svelte-calendar"
+  },
+  "homepage": "https://svelte-calendar.xyz/"
 }