@nomideusz/svelte-calendar 0.8.0 → 0.10.0

package/README.md

@@ -657,19 +657,25 @@ The `locale` prop controls date/time formatting (BCP 47):
 
 `setDefaultLocale('de-DE')` sets the locale globally instead of per component (`getDefaultLocale()` reads it back, `is24HourLocale(tag)` tells you how times will format).
 
-Override UI labels for full translation:
+Override UI labels per calendar with the `labels` prop — it's reactive (swap it to switch language live) and instance-scoped (two calendars on one page can carry different languages):
 
-```ts
-import { setLabels } from '@nomideusz/svelte-calendar';
-
-setLabels({
+```svelte
+<Calendar {adapter} locale="de-DE" labels={{
   today: 'Heute', day: 'Tag', week: 'Woche',
   noEvents: 'Keine Termine',
   nMore: (n) => `+${n} weitere`,
-});
+}} />
 ```
 
-Call `resetLabels()` to restore English defaults (`defaultLabels` exports them; `getLabels()` reads the active set).
+Or set labels globally before mount:
+
+```ts
+import { setLabels } from '@nomideusz/svelte-calendar';
+
+setLabels({ today: 'Heute', day: 'Tag', week: 'Woche' });
+```
+
+The `labels` prop merges over the global set. Call `resetLabels()` to restore English defaults (`defaultLabels` exports them; `getLabels()` reads the active set). Note: global `setLabels()` calls after mount don't re-render already-mounted calendars — use the `labels` prop for dynamic language switching. Standalone primitives (`DayHeader`, `EventBlock`, …) always read the global set.
 
 <details>
 <summary>All label keys</summary>
@@ -706,7 +712,20 @@ Call `resetLabels()` to restore English defaults (`defaultLabels` exports them;
 
 ## Timezone Support
 
-Convert events between timezones using the built-in helpers:
+Render the whole calendar in any IANA timezone — events, the now-indicator
+and day boundaries all shift; ranges passed to `oneventcreate`/`oneventmove`
+convert back to real instants:
+
+```svelte
+<Calendar {adapter} timezone="Europe/Warsaw" />
+```
+
+Under the hood the adapter is wrapped with `wrapAdapterWithTimezone` (also
+exported) so views do plain local-time math on a zoned wall-clock plane.
+Known limit shared by every wall-clock calendar: the repeated hour of a DST
+fall-back is ambiguous, writes inside it resolve to one of the two instants.
+
+Convert events manually with the built-in helpers:
 
 ```ts
 import { toZonedTime, fromZonedTime, nowInZone } from '@nomideusz/svelte-calendar';
@@ -771,6 +790,8 @@ Drop into any HTML page — no build tools needed. Registers a `<day-calendar>`
 ></day-calendar>
 ```
 
+The widget renders inside shadow DOM: host-page CSS (resets, theme stylesheets) cannot affect the calendar and calendar styles never leak out, while the `auto` theme still probes the host page's colors and fonts across the shadow boundary.
+
 | Attribute | Description |
 |-----------|-------------|
 | `api` | REST endpoint — fetched as `GET {api}?start=...&end=...` |

package/dist/calendar/Calendar.svelte

@@ -23,13 +23,14 @@ import { createViewState } from "../engine/view-state.svelte.js";
 import { createSelection } from "../engine/selection.svelte.js";
 import { createDragState } from "../engine/drag.svelte.js";
 import { onMount } from "svelte";
-import { getLabels } from "../core/locale.js";
+import { getLabels, fmtWeekRange } from "../core/locale.js";
 import { auto } from "../theme/presets.js";
 import { probeHostTheme, observeHostTheme } from "../theme/auto.js";
 import Planner from "../views/planner/Planner.svelte";
 import Agenda from "../views/agenda/Agenda.svelte";
 import Mobile from "../views/mobile/Mobile.svelte";
 import MonthGrid from "../views/month/MonthGrid.svelte";
+import { wrapAdapterWithTimezone, toZonedTime, fromZonedTime } from "../core/timezone.js";
 const MOBILE_BREAKPOINT = 768;
 const DEFAULT_VIEWS = [
   { id: "day-planner", label: "Planner", mode: "day", component: Planner },
@@ -51,6 +52,7 @@ let {
   borderRadius = 12,
   dir,
   locale,
+  labels: labelsProp,
   readOnly = false,
   visibleHours,
   initialDate,
@@ -80,15 +82,23 @@ let {
   ondatechange,
   oneventhover,
   ondayclick,
-  onerror
+  onerror,
+  timezone
 } = $props();
-const effectiveCreate = $derived(readOnly ? void 0 : oneventcreate);
-const effectiveMove = $derived(readOnly ? void 0 : oneventmove);
+const unzone = (d) => timezone ? fromZonedTime(d, timezone) : d;
+const effectiveCreate = $derived(
+  readOnly || !oneventcreate ? void 0 : (range) => oneventcreate({ start: unzone(range.start), end: unzone(range.end) })
+);
+const effectiveMove = $derived(
+  readOnly || !oneventmove ? void 0 : (ev, start, end) => oneventmove(ev, unzone(start), unzone(end))
+);
 function handleEventClick(ev) {
   selection.select(ev.id);
   oneventclick?.(ev);
 }
-let containerWidth = $state(0);
+let containerWidth = $state(
+  typeof window !== "undefined" && window.matchMedia?.(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`).matches ? MOBILE_BREAKPOINT - 1 : 0
+);
 const isMobileContainer = $derived(containerWidth > 0 && containerWidth < MOBILE_BREAKPOINT);
 const useMobile = $derived(
   mobileProp === "auto" ? isMobileContainer : Boolean(mobileProp)
@@ -114,12 +124,17 @@ onMount(() => {
   };
 });
 const effectiveTheme = $derived(theme === auto && autoTheme !== false ? probedTheme : theme);
-const store = $derived(createEventStore(adapter));
+const effectiveAdapter = $derived(
+  timezone ? wrapAdapterWithTimezone(adapter, timezone) : adapter
+);
+const store = $derived(createEventStore(effectiveAdapter));
 const viewState = createViewState(untrack(() => ({
   view: activeViewId ?? views[0]?.id,
   mondayStart,
-  initialDate,
+  // Focus lives on the zoned plane too — day boundaries follow the zone.
+  initialDate: initialDate && timezone ? toZonedTime(initialDate, timezone) : initialDate,
   dayCount: days,
+  timezone,
   modeForView: (viewId) => views.find((v) => v.id === viewId)?.mode
 })));
 const selection = createSelection();
@@ -221,7 +236,10 @@ setContext("calendar", {
     return oneventhover;
   },
   get ondayclick() {
-    return ondayclick;
+    return ondayclick ?? defaultDayClick;
+  },
+  get timezone() {
+    return timezone;
   },
   // Config (reactive via getters)
   get readOnly() {
@@ -272,6 +290,9 @@ setContext("calendar", {
   get compact() {
     return compact;
   },
+  get labels() {
+    return mergedLabels;
+  },
   // Load range (read/write)
   get loadRange() {
     return viewLoadRange;
@@ -332,6 +353,13 @@ const dateLabel = $derived.by(() => {
       day: "numeric"
     });
   }
+  if (viewState.mode === "week") {
+    return fmtWeekRange(
+      viewState.range.start.getTime(),
+      locale,
+      viewState.range.end.getTime() - 1
+    );
+  }
   return viewState.focusDate.toLocaleDateString(locale, {
     month: "long",
     year: "numeric"
@@ -341,19 +369,77 @@ const modes = $derived.by(() => {
   const g = new Set(desktopViews.map((v) => v.mode));
   return ["day", "week", "month"].filter((key) => g.has(key));
 });
-const L = $derived(getLabels());
+const mergedLabels = $derived(
+  labelsProp ? { ...getLabels(), ...labelsProp } : getLabels()
+);
+const L = $derived(mergedLabels);
+let lastViewLabel = $state(void 0);
+$effect(() => {
+  const current = views.find((v) => v.id === viewState.view);
+  if (current && current.mode !== "month") lastViewLabel = current.label;
+});
 function switchMode(g) {
-  const currentLabel = desktopViews.find((v) => v.id === viewState.view)?.label ?? activeView?.label;
-  const match = desktopViews.find((v) => v.mode === g && v.label === currentLabel);
+  const currentView = desktopViews.find((v) => v.id === viewState.view) ?? activeView;
+  const preferredLabel = currentView?.mode === "month" ? lastViewLabel ?? currentView?.label : currentView?.label;
+  const match = desktopViews.find((v) => v.mode === g && v.label === preferredLabel);
   const fallback = desktopViews.find((v) => v.mode === g);
   const target = match ?? fallback;
   if (target) viewState.setView(target.id);
 }
+const labelsForMode = $derived.by(() => {
+  const seen = [];
+  for (const v of desktopViews) {
+    if (v.mode === viewState.mode && !seen.includes(v.label)) seen.push(v.label);
+  }
+  return seen;
+});
+function switchLabel(label) {
+  const target = desktopViews.find((v) => v.mode === viewState.mode && v.label === label);
+  if (target) viewState.setView(target.id);
+}
+const defaultDayClick = $derived.by(() => {
+  const target = desktopViews.find((v) => v.mode === "day" && v.label === lastViewLabel) ?? desktopViews.find((v) => v.mode === "day");
+  if (!target) return void 0;
+  return (date) => {
+    viewState.setFocusDate(date);
+    viewState.setView(target.id);
+  };
+});
 const viewIncludesToday = $derived.by(() => {
-  const now = Date.now();
+  const now = /* @__PURE__ */ new Date();
+  if (viewState.mode === "month") {
+    const f = viewState.focusDate;
+    return f.getMonth() === now.getMonth() && f.getFullYear() === now.getFullYear();
+  }
   const { start, end } = viewState.range;
-  return now >= start.getTime() && now < end.getTime();
+  return now.getTime() >= start.getTime() && now.getTime() < end.getTime();
 });
+const resolvedDir = $derived.by(() => {
+  if (dir) return dir;
+  if (!locale) return void 0;
+  try {
+    const info = new Intl.Locale(locale);
+    const direction = info.textInfo?.direction ?? info.getTextInfo?.().direction;
+    return direction === "rtl" ? "rtl" : void 0;
+  } catch {
+    return void 0;
+  }
+});
+function handleShortcuts(e) {
+  if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey) return;
+  const t = e.target;
+  if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
+  if (e.key === "t" || e.key === "T") {
+    e.preventDefault();
+    viewState.goToday();
+  } else if (e.key === "ArrowLeft") {
+    e.preventDefault();
+    viewState.prev();
+  } else if (e.key === "ArrowRight") {
+    e.preventDefault();
+    viewState.next();
+  }
+}
 const headerCtx = $derived({
   dateLabel,
   mode: viewState.mode,
@@ -375,6 +461,7 @@ const navCtx = $derived({
 });
 </script>
 
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -- shortcut keys (t/←/→) act on events bubbling from the calendar's focusable controls; the region itself is not a tab stop -->
 <div
 	class="cal"
 	bind:this={calEl}
@@ -382,8 +469,10 @@ const navCtx = $derived({
 	class:cal--auto={heightProp === 'auto'}
 	role="region"
 	aria-label={L.calendar}
-	dir={dir}
+	aria-busy={store.loading || undefined}
+	dir={resolvedDir}
 	lang={locale}
+	onkeydown={handleShortcuts}
 >
 	<!-- ─── Custom header snippet (replaces all chrome) ─── -->
 	{#if headerSnippet}
@@ -393,21 +482,15 @@ const navCtx = $derived({
 	{:else if useMobile && (showNavigation || (showModePills && modes.length > 1) || dateLabel)}
 		<div class="cal-m-hd">
 			<div class="cal-m-left">
-				{#if navigationSnippet}
-					{@render navigationSnippet(navCtx)}
-				{:else if showNavigation}
-					<button class="cal-m-nav" onclick={() => viewState.prev()} aria-label={viewState.mode === 'day' ? L.previousDay : viewState.mode === 'month' ? L.previousMonth : L.previousWeek}>
-						<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" aria-hidden="true"><path d="M10 3 5 8l5 5"/></svg>
-					</button>
-				{/if}
-
 				{#if showModePills && modes.length > 1}
-					<div class="cal-m-pills" role="group" aria-label={L.viewMode}>
-						{#each modes as g}
+					<div class="cal-m-pills" role="radiogroup" aria-label={L.viewMode}>
+						{#each modes as g (g)}
 							<button
+								type="button"
 								class="cal-m-pill"
 								class:cal-m-pill--active={viewState.mode === g}
-								aria-pressed={viewState.mode === g}
+								role="radio"
+								aria-checked={viewState.mode === g}
 								onclick={() => switchMode(g)}
 							>
 								{g === 'day' ? L.day : g === 'week' ? L.week : L.month}
@@ -417,26 +500,32 @@ const navCtx = $derived({
 				{/if}
 			</div>
 
-			<span class="cal-m-title">{dateLabel}</span>
+			<span class="cal-m-title" role="status" aria-live="polite" aria-atomic="true">{dateLabel}</span>
 
 			<div class="cal-m-right">
-				{#if !navigationSnippet && showNavigation}
-					<button class="cal-m-nav" onclick={() => viewState.next()} aria-label={viewState.mode === 'day' ? L.nextDay : viewState.mode === 'month' ? L.nextMonth : L.nextWeek}>
+				{#if navigationSnippet}
+					{@render navigationSnippet(navCtx)}
+				{:else if showNavigation}
+					<!-- Always rendered (disabled on today) so navigating never shifts layout -->
+					<button
+						type="button"
+						class="cal-m-today"
+						onclick={() => viewState.goToday()}
+						disabled={viewIncludesToday}
+						title={L.goToToday}
+					>
+						{L.today}
+					</button>
+					<button type="button" class="cal-m-nav" onclick={() => viewState.prev()} aria-label={viewState.mode === 'day' ? L.previousDay : viewState.mode === 'month' ? L.previousMonth : L.previousWeek}>
+						<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" aria-hidden="true"><path d="M10 3 5 8l5 5"/></svg>
+					</button>
+					<button type="button" class="cal-m-nav" onclick={() => viewState.next()} aria-label={viewState.mode === 'day' ? L.nextDay : viewState.mode === 'month' ? L.nextMonth : L.nextWeek}>
 						<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>
 					</button>
 				{/if}
 			</div>
 		</div>
 
-		<!-- Today pill — floats below header, doesn't affect header flow -->
-		{#if !navigationSnippet && showNavigation && !viewIncludesToday}
-			<div class="cal-m-today-bar">
-				<button class="cal-m-today" onclick={() => viewState.goToday()}>
-					{L.today}
-				</button>
-			</div>
-		{/if}
-
 	<!-- ─── Desktop header ─── -->
 	{:else if showNavigation || (showModePills && modes.length > 1) || dateLabel}
 		<div class="cal-hd">
@@ -444,28 +533,52 @@ const navCtx = $derived({
 				{#if navigationSnippet}
 					{@render navigationSnippet(navCtx)}
 				{:else if showNavigation}
-					{#if !viewIncludesToday}
-						<button class="cal-hd-today" onclick={() => viewState.goToday()} title={L.goToToday}>
-							{L.today}
-						</button>
-					{/if}
-					<button class="cal-hd-btn" onclick={() => viewState.prev()} aria-label={viewState.mode === 'day' ? L.previousDay : viewState.mode === 'month' ? L.previousMonth : L.previousWeek}>
+					<!-- Always rendered (disabled on today) so navigating never shifts the centered title -->
+					<button
+						type="button"
+						class="cal-hd-today"
+						onclick={() => viewState.goToday()}
+						disabled={viewIncludesToday}
+						title={L.goToToday}
+					>
+						{L.today}
+					</button>
+					<button type="button" class="cal-hd-btn" onclick={() => viewState.prev()} aria-label={viewState.mode === 'day' ? L.previousDay : viewState.mode === 'month' ? L.previousMonth : L.previousWeek}>
 						<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" aria-hidden="true"><path d="M10 3 5 8l5 5"/></svg>
 					</button>
-					<button class="cal-hd-btn" onclick={() => viewState.next()} aria-label={viewState.mode === 'day' ? L.nextDay : viewState.mode === 'month' ? L.nextMonth : L.nextWeek}>
+					<button type="button" class="cal-hd-btn" onclick={() => viewState.next()} aria-label={viewState.mode === 'day' ? L.nextDay : viewState.mode === 'month' ? L.nextMonth : L.nextWeek}>
 						<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>
 					</button>
 				{/if}
 			</div>
-			<span class="cal-hd-title">{dateLabel}</span>
+			<span class="cal-hd-title" role="status" aria-live="polite" aria-atomic="true">{dateLabel}</span>
 			<div class="cal-hd-side cal-hd-side--end">
+				{#if showModePills && labelsForMode.length > 1}
+					<!-- View-type switcher (e.g. Planner ↔ Agenda) for the current mode -->
+					<div class="cal-pills cal-pills--labels" role="radiogroup" aria-label={L.viewMode}>
+						{#each labelsForMode as label (label)}
+							<button
+								type="button"
+								class="cal-pill"
+								class:cal-pill--active={activeView?.label === label}
+								role="radio"
+								aria-checked={activeView?.label === label}
+								onclick={() => switchLabel(label)}
+							>
+								{label}
+							</button>
+						{/each}
+					</div>
+				{/if}
 				{#if showModePills && modes.length > 1}
-					<div class="cal-pills" role="group" aria-label={L.viewMode}>
-						{#each modes as g}
+					<div class="cal-pills" role="radiogroup" aria-label={L.viewMode}>
+						{#each modes as g (g)}
 							<button
+								type="button"
 								class="cal-pill"
 								class:cal-pill--active={viewState.mode === g}
-								aria-pressed={viewState.mode === g}
+								role="radio"
+								aria-checked={viewState.mode === g}
 								onclick={() => switchMode(g)}
 							>
 								{g === 'day' ? L.day : g === 'week' ? L.week : L.month}
@@ -528,6 +641,7 @@ const navCtx = $derived({
 	/* ── Desktop header ── */
 	.cal-hd {
 		display: flex;
+		flex-wrap: wrap;
 		align-items: center;
 		gap: 8px;
 		padding: 8px 12px;
@@ -596,10 +710,14 @@ const navCtx = $derived({
 		transition: background 120ms, color 120ms, border-color 120ms;
 	}
 
-	.cal-hd-today:hover {
+	.cal-hd-today:hover:not(:disabled) {
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		border-color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
+	.cal-hd-today:disabled {
+		opacity: 0.45;
+		cursor: default;
+	}
 
 	.cal-pills {
 		display: flex;
@@ -670,6 +788,13 @@ const navCtx = $derived({
 		100% { transform: translateX(100%); }
 	}
 
+	@media (prefers-reduced-motion: reduce) {
+		.cal-loading {
+			animation: none;
+			background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
+		}
+	}
+
 	/* ── Mobile header (flow layout) ── */
 	.cal-m-hd {
 		display: flex;
@@ -697,8 +822,8 @@ const navCtx = $derived({
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 32px;
-		height: 32px;
+		width: 40px;
+		height: 40px;
 		border: none;
 		background: transparent;
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
@@ -734,8 +859,8 @@ const navCtx = $derived({
 		background: transparent;
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		cursor: pointer;
-		font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
-		padding: 5px 10px;
+		font: 600 12px / 1 var(--dt-sans, system-ui, sans-serif);
+		padding: 9px 12px;
 		border-radius: 6px;
 		letter-spacing: 0.04em;
 		text-transform: uppercase;
@@ -761,19 +886,13 @@ const navCtx = $derived({
 		min-width: 0;
 	}
 
-	.cal-m-today-bar {
-		display: flex;
-		justify-content: center;
-		padding: 12px 8px 6px;
-		flex-shrink: 0;
-	}
-
 	.cal-m-today {
-		font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
+		font: 600 12px / 1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-accent, #2563eb);
 		background: color-mix(in srgb, var(--dt-accent, #2563eb) 10%, transparent);
 		border: none;
-		padding: 5px 10px;
+		min-height: 40px;
+		padding: 5px 12px;
 		border-radius: 6px;
 		cursor: pointer;
 		white-space: nowrap;
@@ -783,12 +902,16 @@ const navCtx = $derived({
 		-webkit-tap-highlight-color: transparent;
 		flex-shrink: 0;
 	}
-	.cal-m-today:hover {
+	.cal-m-today:hover:not(:disabled) {
 		background: color-mix(in srgb, var(--dt-accent, #2563eb) 18%, transparent);
 	}
-	.cal-m-today:active {
+	.cal-m-today:active:not(:disabled) {
 		background: color-mix(in srgb, var(--dt-accent, #2563eb) 25%, transparent);
 	}
+	.cal-m-today:disabled {
+		opacity: 0.45;
+		cursor: default;
+	}
 	.cal-m-today:focus-visible {
 		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
 		outline-offset: 2px;

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

@@ -2,6 +2,7 @@ import { type Component, type Snippet } from 'svelte';
 import type { CalendarAdapter } from '../adapters/types.js';
 import type { CalendarViewId } from '../engine/view-state.svelte.js';
 import type { TimelineEvent, BlockedSlot } from '../core/types.js';
+import { type CalendarLabels } from '../core/locale.js';
 import type { AutoThemeOptions } from '../theme/auto.js';
 /** One view registration */
 export interface CalendarView {
@@ -42,6 +43,12 @@ interface Props {
     dir?: 'ltr' | 'rtl' | 'auto';
     /** BCP 47 locale tag (e.g. 'en-US', 'ar-SA') — sets lang and locale for formatting */
     locale?: string;
+    /**
+     * Per-instance UI label overrides (merged over the global `setLabels()` set).
+     * Reactive: changing the prop re-renders all label text, and two calendars
+     * on one page can carry different languages.
+     */
+    labels?: Partial<CalendarLabels>;
     /** Read-only mode: disables drag, resize, empty-slot creation */
     readOnly?: boolean;
     /** Visible hour range: [startHour, endHour). Crops the grid to these hours. */
@@ -116,6 +123,13 @@ interface Props {
     ondayclick?: (date: Date) => void;
     /** Surfaced instead of silent console output when loading or mutations fail. */
     onerror?: (error: Error) => void;
+    /**
+     * Render the calendar in an IANA timezone (e.g. 'Europe/Warsaw').
+     * Events, "now" and day boundaries all shift; ranges passed to
+     * oneventcreate/oneventmove convert back to real instants.
+     * Default: the viewer's local time.
+     */
+    timezone?: string;
 }
 declare const Calendar: Component<Props, {}, "">;
 type Calendar = ReturnType<typeof Calendar>;

package/dist/core/clock.svelte.d.ts

@@ -18,4 +18,4 @@ export interface Clock {
  * Must be called during component initialisation (before first await).
  * Automatically cleans up on unmount via onMount return.
  */
-export declare function createClock(): Clock;
+export declare function createClock(timezone?: string): Clock;

package/dist/core/clock.svelte.js

@@ -13,19 +13,23 @@
  */
 import { onMount } from 'svelte';
 import { sod, fmtHM, fmtS, fractionalHour } from './time.js';
+import { toZonedTime } from './timezone.js';
 /**
  * Create a shared reactive clock.
  *
  * Must be called during component initialisation (before first await).
  * Automatically cleans up on unmount via onMount return.
  */
-export function createClock() {
-    let tick = $state(Date.now());
-    let today = $state(sod(Date.now()));
+export function createClock(timezone) {
+    // With a timezone, ticks are "zoned wall-clock" epoch ms — the same plane
+    // the wrapped adapter shifts event Dates into. Views stay zone-agnostic.
+    const now = () => (timezone ? toZonedTime(Date.now(), timezone).getTime() : Date.now());
+    let tick = $state(now());
+    let today = $state(sod(tick));
     let intervalId = null;
     function start() {
         intervalId = setInterval(() => {
-            tick = Date.now();
+            tick = now();
             const sd = sod(tick);
             if (sd !== today)
                 today = sd;

package/dist/core/locale.d.ts

@@ -40,6 +40,14 @@ export interface CalendarLabels {
     nextMonth: string;
     calendar: string;
     viewMode: string;
+    /** Event status: cancelled */
+    cancelled: string;
+    /** Event status: tentative */
+    tentative: string;
+    /** Event status: fully booked */
+    full: string;
+    /** Event status: limited availability */
+    limited: string;
     dayNavigation: string;
     weekNavigation: string;
     dayPlanner: string;
@@ -64,6 +72,12 @@ export interface CalendarLabels {
     dayNOfTotal: (current: number, total: number) => string;
     /** e.g. "75% complete" */
     percentComplete: (pct: number) => string;
+    /** Relative countdown, e.g. "in 45m" */
+    inMinutes: (mins: number) => string;
+    /** Relative countdown, e.g. "in 2h 15m" / "in 2h" */
+    inHours: (hours: number, mins: number) => string;
+    /** Relative countdown, e.g. "in 3d" */
+    inDays: (days: number) => string;
 }
 /** English defaults — used unless overridden via `setLabels()`. */
 export declare const defaultLabels: CalendarLabels;
@@ -102,7 +116,7 @@ export declare function fmtDay(ms: number, todayMs: number, opts?: {
 /**
  * Format a week range label: "Feb 17 – 23, 2026" or "Jan 27 – Feb 2, 2026"
  */
-export declare function fmtWeekRange(weekStartMs: number, locale?: string): string;
+export declare function fmtWeekRange(weekStartMs: number, locale?: string, weekEndMs?: number): string;
 /**
  * Format a Date as a compact time string.
  *

package/dist/core/locale.js

@@ -38,6 +38,10 @@ export const defaultLabels = {
     nextMonth: 'Next month',
     calendar: 'Calendar',
     viewMode: 'View mode',
+    cancelled: 'cancelled',
+    tentative: 'tentative',
+    full: 'full',
+    limited: 'limited',
     dayNavigation: 'Day navigation',
     weekNavigation: 'Week navigation',
     dayPlanner: 'Day planner',
@@ -57,6 +61,9 @@ export const defaultLabels = {
     showLess: 'Show less',
     dayNOfTotal: (current, total) => `day ${current} of ${total}`,
     percentComplete: (pct) => `${pct}% complete`,
+    inMinutes: (mins) => `in ${mins}m`,
+    inHours: (hours, mins) => (mins > 0 ? `in ${hours}h ${mins}m` : `in ${hours}h`),
+    inDays: (days) => `in ${days}d`,
 };
 let _labels = { ...defaultLabels };
 /** Replace one or more UI labels. Merges with current labels. */
@@ -160,10 +167,10 @@ export function fmtDay(ms, todayMs, opts, locale) {
 /**
  * Format a week range label: "Feb 17 – 23, 2026" or "Jan 27 – Feb 2, 2026"
  */
-export function fmtWeekRange(weekStartMs, locale) {
+export function fmtWeekRange(weekStartMs, locale, weekEndMs) {
     const loc = locale ?? defaultLocale;
     const s = new Date(weekStartMs);
-    const e = new Date(weekStartMs + 6 * DAY_MS);
+    const e = new Date(weekEndMs ?? weekStartMs + 6 * DAY_MS);
     const sm = s.toLocaleDateString(loc, { month: 'short' });
     const em = e.toLocaleDateString(loc, { month: 'short' });
     const sy = s.getFullYear();

package/dist/core/timezone.d.ts

@@ -20,3 +20,15 @@ export declare function nowInZone(timezone: string): Date;
  * Returns a locale-aware string.
  */
 export declare function formatInTimeZone(date: Date | number, timezone: string, options?: Intl.DateTimeFormatOptions, locale?: string): string;
+/**
+ * Wrap a CalendarAdapter so everything it emits is expressed as wall-clock
+ * Dates in `timezone`, and everything written through it is converted back to
+ * real instants. This is how the Calendar's `timezone` prop works: views keep
+ * doing plain local-time math on an already-shifted plane.
+ *
+ * Known limit shared by every wall-clock calendar UI: during a DST fall-back
+ * the repeated hour is ambiguous on the wall clock, so writes made inside it
+ * resolve to one of the two instants (date-fns-tz picks the offset).
+ */
+import type { CalendarAdapter } from '../adapters/types.js';
+export declare function wrapAdapterWithTimezone(adapter: CalendarAdapter, timezone: string): CalendarAdapter;