@nomideusz/svelte-calendar 0.8.0 → 0.10.0

package/dist/core/timezone.js

@@ -51,3 +51,34 @@ export function formatInTimeZone(date, timezone, options = {}, locale) {
         timeZone: timezone,
     }).format(d);
 }
+export function wrapAdapterWithTimezone(adapter, timezone) {
+    const zoneEvent = (ev) => ({
+        ...ev,
+        start: toZonedTime(ev.start, timezone),
+        end: toZonedTime(ev.end, timezone),
+    });
+    const unzonePartial = (obj) => ({
+        ...obj,
+        ...(obj.start instanceof Date ? { start: fromZonedTime(obj.start, timezone) } : {}),
+        ...(obj.end instanceof Date ? { end: fromZonedTime(obj.end, timezone) } : {}),
+    });
+    const wrapped = {
+        async fetchEvents(range) {
+            const events = await adapter.fetchEvents({
+                start: fromZonedTime(range.start, timezone),
+                end: fromZonedTime(range.end, timezone),
+            });
+            return events.map(zoneEvent);
+        },
+    };
+    if (adapter.createEvent) {
+        wrapped.createEvent = async (event) => zoneEvent(await adapter.createEvent(unzonePartial(event)));
+    }
+    if (adapter.updateEvent) {
+        wrapped.updateEvent = async (id, patch) => zoneEvent(await adapter.updateEvent(id, unzonePartial(patch)));
+    }
+    if (adapter.deleteEvent) {
+        wrapped.deleteEvent = (id) => adapter.deleteEvent(id);
+    }
+    return wrapped;
+}

package/dist/headless/create-calendar.svelte.js

@@ -42,15 +42,18 @@
 import { untrack } from 'svelte';
 import { createEventStore } from '../engine/event-store.svelte.js';
 import { createViewState } from '../engine/view-state.svelte.js';
+import { toZonedTime, fromZonedTime, wrapAdapterWithTimezone } from '../core/timezone.js';
 import { createSelection } from '../engine/selection.svelte.js';
 import { createDragState } from '../engine/drag.svelte.js';
 import { createClock } from '../core/clock.svelte.js';
 import { sod, DAY_MS, HOUR_MS, startOfWeek as sowFn, isAllDay, isMultiDay, segmentForDay, } from '../core/time.js';
 import { monthLong, weekdayLong, weekdayShort } from '../core/locale.js';
 export function createCalendar(options) {
-    const { adapter, mondayStart: initialMondayStart = true, initialDate, locale, visibleHours, snapInterval = 15, equalDays = false, hideDays, blockedSlots, disabledDates, days: initialDayCount = 7, readOnly = false, minDuration, maxDuration, oneventclick, oneventcreate, oneventmove, } = options;
+    const { adapter, mondayStart: initialMondayStart = true, initialDate: rawInitialDate, locale, visibleHours, snapInterval = 15, equalDays = false, hideDays, blockedSlots, disabledDates, days: initialDayCount = 7, readOnly = false, minDuration, maxDuration, oneventclick, oneventcreate, oneventmove, } = options;
     // ── Create engine ────────────────────────────────────
-    const store = createEventStore(adapter);
+    const timezone = options.timezone;
+    const initialDate = rawInitialDate && timezone ? toZonedTime(rawInitialDate, timezone) : rawInitialDate;
+    const store = createEventStore(timezone ? wrapAdapterWithTimezone(adapter, timezone) : adapter);
     const viewState = createViewState({
         view: options.view ?? 'week-planner',
         mondayStart: initialMondayStart,
@@ -60,7 +63,8 @@ export function createCalendar(options) {
     });
     const selection = createSelection();
     const drag = createDragState();
-    const clock = createClock();
+    const clock = createClock(timezone);
+    const unzoneDate = (d) => (timezone ? fromZonedTime(d, timezone) : d);
     // ── Computed ──────────────────────────────────────────
     const disabledSet = $derived(new Set(disabledDates?.map((d) => sod(d.getTime())) ?? []));
     const startHour = visibleHours?.[0] ?? 0;
@@ -281,7 +285,7 @@ export function createCalendar(options) {
                 await store.move(payload.eventId, start, end);
                 const ev = store.byId(payload.eventId);
                 if (ev)
-                    oneventmove?.(ev, start, end);
+                    oneventmove?.(ev, unzoneDate(start), unzoneDate(end));
             }
             catch (e) {
                 const msg = e instanceof Error ? e.message : '';
@@ -290,7 +294,7 @@ export function createCalendar(options) {
                 if (msg.includes('read-only')) {
                     const ev = store.byId(payload.eventId);
                     if (ev)
-                        oneventmove?.(ev, start, end);
+                        oneventmove?.(ev, unzoneDate(start), unzoneDate(end));
                 }
                 else if (!msg.includes('not found')) {
                     console.warn('[calendar] drag commit failed:', e);
@@ -299,7 +303,9 @@ export function createCalendar(options) {
             }
         }
         else if (mode === 'create') {
-            oneventcreate?.({ start, end });
+            oneventcreate?.(timezone
+                ? { start: fromZonedTime(start, timezone), end: fromZonedTime(end, timezone) }
+                : { start, end });
         }
         return result;
     }

package/dist/headless/types.d.ts

@@ -22,6 +22,8 @@ export interface HeadlessCalendarOptions {
     mondayStart?: boolean;
     /** Initial date to focus on (default: today) */
     initialDate?: Date;
+    /** Render in an IANA timezone; events, "now" and day boundaries shift. */
+    timezone?: string;
     /** BCP 47 locale tag (e.g. 'en-US', 'pl-PL') */
     locale?: string;
     /** Visible hour range [startHour, endHour). Default: [0, 24] */

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { createClock, startOfWeek, fmtH, fmtTime, fmtDuration, weekdayShort, wee
 export type { Clock, TimelineEvent, BlockedSlot, DaySegment, CalendarLabels, EventStatus, TextMeasure, TextMeasureOptions, ContentFit, } from './core/index.js';
 export { auto, neutral, midnight, presets } from './theme/index.js';
 export { probeHostTheme, observeHostTheme } from './theme/index.js';
+export { wrapAdapterWithTimezone } from './core/timezone.js';
 export type { PresetName, AutoThemeOptions } from './theme/index.js';
 export { createCalendar, createAgenda } from './headless/index.js';
 export type { HeadlessCalendarOptions, HeadlessCalendar, HeadlessDay, HeadlessWeek, TodayQueue, HeaderContext, NavigationContext, AgendaOptions, HeadlessAgenda, } from './headless/index.js';

package/dist/index.js

@@ -14,5 +14,6 @@ export { createClock, startOfWeek, fmtH, fmtTime, fmtDuration, weekdayShort, wee
 // ─── Themes ─────────────────────────────────────────────
 export { auto, neutral, midnight, presets } from './theme/index.js';
 export { probeHostTheme, observeHostTheme } from './theme/index.js';
+export { wrapAdapterWithTimezone } from './core/timezone.js';
 // ─── Headless API ───────────────────────────────────────
 export { createCalendar, createAgenda } from './headless/index.js';

package/dist/theme/auto.js

@@ -99,6 +99,23 @@ function mix(c1, c2, t) {
         Math.round(c1[2] + (c2[2] - c1[2]) * t),
     ];
 }
+// ── Shadow-aware DOM walking ────────────────────────────
+/**
+ * Parent element that hops shadow boundaries. When a node is a direct child
+ * of a ShadowRoot, `parentElement` is null — continue the walk from the
+ * shadow host so probes can still see the host page (the embeddable widget
+ * mounts the calendar inside a shadow root).
+ */
+function parentAcrossShadow(node) {
+    if (node.parentElement)
+        return node.parentElement;
+    const root = node.getRootNode();
+    return typeof ShadowRoot !== 'undefined' &&
+        root instanceof ShadowRoot &&
+        root.host instanceof HTMLElement
+        ? root.host
+        : null;
+}
 // ── Text color detection ────────────────────────────────
 /**
  * Common CSS variable names for text / foreground color used by popular frameworks.
@@ -164,7 +181,7 @@ function probeTextColor(el, bg) {
                 break;
             }
         }
-        node = node.parentElement;
+        node = parentAcrossShadow(node);
     }
     // 3. Walk up the DOM reading *computed* color
     node = el;
@@ -178,7 +195,7 @@ function probeTextColor(el, bg) {
             }
         }
         catch { /* ignore */ }
-        node = node.parentElement;
+        node = parentAcrossShadow(node);
     }
     // Pick the first candidate with adequate contrast against the background.
     // WCAG AA large-text minimum is 3:1.
@@ -367,7 +384,7 @@ function probeBackground(el) {
             if (rgb)
                 return result(rgb);
         }
-        node = node.parentElement;
+        node = parentAcrossShadow(node);
     }
     // 3. Fall back to computed backgroundColor (may be mid-transition, but
     //    still correct when no transition is active).
@@ -382,7 +399,7 @@ function probeBackground(el) {
         catch {
             // getComputedStyle may fail in test environments
         }
-        node = node.parentElement;
+        node = parentAcrossShadow(node);
     }
     // 4. Ultimate fallback: check color-scheme preference
     if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
@@ -400,7 +417,9 @@ function probeBackground(el) {
 export function probeHostTheme(el, options = {}) {
     // Start probing from the parent — `el` itself is the calendar root, which
     // has its own --dt-bg fallback in CSS. We need the *host page's* context.
-    const host = el.parentElement ?? el;
+    // (Shadow-aware: inside a shadow root the parent hop lands on the shadow
+    // host, i.e. the <day-calendar> element in the light DOM.)
+    const host = parentAcrossShadow(el) ?? el;
     const htmlRoot = (host.closest('body') ?? host) instanceof HTMLElement
         ? (host.closest('body') ?? host)
         : document.body;
@@ -445,7 +464,7 @@ export function probeHostTheme(el, options = {}) {
     // ── Accent derivatives ──
     const accentDim = isDark ? 0.15 : 0.12;
     const glow = isDark ? 0.30 : 0.25;
-    const todayBg = isDark ? 0.03 : 0.04;
+    const todayBg = isDark ? 0.07 : 0.07;
     // Ensure accent is readable on the background — adjust lightness if needed
     const accentL = isDark
         ? Math.max(aL, 0.45) // bright enough on dark
@@ -475,6 +494,8 @@ export function probeHostTheme(el, options = {}) {
         `--dt-btn-text: ${btnText}`,
         `--dt-scrollbar: ${rgba(...borderRgb, scrollAlpha)}`,
         `--dt-success: ${rgba(...successRgb, 0.7)}`,
+        `--dt-weekend-bg: ${rgba(...borderRgb, isDark ? 0.03 : 0.02)}`,
+        `--dt-hover: ${rgba(...borderRgb, isDark ? 0.06 : 0.04)}`,
         `--dt-sans: ${fonts.sans}`,
         `--dt-mono: ${fonts.mono}`,
     ];

package/dist/theme/presets.d.ts

@@ -26,13 +26,13 @@ export declare const auto = "";
  * Neutral — explicit light theme. White bg, blue accent, inherits host fonts.
  * Use when embedding standalone without ancestor --dt-* vars.
  */
-export declare const neutral = "\n\t--dt-stage-bg: #ffffff;\n\t--dt-bg: #ffffff;\n\t--dt-surface: #f9fafb;\n\t--dt-border: rgba(0, 0, 0, 0.08);\n\t--dt-border-day: rgba(0, 0, 0, 0.14);\n\t--dt-text: rgba(0, 0, 0, 0.87);\n\t--dt-text-2: rgba(0, 0, 0, 0.54);\n\t--dt-text-3: rgba(0, 0, 0, 0.38);\n\t--dt-accent: #2563eb;\n\t--dt-accent-dim: rgba(37, 99, 235, 0.12);\n\t--dt-glow: rgba(37, 99, 235, 0.25);\n\t--dt-today-bg: rgba(37, 99, 235, 0.04);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(0, 0, 0, 0.1);\n\t--dt-success: rgba(22, 163, 74, 0.7);\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
+export declare const neutral = "\n\t--dt-stage-bg: #ffffff;\n\t--dt-bg: #ffffff;\n\t--dt-surface: #f9fafb;\n\t--dt-border: rgba(0, 0, 0, 0.08);\n\t--dt-border-day: rgba(0, 0, 0, 0.14);\n\t--dt-text: rgba(0, 0, 0, 0.87);\n\t--dt-text-2: rgba(0, 0, 0, 0.54);\n\t--dt-text-3: rgba(0, 0, 0, 0.38);\n\t--dt-accent: var(--asini-accent, #2563eb);\n\t--dt-accent-dim: color-mix(in srgb, var(--dt-accent) 12%, transparent);\n\t--dt-glow: color-mix(in srgb, var(--dt-accent) 25%, transparent);\n\t--dt-today-bg: color-mix(in srgb, var(--dt-accent) 7%, transparent);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(0, 0, 0, 0.1);\n\t--dt-success: rgba(22, 163, 74, 0.7);\n\t--dt-weekend-bg: rgba(0, 0, 0, 0.02);\n\t--dt-hover: rgba(0, 0, 0, 0.04);\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
 /** Midnight Industrial — dark charcoal + red accent, tech monitoring */
-export declare const midnight = "\n\t--dt-stage-bg: #080a0f;\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;\n\t--dt-border: rgba(148, 163, 184, 0.07);\n\t--dt-border-day: rgba(148, 163, 184, 0.14);\n\t--dt-text: rgba(226, 232, 240, 0.85);\n\t--dt-text-2: rgba(148, 163, 184, 0.55);\n\t--dt-text-3: rgba(100, 116, 139, 0.55);\n\t--dt-accent: #ef4444;\n\t--dt-accent-dim: rgba(239, 68, 68, 0.18);\n\t--dt-glow: rgba(239, 68, 68, 0.35);\n\t--dt-today-bg: rgba(239, 68, 68, 0.02);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(148, 163, 184, 0.12);\n\t--dt-success: rgba(74, 222, 128, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n";
+export declare const midnight = "\n\t--dt-stage-bg: #080a0f;\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;\n\t--dt-border: rgba(148, 163, 184, 0.07);\n\t--dt-border-day: rgba(148, 163, 184, 0.14);\n\t--dt-text: rgba(226, 232, 240, 0.85);\n\t--dt-text-2: rgba(148, 163, 184, 0.55);\n\t--dt-text-3: rgba(100, 116, 139, 0.55);\n\t--dt-accent: #ef4444;\n\t--dt-accent-dim: rgba(239, 68, 68, 0.18);\n\t--dt-glow: rgba(239, 68, 68, 0.35);\n\t--dt-today-bg: rgba(239, 68, 68, 0.07);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(148, 163, 184, 0.12);\n\t--dt-success: rgba(74, 222, 128, 0.7);\n\t--dt-weekend-bg: rgba(148, 163, 184, 0.03);\n\t--dt-hover: rgba(148, 163, 184, 0.06);\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
 /** All available presets keyed by name */
 export declare const presets: {
     readonly auto: "";
-    readonly neutral: "\n\t--dt-stage-bg: #ffffff;\n\t--dt-bg: #ffffff;\n\t--dt-surface: #f9fafb;\n\t--dt-border: rgba(0, 0, 0, 0.08);\n\t--dt-border-day: rgba(0, 0, 0, 0.14);\n\t--dt-text: rgba(0, 0, 0, 0.87);\n\t--dt-text-2: rgba(0, 0, 0, 0.54);\n\t--dt-text-3: rgba(0, 0, 0, 0.38);\n\t--dt-accent: #2563eb;\n\t--dt-accent-dim: rgba(37, 99, 235, 0.12);\n\t--dt-glow: rgba(37, 99, 235, 0.25);\n\t--dt-today-bg: rgba(37, 99, 235, 0.04);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(0, 0, 0, 0.1);\n\t--dt-success: rgba(22, 163, 74, 0.7);\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
-    readonly midnight: "\n\t--dt-stage-bg: #080a0f;\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;\n\t--dt-border: rgba(148, 163, 184, 0.07);\n\t--dt-border-day: rgba(148, 163, 184, 0.14);\n\t--dt-text: rgba(226, 232, 240, 0.85);\n\t--dt-text-2: rgba(148, 163, 184, 0.55);\n\t--dt-text-3: rgba(100, 116, 139, 0.55);\n\t--dt-accent: #ef4444;\n\t--dt-accent-dim: rgba(239, 68, 68, 0.18);\n\t--dt-glow: rgba(239, 68, 68, 0.35);\n\t--dt-today-bg: rgba(239, 68, 68, 0.02);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(148, 163, 184, 0.12);\n\t--dt-success: rgba(74, 222, 128, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n";
+    readonly neutral: "\n\t--dt-stage-bg: #ffffff;\n\t--dt-bg: #ffffff;\n\t--dt-surface: #f9fafb;\n\t--dt-border: rgba(0, 0, 0, 0.08);\n\t--dt-border-day: rgba(0, 0, 0, 0.14);\n\t--dt-text: rgba(0, 0, 0, 0.87);\n\t--dt-text-2: rgba(0, 0, 0, 0.54);\n\t--dt-text-3: rgba(0, 0, 0, 0.38);\n\t--dt-accent: var(--asini-accent, #2563eb);\n\t--dt-accent-dim: color-mix(in srgb, var(--dt-accent) 12%, transparent);\n\t--dt-glow: color-mix(in srgb, var(--dt-accent) 25%, transparent);\n\t--dt-today-bg: color-mix(in srgb, var(--dt-accent) 7%, transparent);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(0, 0, 0, 0.1);\n\t--dt-success: rgba(22, 163, 74, 0.7);\n\t--dt-weekend-bg: rgba(0, 0, 0, 0.02);\n\t--dt-hover: rgba(0, 0, 0, 0.04);\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
+    readonly midnight: "\n\t--dt-stage-bg: #080a0f;\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;\n\t--dt-border: rgba(148, 163, 184, 0.07);\n\t--dt-border-day: rgba(148, 163, 184, 0.14);\n\t--dt-text: rgba(226, 232, 240, 0.85);\n\t--dt-text-2: rgba(148, 163, 184, 0.55);\n\t--dt-text-3: rgba(100, 116, 139, 0.55);\n\t--dt-accent: #ef4444;\n\t--dt-accent-dim: rgba(239, 68, 68, 0.18);\n\t--dt-glow: rgba(239, 68, 68, 0.35);\n\t--dt-today-bg: rgba(239, 68, 68, 0.07);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(148, 163, 184, 0.12);\n\t--dt-success: rgba(74, 222, 128, 0.7);\n\t--dt-weekend-bg: rgba(148, 163, 184, 0.03);\n\t--dt-hover: rgba(148, 163, 184, 0.06);\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
 };
 export type PresetName = keyof typeof presets;

package/dist/theme/presets.js

@@ -35,14 +35,15 @@ export const neutral = `
 	--dt-text: rgba(0, 0, 0, 0.87);
 	--dt-text-2: rgba(0, 0, 0, 0.54);
 	--dt-text-3: rgba(0, 0, 0, 0.38);
-	--dt-accent: #2563eb;
-	--dt-accent-dim: rgba(37, 99, 235, 0.12);
-	--dt-glow: rgba(37, 99, 235, 0.25);
-	--dt-today-bg: rgba(37, 99, 235, 0.04);
+	--dt-accent: var(--asini-accent, #2563eb);
+	--dt-accent-dim: color-mix(in srgb, var(--dt-accent) 12%, transparent);
+	--dt-glow: color-mix(in srgb, var(--dt-accent) 25%, transparent);
+	--dt-today-bg: color-mix(in srgb, var(--dt-accent) 7%, transparent);
 	--dt-btn-text: #fff;
 	--dt-scrollbar: rgba(0, 0, 0, 0.1);
 	--dt-success: rgba(22, 163, 74, 0.7);
-	--dt-serif: inherit;
+	--dt-weekend-bg: rgba(0, 0, 0, 0.02);
+	--dt-hover: rgba(0, 0, 0, 0.04);
 	--dt-sans: inherit;
 	--dt-mono: ui-monospace, 'SFMono-Regular', monospace;
 `;
@@ -59,11 +60,14 @@ export const midnight = `
 	--dt-accent: #ef4444;
 	--dt-accent-dim: rgba(239, 68, 68, 0.18);
 	--dt-glow: rgba(239, 68, 68, 0.35);
-	--dt-today-bg: rgba(239, 68, 68, 0.02);
+	--dt-today-bg: rgba(239, 68, 68, 0.07);
 	--dt-btn-text: #fff;
 	--dt-scrollbar: rgba(148, 163, 184, 0.12);
 	--dt-success: rgba(74, 222, 128, 0.7);
-	--dt-serif: Georgia, 'Times New Roman', serif;
+	--dt-weekend-bg: rgba(148, 163, 184, 0.03);
+	--dt-hover: rgba(148, 163, 184, 0.06);
+	--dt-sans: inherit;
+	--dt-mono: ui-monospace, 'SFMono-Regular', monospace;
 `;
 /** All available presets keyed by name */
 export const presets = { auto, neutral, midnight };